/* Conscious AI Connection
   ------------------------------------------------------------------
   A room, not a template. Cream ground, deep green bands, brass
   hairlines. Warmth comes from the palette and the space, so the
   design still holds when there is no photograph in the slot.

   Everything here works with JavaScript off. Scripts are decoration:
   the theme toggle remembers a choice, and the writing page can
   filter. Neither is required to read a single word.
   ------------------------------------------------------------------ */

/* -- faces --------------------------------------------------------- */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:200 700;
  font-display:swap; src:url("/fonts/newsreader-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:200 700;
  font-display:swap; src:url("/fonts/newsreader-latin-var-italic.woff2") format("woff2"); }
@font-face { font-family:"Spectral"; font-style:normal; font-weight:300;
  font-display:swap; src:url("/fonts/spectral-latin-300.woff2") format("woff2"); }
@font-face { font-family:"Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/fonts/plexmono-latin-400.woff2") format("woff2"); }
@font-face { font-family:"Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url("/fonts/plexmono-latin-500.woff2") format("woff2"); }

/* -- palette ------------------------------------------------------- */
:root {
  --ground:#f4f1e8;        /* cream page */
  --surface:#fdfcf7;       /* cards, raised things */
  --band:#1d2e25;          /* deep green full-bleed sections */
  --band-ink:#e9e5d7;      /* text on the band */
  --band-faint:#94a89a;
  --ink:#2b312c;
  --ink-strong:#141a15;
  --muted:#666e65;
  --faint:#8b9188;
  --hair:#ddd7c6;
  --hair-lit:#c4bda8;
  --accent:#2f5c43;        /* the green that acts */
  --accent-lit:#3f7a58;
  --brass:#a98d4d;         /* hairline gold, used sparingly */
  --scrim:#14241b;         /* green, but only where it fades out before the subject */
  --soft-green:#c3ddc8;    /* the pale green in the headline, well off the button */
  --panel:#0f2536;         /* the band behind the hero words: deep blue, faint green in it */
  --shadow:0 1px 2px rgba(20,26,21,.05), 0 8px 24px rgba(20,26,21,.05);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ground:#121a15; --surface:#19221b; --band:#0c110d; --band-ink:#e2ded0;
    --band-faint:#7c8a7f; --ink:#dbd7c8; --ink-strong:#f3f0e5; --muted:#98a094;
    --faint:#79806f; --hair:#26302a; --hair-lit:#3a463c;
    --accent:#7fb494; --accent-lit:#9ecdb0; --brass:#c8ab6a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --ground:#121a15; --surface:#19221b; --band:#0c110d; --band-ink:#e2ded0;
  --band-faint:#7c8a7f; --ink:#dbd7c8; --ink-strong:#f3f0e5; --muted:#98a094;
  --faint:#79806f; --hair:#26302a; --hair-lit:#3a463c;
  --accent:#7fb494; --accent-lit:#9ecdb0; --brass:#c8ab6a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

/* -- base ---------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:380; font-size:1.12rem; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg { display:block; max-width:100%; }
img { height:auto; }
a { color:var(--accent); text-decoration:none;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
    transition:color .18s ease,border-color .18s ease; }
a:hover { color:var(--accent-lit); border-bottom-color:var(--accent-lit); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
hr { border:0; height:1px; background:var(--hair); margin:2.8rem 0; }

/* Skip link, for anyone arriving by keyboard. */
.skip { position:absolute; left:-9999px; top:0; z-index:100; }
.skip:focus { left:1rem; top:1rem; background:var(--surface); color:var(--ink);
  padding:.7rem 1rem; border:1px solid var(--hair-lit); border-radius:3px; }

/* -- measures ------------------------------------------------------ */
/* Side padding only. The shorthand would zero out the vertical padding that
   `section` sets, which is how the front page lost its spacing. */
.page      { max-width:44rem; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
.page-wide { max-width:70rem; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
/* Keeps a line readable inside a wide container, without moving its left edge. */
.measure   { max-width:40rem; }
.band      { background:var(--band); color:var(--band-ink); }
.band a    { color:var(--band-ink); border-bottom-color:rgba(255,255,255,.25); }
.band a:hover { color:#fff; border-bottom-color:#fff; }

/* -- the small letterspaced label, used everywhere ------------------ */
.kicker, .eyebrow {
  font-family:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.63rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin:0 0 1.1rem;
}
.band .kicker, .band .eyebrow { color:var(--band-faint); }

/* -- navigation ---------------------------------------------------- */
.site-nav {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--hair);
}
.site-nav .inner {
  max-width:76rem; margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; gap:1.6rem;
}
.brand { margin-right:auto; display:block; border-bottom:0; color:var(--ink-strong); }
.brand:hover { color:var(--accent); border-bottom:0; }
.brand-name {
  font-family:"Spectral",Georgia,serif; font-weight:300;
  font-size:1.06rem; letter-spacing:.02em; line-height:1.2; display:block;
}
.brand-name .ai { color:var(--accent); }
.brand-tag {
  font-family:"Plex Mono",ui-monospace,monospace; display:block;
  font-size:.53rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin-top:.25rem;
}
.nav-links { display:flex; gap:1.5rem; align-items:center; }
.nav-links a {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent; padding-bottom:2px;
}
.nav-links a:hover { color:var(--ink-strong); border-bottom-color:var(--hair-lit); }
.nav-links a[aria-current="page"] { color:var(--ink-strong); border-bottom-color:var(--accent); }

/* -- buttons ------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.75rem 1.35rem; border-radius:999px; border:1px solid var(--accent);
  color:var(--accent); background:transparent; cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover { background:var(--accent); color:var(--ground); border-color:var(--accent); }
.btn-solid { background:var(--accent); color:var(--ground); }
.btn-solid:hover { background:var(--accent-lit); border-color:var(--accent-lit); }
/* Hero buttons. Fixed colours rather than palette variables, because the hero
   is always dark whatever the page theme, so a green that flips to pale in
   dark mode would put white text on a light fill. */
.hero .btn, .band .btn { border-color:rgba(255,255,255,.7); color:#fff; }
.hero .btn:hover, .band .btn:hover { background:#fff; color:var(--band);
  border-color:#fff; }
.hero .btn-solid { background:#2f5c43; color:#fff;
  border-color:rgba(255,255,255,.7); }
.hero .btn-solid:hover { background:#3f7a58; color:#fff; border-color:#fff; }
.band .btn { border-color:rgba(255,255,255,.4); color:var(--band-ink); }
.band .btn:hover { background:var(--band-ink); color:var(--band); border-color:var(--band-ink); }
.band .btn-solid { background:var(--band-ink); color:var(--band); border-color:var(--band-ink); }
.band .btn-solid:hover { background:#fff; border-color:#fff; }

/* Connection, in the nav, matches the hero's filled button so the two read as
   one family. Pinned rather than drawn from the palette for the same reason:
   a dark fill with white text is legible on cream and on near-black alike,
   where a palette green would flip pale in dark mode. */
.site-nav .btn-solid { background:#2f5c43; color:#fff; border-color:#fff; }
.site-nav .btn-solid:hover { background:#3f7a58; border-color:#fff; color:#fff; }

.theme-toggle {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); background:transparent; border:1px solid var(--hair);
  border-radius:999px; padding:.42rem .8rem; cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.theme-toggle:hover { color:var(--accent); border-color:var(--hair-lit); }

/* -- hero ---------------------------------------------------------- */
.hero { position:relative; overflow:hidden; background:var(--band); color:var(--band-ink); }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media picture { display:block; width:100%; height:100%; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
/* The scrim sits under the words and nowhere else. It is gone before the
   middle of the frame, so the right-hand side of the photograph is the
   photograph, untouched and at full brightness.

   It is green, which is fine here because it never reaches the golden part
   of the frame. The olive cast in the first attempt came from the same wash
   spreading across the sunset, not from the colour itself.

   It sits at roughly half its original strength because the blue stripe now
   carries the headline. At eighty-four percent it was the only protection the
   text had, and it made the left of the frame nearly solid. */
.hero-media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--scrim) 48%,transparent) 0%,
    color-mix(in srgb,var(--scrim) 42%,transparent) 28%,
    color-mix(in srgb,var(--scrim) 24%,transparent) 45%,
    transparent 58%);
}
/* One column, deliberately. A second column on the right would sit on the
   subject of the photograph, and no amount of contrast makes text over a
   sleeping cat look like anything but clutter. */
.hero-inner {
  position:relative; z-index:1;
  max-width:76rem; margin:0 auto; padding:6.5rem 1.5rem 5.5rem;
}
/* Width tied to the frame, not to the font. A fixed rem width covers more and
   more of the photograph as the window narrows or the reader zooms, until the
   text reaches the books. min() stops it before the scrim runs out at 56%. */
.hero-copy { max-width:min(34rem,46%); position:relative; }
/* The band behind the words, over the scrim.

   It holds one strength from its right edge all the way off the left of the
   screen, and runs the full height of the section. Only the right edge fades,
   over four rem, so the text never sits on a visible border and the picture
   is untouched from there rightward.

   Measured from the RIGHT in absolute lengths rather than in percentages from
   the left. A percentage gradient anchored at the far left is darkest where
   nothing is and weakest under the words, which is the wrong way round.

   Blue on purpose. Green over the green scrim over green foliage was three of
   the same thing stacked, and that is where the muddiness came from.

   The vertical insets are far larger than the section and .hero clips them, so
   the band always meets top and bottom whatever the height. */
.hero-copy::before {
  content:""; position:absolute; z-index:-1;
  inset:-100vh -3.5rem -100vh -50vw;
  background:linear-gradient(to left,
    transparent 0,
    color-mix(in srgb,var(--panel) 46%,transparent) 4rem,
    color-mix(in srgb,var(--panel) 46%,transparent) 100%);
}
.hero h1 {
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1.04;
  letter-spacing:-.015em; margin:0 0 1.6rem; color:#fff;
}
.hero h1 .soft { color:var(--soft-green); }
.hero-lede { font-size:1.08rem; line-height:1.68; color:var(--band-ink); margin:0 0 2.2rem; }
.hero-actions { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2.6rem; }
/* One line, so the rule can sit centred beside it. It was set in the faint
   colour, which is why it disappeared into the leaves. */
.hero-note {
  display:flex; align-items:center; gap:1.1rem;
  font-style:italic; font-size:1.15rem; line-height:1.5;
  color:var(--band-ink); margin:0; max-width:32rem;
  text-shadow:0 1px 8px rgba(8,14,10,.55);
}
.hero-note::before { content:""; width:2.6rem; height:1px; background:var(--brass);
  flex:none; align-self:center; }

/* Her handwriting, painted as a mask so the page supplies the colour. The
   sentence itself is still real text inside this element; it is pushed out of
   view rather than removed, so a screen reader and anything fetching the page
   still get the words. */
.script {
  display:block; width:min(24rem, 78%); height:auto;
  background-color:currentColor;
  -webkit-mask-image:var(--script); mask-image:var(--script);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  -webkit-mask-size:contain; mask-size:contain;
  text-indent:-200vw; overflow:hidden; white-space:nowrap;
}
.hero-words {
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:2.2rem 0 0;
  padding-top:1.5rem; border-top:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
  max-width:26rem;
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--band-faint);
}

/* -- pillars, the four-up row -------------------------------------- */
/* auto-fit, so three pillars or four both sit correctly */
.pillars { max-width:76rem; margin:0 auto; padding:4.4rem 1.5rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:0; }
.pillar { padding:0 1.8rem; text-align:center; border-left:1px solid var(--hair); }
.pillar:first-child { border-left:0; }
.pillar-mark {
  width:3.4rem; height:3.4rem; margin:0 auto 1.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent);
}
.pillar-mark svg { width:1.4rem; height:1.4rem; }
.pillar h3 {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.68rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-strong); margin:0 0 .7rem;
}
.pillar p { font-size:.94rem; line-height:1.6; color:var(--muted); margin:0; }

/* -- a quiet full-bleed quote -------------------------------------- */
.quote-band { padding:4.6rem 1.5rem; text-align:center; }
.quote-band blockquote {
  margin:0 auto; max-width:38rem; font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.7rem); line-height:1.5; color:var(--band-ink);
}
.quote-band cite { display:block; margin-top:1.4rem; font-style:normal;
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--band-faint); }
.quote-band cite::before { content:""; display:block; width:2.4rem; height:1px;
  background:var(--brass); margin:0 auto 1.2rem; }

/* -- sections ------------------------------------------------------ */
section { padding:4rem 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-bottom:2.4rem; flex-wrap:wrap; }
h2 {
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(1.6rem,3vw,2.15rem); line-height:1.2; letter-spacing:-.01em;
  color:var(--ink-strong); margin:0 0 1.4rem;
}
.section-head h2 { margin:0; }
h3 { color:var(--ink-strong); }
.section-head .more {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.lede { font-size:1.1rem; color:var(--muted); max-width:38rem; margin:0 0 2.4rem; }
p { margin:0 0 1.25rem; }

/* -- category chips ------------------------------------------------ */
.chips { display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 2.6rem;
         padding:0; list-style:none; }
.chips a {
  display:inline-block; border:1px solid var(--hair-lit); border-radius:999px;
  padding:.42rem 1rem; font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:var(--surface);
}
.chips a:hover { color:var(--ink-strong); border-color:var(--accent); }
.chips a[aria-current="page"] { background:var(--accent); border-color:var(--accent);
  color:var(--ground); }

/* -- cards --------------------------------------------------------- */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
             gap:1.6rem; }
.card {
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--hair); border-radius:4px;
  overflow:hidden; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.card:hover { border-color:var(--hair-lit); transform:translateY(-2px); box-shadow:var(--shadow); }
.card-image { aspect-ratio:16/10; overflow:hidden; background:var(--hair); }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-image img { transform:scale(1.035); }
.card-body { padding:1.3rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.card-kicker {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.57rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); margin:0 0 .55rem;
}
.card-title {
  font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:1.2rem;
  line-height:1.24; margin:0 0 .5rem;
}
.card-title a { color:var(--ink-strong); border-bottom:0; }
.card-title a::after { content:""; position:absolute; inset:0; }
.card:hover .card-title a { color:var(--accent); }
.card-subtitle { font-style:italic; color:var(--muted); font-size:.94rem; margin:0 0 .6rem; }
.card-summary { font-size:.94rem; line-height:1.6; color:var(--muted); margin:0 0 1.1rem; }
.card-meta {
  font-family:"Plex Mono",ui-monospace,monospace;
  margin:auto 0 0; font-size:.59rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
}
.card-meta a { position:relative; z-index:1; color:var(--faint); border-bottom-color:transparent; }
.card-meta a:hover { color:var(--accent); border-bottom-color:var(--accent); }

/* Rows, for the front page: image left, words right. Her layout. */
.card-rows { display:flex; flex-direction:column; gap:2.4rem; }
.card-rows .card { flex-direction:row; align-items:stretch; background:transparent;
  border:0; border-radius:0; border-bottom:1px solid var(--hair); padding-bottom:2.4rem; }
.card-rows .card:last-child { border-bottom:0; padding-bottom:0; }
.card-rows .card:hover { transform:none; box-shadow:none; }
.card-rows .card-image { flex:0 0 34%; max-width:16rem; aspect-ratio:4/3;
  border-radius:3px; border:1px solid var(--hair); }
.card-rows .card-body { padding:0 0 0 1.8rem; }
.card-rows .card-title { font-size:1.4rem; }

/* -- essay pages --------------------------------------------------- */
.essay { padding:3rem 0 4rem; }
.essay h1 {
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(2rem,4.4vw,2.9rem); line-height:1.14; letter-spacing:-.015em;
  color:var(--ink-strong); margin:0 0 .7rem;
}
.essay-subtitle { font-style:italic; font-size:1.18rem; color:var(--muted); margin:0 0 1.2rem; }
.essay-byline {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:0 0 2.4rem;
}
.essay-cover { margin:0 0 .8rem; }
.essay-cover img { width:100%; border-radius:3px; }
.essay-cover figcaption {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.59rem; letter-spacing:.08em; color:var(--faint); margin-top:.6rem;
}
.essay-plain {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:0 0 2.8rem;
}
.essay-plain a { color:var(--faint); border-bottom-color:var(--hair-lit); }
.essay-plain a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.essay h2 {
  font-size:1.4rem; margin:3rem 0 1rem; padding-top:.9rem;
  border-top:1px solid var(--hair);
}
.essay h3 { font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:1.14rem; margin:2.2rem 0 .7rem; }
.essay blockquote {
  margin:2rem 0; padding-left:1.5rem; border-left:2px solid var(--brass);
  font-style:italic; color:var(--muted);
}
.essay img { border-radius:3px; margin:2.4rem 0 .6rem; }
.essay ol, .essay ul { padding-left:1.3rem; margin:0 0 1.3rem; }
.essay li { margin-bottom:.5rem; }
.essay table { width:100%; border-collapse:collapse; margin:2rem 0; font-size:.93rem; }
.essay th, .essay td { border:1px solid var(--hair); padding:.6rem .8rem;
  text-align:left; vertical-align:top; }
.essay th { background:var(--surface); font-weight:500;
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.61rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.essay hr { margin:3rem 0; }
/* Provenance, at the foot of the piece. Quiet, but present rather than
   hidden in a file only machines read. */
.essay-made {
  margin:3rem 0 0; padding-top:1.4rem; border-top:1px solid var(--hair);
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.66rem; line-height:1.9; letter-spacing:.04em; color:var(--faint);
}
.essay-made a { color:var(--faint); border-bottom-color:transparent;
  word-break:break-all; }
.essay-made a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.essay-made span {
  display:block; letter-spacing:.18em; text-transform:uppercase;
  font-size:.58rem; color:var(--muted); margin-bottom:.3rem;
}
.essay .footnotes { font-size:.91rem; color:var(--muted); }

/* -- prose pages (about, colophon, contact) ------------------------ */
.prose h1 {
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.16;
  color:var(--ink-strong); margin:0 0 1.6rem;
}
.prose h2 { font-size:1.3rem; margin:2.6rem 0 .9rem; }
/* A closing line, given the same brass rule as the hero note so the two
   pages rhyme. */
.closing {
  display:flex; align-items:center; gap:1.1rem; margin:2.6rem 0 0;
  font-style:italic; font-size:1.15rem; color:var(--muted);
}
.closing::before { content:""; width:2.6rem; height:1px; background:var(--brass); flex:none; }
/* -- the bookshelf ------------------------------------------------- */
/* Drawn entirely in CSS. It is decoration and carries aria-hidden, because
   every title appears again as ordinary text in the list underneath. Nothing
   on the page depends on it rendering. */
.shelf-heading { margin-bottom: 1rem; }

.shelf-wrap { margin: 2.6rem 0 3.4rem; }
.shelf {
  display: flex; align-items: flex-end; gap: .28rem;
  height: 14rem; padding: 0 .6rem;
  overflow-x: auto; overflow-y: hidden;
}
.spine {
  flex: none; width: var(--w, 2.6rem); height: var(--h);
  background: var(--spine); color: var(--ink);
  border: 0; border-radius: 1px 1px 0 0;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: center; padding: .7rem .2rem;
  writing-mode: vertical-rl; text-orientation: mixed;
  box-shadow: inset -2px 0 0 rgba(0,0,0,.16), inset 2px 0 0 rgba(255,255,255,.07);
  transition: transform .22s ease;
}
.spine:hover { transform: translateY(-.55rem); color: var(--ink); }
/* No height caps here. Capping the text was clipping the longest titles and
   most of the author names; the shelf is simply tall enough instead. */
.spine-title {
  font-family: "Newsreader", Georgia, serif; font-weight: 400;
  font-size: .78rem; line-height: 1; letter-spacing: .005em;
  white-space: nowrap;
}
.spine-author {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .47rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .72; white-space: nowrap;
}
/* Every second spine leans a hair, so the row is not a bar chart. */
.spine:nth-child(3n) { transform: rotate(-1.1deg); }
.spine:nth-child(5n) { transform: rotate(.8deg); }
.spine:nth-child(3n):hover,
.spine:nth-child(5n):hover { transform: translateY(-.55rem); }

.shelf-plant {
  flex: none; width: 3.4rem; height: 6rem; align-self: flex-end;
  color: var(--accent); opacity: .85; margin-left: .5rem;
}
.shelf-board {
  height: .5rem; border-radius: 2px;
  background: linear-gradient(180deg, var(--hair-lit), var(--hair));
  box-shadow: 0 6px 14px -6px rgba(20,26,21,.4);
}

/* -- the readable list, which is the actual content ----------------- */
.books { list-style: none; padding: 0; margin: 0; counter-reset: book; }
.book {
  padding: 1.5rem 0; border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 1rem;
}
.book::before {
  counter-increment: book; content: counter(book, decimal-leading-zero);
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .1em; color: var(--faint);
  padding-top: .45rem;
}
.book-title, .book-author, .book-note, .book-link { grid-column: 2; }
.book-title {
  font-family: "Newsreader", Georgia, serif; font-weight: 400;
  font-size: 1.24rem; line-height: 1.25; margin: 0 0 .2rem;
  color: var(--ink-strong); border: 0; padding: 0;
}
.book-author {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0;
}
.book-note { margin: .7rem 0 0; color: var(--muted); font-size: 1rem; }
.book-link {
  margin: .5rem 0 0;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
}
.book-link a { color: var(--faint); border-bottom-color: transparent; }
.book-link a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* Jumping from a spine to its entry should be obvious for a moment. */
.book:target .book-title { color: var(--accent); }

@media (max-width: 44rem) {
  .shelf { height: 12.5rem; }
  .spine { width: calc(var(--w, 2.6rem) - .35rem); }
  .spine-title { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spine, .spine:hover { transition: none; }
}

/* -- the sign-off at the foot of a prose page ---------------------- */
.signoff {
  display:flex; align-items:center; gap:1.6rem;
  margin:3.4rem 0 0; padding-top:2.4rem; border-top:1px solid var(--hair);
}
/* Framed like a small print: a brass hairline to match the signature, and a
   narrow mat between it and the picture. */
.signoff-photo {
  flex:none; width:8.5rem; aspect-ratio:4/5; margin:0;
  box-sizing:border-box; padding:.3rem;
  background:var(--surface);
  border:1px solid var(--brass); border-radius:3px;
}
.signoff-photo img {
  display:block; width:100%; height:100%; border-radius:1px;
  object-fit:cover; object-position:center 22%;
  filter:brightness(.94);
}
.signoff-mark { min-width:0; }

/* The signature is a mask, so the ink is the page's colour rather than the
   file's. One transparent PNG serves light and dark. */
.signature {
  display:block; width:9rem; height:auto; margin:2.4rem 0 0;
  background-color:var(--brass);
  -webkit-mask-image:var(--sig); mask-image:var(--sig);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  -webkit-mask-size:contain; mask-size:contain;
}
.signoff-name {
  font-family:"Newsreader",Georgia,serif; font-size:1.05rem;
  color:var(--ink-strong); margin:0;
}
.signoff-role {
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:.3rem 0 0;
}
.placeholder {
  border:1px dashed var(--hair-lit); border-radius:3px; background:none;
  display:flex; align-items:center; justify-content:center;
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
@media (max-width:34rem) {
  .signoff { flex-direction:column; align-items:flex-start; gap:1.2rem; }
}

.pillar-soon {
  margin: .6rem 0 0;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}

/* -- a page that is written but not open yet ------------------------ */
.soon-page { text-align: center; }
.soon-page .lede { margin-left: auto; margin-right: auto; max-width: 30rem; }
.soon { padding: 2.6rem 0 1rem; }
.soon-mark { display: block; color: var(--accent); opacity: .9; }
.soon-mark svg { width: 3.2rem; height: 3.2rem; margin: 0 auto; }
.soon-note {
  margin: 1rem 0 0;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}

/* -- people, a short hall of introductions -------------------------- */
/* Each entry is a two column row: the emblem, then everything the person
   wrote. The emblem is ornament and carries aria-hidden, so nothing here
   depends on it rendering. */
.people { list-style: none; padding: 0; margin: 2.4rem 0 3rem; }
.person {
  padding: 1.7rem 0; border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1rem;
}
.person-emblem { color: var(--accent); padding-top: .3rem; }
.person-emblem svg { width: 1.5rem; height: 1.5rem; display: block; }
.person-name,
.person-words,
.person-question,
.person-links { grid-column: 2; }
.person-name {
  font-family: "Newsreader", Georgia, serif; font-weight: 400;
  font-size: 1.24rem; line-height: 1.25; margin: 0 0 .45rem;
  color: var(--ink-strong); border: 0; padding: 0;
}
.person-words { margin: 0; color: var(--ink); }
.person-question {
  margin: .85rem 0 0; color: var(--muted);
  font-family: "Newsreader", Georgia, serif; font-style: italic;
  font-size: 1.04rem; line-height: 1.5;
}
.person-label {
  display: block; margin-bottom: .2rem;
  font-family: "Plex Mono", ui-monospace, monospace; font-style: normal;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
.person-links {
  list-style: none; padding: 0; margin: .95rem 0 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.2rem;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
}
.person-links a { color: var(--faint); border-bottom-color: transparent; }
.person-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.invite-heading { margin-top: 3rem; }
.sheet-heading { margin-top: 2.4rem; }

/* The emblem set, laid out so someone can name the one they want. */
.emblem-sheet {
  list-style: none; padding: 1.4rem 0 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 1.3rem .6rem;
}
.emblem-sheet li {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  color: var(--accent);
}
.emblem-sheet svg { width: 1.7rem; height: 1.7rem; }
.emblem-sheet span {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 44rem) {
  .person { grid-template-columns: 2.1rem 1fr; gap: 0 .8rem; }
  .emblem-sheet { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); }
}

/* -- a footnote for machine readers ------------------------------- */
.machine-note {
  margin:2rem 0; padding-left:1.4rem;
  border-left:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.7rem; line-height:2; color:var(--muted);
}
.machine-note p { margin:0 0 .8rem; }
.machine-note p:last-child { margin-bottom:0; }
.machine-note a { color:var(--muted); border-bottom-color:var(--hair-lit); }
.machine-note a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.machine-note code { font-family:inherit; color:var(--muted); }

/* -- empty states, so a section with nothing in it still looks built - */
.empty {
  border:1px dashed var(--hair-lit); border-radius:4px; padding:2.8rem 1.8rem;
  text-align:center; color:var(--muted); font-size:.97rem; background:var(--surface);
}
.empty p:last-child { margin-bottom:0; }

/* -- search, an enhancement: hidden unless a script turns it on ----- */
.search { display:none; margin:0 0 1.8rem; }
.search.on { display:block; }
.search input {
  width:100%; max-width:22rem; font-family:"Newsreader",Georgia,serif;
  font-size:.97rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--hair-lit); border-radius:999px; padding:.6rem 1.1rem;
}
.search input::placeholder { color:var(--faint); }
.search-count {
  font-family:"Plex Mono",ui-monospace,monospace; font-size:.59rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:.8rem 0 0;
}
.card[hidden] { display:none; }

/* -- the contact card at the foot of the front page ------------------ */
/* A small card with a leaf seated on its top edge, the same mark the pillars
   use, so it reads as part of the page rather than a pop-up. */
.home-contact { max-width:33rem; margin:3rem auto 3.5rem; padding:0 1.5rem; }
.contact-card {
  position:relative; padding:2.1rem 1.8rem 1.3rem; text-align:center;
  font-size:.92rem; line-height:1.65;
  background:color-mix(in srgb,var(--surface) 55%,var(--ground));
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--hair));
  border-radius:14px;
}
.contact-mark {
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 10%,var(--ground));
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--hair));
  color:var(--accent);
}
.contact-mark svg { width:1.05rem; height:1.05rem; }
.contact-card .kicker { margin-bottom:.8rem; }
.contact-card p { margin-bottom:.75rem; }
.contact-card p:last-child { margin-bottom:0; }
.contact-card a { overflow-wrap:anywhere; }
@media (max-width:34rem) {
  .contact-card { padding:2.1rem 1.2rem 1.3rem; }
}

/* -- footer -------------------------------------------------------- */
.site-footer { border-top:1px solid var(--hair); margin-top:2rem; padding:3rem 0 4rem; }
.site-footer .inner {
  max-width:76rem; margin:0 auto; padding:0 1.5rem;
  display:flex; gap:2rem; justify-content:space-between; flex-wrap:wrap;
  font-family:"Plex Mono",ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.site-footer a { color:var(--faint); border-bottom-color:transparent; }
.site-footer a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.site-footer p { margin:0; }
.footer-links { display:flex; gap:1.4rem; flex-wrap:wrap; }

/* -- 404 ----------------------------------------------------------- */
.notfound { text-align:center; padding:7rem 0 6rem; }
.notfound h1 { font-size:clamp(1.8rem,4vw,2.5rem); margin:0 0 1rem; }

/* -- narrow -------------------------------------------------------- */
@media (max-width:60rem) {
  .hero-inner { padding:4.5rem 1.5rem 4rem; }
  .hero-copy { max-width:none; }
  /* The top-down scrim already covers full-width copy here. */
  .hero-copy::before { display:none; }
  /* Once the copy stops sitting in a left-hand column, a sideways scrim
     protects nothing. The shading has to come down from the top instead,
     and it has to change at the same width the layout changes. */
  .hero-media::after {
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--scrim) 86%,transparent) 0%,
      color-mix(in srgb,var(--scrim) 72%,transparent) 44%,
      color-mix(in srgb,var(--scrim) 48%,transparent) 76%,
      color-mix(in srgb,var(--scrim) 32%,transparent) 100%);
  }
  .pillars { grid-template-columns:repeat(2,1fr); row-gap:2.8rem; }
  .pillar:nth-child(odd) { border-left:0; }
  .nav-links { gap:1rem; }
  .nav-links a { font-size:.63rem; }
}
@media (max-width:44rem) {
  body { font-size:1.06rem; }
  .site-nav .inner { flex-wrap:wrap; gap:.8rem 1.1rem; padding:.8rem 1.2rem; }
  .brand { margin-right:0; width:100%; }
  .nav-links { order:3; width:100%; overflow-x:auto; padding-bottom:.2rem; }
  .pillars { grid-template-columns:1fr; }
  .pillar { border-left:0; padding:0; }
  .card-rows .card { flex-direction:column; }
  .card-rows .card-image { flex:none; max-width:none; width:100%; aspect-ratio:3/2;
    margin-bottom:1.1rem; }
  .card-rows .card-body { padding:0; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .card:hover { transform:none; }
  .card:hover .card-image img { transform:none; }
}