/* The journal: a parchment sheet laid on oxblood, set like the Adventurer's Journal that came in the box.
   The one ornament is the game's own screen border, the twisted red rope with gold corner studs. */

@font-face { font-family: 'IM Fell English'; src: url('/assets/fonts/im-fell-english-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('/assets/fonts/im-fell-english-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url('/assets/fonts/im-fell-english-sc-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('/assets/fonts/crimson-pro-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('/assets/fonts/crimson-pro-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('/assets/fonts/crimson-pro-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('/assets/fonts/crimson-pro-latin-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('/assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ox: #3C0B0F;
  --ox-deep: #250608;
  --ox-glow: #5A151B;
  --par: #F2E8D4;
  --par-2: #E9DCC1;
  --par-3: #DCC9A5;
  --print: #FBF6EA;
  --ink: #2B1B14;
  --ink-2: #5E4A3A;
  --rule: rgba(43, 27, 20, 0.28);
  --rule-soft: rgba(43, 27, 20, 0.16);
  --red: #A62D25;
  --rope-light: #E25B4C;
  --rope: #C2372C;
  --rope-dark: #6B110F;
  --gold: #D8A443;
  --gold-deep: #8A5B14;
  --green: #2F6B5A;
  --on-ox: #F1E3CB;
  --on-ox-muted: #CDB497;
  --code-bg: #1B0E0B;
  --code-text: #EEDFC6;

  --rope-stripes: repeating-linear-gradient(120deg, var(--rope-light) 0 4px, var(--rope) 4px 8px, var(--rope-dark) 8px 10px);
  --stud: linear-gradient(135deg, #F7D27A, #C38A2B 55%, #8A5B14);
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  --display: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --serif: 'Crimson Pro', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background-color: var(--ox);
  background-image: radial-gradient(70rem 40rem at 50% -10rem, var(--ox-glow), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rope-dark); }
:focus-visible { outline: 2px solid var(--rope); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.7rem); }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: 0.78em; font-variant-ligatures: none; }
button { font: inherit; }
[hidden] { display: none !important; }

/* The sheet */
.sheet {
  width: min(100% - 1rem, 82rem);
  margin: clamp(0.5rem, 2.2vw, 1.75rem) auto 0;
  background-color: var(--par);
  background-image: var(--paper-grain);
  border-radius: clamp(10px, 1.6vw, 18px);
  box-shadow: 0 0 0 2px var(--ox-deep), 0 26px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.muted { color: var(--ink-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ox); color: var(--on-ox); padding: 0.5rem 1rem; z-index: 60; }
.skip:focus { top: 0.5rem; }

/* The rope, with a stud at each end */
.rope { position: relative; height: 13px; border-radius: 7px; background: var(--rope-stripes); margin-inline: 22px; }
.rope::before, .rope::after { content: ''; position: absolute; top: -4px; width: 21px; height: 21px; background: var(--stud); box-shadow: inset 0 0 0 2px #E9B65B, 0 1px 2px rgba(0, 0, 0, 0.35); }
.rope::before { left: -22px; }
.rope::after { right: -22px; }

.frame { border: 1px solid var(--rule); outline: 1px solid var(--rule-soft); outline-offset: 3px; }

.eyebrow { font-family: var(--sc); color: var(--red); letter-spacing: 0.05em; margin: 0 0 0.6rem; font-size: 1.15rem; }
.meta { font-style: italic; color: var(--ink-2); font-size: 1.02rem; margin: 0; }
.lede { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem); line-height: 1.42; max-width: 38em; margin-top: 1rem; }
.badge { font-style: normal; font-family: var(--sc); background: var(--ox); color: var(--on-ox); padding: 0 0.45em; border-radius: 2px; }
.empty { color: var(--ink-2); font-style: italic; }
.footer-label { font-family: var(--sc); letter-spacing: 0.05em; }

.section-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.1rem; }
.section-title::before { content: ''; width: 0.62rem; height: 0.62rem; flex: none; background: var(--stud); box-shadow: inset -1px -1px 0 var(--gold-deep); transform: rotate(45deg); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; }
.section-head a { font-family: var(--sc); text-decoration: none; }
.band { margin-block: clamp(3rem, 6vw, 4.75rem); }
.band-intro { color: var(--ink-2); margin-top: -0.4rem; max-width: 40em; }
.centered { text-align: center; }
.centered .section-title { justify-content: center; }
.centered .band-intro { margin-inline: auto; }

/* Things arrive like prints laid down */
.reveal-on .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal-on .reveal.is-in { opacity: 1; transform: none; }

/* Header */
.site-header { padding-top: 0.6rem; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap; min-height: 4.4rem; padding-block: 0.4rem 0.9rem; }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink); font-family: var(--display); font-size: 1.3rem; line-height: 1.02; }
.brand:hover { color: var(--ink); }
.brand small { display: block; font-family: var(--sc); color: var(--red); font-size: 0.92rem; letter-spacing: 0.06em; margin-top: 0.1rem; }
.brand-mark { width: 3rem; height: 3rem; flex: none; border-radius: 50%; border: 1.5px solid var(--ox); display: grid; place-items: center; transform: rotate(-8deg); }
.brand-mark::before { content: 'PR\A 88'; white-space: pre; font-family: var(--sc); font-size: 0.84rem; line-height: 1; color: var(--ox); text-align: center; }
.brand-root .brand-mark::before { content: 'A\A F'; }
.menu-button { display: none; background: none; border: 1px solid var(--rule); color: var(--ink); font-family: var(--sc); font-size: 1.05rem; padding: 0.2rem 0.8rem; cursor: pointer; border-radius: 2px; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0; font-size: 1.15rem; }
.site-nav > * + *::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline: 0.85rem; background: var(--stud); box-shadow: inset -1px -1px 0 var(--gold-deep); transform: translateY(-3px) rotate(45deg); }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--red); }
.site-nav a[aria-current] { color: var(--red); text-decoration: underline; text-decoration-color: var(--rope); text-underline-offset: 0.3em; }
.site-nav .nav-follow::before { display: none; }
.nav-follow { margin-left: 1.1rem; background: var(--ox); color: var(--on-ox) !important; padding: 0.15rem 0.8rem 0.2rem; border-radius: 2px; text-decoration: none !important; }
.nav-follow:hover { background: var(--rope-dark); }
@media (max-width: 860px) {
  .js .menu-button { display: block; }
  .js .site-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0 0.4rem; font-size: 1.3rem; }
  .js .site-nav > * + *::before { display: none; }
  .js .nav-follow { margin-left: 0; }
  .js .menu-button[aria-expanded='true'] + .site-nav { display: flex; }
}

/* Buttons */
.button-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.button {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--ox); color: var(--on-ox);
  font-family: var(--sc); font-size: 1.1rem; letter-spacing: 0.03em; line-height: 1.2;
  padding: 0.5rem 1rem; border: 1px solid var(--ox); border-radius: 2px;
  text-decoration: none; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.button::before, .button::after { content: ''; width: 6px; height: 6px; flex: none; background: var(--gold); transform: rotate(45deg); }
.button:hover { background: var(--rope-dark); border-color: var(--rope-dark); color: #fff; }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.button-quiet::before, .button-quiet::after { background: var(--rope); }
.button-quiet:hover { background: var(--par-2); color: var(--ink); border-color: var(--ink-2); }
.muted-on-gold { opacity: 0.75; font-size: 0.9em; }

/* Plates: photographs pinned in like prints */
.plate { margin: 0; background: var(--print); padding: 0.6rem 0.6rem 0.75rem; box-shadow: 0 10px 26px rgba(60, 20, 10, 0.26); transform: rotate(1.2deg); }
.plate img { width: 100%; }
.plate figcaption { font-style: italic; font-size: 1rem; color: var(--ink-2); padding-top: 0.55rem; line-height: 1.3; }
.plate figcaption b { font-style: normal; font-weight: 400; font-family: var(--sc); color: var(--red); margin-right: 0.3em; }
.plate-flat { transform: none; }

/* Root page */
.root-hero { padding-block: clamp(2.5rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3rem); text-align: center; }
.root-hero h1 { max-width: 15em; margin-inline: auto; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem); }
.root-hero .lede { margin-inline: auto; color: var(--ink-2); font-style: italic; }
.root-section { margin-block: clamp(2.5rem, 6vw, 4.25rem); }
.tile-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.tile {
  --tile: var(--rope);
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--print); padding: 1.4rem 1.4rem 1.3rem; min-height: 15rem;
  text-decoration: none; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-soft), 0 8px 20px rgba(60, 20, 10, 0.14);
  border-top: 5px solid var(--tile);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.55s var(--ease);
}
.tile h3 { font-size: 1.65rem; }
.tile p:not(.meta) { margin: 0; }
.tile .meta { font-family: var(--sc); font-style: normal; color: var(--red); letter-spacing: 0.04em; }
a.tile:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule), 0 12px 26px rgba(60, 20, 10, 0.2); }
.reveal-on a.tile.reveal.is-in:hover { transform: translateY(-3px); }
.tile-cta { margin-top: auto; padding-top: 0.75rem; font-family: var(--sc); color: var(--red); font-size: 1.15rem; }
.tile-gold { --tile: var(--gold); }
.tile-verdigris { --tile: var(--green); }
.tile-arcane { --tile: #3B5BA5; }
.tile-ember { --tile: #C8642A; }
.tile-pending p:not(.meta), .tile-pending h3 { opacity: 0.75; }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.post-list a, .result { display: grid; gap: 0.15rem; padding: 1rem 0; border-bottom: 1px dashed var(--rule); text-decoration: none; color: var(--ink); }
.post-title { font-family: var(--display); font-size: 1.5rem; color: var(--ink); line-height: 1.2; }
.post-list a:hover .post-title, .result:hover .post-title { color: var(--red); }
.post-desc { max-width: 44em; color: var(--ink-2); }

/* Project home */
.hero { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding-block: clamp(2rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.hero .button-row { margin-top: 1.6rem; }
.hero .plate { max-width: 34rem; justify-self: center; }

.matcher { background: var(--code-bg); color: var(--code-text); margin: 0; font-family: var(--mono); border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 5px var(--rope), 0 12px 26px rgba(60, 20, 10, 0.25); }
.matcher-bar { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.55rem 0.9rem; border-bottom: 1px solid #4A2A20; font-size: 0.78rem; color: var(--gold); }
.matcher-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.3rem; padding: 1rem 0.9rem 0.8rem; font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem); }
.matcher-grid span { display: grid; place-items: center; aspect-ratio: 1.42; background: #2E1A15; transition: background 0.22s var(--ease), color 0.22s var(--ease); }
.matcher-grid .x { color: #8A7466; }
.matcher-grid .m { background: rgba(62, 142, 126, 0.38); color: #CDEFE6; }
.matcher-grid .a { background: rgba(77, 105, 180, 0.6); color: #E2E9FF; }
.matcher-grid .c { background: rgba(216, 164, 67, 0.38); color: #FBE3A7; }
.matcher-verdict { margin: 0; padding: 0.15rem 0.9rem 0.7rem; color: #8FD6C3; font-size: 0.95rem; }
.js .matcher-verdict { opacity: 0; transition: opacity 0.3s var(--ease); }
.js .matcher-verdict.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .matcher-verdict { opacity: 1; } }
.matcher-verdict span { color: #B9A48F; font-size: 0.78rem; margin-left: 0.5rem; }
.matcher-key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0.55rem 0.9rem 0.7rem; font-size: 0.7rem; color: #B9A48F; border-top: 1px solid #3A221B; }
.matcher-key li::before { content: ''; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.4em; }
.key-m::before { background: #3E8E7E; }
.key-a::before { background: #4D69B4; }
.key-c::before { background: var(--gold); }
.plate-matcher { display: grid; gap: 0.8rem; }
.plate-matcher > p { font-style: italic; font-size: 1rem; color: var(--ink-2); margin: 0.6rem 0 0; }
.plate-matcher > p b { font-style: normal; font-weight: 400; font-family: var(--sc); color: var(--red); margin-right: 0.3em; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 3px double var(--ink-2); border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 1.1rem 1rem 1.2rem; display: grid; gap: 0.1rem; text-align: center; border-left: 1px solid var(--rule-soft); }
.stat:first-child { border-left: 0; }
@media (max-width: 759px) { .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--rule-soft); } }
.stat-number { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; line-height: 1.05; }
.stat-label { color: var(--ink-2); font-style: italic; font-size: 1.02rem; line-height: 1.25; }

.intro-grid { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); align-items: start; }
@media (min-width: 980px) { .intro-grid { grid-template-columns: minmax(0, 1fr) 26rem; gap: 4rem; } }
.intro-side { display: grid; gap: 2.5rem; }
.parchment { background: var(--par-2); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rule-soft), inset 0 0 40px rgba(120, 70, 30, 0.16); padding: 1.4rem 1.5rem 1.2rem; }
.parchment h2 { font-size: 1.7rem; margin-bottom: 0.4rem; }
.parchment > p { color: var(--ink-2); font-style: italic; margin-bottom: 0.4rem; }
.parchment dt { font-family: var(--sc); font-size: 1.15rem; color: var(--red); margin-top: 0.9rem; }
.parchment dd { margin: 0; }

/* The journal entries */
.series { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0 3rem; text-align: left; }
@media (min-width: 900px) { .series { grid-template-columns: 1fr 1fr; } }
.series li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px dashed var(--rule); }
.series-n { font-family: var(--serif); font-variant-caps: all-small-caps; font-variant-numeric: lining-nums; letter-spacing: 0.07em; color: var(--red); font-size: 1.12rem; white-space: nowrap; }
.series-n::before { content: 'Entry '; }
.series li > a, .series li > span:nth-child(2) { font-family: var(--display); font-size: 1.32rem; line-height: 1.2; color: var(--ink); text-decoration: none; }
.series li > a:hover { color: var(--red); text-decoration: underline; text-decoration-color: var(--rope); }
.series li:not(.is-out) > span:nth-child(2) { color: #8F7A66; }
.series li .meta { grid-column: 2; font-size: 0.98rem; }
.series li.is-out .meta { color: var(--green); }

/* The scroll: a panel for the port */
.scroll { background: var(--par-2); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule-soft), inset 0 0 44px rgba(120, 70, 30, 0.2); display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); padding: clamp(1.1rem, 3vw, 2rem); align-items: center; }
@media (min-width: 900px) { .scroll { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.scroll h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); margin-bottom: 0.7rem; }
.scroll p { color: var(--ink-2); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin: 0 0 1.4rem; font-size: 1.08rem; }
.facts dt { font-family: var(--sc); color: var(--red); }
.facts dd { margin: 0; }

/* A game screen inside the game's own rope border */
.game-frame, .pixel-shot { margin: 0; background: #000; padding: 12px; border-radius: 2px; position: relative; box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(40, 10, 5, 0.3); }
.game-frame::before, .pixel-shot::before { content: ''; position: absolute; inset: 3px; border: 5px solid transparent; border-image: repeating-linear-gradient(120deg, var(--rope-light) 0 3px, var(--rope) 3px 6px, var(--rope-dark) 6px 8px) 5; pointer-events: none; }
.game-frame img, .pixel-shot img { width: 100%; image-rendering: pixelated; }
.pixel-shot figcaption { color: #E6D3B5; font-style: italic; font-size: 0.95rem; padding: 0.55rem 0.3rem 0.1rem; }
.pixel-shot.frame { outline: 0; border: 0; }

/* The engraved map */
.chart { position: relative; min-height: 17rem; overflow: hidden; border-block: 1px solid var(--rule); display: grid; place-items: center; padding: 2.5rem 1.25rem; }
.chart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 30%; filter: sepia(0.8) contrast(0.9); opacity: 0.38; mix-blend-mode: multiply; }
.chart p { position: relative; background: var(--par); padding: 1rem 1.5rem; border: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(60, 20, 10, 0.16); max-width: 34rem; margin: 0; text-align: center; font-size: 1.15rem; line-height: 1.45; }
.chart-actions { display: flex; justify-content: center; margin-top: 0.9rem; }
.chart p b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.3rem; }

.follow-strip { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem 2rem; flex-wrap: wrap; background: var(--par-2); padding: 1.4rem 1.6rem; margin-block: 3rem 3.5rem; }
.follow-strip .section-title { margin-bottom: 0.2rem; font-size: 1.9rem; }
.follow-strip p { margin: 0; color: var(--ink-2); }

/* Cards: prints laid on the page */
.card-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.card { background: var(--print); padding: 0.6rem 0.6rem 0.2rem; box-shadow: 0 8px 20px rgba(60, 20, 10, 0.16); transform: rotate(-0.5deg); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.55s var(--ease); }
.card:nth-child(even) { transform: rotate(0.5deg); }
.reveal-on .card.reveal:not(.is-in) { transform: translateY(12px); }
.card:hover, .reveal-on .card.reveal.is-in:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 14px 28px rgba(60, 20, 10, 0.22); }
.card-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.card-link:hover { color: var(--ink); }
.card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: sepia(0.12); }
.card-body { padding: 0.8rem 0.5rem 1rem; }
.card h3 { font-size: 1.55rem; margin: 0.3rem 0 0.45rem; }
.card-link:hover h3 { color: var(--red); }
.card-text { margin: 0; color: var(--ink-2); font-size: 1.1rem; }

/* Lists */
.list-page { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem); min-height: 60vh; }
.list-tools { margin-block: 1.75rem 2rem; display: grid; gap: 0.9rem; }
.search input { width: min(100%, 26rem); background: var(--print); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; padding: 0.5rem 0.8rem; font: inherit; font-size: 1.1rem; }
.search input:focus { outline: 2px solid var(--rope); outline-offset: 1px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag { display: inline-block; font-family: var(--sc); font-style: normal; font-size: 0.98rem; color: var(--red); border: 1px solid var(--rule); border-radius: 2px; padding: 0 0.5em; text-decoration: none; margin-left: 0.35rem; }
.tag-row .tag { margin-left: 0; }
.tag:hover { border-color: var(--red); color: var(--rope-dark); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.result { border-top: 0; }

/* Article */
.progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 50; background: var(--rope-stripes); transform: scaleX(0); transform-origin: 0 50%; }
.article-head { padding-top: clamp(2rem, 5vw, 3.5rem); max-width: 52rem; margin-inline: auto; text-align: center; }
.article-head .lede { margin-inline: auto; font-style: italic; color: var(--ink-2); }
.article-head-tight { padding-bottom: 1.25rem; text-align: left; margin-inline: 0; }
.crumbs { font-family: var(--sc); font-size: 1.08rem; color: var(--ink-2); margin-bottom: 0.9rem; }
.crumbs a { color: var(--red); text-decoration: none; }
.draft-banner { background: var(--ox); color: var(--on-ox); padding: 0.35rem 0.8rem; display: inline-block; font-size: 1.05rem; }
.article-head .meta { margin-top: 1rem; }
.cover-wrap { max-width: 60rem; margin-top: 2.2rem; }
.cover { margin: 0; background: var(--print); padding: 0.6rem; box-shadow: 0 10px 26px rgba(60, 20, 10, 0.24); }
.cover.frame { border: 0; outline: 0; }
.cover img { width: 100%; }
.article-rope { margin-top: 2.6rem; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.toc { order: -1; }
.toc-box { background: var(--par-2); border-left: 3px solid var(--rope); padding: 0.7rem 1rem; }
.toc-box summary { font-family: var(--sc); color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.toc ol { list-style: none; margin: 0.6rem 0 0.2rem; padding: 0; font-size: 1.05rem; line-height: 1.3; counter-reset: toc; }
.toc li { margin-bottom: 0.5rem; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); counter-increment: toc; }
.toc li::before { content: counter(toc, upper-roman) '.'; font-family: var(--sc); color: var(--red); font-size: 0.9em; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--red); }
.toc a[aria-current] { color: var(--ink); }
@media (min-width: 1180px) {
  .article-layout { grid-template-columns: minmax(0, 42rem) 16rem; justify-content: center; gap: 4rem; }
  .toc { order: 0; }
  .toc-box { position: sticky; top: 1.5rem; background: transparent; border-left: 1px solid var(--rule); padding: 0 0 0 1.1rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
  .toc-box summary { pointer-events: none; list-style: none; }
  .toc-box summary::-webkit-details-marker { display: none; }
}
.after-article { max-width: 66rem; padding-bottom: 1rem; }

.prose { font-size: clamp(1.22rem, 1.12rem + 0.35vw, 1.34rem); line-height: 1.6; min-width: 0; }
.prose > p, .prose > ul, .prose > ol, .prose > h2, .prose > h3 { max-width: 34em; }
.prose-solo { max-width: 46rem; padding-bottom: 4rem; }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.35rem); margin: 2.2em 0 0.7em; }
.prose h2::after { content: ''; display: block; width: 7rem; height: 8px; margin-top: 0.5rem; border-radius: 4px; background: var(--rope-stripes); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3em; margin: 1.6em 0 0.45em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--red); }
.prose :not(pre) > code { background: rgba(43, 27, 20, 0.08); padding: 0.06em 0.32em; border-radius: 2px; }
.prose blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.1em; border-left: 3px solid var(--rope); font-style: italic; color: var(--ink-2); }
.article-layout .prose > p:first-child::first-letter {
  font-family: var(--display); float: left; font-size: 4.1em; line-height: 0.95; margin: 0.08em 0.16em 0 0; padding: 0.08em 0.17em 0.02em;
  background: var(--ox); color: var(--gold); box-shadow: 0 0 0 3px var(--par), 0 0 0 6px var(--rope);
}

.figure { margin: 2em 0; }
.figure-zoom { display: block; width: 100%; padding: 0.55rem; border: 0; background: var(--print); box-shadow: 0 8px 22px rgba(60, 20, 10, 0.2); cursor: zoom-in; }
.figure img { width: 100%; }
.figure figcaption { font-size: 0.86em; line-height: 1.38; color: var(--ink-2); font-style: italic; margin-top: 0.75em; text-align: center; }
.lightbox { padding: 0; border: 6px solid var(--print); background: var(--print); max-width: 96vw; max-height: 94vh; cursor: zoom-out; }
.lightbox::backdrop { background: rgba(37, 6, 8, 0.9); }
.lightbox img { max-height: 90vh; width: auto; }

.table-wrap { overflow-x: auto; margin: 1.6em 0; background: var(--par-2); border-top: 3px double var(--ink-2); -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; color: var(--ink); font-size: 0.9em; line-height: 1.32; }
.table-wrap th { font-family: var(--sc); font-weight: 400; text-align: left; color: var(--red); padding: 0.55em 0.8em; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table-wrap td { padding: 0.48em 0.8em; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap code { background: rgba(43, 27, 20, 0.08); padding: 0.05em 0.3em; }

.code { background: var(--code-bg); margin: 1.7em 0; color: var(--code-text); border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 5px var(--rope); }
.code-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0.85rem; border-bottom: 1px solid #4A2A20; font-family: var(--sc); font-size: 0.95rem; color: var(--gold); }
.code-copy { background: none; border: 0; color: #B9A48F; cursor: pointer; font-family: var(--sc); padding: 0 0.2rem; }
.code-copy:hover { color: var(--gold); }
.code pre { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; font-size: clamp(0.76rem, 0.7rem + 0.22vw, 0.88rem); line-height: 1.55; tab-size: 2; }
.code pre code { font-size: inherit; background: none; padding: 0; }
.hljs-keyword, .hljs-built_in { color: #F0B24E; }
.hljs-comment { color: #B39A7C; font-style: italic; }
.hljs-number { color: #EBC97A; }
.hljs-string { color: #9FCDB9; }
.hljs-title, .hljs-function { color: #F6EAD3; }
.hljs-meta, .hljs-symbol, .hljs-type, .hljs-params { color: #B3C2EC; }

.video { position: relative; aspect-ratio: 16 / 9; margin: 2em 0; background: #000; box-shadow: 0 0 0 0.55rem var(--print), 0 10px 26px rgba(60, 20, 10, 0.3); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-open { position: absolute; inset: 0; display: grid; place-items: center; }
.video-open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.video-play { position: relative; background: var(--ox); color: var(--on-ox); font-family: var(--sc); padding: 0.5rem 1.2rem; box-shadow: 0 0 0 3px var(--gold); }
.video-note { background: var(--par-2); border-left: 3px solid var(--rope); padding: 0.75rem 1rem; margin: 1.5em 0; max-width: 34em; font-size: 0.92em; font-style: italic; }
.video-note p { margin: 0; }

.footnotes { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 3px double var(--ink-2); font-size: 0.84em; line-height: 1.42; }
.footnotes-title { font-size: 1.6rem; margin-bottom: 0.8rem; }
.footnotes .footnotes-title::after { display: none; }
.footnotes-list { padding-left: 1.5em; }
.footnotes-list p { margin: 0; display: inline; }
.footnote-ref a { font-family: var(--mono); font-size: 0.68em; text-decoration: none; padding-inline: 0.1em; }
.footnote-backref { text-decoration: none; }

.pager { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-bottom: 3rem; }
.pager-link { display: block; background: var(--par-2); padding: 1rem 1.2rem; text-decoration: none; font-family: var(--display); font-size: 1.3rem; color: var(--ink); line-height: 1.25; }
.pager-link:hover { color: var(--red); }
.pager-link .meta { display: block; margin-bottom: 0.2rem; font-family: var(--serif); }
.pager-next { text-align: right; }
.comments { margin-block: 3rem; }

/* Port page */
.page-body { padding-block: 2rem 1rem; }
.split { display: grid; gap: 2rem; align-items: center; margin-block: 2rem 3.5rem; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) 30rem; gap: 3.5rem; } .split-flip { grid-template-columns: 30rem minmax(0, 1fr); align-items: start; } }
.downloads { display: grid; border-top: 3px double var(--ink-2); }
.download { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 1.1rem 0; flex-wrap: wrap; border-bottom: 1px dashed var(--rule); }
.download > div { min-width: 0; flex: 1 1 26rem; }
.download h3 { font-size: 1.55rem; margin-bottom: 0.2rem; }
.download p { margin: 0 0 0.35rem; }
.download dl { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; font-size: 1.05rem; }
.download dl div { display: flex; gap: 0.4em; }
.download dt { color: var(--red); font-family: var(--sc); }
.download dd { margin: 0; }
.hash { font-size: 0.82rem; color: var(--ink-2); margin-top: 0.2rem !important; overflow-wrap: anywhere; }
.hash span { font-family: var(--sc); font-size: 0.95rem; }
.prose-band .prose { max-width: 46rem; }

/* Follow */
.follow-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: 2.5rem; }
.follow-card { background: var(--print); padding: 1.4rem; box-shadow: 0 8px 20px rgba(60, 20, 10, 0.12); }
.follow-card.frame { border: 0; outline: 0; border-top: 5px solid var(--rope); }
.follow-card h2 { font-size: 1.7rem; margin-bottom: 0.5rem; }
.copy-field { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.8rem; }
.copy-field code { background: var(--par-2); padding: 0.45rem 0.6rem; overflow-wrap: anywhere; flex: 1 1 12rem; font-size: 0.78rem; }

/* 404 */
.not-found { padding-block: clamp(3rem, 12vw, 7rem); min-height: 55vh; text-align: center; }
.not-found .lede { margin-inline: auto; }
.not-found .button-row { justify-content: center; margin-top: 1.5rem; }
.pixel-text { font-family: 'Press Start 2P', monospace; font-size: 0.74rem; color: var(--red); }

/* Footer, off the sheet */
.site-footer { color: var(--on-ox); padding-block: 2.5rem 2.75rem; font-size: 1.1rem; }
.site-footer a { color: #F3CF86; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.footer-title { font-family: var(--display); font-size: 1.4rem; color: var(--on-ox); margin-bottom: 0.4rem; }
.footer-label { color: var(--gold); margin-bottom: 0.4rem; font-size: 1.12rem; }
.site-footer .muted { color: var(--on-ox-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.25rem; }

@media (max-width: 600px) {
  body { font-size: 1.18rem; }
  .rope { margin-inline: 18px; height: 11px; }
  .rope::before, .rope::after { width: 17px; height: 17px; top: -3px; }
  .rope::before { left: -18px; }
  .rope::after { right: -18px; }
  .plate, .card, .card:nth-child(even) { transform: none; }
  .series li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .series li .meta { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  body { background: #fff; }
  .sheet { box-shadow: none; width: 100%; margin: 0; background: #fff; }
  .site-header, .site-footer, .toc, .after-article, .progress, .rope { display: none; }
}

/* Root page: one card per project, image beside the text */
.project-list { display: grid; gap: 2rem; }
.project {
  --tile: var(--rope);
  display: grid; gap: 1.5rem 2.5rem; align-items: center;
  background: var(--print); padding: clamp(1.1rem, 3vw, 2rem);
  border-top: 5px solid var(--tile);
  box-shadow: inset 0 0 0 1px var(--rule-soft), 0 10px 24px rgba(60, 20, 10, 0.14);
}
@media (min-width: 860px) { .project { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.project-plate { transform: rotate(-1deg); }
.project-body { min-width: 0; }
.project-status { font-family: var(--sc); color: var(--red); letter-spacing: 0.04em; margin: 0 0 0.3rem; font-size: 1.1rem; }
.project h3 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); margin-bottom: 0.6rem; }
.project h3 a { color: var(--ink); text-decoration: none; }
.project h3 a:hover { color: var(--red); }
.project-includes { list-style: none; margin: 1rem 0 1.4rem; padding: 0; border-top: 1px dashed var(--rule); }
.project-includes li { padding: 0.4rem 0 0.4rem 1.3rem; border-bottom: 1px dashed var(--rule); position: relative; }
.project-includes li::before { content: ''; position: absolute; left: 0.1rem; top: 0.95em; width: 6px; height: 6px; background: var(--stud); transform: rotate(45deg); }
.project-pending { opacity: 0.8; }
.post-project { font-family: var(--sc); font-style: normal; color: var(--red); }
@media (max-width: 600px) { .project-plate { transform: none; } }

/* One row of cards: as many as fit across, the rest clipped (and made inert by site.js); three stacked on phones */
.card-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; padding: 0.9rem 0.7rem 0; margin: -0.9rem -0.7rem 0; }
.card-row > .card { margin-bottom: 1.8rem; }
.card-row .card h3 { font-size: 1.4rem; }
.card-row .card-text { font-size: 1.04rem; }
@media (max-width: 600px) {
  .card-row { grid-auto-rows: auto; overflow: visible; }
  .card-row > .card:nth-child(n+4) { display: none; }
}

/* The video and its way to the rest of the series */
.video-wrap { margin: 2.2em 0; }
.video-wrap .video { margin: 0; }
.video-more { text-align: center; font-style: italic; font-size: 0.9em; margin: 1.1rem 0 0; }