/* Craigslist-style type system — system fonts only, nothing to load:
   Times New Roman for post content (titles, the note itself), Arial/
   Helvetica for the site chrome (nav, labels, buttons, meta text). */

/* ═══════════════════════════════════════════════════════════════════
   Mobile-first: everything below is written for a phone screen first.
   Media queries only ADD or upgrade rules for larger viewports —
   nothing here needs a media query to work correctly on a phone.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #FF2626;       /* riso red — the only "color" on the page */
  --ink: #000000;      /* pure black — every bit of text and every line */
  --max-width: 1080px;
  --font-serif: 'Times New Roman', Times, Georgia, serif;
  --font-sans: Arial, Helvetica, 'Liberation Sans', sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
}

/* Subtle riso-print grain over the whole page — decorative only,
   opacity is low enough it never touches text contrast. */
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

a:hover { text-decoration-thickness: 2.5px; }

:focus-visible {
  outline: 3px dashed var(--ink);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px 56px;
  position: relative;
  z-index: 1;
}

/* Visually hidden but still announced by screen readers / indexed by
   search engines — the wordmark image and ticker bands are decorative
   (their alt/aria-hidden are set accordingly), this is the real title. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Masthead ─────────────────────────────────────────────── */
/* Only the two ticker marquees and the wordmark live in here — this is
   what stays pinned to the top of the viewport while scrolling. The
   meta-line sits right after it in the markup but outside this element
   on purpose, so it scrolls away with the rest of the page instead of
   staying stuck under the sticky header (see .meta-line below). */
.masthead {
  background: var(--bg);
  overflow: hidden; /* clips the marquee tracks */
  position: sticky;
  top: 0;
  z-index: 5; /* above the grain overlay (0) and .wrap (1) while scrolling */
}

/* Scrolling ticker bands (above/below the wordmark) — plain text on the
   page background, no rule above or below; the wordmark art and the
   meta-line's own borders are what frame them. */
.ticker {
  overflow: hidden;
  white-space: nowrap;
  padding: 2px 0; /* tight, so the bands hug the wordmark art above/below */
}

.ticker-track {
  display: inline-block;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: ticker-scroll 55s linear infinite;
  will-change: transform;
}

/* The section "heading" marquee reads as a title, not a chrome detail —
   bigger and much slower than the masthead tickers above. */
.section-ticker .ticker-track {
  font-size: 28px;
  animation-duration: 150s;
}

/* The text content is the same phrase written out twice back-to-back
   (built in index.html's inline script). Moving exactly half the
   track's width lines copy #2 up with where copy #1 started — no
   jump, no gap. */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker:hover .ticker-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* Full-bleed wordmark band — edge to edge, capped only so it doesn't
   become enormous on very wide monitors. */
.wordmark-band {
  background: var(--bg);
  max-width: 1600px;
  margin: 0 auto;
  line-height: 0;
  overflow: hidden;
  /* Locks the band's height to the art's native ratio *before* the
     oversize/crop below, so the crop actually clips instead of just
     growing the band to fit the enlarged image. */
  aspect-ratio: 1394 / 275;
}

/* Sized past the band's edges on all four sides so the crop reads as
   intentional/bleeding, not a scaling artifact — then centered with
   `transform`, not margin. Percentage margins (margin-top included)
   resolve against the CONTAINING BLOCK'S WIDTH, not the element's own
   height — on a logo this wide/short, `margin-top: -4%` was actually a
   ~20%-of-height shove, not 4%, which is what threw the ticker-to-wordmark
   gap out of balance above/below. `transform`'s percentages resolve
   against the element's own box on each axis, so this correctly centers
   the 8% overflow evenly (4% top, 4% bottom, 4% left, 4% right). */
.wordmark {
  display: block;
  width: 108%;
  height: auto;
  transform: translate(-4%, -4%);
}

/* A single small italic line, boxed top and bottom by thin rules — sits
   right below the sticky masthead but is NOT part of it (see the markup
   comment in index.html), so it scrolls away with the page instead of
   staying pinned. Carries the gap down to the heading below that used
   to live on .masthead's own margin-bottom, now that this is the last
   fixed element before that gap. Matches the design export (no second
   "Est. 2026" line; the #meta-left span is still populated from config
   for anyone reusing it later, it's just not shown). */
.meta-line {
  text-align: center;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 4px 16px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 400;
  font-size: 0.68rem;
}

.meta-line #meta-left {
  display: none;
}

/* The @actualfag mailto link inside this line stays plain — the global
   `a` rule's bold underline would break the thin italic look here. */
.meta-line a {
  font-weight: inherit;
  text-decoration: none;
}

/* ── Layout ───────────────────────────────────────────────── */
.layout {
  display: grid;
  /* minmax(0, 1fr), not 1fr — a bare 1fr track won't shrink below the
     min-content size of its children, which blows out the whole page
     width on mobile the moment a nowrap descendant (the ticker marquees)
     is longer than the viewport. minmax(0, ...) lets the track — and
     the marquee's own overflow:hidden — actually clip it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* The section "heading" is now a scrolling marquee (matching the masthead
   tickers) instead of static text — #listings-heading itself stays as a
   real (but visually hidden) <h2> for aria-labelledby/SEO; .section-ticker
   is what's actually shown. Reuses .ticker for the scroll mechanics. */
.section-ticker {
  margin-bottom: 14px;
  /* Full-bleed like the masthead tickers, even though this one lives
     inside .wrap's padded/max-width container — break out to the true
     viewport edges instead of stopping at .wrap's padding. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── "Add Yours" — the submission form, collapsed by default ──────── */
/* A native <details>/<summary> disclosure: closed, it's just the small
   black summary tab (a red + and a label); clicking/tapping it expands
   the same red-on-black submission box we already designed, with no JS
   needed for the open/close mechanics — which also makes it keyboard-
   and screen-reader-operable for free. js/app.js clones one of these
   from #add-yours-template after the first 3 posts, then again every 7
   posts after that, rewriting ids per copy so each instance is its own
   valid, independently-submittable form. */
.add-yours {
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: 18px;
  break-inside: avoid;
}

.add-yours-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  border: 3px solid var(--ink);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  list-style: none;
  user-select: none;
}

.add-yours-summary::-webkit-details-marker { display: none; }
.add-yours-summary::marker { content: ""; }

.add-yours-summary .plus {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

/* A "+" rotated 45° reads as an "×" — no separate close icon needed. */
.add-yours[open] .add-yours-summary .plus {
  transform: rotate(45deg);
}

/* Not inverted — same red/black as the rest of the page. Only the
   summary tab above it and the submit button below stay black-on-red,
   matching the design export. */
.submit-box {
  border: 3px solid var(--ink);
  border-top: none; /* the summary tab above supplies this edge */
  background: var(--bg);
  color: var(--ink);
  padding: 16px;
}

/* Limited, noticeable open animation for "Add Yours" — js/app.js drives
   the actual height transition (so it can measure real content height
   per-instance); this keyframe just adds a quick fade/slide on top. The
   height transition is applied inline by app.js, not here. */
@keyframes add-yours-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.add-yours.add-yours-revealing .submit-box {
  animation: add-yours-reveal 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .add-yours.add-yours-revealing .submit-box { animation: none; }
}

.submit-box p.blurb {
  font-size: 0.85rem;
  font-weight: 700;
  font-style: italic;
  margin-top: 0;
}

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 400;
  /* 16px minimum keeps iOS Safari from zooming in on focus */
  font-size: 1rem;
  padding: 12px;
  border: 3px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  min-height: 48px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
  opacity: 0.5;
}

.field textarea { resize: vertical; min-height: 96px; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }

.consent-line {
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 14px;
}

/* Inverted by default (black bg, red text) to match the summary tab
   above it, not just on hover. */
button.submit-btn {
  width: 100%;
  min-height: 52px;
  background: var(--ink);
  color: var(--bg);
  border: 3px solid var(--ink);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

button.submit-btn:hover { background: var(--bg); color: var(--ink); }
button.submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.form-status {
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 1.2em;
}

.form-status.ok,
.form-status.err {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* ── Classifieds list ─────────────────────────────────────── */
.listings {
  columns: 1;
}

.card {
  break-inside: avoid;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 16px;
  margin-bottom: 18px;
  position: relative;
}

/* Secondary metadata — kept small and regular weight (vs. the bold serif
   Title/Message) so those still carry the visual weight on each card, but
   at full-strength ink like everything else on the page. Lives in
   .card-actions now, alongside Reply/Forward. */
.card .posted-line {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.card .title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 8px;
}

.card .when-where {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-bottom: 10px;
  border-bottom: 2px dashed var(--ink);
  padding-bottom: 8px;
}

.card .message {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Jumping to a post via a Forward link briefly outlines it so it's
   obvious which one you were sent. */
.card:target {
  outline: 4px solid var(--ink);
  outline-offset: 2px;
}

/* Posted-line sits at the left, Reply/Forward grouped at the right —
   both on one thin-divided row at the bottom of the card. */
.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px dashed var(--ink);
}

.card-actions-buttons {
  display: flex;
  gap: 10px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  color: var(--ink);
  border: none;
  padding: 4px 2px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  text-decoration: none;
  cursor: pointer;
  min-height: 36px; /* touch target, even without a visible box */
}

.action-btn:hover span,
.action-btn:focus-visible span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.empty-state, .loading-state {
  font-size: 0.9rem;
  font-weight: 700;
  font-style: italic;
}

footer {
  text-align: center;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 3px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   Tablet and up — the phone layout is the baseline, this widens it.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .wrap { padding: 0 20px 80px; }

  .ticker { padding: 3px 0; }
  .ticker-track { letter-spacing: 0.06em; }
  .meta-line {
    margin-bottom: 28px;
    padding: 6px 20px;
    font-size: 0.75rem;
  }

  .section-ticker { margin-bottom: 16px; }

  .add-yours { box-shadow: 6px 6px 0 var(--ink); margin-bottom: 22px; }
  .add-yours-summary { padding: 12px 22px; font-size: 1.2rem; }
  .submit-box { padding: 22px; }

  /* Mobile-only site — deliberately no multi-column tiling at any
     breakpoint, .listings stays columns: 1 (set once, above). */

  .card {
    padding: 16px 18px;
    margin-bottom: 22px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .card .posted-line { font-size: 0.72rem; letter-spacing: 0.08em; }
  .card .when-where { font-size: 0.76rem; letter-spacing: 0.04em; }
  .card .title { font-size: 1.35rem; }

  footer { margin-top: 60px; font-size: 0.74rem; }
}