/* ════════════════════════════════════════════════════════════════
   Alex Internet — Metropolis Design System
   Colors + Type (single-file foundation: tokens, base, utilities)
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=Big+Shoulders+Display:wght@700;800;900&display=swap');

/* ─── BASE TOKENS (mode-agnostic) ──────────────────────────────── */
:root {
  /* Raw palette */
  --cream:    #ede8dc;
  --fog:      #d4cfc2;
  --tan:      #b8a882;
  --slate:    #7a8a9a;
  --steel:    #4e5e6e;
  --charcoal: #242c34;
  --ink:      #10161e;
  --red:      #c0241a;
  --red-dim:  #7a1810;
  --red-soft: #e8a09a;

  /* Type */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', 'Courier New', monospace;
  --font-body:    'DM Mono', 'JetBrains Mono', 'Courier New', monospace;
  --font-poster:  'Big Shoulders Display', 'Arial Narrow', sans-serif;

  /* Type scale — captions through display */
  --t-micro:     10px;   /* labels, tags */
  --t-caption:   11px;   /* photo captions */
  --t-body:      13px;   /* body */
  --t-lead:      15px;   /* lead paragraph */
  --t-h6:        18px;
  --t-h5:        22px;
  --t-h4:        28px;
  --t-h3:        36px;
  --t-h2:        48px;
  --t-h1:        64px;
  --t-display:   clamp(48px, 8vw, 96px);

  /* Line heights */
  --lh-tight:    1.05;
  --lh-display:  1.1;
  --lh-snug:     1.4;
  --lh-body:     1.6;
  --lh-loose:    1.75;

  /* Letter spacing */
  --ls-label:    0.16em;
  --ls-tag:      0.12em;
  --ls-display:  0.02em;
  --ls-body:     0;

  /* Spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* Angular clip-paths — single-sided slants. Top inset, bottom full-width;
     right edge slopes outward as it descends. "rev" mirrors the direction.
     Small elements use pixel-based slants so the slant width stays constant
     regardless of element width. Large elements use percentage. */
  --slant-sm: 18px;   /* tags, nav-mode */
  --slant-md: 28px;   /* buttons */
  --slant-lg: 40px;   /* portraits, thumbs */

  --clip-btn:        polygon(0 0, calc(100% - var(--slant-md)) 0, 100% 100%, 0 100%);
  --clip-btn-rev:    polygon(var(--slant-md) 0, 100% 0, 100% 100%, 0 100%);
  --clip-tag:        polygon(0 0, calc(100% - var(--slant-sm)) 0, 100% 100%, 0 100%);
  --clip-tag-rev:    polygon(var(--slant-sm) 0, 100% 0, 100% 100%, 0 100%);
  --clip-thumb:      polygon(0 0, calc(100% - var(--slant-lg)) 0, 100% 100%, 0 100%);
  --clip-portrait:   polygon(0 0, calc(100% - var(--slant-lg)) 0, 100% 100%, 0 100%);
  --clip-panel:      polygon(0 0, 96% 0, 100% 100%, 0 100%);
  --clip-panel-rev:  polygon(4% 0, 100% 0, 100% 100%, 0 100%);
  --clip-panel-l:    polygon(0 0, 100% 0, 100% 100%, 4% 100%);
  --clip-panel-r:    polygon(0 0, 100% 0, 96% 100%, 0 100%);
  --clip-row:        polygon(0 0, 98% 0, 100% 100%, 0 100%);
  --clip-token:      polygon(0 0, 96% 0, 100% 100%, 0 100%);
  --clip-marker:     polygon(0 0, 60% 0, 100% 100%, 0 100%);

  /* Skews */
  --skew-left:  skewX(-8deg);
  --skew-right: skewX(8deg);
  --skew-deep:  skewX(-14deg);

  /* Motion */
  --ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   360ms;

  /* Radii — minimal; clip-paths do most of the shaping */
  --r-hair:  2px;
  --r-soft:  3px;
}

/* ─── LIGHT MODE (default) ─────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --bg:           #f4f5f7;
  --bg-raised:    #fbfbfc;
  --bg-sunk:      #e5e8ec;
  --bg-token:     rgba(16, 22, 30, 0.025);
  --bg-row:       rgba(16, 22, 30, 0.02);

  --fg:           var(--ink);
  --fg-muted:     var(--steel);
  --fg-dim:       var(--slate);
  --fg-inverse:   #f4f5f7;

  --accent:       var(--red);
  --accent-hover: #a01e16;
  --accent-dim:   #d6a8a3;
  --accent-soft:  var(--red-dim);

  --border:       rgba(16, 22, 30, 0.08);
  --border-strong: rgba(16, 22, 30, 0.16);
  --rule:         rgba(16, 22, 30, 0.06);

  --win-off:      rgba(78, 94, 110, 0.10);
  --win-edge:     rgba(78, 94, 110, 0.14);
  --win-on:       rgba(192, 36, 26, 0.20);
  --win-on-edge:  rgba(192, 36, 26, 0.45);
  --win-warm:     rgba(184, 168, 130, 0.30);
  --win-warm-edge: rgba(184, 168, 130, 0.40);

  color-scheme: light;
}

/* ─── DARK MODE ────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:           var(--ink);
  --bg-raised:    var(--charcoal);
  --bg-sunk:      #0a0e14;
  --bg-token:     rgba(255, 255, 255, 0.02);
  --bg-row:       rgba(255, 255, 255, 0.02);

  --fg:           var(--cream);
  --fg-muted:     var(--slate);
  --fg-dim:       var(--steel);
  --fg-inverse:   var(--ink);

  --accent:       var(--red);
  --accent-hover: #a01e16;
  --accent-dim:   var(--red-dim);
  --accent-soft:  var(--red-soft);

  --border:       rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --rule:         rgba(255, 255, 255, 0.05);

  --win-off:      rgba(122, 138, 154, 0.10);
  --win-edge:     rgba(122, 138, 154, 0.12);
  --win-on:       rgba(192, 36, 26, 0.25);
  --win-on-edge:  rgba(192, 36, 26, 0.40);
  --win-warm:     rgba(184, 168, 130, 0.20);
  --win-warm-edge: rgba(184, 168, 130, 0.25);

  color-scheme: dark;
}

/* Respect system preference when no explicit theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           var(--ink);
    --bg-raised:    var(--charcoal);
    --bg-sunk:      #0a0e14;
    --bg-token:     rgba(255, 255, 255, 0.02);
    --bg-row:       rgba(255, 255, 255, 0.02);
    --fg:           var(--cream);
    --fg-muted:     var(--slate);
    --fg-dim:       var(--steel);
    --fg-inverse:   var(--ink);
    --accent-dim:   var(--red-dim);
    --accent-soft:  var(--red-soft);
    --border:       rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);
    --rule:         rgba(255, 255, 255, 0.05);
    --win-off:      rgba(122, 138, 154, 0.10);
    --win-edge:     rgba(122, 138, 154, 0.12);
    --win-on:       rgba(192, 36, 26, 0.25);
    --win-on-edge:  rgba(192, 36, 26, 0.40);
    --win-warm:     rgba(184, 168, 130, 0.20);
    --win-warm-edge: rgba(184, 168, 130, 0.25);
    color-scheme: dark;
  }
}

/* ─── SEMANTIC ELEMENTS ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  line-height: var(--lh-display);
  margin: 0;
  letter-spacing: var(--ls-display);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-h5); }
h6 { font-size: var(--t-h6); }

p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

small {
  font-size: var(--t-caption);
  color: var(--fg-muted);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--accent);
}

em {
  font-family: var(--font-poster);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--fg-inverse); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── UTILITY CLASSES ──────────────────────────────────────────── */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.label-accent { color: var(--accent); }

.caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* The diamond ◆ — drawn, not glyph */
.diamond {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}
.diamond-dim {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--fg-dim);
  transform: rotate(45deg);
  opacity: 0.6;
}

/* Angular rule — section divider */
.rule-ang {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
}
.rule-ang::before,
.rule-ang::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Section label with auto rule */
.sec-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-label::before {
  content: '◆';
  color: var(--accent);
  font-size: 7px;
}
.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}