/* ==========================================================================
   Signals in the Margins
   A personal homepage in the early-2000s tradition: bevelled buttons, window
   title bars, pixel type, a tiled wallpaper and 88x31 buttons, rebuilt with
   modern layout, readable type and real contrast.

   Colour follows a 60 · 30 · 10 split:
     60  paper     page, reading surfaces, window chrome
     30  wine      masthead, hero, footer, feature entry, title bars
     10  magenta   links, primary buttons, focus, the margin rule
   Signal chartreuse, hot pink and teal are for artwork, LED displays and
   tiny highlights only, never body text on light surfaces.
   ========================================================================== */

/* ---------- Fonts (self-hosted, licences in /assets/fonts/licenses) ---------- */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("/assets/fonts/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("/assets/fonts/silkscreen-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("/assets/fonts/vt323.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* 60: paper and chrome */
  --paper: #F7F2E9;
  --surface: #FFFDF8;
  --chrome: #E3D7D0;           /* window frames and buttons */
  --chrome-hover: #ECE2DC;
  --line: #D9CBC4;
  --control: #8A7580;
  --ink: #1D1418;              /* 16:1 on paper */
  --ink-soft: #57464D;         /* 7.9:1 on paper */

  /* 30: wine */
  --wine: #3A1726;
  --wine-deep: #24101A;
  --bar-end: #8E1655;          /* title bar gradient end */
  --wine-tint: #F1E4E8;
  --on-wine: #F7F2E9;          /* 14:1 on wine */
  --on-wine-soft: #D8C6CD;     /* 9.7:1 on wine */

  /* 10: accent */
  --accent: #C8106A;           /* 5:1 on paper, white text 5.6:1 */
  --accent-hover: #A30C56;
  --accent-on-wine: #FF7EBD;   /* 6.7:1 on wine */
  --visited: #6B2C91;          /* 8.6:1 on surface */

  /* Signal colours: art, LEDs, highlights */
  --signal: #D9F23A;
  --hot: #FF4FA3;
  --teal: #2BB3A8;
  --led: #140A0F;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", Times, serif;
  --font-ui: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  --font-pixel: "Silkscreen", "Lucida Console", "Courier New", monospace;
  --font-mono: "Courier New", Courier, monospace;
  --font-term: "VT323", "Lucida Console", "Courier New", monospace;
  --soft: "SOFT" 100, "WONK" 0;
  --wonky: "SOFT" 100, "WONK" 1;

  /* Four-tone bevels, written as inset shadows so they work on any colour. */
  --bevel-out: inset -1px -1px 0 rgb(29 20 24 / .9), inset 1px 1px 0 rgb(255 255 255 / .95), inset -2px -2px 0 rgb(29 20 24 / .3), inset 2px 2px 0 rgb(255 255 255 / .45);
  --bevel-in: inset 1px 1px 0 rgb(29 20 24 / .9), inset -1px -1px 0 rgb(255 255 255 / .95), inset 2px 2px 0 rgb(29 20 24 / .3), inset -2px -2px 0 rgb(255 255 255 / .45);
  --drop: 3px 3px 0 rgb(58 23 38 / .9);
  --dither: repeating-conic-gradient(#FFFDF8 0 25%, var(--chrome) 0 50%) 0 0 / 2px 2px;

  --page: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  scrollbar-color: var(--accent) var(--wine);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
}
main { flex: 1 0 auto; }
img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:visited { color: var(--visited); }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px dotted var(--ink); outline-offset: 2px; }
::selection { background: var(--signal); color: var(--ink); }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; color: var(--wine); text-wrap: balance; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--chrome); color: var(--ink); box-shadow: var(--bevel-out); }
.skip:focus { top: 12px; }
.kicker { margin: 0 0 14px; font: 400 .8rem/1.5 var(--font-pixel); color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 0;
  background: var(--chrome);
  box-shadow: var(--bevel-out);
  color: var(--ink);
  font: 700 .95rem/1.1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.btn:visited { color: var(--ink); }
.btn:hover { background: var(--chrome-hover); color: var(--ink); }
.btn:active, .btn[aria-pressed="true"], .btn[aria-current="page"] { background: var(--dither); box-shadow: var(--bevel-in); padding: 7px 13px 5px 15px; }
.btn--hot, .btn--hot:visited { background: var(--accent); color: #fff; }
.btn--hot:hover { background: var(--accent-hover); color: #fff; }
.btn--hot:active { background: var(--accent-hover); }
.btn--big { min-height: 46px; padding: 10px 22px; font-size: 1.05rem; }
.btn--big:active { padding: 11px 21px 9px 23px; }

.field {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--bevel-in);
  color: var(--ink);
  font: 1rem/1.4 var(--font-ui);
}
.field::placeholder { color: var(--ink-soft); opacity: 1; }

.tag {
  display: inline-block;
  padding: 3px 6px 2px;
  border: 1px solid var(--wine);
  background: var(--wine-tint);
  color: var(--wine);
  font: 400 .72rem/1.2 var(--font-pixel);
  text-decoration: none;
  white-space: nowrap;
}
a.tag:visited { color: var(--wine); }
.tag--signal, a.tag--signal:visited { border-color: var(--ink); background: var(--signal); color: var(--ink); }
a.tag:hover { background: var(--surface); color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Windows ---------- */
.win { background: var(--chrome); padding: 3px; box-shadow: var(--bevel-out), var(--drop); }
.win__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  padding: 3px 3px 3px 8px;
  background: linear-gradient(90deg, var(--wine) 30%, var(--bar-end));
  color: var(--on-wine);
}
.win__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .8rem/1.2 var(--font-pixel); }
.win__ctrls { display: flex; flex: none; gap: 2px; }
.win__ctrls > span { position: relative; width: 18px; height: 16px; background: var(--chrome); box-shadow: var(--bevel-out); }
.win__close { margin-left: 2px; }
.win__min::before { content: ""; position: absolute; left: 5px; bottom: 4px; width: 7px; height: 2px; background: var(--ink); }
.win__max::before { content: ""; position: absolute; left: 4px; top: 3px; width: 10px; height: 9px; border: 1px solid var(--ink); border-top-width: 2px; }
.win__close::before, .win__close::after { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.win__close::after { transform: rotate(-45deg); }
.win__body { margin-top: 3px; padding: 18px; border: 1px solid #B8A8A1; background: var(--surface); }
.win__body--wine { border-color: var(--wine-deep); background: var(--wine); color: var(--on-wine); }

/* ---------- Tiled, scrolling wallpaper ----------
   Two tiling wave layers drift sideways at different speeds and move with the
   page at different rates (journal.js), so they slide across each other.
   Everything readable sits on a solid box above it. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--paper); }
.backdrop__waves { position: absolute; top: -400px; bottom: -400px; left: -720px; right: -720px; will-change: transform; }
.backdrop__waves--a { background: url("/assets/art/signal-waves-a.svg") 0 0 / 640px 352px repeat; opacity: .13; animation: drift-a 90s linear infinite; }
.backdrop__waves--b { background: url("/assets/art/signal-waves-b.svg") 0 0 / 720px 360px repeat; opacity: .09; animation: drift-b 130s linear infinite; }
@keyframes drift-a { from { translate: 0 0; } to { translate: -640px 0; } }
@keyframes drift-b { from { translate: -720px 0; } to { translate: 0 0; } }

/* ---------- Masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--wine); color: var(--on-wine); border-bottom: 2px solid var(--wine-deep); }
.masthead__inner { max-width: var(--page); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-wine);
  text-decoration: none;
  font: 700 1.35rem/1.1 var(--font-display);
  font-variation-settings: var(--wonky);
  text-shadow: 1px 1px 0 var(--accent), 2px 2px 0 var(--accent);
}
.wordmark:visited, .wordmark:hover { color: var(--on-wine); }
.mark { width: 32px; height: 32px; flex: none; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.wordmark:hover .mark { transform: rotate(200deg); }
.mainnav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mainnav .btn--hot { margin-left: 8px; }
.masthead :focus-visible, .hero :focus-visible, .win__body--wine :focus-visible, .entry--feature :focus-visible, .site-footer :focus-visible, .post-head :focus-visible { outline-color: var(--signal); }

.read-progress { position: absolute; left: 0; right: 0; top: 100%; height: 4px; background: var(--led); }
.read-progress span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--signal) 0 6px, var(--led) 6px 8px); transform: scaleX(0); transform-origin: left; }

/* ---------- Page frame ---------- */
.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }

/* ---------- Home: hero window ---------- */
.hero-win { margin-top: clamp(20px, 3vw, 32px); }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: 24px clamp(24px, 4vw, 48px);
  margin-top: 3px;
  padding: clamp(24px, 4.5vw, 52px);
  background: var(--wine);
  color: var(--on-wine);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/art/signal-waves-b.svg") 0 0 / 720px 360px repeat;
  opacity: .25;
  -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 85%);
  mask-image: linear-gradient(105deg, transparent 30%, #000 85%);
  animation: drift-b 70s linear infinite;
}
.hero__kicker { margin: 0 0 18px; font: 400 .8rem/1.6 var(--font-pixel); color: var(--signal); }
.hero__title {
  margin: 0;
  color: var(--on-wine);
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  font-variation-settings: var(--wonky);
  text-shadow: 1px 1px 0 var(--accent), 2px 2px 0 var(--accent), 3px 3px 0 var(--accent), 4px 4px 0 var(--accent), 5px 5px 0 var(--wine-deep), 6px 6px 0 var(--wine-deep);
}
.hero__title em { font-style: italic; font-weight: 700; color: var(--signal); }
.hero__dot { color: var(--hot); }
.hero__lede { max-width: 34ch; margin: 26px 0 0; font: 1.2rem/1.55 var(--font-body); color: var(--on-wine-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.hero__art { position: relative; justify-self: center; width: 100%; max-width: 380px; }
.portal { display: block; width: 100%; height: auto; overflow: visible; animation: breathe 9s ease-in-out infinite alternate; }
.portal__ring { transform-box: view-box; transform-origin: 200px 200px; animation: spin calc(48s + var(--i) * 6s) linear infinite; }
.portal__ring:nth-of-type(even) { animation-direction: reverse; }
.portal__cross { stroke: var(--on-wine); stroke-width: 3; stroke-linecap: square; fill: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { from { transform: scale(.97) rotate(-2deg); } to { transform: scale(1.02) rotate(2deg); } }

/* The sale-sticker starburst. */
.burst {
  --star: polygon(50% 0%, 56.6% 12.6%, 67.1% 3%, 69% 17.1%, 82.1% 11.7%, 79.1% 25.6%, 93.3% 25%, 85.7% 37%, 99.2% 41.3%, 88% 50%, 99.2% 58.7%, 85.7% 63%, 93.3% 75%, 79.1% 74.4%, 82.1% 88.3%, 69% 82.9%, 67.1% 97%, 56.6% 87.4%, 50% 100%, 43.4% 87.4%, 32.9% 97%, 31% 82.9%, 17.9% 88.3%, 20.9% 74.4%, 6.7% 75%, 14.3% 63%, .8% 58.7%, 12% 50%, .8% 41.3%, 14.3% 37%, 6.7% 25%, 20.9% 25.6%, 17.9% 11.7%, 31% 17.1%, 32.9% 3%, 43.4% 12.6%);
  position: absolute;
  left: -4%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 132px;
  aspect-ratio: 1;
  background: var(--hot);
  clip-path: var(--star);
  animation: burst 1.6s ease-in-out infinite alternate;
}
.burst span {
  display: grid;
  place-items: center;
  width: calc(100% - 10px);
  aspect-ratio: 1;
  padding: 26px;
  background: var(--signal);
  clip-path: var(--star);
  color: var(--ink);
  font: 700 .8rem/1.05 var(--font-ui);
  text-align: center;
  text-transform: uppercase;
}
@keyframes burst { from { transform: rotate(-14deg) scale(.96); } to { transform: rotate(-8deg) scale(1.04); } }

/* LED marquee */
.marquee { margin-top: 3px; padding: 9px 0; overflow: hidden; background: var(--led); box-shadow: var(--bevel-in); }
.marquee__track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  color: var(--signal);
  font: 400 .95rem/1.2 var(--font-pixel);
  text-shadow: 0 0 6px rgb(217 242 58 / .5);
  white-space: nowrap;
}
.marquee__track span::after { content: "*"; color: var(--hot); text-shadow: 0 0 6px rgb(255 79 163 / .6); }
@keyframes marquee { to { transform: translateX(calc(-100% / 3)); } }

/* ---------- Home: journal ---------- */
.journal { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(28px, 4vw, 48px); margin-top: clamp(36px, 5vw, 56px); }
.journal__main { display: grid; align-content: start; gap: clamp(28px, 4vw, 40px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; padding-bottom: 8px; border-bottom: 4px double var(--wine); }
.section-head h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.4rem); }
.section-head a { font-weight: 700; }

.filters { display: grid; gap: 12px; margin-top: 20px; }
.search { display: flex; align-items: center; gap: 10px; }
.search__label { flex: none; font-weight: 700; }
.result-count { margin: 14px 0 0; font: italic .95rem/1.4 var(--font-body); color: var(--ink-soft); }

.entries { display: grid; gap: 18px; margin-top: 14px; }
.entry {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid var(--wine);
  background: var(--surface);
  box-shadow: var(--drop);
  transition: transform .15s, box-shadow .15s;
}
.entry:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent); }
/* The notebook margin rule: every entry keeps its notes left of a pink line. */
.entry__margin { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 22px; border-right: 2px solid var(--accent); }
.entry__margin time { font-size: .9rem; line-height: 1.3; color: var(--ink-soft); }
.entry h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.65rem); line-height: 1.18; }
.entry h3 a, .entry h3 a:visited { color: inherit; text-decoration: none; }
.entry h3 a::after { content: ""; position: absolute; inset: 0; }
.entry:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.entry h3 a:focus-visible { outline: none; }
.entry:has(h3 a:focus-visible) { outline: 2px dotted var(--ink); outline-offset: 4px; }
.entry p { margin: 10px 0 0; max-width: 62ch; font: 1.05rem/1.6 var(--font-body); color: var(--ink-soft); }
.entry__more { display: inline-block; margin-top: 14px; font-weight: 700; font-size: .95rem; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }

.entry--feature { padding: 30px; border-color: var(--wine-deep); background: var(--wine); color: var(--on-wine); overflow: hidden; isolation: isolate; box-shadow: 3px 3px 0 var(--accent); }
.entry--feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/art/signal-waves-a.svg") 0 0 / 640px 352px repeat; filter: invert(1); opacity: .08; }
.entry--feature:hover { box-shadow: 4px 4px 0 var(--signal); }
.entry--feature .entry__margin { border-right-color: var(--accent-on-wine); }
.entry--feature .tag { border-color: var(--ink); background: var(--signal); color: var(--ink); }
.entry--feature .entry__margin time { color: var(--on-wine-soft); }
.entry--feature h3 { color: var(--on-wine); font-size: clamp(1.7rem, 3.2vw, 2.2rem); }
.entry--feature p { color: var(--on-wine-soft); font-size: 1.1rem; }
.entry--feature .entry__more { color: var(--accent-on-wine); }
.entry--feature:has(h3 a:focus-visible) { outline-color: var(--ink); }

.new-badge { padding: 3px 6px 2px; background: var(--hot); color: var(--ink); font: 700 .75rem/1.2 var(--font-pixel); animation: blink 1s linear 5; }
@keyframes blink { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }

.no-results { margin-top: 20px; padding: 20px; border: 1px dashed var(--control); background: var(--surface); text-align: center; font-family: var(--font-body); color: var(--ink-soft); }

/* ---------- Home: sidebar ---------- */
.sidebar { display: grid; align-content: start; gap: 22px; }
.sidebar p { margin: 0 0 16px; font: 1rem/1.55 var(--font-body); }
.sidebar .win__body > :last-child { margin-bottom: 0; }
.side-title { margin: 0 0 10px; font-size: 1.35rem; }
.win__body--wine .side-title { color: var(--on-wine); font-variation-settings: var(--wonky); }
.win__body--wine p { color: var(--on-wine-soft); }
.win__body--wine { position: relative; overflow: hidden; }
.win__body--wine::after { content: ""; position: absolute; right: -44px; bottom: -44px; width: 120px; height: 120px; border-radius: 50%; background: repeating-radial-gradient(circle, var(--hot) 0 6px, var(--wine) 6px 12px, var(--signal) 12px 15px, var(--wine) 15px 21px); }
.win__body--wine .side-title { position: relative; z-index: 1; max-width: 12ch; }

.label-list, .link-list { list-style: none; margin: 0; padding: 0; }
.label-list li, .link-list li { padding: 4px 0; }
.label-list li::before, .link-list li::before { content: "» "; color: var(--accent); font-weight: 700; }
.label-list a, .link-list a { font-weight: 700; }
.label-list span { color: var(--ink-soft); }
.label-list a:hover, .link-list a:hover, .section-head a:hover, .prose a:hover, .site-footer nav a:hover { background: var(--signal); color: var(--ink); text-decoration: none; }

.stat-label { margin: 0 0 4px !important; font: 400 .72rem/1.3 var(--font-pixel) !important; color: var(--ink-soft); }
.stat-value { font-weight: 700; font-family: var(--font-ui) !important; }
.odometer__digits { display: flex; gap: 2px; }
.odometer__digits span { display: grid; place-items: center; width: 28px; height: 36px; background: var(--led); box-shadow: var(--bevel-in); color: var(--signal); font: 400 1.35rem/1 var(--font-pixel); text-shadow: 0 0 6px rgb(217 242 58 / .5); }

/* Small 80x15-style badge */
.b80 { display: inline-flex; height: 20px; border: 1px solid var(--ink); font: 400 .7rem/18px var(--font-pixel); text-decoration: none; }
.b80 span { padding: 0 6px; }
.b80 span:first-child { background: var(--accent); color: #fff; }
.b80 span:last-child { background: var(--chrome); color: var(--ink); }
.b80:hover span:last-child { background: var(--signal); }

/* ---------- Page heading (archive, about) ---------- */
.page-head { max-width: 820px; padding: clamp(36px, 6vw, 64px) 0 clamp(26px, 4vw, 40px); }
.page-head h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; font-variation-settings: var(--wonky); text-shadow: 2px 2px 0 var(--hot), 3px 3px 0 var(--hot); }
.page-head__lede { max-width: 52ch; margin: 18px 0 0; font: 1.25rem/1.55 var(--font-body); color: var(--ink-soft); }
.page-head .chips { margin-top: 24px; }

/* ---------- Archive ---------- */
.archive { display: grid; gap: 24px; max-width: 980px; }
.archive__group { scroll-margin-top: 90px; }
.archive__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; }
.archive__head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.archive__head p { grid-column: 1 / -1; margin: 0; font: 1rem/1.5 var(--font-body); color: var(--ink-soft); }
.archive__count { font: 400 .75rem/1.2 var(--font-pixel); color: var(--ink-soft); white-space: nowrap; }
.archive__list { list-style: none; margin: 18px 0 0; padding: 0; }
.archive__list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; padding: 16px 0; border-top: 1px dotted var(--control); }
.archive__list time { padding-right: 16px; border-right: 2px solid var(--accent); font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.archive__list h3 { margin: 0; font-size: 1.3rem; }
.archive__list h3 a { text-decoration: none; }
.archive__list h3 a:hover { text-decoration: underline; }
.archive__list p { margin: 5px 0 0; font: 1rem/1.55 var(--font-body); color: var(--ink-soft); }

.construction { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px dotted var(--control); }
.construction p { margin: 0; font: italic 1rem/1.4 var(--font-body); color: var(--ink-soft); }
.construction__sign { padding: 4px; background: repeating-linear-gradient(-45deg, var(--signal) 0 8px, var(--ink) 8px 16px); }
.construction__sign span { display: block; padding: 4px 10px; background: var(--signal); color: var(--ink); font: 700 .78rem/1.2 var(--font-pixel); }

/* ---------- Post ---------- */
.post-win { margin-top: clamp(20px, 3vw, 32px); }
.post-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 3px;
  padding: clamp(24px, 4.5vw, 52px);
  background: var(--wine);
  color: var(--on-wine);
}
.post-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/art/signal-waves-b.svg") 0 0 / 720px 360px repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 95%);
  mask-image: linear-gradient(100deg, transparent 45%, #000 95%);
  animation: drift-b 80s linear infinite;
}
.back-link, .back-link:visited { color: var(--on-wine-soft); font-weight: 700; font-size: .95rem; text-decoration: none; }
.back-link:hover { color: var(--ink); background: var(--signal); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; font-size: .95rem; color: var(--on-wine-soft); }
.post-head h1 { max-width: 22ch; margin: 16px 0 0; color: var(--on-wine); font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 800; line-height: 1.04; font-variation-settings: var(--wonky); text-shadow: 1px 1px 0 var(--accent), 2px 2px 0 var(--accent), 3px 3px 0 var(--accent), 4px 4px 0 var(--wine-deep); }
.post-deck { max-width: 58ch; margin: 20px 0 0; font: clamp(1.1rem, 2vw, 1.25rem)/1.55 var(--font-body); color: var(--on-wine-soft); }
.byline { margin: 22px 0 0; font: 400 .78rem/1.3 var(--font-pixel); color: var(--signal); }

.reading { display: grid; grid-template-columns: minmax(0, 780px) minmax(0, 260px); justify-content: space-between; gap: clamp(28px, 4vw, 48px); margin-top: clamp(24px, 4vw, 36px); }
.margin-notes { position: sticky; top: 84px; align-self: start; }
.margin-notes__label { margin: 0 0 12px; font: 400 .72rem/1.5 var(--font-pixel); color: var(--ink-soft); }
.margin-notes dl { display: grid; gap: 10px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px dotted var(--control); }
.margin-notes dt { font: 400 .7rem/1.3 var(--font-pixel); color: var(--ink-soft); }
.margin-notes dd { margin: 2px 0 0; font-weight: 700; }

/* Webring-style bar between entries. */
.ring { margin-top: clamp(36px, 6vw, 56px); padding: 3px; background: var(--chrome); box-shadow: var(--bevel-out), var(--drop); }
.ring__label { margin: 0; padding: 5px 8px; background: var(--wine); color: var(--on-wine); font: 400 .75rem/1.3 var(--font-pixel); text-align: center; }
.ring__links { display: grid; grid-template-columns: 1fr minmax(0, .7fr) 1fr; gap: 3px; margin-top: 3px; }
.ring__links > * { display: grid; align-content: start; gap: 6px; padding: 14px 18px; background: var(--surface); box-shadow: var(--bevel-in); color: var(--ink); text-decoration: none; }
.ring__links > a:visited { color: var(--ink); }
.ring__links > a:hover { background: #fff; }
.ring__links > a:hover span { text-decoration: underline; }
.ring__home { text-align: center; }
.ring__next { text-align: right; }
.ring__links small { font-weight: 700; font-size: .85rem; color: var(--accent); }
.ring__links span { font: 700 1.1rem/1.25 var(--font-display); font-variation-settings: var(--soft); color: var(--wine); }
.ring__none { background: var(--chrome) !important; }
.ring__none small { color: var(--ink-soft); }
.ring__none span { font: italic 1rem/1.4 var(--font-body); color: var(--ink-soft); }

/* ---------- Prose: the reading surface ---------- */
.prose {
  min-width: 0;
  padding: clamp(22px, 5vw, 52px);
  border: 1px solid var(--wine);
  background: var(--surface);
  box-shadow: var(--drop);
  color: var(--ink);
  font: 1.17rem/1.75 var(--font-body);
  overflow-wrap: break-word;
}
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.6rem, 3vw, 2rem); }
.prose h3 { margin-top: 1.6em; font-size: clamp(1.3rem, 2.4vw, 1.5rem); }
.prose h4 { margin-top: 1.4em; font-size: 1.2rem; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--accent); }
.prose blockquote { margin-left: 0; margin-right: 0; padding: 14px 20px; border-left: 4px solid var(--accent); background: var(--wine-tint); font-style: italic; font-size: 1.2rem; color: var(--wine); }
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: .8em; }
.prose hr { max-width: 288px; height: 8px; margin: 2.4em auto; border: 1px solid var(--ink); background: repeating-linear-gradient(90deg, var(--accent) 0 16px, var(--signal) 16px 32px, var(--teal) 32px 48px); }
.prose img { margin-left: auto; margin-right: auto; border: 1px solid var(--wine); box-shadow: var(--drop); }
.prose iframe { display: block; width: 100%; border: 1px solid var(--wine) !important; box-shadow: var(--drop); }
.prose code { padding: .05em .3em; background: var(--wine-tint); color: var(--wine); font: .92em var(--font-mono); }
.prose pre { overflow-x: auto; padding: 18px 20px; background: var(--led); box-shadow: var(--bevel-in); color: var(--signal); font: .95rem/1.55 var(--font-mono); }
.prose pre code { padding: 0; background: none; color: inherit; font: inherit; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; border: 1px solid var(--wine); font: 1rem/1.45 var(--font-ui); }
.prose th, .prose td { padding: 7px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--chrome); box-shadow: var(--bevel-out); color: var(--ink); font-weight: 700; white-space: nowrap; }
.prose tbody tr:nth-child(even) td { background: #F8EFF1; }
.prose .sample-note { padding: 8px 12px; border: 1px dashed var(--wine); background: var(--wine-tint); color: var(--wine); font: 400 .78rem/1.5 var(--font-pixel); }

/* {% card "Title", "colour" %} boxes. Colour names are kept from the old theme. */
.prose .card { padding: 18px 22px; border: 1px solid var(--wine); background: #F3ECDF; box-shadow: var(--drop); color: var(--ink); }
.prose .card > * { margin: 0; }
.prose .card > * + * { margin-top: .8em; }
.prose .card__title { font: 700 .85rem/1.3 var(--font-pixel); color: var(--wine); }
.prose .card--yellow { background: #F1F8C8; }
.prose .card--magenta { background: #FBE1EE; }
.prose .card--cyan { background: #DDF0EE; }
.prose .card--blue { background: var(--wine); color: var(--on-wine); }
.prose .card--blue .card__title { color: var(--signal); }
.prose .card--blue :is(p, li, strong, em) { color: var(--on-wine); }
.prose .card--blue a { color: var(--accent-on-wine); }

/* ---------- 404 dialog ---------- */
.dialog { max-width: 500px; margin: clamp(48px, 10vw, 120px) auto 0; }
.dialog__body { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border: 0; background: var(--chrome); }
.dialog__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); box-shadow: 2px 2px 0 var(--wine); color: #fff; font: 700 1.6rem/1 var(--font-ui); }
.dialog h1 { margin: 2px 0 6px; font-size: 1.6rem; color: var(--ink); }
.dialog p { margin: 0; }
.dialog__actions { display: flex; justify-content: center; padding: 6px 0 16px; background: var(--chrome); }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: 56px; background: var(--wine); color: var(--on-wine-soft); }
/* One row of 8px dither squares stands in for a hard top edge. */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; background: repeating-conic-gradient(var(--wine) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.site-footer__inner { max-width: var(--page); margin: 0 auto; padding: 32px var(--gutter) 36px; display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: start; }
.site-footer p { margin: 10px 0 0; max-width: 46ch; font: 1rem/1.5 var(--font-body); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 6px; }
.site-footer nav a, .site-footer nav a:visited { color: var(--on-wine); font-weight: 700; }
.site-footer small { grid-column: 1 / -1; padding-top: 14px; border-top: 1px dotted rgb(247 242 233 / .3); font-size: .9rem; }

/* 88x31 buttons. Silkscreen is drawn on an 8px grid, so 8px text stays crisp. */
.buttons88 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.b88 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  overflow: hidden;
  border: 1px solid var(--led);
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .45), inset -1px -1px 0 rgb(0 0 0 / .45);
  font: 400 8px/1.15 var(--font-pixel);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
a.b88:hover { outline: 1px solid var(--signal); outline-offset: 1px; }
.b88--site, .b88--site:visited { background: linear-gradient(90deg, var(--hot) 0 6px, var(--wine-deep) 6px); color: var(--signal); }
.b88--rss { flex-direction: row; background: var(--chrome); color: var(--ink); }
.b88--rss:visited { color: var(--ink); }
.b88--rss span { display: grid; place-items: center; height: 100%; padding: 0 8px; }
.b88--rss .b88__tab { background: var(--accent); color: #fff; }
.b88--avigard, .b88--avigard:visited { background: linear-gradient(var(--teal), #1E7F78); color: var(--ink); font-weight: 700; font-size: 8px; }
.b88--dfi, .b88--dfi:visited { background: repeating-linear-gradient(90deg, var(--ink) 0 4px, var(--surface) 4px 8px) left / 22px 100% no-repeat, var(--signal); padding-left: 20px; color: var(--ink); font-weight: 700; font-size: 16px; }
.b88--made, .b88--made:visited { background: var(--led); color: var(--signal); }
.b88--any { background: var(--chrome); color: var(--ink); }
.b88__small { font-size: 8px; opacity: .8; }

/* ==========================================================================
   Personal layer: the things that make this place mine.
   ========================================================================== */

/* ---------- Cursor: a pixel arrow with a little star ---------- */
body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 2v16l4-4 3 7 3-1.3-3-6.7h6z' fill='%23FFFDF8' stroke='%231D1418' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M18 1l1.2 3.3L22.5 5.5l-3.3 1.2L18 10l-1.2-3.3L13.5 5.5l3.3-1.2z' fill='%23FFD93B' stroke='%231D1418' stroke-width='.8'/%3E%3C/svg%3E") 2 2, auto; }

/* ---------- Wololo: player colours (Age of Empires II) ----------
   Converting swaps the 30% colour. Every dark shade keeps cream text above 10:1. */
html[data-civ="blue"]   { --wine: #16264F; --wine-deep: #0C1630; --bar-end: #2F55B8; --wine-tint: #E3E8F5; }
html[data-civ="red"]    { --wine: #4F1616; --wine-deep: #2E0B0B; --bar-end: #B32B2B; --wine-tint: #F5E3E3; }
html[data-civ="green"]  { --wine: #173B22; --wine-deep: #0B2213; --bar-end: #2E8A47; --wine-tint: #E2F0E5; }
html[data-civ="teal"]   { --wine: #0F3B3D; --wine-deep: #072325; --bar-end: #1F8C8F; --wine-tint: #DFF0F0; }
html[data-civ="purple"] { --wine: #2E1A4F; --wine-deep: #1B0E30; --bar-end: #6A3DB3; --wine-tint: #EAE3F5; }
html[data-civ="gray"]   { --wine: #2B2B30; --wine-deep: #18181B; --bar-end: #6B6B76; --wine-tint: #ECECEF; }
html[data-civ="orange"] { --wine: #4A2610; --wine-deep: #2C1607; --bar-end: #C2621F; --wine-tint: #F5EADF; }

.wololo { width: 100%; }
.convert-flash { position: fixed; inset: 0; z-index: 997; pointer-events: none; background: var(--wine); animation: convert-flash .7s ease-out forwards; }
.wololo-bubble {
  position: fixed;
  z-index: 999;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font: 700 1.05rem/1 var(--font-ui);
  pointer-events: none;
  animation: bubble-up 1.3s ease-out forwards;
}
.wololo-bubble::after { content: ""; position: absolute; left: 18px; bottom: -9px; width: 12px; height: 12px; background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
@keyframes convert-flash { from { opacity: .5; } to { opacity: 0; } }
@keyframes bubble-up { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.05); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }

/* ---------- Dialogue boxes (Deltarune / Undertale) ---------- */
.dtbox {
  max-width: 36rem;
  margin-top: 24px;
  padding: 12px 18px 14px;
  border: 3px solid #fff;
  background: #000;
  box-shadow: 0 0 0 3px #000;
  color: #fff;
  font: 400 1.5rem/1.3 var(--font-term);
}
.dtbox p, .sidebar .dtbox p { margin: 0; font: inherit; color: inherit; }
.dtbox p + p { margin-top: .3em; }
.dtbox a, .dtbox a:visited { color: #FFD93B; }
.dtbox a:hover { background: #FFD93B; color: #000; text-decoration: none; }
.dtbox--small { margin: 0 0 16px; padding: 10px 12px; font-size: 1.25rem; }
.dtbox .dtbox__meta { font-size: .85em; color: #B8B8B8; }
[data-typewriter] { cursor: pointer; }

/* ---------- Save point ---------- */
.save-row { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: clamp(32px, 5vw, 48px) auto 0; padding: 8px 20px 8px 10px; border: 3px solid #fff; background: #000; box-shadow: 0 0 0 3px #000, var(--drop); }
.savepoint { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; }
.savepoint:focus-visible { outline: 2px dotted #FFD93B; }
.savestar { width: 36px; height: 36px; filter: drop-shadow(0 0 6px rgb(255 217 59 / .75)); animation: twinkle 1.4s steps(1) infinite; }
.savepoint:hover .savestar { filter: drop-shadow(0 0 10px rgb(255 217 59 / .95)); }
.savepoint.is-saved .savestar { animation: saved .5s steps(3) 2; }
.save-row__hint { margin: 0; color: #fff; font: 400 1.35rem/1.2 var(--font-term); }
@keyframes twinkle { 0%, 100% { transform: scale(1); } 25% { transform: scale(.82); } 50% { transform: scale(1); } 75% { transform: scale(.9) rotate(45deg); } }
@keyframes saved { 50% { transform: scale(1.5); } }

.dlg {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  width: min(640px, calc(100% - 32px));
  translate: -50% 0;
  padding: 14px 20px 26px;
  border: 4px solid #fff;
  background: #000;
  box-shadow: 0 0 0 4px #000, 8px 8px 0 4px rgb(0 0 0 / .3);
  color: #fff;
  font: 400 1.6rem/1.3 var(--font-term);
  cursor: pointer;
}
.dlg p { margin: 0; }
.dlg p + p { margin-top: .3em; }
.dlg__hint { position: absolute; right: 12px; bottom: 6px; color: #A8A8A8; font: 400 .65rem/1 var(--font-pixel); }

/* ---------- Magic cursor sparkles (Trixie would approve) ---------- */
.spark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 11px;
  height: 11px;
  pointer-events: none;
  background: var(--c, #fff);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 1px rgb(29 20 24 / .9));
  animation: spark .85s ease-out forwards;
}
@keyframes spark {
  from { transform: translate(var(--x), var(--y)) scale(1) rotate(0); opacity: 1; }
  to { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + 22px)) scale(.2) rotate(90deg); opacity: 0; }
}

/* ---------- Profile ---------- */
.profile__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.avatar { display: grid; place-items: center; flex: none; width: 88px; height: 88px; padding: 4px; background: var(--chrome); box-shadow: var(--bevel-out); }
.avatar img { width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.avatar .mark { width: 70px; height: 70px; }
.profile .side-title { margin: 0; }
.sidebar .profile__pronouns { margin: 6px 0 0; font: 400 .75rem/1.3 var(--font-pixel); color: var(--signal); }
.currently { display: grid; gap: 6px; margin: 0 0 16px; padding: 10px 12px; background: var(--wine-deep); box-shadow: var(--bevel-in); }
.currently div { display: flex; gap: 10px; }
.currently dt { flex: none; min-width: 6.5em; padding-top: .3em; font: 400 .7rem/1.2 var(--font-pixel); color: var(--signal); }
.currently dd { margin: 0; font: 1rem/1.4 var(--font-body); color: var(--on-wine); }
.profile__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Control panel ---------- */
.sidebar .control__row { margin: 0 0 10px; font: 1rem/1.4 var(--font-ui); }
.check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .95rem; cursor: pointer; }
.check input { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin: 0; appearance: none; background: var(--surface); box-shadow: var(--bevel-in); cursor: pointer; }
.check input:checked::before { content: ""; width: 8px; height: 4px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }

/* ---------- Faves (sidebar) ---------- */
.fave-chips { display: grid; gap: 7px; list-style: none; margin: 0 0 12px; padding: 0; }
.fave-chip { display: block; padding: 6px 10px; border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 .95rem/1.3 var(--font-ui); text-decoration: none; transition: transform .1s, box-shadow .1s; }
.fave-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); text-decoration: none; }
.fave-chip--dialogue, .fave-chip--dialogue:visited, .fave-chip--dialogue:hover { border: 2px solid #fff; outline: 1px solid #000; background: #000; color: #fff; font: 400 1.2rem/1.1 var(--font-term); text-transform: uppercase; }
.fave-chip--dialogue::before { content: "♥ "; color: #FF2B2B; }
.fave-chip--sparkle, .fave-chip--sparkle:visited, .fave-chip--sparkle:hover { background: linear-gradient(90deg, #CFE4FF, #EAD8FF, #FFE0EE); color: #2E1A4F; }
.fave-chip--sparkle::before { content: "✦ "; color: #8A4FD8; }
.fave-chip--comic, .fave-chip--comic:visited, .fave-chip--comic:hover { background: radial-gradient(#E0B800 1px, transparent 1.4px) 0 0 / 6px 6px, #FFE14D; color: #000; font-style: italic; text-transform: uppercase; }
.fave-chip--terminal, .fave-chip--terminal:visited, .fave-chip--terminal:hover { background: #071209; color: #59FF8A; font: 400 1.2rem/1.1 var(--font-term); text-shadow: 0 0 4px rgb(89 255 138 / .5); }
.fave-chip--terminal::before { content: "> "; }
.fave-chip--parchment, .fave-chip--parchment:visited, .fave-chip--parchment:hover { background: #EADBB7; color: #3B2410; font: italic 700 1rem/1.3 var(--font-body); }
.fave-chip--stone, .fave-chip--stone:visited, .fave-chip--stone:hover { border-color: #C9A24A; background: linear-gradient(#4A4137, #2F2922); color: #E8C66A; font-family: var(--font-body); font-variant: small-caps; }
.fave-chip--grim, .fave-chip--grim:visited, .fave-chip--grim:hover { border-left: 5px solid #B3242B; background: #141516; color: #E2DCCF; font-family: var(--font-body); font-variant: small-caps; letter-spacing: .04em; }
.sidebar .more-link { margin: 0; font: 700 .95rem/1.4 var(--font-ui); }

/* ---------- Terminal (Fallout-ish green phosphor) ---------- */
.terminal {
  position: relative;
  overflow: hidden;
  margin-top: 3px;
  padding: 14px 16px;
  background: #071209;
  box-shadow: var(--bevel-in);
  color: #59FF8A;
  font: 400 1.3rem/1.2 var(--font-term);
  text-shadow: 0 0 5px rgb(89 255 138 / .55);
}
.terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px); }
.terminal__head { margin: 0; color: inherit; font: inherit; letter-spacing: 0; text-transform: uppercase; }
.terminal p, .sidebar .terminal p { margin: 0; font: inherit; }
.terminal__rule { overflow: hidden; white-space: nowrap; }
.terminal__list { margin: 6px 0; }
.terminal__list div { display: flex; align-items: baseline; gap: 6px; }
.terminal__list dt { display: flex; flex: 1; gap: 6px; text-transform: uppercase; }
.terminal__list dt::after { content: ""; flex: 1; border-bottom: 2px dotted rgb(89 255 138 / .45); transform: translateY(-5px); }
.terminal__list dd { margin: 0; text-transform: uppercase; }
.terminal__cursor { animation: term-cursor 1s steps(1) infinite; }
@keyframes term-cursor { 50% { opacity: 0; } }

/* ---------- Journal (Morrowind-style parchment) ---------- */
.parchment {
  margin-top: 3px;
  padding: 22px clamp(18px, 4vw, 30px);
  background: radial-gradient(ellipse at center, transparent 55%, rgb(122 85 40 / .22)), #EADBB7;
  box-shadow: inset 0 0 0 4px #EADBB7, inset 0 0 0 5px #7A5528;
  color: #2B1D0E;
  font-family: var(--font-body);
}
.parchment__title { margin: 0 0 8px; color: #5A3A14; font: italic 700 1.7rem/1.1 var(--font-body); font-variant: small-caps; letter-spacing: .04em; text-align: center; }
.parchment__entry { padding: 10px 0; border-top: 1px solid rgb(122 85 40 / .35); }
.parchment__entry time { display: block; color: #6B4416; font: 700 1rem/1.3 var(--font-body); font-variant: small-caps; }
.parchment__entry p { margin: 2px 0 0; font: 1.05rem/1.55 var(--font-body); }

/* ---------- Stamps and blinkies ---------- */
.stamps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.stamps img { display: block; width: auto; height: 56px; }
.stamps a { display: block; transition: transform .12s; }
.stamps a:hover { transform: translateY(-2px) rotate(-2deg); }
.sidebar .stamps__note, .stamps__note { margin: -6px 0 14px; font: italic .85rem/1.4 var(--font-body); color: var(--ink-soft); }
.blinkies { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.blinkies img { display: block; }
.blinkie {
  --a: #000; --fa: #fff; --b: #fff; --fb: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 20px;
  overflow: hidden;
  border: 1px solid #000;
  background-color: var(--a);
  color: var(--fa);
  font: 400 8px/1 var(--font-pixel);
  white-space: nowrap;
  animation: blinkie 1.4s steps(1) infinite;
}
.blinkie:nth-child(3n + 2) { animation-delay: -.45s; }
.blinkie:nth-child(3n) { animation-delay: -.9s; }
@keyframes blinkie { 0% { background-color: var(--a); color: var(--fa); } 50% { background-color: var(--b); color: var(--fb); } }
.blinkie--sky { --a: #7FB8F0; --fa: #1D1418; --b: #3B2A7A; --fb: #FFFFFF; }
.blinkie--lilac { --a: #D9A6E6; --fa: #1D1418; --b: #6A2C8A; --fb: #FFFFFF; }
.blinkie--violet { --a: #B48CE0; --fa: #1D1418; --b: #2E1A4F; --fb: #FFD6F5; }
.blinkie--sunset { --a: #F5B25C; --fa: #1D1418; --b: #C2361F; --fb: #FFFFFF; }
.blinkie--ralsei { --a: #2E8A47; --fa: #FFFFFF; --b: #F7A8C8; --fb: #1D1418; }
.blinkie--soul { --a: #000000; --fa: #FFFFFF; --b: #000000; --fb: #FF4545; }
.blinkie--cyber { --a: #0B2B3A; --fa: #5FF2FF; --b: #5FF2FF; --fb: #0B2B3A; }
.blinkie--holly { --a: #B3242B; --fa: #FFFFFF; --b: #1E6B3A; --fb: #FFFFFF; }
.blinkie--terminal { --a: #071209; --fa: #59FF8A; --b: #59FF8A; --fb: #071209; }
.blinkie--gold { --a: #EADBB7; --fa: #2B1D0E; --b: #5A3A14; --fb: #F3E2B8; }
.blinkie--civ { --a: #2F55B8; --fa: #FFFFFF; --b: #B32B2B; --fb: #FFFFFF; }
.blinkie--comic { --a: #FFE14D; --fa: #000000; --b: #000000; --fb: #FFE14D; }
.blinkie--frog { --a: #3FA34D; --fa: #000000; --b: #CFF29A; --fb: #173B22; }
.blinkie--sky, .blinkie--lilac, .blinkie--violet { background-image: radial-gradient(rgb(255 255 255 / .8) .6px, transparent 1px); background-size: 7px 7px; }
.blinkie--soul::before { content: "♥"; margin-right: 5px; color: #FF2B2B; }

/* ---------- Link back ---------- */
.linkback__button { margin: 0 0 12px; }
.linkback__label { display: block; margin-bottom: 4px; font-size: .9rem; font-weight: 700; }
.linkback__code { min-height: 88px; resize: vertical; font: .8rem/1.4 var(--font-mono); word-break: break-all; }
.linkback .btn { margin-top: 8px; }
.sidebar .linkback__feed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font: .95rem/1.4 var(--font-ui); }
.win__body--flush { padding: 0; }
.chatbox { display: block; width: 100%; height: 420px; border: 0; }
.b88-img { display: block; width: 88px; height: 31px; }

/* ---------- Mascot: your art, breaking out of the hero window ---------- */
.hero-win { position: relative; }
.mascot { position: absolute; right: -24px; bottom: -56px; z-index: 6; width: auto; max-height: min(360px, 70%); pointer-events: none; filter: drop-shadow(4px 4px 0 rgb(29 20 24 / .35)); }

/* ---------- Shrine ---------- */
.shrine { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: start; gap: 24px; }
.shrine__item { display: flex; flex-direction: column; scroll-margin-top: 90px; }
.skin { position: relative; flex: 1; margin-top: 3px; padding: 22px 24px 26px; }
.skin h2 { margin: 0; font-size: 1.9rem; }
.skin__line { margin: 8px 0 0; }
.skin__label { margin: 20px 0 10px; font: 400 .75rem/1.3 var(--font-pixel); letter-spacing: 0; }
.skin__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.skin__note { font-size: .85em; opacity: .85; }
.skin__pending { margin: 0; }
.skin__words { margin: 16px 0 0; }
.skin__gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.skin__gallery img { display: block; width: auto; max-width: 100%; max-height: 180px; }
.skin .wololo { width: auto; margin-top: 18px; }

/* Undertale / Deltarune: black box, white border, red soul as the menu cursor */
.skin--dialogue { border: 4px solid #fff; background: #000; box-shadow: 0 0 0 3px #000; color: #fff; font: 400 1.35rem/1.3 var(--font-term); }
.skin--dialogue h2 { color: #fff; font: 400 2.3rem/1 var(--font-term); text-transform: uppercase; letter-spacing: .02em; }
.skin--dialogue .skin__label { color: #FFD93B; }
.skin--dialogue .skin__list { flex-direction: column; gap: 4px; }
.skin--dialogue .skin__list li { position: relative; padding-left: 1.5em; font-size: 1.6rem; text-transform: uppercase; }
.skin--dialogue .skin__list li::before { content: "♥"; position: absolute; left: 0; color: #FF2B2B; opacity: 0; }
.skin--dialogue .skin__list li:hover::before, .skin--dialogue .skin__list:not(:hover) li:first-child::before { opacity: 1; }
.skin--dialogue .skin__note { color: #B8B8B8; text-transform: none; }

/* My Little Pony: pastel sky with glitter */
.skin--sparkle {
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2px) 0 0 / 38px 38px,
    radial-gradient(circle at 70% 80%, #fff 0 1px, transparent 1.5px) 0 0 / 27px 27px,
    linear-gradient(135deg, #DCEBFF, #F1E2FF 50%, #FFE6F0);
  color: #2E1A4F;
}
.skin--sparkle h2 { color: #5B2A9E; font: italic 800 2.1rem/1.05 var(--font-display); text-shadow: 2px 2px 0 #fff, 3px 3px 0 #FF7EBD; }
.skin--sparkle .skin__line { font: italic 1.1rem/1.5 var(--font-body); }
.skin--sparkle .skin__label { color: #5B2A9E; }
.skin--sparkle .skin__list li { padding: 8px 14px; border: 2px solid #2E1A4F; background: var(--pick, #fff); box-shadow: 3px 3px 0 #2E1A4F; color: #1D1418; font-weight: 700; }
.skin--sparkle .skin__list li::before { content: "✦ "; }
.skin--sparkle .skin__note { display: block; font: italic 400 .85rem/1.3 var(--font-body); opacity: 1; }

/* My Hero Academia: comic halftone and a shout bubble */
.skin--comic { border: 3px solid #000; background: radial-gradient(#E0B800 1.2px, transparent 1.6px) 0 0 / 8px 8px, #FFE14D; color: #000; }
.skin--comic h2 { color: #fff; font: italic 900 2.2rem/1 var(--font-display); text-transform: uppercase; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
.skin--comic .skin__line { display: inline-block; margin-top: 14px; padding: 8px 16px; border: 3px solid #000; background: #fff; box-shadow: 4px 4px 0 #000; font: italic 900 1.3rem/1 var(--font-ui); text-transform: uppercase; transform: rotate(-3deg); }
.skin--comic .skin__list li { padding: 8px 14px; border: 3px solid #000; background: #3FA34D; box-shadow: 3px 3px 0 #000; color: #000; font-weight: 700; }
.skin--comic .skin__list li:nth-child(2n) { background: #9ACD63; }
.skin--comic .skin__note { display: block; font-size: .85rem; opacity: 1; }

/* Fallout: green phosphor terminal */
.skin--terminal { overflow: hidden; background: #071209; color: #59FF8A; font: 400 1.4rem/1.25 var(--font-term); text-shadow: 0 0 5px rgb(89 255 138 / .5); }
.skin--terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px); }
.skin--terminal h2 { color: #59FF8A; font: 400 2rem/1 var(--font-term); text-transform: uppercase; }
.skin--terminal .skin__line::before { content: "> "; }
.skin--terminal .skin__label { color: #59FF8A; }
.skin--terminal .skin__pending::after { content: "_"; animation: term-cursor 1s steps(1) infinite; }

/* The Elder Scrolls: parchment journal */
.skin--parchment { background: radial-gradient(ellipse at center, transparent 55%, rgb(122 85 40 / .25)), #EADBB7; box-shadow: inset 0 0 0 5px #EADBB7, inset 0 0 0 6px #7A5528; color: #2B1D0E; font-family: var(--font-body); }
.skin--parchment h2 { color: #5A3A14; font: italic 700 2rem/1.05 var(--font-body); font-variant: small-caps; letter-spacing: .03em; }
.skin--parchment .skin__line { font-style: italic; }
.skin--parchment .skin__label { color: #6B4416; }
.skin--parchment .skin__list { flex-direction: column; gap: 6px; }
.skin--parchment .skin__list li { padding-bottom: 6px; border-bottom: 1px solid rgb(122 85 40 / .35); font-size: 1.2rem; font-weight: 700; font-variant: small-caps; }

/* Age of Empires II: stone blocks and gold trim */
.skin--stone {
  border: 3px ridge #C9A24A;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .1) 0 2px, transparent 2px 48px),
    linear-gradient(#4A4137, #2F2922);
  color: #F3E9D2;
  font-family: var(--font-body);
}
.skin--stone h2 { color: #E8C66A; font: 700 2rem/1.05 var(--font-body); font-variant: small-caps; text-shadow: 2px 2px 0 #000; }
.skin--stone .skin__line { font-size: 1.3rem; font-style: italic; }
.skin--stone .skin__label { color: #E8C66A; }

/* Myth: grim, dark, a line of red */
.skin--grim { border-top: 3px solid #B3242B; background: linear-gradient(180deg, #1A1B1D, #0E0F10); color: #E2DCCF; font-family: var(--font-body); }
.skin--grim h2 { color: #E2DCCF; font: 700 2rem/1.05 var(--font-body); font-variant: small-caps; letter-spacing: .08em; text-shadow: 0 2px 0 #B3242B; }
.skin--grim .skin__line { color: #B9B0A2; font-style: italic; }
.skin--grim .skin__label { color: #D9625F; }
.skin--grim .skin__pending { color: #B9B0A2; font-style: italic; }

@media (max-width: 760px) {
  .dtbox { font-size: 1.3rem; }
  .dlg { font-size: 1.35rem; }
  .mascot { right: -8px; bottom: -30px; max-height: 180px; }
  .skin { padding: 18px; }
}

/* ---------- Shrine pictures (found GIFs, credited) ---------- */
.pic { margin: 0; }
.pic img { display: block; max-width: 100%; height: auto; }
.pic img.is-pixel { image-rendering: pixelated; }
.pic figcaption { margin-top: 3px; font: 400 .62rem/1.3 var(--font-pixel); opacity: .85; }
.pic figcaption a { color: inherit; }
.skin__pick-pic { margin: 6px 0 8px; }
.nowrap { white-space: nowrap; }
.skin__line cite { display: block; margin-top: 4px; font-style: normal; font-variant: small-caps; font-weight: 700; }
.skin__line cite::before { content: "— "; }

/* Favourites that carry a picture stack it above the name. */
.skin__list li.has-pic { display: flex; flex-direction: column; align-items: flex-start; }
/* Deltarune: the sprite stands to the right of the menu, like a battle sprite. */
.skin--dialogue .skin__list:has(.has-pic) { min-height: 230px; padding-right: 160px; }
.skin--dialogue .skin__list li.has-pic { display: block; }
.skin--dialogue .skin__pick-pic { position: absolute; top: 0; left: calc(100% + 20px); width: 133px; margin: 0; color: #B8B8B8; text-align: center; }

.skin--sparkle .skin__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.skin--sparkle .skin__pick-pic { align-self: stretch; margin: 0 0 8px; padding: 4px; background: #fff; border: 2px solid #2E1A4F; }
.skin--sparkle .skin__pick-pic img { margin: 0 auto; }

.skin--comic .skin__list li { background: var(--pick, #3FA34D); }
.skin--comic .skin__list li:nth-child(2n) { background: var(--pick, #9ACD63); }

.skin--terminal .skin__list { flex-direction: column; gap: 6px; }
.skin--terminal .skin__list li::before { content: "> "; }
.skin--terminal .skin__list li.has-pic::before { content: none; }
.skin--terminal .skin__list li.has-pic .skin__name::before { content: "> "; }
.skin--terminal .skin__pick-pic { order: 2; margin: 6px 0 4px 1.2em; }
.skin--terminal .skin__pick-pic img { border: 2px solid #59FF8A; box-shadow: 0 0 8px rgb(89 255 138 / .35); }

.skin--stone .skin__list li { padding: 6px 12px; border: 2px ridge #C9A24A; background: rgb(0 0 0 / .35); color: #F3E9D2; font-size: 1.05rem; font-variant: small-caps; font-weight: 700; }

/* Homestuck: grey MSPA page, Courier, a pesterlog in a dashed box */
.skin--pesterlog { background: #EEEEEE; color: #000; font: 700 1rem/1.5 "Courier New", Courier, monospace; }
.skin--pesterlog h2 { color: #000; font: 700 2rem/1.1 "Courier New", Courier, monospace; letter-spacing: -.02em; }
.skin--pesterlog .skin__line { margin-top: 12px; padding: 10px 14px; border: 1px dashed #A0A0A0; background: #fff; color: #545454; }
.skin--pesterlog .skin__label { color: #545454; }
.skin--pesterlog .skin__pending { color: var(--accent); }
/* Chumroll rows: each character's Pesterchum colour as a bar, their handle underneath. */
.skin--pesterlog .skin__list { position: relative; flex-direction: column; gap: 6px; }
.skin--pesterlog .skin__list li { padding: 6px 10px; border: 1px solid #C6C6C6; border-left: 7px solid var(--pick, #A0A0A0); background: #fff; }
.skin--pesterlog .skin__name { font-size: 1.05rem; }
.skin--pesterlog .skin__note { display: block; color: #545454; font-size: .85rem; opacity: 1; }
.skin--pesterlog .skin__pick-pic { order: 2; margin: 8px 0 2px; color: #545454; }
.skin--pesterlog .skin__pick-pic img { width: 100%; max-width: 260px; border: 1px solid #A0A0A0; }
@media (min-width: 761px) {
  .skin--pesterlog .skin__list:has(.has-pic) { min-height: 190px; padding-right: 236px; }
  .skin--pesterlog .skin__pick-pic { position: absolute; top: 0; right: 0; width: 220px; margin: 0; }
}
.fave-chip--pesterlog, .fave-chip--pesterlog:visited, .fave-chip--pesterlog:hover { background: #EEEEEE; color: #000; font: 700 .95rem/1.3 "Courier New", Courier, monospace; }
.fave-chip--pesterlog::before { content: "==> "; color: #0715CD; }

/* ---------- Last.fm: now_playing.m3u, an old media-player readout ---------- */
.amp__body { margin-top: 3px; padding: 12px; background: var(--led); box-shadow: var(--bevel-in); color: #CFC3C8; }
.amp p { margin: 0; }
.amp__screen { display: flex; align-items: center; gap: 10px; }
.amp__art { flex: none; width: 56px; height: 56px; object-fit: cover; box-shadow: 0 0 0 1px rgb(217 242 58 / .45); }
.amp__readout { flex: 1; min-width: 0; }
.amp .amp__state { font: 400 .62rem/1.3 var(--font-pixel); color: var(--hot); }
.amp .amp__track { margin-top: 2px; font: 400 1.4rem/1 var(--font-term); color: var(--signal); text-shadow: 0 0 6px rgb(217 242 58 / .45); overflow-wrap: anywhere; }
.amp__track a, .amp__track a:visited { color: inherit; text-decoration: none; }
.amp .amp__artist { font: 400 1.15rem/1.1 var(--font-term); color: #8FE3DA; overflow-wrap: anywhere; }
.amp__track a:hover, .amp__list a:hover { background: var(--signal); color: var(--ink); text-shadow: none; }
.amp__eq { display: flex; flex: none; align-items: flex-end; gap: 2px; height: 24px; }
.amp__eq i { width: 4px; height: 25%; background: var(--signal); box-shadow: 0 0 4px rgb(217 242 58 / .5); }
.amp.is-playing .amp__eq i { animation: eq .9s ease-in-out infinite alternate; }
.amp.is-playing .amp__eq i:nth-child(2) { animation-duration: .6s; }
.amp.is-playing .amp__eq i:nth-child(3) { animation-duration: 1.1s; }
.amp.is-playing .amp__eq i:nth-child(4) { animation-duration: .75s; }
.amp.is-playing .amp__eq i:nth-child(5) { animation-duration: .95s; }
@keyframes eq { from { height: 15%; } to { height: 100%; } }
.amp__list { margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed rgb(217 242 58 / .3); list-style: none; counter-reset: amp; font: 400 1.1rem/1.15 var(--font-term); }
.amp__list:empty { display: none; }
.amp__list li { display: flex; align-items: baseline; gap: 6px; counter-increment: amp; }
.amp__list li + li { margin-top: 4px; }
.amp__list li::before { content: counter(amp, decimal-leading-zero) "."; flex: none; color: var(--hot); }
.amp__list a, .amp__list a:visited { min-width: 0; color: #E6DCE0; text-decoration: none; overflow-wrap: anywhere; }
.amp__ago { flex: none; margin-left: auto; color: #A0939A; }

/* ---------- About: side column and the random pal ---------- */
.about-side { display: grid; align-content: start; gap: 24px; min-width: 0; }
.about-side .margin-notes { position: static; }
/* The pal floats at the bottom right of the About box, so text wraps around it,
   and a negative margin lets it lean over the right edge. The box's bottom
   padding moves onto the last paragraph, so the pal stands on the bottom edge
   while every line of text still wraps around it. */
.about-prose { --pad: clamp(22px, 5vw, 52px); display: flow-root; padding-bottom: 0; }
.about-prose > :last-child { margin-bottom: var(--pad); }
.about-prose > .pal { position: relative; z-index: 1; float: right; margin: 0 calc(-1 * var(--pad) - 18px) -4px 18px; }
.prose .pal img { display: block; width: auto; height: 210px; margin: 0; border: 0; box-shadow: none; filter: drop-shadow(3px 3px 0 rgb(58 23 38 / .3)); }
.about-prose > .pal--photo { margin: 6px calc(-1 * var(--pad) - 14px) 14px 18px; transform: rotate(4deg); }
.prose .pal--photo img { width: 200px; height: auto; border: 6px solid #fff; border-bottom-width: 22px; box-shadow: var(--drop); filter: none; }
.pal__rare { position: absolute; top: -10px; right: -12px; padding: 3px 6px 2px; background: var(--signal); color: var(--ink); font: 700 .7rem/1.2 var(--font-pixel); box-shadow: 2px 2px 0 var(--ink); transform: rotate(8deg); animation: blink 1s linear 5; }

/* ---------- The vault ---------- */
.vault { max-width: 760px; }
.vault__screen { margin: 0 0 18px; }
.vault__form label { display: block; margin-bottom: 6px; font: 700 .95rem/1.4 var(--font-ui); }
.vault__row { display: flex; gap: 8px; }
.vault__row .field { flex: 1; min-width: 0; }
.vault__status { min-height: 1.5em; margin: 10px 0 0; font: .95rem/1.5 var(--font-ui); }
.vault__status.is-error { color: var(--accent); font-weight: 700; }
.vault__status:empty { display: none; }
.vault__elsewhere { margin: 0 0 14px; font: .95rem/1.5 var(--font-ui); }
.vault__form.is-shaking { animation: shake .35s linear; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.vault__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vault__file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); }
.vault__file-name { flex: 1 1 220px; margin: 0; font: 700 1rem/1.35 var(--font-ui); overflow-wrap: anywhere; }
.vault__file-name small { display: block; font: 400 .7rem/1.5 var(--font-pixel); color: var(--ink-soft); }
.vault__lock-tag { padding: 2px 6px 1px; background: var(--wine); color: var(--on-wine); font: 400 .7rem/1.3 var(--font-pixel); }
.vault__file-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vault__viewer { margin-top: 18px; }
.vault__viewer iframe { display: block; width: 100%; height: min(80vh, 820px); border: 0; background: #fff; box-shadow: var(--bevel-in); }
.vault__viewer p { margin: 8px 0 0; font: .95rem/1.5 var(--font-ui); }
.vault__relock { margin-top: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .journal { grid-template-columns: minmax(0, 1fr); }
  .sidebar { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .reading { grid-template-columns: minmax(0, 1fr); }
  .margin-notes { position: static; }
  .about-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  /* Less lean on phones, so nothing pokes past the screen edge. */
  .about-prose > .pal { margin-right: calc(-1 * var(--pad) + 2px); }
  .about-prose > .pal--photo { margin-right: calc(-1 * var(--pad) + 8px); }
  .prose .pal img { height: 150px; }
  .prose .pal--photo img { width: 150px; height: auto; border-width: 4px 4px 16px; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  html { scroll-padding-top: 16px; }
  .masthead { position: relative; }
  .masthead__inner { padding-top: 12px; padding-bottom: 10px; }
  .wordmark { font-size: 1.2rem; }
  .mainnav { width: 100%; }
  .mainnav .btn { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
  .mainnav .btn--hot { margin-left: 0; }

  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 240px; order: -1; justify-self: start; }
  .burst { left: auto; right: -42%; bottom: 8%; width: 112px; }
  .burst span { padding: 20px; font-size: .7rem; }
  .hero__lede { font-size: 1.1rem; }
  .hero__actions .btn { flex: 1 1 auto; }

  .search { flex-wrap: wrap; gap: 6px; }

  .entry, .entry--feature { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
  .entry__margin { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 0 12px; border-right: 0; border-bottom: 2px solid var(--accent); }
  .entry--feature .entry__margin { border-bottom-color: var(--accent-on-wine); }

  .archive__list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .archive__list time { padding: 0; border: 0; }

  .ring__links { grid-template-columns: minmax(0, 1fr); }
  .ring__home, .ring__next { text-align: left; }

  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { overflow-x: auto; }
}

/* ---------- Print ---------- */
@media print {
  html, body { background: #fff; color: #000; }
  .backdrop, .masthead, .margin-notes, .ring, .site-footer, .dlg, .save-row, .spark, .back-link, .hero__art, .marquee, .filters, .sidebar, .win__bar { display: none !important; }
  .win { padding: 0; box-shadow: none; background: none; }
  .post-head, .hero { background: none; color: #000; padding: 0; }
  .post-head::before, .hero::before { display: none; }
  .post-head h1, .hero__title, .post-deck, .meta, .byline { color: #000; text-shadow: none; }
  .reading { display: block; }
  .prose { padding: 0; border: 0; box-shadow: none; background: none; }
}