/* No Finer Eye — public site. BLAST-inspired (Vorticist), translated with restraint.
   Drama at the thresholds (masthead, TOC, section heads); calm in the rooms (reading).
   Display = Archivo Black; body = Lora serif. Flat, hard-edged, three-color. */

:root {
  /* Three-color palette (+ derived neutrals) */
  --ground:  #ffffff;   /* flat white */
  --ink:     #141414;   /* near-black, used in blocky masses */
  --accent:  #b84c2a;   /* terracotta — the one hot accent, used sparingly */

  --ink-70:  #3a3835;   /* secondary text */
  --ink-45:  #7c766c;   /* muted metadata */
  --rule:    #d8d4cc;   /* hairline rules */

  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --serif:   'Lora', Georgia, 'Times New Roman', serif;

  --site-max: 1080px;
  --reading-max: 42rem;   /* ~66–70ch of Lora */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* safety net against horizontal bleed on mobile */
}
/* Big display type can overrun narrow screens — allow it to break. */
h1, h2, h3, .issue-title, .archive-head, .piece-title, .ro-title, .submit-head {
  overflow-wrap: break-word;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }

/* Display voice: heavy grotesque, tight, often caps. Never on body text. */
.display, h1, h2, h3, .kicker, .site-nav a, .foot-mark {
  font-family: var(--display);
  font-weight: 400;      /* Archivo Black is a single heavy weight */
  letter-spacing: -0.01em;
}
.kicker {
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.kicker.accent { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Global chrome ---------- */
.chrome {
  max-width: var(--site-max); margin: 0 auto;
  padding: 18px 28px; display: flex; align-items: center; gap: 20px;
  border-bottom: 2px solid var(--ink);
}
.chrome .home { display: inline-flex; align-items: center; }
.chrome .glyph { height: 34px; width: auto; display: block; }
.chrome .spacer { flex: 1; }
.site-nav { display: flex; gap: 22px; }
.site-nav a {
  font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }

.page { max-width: var(--site-max); margin: 0 auto; padding: 44px 28px 96px; }
.reading { max-width: var(--reading-max); }
.muted { color: var(--ink-45); }

/* ---------- Issue landing: the showpiece ---------- */
.issue-masthead { margin-bottom: 8px; text-align: center; }
.issue-masthead .wordmark { width: min(560px, 82%); height: auto; display: block; margin: 0 auto; }
.epigraph {
  font-family: var(--serif); font-style: italic; color: var(--ink-70);
  font-size: 1.02rem; line-height: 1.45; margin: 16px auto 0; max-width: 30rem;
}
.epigraph cite { display: block; font-style: normal; font-size: 0.8rem; color: var(--ink-45); margin-top: 4px; }

.bar { height: 8px; background: var(--ink); margin: 28px 0; }

.issue-meta { display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap; }
.issue-no {
  background: var(--ink); color: var(--ground);
  font-family: var(--display); line-height: 0.92;
  padding: 12px 16px; display: inline-block;
}
.issue-no .n { display: block; font-size: clamp(2.4rem, 6vw, 4rem); }
.issue-no .season { display: block; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ground); opacity: 0.85; margin-top: 4px; }
.issue-title { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.98; margin: 0; align-self: center; }
.issue-theme { font-family: var(--serif); font-style: italic; color: var(--ink-70); margin: 12px 0 0; }
.framing { font-family: var(--serif); font-size: 1.14rem; line-height: 1.6; color: var(--ink-70); margin: 26px 0 0; max-width: var(--reading-max); }

/* Manifesto-list table of contents */
.running-order { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: ro; }
.ro-item {
  display: grid; grid-template-columns: minmax(64px, auto) 1fr; gap: 22px;
  align-items: baseline; padding: 26px 0; border-top: 3px solid var(--ink);
}
.ro-item:last-child { border-bottom: 3px solid var(--ink); }
.ro-num {
  font-family: var(--display); color: var(--accent);
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 0.9;
}
.ro-kicker { color: var(--ink); margin-bottom: 8px; }
.ro-title { display: block; font-family: var(--display); color: var(--ink);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.0; }
a.ro-title:hover { color: var(--accent); }
.ro-author { font-family: var(--serif); font-style: italic; color: var(--ink-45); font-size: 0.98rem; margin-top: 8px; }
.ro-preview { margin-top: 16px; }

/* ---------- Archive index ---------- */
.archive-head { font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.95; margin: 0 0 10px; }
.archive .intro { font-family: var(--serif); color: var(--ink-70); font-size: 1.1rem; max-width: var(--reading-max); }
.issue-list { list-style: none; padding: 0; margin: 36px 0 0; }
.issue-row { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 3px solid var(--ink); }
.issue-row:last-child { border-bottom: 3px solid var(--ink); }
.issue-row .rn { font-family: var(--display); color: var(--accent); font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 0.9; }
.issue-row-title { font-family: var(--display); color: var(--ink); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; }
a.issue-row-title:hover { color: var(--accent); }
.issue-row-meta { font-family: var(--serif); font-style: italic; color: var(--ink-45); font-size: 0.92rem; }

/* ---------- Piece page: quiet ---------- */
.piece-head { margin-bottom: 34px; }
.piece-head .kicker a { color: var(--accent); }
.piece-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; margin: 10px 0 6px; }
.piece-author { font-family: var(--serif); font-style: italic; color: var(--ink-45); }
.piece-body { font-family: var(--serif); font-size: 1.2rem; line-height: 1.72; }
.piece-body.reading p { margin: 0 0 1.25em; }
.piece.poetry .piece-body { white-space: pre-wrap; }
.curator-aside {
  border-left: 3px solid var(--accent); padding: 4px 20px;
  font-family: var(--serif); font-style: italic; color: var(--ink-70);
  margin: 40px 0; max-width: var(--reading-max);
}
.piece-foot { margin-top: 56px; }
.foot-mark { text-align: center; margin: 48px 0 24px; }
.foot-mark img { height: 46px; width: auto; opacity: 0.92; }
.back-link { font-family: var(--display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------- Media: hard edges, thin ink rules, no soft corners ---------- */
.asset { margin: 0 0 40px; }
.embed { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--ink); background: var(--ground); display: block; }
.embed[height] { aspect-ratio: auto; }
.embed-figure { margin: 0; }
.embed-img { width: 100%; height: auto; display: block; border: 1px solid var(--ink); }
.embed-figure figcaption, .curator-note {
  font-family: var(--serif); font-style: italic; color: var(--ink-45);
  font-size: 0.92rem; margin-top: 8px;
}
.curator-note { color: var(--ink-70); }
.embed-linkout {
  display: inline-block; padding: 12px 18px; border: 1px solid var(--ink);
  background: var(--ground); font-family: var(--display); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* ---------- Boilerplate prose pages ---------- */
.prose { font-family: var(--serif); font-size: 1.18rem; line-height: 1.7; }
.prose h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.0; margin: 0 0 24px; }
.prose h2 { font-family: var(--display); font-size: 1.5rem; margin: 40px 0 12px; }
.prose ul { padding-left: 1.2em; }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: 20px; font-style: italic; color: var(--ink-70); margin: 28px 0; }
.prose a { border-bottom: 1px solid var(--accent); }

/* ---------- Submission form ---------- */
.submit-head { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.0; margin: 8px 0 16px; }
.lede { font-family: var(--serif); font-size: 1.14rem; line-height: 1.6; color: var(--ink-70); }
.nfe-form { margin-top: 28px; }
.nfe-form label {
  display: block; font-family: var(--display); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink);
  margin: 20px 0 6px;
}
.nfe-form label.check { text-transform: none; font-family: var(--serif); font-size: 0.95rem; color: var(--ink-70); }
.nfe-form input[type=text], .nfe-form input[type=email], .nfe-form select, .nfe-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--ink); border-radius: 0;
}
.nfe-form textarea { font-family: var(--serif); line-height: 1.6; resize: vertical; }
.nfe-form select { font-family: var(--serif); }
.ai-disclosure { border: 1px solid var(--ink); border-radius: 0; padding: 14px 16px; margin-top: 22px; }
.ai-disclosure legend {
  font-family: var(--serif); font-style: italic; color: var(--ink-70);
  font-size: 1rem; padding: 0 6px;
}
.ai-disclosure .radio {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 20px 0 0;
  font-family: var(--serif); font-size: 1.02rem; color: var(--ink); text-transform: none; letter-spacing: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.submit-btn {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 0.9rem; padding: 12px 24px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--ground); cursor: pointer; border-radius: 0;
}
.submit-btn:hover { background: var(--accent); border-color: var(--accent); }
.submit-btn:disabled { opacity: 0.5; cursor: default; }
.form-status { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 0.95rem; }
.cf-turnstile { margin-top: 22px; }
.thanks { margin-top: 20px; }

/* ---------- AI tag + share ---------- */
.ai-tag {
  font-family: var(--display); font-size: 0.5em; letter-spacing: 0.02em;
  color: var(--accent); vertical-align: middle; white-space: nowrap;
}
.share {
  display: inline-block; margin-top: 12px;
  font-family: var(--display); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink); border-bottom: 2px solid var(--accent);
}
.share:hover { color: var(--accent); }
.asset .share { margin-top: 8px; font-size: 0.66rem; }

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--site-max); margin: 0 auto; padding: 26px 28px;
  border-top: 2px solid var(--ink); color: var(--ink-45);
}
.foot-tagline {
  font-family: var(--display); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink);
}
.foot-epigraph {
  font-family: var(--serif); font-style: italic; color: var(--ink-45);
  font-size: 0.98rem; margin-top: 10px; max-width: 34rem;
}
.foot-copyright {
  font-family: var(--display); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink-45); margin-top: 12px;
}

@media (max-width: 640px) {
  .chrome { padding: 14px 18px; }
  .page { padding: 32px 18px 72px; }
  .ro-item { grid-template-columns: 1fr; gap: 6px; }
  .ro-num { font-size: 2rem; }
}