/* ========================================================================
   The Note Wall — v2 stylesheet
   Palette: Sage & Clay on a light paper ground. Deep sage is ink, never
   a surface — there are no dark bands anywhere on the site.
   Type: Bricolage Grotesque (wordmark ONLY) + Newsreader (headings, notes,
   long-form) + IBM Plex Mono (dates, labels, counts, tabs).
   The wall: 3-up, natural heights, notes pinned crooked and moving in wind,
   with a book-tab index along the top edge of the board.
   ======================================================================== */

:root {
  /* --- Sage & Clay --- */
  --sage:        #24312A;   /* deepest tone — headings, logo, body ink */
  --sage-2:      #3A4C41;   /* secondary headings, hovers */
  --board:       #DCD6C6;   /* light oat — UI surfaces, not the wall */

  /* --- cork: the wall itself --- */
  --cork:        #CDAC77;
  --cork-edge:   #9A7A4C;
  /* --sage on cork is 5.6:1, so wall-level text uses it directly */
  --paper:       #F4F1E8;   /* page ground AND note paper */
  --paper-lift:  #FBF9F3;   /* raised surfaces, inputs, tabs */
  --ink:         #1E2621;   /* body text */
  --ink-2:       #3B463F;   /* note body after the bold opener */
  --ink-soft:    #5C6860;   /* meta, dates, captions */
  --clay:        #B4643F;   /* accent — large only */
  --clay-ink:    #9A5232;   /* accent — small text, links (AA on paper) */

  /* --- theme pins --- */
  --t-healing:    #5E8266;
  --t-thriving:   #C08A2E;
  --t-grief:      #5D7A91;
  --t-boundaries: #856388;
  --t-anger:      #A8483A;
  --t-heard:      #8A8578;

  /* --- type ---
     Bricolage is the LOGOTYPE only. At headline size its wonky details read
     playful — wrong for what this site is about — so every heading you
     actually read is set in the serif instead. */
  --f-logo:    "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rule:      rgba(36, 49, 42, .16);
  --rule-soft: rgba(36, 49, 42, .11);
  --shadow:    0 1px 2px rgba(30, 38, 33, .06), 0 10px 28px -14px rgba(30, 38, 33, .3);
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--clay-ink); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--sage); color: var(--paper); padding: .6rem 1rem;
  font-family: var(--f-mono); font-size: .82rem; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; top: 0; }

/* ============================================================
   WORDMARK — set in Bricolage, not an image. Killing the PNG
   also kills the pink washi tape, the only pink on the site.
   ============================================================ */
.brand { display: inline-flex; text-decoration: none; color: var(--sage); }
.wordmark {
  font-family: var(--f-logo); line-height: .92;
  display: inline-flex; flex-direction: column;
  letter-spacing: -.03em; font-weight: 600;
}
.wordmark .the {
  font-family: var(--f-mono); font-weight: 500;
  font-size: .3em; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .5em; padding-left: .16em;
}
/* colour set here, not on .brand — the footer wordmark is not a link */
.wordmark .nw { font-size: 1em; font-variation-settings: "opsz" 40; color: var(--sage); }
.brand:hover .nw { color: var(--sage-2); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.head-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: .9rem clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 1rem;
}
.head-inner .wordmark { font-size: 1.5rem; }

.head-nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.head-nav .navlink {
  background: transparent; border: 0; cursor: pointer; color: var(--ink-soft);
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .01em;
  padding: .5rem .7rem; border-radius: 3px; text-decoration: none;
  transition: color .13s, background .13s;
}
.head-nav .navlink:hover { color: var(--ink); background: rgba(36, 49, 42, .05); }

.lang-switch {
  display: inline-flex; border: 1px solid var(--rule); border-radius: 3px;
  overflow: hidden; margin: 0 .45rem;
}
.lang-switch button {
  padding: .3rem .58rem; border: 0; background: transparent; cursor: pointer;
  font: 500 .74rem var(--f-mono); letter-spacing: .06em; color: var(--ink-soft);
  transition: background .13s, color .13s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--sage); color: var(--paper); }

.btn-write {
  font: 500 .8rem var(--f-mono); letter-spacing: .02em;
  background: var(--sage); color: var(--paper); border: 0; border-radius: 3px;
  padding: .55rem 1rem; cursor: pointer; margin-left: .4rem;
  transition: background .13s;
}
.btn-write:hover { background: var(--sage-2); }

.only-sm { display: none; }
.navmenu-btn {
  background: transparent; border: 0; cursor: pointer; padding: .4rem;
  border-radius: 3px; margin-left: .25rem; line-height: 0;
}
.navmenu-btn:hover { background: rgba(36, 49, 42, .05); }
.menu-drop {
  position: absolute; top: calc(100% + .4rem); right: 1rem; z-index: 60;
  display: flex; flex-direction: column; min-width: 180px;
  background: var(--paper-lift); border: 1px solid var(--rule);
  border-radius: 4px; box-shadow: var(--shadow); padding: .4rem;
}
.menu-drop[hidden] { display: none; }
.menu-drop .navlink { text-align: left; padding: .6rem .7rem; }
.menu-drop .menu-lang { align-self: flex-start; margin: .2rem .3rem .5rem; }

/* ============================================================
   HERO — ~65vh so the first row of notes shows above the fold
   ============================================================ */
/* The fold IS the wall. Rather than a centred text block above a board,
   the opening statement is itself a sheet of paper pinned to the cork —
   which is what the whole site is. Everything below is the same surface. */
.hero {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.4rem) clamp(1rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; align-items: center;
}

.hero-note {
  position: relative;
  --pc: var(--clay);
  background: var(--paper);
  max-width: 660px; width: 100%;
  padding: clamp(2.4rem, 4.5vw, 3.4rem) clamp(1.6rem, 4vw, 3rem) clamp(2rem, 3.6vw, 2.6rem);
  border-radius: 2px;
  transform: rotate(-.55deg);
  box-shadow: 0 1px 1px rgba(52, 34, 12, .18),
              0 16px 34px -14px rgba(52, 34, 12, .5);
  text-align: center;
}
.hero-note .tape {
  width: 128px; height: 26px; top: -12px;
  transform: translateX(-50%) rotate(-1.6deg);
  background: color-mix(in srgb, var(--clay) 48%, transparent);
}

.hero h1 {
  /* 500, not 600 — the lighter serif reads quiet and literary rather than
     shouty, which is the register this subject needs */
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12;
  letter-spacing: -.012em; margin: 0 0 1rem; color: var(--sage);
  text-wrap: balance; font-variation-settings: "opsz" 72;
}
.hero-note p {
  font-size: clamp(.98rem, 1.5vw, 1.06rem); line-height: 1.62;
  color: var(--ink-2); max-width: 48ch; margin: 0 auto 1.7rem;
}
.hero .enter {
  font: 600 .82rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--sage); color: var(--paper); border: 0; cursor: pointer;
  padding: .85rem 1.9rem; border-radius: 3px;
  transition: background .14s, transform .14s;
}
.hero .enter::after { content: "  ↓"; opacity: .6; }
.hero .enter:hover { background: var(--sage-2); transform: translateY(-1px); }
.hero .enter:active { transform: translateY(0); }

/* sits on the cork, not on paper — sage clears AA on cork at 5.6:1 */
.hero .gate-note {
  /* small text over a busy texture needs more weight than it would on paper */
  font-family: var(--f-mono); font-size: .76rem; font-weight: 600; line-height: 1.65;
  color: var(--sage); margin: 1.9rem auto 0; max-width: 50ch;
  text-align: center;
}

/* ============================================================
   THE CORK WALL — one continuous surface carrying the intro
   sheet, the index tabs and every note. Four turbulence layers:
   coarse blotches, posterised granules (the `discrete` alpha
   transfer is what gives cork its chunky grain instead of flat
   noise), fine speckle, and a screen pass for the pale flecks.
   ============================================================ */
.cork {
  position: relative;
  background-color: var(--cork);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0.45 0.85'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0.12 0.26 0.44 0.2 0.03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-blend-mode: screen, multiply, multiply, multiply;
  border-top: 1px solid var(--cork-edge);
  border-bottom: 1px solid var(--cork-edge);
  box-shadow: inset 0 16px 32px -20px rgba(52, 34, 12, .8),
              inset 0 -16px 32px -22px rgba(52, 34, 12, .65);
}

.board-shell {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1rem, 3vw, 2rem) clamp(2.2rem, 4.5vw, 3.4rem);
}

/* --- FILTERS: each theme is a little stack of notes held by a paperclip.
   The count is literally how many notes are in that stack, so the number
   stops being decoration. Two rotated sheets sit behind the face sheet;
   the clip is a real SVG wire that hooks over the top edge.
   Readability rule from the tabs still applies: every label is 14px / 600
   in near-black. Active state is carried by lift, tint and shadow — never
   by fading the inactive labels. --- */
.tab-index {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem 1.1rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: .7rem clamp(1rem, 3vw, 2rem) 1.5rem;
}
.tab-index .ti-label {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sage);
  margin-right: .3rem;
}

.stack {
  position: relative; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit;
  transition: transform .16s ease;
}
.stack .sheet {
  position: absolute; inset: 0;
  background: var(--paper); border-radius: 2px;
  border: 1px solid rgba(52, 34, 12, .14);
  box-shadow: 0 1px 2px rgba(52, 34, 12, .32);
}
.stack .s2 { transform: rotate(-3.2deg) translate(-4px, 3.5px); }
.stack .s1 { transform: rotate(2.2deg)  translate(4px, 2px); }

.stack .face {
  position: relative; display: inline-flex; align-items: baseline; gap: .55rem;
  background: color-mix(in srgb, var(--tc) 20%, var(--paper-lift));
  border-radius: 2px;
  padding: .62rem 1rem .58rem 2.25rem;  /* left room for the clip */
  box-shadow: 0 2px 5px -1px rgba(52, 34, 12, .34);
  font-family: var(--f-mono); font-size: .875rem; font-weight: 600;
  color: var(--ink); white-space: nowrap;
  transition: background .16s;
}
.stack .count {
  font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* the paperclip: hooks over the top edge, metal — not the theme colour */
.stack .clip {
  position: absolute; left: 8px; top: -13px;
  width: 19px; height: 42px; color: #8A8478;
  filter: drop-shadow(0 1px 1px rgba(52, 34, 12, .45));
  pointer-events: none;
}

.stack:hover { transform: translateY(-2px); }
.stack:hover .face { background: color-mix(in srgb, var(--tc) 30%, var(--paper-lift)); }
.stack[aria-pressed="true"] { transform: translateY(-3px); }
.stack[aria-pressed="true"] .face {
  background: color-mix(in srgb, var(--tc) 42%, var(--paper-lift));
  box-shadow: 0 5px 12px -3px rgba(52, 34, 12, .5);
}
.stack[aria-pressed="true"] .clip { color: #6E6759; }
.stack:focus-visible { outline: none; }
.stack:focus-visible .face { outline: 2px solid var(--sage); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .stack, .stack .face { transition: none; }
}

/* --- the wall: 3-up, natural heights, hand-pinned ---
   align-items:start is what makes it non-uniform: rows line up at the top
   (so reading order stays left-to-right) but every note keeps its own
   height. Generous gaps because a rotated card overhangs its layout box. */
.wall { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.6rem; align-items: start; }

/* Each note carries its own persistent --rot, set per note in app.js, and
   the sway is layered on top of it with calc() so the two never fight.
   Pivot is the tape at the top, not the card centre. */
.hang { display: flex; transform-origin: 50% 0; will-change: transform;
  --rot: 0deg; transform: rotate(var(--rot)); }

.wall.wind .hang { animation: sway 4s ease-in-out infinite; }
.wall.wind .hang:hover { animation-play-state: paused; }
@keyframes sway {
  0%, 100% { transform: rotate(var(--rot)) translateY(0); }
  25% { transform: rotate(calc(var(--rot) + .5deg)) translateY(-1px); }
  75% { transform: rotate(calc(var(--rot) - .5deg)) translateY(.5px); }
}
@media (prefers-reduced-motion: reduce) {
  /* keep the crooked pinning, drop the motion */
  .wall.wind .hang { animation: none !important; }
}

/* --- a note --- */
.note {
  position: relative; width: 100%;
  background: var(--paper); color: var(--ink);
  padding: 1.55rem 1.3rem 1.05rem; border-radius: 2px;
  box-shadow: 0 1px 1px rgba(30, 38, 33, .1), 0 8px 18px -8px rgba(30, 38, 33, .32);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: settle .4s ease both;
}
.note:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 2px 3px rgba(30, 38, 33, .12), 0 18px 32px -12px rgba(30, 38, 33, .42);
}
.hang:hover { z-index: 4; }
@keyframes settle { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .note { animation: none; } }

/* faint theme wash; --pc drives the tape and the meta dot */
.note.t-healing    { background: linear-gradient(178deg,#EEF3ED,var(--paper) 52%); --pc: var(--t-healing); }
.note.t-thriving   { background: linear-gradient(178deg,#F8F1DF,var(--paper) 52%); --pc: var(--t-thriving); }
.note.t-grief      { background: linear-gradient(178deg,#ECF0F3,var(--paper) 52%); --pc: var(--t-grief); }
.note.t-boundaries { background: linear-gradient(178deg,#F3EDF3,var(--paper) 52%); --pc: var(--t-boundaries); }
.note.t-anger      { background: linear-gradient(178deg,#F7ECE9,var(--paper) 52%); --pc: var(--t-anger); }
.note.t-heard      { background: linear-gradient(178deg,#F3F2EC,var(--paper) 52%); --pc: var(--t-heard); }

/* fastening — deliberately irregular. A wall where every note is taped
   identically reads as a template, so widths, angles and type all vary,
   and some notes carry a pin or nothing at all. */
.tape {
  position: absolute; top: -8px; left: 50%; z-index: 3;
  height: 20px; border-radius: 1px;
  background: color-mix(in srgb, var(--pc) 40%, transparent);
  box-shadow: 0 1px 2px rgba(30, 38, 33, .16);
}
.tape::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(178deg, rgba(255,255,255,.3), transparent 42%, rgba(0,0,0,.055));
}
.tp-1 .tape { width: 76px; transform: translateX(-50%) rotate(-2.4deg); }
.tp-2 .tape { width: 58px; transform: translateX(-64%) rotate(3.4deg); }
.tp-3 .tape { width: 92px; height: 17px; transform: translateX(-42%) rotate(-4.2deg); }
.tp-4 .tape { width: 64px; height: 23px; transform: translateX(-52%) rotate(1.6deg); }
.pin {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 14px; height: 14px; border-radius: 50%; background: var(--pc);
  box-shadow: 0 2px 3px rgba(30, 38, 33, .34),
              inset -2px -2px 3px rgba(0, 0, 0, .16),
              inset 2px 2px 3px rgba(255, 255, 255, .34);
}

/* Notes run at their natural length — that is what makes the wall uneven.
   The clamp is only a safety valve for a 600-character submission, which
   would otherwise tower over everything around it. No seed note hits it. */
.note-text {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.6;
  color: var(--ink); margin: 0 0 .95rem; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 14; -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-text.is-open { display: block; overflow: visible; }
.note-text .lead { font-weight: 600; }
.note-text .rest { color: var(--ink-2); }
.note-more {
  align-self: flex-start; background: none; border: 0; padding: 0;
  margin: -.35rem 0 .9rem; cursor: pointer;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--clay-ink); text-decoration: underline; text-underline-offset: 3px;
}
.note-more:hover { color: var(--ink); }

.note-meta {
  margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: .6rem;
  border-top: 1px solid var(--rule); padding-top: .6rem;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .05em;
  color: var(--ink-soft);
}
.note-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.note-theme { display: inline-flex; align-items: center; gap: .42rem; white-space: nowrap; }
.note-theme .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: none; }

.count-line {
  max-width: var(--maxw); margin: 0 auto; text-align: right;
  padding: .9rem clamp(1rem, 3vw, 2rem) 0;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
}
.count-line span { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 3rem 1rem;
  font-family: var(--f-body); font-size: 1.05rem; color: var(--ink-2); font-style: italic;
}

/* pager (phones only — one column gets long otherwise) */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.4rem 1rem .2rem; }
.pager[hidden] { display: none; }
.pager-btn {
  font: 500 .74rem var(--f-mono); letter-spacing: .04em; color: var(--ink-soft);
  background: var(--paper-lift); border: 1px solid var(--rule); border-radius: 3px;
  padding: .48rem 1.1rem; cursor: pointer; transition: color .13s, background .13s;
}
.pager-btn:hover:not(:disabled) { color: var(--ink); background: var(--board); }
.pager-btn:disabled { opacity: .35; cursor: default; }
.pager-ind { font: 500 .74rem var(--f-mono); color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-back {
  position: fixed; inset: 0; background: rgba(30, 38, 33, .5);
  backdrop-filter: blur(3px); display: none;
  align-items: flex-start; justify-content: center; z-index: 130;
  padding: 4vh 1rem; overflow-y: auto;
}
.modal-back.open { display: flex; }
.modal {
  background: var(--paper-lift); color: var(--ink); border-radius: 4px;
  max-width: 580px; width: 100%; padding: 1.8rem 1.7rem;
  box-shadow: 0 24px 60px rgba(30, 38, 33, .35);
  animation: settle .3s ease both; position: relative;
}
.modal h2 {
  font-family: var(--f-display); font-weight: 600; font-size: 1.75rem;
  letter-spacing: -.012em; line-height: 1.1; margin: .1rem 0 .6rem; color: var(--sage);
}
.modal p.sub { color: var(--ink-soft); margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.58; }
.modal label {
  display: block; font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  margin: 1.1rem 0 .4rem;
}
.modal textarea, .modal input[type=text] {
  width: 100%; font-family: var(--f-body); font-size: 1rem;
  padding: .7rem .8rem; border: 1px solid var(--rule); border-radius: 3px;
  background: #fff; color: var(--ink); resize: vertical;
}

/* the writing surface = a page from a real notebook */
#note-textarea {
  --rule-h: 1.8em;
  font-size: 1.02rem; line-height: var(--rule-h); color: var(--ink);
  min-height: calc(var(--rule-h) * 5); padding: .55em .9em .55em 3rem;
  border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: inset 0 1px 4px rgba(30, 38, 33, .07);
  background-color: #FFFDF7;
  background-image:
    linear-gradient(90deg, transparent 2.3rem, rgba(180,100,63,.3) 2.3rem,
      rgba(180,100,63,.3) calc(2.3rem + 1.5px), transparent calc(2.3rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--rule-h) - 1px),
      rgba(36,49,42,.14) calc(var(--rule-h) - 1px), rgba(36,49,42,.14) var(--rule-h));
  background-attachment: local, local;
  background-position: 0 .55em, 0 .55em;
  background-repeat: no-repeat, repeat;
}
#note-textarea::placeholder { color: #A79E8E; font-style: italic; }
#note-textarea:focus {
  outline: none; border-color: var(--sage-2);
  box-shadow: inset 0 1px 4px rgba(30,38,33,.07), 0 0 0 3px rgba(58, 76, 65, .16);
}

/* theme picker — square swatches, matching the book tabs */
.theme-picker { display: flex; flex-wrap: wrap; gap: .45rem; }
label.theme-opt {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; padding: .42rem .75rem;
  font-family: var(--f-mono); font-size: .72rem; color: var(--ink-soft);
  background: var(--paper); transition: border-color .13s, color .13s, background .13s;
  /* these are labels but not field labels — undo the .modal label caps */
  text-transform: none; letter-spacing: .01em; margin: 0;
}
label.theme-opt:hover { color: var(--ink); }
.theme-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-opt .sq { width: 11px; height: 11px; border-radius: 1px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(30, 38, 33, .16); }
.theme-opt:has(input:checked) {
  border-color: var(--sage); color: var(--ink); background: var(--paper-lift);
  box-shadow: 0 0 0 1px var(--sage);
}
.theme-opt:has(input:focus-visible) { outline: 2px solid var(--clay-ink); outline-offset: 2px; }

.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; }
.btn {
  border: 0; border-radius: 3px; padding: .62rem 1.2rem; cursor: pointer;
  font: 500 .8rem var(--f-mono); letter-spacing: .02em;
}
.btn-primary { background: var(--sage); color: var(--paper); }
.btn-primary:hover { background: var(--sage-2); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); }
.modal-close {
  position: absolute; top: .6rem; right: .8rem; background: none; border: 0;
  font-size: 1.5rem; cursor: pointer; color: var(--ink-soft); line-height: 1;
  padding: .2rem .4rem; border-radius: 3px;
}
.modal-close:hover { color: var(--ink); background: rgba(36, 49, 42, .06); }
.hint { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-soft);
  margin-top: .4rem; line-height: 1.5; }
.charcount { float: right; font-family: var(--f-mono); font-size: .68rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.thanks { text-align: center; padding: 1.5rem .5rem; }
.thanks .big { font-size: 2.2rem; }

/* note pop-up */
.note-modal { background: var(--paper); }
#note-modal-body { position: relative; padding-top: .8rem; }
#note-modal-body .tape { top: -1.8rem; width: 76px; transform: translateX(-50%) rotate(-2.4deg); }
.modal-note-text {
  font-family: var(--f-body); font-size: 1.1rem; line-height: 1.7;
  color: var(--ink); margin: .5rem 0 1.1rem; word-break: break-word;
}
.modal-note-text .lead { font-weight: 600; }
.modal-note-text .rest { color: var(--ink-2); }
#note-modal-body .note-meta { font-size: .68rem; }

/* prose (about / rules) */
.prose { max-width: 640px; }
.prose h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -.01em; margin: 1.4rem 0 .35rem; color: var(--sage); }
.prose p { line-height: 1.66; margin: .3rem 0 .75rem; }
.prose ul { padding-left: 1.1rem; line-height: 1.62; margin: .3rem 0 .75rem; }
.prose li { margin: .35rem 0; }

/* ============================================================
   SUBPAGE SHELL — Resources / FAQ / Contact
   ============================================================ */
.sp-hero {
  background: var(--paper); color: var(--ink);
  padding: clamp(2.6rem, 6vw, 4.2rem) clamp(1rem, 3vw, 2rem) clamp(1.8rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule-soft);
}
.sp-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.sp-eyebrow {
  font-family: var(--f-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .9rem;
}
.sp-hero h1 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.03; letter-spacing: -.012em;
  margin: 0 0 1rem; color: var(--sage); text-wrap: balance;
  font-variation-settings: "opsz" 72;
}
.sp-intro { font-size: clamp(1.02rem, 1.8vw, 1.16rem); line-height: 1.62;
  max-width: 52ch; color: var(--ink-2); margin: 0; }

.sp-main { background: var(--paper); }
.sp-wrap { max-width: 840px; margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1rem, 3vw, 2rem) 2.4rem; }
.sp-wrap.wide { max-width: var(--maxw); }

.sp-back { margin: 2rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.sp-back a { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--clay-ink); text-decoration: none; }
.sp-back a::before { content: "← "; }
.sp-back a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-back { margin: 2rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.page-back a { font-family: var(--f-mono); font-size: .76rem; color: var(--clay-ink);
  text-decoration: none; }
.page-back a::before { content: "← "; }
.page-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* standalone content page */
.page { padding: clamp(2.4rem, 5vw, 3.6rem) 1.2rem 4rem; display: flex; justify-content: center; }
.page-inner { max-width: 720px; width: 100%; }
.page-eyebrow { font-family: var(--f-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .8rem; }
.page-inner h1 { font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 2.6rem); letter-spacing: -.012em;
  color: var(--sage); margin: 0 0 1.4rem; line-height: 1.06; }

/* ============================================================
   RESOURCES
   ============================================================ */
.res-h { font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.8vw, 1.7rem); letter-spacing: -.01em;
  color: var(--sage); margin: 2.8rem 0 1.4rem; }
.res-h:first-child { margin-top: .3rem; }

.rc-grid { display: grid; gap: 2.1rem 1.7rem; }
.rc-grid-book { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.rc-grid-podcast, .rc-grid-support { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.rc-card { display: flex; flex-direction: column; }
.rc-thumb { display: block; border-radius: 3px; overflow: hidden;
  box-shadow: 0 10px 24px -12px rgba(30, 38, 33, .4);
  transition: transform .18s ease, box-shadow .18s ease; }
.rc-thumb:hover { transform: translateY(-4px);
  box-shadow: 0 18px 34px -14px rgba(30, 38, 33, .5); }
.rc-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-book .rc-thumb { aspect-ratio: 2 / 3; }
.rc-podcast .rc-thumb { aspect-ratio: 1 / 1; }
.rc-support .rc-thumb { aspect-ratio: 3 / 2; background: #fff; }
.rc-support .rc-img { object-fit: contain; padding: 1.5rem; }
.rc-img-fallback {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 1rem; text-align: center; background: var(--board);
  color: var(--sage); font-family: var(--f-display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.01em;
}

.rc-body { padding: .9rem .1rem 0; }
.rc-title { margin: 0; font-family: var(--f-display); font-weight: 600;
  font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; }
.rc-title a { color: var(--sage); text-decoration: none; }
.rc-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.rc-by { display: block; font-family: var(--f-mono); font-size: .68rem;
  color: var(--ink-soft); margin-top: .3rem; }
.rc-desc { margin: .5rem 0 .55rem; line-height: 1.56; color: var(--ink-2); font-size: .94rem; }
.rc-link { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em;
  color: var(--clay-ink); text-decoration: none; }
.rc-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.res-note { margin: 2.4rem 0 0; font-size: .93rem; color: var(--ink-soft);
  font-style: italic; line-height: 1.6; max-width: 60ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-intro { font-size: 1.1rem; line-height: 1.7; color: var(--ink-2);
  max-width: 60ch; margin: 0 0 1.9rem; }
.contact-card {
  display: inline-flex; flex-direction: column; gap: .35rem;
  background: var(--sage); color: var(--paper); text-decoration: none;
  border-radius: 4px; padding: 1.4rem 1.7rem;
  box-shadow: 0 12px 26px -14px rgba(30, 38, 33, .5);
  transition: transform .16s ease, background .16s;
}
.contact-card:hover { transform: translateY(-2px); background: var(--sage-2); }
.contact-card-label { font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase; opacity: .72; }
.contact-card-email { font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem); letter-spacing: -.012em; word-break: break-all; }
.contact-h { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem;
  letter-spacing: -.01em; color: var(--sage); margin: 2.6rem 0 .8rem; }
.contact-reasons { list-style: none; padding: 0; margin: 0; }
.contact-reasons li { position: relative; padding: .55rem 0 .55rem 1.5rem;
  line-height: 1.56; color: var(--ink-2); border-bottom: 1px solid var(--rule-soft); }
.contact-reasons li:last-child { border-bottom: 0; }
.contact-reasons li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem;
  width: 7px; height: 7px; border-radius: 1px; background: var(--clay); }
.contact-note { margin: 1.9rem 0 0; color: var(--ink-soft); line-height: 1.62;
  font-size: .95rem; max-width: 60ch; }
.contact-safety { margin: 1.3rem 0 0; padding: 1rem 1.15rem; background: var(--board);
  border-left: 3px solid var(--clay); border-radius: 0 3px 3px 0;
  color: var(--ink); line-height: 1.62; font-size: .93rem; max-width: 60ch; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-accordion { margin-top: .5rem; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-q {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.08rem;
  letter-spacing: -.01em; color: var(--sage); padding: 1.1rem .2rem;
  transition: color .13s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--clay-ink); }
.faq-chevron { flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .2s ease;
  margin-right: .3rem; margin-top: -4px; }
.faq-item[open] .faq-chevron { transform: rotate(-135deg); margin-top: 2px; }
.faq-a { padding: 0 .2rem 1.2rem; animation: settle .2s ease both; }
.faq-a p { margin: 0; line-height: 1.7; color: var(--ink-2); font-size: 1rem; }
.faq-a strong { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .faq-a { animation: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  background: var(--paper); color: var(--ink); margin-top: 3rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) 2.6rem;
  border-top: 1px solid var(--rule);
}
.foot-inner { max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: 1.3fr 1fr; gap: 2.6rem; }
.help-block h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -.01em; color: var(--sage); margin: 0 0 .4rem; }
.help-block .help-intro { font-size: .92rem; color: var(--ink-soft);
  margin: 0 0 .9rem; line-height: 1.58; max-width: 46ch; }
.help-lines { list-style: none; padding: 0; margin: 0; }
.help-lines li { padding: .55rem 0; border-bottom: 1px solid var(--rule-soft);
  font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.help-lines li:last-child { border-bottom: 0; }
.help-lines strong { color: var(--ink); font-weight: 600; }

.foot-side { display: flex; flex-direction: column; gap: 1rem; }
.foot-side .wordmark { font-size: 1.6rem; }
.foot-tagline { font-family: var(--f-body); font-style: italic; font-size: .95rem;
  line-height: 1.5; color: var(--ink-soft); max-width: 28ch; margin: -.2rem 0 0; }
.foot-nav { display: flex; flex-direction: column; gap: .45rem; }
.foot-nav a { cursor: pointer; font-family: var(--f-mono); font-size: .76rem;
  color: var(--ink-soft); width: fit-content; text-decoration: none; transition: color .13s; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-fine { max-width: var(--maxw); margin: 2.2rem auto 0;
  font-family: var(--f-mono); font-size: .68rem; line-height: 1.6; color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft); padding-top: 1.3rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .tab-index { gap: 1.05rem .75rem; }
  .stack .face { font-size: .8rem; padding: .54rem .8rem .5rem 2.1rem; }
  .foot-inner { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wall { grid-template-columns: 1fr; gap: 1.5rem; }
  .head-inner { gap: .4rem; padding: .7rem 1rem; }
  .head-inner .wordmark { font-size: 1.2rem; }
  .head-nav { gap: .3rem; }
  .head-nav .navlink.hide-sm { display: none; }
  .head-lang { display: none; }
  .only-sm { display: inline-flex; }
  .btn-write { font-size: .72rem; padding: .48rem .8rem; margin-left: 0; }
  .modal { padding: 1.5rem 1.2rem; }
}