/* John Tindel brand system v5. Loaded after every page's own styles so the whole site speaks with one voice.
   One room, always: deep slate ground, linen type, powder blue only for proof (numbers, links, focus).
   Display: Archivo at a condensed width (wdth 72), heavy. Reading: Newsreader. Labels are quiet italics.
   A faint grain sits over everything, images included.
   The :root:not(#v5) selector outranks every page's own light and dark token blocks, so these win everywhere. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,500..900&display=swap");

:root:not(#v5){
  --paper:#252F39; --sheet:#1D252D; --ink:#E0D1BB; --muted:#BFC6C6; --rule:#3A4550;
  --pencil:#AEBCBA; --pencil-soft:#2F3B47; --frame:#1D252D; --night:#1D252D; --night-ink:#E0D1BB;
  --chalk:#E0D1BB; --chalk-dim:#BFC6C6; --spray:#AEBCBA;
  --code-bg:#1D252D; --code-fg:#E0D1BB; --code-dim:#BFC6C6;
  --display:"Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body:"Newsreader", Georgia, "Times New Roman", serif;
  --mono:"Newsreader", Georgia, serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

/* Archivo reads condensed at 72% width. Newsreader has no width axis, so this touches the display face only. */
html{font-stretch:72%;font-synthesis:none;background:var(--paper);scrollbar-color:var(--muted) var(--paper)}
body{font-family:var(--body);font-size:1.125rem;line-height:1.6;font-optical-sizing:auto;background:var(--paper);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-0.005em;line-height:.95;text-wrap:balance;word-spacing:.09em}
h1{font-size:clamp(3rem, 8vw, 7rem);font-weight:900;text-transform:uppercase;line-height:.88}
h2{font-size:clamp(2.1rem, 4.4vw, 3.6rem)}
h3{font-weight:700;letter-spacing:0}
.label,.s,.yr,.tag{font-family:var(--body);font-style:italic;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.say,.statement,.thesis,.lede{font-family:var(--body);font-weight:400;letter-spacing:-0.005em}
.thesis{font-size:clamp(1.2rem, 1.9vw, 1.5rem);line-height:1.4;max-width:46ch}
.outband b,.impact b,.claim b,.research b,.result b,.facts b,.fact b,.stats b{font-family:var(--display);font-weight:800;letter-spacing:0;color:var(--pencil)}
a{text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--pencil);color:var(--paper)}
:focus-visible{outline:2px solid var(--pencil);outline-offset:3px;border-radius:2px}

/* The grain: a 256px noise tile in overlay, barely there. */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;background:url(grain.png) repeat;background-size:192px;mix-blend-mode:overlay;opacity:.09}

/* One shape system: work is square, controls are 4px. */
.shot,.frame,.board,.card,.card .img,figure,figure img,figure button,.ph,.chips span,.facts span,.jump a,button{border-radius:4px}
.shot img,.frame img{border-radius:inherit}
.chips span,.facts span,.jump a{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important}

/* The contact line, the same everywhere. */
.chair{font-family:var(--display);font-weight:800;font-size:1.4rem;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pencil);padding-bottom:2px;align-self:flex-start}
.chair:hover{color:var(--pencil)}
footer .wrap{align-items:baseline}

.warpable{transform-origin:50% 0;will-change:transform;backface-visibility:hidden}
@media (prefers-reduced-motion: reduce){ .warpable{transform:none !important} }

/* The mark: the "love, tindel" signature. Drawn black, so it is inverted on the slate ground. */
.mark-auto{display:block;width:46px;height:auto;filter:invert(1)}
.strip .wrap{align-items:center}
.strip .brandrow{display:flex;align-items:center;gap:14px}

.doc .tag{font-family:var(--body);font-style:italic;font-size:1.08rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.doc h2{font-family:var(--display);font-weight:800;font-size:1.85rem;letter-spacing:0;color:var(--ink)}
.facts span,figcaption,.kbtn,.strip nav a,.bar nav a{font-size:.92rem;letter-spacing:0}
.strip nav a,.bar nav a{font-family:var(--display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.kbtn,.btn{border-radius:4px;backdrop-filter:none;-webkit-backdrop-filter:none}
html:has(body.night),body.night{background:var(--paper);color:var(--ink);color-scheme:dark}