/* ============================================================
   TENONFOLD — brand tokens
   Set 2026-08-31. The single source for colour and type.
   Copy this file next to any HTML that renders a Tenonfold asset,
   alongside the fonts/ directory.

   Fonts are referenced as LOCAL FILES on purpose. Anything rendered
   to PDF through headless Chrome must not depend on a network fetch;
   a font that fails to load silently falls back and the artefact
   ships in the wrong face without erroring.

   THIS IS THE SITE COPY, AND IT DIFFERS FROM brand/ IN ONE RESPECT.
   Every face here is font-display:SWAP, not BLOCK. Block is correct for
   PDF work, where a fallback face must never ship silently, so the text
   is held back until the real font arrives. On a web page block means a
   visitor stares at a blank layout for up to three seconds and sees
   nothing at all if a font 404s. Swap paints the fallback immediately
   and upgrades. Keep block in brand/. Keep swap here.
   ============================================================ */

/* ---------- Switzer, primary sans ---------- */
/* Indian Type Foundry, via Fontshare. Free for commercial use.
   Read the licence before shipping a paid product: fontshare.com */

@font-face{font-family:'Switzer';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/Switzer-300.woff2') format('woff2');}
@font-face{font-family:'Switzer';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Switzer-400.woff2') format('woff2');}
@font-face{font-family:'Switzer';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Switzer-500.woff2') format('woff2');}
@font-face{font-family:'Switzer';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Switzer-600.woff2') format('woff2');}
@font-face{font-family:'Switzer';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Switzer-700.woff2') format('woff2');}
/* True italic, not a synthesised oblique. Switzer ships italics in all five
   weights; only 400 is carried here because Instrument Serif handles editorial
   italic. Pull more from Fontshare if a real use appears. */
@font-face{font-family:'Switzer';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/Switzer-400-italic.woff2') format('woff2');}

/* ---------- Instrument Serif, accent ---------- */
/* Instrument, OFL. Tagline and display moments only. Never body text. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/InstrumentSerif-Regular.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/InstrumentSerif-Italic.woff2') format('woff2');}

:root{

  /* ---------- Colour ---------- */
  --tf-paper:  #F2F0E8;   /* primary ground */
  --tf-stone:  #C9C6BC;   /* rules, fills, secondary text ON DARK ONLY */
  --tf-ink:    #1D1D1B;   /* primary text on light */
  --tf-forest: #2E3D34;   /* dark ground, headings on light */
  --tf-clay:   #B45A3C;   /* accent. Constrained, see guidelines */

  /* Derived. A warm mid-tone for secondary text on Paper.
     Stone fails at 1.50:1 and must never be used for type on light. */
  --tf-quiet:  #5F5C53;   /* 6.6:1 on Paper */
  --tf-rule:   #D6D3C8;   /* hairlines on Paper */
  --tf-sheet:  #FBFAF6;   /* raised panel on Paper */

  /* ---------- Type families ---------- */
  --tf-sans:  'Switzer', 'Helvetica Neue', Arial, sans-serif;
  --tf-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* ---------- Type scale ---------- */
  /* Screen. Print sizes are in the guidelines and use pt, not px. */
  --tf-size-display: 44px;
  --tf-size-h1:      34px;
  --tf-size-h2:      26px;
  --tf-size-h3:      19px;
  --tf-size-body:    16px;
  --tf-size-small:   14px;
  --tf-size-label:   12px;   /* WEB MINIMUM. print keeps 11, see brand/ */
  --tf-size-micro:    6pt;   /* cut-out labels. Do not go below this. */

  --tf-lh-tight: 1.1;
  --tf-lh-body:  1.6;

  --tf-track-label: .14em;   /* uppercase labels */
  --tf-track-mark:  .16em;   /* the wordmark */
}

/* ============================================================
   THE WORDMARK
   Two weights and a rule. Tenon 600, Fold 300.
   The weight shift is not decoration: it stops the name
   compressing into "tenfold" and puts emphasis on the half
   that carries the meaning.
   ============================================================ */

.tf-mark{
  font-family: var(--tf-sans);
  letter-spacing: var(--tf-track-mark);
  display: inline-flex;
  align-items: center;
  gap: .42em;
  white-space: nowrap;
  color: var(--tf-ink);
}
.tf-mark__a{ font-weight: 600; }               /* TENON */
.tf-mark__b{ font-weight: 300; }               /* FOLD  */
.tf-mark__bar{
  display: inline-block;
  width: 1px;
  height: 1.02em;
  background: currentColor;
  flex: none;
}

/* On dark grounds the mark inverts wholesale. */
.tf-mark--onDark{ color: var(--tf-paper); }

/* Below roughly 14px, Fold at 300 starts to break up.
   Step it to 400 rather than letting it thin out. */
.tf-mark--small .tf-mark__b{ font-weight: 400; }

/* ---------- Utility ---------- */
.tf-label{
  font-family: var(--tf-sans);
  font-weight: 500;
  font-size: var(--tf-size-label);
  letter-spacing: var(--tf-track-label);
  text-transform: uppercase;
  color: var(--tf-quiet);
}
.tf-tagline{
  font-family: var(--tf-serif);
  font-style: italic;
  font-weight: 400;
}
.tf-figs{ font-variant-numeric: tabular-nums; }