@font-face {
font-family: "Big Shoulders Display";
src: url(fonts/big-shoulders-display.woff2?v=df6e30cd9f) format("woff2");
font-weight: 600 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Atkinson Hyperlegible Next";
src: url(fonts/atkinson-hyperlegible-next.woff2?v=5c5d82b3cd) format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
:root {
--display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
--text: "Atkinson Hyperlegible Next", Arial, "Helvetica Neue", Helvetica, sans-serif;
--t-label: 12.5px;
--t-small: 15px;
--t-meta: 16.5px;
--t-ui: 17px;
--t-body: 19px;
--t-lede: clamp(19px, .45vw + 16px, 22px);
--t-h3: 20px;
--t-block: 30px;
--t-h2: clamp(32px, 2vw + 18px, 44px);
--t-h1: clamp(42px, 4vw + 14px, 68px);
--t-hero: clamp(44px, 5.4vw + 10px, 86px);
--t-place: clamp(54px, 6vw + 14px, 108px);
--t-fig: clamp(44px, 2.4vw + 22px, 62px);
--measure: 31em;
--track-label: .085em;
}
:root {
--yellow: #f5d14a;
--paper: #ffffff;
--ground: #eeefec;
--ink: #16181b;
--ink-2: #4d525a;
--hair: #d3d6d9;
--rule: #16181b;
--focus: #1f5bd8;
--link-ul: currentColor;
--field-top: #f5d14a;
--field-bottom: #f5d14a;
--field-ink: #16181b;
--field-ink-2: #3f3a22;
--field-h1: #16181b;
--field-rule: rgba(22, 24, 27, .28);
--field-rule-strong: rgba(22, 24, 27, .62);
--sheet: #ffffff;
--sheet-edge: transparent;
--sheet-shadow: 0 1px 1px rgba(60, 48, 0, .10), 0 22px 44px -18px rgba(60, 48, 0, .42);
--mark: #ffe04a;
--mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 25' preserveAspectRatio='none'%3E%3Cpath d='M4 6.2C36 4.4 74 5.1 112 4.3S172 3.6 196 2.9L198.6 8.5 197.4 14 199 20.1C168 21.2 126 20.3 88 21S30 21.4 2.2 22.3L1 16.6 2.8 11.4Z' fill='%23ffe04a'/%3E%3C/svg%3E");
--mark-ink: #16181b;
--btn: #16181b;
--btn-ink: #ffffff;
--btn-hover: #33373d;
--ghost-hover: rgba(22, 24, 27, .07);
--tag: #f5d14a;
--tag-ink: #16181b;
--sched-now: #f5d14a;
--sched-bar: #16181b;
--land: #e7e8e4;
--land-line: #ffffff;
--dot: #16181b;
--dot-ring: #ffffff;
--dot-opacity: .78;
--dot-glow: none;
--bar: #4d525a;
--bar-now: #16181b;
--bar-then: #8a9099;
--foot: #16181b;
--foot-ink: #e9e8e3;
--foot-ink-2: #b9bcc1;
--foot-rule: #3a3f46;
--loc-land: rgba(22, 24, 27, .17);
--loc-dot: #16181b;
--mk-card: #16181b;
--mk-hl: #f5d14a;
--mk-line: #ffffff;
--mk-foot-card: #f5d14a;
--mk-foot-ink: #16181b;
--w-body: 400;
--w-semi: 600;
--w-bold: 700;
--w-display: 800;
--w-display-x: 900;
--track-text: 0;
--smooth: auto;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #12100d;
--ground: #1a1713;
--ink: #efe6d2;
--ink-2: #b8ad98;
--hair: #332f28;
--rule: #cdbfa6;
--focus: #9db8ff;
--link-ul: rgba(239, 230, 210, .5);
--field-top: #5a3b0a;
--field-bottom: #2a1a07;
--field-ink: #f6e7c6;
--field-ink-2: #d8c59e;
--field-h1: #ffc14a;
--field-rule: rgba(246, 231, 198, .2);
--field-rule-strong: rgba(246, 231, 198, .5);
--sheet: #1f1b16;
--sheet-edge: rgba(255, 205, 120, .14);
--sheet-shadow: 0 1px 0 rgba(255, 210, 140, .08) inset, 0 26px 50px -22px rgba(0, 0, 0, .9);
--mark: #cf972c;
--mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 25' preserveAspectRatio='none'%3E%3Cpath d='M4 6.2C36 4.4 74 5.1 112 4.3S172 3.6 196 2.9L198.6 8.5 197.4 14 199 20.1C168 21.2 126 20.3 88 21S30 21.4 2.2 22.3L1 16.6 2.8 11.4Z' fill='%23cf972c'/%3E%3C/svg%3E");
--mark-ink: #1a1306;
--btn: #e9b444;
--btn-ink: #1a1306;
--btn-hover: #f4c460;
--ghost-hover: rgba(246, 231, 198, .08);
--tag: #e9b444;
--tag-ink: #1a1306;
--sched-now: rgba(233, 180, 68, .14);
--sched-bar: #d9ccb2;
--land: #26221c;
--land-line: #12100d;
--dot: #f2b84b;
--dot-ring: #12100d;
--dot-opacity: .9;
--dot-glow: drop-shadow(0 0 3px rgba(242, 184, 75, .55));
--bar: #a89b83;
--bar-now: #f2b84b;
--bar-then: #6b6356;
--foot: #0b0a08;
--foot-ink: #ebe2cf;
--foot-ink-2: #aaa08b;
--foot-rule: #2a261f;
--loc-land: rgba(246, 231, 198, .16);
--loc-dot: #ffc14a;
--mk-card: #ffc14a;
--mk-hl: #1a1306;
--mk-line: #6b5216;
--mk-foot-card: #e9b444;
--mk-foot-ink: #1a1306;
--w-body: 380;
--w-semi: 560;
--w-bold: 660;
--w-display: 760;
--w-display-x: 840;
--track-text: .006em;
--smooth: antialiased;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--paper: #12100d;
--ground: #1a1713;
--ink: #efe6d2;
--ink-2: #b8ad98;
--hair: #332f28;
--rule: #cdbfa6;
--focus: #9db8ff;
--link-ul: rgba(239, 230, 210, .5);
--field-top: #5a3b0a;
--field-bottom: #2a1a07;
--field-ink: #f6e7c6;
--field-ink-2: #d8c59e;
--field-h1: #ffc14a;
--field-rule: rgba(246, 231, 198, .2);
--field-rule-strong: rgba(246, 231, 198, .5);
--sheet: #1f1b16;
--sheet-edge: rgba(255, 205, 120, .14);
--sheet-shadow: 0 1px 0 rgba(255, 210, 140, .08) inset, 0 26px 50px -22px rgba(0, 0, 0, .9);
--mark: #cf972c;
--mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 25' preserveAspectRatio='none'%3E%3Cpath d='M4 6.2C36 4.4 74 5.1 112 4.3S172 3.6 196 2.9L198.6 8.5 197.4 14 199 20.1C168 21.2 126 20.3 88 21S30 21.4 2.2 22.3L1 16.6 2.8 11.4Z' fill='%23cf972c'/%3E%3C/svg%3E");
--mark-ink: #1a1306;
--btn: #e9b444;
--btn-ink: #1a1306;
--btn-hover: #f4c460;
--ghost-hover: rgba(246, 231, 198, .08);
--tag: #e9b444;
--tag-ink: #1a1306;
--sched-now: rgba(233, 180, 68, .14);
--sched-bar: #d9ccb2;
--land: #26221c;
--land-line: #12100d;
--dot: #f2b84b;
--dot-ring: #12100d;
--dot-opacity: .9;
--dot-glow: drop-shadow(0 0 3px rgba(242, 184, 75, .55));
--bar: #a89b83;
--bar-now: #f2b84b;
--bar-then: #6b6356;
--foot: #0b0a08;
--foot-ink: #ebe2cf;
--foot-ink-2: #aaa08b;
--foot-rule: #2a261f;
--loc-land: rgba(246, 231, 198, .16);
--loc-dot: #ffc14a;
--mk-card: #ffc14a;
--mk-hl: #1a1306;
--mk-line: #6b5216;
--mk-foot-card: #e9b444;
--mk-foot-ink: #1a1306;
--w-body: 380;
--w-semi: 560;
--w-bold: 660;
--w-display: 760;
--w-display-x: 840;
--track-text: .006em;
--smooth: antialiased;
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: var(--w-body) var(--t-body)/1.55 var(--text);
letter-spacing: var(--track-text);
font-kerning: normal;
-webkit-font-smoothing: var(--smooth);
overflow-wrap: break-word;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1 0 auto; }
p, ul, ol, dl, figure { margin: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--link-ul); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
strong, b { font-weight: var(--w-bold); }
.vh {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num, td, th { font-variant-numeric: tabular-nums; }
.skip {
position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 6px;
background: var(--btn); color: var(--btn-ink); font-weight: var(--w-bold); text-decoration: none;
}
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; hyphens: manual; text-wrap: balance; }
h1, h2, .display {
font-family: var(--display);
font-synthesis: none;
letter-spacing: 0;
}
h1 { font-size: var(--t-h1); line-height: .95; font-weight: var(--w-display-x); letter-spacing: -.006em; color: var(--field-h1); }
h2 { font-size: var(--t-h2); line-height: 1; font-weight: var(--w-display); }
h3 { font: var(--w-bold) var(--t-h3)/1.3 var(--text); }
.lede { font-size: var(--t-lede); line-height: 1.5; max-width: var(--measure); }
.intro { color: var(--ink-2); max-width: var(--measure); }
.fine { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.note { font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }
.label, .mix th, .src th, .figs dt, .fields dt, .sheet-meta, .trend .axis, .kind, .map-key .keys,
.src td.d::before, .src td.lic::before {
font-family: var(--text); font-size: var(--t-label); font-weight: var(--w-bold); line-height: 1.3;
text-transform: uppercase; letter-spacing: var(--track-label); font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.field { background: var(--field-top); color: var(--field-ink); }
.masthead .bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding-top: 18px; padding-bottom: 18px;
}
.brand {
display: inline-flex; align-items: center; gap: 11px; color: var(--field-ink); text-decoration: none;
font: var(--w-display) 27px/1 var(--display); letter-spacing: .01em;
}
.brand svg { width: 30px; height: 30px; flex: none; }
.mk-card { fill: var(--mk-card); }
.mk-hl { fill: var(--mk-hl); }
.mk-line { fill: var(--mk-line); }
.nav { display: flex; flex-wrap: wrap; gap: 0 26px; margin-left: auto; }
.nav a {
color: var(--field-ink); text-decoration: none; font-weight: var(--w-semi); font-size: var(--t-ui);
padding: 10px 0 8px; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.theme {
display: inline-flex; gap: 2px; margin: 0; padding: 2px; min-width: 0;
border: 1.5px solid var(--field-rule-strong); border-radius: 6px;
}
.theme[hidden] { display: none; }
.theme label {
position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px;
border-radius: 4px; cursor: pointer; color: var(--field-ink);
font: var(--w-semi) 14px/1 var(--text); letter-spacing: .01em;
}
.theme input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme .fillc { fill: currentColor; stroke: none; }
.theme label:hover { background: var(--ghost-hover); }
.theme label:has(input:checked) { background: var(--field-ink); color: var(--field-top); }
.theme label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.band { padding: 34px 0 56px; background: linear-gradient(to bottom, var(--field-top), var(--field-bottom)); }
.crumbs { font-size: var(--t-small); color: var(--field-ink-2); margin-bottom: 14px; }
.crumbs a { color: var(--field-ink-2); }
.crumbs span[aria-hidden] { padding: 0 6px; }
.band .lede { margin-top: 18px; color: var(--field-ink); }
.band .note { color: var(--field-ink-2); margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn {
display: inline-flex; align-items: center; justify-content: center; min-height: 54px;
padding: 13px 24px; border-radius: 6px; border: 2px solid var(--btn);
background: var(--btn); color: var(--btn-ink);
font: var(--w-bold) 18px/1.2 var(--text); letter-spacing: .005em; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: var(--ghost-hover); }
.textlink { font-weight: var(--w-bold); font-size: 18px; padding: 12px 0; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
mark.rep {
color: var(--mark-ink);
background-color: transparent;
background-image: var(--mark-img);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 50%;
padding: .04em .3em .06em;
margin: 0 -.3em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.hero {
background: linear-gradient(to bottom, var(--field-top) 0, var(--field-bottom) calc(100% - 150px), var(--paper) calc(100% - 150px));
color: var(--field-ink);
}
.hero .hero-h1 {
max-width: 15.5em; font-size: var(--t-hero); line-height: .92; letter-spacing: -.012em; padding-top: 30px;
}
.hero-grid {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
gap: 0 24px; align-items: start; padding-top: 40px; padding-bottom: 72px;
}
.hero-copy { grid-column: 1 / span 5; grid-row: 1; padding-top: 6px; }
.hero-copy .lede { color: var(--field-ink); }
.hero-copy .actions { margin-top: 28px; }
.assure { margin-top: 16px; font-size: var(--t-ui); font-weight: var(--w-semi); color: var(--field-ink-2); }
.hero-notes {
grid-column: 1 / span 4; grid-row: 2; align-self: end; margin-bottom: 190px;
list-style: none; padding: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--field-ink);
border-top: 2px solid var(--field-ink);
}
.hero-notes li { padding: 12px 0 13px; border-bottom: 1px solid var(--field-rule); }
.hero-notes .ph { margin: 0 6px 0 0; color: var(--field-ink); }
.hero-notes mark.rep { font-weight: var(--w-bold); }
.hero-sheet { grid-column: 6 / -1; grid-row: 1 / span 2; }
.sheet {
background: var(--sheet); color: var(--ink); border-radius: 3px;
box-shadow: var(--sheet-shadow), 0 0 0 1px var(--sheet-edge);
scroll-margin-top: 24px;
}
.sheet-head { padding: 20px 28px 18px; border-bottom: 2px solid var(--rule); }
.sheet-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.sheet-meta b { color: var(--ink); font-weight: var(--w-bold); }
.sheet-title { font: var(--w-display) 42px/1 var(--display); letter-spacing: -.004em; margin: 12px 0 6px; text-wrap: balance; }
.sheet-sub { font-size: var(--t-ui); color: var(--ink); }
.sheet-sub span { color: var(--ink-2); }
.sheet-cap { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); margin-top: 10px; max-width: var(--measure); }
.sheet-rows { list-style: none; padding: 0 28px; }
.job {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 18px; align-items: baseline;
padding: 16px 0 15px; border-bottom: 1px solid var(--hair);
}
.job:last-child { border-bottom: 0; }
.job-b { font-weight: var(--w-bold); font-size: 20px; line-height: 1.3; letter-spacing: -.003em; }
.job-v { font-weight: var(--w-bold); font-size: 18px; line-height: 1.3; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-w { font-size: var(--t-ui); line-height: 1.45; margin-top: 4px; }
.kind { display: inline-block; margin-right: .6em; letter-spacing: .07em; }
.job-d { font-size: var(--t-small); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.job-x {
grid-column: 1 / -1; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); margin-top: 3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph { display: inline-block; width: 15px; height: 15px; margin-left: 7px; vertical-align: -1px; color: var(--ink-2); }
.ph svg { width: 15px; height: 15px; fill: currentColor; }
.sheet-foot {
padding: 16px 28px 22px; border-top: 2px solid var(--rule); display: grid; gap: 8px;
font-size: var(--t-small); line-height: 1.5; color: var(--ink-2);
}
.sheet-foot .key { color: var(--ink); }
.sheet-foot .key .ph { margin: 0 4px 0 0; }
.sheet-foot a { color: var(--ink); font-weight: var(--w-bold); }
.sheet .who { font-weight: var(--w-bold); }
.sheet .who.quiet { font-weight: var(--w-body); color: var(--ink-2); font-style: normal; }
.sheet.teaser { box-shadow: none; border: 1px solid var(--hair); border-top: 3px solid var(--rule); }
@media (prefers-reduced-motion: no-preference) {
.hero-sheet mark.rep {
animation: highlight .55s cubic-bezier(.3, .7, .3, 1) both;
animation-delay: calc(.5s + var(--i, 0) * .32s);
}
@keyframes highlight {
from { background-size: 0% 100%; }
to { background-size: 100% 100%; }
}
}
.sec { padding: 96px 0; }
.hero + .sec { padding-top: 40px; }
.sec.tight { padding-top: 40px; }
.sec.ground { background: var(--ground); }
.rule-top { border-top: 2px solid var(--rule); padding-top: 22px; }
.rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
.rail-head { grid-column: 1 / span 4; padding-right: 24px; }
.rail-head .intro { margin-top: 16px; }
.rail-body { grid-column: 5 / -1; }
.sec-head { margin-bottom: 40px; }
.sec-head .intro { margin-top: 16px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.fields > div { border-bottom: 1px solid var(--hair); padding: 16px 0 20px; }
.fields > div:nth-child(-n+2) { padding-top: 0; }
.fields > div:nth-last-child(-n+2) { border-bottom: 0; }
.fields dt { margin-bottom: 8px; color: var(--ink); }
.fields dd { margin: 0; color: var(--ink-2); font-size: 17.5px; line-height: 1.5; }
.dim { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 6px; color: var(--ink); }
.dim::before, .dim::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--rule); }
.dim-cap { position: absolute; top: 50%; width: 1px; height: 26px; margin-top: -13px; background: var(--rule); }
.dim-cap.l { left: 0; }
.dim-cap.r { right: 0; }
.dim-cap::after {
content: ""; position: absolute; left: -6px; top: 7px; width: 13px; height: 0;
border-top: 2px solid var(--rule); transform: rotate(-45deg);
}
.dim-row { display: grid; grid-template-columns: 22% minmax(0, 1fr); }
.dim-label { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.dim-label b { font: var(--w-display-x) 54px/1 var(--display); letter-spacing: -.01em; }
.dim-label span { font-size: var(--t-meta); color: var(--ink-2); white-space: normal; max-width: 19em; line-height: 1.3; }
.sched-wrap { margin-top: 26px; }
table.sched { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sched col.who { width: 22%; }
.sched thead th {
font: var(--w-semi) var(--t-small)/1.25 var(--text); text-align: left; vertical-align: top; padding: 0 8px 14px 10px;
color: var(--ink);
}
.sched thead td { border: 0; }
.sched thead th .n { display: block; font: var(--w-display) 26px/1 var(--display); margin-bottom: 6px; color: var(--ink); }
.sched tbody th {
font: var(--w-semi) var(--t-meta)/1.3 var(--text); text-align: left; padding: 11px 12px 11px 0; vertical-align: middle;
border-top: 1px solid var(--hair);
}
.sched td { position: relative; padding: 0; height: 46px; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.sched td.on::before {
content: ""; position: absolute; left: -1px; right: 0; top: 50%; height: 14px; margin-top: -7px;
background: var(--sched-bar);
}
.sched td.on.s::before { left: 6px; border-radius: 4px 0 0 4px; }
.sched td.on.e::before { right: 6px; border-radius: 0 4px 4px 0; }
.sched td.on.s.e::before { border-radius: 4px; }
.sched .now { background: var(--sched-now); }
.sched thead th.now { background: transparent; }
.sched thead th.now .n::after {
content: "Your list"; display: inline-block; margin-left: 8px; padding: 4px 7px 3px; border-radius: 3px;
font: var(--w-bold) 11.5px/1.2 var(--text); letter-spacing: var(--track-label); text-transform: uppercase;
vertical-align: 6px; background: var(--tag); color: var(--tag-ink);
}
.sched-note { margin-top: 18px; max-width: var(--measure); }
ol.stages { display: none; }
.cover { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.map { grid-column: 1 / span 8; container-type: inline-size; }
.map-frame { position: relative; }
.map svg { width: 100%; height: auto; }
.land { fill: var(--land); }
.lines { fill: none; stroke: var(--land-line); stroke-width: 1.1; stroke-linejoin: round; }
.dots { filter: var(--dot-glow); }
.dots circle { fill: var(--dot); fill-opacity: var(--dot-opacity); stroke: var(--dot-ring); stroke-width: 1.4; }
.dots a:hover circle { fill: var(--btn); fill-opacity: 1; stroke: var(--btn-ink); }
.inset-mark { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.map-label {
position: absolute; transform: translate(0, -50%); font-size: 14px; font-weight: var(--w-bold); line-height: 1;
letter-spacing: .01em; color: var(--ink); white-space: nowrap; pointer-events: none;
text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 2px var(--paper);
}
.map-label.l { transform: translate(-100%, -50%); }
.map-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 14px; font-size: var(--t-small); color: var(--ink-2); }
.map-key > span:first-child { max-width: var(--measure); }
.map-key .keys { display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.kd { display: inline-flex; align-items: center; gap: 6px; }
.kc {
display: inline-block; flex: none; border-radius: 50%; background: var(--dot); opacity: var(--dot-opacity);
width: calc(var(--d) * 800px); height: calc(var(--d) * 800px);
width: calc(var(--d) * 100cqw); height: calc(var(--d) * 100cqw);
}
.inset { grid-column: 9 / -1; }
.inset-box { border: 1px solid var(--rule); background: var(--paper); }
.inset-title { padding: 12px 16px 10px; border-bottom: 1px solid var(--rule); }
.inset-title h2, .inset-title h3 { font: var(--w-bold) 18px/1.3 var(--text); letter-spacing: 0; }
.inset-title p { font-size: var(--t-small); color: var(--ink-2); margin-top: 2px; }
.inset svg { width: 100%; height: auto; }
.inset .cty { fill: none; stroke: var(--hair); stroke-width: 1; }
.inset .cty.f { fill: var(--land); stroke: var(--ink-2); stroke-width: 1; }
.inset .cty-l { fill: var(--ink-2); font: var(--w-bold) 9.5px var(--text); letter-spacing: .14em; text-transform: uppercase; }
.inset .towns { filter: var(--dot-glow); }
.inset .town circle { fill: var(--dot); stroke: var(--paper); stroke-width: 1.5; }
.inset .town.no circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.inset .town text {
fill: var(--ink); font: var(--w-bold) 12.5px var(--text); letter-spacing: .01em;
paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round;
}
.inset .town.no text { font-weight: var(--w-body); fill: var(--ink-2); }
.inset .scale line, .inset .scale path { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.inset .scale text, .inset .north text { fill: var(--ink); font: var(--w-semi) 11px var(--text); letter-spacing: .04em; }
.inset .north path { fill: var(--ink); }
.inset figcaption { padding: 10px 16px 14px; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); border-top: 1px solid var(--rule); }
.places { margin-top: 56px; columns: 4 230px; column-gap: 32px; }
.st { break-inside: avoid; margin: 0 0 26px; }
.st h2, .st h3 { font: var(--w-display) 22px/1.1 var(--display); letter-spacing: .012em; padding-bottom: 6px; border-bottom: 2px solid var(--rule); }
.st ul { list-style: none; padding: 0; }
.st li {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 7px 0 6px; border-bottom: 1px solid var(--hair); font-size: var(--t-ui);
}
.st li a { text-decoration-color: var(--hair); }
.st li a:hover { text-decoration-color: currentColor; }
.st .n { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; font-size: 16px; }
.lag {
display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%;
border: 1.5px solid var(--ink-2); vertical-align: 1px;
}
.cover-note { margin-top: 8px; max-width: 46em; }
.price-card {
border: 2px solid var(--rule); border-radius: 3px; background: var(--sheet);
padding: 26px 30px 30px; max-width: 34em;
}
.price-card h3, .price-card .pc-h { font: var(--w-display) var(--t-block)/1 var(--display); letter-spacing: .01em; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0 6px; }
.price .amt { font: var(--w-display-x) 92px/.86 var(--display); letter-spacing: -.012em; }
.price .per { font-size: var(--t-body); color: var(--ink-2); }
.then { color: var(--ink-2); font-size: var(--t-ui); max-width: var(--measure); }
.incl { list-style: none; padding: 0; margin: 20px 0 24px; border-top: 1px solid var(--hair); }
.incl li { padding: 10px 0 10px 30px; border-bottom: 1px solid var(--hair); position: relative; font-size: 17.5px; line-height: 1.45; }
.incl li::before {
content: ""; position: absolute; left: 3px; top: 15px; width: 12px; height: 7px;
border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg);
}
.price-card .free { margin-top: 14px; font-weight: var(--w-bold); }
.price-terms { margin-top: 24px; max-width: var(--measure); }
.price-terms p + p { margin-top: 10px; }
.rail-body > .price-card + .price-terms { margin-top: 26px; }
p.more { margin-top: 22px; font-size: 17.5px; max-width: var(--measure); padding-top: 14px; border-top: 1px solid var(--hair); }
p.more a { font-weight: var(--w-bold); }
.price-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.price-grid .price-col { grid-column: 1 / span 5; }
.price-grid .prose { grid-column: 7 / -1; }
ol.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
ol.steps li { border-top: 2px solid var(--rule); padding-top: 16px; }
ol.steps .n { display: block; font: var(--w-display-x) 64px/.9 var(--display); margin-bottom: 14px; }
ol.steps h3 { font-size: var(--t-h3); margin-bottom: 6px; }
ol.steps > li > p { color: var(--ink-2); font-size: 17.5px; max-width: var(--measure); }
.steps-actions { margin-top: 36px; }
ol.steps.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
ol.steps.two li > * + * { margin-top: 14px; }
.step-h { font-size: clamp(30px, 1.4vw + 18px, 38px); }
.price-card.compact { padding: 22px 24px 24px; }
.price-card.compact .amt { font-size: 72px; }
.price-card.compact .then { margin-bottom: 18px; }
.uncovered { margin-top: 80px; }
.uncovered .note { margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
list-style: none; cursor: pointer; position: relative; padding: 18px 44px 18px 0;
font-weight: var(--w-bold); font-size: var(--t-body); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2.5px; margin-top: -1px;
background: var(--ink); transition: transform .2s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { color: var(--ink-2); padding: 0 0 20px; max-width: var(--measure); font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.place-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end; }
.place-band .pb-main { grid-column: 1 / span 8; }
.place-band .pb-loc { grid-column: 9 / -1; justify-self: end; width: 100%; max-width: 300px; }
.place-band h1 { font-size: var(--t-place); line-height: .9; letter-spacing: -.012em; }
.h1-place { display: block; }
.h1-what { display: block; font-size: .4em; line-height: 1.05; font-weight: var(--w-display); letter-spacing: 0; margin-top: .22em; color: var(--field-ink); }
.place-band .when { font: var(--w-body) clamp(20px, .6vw + 16px, 24px)/1.35 var(--text); margin-top: 16px; max-width: var(--measure); }
.place-band .when b { font-weight: var(--w-bold); }
.loc svg { width: 100%; height: auto; }
.loc .lo { fill: var(--loc-land); }
.loc .here { fill: var(--loc-dot); stroke: var(--field-bottom); stroke-width: 3; }
.loc .ring { fill: none; stroke: var(--loc-dot); stroke-width: 1.5; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--rule); }
.figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 16px 20px 20px 0; }
.figs > div + div { border-left: 1px solid var(--hair); padding-left: 20px; }
.figs dd { margin: 0; font: var(--w-display-x) var(--t-fig)/.92 var(--display); letter-spacing: -.01em; }
.figs dt { margin-top: 10px; color: var(--ink); }
.figs dt span {
display: block; margin-top: 3px; color: var(--ink-2); font-size: var(--t-small); font-weight: var(--w-body);
letter-spacing: 0; text-transform: none; line-height: 1.35;
}
.figs-note { margin-top: 14px; }
.report-lede { font-size: clamp(20px, .6vw + 16px, 24px); line-height: 1.45; max-width: var(--measure); margin-top: 40px; }
.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; margin-top: 72px; }
.duo > .a { grid-column: 1 / span 7; }
.duo > .b { grid-column: 9 / -1; }
.duo > .wide { grid-column: 1 / -1; }
.blk-h { font: var(--w-display) var(--t-block)/1.05 var(--display); letter-spacing: .005em; margin-bottom: 6px; hyphens: manual; text-wrap: balance; }
.blk-sub { font-size: var(--t-small); color: var(--ink-2); margin-bottom: 18px; max-width: var(--measure); }
table { border-collapse: collapse; }
table.mix { width: 100%; font-size: var(--t-ui); }
.mix th { text-align: left; padding: 0 12px 8px 0; border-bottom: 2px solid var(--rule); }
.mix td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.mix .r { text-align: right; white-space: nowrap; }
.mix td.barcell { width: 38%; padding-right: 0; }
.mix .bar { display: block; height: 14px; min-width: 3px; width: var(--w); background: var(--bar); border-radius: 0 4px 4px 0; }
.trend .cols {
list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px;
align-items: end; height: 190px; border-bottom: 2px solid var(--rule); position: relative;
}
.trend .cols li { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.trend .col { width: min(100%, 22px); height: var(--h); min-height: 2px; background: var(--bar-then); border-radius: 4px 4px 0 0; }
.trend .cols li.now .col { background: var(--bar-now); }
.trend .val { font-size: 14px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; margin-bottom: 4px; white-space: nowrap; visibility: hidden; }
.trend li.now .val, .trend li.peak .val, .trend li:hover .val { visibility: visible; }
.trend li:hover .col { background: var(--bar-now); }
.trend .axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.trend .axis b { color: var(--ink); font-weight: var(--w-bold); }
ol.ranked { list-style: none; padding: 0; counter-reset: rk; columns: 2 300px; column-gap: 40px; }
ol.ranked li {
counter-increment: rk; break-inside: avoid; display: grid; grid-template-columns: 2.1em minmax(0, 1fr);
padding: 10px 0 11px; border-bottom: 1px solid var(--hair);
}
ol.ranked li::before { content: counter(rk); font: var(--w-display) 22px/1.15 var(--display); color: var(--ink-2); }
ol.ranked .nm { font-weight: var(--w-bold); font-size: 18px; line-height: 1.35; }
ol.ranked .ct { grid-column: 2; font-size: var(--t-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legend-line { margin-top: 14px; max-width: 46em; }
.pitch {
margin-top: 80px;
background: linear-gradient(to bottom, var(--field-top), var(--field-bottom));
color: var(--field-ink); border-radius: 3px; padding: 36px 40px 40px;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; align-items: center;
}
.pitch .pt { grid-column: 1 / span 7; }
.pitch .pt h2 { color: var(--field-h1); }
.pitch .pt p { margin-top: 14px; max-width: var(--measure); }
.pitch .pa { grid-column: 9 / -1; display: grid; gap: 14px; justify-items: start; }
.pitch .pa .btn { width: 100%; }
.pitch .pa .price-line { font-size: var(--t-ui); color: var(--field-ink-2); }
.pitch .pa .price-line b { font: var(--w-display-x) 46px/1 var(--display); letter-spacing: -.01em; color: var(--field-ink); margin-right: 6px; }
.others { margin-top: 64px; }
.others p { margin-top: 10px; max-width: 46em; }
.credit { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--hair); max-width: 52em; }
.prose h2 { font-size: clamp(30px, 1.4vw + 18px, 38px); margin-bottom: 14px; }
.prose > * + h2 { margin-top: 56px; }
.prose .actions { margin-top: 20px; }
table.src { width: 100%; font-size: var(--t-meta); }
.src th { text-align: left; padding: 0 14px 8px 0; border-bottom: 2px solid var(--rule); white-space: nowrap; }
.src td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.src td:first-child { font-weight: var(--w-bold); white-space: nowrap; }
.src td.d, .src td.lic { white-space: nowrap; }
.plain-list { list-style: none; padding: 0; max-width: var(--measure); }
.plain-list li { position: relative; padding: 0 0 12px 26px; }
.plain-list li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 12px; height: 2px; background: var(--ink); }
.disclaimer { max-width: var(--measure); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.src-block { margin-top: 72px; }
.src-block h2 { margin-bottom: 24px; }
.src-note { margin-top: 14px; max-width: 46em; }
.src-block + .rail, .rail + .rail { margin-top: 72px; }
.lost-actions { margin-top: 30px; }
.nowrap { white-space: nowrap; }
.foot { background: var(--foot); color: var(--foot-ink); margin-top: 0; padding: 56px 0 48px; font-size: var(--t-meta); }
.foot a { color: var(--foot-ink); text-decoration-color: currentColor; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; }
.foot .fb { grid-column: 1 / span 5; }
.foot .fc { grid-column: 6 / span 4; }
.foot .fl { grid-column: 10 / -1; display: grid; gap: 6px; align-content: start; }
.foot .brand { color: var(--foot-ink); font-size: 30px; }
.foot .brand .mk-card { fill: var(--mk-foot-card); }
.foot .brand .mk-hl { fill: var(--mk-foot-ink); }
.foot .brand .mk-line { fill: var(--mk-foot-ink); }
.foot p { margin-top: 8px; color: var(--foot-ink-2); max-width: var(--measure); }
.foot .fc p:first-child { margin-top: 0; }
.foot .fc b { color: var(--foot-ink); }
.foot .fl a { text-decoration: none; font-weight: var(--w-semi); padding: 3px 0; }
.foot .fl a:hover { text-decoration: underline; }
.foot .legal {
grid-column: 1 / -1; border-top: 1px solid var(--foot-rule); padding-top: 22px; margin-top: 8px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px;
font-size: 14.5px; line-height: 1.6; color: var(--foot-ink-2);
}
.foot .legal p { margin-top: 0; max-width: 34em; }
.foot :focus-visible { outline-color: #9db8ff; }
@media (max-width: 1080px) {
.theme .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme label { padding: 0 9px; }
.hero { background: linear-gradient(to bottom, var(--field-top), var(--field-bottom)); }
.hero-copy { grid-column: 1 / -1; grid-row: auto; }
.hero-sheet { grid-column: 1 / -1; grid-row: auto; margin-top: 44px; }
.hero-grid { padding-bottom: 0; }
.hero-notes {
grid-column: 1 / -1; grid-row: auto; margin: 44px -24px 0; padding: 26px 24px 0; color: var(--ink);
background: var(--paper); border-top: 0;
}
.hero-notes li { border-bottom-color: var(--hair); }
.hero-notes .ph { color: var(--ink-2); }
.price-grid .price-col, .price-grid .prose { grid-column: 1 / -1; }
.map, .inset { grid-column: 1 / -1; }
.inset { max-width: 460px; }
.duo > .a, .duo > .b { grid-column: 1 / -1; }
.pitch .pt, .pitch .pa { grid-column: 1 / -1; }
.pitch .pa .btn { width: auto; }
}
@media (max-width: 860px) {
.brand { order: 1; }
.theme { order: 2; margin-left: auto; }
.nav { order: 3; width: 100%; margin-left: 0; }
.rail-head, .rail-body { grid-column: 1 / -1; }
.rail-head { padding-right: 0; margin-bottom: 28px; }
.dim-row { grid-template-columns: minmax(0, 1fr); }
.dim-row > div:first-child { display: none; }
.dim::before, .dim::after, .dim-cap { display: none; }
.dim { margin-bottom: 18px; }
.dim-label { flex-direction: column; align-items: flex-start; gap: 6px; white-space: normal; }
.figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figs > div:nth-child(3) { border-left: 0; padding-left: 0; }
.figs > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
table.sched { display: none; }
ol.stages { display: block; list-style: none; padding: 0; counter-reset: st; border-top: 2px solid var(--rule); }
ol.stages li {
counter-increment: st; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 4px;
padding: 12px 0; border-bottom: 1px solid var(--hair);
}
ol.stages li::before { content: counter(st); font: var(--w-display) 24px/1.05 var(--display); grid-row: span 2; }
ol.stages li b { font-weight: var(--w-bold); font-size: 18px; }
ol.stages li span { grid-column: 2; font-size: var(--t-meta); color: var(--ink-2); }
ol.stages li.now { background: var(--sched-now); margin: 0 -12px; padding: 12px; }
ol.stages li.now span { color: var(--ink); font-weight: var(--w-semi); }
.place-band .pb-main, .place-band .pb-loc { grid-column: 1 / -1; }
.place-band .pb-loc { justify-self: start; max-width: 220px; margin-top: 22px; }
.foot .fb, .foot .fc, .foot .fl { grid-column: 1 / -1; }
.foot .legal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
:root { --t-body: 18px; }
.wrap { padding: 0 16px; }
.masthead .bar { padding-top: 14px; padding-bottom: 6px; gap: 6px 12px; }
.brand { font-size: 23px; gap: 8px; letter-spacing: .005em; }
.brand svg { width: 26px; height: 26px; }
.theme { padding: 1px; gap: 1px; }
.theme label { height: 32px; padding: 0 6px; }
.theme svg { width: 15px; height: 15px; }
.nav { gap: 0 20px; }
.band { padding: 22px 0 40px; }
.hero-grid { padding-top: 28px; padding-bottom: 0; }
.hero .hero-h1 { padding-top: 16px; line-height: .98; letter-spacing: -.006em; }
.hero-notes { margin: 36px -16px 0; padding: 22px 16px 0; }
.actions { gap: 12px; }
.actions .btn { width: 100%; }
.sheet-head { padding: 18px 16px 14px; }
.sheet-title { font-size: 36px; }
.sheet-rows { padding: 0 16px; }
.sheet-foot { padding: 14px 16px 18px; }
.job { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b b" "w w" "v d" "x x"; }
.job-b { grid-area: b; font-size: 19px; }
.job-w { grid-area: w; }
.job-v { grid-area: v; text-align: left; padding-top: 4px; font-size: 17px; }
.job-d { grid-area: d; padding-top: 4px; }
.job-x { grid-area: x; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.place-band .pb-loc { max-width: 150px; margin-top: 18px; }
.place-band h1 { letter-spacing: -.006em; }
.sec { padding: 64px 0; }
.fields { grid-template-columns: minmax(0, 1fr); }
.fields > div:nth-child(2) { padding-top: 16px; }
.fields > div:nth-last-child(2) { border-bottom: 1px solid var(--hair); }
.dim-label b { font-size: 44px; }
.places { columns: 2 150px; column-gap: 20px; }
.st li { font-size: 16px; }
.st .n { font-size: 15px; }
.map-label.m { display: none; }
ol.steps, ol.steps.two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.price-card { padding: 20px 18px 22px; }
.price .amt { font-size: 80px; }
.figs dd { font-size: 44px; }
.pitch { padding: 26px 18px 28px; }
.pitch .pa .btn { width: 100%; }
.mix td.barcell { width: 20%; }
.mix th, .mix td { padding-right: 8px; }
.mix th:nth-child(2), .mix th:nth-child(3) { letter-spacing: .04em; }
table.src thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.src, .src tbody, .src tr, .src td { display: block; width: 100%; }
.src tr { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.src td { border: 0; padding: 2px 0; white-space: normal; }
.src td.d::before { content: "Latest permit"; margin-right: .7em; }
.src td.lic::before { content: "License"; margin-right: .7em; }
.foot { padding: 44px 0 40px; }
.job-x, .sheet-cap { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4; }
}
@media (forced-colors: active) {
mark.rep { forced-color-adjust: none; background: Mark; color: MarkText; }
.mix .bar, .trend .col, .sched td.on::before, .kc { forced-color-adjust: none; background: CanvasText; }
.trend .cols li.now .col { background: Highlight; }
.sched .now { forced-color-adjust: none; background: Highlight; }
.dots circle, .inset .town circle { fill: CanvasText; stroke: Canvas; }
.dots, .inset .towns { filter: none; }
.btn { border: 2px solid ButtonText; }
.theme label:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print {
.nav, .actions, .foot .fl, .skip, .theme { display: none; }
.field, .hero, .band, .pitch { background: none !important; }
.sheet { box-shadow: none; border: 1px solid #000; }
body { font-size: 11pt; }
}
.slice-band h1 { font-size: clamp(48px, 5vw + 12px, 96px); line-height: .9; letter-spacing: -.012em; }
.slice-band .h1-what { font-size: .42em; }
.band .when { font: var(--w-body) clamp(20px, .6vw + 16px, 24px)/1.35 var(--text); margin-top: 16px; max-width: var(--measure); }
.band .when b { font-weight: var(--w-bold); }
.band .band-actions { margin-top: 26px; }
.band .assure { margin-top: 14px; }
.band .note + .note { margin-top: 6px; }
.band .textlink { color: var(--field-ink); }
.job-p { grid-column: 1 / -1; margin-top: 5px; }
.tel {
display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none;
font-weight: var(--w-bold); font-size: var(--t-ui); font-variant-numeric: tabular-nums;
}
.tel svg { width: 15px; height: 15px; fill: currentColor; flex: none; color: var(--ink-2); }
.tel:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.flag {
display: inline-block; margin-left: 10px; padding: 3px 7px 2px; border-radius: 3px; vertical-align: 3px;
background: var(--tag); color: var(--tag-ink);
font: var(--w-bold) 11.5px/1.2 var(--text); letter-spacing: var(--track-label); text-transform: uppercase;
white-space: nowrap;
}
.sheet-foot p b { color: var(--ink); }
.sample-wrap {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start;
margin-top: 56px;
}
.sample-wrap .sheet { grid-column: 1 / span 8; }
.more-block {
grid-column: 9 / -1; position: sticky; top: 24px;
border-top: 2px solid var(--rule); padding-top: 18px;
}
.more-h { font: var(--w-display-x) clamp(40px, 2vw + 24px, 60px)/.95 var(--display); letter-spacing: -.01em; }
.more-block p { margin-top: 14px; color: var(--ink-2); font-size: var(--t-ui); max-width: var(--measure); }
.more-block .actions { margin-top: 22px; }
.more-block .btn { width: 100%; }
.picker { display: grid; gap: 56px; }
.county-h {
font: var(--w-display) var(--t-block)/1.05 var(--display); letter-spacing: .005em;
padding-bottom: 8px; border-bottom: 2px solid var(--rule);
}
.area { margin-top: 26px; }
.area-h { font: var(--w-bold) var(--t-h3)/1.3 var(--text); }
.area-h a { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.area-h .n { margin-left: 10px; font-weight: var(--w-body); font-size: var(--t-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.area-note { margin-top: 4px; font-size: var(--t-small); color: var(--ink-2); max-width: 46em; }
.area-miss { margin-top: 22px; max-width: 52em; }
.picker-tail { margin-top: 40px; max-width: 46em; }
.trades {
list-style: none; padding: 0; margin-top: 10px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 32px;
}
.trades li { border-bottom: 1px solid var(--hair); }
.trades a {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 10px 0 9px; font-size: var(--t-ui); text-decoration: none; color: var(--ink);
}
.trades a span { text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.trades a:hover span { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.trades .n { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.price-card.plan { max-width: none; display: flex; flex-direction: column; }
.price-card.plan .incl { flex: 1 0 auto; }
.price-card.plan .btn { align-self: flex-start; }
.price-card.plan .then { font-weight: var(--w-semi); color: var(--ink); }
.rail-body .plans .price .amt { font-size: 76px; }
.sec .price-terms { margin-top: 28px; }
table.compare { width: 100%; font-size: var(--t-meta); line-height: 1.45; }
.compare thead th {
text-align: left; padding: 0 16px 10px 0; border-bottom: 2px solid var(--rule);
font: var(--w-bold) var(--t-label)/1.3 var(--text); text-transform: uppercase; letter-spacing: var(--track-label);
color: var(--ink-2);
}
.compare thead th:nth-child(2) { color: var(--ink); }
.compare tbody th { text-align: left; font-weight: var(--w-bold); padding: 14px 16px 14px 0; vertical-align: top; white-space: nowrap; }
.compare td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.compare tbody th { border-bottom: 1px solid var(--hair); }
.compare td:nth-child(2) { color: var(--ink); width: 46%; }
.compare td:nth-child(3) { color: var(--ink-2); font-style: italic; }
@media (max-width: 1080px) {
.sample-wrap .sheet, .more-block { grid-column: 1 / -1; }
.more-block { position: static; }
.more-block .btn { width: auto; }
}
@media (max-width: 860px) {
.nav { gap: 0 22px; }
.plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.job { grid-template-areas: "b b" "w w" "v d" "p p" "x x"; }
.job-p { grid-area: p; }
.flag { margin-left: 8px; }
.sample-wrap { margin-top: 40px; }
.trades { grid-template-columns: minmax(0, 1fr); }
.slice-band h1 { letter-spacing: -.006em; }
.more-block .btn { width: 100%; }
.rail-body .plans .price .amt, .plans .price .amt { font-size: 72px; }
table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
.compare tr { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.compare tbody th, .compare td { border: 0; padding: 2px 0; white-space: normal; }
.compare td:nth-child(2) { width: 100%; }
.compare td:nth-child(2)::before, .compare td:nth-child(3)::before {
display: block; margin: 8px 0 2px; font: var(--w-bold) var(--t-label)/1.3 var(--text);
text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-2); font-style: normal;
}
.compare td:nth-child(2)::before { content: "Us"; }
.compare td:nth-child(3)::before { content: "Ask a national service"; }
}
@media print {
.more-block .actions { display: none; }
}