/* EVEREST visual system (direction proposal, 2026-10-27). Derived from Inspiration/Everest Branding (monochrome mountain
   photography, vast negative space, tall condensed display set behind the peak, tiny tracked labels, centred marks)
   and the approved posters (route gradient red -> amber -> yellow as the only saturated colour).
   Type: Antonio (display, condensed caps) · Jost (text) · IBM Plex Mono (data: coordinates, altitudes, dates).
   The poster grotesk and the vector ION //EVEREST lockup are still to be supplied by ION; this set is the interim. */
:root {
  --ink: #08090b; --night: #0c0f13; --snow: #eef0f0; --mist: rgba(238, 240, 240, .64); --hair: rgba(238, 240, 240, .18);
  --r1: #d8452b; --r2: #ef8a26; --r3: #f3c623; --route: linear-gradient(180deg, var(--r3), var(--r2) 45%, var(--r1));
  --display: 'Antonio', 'Arial Narrow', sans-serif; --text: 'Jost', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --m: clamp(20px, 3.4vw, 64px);   /* outer margin */
  --g: clamp(12px, 1.25vw, 24px);  /* gutter */
  --col: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--snow); }
body { font: 300 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Type scale */
.t-display { font: 100 clamp(96px, 17vw, 330px)/.8 var(--display); letter-spacing: -.012em; text-transform: uppercase; margin: 0; }
.t-title { font: 200 clamp(56px, 7.4vw, 140px)/.86 var(--display); letter-spacing: -.005em; text-transform: uppercase; margin: 0; }
.t-head { font: 300 clamp(28px, 2.6vw, 46px)/1 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.t-lede { font: 300 clamp(18px, 1.45vw, 24px)/1.4 var(--text); margin: 0; max-width: 30ch; }
.t-body { font: 300 15px/1.6 var(--text); color: var(--mist); margin: 0; max-width: 42ch; }
.t-label { font: 400 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); margin: 0; }
.t-num { font: 400 12px/1 var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.t-quote { font: 300 15px/1.55 var(--text); color: rgba(238, 240, 240, .86); margin: 0; }
.accent { background: linear-gradient(90deg, var(--r1), var(--r2) 55%, var(--r3)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Chrome: lockup, chapter index, metadata corners, rail */
.lockup { position: absolute; left: var(--m); top: var(--m); display: inline-flex; flex-direction: column; font: 500 12px/1.15 var(--text); letter-spacing: .14em; z-index: 20; color: var(--snow); text-decoration: none; }
.lockup span + span { border-top: 1px solid var(--hair); padding-top: 3px; margin-top: 2px; }
.index { position: absolute; right: var(--m); top: var(--m); display: flex; gap: 18px; align-items: baseline; z-index: 20; }
.index b { font: 400 11px var(--mono); letter-spacing: .16em; color: var(--snow); }
.meta { position: absolute; z-index: 20; display: grid; gap: 4px; }
.meta.bl { left: var(--m); bottom: var(--m); } .meta.br { right: var(--m); bottom: var(--m); text-align: right; }
.rule-line { width: 1px; background: var(--hair); }
.rail { position: absolute; left: calc(var(--m) * .45); top: 22vh; bottom: 22vh; width: 1px; background: var(--hair); z-index: 20; }
.rail i { position: absolute; left: 0; bottom: 0; width: 1px; height: var(--p, 40%); background: var(--route); box-shadow: 0 0 8px rgba(239, 138, 38, .6); }
.rail .alt { position: absolute; left: 12px; bottom: var(--p, 40%); translate: 0 50%; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid currentColor; font: 400 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.tag.gold { color: var(--r3); } .tag.ember { color: var(--r2); }
.cta { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--snow); text-decoration: none; }
.cta::after { content: ''; width: 48px; height: 1px; background: currentColor; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  .t-display { font-size: 31vw; }
  .t-title { font-size: 17vw; }
  .t-body { font-size: 14px; }
  .index { gap: 10px; }
}