/* Trait Unique — bone paper, deep ink, one vermilion (the fresh line) */
:root {
  --bone: #eee6d8;
  --bone-2: #e4d9c6;
  --sheet: #f7f2e8;
  --ink: #15120f;
  --ink-2: #3f3832;
  --ink-3: #5e564d;
  --verm: #c63b1f;
  --verm-t: #a32f19;
  --hair: rgba(21, 18, 15, .16);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, 0);
  --ease-inout: cubic-bezier(.7, 0, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-land: cubic-bezier(.17, .4, .02, .99);
  --fd: 'Noto Serif Display', 'Didot', 'Times New Roman', serif;
  --fb: var(--fd);
  --gut: clamp(16px, 4.2vw, 64px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background-color: var(--bone);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--fb);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
::selection { background: var(--verm); color: var(--sheet); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--sheet); padding: 8px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1.5px solid var(--verm); outline-offset: 4px; }
[hidden] { display: none !important; }

/* ---------- the line ---------- */
#line { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }

/* ---------- loader ---------- */
#loader { position: fixed; inset: 0; z-index: 40; background: var(--bone); display: grid; place-items: center; transition: background-color .7s var(--ease-out); }
#loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#loader .ld-name { position: absolute; left: 50%; top: calc(50% + 92px); transform: translateX(-50%); margin: 0; font-family: var(--fd); font-weight: 300; font-size: 22px; letter-spacing: .02em; white-space: nowrap; }
#loader .ld-city { position: absolute; left: 50%; top: calc(50% + 126px); transform: translateX(-50%); margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: lowercase; color: var(--ink-3); opacity: 0; transition: opacity .6s var(--ease-out) .2s; }
#loader.named .ld-city { opacity: 1; }
#loader.going { background-color: rgba(238, 230, 216, 0); pointer-events: none; }
#loader.going .ld-name, #loader.going .ld-city { opacity: 0; transition: opacity .35s var(--ease-in); }
#loader.gone { display: none; }
html:not(.js) #loader { display: none; }

/* words that land: a short blur-and-fade (text-shadow, no filter) */
.js .w { color: transparent; text-shadow: 0 0 .18em rgba(21, 18, 15, .55); opacity: 0; transition: color .55s var(--ease-out), text-shadow .55s var(--ease-out), opacity .4s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .landed .w, .js #loader.named .w { color: var(--ink); text-shadow: 0 0 0 rgba(21, 18, 15, 0); opacity: 1; }
.js .title em.w { color: transparent; }
.js .landed em.w { color: var(--ink); }

/* ---------- header ---------- */
.top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; padding: 18px var(--gut) 26px; background: linear-gradient(var(--bone) 55%, rgba(238, 230, 216, 0)); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; margin-right: auto; }
.mark { width: 46px; height: 37px; overflow: visible; }
.mark path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.js .mark { opacity: 0; transition: opacity .3s var(--ease-out); }
.js .mark.on { opacity: 1; }
.brand-name { font-family: var(--fd); font-weight: 400; font-size: 17px; letter-spacing: .01em; }
.nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--ink); opacity: .7; }
.nav a, .sound, .menu-btn { position: relative; font: inherit; font-size: 14px; letter-spacing: .01em; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.ask { position: relative; font-family: var(--fd); font-size: 17px; font-weight: 500; color: var(--verm-t); text-decoration: none; padding: 4px 0; white-space: nowrap; }
.ask-n { font-family: var(--fb); font-style: normal; font-size: 13px; color: var(--ink-3); }
.ask[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--ink); opacity: .7; }
.next { margin: 6vh 0 0; }
.next a, .next-in, .soin-note a, a.next { position: relative; font-family: var(--fd); font-size: 20px; color: var(--ink); text-decoration: none; padding: 4px 0; }
.next a::after, a.next::after, .next-in::after { content: " →"; }
.flash .next { padding-left: 8vw; }
.tool-next { flex-basis: auto; font-size: 18px; }
.next-in { display: inline-block; margin-top: 10px; font-size: 18px; }
.soin-note a { font-size: 15px; margin-left: 6px; }
.sound { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); }
.sound[aria-pressed="true"] { color: var(--ink); }
.sound-g { width: 28px; height: 12px; overflow: visible; }
.sound-g path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.menu-btn { display: none; }

/* hand-drawn scribble (SVG, redrawn 10x/s) */
.scrib { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scrib path { fill: var(--verm); }

/* mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 19; background: var(--bone); padding: 110px var(--gut) 40px; display: flex; flex-direction: column; justify-content: space-between; }
.sheet ol { list-style: none; margin: 0; padding: 0; }
.sheet li { margin: 0 0 18px; }
.sheet a { position: relative; display: inline-block; font-family: var(--fd); font-weight: 300; font-size: clamp(38px, 11vw, 64px); line-height: 1.05; color: var(--ink); text-decoration: none; padding-bottom: 8px; }
.sheet li:nth-child(even) a { margin-left: 12vw; }
.sheet a svg { position: absolute; left: 0; bottom: -2px; width: 100%; height: 12px; overflow: visible; }
.sheet a path { fill: none; stroke: var(--verm); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; }
.sheet.open a path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out); transition-delay: calc(120ms + var(--i, 0) * 70ms); }
.sheet-foot { color: var(--ink-3); font-size: 14px; margin: 0; }

/* ---------- shared ---------- */
section { padding: 0 var(--gut); }
.title { font-family: var(--fd); font-weight: 250; line-height: .9; letter-spacing: -.02em; margin: 0; }
.title em { font-style: normal; font-weight: 250; }
#h-hero em { font-style: italic; font-weight: 200; }
.sec-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(120px, 18vh, 220px); margin-bottom: clamp(48px, 8vh, 96px); }
.sec-head .title { font-size: clamp(64px, 11vw, 176px); }
.num { display: none; } /* review 2026-11-06: numerals read as a section counter, and were static vermilion */
.sec-lede { max-width: 30ch; font-size: 19px; color: var(--ink-2); margin: 28px 0 0; }
.touch { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 20px; padding-top: 128px; padding-bottom: 48px; }
.kicker { grid-column: 1 / 7; grid-row: 1; margin: 0 0 4vh; font-size: 14px; color: var(--ink-3); }
.hero h1 { grid-column: 1 / 13; grid-row: 2; font-size: clamp(88px, 16.5vw, 300px); margin-left: -.05em; white-space: nowrap; position: relative; z-index: 1; }
.hero h1 em { padding-right: .06em; }
.hero-art { grid-column: 6 / 13; grid-row: 2 / 4; align-self: start; aspect-ratio: 100 / 56; margin-top: 34%; margin-right: -2vw; }
.lede { grid-column: 1 / 5; grid-row: 3; align-self: end; font-family: var(--fd); font-size: clamp(20px, 1.7vw, 26px); font-weight: 350; line-height: 1.3; margin: 0; max-width: 22ch; }
.side { position: absolute; right: calc(var(--gut) * .45); top: 50%; writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%); margin: 0; font-size: 12px; letter-spacing: .18em; color: var(--ink-3); }
.cta { grid-column: 1 / 6; grid-row: 4; justify-self: start; position: relative; margin-top: 40px; font-size: 16px; color: var(--ink); text-decoration: none; padding: 10px 2px; }
.cta::after { content: " →"; }
.hero-note { grid-column: 8 / 13; grid-row: 4; align-self: end; justify-self: end; margin: 0; font-size: 13px; color: var(--ink-3); max-width: 30ch; text-align: right; font-family: var(--fd); }

/* ---------- photo places (2026-11-06) ----------
   A tinted print with fine hatching (engraving shade); the page's line draws its corner and sketches the shot to take
   through it. A real photo drops in with one src on .ph-img (and its data-alt as alt). */
.ph { position: relative; margin: 0; }
.ph-frame { position: relative; aspect-ratio: var(--r, 4 / 5); background-color: rgba(176, 150, 118, .16); background-image: repeating-linear-gradient(135deg, rgba(21, 18, 15, .045) 0 1px, transparent 1px 7px); box-shadow: inset 0 0 0 1px rgba(21, 18, 15, .07); }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-img[src^="data:"] { display: none; }
.ph figcaption { margin-top: 10px; font-family: var(--fd); font-size: 14px; line-height: 1.35; color: var(--ink-3); max-width: 32ch; }
.js .ph .ph-frame { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-out); }
.js .ph figcaption { opacity: 0; transition: opacity .5s var(--ease-out) .35s; }
.js .ph.landed .ph-frame { clip-path: inset(0 0 0 0); }
.js .ph.landed figcaption { opacity: 1; }
.hero-facts { position: absolute; top: 128px; right: var(--gut); margin: 0; text-align: right; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.ph-hero { grid-column: 2 / 4; grid-row: 3; align-self: start; justify-self: start; margin-top: 3.5vh; width: clamp(130px, 11.5vw, 190px); }
.ph-hero figcaption { position: absolute; left: calc(100% + 14px); bottom: 0; width: 17ch; margin: 0; font-size: 13px; }
.studio-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; margin-top: 12vh; align-items: end; }
.ph-studio { grid-column: 2 / 6; }
.studio-row .studio-note { grid-column: 8 / 12; margin: 0 0 40px; }
.ph-soin { position: absolute; left: 0; bottom: calc(100% + 14px); width: 58%; }
.ph-soin figcaption { position: absolute; left: calc(100% + 12px); bottom: 0; width: 15ch; margin: 0; font-size: 13px; }
.how { list-style: none; margin: 5vh 0 0; padding: 0; max-width: 34ch; color: var(--ink-2); font-size: 16px; counter-reset: how; }
.how li { position: relative; padding: 9px 0 9px 30px; border-top: 1px solid var(--hair); counter-increment: how; }
.how li::before { content: counter(how) "."; position: absolute; left: 0; top: 8px; font-family: var(--fd); color: var(--ink-3); }
.how em { font-family: var(--fd); font-style: normal; font-weight: 500; font-size: 18px; color: var(--ink); }

/* ---------- flash ---------- */
.flash .sec-head { padding-left: 8vw; }
.flash .num { left: 8vw; }
.wall { list-style: none; margin: 0; padding: 0 0 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 26px; }
.wall li { position: relative; }
.wall li:nth-child(1) { grid-column: 1 / 5; }
.wall li:nth-child(2) { grid-column: 6 / 9; margin-top: 18vh; }
.wall li:nth-child(3) { grid-column: 10 / 13; margin-top: -4vh; }
.wall li:nth-child(4) { grid-column: 2 / 5; margin-top: 6vh; }
.wall li:nth-child(5) { grid-column: 5 / 8; margin-top: 22vh; }
.wall li:nth-child(6) { grid-column: 9 / 13; margin-top: 2vh; }
.wall li:nth-child(7) { grid-column: 1 / 4; margin-top: 4vh; }
.wall li:nth-child(8) { grid-column: 5 / 8; margin-top: -6vh; }
.wall li:nth-child(9) { grid-column: 9 / 12; margin-top: 10vh; }
.fl { display: block; width: 100%; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fl .art { display: block; aspect-ratio: 1; width: 100%; }
.fl .cap { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; position: relative; }
.fl .no { font-family: var(--fd); font-size: 14px; color: var(--ink-3); }
.fl .nm { position: relative; font-family: var(--fd); font-size: clamp(22px, 2vw, 30px); font-weight: 350; line-height: 1.1; }
.fl .sz { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.fl.picked .no::after { content: " · dans la demande"; color: var(--ink-3); font-style: normal; font-family: var(--fb); font-size: 12px; }

/* ---------- dessine ---------- */
.dessine .sec-head { justify-items: end; text-align: right; }
.dessine .num { right: 0; }
.dessine .sec-lede { justify-self: end; }
.atelier { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 28px 4vw; align-items: start; }
.paper-wrap { position: relative; grid-row: 1 / 3; aspect-ratio: 4 / 3; background: var(--sheet); box-shadow: 0 1px 0 rgba(21, 18, 15, .08), 0 22px 40px -28px rgba(60, 40, 20, .45); transform: rotate(-1.2deg); }
#paper, #paper-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
#paper { touch-action: none; cursor: crosshair; }
#paper-fx { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { #paper { cursor: none; } }
.paper-hint { position: absolute; left: 9%; top: 12%; margin: 0; font-family: var(--fd); font-size: 18px; color: var(--ink-3); pointer-events: none; transition: opacity .3s var(--ease-in); }
.paper-hint::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verm); margin-right: 10px; vertical-align: middle; }
.paper-wrap.used .paper-hint { opacity: 0; }
.paper-warn { position: absolute; right: 6%; bottom: 6%; margin: 0; font-size: 14px; color: var(--verm-t); pointer-events: none; }
.arm-wrap { position: relative; margin-top: 4vh; margin-right: calc(var(--gut) * -1); }
#arm { display: block; width: 100%; aspect-ratio: 3 / 2; }
.skins { border: 0; margin: 10px 0 0; padding: 0; display: flex; align-items: center; gap: 10px; }
.skins legend { float: left; font-size: 13px; color: var(--ink-3); margin-right: 8px; padding: 0; }
.skins label { position: relative; cursor: pointer; }
.skins input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.skins span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(21, 18, 15, .15); transition: transform .18s var(--ease-spring); }
.skins input:checked + span { transform: scale(1.18); box-shadow: inset 0 0 0 1px rgba(21, 18, 15, .15), 0 0 0 2px var(--bone), 0 0 0 3px var(--ink); }
.skins input:focus-visible + span { outline: 1.5px solid var(--verm); outline-offset: 5px; }
.tools { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; }
.tool, .fi-add, .lift, .fi-close { position: relative; font: inherit; font-size: 15px; background: none; border: 0; color: var(--ink); padding: 8px 2px; cursor: pointer; }
.tool[disabled] { color: var(--ink-3); cursor: default; opacity: .55; }
.tool.keep:not([disabled]) { color: var(--verm-t); }
.tool.clean { font-family: var(--fd); font-size: 18px; }
.tool.clean:not([disabled])::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; border-radius: 50%; background: var(--verm); vertical-align: middle; } /* the needle, ready */
.styles { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 2px 0 0; font-size: 14px; color: var(--ink-3); }
.styles button { position: relative; font: inherit; font-family: var(--fd); font-size: 17px; color: var(--ink-2); background: none; border: 0; padding: 6px 1px; cursor: pointer; }
.styles button[aria-pressed="true"] { color: var(--ink); }
.styles button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--ink); opacity: .7; }
.tool-status { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; color: var(--ink-3); min-height: 1.5em; }

/* ---------- studio ---------- */
.studio .sec-head { padding-left: 30vw; }
.studio .num { left: 30vw; }
.artists { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.artist { position: relative; }
.artist.a1 { grid-column: 1 / 5; }
.artist.a2 { grid-column: 5 / 9; margin-top: 16vh; }
.artist.a3 { grid-column: 9 / 13; margin-top: -6vh; }
.portrait { display: block; width: 78%; aspect-ratio: 100 / 120; background: none; border: 0; padding: 0; cursor: pointer; }
.artist.a2 .portrait { margin-left: 18%; }
.artist h3 { position: relative; display: inline-block; font-family: var(--fd); font-weight: 350; font-size: clamp(26px, 2.4vw, 36px); margin: 14px 0 4px; }
.artist p { margin: 0; max-width: 28ch; color: var(--ink-2); font-size: 16px; }
.studio-note { margin: 12vh 0 0 50%; max-width: 34ch; font-family: var(--fd); font-size: 20px; color: var(--ink-2); }

/* ---------- soin ---------- */
.soin .sec-head { padding-left: 4vw; }
.soin .num { left: 4vw; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3vw; }
.step { position: relative; padding-top: 44px; }
.js .step { transition: opacity .5s var(--ease-out); }
.js .step.ahead { opacity: .45; }
.step:nth-child(even) { margin-top: 14vh; }
.dot { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.step h3 { font-family: var(--fd); font-weight: 350; font-size: 26px; margin: 0 0 8px; }
.step p { margin: 0; color: var(--ink-2); max-width: 24ch; }
.scratch { min-height: 1.6em; margin: 6vh 0 0 4vw; font-family: var(--fd); font-size: 20px; color: var(--verm-t); opacity: 0; transition: opacity .3s var(--ease-out); }
.scratch.on { opacity: 1; }
.soin-note { margin: 2vh 0 0 4vw; font-size: 13px; color: var(--ink-3); }

/* the act: soin is held while the scroll heals the line (review 2026-11-06) */
@media (min-width: 861px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js .soin { height: calc(var(--pin-h, 100vh) + 120vh); }
  .js .soin-pin { position: sticky; top: var(--pin-top, 0px); }
}

/* ---------- demande ---------- */
.demande { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 6vw; padding-bottom: 8vh; }
.demande .sec-head { align-self: start; position: sticky; top: 0; }
.demande .sec-head .title { font-size: clamp(60px, 8vw, 132px); }
.form { padding-top: clamp(120px, 18vh, 220px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
.field { grid-column: 1 / 3; position: relative; padding: 14px 0 12px; margin-bottom: 26px; }
.field.half { grid-column: auto; }
.field label { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 2px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 20px; font-family: var(--fd); font-weight: 350; color: var(--ink); background: transparent; border: 0; border-radius: 0; padding: 6px 0 8px; outline: none; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 0 var(--hair); }
.field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1 C4 4 6 6 7 7 C8 6 10 4 13 1' fill='none' stroke='%2315120f' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 24px; }
.field textarea { resize: vertical; min-height: 84px; line-height: 1.35; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 1px 0 transparent; }
.field:focus-within label { color: var(--verm-t); }
.field input:user-invalid { box-shadow: 0 1px 0 var(--verm); }
.picks-wrap { grid-column: 1 / 3; margin: 6px 0 22px; }
.picks-label { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; }
.picks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; }
.picks li { display: flex; align-items: center; gap: 10px; font-family: var(--fd); font-size: 18px; animation: pick-in .5s var(--ease-out) both; }
.picks svg { width: 44px; height: 44px; overflow: visible; }
.picks svg path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.picks button { font: inherit; font-family: var(--fb); font-size: 13px; color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 4px; }
.picks-empty { margin: 0; font-family: var(--fd); color: var(--ink-3); }
@keyframes pick-in { from { opacity: 0; transform: translateY(8px); } }
.lift { grid-column: 1 / 3; justify-self: start; font-size: 20px; font-family: var(--fd); padding: 10px 4px; }
.lift::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 12px; border-radius: 50%; background: var(--verm); vertical-align: middle; transition: transform .5s var(--ease-spring), opacity .5s var(--ease-out); }
.lifted .lift::after { transform: translateY(-14px); opacity: 0; }
.form-status { grid-column: 1 / 3; min-height: 3em; margin: 14px 0 0; color: var(--ink-2); max-width: 46ch; }

/* ---------- footer ---------- */
.foot { padding: 14vh var(--gut) 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; font-size: 14px; color: var(--ink-3); }
.fin { grid-column: 1 / 13; height: 120px; }
.foot-name { grid-column: 1 / 5; font-family: var(--fd); font-size: 32px; font-weight: 300; color: var(--ink); margin: 0; }
.foot p:nth-of-type(2) { grid-column: 5 / 9; margin: 0; }
.foot-legal { grid-column: 9 / 13; margin: 0; }
.foot-end { grid-column: 1 / 13; margin: 40px 0 0; font-family: var(--fd); text-align: right; color: var(--ink-3); }

/* ---------- fiche (dialog) ---------- */
.fiche { border: 0; padding: 0; width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--sheet); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(40, 25, 10, .5); display: none; }
.fiche[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); animation: fiche-in .55s var(--ease-out); }
.fiche.closing { animation: fiche-out .3s var(--ease-in) forwards; }
.fiche::backdrop { background: rgba(238, 230, 216, .82); }
@keyframes fiche-in { from { opacity: 0; transform: translateY(26px) rotate(-.6deg); } }
@keyframes fiche-out { to { opacity: 0; transform: translateY(14px); } }
#fi-canvas { width: 100%; aspect-ratio: 1; display: block; }
.fi-text { padding: 56px 40px 36px 8px; display: flex; flex-direction: column; }
.fi-no { margin: 0; font-family: var(--fd); color: var(--ink-3); }
.fiche h3 { font-family: var(--fd); font-weight: 250; font-size: clamp(40px, 5vw, 64px); line-height: 1; margin: 6px 0 26px; }
.fiche dl { margin: 0 0 auto; }
.fiche dl div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.fiche dt { color: var(--ink-3); font-size: 14px; }
.fiche dd { margin: 0; font-size: 16px; }
.fict { font-family: var(--fd); font-size: 13px; color: var(--ink-3); margin-left: 6px; white-space: nowrap; }
.fi-add { align-self: start; margin-top: 26px; font-family: var(--fd); font-size: 20px; }
.fi-close-f { position: absolute; top: 14px; right: 18px; margin: 0; z-index: 2; }
.fi-close { font-size: 14px; color: var(--ink-3); }

/* ---------- touch / phone ---------- */
@media (hover: none) {
  .fine { display: none; }
  .touch { display: inline; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .top { padding: 14px var(--gut) 22px; }
  .nav { display: none; }
  .menu-btn { display: inline-block; font-size: 15px; }
  .brand-name { font-size: 15px; }
  .top { gap: 16px; }
  .ask { font-size: 16px; }
  .flash .next { padding-left: 0; }
  .next a, a.next { font-size: 18px; }
  .mark { width: 40px; height: 32px; }
  .hero { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; column-gap: 12px; padding-top: 104px; padding-bottom: 28px; }
  .kicker { grid-column: 1 / 7; margin-bottom: 3vh; }
  .hero h1 { grid-column: 1 / 7; font-size: clamp(64px, 21vw, 120px); white-space: normal; line-height: .88; }
  .hero h1 em { display: block; margin-left: 18vw; }
  .hero-art { grid-column: 1 / 7; grid-row: 3; margin: 4vh -4vw 0 6vw; }
  .lede { grid-column: 1 / 6; grid-row: 4; margin-top: 4vh; font-size: 21px; }
  .side { display: none; }
  .cta { grid-column: 1 / 7; grid-row: 5; margin-top: 22px; }
  .hero-note { display: none; }
  .hero-facts { position: static; grid-column: 1 / 7; grid-row: 7; justify-self: start; text-align: left; margin: 4vh 0 0; }
  .ph-hero { grid-column: 1 / 5; grid-row: 6; justify-self: start; width: 100%; max-width: 200px; margin-top: 6vh; margin-left: 10vw; }
  .ph-hero figcaption { position: static; width: auto; margin-top: 8px; }
  .studio-row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; margin-top: 8vh; }
  .ph-studio { grid-column: 1; width: 88%; }
  .studio-row .studio-note { grid-column: 1; margin: 0 0 0 12vw; }
  .ph-soin { position: relative; left: auto; bottom: auto; width: 62%; margin-top: 18px; }
  .ph-soin figcaption { position: static; width: auto; margin-top: 8px; }
  .how { margin-top: 28px; }
  .sec-head { padding-top: 110px; margin-bottom: 44px; }
  .sec-head .title { font-size: clamp(56px, 17vw, 96px); }
  .num { top: 82px; }
  .sec-lede { font-size: 17px; }
  .flash .sec-head, .studio .sec-head, .soin .sec-head { padding-left: 0; }
  .flash .num, .studio .num, .soin .num { left: 0; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 28px; }
  .wall li:nth-child(n) { grid-column: auto; margin-top: 0; }
  .wall li:nth-child(even) { margin-top: 9vh; }
  .wall li:nth-child(odd):not(:first-child) { margin-top: -5vh; }
  .wall li:first-child { grid-column: 1 / 3; width: 72%; }
  .wall li:first-child ~ li:nth-child(even) { margin-top: 0; }
  .wall li:first-child ~ li:nth-child(odd) { margin-top: 8vh; }
  .fl .cap { flex-wrap: wrap; gap: 0 8px; }
  .fl .sz { margin-left: 0; flex-basis: 100%; }
  .fl .nm { font-size: 21px; }
  .atelier { grid-template-columns: minmax(0, 1fr); }
  .paper-wrap { grid-row: auto; margin: 0 4vw; aspect-ratio: 1 / 1; }
  .arm-wrap { margin-top: 4px; }
  #arm { aspect-ratio: 16 / 9; }
  .arm-wrap { margin-right: 0; }
  .tools { grid-column: 1; }
  .artists { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .artist.a1, .artist.a2, .artist.a3 { grid-column: 1; margin-top: 0; }
  .artist .portrait { width: 56%; }
  .artist.a2 { padding-left: 34%; }
  .artist.a2 .portrait { margin-left: 0; width: 86%; }
  .artist.a3 .portrait { margin-left: 10%; }
  .studio-note { margin: 8vh 0 0 12vw; font-size: 18px; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 54px; }
  .step, .step:nth-child(even) { margin-top: 0; padding: 0 0 0 42px; }
  .step:nth-child(even) { margin-left: 14vw; }
  .scratch, .soin-note { margin-left: 0; }
  .demande { grid-template-columns: minmax(0, 1fr); }
  .demande .sec-head { position: relative; margin-bottom: 0; }
  .form { padding-top: 24px; grid-template-columns: minmax(0, 1fr); }
  .field, .field.half, .picks-wrap, .lift, .form-status { grid-column: 1; }
  .foot { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-top: 8vh; }
  .foot > * { grid-column: 1 !important; }
  .fin { height: 90px; }
  .fiche[open] { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  #fi-canvas { width: 72%; margin: 18px auto 0; }
  .fi-text { padding: 0 22px 26px; }
  .fiche h3 { margin-bottom: 18px; }
  .fiche dl div { grid-template-columns: 8em 1fr; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
  .sound-g { width: 18px; }
}
@media (max-width: 860px) and (min-width: 520px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .w { color: var(--ink); text-shadow: none; opacity: 1; }
  .js .title em.w { color: var(--ink); }
  .js .step.ahead { opacity: 1; }
  .js .ph .ph-frame { clip-path: none; }
  .js .ph figcaption { opacity: 1; }
}