/* OOF Wear — shared stylesheet for oof-wear.com
   ------------------------------------------------------------------
   DIRECTION: "cutting table". The product is 3.5 inches of black thread on
   white cotton, so the site is built like the spec sheet that describes it:
   a cutting-mat ground, real cotton panels, and every fact set in mono as an
   annotation. The brand orange is DEMOTED — it draws measurement marks and
   ticks only, never a button fill or a background. That is deliberate: the
   brief is "sell the design, not the brand", and an orange page sells the
   brand.

   NO WEBFONTS ON PURPOSE. privacy.html states this site makes no third-party
   requests and runs no analytics; a Google Fonts <link> would make that
   sentence false. System stacks only.

   CACHING: nginx serves *.css with `expires 1y; Cache-Control: immutable`
   (/etc/nginx/sites-enabled/oof-wear.com). Every page therefore links this
   file as `/style.css?v=N`. IF YOU EDIT THIS FILE, BUMP N IN EVERY PAGE or
   returning visitors keep the old stylesheet for a year.
*/

:root{
  --mat:#16211D;        /* cutting mat — the ground */
  --mat-2:#1C2A25;      /* raised panel on the mat */
  --rule:#2B3B35;       /* hairline on the mat */
  --cotton:#F6F4EF;     /* the garment: Gildan 64000 in White */
  --thread:#0B0B0B;     /* the thread: Printful #000000, pure black */
  --chalk:#B7C6BE;      /* body text on the mat */
  --chalk-dim:#8CA096;  /* 5.8:1 on --mat — AA at 12px */
  --tape:#FF5A1F;       /* annotation on dark  (5.2:1 on --mat) */
  --tape-ink:#C43D0A;   /* annotation on light (4.7:1 on --cotton) */

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Pinned, not inherited from the UA sheet: `section` below sets properties on the
   same element that carries `hidden`, and one stray `display` would un-hide the
   pre-launch shop grid on every page. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--mat);
  color:var(--chalk);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
/* keyboard a11y: the dark theme kills the default focus ring */
:focus-visible{outline:2px solid var(--tape);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- the mono voice: every fact on this site is set in it ---------------- */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-dim);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--tape);flex:none}

/* ---- THE SIGNATURE: a dimension line ------------------------------------
   |—————  3.50 IN · 89 MM  —————|
   It appears ONLY where we have a measured number (the embroidery placement,
   3.50 in wide at 300 dpi). It is never decoration on a card we cannot
   measure — that is the whole point of drawing it. */
.dim{
  display:flex;align-items:center;gap:12px;width:100%;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--tape-ink);
}
.dim::before,.dim::after{
  content:"";flex:1;height:9px;
  border-left:0;border-right:0;
  background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1px no-repeat;
}
.dim::before{border-left:1px solid currentColor}
.dim::after{border-right:1px solid currentColor}
.dim--dark{color:var(--tape)}

/* ---- header -------------------------------------------------------------- */
header{border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.mark{
  font-weight:800;font-size:20px;letter-spacing:-.02em;text-transform:uppercase;
  text-decoration:none;color:var(--cotton);white-space:nowrap;
}
.mark span{color:var(--tape)}
nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
nav a{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--chalk-dim);
  padding-bottom:2px;border-bottom:1px solid transparent;
}
nav a:hover,nav a[aria-current="page"]{color:var(--cotton);border-bottom-color:var(--tape)}
.status-chip{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chalk-dim);
  border:1px solid var(--rule);padding:5px 10px;white-space:nowrap;
}
.status-chip b{color:var(--tape);font-weight:600}

main{flex:1}
section{border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
.band{padding:64px 0}
.band--tight{padding:44px 0}

/* ---- hero ---------------------------------------------------------------- */
.hero .wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media (min-width:960px){
  .hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}
}
h1{
  font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(52px,9vw,104px);color:var(--cotton);
  margin:20px 0 22px;
}
h1 em{font-style:normal;color:var(--tape)}
.lede{font-size:clamp(17px,2vw,20px);max-width:46ch;color:var(--chalk)}
.lede + .lede{margin-top:14px}
.tagline{color:var(--cotton);font-style:italic}

/* ---- buttons ------------------------------------------------------------- */
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  display:inline-block;text-decoration:none;text-transform:uppercase;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  padding:15px 22px;border:1px solid var(--cotton);color:var(--cotton);
  transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--cotton);color:var(--mat)}
.btn-primary:hover{background:var(--tape);border-color:var(--tape);color:var(--mat)}
.btn-ghost{border-color:var(--rule);color:var(--chalk)}
.btn-ghost:hover{border-color:var(--cotton);color:var(--cotton)}
/* Was aria-disabled on a roleless <span>: not an allowed attribute, no AT acts
   on it. A class says the same thing honestly. site_activate.py must never copy
   this class onto the activated <a>. */
.btn.is-inert{opacity:.5;cursor:not-allowed;background:none;color:var(--chalk-dim);border-color:var(--rule)}
.btn.is-inert:hover{background:none;color:var(--chalk-dim);border-color:var(--rule)}

/* ---- the trust strip. Every line here must stay factually true. ---------- */
.trust{
  display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin-top:30px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-dim);
}
.trust li::before{content:"— ";color:var(--tape)}

/* ---- the cotton swatch: a real garment panel ----------------------------- */
.swatch{
  background-color:var(--cotton);
  /* a cotton weave, not a texture image — two 1px gradients at a 4px pitch */
  background-image:
    repeating-linear-gradient(90deg,rgba(11,11,11,.035) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(11,11,11,.035) 0 1px,transparent 1px 4px);
  color:var(--thread);
  padding:36px 26px 26px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.swatch .art{
  /* the print's nominal width. Browsers map mm off a nominal 96dpi, so this is
     the spec size, not a promise about your screen — see the note on the page. */
  width:min(88.9mm,100%);
}
.swatch .art img{width:100%}
.swatch .setline{
  /* the fallback when a design has no published print file: the chest text set
     the way it is stitched — small, bold, wide-tracked, pure black. */
  width:min(88.9mm,100%);text-align:center;
  font-weight:700;letter-spacing:.2em;line-height:1.35;
  font-size:clamp(13px,3.4vw,17px);text-transform:uppercase;color:var(--thread);
}
.swatch .dim{width:min(88.9mm,100%)}
.swatch .spec{
  width:100%;border-top:1px solid rgba(11,11,11,.14);padding-top:14px;
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#4A4A4A;
}
.swatch .spec dt{color:#8A8A85}
.swatch .spec dd{text-align:right}

/* The panel is the GARMENT, so it takes the garment's colour. This is not a style
   choice: a print file is transparent art. The embroidery line is near-black
   (measured #0E0E0E) and disappears on a dark panel; the dark-garment print files
   are near-white (measured #E0DBD0) and disappear on a white one. Matching the
   panel to `garment_color` is the only way both render at all. No specific colour
   NAME is claimed anywhere in copy — the live Etsy colour matrix and the spec
   files disagree, so we show a neutral dark and say nothing. */
.swatch--dark{
  background-color:#191919;color:var(--cotton);
  background-image:
    repeating-linear-gradient(90deg,rgba(246,244,239,.03) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(246,244,239,.03) 0 1px,transparent 1px 4px);
}
.swatch--dark .setline{color:var(--cotton)}
.swatch--dark .dim{color:var(--tape)}
.swatch--dark .spec{border-top-color:rgba(246,244,239,.16);color:#B5B5B0}
.swatch--dark .spec dt{color:#83837E}

/* ---- section headings ---------------------------------------------------- */
h2,h1.h2{
  font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1;
  font-size:clamp(28px,4.4vw,46px);color:var(--cotton);margin:18px 0 20px;
}
h3{font-weight:700;font-size:19px;line-height:1.25;color:var(--cotton);letter-spacing:-.01em}
p + p{margin-top:16px}
.prose{max-width:62ch}
.prose p{color:var(--chalk)}
.pull{
  border-left:1px solid var(--tape);padding-left:20px;margin:28px 0;
  font-size:clamp(19px,2.6vw,26px);line-height:1.3;color:var(--cotton);
  font-weight:600;letter-spacing:-.01em;max-width:22ch;
}

/* ---- two-column sheet: mono field rail + content ------------------------- */
.sheet{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:900px){
  .sheet{grid-template-columns:170px minmax(0,1fr);gap:48px}
  .sheet > .rail{position:sticky;top:24px;align-self:start}
}
.rail{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);
}
.rail b{display:block;color:var(--cotton);font-weight:600}

/* ---- product tiles (landing + catalog) ---------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:32px}
.tile{border:1px solid var(--rule);display:flex;flex-direction:column;background:var(--mat-2)}
.tile .swatch{flex:none}
.tile .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.tile h3{font-size:16px}
.tile .blurb{font-size:14px;color:var(--chalk);line-height:1.5}
.tile .meta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chalk-dim);
}
/* The honest state badge. There is no Buy button anywhere on this site while
   the shop has nothing active — a disabled "Buy" is still an offer. */
.state{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 8px;border:1px solid var(--rule);
  color:var(--chalk-dim);align-self:flex-start;
}
.state--draft{border-color:var(--tape);color:var(--tape)}
/* `On sale` — set here so the badge is styled the day a listing goes active,
   rather than the generator emitting a class nothing renders. */
.state--live{border-color:var(--cotton);color:var(--cotton)}  /* 14.9:1 on --mat */
.tile .explain{font-size:13px;line-height:1.5;color:var(--chalk-dim)}
.tiles--catalog{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:0}
/* the spec block repeated inside a catalog tile — same grid, on the mat */
.spec--tile{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--chalk);
}
.spec--tile dt{color:var(--chalk-dim)}
.spec--tile dd{text-align:right}

/* ---- spec table ---------------------------------------------------------- */
.specs{width:100%;border-collapse:collapse;margin-top:28px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.specs th,.specs td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.specs th{color:var(--chalk-dim);text-transform:uppercase;font-weight:600;width:34%;white-space:nowrap}
.specs td{color:var(--cotton);text-transform:none;letter-spacing:.02em}

/* ---- journal ------------------------------------------------------------- */
.posts{list-style:none;margin-top:28px;border-top:1px solid var(--rule)}
.posts li{border-bottom:1px solid var(--rule)}
.posts a{
  display:grid;grid-template-columns:1fr;gap:6px;padding:22px 0;text-decoration:none;
}
@media (min-width:760px){
  .posts a{grid-template-columns:118px minmax(0,1fr) auto;gap:28px;align-items:baseline}
}
.posts time{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--chalk-dim);text-transform:uppercase}
.posts .t{font-size:19px;font-weight:700;color:var(--cotton);line-height:1.25;letter-spacing:-.01em}
.posts .d{font-size:14px;color:var(--chalk-dim);grid-column:1/-1}
@media (min-width:760px){.posts .d{grid-column:2/3}}
.posts a:hover .t{color:var(--tape)}
.posts .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tape);text-transform:uppercase}

/* ---- article ------------------------------------------------------------- */
.article{max-width:68ch;margin:0 auto}
.article h1{font-size:clamp(32px,5.4vw,54px);line-height:1.02;margin:14px 0 18px}
.article .standfirst{font-size:19px;color:var(--chalk);line-height:1.55}
.article h2{font-size:clamp(21px,2.8vw,27px);margin:44px 0 14px;letter-spacing:-.015em}
.article h3{margin:30px 0 10px;font-size:17px}
.article p,.article li{color:var(--chalk);font-size:17px;line-height:1.68}
.article ul,.article ol{margin:16px 0 16px 22px}
.article li + li{margin-top:8px}
.article strong{color:var(--cotton)}
.article a{color:var(--tape)}
.byline{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chalk-dim);display:flex;flex-wrap:wrap;gap:6px 16px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:14px 0;margin:32px 0 36px;
}
.callout{
  border:1px solid var(--rule);background:var(--mat-2);padding:22px;margin:32px 0;
}
.callout p{font-size:15.5px}
.callout .eyebrow{margin-bottom:12px}

/* ---- shop grid (rendered by site_activate.py at go-live) ----------------- */
.shop h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{display:block;text-decoration:none;border:1px solid var(--rule);padding:20px;
  transition:border-color .15s}
.card:hover{border-color:var(--tape)}
.card .t{font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:15px;color:var(--cotton)}
.card .go{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;
  color:var(--tape);text-transform:uppercase;letter-spacing:.14em}

/* ---- email capture ------------------------------------------------------- */
.capture{max-width:560px}
.capture h2{font-size:clamp(24px,3.2vw,32px)}
.capture p{color:var(--chalk-dim);font-size:15px}
form{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
input[type=email]{
  flex:1 1 240px;background:transparent;border:1px solid var(--rule);
  color:var(--cotton);padding:14px 16px;font-size:15px;font-family:var(--sans);
}
input[type=email]:focus{outline:none;border-color:var(--tape)}
input[type=email]::placeholder{color:#7E9189}
form input:disabled,form button:disabled{opacity:.5;cursor:not-allowed}
form button{
  background:var(--cotton);color:var(--mat);border:1px solid var(--cotton);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:12px;padding:0 24px;cursor:pointer;transition:background .15s;
}
form button:hover:not(:disabled){background:var(--tape);border-color:var(--tape)}
.note{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tape);min-height:16px}
.note a{color:inherit}

/* ---- footer -------------------------------------------------------------- */
footer{border-top:1px solid var(--rule);padding:26px 0;color:var(--chalk-dim);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:var(--chalk-dim)}
footer a:hover{color:var(--cotton)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---- on-sale products (generated by pipeline/oof/site_catalog.py from the
   LIVE Etsy shop — active listings only). A card exists iff Etsy sells it. -- */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:28px}
.products--page{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.product{border:1px solid var(--rule);background:var(--mat-2);display:flex;flex-direction:column}
.product .ph{display:block;background:var(--cotton);aspect-ratio:4/3;overflow:hidden}
.product .ph img{width:100%;height:100%;object-fit:cover}
.product .pb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.product h2,.product h3{font-size:17px;line-height:1.25;margin:0;letter-spacing:-.01em;text-transform:none}
.product .price{font-family:var(--mono);font-size:14px;color:var(--cotton);letter-spacing:.04em;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.product .price span{color:var(--chalk-dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase;align-self:center}
.product .buy{margin-top:auto;text-align:center}
/* The JS-free link strip site_activate owns stays in the markup as the fallback; when
   the photo cards are present they carry the same links, so the strip is not shown twice. */
#shop:has(.products) #shop-grid{display:none}