/* Touchmark's shared plates: the inks, the paper, the type, the masthead and the footer.
   Loaded first by every public page (home, guide, Studio); each page's own sheet adds its furniture.
   A risograph print shop: cream stock, two or three spot inks, halftone dots, rubber stamps,
   and a second ink that sits slightly off register. */
:root{
  color-scheme:light;
  --paper:#f4eee1;--paper-2:#ebe2cd;--card:#fbf7ee;
  --ink:#1d2b4f;--ink-soft:#4e5878;--line:rgba(29,43,79,.2);
  --red:#e2432a;--green:#1f7a5a;--amber:#b97c0b;
  --soft-red:#f6d9cf;--soft-green:#d6eadc;--soft-amber:#f3e2bd;
  --dot:rgba(29,43,79,.13);--offset:var(--red);
  --mark-plate:#1d2b4f;--mark-star:#ef4a2f;--mark-line:#f6f0e3;
  --display:"Fraunces",Georgia,serif;--body:"Archivo",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --paper:#11172b;--paper-2:#18203a;--card:#161e36;
  --ink:#f2ead9;--ink-soft:#b6b3c2;--line:rgba(242,234,217,.2);
  --red:#ff6b4e;--green:#52c79a;--amber:#f1b84d;
  --soft-red:#3d2128;--soft-green:#173b33;--soft-amber:#3b3220;
  --dot:rgba(242,234,217,.1);
  --mark-plate:#f2ead9;--mark-star:#ff5a3c;--mark-line:#11172b;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body);position:relative;min-height:100vh}
/* Paper grain over everything, under the ink. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen;opacity:.12}}
body>*{position:relative;z-index:1}
.defs{position:absolute}
a{color:inherit}button,input,textarea{font:inherit}
.g-vh,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
::selection{background:var(--red);color:var(--paper)}

.mark-plate{fill:var(--mark-plate)}.mark-star{fill:var(--mark-star)}.mark-line{fill:none;stroke:var(--mark-line);stroke-width:2.4;stroke-linejoin:round}

/* ---------- header ---------- */
.bar{display:flex;justify-content:space-between;align-items:center;max-width:1160px;margin:auto;padding:22px 24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .word{font:650 26px/1 var(--display);letter-spacing:-.8px}
.brand .where{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-soft);border:1.5px solid var(--line);padding:5px 7px;border-radius:3px}
.bar nav{display:flex;gap:22px;font:500 13px var(--mono)}
.bar nav a{text-decoration:none;color:var(--ink-soft);border-bottom:1.5px solid transparent}
.bar nav a:hover{color:var(--ink);border-color:var(--red)}

main{max-width:1160px;margin:auto;padding:0 24px 48px}

.eyebrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.eyebrow span{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:1.6px;padding:7px 9px;border:1.5px solid var(--ink);border-radius:3px}
.eyebrow span:first-child{background:var(--ink);color:var(--paper)}
h1{font:700 clamp(44px,7.4vw,86px)/.94 var(--display);letter-spacing:-2.6px;margin:0 0 22px;font-variation-settings:"opsz" 144}
h1 em{font-style:italic;font-weight:600;color:var(--red);position:relative}
.lede{font-size:19px;line-height:1.55;color:var(--ink-soft);margin:0;max-width:560px}

.foot{max-width:1160px;margin:30px auto 0;padding:22px 24px 30px;color:var(--ink-soft);font:12px var(--mono);border-top:2px solid var(--ink);display:flex;gap:10px;align-items:center}
.foot .logo{flex:none}

@media (max-width:640px){
  .bar{padding:16px}.bar nav{gap:14px;font-size:12px}.brand .where{display:none}
  main{padding:0 16px 40px}
  h1{letter-spacing:-1.6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}