/* nellsayer.com — the design system. Paper, graphite, two pencils.
   The same voice as the Longhand books: Fraunces for titles, Spectral for
   text, JetBrains Mono for grids and labels — all OFL, all served from here.
   Light is the page; dark is the same desk at night. The token names the game
   page relies on (--ink, --text, --gold, --violet …) are defined here too, so
   longhand/ needs nothing from any other site. */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/assets/fonts/spectral-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/assets/fonts/spectral-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/assets/fonts/spectral-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat-var.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #F9F7F2;  --sheet: #FFFFFF;  --ink: #1B1A17;  --graphite: #6A665E;
  --rule: #DCD6CA;   --rule-soft: #ECE8DF;
  --red: #C9382C;    --red-deep: #7A2A22;  --blue: #2F5BC7;  --blue-soft: rgba(47, 91, 199, .18);
  --shadow: 0 1px 2px rgba(27, 26, 23, .05), 0 12px 36px rgba(27, 26, 23, .09);
  --shadow-lift: 0 2px 6px rgba(27, 26, 23, .08), 0 18px 50px rgba(27, 26, 23, .14);
  --radius: 8px; --radius-lg: 10px; --maxw: 1060px;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  /* the names the game page reads */
  --text: var(--ink); --text-mute: var(--graphite); --line: var(--rule);
  --text-inv: var(--paper); --text-inv-mute: #B8B3A8;
  --gold: var(--red); --gold-deep: var(--red-deep); --violet: var(--blue);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17181C; --sheet: #1F2126; --ink: #ECE8DF; --graphite: #A39F95; --rule: #33363D; --rule-soft: #272A30;
    --red: #E4574A; --red-deep: #B23A2E; --blue: #6F8FE8; --blue-soft: rgba(111, 143, 232, .22);
    --shadow: 0 12px 36px rgba(0, 0, 0, .4); --shadow-lift: 0 18px 50px rgba(0, 0, 0, .5); --text-inv: #17181C; --text-inv-mute: #5C5A55;
  }
}
:root[data-theme="dark"] {
  --paper: #17181C; --sheet: #1F2126; --ink: #ECE8DF; --graphite: #A39F95; --rule: #33363D; --rule-soft: #272A30;
  --red: #E4574A; --red-deep: #B23A2E; --blue: #6F8FE8; --blue-soft: rgba(111, 143, 232, .22);
  --shadow: 0 12px 36px rgba(0, 0, 0, .4); --shadow-lift: 0 18px 50px rgba(0, 0, 0, .5); --text-inv: #17181C; --text-inv-mute: #5C5A55;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p a, li a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .15em; }
p a:hover, li a:hover { text-decoration-color: var(--red); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; min-width: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: .5rem .8rem; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
h1, h2, h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 72; font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; color: var(--ink); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; }
h3 { font-size: 1.25rem; font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 28; }
.eyebrow { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite); margin: 0 0 .5rem; }
.lead { font-size: 1.15rem; color: var(--graphite); max-width: 52ch; margin: 1rem 0 1.4rem; }
.sub { color: var(--graphite); margin: .6rem 0 1.8rem; max-width: 62ch; }
.fine { font-size: .88rem; color: var(--graphite); }

/* header, footer */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.5rem; padding-top: 1.3rem; padding-bottom: 1rem; }
.brand { display: inline-flex; flex-direction: column; gap: .1rem; }
.brand-name { font-family: var(--font-display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 36; font-weight: 600; font-size: 1.45rem; letter-spacing: -.01em; color: var(--ink); }
.brand small { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); }
.nav { display: flex; gap: 1.6rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.nav a { padding: .25rem 0; border-bottom: 2px solid transparent; color: var(--ink); }
.nav a[aria-current] { border-bottom-color: var(--red); }
.site-footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 2rem 0 2.4rem; color: var(--graphite); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.footer-grid p { margin: .5rem 0 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.footer-grid ul a { text-decoration: none; }
.footer-grid ul a:hover { color: var(--red); }
.foot-h { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0 0 .6rem; font-variation-settings: normal; }
.fineprint { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); font-size: .82rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* sections and surfaces */
.section { padding: 3.2rem 0; border-top: 1px solid var(--rule); }
.section h2 { margin-top: .45rem; }
.hero { padding: 3rem 0 3.4rem; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; }
.featured { background: var(--sheet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 3rem 0; }
.strip { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem); }
.strip h2, .strip h3, .strip .eyebrow { color: inherit; }
.card-soon { display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); border: 1px solid var(--red); border-radius: 999px; padding: .25rem .6rem; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--graphite); }
.tag-mystery { border-color: var(--blue); color: var(--blue); }
.chip { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .55rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--graphite); white-space: nowrap; }
.chip.red { color: var(--red); border-color: var(--red); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .8rem 1.15rem; border-radius: 6px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); cursor: pointer; text-decoration: none; min-height: 44px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; }
.btn:hover { transform: translateY(-1px); }
.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* the pencil: a line through a word, an underline under another, drawn once */
.strike, .under { position: relative; display: inline-block; }
.strike svg { position: absolute; left: -3%; width: 106%; height: .32em; bottom: 36%; overflow: visible; pointer-events: none; }
.under svg { position: absolute; left: -2%; width: 104%; height: .35em; bottom: -.16em; overflow: visible; pointer-events: none; }
.strike svg path, .under svg path { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .55s cubic-bezier(.6, 0, .3, 1) .5s forwards; }
.strike svg path { stroke: var(--red); }
.under svg path { stroke: var(--blue); animation-delay: 1.05s; animation-duration: .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* the sheet with a board on it (home, method) */
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.1rem 1.1rem 1rem; min-width: 0; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .8rem; }
.sheet-head b { font-family: var(--font-display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-weight: 600; font-size: 1.05rem; }
.board-wrap { position: relative; }
.board { display: grid; grid-template-columns: repeat(15, 1fr); border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--sheet); }
.cell { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: clamp(.66rem, 1.5vw, .98rem); color: var(--ink); border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.cell.wt { box-shadow: inset 0 2px 0 var(--ink); }
.cell.wl { box-shadow: inset 2px 0 0 var(--ink); }
.cell.wt.wl { box-shadow: inset 0 2px 0 var(--ink), inset 2px 0 0 var(--ink); }
.trace { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); pointer-events: none; }
.trace .line { fill: none; stroke: var(--blue); stroke-opacity: .5; stroke-width: .5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s ease-out .9s forwards; }
.trace .ring { fill: none; stroke: var(--red); stroke-width: .11; }
.lens { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .55rem; margin: .9rem 0 .2rem; }
.lens i { display: inline-block; height: 1.15rem; border-bottom: 2px solid var(--rule); }
.lens b { display: inline-block; min-width: 1.1rem; padding: 0 .12rem; border-bottom: 2px solid var(--rule); font-family: var(--font-hand); font-weight: 600; font-size: 1.32rem; line-height: 1.05; color: var(--blue); text-align: center; }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .75rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.note { font-size: .92rem; color: var(--graphite); margin: 1.2rem 0 0; }

/* the four ways */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.ways > *, .method > *, .footer-grid > *, .hero-grid > *, .letter > * { min-width: 0; }
h1, h2, h3, p, li { overflow-wrap: break-word; }
.way { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.15rem 1.2rem 1.2rem; display: grid; grid-template-rows: auto 1fr auto; gap: .8rem; min-width: 0; }
.way header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.way p { margin: 0; color: var(--graphite); font-size: .98rem; }
.spec { border: 1px solid var(--rule-soft); border-radius: 8px; padding: .85rem .95rem; background: var(--paper); font-size: .93rem; overflow-x: auto; min-width: 0; }
.spec .eyebrow { margin-bottom: .45rem; font-size: .64rem; }
.stmt { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; }
.stmt b { font-family: var(--font-mono); font-weight: 400; font-size: .74rem; letter-spacing: .04em; color: var(--graphite); padding-top: .2rem; }
.stmt s { text-decoration-color: var(--red); text-decoration-thickness: 2px; color: var(--graphite); }
.tl { display: grid; grid-template-columns: auto repeat(3, minmax(4.2rem, 1fr)); gap: .3rem .45rem; font-family: var(--font-mono); font-size: .72rem; align-items: center; min-width: 20rem; }
.tl .h { color: var(--graphite); letter-spacing: .06em; }
.tl .n { font-family: var(--font-body); font-size: .9rem; }
.tl .r { border: 1px solid var(--rule); border-radius: 4px; padding: .25rem .35rem; text-align: center; color: var(--graphite); }
.tl .r.ok { color: var(--ink); border-color: var(--ink); }
.tl .r.x { color: var(--red); border-color: var(--red); text-decoration: line-through; }
.mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-family: var(--font-mono); font-weight: 700; font-size: .78rem; text-align: center; }
.mini span { padding: .22rem 0; border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--sheet); }
.mini span.on { background: var(--blue-soft); color: var(--ink); }
.five { display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: 1.05rem; align-items: baseline; }
.five span:nth-child(1) { font-family: var(--font-display); font-weight: 700; }
.five span:nth-child(2) { font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; }
.five span:nth-child(3) { font-family: var(--font-body); font-style: italic; }
.five span:nth-child(4) { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 9; font-weight: 400; }
.five span:nth-child(5) { font-family: var(--font-mono); text-transform: uppercase; font-size: .9rem; }
.five s { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.play { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.play::after { content: " →"; }

/* the shelf */
.shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.book { aspect-ratio: 2 / 3; border: 1px solid var(--rule); border-radius: 4px 8px 8px 4px; background: var(--sheet); padding: .9rem .8rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); position: relative; min-width: 0; text-decoration: none; }
.book::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.book .t { font-family: var(--font-display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 20; font-weight: 600; font-size: .98rem; line-height: 1.15; color: var(--ink); }
.book .s { font-size: .8rem; color: var(--graphite); margin-top: .35rem; line-height: 1.3; }
.book .a { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.book .st { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-top: .35rem; }
/* Grid children default to min-width:auto, so one long title (WHODUNWHEN?)
   pushed its track wider than the column and ran into the next one. Every grid
   child here is allowed to be narrower than its longest word, and the words
   that cannot fit break instead of overflowing. */
.books-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2rem; }
.books-list article { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.1rem; align-items: start; min-width: 0; }
.books-list article > * { min-width: 0; }
.books-list h3, .books-list p, .book .t { overflow-wrap: anywhere; }
.books-list .book { aspect-ratio: 2 / 3; padding: .6rem .5rem; }
/* Small enough that the longest title on the shelf (WHODUNWHEN?) sits on one
   line of the stand-in cover instead of breaking across two. */
.books-list .book .t { font-size: .66rem; line-height: 1.2; }
.books-list .book .s, .books-list .book .st { display: none; }
.books-list p { margin: .3rem 0 0; color: var(--graphite); font-size: .98rem; }

/* method */
.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.2rem; margin-top: 1.6rem; }
.method h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.method p { margin: 0; color: var(--graphite); font-size: .98rem; }
.method .n { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; color: var(--red); margin-bottom: .4rem; }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 1rem; }
.prose h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.prose dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.prose dt { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); padding-top: .2rem; }
.prose dd { margin: 0; }

/* the letter */
.letter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.6rem 1.7rem; }
.letter p { margin: .35rem 0 0; color: var(--graphite); }

@media (max-width: 860px) {
  .hero-grid, .ways, .method, .letter, .books-list { grid-template-columns: 1fr; }
  .hero-grid { gap: 2rem; }
  .hero-grid .copy { order: -1; }
  .shelf { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav a.nav-hide-sm { display: none; }
}
@media (max-width: 520px) {
  .shelf { grid-template-columns: repeat(2, 1fr); }
  .book .t { font-size: .9rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .strike svg path, .under svg path, .trace .line { animation: none; stroke-dashoffset: 0; }
  .btn:hover { transform: none; }
  html { scroll-behavior: auto; }
}