/* Skin: Mercury design system (style-library/mercury.md) */
/* ============================================================
   WRAP CITY LAS VEGAS — $10K rebuild, scroll-cinema
   Art lock (mining-sheet.md Phase 1):
   - Brand is genuinely monochrome: #000 wall field / #fff logo.
     No non-sourced accent color — finish comes from texture,
     like the films they install (matte flat vs gloss sheen).
   - Type: Archivo variable (wdth 62–125). Display = Expanded
     (wdth 125) w850; body = wdth 100; HUD labels = wdth 72.
     Deliberate substitute: the logo is custom hand-lettering and
     the old site ran GoDaddy-default Open Sans/Arial (css1.css) —
     Archivo Expanded echoes the letterspaced "LAS VEGAS" caps in
     the logo. The script stays exclusive to the real logo image.
   - Signature mechanic: THE SQUEEGEE PASS — pinned hero, scroll
     scrub drives a 12°-slanted clip edge left→right, laying the
     wrapped state (their real logo-wall film) over a bare primer
     panel. Install telemetry HUD. Abstract vinyl demonstration —
     never implies a real customer before/after pair (none exist
     in source material; recorded in mining-sheet.md).
   ============================================================ */

:root{
  --black:#171721;     /* Onyx canvas — photo fields, footer, hover ink */
  --base:#171721;      /* Onyx canvas */
  --panel:#1e1e2a;     /* Graphite — card / section surface */
  --wallgray:#272735;  /* Obsidian — quiet structural borders */
  --white:#ededf3;     /* Ivory — primary text, never pure white */
  --dim:#c3c3cc;       /* Ash — muted body copy */
  --primer-a:#e2e3ed;  /* Mist — bare-primer light panel (mechanic content) */
  --primer-b:#cfd0dc;
  --ink:#171721;
  --accent:#5266eb;    /* Cobalt — reserved for the primary call action */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --pad:clamp(56px,8vw,72px);
  --gutter:min(4.5vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:"Inter",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  background:var(--base);
  color:var(--dim);
  -webkit-font-smoothing:antialiased;
}
@media (max-width:600px){body{font-size:16px}}

::selection{background:var(--white);color:var(--black)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---------- type ---------- */
h1,h2,.hero-h{
  font-family:"Archivo",Arial,sans-serif; /* wide-set stand-in for the skin's breit display face */
  font-variation-settings:"wdth" 118;
  font-weight:480;
  letter-spacing:.015em;
  line-height:1.15;
  color:var(--white);
}
h2{font-size:clamp(1.8rem,3.2vw,2.65rem);margin-bottom:1.4rem;max-width:22ch}
.light h2{color:var(--ink)}
p{max-width:60ch}
p + p{margin-top:1em}

.label{
  font-weight:480;
  font-size:.75rem;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}

/* ---------- nav (mix-blend difference: legible over primer AND film) ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:4px 16px;
  padding:14px var(--gutter);
  mix-blend-mode:difference;
  pointer-events:none;
}
.nav a{pointer-events:auto}
.nav__logo img{height:34px;width:auto}
.nav nav{display:flex;flex-wrap:wrap}
.nav nav a{
  color:var(--white);text-decoration:none;
  font-weight:420;font-size:.875rem;
  letter-spacing:.005em;
  padding:12px 10px;position:relative;
}
.nav nav a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:8px;height:1px;
  background:var(--white);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav nav a:hover::after,.nav nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:540px){
  .nav{padding:10px 4vw}
  .nav__logo img{height:26px}
  .nav nav a{font-size:.75rem;padding:12px 7px;letter-spacing:.005em}
}

/* ============================================================
   THE SQUEEGEE PASS — pinned dual-state hero
   --p: 0 = bare primer · 1 = wrapped in their logo-wall film.
   Default (no-JS / reduced-motion / ?noanim) rests fully wrapped.
   ============================================================ */
.pass{position:relative;height:100dvh}
.pass__pin{position:relative;height:100dvh;overflow:hidden;--p:1}
html.anim .pass__pin{--p:0}

.pass__state{
  position:absolute;inset:0;z-index:0;
  display:grid;place-items:center;
  padding:0 var(--gutter);
}
.pass__bare{
  background:linear-gradient(180deg,var(--primer-a),var(--primer-b));
  color:var(--ink);
}
.pass__bare .hero-h{color:var(--ink)}
.pass__bare .btn--solid{background:var(--accent);color:#ffffff}
.pass__bare .btn--line{border-color:var(--ink);color:var(--ink)}
.pass__wrap{
  z-index:1;
  background:var(--black) url("assets/wall.webp") center/cover no-repeat;
  color:var(--white);
  clip-path:polygon(
    -60vh 0,
    calc(var(--p) * 170vw - 30vw + 10.5vh) 0,
    calc(var(--p) * 170vw - 30vw - 10.5vh) 100%,
    -60vh 100%
  );
}
/* faint static gloss sheen on the film */
.pass__wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.05) 50%,transparent 58%);
}

.hero-inner{width:min(1200px,100%);text-align:left}
.hero-cred{
  font-weight:480;font-size:.875rem;
  letter-spacing:.01em;margin-bottom:1.6rem;
}
.hero-h{font-size:clamp(2.6rem,5.6vw,4.05rem);max-width:16ch;letter-spacing:.01em;line-height:1.1}
.hero-sub{
  margin-top:1.5rem;font-size:clamp(1rem,1.4vw,1.125rem);
  line-height:1.35;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4rem}

/* hero entrance (blur-fade, staggered) — only under .anim, resolved by .hero-in */
html.anim .hero-cred,html.anim .hero-h,html.anim .hero-sub,html.anim .hero-ctas{
  opacity:0;transform:translateY(26px);filter:blur(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
html.anim .hero-cred{transition-delay:.25s}
html.anim .hero-h{transition-delay:.42s}
html.anim .hero-sub{transition-delay:.7s}
html.anim .hero-ctas{transition-delay:.85s}
html.anim.hero-in .hero-cred,html.anim.hero-in .hero-h,
html.anim.hero-in .hero-sub,html.anim.hero-in .hero-ctas{
  opacity:1;transform:none;filter:none;
}

/* the vinyl edge */
.pass__blade{
  position:absolute;z-index:2;top:50%;
  left:calc(var(--p) * 170vw - 30vw);
  width:3px;height:124vh;
  transform:translate(-50%,-50%) rotate(11.9deg);
  background:var(--white);
  box-shadow:0 0 18px rgba(255,255,255,.85),0 0 60px rgba(255,255,255,.35);
  opacity:0;pointer-events:none;
}

/* install telemetry HUD */
.pass__hud{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  display:flex;align-items:baseline;gap:18px;
  padding:20px var(--gutter);
  mix-blend-mode:difference;color:var(--white);
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.pass__hud .label{opacity:.85}
.hud__count{
  font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 118;font-weight:480;font-size:1.35rem;
  letter-spacing:.02em;line-height:1;
}
.hud__tags{display:flex;gap:10px;align-items:baseline}
.hud__tags span{opacity:.35;transition:opacity .3s}
.hud__tags span.on{opacity:1}
.pass__hud .hud__cue{margin-left:auto;opacity:0;transition:opacity .5s}
html.anim .pass__hud .hud__cue{opacity:.85}
@media (max-width:600px){.hud__cue{display:none}.pass__hud{gap:12px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;
  font-weight:420;font-size:1rem;
  letter-spacing:.005em;
  padding:14px 28px;border:1px solid transparent;border-radius:32px;
  transition:transform .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),color .3s var(--ease);
}
.btn--solid{background:var(--accent);color:#ffffff}
.btn--line{border-color:var(--white);color:var(--white)}
.btn:hover{transform:scale(1.02)}
.btn--solid:hover{background:#4356d6}
.light .btn--solid{background:var(--accent);color:#ffffff}
.light .btn--line{border-color:var(--ink);color:var(--ink)}

/* ---------- sections (single padding pair sitewide) ---------- */
section{padding-block:var(--pad)}
.wrapctr{width:min(1200px,92vw);margin-inline:auto}

.s-panel{background:var(--panel)}
.light{
  background:linear-gradient(180deg,var(--primer-a),var(--primer-b));
  color:#2a2a36;
  clip-path:polygon(0 2.5vw,100% 0,100% 100%,0 100%);
}
.light .label{color:var(--ink)}

/* two-column shop section */
.cols{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:820px){.cols{grid-template-columns:1fr}}

/* stat plates */
.plates{display:grid;gap:12px}
.plate{
  background:var(--panel);border-radius:12px;padding:28px 32px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.plate strong{
  display:block;color:var(--white);
  font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 118;font-weight:480;
  font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.plate span{display:block;margin-top:6px;font-size:.875rem}
.plate:hover{background:var(--wallgray)}

/* pushed-right variant (alignment variety without centering) */
.pushed{max-width:640px;margin-left:auto}
.pushed h2{max-width:none}

/* ---------- finish rail (CSS swatches — graphics, not photos) ----------
   A finish IS a specular response, so each chip renders one: matte scatters
   the light away, satin spreads it wide and soft, gloss snaps it to a hard
   streak over a mirrored horizon, brushed smears it along the grain, color
   shift bends its hue across the panel. Hover runs a single moving light
   over all six — same light, six different reactions.
   Deliberate exception to the monochrome art-lock at the top of this file:
   color-change film is the product this section sells, and Color Shift
   cannot be shown in black. Brand chrome everywhere else stays #000/#fff.
   ------------------------------------------------------------------- */
.finishes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;margin-top:3rem;
}
@media (max-width:820px){.finishes{grid-template-columns:repeat(2,1fr)}}
.finish{position:relative}
.chip{
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  --film:linear-gradient(#1a1a1a,#1a1a1a);
  --spec:linear-gradient(transparent,transparent);
  --grain:linear-gradient(transparent,transparent);
  --sweep-w:22%;   /* half-width of the travelling highlight: small = glossy */
  --sweep-a:.2;
  height:150px;position:relative;overflow:hidden;
  border-radius:12px;border:1px solid rgba(23,23,33,.22);
  background:
    var(--spec),
    var(--grain),
    /* panel curvature: lit along the top edge, shaded into the bottom */
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 24%,
                    rgba(0,0,0,.22) 74%,rgba(0,0,0,.42)),
    var(--film);
}
.chip::after{
  content:"";position:absolute;top:-25%;bottom:-25%;left:0;right:0;
  background:linear-gradient(100deg,
    transparent calc(50% - var(--sweep-w)),
    rgba(255,255,255,var(--sweep-a)) 50%,
    transparent calc(50% + var(--sweep-w)));
  transform:translateX(-105%) skewX(-12deg);
  transition:transform .85s var(--ease);
}
.finish:hover .chip::after{transform:translateX(105%) skewX(-12deg)}
@media (prefers-reduced-motion:reduce){.chip::after{display:none}}

/* matte black — scatters light, so no highlight survives, only grain */
.chip--matte{
  --film:linear-gradient(#1e1e1e,#131313);
  --spec:radial-gradient(130% 105% at 24% -12%,rgba(255,255,255,.08),transparent 64%);
  --grain:var(--noise);
  --sweep-w:36%;--sweep-a:.05;
}
/* satin — one wide, soft, low-contrast sheen */
.chip--satin{
  --film:linear-gradient(165deg,#4e5661,#39404a 56%,#282e35);
  --spec:linear-gradient(102deg,transparent 10%,rgba(255,255,255,.12) 32%,
         rgba(255,255,255,.22) 48%,rgba(255,255,255,.10) 64%,transparent 88%);
  --grain:var(--noise);
  --sweep-w:22%;--sweep-a:.18;
}
/* gloss — hard specular streak over a mirrored horizon line */
.chip--gloss{
  --film:linear-gradient(170deg,#c8161f,#8f0d15 60%,#5c060c);
  --spec:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.50) 47.5%,
         rgba(255,255,255,.10) 52%,transparent 60%),
         linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.05) 17%,
         rgba(0,0,0,.06) 18%,rgba(0,0,0,.28));
  --sweep-w:7%;--sweep-a:.5;
}
/* brushed aluminium — grain lines, highlight smeared along them */
.chip--brushed{
  --film:linear-gradient(90deg,#787e86,#b0b6bd 38%,#888e95 58%,#666c73);
  /* two grain periods beating against each other — regular stripes read as corduroy */
  --grain:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,
          rgba(0,0,0,.16) 1px 2px,transparent 2px 4px),
          repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,
          rgba(255,255,255,.07) 2px 3px,transparent 3px 11px);
  --spec:linear-gradient(90deg,transparent 12%,rgba(255,255,255,.24) 38%,
         rgba(255,255,255,.36) 50%,rgba(255,255,255,.18) 62%,transparent 88%);
  --sweep-w:16%;--sweep-a:.3;
}
/* color shift — the hue travels across the panel as the angle changes */
.chip--shift{
  --film:linear-gradient(112deg,#3a1f5c,#3937a4 19%,#1c7fa6 40%,#1a9d78 58%,
         #86a52c 76%,#8e4a26 91%,#41215c);
  --spec:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.30) 48%,
         rgba(255,255,255,.07) 53%,transparent 61%),
         linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 34%);
  --sweep-w:10%;--sweep-a:.45;
}
/* and more — the fan deck */
.chip--more{
  --film:linear-gradient(90deg,#171717 0 12.5%,#d8d8d8 12.5% 25%,#9c1620 25% 37.5%,
         #a8571b 37.5% 50%,#2c6b3a 50% 62.5%,#146a75 62.5% 75%,
         #23477f 75% 87.5%,#4a2f68 87.5% 100%);
  --spec:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 30%);
  --sweep-w:18%;--sweep-a:.22;
}
.finish figcaption{
  margin-top:10px;color:var(--ink);
  font-weight:480;font-size:.8rem;
  letter-spacing:.01em;
}

/* ---------- docket (their real IG highlight reels) ---------- */
.docket{
  list-style:none;margin-top:2.6rem;
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,64px);
  border-top:1px solid var(--wallgray);
}
@media (max-width:700px){.docket{grid-template-columns:1fr}}
.docket a{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:15px 10px;text-decoration:none;
  border-bottom:1px solid var(--wallgray);
  transition:background .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease);
}
.docket .d-name{
  color:var(--white);
  font-weight:480;font-size:1.05rem;
  letter-spacing:.005em;
  transition:color .25s var(--ease);
}
.docket .d-tag{
  font-weight:400;font-size:.75rem;
  letter-spacing:.01em;opacity:.6;white-space:nowrap;
}
.docket a:hover{background:var(--panel);padding-left:18px}

.ig-line{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:20px;align-items:center}

/* ---------- subpage header band (wipe-in echo of the mechanic) ---------- */
.band{
  position:relative;overflow:hidden;
  min-height:56dvh;display:grid;align-items:end;
  background:var(--black) url("assets/wall.webp") center/cover no-repeat;
  color:var(--white);
  padding:calc(var(--pad) + 40px) 0 var(--pad);
}
.band h1{font-size:clamp(2.4rem,5.2vw,4.05rem);max-width:18ch}
.band .band-sub{
  margin-top:1.2rem;line-height:1.35;
  font-size:clamp(1rem,1.3vw,1.125rem);
}
/* primer cover peels off left→right on load — same 12° edge, once */
html.anim .band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--primer-a),var(--primer-b));
  animation:bandwipe 1.25s var(--ease) .15s forwards;
}
@keyframes bandwipe{
  from{clip-path:polygon(calc(-14% + 7vh) 0,100% 0,100% 100%,calc(-14% - 7vh) 100%)}
  to{clip-path:polygon(calc(116% + 7vh) 0,100% 0,100% 100%,calc(116% - 7vh) 100%)}
}
html.anim .band h1,html.anim .band .band-sub{
  opacity:0;transform:translateY(26px);filter:blur(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
html.anim .band h1{transition-delay:.45s}
html.anim .band .band-sub{transition-delay:.62s}
html.anim.hero-in .band h1,html.anim.hero-in .band .band-sub{opacity:1;transform:none;filter:none}

/* ---------- scroll reveals ---------- */
html.anim .reveal{
  opacity:0;transform:translateY(28px);filter:blur(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
html.anim .reveal.in{opacity:1;transform:none;filter:none}

/* ---------- footer: the install plate + ledger ---------- */
.foot-plate{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--primer-a),var(--primer-b));
  color:var(--ink);
  padding:var(--pad) 0;
}
.foot-plate__dark{
  position:absolute;inset:0;
  background:var(--black) url("assets/wall.webp") center/cover no-repeat;
  clip-path:polygon(56% 0,100% 0,100% 100%,44% 100%);
}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;position:relative}
.foot-word{
  font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 118;font-weight:480;
  letter-spacing:.01em;line-height:1.1;font-size:clamp(2.1rem,4.6vw,3.6rem);
}
.foot-plate .foot-cell--bare .foot-word{color:var(--ink)}
.foot-cell--wrap{color:var(--white);text-align:right;position:relative}
.foot-cell--wrap .foot-word{color:var(--white)}
.foot-cell--wrap p{margin-left:auto}
.foot-cell--wrap .btn{margin-top:1.6rem}
.foot-cell small{display:block;margin-top:.8rem;font-size:.85rem;max-width:34ch}
.foot-cell--wrap small{margin-left:auto}
@media (max-width:700px){
  .foot-plate__dark{clip-path:polygon(0 58%,100% 42%,100% 100%,0 100%)}
  .foot-grid{grid-template-columns:1fr;gap:26vh}
  .foot-cell--wrap{text-align:left}
  .foot-cell--wrap p,.foot-cell--wrap small{margin-left:0}
}

.foot-ledger{background:var(--black);padding:56px 0 40px}
.foot-ledger dl{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:0;
}
.foot-ledger dl > div{min-width:0}
.foot-ledger dd{overflow-wrap:anywhere}
@media (max-width:820px){.foot-ledger dl{grid-template-columns:1fr 1fr}}
.foot-ledger dt{
  font-weight:480;font-size:.75rem;
  letter-spacing:.01em;color:var(--dim);opacity:.7;
  margin-bottom:8px;
}
.foot-ledger dd{margin:0;font-size:.92rem;color:var(--white)}
.foot-ledger dd a{text-decoration:none;border-bottom:1px solid var(--wallgray);transition:border-color .3s}
.foot-ledger dd a:hover{border-color:var(--white)}
.foot-ledger dd + dt{margin-top:14px}
.foot-legal{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--wallgray);
  display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;
  font-size:.8rem;opacity:.75;
}
.foot-logo img{height:40px;width:auto;margin-bottom:34px}

/* ============================================================
   PORTFOLIO — added when 38 real work photographs were recovered
   from the shop's own site (nebula.wsimg.com asset host, the
   GoDaddy CDN behind wrapcitylasvegas.com). The art-lock note at
   the top of this file said no real customer photography existed
   in the source material; that turned out to be wrong, so the
   Instagram-highlight stand-in has been replaced by the real work.
   Chrome stays #000/#fff — the colour comes from the vehicles.
   ============================================================ */

/* ---------- filter rail ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:2.4rem;
}
.filters button{
  cursor:pointer;background:transparent;color:var(--dim);
  border:1px solid #70707d;border-radius:40px;
  font-family:inherit;font-weight:420;
  font-size:.875rem;letter-spacing:.005em;
  padding:10px 20px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.filters button:hover{border-color:var(--white);color:var(--white)}
.filters button[aria-pressed="true"]{background:var(--white);color:var(--black);border-color:var(--white)}

/* ---------- work grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-top:2.6rem;
}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,1fr)}}

.tile{
  position:relative;margin:0;overflow:hidden;background:var(--panel);
  border-radius:12px;
}
.tile.hide{display:none}
.tile img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .7s var(--ease),filter .5s var(--ease);
}
.tile--tall img{aspect-ratio:3/4}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:44px 18px 15px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
  color:var(--white);font-size:.83rem;line-height:1.45;
  transform:translateY(12%);opacity:0;
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.tile:hover figcaption,.tile:focus-within figcaption{transform:none;opacity:1}
.tile figcaption b{
  display:block;font-weight:480;
  font-size:.75rem;letter-spacing:.01em;
  color:var(--white);margin-bottom:5px;opacity:.72;
}
@media (hover:none){
  .tile figcaption{transform:none;opacity:1;padding-top:52px}
}
/* whole tile is the lightbox trigger */
.tile button.zoom{
  position:absolute;inset:0;width:100%;height:100%;
  background:transparent;border:0;cursor:zoom-in;padding:0;
}
.tile button.zoom span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}

/* ---------- native <dialog> lightbox ---------- */
dialog.lb{
  border:0;padding:0;background:transparent;max-width:96vw;max-height:96dvh;
  color:var(--white);
}
dialog.lb::backdrop{background:rgba(0,0,0,.93)}
dialog.lb img{max-width:96vw;max-height:82dvh;width:auto;height:auto;margin-inline:auto}
dialog.lb p{
  margin:14px auto 0;text-align:center;font-size:.9rem;color:var(--dim);max-width:60ch;
}
dialog.lb .lb-close{
  position:fixed;top:14px;right:16px;cursor:pointer;
  background:transparent;border:1px solid var(--white);color:var(--white);
  font-family:inherit;font-size:.8rem;font-weight:420;letter-spacing:.005em;
  border-radius:32px;padding:10px 18px;
}
dialog.lb .lb-close:hover{background:var(--white);color:var(--black)}

/* ---------- media band (full-bleed strip of work) ---------- */
.band-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:10px;overflow-x:auto;padding-bottom:10px;margin-top:2.4rem;
  scroll-snap-type:x mandatory;
}
.band-strip figure{margin:0;scroll-snap-align:start;position:relative}
.band-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}

/* ---------- feature split with photo ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.feat--rev > *:first-child{order:2}
@media (max-width:820px){.feat{grid-template-columns:1fr}.feat--rev > *:first-child{order:0}}
.feat figure{margin:0;position:relative;overflow:hidden;border-radius:12px}
.feat figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feat figcaption{
  margin-top:10px;font-size:.75rem;letter-spacing:.01em;
  font-weight:480;opacity:.6;
}
.light .feat figcaption{color:var(--ink)}

/* ---------- spec list ---------- */
.spec{list-style:none;margin-top:2rem;display:grid;gap:0;border-top:1px solid var(--wallgray)}
.light .spec{border-color:rgba(17,17,17,.18)}
.spec li{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid var(--wallgray);flex-wrap:wrap;
}
.light .spec li{border-color:rgba(17,17,17,.18)}
.spec b{
  color:var(--white);font-weight:480;
  font-size:1rem;letter-spacing:.005em;
}
.light .spec b{color:var(--ink)}
.spec span{font-size:.9rem;max-width:56ch;text-align:right;margin-left:auto}
@media (max-width:640px){.spec span{text-align:left;margin-left:0}}

/* ---------- count line ---------- */
.count{
  margin-top:1.4rem;font-weight:480;
  font-size:.75rem;letter-spacing:.01em;opacity:.62;
}