/* ============================================================================
   TFB brand.css · WEBSITE / DOC track  (catalogue first surface, seed of the
   shared stylesheet for "one foundation, many surfaces").
   System (locked, BRAND-GUIDELINES.md 2026-06-20):
     Veneer            · display headings + hero numbers (brand signature)
     Brandon CAPS      · eyebrows / labels / nav (small, letter-spaced)
     DM Sans           · body sentences AND all data figures (SKUs, sizes, specs),
                         with font-variant-numeric:tabular-nums. DM Mono dropped 2026-06-28
                         (mono figures clashed with sans figures; one font reads uniform).
   Palette: cream page · white/paper cards · kraft = primary accent ·
            ink text · TFB red = precision accent ONLY (never blocks).
   LICENCE: Veneer + Brandon are desktop/PDF-licensed · fine on this no-index,
   link-shared catalogue (same as the gated hub). Buy a WEBFONT licence before
   any PUBLIC site (main twofussyblokes.com).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

@font-face{font-family:'Veneer';src:url('fonts/Veneer.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Brandon';src:url('fonts/Brandon_reg.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Brandon';src:url('fonts/Brandon_med.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Brandon';src:url('fonts/Brandon_bld.otf') format('opentype');font-weight:600 800;font-display:swap}

:root{
  /* core palette (locked) */
  --red:#DB0032;
  --ink:#231F20;
  --kraft:#b59779;
  --cream:#f4efe8;
  --paper:#ffffff;
  --wash:#efe7da;            /* warm wash between cream and kraft */
  --line:rgba(35,31,32,.12);
  --line-2:rgba(35,31,32,.20);
  --muted:#6f6862;           /* ink at lower presence */
  --ink-soft:#403a35;

  /* type */
  --display:'Veneer','Playfair Display',Georgia,serif;
  --label:'Brandon','DM Sans',sans-serif;
  --body:'DM Sans','Segoe UI',Helvetica,Arial,sans-serif;

  /* rhythm · generous, Aesop-grade restraint */
  --measure:62ch;
  --gutter:clamp(22px,6vw,90px);
  --section:clamp(72px,12vh,180px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  font-size:clamp(16px,1.1vw,18px);
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

/* ---- type primitives ------------------------------------------------------ */
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.98;margin:0}
.eyebrow{
  font-family:var(--label);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:.96rem;color:var(--kraft);margin:0 0 1.1em;
}
.lede{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.6;color:var(--ink-soft);max-width:var(--measure)}
.body{max-width:var(--measure);color:var(--ink-soft)}
/* .mono kept as a hook for SKUs/sizes/specs, now DM Sans tabular (DM Mono dropped) */
.mono{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:0}
.muted{color:var(--muted)}
a{color:inherit;text-decoration:none}
.link{border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:border-color .25s}
.link:hover{border-color:var(--ink)}

/* ---- layout --------------------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.section{padding-block:var(--section)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.stack-s>*+*{margin-top:.6rem}
.stack>*+*{margin-top:1.4rem}

/* ---- photo placeholders (intentional, not "broken") ----------------------- */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,transparent 0 22px,rgba(181,151,121,.05) 22px 23px),
    var(--wash);
  border:1px solid var(--line);
  color:var(--kraft);text-align:center;overflow:hidden;
}
.ph[data-ratio="4-5"]{aspect-ratio:4/5}
.ph[data-ratio="3-2"]{aspect-ratio:3/2}
.ph[data-ratio="16-9"]{aspect-ratio:16/9}
.ph[data-ratio="1-1"]{aspect-ratio:1/1}
.ph .ph-cap{font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:.84rem}
.ph .ph-note{font-family:var(--body);text-transform:none;letter-spacing:.02em;font-size:.79rem;color:var(--muted);margin-top:.5em;font-style:italic}

/* ---- quiet tags (kraft, never red) ---------------------------------------- */
.tag{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  color:var(--kraft);border:1px solid var(--kraft);border-radius:2px;
  padding:.25em .55em;display:inline-block;line-height:1;white-space:nowrap;
}
.tag.soon{color:var(--muted);border-color:var(--line-2)}

/* ---- spec / reference rows ------------------------------------------------ */
.spec{display:grid;grid-template-columns:1fr;gap:0}
.spec .row{display:grid;grid-template-columns:34% 1fr;gap:1.4rem;padding:1.05rem 0;border-top:1px solid var(--line)}
.spec .row:last-child{border-bottom:1px solid var(--line)}
.spec .k{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.84rem;color:var(--muted)}
.spec .v{color:var(--ink)}
.spec .v .mono{font-size:.92em}

/* ---- mm / inch unit toggle (whisper-quiet) -------------------------------- */
.units{display:inline-flex;align-items:center;gap:.5em;font-family:var(--label);
  text-transform:uppercase;letter-spacing:.14em;font-size:.96rem;color:var(--muted)}
.units button{font:inherit;letter-spacing:inherit;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:.1em .1em;border-bottom:1px solid transparent}
.units button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.inch{display:none}
body.unit-inch .mm{display:none}
body.unit-inch .inch{display:inline}

@media print{
  :root{--section:34px}
  body{background:#fff;font-size:11pt}
  .ph{background:#f3efe9}
  .no-print{display:none}
}