/* SYNOTACY — DROP 001
   ===========================================================================
   Prototype built on mockups. No shot product exists yet; every image here is a
   render or a graded campaign frame, and the two "angled" states are produced by
   a transfer curve applied in post — NOT a photograph of a garment under a lamp.
   That distinction matters and is why nothing on this page publishes a number.

   The page makes no argument. It shows the same frame twice — FLAT and ANGLED —
   on the two garments that carry enough surface to be worth showing twice, and
   lets the visitor make the argument themselves.

   GROUND RELATIONSHIP, and it is the one inversion that makes this not look like
   the register: the in-frame seamless (#EFF1F3) is LIGHTER than the page ground
   (#E3E5E8). Every measured peer runs page-lighter-than-backdrop. Inverting it
   makes each garment a pane of light in a grey field, so five black pieces
   separate with no borders, no cards and no shadows.
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p,figure{margin:0}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

:root{
  --dark:#0B0B0C;      /* hero backdrop, ask, footer, bar                     */
  --dark-ink:#EDEDEF;  /* 16.8:1 on --dark                                    */
  --dark-dim:#8A8C90;  /*  5.84:1 on --dark                                   */
  --ground:#E3E5E8;    /* the page                                            */
  --ink:#121316;       /* 14.9:1 on --ground                                  */
  --dim:#5E6064;       /*  4.99:1 on --ground — also every hairline           */
  --seam:#EFF1F3;      /* in-frame seamless, LIGHTER than the page            */
  --gut:20px;
  --speed:120ms;
  --ease:cubic-bezier(.45,.05,.19,1);
  /* no chromatic accent exists in this system */
}
@media (prefers-reduced-motion:reduce){:root{--speed:1ms}}

body{
  background:var(--ground);color:var(--ink);
  font-family:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-stretch:87.5%;               /* one width, everywhere but the wordmark */
  font-size:15px;line-height:24px;font-weight:400;letter-spacing:0;
}

/* ---- the four tiers. Weight RISES as size falls: 400 at 15, 500 at 11,
        600 at 9. Nothing here is w300 — "light equals luxury" is true at 40px
        and a rendering artefact at 9px. Every line-box is 16/20/24, never a
        unitless multiplier, so a 9px SKU and an 11px name share a baseline. ---- */
.wm{font-size:11px;line-height:20px;letter-spacing:.16em;font-weight:600;
    font-stretch:100%;text-transform:uppercase}  /* the one string off the ramp */
.mi{font-size:11px;line-height:20px;letter-spacing:.08em;font-weight:500;text-transform:uppercase}
.cap{font-size:9px;line-height:16px;letter-spacing:.12em;font-weight:600;text-transform:uppercase;color:var(--dim)}
.sku{font-family:"Martian Mono",ui-monospace,monospace;font-size:9px;line-height:16px;
     letter-spacing:.06em;font-weight:500;font-stretch:75%;text-transform:uppercase;color:var(--dim)}

.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--dark);color:var(--dark-ink);padding:12px 16px}
.skip:focus{left:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- header: static, scrolls away.
     Not fixed — a fixed header over a hero that changes ground is a legibility
     problem you then have to solve with blend modes. Removing the crossing
     removes the problem. ---------- */
.hd{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--gut);color:var(--dark-ink);
}
.hd a{padding:12px 0}            /* 20px line-box + 24px padding = 44px target */

/* ---------- hero: one photograph and one sentence. Nothing to operate. ---------- */
.hero{position:relative;background:var(--dark);color:var(--dark-ink);
      min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The header strip measured a MEAN luminance of 104/255 against #EDEDEF type —
   4.75:1, over the floor on average but under it wherever skin or the cream wall
   crosses the strip. A mean is not a guarantee, so both type strips get a scrim
   rather than a hope. Baked into CSS, not the JPEG, so the crop can change. */
.hero::before{content:"";position:absolute;inset:0 0 auto;height:150px;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,12,.88),rgba(11,11,12,0))}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:240px;z-index:1;
  background:linear-gradient(0deg,rgba(11,11,12,.86),rgba(11,11,12,0))}
.hero__in{position:relative;z-index:2;padding:0 var(--gut) 28px}
.hero__line{max-width:30ch}
.hero .cap{color:var(--dark-dim)}

/* ---------- statement ---------- */
.stmt{padding:64px var(--gut)}
.stmt p{max-width:38ch}

/* ---------- garments: one per band, single column, authored spans.
     No 3-up grid exists on this page. Spans are hand-set per band so the column
     has a ragged edge instead of the uniform rhythm that reads as a template. ---- */
.band{padding:0 var(--gut) 64px}
.band__fig{position:relative;background:var(--seam);width:var(--w,100%);margin-left:var(--off,0)}
.band__fig img{width:100%;height:auto}
/* the angled state sits on top and is revealed by opacity — the cheapest
   compositor-only property, and the only thing that animates on this site */
.band__lit{position:absolute;inset:0;opacity:0;transition:opacity var(--speed) var(--ease)}
.band[data-on="1"] .band__lit{opacity:1}
.band__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:12px}

/* the switch: a hairline with two words on it. No percentage, no readout. */
.sw{display:inline-flex;margin-top:12px;border-top:1px solid var(--dim)}
.sw button{
  background:none;border:0;cursor:pointer;padding:12px 16px 12px 0;color:var(--dim);
  font-size:11px;line-height:20px;letter-spacing:.08em;font-weight:500;text-transform:uppercase;
  font-family:inherit;font-stretch:87.5%;transition:color var(--speed) var(--ease);
}
.sw button+button{padding-left:16px}
.sw button[aria-pressed="true"]{color:var(--ink)}

/* ---------- the ask ---------- */
.ask{background:var(--dark);color:var(--dark-ink);padding:96px var(--gut)}
.ask__in{max-width:420px}
.ask p{color:var(--dark-ink);max-width:34ch}
.ask .cap{color:var(--dark-dim)}
.f{margin-top:24px}
.f input{
  width:100%;height:48px;padding:0 0 0 2px;background:none;color:var(--dark-ink);
  border:0;border-bottom:1px solid var(--dark-dim);border-radius:0;
  font-size:16px;line-height:24px;            /* the largest type on the site */
}
.f input::placeholder{color:var(--dark-dim)}
.f input:focus{outline:none;border-bottom-color:var(--dark-ink)}
.f button{
  margin-top:16px;width:100%;min-height:48px;background:var(--dark-ink);color:var(--dark);
  border:0;border-radius:0;cursor:pointer;
  font-size:11px;line-height:20px;letter-spacing:.08em;font-weight:500;text-transform:uppercase;
  font-family:inherit;font-stretch:87.5%;transition:opacity var(--speed) var(--ease);
}
.f button:hover{opacity:.82}
.f button[disabled]{opacity:.5;cursor:default}
.f__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{margin-top:12px;min-height:16px;color:var(--dark-dim)}
.done{margin-top:24px;color:var(--dark-ink)}

/* ---------- footer ---------- */
.ft{background:var(--dark);color:var(--dark-dim);padding:0 var(--gut) 96px}
.ft a{color:var(--dark-ink)}
.ft__row{display:flex;flex-wrap:wrap;gap:8px 32px;border-top:1px solid #2A2A2C;padding-top:24px}
.ft a,.ft span{padding:12px 0}

/* ---------- the persistent bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--dark);color:var(--dark-ink);
     display:flex;justify-content:space-between;align-items:center;padding:0 var(--gut)}
.bar a,.bar button{padding:12px 0;background:none;border:0;cursor:pointer;font-family:inherit}
body{padding-bottom:44px}

/* ---------- wider viewports: the column stays a column. The spans widen and
     the offsets grow, so the ragged edge becomes more pronounced, not less. ---- */
@media(min-width:900px){
  :root{--gut:40px}
  .hero__in{padding-bottom:40px}
  .stmt,.band{padding-left:40px;padding-right:40px}
  .stmt{padding-top:96px;padding-bottom:96px}
  .band{padding-bottom:96px}
  .band__meta{max-width:var(--w,100%);margin-left:var(--off,0)}
  .ask,.ft{padding-left:40px;padding-right:40px}
}