/* =====================================================================
   The Spotlight Archive
   Minimal, warm, typographic. Cream paper + charcoal ink.
   Body reading: Merriweather (serif). Dates / meta: monospace.
   References: oykun.com (year-grouped list) · jonnybelton.co (timeline + colours)
   ===================================================================== */

:root {
  --bg:        #FFFDF7;                 /* warm cream paper */
  --ink:       #2B2B2B;                 /* warm charcoal */
  --muted:     rgba(43, 43, 43, 0.50);  /* dates, secondary meta */
  --muted-2:   rgba(43, 43, 43, 0.70);  /* descriptions, body-secondary */
  --line:      rgba(43, 43, 43, 0.14);  /* hairlines */
  --line-soft: rgba(43, 43, 43, 0.08);
  --accent:    #C1653F;                 /* terracotta — the brand mark, nothing else */

  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SFMono-Regular", "SF Mono", Menlo,
                "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --page:    54rem;   /* wide container (~864px) — text covers more of the screen */
  --measure: 44rem;   /* article reading measure (~704px) */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.1875rem;   /* 19px */
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: rgba(43, 43, 43, 0.12); }

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

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.container.narrow { max-width: var(--measure); }

.page { padding-bottom: 5rem; }

/* ---------- header ---------- */
.site-header { padding-block: 2.25rem 1.5rem; }   /* no border, no icon */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  color: var(--ink);

  /* Baseline alignment does the work: a replaced element baselines on its
     bottom edge, so the mark's foot lands exactly on the text baseline and
     its head at exactly cap height. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

/* Small mark, sitting between the baseline and the x-height. 0.5625em is
   Merriweather Bold's measured x-height. The viewBox is cropped to the filled
   path's true bounds, so the pentagon fills it edge to edge with no invisible
   padding to throw the alignment off. */
.brand-mark {
  height: 0.5625em;              /* x-height */
  width: 0.5647em;               /* 0.5625em x the viewBox aspect (95.17/94.8) */
  flex: none;

  /* Stroked in its own fill colour so the round linejoin softens the corners.
     The viewBox is cropped to include that stroke. */
  fill: var(--accent);
  stroke: var(--accent);

  /* Baseline-sitting made it read low next to a capital T, which towers to
     0.75em. Lift by half the cap/x-height difference so the mark's centre
     matches the wordmark's optical centre. Transform, not margin, so the
     baseline alignment above stays the thing doing the maths.
     The lift must be repeated in the hover rule — transform is one property,
     so a rotate() there would otherwise drop it. */
  transform: translateY(-0.094em) rotate(0deg);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Half-turn on hover, unwinding back when the cursor leaves. Triggered from the
   whole wordmark link, not the mark itself — the mark is ~9px, too small to be a
   sane hover target. Because the pentagon is irregular, 180 degrees lands it in a
   visibly different pose rather than looking like nothing moved. */
.brand:hover .brand-mark {
  transform: translateY(-0.094em) rotate(180deg);
}

.site-nav {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
/* Same left-to-right underline reveal as .entry-title — a 1px gradient grown
   from 0% to 100% width. currentColor so it tracks the muted -> ink fade. */
.site-nav a {
  color: var(--muted);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: color 0.15s ease, background-size 0.28s ease;
}
.site-nav a:hover { color: var(--ink); background-size: 100% 1px; }

/* The page you're on wears the finished state of the hover: ink text with the
   underline already fully drawn. Declared after :hover so it stays put when the
   cursor passes over it. */
.site-nav a.is-active { color: var(--ink); background-size: 100% 1px; }

/* ---------- intro / lede ---------- */
.intro { padding-block: 2.5rem 3.5rem; }
.intro p {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 40rem;
}
.intro .sub {
  margin-top: 1.1rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--muted-2);
  max-width: 38rem;
}

/* ---------- timeline (Thoughts) ---------- */
.year {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 2.75rem 0 0.5rem;
}
.year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.year span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.timeline { list-style: none; margin: 0; padding: 0; }

.entry { border-bottom: 1px solid var(--line-soft); }
.entry:last-child { border-bottom: none; }

.entry a {
  display: flex;
  gap: 2rem;
  padding: 1.35rem 0;
  align-items: baseline;
  transition: opacity 0.15s ease;
}
.entry a:hover { opacity: 1; }

.entry-date {
  flex: 0 0 6.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding-top: 0.5rem;
  white-space: nowrap;
}

.entry-body { flex: 1 1 auto; min-width: 0; }

.entry-title {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.28s ease;
  padding-bottom: 2px;
}
.entry a:hover .entry-title { background-size: 100% 1px; }

.entry-desc {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 42rem;
}

/* ---------- prose (about) ---------- */
.prose { font-size: 1.22rem; line-height: 1.85; }
.prose h1 {
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
.prose h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 2.75rem 0 0.9rem;
  letter-spacing: -0.01em;
}
.prose p { margin: 0 0 1.5rem; }

/* Reading text sits one step back from full ink — headings stay --ink so the
   page keeps its structure, body copy is --muted-2. ~5.2:1 on cream, so it
   still clears WCAG AA for normal text. */
.prose p,
.article-body p,
.article-body li {
  color: var(--muted-2);
}
/* The sign-off is meta, not reading text — keep it a step lighter still. */
.article-foot p { color: var(--muted); }

/* Justified body copy. Hyphenation is what keeps justification from opening
   rivers of whitespace at this measure — drop both lines together to revert.
   Justification needs long paragraphs to look right, so `.ragged` opts a page
   out (the contact intro is three lines and stretched badly). */
.prose p,
.article-body p,
.article-body li,
.article-body blockquote {
  text-align: justify;
  hyphens: auto;
}
.ragged p {
  text-align: left;
  hyphens: manual;
}
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.prose a:hover { text-decoration-color: var(--ink); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

/* ---------- article (Medium-ish, simplified) ---------- */
.article { padding-bottom: 4rem; }

.article-head { max-width: var(--measure); margin: 1rem 0 2.5rem; }
.article-title {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.article-deck {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--muted-2);
  font-weight: 300;
  margin: 0 0 1.5rem;
}
.article-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* The whole article column is one measure-wide block, flush with the container's
   left edge — so the wordmark, title, headings, body copy and rules all share
   one vertical line. Children must NOT re-center themselves. */
.article-body { font-size: 1.22rem; line-height: 1.85; max-width: var(--measure); }
.article-body > * { max-width: 100%; margin-inline: 0; }
.article-body p { margin: 0 0 1.6rem; }

.article-body h2 {
  font-size: 1.55rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 1rem;
}
.article-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2.25rem 0 0.75rem;
}

.article-body ul, .article-body ol { padding-left: 1.4rem; margin: 0 0 1.6rem; }
.article-body li { margin-bottom: 0.5rem; }

.article-body blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--ink);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted-2);
}

.article-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.article-body a:hover { text-decoration-color: var(--ink); }

.article-body figure { margin: 2.5rem 0; }
.figure-placeholder {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.article-body figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin-top: 0.7rem;
  letter-spacing: 0.02em;
}

.article-body hr {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 3rem 0;
  max-width: 100%;
}

.article-foot {
  max-width: 100%;
  /* No rule above the sign-off. The subscribe block that follows carries its own
     hairline, and two rules a few lines apart read as clutter. Spacing alone
     separates the sign-off from the last paragraph. */
  margin: 3.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- back link ---------- */
.back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 2rem;
  transition: color 0.15s ease;
}
.back:hover { color: var(--ink); }

/* ---------- contact form ---------- */
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--muted-2);
  margin-bottom: 0.5rem;
}
.field input,
.field textarea,
.subscribe input[type="email"] {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0;
  transition: border-color 0.15s ease;
}
.field input:focus,
.field textarea:focus,
.subscribe input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

.btn {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);   /* underline only, no frame */
  padding: 0.35rem 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.55; }

/* ---------- subscribe ---------- */
/* Deliberately not a boxed panel. The site's whole steer has been away from
   chrome, so this is a hairline, a line of type and an underlined field —
   the same vocabulary as .article-foot and the contact form. */
.subscribe {
  max-width: var(--measure);
  margin: 4rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.subscribe-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

/* flex-end so the input's and button's underlines sit on one line */
.subscribe-row {
  display: flex;
  align-items: flex-end;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.subscribe input[type="email"] {
  flex: 1 1 18rem;
  width: auto;
  min-width: 0;
}
.subscribe input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.subscribe .btn { margin-top: 0; flex: none; }

.subscribe-credit {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.subscribe-credit a { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line); transition: text-decoration-color 0.15s ease; }
.subscribe-credit a:hover { text-decoration-color: var(--muted); }

@media (max-width: 620px) {
  .subscribe-row { gap: 1.1rem; }
  .subscribe input[type="email"] { flex-basis: 100%; }
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: 5rem;
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line-soft);
}
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.social { display: flex; gap: 1.1rem; }
.social a {
  color: var(--muted);
  display: inline-flex;
  transition: color 0.15s ease, transform 0.15s ease;
}
.social a:hover { color: var(--ink); transform: translateY(-1px); }
.social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.copyright {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  body { font-size: 1.08rem; }
  .entry a { flex-direction: column; gap: 0.35rem; }
  /* flex-basis follows the MAIN AXIS. The 6.5rem that sets the date column's
     width in the desktop row becomes a 104px *height* the moment this stacks
     to a column, leaving ~82px of dead air above every post title. Release it
     so the date sizes to its content. */
  .entry-date { padding-top: 0; flex: 0 0 auto; }
  .article-body { font-size: 1.1rem; }
  .foot { flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}