/* Direction: night-archive editorial — dark slate, warm off-white, Archivo grotesque, square corners */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #2b3342;
  --surface: #404755;
  --surface-2: #363d4b;
  --border: #49505c;
  --border-strong: #6b707b;
  --ink: #f0f0ee;
  --muted: #b6b8bc;
  --accent: #f0f0ee;
  --accent-hover: #f2f2f1;
  --accent-ink: #222221;
  --accent-text: #f3f2f2;
  --accent-strong: #f0f0ee;
  --accent-soft: #565d68;
  --accent-border: #84888f;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #264441;
  --success-strong: #7cb892;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #493a35;
  --warning-strong: #d6a076;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #4a2e3a;
  --danger-strong: #db8a8a;
  --chart-1: #f0f0ee;
  --chart-2: #5bd8ab;
  --chart-3: #4ccefe;
  --chart-4: #cfaafc;
  --chart-5: #fda19d;
  --chart-6: #e7b551;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --radius-card: 0px;
  --radius-btn: 0px;
  --radius-input: 0px;
  --shadow-card: none;
  --x-line: #f0f0ee;
  --x-hover: #ffffff;
  --gradient-scrim: linear-gradient(180deg, rgba(20, 24, 32, 0.55) 0%, rgba(20, 24, 32, 0.12) 45%, rgba(20, 24, 32, 0.6) 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Archivo", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --border: #e0e0e0;
  --border-strong: #bdbdbc;
  --ink: #2b3342;
  --muted: #64676f;
  --accent: #cbcbc9;
  --accent-hover: #adadab;
  --accent-ink: #222221;
  --accent-text: #70706f;
  --accent-strong: #70706f;
  --accent-soft: #f8f8f7;
  --accent-border: #e8e8e7;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #939391;
  --chart-2: #0da47a;
  --chart-3: #0a87ad;
  --chart-4: #8d85dd;
  --chart-5: #ad5588;
  --chart-6: #d97d4e;
}

html, body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--x-hover); }

.hero { position: relative; height: 100vh; overflow: hidden; background: var(--canvas); color: var(--ink); }
.hero-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateZ(0); user-select: none; -webkit-user-drag: none; }
.hero-gold-base { opacity: 0.1; pointer-events: none; }
.hero-reveal {
  opacity: 0; transition: opacity 0.4s ease-out; will-change: opacity; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, black 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, black 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 110px 140px; mask-size: 110px 140px;
  -webkit-mask-position: -400px -400px; mask-position: -400px -400px;
}
.hero-scrim { position: absolute; inset: 0; background: var(--gradient-scrim); pointer-events: none; }

.hero-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; padding: 44px 64px 40px; pointer-events: none; box-sizing: border-box; }
.hero-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
.hero-top .grp { display: flex; }
.hero-top .grp-l { gap: 28px; }
.hero-top .grp-r { gap: 14px; }
.hero-pill { border: 1.5px solid var(--x-line); border-radius: 999px; padding: 4px 20px; font-size: 15px; }

.hero-title { margin: 40px 0 0; font-size: clamp(52px, 7.4vw, 104px); font-weight: 500; letter-spacing: -0.02em; line-height: 0.98; text-transform: lowercase; text-align: left; }
.hero-title .l2 { display: inline-flex; align-items: center; gap: 24px; }
.hero-plus { width: 0.8em; height: 0.8em; box-sizing: border-box; border: 1.5px solid var(--x-line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1em; }
.hero-plus span { font-size: 0.45em; font-weight: 400; line-height: 1; }

.hero-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.hero-tag { font-size: 18px; font-weight: 500; line-height: 1.45; margin: 0; }
.hero-right { max-width: 560px; }
.hero-copy { margin: 0; font-size: 15.5px; line-height: 1.6; word-spacing: 0.15em; text-align: justify; }
.hero-meta { margin-top: 20px; display: flex; justify-content: space-between; font-size: 14px; letter-spacing: 0.02em; }

@media (max-width: 900px) {
  .hero-content { padding: 28px 24px 28px; }
  .hero-top { font-size: 14px; }
  .hero-top .grp-r { display: none; }
  .hero-top .grp-l { gap: 14px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-copy { font-size: 14px; word-spacing: 0.05em; }
  .hero-title { margin-top: 28px; }
}
@media (max-width: 420px) {
  .hero-top .grp-l span:nth-child(2) { display: none; }
}