/* ============================================================
   BIGBUCKS — one shirt a month, one principle.
   Mirrors the PussyBucks system: same scale, same type, same
   components. What differs is the brand layer — a warm paper,
   the antler mark, a rising-steps glyph in place of the
   registration mark, one rust accent, and a split hero built
   for studio shots on white rather than a panoramic campaign.
   Light is the default; dark inverts paper and ink only. The
   photo panel and the artwork panel stay white in both themes.
   ============================================================ */
:root{
  --paper:#FBFAF6;
  --ink:#0E0D0B;
  --ash:#7F796D;
  --hair:#E7E3D9;
  --hair-strong:#CEC8BA;
  --field:#F3F0E8;
  --buck:#A8471F;           /* the one accent: antler rust */

  /* fixed in both themes */
  --photo-bg:#FFFFFF;
  --panel:#FFFFFF;
  --panel-ink:#0B0B0C;
  --panel-ash:#85858C;
  --panel-hair:#E4E4E8;

  --step--1:clamp(10px,.68rem + .12vw,11.5px);
  --step-0:clamp(14px,.85rem + .15vw,15.5px);
  --step-1:clamp(17px,1rem + .3vw,20px);
  --step-2:clamp(24px,1.3rem + 1.1vw,34px);
  --step-3:clamp(38px,1.8rem + 4.4vw,86px);

  --gutter:clamp(16px,4vw,56px);
  --rule:1px solid var(--hair);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E0D0B; --ink:#F4F1EA; --ash:#948D80;
    --hair:#24221E; --hair-strong:#37342E; --field:#171613; --buck:#D9794A;
  }
}
:root[data-theme="dark"]{
  --paper:#0E0D0B; --ink:#F4F1EA; --ash:#948D80;
  --hair:#24221E; --hair-strong:#37342E; --field:#171613; --buck:#D9794A;
}

*{box-sizing:border-box}

body{
  /* The ticker and the hero are full-bleed. Without this they sit 8px in
     from the left on the browser's default body margin and lose 8px off
     the right, where overflow-x:hidden quietly clips them. */
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Archivo","Instrument Sans",Helvetica,Arial,sans-serif;
  font-weight:800;text-transform:uppercase;
  line-height:.86;letter-spacing:-.035em;
  text-wrap:balance;margin:0;
}

.label{
  font-family:"Archivo","Instrument Sans",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--ash);
}

a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}

/* rising steps — BigBucks' stand-in for PussyBucks' registration mark */
.step{width:12px;height:12px;flex:none;color:currentColor}
.step rect{fill:currentColor}

/* the antler mark. A black PNG: multiplied onto paper in light mode,
   inverted and screened in dark so any white ground drops out. */
.logo{display:block;width:auto;height:30px;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo{filter:invert(1);mix-blend-mode:screen}
}
:root[data-theme="dark"] .logo{filter:invert(1);mix-blend-mode:screen}

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink);color:var(--paper);
  padding-block:8px;padding-top:calc(8px + env(safe-area-inset-top,0px));
  overflow:hidden;
}
.ticker-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.ticker-track span{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;
  padding-inline:26px;white-space:nowrap;
}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- header ---------- */
header.site{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--paper);border-bottom:var(--rule);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.mark{
  display:flex;align-items:center;gap:10px;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:900;font-size:var(--step-1);
  text-transform:uppercase;letter-spacing:-.045em;font-stretch:88%;
  text-decoration:none;white-space:nowrap;
}
nav.site{display:flex;gap:26px}
nav.site a{
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  text-decoration:none;color:var(--ash);transition:color .15s;
}
nav.site a:hover{color:var(--ink)}
@media (max-width:760px){nav.site{display:none}}

/* ---------- hero ----------
   BigBucks shoots on a white studio sweep, not a panoramic set,
   so the hero splits: copy on the paper, the photo contained in a
   white panel beside it. Below 900px the photo goes first and the
   copy drops beneath, same order as the PussyBucks mobile hero. */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  border-bottom:var(--rule);
}
.hero-media{
  order:2;position:relative;
  background:var(--photo-bg);
  min-height:min(78vh,760px);
  border-left:var(--rule);overflow:hidden;
}
.hero-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:var(--photo-focus,50% 50%);
  display:block;
}
.hero-copy{
  order:1;
  padding:clamp(32px,5vw,72px) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:clamp(14px,1.6vw,22px);
}
.hero-copy h1{font-size:var(--step-3);font-stretch:78%;max-width:9ch}
.hero-copy p{margin:0;max-width:38ch;font-size:var(--step-0);color:var(--ash)}
.hero-copy .principle{max-width:26ch}
.hero-copy .btn{margin-top:clamp(6px,1vw,12px)}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--ash)}
.hero .eyebrow .step{color:var(--buck)}

/* The month's principle, in the voice of a pull quote. */
.principle{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-1) !important;font-weight:600;font-stretch:92%;
  letter-spacing:-.015em;line-height:1.3;color:var(--ink) !important;
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-media{order:1;min-height:0;aspect-ratio:4/5;border-left:0;border-bottom:var(--rule)}
  .hero-copy{order:2}
}

/* caption strip — the four things you can see in the photo */
.caption{
  display:flex;flex-wrap:wrap;gap:8px clamp(18px,3vw,44px);
  padding-block:14px;border-bottom:var(--rule);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ash);
}

/* ---------- buy ---------- */
.buy-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);
  padding-block:clamp(32px,5vw,68px);
}
@media (max-width:820px){.buy-grid{grid-template-columns:1fr}}

.buy-left{display:flex;flex-direction:column;gap:18px}
.priceline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-2);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.fineprint{font-size:var(--step-0);color:var(--ash);line-height:1.7;max-width:46ch;margin:0}

.buy-right{display:flex;flex-direction:column;gap:22px}

.clock{display:flex;gap:8px}
.unit{min-width:56px;padding:8px 6px 6px;border:var(--rule);text-align:center}
.unit b{
  display:block;font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-1);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.unit span{display:block;margin-top:5px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}

.sizerow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.sizelink{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ash);text-decoration:underline;text-underline-offset:3px;
  transition:color .15s;
}
.sizelink:hover{color:var(--ink)}

.sizes{display:flex;gap:8px;flex-wrap:wrap}
.size{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;letter-spacing:.1em;
  min-width:48px;padding:11px 8px;
  background:transparent;color:var(--ink);
  border:1px solid var(--hair-strong);cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
}
.size:hover{border-color:var(--ink)}
.size[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.buybtn{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-0);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  width:100%;padding:19px 20px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  cursor:pointer;transition:opacity .14s;
}
.buybtn:hover{opacity:.84}
.buybtn[data-state="added"]{background:var(--paper);color:var(--ink)}

.reassure{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:600;color:var(--ash);
}

/* ---------- the artwork window ----------
   One component, two sources. If the month's artwork is a raw print
   sheet (crop marks, registration targets, ink labels), DROP.art.trim
   windows it down to the lockup alone and multiply-blends so the
   sheet's paper drops out and only the ink remains. If it is already
   trimmed on transparency, set trim to null and it is used as-is.
   The variables are set in script below. */
.art{
  position:relative;width:100%;
  aspect-ratio:var(--art-ratio,1007/339);
  max-width:100%;overflow:hidden;isolation:isolate;
}
.art img{
  position:absolute;
  width:var(--art-w,100%);max-width:none;height:auto;
  left:var(--art-l,0%);top:var(--art-t,0%);
  filter:var(--art-filter,none);
  mix-blend-mode:var(--art-blend,normal);
}

.band{
  background:var(--panel);color:var(--panel-ink);
  border-block:var(--rule);
  padding-block:clamp(40px,7vw,104px);
}
.band .art{background:var(--panel);margin-inline:auto;max-width:1080px}
.bandfoot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(24px,4vw,44px);padding-top:16px;
  border-top:1px solid var(--panel-hair);
  font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;
  color:var(--panel-ash);
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:600;
}

/* The band when there is no flat artwork yet: the brand line, set big. */
.idea{
  margin:0 auto;max-width:16ch;text-align:center;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-3);font-weight:800;font-stretch:80%;
  text-transform:uppercase;line-height:.9;letter-spacing:-.035em;
  text-wrap:balance;
}
.idea span{color:#A8471F}
/* A retired drop with no artwork shows its photo in the band instead. */
.band-photo{max-width:480px;margin-inline:auto;aspect-ratio:4/5;position:relative}
.band-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ---------- sections ---------- */
section{border-bottom:var(--rule)}
.head{display:flex;align-items:center;gap:12px;color:var(--ash);
  padding-block:clamp(26px,3.4vw,44px) clamp(18px,2vw,26px)}
.head h2{font-size:var(--step-1);letter-spacing:.14em;font-weight:700;color:var(--ink)}

/* ---------- the shirt ----------
   Four short lines a shopper actually decides on, then the
   measurements. Nothing about ink, film or dpi. */
.shirt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,80px);
  padding-bottom:clamp(30px,4vw,56px);
}
@media (max-width:900px){.shirt{grid-template-columns:1fr}}

.facts{margin:0}
.facts div{display:flex;justify-content:space-between;gap:16px;
  padding-block:13px;border-bottom:var(--rule)}
.facts dt{color:var(--ash);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;margin:0}
.facts dd{margin:0;text-align:right}

.sizing h3{font-size:var(--step--1);letter-spacing:.2em;font-weight:700;color:var(--ash);margin-bottom:14px}
table.size-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.size-table th,table.size-table td{
  padding-block:11px;border-bottom:var(--rule);text-align:right;
}
table.size-table th:first-child,table.size-table td:first-child{text-align:left}
table.size-table thead th{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ash);
}
table.size-table tbody th{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:700;letter-spacing:.12em;
}
.size-note{margin:14px 0 0;font-size:var(--step--1);color:var(--ash);line-height:1.7;letter-spacing:.04em}

/* ---------- the year rail ----------
   6 columns so the twelve months fill exactly two rows;
   4 then 3 further down, which also divide 12 evenly. */
.rail{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--hair);border:var(--rule);
  margin-bottom:clamp(30px,4vw,56px);
}
@media (max-width:900px){.rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mo{background:var(--paper);padding:16px 14px 18px;
  display:flex;flex-direction:column;gap:6px;min-height:104px}
.mo b{font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mo small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-top:auto}
.mo.live{background:var(--ink);color:var(--paper);box-shadow:inset 0 -3px 0 var(--buck)}
.mo.live small{color:var(--paper);opacity:.72}

/* ---------- signup ---------- */
.signup{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;
  padding-block:clamp(36px,5vw,76px);
}
@media (max-width:820px){.signup{grid-template-columns:1fr}}
.signup h2{font-size:var(--step-2);font-stretch:84%}
.form{display:flex;border-bottom:1.5px solid var(--ink);padding-bottom:10px;gap:12px}
.form input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);
  font-family:inherit;font-size:var(--step-0);padding:6px 0}
.form input::placeholder{color:var(--ash)}
.form input:focus{outline:0}
.form button{background:transparent;border:0;cursor:pointer;color:var(--ink);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.form-note{margin-top:12px;font-size:var(--step--1);color:var(--ash);letter-spacing:.06em}

/* ---------- footer ---------- */
footer.site{
  display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  padding-block:32px calc(32px + env(safe-area-inset-bottom,0px));
  font-size:var(--step--1);color:var(--ash);letter-spacing:.14em;text-transform:uppercase;
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:600;
}
footer.site a{text-decoration:none}
.footmark{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.footmark .logo{height:22px}
footer.site a:hover{color:var(--ink)}

/* ============================================================
   INTERIOR PAGES
   Everything above this line is shared with the drop page.
   Below: about, faq, contact, archive, the permalink record
   and 404. Same scale, same rules, no new typefaces.
   ============================================================ */

/* ---------- page head ----------
   Interior pages open with a title and one line of orientation,
   in place of the drop page's campaign photo. */
.pagehead{
  padding-block:clamp(40px,7vw,96px) clamp(28px,4vw,52px);
  border-bottom:var(--rule);
}
.pagehead h1{font-size:var(--step-3);font-stretch:78%;max-width:14ch}
.pagehead p{
  margin:clamp(16px,2vw,24px) 0 0;max-width:52ch;
  font-size:var(--step-1);color:var(--ash);line-height:1.45;
}
.pagehead .eyebrow{color:var(--ash);margin-bottom:clamp(14px,2vw,22px)}
.pagehead p.principle{color:var(--ink)}

/* ---------- prose ----------
   A single measured column. Used for the brand story and for any
   long-form answer. Never full width. */
/* The measure goes on the children. A max-width here would fight .wrap's
   auto margins and centre the whole column, leaving the heading at the
   gutter and the body text adrift in the middle. Same rule as .notice. */
.prose{padding-block:clamp(30px,4vw,60px)}
.prose > *{max-width:62ch}
.prose p{margin:0 0 1.35em;line-height:1.65}
.prose p:last-child{margin-bottom:0}
.prose h2{
  font-size:var(--step-1);letter-spacing:.14em;font-weight:700;
  margin:2.4em 0 .9em;
}
.prose h2:first-child{margin-top:0}
.prose strong{font-weight:600}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* ---------- question and answer ----------
   Open by default. An accordion hides the answers from anyone
   scanning, and there are not enough questions to justify it. */
.qa{padding-block:clamp(24px,3vw,44px) clamp(30px,4vw,60px)}
.qa-item{padding-block:clamp(22px,2.6vw,32px);border-bottom:var(--rule)}
.qa-item:first-child{border-top:var(--rule)}
.qa-item h3{
  font-size:var(--step-1);letter-spacing:-.02em;font-stretch:92%;
  text-transform:none;line-height:1.2;margin-bottom:.7em;
}
.qa-item p{margin:0 0 1em;max-width:62ch;line-height:1.65;color:var(--ash)}
.qa-item p:last-child{margin-bottom:0}
.qa-item a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- archive ----------
   Three across, because a year of drops divides evenly and the
   grid stays honest when only one exists. */
.archive{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--hair);border:var(--rule);
  margin-block:clamp(24px,3vw,44px) clamp(36px,5vw,72px);
}
@media (max-width:900px){.archive{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.archive{grid-template-columns:1fr}}

.dropcard{
  background:var(--paper);display:flex;flex-direction:column;
  text-decoration:none;transition:background .15s;
}
.dropcard:hover{background:var(--field)}
.dropcard .thumb{
  aspect-ratio:1408/768;background:var(--panel);
  overflow:hidden;border-bottom:var(--rule);
}
.dropcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dropcard .meta{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:7px;flex:1}
.dropcard .meta b{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-1);font-weight:700;letter-spacing:-.025em;
  text-transform:uppercase;font-stretch:88%;line-height:1;
}
.dropcard .meta span{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.dropcard .meta .state{margin-top:auto;padding-top:12px}
.dropcard .meta .principle-sm{
  font-family:inherit;font-size:var(--step-0);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ash);line-height:1.5;
}
.dropcard .thumb{background:var(--photo-bg)}
.dropcard .thumb img{object-fit:contain}

/* ---------- empty states and notices ----------
   Used by /archive before anything has retired, and by /404. */
/* The measure goes on the children, not on this element. When .notice
   also carries .wrap, a max-width here collides with .wrap's auto
   margins and the whole block drifts to the middle of the page, which
   nothing else on the site does. */
.notice{
  padding-block:clamp(48px,9vw,120px);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2.4vw,28px);
}
.notice h2{font-size:var(--step-2);font-stretch:84%;max-width:18ch}
.notice p{
  margin:0;color:var(--ash);font-size:var(--step-1);
  line-height:1.5;max-width:52ch;
}

/* A link wearing the buy button's clothes. */
.btn{
  display:inline-block;text-decoration:none;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-0);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  padding:17px 28px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:opacity .14s;
}
.btn:hover{opacity:.84}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn.ghost:hover{opacity:1;border-color:var(--ink)}

/* ---------- contact ---------- */
.contact{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);
  padding-block:clamp(30px,4vw,60px);
}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

.mailto{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step-2);font-weight:700;letter-spacing:-.03em;
  font-stretch:90%;text-decoration:none;word-break:break-word;
  border-bottom:2px solid var(--hair-strong);padding-bottom:6px;
  display:inline-block;transition:border-color .15s;
}
.mailto:hover{border-color:var(--ink)}

.details{margin:0}
.details div{
  display:flex;justify-content:space-between;gap:16px;
  padding-block:13px;border-bottom:var(--rule);
}
.details dt{
  color:var(--ash);font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;margin:0;
}
.details dd{margin:0;text-align:right}

/* ---------- retired drop record ----------
   What a permalink becomes once the month closes. Deliberately
   flatter than the live page: no countdown, no sizes, no button. */
.record{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start;
  padding-block:clamp(30px,4vw,60px);
}
@media (max-width:820px){.record{grid-template-columns:1fr}}
.record .stamp{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--hair-strong);padding:10px 14px;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);
}

/* ============================================================
   LEGAL PAGES
   terms, returns, privacy, cookies, legal. Long-form text that
   has to be readable and quotable, so: one measured column,
   numbered sections, and a visible marker wherever a detail is
   still missing.
   ============================================================ */

.prose ol,.prose ul{margin:0 0 1.35em;padding-left:1.4em}
.prose li{margin-bottom:.55em;line-height:1.65}
.prose li:last-child{margin-bottom:0}
.prose h3{
  font-size:var(--step-0);letter-spacing:.06em;font-weight:700;
  text-transform:none;margin:1.9em 0 .6em;line-height:1.3;
}
.prose .lede{
  font-size:var(--step-1);line-height:1.5;color:var(--ash);
  margin-bottom:2em;
}
.prose small{font-size:var(--step--1);letter-spacing:.04em;color:var(--ash)}

/* Section numbering, so a clause can be pointed at in an email. */
.prose.numbered{counter-reset:clause}
.prose.numbered h2{counter-increment:clause;display:flex;gap:.7em;align-items:baseline}
.prose.numbered h2::before{
  content:counter(clause);
  font-size:var(--step--1);color:var(--ash);
  font-variant-numeric:tabular-nums;
}

/* An unfilled detail. Deliberately ugly — it is meant to be caught. */
.todo{
  background:#FFE9A8;color:#0B0B0C;
  padding:1px 7px;border-radius:2px;
  font-weight:600;font-size:.92em;white-space:nowrap;
}

/* The model withdrawal form, and anything else meant to be copied. */
.formbox{
  border:1px solid var(--hair-strong);
  padding:clamp(20px,3vw,32px);
  margin:1.6em 0 2em;
  background:var(--field);
}
.formbox p{margin:0 0 1.1em}
.formbox p:last-child{margin-bottom:0}
.formbox .rule{
  display:block;border-bottom:1px solid var(--hair-strong);
  height:1.6em;margin-top:.3em;
}

/* Who we share data with. */
table.plain{
  width:100%;border-collapse:collapse;margin:0 0 1.6em;
  font-size:var(--step-0);
}
table.plain th,table.plain td{
  text-align:left;vertical-align:top;
  padding:13px 16px 13px 0;border-bottom:var(--rule);
}
table.plain thead th{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ash);
}
table.plain td:last-child,table.plain th:last-child{padding-right:0}
@media (max-width:620px){
  table.plain thead{position:absolute;left:-9999px}
  table.plain tr{display:block;padding-block:14px;border-bottom:var(--rule)}
  table.plain td{display:block;border:0;padding:0 0 4px}
  table.plain td:first-child{font-weight:600}
}

/* Last-reviewed stamp at the foot of each legal page. */
.stamped{
  margin-top:clamp(36px,5vw,64px);padding-top:18px;
  border-top:var(--rule);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}

/* ============================================================
   CONTACT FORM
   Flat, bordered, square. The same vocabulary as the size
   buttons and the buy button on the drop page — no rounded
   cards, no drop shadows, no second accent colour.
   ============================================================ */

.formwrap{border:1px solid var(--hair-strong);padding:clamp(24px,4vw,40px)}
.formwrap > h2{
  font-size:var(--step-1);letter-spacing:.14em;font-weight:700;
  margin-bottom:8px;
}
.formwrap > .intro{
  margin:0 0 clamp(22px,3vw,30px);
  color:var(--ash);font-size:var(--step-0);line-height:1.6;max-width:44ch;
}

.field{margin-bottom:18px}
.field label{
  display:block;margin-bottom:7px;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ash);
}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--hair-strong);border-radius:0;
  font-family:inherit;font-size:var(--step-0);line-height:1.5;
  transition:border-color .15s;
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:140px}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) center,calc(100% - 14px) center;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:42px;cursor:pointer;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ash)}

/* Off-screen, not display:none — bots skip hidden fields but fill this one. */
.trap{position:absolute;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden}

.alert{
  display:none;margin-bottom:18px;padding:13px 15px;
  border:1px solid var(--ink);
  font-size:var(--step-0);line-height:1.5;
}
.alert.show{display:block}

.consent{
  margin:16px 0 0;font-size:var(--step--1);
  color:var(--ash);line-height:1.6;letter-spacing:.03em;
}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.sent{display:none;padding:clamp(28px,5vw,48px) 0;text-align:left}
.sent.show{display:block}
.sent h3{
  font-size:var(--step-2);font-stretch:84%;margin-bottom:12px;
}
.sent p{margin:0;color:var(--ash);font-size:var(--step-0);line-height:1.6;max-width:42ch}

@keyframes bb-spin{to{transform:rotate(360deg)}}
.spinner{animation:bb-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

/* ============================================================
   CONFIGURATOR
   Colour swatches and size choices are real radio buttons, so the
   form works without JavaScript and reads correctly to a screen
   reader. The inputs are hidden visually; the spans carry the look,
   reusing the existing .size button style.
   ============================================================ */
.config{display:flex;flex-direction:column;gap:22px}
.config fieldset{border:0;margin:0;padding:0;min-width:0}
.config legend{width:100%;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.swatches{display:flex;gap:12px}
.swatch{position:relative;cursor:pointer}
.swatch input,.sizeopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.swatch > span{
  display:block;width:44px;height:44px;border-radius:50%;
  background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  outline:1px solid transparent;outline-offset:4px;
  transition:outline-color .15s;
}
.swatch:hover > span{outline-color:var(--hair-strong)}
.swatch input:checked + span{outline:2px solid var(--ink)}
.swatch input:focus-visible + span{outline:2px dashed var(--ink)}
.swatch input:disabled + span{opacity:.3;cursor:not-allowed}

.sizeopt{position:relative;cursor:pointer}
.sizeopt .size{display:inline-block;text-align:center}
.sizeopt input:checked + .size{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sizeopt input:focus-visible + .size{outline:2px solid var(--ink);outline-offset:2px}
.sizeopt input:disabled + .size{
  color:var(--ash);border-style:dashed;cursor:not-allowed;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.buybtn:disabled{opacity:.4;cursor:not-allowed}