/* gabriel.gabeweb.org styles. Tokens copied from v2/src/catalog.html lines 9-49 (and base, buttons, .field from lines 51-78); keep in sync (PROGRESS.md rule). */
:root{
  --page:#FAFAF8;
  --stone:#F0EFEC;
  --ink:#17181B;
  --ink-2:#55565C;
  --line:#E0DFDA;
  --card:#FFFFFF;
  --field:#24252A;
  --field-2:#121316;
  --on-field:#F3F1EC;
  --on-field-2:#B9B6AE;
  --field-line:rgba(243,241,236,.14);
  --gold:#CFA552;
  --gold-ink:#7E6224;
  --amber:#8A5208;
  --red:#B42318;
  --shadow:20,20,24;
  --ring:rgba(20,20,24,.07);

  --display:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --text:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --data:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --gut:clamp(16px,4vw,56px);
  --maxw:1280px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0E0F11; --stone:#15161A; --ink:#EDECE8; --ink-2:#A9A7A0; --line:#27282D; --card:#191A1E;
    --field:#1E1F24; --field-2:#141518; --on-field:#F3F1EC; --on-field-2:#B9B6AE; --field-line:rgba(243,241,236,.12);
    --gold:#D9B062; --gold-ink:#D9B062; --amber:#E39B48; --red:#F07A6B; --shadow:0,0,0; --ring:rgba(255,255,255,.08);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#0E0F11; --stone:#15161A; --ink:#EDECE8; --ink-2:#A9A7A0; --line:#27282D; --card:#191A1E;
  --field:#1E1F24; --field-2:#141518; --on-field:#F3F1EC; --on-field-2:#B9B6AE; --field-line:rgba(243,241,236,.12);
  --gold:#D9B062; --gold-ink:#D9B062; --amber:#E39B48; --red:#F07A6B; --shadow:0,0,0; --ring:rgba(255,255,255,.08);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--field-2)}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus,var(--gold-ink));outline-offset:3px;border-radius:4px}
.field{--focus:var(--gold)}
html{scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) var(--page)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:0;text-wrap:balance;font-kerning:normal}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
.icon{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.bi{fill:currentColor;stroke:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.65rem;padding:.95rem 1.4rem;border-radius:999px;font:600 1rem/1 var(--text);text-decoration:none;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.btn .icon{width:1.25rem;height:1.25rem}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#1A150B}
.btn-gold:hover{background:#E2BE70}
.btn-ghost{border:1px solid rgba(243,241,236,.35);color:var(--on-field)}
.btn-ghost:hover{border-color:var(--on-field);background:rgba(243,241,236,.06)}
.btn .go{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .go{transform:translateX(3px)}

/* ---------- charcoal fields ---------- */
.field{color:var(--on-field);background:radial-gradient(90% 80% at 85% 0%,rgba(207,165,82,.13),transparent 60%),linear-gradient(180deg,var(--field) 0%,var(--field-2) 100%)}

/* ===================== gabriel.gabeweb.org components ===================== */
html{scroll-padding-top:1rem}
img{height:auto}
:root{--frame:0 0 0 1px var(--ring),0 24px 44px -30px rgba(var(--shadow),.45),0 6px 14px -8px rgba(var(--shadow),.16);
  --frame-lift:0 0 0 1px var(--ring),0 32px 52px -30px rgba(var(--shadow),.55),0 10px 20px -10px rgba(var(--shadow),.2);
  --panel:0 0 0 1px var(--ring),0 30px 50px -34px rgba(var(--shadow),.5),0 8px 18px -10px rgba(var(--shadow),.15)}
.skip{position:absolute;left:.75rem;top:-3rem;z-index:20;background:var(--gold);color:#1A150B;padding:.6rem 1rem;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:.75rem}
.eyebrow{font:600 .8125rem/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.field .eyebrow{color:var(--gold)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.6rem}
.mark{font:500 1.5rem/1 var(--display);text-decoration:none;color:var(--on-field)}
.mark em{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:2rem;font-size:.9375rem}
.nav-links a:not(.btn){color:var(--on-field-2);text-decoration:none}
.nav-links a:not(.btn):hover{color:var(--on-field)}
.nav-wa{padding:.7rem 1.2rem;font-size:.9375rem}

/* ---------- index hero ---------- */
.hero{padding-bottom:1.4rem;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2rem;align-items:center;padding-top:.5rem}
.hero h1{font:500 clamp(3.4rem,7.4vw,6.75rem)/.95 var(--display);letter-spacing:-.015em;margin-top:1.4rem}
.hero h1 .l{display:block}
.hero h1 em{color:var(--gold)}
.lede{font-size:1.1875rem;line-height:1.6;color:var(--on-field-2);max-width:31em;margin-top:1.75rem}
.ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.25rem}
.stage{position:relative;width:100%;max-width:600px;aspect-ratio:600/640;margin-inline:auto}
.stage figure{margin:0}
.arch{position:absolute;left:50%;top:0;translate:-50% 0;width:66%;height:87.5%;border-radius:999px 999px 26px 26px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(207,165,82,.45)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.float{position:absolute;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.float img{width:100%;height:auto}
.float figcaption{position:absolute;left:.6rem;bottom:.6rem;background:rgba(18,19,22,.86);color:#F3F1EC;font-size:.6875rem;line-height:1;padding:.4rem .6rem;border-radius:999px;white-space:nowrap}
@media (max-width:560px){.float figcaption{display:none}}
.c1{left:-1%;top:52%;width:42%;rotate:-6deg}
.c2{right:-.5%;top:6%;width:25%;border-radius:22px;border:6px solid #0B0B0D;background:#0B0B0D}
.c2 img{border-radius:15px}
.c3{right:1%;top:64%;width:38%;rotate:5deg}
.selected{display:flex;flex-wrap:wrap;gap:.5rem 1.9rem;align-items:baseline;margin-top:1.2rem;padding-block:1.4rem .4rem;border-top:1px solid var(--field-line);font-size:.875rem;color:var(--on-field-2)}
.selected b{font:500 .75rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media (max-width:860px){
  .nav-links a:not(.btn){display:none}
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero h1{margin-top:1rem}
  .lede{font-size:1rem;margin-top:1.1rem}
  .ctas{margin-top:1.5rem}
  .stage{max-width:520px}
  .c3{display:none}
}
@media (max-width:560px){.hero .ctas .btn{flex:1 1 100%;justify-content:center}}

/* ---------- bands ---------- */
.band{padding-block:clamp(4rem,9vw,7.5rem);background:var(--page)}
.band-stone{background:var(--stone)}
.band.field{background:radial-gradient(90% 80% at 85% 0%,rgba(207,165,82,.13),transparent 60%),linear-gradient(180deg,var(--field) 0%,var(--field-2) 100%)}
.band h2{font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.04}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:1rem 3rem;align-items:end}
.sec-head .intro{margin-top:0;max-width:32rem}
@media (max-width:860px){.sec-head{grid-template-columns:minmax(0,1fr)}}
.band .intro{max-width:38em;margin-top:1rem;color:var(--ink-2)}
.field .intro{color:var(--on-field-2)}

/* ---------- placeholders and unconfirmed facts (preview builds only) ---------- */
.ph{display:grid;place-items:center;min-height:10rem;padding:1.2rem;border:1.5px dashed var(--gold-ink);border-radius:14px;
  background:repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--gold) 9%,transparent) 12px 13px)}
.field .ph{border-color:var(--gold)}
.ph-label{font:500 .8125rem/1.3 var(--data);color:var(--ink-2);text-align:center}
.field .ph-label{color:var(--on-field-2)}
.yr::before{content:"· "}
.is-preview [data-unconfirmed]:not(div,li){text-decoration:underline 1.5px dashed var(--gold-ink);text-underline-offset:.22em;cursor:help}
.is-preview :is(div,li)[data-unconfirmed]{outline:1.5px dashed var(--gold-ink);outline-offset:6px;border-radius:4px;cursor:help}
.is-preview .field :is(div,li)[data-unconfirmed]{outline-color:var(--gold)}
.is-preview .field [data-unconfirmed]{text-decoration-color:var(--gold)}

/* ---------- case cards ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.4rem;margin-top:2.6rem}
.case-card{display:block;text-decoration:none;color:var(--ink);border-radius:16px}
.case-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:var(--stone);
  box-shadow:var(--frame);transition:translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.case-card img.pos-face{object-position:50% 22%}
@media (hover:hover) and (pointer:fine){.case-card:hover img{translate:0 -6px;box-shadow:var(--frame-lift)}.case-card:hover .cc-go .icon{translate:3px 0}}
.cc-client{display:block;margin-top:1rem;font:600 clamp(1.4rem,2vw,1.75rem)/1.1 var(--display)}
.cc-kind{display:block;margin-top:.35rem;font-size:.9375rem;color:var(--ink-2)}
.cases li:first-child{grid-column:span 2}
.cases li:first-child img{aspect-ratio:16/9}
@media (max-width:860px){.cases{grid-template-columns:1fr}.cases li:first-child{grid-column:auto}.cases li:first-child img{aspect-ratio:4/3}}

/* ---------- more-work rows ---------- */
.more-h{margin-top:clamp(3.5rem,7vw,5.5rem);font-size:clamp(1.6rem,3vw,2.1rem)}
.row-block{margin-top:2rem;position:relative}
.row-title{margin:0 0 .9rem;font:500 .8125rem/1.2 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.row{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin;overscroll-behavior-x:contain}
.row li{flex:0 0 clamp(160px,42vw,260px);scroll-snap-align:start}
.row a{display:block;border-radius:12px}
.row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--card);box-shadow:var(--frame)}
.row.tall img{aspect-ratio:4/5;object-position:top}
.row.logos img{object-fit:contain;background:#fff}
.row-btn{position:absolute;top:-.4rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.row-btn .icon{width:1.1rem;height:1.1rem}
.row-btn.prev{right:3rem}
.row-btn.next{right:0}
.row-btn:hover{border-color:var(--ink)}

/* ---------- full-screen viewer ---------- */
html.lb-on{overflow:hidden}
dialog.lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(12,12,14,.95);color:#F3F1EC}
dialog.lb::backdrop{background:transparent}
.lb-fig{margin:0;height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:4.5rem 1rem 1.2rem}
.lb-fig img{max-width:min(100%,1600px);max-height:calc(100dvh - 9rem);width:auto;height:auto;object-fit:contain;border-radius:6px}
.lb-cap{margin-top:1rem;font-size:.9375rem;color:#C9C6BE;text-align:center}
.lb button{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(243,241,236,.3);background:rgba(18,19,22,.6);color:#F3F1EC;cursor:pointer}
.lb button .icon{width:1.35rem;height:1.35rem}
.lb button:hover{border-color:#F3F1EC}
.lb button:focus-visible{outline-color:var(--gold)}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;translate:0 -50%}
.lb-next{right:1rem;top:50%;translate:0 -50%}
.lb button[hidden]{display:none}

/* ---------- UI/UX ---------- */
.uiux-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;margin-top:2.6rem}
.case-card.feature{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:2.4rem;align-items:center}
.case-card.feature img{aspect-ratio:9/16;object-fit:cover;object-position:top;background:var(--field)}
.case-card.feature .cc-client{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:0}
.cc-go{display:inline-block;margin-top:1.2rem;font-weight:600;color:var(--gold-ink)}
.cc-note{display:block;margin-top:.5rem;font-size:.9375rem;color:var(--ink-2);max-width:30em}
.uiux-grid .row-block{margin-top:0}
.row.screens li{flex-basis:clamp(200px,48vw,300px)}
.row.screens img{aspect-ratio:4/3;object-fit:contain;background:var(--card)}
.uiux-grid > *{min-width:0}
@media (max-width:640px){.case-card.feature{grid-template-columns:minmax(0,1fr);gap:1rem}.case-card.feature img{aspect-ratio:4/3}.case-card.feature .cc-client{margin-top:.4rem}}

/* ---------- shared work: the credit in row titles ---------- */
.row-title .credit{text-transform:none;letter-spacing:0;font-weight:400}
.has-btns .row-title{padding-right:6rem}

/* ---------- motion ---------- */
/* the two ads side by side at one height: columns in proportion to their shapes (1280x868, 1134x1280) */
.reels{display:grid;grid-template-columns:minmax(0,1.47fr) minmax(0,.89fr);gap:1.4rem;margin-top:2.4rem;align-items:start}
@media (max-width:860px){.reels{grid-template-columns:minmax(0,1fr)}}
.reel{position:relative;display:block;border-radius:14px;overflow:hidden;background:#0B0B0D;box-shadow:0 0 0 1px rgba(207,165,82,.28),0 30px 60px -30px rgba(0,0,0,.7);color:#17181B}
.reel video,.reel img{display:block;width:100%;height:auto}
.reel-play{position:absolute;left:.9rem;bottom:.9rem;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--gold);box-shadow:0 6px 18px -6px rgba(0,0,0,.6);transition:scale .25s ease}
.reel-play .icon{width:1.15rem;height:1.15rem;fill:currentColor;stroke:none;translate:1px 0}
@media (hover:hover) and (pointer:fine){.reel:hover .reel-play{scale:1.08}}
.reel-cap{margin-top:.75rem;font-size:.9375rem;line-height:1.5;color:var(--on-field-2);max-width:38em}
.reel-cap b{display:block;color:var(--on-field);font-weight:600}
.reel-cap b + span{display:block;margin-bottom:.2rem;font:500 .75rem/1.4 var(--data);color:var(--gold)}
.reel-cap .yt{margin-left:.35rem;font:500 .6875rem/1 var(--data);letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.field .row-title{color:var(--on-field-2)}
.field .row-btn{background:rgba(18,19,22,.7);border-color:var(--field-line);color:var(--on-field)}
.field .row-btn:hover{border-color:var(--on-field)}
.row.reels-row li{flex-basis:clamp(240px,64vw,340px)}
.row.reels-row .reel{border-radius:12px}
.row.reels-row img{aspect-ratio:16/9;object-fit:cover;border-radius:0;box-shadow:none;background:#0B0B0D}
.row.reels-row.tall li{flex-basis:clamp(150px,40vw,200px)}
.row.reels-row.tall img{aspect-ratio:9/16}
.row.reels-row .reel-cap{font-size:.875rem}
.lb-fig video{max-width:min(100%,1600px);max-height:calc(100dvh - 9rem);width:auto;height:auto;border-radius:6px;background:#000}
.lb-fig [hidden]{display:none}

/* ---------- AI and how I work ---------- */
.ai-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;align-items:start}
.ai-line{margin-top:1.4rem;font:500 clamp(1.35rem,2.4vw,1.75rem)/1.35 var(--display);max-width:22em}
.how-h{font-size:1.4rem}
.how{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.2rem;counter-reset:none}
.how img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;background:var(--stone);box-shadow:var(--frame)}
.how-n{display:block;margin-top:.9rem;font:500 .78rem/1 var(--data);color:var(--gold-ink)}
.how b{display:block;margin-top:.35rem;font:600 1.15rem/1.2 var(--display)}
.how p{margin-top:.3rem;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:860px){.ai-grid{grid-template-columns:1fr;gap:2rem}}
@media (max-width:420px){.how{grid-template-columns:1fr}}

/* ---------- websites ---------- */
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.2rem;margin-top:2.4rem}
.sites a{display:block;text-decoration:none;color:var(--ink);border-radius:12px}
.sites img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:12px;background:var(--card);box-shadow:var(--frame)}
.s-name{display:block;margin-top:.8rem;font:600 clamp(1.2rem,1.6vw,1.4rem)/1.15 var(--display)}
.s-url{display:block;margin-top:.2rem;font:500 .8125rem/1.3 var(--data);color:var(--ink-2)}
.sites-more{margin-top:2.2rem;max-width:44em;color:var(--ink-2)}
.sites-more a{color:var(--gold-ink);font-weight:600}
@media (max-width:860px){.sites{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sites{grid-template-columns:1fr}}

/* ---------- off the clock ---------- */
.hobbies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:2.4rem}
.hobby{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem;border-radius:16px;background:var(--card);box-shadow:var(--panel)}
.hobby .ph{aspect-ratio:4/3;min-height:0}
.hobby .ph-line{aspect-ratio:auto;min-height:3.2rem;padding:.6rem}
.hobby h3{font-size:1.45rem;margin-top:.3rem}
.hobby p{color:var(--ink-2)}
@media (max-width:860px){.hobbies{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact .intro{font-size:1.125rem}
.contact h2{font-size:clamp(2.6rem,6vw,4.6rem)}
.contact-card{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;margin:3rem 0 0;padding-top:1.6rem;border-top:1px solid var(--field-line)}
.contact-card dt{font:500 .8125rem/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--on-field-2)}
.contact-card dd{margin:.5rem 0 0;font:500 .95rem/1.3 var(--data);color:var(--on-field)}
.contact-card a{color:var(--on-field)}

/* ---------- case-study pages ---------- */
.case-hero{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.case-head{padding-top:clamp(1.2rem,4vw,2.6rem)}
.back{display:inline-block;color:var(--on-field-2);text-decoration:none;font-size:.9375rem}
.back:hover{color:var(--on-field)}
.case-hero h1{font:500 clamp(2.5rem,6.2vw,5.4rem)/1.02 var(--display);letter-spacing:-.01em;margin-top:1.2rem;max-width:17ch}
.case-kind{margin-top:1rem;color:var(--on-field-2);font-size:1.0625rem}
.case-img{margin:clamp(2rem,5vw,3.4rem) 0 0}
.case-img img{width:100%;max-height:74vh;object-fit:cover;border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(207,165,82,.3)}
.back .icon,.cc-go .icon{width:1rem;height:1rem;vertical-align:-.15em}
.cc-go .icon{transition:translate .25s ease}
.facts-band{padding-block:clamp(2.4rem,5vw,3.4rem)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem 2rem;margin:0}
.facts dt{font:500 .8125rem/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:.6rem 0 0;line-height:1.5}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facts{grid-template-columns:1fr}}
.facts-band + .brief{padding-top:0}
.brief-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2.5rem}
.brief-grid > div:last-child > p{font-size:1.125rem;max-width:36em}
.idea{margin:1.8rem 0 0;padding:1.5rem 1.7rem;background:var(--stone);border-radius:16px;box-shadow:0 0 0 1px var(--ring)}
.idea p{font:500 1.15rem/1.5 var(--display)}
.idea footer{margin-top:.8rem;font-size:.875rem;color:var(--ink-2)}
@media (max-width:860px){.brief-grid{grid-template-columns:1fr;gap:1rem}}
.work-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.6rem;margin-top:2.6rem}
.work-list .wide{grid-column:span 2}
.work-list figure{margin:0}
.work-list a{display:block;border-radius:14px}
.work-list img{width:100%;border-radius:14px;background:var(--card);box-shadow:var(--frame)}
.work-list figcaption{margin-top:.8rem;font-size:.9375rem;color:var(--ink-2);max-width:72ch}
@media (max-width:640px){.work-list{grid-template-columns:minmax(0,1fr)}.work-list .wide{grid-column:auto}}

/* ---------- case close ---------- */
.case-close{padding-block:clamp(4rem,8vw,6rem)}
.next-case{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem 1rem;margin-top:1rem;padding-block:1.4rem;border-block:1px solid var(--field-line);color:var(--on-field);text-decoration:none}
.nc-client{font:500 clamp(2rem,5vw,3.6rem)/1.05 var(--display)}
.nc-label{grid-row:1;font:500 .8125rem/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--on-field-2)}
.nc-client{grid-row:2}
.nc-kind{grid-row:3;color:var(--on-field-2)}
.nc-go{grid-row:1 / span 3;grid-column:2;width:2.2rem;height:2.2rem;color:var(--gold);transition:translate .25s ease}
.next-case:hover .nc-go{translate:6px 0}
.close-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1rem;margin-top:2.4rem}
.close-cta p{width:100%;font:500 1.45rem/1.3 var(--display)}
.legal{margin-top:3rem;font-size:.875rem;color:var(--on-field-2)}
.legal a{color:var(--on-field)}

/* ---------- phone layouts and buttons on light ---------- */
.case-img.phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.8rem,3vw,2.2rem)}
.case-img.phones img{width:clamp(80px,25vw,300px);max-height:none;border-radius:clamp(16px,2.4vw,30px);border:clamp(4px,.6vw,8px) solid #0B0B0D;background:#0B0B0D}
.case-img.phones img:nth-child(2){margin-bottom:clamp(1.2rem,4vw,3.4rem)}
.work-list.phones{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-list.phones img{border-radius:22px;border:6px solid #0B0B0D;background:#0B0B0D}
.work-list.phones .ph{aspect-ratio:9/19.5;min-height:0}
@media (max-width:640px){.work-list.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.btn-ink{background:var(--ink);color:var(--page)}
.btn-ink:hover{background:color-mix(in srgb,var(--ink) 85%,var(--gold))}
.btn-line{border:1px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.case-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* ---------- drag-to-compare portrait ---------- */
.compare-wrap{max-width:560px;margin-inline:auto}
.compare{position:relative;display:grid;border-radius:18px;overflow:hidden;--pos:50;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(207,165,82,.3);touch-action:pan-y}
.compare img{grid-area:1/1;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 0;border-radius:0;box-shadow:none;max-height:none}
.compare .c-ref{background:#fff}
.compare .c-orig{clip-path:inset(0 calc(100% - var(--pos) * 1%) 0 0)}
.c-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare:has(.c-range:focus-visible){outline:2px solid var(--gold);outline-offset:4px}
.c-handle{position:absolute;top:0;bottom:0;left:calc(var(--pos) * 1%);width:2px;translate:-1px 0;background:#fff;pointer-events:none}
.c-handle .icon{position:absolute;top:50%;left:50%;translate:-50% -50%;width:2.6rem;height:2.6rem;padding:.6rem;border-radius:50%;background:#fff;color:#17181B;stroke-width:2;box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
.c-tag{position:absolute;bottom:.8rem;padding:.35rem .7rem;border-radius:999px;background:rgba(18,19,22,.82);color:#F3F1EC;font:600 .7rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.c-tag-o{left:.8rem}
.c-tag-r{right:.8rem}
.compare-hint{margin-top:.9rem;text-align:center;font-size:.875rem;color:var(--on-field-2)}
@media (prefers-reduced-motion:reduce){
  .compare-wrap{max-width:900px}
  .compare{grid-template-columns:1fr 1fr;gap:4px;background:#0B0B0D}
  .compare .c-orig{grid-area:1/1;clip-path:none}
  .compare .c-ref{grid-area:1/2}
  .c-range,.c-handle,.compare-hint{display:none}
}