/* archemist.ac - shared stylesheet. Every page uses this file; edit here and the whole site follows. */

/* ---------- Colour system ----------
   One master colour tints the whole site. Every colour below keeps its own lightness and takes the
   master's hue, at a strength (k) that says how strongly it is tinted: 0 is neutral grey, 1 is the
   master's own colour, higher is more vivid. Images are neutral greyscale and tinted the same way,
   live, by a Colour blend layer. Only the master's hue and vividness are used, never its lightness,
   so each element keeps its own brightness. To retint the site, change --master; to calm or lift
   everything, change --vivid; to adjust one group, change its k. */
:root{
  --master:#3B575C;   /* fog hue from the Mister Bo photo at the buildings saturation. Earlier: #35585E fog, #324C53 buildings, #3295A0, #3C4E50 (Oct 28 lock) */

  --gold-master:oklch(0.80 0.11 80);   /* the second colour (Nov 3): antique gold for everything authored: the wordmark, titles, outlines, the signal line. Teal is the world, gold is the Academy */
  --k-gold-quiet:0.15;  /* The, Academy, Are you? and list dates: grey with this much of the gold's strength */

  --vivid:1;        /* one dial for the whole site: lower calms every tint at once, 1 is full strength */

  --k-deep:0.5;      /* near-black page and glass fills */
  --k-ground:0.25;   /* the charcoal ground texture */
  --k-hero:0.5;      /* the planet */
  --k-image:1.3;     /* the three card images */
  --k-ink:0.88;      /* text, links, the nav mark */
  --k-chrome:1.4;    /* wordmark, card borders, hairlines, buttons */
  --k-accent:1.9;    /* The, Academy, titles, the signal line */
  --h-accent:-10;    /* accent hue turn in degrees: bright teal reads bluer than the dim tints, negative turns it greener; 0 = master hue */
  --a-portrait:0;    /* the Dossier photo stays in its own colours; raise toward 1 to tint it */

  --page:oklch(from var(--master) 0.1113 calc(c * var(--k-deep) * var(--vivid)) h);
  --ground:oklch(from var(--master) 0.1328 calc(c * var(--k-deep) * var(--vivid)) h);
  --glass:oklch(from var(--master) 0.1737 calc(c * var(--k-deep) * var(--vivid)) h / 0.2);

  --ink:oklch(from var(--master) 0.8135 calc(c * var(--k-ink) * var(--vivid)) h);
  --ink-strong:oklch(from var(--master) 0.9334 calc(c * var(--k-ink) * var(--vivid)) h);
  --ink-read:oklch(from var(--master) 0.8724 calc(c * var(--k-ink) * var(--vivid)) h);
  --ink-soft:oklch(from var(--master) 0.7789 calc(c * var(--k-ink) * var(--vivid)) h);
  --ink-muted:oklch(from var(--master) 0.6792 calc(c * var(--k-ink) * var(--vivid)) h);
  --link:#fff;        /* text links are white at medium weight site-wide (his standard, Oct 30); see Text links below */
  --link-hover:#fff;
  --link-quiet:oklch(from var(--master) 0.7567 calc(c * var(--k-ink) * var(--vivid)) h);        /* the earlier tinted link colour, kept for the Glossary category contents lists */
  --link-quiet-hover:oklch(from var(--master) 0.8539 calc(c * var(--k-ink) * var(--vivid)) h);
  --mark-edge:oklch(from var(--gold-master) 0.65 calc(c * 0.75) h);
  --mark-mid:oklch(from var(--gold-master) 0.80 calc(c * 0.9) h);
  --focus:oklch(from var(--master) 0.586 calc(c * var(--k-ink) * var(--vivid)) h);

  --accent:var(--gold-master);   /* titles, subheads, card titles, the signal line. The earlier teal accent (k-accent, h-accent) is kept below as --accent-teal */
  --accent-wash:oklch(from var(--gold-master) l c h / 0.16);
  --accent-quiet:oklch(from var(--gold-master) l calc(c * var(--k-gold-quiet)) h);
  --accent-teal:oklch(from var(--master) 0.7678 calc(c * var(--k-accent) * var(--vivid)) calc(h + var(--h-accent)));

  --line:oklch(from var(--gold-master) 0.72 calc(c * var(--k-gold-quiet)) h / 0.30);   /* card and panel outlines in warm grey (Nov 3): the gold at k-gold-quiet, framing gold titles */
  --line-mid:oklch(from var(--gold-master) 0.74 calc(c * var(--k-gold-quiet)) h / 0.45);
  --line-faint:oklch(from var(--gold-master) 0.72 calc(c * var(--k-gold-quiet)) h / 0.10);
  --line-light:oklch(from var(--gold-master) 0.82 calc(c * var(--k-gold-quiet)) h / 0.70);
  --line-sheen:oklch(from var(--master) 0.7555 calc(c * var(--k-chrome) * var(--vivid)) h / 0.16);
  --rule:oklch(from var(--gold-master) 0.6792 calc(c * var(--k-gold-quiet)) h); /* every horizontal rule: warm grey (Nov 3), the eyebrow's lightness with the gold's quiet warmth */
  --btn:oklch(from var(--master) 0.3613 calc(c * var(--k-chrome) * var(--vivid)) h);
  --btn-hover:oklch(from var(--master) 0.4133 calc(c * var(--k-chrome) * var(--vivid)) h);

  --wm-1:oklch(from var(--gold-master) 0.96 calc(c * 0.45) calc(h + 5));   /* the wordmark is cast gold (Nov 3) */
  --wm-2:oklch(from var(--gold-master) 0.85 calc(c * 0.9) calc(h + 2));
  --wm-3:oklch(from var(--gold-master) 0.36 calc(c * 0.85) calc(h - 14));   /* the burnished foot of the letters */
  --wm-4:oklch(from var(--gold-master) 0.90 calc(c * 0.8) calc(h + 4));
  --wm-5:oklch(from var(--gold-master) 0.76 calc(c * 0.9) calc(h - 2));
  --wm-outline:oklch(from var(--gold-master) 0.26 calc(c * 0.45) calc(h - 10) / 0.7);
  --wm-glow:oklch(from var(--gold-master) 0.86 calc(c * 0.9) calc(h + 2) / 0.6);
  --wm-halo:oklch(from var(--gold-master) 0.70 calc(c * 0.9) calc(h - 2) / 0.40);

  /* Colour blend layers for the images (only hue and strength matter in a Colour blend). */
  --tint-ground:oklch(from var(--master) l calc(c * var(--k-ground) * var(--vivid)) h);
  --tint-hero:oklch(from var(--master) l calc(c * var(--k-hero) * var(--vivid)) h);
  --tint-image:oklch(from var(--master) l calc(c * var(--k-image) * var(--vivid)) h);
  --tint-portrait:oklch(from var(--master) l calc(c * var(--vivid)) h / var(--a-portrait));

  --font-name:'Cinzel','Trajan Pro','Times New Roman',serif;
  --font-label:'Michroma','Roboto',system-ui,sans-serif;
  --font-read:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 2px 6px rgba(0,0,0,0.45),0 18px 44px rgba(0,0,0,0.5);
  --hero-w:max(100vw, 1100px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page)}
img{max-width:100%}
a{color:var(--link)}a:hover{color:var(--link-hover)}
p{margin:0}
/* Michroma is always set in capitals; its lowercase is nearly cap height and reads as shrunken capitals. */
.label{font-family:var(--font-label);font-weight:400;text-transform:uppercase}

/* ---------- Page shell ---------- */
.site{position:relative;isolation:isolate;min-height:100vh;padding:0 max(16px, 4vw) 48px;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--font-read);color:var(--ink);
  background:linear-gradient(var(--tint-ground), var(--tint-ground)), url("../images/ground.webp") center top / 3840px auto repeat-y, var(--ground);
  background-blend-mode:color, normal}
/* Ground: his 3840 seamless charcoal tile, shown at its true size and repeated down the page; small screens see the middle, nothing is stretched. */
.home .site{padding-bottom:32px}
/* Planet anchored so its horizon crest sits at 468px at every screen width, the same on every page. */
.hero{position:absolute;left:0;right:0;top:0;height:900px;z-index:-1;pointer-events:none;
  --hero-top:calc(468px - 0.2637 * var(--hero-w));
  background:
    linear-gradient(#000 0px, #000 64px, transparent 150px),
    linear-gradient(#000, #000),
    linear-gradient(var(--tint-hero), var(--tint-hero)),
    url("../images/hero.webp");
  background-position:0 0, 0 0, center var(--hero-top), center var(--hero-top);
  background-size:100% 150px, 100% max(0px, var(--hero-top)), var(--hero-w) calc(var(--hero-w) * 0.5625), var(--hero-w) calc(var(--hero-w) * 0.5625);
  background-repeat:no-repeat;background-blend-mode:normal, normal, color, normal;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0.85) 64%, rgba(0,0,0,0.62) 71%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.07) 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0.85) 64%, rgba(0,0,0,0.62) 71%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.07) 92%, transparent 100%)}
/* The bottom mask stays fully opaque until just below the horizon (520px), so the crest is never dimmed. */
/* Top of the page: solid black behind the menu, easing into the hero, whose own top fades to black. On narrow screens the gap above the planet is filled with the same black, so no bar can show. */

/* ---------- Masthead: nav, The, Archemist, Academy ---------- */
.masthead{display:flex;flex-direction:column;align-items:center;gap:8px}
.home .masthead{gap:10px}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 40px;margin-bottom:24px;font-size:12px;line-height:20px;letter-spacing:0.14em}
.home .nav{margin-bottom:28px}
.nav a{position:relative;color:var(--ink);text-decoration:none;padding:12px 4px}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:4px;width:28px;height:2px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(90deg, var(--mark-edge), var(--mark-mid), var(--mark-edge))}
.nav a:focus-visible,.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:5px}
.mast-word{padding-left:0.28em;font-size:13px;line-height:20px;letter-spacing:0.28em;color:var(--accent)}
.wordmark{margin:-0.35em -0.4em;padding:0.35em 0.4em;font-family:var(--font-name);font-weight:700;font-size:clamp(44px, 5vw, 64px);line-height:1.1;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--wm-2);background-image:linear-gradient(180deg, var(--wm-1) 28%, var(--wm-2) 37%, var(--wm-5) 47%, var(--wm-3) 67%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  /* Fully opaque (Nov 3): light gold at the top deepening to burnished gold at the foot; no fade into the background.
     The letters fill 28% to 67% of this padded box (Cinzel cap height at line-height 1.1), so the stops sit on them. Checked in Firefox and Chromium. */
  filter:drop-shadow(1px 0 0 var(--wm-outline)) drop-shadow(-1px 0 0 var(--wm-outline)) drop-shadow(0 1px 0 var(--wm-outline)) drop-shadow(0 -1px 0 var(--wm-outline)) drop-shadow(0 0 1px var(--wm-glow)) drop-shadow(0 0 14px var(--wm-halo)) drop-shadow(0 3px 6px rgba(0,0,0,0.8))}
.home .wordmark{font-size:clamp(40px, 7.6vw, 112px)}
.wordmark + .mast-word{margin-top:-10px}
.home .wordmark + .mast-word{margin-top:-14px}

/* ---------- Home: headline, cards, signal ---------- */
.headline{margin:40px 0 0;max-width:1200px;font-size:clamp(22px, 2.6vw, 36px);line-height:1.15;letter-spacing:0.1em;text-wrap:balance;color:#fff;text-shadow:var(--shadow)}
.headline span{display:block}
.headline .whisper{margin-top:14px;padding-left:0.26em;font-size:clamp(12px, 1.4vw, 20px);letter-spacing:0.26em;color:var(--accent);opacity:0.5}
.cards{width:100%;max-width:1040px;margin-top:172px;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px}
@media (max-width: 760px){.cards{grid-template-columns:minmax(0, 1fr);max-width:420px}}
.card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;border-radius:10px;box-shadow:var(--shadow)}
/* Black fill and image fade together as one layer at 85%, so text, button and border stay fully opaque. */
.card-fill{position:absolute;inset:0;padding:1px 1px 0;background:#000;opacity:0.85;pointer-events:none}
.card-img{display:block;width:100%;aspect-ratio:16 / 9;border-radius:9px 9px 0 0;
  background:linear-gradient(var(--tint-image), var(--tint-image)), var(--img) center / cover no-repeat;background-blend-mode:color, normal;
  -webkit-mask-image:linear-gradient(#000 65%, transparent);mask-image:linear-gradient(#000 65%, transparent)}
.img-body{--img:url("../images/card-body.webp")}
.img-mind{--img:url("../images/card-mind.webp")}
.img-sky{--img:url("../images/card-sky.webp")}
.card-space{margin:1px 1px 0;aspect-ratio:16 / 9}
.card-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 16px}
.card-title{margin:0;font-family:var(--font-name);font-weight:600;font-size:26px;line-height:32px;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent)}
/* Border lit from the top-left at fixed distances, so every card catches the same light whatever its size. */
.card::after,.panel::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(350deg, var(--line-faint) 0px, transparent 60px), linear-gradient(170deg, var(--line-light) 0px, var(--line-mid) 56px, var(--line) 154px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.signal{display:block;width:min(720px, 100%);height:auto;margin-top:56px;overflow:visible;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45))}
.signal stop{stop-color:var(--accent)}

/* ---------- Buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border:1px solid rgba(0,0,0,0.5);border-radius:8px;color:#fff;text-decoration:none;font-size:12px;line-height:20px;letter-spacing:0.1em}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0.8;background:var(--btn) url("../images/noise.png") 0 0 / 300px 300px;background-blend-mode:soft-light}
.btn:hover{color:#fff}
.btn:hover::before{background-color:var(--btn-hover)}

/* ---------- Reading panel: essays, Dossier, sections and placeholders ---------- */
/* The site's glass, with a deeper shade and more frost so long text stays easy on the eyes over the horizon. */
.panel{position:relative;width:100%;max-width:880px;margin-top:56px;--pt:56px;--px:clamp(24px, 6vw, 72px);padding:var(--pt) var(--px) 48px;border-radius:12px;text-align:left;background:var(--glass);
  -webkit-backdrop-filter:blur(9px) saturate(120%) brightness(42%);backdrop-filter:blur(9px) saturate(120%) brightness(42%);box-shadow:inset 0 1px 0 var(--line-sheen),var(--shadow)}
.eyebrow{font-size:11px;line-height:20px;letter-spacing:0.22em;color:var(--ink-muted)}
.title{margin:14px 0 0;font-family:var(--font-name);font-weight:600;font-size:clamp(32px, 4.2vw, 48px);line-height:1.15;letter-spacing:0.04em;color:var(--accent);text-wrap:balance}
.dek{margin:18px 0 0;font-size:20px;line-height:30px;color:var(--ink);text-wrap:pretty}
.meta{margin:20px 0 0;padding-bottom:28px;border-bottom:1px solid var(--rule);font-size:13px;line-height:20px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.prose{margin-top:32px;font-size:18px;line-height:1.75;color:var(--ink-read)}
/* Body text is justified site-wide; hyphenation keeps the word gaps even, especially on narrow screens. */
.prose p{margin:0 0 1.15em;text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
.prose h2{margin:1.9em 0 0.6em;scroll-margin-top:24px;font-family:var(--font-name);font-weight:600;font-size:24px;line-height:32px;letter-spacing:0.05em;text-transform:uppercase;color:var(--accent)}
.prose blockquote{margin:1.8em 0;padding:0 0 0 24px;border-left:1px solid var(--line-light);font-family:var(--font-name);font-weight:500;font-size:24px;line-height:36px;color:var(--accent)}
.prose img{display:block;max-width:75%;height:auto;margin:1.5em auto;border-radius:8px}
.panel-end{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:40px}
.panel-end .signal{width:min(520px, 100%);margin-top:0}
.empty{margin:40px 0 8px;font-size:17px;line-height:28px;font-style:italic;color:var(--ink-muted)}

/* Dossier: header photo edge to edge across the top of the panel, fading into the glass, then the file fields. */
.portrait{display:block;width:calc(100% + 2 * var(--px));margin:calc(-1 * var(--pt)) calc(-1 * var(--px)) 28px;aspect-ratio:3 / 2;border-radius:12px 12px 0 0;
  background:linear-gradient(var(--tint-portrait), var(--tint-portrait)), url("../images/dossier.webp") center / cover no-repeat;background-blend-mode:color, normal;
  -webkit-mask-image:linear-gradient(#000 62%, transparent);mask-image:linear-gradient(#000 62%, transparent)}
.fields{display:grid;grid-template-columns:max-content minmax(0, 1fr);gap:14px 36px;margin:28px 0 0;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fields dt{font-size:11px;line-height:26px;letter-spacing:0.16em;color:var(--ink-muted)}
.fields dd{margin:0;font-size:17px;line-height:26px;color:var(--ink-read)}

/* Section lists: grouped essays and documents. Each row is one link; hover and focus fill it with the accent wash. */
.group{margin:40px 0 4px;font-family:var(--font-name);font-weight:600;font-size:22px;line-height:30px;letter-spacing:0.05em;text-transform:uppercase;color:var(--accent)}
.list{list-style:none;margin:8px 0 0;padding:0}
.list li{border-bottom:1px solid var(--rule)}
/* Rules sit between rows only; the last row has none, since the signal line closes the card. */
.list li:last-child{border-bottom:0}
.prose hr{height:0;margin:2.4em 0;border:0;border-top:1px solid var(--rule)}
.list a{display:block;margin:4px -16px;padding:14px 16px;border-radius:6px;text-decoration:none;transition:background-color 120ms ease}
.list .row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px}
.list .name{font-size:19px;line-height:28px;font-weight:500;color:var(--ink-strong)}
.list .tag{font-size:10px;line-height:20px;letter-spacing:0.16em;color:var(--ink-muted);white-space:nowrap}
.list .desc{display:block;margin:6px 0 0;font-size:16px;line-height:26px;color:var(--ink-soft)}
.list a:hover,.list a:focus-visible{background:oklch(from var(--accent-teal) l c h / 0.12);outline:none}   /* row highlight stays teal (Nov 3): the world, not the gold; half strength at his call */
.list a:hover .name,.list a:focus-visible .name{color:#fff;font-weight:600}
.list a:hover :is(.tag,.desc),.list a:focus-visible :is(.tag,.desc){color:var(--ink-strong)}
@media (prefers-reduced-motion: reduce){.list a{transition:none}}
/* Contents list for long pieces */
.contents{margin:28px 0 0;padding:20px 24px;border:1px solid var(--line);border-radius:10px}
.contents .label{margin:0 0 8px;font-size:10px;letter-spacing:0.16em;color:var(--ink-muted)}
.contents ol{margin:0;padding-left:22px;columns:2 240px;column-gap:32px;font-size:15px;line-height:26px}
.contents a{text-decoration:none}

/* ---------- Footer ---------- */
.foot{margin-top:auto;padding-top:56px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-muted)}

@media (max-width: 560px){.fields{grid-template-columns:minmax(0, 1fr);gap:2px 0}.fields dd{margin-bottom:12px}.panel{--pt:40px}.prose{font-size:17px}.dek{font-size:18px;line-height:28px}}

/* Dossier: file header (last updated, status, handling) and analyst remarks. */
.file-head{display:grid;grid-template-columns:max-content minmax(0, 1fr);gap:8px 28px;margin:24px 0 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.file-head dt{font-size:10px;line-height:20px;letter-spacing:0.16em;color:var(--ink-muted)}
.file-head dd{margin:0;font-size:11px;line-height:20px;letter-spacing:0.12em;color:var(--ink)}
.prose .fields{margin:16px 0 0}
.prose .fields dd{font-size:17px}
.prose .fields .trait{color:var(--ink-muted)}
.prose .remark{margin:20px 0 0;padding-left:20px;border-left:1px solid var(--line-light);font-style:italic;color:var(--ink-soft)}
@media (max-width: 560px){.file-head{grid-template-columns:minmax(0, 1fr);gap:0}.file-head dd{margin-bottom:10px}}

/* Standing rule: body text on written pages is justified, hyphenated so the word gaps stay even. */
.dek,.empty,.fields dd,.list .desc{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}

/* ---------- Writing: article images, section lists with thumbnails (pages built by tools/Build Writing.py) ---------- */
/* Article images are 16:9 at 1920 x 1080 (his standard), shown whole in the header and in the list thumbnail. Greyscale images take the master tint live; colour images keep their own colours. Each page's image comes from css/articles.css. */
.art-img{background:linear-gradient(var(--tint-image), var(--tint-image)), var(--img) center / cover no-repeat;background-blend-mode:color, normal}
.art-img.own-colours{background:var(--img) center / cover no-repeat}
.art-head{display:block;width:calc(100% + 2 * var(--px));margin:calc(-1 * var(--pt)) calc(-1 * var(--px)) 28px;aspect-ratio:16 / 9;border-radius:12px 12px 0 0;-webkit-mask-image:linear-gradient(#000 62%, transparent);mask-image:linear-gradient(#000 62%, transparent)}
.list.with-thumbs a{display:grid;grid-template-columns:168px minmax(0, 1fr);gap:20px;align-items:start}
.thumb{display:block;aspect-ratio:16 / 9;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}
.thumb-empty{background:linear-gradient(135deg, var(--line-mid), transparent 70%)}
.entry{display:block;min-width:0}
@media (max-width: 560px){.list.with-thumbs a{grid-template-columns:96px minmax(0, 1fr);gap:14px}}

/* The Body: one card per topic, stacked down the page (built by tools/Build Writing.py from BODY_CARDS). */
.stack{width:100%;display:flex;flex-direction:column;align-items:center}
.stack .panel + .panel{margin-top:32px}
/* A row that isn't ready yet: the same layout as a link row, with no hover and the name a step dimmer. */
.list .item{display:block;margin:4px -16px;padding:14px 16px}
.list.with-thumbs .item{display:grid;grid-template-columns:168px minmax(0, 1fr);gap:20px;align-items:start}
.list .item .name{color:var(--ink-soft)}
@media (max-width: 560px){.list.with-thumbs .item{grid-template-columns:96px minmax(0, 1fr);gap:14px}}

/* ---------- The BioForge Glossary (glossary.html, built by tools/Build Glossary.py) ---------- */
/* Each category card shows its line and contents; its entries fold away behind the Show button. */
.g-intro{margin-top:8px}
.g-intro h2{scroll-margin-top:24px}
.g-cat{scroll-margin-top:24px}
.g-contents{list-style:none;margin:28px 0 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);columns:3 180px;column-gap:32px;font-size:15px;line-height:28px}
.g-contents li{break-inside:avoid}
.g-contents a{text-decoration:none}
.g-contents a:hover{text-decoration:underline}
.g-fold{margin-top:28px}
.g-fold > summary{display:flex;width:fit-content;margin:0 auto;list-style:none;cursor:pointer}
.g-fold > summary::-webkit-details-marker{display:none}
.g-fold[open] > summary .when-closed,.g-fold:not([open]) > summary .when-open{display:none}
button.btn{background:none;cursor:pointer;font-family:var(--font-label)}
.fold-close{display:flex;margin:36px auto 0}
.g-entries{margin-top:12px}
.g-entry{padding:36px 0 24px;border-bottom:1px solid var(--rule);scroll-margin-top:16px}
.g-name{margin:0 0 18px;font-family:var(--font-name);font-weight:600;font-size:24px;line-height:32px;letter-spacing:0.05em;text-transform:uppercase;color:var(--accent)}
.g-fields{display:grid;grid-template-columns:max-content minmax(0, 1fr);gap:12px 28px;margin:0}
.g-fields dt{font-size:10px;line-height:26px;letter-spacing:0.16em;color:var(--ink-muted)}
.g-fields dd{margin:0;font-size:16px;line-height:26px;color:var(--ink-read)}
.g-fields dd p{margin:0 0 0.8em}
.g-fields dd p:last-child{margin-bottom:0}
.g-fields a{text-decoration:none;border-bottom:1px solid var(--line-mid)}
.g-fields a:hover{border-bottom-color:var(--link-hover)}
.g-refs{margin:0;padding-left:20px;font-size:14px;line-height:22px;color:var(--ink-soft)}
.g-refs li{margin-bottom:6px;text-align:left}
.g-fields sup,.g-intro sup{font-size:0.68em;line-height:0;color:var(--ink-muted)}
.g-fields dd{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
@media (max-width: 560px){.g-fields{grid-template-columns:minmax(0, 1fr);gap:0}.g-fields dd{margin-bottom:12px}.g-contents{columns:2 140px}}

/* Thumb shapes: a thumb takes the shape of what's behind the link. Book covers are 2:3 (a trade paperback);
   podcast and YouTube channels and product shots are square (never round, which would crop the official art).
   Shaped thumbs share one width, the height of a 16:9 thumb, centred in its column, with the standard corners. */
.thumb.shape-book,.thumb.shape-square{justify-self:center;width:calc(168px * 9 / 16);height:auto}
.thumb.shape-book{aspect-ratio:2 / 3}
.thumb.shape-square{aspect-ratio:1 / 1}
@media (max-width: 560px){.thumb.shape-book,.thumb.shape-square{width:calc(96px * 9 / 16)}}

/* Text links, site-wide (his standard, Oct 30): white at medium weight, underlined only on hover (a constant underline reads dated).
   The hidden underline keeps its space so nothing shifts on hover. Glossary entry Types are in the button teal, with their links white.
   Exception (his call): the Glossary category cards' contents lists keep the quieter tinted links at normal weight. */
:is(.prose,.dek,.fields,.file-head,.g-fields) a:not(.btn){color:var(--link);font-weight:500;text-decoration:none;border-bottom:1px solid transparent}
:is(.prose,.dek,.fields,.file-head,.g-fields) a:not(.btn):hover{color:var(--link-hover);border-bottom-color:#fff}
.contents a{color:var(--link);font-weight:500;border-bottom:1px solid transparent}
.contents a:hover{border-bottom-color:#fff}
.g-contents a{color:var(--link-quiet);font-weight:400}
.g-contents a:hover{color:var(--link-quiet-hover)}
.g-fields .g-type{color:oklch(from var(--master) 0.68 calc(c * var(--k-chrome) * var(--vivid)) h)}   /* the button teal at reading brightness; links inside stay white */

/* ---------- Sticky menu (Oct 30) ----------
   The menu sits just outside the masthead and stays pinned to the top while the page scrolls, on the same black band
   the page opens with, fading out along its lower edge. Anything a link jumps to stops below it (--nav-h). */
:root{--nav-h:76px}
.nav{position:sticky;top:0;z-index:20;align-self:stretch;margin:0 calc(-1 * max(16px, 4vw)) 20px;padding:20px max(16px, 4vw) 12px;
  background:linear-gradient(#000 calc(100% - 12px), transparent)}
.home .nav{margin-bottom:26px}
.g-entry,.g-cat,.g-intro h2,.prose h2,#top{scroll-margin-top:calc(var(--nav-h) + 16px)}
@media (max-width: 560px){:root{--nav-h:124px}}

/* Glossary: floating button that returns to the Overview, in the site's button style (it also carries .btn), shown once the
   reader is among the categories. Floats 20px above the bottom of the window and 20px outside the 880px panel's right edge;
   bottom right on narrower screens. Icon is Lucide's arrow-big-up-dash. */
.to-overview{position:fixed;z-index:15;bottom:20px;left:calc(50% + 440px + 20px);width:44px;padding:0;
  opacity:0;pointer-events:none;transition:opacity 200ms ease}
.to-overview.show{opacity:1;pointer-events:auto}
@media (max-width: 1040px){.to-overview{left:auto;right:16px;bottom:16px}}
@media (prefers-reduced-motion: reduce){.to-overview{transition:none}}

/* The Glossary's image (his art, greyscale, tinted live like the other article images): the Body row thumb and the Glossary page header. */
.art-glossary{--img:url("../images/Glossary.webp")}
.art-foundations{--img:url("../images/Foundations.webp")}   /* BioHacking Foundations: the Body row thumb */
.art-gear{--img:url("../images/Gear.webp")}   /* Recommended Gear: the Body row thumb (square) */
.art-podcasts{--img:url("../images/Podcasts.webp")}   /* Recommended Podcasts: the Body row thumb (square) */
.art-reading{--img:url("../images/Reading list.webp")}   /* Essential Books: the Reading List row thumb (square bookshelf); the file name is case-exact for the web */

/* Second-level headings in longer documents (vault notes such as BioHacking Foundations). */
.prose h3{margin:1.6em 0 0.5em;scroll-margin-top:calc(var(--nav-h) + 16px);font-size:18px;line-height:28px;font-weight:600;letter-spacing:0.02em;color:var(--ink-strong)}
.prose ul{margin:0 0 1.15em;padding-left:22px}
.prose li{margin-bottom:0.4em}


/* ---------- Two colours (Nov 3) ----------
   Teal is the world (page, ground, planet, buttons); gold is the Academy (wordmark, titles, the signal line); outlines are warm grey;
   warm grey carries the quiet voice. The home card images stay greyscale and take the teal tint (his call: the gold reads best against them). */
.mast-word,.headline .whisper{color:var(--accent-quiet)}
.list .name{color:var(--accent)}
.list .tag{color:var(--accent-quiet)}
.thumb-empty{background:linear-gradient(135deg, oklch(0.32 0 0 / 0.6), transparent 70%)}

/* ---------- Entry notice (Nov 3) ----------
   js/gate.js shows the disclaimer once, over a blurred page, until the reader acknowledges it. */
html.gated{overflow:hidden}
html.gated .site{filter:blur(10px) brightness(0.55);pointer-events:none;user-select:none}
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;background:rgba(0,0,0,0.35)}
.gate .gate-card{margin:auto;max-width:640px;--pt:44px;padding-bottom:40px;text-align:left;font-family:var(--font-read);color:var(--ink)}
.gate .title{font-size:clamp(28px, 3.4vw, 38px)}
.gate .prose{margin-top:24px;font-size:17px}
.gate-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:28px}
.gate-more{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.gate-more:hover{color:#fff;border-bottom-color:#fff}
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- Item pages (Nov 3): each book and each piece of gear opens to his write-up, with the link out at the bottom ----------
   Built by tools/Build Writing.py from Writing/Books and Writing/Gear. Covers and product shots keep their own colours. */
.item-head{display:grid;grid-template-columns:200px minmax(0, 1fr);gap:32px;align-items:end;margin-top:20px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.item-cover{display:block;width:100%;border-radius:8px;box-shadow:var(--shadow), inset 0 0 0 1px var(--line)}
.item-cover.shape-book{aspect-ratio:2 / 3}
.item-cover.shape-square{aspect-ratio:1 / 1}
.item-id .title{margin-top:0}
.item-by{margin:12px 0 0;font-size:12px;line-height:20px;letter-spacing:0.14em;color:var(--accent-quiet)}
.back-link{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.back-link:hover{color:#fff;border-bottom-color:#fff}
@media (max-width: 560px){.item-head{grid-template-columns:120px minmax(0, 1fr);gap:20px}}
/* Footnotes: superscript markers in prose, notes listed under the Notes heading */
.prose sup{font-size:0.7em;line-height:0;vertical-align:super}
.prose sup a.footnote-ref{font-weight:500;text-decoration:none;border-bottom:0;color:var(--accent-quiet)}
.prose sup a.footnote-ref:hover{color:var(--ink-strong)}
.prose a.footnote-ref::before{content:"["}
.prose a.footnote-ref::after{content:"]"}
.prose .footnote{margin-top:0.4em;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.prose .footnote hr{display:none}
.prose .footnote ol{padding-left:22px}
.prose .footnote li{margin-bottom:0.6em}
.prose .footnote p{text-align:left;margin:0}
.prose .footnote-backref{margin-left:4px;text-decoration:none}
.prose sup,.prose .footnote li{scroll-margin-top:calc(var(--nav-h) + 16px)}