:root {
  --bg: #000000;
  --text: #ededed;
  --soft: #a1a1a1;
  --muted: #8a8a8a;
  --faint: #4d4d4d;
  --line: #1f1f1f;
  --btn: #1a1a1a;
  --btn-line: #2a2a2a;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --z: 1;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: #ffffff; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }

/* the whole layout scales up on big screens so it never looks lost */
.page { zoom: var(--z); min-height: calc(100vh / var(--z)); max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; position: relative; }
@media (min-width: 1441px) {
  .page { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (min-width: 1900px) { :root { --z: 1.2; } }
@media (min-width: 2300px) { :root { --z: 1.4; } }
@media (min-width: 2800px) {
  :root { --z: 1.65; }
  /* slot for the double-size player (550×696 real pixels) */
  .page #winamp { width: calc(550px / var(--z)); height: calc(696px / var(--z)); }
  .page #winamp-anchor { width: calc(275px / var(--z)); height: calc(348px / var(--z)); }
}
@media (min-width: 3300px) { :root { --z: 1.9; } }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* grid shell: the same flex bases in header and body keep the vertical lines aligned */
.row { display: flex; flex-wrap: wrap; }
.col-side { flex: 1 0 240px; box-sizing: border-box; border-right: 1px solid var(--line); }
.col-rest { flex: 999 1 560px; min-width: 0; display: flex; flex-wrap: wrap; }
.col-feed { flex: 999 1 480px; min-width: 0; }
.col-rail { flex: 1 0 320px; box-sizing: border-box; border-left: 1px solid var(--line); }

header.row { border-bottom: 1px solid var(--line); }
/* the "a" logo in the header, links home */
.brand { display: inline-flex; align-items: center; color: var(--text); }
.brand:hover { color: #ffffff; }
.brand .logo { display: block; }
header .col-side { height: 56px; padding: 0 20px; display: flex; align-items: center; gap: 10px; }
header .col-feed { height: 56px; box-sizing: border-box; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
header .col-rail { height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.btn {
  height: 32px; padding: 0 10px;
  background: var(--btn); color: var(--soft);
  border: 1px solid var(--btn-line); border-radius: 6px;
  font-family: var(--mono); font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center;
}
.btn:hover { background: #222222; color: var(--text); }

.body { flex: 1; }

nav.col-side { padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
nav a {
  height: 36px; padding: 0 10px; border-radius: 6px;
  display: flex; align-items: center;
  border: 1px solid transparent; color: var(--muted); font-size: 13px;
}
nav a[aria-current="page"] { background: var(--btn); border-color: var(--btn-line); color: var(--text); }
nav a.nav-minor { margin-top: 8px; height: 30px; font-size: 12px; color: var(--faint); }
nav a.nav-minor[aria-current="page"] { color: var(--text); }

main.col-feed { display: flex; flex-direction: column; }
article { padding: 28px 32px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
article time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
article p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 600px; color: var(--soft); }
article p.first { color: var(--text); }
.img-ph {
  height: 240px; max-width: 600px; margin-top: 4px;
  border: 1px solid var(--line); background: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--faint);
}
/* post pictures (posts.js): one wide, or a two-column grid */
.post-images { max-width: 600px; margin-top: 4px; display: grid; gap: 6px; }
.post-images.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-images a { display: block; border: 1px solid var(--line); background: #0a0a0a; overflow: hidden; }
.post-images img { display: block; width: 100%; height: auto; }
.post-images.many img { aspect-ratio: 1; object-fit: cover; height: 100%; }
article p a { color: var(--text); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; overflow-wrap: anywhere; }
article p a:hover { text-decoration-color: var(--text); }
/* Markdown in posts (markdown.js) */
.md :is(h2, h3, h4) { margin: 6px 0 0; font-weight: 500; letter-spacing: -0.01em; color: var(--text); max-width: 600px; }
.md h2 { font-size: 20px; }
.md h3 { font-size: 17px; }
.md h4 { font-size: 15px; }
.md :is(ul, ol) { margin: 0; padding-left: 22px; max-width: 580px; color: var(--soft); font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; gap: 2px; }
.md blockquote { margin: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--btn-line); max-width: 586px; display: flex; flex-direction: column; gap: 8px; }
.md blockquote p { color: var(--muted); }
.md code { font-family: var(--mono); font-size: 0.88em; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: #0a0a0a; color: var(--text); }
.md pre { margin: 0; max-width: 600px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #0a0a0a; overflow-x: auto; }
.md pre code { padding: 0; border: 0; background: none; font-size: 13px; line-height: 1.6; white-space: pre; }
.md hr { width: 100%; max-width: 600px; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.md strong { color: var(--text); font-weight: 500; }
.md li a, .md blockquote a, .md h2 a, .md h3 a { color: var(--text); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; }
.md :is(h5, h6) { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--text); }
.md h6 { color: var(--soft); }
.md p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 600px; color: var(--soft); }
.md p.first { color: var(--text); }
.md p a, .md td a { color: var(--text); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; overflow-wrap: anywhere; }
.md img.md-img { max-width: min(100%, 600px); height: auto; border: 1px solid var(--line); border-radius: 4px; vertical-align: middle; }
.md p img.md-img:only-child { display: block; }
.md li.task { list-style: none; margin-left: -20px; }
.md li.task input { margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--soft); }
.md :is(ul, ol) :is(ul, ol) { margin-top: 2px; }
.md .md-table { max-width: 600px; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.md table { width: 100%; border-collapse: collapse; font-size: 14px; }
.md th, .md td { padding: 7px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; color: var(--soft); vertical-align: top; }
.md th { color: var(--text); font-weight: 500; background: #0a0a0a; }
.md tr > :last-child { border-right: 0; }
.md tbody tr:last-child td { border-bottom: 0; }
.md .md-alert { max-width: 586px; padding: 8px 14px; border-left: 3px solid var(--muted); border-radius: 0 6px 6px 0; background: #070707; display: flex; flex-direction: column; gap: 6px; }
.md .md-alert-title { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.md .md-alert-note { border-left-color: #4a7bd8; }
.md .md-alert-tip { border-left-color: #3f9b57; }
.md .md-alert-important { border-left-color: #8a63d2; }
.md .md-alert-warning { border-left-color: #c49a2c; }
.md .md-alert-caution { border-left-color: #d24f4f; }
.md details { max-width: 600px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; gap: 8px; }
.md details > summary { cursor: pointer; color: var(--text); }
.md kbd { font-family: var(--mono); font-size: 0.85em; padding: 1px 6px; border: 1px solid var(--btn-line); border-bottom-width: 2px; border-radius: 4px; background: #0a0a0a; color: var(--text); }
.md mark { background: #3a3415; color: var(--text); padding: 0 2px; }
.md .fn-ref a { font-family: var(--mono); font-size: 11px; color: var(--muted); text-decoration: none; }
.md .footnotes { max-width: 600px; font-size: 13px; color: var(--muted); }
.md .footnotes ol, .md .footnotes p { font-size: 13px; }
.md .fn-back { text-decoration: none; color: var(--muted); }
.md pre[data-lang] { position: relative; }
.md pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 6px; right: 10px; font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: lowercase; }

/* post cards (posts.js): title first, the rest after "Show more" */
article.card { gap: 8px; }
.card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: start; }
.card-meta { grid-column: 1; display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card-meta time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card-count { color: var(--faint); }
.card-title { grid-column: 1; margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; color: var(--soft); max-width: 600px; overflow-wrap: anywhere; }
.card.newest .card-title, .card.open .card-title { color: var(--text); }
.card-title button { padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card-title button:hover { color: #fff; }
.card-thumb { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.card.open .card-thumb { display: none; }
.card-body { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.card-body[hidden] { display: none; }
.card-more { align-self: flex-start; padding: 0; background: none; border: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; }
.card-more:hover { color: var(--text); }
@media (max-width: 799px) { .card-thumb { width: 56px; height: 56px; } }
.stream-more { padding: 20px 32px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.stream-more[hidden] { display: none; }
/* archive views (site.js): Note shows posts in full, Photo a gallery */
#archive-list[hidden], #archive-notes[hidden], #archive-gallery[hidden], #archive-view-head[hidden] { display: none; }
a.permalink { align-self: flex-start; color: inherit; }
a.permalink:hover time { color: var(--text); }
.gallery { padding: 4px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.gallery .tile { display: block; aspect-ratio: 1; overflow: hidden; background: #0a0a0a; border: 1px solid var(--line); }
.gallery .tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.15s; }
.gallery .tile:hover img { opacity: 0.8; }
.gallery .month { grid-column: 1 / -1; border: 0; }
@media (max-width: 799px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

aside.col-rail { display: flex; flex-direction: column; position: relative; }
.cell { padding: 28px 24px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; height: 50px; }
.cell p { margin: 0; line-height: 1.6; color: var(--soft); }
/* bio and follow cells: fixed so the rail rows land on the archive's 52px grid */
.cell.who { height: 114px; }
.cell.follow { height: 59px; }
.cell .btn { align-self: flex-start; font-family: 'Geist', system-ui, sans-serif; font-size: 13px; padding: 0 12px; }
.links { display: flex; flex-direction: column; height: 207px; }
.links a { padding: 16px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13px; }
.links a span:last-child { color: var(--faint); }
.links a .logo { height: 14px; width: auto; align-self: center; }
/* archive: link rows share the 52px grid of the post rows so their lines meet */
.links.grid52 { height: auto; }
.links.grid52 a { box-sizing: border-box; height: 52px; padding: 0 24px; align-items: center; }

.player { padding: 24px 0; display: flex; justify-content: center; }
#winamp { width: 275px; height: 348px; position: relative; }
/* Webamp centres itself in this box; on big screens it is the 1x size in the slot's corner */
#winamp-anchor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* Webamp, locked down (player.js lock()): the windows can be dragged as in
   Winamp, and only play, pause, stop, volume, balance, close, the EQ button
   and the equalizer's own controls respond. Everything else (prev, next,
   eject, shuffle, repeat, seek, the playlist, the other title-bar buttons,
   the O/A/I/D/V bar, the logo) does nothing: a click on it lands on the
   window frame behind, which only starts a drag. */
#webamp #main-window *,
#webamp #playlist-window *,
#webamp #equalizer-window * { pointer-events: none !important; }
/* the frames and title bars take the mouse, so Webamp can drag the windows */
#webamp :is(#main-window, #playlist-window, #equalizer-window),
#webamp #main-window .draggable, #webamp #playlist-window .draggable, #webamp #equalizer-window .draggable { pointer-events: auto !important; }
#webamp #main-window :is(#play, #pause, #stop, #close, #volume, #volume *, #balance, #equalizer-button),
#webamp #equalizer-window :is(#on, #auto, #presets, #preamp, #preamp *, [id^="band-"], [id^="band-"] *) { pointer-events: auto !important; }
#webamp #presets-context, #webamp #presets-context * { pointer-events: auto !important; }
.player-fallback { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 0 24px; }

.cross { position: absolute; top: 50px; }

@media (max-width: 799px) {
  .col-side, .col-rail { border-left: 0; border-right: 0; }
  .cross { display: none; }
}

/* page intro row (archive) */
.page-head { box-sizing: border-box; height: 109px; padding: 28px 32px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.page-head p { margin: 6px 0 0; color: var(--muted); }

.filters { display: flex; gap: 6px; }
.filters button {
  height: 32px; padding: 0 12px; border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid transparent;
}
.filters button[aria-pressed="true"] { background: var(--btn); color: var(--text); border-color: var(--btn-line); }

.year { height: 40px; padding: 0 32px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.month { height: 32px; padding: 0 32px; border-bottom: 1px solid #141414; display: flex; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.post-row { box-sizing: border-box; height: 52px; display: grid; grid-template-columns: 112px minmax(0, 1fr) 64px; gap: 16px; align-items: center; padding: 0 32px; border-bottom: 1px solid var(--line); font-size: 14px; }
.post-row .date { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.post-row .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.post-row .text.real { color: var(--text); }
.post-row .kind { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.post-row[hidden] { display: none; }

/* about */
.intro { padding: 64px 32px 48px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.intro h1 { margin: 0; font-size: 48px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.intro p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--soft); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-bottom: 1px solid var(--line); }
.facts > div { height: 55px; padding: 24px 32px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.facts > div:last-child { border-right: 0; }

.contact { padding: 40px 32px 48px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; }
.contact h2 { margin: 6px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.contact form { margin: 0; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field textarea {
  box-sizing: border-box; background: #000; color: var(--text);
  border: 1px solid var(--btn-line); border-radius: 6px; font: inherit; font-size: 14px; outline: none;
}
.field input { height: 40px; padding: 0 12px; }
.field textarea { min-height: 140px; padding: 12px; line-height: 1.6; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--muted); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-foot .note { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.form-foot .note.error { color: var(--text); }
.btn-lg:disabled { opacity: 0.5; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts { min-height: 65px; }   /* Turnstile widget height, so the form doesn't jump */
.btn-lg { height: 40px; padding: 0 18px; background: var(--btn); color: var(--text); border: 1px solid var(--btn-line); border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }
.btn-lg:hover { background: #222222; }
.sent { max-width: 560px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sent[hidden], .contact form[hidden] { display: none; }
.sent strong { font-weight: 500; display: block; }
.sent span { color: var(--muted); font-size: 13px; }

/* live chat strip on the stream page */
.chat { height: 274px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; font-size: 13px; }
.chat-head { height: 44px; flex: none; box-sizing: border-box; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.chat-head .dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--muted); box-sizing: border-box; }
.chat-head .dot.on { background: var(--soft); border-color: var(--soft); }
.chat-head .room { font-weight: 500; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; }
.chat-log .sys { padding: 6px 16px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.chat-log .msg { padding: 6px 16px; display: flex; flex-direction: column; gap: 2px; }
.chat-log .who { display: flex; align-items: baseline; gap: 8px; }
.chat-log .nick { font-weight: 500; font-size: 12px; }
.chat-log .time { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.chat-log .body { color: var(--soft); line-height: 1.5; overflow-wrap: anywhere; }
/* moderation (chat.js): pinned message, announcements */
.chat-pinned { flex: none; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #070707; display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.chat-pinned[hidden] { display: none; }
.chat-pinned .label { flex: none; font-size: 10px; }
.chat-pinned .text { color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.chat-log .msg.announce { margin: 4px 8px; padding: 8px; border: 1px solid var(--btn-line); border-radius: 6px; background: #0a0a0a; }
.chat-log .msg.announce .body { color: var(--text); }
.chat-log .badge { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--btn-line); border-radius: 4px; padding: 0 5px; }
.chat input:disabled { opacity: 0.6; }
.chat form { flex: none; margin: 0; padding: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.chat input { flex: 1; min-width: 0; height: 36px; box-sizing: border-box; padding: 0 12px; background: #000; color: var(--text); border: 1px solid var(--btn-line); border-radius: 6px; font: inherit; font-size: 13px; outline: none; }
.chat input:focus { border-color: var(--muted); }
.chat form button { height: 36px; min-width: 36px; padding: 0 12px; background: var(--btn); color: var(--soft); border: 1px solid var(--btn-line); border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat form button:disabled { opacity: 0.5; cursor: default; }
.chat input[hidden] { display: none; }
.chat form.signin button { flex: 1; }
.chat-me { margin-left: auto; height: 26px; padding: 0 8px; background: transparent; color: var(--muted); border: 1px solid var(--btn-line); border-radius: 6px; font-size: 11px; cursor: pointer; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-me:hover { color: var(--text); border-color: var(--muted); }

/* account dialog (auth.js): sign in, sign up, reset, username, account */
dialog.auth { box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; background: var(--bg); color: var(--text); border: 1px solid var(--btn-line); border-radius: 8px; }
dialog.auth::backdrop { background: rgba(0, 0, 0, 0.75); }
dialog.auth .close { position: absolute; top: 12px; right: 12px; width: 32px; justify-content: center; padding: 0; font-size: 16px; }
.auth-body { padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.auth-body h2 { margin: 0; padding-right: 40px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.auth-body p { margin: 0; color: var(--soft); line-height: 1.6; }
.auth-body p.muted { color: var(--muted); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.auth-body form { display: flex; flex-direction: column; gap: 14px; }
.auth-note { font-family: var(--mono); font-size: 12px; color: var(--soft) !important; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.auth-note.error { color: var(--text) !important; border-color: #4a2020; }
.auth-note[hidden], .danger-zone[hidden] { display: none !important; }
.btn-lg.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; }
.btn-lg.google { text-decoration: none; }
.btn-lg.google .g { font-weight: 600; font-size: 15px; }
.btn-lg.danger:hover { color: #ff8a8a; border-color: #4a2020; }
.or { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.linkish { padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.linkish:hover { color: var(--text); }
.danger-zone { padding-top: 14px; border-top: 1px solid var(--line); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sc-embed { border-bottom: 1px solid var(--line); }
.sc-embed[hidden] { display: none; }

/* phones: one slim header bar; the menu button opens the nav full screen */
#menu-toggle { display: none; }
@media (max-width: 799px) {
  header.row { flex-wrap: nowrap; }
  header .col-side { flex: 1 1 auto; }
  header .col-rest { flex: 0 0 auto; flex-wrap: nowrap; }
  header .col-feed { display: none; }
  header .col-rail { flex: 0 0 auto; padding: 0 16px; }
  #menu-toggle { display: inline-flex; width: 44px; height: 44px; padding: 0; justify-content: center; }
  #lang-toggle { height: 44px; padding: 0 14px; }

  nav.col-side { display: none; }
  .menu-open nav.col-side {
    display: flex; position: fixed; top: 57px; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 16px; background: var(--bg); border-top: 1px solid var(--line);
  }
  .menu-open nav a { height: 56px; padding: 0 16px; font-size: 18px; }
  .menu-open { overflow: hidden; }
}

/* phones: let content set the heights, tighten paddings, 16px inputs (no iOS zoom) */
@media (max-width: 799px) {
  article { padding: 24px 20px; }
  .img-ph { height: 200px; }

  .page-head { height: auto; padding: 24px 20px; }
  .filters { flex-wrap: wrap; }
  .year, .month { padding: 0 20px; }
  .post-row { height: auto; min-height: 52px; padding: 12px 20px; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; }
  .post-row .text { white-space: normal; }

  .intro { padding: 40px 20px 32px; }
  .intro h1 { font-size: 36px; }
  .facts > div { height: auto; padding: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .facts > div:last-child { border-bottom: 0; }
  .contact { padding: 32px 20px 40px; }

  aside.col-rail { border-top: 1px solid var(--line); }
  .cell, .cell.who, .cell.follow { height: auto; padding: 24px 20px; }
  .links, .links.grid52 { height: auto !important; }
  .links a, .links.grid52 a { box-sizing: border-box; height: 52px; padding: 0 20px; align-items: center; }

  .chat { height: 360px; }
  .chat input, .field input, .field textarea { font-size: 16px; }
}

.player[hidden] { display: none; }

/* contact: direct messenger links above the form, outline only */
.direct { max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.direct a {
  height: 48px; box-sizing: border-box; padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 1px solid var(--btn-line); border-radius: 6px;
  font-size: 14px; color: var(--soft);
}
.direct a:hover { color: var(--text); border-color: var(--muted); }
.direct svg { flex: none; }
@media (max-width: 799px) { .direct { grid-template-columns: 1fr; } }

/* privacy notice */
.legal { padding: 32px 32px 48px; gap: 14px; max-width: 760px; }
.legal p, .legal li, .legal td, .legal th { font-size: 14px; line-height: 1.7; color: var(--soft); }
.legal p.lead { font-size: 15px; color: var(--text); }
.legal h2 { margin: 28px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; scroll-margin-top: 16px; }
.legal h3 { margin: 8px 0 0; font-size: 14px; font-weight: 500; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.legal strong { color: var(--text); font-weight: 500; }
.legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; }
.legal .card { padding: 14px 16px; border: 1px solid var(--btn-line); border-radius: 6px; color: var(--text); }
.legal .toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; }
.legal .toc a { font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; padding: 3px 0; }
.legal .toc a:hover { color: var(--text); }
.legal .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.legal table { width: 100%; border-collapse: collapse; }
.legal th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.legal th, .legal td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal tr:last-child td { border-bottom: 0; }
.privacy-link { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; }
.linkish.small { font-size: 12px; align-self: center; text-decoration: underline; text-decoration-color: var(--faint); }
@media (max-width: 799px) { .legal { padding: 24px 20px 40px; } .legal td, .legal th { padding: 8px; font-size: 13px; } }

/* account settings (account.js) */
.settings { display: flex; flex-direction: column; }
.settings-block { padding: 28px 32px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.settings-block h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.settings-block p { margin: 0; line-height: 1.6; color: var(--soft); }
.settings-block p.meta, .settings .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.settings-block .note { font-family: var(--mono); font-size: 12px; color: var(--soft); }
.settings-block .note.error { color: var(--text); }
.settings-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 0; }
.settings-form .btn-lg { align-self: flex-start; }
.settings-form.danger-zone { padding-top: 0; border-top: 0; }
.settings-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-sessions { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; }
.settings-session { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-session:last-child { border-bottom: 0; }
.settings-session > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-session .device { font-size: 13px; color: var(--text); }
.settings-banner { margin: 20px 32px 0; padding: 10px 12px; border: 1px solid var(--btn-line); border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--soft); max-width: 576px; }
.settings-banner.error { color: var(--text); border-color: #4a2020; }
.settings-empty, .settings-loading { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; color: var(--soft); }
.settings-empty p { margin: 0; }
.btn[disabled] { opacity: 0.5; cursor: default; }
@media (max-width: 799px) { .settings-block, .settings-empty, .settings-loading { padding: 24px 20px; } .settings-banner { margin: 16px 20px 0; } }

/* archive: the item a link pointed at */
@keyframes flash { from { box-shadow: inset 0 0 0 1px var(--muted); } to { box-shadow: inset 0 0 0 1px transparent; } }
.flash { animation: flash 2.5s ease-out; }