/* TANNED: the shared tokens and furniture for the landing page and the magazine.
   Brand book v2 (8 October 2026): one cream ground, black type and outlines, Card and Sand for surfaces,
   Tan for fills only, sun orange only for the full stop, filled buttons and errors. TANNED Sans (Jost) and
   TANNED Text (Newsreader); labels are TANNED Sans medium caps. No dark mode: the book defines one ground. */
:root{
  --ground:#F6EEE4; --raised:#FBF6F0; --card:#FBF6F0; --paper:#FBF6F0; --field:#EFE4D8; --sand:#EFE4D8;
  --tan:#D9A47A; --ink:#1A1816; --ink-2:#57524D; --line:#DDD3C8; --line-strong:#1A1816;
  --sun-orange:#C8321A; --green:#1E7A46; --peach:#F1D6C6;
  --accent:var(--sun-orange);   /* the full stop and errors only */
  --sea:var(--ink); --ok:var(--green); --no:var(--sun-orange);
  --lift:none; --glow-a:rgba(241,214,198,.9); --glow-b:rgba(241,214,198,.35);
  --radius-card:14px; --radius-field:12px;
  /* older names, pointed at the book's colours */
  --c-linen:var(--ground); --c-sand:var(--sand); --c-apricot:var(--peach); --c-tan:var(--tan);
  --c-terracotta:var(--sun-orange); --c-sea:var(--ink); --c-shade:var(--ink-2); --c-ink:var(--ink);
  --f-display:"TANNED Sans","Futura","Avenir Next","Century Gothic",system-ui,sans-serif;
  --f-text:"TANNED Text","Iowan Old Style","Georgia",serif;
  --f-label:var(--f-display);
  --fs-body:1.0625rem; --fs-small:.875rem; --fs-label:.75rem;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-text);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:300;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.dot{color:var(--sun-orange)}
.label{font-family:var(--f-label);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.muted{color:var(--ink-2)}
.time{text-transform:none;letter-spacing:.04em}   /* the book's times, "6:30 am", stay lower case inside a capital label */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the draft ribbon: every page here is a concept */
.ribbon{background:var(--sand);color:var(--ink);border-bottom:1px solid var(--line);font:400 .8125rem/1.4 var(--f-display);letter-spacing:.02em;text-align:center;padding:8px 16px;margin:0}
.ribbon a{color:inherit}

/* masthead */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:18px;border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.wordmark svg{display:block;height:13px;width:auto}
.wordmark .sun-dot{fill:var(--sun-orange)}
.pages{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.pages a{text-decoration:none;border-bottom:1px solid transparent}
.pages a:hover{border-bottom-color:var(--ink)}
.pages a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* buttons: a pill, 44 high. The filled one is sun orange, one to a screen; the other is a black outline. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;background:var(--sun-orange);color:#FFFFFF;text-decoration:none;font:500 .9375rem var(--f-display);letter-spacing:.01em;border:1px solid var(--sun-orange);cursor:pointer}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--sand)}

.section{padding-block:clamp(56px,8vw,104px) 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3.4vw,40px)}
.sec-head h2{font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.1}

.foot{margin-top:clamp(72px,10vw,128px);border-top:1px solid var(--line);padding-block:clamp(40px,6vw,72px) 48px;display:grid;gap:22px}
.foot .cta{font-family:var(--f-display);font-weight:300;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05}
.foot .cta b{font-weight:500;letter-spacing:.04em}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;color:var(--ink-2);font-size:var(--fs-small)}
.foot-meta p:last-child{max-width:42em}
.credits{font-size:.8125rem;color:var(--ink-2);line-height:1.55}
.credits summary{cursor:pointer;font-family:var(--f-label);font-weight:500}
.credits ul{margin:10px 0 0;padding-left:18px;display:grid;gap:3px}