/* ─────────────────────────────────────────────────────────────
   AgentSee — agentsee.work
   A broadsheet. Newsprint by day, noir by night.
   One stylesheet, no framework, no third-party anything.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* newsprint */
  --paper:   #f7f3ea;
  --paper-2: #efe9dc;
  --ink:     #1a1712;
  --ink-2:   #4a4238;
  --ink-3:   #7d7365;
  --rule:    #1a1712;
  --hair:    #cfc4b0;
  --signal:  #a8431d;
  --wash:    rgba(168, 67, 29, .07);
  --glow:    transparent;

  --serif: 'Newsreader', ui-serif, 'Iowan Old Style', Georgia, serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(1.15rem, 3.5vw, 3.2rem);
  --hairline: 1px solid var(--hair);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* noir */
    --paper:   #0a0a0b;
    --paper-2: #131211;
    --ink:     #efe9e0;
    --ink-2:   #a89e91;
    --ink-3:   #6a625a;
    --rule:    #efe9e0;
    --hair:    #2b2722;
    --signal:  #e0923f;
    --wash:    rgba(224, 146, 63, .09);
    --glow:    rgba(224, 146, 63, .34);
  }
}

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

body {
  margin: 0 auto;
  max-width: 84rem;
  padding: 0 var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, .3vw + .95rem, 1.08rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the noir spotlight, only after dark */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 52% 34% at 50% 8%, var(--wash), transparent 72%);
}

body > * { position: relative; z-index: 1; }

::selection { background: var(--signal); color: var(--paper); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; z-index: 20;
  font-family: var(--mono); font-size: .8rem;
}
.skip:focus { left: 0; top: 0; }

/* ═══════════════  MASTHEAD  ═══════════════ */

.masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 2vw, 1.5rem);
  padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(.8rem, 1.6vw, 1.1rem);
  border-bottom: 3px double var(--rule);
}

.mark {
  --mark-w: clamp(52px, 6.6vw, 96px);
  width: var(--mark-w);
  flex: none;
}
.mark svg { width: 100%; height: auto; display: block; overflow: visible; }

@media (prefers-color-scheme: dark) {
  .mark { filter: drop-shadow(0 0 26px var(--glow)); }
}

.wordmark {
  font-size: clamp(2.1rem, 7vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1;
  margin: 0;
}

/* ═══════════════  DATELINE  ═══════════════ */

.dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: clamp(.58rem, 1.1vw, .68rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dateline b { color: var(--signal); font-weight: 400; }
.dateline .mid { text-align: center; }

@media (max-width: 46rem) {
  .dateline { justify-content: center; text-align: center; }
  .dateline .edge { display: none; }
}

/* ═══════════════  LEAD  ═══════════════ */

.lead {
  padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}

.lead h1 {
  font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.023em;
  font-weight: 600;
  margin: 0 auto;
  max-width: 21ch;
  text-wrap: balance;
}

.deck {
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  text-wrap: pretty;
}

.status {
  margin: clamp(1.5rem, 3vw, 2.2rem) auto 0;
  font-family: var(--mono);
  font-size: clamp(.6rem, 1.1vw, .7rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; flex-wrap: wrap;
  gap: .5rem; align-items: center; justify-content: center;
}
.status .sep { color: var(--hair); }
.status b { color: var(--signal); font-weight: 400; }

.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* Used on the 404. Must live here rather than in a style attribute — the
   CSP is style-src 'self', so inline styles are blocked and the link would
   fall back to default browser blue. */
.backlink {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .15rem;
}
.backlink:hover { border-color: var(--signal); }

/* ═══════════════  SECTIONS  ═══════════════ */

.section {
  padding: clamp(2.2rem, 4.5vw, 3.6rem) 0;
  border-top: 1px solid var(--rule);
}

.kicker {
  font-family: var(--mono);
  font-size: clamp(.58rem, 1.1vw, .67rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.7rem);
  display: flex; align-items: center; gap: 1rem;
}
.kicker::after {
  content: ''; flex: 1; border-top: var(--hairline);
}

.section > h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.017em;
  line-height: 1.14;
  margin: 0 0 1rem;
  max-width: 26ch;
  text-wrap: balance;
}

/* newspaper columns; collapse on narrow screens */
.cols {
  column-count: 3;
  column-gap: clamp(1.4rem, 2.6vw, 2.4rem);
  column-rule: var(--hairline);
  text-align: justify;
  hyphens: auto;
  color: var(--ink-2);
}
.cols.two { column-count: 2; }
.cols p { margin: 0 0 .85em; }
.cols p:last-child { margin-bottom: 0; }

.cols .drop::first-letter {
  float: left;
  font-size: 3.05rem;
  line-height: .82;
  padding: .06em .09em 0 0;
  font-weight: 600;
  color: var(--signal);
}

@media (max-width: 60rem) { .cols { column-count: 2 } }
@media (max-width: 40rem) {
  .cols, .cols.two { column-count: 1; text-align: left; hyphens: manual; }
}

.pull {
  font-size: clamp(1.6rem, 4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--signal);
  text-align: center;
  margin: clamp(1.8rem, 3.4vw, 2.8rem) auto;
  max-width: 18ch;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

/* ═══════════════  QUESTIONS  ═══════════════ */

.questions {
  list-style: none;
  counter-reset: q;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: clamp(1.6rem, 3vw, 3rem);
  column-rule: var(--hairline);
}
@media (max-width: 46rem) { .questions { column-count: 1 } }

.questions li {
  counter-increment: q;
  break-inside: avoid;
  padding: .8rem 0;
  border-bottom: var(--hairline);
  font-size: 1.02rem;
  line-height: 1.46;
  text-wrap: pretty;
}
.questions li::before {
  content: counter(q, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--signal);
  display: block;
  margin-bottom: .3rem;
}

/* ═══════════════  APPROACH  ═══════════════ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
}
.steps h3 {
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -.008em;
  margin: 0 0 .5rem;
  padding-top: .7rem;
  border-top: 2px solid var(--signal);
}
.steps p { margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.58; text-wrap: pretty; }

.honesty {
  margin: clamp(1.8rem, 3.4vw, 2.8rem) 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.1rem, 2.4vw, 2rem);
  background: var(--wash);
  border-top: 2px solid var(--signal);
  border-bottom: 1px solid var(--hair);
}
.honesty p {
  margin: 0;
  font-size: clamp(1.08rem, 1.7vw, 1.4rem);
  line-height: 1.42;
  letter-spacing: -.008em;
  text-wrap: pretty;
}

/* ═══════════════  CONTRIBUTORS  ═══════════════ */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.8rem, 3.4vw, 3rem);
}
.person { break-inside: avoid; }

.byline {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .8rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}

.portrait {
  width: 4.9rem; height: 4.9rem;
  flex: none;
  display: block;
  object-fit: cover;
  border: 1px solid var(--hair);
  background: var(--paper-2);
}
@media (prefers-color-scheme: dark) {
  .portrait { filter: brightness(.86) contrast(1.03); }
}

.byline h3 {
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -.015em;
  margin: 0 0 .25rem;
  line-height: 1.1;
}
.role {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
  line-height: 1.55;
}

.person .body { color: var(--ink-2); font-size: .96rem; line-height: 1.58; }
.person .body p { margin: 0 0 .8em; text-wrap: pretty; }

.links {
  display: flex; flex-wrap: wrap; gap: .9rem;
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: var(--hairline);
}
.links a {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .15rem;
  transition: color .18s, border-color .18s;
}
.links a:hover { color: var(--signal); border-color: var(--signal); }

/* ═══════════════  CLASSIFIEDS  ═══════════════ */

/* 1px gap over a hairline background draws the rules between ads, so the
   outer edges never double up against the container border. */
.classifieds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--rule);
}

.ad {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  transition: background .18s;
}
.ad:hover { background: var(--wash); }

.ad-head {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ad-title {
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.16;
}
.ad-body { color: var(--ink-2); font-size: .93rem; line-height: 1.52; flex: 1; text-wrap: pretty; }
.ad-cue {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--signal);
}
.ad:hover .ad-cue { text-decoration: underline; text-underline-offset: .25em; }

/* ═══════════════  REGISTER OF ISSUES  ═══════════════ */

.register { border-top: var(--hairline); }
.issue {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: var(--hairline);
}
@media (max-width: 40rem) {
  .issue { grid-template-columns: 1fr; gap: .25rem; }
}
.issue-no {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
}
.issue-title { font-weight: 600; }
.issue.pending .issue-title,
.issue.pending .issue-meta { color: var(--ink-3); font-weight: 400; font-style: italic; }
.issue-meta {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ═══════════════  COLOPHON  ═══════════════ */

footer {
  border-top: 3px double var(--rule);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.2rem 0 clamp(2.4rem, 5vw, 3.6rem);
}
.colophon {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer-note {
  margin: 1.2rem 0 0;
  max-width: 60ch;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ═══════════════  THE EYE  ═══════════════ */

.hat-crown, .hat-brim { fill: var(--ink); }
.hat-band   { fill: var(--paper); opacity: .16; }
.hat-buckle { fill: var(--signal); }
.sclera     { fill: var(--paper-2); }
/* The outline uses non-scaling-stroke so the blink's vertical squash can't
   flatten it to nothing — but that makes stroke-width a screen-pixel value,
   which stops tracking the mark's size. Deriving it from --mark-w keeps the
   weight proportional at every size: 6 units of a 240-wide viewBox = 2.5%. */
.eye-outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: calc(var(--mark-w, 96px) * .025);
  stroke-linejoin: round;
}
.iris-outer { fill: var(--signal); }
.iris-inner { fill: var(--signal); filter: brightness(.82); }
.pupil      { fill: var(--ink); }
.glint      { fill: var(--paper); opacity: .92; }
.glint.sm   { opacity: .5; }

/* The pupil and the glint must NOT follow the theme swap.
   Everything else in the mark should: the hat takes --ink and flips from black
   to bone, which is the whole point of newsprint-by-day and noir-by-night. But
   --ink and --paper trade places after dark, and these two are the only fills
   whose meaning is their lightness rather than their role. Left alone, the
   pupil turns white and the glint turns black — a specular highlight that
   absorbs light, and an eye rendered as its own negative.
   Pinned, so the pupil is always the darkest thing in the eye and the glint is
   always the lightest. This is what brand/avatar-noir.png has always done; the
   stylesheet was the one out of step. */
@media (prefers-color-scheme: dark) {
  .pupil { fill: var(--paper); }
  .glint { fill: var(--ink); }
}
.iris { transition: transform .09s linear; }

.eye { transform-origin: 120px 142px; animation: blink 7.4s infinite; }
.mark.dormant .eye { animation: none; }

@keyframes blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95.4%, 96.4%  { transform: scaleY(.045); }
}

@media (prefers-reduced-motion: reduce) {
  .eye { animation: none; }
  .pulse { animation: none; }
  .iris { transition: none; }
}

/* ═══════════════  ISSUE PAGES  ═══════════════ */

/* The register lists published issues as links and unwritten ones as plain
   divs, so `a.issue` needs the same box as `div.issue` and none of the default
   link decoration. */
a.issue {
  text-decoration: none;
  color: inherit;
}
a.issue:hover .issue-title { color: var(--signal); }

.backlink-row { margin-top: clamp(1.6rem, 3vw, 2.4rem); }