/* Paul Hardy Studio — chambre noire. Pensé d'abord pour l'iPhone, puis pour l'ordinateur au-delà de 900 px. */
@font-face{font-family:"Akira";src:url(/fonts/akira.woff2) format("woff2");font-display:block}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hk-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hk-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#0b0a09; --stage:#070606; --ink:#ebe6de; --ink2:#a39d94; --mute:#7f7a73; --line:rgba(235,230,222,.13); --card:#121110; --ember:#c4612f;
  --display:"Akira","Hanken Grotesk",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --g:22px; --top:58px; --max:1320px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
/* accueil : pas de rebond au-dessus du menu, on ne peut que descendre */
html:has(.hero),html:has(.hero) body{overscroll-behavior-y:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* ancres : le petit titre de la section arrive juste sous le menu */
#studio,#contact{scroll-margin-top:calc(var(--top) + 18px - 16svh)}#collections{scroll-margin-top:calc(var(--top) + 18px - 9svh)}
@media (min-width:900px){#collections,#studio,#contact{scroll-margin-top:calc(var(--top) + 24px - 14vh)}}
body{margin:0;background:var(--bg);color:var(--ink);font:300 15px/1.6 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
main{overflow-x:clip}
/* protection : pas de sélection du texte, pas d'enregistrement des images (appui long, glisser, clic droit) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:1px solid var(--ember);outline-offset:3px}
img{display:block;width:100%;height:100%;object-fit:cover}
figure{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.ak{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.92;margin:0}
.k{margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:400;font-variant-numeric:tabular-nums}
.lnk{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:400;color:var(--ink);padding-bottom:4px;border-bottom:1px solid var(--line);transition:border-color 200ms ease}
.lnk:active{border-color:var(--ink)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:50;background:var(--ink);color:var(--bg);padding:8px 12px}
.wrap{max-width:var(--max);margin:0 auto}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:20;height:var(--top);margin-bottom:calc(-1 * var(--top));padding:0 var(--g);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:400;
  background:var(--bg);view-transition-name:top;transition:background-color 300ms ease}
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--bg),transparent);pointer-events:none;transition:opacity 300ms ease}
.top.over{background:transparent}.top.over::after{opacity:0}
.top .ph{font-family:var(--display);font-size:13px;letter-spacing:.04em}
.top nav{display:flex;gap:20px}
.top nav a{min-height:44px;display:flex;align-items:center;color:var(--ink2);transition:color 200ms ease}
.top nav a[aria-current]{color:var(--ink)}

/* ---------- accueil : la chambre noire ---------- */
.hero{position:relative;height:150svh;background:var(--stage)}
.hero .pin{position:sticky;top:0;height:100svh;overflow:hidden}
.chair-host{position:relative;background:var(--stage);overflow:hidden;touch-action:pan-y}
.hero .chair-host{position:absolute;inset:0}
.chair-host canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1400ms var(--ease-out)}
.chair-host canvas.on{opacity:1}
.chair-host .ld{position:absolute;left:0;right:0;top:50%;text-align:center;transition:opacity 400ms ease}
.chair-host.ready .ld{opacity:0}
.chair-host .fb{position:absolute;inset:0;opacity:.85}
.chair-host.light{cursor:crosshair}.chair-host.turn{cursor:grab}
.lamp{position:absolute;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;z-index:2;pointer-events:none;opacity:0;transition:opacity 600ms ease;
  background:radial-gradient(closest-side,rgba(214,226,255,.32),rgba(214,226,255,.08) 45%,transparent 72%);mix-blend-mode:screen}
.lamp::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#eef3ff;box-shadow:0 0 12px 3px rgba(214,226,255,.7)}
.lamp.on{opacity:1;transition-duration:120ms}
.hero .tag{position:absolute;top:calc(var(--top) + 2svh);left:var(--g);z-index:3;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.hero .tag .d{font-size:12px;color:var(--ink2)}
.hero .grad{position:absolute;left:0;right:0;bottom:0;height:46svh;z-index:2;background:linear-gradient(transparent,rgba(7,6,6,.88));pointer-events:none}
.hero .name{position:absolute;left:var(--g);right:var(--g);bottom:12svh;z-index:3;display:flex;flex-direction:column;gap:16px;pointer-events:none;transition:opacity 1000ms var(--ease-out),transform 1000ms var(--ease-out)}
.hero .grad{transition:opacity 1000ms ease}
.hero .name h1{font-size:19vw;line-height:.86}
.hero .name .lead{margin:0;font-size:17px;line-height:1.45;max-width:30ch}
.hero .hint{position:absolute;left:0;right:0;bottom:4.5svh;z-index:3;text-align:center;pointer-events:none;transition:opacity 400ms ease}
.js .hero .name{opacity:0;transform:translateY(24px)}.js .hero .grad{opacity:0}
.js .hero.shown .name{opacity:1;transform:none}.js .hero.shown .grad{opacity:1}
/* repère de défilement : apparaît avec le nom, disparaît dès qu'on descend */
.cue{position:absolute;left:0;right:0;bottom:3svh;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity 600ms ease}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(transparent,var(--ink));transform-origin:bottom;animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:bottom}45%{transform:scaleY(1);transform-origin:bottom}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:top}}
.hero.ready .cue{opacity:1}.hero.scrolled .cue{opacity:0}
.hero.shown .hint,.hero.ready .hint{opacity:0}

.sec{padding:16svh var(--g) 0}
.sec>.k:first-child,.sec .head>.k{border-top:1px solid var(--line);padding-top:14px;margin-bottom:28px}
.intro p{margin:0;font-size:20px;line-height:1.5;max-width:34ch}
.intro .lnk{margin-top:24px}
.cols{padding-top:9svh}
.cols>.k{border-top:0;padding-top:0;margin-bottom:16px}
.doors{display:flex;flex-direction:column;gap:10px;margin:0 calc(-1 * var(--g))}
.door{position:relative;display:block}
.door figure{aspect-ratio:16/9;background:var(--card);overflow:hidden}
.door figure img{transition:transform 1200ms var(--ease-out)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,6,.62),rgba(7,6,6,.08) 65%,transparent);pointer-events:none}
.door .ov{position:absolute;left:var(--g);right:var(--g);bottom:16px;z-index:2;display:flex;flex-direction:column;gap:6px}
.door .ov .k{color:rgba(235,230,222,.8)}
.door h2{font-size:13vw;color:#f3efe8}
.door .more{display:none}
.door:active figure img{transform:scale(1.03)}
.sel{gap:28px 12px}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 10px;padding:16px 0 15px;border-bottom:1px solid var(--line);align-items:baseline}
.index .n{font-size:10.5px;letter-spacing:.16em;color:var(--mute);font-variant-numeric:tabular-nums}
.index .nm{font-family:var(--display);text-transform:uppercase;font-size:6.6vw;line-height:1}
.index .dm{grid-column:2;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.teaser{display:flex;flex-direction:column;gap:26px}
.por{aspect-ratio:1000/912;margin:0 calc(-1 * var(--g));background:var(--card);overflow:hidden}
.big{margin:0;font-size:19px;line-height:1.5}
.tx{margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--ink2)}
.ex{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.ex li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.ex .dt{color:var(--mute);font-variant-numeric:tabular-nums}
.ex small{display:block;color:var(--mute);font-size:12px;margin-top:3px}
.mail{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.mail a{font-size:19px;min-width:0;overflow-wrap:anywhere}
.mail button{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);min-height:44px;flex-shrink:0}
.facts{display:grid;grid-template-columns:110px minmax(0,1fr);margin:0;font-size:14px}
.facts dt{color:var(--mute);padding:13px 0;border-bottom:1px solid var(--line)}
.facts dd{margin:0;padding:13px 0;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.facts a{text-decoration:underline;text-underline-offset:3px}
.foot{margin-top:16svh;padding:22px var(--g) 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:11.5px;color:var(--mute);letter-spacing:.04em}
.foot nav{display:flex;gap:20px}

/* ---------- en-têtes de page ---------- */
.ph-head{padding:calc(var(--top) + 10svh) var(--g) 0;display:flex;flex-direction:column;gap:16px}
.ph-head h1{font-size:min(17vw,calc(86vw / var(--len,5)));line-height:.9}
.ph-head .line{margin:0;font-size:20px;line-height:1.35}
.ph-small{padding-top:calc(var(--top) + 6svh)}
.ph-small h1.k{font-size:10.5px;line-height:1.6}
.ph-small .line{max-width:46ch}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;letter-spacing:.06em;color:var(--mute)}
.crumb a{color:var(--ink2)}
.text{padding:26px var(--g) 0;display:flex;flex-direction:column;gap:14px;max-width:760px}
.text p{margin:0;font-size:15px;line-height:1.75;color:var(--ink2)}
.text p:first-child{color:var(--ink);font-size:17px}

/* ---------- grille de pièces ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 12px}
.card{display:flex;flex-direction:column;gap:12px;min-width:0}
.card figure{aspect-ratio:4/5;overflow:hidden;background:var(--card)}
.card figure img{transition:transform 900ms var(--ease-out),filter 900ms var(--ease-out)}
.cap{display:flex;flex-direction:column;gap:4px}
.cap .no{font-size:10.5px;letter-spacing:.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.cap .nm{font-size:14px;font-weight:400;line-height:1.3}
.cap .dm{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.coll-block{display:flex;flex-direction:column;gap:22px}
.coll-block+.coll-block{margin-top:16svh}
.coll-block h2{font-size:15vw}
.coll-block .cover{aspect-ratio:3/2;overflow:hidden;background:var(--card)}
.next{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:16svh var(--g) 0;padding:18px 0 0;border-top:1px solid var(--line)}
.next .nx{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400}

/* ---------- fiche ---------- */
.piece{padding:var(--top) 0 0;display:flex;flex-direction:column}
.pcrumb{order:0;padding:18px var(--g) 14px}
.piece .media{order:1;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;padding:0 var(--g)}.piece .info{order:2;margin-top:7svh}.piece .details{order:3;padding:0 var(--g)}.piece .v3d{order:4}.piece .pn{order:5}
.piece .media>figure{aspect-ratio:4/5;overflow:hidden;background:var(--card)}
.piece .media>.main{grid-column:1 / -1;margin-bottom:2px;cursor:pointer}
.piece .main img{transition:opacity 260ms ease}.piece .main.swap img{opacity:.35}
.piece .media>.th{cursor:pointer}
.piece .media>figure{position:relative}.piece .media>figure img{position:absolute;inset:0}
.piece .info{padding:0 var(--g);display:flex;flex-direction:column;gap:14px}
.piece h1{font-size:9.6vw;line-height:.94;margin-top:10px}
.piece .lede{margin:0;font-size:15px;color:var(--ink2)}
.cartel{margin:26px 0 0;display:grid;grid-template-columns:100px minmax(0,1fr);font-size:13.5px;line-height:1.5;border-top:1px solid var(--line)}
.cartel dt{padding:12px 0;color:var(--mute);border-bottom:1px solid var(--line)}
.cartel dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.piece .desc{margin:22px 0 0;font-size:16px;line-height:1.7}
.ask{margin:28px 0 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ask .note{margin:0;font-size:12.5px;color:var(--mute)}
.piece .sidebar{display:contents}
.v3d{margin:14svh 0 0;display:flex;flex-direction:column;gap:12px}
.v3d .k,.v3d .hint-s{padding:0 var(--g)}
.v3d .chair-host{height:78svh}
.v3d .hint-s{margin:0;font-size:11.5px;color:var(--mute)}
.pn{margin:14svh var(--g) 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pn a{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:400;min-height:44px}
.pn a:last-child{text-align:right;align-items:flex-end}

/* ---------- studio, contact, questions ---------- */
.about .por{margin:28px 0 0}
.about .body{padding:30px var(--g) 0;display:flex;flex-direction:column;gap:16px;max-width:760px}
.about .body p{margin:0;font-size:15px;line-height:1.75;color:var(--ink2)}
.about .body p:first-child{font-size:19px;line-height:1.5;color:var(--ink)}
.about .facts,.about .ex{margin-top:28px}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:48px;text-decoration:none}
@media (hover:hover){.cta:hover{background:var(--ink);color:var(--bg)}}
.contact .body{padding:28px var(--g) 0;display:flex;flex-direction:column;gap:22px;max-width:760px}
.contact .form{padding:0 var(--g)}
.form{display:flex;flex-direction:column;gap:22px;margin-top:20px}
.kinds{display:flex;flex-direction:column;border:0;margin:0;padding:0;border-top:1px solid var(--line)}
.kinds legend{margin-bottom:12px}
.kinds label{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer;color:var(--ink2);transition:color 200ms ease}
.kinds input{position:absolute;opacity:0;pointer-events:none}
.kinds label::after{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--mute);transition:background-color 200ms ease,border-color 200ms ease}
.kinds label:has(input:checked){color:var(--ink)}
.kinds label:has(input:checked)::after{background:var(--ink);border-color:var(--ink)}
.kinds label:has(input:focus-visible){outline:1px solid var(--ember);outline-offset:2px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld textarea{background:transparent;border:0;border-bottom:1px solid rgba(235,230,222,.22);color:var(--ink);font:inherit;font-size:17px;padding:8px 0;border-radius:0}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--ink)}
.fld textarea{min-height:120px;resize:vertical}
.send{align-self:flex-start;min-height:50px;padding:0 26px;border:1px solid rgba(235,230,222,.35);font-size:14px;font-weight:400;transition:background-color 220ms ease,color 220ms ease,transform 120ms var(--ease-out)}
.send:active{transform:scale(.98);background:var(--ink);color:var(--bg)}
.send:disabled{opacity:.5}
.msg{margin:0;min-height:20px;font-size:14px;color:var(--ink2)}
.hp{position:absolute;left:-9999px}
.faq .qa{padding:0 var(--g);max-width:760px}
.faq .qa div{padding:22px 0;border-top:1px solid var(--line)}
.faq h2{margin:0 0 10px;font-size:17px;font-weight:400;line-height:1.35}
.faq .qa p{margin:0;font-size:15px;line-height:1.75;color:var(--ink2)}
#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:40;margin:0;padding:10px 16px;background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:400;white-space:nowrap;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity 160ms ease,transform 160ms var(--ease-out)}
#toast.on{opacity:1;transform:translate(-50%,0);transition-duration:260ms}

/* ---------- apparitions (seulement si JavaScript tourne : sans lui, tout est visible) ---------- */
.js .rv{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--ease-io)}
.js .rv img{transform:scale(1.08);transition:transform 1600ms var(--ease-out)}
.js .rv.in{clip-path:inset(0 0 0 0)}
.js .rv.in img{transform:none}
.js .rt{opacity:0;transform:translateY(10px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:var(--d,0ms)}
.js .rt.in{opacity:1;transform:none}

/* titres en flamme */
.burn-host{position:relative}
.burn-cv{position:absolute;pointer-events:none;z-index:1}
.bl,.bl *{color:transparent!important}

/* changement de page : fondu natif, l'en-tête ne bouge pas */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 180ms ease both}
::view-transition-new(root){animation:vt-in 380ms var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* survol : seulement à la souris */
@media (hover:hover) and (pointer:fine){
  .top nav a:hover,.foot a:hover{color:var(--ink)}
  .card:hover figure img{transform:scale(1.025);filter:brightness(1.06)}
  .lnk:hover{border-color:var(--ink)}
  .index a:hover .nm{color:#fff}
}

/* ---------- ordinateur ---------- */
@media (min-width:900px){
  :root{--g:56px;--top:72px}
  .top{font-size:14px}
  .top nav{gap:36px}
  .hero{height:100vh;min-height:640px}
  .hero .pin{position:relative;height:100%}
  .hero .chair-host{left:0}
  .hero .name h1,.hero .name .lead{text-shadow:0 2px 30px rgba(7,6,6,.6)}
  .cue{display:none}
  .hero .grad{display:none}
  .js .hero .name{opacity:1}
  .hero .name{right:auto;bottom:12vh;max-width:44%}
  .hero .name h1{font-size:clamp(84px,9vw,168px)}
  .hero .name .lead{font-size:19px}
  .hero .hint{left:34%}
  .sec{padding-top:14vh}
  .sec>*{max-width:var(--max);margin-left:auto;margin-right:auto}
  .intro p{font-size:30px;max-width:30ch}
  .doors{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:0 auto}
  .door figure{aspect-ratio:4/5}
  .door::after{display:none}
  .door .ov{position:static;margin-top:20px}
  .door .ov .k{color:var(--mute)}
  .door h2{font-size:clamp(48px,5vw,88px);color:var(--ink)}
  .door .more{display:flex;flex-direction:column;gap:14px;margin-top:12px}
  .door .ln{font-size:15px;color:var(--ink2)}
  .cols{padding-top:14vh}.cols>.k{border-top:1px solid var(--line);padding-top:14px;margin-bottom:28px}
  .grid.sel{grid-template-columns:repeat(4,1fr);gap:24px}
  /* accueil : toute la largeur de l'écran, pas de colonne serrée au milieu */
  main:has(.hero) .sec>*{max-width:none}
  main:has(.hero) .doors{gap:24px}
  main:has(.hero) .door figure{aspect-ratio:4/3}
  .index{columns:2;column-gap:56px;border-top:0}
  .index li{break-inside:avoid;border-top:1px solid var(--line)}
  .index a{border-bottom:0}
  .index .nm{font-size:clamp(22px,2vw,32px)}
  .teaser{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  .teaser .por{margin:0}
  .foot{padding-left:var(--g);padding-right:var(--g)}
  .ph-head{padding-top:calc(var(--top) + 12vh);max-width:calc(var(--max) + 2 * var(--g));margin:0 auto}
  .ph-small{padding-top:calc(var(--top) + 8vh)}
  .ph-head h1{font-size:min(clamp(72px,9vw,160px),calc(78vw / var(--len,5)))}
  .text{margin:0 auto;max-width:var(--max);padding-right:calc(var(--g) + 30%)}
  .text p:first-child{font-size:20px}
  .grid{grid-template-columns:repeat(3,1fr);gap:56px 24px}
  .coll-block h2{font-size:clamp(56px,6vw,104px)}
  .coll-block .cover{aspect-ratio:21/9}
  .next{max-width:calc(var(--max) - 2 * var(--g));margin-left:auto;margin-right:auto}
  /* fiche : grande photo à gauche, vignettes alignées dessous, infos fixes à droite */
  .piece{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 64px;padding:calc(var(--top) + 3vh) var(--g) 0;max-width:var(--max);margin:0 auto}
  .pcrumb{grid-column:1 / -1;grid-row:1;padding:0 0 18px}
  .piece .media{grid-column:1;grid-row:2;gap:12px;padding:0}
  .piece .media>.main{margin-bottom:4px}
  .piece .sidebar{grid-column:2;grid-row:2;display:flex;flex-direction:column;position:sticky;top:calc(var(--top) + 24px);align-self:start}
  .piece .info{margin-top:0}
  .piece .info,.piece .details{padding:0}
  .piece h1{font-size:clamp(40px,3.6vw,64px)}
  .piece .v3d{grid-column:1 / -1;grid-row:3;margin-top:14vh}
  .v3d .k,.v3d .hint-s{padding:0}
  .v3d .chair-host{height:86vh}
  .piece .pn{grid-column:1 / -1;grid-row:4;margin-left:0;margin-right:0}
  .about,.contact,.faq{max-width:var(--max);margin:0 auto}
  .about .split{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:0 var(--g);align-items:start}
  .about .por{margin:28px 0 0;position:sticky;top:calc(var(--top) + 24px)}
  .about .body{padding:30px 0 0}
  .about .body p:first-child{font-size:22px}
  .contact .split{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:0 var(--g);align-items:start}
  .contact .body{padding:28px 0 0}
  .contact .form{padding:0}
  .form{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  .js .rv{clip-path:none;opacity:0;transition:opacity 500ms ease}.js .rv.in{opacity:1}
  .js .rv img,.js .rv.in img{transform:none;transition:none}
  .js .rt{transform:none;transition:opacity 400ms ease}
  ::view-transition-new(root){animation:vt-fade 200ms ease both}
}
@keyframes vt-fade{from{opacity:0}}
.sel .cap .no{display:none}