/* ==========================================================================
   Self-Made Legends — selfmadelegendsz.com
   Copyright (c) 2026 Self-Made Legends LLC. All Rights Reserved.
   ========================================================================== */

:root{
  /* ── ground ──────────────────────────────────────────────────────────
     Black, but biased green rather than blue. The old neutrals were cool
     greys, which fight malachite; these carry a trace of it, so the jade
     architecture below reads as the same material rather than a colour
     laid on top.

     It stays BLACK on purpose. Every product photograph in the shop is
     shot on a black backdrop — put them on an emerald page and each one
     sits in a visible rectangle of the wrong colour. The green belongs to
     the building, not the floor.                                        */
  --void:#040706;
  --pitch:#080D0B;
  --marble:#101A16;
  --slate:#16231E;
  --raise:#1E2E28;

  /* ── malachite ───────────────────────────────────────────────────────
     The domes. Deep body, lit edge, and the shadow under the colonnade. */
  --jade:#0E4A3C;
  --jade-lt:#1C7A63;
  --jade-dp:#072A22;
  --jade-ash:#123A31;

  /* ── gold ────────────────────────────────────────────────────────────
     Warmed a touch toward the render's light, which is late sun rather
     than a showroom lamp.                                               */
  --gold:#CFA529;
  --gold-lt:#F6E4A6;
  --gold-md:#DFC15C;
  --gold-dp:#8F6E15;
  --gold-ash:#725D24;

  /* The sunset behind the palace. Only ever used as LIGHT — a glow, a
     gradient stop, a torch — never as a fill or a type colour. */
  --ember:#E8A85C;

  /* velvet */
  --velvet:#3A1020;
  --velvet-lt:#5C1B32;

  /* type */
  --ivory:#EFEAE0;
  --ash:#95917E;
  --ash-dim:#6A675A;
  --rule:#233029;

  /* semantic */
  --ok:#5FBE8C;
  --err:#E08163;

  --shell:1180px;
  --nav-h:64px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

body{
  margin:0;
  background:var(--void);
  color:var(--ivory);
  font-family:"Jost","Futura","Century Gothic",system-ui,-apple-system,sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}

/* ── type roles ───────────────────────────────────────────────────────── */
h1,h2,h3,h4,.disp{
  font-family:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  font-weight:400;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.01em;
}
.mono,.eyebrow,.sku,.tag,.field-lbl{
  font-family:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
p{margin:0;}

.eyebrow{
  font-size:.63rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-ash);
}

.foil{
  background:linear-gradient(100deg,var(--gold-dp) 0%,var(--gold) 18%,var(--gold-lt) 34%,var(--gold) 50%,var(--gold-dp) 66%,var(--gold-md) 84%,var(--gold-lt) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .foil{color:var(--gold);-webkit-text-fill-color:var(--gold);}
}

hr.g{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--gold-dp) 14%,var(--gold) 50%,var(--gold-dp) 86%,transparent);}
hr.t{height:1px;border:0;margin:0;background:var(--rule);}

/* ── shell ────────────────────────────────────────────────────────────── */
.shell{max-width:var(--shell);margin:0 auto;padding:0 1.5rem;}
section{padding:5.5rem 0;position:relative;}
section + section{border-top:1px solid var(--rule);}
@media(max-width:700px){ section{padding:3.75rem 0;} }

.sec-head{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2.75rem;max-width:44rem;}
.sec-head h2{font-size:clamp(1.85rem,4.6vw,2.85rem);line-height:1.05;}
.sec-head .lede{font-size:1.02rem;color:var(--ash);max-width:52ch;}

/* ── grounds ──────────────────────────────────────────────────────────── */
/* Green-black marble under a low sun: malachite bleeding up from the left,
   an ember wash from the far corner where the light is, and gold veining
   through it. The veins are the floor inlay from the render — few, fine and
   angled, never a pattern you could count. */
.marble{
  background:
    radial-gradient(120% 90% at 16% 6%, var(--jade-dp) 0%, transparent 58%),
    radial-gradient(80% 65% at 92% 96%, rgba(232,168,92,.10) 0%, transparent 62%),
    linear-gradient(168deg,#0C1512 0%,#122019 45%,#070C0A 100%);
  position:relative;isolation:isolate;overflow:hidden;
}
.marble::before{
  content:"";position:absolute;inset:-25%;pointer-events:none;z-index:0;
  /* Weaker than they look in the numbers. Gold veining that read as texture
     on a grey ground reads as bright banding on malachite — the ground got
     darker and greener, so the same alpha carries far more contrast. These
     are set to land where the old ones did by eye, not on paper. */
  background:
    linear-gradient(72deg,transparent 46.2%,rgba(207,165,41,.17) 46.7%,rgba(246,228,166,.09) 47.1%,transparent 47.6%),
    linear-gradient(72deg,transparent 61.4%,rgba(207,165,41,.09) 61.7%,transparent 62.1%),
    linear-gradient(66deg,transparent 28.5%,rgba(28,122,99,.11) 28.9%,transparent 29.4%),
    linear-gradient(58deg,transparent 15.2%,rgba(207,165,41,.06) 15.6%,transparent 16.0%);
}
.marble::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(80% 64% at 50% 40%, transparent 0%, transparent 44%, rgba(4,7,6,.66) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, transparent 1px 2px);
}
.marble > *{position:relative;z-index:2;}

.velvet-bg{
  background:
    radial-gradient(70% 100% at 26% 0%, #4A1529 0%, transparent 62%),
    radial-gradient(64% 90% at 84% 100%, #26091600 0%, transparent 66%),
    linear-gradient(162deg,#2E0D1A 0%,#120610 100%);
}

/* Malachite, lit from the upper left the way the domes are, with the sunset
   catching the lower right. This is the house's own material — it carries
   the seal, and it is the one surface on the site that is a colour rather
   than a shade of black. */
.jade-bg{
  background:
    radial-gradient(72% 100% at 24% 0%, #17604E 0%, transparent 64%),
    radial-gradient(60% 84% at 88% 98%, rgba(232,168,92,.16) 0%, transparent 62%),
    linear-gradient(162deg,#0E4A3C 0%,#072A22 52%,#04120F 100%);
}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:80;height:var(--nav-h);
  background:rgba(4,7,6,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  max-width:var(--shell);margin:0 auto;padding:0 1.5rem;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0;}
.brand svg{width:32px;height:32px;display:block;}
.brand span{
  font-family:"Bodoni Moda",Didot,serif;
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-md);
  white-space:nowrap;
}
.nav-links{display:flex;gap:.15rem;align-items:center;}
.nav-links a{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;padding:.5rem .55rem;border-radius:2px;
  transition:color .2s;white-space:nowrap;
}
@media(min-width:941px) and (max-width:1200px){
  .nav-links a{font-size:.66rem;letter-spacing:.1em;padding:.5rem .4rem;}
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold-lt);}

.nav-toggle{
  display:none;background:none;border:1px solid var(--rule);border-radius:2px;
  color:var(--gold-md);padding:.42rem .7rem;cursor:pointer;
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
@media(max-width:940px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(4,7,6,.985);
    border-bottom:1px solid var(--rule);
    padding:.5rem 1.5rem 1.1rem;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.72rem 0;border-bottom:1px solid var(--rule);font-size:.8rem;}
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:"DM Mono",monospace;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.92rem 1.7rem;border-radius:2px;cursor:pointer;
  text-decoration:none;border:1px solid var(--gold);
  background:transparent;color:var(--gold-lt);
  transition:background .22s,color .22s,border-color .22s;
}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--void);}
.btn-solid{
  background:linear-gradient(100deg,var(--gold-dp),var(--gold) 40%,var(--gold-lt) 60%,var(--gold));
  color:var(--void);border-color:transparent;font-weight:500;
}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--gold-lt);color:var(--void);}
.btn-ghost{border-color:var(--rule);color:var(--ash);}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--gold-dp);background:transparent;color:var(--gold-lt);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{
  min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;
  padding:4rem 0;border-top:0;
}

/* The city sits behind the hero rather than in it.
   Held at 34% and desaturated so it reads as the world the brand lives in,
   not as a photograph competing with the wordmark. Anchored to 50% 34% —
   the palace and its dome — because `cover` on a portrait image in a wide
   viewport crops from the middle by default and beheads the building. */
.hero-city{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.hero-city img{
  width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  opacity:.30;
  /* Blurred on purpose, and not only to push it back. The palace in the
     render has SELF-MADE LEGENDS carved across its front, which landed
     directly behind the seal — two wordmarks stacked, both unreadable.
     Blur dissolves the building's lettering while keeping its domes,
     towers and light, which is the half that was doing the work.
     scale(1.06) hides the soft edge blur leaves at the frame. */
  filter:saturate(.88) contrast(1.03) blur(4px);
  transform:scale(1.06);
}
/* Three scrims: sink the corners, drop a vertical wash so type never lands
   on a bright cloud, and put the sunset back as light low in the frame. */
.hero-city::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(84% 66% at 50% 40%, transparent 0%, transparent 22%, rgba(4,7,6,.86) 100%),
    linear-gradient(180deg, rgba(4,7,6,.80) 0%, rgba(4,7,6,.42) 36%, rgba(4,7,6,.92) 100%),
    radial-gradient(62% 36% at 50% 78%, rgba(232,168,92,.14) 0%, transparent 70%);
}
@media (prefers-reduced-motion:reduce){ .hero-city img{transform:none;} }

/* The film on a loop, over the still. Fades in only once it can actually
   play, so a slow network never shows a black rectangle where the city was. */
.hero-loop{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  opacity:0;transition:opacity 1.2s ease;
  filter:saturate(.9) contrast(1.02);
}
.hero-loop.on{opacity:.42;}

/* The sound control. Sits in the hero, small, and says what it is —
   an unlabelled speaker icon makes people guess. */
.sound{
  position:absolute;right:1.5rem;bottom:1.6rem;z-index:5;
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(4,7,6,.62);border:1px solid var(--rule);border-radius:2px;
  padding:.5rem .8rem;cursor:pointer;color:var(--ash);
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .2s,border-color .2s;
}
.sound:hover{color:var(--gold-lt);border-color:var(--gold-ash);}
.sound:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sound.is-on{color:var(--gold-lt);border-color:var(--gold-dp);}
/* Three bars that rise when the sound is on. Pure CSS — no icon font. */
.sound-i{display:inline-flex;align-items:flex-end;gap:2px;height:11px;}
.sound-i::before,.sound-i::after{content:"";width:2px;background:currentColor;height:4px;}
.sound-i{position:relative;width:10px;}
.sound-i::before{height:4px;}
.sound-i::after{height:7px;}
.sound.is-on .sound-i::before{animation:eq .9s ease-in-out infinite alternate;}
.sound.is-on .sound-i::after{animation:eq .7s .2s ease-in-out infinite alternate;}
@keyframes eq{from{height:3px;} to{height:11px;}}
@media (prefers-reduced-motion:reduce){
  .sound.is-on .sound-i::before,.sound.is-on .sound-i::after{animation:none;height:8px;}
}
@media(max-width:700px){ .sound{right:1rem;bottom:1rem;} }

/* Call the CEO. The number is injected by sml.js — see the note there. */
.callus{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.3rem;
}
.callus-n{
  font-family:"Bodoni Moda",Didot,serif;font-size:1.45rem;letter-spacing:.02em;
  color:var(--gold-lt);text-decoration:none;width:max-content;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.callus-n:hover,.callus-n:focus-visible{border-bottom-color:var(--gold-dp);}
.callus-t{font-size:.78rem;color:var(--ash-dim);}

/* The section that stands where invented reviews would have gone. */
.first{
  max-width:44rem;border-left:2px solid var(--gold-dp);padding:.4rem 0 .4rem 1.6rem;
  display:flex;flex-direction:column;gap:1rem;
}
.first-n{
  font-family:"Bodoni Moda",Didot,serif;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;
  background:linear-gradient(100deg,var(--gold-dp),var(--gold) 34%,var(--gold-lt) 52%,var(--gold));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .first-n{color:var(--gold);-webkit-text-fill-color:var(--gold);} }
.first-b{font-size:.95rem;color:var(--ash);max-width:54ch;line-height:1.75;}

/* Two tiers, side by side, so the difference is structural rather than
   asserted. The numbered one is lifted; the everyday one is not diminished. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.2rem;}
.tier{
  border:1px solid var(--rule);background:var(--pitch);border-radius:3px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;
}
.tier.lead{
  border-color:var(--gold-dp);
  background:radial-gradient(90% 100% at 50% 0%, rgba(207,165,41,.07) 0%, transparent 62%), var(--pitch);
}
.tier h3{font-size:1.3rem;color:var(--ivory);}
.tier p{font-size:.9rem;color:var(--ash);line-height:1.7;}
.tier ul{
  list-style:none;margin:.2rem 0 auto;padding:0;
  display:flex;flex-direction:column;gap:.4rem;
}
.tier li{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.68rem;letter-spacing:.06em;color:var(--gold-ash);
  padding-left:1rem;position:relative;
}
.tier li::before{content:"—";position:absolute;left:0;color:var(--gold-dp);}
.tier .btn{margin-top:1rem;width:100%;}

.hero-in{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.9rem;width:100%;position:relative;z-index:2;
}
.hero .seal{width:132px;height:132px;}
.hero h1{
  font-size:clamp(2.5rem,9vw,5.6rem);
  line-height:.97;letter-spacing:.02em;text-transform:uppercase;
}
.hero .tagline{
  font-family:"Bodoni Moda",Didot,serif;font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.4rem);color:var(--ash);max-width:32ch;
}
.hero .cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;}
.hero .meta{
  display:flex;gap:.6rem 1.8rem;flex-wrap:wrap;justify-content:center;
  font-family:"DM Mono",monospace;font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dim);
}

/* ── collections ──────────────────────────────────────────────────────── */
.vol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.15rem;}
.vol{
  border:1px solid var(--rule);background:var(--pitch);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:1.05rem;
  transition:border-color .25s;
}
.vol:hover{border-color:var(--gold-ash);}
.vol-top{display:flex;flex-direction:column;gap:.45rem;}
.vol-top .n{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.2em;color:var(--gold-ash);}
.vol-top h3{font-size:1.35rem;}
.vol-top .d{font-size:.88rem;color:var(--ash);}

.items{display:flex;flex-direction:column;}
.item{
  display:grid;grid-template-columns:1fr auto;gap:.15rem .9rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.item:first-child{border-top:1px solid var(--rule);}
.item h4{font-size:.98rem;grid-column:1;}
.item .sku{grid-column:2;grid-row:1;font-size:.58rem;letter-spacing:.1em;color:var(--gold-ash);white-space:nowrap;}
.item .spec{
  grid-column:1/-1;font-size:.78rem;color:var(--ash-dim);
  display:flex;flex-wrap:wrap;gap:.28rem .8rem;
}
.item .spec b{font-weight:400;color:var(--ash);}
.sw{display:inline-flex;align-items:center;gap:.32rem;}
.sw i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.24);}

/* ── story ────────────────────────────────────────────────────────────── */
.story{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;}
@media(max-width:840px){.story{grid-template-columns:1fr;gap:2.5rem;}}
.story-copy{display:flex;flex-direction:column;gap:1.15rem;}
.story-copy p{color:var(--ash);font-size:1rem;}
.story-copy p.first{color:var(--ivory);}
.story-copy p.first::first-letter{
  font-family:"Bodoni Moda",Didot,serif;font-size:3.3rem;line-height:.82;
  float:left;padding:.12rem .5rem .1rem 0;color:var(--gold);
}
.pull{
  font-family:"Bodoni Moda",Didot,serif;font-style:italic;
  font-size:clamp(1.2rem,2.7vw,1.65rem);line-height:1.34;color:var(--ivory);
  border-top:1px solid var(--gold-dp);border-bottom:1px solid var(--gold-dp);
  padding:1.25rem 0;text-wrap:balance;
}
.story-plate{
  aspect-ratio:4/5;display:grid;place-items:center;
  border:1px solid var(--gold-ash);padding:2rem;position:relative;
}
.plate-in{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;}
.corner{position:absolute;width:15px;height:15px;border:1px solid var(--gold);opacity:.7;}
.c-tl{top:9px;left:9px;border-right:0;border-bottom:0;}
.c-tr{top:9px;right:9px;border-left:0;border-bottom:0;}
.c-bl{bottom:9px;left:9px;border-right:0;border-top:0;}
.c-br{bottom:9px;right:9px;border-left:0;border-top:0;}

/* ── lifestyle strip ──────────────────────────────────────────────────── */
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
.frame{
  aspect-ratio:4/5;border:1px solid var(--rule);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.15rem;gap:.35rem;position:relative;overflow:hidden;
}
.frame .n{
  position:absolute;top:.9rem;left:1.15rem;
  font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.18em;color:var(--gold-ash);
}
.frame .scene{font-family:"Bodoni Moda",Didot,serif;font-size:1.05rem;color:var(--ivory);}
.frame .feat{font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim);}

/* ── drop calendar ────────────────────────────────────────────────────── */
.drops{display:flex;flex-direction:column;}
.drop{
  display:grid;grid-template-columns:8.5rem 1fr auto;gap:.35rem 1.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--rule);align-items:center;
}
.drop:first-child{border-top:1px solid var(--rule);}
.drop .when{
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-md);
}
.drop .what{display:flex;flex-direction:column;gap:.2rem;}
.drop .what h3{font-size:1.12rem;}
.drop .what p{font-size:.84rem;color:var(--ash-dim);}
.status{
  font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.3em .68em;border:1px solid currentColor;border-radius:2px;white-space:nowrap;
}
.st-live{color:var(--ok);}
.st-soon{color:var(--gold-md);}
.st-closed{color:var(--ash-dim);}
@media(max-width:700px){
  .drop{grid-template-columns:1fr auto;}
  .drop .when{grid-column:1/-1;}
}

/* ── the pull: perks + form layout ───────────────────────────────────────────────────────── */
.amb{display:grid;grid-template-columns:1fr 1fr;gap:3.25rem;align-items:start;}
@media(max-width:880px){.amb{grid-template-columns:1fr;gap:2.25rem;}}
.perks{display:flex;flex-direction:column;gap:1.35rem;}
.perk{display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;align-items:start;}
.perk .num{
  font-family:"DM Mono",monospace;font-size:.66rem;color:var(--gold-ash);
  letter-spacing:.12em;padding-top:.22rem;
}
.perk h3{font-size:1.02rem;margin-bottom:.2rem;}
.perk p{font-size:.88rem;color:var(--ash);}

/* ── forms ────────────────────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:1.1rem;}
.form-box{
  border:1px solid var(--rule);background:var(--pitch);padding:1.85rem 1.7rem;
}
.field{display:flex;flex-direction:column;gap:.42rem;}
.field-lbl{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ash);
}
.field-lbl .req{color:var(--err);}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;
  background:var(--void);
  border:1px solid var(--rule);
  border-radius:2px;
  color:var(--ivory);
  font-family:inherit;font-size:.94rem;font-weight:300;
  padding:.78rem .9rem;
  transition:border-color .2s;
}
textarea{min-height:6.5rem;resize:vertical;line-height:1.6;}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-ash) 50%),linear-gradient(135deg,var(--gold-ash) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.4rem;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);}
input::placeholder,textarea::placeholder{color:var(--ash-dim);opacity:1;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
@media(max-width:620px){.field-row{grid-template-columns:1fr;}}

/* honeypot — must stay visually hidden but not display:none (bots skip those) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.8rem;color:var(--ash-dim);line-height:1.55;}
.consent input{margin-top:.28rem;accent-color:var(--gold);flex-shrink:0;width:auto;}

.form-msg{
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.06em;
  padding:.85rem 1rem;border:1px solid currentColor;border-radius:2px;
  display:none;line-height:1.55;
}
.form-msg.show{display:block;}
.form-msg.ok{color:var(--ok);}
.form-msg.err{color:var(--err);}

/* newsletter band */
.news{
  border:1px solid var(--gold-ash);padding:3rem 2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;
}
.news h2{font-size:clamp(1.6rem,4vw,2.4rem);}
.news p{color:var(--ash);max-width:46ch;}
.news form{display:flex;gap:.75rem;width:100%;max-width:32rem;flex-wrap:wrap;}
.news form input[type=email]{flex:1 1 15rem;}
.news form .btn{flex:0 0 auto;}
@media(max-width:620px){
  .news{padding:2.2rem 1.4rem;}
  .news form .btn{flex:1 1 100%;}
}

/* ── testimonials ─────────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.15rem;}
.quote{
  border:1px solid var(--rule);padding:1.7rem 1.6rem;
  display:flex;flex-direction:column;gap:1.1rem;background:var(--pitch);
}
.quote blockquote{
  margin:0;font-family:"Bodoni Moda",Didot,serif;font-style:italic;
  font-size:1.05rem;line-height:1.48;color:var(--ivory);
}
.quote .who{display:flex;flex-direction:column;gap:.15rem;margin-top:auto;}
.quote .who .nm{font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-md);}
.quote .who .wh{font-size:.76rem;color:var(--ash-dim);}
.placeholder-flag{
  border:1px dashed var(--err);color:var(--err);
  font-family:"DM Mono",monospace;font-size:.68rem;line-height:1.6;
  padding:.9rem 1.1rem;margin-bottom:1.5rem;border-radius:2px;
}

/* ── specs ────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:30rem;}
th,td{
  text-align:left;padding:.68rem .9rem .68rem 0;
  border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;
}
th{
  font-family:"DM Mono",monospace;font-weight:400;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ash);border-bottom-color:var(--gold-ash);
}
td{color:var(--ash);}
td:first-child{color:var(--ivory);}
td:last-child,th:last-child{text-align:right;padding-right:0;}

.kv{display:flex;flex-direction:column;gap:.85rem;}
.kv > div{display:flex;gap:1rem;align-items:baseline;font-size:.88rem;flex-wrap:wrap;}
.kv .k{
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-ash);min-width:9.5rem;flex-shrink:0;
}
.kv .v{color:var(--ash);flex:1 1 14rem;}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;max-width:52rem;}
details{border-bottom:1px solid var(--rule);}
details:first-of-type{border-top:1px solid var(--rule);}
summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;
  font-family:"Bodoni Moda",Didot,serif;font-size:1.08rem;color:var(--ivory);
  position:relative;transition:color .2s;
}
summary::-webkit-details-marker{display:none;}
summary:hover,summary:focus-visible{color:var(--gold-lt);}
summary::after{
  content:"+";position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  font-family:"DM Mono",monospace;font-size:1.1rem;color:var(--gold);
}
details[open] summary::after{content:"–";}
details .ans{padding:0 2.5rem 1.5rem 0;color:var(--ash);font-size:.92rem;}
details .ans p + p{margin-top:.8rem;}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:4rem 0 3rem;background:var(--pitch);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem;}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-brand{display:flex;flex-direction:column;gap:1rem;}
.foot-brand svg{width:64px;height:64px;}
.foot-brand p{font-size:.85rem;color:var(--ash-dim);max-width:30ch;}
.foot-col{display:flex;flex-direction:column;gap:.72rem;}
.foot-col h4{
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ash);margin-bottom:.2rem;
}
.foot-col a,.foot-col span{font-size:.85rem;color:var(--ash);text-decoration:none;transition:color .2s;}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--gold-lt);}
.foot-bar{
  border-top:1px solid var(--rule);padding-top:1.75rem;
  display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash-dim);
}
.foot-bar a{color:var(--ash-dim);text-decoration:none;}
.foot-bar a:hover{color:var(--gold-md);}

/* ── a11y ─────────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--void);padding:.75rem 1.2rem;
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── shop ─────────────────────────────────────────────────────────────── */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.15rem;}
.prod{
  border:1px solid var(--rule);background:var(--pitch);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;
  transition:border-color .25s;
}
.prod:hover{border-color:var(--gold-ash);}

/* The shot bleeds to the card edge. Negative margins rather than moving the
   padding onto the inner elements, so a card with no photo is untouched. */
.prod.has-shot{padding-top:0;}
.prod-shot{
  margin:0 -1.5rem .4rem;
  aspect-ratio:3/2;overflow:hidden;
  border-bottom:1px solid var(--rule);background:var(--void);
}
.prod-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
/* The stand-in for a product that has no photograph yet. */
.prod-shot.is-empty{display:grid;place-items:center;background:var(--pitch);}
.prod-shot.is-empty svg{width:64px;height:64px;opacity:.28;}
.prod:hover .prod-shot img{transform:scale(1.03);}
@media (prefers-reduced-motion:reduce){
  .prod-shot img,.prod:hover .prod-shot img{transition:none;transform:none;}
}
/* Older engines with no aspect-ratio get a fixed band rather than a
   zero-height strip where the photo should be. */
@supports not (aspect-ratio:3/2){ .prod-shot{height:190px;} }

.prod-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;}
.prod-sku{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.58rem;letter-spacing:.14em;color:var(--gold-ash);
}
/* Gold, not grey. The badge used to read "Coming soon" and was styled as an
   absence; it now carries the edition number, which is the reason to want one. */
.prod-badge{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-md);border:1px solid var(--gold-ash);
  padding:.24em .6em;border-radius:2px;white-space:nowrap;
}
.prod h3{font-size:1.2rem;line-height:1.2;}
.prod-price{
  font-family:"Bodoni Moda",Didot,serif;
  font-size:1.65rem;line-height:1;
  background:linear-gradient(100deg,var(--gold-dp),var(--gold) 34%,var(--gold-lt) 52%,var(--gold));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .prod-price{color:var(--gold);-webkit-text-fill-color:var(--gold);} }
/* A product whose price is not set yet. Deliberately not the big gold number —
   it is a state, not an amount, and dressing it up as one invites the reader
   to look for a figure that is not there. */
.prod-price.is-tbd{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash-dim);-webkit-text-fill-color:var(--ash-dim);
  background:none;align-self:start;
}
.prod-blurb{font-size:.88rem;color:var(--ash);}
.prod-details{
  margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem;
  font-size:.8rem;color:var(--ash-dim);
}
.prod-details li::marker{color:var(--gold-ash);}
.prod-colors{display:flex;flex-wrap:wrap;gap:.4rem .6rem;font-size:.76rem;color:var(--ash-dim);}

/* A colourway you can pick. Reset the button chrome so it sits level with the
   plain labels beside it, then earn the affordance back with a border. */
.sw-btn{
  font:inherit;color:inherit;background:none;cursor:pointer;
  border:1px solid transparent;border-radius:2px;
  padding:.16em .5em;margin:-.16em 0;
  display:inline-flex;align-items:center;gap:.34em;
  transition:color .2s,border-color .2s;
}
.sw-btn:hover{color:var(--ivory);border-color:var(--rule);}
.sw-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sw-btn[aria-pressed="true"]{color:var(--gold-lt);border-color:var(--gold-dp);}
.prod-action{margin-top:auto;padding-top:.5rem;}
.prod-action .btn{width:100%;}

.shop-note{
  border-left:2px solid var(--gold-dp);padding:.2rem 0 .2rem 1.1rem;
  font-size:.85rem;color:var(--ash);margin-top:2rem;
}

/* ── Question of the Week ─────────────────────────────────────────────── */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.poll-note{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ash);margin-top:.9rem;
}

.poll-card{
  max-width:40rem;border:1px solid var(--rule);background:var(--raise);
  padding:2rem 1.75rem;
}
@media (min-width:640px){ .poll-card{padding:2.5rem 2.25rem;} }

.poll-opts{display:flex;flex-direction:column;gap:.15rem;}

.poll-opt{
  position:relative;display:flex;align-items:flex-start;gap:.9rem;
  padding:1rem .95rem;cursor:pointer;
  border:1px solid transparent;
  transition:border-color .18s ease,background .18s ease;
}
.poll-opt:hover{background:rgba(201,162,39,.045);border-color:var(--rule);}
/* The control is styled directly rather than hidden behind a decorative
   span. A hidden input with a span painted on top swallows the click, and
   the focus ring then has to be faked; this keeps both native. */
.poll-opt input{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;width:1rem;height:1rem;margin:.16rem 0 0;
  border:1px solid var(--gold-ash);border-radius:50%;
  background:transparent;cursor:pointer;position:relative;
  transition:border-color .18s ease;
}
.poll-opt input::after{
  content:"";position:absolute;inset:.21rem;border-radius:50%;
  background:var(--gold);transform:scale(0);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.poll-opt input:checked{border-color:var(--gold);}
.poll-opt input:checked::after{transform:scale(1);}
.poll-opt input:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;}
.poll-opt:has(input:checked){border-color:var(--rule);background:rgba(201,162,39,.05);}
.poll-opt:has(input:checked) .poll-opt-text{color:var(--ivory);}
.poll-opt-text{
  font-size:.94rem;line-height:1.5;color:var(--ash);
  transition:color .18s ease;
}

.poll-idea{margin:.9rem .95rem 0;}
.poll-idea textarea{width:100%;resize:vertical;}

.poll-actions{margin-top:1.6rem;}
.poll-actions .btn{width:100%;}
@media (min-width:640px){ .poll-actions .btn{width:auto;min-width:14rem;} }

/* ── results ── */

.poll-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.35rem;}

.poll-res-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.5rem;
}
.poll-res-label{
  display:flex;align-items:center;gap:.5rem;
  font-size:.9rem;line-height:1.45;color:var(--ash);
}
.poll-res.lead .poll-res-label{color:var(--ivory);}
.poll-crown{width:1.05rem;height:1.05rem;flex-shrink:0;}
.poll-res-num{
  font-family:"DM Mono",monospace;font-size:.78rem;letter-spacing:.08em;
  color:var(--ash-dim);flex-shrink:0;
}
.poll-res.lead .poll-res-num{color:var(--gold-lt);}

.poll-bar{height:3px;background:var(--rule);overflow:hidden;}
.poll-bar i{
  display:block;height:100%;background:var(--gold-dp);
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}
.poll-res.lead .poll-bar i{
  background:linear-gradient(90deg,var(--gold-dp),var(--gold) 60%,var(--gold-lt));
}

.poll-total{
  margin-top:1.9rem;font-family:"DM Mono",monospace;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim);
}

/* ── what won last time ── */

.poll-prev{
  max-width:40rem;margin-top:2.5rem;
  border-left:2px solid var(--gold);padding:.35rem 0 .35rem 1.25rem;
}
.poll-prev-q{font-size:.9rem;color:var(--ash-dim);margin:.2rem 0 .9rem;font-style:italic;}
.poll-prev-win,.poll-prev-did{
  display:grid;grid-template-columns:4.75rem 1fr;gap:.2rem .75rem;
  font-size:.94rem;color:var(--ivory);margin:0 0 .55rem;line-height:1.55;
}
.poll-prev-win span,.poll-prev-did span{
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ash);
  padding-top:.28rem;
}
@media (max-width:420px){
  .poll-prev-win,.poll-prev-did{grid-template-columns:1fr;gap:.1rem;}
}

.poll-foot{
  max-width:40rem;margin-top:1.6rem;font-size:.78rem;
  color:var(--ash-dim);line-height:1.6;
}
.poll-foot a{color:var(--gold-ash);}

@media (prefers-reduced-motion:reduce){
  .poll-bar i,.poll-opt,.poll-opt input,.poll-opt input::after{transition:none;}
}

/* ── Footwear teaser ──────────────────────────────────────────────────── */

.fw-grid{
  display:grid;gap:1.5rem;grid-template-columns:1fr;
  margin-bottom:2rem;
}
@media (min-width:820px){ .fw-grid{grid-template-columns:1fr 1fr;} }

/* The renders are studio product shots on a near-white ground (#f9fbfa,
   sampled from the files). Fighting that with a blend mode looked like a
   bug — a bright slab floating on black. So the plate is set to the same
   white instead: the seam disappears, and a lookbook plate reads as a
   deliberate choice rather than an accident. */
.fw{
  margin:0;border:1px solid var(--rule);overflow:hidden;
  background:#f9fbfa;
}
.fw picture{display:block;}
.fw img{display:block;width:100%;height:auto;}
.fw figcaption{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-top:1px solid var(--rule);background:var(--pitch);
}
.fw-name{
  font-family:"Bodoni Moda",Didot,serif;font-size:1.05rem;color:var(--ivory);
}
.fw-cw{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ash);
}

.fw-note{
  max-width:60ch;border-left:2px solid var(--gold-dp);padding:.3rem 0 .3rem 1.15rem;
  font-size:.85rem;color:var(--ash);line-height:1.65;margin-bottom:2.25rem;
}
.fw-note strong{color:var(--ivory);font-weight:400;}

.fw-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;}
.fw-cta-note{font-size:.8rem;color:var(--ash-dim);max-width:34ch;line-height:1.55;}

/* Three across on a wide screen; the two-up rule above still governs pairs. */
@media (min-width:1000px){ .fw-grid.fw-three{grid-template-columns:repeat(3,1fr);} }

/* ── Colourway range grid ─────────────────────────────────────────────── */

.cw-grid{
  display:grid;gap:1rem;margin-bottom:1.75rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
}
.cw{margin:0;border:1px solid var(--rule);overflow:hidden;background:#f9fbfa;}
.cw picture{display:block;}
.cw img{display:block;width:100%;height:auto;}
.cw figcaption{
  padding:.7rem .9rem;border-top:1px solid var(--rule);background:var(--pitch);
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-ash);
}
.cw:hover figcaption{color:var(--gold-lt);}

.cw-note{
  max-width:60ch;font-size:.85rem;color:var(--ash);line-height:1.65;
  border-left:2px solid var(--gold-dp);padding:.3rem 0 .3rem 1.15rem;
}

/* A collection sheet. These are laid out to be read whole rather than cropped
   into tiles — each one already carries its own titles, callouts and captions,
   so the page gives it width and gets out of the way. */
.sheet{
  margin:0 0 2.8rem;border:1px solid var(--rule);overflow:hidden;
  background:var(--void);max-width:900px;
}
.sheet img{display:block;width:100%;height:auto;}
.sheet figcaption{
  padding:.85rem 1.1rem;border-top:1px solid var(--rule);background:var(--pitch);
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ash);
}

/* The named pieces in a collection. A list, not a grid — there is no photograph
   for each one yet, and a grid of empty cards would promise images that do not
   exist. */
.named{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:0 2rem;
}
.named li{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
}
.named b{
  font-family:"Bodoni Moda",Didot,serif;font-weight:400;
  font-size:1.02rem;color:var(--ivory);
}
.named span{font-size:.8rem;color:var(--ash-dim);}

/* The house colourways. A swatch and a name — no product, because the whole
   point is that these belong to no single product. */
.ways{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.9rem 2rem;
}
.ways li{display:flex;align-items:center;gap:.7rem;}
.ways i{
  width:26px;height:26px;flex-shrink:0;border-radius:2px;
  border:1px solid var(--gold-ash);
}
.ways b{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:400;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);
}

/* The hidden tag. Given room and silence rather than a bullet in a spec list —
   it is the one thing on these sheets that is about a person rather than a
   product, and setting it in the same grey as a fabric weight would be wrong. */
.ded{
  margin:3rem auto 0;max-width:34rem;text-align:center;
  padding:2.6rem 1.6rem;border:1px solid var(--gold-ash);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(207,165,41,.07) 0%, transparent 70%),
    var(--pitch);
}
.ded-mark{
  font-family:"Bodoni Moda",Didot,serif;font-size:2.6rem;line-height:1;
  letter-spacing:.14em;margin-left:.14em;
  background:linear-gradient(100deg,var(--gold-dp),var(--gold) 34%,var(--gold-lt) 52%,var(--gold));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .ded-mark{color:var(--gold);-webkit-text-fill-color:var(--gold);} }
.ded-name{
  font-family:"Bodoni Moda",Didot,serif;font-size:1.18rem;color:var(--ivory);
  letter-spacing:.02em;
}
.ded-line{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ash);
}
.ded-body{
  margin-top:1rem;font-size:.86rem;color:var(--ash);max-width:34ch;line-height:1.7;
}
.ded-wide{max-width:42rem;}
/* Two people, side by side, the way the sheet sets them. Collapses to one
   column on a phone rather than squeezing two names onto one line. */
.two{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.6rem;margin-top:1.8rem;width:100%;
}
.two > div{display:flex;flex-direction:column;gap:.3rem;}
.two-n{font-family:"Bodoni Moda",Didot,serif;font-size:1.15rem;color:var(--gold-lt);}
.two-d{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ash);
}
.two-t{font-size:.82rem;color:var(--ash);}

/* ── the film ─────────────────────────────────────────────────────────── */
.filmbox{
  margin:0 0 1.6rem;border:1px solid var(--rule);overflow:hidden;background:#000;
  max-width:900px;
}
.filmbox video{display:block;width:100%;height:auto;}
.filmbox figcaption{
  padding:.85rem 1.1rem;border-top:1px solid var(--rule);background:var(--pitch);
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ash);
}
/* The board is now the working document behind the film, not the headline —
   folded away so it is there for anyone who wants it and out of the way of
   the thing that replaced it. */
.board{max-width:900px;margin:0 0 2.4rem;}
.board summary{
  cursor:pointer;list-style:none;padding:.85rem 1.1rem;
  border:1px solid var(--rule);background:var(--pitch);
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash-dim);transition:color .2s,border-color .2s;
}
.board summary::-webkit-details-marker{display:none;}
.board summary::after{content:" +";color:var(--gold-ash);}
.board[open] summary::after{content:" \2212";}
.board summary:hover{color:var(--gold-lt);border-color:var(--gold-ash);}
.board summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ── the wall ─────────────────────────────────────────────────────────────
   A store display: lit alcoves, a shelf board under each row, and a
   reflection on the board. The reflection is what sells it — a shoe with
   nothing under it reads as a cut-out on a dark page, and a shoe standing in
   its own reflection reads as an object on a surface. */
#wall{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(207,165,41,.06) 0%, transparent 60%),
    linear-gradient(180deg,#070C0A 0%,#0C1512 50%,#050908 100%);
}
.wall{display:flex;flex-direction:column;gap:3.4rem;}

.shelf{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1.6rem;position:relative;padding-bottom:2.6rem;
}
/* The board. A gold top edge catching the light, a body, and a shadow that
   falls away from it. */
.shelf::after{
  content:"";position:absolute;left:-1.5%;right:-1.5%;bottom:1.2rem;height:10px;
  background:linear-gradient(180deg,var(--gold-md) 0%,var(--gold-dp) 22%,#141B18 60%,#080D0B 100%);
  box-shadow:0 12px 26px rgba(0,0,0,.75), 0 1px 0 rgba(246,228,166,.32) inset;
  border-radius:1px;
}

.box{margin:0;display:flex;flex-direction:column;gap:0;position:relative;z-index:1;}

/* The alcove. A pool of light behind the shoe, brightest just above the board. */
.lit{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:
    radial-gradient(72% 86% at 50% 92%, rgba(207,165,41,.14) 0%, transparent 68%),
    linear-gradient(180deg,#0A100E 0%,#0E1613 100%);
  border:1px solid var(--rule);border-bottom:0;
}
.lit img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block;
  transition:transform .55s ease;
}
.box:hover .lit img{transform:scale(1.045);}
/* Vignette, so the sheet text that survived the crop sinks into the corners. */
.lit::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(64% 62% at 50% 50%, transparent 0%, transparent 26%, rgba(5,9,8,.97) 100%),
    linear-gradient(180deg, rgba(5,9,8,.85) 0%, transparent 22%, transparent 78%, rgba(5,9,8,.7) 100%);
}

.box figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  padding:.8rem 1rem;border:1px solid var(--rule);background:var(--pitch);
}
.box figcaption b{
  font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:1rem;color:var(--ivory);
}
.box figcaption span{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.56rem;letter-spacing:.14em;color:var(--gold-ash);white-space:nowrap;
}

/* The reflection: the same picture, flipped, faded out downward. Decorative
   only — it is a copy of an image that already has its alt text above. */
.box::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - 3.2rem);height:3.2rem;
  background:linear-gradient(180deg, rgba(207,165,41,.10) 0%, transparent 78%);
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .box:hover .lit img{transform:none;}
}
@media(max-width:700px){
  .wall{gap:2.4rem;}
  .shelf{padding-bottom:2rem;}
  .shelf::after{height:8px;bottom:1rem;}
}

/* The one shot that leads the section. Dark ground, unlike .cw — this render
   is lit on black and a white plate behind it would show at the edges. */
.fw-lead{
  margin:0 0 2.6rem;border:1px solid var(--rule);overflow:hidden;background:var(--void);
}
.fw-lead img{display:block;width:100%;height:auto;}
.fw-lead figcaption{
  padding:.85rem 1.1rem;border-top:1px solid var(--rule);background:var(--pitch);
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ash);
}
.cw-note strong{color:var(--ivory);font-weight:400;}
.cw-note a{color:var(--gold-md);}

/* ── Model blocks ─────────────────────────────────────────────────────── */

.model{margin-bottom:3.25rem;}
.model:last-of-type{margin-bottom:0;}
.model-head{max-width:52ch;margin-bottom:1.25rem;}
.model-head h3{
  font-family:"Bodoni Moda",Didot,serif;font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;margin:0 0 .45rem;color:var(--ivory);
}
/* The plural is a suffix, not part of the name — set it smaller so "SML 1s"
   reads the way it is said. */
.model-head h3 .s{font-size:.62em;color:var(--gold-md);}
.model-head p{font-size:.92rem;color:var(--ash);}

.cw-grid.cw-lg{grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));}

/* ── The Film ─────────────────────────────────────────────────────────── */

#film{position:relative;isolation:isolate;overflow:hidden;background:var(--void);}
.film-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.film-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  /* Blurred as well as dimmed. At opacity alone the facade's own wordmark was
     still readable behind the text — and it is set without the hyphen, which
     would put the trademark on the page wrong. A backdrop is atmosphere, not
     information; blur makes that true rather than hoped for. The scale hides
     the soft edge blur leaves at the frame. */
  opacity:.20;filter:saturate(.65) contrast(1.02) blur(7px);
  transform:scale(1.06);
}
#film::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--void) 0%,rgba(4,7,6,.55) 30%,rgba(4,7,6,.75) 70%,var(--void) 100%);
}
.film-in{position:relative;z-index:2;}

.shots{
  list-style:none;margin:0;padding:0;max-width:44rem;
  display:flex;flex-direction:column;
}
.shot{
  display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem;align-items:baseline;
  padding:1.05rem 0;border-top:1px solid var(--rule);
}
.shot:first-child{border-top:0;}
.tc{
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  color:var(--gold-ash);font-variant-numeric:tabular-nums;
}
.shot p{
  margin:0;font-family:"Bodoni Moda",Didot,serif;
  font-size:clamp(1.05rem,2.4vw,1.5rem);line-height:1.28;color:var(--ash);
  text-wrap:balance;
}
.shot em{font-style:normal;color:var(--gold-lt);}

.film-end{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--rule);max-width:44rem;}
.film-sign{
  font-family:"Bodoni Moda",Didot,serif;font-size:clamp(1.4rem,3.2vw,2rem);
  color:var(--ivory);line-height:1.1;
}
.film-earned{
  font-family:"Bodoni Moda",Didot,serif;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.1;margin-top:.5rem;
  background:linear-gradient(100deg,var(--gold-dp),var(--gold) 30%,var(--gold-lt) 50%,var(--gold) 72%,var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .film-earned{color:var(--gold);-webkit-text-fill-color:var(--gold);} }

@media(max-width:560px){
  .shot{grid-template-columns:3.4rem 1fr;gap:1rem;}
}