@import url("fonts/fonts.css");

/* Layout: a sticky stage — the premise (left, 6 cols) and the series as a stack of prints (right) — driven by normal page scroll; the page takes its colour from the frame on screen. */
:root{
  --ink:#F3F0EA;            /* text */
  --ink-2:rgba(243,240,234,.66);
  --ink-3:rgba(243,240,234,.32);
  --tone:#151515;           /* set live from the work */
  --f:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gutr:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:#111}
body{margin:0;background:var(--tone);color:var(--ink);font-family:var(--f);font-variation-settings:"opsz" 14,"wdth" 100;transition:background-color .7s var(--ease);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--tone)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:fixed;z-index:20;left:0;right:0;top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gutr) 0 var(--gut);pointer-events:none}
.top>*{pointer-events:auto}
.brand{font-weight:800;font-variation-settings:"opsz" 24,"wdth" 75;font-size:19px;letter-spacing:.01em;text-decoration:none;line-height:1}
.brand small{display:block;font-weight:400;font-variation-settings:"opsz" 12,"wdth" 100;font-size:12px;letter-spacing:0;color:var(--ink-2);margin-top:4px}
.nav{display:flex;gap:22px;align-items:center;font-size:15px}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--ink-3);border-radius:99px;overflow:hidden}
.lang button{all:unset;cursor:pointer;font-size:13px;padding:6px 11px;color:var(--ink-2)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--tone)}

/* stage */
.series-wrap{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.deck{position:absolute;inset:0;z-index:1;cursor:ew-resize;touch-action:pan-y}
.copy{position:absolute;z-index:4;left:var(--gut);right:var(--gutr);bottom:104px;pointer-events:none}
.copy a{pointer-events:auto}
.num{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-bottom:18px;display:flex;gap:10px}
.num b{color:var(--ink);font-weight:500}
.premise{margin:0;color:#fff;mix-blend-mode:difference;font-weight:560;font-variation-settings:"opsz" 96,"wdth" 86;font-size:clamp(48px,8.2vw,150px);line-height:.9;letter-spacing:-.045em;max-width:11ch;text-wrap:balance;display:flex;flex-wrap:wrap;column-gap:.19em}
.premise .w{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.premise .w>span{display:inline-block;transition:transform .62s var(--ease),opacity .62s var(--ease)}
.premise.out .w>span{transform:translateY(-104%);opacity:0}
.premise.in .w>span{transform:translateY(104%);opacity:0;transition:none}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;flex-wrap:wrap}
.meta{display:flex;flex-direction:column;gap:4px;max-width:52ch}
.meta h2{margin:0;font-size:19px;font-weight:600;font-variation-settings:"opsz" 24,"wdth" 90;letter-spacing:-.01em}
.meta p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.4}
.open{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:99px;background:var(--ink);color:var(--tone);text-decoration:none;font-weight:600;font-size:15px;transition:transform .3s var(--ease)}
.open:hover{transform:translateX(4px)}
.open svg{width:16px;height:16px}

/* deck of prints, centred on the stage */
.card{position:absolute;left:50%;top:calc(50% - 22px);width:min(calc(min(80svh,880px) * var(--arn,.5625)),min(44vw,640px));height:auto;aspect-ratio:var(--ar,9/16);transform:translate(-50%,-50%);transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s;will-change:transform}
.card img,.card video{width:100%;height:100%;object-fit:cover;display:block;background:rgba(0,0,0,.25)}
.card[data-d="0"]{z-index:5}
.card[data-d="1"]{z-index:4;transform:translate(-44%,-52%) scale(.965);filter:brightness(.6)}
.card[data-d="2"]{z-index:3;transform:translate(-38.5%,-54%) scale(.93);filter:brightness(.4)}
.card[data-d="3"]{z-index:2;transform:translate(-33%,-56%) scale(.895);filter:brightness(.24)}
.card[data-d="x"]{opacity:0;transform:translate(-28%,-58%) scale(.86)}
.deck.deal .card{transform:translate(-50%,-10%) scale(.9);opacity:0;transition:none}
.scrub{position:absolute;z-index:9;right:var(--gutr);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:14px;font-size:13px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.ticks{display:flex;flex-direction:column;gap:3px}
.ticks i{height:2px;width:14px;background:var(--ink-3);margin-left:auto;transition:background .2s,width .2s}
.ticks i.on{background:var(--ink);width:26px}
.hint{writing-mode:horizontal-tb}

/* bottom index */
.index{position:absolute;z-index:6;left:var(--gut);right:var(--gutr);bottom:26px;display:flex;gap:4px;align-items:flex-end}
.index.many{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);padding-inline:40px;margin-inline:-40px}
.index.many::-webkit-scrollbar{display:none}
.index.many a{flex:0 0 150px}
.cursor-tip{position:fixed;z-index:30;left:0;top:0;pointer-events:none;padding:9px 14px;border-radius:99px;background:var(--ink);color:var(--tone);font-size:14px;font-weight:600;white-space:nowrap;opacity:0;transform:translate3d(-100px,-100px,0);transition:opacity .2s}
.cursor-tip.on{opacity:1}
.cursor-tip .t-scroll,.cursor-tip.scroll .t-open{display:none}
.cursor-tip.scroll .t-scroll{display:inline}
body.is-page .cursor-tip{display:none}
@media (hover:none){.cursor-tip{display:none}}
.index a{flex:1;min-width:0;text-decoration:none;font-size:12.5px;color:var(--ink-3);padding-top:12px;border-top:1px solid var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s,border-color .3s}
.index a span{font-variant-numeric:tabular-nums;margin-right:8px}
.index a[aria-current="true"]{color:var(--ink);border-top:2px solid var(--ink)}
.index a:hover{color:var(--ink)}
.seg{height:150vh}

/* after the series */
.studio{position:relative;z-index:1;background:var(--tone);padding:18vh var(--gutr) 10vh var(--gut);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 64px}
.studio h2{margin:0;grid-column:1/-1;font-weight:640;font-variation-settings:"opsz" 96,"wdth" 82;font-size:clamp(40px,5.2vw,92px);line-height:.95;letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
.studio p{margin:0;font-size:19px;line-height:1.5;max-width:52ch;color:var(--ink)}
.studio .muted{color:var(--ink-2);font-size:16px}
.links{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--ink-3);border-radius:99px;text-decoration:none;font-size:15px}
.links a:hover{border-color:var(--ink)}
.foot{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;border-top:1px solid var(--ink-3);font-size:13px;color:var(--ink-2)}

@media (max-width:860px){
  .nav a{display:none}
  .card{top:calc(env(safe-area-inset-top,0px) + 72px + min(31svh,330px));width:min(calc(min(62svh,660px) * var(--arn,.5625)),calc(100vw - 72px));top:calc(env(safe-area-inset-top,0px) + 72px + min(31svh,330px))}
  .copy{bottom:64px}
  .premise{font-size:clamp(38px,11.2vw,64px);max-width:none}
  .num{margin-bottom:10px}
  .meta-row{margin-top:14px;gap:12px}
  .meta p{display:none}
  .open{min-height:44px;padding:0 18px}
  .scrub{top:auto;bottom:auto;top:calc(env(safe-area-inset-top,0px) + 80px);transform:none}
  .scrub .hint,.ticks{display:none}
  .index{bottom:18px}
  .index a{font-size:0;padding-top:10px}
  .index.many a{flex:0 0 26px}
  .index a span{font-size:11px;margin:0}
  .studio{grid-template-columns:minmax(0,1fr);padding-top:12vh}
}

/* ---------- detail: the story slides over the frozen stage ---------- */
#detail{display:none;position:relative;z-index:3;background:var(--tone);transition:background-color .7s var(--ease)}
body.is-detail #segs, body.is-detail .index, body.is-detail .studio{display:none}
body.is-detail #detail{display:block}
body.is-detail .open{display:none}
.close{display:none;position:absolute;z-index:10;left:var(--gut);top:calc(env(safe-area-inset-top,0px) + 76px);align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border:1px solid var(--ink-3);border-radius:99px;text-decoration:none;font-size:14px;color:var(--ink);background:transparent}
.close:hover{border-color:var(--ink)}
.close svg{width:14px;height:14px}
body.is-detail .close{display:inline-flex}
.down{display:none;position:absolute;z-index:9;right:var(--gutr);bottom:40px;font-size:13px;color:var(--ink-2);align-items:center;gap:10px}
.down i{display:block;width:1px;height:40px;background:var(--ink-2);transform-origin:top;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
body.is-detail .down{display:flex}
.dsec{padding:0 var(--gutr) 0 var(--gut)}
.lede{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px 64px;padding-top:16vh;padding-bottom:14vh}
.facts{margin:0;display:grid;gap:18px;align-content:start;font-size:15px}
.facts div{display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--ink-3)}
.facts dt{color:var(--ink-2)}
.facts dd{margin:0}
.story{display:grid;gap:28px;max-width:34ch}
.story p{margin:0;font-size:clamp(22px,2.1vw,32px);line-height:1.28;letter-spacing:-.012em;font-variation-settings:"opsz" 32,"wdth" 96}
.story p.poem{font-weight:640;font-variation-settings:"opsz" 96,"wdth" 84;font-size:clamp(34px,4.4vw,76px);line-height:.98;letter-spacing:-.035em;margin:-6px 0;max-width:14ch}
/* rhythm wall: single / pair / single / trio */
.wall{display:grid;gap:14vh;padding-bottom:16vh}
.row{display:grid;gap:24px;align-items:end}
.row.single{grid-template-columns:auto minmax(0,1fr);gap:56px}
.row.single.r{grid-template-columns:minmax(0,1fr) auto}
.row.single .print figcaption{display:none}
.row.single.r .print{order:2}
.print{margin:0;display:grid;gap:12px;min-width:0}
.print .m{position:relative;aspect-ratio:var(--ar);width:100%;background:rgba(0,0,0,.2)}
.row.single .print .m{width:auto;height:min(86svh,calc((100vw - 80px)*.6/var(--arn)))}
.row.single.r .print .m{justify-self:end}
.print img,.print video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.print figcaption{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.print figcaption b{color:var(--ink);font-weight:500}
.bigt{margin:0;font-weight:640;font-variation-settings:"opsz" 96,"wdth" 84;font-size:clamp(36px,4.6vw,84px);line-height:.95;letter-spacing:-.035em;padding-bottom:6px;text-wrap:balance;max-width:12ch}
.row.single.r .bigt{justify-self:end;text-align:right}
.bigt small{display:block;font-size:14px;letter-spacing:0;font-weight:400;font-variation-settings:"opsz" 12,"wdth" 100;color:var(--ink-2);margin-bottom:14px;font-variant-numeric:tabular-nums}
/* compare (input → generated) */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:min(100%,calc(78svh * 1.125 + 24px));margin:0 auto 16vh}
.cmp .print .m{max-height:none}
.cmp-h{grid-column:1/-1;margin:0 0 8px;font-size:clamp(26px,2.6vw,40px);font-weight:600;letter-spacing:-.02em;font-variation-settings:"opsz" 48,"wdth" 90}
/* triptych rows */
.tri{display:grid;gap:10vh;padding-bottom:16vh}
.tri .row{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,calc(72svh * 1.69 + 48px));margin-inline:auto}
.tri .arrow{display:none}
/* logo wall */
.lwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;padding-bottom:16vh}
.lwall .print .m{aspect-ratio:1}
/* next question */
.next{display:block;text-decoration:none;padding:16vh var(--gutr) 18vh var(--gut);border-top:1px solid var(--ink-3)}
.next small{display:block;font-size:15px;color:var(--ink-2);margin-bottom:22px}
.next span{display:block;font-weight:560;font-variation-settings:"opsz" 96,"wdth" 86;font-size:clamp(44px,7.4vw,136px);line-height:.92;letter-spacing:-.045em;max-width:13ch;transition:transform .5s var(--ease)}
.next:hover span{transform:translateX(16px)}
@media (max-width:860px){
  .lede{grid-template-columns:minmax(0,1fr);padding-top:10vh}
  .story p{font-size:21px}
  .row.single,.row.single.r{grid-template-columns:minmax(0,1fr);gap:16px}
  .row.single .print figcaption{display:none}
  .row.single.r .print{order:0}
  .row.single .print .m{height:auto;width:100%}
  .row.single.r .bigt{justify-self:start;text-align:left}
  .row.trio,.row.pair,.tri .row{gap:8px}
  .cmp{gap:10px}
  .print figcaption{font-size:12px;flex-direction:column;gap:2px}
  .wall{gap:9vh}
  .close{top:auto;left:auto;right:var(--gutr);bottom:64px}
  .down{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}


/* ===== Variant B: full-strength colour per series, heavy/serif contrast, subject in front of the question ===== */
:root{--acc:#0C0C0C;--serif:"Bodoni Moda",Didot,"Times New Roman",serif}
:root{--ink-2:color-mix(in srgb,var(--ink) 80%,transparent);--ink-3:color-mix(in srgb,var(--ink) 34%,transparent)}
body,body::before,.top,.lang button,.open,.index a{transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)}
.copy{inset:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:15vh var(--gutr) 104px var(--gut);left:0;right:0}
.num{justify-content:center;margin-bottom:2vh;letter-spacing:.02em}
.premise{color:var(--ink);mix-blend-mode:normal;font-weight:800;font-variation-settings:"opsz" 96,"wdth" 88;font-size:clamp(52px,9.2vw,172px);line-height:.84;letter-spacing:-.055em;max-width:14ch;text-align:center;justify-content:center;column-gap:.16em}
.meta-row{margin-top:auto;width:100%;align-items:flex-end}
.meta{gap:6px}
.meta h2{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"opsz" 96;font-size:clamp(30px,3.3vw,60px);letter-spacing:-.01em;line-height:1;color:var(--acc)}
.meta p{color:var(--ink-2)}
.card img,.card video{background:transparent}
.card[data-d="1"]{filter:none;opacity:.55}
.card[data-d="2"]{filter:none;opacity:.3}
.card[data-d="3"]{filter:none;opacity:.14}
.cutcard{position:absolute;z-index:6;left:50%;top:calc(50% - 22px);width:min(calc(min(80svh,880px) * var(--arn,.5625)),min(44vw,640px));aspect-ratio:var(--ar,9/16);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
.cutcard.on{opacity:1}
.cutcard img{width:100%;height:100%;object-fit:cover;display:block}
.deck.deal ~ .cutcard{opacity:0}
.scrub{color:var(--ink-2)}
.open{background:var(--ink);color:var(--tone)}
.studio h2{font-weight:800;font-variation-settings:"opsz" 96,"wdth" 88;letter-spacing:-.055em}

/* composition: question on top, print below; the subject overlaps only the last line */
.card{top:calc(62% - 10px);width:min(calc(min(58svh,640px) * var(--arn,.5625)),min(38vw,520px))}
.cutcard{top:calc(62% - 10px);width:min(calc(min(58svh,640px) * var(--arn,.5625)),min(38vw,520px))}
.copy{padding-top:12vh}
.premise{font-size:clamp(46px,7vw,132px);max-width:17ch}
.scrub{top:62%}
@media (max-width:860px){
  .card{top:calc(env(safe-area-inset-top,0px) + 72px + min(31svh,330px));width:min(calc(min(62svh,660px) * var(--arn,.5625)),calc(100vw - 72px))}
  .scrub{top:calc(env(safe-area-inset-top,0px) + 80px)}
  .cutcard{top:calc(env(safe-area-inset-top,0px) + 72px + min(31svh,330px));width:min(calc(min(62svh,660px) * var(--arn,.5625)),calc(100vw - 72px))}
  .copy{padding:0 var(--gutr) 64px var(--gut);justify-content:flex-end}
  .meta-row{margin-top:14px}
  .premise{text-align:left;justify-content:flex-start;font-size:clamp(34px,9.6vw,56px)!important}
  .card,.cutcard{width:min(calc(min(56svh,600px) * var(--arn,.5625)),calc(100vw - 72px))!important;top:calc(env(safe-area-inset-top,0px) + 70px + min(28svh,300px))!important}
  .premise{font-size:clamp(40px,11.4vw,66px);max-width:none}
  .num{display:none}
  .meta h2{font-size:28px}
}


/* ===== three colours + display-font tester + player ===== */
:root{--acc2:#D7261E;
  --dfont:"Bricolage Grotesque",sans-serif;--dwght:800;--dvar:"opsz" 96,"wdth" 88;--dcase:none;--dls:-.055em;--dscale:1;--dlh:.84;
  --afont:inherit;--astyle:normal;--awght:inherit;--avar:inherit}
.premise,.next span,.st-h1,.ct-h1,.st-cta span,.bigt,.story p.poem,.studio h2{font-family:var(--dfont)!important;font-weight:var(--dwght)!important;font-variation-settings:var(--dvar)!important;text-transform:var(--dcase);letter-spacing:var(--dls)!important}
.premise{font-size:calc(clamp(46px,7vw,132px) * var(--dscale))!important;line-height:var(--dlh)!important}
.acc{font-style:var(--astyle);color:var(--acc2);font-family:var(--afont);font-weight:var(--awght);font-variation-settings:var(--avar)}
.next .acc{color:var(--acc2)}
/* font panel */
.fpanel{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 66px);display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
.fpanel>button{all:unset;cursor:pointer;font-size:13px;padding:9px 14px;border-radius:99px;background:#0C0C0C;color:#F4EFE6;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.fpanel .opts{display:none;flex-direction:column;gap:4px;padding:8px;border-radius:16px;background:#0C0C0C;color:#F4EFE6;min-width:240px}
.fpanel.open .opts{display:flex}
.fpanel .opts button{all:unset;cursor:pointer;padding:10px 12px;border-radius:10px;font-size:15px;display:flex;justify-content:space-between;gap:12px}
.fpanel .opts button:hover{background:rgba(255,255,255,.08)}
.fpanel .opts button[aria-pressed="true"]{background:#F4EFE6;color:#0C0C0C}
.fpanel .opts small{opacity:.6;font-size:12px}
.fpanel :focus-visible{outline:2px solid #F4EFE6;outline-offset:2px}
/* watch button + play badges */
.watch{display:none;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:99px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;text-decoration:none;font-weight:600;font-size:15px;cursor:pointer;font-family:inherit}
.watch.on{display:inline-flex}
.watch svg{width:14px;height:14px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;pointer-events:auto}
.print .play{position:absolute;inset:auto auto 14px 14px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:99px;border:0;background:rgba(12,12,12,.78);color:#F4EFE6;font:600 14px/1 var(--f);cursor:pointer}
.print .play:hover{background:#0C0C0C}
/* player */
.player{position:fixed;inset:0;z-index:60;display:none;background:rgba(8,8,8,.96);color:#F4EFE6}
.player.is-open{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.pl-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 18px) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.pl-top b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px}
.pl-top span{font-size:13px;opacity:.7}
.pl-stage{display:grid;place-items:center;min-height:0;padding:0 16px}
.pl-stage video{max-width:100%;max-height:calc(100svh - 170px);display:block;background:#000}
.pl-bar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 18px) max(16px,env(safe-area-inset-left,0px))}
.pl-btn{all:unset;cursor:pointer;min-width:44px;min-height:44px;display:inline-grid;place-items:center;border-radius:99px;border:1px solid rgba(244,239,230,.3);font-size:14px;padding:0 14px;box-sizing:border-box}
.pl-btn:hover{border-color:#F4EFE6}
.pl-btn:focus-visible{outline:2px solid #F4EFE6;outline-offset:3px}
.pl-btn svg{width:18px;height:18px}
.pl-time{font-size:13px;font-variant-numeric:tabular-nums;opacity:.8}
.pl-range{width:100%;accent-color:#F4EFE6}
.pl-note{font-size:13px;opacity:.65}
@media (max-width:860px){ .pl-bar{grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px} .pl-time.d,.pl-note{display:none} }


/* ---------- full pages: studio / contatti ---------- */
#page{display:none;position:relative}
body.is-page .series-wrap,body.is-page .studio{display:none}
body.is-page #page{display:block}
body.is-page .top{padding-bottom:22px;background:linear-gradient(180deg,var(--tone) 55%,rgba(0,0,0,0))}
.pg-canvas{display:block;width:100%;height:100%}

/* STUDIO */
.st{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:0 56px;padding:0 var(--gutr) 0 var(--gut)}
.st-left{display:grid;min-width:0}
.st-right{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;padding:92px 0 40px}
.portrait{position:relative;height:100%;max-height:86svh;aspect-ratio:3/4;justify-self:end;width:auto;max-width:100%}
.portrait canvas{position:absolute;inset:0;cursor:crosshair}
.portrait figcaption{position:absolute;left:0;right:0;bottom:-28px;display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.portrait .ph{position:absolute;top:14px;left:14px;font-size:12px;padding:5px 10px;border:1px solid var(--ink-3);border-radius:99px;color:var(--ink-2);background:rgba(0,0,0,.35)}
.st-hero{min-height:100svh;display:grid;align-content:end;padding-bottom:12vh;padding-top:140px}
.kick{font-size:15px;color:var(--ink-2);margin:0 0 26px}
.st-h1{margin:0;font-weight:560;font-variation-settings:"opsz" 96,"wdth" 86;font-size:clamp(52px,7.4vw,138px);line-height:.9;letter-spacing:-.045em;text-wrap:balance}
.st-h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.st-h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.ready .st-h1 .ln>span{transform:none}
.st-h1 .ln:nth-child(2)>span{transition-delay:.12s}
.st-h1 .ln:nth-child(3)>span{transition-delay:.24s}
.st-h1 .ln:nth-child(4)>span{transition-delay:.36s}
.st-intro{max-width:44ch;margin:40px 0 0;font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:var(--ink)}
.st-sec{padding:14vh 0}
.st-sec h2{margin:0 0 6vh;font-size:15px;font-weight:500;color:var(--ink-2)}
.disc{list-style:none;margin:0;padding:0;counter-reset:d}
.disc li{border-top:1px solid var(--ink-3)}
.disc li:last-child{border-bottom:1px solid var(--ink-3)}
.disc button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:3ch minmax(0,1fr) auto;align-items:baseline;gap:18px;padding:22px 0 20px;transition:padding .45s var(--ease)}
.disc button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.disc .i{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.disc .t{font-weight:600;font-variation-settings:"opsz" 72,"wdth" 86;font-size:clamp(30px,3.6vw,64px);line-height:1;letter-spacing:-.035em;transition:font-variation-settings .5s var(--ease),letter-spacing .5s var(--ease)}
.disc .w{font-size:14px;color:var(--ink-2);text-align:right;white-space:nowrap}
.disc button:hover,.disc button[aria-pressed="true"]{padding-left:14px}
.disc button:hover .t,.disc button[aria-pressed="true"] .t{font-variation-settings:"opsz" 72,"wdth" 100;letter-spacing:-.045em}
.disc button[aria-pressed="false"]:not(:hover) .t{color:var(--ink)}
.facts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
.facts2 div{display:grid;gap:10px;align-content:start}
.facts2 b{font-weight:600;font-variation-settings:"opsz" 96,"wdth" 84;font-size:clamp(56px,6vw,112px);line-height:.88;letter-spacing:-.05em}
.facts2 span{font-size:16px;color:var(--ink-2);max-width:28ch;line-height:1.4}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:8vh}
.tools span{padding:10px 16px;border:1px solid var(--ink-3);border-radius:99px;font-size:15px}
.tools span.tbc{color:var(--ink-2);border-style:dashed}
.st-cta{display:block;text-decoration:none;padding:12vh 0 16vh}
.st-cta small{display:block;font-size:15px;color:var(--ink-2);margin-bottom:22px}
.st-cta span{display:block;font-weight:560;font-variation-settings:"opsz" 96,"wdth" 86;font-size:clamp(48px,6.6vw,124px);line-height:.9;letter-spacing:-.045em;transition:transform .5s var(--ease)}
.st-cta:hover span{transform:translateX(14px)}

/* CONTATTI */
.ct{position:relative;min-height:100svh}
.ct-bg{position:fixed;inset:0;z-index:0}
.ct-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.35) 30%,rgba(10,10,10,.82) 62%,rgba(10,10,10,.93));pointer-events:none}
.ct-in{position:relative;z-index:1;padding:150px var(--gutr) 0 var(--gut);display:grid;gap:12vh}
.ct-h1{margin:0;font-weight:560;font-variation-settings:"opsz" 96,"wdth" 86;font-size:clamp(56px,9vw,172px);line-height:.88;letter-spacing:-.05em;max-width:12ch}
.ct-h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.ct-h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.ready .ct-h1 .ln>span{transform:none}
.ct-h1 .ln:nth-child(2)>span{transition-delay:.12s}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:start}
.brief{display:grid;gap:40px}
.sentence{margin:0;font-weight:500;font-variation-settings:"opsz" 48,"wdth" 92;font-size:clamp(28px,2.9vw,50px);line-height:1.14;letter-spacing:-.025em;text-wrap:pretty}
.sentence .slot{color:var(--tone-hi,#fff);background:rgba(243,240,234,.1);border-bottom:2px solid var(--ink);padding:0 .14em;border-radius:4px;transition:background .3s}
.sentence .slot.empty{color:var(--ink-2);border-bottom-style:dashed;background:transparent}
.sentence .slot{cursor:pointer}
.sentence button.slot{all:unset;cursor:pointer;color:var(--tone-hi,#fff);background:rgba(243,240,234,.1);border-bottom:2px solid var(--ink);padding:0 .14em;border-radius:4px;transition:background .3s}
.sentence button.slot.empty{color:var(--ink-2);border-bottom-style:dashed;background:transparent;animation:slotPulse 2.4s ease-in-out infinite}
.sentence button.slot:hover,.sentence button.slot:focus-visible{background:rgba(243,240,234,.18)}
.sentence .name-in{font:inherit;letter-spacing:inherit;color:var(--tone-hi,#fff);background:rgba(243,240,234,.1);border:0;border-bottom:2px solid var(--ink);border-radius:4px;padding:0 .14em;margin:0;outline:none;min-width:3ch;max-width:100%;box-sizing:content-box}
.sentence .name-in:placeholder-shown{background:transparent;border-bottom-style:dashed;animation:slotPulse 2.4s ease-in-out infinite}
.sentence .name-in::placeholder{color:var(--ink-2);opacity:1}
.sentence .name-in:focus{background:rgba(243,240,234,.18);animation:none}
@keyframes slotPulse{0%,100%{border-bottom-color:var(--ink-3)}50%{border-bottom-color:var(--ink)}}
.s-hint{margin:10px 0 0;font-size:14px;color:var(--ink-2)}
.chips.flash{animation:chipFlash .9s var(--ease)}
@keyframes chipFlash{0%{transform:translateX(0)}30%{transform:translateX(8px)}60%{transform:translateX(-4px)}100%{transform:none}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.send[disabled]{opacity:.5;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sentence button.slot.empty,.sentence .name-in:placeholder-shown{animation:none}}
fieldset{border:0;margin:0;padding:0;display:grid;gap:14px}
legend{font-size:14px;color:var(--ink-2);margin-bottom:14px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:1px solid var(--ink-3);border-radius:99px;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#111;border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;color:var(--ink-2)}
.field input,.field textarea{font:inherit;font-size:17px;color:var(--ink);background:rgba(0,0,0,.35);border:1px solid var(--ink-3);border-radius:12px;padding:14px 16px;outline:none;transition:border-color .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.send{all:unset;box-sizing:border-box;cursor:pointer;justify-self:start;min-height:56px;display:inline-flex;align-items:center;gap:12px;padding:0 28px;border-radius:99px;background:var(--ink);color:#111;font-weight:600;font-size:17px;transition:transform .3s var(--ease)}
.send:hover{transform:translateX(4px)}
.send:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sent{font-size:16px;color:var(--ink);padding:16px 18px;border:1px solid var(--ink-3);border-radius:12px;background:rgba(0,0,0,.35)}
.direct{display:grid;gap:0;align-content:start}
.direct h2{margin:0 0 18px;font-size:14px;font-weight:500;color:var(--ink-2)}
.soc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 0;border-top:1px solid var(--ink-3);text-decoration:none;transition:padding .4s var(--ease)}
.soc:last-of-type{border-bottom:1px solid var(--ink-3)}
.soc b{font-weight:600;font-variation-settings:"opsz" 72,"wdth" 86;font-size:clamp(30px,3vw,52px);line-height:1;letter-spacing:-.035em}
.soc small{display:block;font-size:14px;color:var(--ink-2);margin-top:8px;letter-spacing:0;font-weight:400}
.soc svg{width:28px;height:28px;transition:transform .4s var(--ease)}
.soc:hover{padding-left:12px}
.soc:hover svg{transform:translate(4px,-4px)}
.mail{display:grid;gap:10px;margin-top:40px}
.mail .addr{font-size:clamp(22px,2vw,30px);font-weight:500;user-select:all;word-break:break-all}
.mail .addr.tbc{color:var(--ink-2)}
.copy-btn{all:unset;cursor:pointer;justify-self:start;font-size:14px;padding:10px 16px;border:1px solid var(--ink-3);border-radius:99px}
.copy-btn:hover{border-color:var(--ink)}
.where{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 0 36px;border-top:1px solid var(--ink-3);font-size:14px;color:var(--ink-2)}
.where b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .st{grid-template-columns:minmax(0,1fr)}
  .st-right{position:relative;height:auto;padding:84px 0 0;order:-1}
  .portrait{height:auto;width:100%;max-height:none;justify-self:stretch}
  .portrait figcaption{position:static;margin-top:10px}
  .st-hero{min-height:0;padding:7vh 0 6vh}
  .disc button{grid-template-columns:3ch minmax(0,1fr);padding:18px 0}
  .disc .w{display:none}
  .facts2{grid-template-columns:minmax(0,1fr);gap:36px}
  .ct-in{padding-top:110px;gap:8vh}
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .fields{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .st-h1 .ln>span,.ct-h1 .ln>span{transform:none!important} }

/* production: the font tester is hidden; Unbounded approved (D-019) */
.fpanel{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}