/* ==========================================================================
   Galenus — Design Tokens (see DESIGN.md)
   Flat, editorial, grid-driven. No blur, no glass, no shadows, no radius.
   ========================================================================== */

:root {
  /* Canvas & neutrals */
  --color-canvas: #FFFFFF;
  --color-canvas-muted: #F5F6F8;
  --color-ink-900: #14171F;
  --color-ink-600: #5B6472;
  --color-ink-300: #D8DBE0;

  /* Navy family */
  --color-navy-900: #1A237E;
  --color-navy-800: #283593;
  --color-navy-500: #3F51B5;
  --color-navy-400: #5C6BC0;
  --color-navy-300: #7986CB;

  /* Text on navy */
  --color-on-navy: #FFFFFF;
  --color-on-navy-muted: rgba(255, 255, 255, 0.72);

  /* State */
  --color-success: #2ECC71;
  --color-error: #E5484D;

  /* Type */
  --font-display: 'Pretendard Variable', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Grid text rhythm (per project spec: 30px horizontal, 40px vertical) */
  --grid-pad-y: 40px;
  --grid-pad-x: 30px;

  --nav-height: 73px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  /* Both edges of the page are navy (hero-interactive at top, footer at
     bottom) — match it here so any residual rubber-band overscroll sliver
     shows navy instead of a flash of the body's white background. */
  background: var(--color-navy-900);
  /* Kills the elastic rubber-band/bounce scroll-chaining effect itself,
     which is what actually produces the "pulled" gap past the hero. */
  overscroll-behavior-y: none;
}

/* Page-level vertical auto-layout: every major section (nav / main / footer,
   and inside main: hero / ticker / archive) is a flex item stacked in strict
   DOM order. Nothing above this point may use position:absolute/fixed to
   place a section — only small in-layer decorations (labels, scrims) do. */
body {
  font-family: var(--font-display);
  color: var(--color-ink-900);
  background: var(--color-canvas);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  /* Nav is position:fixed (see .global-nav) and no longer reserves flow
     space, so every page pushes its content down by the nav's height here.
     The one exception is .hero-interactive, which cancels this padding
     with a matching negative margin-top so it can sit flush under the nav
     instead of below it. */
  padding-top: var(--nav-height);
}

a {
  color: inherit;
}

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

button,
input {
  font-family: inherit;
}

/* No rounded corners, no shadows, no blur anywhere in this system. */
* {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Nav — sticky, thin, logo left / links right
   ========================================================================== */

.global-nav {
  flex: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--grid-pad-x);
  background: transparent;
}

.global-nav__logo {
  display: inline-flex;
  align-items: center;
  background: var(--color-navy-500);
  text-decoration: none;
  height: 36px;
  padding: 0 10px;
  box-sizing: border-box;
}

.global-nav__logo-img {
  display: block;
  height: 26px;
  width: auto;
}

/* Menu is always hamburger-driven (no persistent horizontal link row). */
.global-nav__links {
  display: none;
  position: absolute;
  top: var(--nav-height);
  right: var(--grid-pad-x);
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  background: var(--color-canvas);
  border: 1px solid var(--color-ink-300);
  padding: var(--grid-pad-y) var(--grid-pad-x);
}

.global-nav__links.is-open {
  display: flex;
}

.nav-link {
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  color: var(--color-ink-900);
}

.global-nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: var(--color-navy-500);
  border: none;
  cursor: pointer;
  padding: 12px 14px;
}

.global-nav__hamburger span {
  width: 20px;
  height: 1.5px;
  background: var(--color-on-navy);
}

/* ==========================================================================
   Interactive hero — full-viewport, cursor-reactive particle network.
   Sits above the "latest essay" hero (now its own section below it) as a
   pure brand/atmosphere intro — no essay content, so it carries no link.
   Not yet documented as a named component in DESIGN.md.
   ========================================================================== */

.hero-interactive {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin-top: calc(-1 * var(--nav-height));
  min-height: 480px;
  background: var(--color-navy-900);
  overflow: hidden;
}

.hero-interactive__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-interactive__mark {
  position: relative;
  width: clamp(220px, 45vw, 650px);
  height: auto;
  pointer-events: none;
}

/* ==========================================================================
   Hero — 2-column gapless split, 100vh (DESIGN.md → Components → Hero).
   Left: navy-900 text panel (tagline + featured essay title, bottom-aligned,
   links to the essay). Right: the essay's cover image, full-bleed, with a
   small "LATEST" label pinned top-right. Replaces the old separate
   hero + featured-strip sections, which duplicated the same essay in two
   places from two different data sources.
   ========================================================================== */

.hero {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Without this, the implicit row is sized by content (auto), and the
     cover image's own aspect ratio (900:1000) wins over the explicit
     height below — the row grows to fit the image instead of the image
     being clipped to the row. minmax(0, 1fr) pins the row to the
     container's actual height so both columns are forced to match it. */
  grid-template-rows: minmax(0, 1fr);
  /* Full viewport, same as .hero-interactive above it. Nav is fixed/overlaid
     (see .global-nav) so it doesn't need to be subtracted here — this
     section isn't main's first child, so main's padding-top doesn't touch
     its position either; it simply follows .hero-interactive in flow. */
  height: 100vh;
  min-height: 480px;
}

/* Outer layer: the navy panel itself. Owns only size/position/background —
   never text spacing, so its sizing math can never fight with type rhythm. */
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-navy-900);
  text-decoration: none;
}

/* Inner layer: the text stack. Owns all text spacing (padding from the
   panel edges, gap between tagline and title) — independent of how the
   outer panel is sized. */
.hero__text-layer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--grid-pad-y) var(--grid-pad-x);
}

.hero__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-navy-muted);
}

.hero__title {
  color: var(--color-on-navy);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.15;
  max-width: 22ch;
}

.hero__image-col {
  position: relative;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__latest-label {
  position: absolute;
  top: var(--grid-pad-y);
  right: var(--grid-pad-x);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-on-navy);
}

/* ==========================================================================
   Archive grid — gapless, equal-size, edge-to-edge
   New items: edit the `essays` array in script.js — the grid re-renders
   automatically, no markup changes needed here.
   ========================================================================== */

.archive {
  flex: none;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Shows through only in empty trailing cells when the last row doesn't
     fill all 3 columns — every cell with a card is fully covered by it. */
  background: var(--color-navy-900);
}

.archive-grid .essay-card {
  height: 70vh;
  min-height: 420px;
}

/* ==========================================================================
   Essay card — full-bleed thumbnail, white text overlay on a scrim
   ========================================================================== */

.essay-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-navy-800);
  text-decoration: none;
}

.essay-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.essay-card:hover .essay-card__thumb {
  transform: scale(1.06);
}

.essay-card__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.essay-card__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--grid-pad-y) var(--grid-pad-x);
}

.essay-card__title {
  color: var(--color-on-navy);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.essay-card__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-on-navy-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  flex: none;
  background: var(--color-navy-900);
  padding: 56px var(--grid-pad-x) 40px;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 200px;
}

.footer__logo {
  display: block;
  height: 18px;
  width: auto;
  margin-bottom: 12px;
}

.footer__tagline {
  color: var(--color-on-navy-muted);
  font-size: 13px;
}

.footer__newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.footer__newsletter-label {
  color: var(--color-on-navy);
  font-size: 14px;
  font-weight: 500;
}

.newsletter-form {
  display: flex;
}

.newsletter-input {
  width: 280px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-ink-300);
  background: var(--color-canvas);
  font-size: 13px;
  color: var(--color-ink-900);
}

.newsletter-input::placeholder {
  color: var(--color-ink-600);
}

.button-primary {
  height: 44px;
  padding: 0 20px;
  border: none;
  background: var(--color-navy-500);
  color: var(--color-on-navy);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.button-primary:active {
  background: var(--color-navy-800);
}

.newsletter-feedback {
  font-size: 12px;
  min-height: 16px;
}

.newsletter-feedback[data-state="success"] {
  color: var(--color-success);
}

.newsletter-feedback[data-state="error"] {
  color: var(--color-error);
}

.footer__copyright {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-on-navy-muted);
}

/* ==========================================================================
   Essay detail page — intentionally minimal. DESIGN.md defers this page's
   visual design until a real essay draft exists; this is plumbing only,
   just enough to read the title/dek/date/body without unstyled text.
   ========================================================================== */

.essay__header {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px var(--grid-pad-x) 32px;
}

.essay__title {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  margin-bottom: 16px;
}

.essay__dek {
  font-size: 18px;
  color: var(--color-ink-600);
  margin-bottom: 16px;
}

.essay__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-ink-600);
}

.essay__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--grid-pad-x) 96px;
  font-size: 17px;
  line-height: 1.7;
}

/* ==========================================================================
   Desktop-only build for now — responsive breakpoints intentionally
   deferred (see DESIGN.md → Responsive Behavior).
   ========================================================================== */