@font-face { font-family: "Black Ops One"; src: url("/assets/fonts/BlackOpsOne-Regular.cde839d783.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/fonts/CourierPrime-Regular.a05a8668e5.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Courier Prime"; font-weight: 700; src: url("/assets/fonts/CourierPrime-Bold.6317265130.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Liberation Serif"; src: url("/assets/fonts/LiberationSerif-Regular.30597210ba.woff") format("woff"); font-display: swap; }
@font-face { font-family: "CP Fallback"; src: local("Courier New"), local("CourierNewPSMT"); ascent-override: 78.1%; descent-override: 34.2%; line-gap-override: 0%; }
@font-face { font-family: "BO Fallback"; src: local("Arial Black"), local("Arial-BoldMT"); size-adjust: 104%; ascent-override: 88%; descent-override: 32%; line-gap-override: 0%; }
:root {
--bg: #ECE2CA;
--bg-2: #D6C7A3;
--mat: #F6F0E0;
--text: #1F2A22;
--text-soft: #3B473E;
--brass-text: #765317;
--brass-line: #B58A3C;
--red: #B8352B;
--olive: #5B6B3F;
--ink-deep: #141815;
--film-text: #B58A3C;
--rule: rgba(31, 42, 34, .25);
--frame: rgba(31, 42, 34, .22);
--grid-major: rgba(91, 107, 63, .16);
--grid-minor: rgba(91, 107, 63, .07);
--f-display: "Black Ops One", "BO Fallback", Impact, sans-serif;
--f-mono: "Courier Prime", "CP Fallback", "Courier New", monospace;
--f-serif: "Liberation Serif", Georgia, "Times New Roman", serif;
--t-1: .75rem; --t0: 1rem; --t1: 1.333rem; --t2: 1.777rem; --t3: 2.369rem; --t4: 3.157rem; --t5: 4.209rem;
--gut: 16px;
--ruler: 0px;
--maxw: 1240px;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #141815;
--bg-2: #1F2A22;
--mat: #DCD2B8;
--text: #ECE2CA;
--text-soft: #C9C0A8;
--brass-text: #B58A3C;
--red: #E8715A;
--olive: #8A9A6A;
--ink-deep: #0D100E;
--rule: rgba(236, 226, 202, .2);
--frame: rgba(0, 0, 0, .5);
--grid-major: rgba(138, 154, 106, .14);
--grid-minor: rgba(138, 154, 106, .055);
color-scheme: dark;
}
:root:not([data-theme="light"]) body { background-image: none; }
}
:root[data-theme="dark"] {
--bg: #141815;
--bg-2: #1F2A22;
--mat: #DCD2B8;
--text: #ECE2CA;
--text-soft: #C9C0A8;
--brass-text: #B58A3C;
--red: #E8715A;
--olive: #8A9A6A;
--ink-deep: #0D100E;
--rule: rgba(236, 226, 202, .2);
--frame: rgba(0, 0, 0, .5);
--grid-major: rgba(138, 154, 106, .14);
--grid-minor: rgba(138, 154, 106, .055);
color-scheme: dark;
}
:root[data-theme="dark"] body { background-image: none; }
@media (min-width: 768px) { :root { --gut: 24px; } }
@media (min-width: 1024px) { :root { --ruler: 48px; } }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
padding-left: var(--ruler);
font: 400 var(--t0)/1.6 var(--f-mono);
color: var(--text);
background: var(--bg) url("/assets/img/fibre.17360664b6.webp") repeat;
overflow-x: hidden;
font-synthesis: none;
text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: .98; letter-spacing: .01em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--brass-line); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--brass-line); color: #141815; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--text); color: var(--bg); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); }
@media (min-width: 768px) { .g { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.g > * { grid-column: 1 / -1; min-width: 0; }
.lbl { font: 700 var(--t-1)/1.35 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.brass { color: var(--brass-text); }
.draft { display: inline-block; margin: 0 0 20px; padding: 8px 14px; border: 2px solid var(--red); color: var(--red); transform: rotate(-.6deg); }
.draft::first-line { font-weight: 700; }
.lead { font-size: clamp(1.1rem, 3.6vw, var(--t1)); line-height: 1.5; max-width: 34ch; }
.measure { max-width: 62ch; }
.soft { color: var(--text-soft); }
.map {
position: fixed; inset: 0 0 auto 0; height: 170vh; z-index: -1; pointer-events: none;
background:
linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) var(--ruler) 0 / 96px 96px,
linear-gradient(var(--grid-major) 1px, transparent 1px) 0 24px / 96px 96px,
linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) var(--ruler) 0 / 24px 24px,
linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px;
}
.ruler-x, .ruler-y { display: none; }
@media (min-width: 1024px) {
.ruler-x, .ruler-y { display: flex; position: absolute; font: 700 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--brass-text); opacity: .75; }
.ruler-x { top: 6px; left: var(--ruler); }
.ruler-x span { width: 96px; text-align: center; }
.ruler-y { flex-direction: column; left: 0; top: 24px; width: var(--ruler); border-right: 1px solid var(--rule); height: 100%; }
.ruler-y span { height: 96px; display: grid; place-items: center; }
}
.top { position: relative; z-index: 2; padding-top: 12px; }
@media (min-width: 1024px) { .top { padding-top: 28px; } }
.top-in { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; min-height: 64px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; padding-block: 6px; }
.mark svg { width: 34px; height: 34px; flex: none; }
.mark span { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .03em; line-height: 1; }
.nav ul, .langs { display: flex; list-style: none; gap: 4px 22px; }
.nav a, .langs a, .langs span { display: inline-block; padding: 12px 0; font: 700 var(--t-1)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.nav a:hover, .langs a:hover { text-decoration: underline; text-decoration-color: var(--brass-line); }
.nav a[aria-current="page"] { text-decoration: underline 2px var(--brass-line); text-underline-offset: .5em; }
.langs { gap: 0 6px; align-items: center; }
.langs .sep { color: var(--brass-text); padding-inline: 2px; }
.langs [aria-current="true"] { text-decoration: underline 2px var(--brass-line); text-underline-offset: .5em; }
.theme { margin-left: 10px; }
.theme[hidden] { display: none; }
.theme > div { display: flex; align-items: center; gap: 0 6px; }
.theme .lbl { color: var(--brass-text); margin-right: 4px; }
.theme .sep { color: var(--brass-text); }
.theme button { font: 700 var(--t-1)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: inherit; background: none; border: 0; padding: 12px 0; cursor: pointer; }
.theme button:hover { text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: .5em; }
.theme button[aria-pressed="true"] { text-decoration: underline 2px var(--brass-line); text-underline-offset: .5em; }
@media (max-width: 899px) {
.nav { order: 3; flex: 1 0 100%; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.nav ul { flex-wrap: wrap; gap: 0 20px; }
.theme { margin-left: auto; }
.theme .lbl { display: none; }
}
@media (pointer: coarse), (max-width: 899px) {
.nav a, .langs a, .langs span:not(.sep), .theme button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-block: 0; }
.langs a, .langs span:not(.sep), .theme button { min-width: 44px; }
.top-in { column-gap: 12px; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}
.lang-hint { margin-top: 8px; }
.lang-hint[hidden] { display: none; }
.sec-label { display: flex; align-items: center; gap: 14px; color: var(--brass-text); margin-bottom: 28px; }
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.sec-label b { color: var(--text); font-weight: 700; }
.h-sec { font-size: clamp(var(--t2), 5vw, var(--t4)); margin-bottom: 20px; }
.h-page { font-size: clamp(var(--t3), 8vw, var(--t5)); line-height: .92; margin-bottom: 24px; }
.more { display: inline-flex; align-items: baseline; gap: .4em; font-weight: 700; padding-block: 10px; }
.more .arw { display: inline-block; white-space: nowrap; text-decoration: none; }
.photo { margin: 0; position: relative; transform: rotate(var(--tilt, 0deg)); }
.photo .mat { position: relative; display: block; background: var(--mat); padding: 6px; border: 1px solid var(--frame); }
.photo .mat::before {
content: ""; position: absolute; inset: -11px; pointer-events: none; opacity: 0;
--c: var(--brass-line);
background:
linear-gradient(var(--c), var(--c)) left top / 16px 1.5px, linear-gradient(var(--c), var(--c)) left top / 1.5px 16px,
linear-gradient(var(--c), var(--c)) right top / 16px 1.5px, linear-gradient(var(--c), var(--c)) right top / 1.5px 16px,
linear-gradient(var(--c), var(--c)) left bottom / 16px 1.5px, linear-gradient(var(--c), var(--c)) left bottom / 1.5px 16px,
linear-gradient(var(--c), var(--c)) right bottom / 16px 1.5px, linear-gradient(var(--c), var(--c)) right bottom / 1.5px 16px;
background-repeat: no-repeat;
}
.photo a.mat { text-decoration: none; }
.photo img { width: 100%; background: #2a2f28; }
.photo figcaption { margin-top: 10px; font: 700 var(--t-1)/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.photo figcaption .fig { color: var(--brass-text); margin-right: 1.1em; }
.photo.big .mat { padding: 10px; }
.stamp {
display: inline-block; margin: 0; padding: .55em .85em .5em;
font: 400 clamp(1rem, 4.4vw, var(--t1))/1.05 var(--f-display); letter-spacing: .04em; text-transform: uppercase;
color: var(--red); border: 3px solid currentColor; outline: 1px solid currentColor; outline-offset: -8px;
transform: rotate(-3deg);
-webkit-mask: url("/assets/img/stamp-ink.d8f88ebbfa.png") center / 100% 100%; mask: url("/assets/img/stamp-ink.d8f88ebbfa.png") center / 100% 100%;
}
.hero { padding-top: 40px; }
.dispatch { display: flex; flex-wrap: wrap; gap: 0 .9em; color: var(--text); padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 40px; }
.dispatch span:nth-child(n+2)::before { content: "/ "; color: var(--brass-text); }
.dispatch .v { color: var(--red); }
.hero-copy { align-self: center; }
.hero h1 svg { width: 100%; max-width: 560px; height: auto; color: var(--text); }
.hero .lead { margin-top: 28px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 34px; }
.price { margin-top: 26px; color: var(--brass-text); }
.hero-photo { --tilt: 1.2deg; margin-top: 56px; }
.anno { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; overflow: visible; }
.anno path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
.hero-copy { grid-column: 1 / 7; }
.hero-photo { grid-column: 7 / -1; margin-top: 0; margin-right: calc(-1 * max(var(--gut), (100vw - var(--ruler) - var(--maxw)) / 2 - 24px)); }
}
.s-oob { margin-top: 112px; }
.ledger { list-style: none; border-bottom: 1px solid var(--rule); }
.ledger > li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px; padding: 22px 0 24px 0; border-top: 1px solid var(--rule); position: relative; }
.ledger > li:hover { box-shadow: inset 3px 0 0 var(--brass-line); }
.ledger .emb { width: 56px; height: 57px; grid-row: span 2; }
.ledger h3 { font-size: var(--t2); align-self: end; }
.ledger .line { margin: 0; grid-column: 2; max-width: 46ch; }
.units { list-style: none; display: flex; gap: 14px; grid-column: 1 / -1; margin-top: 14px; }
.units li { flex: 1 1 0; max-width: 150px; }
.units .mat { background: var(--mat); padding: 3px; border: 1px solid var(--frame); }
.units span { display: block; margin-top: 6px; }
.ledger .wiki { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 1024px) {
.ledger > li { grid-template-columns: 72px minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2fr); align-items: center; gap: 0 24px; padding: 22px 0; }
.ledger .emb { width: 64px; height: 65px; grid-row: auto; }
.ledger .who { grid-column: 2; }
.ledger .line { grid-column: auto; margin-top: 8px; font-size: .94rem; }
.units { grid-column: 3; margin: 0; }
.ledger .wiki { grid-column: 4; justify-self: end; text-align: right; }
}
.oob-head { margin-bottom: 36px; }
@media (min-width: 1024px) { .oob-head .h-sec { grid-column: 1 / 8; } .oob-head p { grid-column: 8 / -1; align-self: end; } }
.s-orders { margin-top: 168px; }
.orders { list-style: none; display: grid; gap: 48px var(--gut); }
.s-orders .h-sec { margin-bottom: 56px; }
.ledger-foot { margin-top: 18px; }
.orders li { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: start; }
.orders .n { font: 700 var(--t4)/.8 var(--f-mono); color: var(--brass-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.orders h3 { font-size: var(--t1); margin: 4px 0 10px; }
.orders p { margin: 0; max-width: 40ch; }
@media (min-width: 768px) {
.orders { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gut) * 3); }
.orders li:nth-child(even) { margin-top: 72px; }
}
.orders-photo { margin: 72px 0; --tilt: -.6deg; }
@media (min-width: 1024px) { .orders-photo { width: 84%; margin-left: 8%; } }
.s-sheet { margin-top: 112px; }
.sheet-head { margin-bottom: 28px; }
@media (min-width: 1024px) { .sheet-head .h-sec { grid-column: 1 / 7; } .sheet-head .side { grid-column: 8 / -1; align-self: end; } }
.film { background: var(--ink-deep); color: #ECE2CA; position: relative; padding: 30px 0 26px; margin-left: calc(-1 * var(--ruler)); }
.film::before, .film::after {
content: ""; position: absolute; left: 0; right: 0; height: 9px;
background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(236, 226, 202, .82) 11px 23px, transparent 23px 34px);
}
.film::before { top: 9px; }
.film::after { bottom: 7px; }
.film .edge { position: absolute; top: 19px; left: calc(var(--ruler) + var(--gut)); font: 700 9px/1 var(--f-mono); letter-spacing: .3em; color: var(--film-text); opacity: .8; }
.strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--brass-line) transparent; scrollbar-width: thin; padding: 16px 0 14px; }
.strip:focus-visible { outline-offset: -4px; }
.strip ul { list-style: none; display: flex; gap: 14px; padding-inline: calc(var(--ruler) + var(--gut)); width: max-content; }
.strip li { scroll-snap-align: start; scroll-margin-left: calc(var(--ruler) + var(--gut)); }
.strip a { display: block; text-decoration: none; }
.strip img { height: clamp(150px, 26vw, 250px); width: auto; filter: saturate(.92); }
.strip a:hover img, .strip a:focus-visible img { filter: none; }
.strip .fno { display: block; font: 700 10px/1 var(--f-mono); letter-spacing: .2em; color: var(--film-text); margin-bottom: 7px; }
.strip .fno::after { content: " \203A"; }
.s-latest { margin-top: 144px; }
.slip { background: var(--bg-2); color: var(--text); padding: 22px 16px 20px; position: relative; max-width: 760px; }
@media (min-width: 768px) { .slip { padding: 34px 40px 32px; } }
.slip::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(circle at 6px 6px, var(--bg-2) 4px, transparent 4.5px) 0 0 / 12px 6px repeat-x; }
.slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px dashed var(--rule); padding-bottom: 14px; margin-bottom: 18px; }
.slip-head h3 { font-size: var(--t2); }
.slip ul { list-style: none; }
.slip li { padding-left: 1.4em; text-indent: -1.4em; margin-bottom: .55em; }
.slip li::before { content: "- "; white-space: pre; }
.slip .end { margin: 18px 0 0; }
@media (min-width: 1024px) { .latest-g .slip-col { grid-column: 3 / 11; } .latest-g .head-col { grid-column: 1 / -1; } }
.s-community { margin-top: 112px; }
.links3 { list-style: none; display: grid; gap: 28px; margin-top: 30px; }
@media (min-width: 768px) { .links3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.links3 a { font-size: var(--t1); font-weight: 700; word-break: break-word; }
.links3 .lbl { display: block; color: var(--brass-text); margin-bottom: 6px; }
.links3 p { margin-top: 8px; color: var(--text-soft); font-size: .94rem; }
.foot { margin-top: 168px; border-top: 1px solid var(--rule); padding: 40px 0 56px; font-size: .89rem; }
.foot .studio svg { width: 270px; height: auto; color: var(--text); }
.foot ul { list-style: none; }
.foot li a { display: inline-block; padding-block: 6px; }
.foot .col { margin-top: 28px; }
.foot p { margin: 0 0 .5em; }
@media (min-width: 1024px) {
.foot .c1 { grid-column: 1 / 6; }
.foot .c2 { grid-column: 7 / 9; }
.foot .c3 { grid-column: 9 / -1; }
.foot .col { margin-top: 0; }
}
.page-head { padding-top: 56px; margin-bottom: 72px; }
@media (min-width: 1024px) { .page-head .h-page { grid-column: 1 / 10; } .page-head .lead { grid-column: 1 / 8; } }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin: 0 0 120px; }
.facts div { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--brass-text); }
.facts dd { margin: 4px 0 0; font: 400 var(--t2)/1 var(--f-display); }
.facts dd.small { font: 700 var(--t0)/1.3 var(--f-mono); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); } }
.order { margin-bottom: 140px; align-items: start; }
.order:nth-of-type(3n+2) { margin-bottom: 96px; }
.order .n { font: 700 var(--t5)/.8 var(--f-mono); color: var(--brass-text); font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.order h2 { font-size: clamp(var(--t2), 4.4vw, var(--t4)); margin-bottom: 22px; }
.order .txt p { max-width: 44ch; }
.order .photo { margin-top: 36px; }
@media (min-width: 1024px) {
.order .txt { grid-column: 1 / 6; }
.order .photo { grid-column: 6 / -1; margin-top: 8px; --tilt: .8deg; }
.order.flip .txt { grid-column: 8 / -1; grid-row: 1; }
.order.flip .photo { grid-column: 1 / 8; grid-row: 1; --tilt: -.7deg; }
}
.dn .stack { position: relative; }
.dn .stack picture + picture { position: absolute; inset: 6px; }
.dn .stack picture + picture img { height: 100%; object-fit: cover; }
.dn .stack picture:last-of-type { opacity: var(--night, 1); }
.dn-ctl { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.dn-ctl[hidden] { display: none; }
.dn-ctl input { flex: 1; accent-color: var(--brass-line); min-height: 44px; }
.nation { margin-bottom: 128px; }
.nation:nth-of-type(2n) { margin-bottom: 96px; }
.nation-head { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--rule); padding-bottom: 20px; margin-bottom: 28px; }
.nation-head img { width: 80px; height: 81px; flex: none; }
.nation-head h2 { font-size: clamp(var(--t3), 6vw, var(--t4)); }
.nation-head .lbl { color: var(--brass-text); margin-top: 8px; }
.roster { display: grid; gap: 0 var(--gut); }
.roster div { padding: 12px 0; border-bottom: 1px dashed var(--rule); }
.roster dt { color: var(--brass-text); margin-bottom: 4px; }
.roster dd { margin: 0; }
.renders { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.renders .mat { background: var(--mat); padding: 4px; border: 1px solid var(--frame); }
.renders span { display: block; margin-top: 6px; }
@media (min-width: 1024px) {
.nation .line-col { grid-column: 1 / 6; }
.nation .roster { grid-column: 1 / 6; }
.nation .renders { grid-column: 7 / -1; grid-row: 1 / span 2; margin-top: 0; }
.nation:nth-of-type(2n) .line-col, .nation:nth-of-type(2n) .roster { grid-column: 8 / -1; }
.nation:nth-of-type(2n) .renders { grid-column: 1 / 7; }
}
.contact-sheet { list-style: none; display: grid; gap: 56px var(--gut); }
.contact-sheet li:nth-child(odd) .photo { --tilt: -.5deg; }
.contact-sheet li:nth-child(even) .photo { --tilt: .6deg; }
@media (min-width: 768px) {
.contact-sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.contact-sheet li { grid-column: span 6; }
.contact-sheet li:nth-child(4n+1) { grid-column: 1 / span 7; }
.contact-sheet li:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: 64px; }
.contact-sheet li:nth-child(4n+3) { grid-column: 2 / span 5; }
.contact-sheet li:nth-child(4n) { grid-column: 7 / span 6; margin-top: -24px; }
}
.maps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--gut); }
@media (min-width: 768px) { .maps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.maps .mat { background: var(--mat); padding: 4px; border: 1px solid var(--frame); }
.maps img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.maps h3 { font-size: var(--t0); margin: 12px 0 2px; letter-spacing: .03em; }
.maps .lbl { color: var(--brass-text); }
.maps p { font-size: .83rem; line-height: 1.5; margin-top: 6px; color: var(--text-soft); }
.s-maps, .s-brand { margin-top: 140px; }
.brand-row { display: grid; gap: var(--gut); align-items: stretch; }
.brand-row > div { border: 1px solid var(--rule); padding: 36px 28px; display: grid; place-items: center; }
.brand-row .ink { background: #1F2A22; border-color: #1F2A22; }
.brand-row svg { width: 100%; max-width: 380px; height: auto; }
.brand-row .icon svg { width: 128px; }
@media (min-width: 768px) { .brand-row { grid-template-columns: 5fr 5fr 3fr; } }
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; width: fit-content; color: #ECE2CA; }
dialog.lightbox::backdrop { background: rgba(13, 16, 14, .9); }
.lightbox .mat { background: #F6F0E0; padding: 8px; }
.lightbox img { width: auto; max-width: 100%; max-height: 82vh; }
.lightbox .bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10px; }
.lightbox button { font: 700 var(--t-1)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: none; color: inherit; border: 1px solid currentColor; padding: 12px 16px; min-height: 44px; cursor: pointer; }
.news-g { align-items: start; }
.news-index { display: none; }
@media (min-width: 1024px) {
.news-index { display: block; grid-column: 1 / 3; position: sticky; top: 24px; }
.news-index ol { list-style: none; border-top: 1px solid var(--rule); }
.news-index a { display: block; padding: 5px 0; text-decoration: none; font: 700 .7rem/1.3 var(--f-mono); letter-spacing: .06em; }
.news-index a:hover { text-decoration: underline; }
.news-list { grid-column: 4 / -1; }
}
.dispatch-entry { margin-bottom: 64px; scroll-margin-top: 24px; }
.dispatch-entry:nth-child(3n+2) { margin-bottom: 88px; }
.dispatch-entry header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 16px; }
.dispatch-entry h2 { font-size: var(--t2); }
.dispatch-entry .lbl { color: var(--brass-text); }
.dispatch-entry ul { list-style: none; max-width: 66ch; }
.dispatch-entry li { padding-left: 1.4em; text-indent: -1.4em; margin-bottom: .6em; }
.dispatch-entry li::before { content: "- "; white-space: pre; color: var(--brass-text); }
.dispatch-entry:first-child { background: var(--bg-2); padding: 28px 24px 18px; }
.dispatch-entry:first-child .lbl { color: var(--text); }
.dispatch-entry:first-child li::before { color: var(--text); }
.posts { list-style: none; border-top: 1px solid var(--rule); }
.posts li { display: grid; gap: 6px var(--gut); padding: 30px 0 32px; border-bottom: 1px solid var(--rule); }
.posts h2 { font-size: var(--t3); }
.posts a.big { font-size: var(--t1); font-weight: 700; word-break: break-word; }
.posts p { margin: 0; max-width: 48ch; }
@media (min-width: 1024px) {
.posts h2 { grid-column: 1 / 4; }
.posts .addr { grid-column: 4 / 8; }
.posts p { grid-column: 8 / -1; }
}
.note { margin-top: 48px; max-width: 60ch; }
.press-dl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 26px 0; border-top: 3px solid var(--text); border-bottom: 1px solid var(--rule); margin-bottom: 96px; }
.press-dl a { font: 400 var(--t2)/1.1 var(--f-display); }
.kv { border-top: 1px solid var(--rule); }
.kv div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gut); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.kv dt { color: var(--brass-text); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.press-g > section { margin-bottom: 80px; }
.press-g h2 { font-size: var(--t2); margin-bottom: 20px; }
.press-g .dash { list-style: none; }
.press-g .dash li::before { content: "- "; }
@media (min-width: 1024px) {
.press-g .p-facts { grid-column: 1 / 7; }
.press-g .p-short { grid-column: 8 / -1; }
.press-g .p-long { grid-column: 1 / 9; }
.press-g .p-files { grid-column: 1 / 6; }
.press-g .p-rules { grid-column: 7 / -1; }
}
.legal-g { align-items: start; }
.toc { margin-bottom: 48px; }
.toc ol { list-style: none; border-top: 1px solid var(--rule); }
.toc a { display: block; padding: 7px 0; text-decoration: none; font: 700 .72rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.toc a:hover { text-decoration: underline; }
.toc .sub a { padding-left: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (min-width: 1024px) {
.toc { grid-column: 1 / 4; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.prose { grid-column: 5 / -1; }
}
.prose { font: 400 1.0556rem/1.65 var(--f-serif); max-width: 68ch; }
.prose h2 { font-size: var(--t2); margin: 64px 0 18px; scroll-margin-top: 24px; }
.prose h2.part { font-size: var(--t3); margin-top: 96px; padding-top: 28px; border-top: 3px solid var(--text); }
.prose h3 { font: 700 var(--t0)/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin: 44px 0 12px; scroll-margin-top: 24px; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1em; }
.prose li { margin-bottom: .45em; }
.prose a:visited { text-decoration-color: var(--olive); }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }
.prose .eff { font: 700 var(--t-1)/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text); }
.ways { list-style: none; display: grid; gap: 28px var(--gut); margin-bottom: 96px; counter-reset: w; }
.ways li { border-top: 3px solid var(--text); padding-top: 18px; counter-increment: w; }
.ways li::before { content: "0" counter(w); display: block; font: 700 var(--t4)/.8 var(--f-mono); color: var(--brass-text); margin-bottom: 14px; }
.ways h2 { font-size: var(--t2); margin-bottom: 12px; }
.ways code { font: 700 var(--t0)/1.5 var(--f-mono); }
@media (min-width: 768px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.del-g > section { margin-bottom: 64px; }
.del-g h2 { font-size: var(--t2); margin-bottom: 18px; }
.del-g ul { list-style: none; }
.del-g li { padding: 10px 0; border-bottom: 1px dashed var(--rule); }
@media (min-width: 1024px) { .del-g .a { grid-column: 1 / 6; } .del-g .b { grid-column: 7 / -1; } .del-g .c { grid-column: 1 / 8; } }
.lost { padding-top: 48px; }
.lost-map { position: relative; margin: 40px 0 28px; max-width: 560px; aspect-ratio: 8 / 5; border: 1px solid var(--rule);
background: linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / 12.5% 20%, linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 12.5% 20%; }
.lost-map .x { position: absolute; left: calc(100% + 18px); white-space: nowrap; top: 38%; font: 400 var(--t3)/1 var(--f-display); color: var(--red); }
.lost-map .stamp { position: absolute; left: 12%; top: 34%; }
.lost .lead { max-width: 40ch; }
@media print {
.map, .top, .foot, .tread, .film, .toc, .news-index, .skip, .cta, dialog { display: none !important; }
body { background: #fff; color: #000; padding: 0; }
.prose { font-size: 11pt; max-width: none; }
.prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
.photo { transform: none; }
}
@media (max-width: 767px) { .lost-map .x { left: auto; right: 10px; top: auto; bottom: 10px; } }
@media (prefers-reduced-motion: no-preference) {
.dispatch { animation: type 820ms steps(46, end) both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.anno path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pen 900ms cubic-bezier(.65, 0, .35, 1) 700ms forwards; }
.anno path.arrow { animation-duration: 300ms; animation-delay: 1600ms; }
.anno path.head { animation-duration: 160ms; animation-delay: 1880ms; }
@keyframes pen { to { stroke-dashoffset: 0; } }
.hero-photo { animation: settle 520ms cubic-bezier(.22, 1, .36, 1) 120ms both; }
@keyframes settle { from { opacity: 0; transform: translateY(10px) rotate(2.4deg); } to { opacity: 1; transform: rotate(var(--tilt)); } }
.hero .stamp, .lost .stamp { animation: stamp 260ms cubic-bezier(.2, .9, .3, 1) 950ms both; }
@keyframes stamp {
0% { opacity: 0; transform: rotate(-3deg) scale(1.35); }
70% { opacity: 1; transform: rotate(-3deg) scale(.97); }
100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}
.hero-copy { animation: thud 90ms linear 1130ms; }
@keyframes thud { 50% { transform: translate(1px, 2px); } }
.js [data-reveal] { clip-path: inset(-.2em 100% -.2em 0); transition: clip-path 550ms cubic-bezier(.22, 1, .36, 1); }
.js [data-reveal].is-in { clip-path: inset(-.2em 0 -.2em 0); }
.js .sec-label { opacity: 0; transition: opacity 300ms ease-out; }
.js .sec-label.is-in { opacity: 1; }
.photo { transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
.photo .mat::before { transition: opacity 240ms ease-out, inset 240ms cubic-bezier(.2, .8, .2, 1); }
.photo:has(a.mat):hover, .photo:has(a.mat:focus-visible) { transform: rotate(0deg) translateY(-4px); transition-duration: 180ms; }
.photo a.mat:hover::before, .photo a.mat:focus-visible::before { opacity: 1; inset: -9px; transition-duration: 180ms; }
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
.map { view-transition-name: map; }
::view-transition-old(root) { animation: 200ms ease-out both turn-out; }
::view-transition-new(root) { animation: 200ms ease-out both turn-in; }
@keyframes turn-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes turn-in { from { opacity: 0; } }
.more .arw { transition: transform 180ms cubic-bezier(.2, .8, .2, 1); }
.more:hover .arw { transform: translateX(4px); }
.ledger > li { transition: box-shadow 180ms ease-out, padding 180ms ease-out; }
@media (min-width: 1024px) { .ledger > li:hover { padding-left: 14px; } }
.strip img { transition: filter 180ms ease-out; }
.dn .stack picture:last-of-type { transition: opacity 120ms linear; }
}
.tread { display: none; }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.long .tread {
display: block; position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 40; transform-origin: 0 50%;
background: repeating-linear-gradient(90deg, var(--text) 0 7px, var(--brass-line) 7px 9px, var(--text) 9px 12px, transparent 12px 14px);
animation: tread linear both; animation-timeline: scroll(root);
}
@keyframes tread { from { transform: scaleX(0); background-position: 0 0; } to { transform: scaleX(1); background-position: 140px 0; } }
.home .map { animation: drift linear both; animation-timeline: scroll(root); }
@keyframes drift { to { transform: translateY(-60vh); } }
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
.hero-photo, .stamp { animation: fade 150ms ease-out both; }
@keyframes fade { from { opacity: 0; } }
}