/* Mountain Brand Portal. Ground, ink and ridge colour from the Mount IDN identity. */

@font-face { font-family: "Helvetica Kamil"; src: url("fonts/helvetica-kamil-300.ttf?v=2") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Helvetica Kamil"; src: url("fonts/helvetica-kamil-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Helvetica Kamil"; src: url("fonts/helvetica-kamil-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --navy: #001240;
  --navy-2: #071b4f;
  --navy-3: #0d2563;
  --ridge: #09376a;
  --ink: #ffffff;
  --muted: #b9c2d9;
  --paper: #ffffff;
  --paper-2: #eef1f7;
  --paper-ink: #001240;
  --paper-muted: #46557a;
  --danger: #ff8a80;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.32);

  --font: "Helvetica Kamil", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-d: clamp(36px, 5.4vw, 84px);
  --fs-h: clamp(24px, 2.4vw, 36px);
  --fs-b: 17px;
  --fs-s: 14px;

  --m: clamp(18px, 2.6vw, 40px);
  --gap: clamp(14px, 1.6vw, 24px);
  --chapter: clamp(96px, 12vw, 200px);
  --bar-h: 64px;

  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 18.2%, 1.017 23.7%, 1.031 27.5%, 1.023 32.2%, 1.003 42.7%, 0.998 53.6%, 1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); }
body { margin: 0; background: var(--navy); color: var(--ink); font: 400 var(--fs-b)/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, figure, ul, ol, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ink); color: var(--navy); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-size: var(--fs-s); }
.h1 { font-size: var(--fs-d); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 16px; }
.statement { font-size: var(--fs-h); line-height: 1.25; letter-spacing: -0.015em; text-wrap: pretty; }
.wordmark { width: 100%; height: auto; color: currentColor; }

.press { transition: transform 160ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), opacity 200ms; }
.press:active { transform: scale(0.97); transition-duration: 80ms; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; font-size: var(--fs-s); text-decoration: none; white-space: nowrap; }
.btn-primary, .btn-paper { background: var(--paper); color: var(--paper-ink); }
.btn-primary:hover, .btn-paper:hover { background: var(--paper-2); }
.btn-ghost { background: var(--navy-2); color: var(--ink); }
.btn-ghost:hover { background: var(--navy-3); }
.btn-danger { background: var(--danger); color: #2a0606; }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; font-size: var(--fs-s); }
.linkish:hover { color: var(--ink); }
.inline { display: inline; }
.row-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 28px; }

input:not([type=range]):not([type=file]), select, textarea.plain {
  width: 100%; min-height: 48px; padding: 0 16px; background: var(--navy-2); color: var(--ink);
  border: 0; border-radius: 0; font-size: 16px; outline: none; transition: background-color 200ms;
}
input:focus-visible, select:focus-visible { background: var(--navy-3); outline: 2px solid var(--ink); outline-offset: 0; }
label { font-size: var(--fs-s); color: var(--muted); }
.stack { display: grid; gap: 10px; }
.stack button { margin-top: 10px; justify-self: start; }
.alert { padding: 14px 16px; background: var(--navy-2); font-size: var(--fs-s); }
.alert-error { background: #3b0d16; color: #ffd4d0; }

/* ------------------------------------------------------------ ridge motif */
.ridge { background: var(--ridge); -webkit-mask: url("brand/ridge.svg") center bottom / 100% 100% no-repeat; mask: url("brand/ridge.svg") center bottom / 100% 100% no-repeat; }

/* ------------------------------------------------------------ auth pages */
.auth-shell { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { position: relative; background: var(--navy-2); overflow: hidden; }
.ridge-auth { position: absolute; inset: auto -2% 0 -2%; height: 62%; background: #0f3a7a; animation: rise 1600ms var(--ease) both; }
.auth-card { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 64px var(--m); max-width: 560px; width: 100%; }
.auth-mark { display: block; width: 150px; color: var(--ink); }
.auth-title { font-size: var(--fs-h); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.auth-lede { color: var(--muted); max-width: 44ch; }
.auth-alt { margin-top: 4px; }
.auth-foot { margin-top: 24px; color: var(--muted); font-size: var(--fs-s); }
.err-code { font-size: var(--fs-d); line-height: 1; color: var(--muted); letter-spacing: -0.04em; }
.loader { width: 100%; height: 2px; background: var(--navy-2); overflow: hidden; position: relative; }
.loader::after { content: ""; position: absolute; inset: 0 70% 0 0; background: var(--ink); animation: load 1.4s var(--ease) infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
@keyframes rise { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------ brand page: bar */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 22px; padding: 0 var(--m);
  padding-left: max(var(--m), env(safe-area-inset-left)); padding-right: max(var(--m), env(safe-area-inset-right));
  color: var(--ink); background: transparent; transition: background-color 300ms var(--ease);
}
.bar.is-solid { background: var(--navy); }
.bar-mark { width: 118px; flex: none; color: var(--ink); }
.bar-name { font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.bar-nav { margin-left: auto; }
.bar-nav ul { display: flex; gap: 22px; font-size: var(--fs-s); }
.bar-nav a { text-decoration: none; opacity: 0.82; }
.bar-nav a:hover, .bar-nav a.is-here { opacity: 1; text-decoration: underline; }
.account { position: relative; order: 3; }
.account summary { list-style: none; width: 38px; height: 38px; display: grid; place-items: center; background: var(--paper); color: var(--paper-ink); font-size: 15px; cursor: pointer; }
.account summary::-webkit-details-marker { display: none; }
.account-pop { position: absolute; right: 0; top: 48px; width: 260px; padding: 18px; background: var(--paper); color: var(--paper-ink); display: grid; gap: 10px; box-shadow: 0 20px 50px rgba(0, 6, 26, 0.45); }
.account-who span { display: block; font-size: var(--fs-s); color: var(--paper-muted); overflow-wrap: anywhere; }
.account-role { font-size: var(--fs-s); color: var(--paper-muted); }
.account-pop .btn-ghost { background: var(--paper-2); color: var(--paper-ink); }
.bar-menu { display: none; background: none; border: 0; min-height: 44px; font-size: var(--fs-s); }
.sheet { position: fixed; inset: var(--bar-h) 0 auto 0; z-index: 49; background: var(--navy); padding: 8px var(--m) 24px; }
.sheet a { display: block; padding: 12px 0; font-size: var(--fs-h); text-decoration: none; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; background: var(--navy-2); display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--hz, 1.08)) translateY(var(--hy, 0px)); transition: transform 1800ms var(--ease); will-change: transform; }
.is-loaded .hero-media img { --hz: 1; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 6, 26, 0.86) 0%, rgba(0, 6, 26, 0.35) 42%, rgba(0, 6, 26, 0) 70%), linear-gradient(to bottom, rgba(0, 6, 26, 0.5), rgba(0, 6, 26, 0) 22%); }
.hero-copy { position: relative; z-index: 2; width: 100%; padding: 0 var(--m) clamp(28px, 5vh, 56px); }
.hero-kicker { font-size: var(--fs-s); color: var(--muted); }
.hero-name {
  margin: 10px 0 0 -0.04em; font-weight: 700; line-height: 0.82; letter-spacing: -0.045em; white-space: nowrap;
  font-size: min(18vw, calc((100vw - 2 * var(--m)) * 1.6 / var(--chars, 6)), 36vh);
}
.hero-name span { display: inline-block; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: var(--fs-s); color: var(--muted); }
.hero-cue { position: absolute; right: var(--m); bottom: clamp(28px, 5vh, 56px); z-index: 2; width: 44px; height: 64px; display: grid; place-items: center; }
.hero-cue span { width: 1px; height: 48px; background: var(--ink); transform-origin: top; animation: cue 1.6s var(--ease) 900ms 1 both; }
@keyframes cue { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ------------------------------------------------------------ chapters */
.chapter { padding: var(--chapter) var(--m) 0; padding-left: max(var(--m), env(safe-area-inset-left)); padding-right: max(var(--m), env(safe-area-inset-right)); }
.chapter-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 16px; align-items: baseline; margin-bottom: clamp(32px, 4vw, 56px); }
.chapter-head > :first-child { grid-column: 1 / 5; }
.chapter-head > :nth-child(2) { grid-column: 5 / 13; color: var(--muted); }
.chapter-head .statement { color: var(--ink); }

.story-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.story-text p { grid-column: 5 / 11; max-width: 62ch; }

.frames { display: grid; gap: var(--gap); }
.frames-1 { grid-template-columns: 1fr; }
.frames-2, .frames-many { grid-template-columns: 1fr 1fr; }
.frame { overflow: hidden; background: var(--navy-2); cursor: zoom-in; }
.frame img { width: 100%; transition: transform 900ms var(--spring); }
.frame:hover img { transform: scale(1.02); }

/* logo wall with switchable ground */
.grounds { display: flex; flex-wrap: wrap; gap: 8px; }
.ground { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; background: var(--navy-2); border: 0; font-size: var(--fs-s); }
.ground i { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.ground.is-on { background: var(--ink); color: var(--navy); }
/* The wall is as wide as its logos, not the whole column. */
.logo-wall { display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: var(--gap); }
.logo-tile { position: relative; flex: none; width: 300px; max-width: 100%; display: grid; place-items: center; background: var(--ground); transition: background-color 600ms var(--ease); }
.logo-wall.is-cut .logo-tile { aspect-ratio: 4 / 3; padding: 14%; }
.logo-wall.is-flat .logo-tile { width: 420px; }
.logo-tile img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.logo-wall.is-flat .logo-tile img { width: 100%; height: auto; }
.logo-tile figcaption { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 12.5px; opacity: 0; transform: translateY(6px); transition: opacity 240ms, transform 400ms var(--spring); color: var(--tile-ink, #001240); }
.logo-wall.ink-light .logo-tile figcaption { --tile-ink: #fff; }
.logo-wall.is-flat .logo-tile figcaption { background: var(--navy); --tile-ink: #fff; }
.logo-tile:hover figcaption, .logo-tile:focus-within figcaption { opacity: 1; transform: none; }
.logo-tile figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl { font-size: var(--fs-s); white-space: nowrap; }

/* colours */
.colors { padding-left: 0; padding-right: 0; }
.colors .chapter-head { padding: 0 var(--m); }
.fields { display: flex; min-height: 70vh; }
.field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 28px var(--m) 32px; background: var(--c); color: #fff; transition: flex-grow 700ms var(--spring); overflow-wrap: anywhere; }
.field.is-light { color: #00030d; }
@media (hover: hover) { .fields:hover .field:hover { flex-grow: 1.8; } }
.field-name { font-size: var(--fs-h); line-height: 1.1; letter-spacing: -0.02em; }
.field ul { display: grid; gap: 2px; }
.copy { display: flex; gap: 14px; min-height: 36px; align-items: center; background: none; border: 0; padding: 0; text-align: left; font-variant-numeric: tabular-nums; }
.copy span { width: 3.2em; opacity: 0.75; font-size: var(--fs-s); }
.copy:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* type */
.type-name { font-size: clamp(56px, 11vw, 200px); line-height: 0.95; letter-spacing: -0.04em; overflow-wrap: anywhere; margin-bottom: clamp(40px, 5vw, 72px); }
.type-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px var(--gap); margin-bottom: clamp(40px, 5vw, 72px); }
.aa { display: block; font-size: var(--fs-d); line-height: 1; }
.aa-n { display: block; margin-top: 10px; font-size: var(--fs-s); color: var(--muted); }
.tester-box { background: var(--navy-2); padding: clamp(20px, 3vw, 40px); display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.tester { width: 100%; min-height: 1.2em; resize: none; overflow: hidden; border: 0; background: transparent; color: var(--ink); font-size: 72px; line-height: 1.05; letter-spacing: -0.02em; padding: 0; }
.tester:focus-visible { outline: 2px solid var(--ink); outline-offset: 10px; }
.tester-size { width: min(360px, 100%); accent-color: var(--ink); }
.glyphs { font-size: var(--fs-h); line-height: 1.35; overflow-wrap: anywhere; color: var(--muted); margin-bottom: 24px; }

/* cover without a photograph */
.hero-plain { height: auto; min-height: 72vh; min-height: 72svh; background: var(--navy); }
.hero-plain .hero-shade { display: none; }
.hero-lede { max-width: 52ch; margin-top: 18px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.bar-dl { order: 2; min-height: 38px; padding: 0 16px; }

/* about */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; }
.about .statement { grid-column: 1 / 11; max-width: 34ch; }
.about-more { grid-column: 5 / 12; display: grid; gap: 18px; color: var(--muted); max-width: 64ch; }

/* format links under a design: SVG · PNG · PDF */
.formats { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.formats a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 28px; padding: 4px 10px; font-size: 12px; letter-spacing: 0.04em; text-decoration: none; background: rgba(255, 255, 255, 0.1); color: inherit; transition: background-color 160ms var(--ease); }
.formats a:hover { background: rgba(255, 255, 255, 0.22); }
.formats a:active { transform: scale(0.97); }
.formats small { opacity: 0.6; font-size: 11px; }
.logo-tile .formats a { background: color-mix(in srgb, currentColor 10%, transparent); }
.logo-tile figcaption { align-items: center; }
@media (hover: none) { .logo-tile figcaption { opacity: 1; transform: none; } }

/* colour ratio */
.ratio { display: flex; min-height: clamp(160px, 22vw, 280px); }
.ratio-part { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; background: var(--c); color: #fff; overflow: hidden; }
.ratio-part.is-light { color: #00030d; }
.ratio-part span { font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ratio-part b { font-weight: 400; font-size: var(--fs-h); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* readable pairs */
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--gap); }
.pair-sample { aspect-ratio: 16 / 10; display: grid; place-items: center; font-size: clamp(44px, 5vw, 72px); letter-spacing: -0.03em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pair-name { margin-top: 12px; font-size: var(--fs-s); }
.pair-grade { font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.pair-grade b { font-weight: 400; color: var(--ink); margin-right: 6px; }
.pair.is-weak .pair-sample { opacity: 0.55; }

/* galleries with captions */
.tile figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font-size: 13px; cursor: default; }
.tile figcaption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.type-block + .type-block { margin-top: clamp(56px, 7vw, 96px); }
.files-top { margin: 0 0 24px; }
.files-note { margin-top: 18px; }

/* typography specimen */
.ch-type .chapter-head { margin-bottom: 8px; }
.ts + .ts { margin-top: clamp(72px, 9vw, 140px); }
.ts-name { font-size: clamp(64px, 11vw, 168px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 clamp(28px, 4vw, 56px) -0.04em; overflow-wrap: anywhere; }
.ts-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ts-meta { display: grid; grid-template-columns: 1fr 1fr auto; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; color: var(--muted); }
.ts-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--gap); padding: 18px 0 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ts-weights { display: grid; gap: 6px; font-size: 15px; align-content: start; }
.ts-desc { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.ts-abc { padding: 24px 0 24px calc((100% - var(--gap)) / 2.7 + var(--gap)); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.2; letter-spacing: -0.01em; }
.ts-aa { font-size: clamp(160px, 26vw, 420px); line-height: 0.9; letter-spacing: -0.04em; text-align: center; padding: 24px 0; }
.ts-hier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); margin-top: clamp(36px, 4vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-bottom: 28px; }
.ts-bar { padding: 10px 16px; background: var(--navy-2); font-size: 22px; letter-spacing: -0.01em; margin-bottom: 28px; }
.ts-levels li { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 4px; padding: 4px 0; }
.ts-px { font-size: 11px; color: var(--ridge-ink, #4f6ea8); line-height: 1.2; }
.ts-sample { line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.lv-h1 .ts-sample { font-size: clamp(56px, 7.4vw, 112px); line-height: 1; letter-spacing: -0.03em; }
.lv-h1 { padding-bottom: 20px !important; }
.ts-notes { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px; font-size: 14px; line-height: 1.65; color: var(--muted); display: grid; gap: 22px; align-content: start; }
.ts-notes > p:first-child { padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ts-dist-h { color: var(--ink); }
.ts-dist { display: grid; gap: 4px; margin-top: -10px; }
.ts-dist li::before { content: "•"; margin-right: 10px; }
.ts-dist span { color: var(--ink); }
.ts .tester-box { margin-top: clamp(36px, 4vw, 56px); }
.tester-tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.tester-weight { width: auto !important; min-height: 40px !important; }

/* applications */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { min-height: 40px; padding: 0 16px; border: 0; background: var(--navy-2); font-size: var(--fs-s); }
.tab span { opacity: 0.6; margin-left: 4px; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--navy); }
.masonry { columns: 3 300px; column-gap: var(--gap); }
.tile { break-inside: avoid; margin-bottom: var(--gap); overflow: hidden; background: var(--navy-2); cursor: zoom-in; }
.tile img, .tile video { width: 100%; transition: transform 900ms var(--spring); }
.tile:hover img { transform: scale(1.025); }

/* downloads */
.dl-list { display: grid; gap: 2px; }
.dl-row { background: var(--navy-2); }
.dl-row summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--gap); padding: 18px 20px; cursor: pointer; }
.dl-row summary::-webkit-details-marker { display: none; }
.dl-row[open] summary { background: var(--navy-3); }
.dl-label { font-size: var(--fs-h); letter-spacing: -0.02em; }
.dl-meta { color: var(--muted); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.dl-items { padding: 6px 20px 18px; display: grid; }
.dl-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 0; font-size: var(--fs-s); }
.dl-items li + li { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07); }
.dl-name { overflow-wrap: anywhere; }
.dl-ext, .dl-size { color: var(--muted); font-variant-numeric: tabular-nums; }

/* team */
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; max-width: 760px; margin-bottom: 28px; }
.invite-link { background: var(--navy-2); padding: 18px; margin-bottom: 18px; display: grid; gap: 12px; font-size: var(--fs-s); color: var(--muted); max-width: 900px; }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.copy-row input { font-size: var(--fs-s) !important; }
.people { display: grid; gap: 2px; max-width: 900px; }
.people li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px 18px; background: var(--navy-2); }
.people li.pending { background: transparent; box-shadow: inset 0 0 0 1px var(--navy-3); }
.p-name { overflow-wrap: anywhere; }
.p-name em { display: block; font-style: normal; color: var(--muted); font-size: var(--fs-s); }
.p-role { font-size: var(--fs-s); color: var(--muted); }

/* footer */
.foot { position: relative; margin-top: var(--chapter); padding: 0 var(--m) 28px; background: var(--paper); color: var(--paper-ink); overflow: hidden; }
.ridge-foot { height: clamp(140px, 24vw, 320px); margin: 0 calc(var(--m) * -1); background: var(--ridge); }
.foot-row { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 28px 0 24px; font-size: var(--fs-s); color: var(--paper-muted); }
.foot-mark { color: var(--paper-ink); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0, 4, 18, 0.94); padding: 64px 72px; opacity: 0; transition: opacity 260ms var(--ease); }
.lightbox.is-open { opacity: 1; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 128px); object-fit: contain; transform: scale(0.96); transition: transform 500ms var(--spring); }
.lightbox.is-open img { transform: none; }
.lightbox button { position: absolute; width: 52px; height: 52px; border: 0; display: grid; place-items: center; background: var(--paper); color: var(--paper-ink); font-size: 28px; line-height: 1; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; visibility: hidden; background: var(--paper); color: var(--paper-ink); padding: 12px 18px; font-size: var(--fs-s); box-shadow: 0 12px 32px rgba(0, 6, 26, 0.4); transition: opacity 240ms, transform 420ms var(--spring); }
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* reveal on scroll (only after the script runs) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 900ms var(--spring); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ admin
   Mount IDN: one navy ground, white type, hairlines like the ridge strokes,
   tracked capitals for labels, no colour beyond navy and white. */
body.admin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-line:hover { background: var(--ink); color: var(--navy); }

.adm-bar { display: flex; align-items: center; gap: 32px; padding: 20px var(--m); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.adm-bar .bar-mark { width: 120px; }
.adm-bar nav ul { display: flex; gap: 28px; flex-wrap: wrap; }
.adm-bar nav a { display: block; padding: 6px 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--muted); box-shadow: inset 0 -1px 0 transparent; transition: color 200ms var(--ease), box-shadow 200ms var(--ease); }
.adm-bar nav a:hover { color: var(--ink); }
.adm-bar nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.adm-bar nav { margin-right: auto; }
.adm-who { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .adm-who { display: none; } .adm-bar { gap: 24px; } .adm-bar nav ul { gap: 20px; } }
.adm-bar .btn { min-height: 38px; }

.adm { flex: 1; width: 100%; max-width: 1400px; padding: clamp(40px, 6vw, 88px) var(--m) 64px; }
.adm-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.adm-head .h1 { font-size: clamp(36px, 4.6vw, 72px); }
.adm-sub { color: var(--muted); font-size: var(--fs-s); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 20px 0 32px; }
.adm-sub code { color: var(--ink); overflow-wrap: anywhere; }
.adm-block { margin-top: 56px; }
.adm-block > .h3 { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.adm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 32px; }
.adm-form { max-width: 560px; }
.adm-note { border: 1px solid var(--line); padding: 28px; color: var(--muted); display: grid; gap: 12px; font-size: 15px; }
.adm-note .h3 { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin: 0; }
.struct { display: grid; }
.struct li { padding: 10px 0; border-top: 1px solid var(--line); }
.struct b { display: block; color: var(--ink); font-weight: 400; }

.adm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.adm-table th, .adm-table td { text-align: left; padding: 16px 14px 16px 0; font-weight: 400; vertical-align: middle; border-bottom: 1px solid var(--line); }
.adm-table thead th { padding-top: 20px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.adm-table tbody tr { transition: background-color 200ms var(--ease); }
@media (hover: hover) { .adm-table tbody tr:hover { background: var(--navy-2); } }
.adm-table tbody th a { font-size: 20px; letter-spacing: -0.01em; text-decoration: none; }
.adm-table tbody th a:hover { text-decoration: underline; }
.adm-table td a { color: var(--muted); white-space: nowrap; }
.adm-table td a:hover { color: var(--ink); }
.adm-table.small { font-size: 13px; }
.adm-table.small th, .adm-table.small td { padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
.adm-table td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* status: navy and white only, the mark carries the meaning */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ready { background: var(--ink); color: var(--navy); box-shadow: none; }
.pill-processing { color: var(--ink); }
.pill-processing::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.pill-failed { color: var(--danger); box-shadow: inset 0 0 0 1px currentColor; }
.pill-archived { color: var(--muted); }

.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.chips li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; margin-right: 24px; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.chips span { color: var(--ink); font-variant-numeric: tabular-nums; }
.empty { display: grid; gap: 16px; max-width: 640px; padding: 48px 0; color: var(--muted); }
.empty .statement { color: var(--ink); }
.drop { display: grid; gap: 6px; padding: 32px 28px; border: 1px dashed var(--line-strong); cursor: pointer; transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.drop:hover, .drop.is-over { background: var(--navy-2); border-color: var(--ink); }
.drop input { font-size: var(--fs-s); }
.drop input::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 0; background: var(--ink); color: var(--navy); font: inherit; font-size: 13px; cursor: pointer; }
.adm-block > p { max-width: 70ch; color: var(--muted); margin-bottom: 28px; }
.drop-title { color: var(--ink); font-size: 17px; }
.drop-file { font-size: var(--fs-s); }
.prefix { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; background: var(--navy-2); }
.prefix span { padding-left: 16px; color: var(--muted); }
.upload-progress { width: 100%; height: 4px; accent-color: var(--ink); }
.danger { box-shadow: inset 0 0 0 1px var(--danger); padding: 24px; }

.admin .people { gap: 0; border-top: 1px solid var(--line); }
.admin .people li { background: transparent; padding: 16px 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.admin .people li.pending { opacity: 0.7; }
.admin .people .p-role { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.admin .invite-link { background: transparent; border: 1px solid var(--line-strong); }

.adm-foot { position: relative; padding: 0 var(--m) 28px; }
.adm-ridge { height: clamp(70px, 9vw, 130px); margin: 0 calc(-1 * var(--m)); background: var(--ridge); opacity: 0.9; }
.adm-foot .eyebrow { margin-top: 18px; text-align: center; }

/* ------------------------------------------------------------ light brand pages
   Client brand pages (/p/<slug>) sit on paper; admin and sign-in stay on navy.
   The page reuses the dark-theme rules by swapping the ground/ink tokens. */
body.brand {
  color-scheme: light;
  --navy: #ffffff;
  --navy-2: #f2f4f8;
  --navy-3: #e5e9f2;
  --ink: #001240;
  --muted: #4d5b7c;
  --paper: #001240;
  --paper-2: #0d2563;
  --paper-ink: #ffffff;
  --paper-muted: #b9c2d9;
  --danger: #c62828;
  --line: rgba(0, 18, 64, 0.12);
  --line-strong: rgba(0, 18, 64, 0.3);
  --hair: rgba(0, 18, 64, 0.14);
}
body.brand .alert-error { background: #fdecea; color: #7a1010; }
body.brand .ground i { box-shadow: inset 0 0 0 1px rgba(0, 18, 64, 0.2); }
body.brand .logo-wall.is-flat .logo-tile figcaption { --tile-ink: var(--ink); }
body.brand .formats a { background: rgba(0, 18, 64, 0.07); }
body.brand .formats a:hover { background: rgba(0, 18, 64, 0.14); }
body.brand .pair-sample { box-shadow: inset 0 0 0 1px rgba(0, 18, 64, 0.1); }
body.brand .dl-items li + li { box-shadow: 0 -1px 0 rgba(0, 18, 64, 0.08); }
body.brand :is(.ts-top, .ts-body, .ts-hier, .ts-notes > p:first-child) { border-bottom-color: var(--hair); }
body.brand :is(.ts-meta, .ts-notes) { border-top-color: var(--hair); }
body.brand .ts-px { --ridge-ink: #3b5a96; }
body.brand .account-pop, body.brand .toast { box-shadow: 0 20px 50px rgba(0, 18, 64, 0.18); }
body.brand .bar.is-solid { box-shadow: 0 1px 0 var(--line); }
/* Footer: a soft band so it separates from the white page. */
body.brand .foot { --paper: var(--navy-2); --paper-ink: #001240; --paper-muted: #4d5b7c; }
/* Lightbox stays dark so images read cleanly; its buttons keep navy-on-white. */
body.brand .lightbox button { background: #ffffff; color: #001240; }
/* Over a cover photo the copy and the still-transparent bar stay white. */
body.brand .hero:not(.hero-plain) .hero-copy,
body.brand:has(.hero:not(.hero-plain)) .bar:not(.is-solid) { --ink: #ffffff; --muted: #d5dcec; color: var(--ink); }
body.brand .hero:not(.hero-plain) .hero-cue span { background: #ffffff; }
body.brand:has(.hero:not(.hero-plain)) .bar:not(.is-solid) .account summary { background: #ffffff; color: #001240; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .bar-nav { display: none; }
  .bar-menu { display: inline-flex; align-items: center; margin-left: auto; order: 2; }
  .chapter-head > :first-child { grid-column: 1 / 13; }
  .chapter-head > :nth-child(2) { grid-column: 1 / 13; }
  .story-text p { grid-column: 1 / 13; }
  .about .statement, .about-more { grid-column: 1 / 13; }
  .fields { flex-wrap: wrap; min-height: 0; }
  .field { flex: 1 1 45%; min-height: 260px; }
  .adm-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ts-top, .ts-hier { grid-template-columns: 1fr; }
  .ts-aa { text-align: left; font-size: 38vw; padding: 0 0 12px; }
  .ts-abc { padding-left: 0; }
  .ts-notes { margin-top: 28px; }
  .ts-body { grid-template-columns: 1fr; }
  :root { --fs-b: 16px; --fs-h: 24px; --fs-d: 36px; --bar-h: 58px; }
  .bar { gap: 12px; }
  .bar-name { display: none; }
  .bar-dl { display: none; }
  .hero-cue { display: none; }
  .bar-mark { width: 100px; }
  .hero-name { font-size: min(22vw, calc((100vw - 2 * var(--m)) * 1.6 / var(--chars, 6)), 30vh); }
  .frames-2, .frames-many { grid-template-columns: 1fr; }
  .field { flex-basis: 100%; min-height: 200px; }
  .tester { font-size: 44px; }
  .deck-slide img { max-height: 60vh; }
  .deck-btn { width: 44px; height: 44px; }
  .deck-prev { left: 8px; }
  .deck-next { right: 8px; }
  .deck-thumbs button { width: 84px; }
  .masonry { columns: 2 150px; }
  .dl-row summary { grid-template-columns: minmax(0, 1fr) auto; }
  .dl-meta { grid-column: 1; grid-row: 2; }
  .dl-zip { grid-row: 1 / 3; grid-column: 2; }
  .dl-items li { grid-template-columns: minmax(0, 1fr) auto; }
  .dl-ext, .dl-size { display: none; }
  .invite-form { grid-template-columns: 1fr; }
  .people li { grid-template-columns: minmax(0, 1fr) auto; }
  .people li form { grid-column: 1 / -1; }
  .lightbox { padding: 64px 12px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; translate: none; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { height: 160px; }
  .adm-bar nav { order: 3; width: 100%; margin-right: 0; }
  .adm-bar nav ul { gap: 16px; }
  .adm-bar nav a { letter-spacing: 0.12em; font-size: 11px; }
  .adm-bar form { margin-left: auto; }
  .adm-table { display: block; overflow-x: auto; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .hero-name { font-size: min(18vw, calc((100vw - 2 * var(--m)) * 1.6 / var(--chars, 6)), 34vh); }
  .hero-facts { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-media img { transform: none !important; }
}