/* ============================================================
HAYWORTH ATHLETIC · the document
Type system, tokens, rules, and texture ported from the
Hayworth Letter compositor (letters/libertad-1938.html).
Extensions beyond the compositor are marked EXT.
============================================================ */
:root {
--paper: #F4ECD8;
--paper-deep: #E8DFC6;
--paper-edge: #D9CBA4;
--ink: #062034;
--ink-soft: rgba(6, 32, 52, 0.80);
--ink-mute: rgba(6, 32, 52, 0.55);
--rule: rgba(6, 32, 52, 0.55);
--rule-soft: rgba(6, 32, 52, 0.20);
--gold: #9E8059;
--gold-soft: rgba(158, 128, 89, 0.85);
--serif: 'Fraunces', 'Caslon', Georgia, 'Times New Roman', serif;
--mono: 'JetBrains Mono', 'IBM Plex Mono', Menlo, Monaco, monospace;
--bar-h: 46px;
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: auto; }
body {
margin: 0; padding: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--serif);
font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 0;
font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img { display: block; border: 0; max-width: 100%; height: auto; }
a { color: inherit; }
/* ============================================================
EXT · RUNNING HEAD + PROGRESS HAIRLINE
The compositor's runhead, promoted to a fixed apparatus bar.
============================================================ */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 40;
height: var(--bar-h);
background: var(--paper);
display: flex; align-items: center; justify-content: center;
border-bottom: 0.5px solid var(--rule-soft);
}
.topbar .title-line {
font-family: var(--serif);
font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0;
font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 12px; color: var(--ink);
}
.progress {
position: fixed; top: var(--bar-h); left: 0; z-index: 41;
width: 100%; height: 1px; background: var(--gold);
transform-origin: 0 50%; transform: scaleX(0);
}
main { padding-top: var(--bar-h); }
/* ============================================================
PAGE · shared spread machinery (compositor)
============================================================ */
.spread {
position: relative;
width: 100%;
overflow: visible;
isolation: isolate;
background:
radial-gradient(ellipse 96% 80% at 50% 42%, #F7EFDC 0%, #F1E7CC 55%, #E6D8B4 92%, #D6C394 100%);
}
.spread::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size: 480px 480px, 900px 900px; opacity: 0.46; mix-blend-mode: multiply;
}
.spread::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background:
radial-gradient(ellipse 160% 130% at 50% 50%, transparent 50%, rgba(90, 70, 40, 0.06) 80%, rgba(70, 50, 26, 0.18) 100%),
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat, repeat;
background-size: auto, 600px 600px; opacity: 0.70; mix-blend-mode: multiply;
}
.spread > * { position: relative; z-index: 4; }
@media (prefers-reduced-motion: no-preference) {
.fade { opacity: 0; transform: translateY(10px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.fade.in-view { opacity: 1; transform: translateY(0); }
}
/* ============================================================
REGISTER 1 · TEXT PAGES (dense reference register)
Single column at reading measure. EXT of the compositor's
mobile single-column binding, generalized as the document's
one text register. The multicol machinery is retained in
spirit via data-register hooks for a future record/plan
split; not built in this draft.
============================================================ */
.page-text { padding: 46px 24px 54px; }
.page-text .measure { max-width: 37em; margin: 0 auto; }
.body {
font-family: var(--serif);
font-variation-settings: "opsz" 12, "wght" 400, "SOFT" 0;
font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
font-size: 16.5px; line-height: 1.48; color: var(--ink);
text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.body { hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
.nhy, .nhy * { hyphens: none !important; -webkit-hyphens: none !important; }
.statrows .row { hyphens: none; -webkit-hyphens: none; }
.body p { margin: 0; text-indent: 1.2em; }
.body p.lead { text-indent: 0; }
.body p + .stand, .stand + p { margin-top: 14px; }
.stand { text-indent: 0 !important; margin-top: 14px !important; }
.body em { font-style: italic; }
.sc { font-variant: small-caps; font-feature-settings: "kern" 1; letter-spacing: 0.04em; }
/* Act-head (compositor), with EXT: .major carries a double rule */
.act-head {
text-align: center; margin: 8px auto 26px; max-width: 640px;
}
.act-head .numeral {
display: block; font-family: var(--serif); font-style: italic;
font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 0;
font-feature-settings: "lnum" 1, "kern" 1;
font-size: 15px; color: var(--gold); letter-spacing: 0.06em; margin-bottom: 7px;
}
.act-head .name {
font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.18em;
font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0;
font-size: 16px; color: var(--ink);
}
.act-head .hr {
width: 54px; height: 0.5px; background: var(--gold); opacity: 0.85;
margin: 14px auto 0;
}
.act-head.major .hr {
width: 120px; height: 4px; background: transparent;
border-top: 1px solid var(--ink); border-bottom: 0.5px solid var(--ink);
opacity: 0.8;
}
.act-head.inner { margin-top: 40px; }
/* Figures (compositor figure block + fig, class renamed from the compositor original) */
.engr { position: relative; z-index: 5; text-align: center; break-inside: avoid; }
.engr img { width: 100%; height: auto; margin: 0 auto; display: block;
mix-blend-mode: multiply; filter: sepia(0.10) saturate(0.85) contrast(1.10) brightness(0.99); }
.engr .fig {
margin-top: 9px; font-family: var(--serif); font-style: italic;
font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 0;
font-feature-settings: "kern" 1, "lnum" 1;
font-size: 11px; line-height: 1.35; color: var(--ink); max-width: 40ch;
margin-left: auto; margin-right: auto;
}
.engr .fig .fig-label {
font-style: normal; font-variation-settings: "opsz" 14, "wght" 700, "SOFT" 0;
font-feature-settings: "lnum" 1, "kern" 1; font-weight: 700; letter-spacing: 0.005em;
}
.figure-block { width: min(248px, 70%); margin: 30px auto 26px; }
.figure-reserved {
width: min(248px, 70%); aspect-ratio: 1 / 1; margin: 0 auto;
border: 0.5px solid var(--rule-soft);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--ink-mute);
}
/* EXT · Exhibits: photographic evidence inside text pages */
.exhibit { margin: 34px auto 26px; max-width: 30em; text-align: center; }
.exhibit .frame { border: 0.5px solid var(--rule-soft); padding: 6px; background: rgba(255,255,255,0.25); }
.exhibit img { width: 100%; height: auto; display: block;
filter: sepia(0.06) saturate(0.9) contrast(1.04); }
.exhibit .source {
margin-top: 9px; font-family: var(--serif); font-style: italic;
font-size: 11px; line-height: 1.35; color: var(--ink-soft);
}
.exhibit .source a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
.exhibit .source a:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* EXT · Statistical register: ruled rows and tables, serif lining numerals */
.statrows { margin: 18px 0; border-top: 1px solid var(--rule); border-bottom: 0.5px solid var(--rule); }
.statrows .row {
padding: 9px 2px; border-bottom: 0.5px solid var(--rule-soft);
font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
font-size: 15px; line-height: 1.45; text-align: left; text-indent: 0;
}
.statrows .row:last-child { border-bottom: 0; }
.statrows .row .head { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
.body p .head { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
table.ruled {
width: 100%; border-collapse: collapse; margin: 18px 0;
font-feature-settings: "lnum" 1, "kern" 1;
font-size: 14.5px;
}
table.ruled caption {
caption-side: top; text-align: center; padding-bottom: 10px;
font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.16em;
font-size: 12px; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0;
}
table.ruled th, table.ruled td { padding: 7px 8px; text-align: left; vertical-align: top; }
table.ruled thead th {
border-top: 1px solid var(--ink); border-bottom: 0.5px solid var(--ink);
font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0;
text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px;
}
table.ruled tbody td { border-bottom: 0.5px solid var(--rule-soft); }
table.ruled tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
table.ruled td.num, table.ruled th.num { text-align: right; font-feature-settings: "lnum" 1, "tnum" 1; }
/* EXT · logo band: official marks, single navy, on the paper */
.logoband {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 26px 38px; margin: 36px auto 6px; padding: 24px 8px;
border-top: 1px solid var(--rule); border-bottom: 0.5px solid var(--rule);
}
.logoband img { width: auto; opacity: 0.92; }
table.ruled .deriv {
display: block; font-size: 10.5px; color: var(--ink-mute);
font-feature-settings: 'lnum' 1, 'tnum' 1; letter-spacing: 0.02em; margin-bottom: 1px;
}
/* EXT · FIRST PRODUCT spread: photo left, ledger right */
.measure.wide { max-width: 62em; }
.productspread {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 44px; align-items: center; margin-top: 6px;
}
.productspread .specimen-hero { margin: 0; max-width: none; }
@media (max-width: 820px) {
.productspread { grid-template-columns: 1fr; gap: 26px; }
.productspread .specimen-hero { max-width: 30em; margin: 0 auto; }
}
/* EXT · THE TEST: scenario ledger. The first row spans its four data cells,
so the empty state reads as one statement, not four blanks. */
table.ruled td.span4 { text-align: right; font-style: italic; color: var(--ink-soft); }
@media (min-width: 821px) { table.scen td:first-child { white-space: nowrap; } }
/* Five columns will not fit a phone at reading size. Tighten the scenario
ledger there rather than let the page scroll sideways. */
@media (max-width: 480px) {
table.scen { font-size: 11.5px; table-layout: fixed; width: 100%; }
table.scen th, table.scen td { padding: 6px 3px; }
table.scen thead th { font-size: 9px; letter-spacing: 0.04em; }
table.scen td.span4 { font-size: 11px; }
}
table.ruled .kicker-line { text-align: center; }
/* EXT · FIG 4: the open seat. An empty frame in the ledger, ruled dashed
so the vacancy is visibly unlike the three occupied cells. */
table.seats td.open {
border: 0.8px dashed var(--rule); text-align: center;
font-style: italic; color: var(--ink-soft);
}
table.seats td .co { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
table.seats td .gloss { display: block; font-style: italic; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
table.seats th.sport, table.seats td.sport {
font-feature-settings: 'smcp' 1, 'c2sc' 1, 'kern' 1;
text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; white-space: nowrap;
}
/* EXT · COST INTERACTIVE: two sliders driving a live ledger.
Compositor register: hairline track, navy thumb, serif numerals. */
.costui { margin: 6px auto 0; max-width: 30em; }
.costui .knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin-bottom: 26px; }
.costui .knob label {
display: block; font-family: var(--serif);
font-feature-settings: 'smcp' 1, 'c2sc' 1, 'kern' 1;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; color: var(--ink);
}
.costui .knob .val {
font-family: var(--serif); font-feature-settings: 'lnum' 1, 'tnum' 1;
font-size: 17px; color: var(--ink); margin-top: 2px; display: block;
}
.costui input[type=range] {
-webkit-appearance: none; appearance: none; width: 100%; margin-top: 10px;
background: transparent; cursor: pointer;
}
.costui input[type=range]::-webkit-slider-runnable-track {
height: 1px; background: var(--rule); border: 0;
}
.costui input[type=range]::-moz-range-track { height: 1px; background: var(--rule); border: 0; }
.costui input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%;
background: var(--ink); border: 0; margin-top: -6px;
}
.costui input[type=range]::-moz-range-thumb {
width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: 0;
}
.costui input[type=range]:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.costui .knobnote {
font-family: var(--serif); font-style: italic; font-size: 12px;
color: var(--ink-mute); text-align: center; margin-bottom: 22px;
}
.costui table.ruled { margin-top: 0; }
.costui .pesonote {
font-family: var(--serif); font-size: 12.5px; color: var(--ink-mute);
font-feature-settings: 'lnum' 1; font-style: italic; margin-left: 6px;
}
@media (max-width: 480px) {
.costui .knobs { grid-template-columns: 1fr; gap: 16px; }
}
/* EXT · SPECIMEN: evidence-class product photograph */
.specimen-hero { margin: 6px auto 26px; max-width: 30em; }
.specimen-hero img { width: 100%; height: auto; display: block;
border: 0.5px solid var(--rule-soft); filter: sepia(0.06) saturate(0.9) contrast(1.04); }
/* EXT · PLATES: third image class (evidence / figures / plates).
Engraving-language product plates; labeled, unlike silent image pages;
numbered separately from figures, which remain exactly three. */
.platerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 34px auto 0; }
.platerow .plateitem { text-align: center; }
.platerow .plateitem img { width: 100%; max-width: 130px; height: auto; margin: 0 auto; display: block; }
.platerow .platelabel {
margin-top: 8px; font-family: var(--serif);
font-feature-settings: 'smcp' 1, 'c2sc' 1, 'lnum' 1, 'kern' 1;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 9.5px; color: var(--ink);
line-height: 1.6;
}
.platerow .platelabel .muted { color: var(--ink-mute); }
@media (max-width: 480px) {
.platerow { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}
/* EXT · DRAFTING TABLE: horizontal sift rail. CSS-only base (overflow-x
scroll-snap); JS adds desktop edge arrows + keyboard. Never traps
vertical scroll: only overscroll-behavior-x is contained. */
.rail-wrap { position: relative; margin: 26px auto 0; }
.rail {
display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; padding: 4px 2px 14px;
scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent;
}
.rail .card {
flex: 0 0 auto; width: 200px; scroll-snap-align: center; text-align: center;
border: 0.5px solid var(--rule-soft); padding: 16px 12px 14px;
background: rgba(255,255,255,0.22); list-style: none;
}
.rail .card .art { height: 180px; display: flex; align-items: center; justify-content: center; }
.rail .card .art img { max-width: 100%; max-height: 180px; width: auto; height: auto; }
.rail .card .clabel {
margin-top: 12px; font-family: var(--serif);
font-feature-settings: 'smcp' 1, 'c2sc' 1, 'kern' 1;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--ink);
}
.rail .card .cprice {
margin-top: 3px; font-family: var(--serif); font-feature-settings: 'lnum' 1;
font-size: 13px; color: var(--ink-soft);
}
.rail .card .cvar {
margin-top: 2px; font-family: var(--serif); font-style: italic;
font-size: 10.5px; color: var(--ink-mute);
}
.rail .card .ctag {
margin-top: 5px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--gold);
}
.rail-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
width: 34px; height: 34px; border-radius: 50%;
border: 0.5px solid var(--rule); background: var(--paper); color: var(--ink);
font-family: var(--serif); font-size: 16px; line-height: 1; cursor: pointer;
display: none; align-items: center; justify-content: center;
}
.rail-arrow.prev { left: -14px; }
.rail-arrow.next { right: -14px; }
@media (min-width: 821px) { .js .rail-arrow { display: flex; } }
/* Dinkus (compositor) */
.dinkus {
text-align: center; margin: 26px auto;
font-family: var(--serif);
font-variation-settings: "opsz" 18, "wght" 500, "SOFT" 0;
font-size: 14px; line-height: 1; letter-spacing: 0.6em; color: var(--gold);
opacity: 0.9;
}
/* Pull-quote register for the voices (compositor inline-pullquote) */
.voice { margin: 34px auto 0; max-width: 30em; text-align: center; }
.voice blockquote {
margin: 0; font-family: var(--serif); font-style: italic;
font-variation-settings: "opsz" 40, "wght" 450, "SOFT" 0;
font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
font-size: 19px; line-height: 1.5; color: var(--ink); text-indent: 0;
}
.voice .attr {
margin-top: 14px; font-family: var(--mono);
letter-spacing: 0.08em; font-size: 11px; color: var(--ink-soft);
}
.voice-rule { width: 110px; height: 1px; background: var(--gold); opacity: 0.85; margin: 34px auto 0; }
.coda {
text-align: center; margin: 34px auto 0; max-width: 600px;
font-family: var(--serif); font-style: italic;
font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 0;
font-size: 19px; line-height: 1.5; color: var(--ink);
}
.coda .rule { width: 64px; height: 0.5px; background: var(--gold); opacity: 0.85; margin: 0 auto 20px; }
.coda p { margin: 0; text-indent: 0; }
/* Dictionary entry (Section 19) */
.headword {
font-family: var(--serif); text-indent: 0;
font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1;
font-variation-settings: "opsz" 24, "wght" 650, "SOFT" 0;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 21px;
}
.headword .pos { font-feature-settings: "kern" 1; font-style: italic; text-transform: none; letter-spacing: 0.01em;
font-variation-settings: "opsz" 18, "wght" 400, "SOFT" 0; font-size: 17px; }
.entry-cut { float: right; width: min(150px, 34%); margin: 4px 0 12px 18px; }
.entry-cut img { mix-blend-mode: multiply; filter: sepia(0.10) saturate(0.85) contrast(1.10) brightness(0.99); }
/* Team (Section 29): stacked lines, no dashes */
.team { margin: 10px 0 0; }
.team .member { padding: 14px 0; border-bottom: 0.5px solid var(--rule-soft); text-align: center; }
.team .member:last-child { border-bottom: 0; }
.team .name {
font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0;
font-size: 17px; letter-spacing: 0.02em;
}
.team .role {
margin-top: 2px; font-style: italic; font-size: 13.5px; color: var(--ink-soft);
}
.team .credits {
margin-top: 3px; font-size: 12px; color: var(--ink-mute); line-height: 1.5;
}
/* ============================================================
REGISTER 2 · IMAGE PAGES (full-bleed photograph, bare sentence)
EXT: the compositor has no full-bleed register; built here in
its logic: the photograph is the page, the sentence is set in
the page's own serif, cream on the photograph, no caption apparatus.
============================================================ */
.page-image {
position: relative; min-height: 100svh;
display: flex; align-items: flex-end; justify-content: center;
overflow: hidden; isolation: isolate;
background: var(--ink);
}
.page-image .bleed {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 1;
filter: sepia(0.12) saturate(0.82) contrast(1.05);
}
.page-image .scrim {
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(to top, rgba(6,32,52,0.62) 0%, rgba(6,32,52,0.18) 34%, rgba(6,32,52,0.05) 55%, rgba(6,32,52,0.12) 100%);
}
.page-image .line {
position: relative; z-index: 3;
padding: 0 24px 13svh; max-width: 36em; text-align: center;
}
.page-image .line p {
margin: 0; font-family: var(--serif);
font-variation-settings: "opsz" 40, "wght" 420, "SOFT" 0;
font-feature-settings: "kern" 1, "liga" 1;
font-size: clamp(21px, 3vw, 30px); line-height: 1.42; color: var(--paper);
text-shadow: 0 0 2px rgba(6,32,52,0.45), 0 1px 18px rgba(6,32,52,0.65);
}
.page-image .line p + p { margin-top: 0.7em; }
.page-image .line.backed {
background: radial-gradient(ellipse 68% 66% at 50% 50%, rgba(6,32,52,0.60) 0%, rgba(6,32,52,0.44) 42%, rgba(6,32,52,0.18) 64%, rgba(6,32,52,0) 82%);
padding: 52px 64px 48px; margin-bottom: 6svh;
}
.page-image .line em { font-style: italic; }
.page-image .line .small { font-size: clamp(15px, 1.8vw, 18px); color: rgba(244,236,216,0.92); }
.page-image .imgsource {
position: absolute; z-index: 3; bottom: 12px; right: 16px;
font-family: var(--serif); font-style: italic; font-size: 10.5px;
color: rgba(244,236,216,0.75);
}
.page-image.centered { align-items: center; }
.page-image.centered .line { padding-bottom: 0; }
/* Heritage table on the image register (Section 16) */
.page-image .line table.heritage {
width: 100%; border-collapse: collapse; margin: 26px auto 0;
font-family: var(--serif); color: var(--paper);
font-feature-settings: "lnum" 1, "kern" 1; font-size: clamp(13px, 1.7vw, 16px);
text-shadow: 0 1px 10px rgba(6,32,52,0.6);
}
.page-image .line table.heritage caption {
caption-side: top; padding-bottom: 12px;
text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px;
color: rgba(244,236,216,0.85);
}
.page-image .line table.heritage td {
padding: 6px 10px; border-bottom: 0.5px solid rgba(244,236,216,0.28);
text-align: left;
}
.page-image .line table.heritage td:last-child { text-align: right; font-style: italic; }
.page-image .line table.heritage tr:last-child td { border-bottom: 0; color: #fff0; color: var(--paper); }
/* Type-only full pages (cover, confession) */
.page-type {
min-height: calc(100svh - var(--bar-h));
display: flex; align-items: center; justify-content: center; text-align: center;
padding: 64px 24px;
}
.cover .tp-masthead {
font-family: var(--serif); font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 0;
font-feature-settings: "kern" 1, "lnum" 1;
text-transform: uppercase; letter-spacing: 0.06em;
font-size: clamp(44px, 7vw, 84px); line-height: 1.02; color: var(--ink);
}
.cover .tp-rule { width: 78px; height: 1px; background: var(--ink); margin: 36px auto 0; opacity: 0.7; }
.cover .tp-subject {
font-family: var(--serif);
font-variation-settings: "opsz" 36, "wght" 420, "SOFT" 0;
font-size: clamp(19px, 2.6vw, 24px); line-height: 1.5; letter-spacing: 0.03em;
color: var(--ink); margin-top: 28px;
}
.cover .tp-the {
font-family: var(--serif); font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0;
text-transform: uppercase; letter-spacing: 0.32em; font-size: 13px; color: var(--ink); margin-bottom: 18px;
}
.cover .tp-colophon { margin-top: 64px; }
.cover .tp-colophon img { width: 128px; height: auto; margin: 0 auto; display: block; }
.cover .tp-imprint {
font-family: var(--serif); font-variation-settings: "opsz" 14, "wght" 500, "SOFT" 0;
font-feature-settings: "kern" 1, "lnum" 1;
text-transform: uppercase; letter-spacing: 0.20em; font-size: 11px; color: var(--ink); margin-top: 12px;
}
.confession p {
margin: 0; font-family: var(--serif);
font-variation-settings: "opsz" 60, "wght" 450, "SOFT" 0;
font-size: clamp(24px, 3.6vw, 36px); line-height: 1.4; color: var(--ink);
}
/* The close */
.page-image .line .close-mast {
font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 0;
text-transform: uppercase; letter-spacing: 0.06em;
font-size: clamp(30px, 5vw, 56px); line-height: 1.05;
}
.page-image .line .close-sub {
margin-top: 14px; font-style: italic;
font-size: clamp(17px, 2.2vw, 22px);
}
.page-image .line .close-contact {
margin-top: 40px; font-family: var(--mono); font-style: normal;
font-size: 12px; letter-spacing: 0.1em; color: rgba(244,236,216,0.92);
}
.page-image .line .close-contact a { text-decoration: none; border-bottom: 1px solid rgba(158,128,89,0.8); }
/* ============================================================
EXT · LETTERPRESS INK (letterpress-ink skill)
Ink wear: paper-grain alpha masks on type only. Strong tier
for display sizes, subtle tier for reading sizes. Photos,
engravings, figures, and text-over-photo pages are excluded.
============================================================ */
.tp-masthead {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 520px 520px; mask-size: 520px 520px;
}
.act-head .name, .headword, .page-type p, table.ruled caption {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 240px 240px; mask-size: 240px 240px;
}
.body p, .statrows .row, table.ruled th, table.ruled td,
.team .name, .team .role, .team .credits,
.voice blockquote, .voice .attr,
.topbar .title-line, .tp-the, .tp-subject, .tp-imprint,
.slide .statement p, .body summary, .body details .fold p, .field, .growth .case p, .growth .case .h, .cases button, .note, .g {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 200px 200px; mask-size: 200px 200px;
}
.body, .runhead, h1 { text-shadow: 0 0 0.45px rgba(6, 32, 52, 0.40), 0.25px 0 0.6px rgba(6, 24, 40, 0.14); }
.cover .tp-masthead { filter: url(#ink-bleed); }
/* MOBILE */
@media (max-width: 480px) {
.page-text { padding: 36px 18px 44px; }
.body { text-align: left; hyphens: none; -webkit-hyphens: none; font-size: 16px; line-height: 1.55; }
.topbar .title-line { font-size: 11px; letter-spacing: 0.18em; }
.entry-cut { float: none; width: 60%; margin: 12px auto 16px; }
table.ruled { font-size: 13px; }
table.ruled th, table.ruled td { padding: 6px 5px; }
.page-image .line { padding-bottom: 15svh; }
}
/* ============================================================
THE PLAN · extensions of the pitch compositor for this page.
Everything above is the pitch deck's own stylesheet, verbatim.
============================================================ */
.num, .val, td.num, th.num { font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1; }
/* topbar: the deck's running head plus three quiet links */
.topbar { justify-content: space-between; padding: 0 22px; }
.topbar .title-line { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.topbar nav { display: flex; gap: 18px; margin-left: auto; }
.topbar nav a {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-soft); text-decoration: none; padding: 8px 0; min-height: 24px; display: inline-block;
}
.topbar nav a:hover { color: var(--gold); }
.topbar .mark img { height: 15px; width: auto; }
@media (max-width: 560px) { .topbar .title-line { display: none; } }
/* the twelve slides: the deck's type-only register, one idea each */
.slide {
min-height: 58svh;
display: flex; align-items: center; justify-content: center; text-align: center;
padding: 96px 24px 104px;
}
.slide .inner { width: 100%; max-width: 34em; margin: 0 auto; }
.slide .statement { max-width: 30em; margin-left: auto; margin-right: auto; }
.slide .inner.wide { max-width: 44em; }
.slide .act-head { margin-bottom: 30px; }
.slide .statement p {
margin: 0; font-family: var(--serif);
font-variation-settings: "opsz" 24, "wght" 430, "SOFT" 0;
font-feature-settings: "kern" 1, "liga" 1, "lnum" 1;
font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--ink);
}
.slide .statement p + p { margin-top: 0.8em; }
.slide .statement + .body, .slide .statement + .team { margin-top: 30px; }
.slide .team + .terms { margin-top: 26px; }
.slide .statement .num { font-variation-settings: "opsz" 60, "wght" 550, "SOFT" 0; }
.slide .statement.small p { font-size: clamp(16px, 1.4vw, 18.5px); }
.slide .terms {
margin-top: 26px; font-family: var(--serif); font-style: italic;
font-size: 15px; color: var(--ink-soft);
}
.slide .more { margin-top: 34px; font-family: var(--serif); font-style: italic; font-size: 14.5px; }
.slide .more a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-soft); padding-bottom: 1px; }
.slide .more a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.slide .more a + a { margin-left: 22px; }
/* ruled rows with a value at the right (buyers, buckets, goals) */
.slide .statrows { text-align: left; }
.statrows .row.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.statrows .row.kv .val { white-space: nowrap; font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1; }
.statrows .row.kv.sum { border-top: 1px solid var(--rule); }
.statrows .row .sub { display: block; font-style: italic; color: var(--ink-soft); font-size: 13.5px; margin-top: 1px; }
/* the cover photograph */
.page-image .line .close-mast { font-size: clamp(30px, 5vw, 60px); }
.page-image .line .close-sub { font-size: clamp(17px, 2.2vw, 24px); }
.page-image .line .close-kicker {
margin-top: 26px; font-family: var(--serif); font-style: italic; font-size: 13px;
color: rgba(244,236,216,0.85);
}
.page-image .line .close-kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(158,128,89,0.8); }
/* the plan: text register with its own extensions */
.part-head { padding: 96px 24px 24px; }
.body p.noindent { text-indent: 0; }
.body p + p.noindent { margin-top: 14px; }
.body h4 {
margin: 26px 0 8px; font-family: var(--serif); text-indent: 0; text-align: left;
font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1;
font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: var(--ink);
}
.fn { font-style: italic; font-size: 13px; color: var(--ink-soft); text-indent: 0 !important; text-align: left; }
/* click-to-explain terms */
.t {
font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
border-bottom: 1px dotted var(--gold); line-height: inherit;
}
.t[aria-expanded="true"] { border-bottom: 1px solid var(--gold); }
.g {
display: block; margin: 8px 0 12px; padding-left: 14px; border-left: 0.5px solid var(--gold);
font-style: italic; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); text-indent: 0; text-align: left;
}
/* expandables */
.body details { border-bottom: 0.5px solid var(--rule-soft); text-indent: 0; text-align: left; }
.body details:first-of-type { border-top: 1px solid var(--rule); }
.body summary {
cursor: pointer; list-style: none; padding: 9px 2px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
font-feature-settings: "lnum" 1, "kern" 1; font-size: 15px; line-height: 1.45; min-height: 24px;
}
.body summary::-webkit-details-marker { display: none; }
.body summary .head { flex: 1; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
.body summary .val { white-space: nowrap; font-feature-settings: "lnum" 1, "tnum" 1; }
.body summary::after { content: '+'; color: var(--gold); flex: none; font-variation-settings: "opsz" 14, "wght" 500, "SOFT" 0; }
.body details[open] summary::after { content: '\2212'; }
.body details .fold { padding: 2px 2px 12px; }
.body details .fold p { text-indent: 0; margin: 0 0 8px; font-size: 15px; }
.body details .fold p:last-child { margin-bottom: 0; }
/* tables: the deck's ruled register with a scroll wrapper for phones */
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
table.ruled td.num, table.ruled th.num { white-space: nowrap; }
table.ruled tr.sum td { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; border-top: 0.5px solid var(--ink); }
table.ruled tr.sub td:first-child { padding-left: 18px; color: var(--ink-soft); }
table.ruled tr.hd td { font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; padding-top: 14px; }
table.ruled td.month { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; }
table.ruled td:first-child { min-width: 9em; }
/* the case selector: small capitals, a gold rule under the chosen case */
.cases { display: flex; justify-content: center; gap: 28px; margin: 6px 0 22px; text-indent: 0; }
.cases button {
font-family: var(--serif); background: none; border: 0; padding: 6px 0; cursor: pointer; min-height: 24px;
font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.16em;
font-size: 12.5px; color: var(--ink-mute); border-bottom: 1px solid transparent;
}
.cases button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.cases button:hover { color: var(--ink); }
/* buttons: the gate page's register */
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 22px 0 6px; text-indent: 0; }
.btn {
font-family: var(--serif); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; cursor: pointer; min-height: 32px;
color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 11px 16px;
}
.btn:hover { background: #0a2c47; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: rgba(6,32,52,0.05); }
/* inputs: hairline underline, serif lining numerals */
.field { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 7px 2px; border-bottom: 0.5px solid var(--rule-soft); text-indent: 0; text-align: left; font-size: 14.5px; line-height: 1.45; }
.field:first-child { border-top: 1px solid var(--rule); }
.field .unit { font-style: italic; color: var(--ink-mute); font-size: 12px; margin-left: 6px; }
.field .val { font-feature-settings: "lnum" 1, "tnum" 1; }
input.n {
font-family: var(--serif); font-feature-settings: "lnum" 1, "tnum" 1; font-size: 16px; color: var(--ink);
width: 6.5em; text-align: right; background: transparent; border: 0; border-bottom: 0.5px solid var(--rule);
border-radius: 0; padding: 4px 2px; min-height: 28px;
}
input.n:focus { outline: none; border-bottom: 1px solid var(--gold); }
input.n::-webkit-outer-spin-button, input.n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.n { -moz-appearance: textfield; appearance: textfield; }
.panel { display: none; }
.panel.open { display: block; }
.note { font-style: italic; font-size: 13px; color: var(--ink-soft); text-indent: 0; text-align: left; margin: 12px 0 0; padding-left: 14px; border-left: 0.5px solid var(--gold); }
.note:empty { display: none; }
/* growth: three ruled boxes */
.growth .case { padding: 16px 0 18px; border-bottom: 0.5px solid var(--rule-soft); text-indent: 0; text-align: left; }
.growth .case:first-child { border-top: 1px solid var(--rule); }
.growth .case .h { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; font-size: 15px; }
.growth .case .figs { font-feature-settings: "lnum" 1, "tnum" 1; font-style: italic; color: var(--ink-soft); font-size: 14px; margin: 2px 0 8px; }
.growth .case p { text-indent: 0; font-size: 15px; }
.colophon { text-align: center; padding: 64px 24px 72px; }
.colophon img { width: 128px; height: auto; margin: 0 auto; display: block; }
.colophon .tp-imprint { margin-top: 12px; }
.colophon .contact { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.colophon .contact a { text-decoration: none; border-bottom: 1px solid rgba(158,128,89,0.8); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
@media (max-width: 480px) {
.slide { padding: 72px 18px 80px; min-height: 0; }
.slide .statement p { font-size: 17px; line-height: 1.55; }
.slide .more a + a { margin-left: 16px; }
.field { grid-template-columns: 1fr; gap: 4px; }
.field .val, .field input.n { justify-self: end; }
.cases { gap: 18px; }
}
/* ============================================================
THE PITCH, SECOND PASS · exhibits and voices on type slides,
the horizons scale, the hinge line.
============================================================ */
.slide .exhibit { margin: 30px auto 0; }
.slide .exhibit.tall { max-width: 20em; }
.slide .voice { margin-top: 30px; }
.slide .voice + .voice { margin-top: 22px; }
.slide .voice blockquote { font-size: 17.5px; }
.hinge {
margin: 40px 0 0; font-family: var(--serif); font-style: italic;
font-variation-settings: "opsz" 24, "wght" 450, "SOFT" 0;
font-size: 17px; color: var(--gold);
}
.horizons { margin: 26px auto 0; max-width: 40em; text-align: left; }
.horizons svg { width: 100%; height: auto; display: block; overflow: visible; }
.horizons table.ruled { margin-top: 0; table-layout: fixed; }
.horizons table.ruled th, .horizons table.ruled td { text-align: left; vertical-align: top; padding: 9px 10px 11px 0; }
.horizons table.ruled thead th {
font-feature-settings: "smcp" 1, "c2sc" 1, "lnum" 1, "kern" 1;
text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px;
}
.horizons table.ruled thead th.first, .horizons table.ruled td.first { color: var(--gold); }
.horizons table.ruled td { font-size: 14px; line-height: 1.45; }
.horizons table.ruled td .l { display: inline; }
.horizons table.ruled td .l + .l::before { content: ' '; }
.horizons table.ruled td.first .l:first-child { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
.horizons .fig { text-align: center; margin-top: 12px; }
.horizons .fig .fig-label { display: none; }
.slide .exemplars { margin: 26px auto 0; max-width: 34em; }
.slide .exemplars .row { text-align: center; }
.slide .body.reading p, .slide .body .reading p { text-indent: 0; text-align: left; hyphens: none; -webkit-hyphens: none; }
.slide .body.reading p + p, .slide .body .reading p + p { margin-top: 12px; }
.slide .seats { margin-top: 26px; }
.slide .seats .fig { margin-top: 12px; }
@media (max-width: 480px) {
.horizons table.ruled td { font-size: 12.5px; }
.horizons table.ruled th, .horizons table.ruled td { padding: 7px 6px 9px 0; }
}
/* ============================================================
COVER · the site's hero lockup, set in ink on the paper.
Ruston Basic and the SAA stand-in are the site's own files.
============================================================ */
@font-face { font-family: "Ruston Basic"; src: url("assets/fonts/RustonBasic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "SAA stand-in"; src: url("assets/fonts/Overpass-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SAA stand-in"; src: url("assets/fonts/Overpass-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
.cover-lockup {
min-height: calc(100svh - var(--bar-h)); display: flex; align-items: center; justify-content: center;
padding: 64px 24px; --lock-ink: #111111;
}
.lockup { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--lock-ink); }
.lockup .lock-logo { display: block; width: clamp(200px, 26vw, 360px); height: auto; }
.lockup .lock-band { display: flex; align-items: center; gap: 16px; width: clamp(340px, 46vw, 640px); max-width: 92vw; margin: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.2rem, 2.4vw, 2rem); }
.lockup .lock-band::before, .lockup .lock-band::after { content: ""; flex: 1; border-top: 1px solid var(--lock-ink); }
.lockup .lock-bee { display: block; width: 46px; height: auto; }
.lockup .lock-name {
margin: 0; font-family: "Ruston Basic", "Fraunces", Georgia, serif; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.16em; margin-right: -0.16em; font-size: clamp(2rem, 5vw, 4rem); line-height: 1;
}
.lockup .lock-sub {
margin: 0.9rem 0 0; font-family: "SAA stand-in", "DM Sans", -apple-system, sans-serif; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(0.62rem, 1.1vw, 0.82rem); line-height: 1.6;
}
.lockup .lock-name + .lock-sub { margin-top: clamp(0.9rem, 1.6vw, 1.3rem); }
.lockup .lock-sub.places { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: inline-flex; align-items: center; gap: 0.9em; }
.lockup .lock-sub.places .bar { display: inline-block; width: 1px; height: 1.6em; background: var(--lock-ink); }
@media (max-width: 480px) {
.lockup .lock-band { width: 86vw; }
.lockup .lock-name { letter-spacing: 0.1em; margin-right: -0.1em; }
.lockup .lock-sub.places { flex-direction: column; gap: 0.4em; }
.lockup .lock-sub.places .bar { display: none; }
}
/* the marketing lanes table */
.slide table.lanes { margin-top: 26px; }
.slide table.lanes td.lane { white-space: nowrap; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
.slide table.lanes td.move { font-size: 13px; line-height: 1.45; color: var(--ink-soft); max-width: 26em; }
@media (max-width: 600px) { .slide table.lanes td.move { display: none; } .slide table.lanes th:nth-child(2) { display: none; } }
/* the growth table: figures take only the room they need; the why column gets the rest */
#slide-cases th.num, #slide-cases td.num { width: 1%; white-space: nowrap; padding-left: 14px; }
#slide-cases td:first-child, #slide-cases th:first-child { width: 1%; min-width: 0; white-space: nowrap; padding-right: 14px; }
#slide-cases th.why, #slide-cases td.why { width: auto; min-width: 16em; padding-left: 22px; }
#slide-cases td.why { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
/* the record: photograph beside the facts */
.record { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; text-align: left; }
.record-photo { margin: 0; }
.record-photo img { width: 100%; height: auto; display: block; border: 0.5px solid var(--rule-soft); filter: sepia(0.06) saturate(0.9) contrast(1.04); }
.record-photo .source { margin-top: 9px; font-family: var(--serif); font-style: italic; font-size: 11px; line-height: 1.35; color: var(--ink-soft); text-align: center; }
.record-text .statement { max-width: none; margin: 0 0 18px; text-align: left; }
.record-text .statement p { text-align: left; }
.record-text .statrows { margin: 0; }
.record-text .voice { margin: 26px 0 0; max-width: none; text-align: left; }
.record-text .voice + .voice { margin-top: 18px; }
.record-text .voice blockquote { font-size: 16.5px; line-height: 1.45; }
.record-text .voice .attr { margin-top: 8px; }
@media (max-width: 700px) {
.record { grid-template-columns: 1fr; gap: 28px; }
.record-photo { order: 2; width: 60%; margin: 0 auto; }
}
/* statements: justified both sides, the last line centred */
.slide .statement p { text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.record-text .statement p { text-align: left; text-align-last: left; }
@media (max-width: 480px) { .slide .statement p { text-align: center; text-align-last: center; hyphens: none; -webkit-hyphens: none; } }
/* the growth table fits the screen: no sideways scroll at any width */
.slide .inner.wider { max-width: 58em; }
#s10 .tbl { overflow: visible; margin: 0; }
#slide-cases { width: 100%; table-layout: auto; }
#slide-cases th.num, #slide-cases td.num { padding-left: 10px; padding-right: 4px; }
#slide-cases th.why, #slide-cases td.why { min-width: 12em; }
@media (max-width: 640px) {
#slide-cases { font-size: 11.5px; }
#slide-cases th, #slide-cases td { padding: 6px 3px; }
#slide-cases thead th { font-size: 8.5px; letter-spacing: 0.04em; }
#slide-cases th.num, #slide-cases td.num { padding-left: 6px; padding-right: 0; }
#slide-cases td:first-child, #slide-cases th:first-child { padding-right: 6px; }
}
/* growth table on phones: headers may wrap, figures never do */
@media (max-width: 640px) {
#slide-cases th.num { white-space: normal; line-height: 1.2; }
#slide-cases td.num { white-space: nowrap; }
#slide-cases td:first-child, #slide-cases th:first-child { min-width: 0; }
}
/* product rows with an engraved plate at the left */
.statrows .row.plated { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center; }
.statrows .row.plated .plate { width: 84px; height: auto; display: block; mix-blend-mode: multiply; filter: sepia(0.10) saturate(0.85) contrast(1.10) brightness(0.99); }
.statrows .row.plated .plate.faint { opacity: 0.45; }
.statrows .row.plated .val { white-space: nowrap; font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1; }
@media (max-width: 480px) {
.statrows .row.plated { grid-template-columns: 56px 1fr; }
.statrows .row.plated .plate { width: 56px; }
.statrows .row.plated .val { grid-column: 2; }
}
@media (max-width: 640px) {
#slide-cases { table-layout: fixed; font-size: 10px; }
#slide-cases th:first-child, #slide-cases td:first-child { width: 19%; }
#slide-cases th.num, #slide-cases td.num { width: auto; padding-left: 4px; }
#slide-cases thead th { font-size: 8px; letter-spacing: 0.02em; }
}
@media (max-width: 640px) {
#slide-cases th.why, #slide-cases td.why { display: none; }
#slide-cases caption { white-space: normal; }
}
/* the market: a field of players, one marked */
.slide .dotfield { margin: 26px auto 0; max-width: 36em; }
.slide .dotfield svg { width: 100%; height: auto; display: block; }
.slide .dotfield .fig { margin-top: 12px; }
.slide .dotfield + .seats { margin-top: 34px; }
/* the ask: plain rows under plain words */
#s-ask .body { margin-top: 26px; text-align: left; }
#s-ask .statrows .row.kv { font-size: 15px; }
/* no line ends on a stray word: short blocks balance their lines, long ones avoid orphans */
.fn, .fig, .terms, .voice blockquote, .act-head .name, table.ruled caption, .g, .note, .growth .h, .hinge, .coda p, .tp-subject, .lock-sub, .team .role, .team .credits { text-wrap: balance; }
.body p, td.why, td.move, .fold p, .statrows .row, .growth .case p { text-wrap: pretty; }
.slide .fn { max-width: 40em; margin-left: auto; margin-right: auto; }
/* statements: justified without rivers; balance and justify do not mix */
.slide .statement p { text-wrap: pretty; }
.slide .statement p:only-child, .slide .statement.small p { text-align: center; text-align-last: center; }
/* the ask: one figure, two tranches, one warm line, the ledger */
.ask-figure {
margin: 4px 0 22px; font-family: var(--serif); text-align: center;
font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 0;
font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1;
font-size: clamp(46px, 7.5vw, 84px); line-height: 1; letter-spacing: -0.01em; color: var(--ink);
}
#s-ask .body { margin-top: 0; text-align: left; }
#s-ask table.tranches { margin: 0 auto; max-width: 30em; }
#s-ask table.tranches td { padding: 9px 8px 9px 0; vertical-align: baseline; }
#s-ask table.tranches td.amt { width: 1%; white-space: nowrap; text-align: left; padding-right: 22px;
font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0; font-weight: 600; font-size: 17px; }
#s-ask table.tranches tbody tr:first-child td { border-top: 1px solid var(--rule); }
#s-ask .ask-coda { margin: 30px auto 26px; max-width: 30em; font-size: 17.5px; }
#s-ask #ask-buckets { max-width: 30em; margin: 0 auto; }
#s-ask #ask-buckets td.num { white-space: nowrap; }
#s-ask .terms { margin-top: 24px; }
@media (max-width: 480px) { .ask-figure { font-size: 44px; } }
/* the moat: a justified reading paragraph, not the italic coda */
.slide .body.moat { max-width: 30em; margin: 0 auto; }
.slide .body.moat p { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; text-indent: 0; }
@media (max-width: 480px) { .slide .body.moat p { text-align: left; hyphens: none; -webkit-hyphens: none; } }
/* the meaning aisle: a fourth column for what the seat has been worth */
table.seats td.scale { font-style: italic; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; max-width: 13em; }
table.seats td.open-scale { border-top: 0.8px dashed var(--rule); border-bottom: 0.8px dashed var(--rule); border-right: 0.8px dashed var(--rule); color: var(--ink); }
@media (max-width: 640px) { table.seats th:last-child, table.seats td.scale { display: none; } }
/* the team: three columns, hairlines between rows only */
#s8 .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin-top: 4px; }
#s8 .team .member { padding: 16px 0 18px; border-bottom: 0.5px solid var(--rule-soft); }
#s8 .team .member:nth-last-child(-n+2) { border-bottom: 0; }
#s8 .team .credits { font-size: 11.5px; }
@media (max-width: 700px) { #s8 .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { #s8 .team { grid-template-columns: 1fr; } #s8 .team .member { padding: 12px 0; } }
/* a justified reading paragraph on a slide */
.slide .body.reading-just { max-width: 30em; margin: 0 auto; }
.slide .body.reading-just p { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; text-indent: 0; text-wrap: pretty; }
@media (max-width: 480px) { .slide .body.reading-just p { text-align: left; hyphens: none; -webkit-hyphens: none; } }
/* the last two seats sit centred under the six, one column in from each edge */
@media (min-width: 701px) {
#s8 .team { grid-template-columns: repeat(6, 1fr); }
#s8 .team .member { grid-column: span 2; }
#s8 .team .member:nth-child(7) { grid-column: 2 / span 2; }
#s8 .team .member:nth-child(8) { grid-column: 4 / span 2; }
}
/* the heart of the strategy: ruled rows, the first bold */
.slide .heart { max-width: 34em; margin: 0 auto; text-align: left; }
.slide .heart .row.lead-row { font-size: 16px; }
.slide .heart .row { padding-left: 1.2em; text-indent: -1.2em; }
.slide .heart .row:not(.lead-row)::before { content: "\00b7"; display: inline-block; width: 1.2em; text-indent: 0; color: var(--gold); font-weight: 600; }
.slide .heart .row.lead-row { padding-left: 0; text-indent: 0; }
.slide .heart-fn { max-width: 34em; margin: 14px auto 0; }
/* the plan button: present, not yet live */
.plan-link { margin: 30px 0 0; text-align: center; }
.btn.dead { display: inline-block; cursor: default; opacity: 0.55; pointer-events: none; }
#s-end { min-height: 48svh; }
/* the plan's head: the lockup, small, in navy ink */
.lockup.lockup-small { --lock-ink: var(--ink); margin: 0 auto 34px; color: var(--ink); }
.lockup.lockup-small .lock-logo { width: 150px; }
.lockup.lockup-small .lock-band { width: 260px; margin: 14px 0 12px; gap: 12px; }
.lockup.lockup-small .lock-bee { width: 30px; }
.lockup.lockup-small .lock-name { font-size: 22px; }
/* plan pages carrying deck components */
.page-text .heart, .page-text .horizons, .page-text .seats { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.page-text .horizons { margin-top: 10px; }
.page-text .exemplars { max-width: none; margin-top: 22px; }
.page-text .exemplars .row { text-align: left; }
.page-text .heart .row.lead-row { font-size: 15.5px; }
.page-text .heart-fn { max-width: none; }
.page-text .team { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.page-text .team .member { padding: 14px 0 16px; }
.page-text .team .credits { font-size: 11.5px; }
.page-text .row.plated { text-indent: 0; }
.page-text table.lanes { margin-top: 22px; }
.page-text table.lanes td.move { font-size: 12.5px; }
.page-text .body .reading p { text-indent: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.page-text .body .reading p + p { margin-top: 12px; }
@media (max-width: 480px) { .page-text .team { grid-template-columns: 1fr; } }
/* how the first stretch gets done */
.how { margin: 18px 0; text-align: left; }
.how .row { text-indent: 0; }
.how + p { margin-top: 14px; }
/* gold as text: the site's --gold-deep, which clears AA on cream; the brand gold stays on rules and marks */
:root { --gold-text: #7B6242; }
.horizons table.ruled thead th.first, .horizons table.ruled td.first { color: var(--gold-text); }
.hinge, .act-head .numeral, .cases button[aria-pressed="true"] { color: var(--gold-text); }
.slide .heart .row:not(.lead-row)::before { color: var(--gold-text); }
/* the horizons bands: three short lines, set plain */
.horizons table.ruled td { padding-top: 12px; padding-bottom: 14px; padding-right: 18px; font-size: 14px; line-height: 1.5; vertical-align: top; }
.horizons table.ruled td:last-child { padding-right: 0; }
.horizons table.ruled td .l { display: inline; }
.horizons table.ruled td .l + .l::before { content: ' '; }
/* the research footnote: a single expandable under the strategy */
details.research { max-width: 34em; margin: 14px auto 0; border-top: 1px solid var(--rule); border-bottom: 0.5px solid var(--rule-soft); text-align: left; }
details.research summary { cursor: pointer; list-style: none; padding: 9px 2px; display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; min-height: 24px; }
details.research summary::-webkit-details-marker { display: none; }
details.research summary .head { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
details.research summary::after { content: '+'; color: var(--gold-text); }
details.research[open] summary::after { content: '\2212'; }
details.research .fold { padding: 2px 2px 14px; }
details.research .fold p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; text-indent: 0; text-align: left; hyphens: none; }
details.research .fold p:last-child { margin-bottom: 0; }
details.research .fold .src { font-style: italic; font-size: 12.5px; color: var(--ink-soft); }
.page-text details.research { max-width: none; }
details.research .fold p .head { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
details.research .fold .src a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
details.research .fold .src a:hover { color: var(--gold-text); }
details.research .close-row { text-align: center; margin: 18px 0 4px; text-indent: 0; }
details.research .close-research { min-width: 8em; }
/* the quarters table inside the plan's measure: figures tight, why column narrow */
.page-text #slide-cases { font-size: 12.5px; }
.page-text #slide-cases th, .page-text #slide-cases td { padding: 6px 4px 6px 0; }
.page-text #slide-cases thead th { font-size: 9.5px; letter-spacing: 0.06em; }
.page-text #slide-cases th.why, .page-text #slide-cases td.why { min-width: 10em; padding-left: 12px; font-size: 12px; }
.page-text #slide-cases td:first-child, .page-text #slide-cases th:first-child { padding-right: 8px; }
/* on the plan the why is told in the three cases below; the table keeps the figures only */
.page-text #slide-cases th.why, .page-text #slide-cases td.why { display: none; }
.page-text #slide-cases { width: 100%; }
/* the rate, in math */
table.math { max-width: 30em; }
table.math td.num { white-space: nowrap; width: 1%; }
table.math th.num { white-space: normal; }
table.math td.num { white-space: normal; }
table.math tbody tr:last-child td.num { font-size: 12.5px; font-style: italic; }
#creator-plan tr.hd td { font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; padding-top: 16px; color: var(--ink); }
#creator-plan tr.hd td.num { text-align: right; }
table.plan-return { font-size: 12.5px; }
table.plan-return th, table.plan-return td { padding: 6px 4px 6px 0; }
table.plan-return td.num { white-space: nowrap; font-size: 12.5px; }
table.plan-return th.num { white-space: nowrap; }
table.plan-return td:first-child { min-width: 9em; }
table.lanes td.prec { font-style: italic; font-size: 12px; color: var(--ink-soft); white-space: normal; max-width: 9em; }
@media (max-width: 600px) { table.lanes td.prec, table.lanes th:last-child { display: none; } }
/* the plan's lanes table: line, spend, ball sales; the move and the precedent stay on the deck */
.page-text table.lanes th:nth-child(2), .page-text table.lanes td.move, .page-text table.lanes th:nth-child(5), .page-text table.lanes td.prec { display: none; }
.page-text .growth .case p { font-size: 14px; }
/* a table wider than the reading measure: let it stand out from the column, centred, never scrolled */
.page-text .tbl.breakout { width: min(92vw, 60em); margin-left: calc(50% - min(46vw, 30em)); overflow: visible; }
.page-text .tbl.breakout table.ruled { width: 100%; font-size: 13px; }
.page-text .tbl.breakout table.ruled th, .page-text .tbl.breakout table.ruled td { padding: 6px 6px; white-space: nowrap; }
@media (max-width: 640px) { .page-text .tbl.breakout table.ruled { font-size: 10.5px; } .page-text .tbl.breakout table.ruled th, .page-text .tbl.breakout table.ruled td { padding: 5px 3px; } .page-text .tbl.breakout table.ruled td.month { font-size: 9.5px; } }
@media (max-width: 640px) {
.page-text .tbl.breakout { width: 100%; margin-left: 0; }
#month-table th:nth-child(4), #month-table td:nth-child(4), #month-table th:nth-child(5), #month-table td:nth-child(5) { display: none; }
}
/* the mix table in the assumptions panel */
table.mix { margin-top: 10px; }
table.mix td.num input.n { width: 4.5em; }
table.mix td.num .unit { margin-left: 4px; }
table.mix td, table.mix th { padding: 6px 6px 6px 0; }
table.mix td:first-child { min-width: 9em; white-space: normal; }
/* ---- the levers inside the income statement (ported from the two-levers build, 2026-09-25) ---- */
table.ruled tr.hot td:first-child { white-space: normal; }
button.tog { font-family: var(--serif); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-variation-settings: "wght" 600; line-height: 1; margin-left: 12px; padding: 5px 9px; cursor: pointer; color: var(--gold); background: transparent; border: .5px solid var(--gold); border-radius: 0; vertical-align: middle; }
button.tog[aria-expanded="true"] { color: var(--paper); background: var(--gold); }
button.tog:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
table.ruled tr.panel-row > td { padding: 14px 0 6px 24px; background: rgba(6,32,52,.03); vertical-align: top; }
table.ruled tr.panel-row table.ruled { font-size: 13.5px; margin-top: 0; }
table.ruled tr.panel-row table.ruled caption { padding-top: 4px; }
table.ruled tr.panel-row td:first-child { min-width: 0; }
table.ruled tr.panel-row .fn { margin: 6px 0 14px; max-width: 66ch; }
table.ruled tr.quiet td { color: var(--ink-mute); }
td.ro { font-variation-settings: "wght" 600; font-weight: 600; }
.unit { font-style: italic; color: var(--ink-mute); font-size: 11px; margin-left: 4px; }
.band { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; margin-left: 10px; padding: 2px 7px; border: .5px solid currentColor; vertical-align: middle; }
.band-low { color: #8B2E2E; } .band-mid { color: var(--gold); } .band-ok { color: #2F5D3A; } .band-high { color: var(--ink-mute); }
.seg { display: inline-flex; border: .5px solid var(--gold); vertical-align: middle; }
.seg-b { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: 4px 6px; cursor: pointer; color: var(--gold); background: transparent; border: 0; border-right: .5px solid var(--gold); }
.seg-b:last-child { border-right: 0; }
.seg-b[aria-pressed="true"] { background: var(--gold); color: var(--paper); }
.seg-b:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
p.how { font-size: 13.5px; color: var(--ink); max-width: 66ch; margin: 0 0 8px; text-indent: 0; text-align: left; }
.how-l { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1px; }
ul.refs { list-style: none; padding: 0; margin: 6px 0 10px; font-size: 13px; color: var(--ink-soft); max-width: 66ch; }
ul.refs li { padding: 5px 0; border-bottom: .5px solid var(--rule-soft); text-indent: 0; }
ul.refs a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
ul.refs a:hover, ul.refs a:focus { color: var(--ink); outline: none; }
@media (max-width: 720px) { table.ruled tr.panel-row > td { padding-left: 4px; } }
/* fit the panels inside the plan's measure: cells may wrap, controls are compact */
table.ruled tr.panel-row > td { padding-left: 6px; padding-right: 0; }
table.ruled tr.panel-row td.num { white-space: normal; }
table.ruled tr.panel-row td.num .band, table.ruled tr.panel-row td.num button.tog { display: inline-block; margin-top: 4px; }
table.ruled tr.panel-row input.n { width: 4.4em; font-size: 13px; }
table.ruled tr.panel-row .seg-b { font-size: 8.5px; padding: 3px 5px; letter-spacing: .08em; }
table.ruled tr.panel-row table.ruled th, table.ruled tr.panel-row table.ruled td { padding: 6px 5px; }
table.ruled tr.panel-row table.ruled td:first-child { min-width: 0; }
#is-table { table-layout: auto; }
/* the panel must not widen the income statement: the inner wrappers take the width they are given, never demand more */
table.ruled tr.panel-row > td > .tbl, table.ruled tr.panel-row > td > p, table.ruled tr.panel-row > td > ul { width: 0; min-width: 100%; box-sizing: border-box; }
table.ruled tr.panel-row > td > .tbl { overflow-x: auto; }
/* section 4: the three circles */
figure.venn { margin: 22px auto 6px; max-width: 520px; }
figure.venn svg { display: block; width: 100%; height: auto; }
figure.venn .vl { font-family: var(--serif); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; fill: var(--ink); }
figure.venn .vs { font-family: var(--serif); font-size: 12.5px; font-style: italic; fill: var(--ink-soft); }
figure.venn .vt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-mute); }
figure.venn .vk { fill: var(--ink); font-size: 10px; }
/* section 4: TAM, SAM, SOM */
.tsm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; border-top: 1px solid var(--ink); border-bottom: 0.5px solid var(--rule); padding: 14px 0 12px; margin: 18px 0 6px; }
.tsm .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; color: var(--ink); }
.tsm .kx { font-size: 12px; font-style: italic; color: var(--ink-mute); text-align: left; hyphens: none; text-indent: 0; line-height: 1.3; min-height: 2.6em; }
.tsm .cell { text-align: left; }
.tsm .v { text-align: left; font-size: 26px; line-height: 1.15; margin: 4px 0 6px; font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 0; font-feature-settings: "lnum" 1, "tnum" 1; }
.tsm .d { font-size: 13px; color: var(--ink-soft); line-height: 1.4; text-indent: 0; text-align: left; hyphens: none; }
.tsm .d button.t { font-size: inherit; }
@media (max-width: 560px) { .tsm { grid-template-columns: 1fr; gap: 12px 0; } .tsm .v { font-size: 22px; } }
/* ============================================================
EXT · THE FUNNEL (plan section 7)
Five stacked trapezoids in hairline ink, the chosen stage in gold.
Figures at the left, stage names at the right, the rate from the
stage above inside. On a phone the stage name moves above the figure.
============================================================ */
figure.funnel { margin: 22px 0 10px; text-indent: 0; }
figure.funnel .cases { margin-bottom: 14px; }
.fstages { display: flex; flex-direction: column; gap: 4px; }
button.fstage {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 14px;
width: 100%; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-family: var(--serif); text-align: left;
}
button.fstage:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.fstage .fl { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.2; }
.fstage .fname { display: none; }
.fstage .fm { font-size: 12.5px; font-style: italic; color: var(--ink-soft); }
.fstage .fv { font-size: 19px; font-feature-settings: "lnum" 1, "tnum" 1; font-variation-settings: "opsz" 24, "wght" 500, "SOFT" 0; }
.fstage .fs { position: relative; display: block; height: 56px; }
.fstage .fs svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fstage .fs polygon { fill: rgba(158, 128, 89, 0.10); stroke: var(--ink); stroke-width: 0.9; transition: fill .15s ease; }
.fstage:hover .fs polygon { fill: rgba(158, 128, 89, 0.22); }
.fstage[aria-pressed="true"] .fs polygon { fill: rgba(158, 128, 89, 0.42); stroke-width: 1.3; }
.fstage .fp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); pointer-events: none; }
.fstage .fr { font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; color: var(--ink-mute); }
.fstage[aria-pressed="true"] .fr { color: var(--ink); }
.fexplain { margin: 16px 0 4px !important; padding: 2px 0 2px 14px; border-left: 1px solid var(--gold); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-indent: 0 !important; text-align: left !important; hyphens: none; min-height: 4.5em; }
.fexplain .head { font-style: normal; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; color: var(--ink); }
.fexplain .kpi { display: block; margin-top: 4px; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); }
.tsm.four { grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
.tsm.four .v { font-size: 23px; }
.tsm.four .d label { cursor: pointer; }
.fbudget { padding: 4px 0 10px; }
.fbudget input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; cursor: pointer; margin: 8px 0 2px; height: 24px; }
.fbudget input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--rule); border: 0; }
.fbudget input[type=range]::-moz-range-track { height: 1px; background: var(--rule); border: 0; }
.fbudget input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); border: 1px solid var(--ink); margin-top: -7px; }
.fbudget input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--gold); border: 1px solid var(--ink); }
.fbudget input[type=range]:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.fbudget .ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-mute); }
figure.funnel figcaption.fn { margin-top: 8px; }
table.alloc td.buys { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); white-space: normal; min-width: 14em; }
table.alloc td.stage { font-size: 12.5px; font-style: italic; color: var(--ink-soft); white-space: normal; min-width: 6.5em; }
table.alloc input.n { width: 3.2em; font-size: 15px; }
#rates-table td.on { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
#remind-table td { vertical-align: top; }
#remind-table td:last-child { font-style: italic; }
@media (max-width: 560px) {
button.fstage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
.fstage .fr { display: none; }
.fstage .fname { display: block; font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; color: var(--ink-mute); }
.fstage[aria-pressed="true"] .fname { color: var(--ink); }
.fstage .fv { font-size: 16px; }
.fstage .fs { height: 50px; }
.fstage .fp { font-size: 9.5px; }
.tsm.four { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
table.alloc td.buys { min-width: 11em; }
}
.ffoll { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 6px !important; padding: 10px 0; border-bottom: 0.5px solid var(--rule-soft); text-indent: 0 !important; text-align: left !important; }
.ffoll .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; }
.ffoll .v { font-size: 23px; font-feature-settings: "lnum" 1, "tnum" 1; font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 0; }
.ffoll .d { font-size: 13px; font-style: italic; color: var(--ink-soft); }
.page-text .moat-why { margin-left: 1.6em !important; margin-right: 1.6em !important; }
.page-text sup { font-size: 0.62em; line-height: 0; vertical-align: super; font-feature-settings: "lnum" 1; color: var(--gold); margin-left: 1px; }
/* the plan reads in block paragraphs: no first-line indent, a space between (the deck keeps its own) */
.page-text .body > p, .page-text .body > .reading > p { text-indent: 0; }
.page-text .body > p + p, .page-text .body > .reading > p + p { margin-top: 14px; }
/* the price tiers: the craft row is the one we add, drawn open like the empty seat */
table.tiers tr.craft td { border-top: 0.8px dashed var(--rule); border-bottom: 0.8px dashed var(--rule) !important; background: rgba(158, 128, 89, 0.12); }
table.tiers tr.craft td:first-child { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
table.tiers .new { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-left: 6px; vertical-align: 1px; }
table.tiers td:nth-child(2) { font-size: 13.5px; color: var(--ink-soft); }
.tsm .g.wide { grid-column: 1 / -1; display: block; margin: 12px 0 2px; }
/* endnotes: gold numbers in the text, the notes at the back */
sup.nr { font-size: 0.62em; line-height: 0; vertical-align: super; margin-left: 1px; font-style: normal; }
sup.nr a { color: var(--gold); text-decoration: none; font-feature-settings: "lnum" 1; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; padding: 0 1px; }
sup.nr a:hover, sup.nr a:focus-visible { color: var(--ink); text-decoration: underline; }
sup.nr-sep { font-size: 0.62em; line-height: 0; vertical-align: super; color: var(--gold); }
.notes-sec .body h4 { margin-top: 30px; }
ol.notes { margin: 8px 0 0; padding-left: 2em; }
ol.notes > li { padding: 12px 0 14px; border-bottom: 0.5px solid var(--rule-soft); font-size: 14.5px; line-height: 1.5; scroll-margin-top: calc(var(--bar-h) + 16px); }
ol.notes > li::marker { color: var(--gold); font-feature-settings: "lnum" 1; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; }
ol.notes > li:target { background: rgba(158, 128, 89, 0.12); }
ol.notes p { text-indent: 0 !important; text-align: left; hyphens: none; margin: 0 0 8px; }
ol.notes p:last-child { margin-bottom: 0; }
ol.notes .nt .head { font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
ol.notes a.back { color: var(--gold); text-decoration: none; margin-left: 4px; font-size: 13px; }
ol.notes h4 { font-size: 11.5px; margin: 12px 0 4px; }
ol.notes .tbl { margin: 8px 0; }
[id^="r"]:target { background: rgba(158, 128, 89, 0.25); }
.page-text sup.nr a[id] { scroll-margin-top: calc(var(--bar-h) + 80px); }
/* the funnel on wide screens: stages on the left, what they add up to on the right, wider than the text column */
@media (min-width: 1060px) {
figure.funnel {
width: min(92vw, 62em); margin-left: calc(50% - min(46vw, 31em));
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 44px; align-items: start;
grid-template-areas: "cases cases" "stages explain" "stages kpi" "cap budget" "cap foll" "cap check";
}
figure.funnel > .cases { grid-area: cases; }
figure.funnel > .fstages { grid-area: stages; }
figure.funnel > .fexplain { grid-area: explain; margin-top: 0 !important; min-height: 0; }
figure.funnel > .tsm.four { grid-area: kpi; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 14px; }
figure.funnel > .fbudget { grid-area: budget; }
figure.funnel > .ffoll { grid-area: foll; }
figure.funnel > .mcheck { grid-area: check; }
figure.funnel > figcaption { grid-area: cap; margin-top: 18px !important; }
}
/* the Venn on wide screens: the circles on the left, the three counts and what they mean on the right */
@media (min-width: 1060px) {
.venn-wrap {
width: min(92vw, 62em); margin-left: calc(50% - min(46vw, 31em));
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 44px; align-items: start;
grid-template-areas: "venn tsm" "venn buyer";
}
.venn-wrap > figure.venn { grid-area: venn; margin: 0; max-width: none; }
.venn-wrap > .tsm { grid-area: tsm; grid-template-columns: 1fr; gap: 14px 0; margin-top: 0; }
.venn-wrap > .tsm .kx { min-height: 0; }
.venn-wrap > p.stand { grid-area: buyer; margin-top: 16px !important; }
}
/* sections that open and close on their titles, for working one at a time */
.page-text .act-head.major[role="button"] { cursor: pointer; position: relative; user-select: none; }
.page-text .act-head.major[role="button"]:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }
.page-text .act-head.major .tgl { display: block; margin: 10px auto 0; width: 24px; height: 24px; line-height: 22px; text-align: center; border: 0.5px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 16px; font-family: var(--serif); }
.page-text .act-head.major[role="button"]:hover .tgl { background: var(--gold); color: var(--paper); }
/* closed, a section is one tight line in the body face: "1. Executive summary", with a + at the right */
.page-text.collapsed { padding: 0 24px; background: transparent; }
.page-text.collapsed::before, .page-text.collapsed::after { display: none; }
.page-text.collapsed .measure > :not(.act-head) { display: none !important; }
.page-text.collapsed .act-head.major { display: flex; align-items: baseline; gap: 0.35em; text-align: left; max-width: none; margin: 0; padding: 9px 2px; border-bottom: 0.5px solid var(--rule-soft); }
.page-text.collapsed .act-head.major .numeral { display: inline; font-style: normal; font-size: 17px; color: var(--ink); letter-spacing: 0; margin: 0; font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 0; }
.page-text.collapsed .act-head.major .numeral::after { content: '.'; }
.page-text.collapsed .act-head.major .name { text-transform: none; letter-spacing: 0; font-size: 17px; font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 0; }
.page-text.collapsed .act-head.major .hr { display: none; }
.page-text.collapsed .act-head.major .tgl { margin: 0 0 0 auto; border: 0; width: auto; height: auto; line-height: inherit; font-size: 17px; background: none !important; color: var(--gold); }
.page-text.collapsed .act-head.major[role="button"]:hover .name { color: var(--gold); }
.page-text.collapsed + .page-text:not(.collapsed) { margin-top: 18px; }
/* the controls sit as wide as the funnel they drive */
@media (min-width: 1060px) {
.page-text .tbl:has(> table.alloc) { width: min(92vw, 62em); margin-left: calc(50% - min(46vw, 31em)); overflow: visible; }
table.alloc td.buys { min-width: 20em; }
}
.head.caps { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-variation-settings: "opsz" 14, "wght" 700, "SOFT" 0; }
/* two categories, side by side: the factory product and the craft one; the soccer row is the one we fill */
table.sides { table-layout: fixed; }
table.sides th:first-child, table.sides td.cat { width: 26%; }
table.sides td.cat { font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--ink-soft); }
table.sides td { vertical-align: top; }
table.sides td .co { display: block; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
table.sides td .gloss { display: block; font-style: italic; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
table.sides tr.ball td { border-top: 1px solid var(--rule); padding-top: 10px; padding-bottom: 12px; }
table.sides td.craft { background: rgba(158, 128, 89, 0.16); border-left: 0.8px dashed var(--rule); border-right: 0.8px dashed var(--rule); border-bottom: 0.8px dashed var(--rule) !important; }
/* the 2x2: what a brand sells by how it is made; Hayworth's corner carries the gold */
table.quad { table-layout: fixed; margin-top: 18px; }
table.quad thead th:first-child, table.quad tbody th { width: 24%; }
table.quad tbody th { text-align: left; vertical-align: top; font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; font-weight: 600; padding-top: 12px; }
table.quad td { vertical-align: top; padding-top: 12px; padding-bottom: 14px; }
table.quad td .co { display: block; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; }
table.quad td .gloss { display: block; font-style: italic; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
table.quad td.ours { background: rgba(158, 128, 89, 0.22); border: 0.8px dashed var(--rule) !important; }
table.quad td.ours .co { font-size: 1.12em; }
@media (max-width: 560px) {
table.quad thead th:first-child, table.quad tbody th { width: 25%; }
table.quad tbody th { font-size: 9px; letter-spacing: 0; padding-right: 4px; }
}
/* the quadrant: what a brand sells, by how it is made; Hayworth's corner is the one that is lit */
figure.quadrant {
margin: 26px 0 10px; display: grid; gap: 0; text-indent: 0; text-align: left;
grid-template-columns: 22px 5.4em 1fr 1fr;
grid-template-rows: auto auto 1fr 1fr;
grid-template-areas: ". . qx qx" ". . qh1 qh2" "qy qr1 q1 q2" "qy qr2 q3 q4";
}
.quadrant .qx { grid-area: qx; border-bottom: 0.9px solid var(--ink); position: relative; padding: 0 0 6px; text-align: center; }
.quadrant .qx::after { content: ''; position: absolute; right: -1px; bottom: -4px; border: 4px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.quadrant .qy { grid-area: qy; border-right: 0.9px solid var(--ink); position: relative; display: flex; align-items: center; justify-content: center; margin-right: 6px; }
.quadrant .qy::after { content: ''; position: absolute; right: -4px; bottom: -1px; border: 4px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
.quadrant .qy .qq { writing-mode: vertical-rl; transform: rotate(180deg); }
.quadrant .qq { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.quadrant .qh { font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; font-weight: 600; padding: 10px 14px 8px; color: var(--ink-soft); }
.quadrant .qh1 { grid-area: qh1; } .quadrant .qh2 { grid-area: qh2; }
.quadrant .qr { font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); padding: 14px 6px 0 0; text-align: right; }
.quadrant .qr1 { grid-area: qr1; } .quadrant .qr2 { grid-area: qr2; }
.quadrant .qc { padding: 14px 14px 18px; border-right: 0.5px solid var(--rule-soft); border-bottom: 0.5px solid var(--rule-soft); min-height: 9.5em; }
.quadrant .q1 { grid-area: q1; border-top: 0.5px solid var(--rule-soft); } .quadrant .q2 { grid-area: q2; border-top: 0.5px solid var(--rule-soft); }
.quadrant .q3 { grid-area: q3; } .quadrant .q4 { grid-area: q4; }
.quadrant .qc .qn { display: block; font-size: 15px; line-height: 1.3; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; color: var(--ink-soft); }
.quadrant .qc .qg { display: block; font-style: italic; font-size: 13px; line-height: 1.45; color: var(--ink-mute); margin-top: 6px; }
.quadrant .q4 { background: rgba(158, 128, 89, 0.24); border: 1px solid var(--gold); position: relative; }
.quadrant .q4 .qn { font-size: 21px; color: var(--ink); font-variation-settings: "opsz" 36, "wght" 600, "SOFT" 0; }
.quadrant .q4 .qg { color: var(--ink-soft); font-size: 13.5px; }
.quadrant .q4 .qball { float: right; width: 64px; height: auto; margin: -2px 0 4px 10px; }
@media (max-width: 560px) {
figure.quadrant { grid-template-columns: 16px 3.8em 1fr 1fr; }
.quadrant .qq { font-size: 9px; letter-spacing: 0.1em; }
.quadrant .qh, .quadrant .qr { font-size: 9.5px; letter-spacing: 0.04em; padding-left: 8px; padding-right: 8px; }
.quadrant .qr { padding-right: 4px; padding-left: 0; }
.quadrant .qc { padding: 10px 8px 12px; min-height: 0; }
.quadrant .qc .qn { font-size: 13px; }
.quadrant .qc .qg { font-size: 11.5px; }
.quadrant .q4 .qn { font-size: 17px; }
.quadrant .q4 .qball { width: 40px; }
}
/* the positioning map: how it is made (factory to craft) by what it sells (performance to meaning); logos placed by our reading */
figure.pmap { margin: 28px 0 10px; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 1fr auto; text-indent: 0; }
.pm-plot { grid-column: 2; grid-row: 1; position: relative; aspect-ratio: 1.15 / 1; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pm-plot::before { content: ''; position: absolute; left: -5px; top: -1px; border: 5px solid transparent; border-bottom: 8px solid var(--ink); border-top: 0; }
.pm-plot::after { content: ''; position: absolute; right: -1px; bottom: -5px; border: 5px solid transparent; border-left: 8px solid var(--ink); border-right: 0; }
.pm-mid { position: absolute; background: var(--rule-soft); }
.pm-midx { left: 0; right: 0; top: 50%; height: 0.5px; } .pm-midy { top: 0; bottom: 0; left: 50%; width: 0.5px; }
.pm-q { position: absolute; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); opacity: 0.8; }
.pm-q1 { left: 8px; bottom: 6px; } .pm-q2 { right: 8px; bottom: 6px; } .pm-q3 { left: 8px; top: 6px; } .pm-q4 { right: 8px; top: 6px; color: var(--gold); opacity: 1; }
.pm { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 13%; }
.pm img { max-width: 100%; max-height: 34px; width: auto; height: auto; display: block; }
.pm.mono img { filter: brightness(0) saturate(100%); opacity: 0.72; }
.pm.gray img { filter: grayscale(1) contrast(1.15); opacity: 0.7; }
.pm .pl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 3px; white-space: nowrap; }
.pm.soc .pl { color: var(--gold); font-weight: 600; }
.pm.soc .pl::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 4px; vertical-align: 1px; }
.pm.soc img { opacity: 0.9; }
.pm.hw { width: 19%; padding: 10px 8px 6px; border: 1px solid var(--gold); background: rgba(158, 128, 89, 0.22); }
.pm.hw img { max-height: 44px; }
.pm-ax { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.pm-ax .pm-t { color: var(--ink); font-weight: 600; }
.pm-axx { grid-column: 2; grid-row: 2; padding-top: 8px; }
.pm-axy { grid-column: 1; grid-row: 1; flex-direction: column; justify-content: space-between; padding: 2px 6px 0 0; }
.pm-axy span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
figure.pmap figcaption { grid-column: 1 / -1; margin-top: 12px; }
@media (min-width: 1060px) { figure.pmap { width: min(92vw, 52em); margin-left: calc(50% - min(46vw, 26em)); } .pm img { max-height: 40px; } .pm.hw img { max-height: 54px; } }
@media (max-width: 560px) { .pm { width: 15%; } .pm img { max-height: 20px; } .pm .pl { display: none; } .pm.soc .pl { display: block; font-size: 0; margin-top: 2px; } .pm.soc .pl::before { margin: 0; } .pm.hw { width: 22%; padding: 6px 4px 4px; } .pm.hw img { max-height: 28px; } .pm-q { font-size: 7px; } .pm-ax { font-size: 8.5px; } }
/* the object graph: whose it is, by how long it stays; the soccer ball alone in the shared and replaced corner */
.omap .pm-plot { aspect-ratio: 1.35 / 1; }
.omap .om-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.om { position: absolute; transform: translate(-6px, -6px); display: grid; grid-template-columns: 12px auto; column-gap: 6px; align-items: baseline; max-width: 30%; }
.om .od { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0.7; align-self: center; }
.om .on { font-size: 14px; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.om .og { grid-column: 2; font-style: italic; font-size: 12px; line-height: 1.35; color: var(--ink-mute); }
.om.ball .od { background: var(--gold); opacity: 1; width: 11px; height: 11px; }
.om.ball .on { color: var(--ink); }
.om.hw { grid-template-columns: auto; transform: translate(-10%, -50%); padding: 8px 12px 9px; border: 1px solid var(--gold); background: rgba(158, 128, 89, 0.22); max-width: 34%; }
.om.hw .on { font-size: 17px; color: var(--ink); } .om.hw .og { grid-column: 1; color: var(--ink-soft); }
@media (max-width: 560px) { .om .og { display: none; } .om .on { font-size: 11px; } .om.hw .on { font-size: 13px; } .om.hw .og { display: block; font-size: 10px; } .om.ball .og { display: none; } }
.om.l { grid-template-columns: auto 12px; transform: translate(calc(-100% + 6px), -6px); text-align: right; }
.om.l .od { grid-column: 2; grid-row: 1; }
.om.l .on { grid-column: 1; grid-row: 1; }
.om.l .og { grid-column: 1; }
.om.hw { transform: translate(-50%, -100%); border: 0; background: none; padding: 0; max-width: 40%; }
.om.hw .on { color: var(--gold); font-size: 17px; }
.om.hw .og { color: var(--gold); font-style: italic; }
@media (max-width: 560px) { .om .on { white-space: normal; } .om.hw .og { display: none; } }
@media (max-width: 560px) {
.omap .pm-plot { aspect-ratio: 1 / 1; }
.om .on { white-space: nowrap; font-size: 10px; }
.pm-ax { font-size: 7.5px; letter-spacing: 0.06em; }
.omap .pm-axy .pm-t, .pmap .pm-axy .pm-t { display: none; }
}
.om.boots .od { background: var(--gold); opacity: 1; }
.om.boots .on { color: var(--ink); }
/* two lanes: what first, why first; the arrow says which way each brand runs */
figure.twolane { margin: 26px 0 10px; text-indent: 0; text-align: left; }
.tl-lane { padding: 16px 0 18px; border-top: 1px solid var(--ink); }
.tl-lane + .tl-lane { border-top: 0.5px solid var(--rule); }
.tl-why { background: linear-gradient(90deg, rgba(158,128,89,0) 0%, rgba(158,128,89,0.10) 100%); }
.tl-head, .tl-ball { display: flex; align-items: center; gap: 10px; }
.tl-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); font-weight: 600; white-space: nowrap; }
.tl-arrow { flex: 0 0 64px; height: 1px; background: var(--ink); position: relative; }
.tl-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border: 4.5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.tl-then { font-style: italic; font-size: 14px; color: var(--ink-soft); }
.tl-why .tl-k, .tl-why .tl-then { color: var(--ink); }
.tl-why .tl-arrow { background: var(--gold); } .tl-why .tl-arrow::after { border-left-color: var(--gold); }
.tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 16px 0 4px; }
.tl-b { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.tl-b img { height: 30px; width: auto; max-width: 120px; display: block; }
.tl-b.mono img { filter: brightness(0) saturate(100%); opacity: 0.72; }
.tl-b .pl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--ink-mute); }
.tl-b.soc .pl { color: var(--gold); font-weight: 600; }
.tl-b.soc .pl::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 4px; vertical-align: 1px; }
.tl-b.hw { padding: 8px 12px 6px; border: 1px solid var(--gold); background: rgba(158, 128, 89, 0.22); }
.tl-b.hw img { height: 44px; max-width: 150px; }
.tl-ball { margin-top: 14px; padding-top: 12px; border-top: 0.5px dashed var(--rule-soft); }
.tl-bn { font-size: 14px; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tl-ball .tl-arrow { flex-basis: 48px; background: var(--ink-mute); } .tl-ball .tl-arrow::after { border-left-color: var(--ink-mute); }
.tl-x { font-size: 22px; line-height: 1; color: var(--gold); margin: 0 2px; }
@media (max-width: 560px) {
.tl-head, .tl-ball { flex-wrap: wrap; row-gap: 4px; }
.tl-arrow { flex-basis: 34px; }
.tl-then { font-size: 12.5px; flex-basis: 100%; }
.tl-row { gap: 12px 20px; } .tl-b img { height: 22px; max-width: 90px; } .tl-b.hw img { height: 32px; }
}
/* the Why as two facing pages of a book: one text flowing across a spread, a fold at the gutter, running heads and folios */
.book { text-indent: 0; }
.book-head, .book-foot { display: none; }
@media (min-width: 900px) {
.book {
position: relative; width: min(94vw, 66em); margin: 6px 0 30px calc(50% - min(47vw, 33em));
padding: 38px 60px 30px;
background:
linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%, rgba(90,66,30,0.10) 48.6%, rgba(60,42,18,0.26) 50%, rgba(90,66,30,0.10) 51.4%, rgba(0,0,0,0) 56%, rgba(0,0,0,0) 100%),
linear-gradient(180deg, #F8F1DF 0%, #F3EAD2 100%);
border: 0.5px solid var(--rule-soft);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 24px -14px rgba(40,28,10,0.45), 0 2px 0 -1px #E9DEC2, 0 4px 0 -2px #E2D5B5;
border-radius: 2px 2px 3px 3px;
}
.book-head, .book-foot { display: grid; grid-template-columns: 1fr 1fr; column-gap: 120px; font-family: var(--serif); font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; color: var(--ink-mute); }
.book-head { margin-bottom: 18px; } .book-head span:first-child { text-align: left; } .book-head span:last-child { text-align: right; }
.book-foot { margin-top: 22px; font-feature-settings: "lnum" 1; letter-spacing: 0.1em; font-size: 12px; font-style: italic; text-transform: none; }
.book-foot span:first-child { text-align: left; } .book-foot span:last-child { text-align: right; }
.book-text { column-count: 2; column-gap: 120px; column-fill: balance; }
.book-text p { margin: 0 !important; text-indent: 1.3em !important; text-align: justify; hyphens: auto; -webkit-hyphens: auto; font-size: 16px; line-height: 1.58; orphans: 3; widows: 3; }
.book-text p.lead { text-indent: 0 !important; }
.book-text p.lead::first-letter { float: left; font-size: 5.9em; line-height: 0.74; padding: 6px 10px 0 0; margin-bottom: -6px; font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 0; color: var(--ink); }
.page-text .body > .book + figure.exhibit { margin-top: 10px; }
}
/* memo sections: placeholders that cannot ship unnoticed, the numbered commitments, the questions, the ranked risks */
.justin { background: #F6D365; color: #3A2A00; font-style: italic; padding: 1px 5px; border: 1px dashed #A07800; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
ol.statrows.numbered { list-style: none; padding: 0; counter-reset: rule; }
ol.statrows.numbered > li.row { counter-increment: rule; display: grid; grid-template-columns: 2em 1fr; }
ol.statrows.numbered > li.row::before { content: counter(rule); color: var(--gold); font-feature-settings: "lnum" 1; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; }
.page-text p.qa { margin-top: 18px !important; }
.page-text p.qa .head { display: inline-block; margin-bottom: 3px; }
table.risk td { vertical-align: top; white-space: normal; }
table.risk td:first-child { min-width: 11em; }
table.risk td .know { display: inline-block; font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 600; color: var(--ink); margin-right: 4px; }
table.risk td:nth-child(3) { font-size: 12.5px; color: var(--ink-soft); min-width: 14em; }
table.risk td.num { white-space: nowrap; }
@media (min-width: 1060px) { .page-text .tbl:has(> table.risk) { width: min(92vw, 62em); margin-left: calc(50% - min(46vw, 31em)); overflow: visible; } }
#cal-table td.month { width: 7em; }
p.appendix-link { text-align: center; font-style: italic; margin: 0; padding: 28px 16px 36px; }
/* ============================================================
PAGES NAV: The Plan · The Model · Appendix · The Deck
============================================================ */
.topbar nav.pages { gap: 10px; align-items: center; }
.topbar nav.pages span { color: var(--ink-mute); font-size: 11px; }
.topbar nav.pages a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--gold); }
@media (max-width: 1100px) { .topbar .title-line { display: none; } }
@media (max-width: 560px) {
.topbar { padding: 0 12px; }
.topbar nav.pages { gap: 7px; }
.topbar nav.pages span { display: none; }
.topbar nav.pages a { font-size: 9.5px; letter-spacing: 0.08em; }
}
/* ============================================================
THE PLAN'S DESIGN SYSTEM (plan.html only, body.plan-doc)
One column, one serif, one label style, one table style,
one spacing scale. Everything open, nothing collapses.
============================================================ */
.plan-doc, .plan-doc * { font-family: var(--serif) !important; }
.plan-doc .page-text { padding: 64px 16px 56px; }
.plan-doc .page-text .measure { max-width: 660px; }
.plan-doc .body, .plan-doc .body p, .plan-doc .body .statrows .row, .plan-doc .body li {
font-size: 18.5px; line-height: 1.6; text-align: left !important; text-align-last: auto !important;
hyphens: none !important; -webkit-hyphens: none !important; text-indent: 0 !important;
}
.plan-doc .body p.lead { font-size: 18.5px; }
.plan-doc .body > * + * { margin-top: 18px; }
.plan-doc .body > p + p { margin-top: 18px !important; }
/* the one label style: the section title's letterspaced capitals, one size smaller */
.plan-doc .body h4, .plan-doc table.ruled caption, .plan-doc table.ruled thead th, .plan-doc table.ruled tbody th,
.plan-doc table.ruled tr.hd td, .plan-doc .horizons table.ruled thead th {
font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.16em;
font-size: 11.5px !important; font-weight: 600; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; color: var(--ink); font-style: normal;
}
.plan-doc .body h4 { margin: 44px 0 12px; }
.plan-doc .fn { font-size: 15px; line-height: 1.55; font-style: italic; color: var(--ink-soft); }
/* tables and figures: up to 820px, centered, scrolling inside their own box on a phone */
.plan-doc .body .tbl, .plan-doc .body figure {
width: min(820px, calc(100vw - 32px)); margin-left: calc(50% - min(410px, calc(50vw - 16px))); margin-right: 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.plan-doc .body .tbl { margin-top: 28px; margin-bottom: 6px; }
.plan-doc table.ruled { width: 100%; font-size: 15.5px; line-height: 1.45; }
.plan-doc table.ruled td, .plan-doc table.ruled th { padding: 8px 10px 8px 0; font-weight: 400; }
.plan-doc table.ruled td.num, .plan-doc table.ruled th.num { text-align: right; font-feature-settings: "lnum" 1, "tnum" 1; white-space: nowrap; }
.plan-doc table.ruled tr.sum td { font-weight: 600; }
.plan-doc table.ruled td.month { white-space: nowrap; width: 6.5em; font-feature-settings: "lnum" 1, "tnum" 1; }
.plan-doc table.market th[scope="row"] { width: 3.5em; vertical-align: top; }
.plan-doc table.market td.mk { width: 11em; font-style: italic; color: var(--ink-soft); vertical-align: top; }
.plan-doc table.risk td .know { font-size: 10.5px; }
.plan-doc .statrows .row .head, .plan-doc p .head { font-weight: 600; }
.plan-doc .statrows.numbered > li.row { font-size: 18.5px; }
/* the drop cap stays on the first paragraph of Why Hayworth */
.plan-doc #p2 .body > p.lead::first-letter { float: left; font-size: 5.3em; line-height: 0.76; padding: 7px 10px 0 0; margin-bottom: -6px; font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 0; color: var(--ink); }
.plan-doc .part-head .body p.lead { text-align: center !important; }
.plan-doc .act-head.major { margin-bottom: 30px; }
/* no toggles, no switches, no buttons on the plan */
.plan-doc .act-head .tgl, .plan-doc .cases, .plan-doc .actions, .plan-doc .btn { display: none !important; }
.plan-doc p.appendix-link { font-size: 16px; }
@media (max-width: 560px) {
.plan-doc .body, .plan-doc .body p, .plan-doc .body .statrows .row, .plan-doc .body li { font-size: 17.5px; }
.plan-doc table.ruled { font-size: 14px; }
.plan-doc .page-text { padding: 44px 16px 40px; }
}
/* ============================================================
PRINT: the plan as a clean PDF
============================================================ */
@media print {
@page { size: letter; margin: 0.75in 0.8in; }
.plan-doc .topbar, .plan-doc .progress, .plan-doc .appendix-link { display: none !important; }
.plan-doc, .plan-doc .spread, .plan-doc html { background: #fff !important; }
.plan-doc .spread::before, .plan-doc .spread::after { display: none !important; }
.plan-doc .page-text { padding: 0 !important; }
.plan-doc .page-text .measure { max-width: none; }
.plan-doc section.page-text:has(.act-head .numeral) { break-before: page; page-break-before: always; }
.plan-doc .body .tbl, .plan-doc .body figure { width: 100% !important; margin-left: 0 !important; overflow: visible !important; }
.plan-doc table.ruled, .plan-doc .statrows, .plan-doc figure { break-inside: avoid; page-break-inside: avoid; }
.plan-doc .body, .plan-doc .body p, .plan-doc .body .statrows .row, .plan-doc .body li { font-size: 11pt; }
.plan-doc table.ruled { font-size: 9.5pt; }
.plan-doc h4 { break-after: avoid; }
.plan-doc a { color: inherit; text-decoration: none; }
.plan-doc .justin { background: #F6D365 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (min-width: 1060px) { .plan-doc .page-text .body .tbl:has(> table.risk), .plan-doc .page-text .body .tbl:has(> table.alloc) { width: min(820px, calc(100vw - 32px)); margin-left: calc(50% - min(410px, calc(50vw - 16px))); } }
.plan-doc table.ruled.market { border-top: 1px solid var(--rule); }
.plan-doc table.ruled.market tbody th, .plan-doc table.ruled.market tbody td { border-bottom: 0.5px solid var(--rule-soft); padding-top: 10px; padding-bottom: 10px; }
.plan-doc table.ruled.market tbody tr:last-child th, .plan-doc table.ruled.market tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
/* ============================================================
THE SITE LOCKUP at the top of the plan: hayworthathletic.com's
lockup C (logotype, bee band, BALLMAKERS, the line, the places),
set in navy on the paper. Its own two faces, as the site sets them.
============================================================ */
@font-face { font-family: "Ruston Basic"; src: url("assets/fonts/RustonBasic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "SAA stand-in"; src: url("assets/fonts/Overpass-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
.site-lockup { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 34px; color: var(--ink); }
.site-lockup .sl-logo { display: block; width: clamp(190px, 24vw, 300px); height: auto; }
.site-lockup .sl-band { display: flex; align-items: center; gap: 16px; width: clamp(300px, 42vw, 540px); margin: clamp(1.1rem, 2vw, 1.5rem) 0 clamp(1rem, 1.8vw, 1.3rem); }
.site-lockup .sl-band::before, .site-lockup .sl-band::after { content: ""; flex: 1; border-top: 1px solid var(--ink); }
.site-lockup .sl-bee { width: 46px; height: auto; display: block; }
.plan-doc .site-lockup .sl-name, .site-lockup .sl-name {
font-family: "Ruston Basic", "DM Sans", system-ui, sans-serif !important; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.16em; text-indent: 0.16em !important; font-size: clamp(1.9rem, 3.6vw, 3.1rem) !important; line-height: 1 !important;
color: var(--ink); margin: 0 !important; text-align: center !important;
}
.plan-doc .site-lockup .sl-tag, .site-lockup .sl-tag {
display: block; font-family: "SAA stand-in", "DM Sans", system-ui, sans-serif !important; font-weight: 500; font-size: 0.2895em;
letter-spacing: 0.161em; padding-left: 0.161em; text-indent: 0; margin-top: 1.15em; line-height: 1; white-space: nowrap;
}
.plan-doc .site-lockup .sl-sub, .site-lockup .sl-sub {
font-family: "SAA stand-in", "DM Sans", system-ui, sans-serif !important; font-weight: 500; text-transform: uppercase;
letter-spacing: 0.26em; font-size: 12.5px !important; line-height: 1.9 !important; margin: 0 !important; text-align: center !important; color: var(--ink);
}
.site-lockup .sl-name + .sl-sub { margin-top: clamp(1.25rem, 2.2vw, 1.6rem) !important; }
.site-lockup .sl-sep { padding: 0 0.34em 0 0.2em; opacity: 0.5; }
@media (max-width: 560px) {
.site-lockup .sl-band { width: 88vw; }
.plan-doc .site-lockup .sl-tag { white-space: normal; font-size: 10px; letter-spacing: 0.1em; }
.plan-doc .site-lockup .sl-sub { font-size: 10.5px !important; letter-spacing: 0.2em; }
}
/* owner and press quotes on the plan */
.plan-doc .voices { margin-top: 36px !important; display: grid; gap: 22px; }
.plan-doc .body .voices figure.voice { width: auto; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--gold); overflow: visible; }
.plan-doc .voice blockquote { margin: 0; font-size: 21px; line-height: 1.45; font-style: italic; color: var(--ink); }
.plan-doc .voice .attr { margin-top: 6px; font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; color: var(--ink-soft); }
.plan-doc .body .voices figure.voice, .plan-doc .voice blockquote, .plan-doc .voice .attr { text-align: left !important; max-width: none; text-wrap: pretty; }
.plan-doc table.market th[scope="row"] { width: 9.5em; line-height: 1.5; padding-right: 14px; }
/* each note's number is a link back to the sentence that cites it */
ol.notes { list-style: none; padding-left: 0; }
ol.notes > li { position: relative; padding-left: 2.6em; }
ol.notes > li > a.nnum { position: absolute; left: 0; top: 12px; min-width: 2em; text-align: right; color: var(--gold); text-decoration: none;
font-feature-settings: "lnum" 1, "tnum" 1; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; font-weight: 600; font-size: 15px; }
ol.notes > li > a.nnum::after { content: '.'; }
ol.notes > li > a.nnum:hover, ol.notes > li > a.nnum:focus-visible { color: var(--ink); text-decoration: underline; }
.plan-doc sup.nr a[id]:target, .model-doc sup.nr a[id]:target { background: rgba(158, 128, 89, 0.35); outline: 3px solid rgba(158, 128, 89, 0.35); border-radius: 2px; }
/* the Venn, back in Who: the drawing, a light tint where all three overlap, an ink dot for this year's crowd,
and two callouts on leader lines at the right; under 600px the callouts stack below and the leaders go */
.plan-doc .body figure.venn2 { display: grid; grid-template-columns: minmax(0, 1fr) 16.5em; column-gap: 0; align-items: stretch; margin-top: 30px; overflow: visible; }
figure.venn2 svg { display: block; width: 100%; height: auto; }
figure.venn2 .vl { font-family: var(--serif); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-variation-settings: "opsz" 14, "wght" 600, "SOFT" 0; fill: var(--ink); }
figure.venn2 .vs { font-family: var(--serif); font-size: 12.5px; font-style: italic; fill: var(--ink-soft); }
figure.venn2 .v-callouts { position: relative; }
figure.venn2 .v-co { position: absolute; left: 10px; right: 0; transform: translateY(-0.8em); display: flex; flex-direction: column; gap: 1px; }
figure.venn2 .v-sam { top: 29.7%; }
figure.venn2 .v-som { top: 59.4%; }
.plan-doc figure.venn2 .v-k { font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.plan-doc figure.venn2 .v-l { font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.plan-doc .statrows.buyers .row { padding: 10px 2px; }
@media (max-width: 600px) {
.plan-doc .body figure.venn2 { grid-template-columns: 1fr; }
figure.venn2 .v-leaders { display: none; }
figure.venn2 .v-callouts { position: static; display: grid; gap: 14px; margin-top: 14px; border-top: 0.5px solid var(--rule-soft); padding-top: 12px; }
figure.venn2 .v-co { position: static; transform: none; left: auto; }
}
@media print {
.plan-doc figure.venn2 .v-tint { opacity: 0.2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.plan-doc figure.venn2 { break-inside: avoid; }
}
.plan-doc .page-text .body .tbl:has(> table.risk) { overflow-x: auto !important; max-width: calc(100vw - 32px); }
/* the split: the two fixed lines above, the media-pool boundary, then the share-controlled lines */
table.alloc tr.fixed td { color: var(--ink-soft); }
table.alloc tr.pool-line td { padding-top: 12px; padding-bottom: 8px; font-style: italic; color: var(--ink); border-bottom: 0.5px solid var(--rule); }
/* the market check beneath the funnel's figures (model page) */
.mcheck { padding: 10px 0 12px; border-bottom: 0.5px solid var(--rule-soft); text-align: left; }
.mcheck p { text-indent: 0 !important; text-align: left !important; margin: 0 !important; }
.mcheck .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; margin-bottom: 4px !important; }
.mcheck .mc-line { font-size: 17px; }
.mcheck .mc-line .num { font-size: 23px; font-feature-settings: "lnum" 1, "tnum" 1; }
.mcheck .fn { margin-top: 4px !important; }
label.tog-tariff { cursor: pointer; white-space: nowrap; }
label.tog-tariff input { margin: 0 4px 0 0; vertical-align: -1px; accent-color: var(--ink); }
#m-assumptions, #m-target, #m-true { scroll-margin-top: calc(var(--bar-h) + 24px); }
.display-seg { margin-top: 10px; }
.display-cap { margin-top: 6px !important; text-align: center; }
/* the model as a cockpit: one sticky bar for case, display and reset */
.cockpit-bar { position: sticky; top: var(--bar-h); z-index: 30; background: var(--paper); border-bottom: 0.5px solid var(--rule-soft);
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 28px; padding: 8px 16px 6px; }
.cockpit-bar .cases { margin: 0; gap: 20px; }
.cockpit-bar .display-seg { margin: 0; }
.cockpit-bar .reset-plan { margin: 0; }
.cockpit-bar .display-cap { flex-basis: 100%; margin: 0 !important; text-align: center; font-size: 12px; }
.tsm.five { grid-template-columns: repeat(5, 1fr); margin-top: 8px; }
.tsm.five .v { font-size: 23px; }
.tsm.one { grid-template-columns: 1fr; margin-bottom: 0; }
@media (min-width: 1060px) { .page-text .body .tsm.five { width: min(92vw, 62em); margin-left: calc(50% - min(46vw, 31em)); } }
@media (max-width: 900px) { .tsm.five { grid-template-columns: 1fr 1fr; gap: 14px 16px; } }
@media (max-width: 560px) { .tsm.five { grid-template-columns: 1fr; } }
.answer-line { font-size: 19px; line-height: 1.5; margin-top: 14px !important; text-indent: 0 !important; }
.answer-diff { font-style: italic; color: var(--ink-soft); text-indent: 0 !important; margin-top: 4px !important; }
@media (min-width: 1060px) {
figure.funnel.machine { grid-template-areas: "stages explain" "stages kpi" "stages foll" "cap cap"; }
}
#m-answer, #m-controls, #m-funnel, #m-fin, #m-true, #m-mix { scroll-margin-top: calc(var(--bar-h) + 90px); }
/* the deck's money table: fixed columns, the move and who-first wrap, the figures never do */
table.lanes { table-layout: fixed; width: 100%; }
table.lanes td, table.lanes th { overflow-wrap: normal; word-break: normal; hyphens: manual; }
table.lanes td.num, table.lanes th.num { text-align: right; white-space: nowrap; }
table.lanes td.move, table.lanes td.prec, table.lanes td.lane { white-space: normal; }
.slide table.lanes td.lane { white-space: normal; }
.slide table.lanes td.move, table.lanes td.prec { max-width: none; }
table.lanes col.c-lane { width: 20%; } table.lanes col.c-move { width: 42%; } table.lanes col.c-spend { width: 11%; } table.lanes col.c-balls { width: 9%; } table.lanes col.c-who { width: 18%; }
table.lanes th.num { white-space: normal; }
@media (max-width: 900px) { table.lanes col.c-lane { width: 19%; } table.lanes col.c-move { width: 36%; } table.lanes col.c-spend { width: 15%; } table.lanes col.c-balls { width: 11%; } table.lanes col.c-who { width: 19%; } }
/* link buttons read as buttons, not links */
a.btn, a.btn:hover, a.btn:visited, a.btn:focus { text-decoration: none; }
.slide .body.reading-just p + p { margin-top: 1.1em !important; }
/* the horizons table already rules the top of the exemplars; one line, not two */
.exemplars { border-top: none; }