/* Pulp v2: the whole site, rebuilt on the Our story system (os.css: tokens, type, photos, plates, reveals).
   This file adds the site frame (bar, menu, modes, footer, contact), the page parts, and The Long Argument. */

/* Mono: one ink, no hue */
:root[data-theme="mono"] {
  --ground: #F2F2F2; --type: #111111; --muted: #555555; --line: #D2D2D2; --band: #E6E6E6; --card: #FFFFFF;
  --feature: #1E1E1E; --feature-type: #F2F2F2; --feature-muted: #CFCFCF; --thread: #3A3A3A; --ink-field: #1E1E1E;
  --hl: #FFFFFF; --hl-type: #111111; --bar: rgba(242, 242, 242, 0.86); color-scheme: light;
}
:root[data-theme="mono"] .os-hl { outline: 1.5px solid #111111; outline-offset: -1px; }
:root[data-theme="mono"] img:not(.v2-keep) { filter: grayscale(1); }

/* The bar */
.v2-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.v2-bar__in { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.v2-bar .os-mark svg { width: 80px; }
.v2-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.v2-nav a { position: relative; padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 650; text-decoration: none; color: var(--type); }
.v2-nav a:hover { background: var(--band); }
.v2-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--thread); }
.v2-bar__sp { flex: 1; }
.v2-tag { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--type); background: var(--type); color: var(--ground); font: 800 15px/1 var(--f); text-decoration: none; cursor: pointer; transition: transform 220ms var(--ease); }
.v2-btn:hover { transform: translateY(-2px); }
.v2-btn--ghost { background: transparent; color: var(--type); }
.v2-btn--hl { background: var(--hl); color: var(--hl-type); border-color: var(--hl); }
.v2-btn--paper { background: var(--feature-type); color: #191A19; border-color: var(--feature-type); }
.v2-btn--line { background: transparent; color: var(--feature-type); border-color: var(--feature-muted); }
.v2-btn svg { width: 18px; height: 18px; }
.v2-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--type); cursor: pointer; }
.v2-icon svg { width: 20px; height: 20px; }
.v2-menu-btn { display: none; }
@media (max-width: 1080px) { .v2-nav, .v2-bar .v2-tag { display: none; } .v2-menu-btn { display: inline-flex; } }
@media (max-width: 520px) { .v2-bar .v2-btn--cta { display: none; } }

/* Dialogs: menu, modes, contact, seats */
.v2-dialog { border: 0; padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; border-radius: 18px; background: var(--card); color: var(--type); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5); }
.v2-dialog::backdrop { background: rgba(25, 26, 25, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.v2-dialog__in { display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 24px; }
.v2-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v2-dialog h2 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 850; letter-spacing: -0.02em; }
.v2-dialog nav { display: flex; flex-direction: column; }
.v2-dialog nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 750; text-decoration: none; }
.v2-field { display: flex; flex-direction: column; gap: 6px; }
.v2-field label { font-size: 14px; font-weight: 750; }
.v2-field input, .v2-field textarea { font: 400 17px/1.4 var(--f); color: var(--type); background: var(--ground); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.v2-field input:focus-visible, .v2-field textarea:focus-visible { outline: 2px solid var(--thread); outline-offset: 1px; border-color: var(--thread); }
.v2-field[data-state="invalid"] input, .v2-field[data-state="invalid"] textarea { border-color: #B3261E; }
.v2-field small { font-size: 13.5px; color: var(--muted); }
.v2-status { min-height: 22px; font-size: 15px; color: var(--muted); }
.v2-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v2-modes button { min-height: 64px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ground); color: var(--type); font: 750 14px/1.2 var(--f); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.v2-modes button[aria-pressed="true"] { border-color: var(--type); box-shadow: inset 0 0 0 1px var(--type); }
.v2-modes i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); }

/* Page heads and sections */
.v2-hero { position: relative; overflow: hidden; background: var(--feature); color: var(--feature-type); }
.v2-hero--ink { background: #191A19; }
.v2-hero--paper { background: var(--ground); color: var(--type); }
.v2-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; padding-block: clamp(56px, 9vw, 112px) clamp(56px, 8vw, 96px); }
@media (min-width: 980px) { .v2-hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; } }
.v2-hero__text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.v2-hero .os-label { color: var(--feature-muted); }
.v2-hero--paper .os-label { color: var(--muted); }
.v2-h1 { margin: 0; font-size: clamp(48px, 8.2vw, 120px); line-height: 0.98; font-weight: 880; letter-spacing: -0.05em; text-wrap: balance; }
.v2-dek { margin: 0; max-width: 40ch; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.45; font-weight: 300; color: var(--feature-muted); text-wrap: pretty; }
.v2-hero--paper .v2-dek { color: var(--muted); }
.v2-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.v2-hero__art { min-width: 0; display: flex; justify-content: center; }
.v2-sec { padding-block: clamp(64px, 9vw, 112px); }
.v2-sec--band { background: var(--band); }
.v2-sec--feature { background: var(--feature); color: var(--feature-type); }
.v2-sec--feature .os-label, .v2-sec--feature .v2-head p { color: var(--feature-muted); }
.v2-sec--ink { background: #191A19; color: #F0F0EC; }
.v2-sec--ink .os-label, .v2-sec--ink .v2-head p { color: #C9C9C5; }
.v2-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.v2-head h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.0; font-weight: 880; letter-spacing: -0.04em; text-wrap: balance; }
.v2-head p { margin: 0; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.v2-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 900px) { .v2-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } .v2-split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.v2-big { margin: 0; font-size: clamp(34px, 5.2vw, 72px); line-height: 1.02; font-weight: 880; letter-spacing: -0.045em; text-wrap: balance; }
.v2-lede { margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; font-weight: 300; text-wrap: pretty; }
.v2-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; }
.v2-more svg { width: 18px; height: 18px; transition: transform 220ms var(--ease); }
.v2-more:hover svg { transform: translateX(4px); }

/* Cards that lead somewhere */
.v2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); gap: var(--gap, 18px); }
.v2-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; min-width: 0; text-decoration: none; color: inherit; transition: transform 240ms var(--ease), border-color 240ms var(--ease); }
a.v2-card:hover { transform: translateY(-3px); border-color: var(--thread); }
.v2-card h3 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 850; letter-spacing: -0.015em; }
.v2-card p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--muted); }
.v2-card .os-label { color: var(--thread); }
.v2-card__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.v2-card__go svg { width: 18px; height: 18px; }
.v2-card--feature { background: var(--feature); color: var(--feature-type); border-color: var(--feature); }
.v2-card--feature p { color: var(--feature-muted); }
.v2-card--feature .os-label { color: var(--feature-muted); }
.v2-card--ink { background: #191A19; color: #F0F0EC; border-color: #191A19; }
.v2-card--ink p { color: #C9C9C5; }
.v2-card canvas { margin: -6px -6px 4px; width: calc(100% + 12px); }
.v2-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--band); color: var(--type); }
.v2-chip--done { background: var(--feature); color: var(--feature-type); }
.v2-chip--soon { background: transparent; border: 1px dashed var(--line); color: var(--muted); }

/* The instrument ladder */
.v2-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); border-top: 2px solid currentColor; counter-reset: r; }
.v2-ladder li { counter-increment: r; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 22px 0; border-bottom: 1px solid var(--line); }
.v2-ladder li::before { content: counter(r, decimal-leading-zero); font-size: 14px; font-weight: 850; color: var(--thread); font-variant-numeric: tabular-nums; }
.v2-ladder b { font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; }
.v2-ladder span { font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.v2-sec--feature .v2-ladder li { border-color: rgba(231, 227, 246, 0.25); }
.v2-sec--feature .v2-ladder li::before { color: var(--hl); }
.v2-sec--feature .v2-ladder span { color: var(--feature-muted); }

/* Eight channels */
.v2-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.v2-channel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 16px 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.v2-channel b { font-size: 19px; }
.v2-channel em { grid-column: 2; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--thread); text-transform: uppercase; }
.v2-channel span { grid-column: 2; font-size: 15px; line-height: 1.45; color: var(--muted); }
.v2-channel i { grid-row: span 3; width: 12px; height: 12px; border-radius: 50%; background: var(--thread); margin-top: 6px; }

/* The record */
.v2-record { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 2px solid var(--type); }
.v2-record li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.v2-record b { font-size: 19px; line-height: 1.25; }
.v2-record span { font-size: 15.5px; color: var(--muted); }
.v2-record .v2-chip { grid-row: span 2; align-self: center; }

/* Scale: from one person to a whole public */
.v2-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; counter-reset: s; }
.v2-scale li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.v2-scale svg { grid-row: span 2; width: 76px; height: 76px; color: var(--thread); }
.v2-scale b { font-size: 19px; line-height: 1.2; }
.v2-scale span { font-size: 15.5px; line-height: 1.45; color: var(--muted); }

/* Papers */
.v2-papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.v2-paper { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: transform 240ms var(--ease), border-color 240ms var(--ease); }
.v2-paper:hover { transform: translateY(-3px); border-color: var(--thread); }
.v2-paper .os-label { color: var(--thread); }
.v2-paper b { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.v2-paper q { font-size: 15.5px; line-height: 1.45; color: var(--muted); quotes: none; }
.v2-paper span:last-child { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--muted); }

/* Strata: the Pulp API, named for the ground */
.v2-strata { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.v2-stratum { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 28px; align-items: baseline; padding: 26px 28px; }
.v2-stratum b { font-size: 28px; line-height: 1.05; font-weight: 880; letter-spacing: -0.03em; }
.v2-stratum span { font-size: 17px; line-height: 1.5; }
.v2-stratum em { grid-column: 1; font-style: normal; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.v2-stratum:nth-child(1) { background: #E7E3F6; color: #191A19; }
.v2-stratum:nth-child(2) { background: #8E82C8; color: #191A19; }
.v2-stratum:nth-child(3) { background: #5B4E9A; color: #F0F0EC; }
.v2-stratum:nth-child(4) { background: #372F5C; color: #F0F0EC; }
@media (max-width: 640px) { .v2-stratum { grid-template-columns: minmax(0, 1fr); } }

/* Timeline of the company, compact */
.v2-years { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); gap: 0; border-top: 2px solid currentColor; }
.v2-years div { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 22px 0; border-bottom: 1px solid var(--line); }
.v2-years b { font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.v2-years span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.v2-sec--feature .v2-years div { border-color: rgba(231, 227, 246, 0.25); }
.v2-sec--feature .v2-years span { color: var(--feature-muted); }

/* A quote band */
.v2-quote { margin: 0; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.06; font-weight: 880; letter-spacing: -0.04em; text-wrap: balance; }
.v2-quote cite { display: block; margin-top: 18px; font-size: 16px; font-style: normal; font-weight: 650; letter-spacing: 0; color: var(--muted); }
.v2-sec--feature .v2-quote cite, .v2-sec--ink .v2-quote cite { color: var(--feature-muted); }

/* Footer */
.v2-foot { border-top: 1px solid var(--line); padding-block: 56px 64px; font-size: 15px; color: var(--muted); }
.v2-foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 28px 24px; }
.v2-foot h2 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--type); }
.v2-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-foot a { text-decoration: none; }
.v2-foot a:hover { text-decoration: underline; }
.v2-foot__end { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-end; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.v2-foot__end .os-mark svg { width: 64px; }
.v2-foot__end p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.55; }

/* ---------- The Long Argument ---------- */
.la-cover { position: relative; overflow: hidden; background: var(--feature); color: var(--feature-type); }
.la-cover__in { padding-block: clamp(56px, 8vw, 104px) 40px; display: flex; flex-direction: column; gap: 22px; }
.la-cover .os-label { color: var(--feature-muted); }
.la-q { margin: 6px 0 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; font-weight: 300; color: var(--feature-muted); }
.la-q b { font-weight: 850; color: var(--feature-type); }
.la-stats { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 8px; }
.la-stats div { display: flex; flex-direction: column; gap: 4px; }
.la-stats b { font-size: clamp(30px, 3.6vw, 46px); line-height: 1; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.la-stats span { font-size: 14.5px; color: var(--feature-muted); }
.la-spine { position: relative; padding-block: 8px 40px; }
.la-spine canvas { display: block; width: 100%; height: clamp(220px, 26vw, 330px); cursor: crosshair; }
.la-spine__tip { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, -100%); padding: 8px 12px; border-radius: 10px; background: var(--feature-type); color: #191A19; font-size: 14px; font-weight: 750; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 160ms ease; }
.la-spine__tip.is-on { opacity: 1; }
.la-spine__tip span { display: block; font-weight: 500; color: #4A4560; }
.la-spine__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--feature-muted); }
.la-spine__legend i { display: inline-block; width: 18px; height: 2px; vertical-align: middle; margin-right: 8px; background: var(--feature-muted); }
.la-spine__legend i.y { width: 10px; height: 10px; border-radius: 50%; background: var(--hl); }

.la-bar { position: sticky; top: 64px; z-index: 30; background: var(--bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.la-bar__in { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.la-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--band); border: 1px solid var(--line); }
.la-switch label { position: relative; }
.la-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.la-switch span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 9px; font-size: 15px; font-weight: 750; color: var(--muted); }
.la-switch input:checked + span { background: var(--card); color: var(--type); box-shadow: 0 1px 0 var(--line), 0 6px 14px -10px rgba(0, 0, 0, 0.4); }
.la-switch input:focus-visible + span { outline: 2px solid var(--thread); outline-offset: 2px; }
.la-parts { display: flex; gap: 6px; flex-wrap: wrap; }
.la-parts a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 14px; font-weight: 800; text-decoration: none; color: var(--muted); border: 1px solid var(--line); }
.la-parts a:hover { color: var(--type); border-color: var(--thread); }
.la-rule { margin-left: auto; font-size: 13.5px; line-height: 1.4; color: var(--muted); max-width: 34ch; }
@media (max-width: 1320px) { .la-rule { display: none; } }

.la-board { padding-block: 40px 24px; }
.la-row { margin-bottom: 56px; scroll-margin-top: calc(var(--la-stick, 160px) + 20px); }
.la-row__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.la-row__n { font-size: clamp(40px, 5vw, 64px); line-height: 0.9; font-weight: 900; letter-spacing: -0.05em; color: var(--thread); }
.la-row__head h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; font-weight: 880; letter-spacing: -0.03em; }
.la-row__head span { font-size: 15.5px; color: var(--muted); }
.la-shelf { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 4px 18px; margin: 0 -4px; scrollbar-width: thin; }
.la-shelf > * { scroll-snap-align: start; flex: none; }

.la-card { --w: 300px; position: relative; width: var(--w); aspect-ratio: 4 / 5; container-type: inline-size; box-sizing: border-box; border-radius: 10px; background: #372F5C; color: #F6F4EE; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.la-card__in { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 3.2cqi; padding: 7cqi 7.4cqi 6.4cqi; }
.la-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(25, 26, 25, 0.75); }
.la-card:focus-visible { outline: 3px solid var(--hl); outline-offset: 3px; }
.la-card__top { display: flex; justify-content: space-between; gap: 8px; font-size: 2.6cqi; line-height: 1.2; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #CFC9E6; }
.la-card__top span:last-child { font-variant-numeric: tabular-nums; flex: none; }
.la-card__pic { position: relative; width: 100%; aspect-ratio: 920 / 720; flex: none; border-radius: 3px; overflow: hidden; background: #40376A; }
.la-card__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.la-card__pend { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqi; color: #CFC9E6; }
.la-card__pend b { font-size: 24cqi; line-height: 0.9; font-weight: 300; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.la-card__pend span { font-size: 2.4cqi; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.la-card__name { margin: 0; font-size: calc(var(--fit, 8.8) * 1cqi); line-height: 1; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-card__when { margin: -1.4cqi 0 0; font-size: 3.2cqi; line-height: 1.2; font-weight: 600; color: #CFC9E6; }
.la-card__piece { margin: 0; font-size: 3.5cqi; line-height: 1.3; font-weight: 700; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.la-mark { background: #E6F21A; color: #191A19; padding: 0 0.22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.la-card__cap { margin: auto 0 0; font-size: 2.3cqi; line-height: 1.35; color: #CFC9E6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.la-card--101 { box-shadow: 0 0 0 3px #E6F21A; }

.la-next { flex: none; width: 260px; display: flex; flex-direction: column; gap: 10px; padding: 20px; box-sizing: border-box; border-radius: 10px; border: 1.5px dashed var(--line); align-self: stretch; }
.la-next h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.la-next a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.la-next a:hover { border-color: var(--thread); }
.la-next b { font-size: 16px; line-height: 1.25; }
.la-next span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* Line: every card in one row */
.la-board.is-line { display: flex; align-items: flex-start; overflow-x: auto; gap: 0; padding-bottom: 32px; scroll-snap-type: x proximity; }
.la-board.is-line .la-row { flex: none; margin: 0 56px 0 0; }
.la-board.is-line .la-shelf { overflow: visible; margin: 0; padding: 4px 0 18px; }
.la-board.is-line .la-next { display: none; }
.la-board.is-line .la-row__head { white-space: nowrap; }

/* Wall: true time, stacked */
.la-board.is-wall { position: relative; }
.la-board.is-wall .la-row { display: contents; }
.la-board.is-wall .la-row__head, .la-board.is-wall .la-next { display: none; }
.la-board.is-wall .la-shelf { display: contents; }
.la-board.is-wall .la-card { position: absolute; --w: var(--tile, 64px); width: var(--tile, 64px); border-radius: 6px; aspect-ratio: auto; height: var(--tileh, 80px); }
.la-board.is-wall .la-card__in { padding: 0; gap: 0; }
.la-board.is-wall .la-card__in > :not(.la-card__pic):not(.la-card__name) { display: none; }
.la-board.is-wall .la-card__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.la-board.is-wall .la-card__pic { height: 100%; aspect-ratio: auto; border-radius: 6px; }
.la-board.is-wall .la-card__pend b { font-size: 34cqi; }
.la-board.is-wall .la-card__pend span { display: none; }
.la-wall__tick { position: absolute; font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; transform: translateX(-50%); }
.la-wall__base { position: absolute; left: 0; right: 0; height: 2px; background: var(--type); }

@media (max-width: 560px) {
  .la-shelf { flex-direction: column; overflow: visible; }
  .la-card { --w: 100%; }
  .la-next { width: 100%; }
  .la-board.is-line { display: block; }
  .la-board.is-line .la-row { margin: 0 0 40px; }
}

/* A seat, opened: the whole print in a steady frame, the year on a rail, the golden circle as bullets */
.la-dialog { border: 0; padding: 0; width: min(1240px, calc(100vw - 24px)); max-width: none; height: min(880px, calc(100dvh - 24px)); max-height: none; overflow: hidden; border-radius: 18px; background: #372F5C; color: #F6F4EE; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7); }
.la-dialog::backdrop { background: rgba(25, 26, 25, 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.la-dlg { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.la-dlg__rail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 30px; padding: 16px 20px 12px 28px; border-bottom: 1px solid rgba(231, 227, 246, 0.18); touch-action: pan-y; }
.la-dlg__year { display: flex; flex-direction: column; gap: 5px; min-width: 9.5ch; }
.la-dlg__year b { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; font-weight: 880; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.la-dlg__year span { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #CFC9E6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.la-dlg__ruler { position: relative; height: 48px; margin-inline: 12px; cursor: ew-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
.la-dlg__track { position: absolute; left: 0; right: 0; top: 28px; height: 2px; background: rgba(231, 227, 246, 0.38); }
.la-dlg__track i { position: absolute; top: -3px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: rgba(231, 227, 246, 0.55); }
.la-dlg__track i.is-101 { top: -4px; height: 10px; background: #E6F21A; }
.la-dlg__tick { position: absolute; top: -26px; transform: translateX(-50%); font-size: 11px; font-weight: 750; color: #CFC9E6; white-space: nowrap; }
.la-dlg__mark { position: absolute; top: 15px; left: 0; width: 4px; height: 28px; margin-left: -2px; border-radius: 2px; background: #F6F4EE; box-shadow: 0 0 0 5px rgba(246, 244, 238, 0.16); transition: left 420ms cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.la-dlg__ctrl { display: flex; align-items: center; gap: 8px; }
.la-dlg__count { margin-right: 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: #CFC9E6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.la-dlg__step, .la-dialog__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 10px; border: 1.5px solid rgba(231, 227, 246, 0.55); background: transparent; color: #F6F4EE; font: 750 22px/1 var(--f); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.la-dlg__step svg { width: 20px; height: 20px; pointer-events: none; }
.la-dlg__step:hover, .la-dialog__close:hover { border-color: #F6F4EE; }
.la-dlg__step:disabled { opacity: 0.35; cursor: default; }
.la-dlg__step:focus-visible, .la-dialog__close:focus-visible { outline: 2px solid #E6F21A; outline-offset: 2px; }
.la-dlg__main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.la-dlg__pic { margin: 0; padding: 26px 0 26px 28px; display: flex; flex-direction: column; gap: 12px; min-height: 0; touch-action: pan-y; }
.la-dlg__frame { position: relative; width: 100%; aspect-ratio: 920 / 720; flex: none; border-radius: 6px; overflow: hidden; background: #40376A; container-type: inline-size; }
.la-dlg__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 240ms ease; }
.la-dlg__frame img.is-on { opacity: 1; }
.la-dlg__frame .la-card__pend[hidden] { display: none; }
.la-dlg__cap { font-size: 13.5px; line-height: 1.5; color: #CFC9E6; }
.la-dlg__cap a { color: #E7E3F6; }
.la-dlg__text { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 26px 32px 32px 30px; display: flex; flex-direction: column; gap: 14px; }
.la-dlg__text h2 { margin: 0; font-size: clamp(32px, 3.8vw, 50px); line-height: 1; font-weight: 850; letter-spacing: -0.035em; }
.la-dlg__when { margin: -4px 0 0; font-size: 17px; font-weight: 600; color: #CFC9E6; }
.la-dlg__piece { margin: 2px 0 4px; font-size: clamp(20px, 2vw, 25px); line-height: 1.32; font-weight: 750; text-wrap: pretty; }
.la-dlg__circle { display: flex; flex-direction: column; gap: 16px; }
.la-dlg__circle[hidden] { display: none; }
.la-dlg__circle section { padding-top: 14px; border-top: 1px solid rgba(231, 227, 246, 0.2); }
.la-dlg__circle h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #CFC9E6; }
.la-dlg__circle h3 span { color: #F6F4EE; }
.la-dlg__circle ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.la-dlg__circle li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.55; color: #EDEAF7; text-wrap: pretty; }
.la-dlg__circle li::before { content: ""; position: absolute; left: 3px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: #CFC9E6; }
.la-dlg__circle li b { color: #F6F4EE; }
.la-ref { color: #F6F4EE; text-decoration: underline; text-decoration-color: rgba(246, 244, 238, 0.45); text-underline-offset: 3px; }
.la-ref:hover { text-decoration-color: #F6F4EE; }
.la-dlg__hint { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #B9B2D8; }
.la-dialog__links { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.la-dialog__links:empty { display: none; }
.la-dialog__links a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(231, 227, 246, 0.28); text-decoration: none; color: #F6F4EE; }
.la-dialog__links a:hover { border-color: #F6F4EE; }
.la-dialog__links b { font-size: 16px; }
.la-dialog__links span { font-size: 14px; line-height: 1.4; color: #CFC9E6; }
@media (max-width: 900px) {
  .la-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 14px; }
  .la-dlg__rail { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px 6px; gap: 6px 12px; }
  .la-dlg__ruler { grid-column: 1 / -1; grid-row: 2; height: 44px; }
  .la-dlg__main { grid-template-columns: minmax(0, 1fr); overflow: auto; overscroll-behavior: contain; }
  .la-dlg__pic { padding: 16px 16px 0; }
  .la-dlg__text { overflow: visible; padding: 18px 16px 28px; }
  .la-dlg__count { display: none; }
  .la-dlg__tick:nth-child(2), .la-dlg__tick:nth-child(3), .la-dlg__tick:nth-child(5) { display: none; }
}
@media (max-width: 420px) { .la-dlg__year b { font-size: 26px; } .la-dlg__ctrl { gap: 4px; } .la-dlg__step, .la-dialog__close { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .la-dlg__mark, .la-dlg__frame img { transition: none; } }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The rules and the credits */
.la-credits { columns: 3 280px; column-gap: 32px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.la-credits p { margin: 0 0 8px; break-inside: avoid; }
.la-credits b { color: var(--type); }

@media (prefers-reduced-motion: reduce) {
  .la-card, .v2-card, .v2-paper { transition: none; }
}
@media print {
  .v2-bar, .la-bar, .v2-foot { display: none; }
}
@media (max-width: 560px) {
  .la-switch .la-switch__wide { display: none; }
  .la-bar__in { flex-wrap: nowrap; overflow-x: auto; gap: 10px; min-height: 0; scrollbar-width: none; }
  .la-bar__in::-webkit-scrollbar { display: none; }
  .la-parts { flex-wrap: nowrap; }
  .la-switch, .la-parts a { flex: none; }
}
.la-card__link { color: inherit; text-decoration: none; }
.la-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.la-card__link:focus-visible { outline: none; }
.la-card:focus-within { outline: 3px solid var(--hl); outline-offset: 3px; }

/* tl;dr: the page opens on the short version, with three ways in */
.la-tldr { display: flex; flex-direction: column; gap: 18px; max-width: 980px; padding: clamp(22px, 3vw, 34px); border-radius: 16px; background: rgba(246, 244, 238, 0.06); border: 1px solid rgba(231, 227, 246, 0.24); }
.la-tldr__tag { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--feature-muted); }
.la-tldr__tag span { padding: 3px 9px; border-radius: 6px; border: 1.5px solid var(--feature-muted); color: var(--feature-type); font-size: 14px; letter-spacing: 0.02em; text-transform: none; }
.la-tldr .v2-h1 { margin: 0; }
.la-tldr__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 70ch; }
.la-tldr__list li { position: relative; padding-left: 26px; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.45; color: var(--feature-type); text-wrap: pretty; }
.la-tldr__list li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--feature-muted); }
.la-tldr__go { align-items: center; }
@media (max-width: 560px) { .la-tldr { padding: 18px; } .la-tldr .v2-h1 { font-size: clamp(38px, 12vw, 64px); } }

/* The dice, as on the live homepage's footer */
.la-dice { --c-ground: var(--feature); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; color: var(--feature-type); font: 800 15px/1 var(--f); cursor: pointer; }
.la-dice:hover { border-color: var(--feature-muted); }
.la-dice:focus-visible { outline: 2px solid var(--hl); outline-offset: 2px; }
.la-dice svg { width: 46px; height: auto; overflow: visible; }
.la-dice--compact { padding: 0 6px; }
.la-dice--compact svg { width: 38px; }
.la-bar .la-dice { --c-ground: var(--ground); color: var(--type); }
.la-bar .la-dice:hover { border-color: var(--line); }
.la-dialog .la-dice { --c-ground: #372F5C; color: #F6F4EE; }
.la-dialog .la-dice:hover { border-color: rgba(231, 227, 246, 0.55); }
.la-dice .p-die { transform-box: fill-box; transform-origin: center; }
.la-dice .p-die[data-face="1"] .p-pip:not([data-pip="3"]) { opacity: 0; }
.la-dice .p-die[data-face="2"] .p-pip:not([data-pip="0"],[data-pip="6"]) { opacity: 0; }
.la-dice .p-die[data-face="3"] .p-pip:not([data-pip="0"],[data-pip="3"],[data-pip="6"]) { opacity: 0; }
.la-dice .p-die[data-face="4"] .p-pip:not([data-pip="0"],[data-pip="1"],[data-pip="5"],[data-pip="6"]) { opacity: 0; }
.la-dice .p-die[data-face="5"] .p-pip:not([data-pip="0"],[data-pip="1"],[data-pip="3"],[data-pip="5"],[data-pip="6"]) { opacity: 0; }
.la-dice .p-die[data-face="6"] .p-pip:not([data-pip="0"],[data-pip="1"],[data-pip="2"],[data-pip="4"],[data-pip="5"],[data-pip="6"]) { opacity: 0; }
.la-dice[data-state~="rolling"] .p-die--0 { animation: la-tumble-a 1600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.la-dice[data-state~="rolling"] .p-die--1 { animation: la-tumble-b 1600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.la-dice[data-state~="rolling"] .p-dice__spark { animation: la-spark 1600ms cubic-bezier(0.2, 0.8, 0.2, 1); transform-box: fill-box; transform-origin: center; }
@keyframes la-tumble-a { 0% { transform: none } 18% { transform: translate(-3px, -14px) rotate(-120deg) } 38% { transform: translate(-1px, 0) rotate(-250deg) } 55% { transform: translate(2px, -7px) rotate(-320deg) } 72% { transform: translate(1px, 0) rotate(-350deg) } 86% { transform: translateY(-2px) rotate(-358deg) } 100% { transform: rotate(-360deg) } }
@keyframes la-tumble-b { 0% { transform: none } 14% { transform: translate(4px, -18px) rotate(140deg) } 34% { transform: translate(2px, 0) rotate(280deg) } 52% { transform: translate(-2px, -9px) rotate(330deg) } 70% { transform: translate(-1px, 0) rotate(352deg) } 84% { transform: translateY(-3px) rotate(358deg) } 100% { transform: rotate(360deg) } }
@keyframes la-spark { 0%, 60% { transform: scale(1) } 75% { transform: scale(1.6) rotate(45deg) } 100% { transform: scale(1) rotate(90deg) } }
@media (prefers-reduced-motion: reduce) { .la-dice[data-state~="rolling"] .p-die, .la-dice[data-state~="rolling"] .p-dice__spark { animation: none; } }

/* The wall's turn: upright, or on its side */
.la-turn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--type); font: 750 14.5px/1 var(--f); cursor: pointer; white-space: nowrap; }
.la-turn svg { width: 18px; height: 18px; transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.la-turn[aria-pressed="true"] svg { transform: rotate(90deg); }
.la-turn:hover { border-color: var(--thread); }
.la-turn:focus-visible { outline: 2px solid var(--thread); outline-offset: 2px; }
.la-turn[hidden] { display: none; }
.la-wall__axis { position: absolute; width: 2px; background: var(--type); }
.la-wall__tick--side { transform: translate(-100%, -50%); text-align: right; }

/* After seat 101: the apprentices and the Foundation, pictures to come */
.la-row__lede { margin: -6px 0 18px; max-width: 72ch; font-size: 16.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.la-card__pend--next { inset: 6%; border: 1.5px dashed rgba(207, 201, 230, 0.55); border-radius: 4px; }
.la-card__pend--next b { font-size: 16cqi; font-weight: 750; letter-spacing: -0.02em; }
.la-card--next .la-card__piece { -webkit-line-clamp: 4; }
.la-board.is-line .la-row--next .la-row__lede { white-space: normal; }
.la-board.is-wall .la-row--next { display: none; }

/* Photo tilt and light, from the live homepage (R-PHO-09) */
.v2-tilt { perspective: 1400px; }
.v2-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; border-radius: inherit; background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), #FFFFFF 0%, #FFFFFF 4.6%, transparent 44.6%); }
@media (hover: none) { .v2-sheen { mix-blend-mode: overlay; } }
@media (prefers-reduced-motion: reduce) { .v2-sheen { display: none; } }
.os-plate__img { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.os-teamstory__img { position: relative; display: block; width: 96px; height: 96px; border-radius: 12px; }
.os-teamstory__img .v2-sheen { border-radius: 12px; }
@media (max-width: 600px) { .os-teamstory__img { width: 64px; height: 64px; } }
