/* Potluck. Two colors, one typeface family, two weights, sharp corners, no imagery.
   Ported from anticap.makersfield.co with focus styles, self-hosted fonts, and
   the zine tilt made deterministic. No inline styles anywhere; CSP forbids them. */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/public/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/public/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('/public/fonts/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('/public/fonts/AtkinsonHyperlegibleMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --fg: #FF6600;
  --bg-alarm: #330000;
  --font: 'Atkinson Hyperlegible', sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
  --measure: 900px;
  --rule: 2px;
  --rule-heavy: 3px;
  --line: 1.7;
  --nav-h: 3.4rem;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--nav-h) + var(--s4)); overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.25rem;
  line-height: var(--line);
  overflow-x: hidden;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 var(--s4); overflow-wrap: anywhere; }
h1 { font-size: 3.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
p { margin: 0 0 var(--s4); }
a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
a:hover, a:active { background: var(--fg); color: var(--bg); text-decoration: none; }
code, pre, kbd { font-family: var(--mono); font-size: 0.95em; }
ul, ol { list-style: none; }

/* Focus: every interactive element gets a visible outline. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: var(--rule-heavy) solid var(--fg);
  outline-offset: 2px;
}
a:focus-visible { background: var(--fg); color: var(--bg); }

/* ---- chrome ---- */
.top { border-bottom: var(--rule-heavy) solid var(--fg); }
.nav {
  min-height: var(--nav-h);
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
}
.wordmark { font-weight: 700; font-size: 1.75rem; text-decoration: none; letter-spacing: 0.02em; }
.links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 1.1rem; }
.links li { display: inline; }
.search { display: flex; gap: var(--s2); align-items: center; margin-left: auto; font-size: 1rem; }
.search label { font-size: 1rem; }
.search input { width: 9rem; min-width: 0; }
.tagline { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s4) var(--s2); font-size: 1rem; }
.alarm {
  background: var(--bg-alarm);
  border-bottom: var(--rule) solid var(--fg);
  padding: var(--s2) var(--s4);
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}
.asguest {
  background: var(--fg);
  color: var(--bg);
  padding: var(--s2) var(--s4);
  text-align: center;
  font-weight: 700;
  margin: 0;
}
.asguest a { color: var(--bg); text-decoration-color: var(--bg); }
.asguest a:hover, .asguest a:focus-visible { background: var(--bg); color: var(--fg); }
.main { max-width: var(--measure); margin: 0 auto; padding: var(--s6) var(--s4) var(--s12); }
.foot { border-top: var(--rule) solid var(--fg); max-width: var(--measure); margin: 0 auto; padding: var(--s4); font-size: 1rem; }
.foot p { margin: 0; }
.notice { border: var(--rule) solid var(--fg); padding: var(--s2) var(--s4); font-weight: 700; margin-bottom: var(--s6); }
.error { background: var(--bg-alarm); border: var(--rule) solid var(--fg); padding: var(--s2) var(--s4); font-weight: 700; }
.actions, .meta { font-size: 1.1rem; }
.meta { line-height: 1.4; }
.hint { display: block; font-size: 1rem; }

/* ---- boxes and the tilt ---- */
.box { border: var(--rule-heavy) solid var(--fg); padding: var(--s6); margin: 0 0 var(--s8); }
.box.narrow { max-width: 34rem; }
.box.danger { border-color: var(--fg); background: var(--bg-alarm); }
.box h1 { font-size: 2.25rem; }
.box h2 { font-size: 1.75rem; }
.box, .post { transform-origin: center; }
.tilt-1 { transform: rotate(-0.35deg); }
.tilt-2 { transform: rotate(0.2deg); }
.tilt-3 { transform: rotate(-0.15deg); }
.tilt-4 { transform: rotate(0.35deg); }
.tilt-5 { transform: rotate(-0.25deg); }
.tilt-6 { transform: rotate(0.1deg); }

/* ---- thread list ---- */
.threads { border-top: var(--rule) solid var(--fg); margin-bottom: var(--s6); }
.row { border-bottom: var(--rule) solid var(--fg); padding: var(--s3) var(--s1); font-size: 1.1rem; line-height: 1.4; }
.row a { font-weight: 700; }
.row a:visited { font-weight: 400; }
.row .meta { display: block; font-size: 1rem; }
.pinned h2 { font-size: 1.5rem; margin-bottom: var(--s2); }
.pinned .threads { border-top-width: var(--rule-heavy); }
.pager { display: flex; gap: var(--s4); justify-content: center; margin: var(--s6) 0; font-size: 1.1rem; }
.empty { text-align: center; }

/* ---- thread ---- */
.thread-head { margin-bottom: var(--s6); }
.thread-head h1 { font-size: 2.5rem; }
.expiry { font-weight: 700; }
.post { border: var(--rule-heavy) solid var(--fg); padding: var(--s4) var(--s6); margin: 0 0 var(--s6); }
.post-head { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: baseline; border-bottom: var(--rule) solid var(--fg); padding-bottom: var(--s2); margin-bottom: var(--s4); font-size: 1.1rem; line-height: 1.4; }
.post-head .author { font-weight: 700; }
.post-head .num { margin-left: auto; }
.post-head .edited { font-size: 0.9rem; border: 1px solid var(--fg); padding: 0 var(--s1); }
.former { font-style: italic; }
.post-foot { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); border-top: var(--rule) solid var(--fg); padding-top: var(--s2); margin-top: var(--s4); font-size: 1rem; }
.backlinks { font-size: 1rem; margin-top: var(--s2); }
.locked-note { border: var(--rule) dashed var(--fg); padding: var(--s2) var(--s4); }

/* The universal reset eats post bodies; restore structure inside them. */
.post-body { overflow-wrap: anywhere; }
.post-body p { margin: 0 0 var(--s4); }
.post-body p:last-child { margin-bottom: 0; }
.post-body ul { list-style: disc; padding-left: var(--s8); margin: 0 0 var(--s4); }
.post-body ol { list-style: decimal; padding-left: var(--s8); margin: 0 0 var(--s4); }
.post-body li { margin-bottom: var(--s1); }
.post-body blockquote { border-left: var(--rule-heavy) solid var(--fg); padding-left: var(--s4); margin: 0 0 var(--s4); }
.post-body pre { border: var(--rule) solid var(--fg); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); overflow-x: auto; line-height: 1.4; font-size: 1rem; }
.post-body pre code { font-size: inherit; }
.post-body code { border: 1px solid var(--fg); padding: 0 var(--s1); }
.post-body pre code { border: 0; padding: 0; }
/* The hostname beside a link is never shortened: cutting it from the right
   hides the part that decides where you land. Let it wrap instead. */
.post-body .host { font-size: 0.9em; font-family: var(--mono); overflow-wrap: anywhere; word-break: break-word; }
.post-body .link-hidden { font-size: 0.9em; font-style: italic; opacity: 0.8; }
.post-body .ref-who { font-size: 0.9em; }
.post-body .ref-dead { text-decoration: line-through; }

/* ---- redacted handles ----
   A masked handle is the one place on the page where something was taken out,
   and orange-on-black read exactly like the prose around it. Flipped to black
   on orange it reads as a redaction stamp instead, which is the honest
   picture: a name was here, and a logged-out reader does not get it.

   Same contrast either way (7.15:1 against #FF6600, AAA for body text). This
   buys salience, not legibility. Not scoped to .post-body on purpose: thread
   titles are masked too, in the <h1> and in the front-page list.

   The text still says "Member A" with no styling at all, so Lynx and the Atom
   feed lose nothing but the highlight. */
.masked {
  background: var(--fg);
  color: var(--bg);
  padding: 0 var(--s1);
  font-weight: 700;
  /* A redaction that wraps across two lines gets the background on both
     halves rather than only the first. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Inside a link that is already inverted by :hover or :focus-visible, the
   highlight would be the same black-on-orange as its surroundings and vanish.
   Flip it back so the redaction stays the thing that stands out. */
a:hover .masked, a:active .masked, a:focus-visible .masked {
  background: var(--bg);
  color: var(--fg);
}
.post-body.quoted { border: var(--rule) solid var(--fg); padding: var(--s4); margin-bottom: var(--s4); font-size: 1.1rem; }
.preview h2 { font-size: 1.5rem; }
.report .meta { margin-bottom: var(--s4); }

/* ---- forms ---- */
label { display: block; font-weight: 700; margin-bottom: var(--s1); }
input[type="text"], input[type="password"], input[type="search"], textarea {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: var(--rule) solid var(--fg);
  font: inherit;
  padding: var(--s2) var(--s3);
  border-radius: 0;
}
textarea { font-family: var(--mono); font-size: 1.05rem; line-height: 1.5; resize: vertical; }
input::placeholder { color: transparent; }
button {
  background: var(--bg);
  color: var(--fg);
  border: var(--rule) solid var(--fg);
  font: inherit;
  font-weight: 700;
  padding: var(--s2) var(--s4);
  cursor: pointer;
  border-radius: 0;
}
button:hover, button:active { background: var(--fg); color: var(--bg); }
.buttons { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.cancel { align-self: center; }
.check { display: flex; gap: var(--s2); align-items: baseline; }
.check label { display: inline; font-weight: 400; }
.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--fg); }
.inline { display: inline; }
.linkish {
  border: 0;
  padding: 0;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  background: none;
  color: var(--fg);
}
.linkish:hover, .linkish:active { background: var(--fg); color: var(--bg); text-decoration: none; }
.rules { border: var(--rule) dashed var(--fg); padding: var(--s3) var(--s4); font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; margin: 0 0 var(--s4); }
.codes { border: var(--rule) solid var(--fg); padding: var(--s4); font-size: 1.4rem; line-height: 1.6; user-select: all; overflow-x: auto; margin: 0 0 var(--s4); }
.codes-list li { margin-bottom: var(--s2); }
.facts li { margin-bottom: var(--s1); }
.prose ul { list-style: disc; padding-left: var(--s8); margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose h2 { margin-top: var(--s6); }

/* ---- mobile ---- */
@media (max-width: 600px) {
  body { font-size: 1.1rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  .thread-head h1 { font-size: 1.9rem; }
  .box h1 { font-size: 1.75rem; }
  .box { padding: var(--s4); }
  .post { padding: var(--s3) var(--s4); }
  .main { padding: var(--s4) var(--s3) var(--s8); }
  .search { margin-left: 0; width: 100%; }
  .search input { flex: 1; }
  .box, .post { transform: none; }
}

/* ---- print ---- */
@media print {
  body { background: #fff; color: #000; }
  a { color: #000; }
  .alarm, .asguest, .post-foot, .actions, .compose, .search, .foot { display: none; }
  .box, .post { transform: none; border-color: #000; }
  /* Background colors are routinely dropped on the way to paper, so the
     redaction gets an outline it cannot lose instead of a fill it can. */
  .masked { background: transparent; color: #000; border: 1px solid #000; padding: 0 2px; }
}