/*
 * Erin Millar, Option C "Colour Block".
 *
 * Desktop (768px+) scales from the 1280px comp: every layout number is
 * written as N * var(--u), where --u is 1px at 1280 wide and shrinks with the
 * page. Body text stays in fixed px so it never gets too small.
 * Phone (<768px) follows the 390px comp the same way with --m.
 *
 * Art pieces (photos, colour blocks, rules) take their coordinates from inline
 * custom properties set by erin_pc(): --x --y --w --h (desktop) and
 * --mx --my --mw --mh (phone).
 */

:root {
	--ink: #111111;
	--white: #ffffff;
	--grey: #666666;
	--grey2: #444444;
	--surround: #ececec;
	--yellow: #f4dc2a;
	--blue: #7fb6e0;
	--green: #9fd18a;
	--pink: #ef9fc4;

	--display: 'Oswald', 'Arial Narrow', sans-serif;
	--text: 'Inter', system-ui, -apple-system, sans-serif;

	--u: calc(100cqw / 1280);
	--m: calc(100cqw / 390);
	/* Phone type scales with width, capped so tablets don't get giant headlines. */
	--mf: min(var(--m), 1.25px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--surround);
	color: var(--ink);
	font-family: var(--text);
	font-size: 13px;
	line-height: normal; /* matches the comps; 1.45 is set where they set it */
	-webkit-font-smoothing: antialiased;
}

.site {
	container-type: inline-size;
	max-width: 1280px;
	margin: 0 auto;
	background: var(--white);
	overflow: clip;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: inherit; }
b { font-weight: 600; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (hover: hover) {
	a { transition: opacity .15s; }
	a:hover { opacity: .7; }
}

.muted { color: var(--grey); }
.strong { font-weight: 600; }

.sr-only, .skip:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip:focus {
	position: absolute; z-index: 100; left: 8px; top: 8px;
	padding: 10px 14px; background: var(--yellow);
	font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
}

.arw { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.12em; }

/* ---------- Type ---------- */

.hd { font-family: var(--display); font-weight: 600; line-height: .86; text-transform: uppercase; }
.sh { font-family: var(--display); font-weight: 300; line-height: 1.05; text-transform: uppercase; }
.lede { font-family: var(--display); font-weight: 400; line-height: 1.05; text-transform: uppercase; }
.lede .gt { font-weight: 300; }
.body { font-size: 12px; line-height: 1.6; }

.kicker {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--display); font-weight: 500; font-size: 15px;
	letter-spacing: .06em; text-transform: uppercase;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); flex: none; }
.kicker .vr { width: 1px; height: 20px; background: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex; align-items: center; gap: .3em;
	padding: 14px 18px;
	border: 0; border-radius: 0;
	font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.2;
	letter-spacing: .06em; text-transform: uppercase;
	white-space: nowrap; cursor: pointer;
}
.btn-y { background: var(--yellow); color: var(--ink); }
.btn-b { background: var(--blue); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--yellow); }
.btn-line { border: 1px solid var(--ink); padding: 13px 17px; }
.btn-white { background: var(--white); padding: 12px 16px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Sections and art ---------- */

/* flow-root stops a first child's top margin collapsing out through the section. */
.sec, .work-top, .sub-stage, .txt { display: flow-root; }

.sec {
	position: relative;
	isolation: isolate;
	margin-top: calc(40 * var(--u));
	border-top: 1px solid var(--ink);
}

.meta {
	position: absolute; z-index: 1;
	top: calc(18 * var(--u)); left: calc(56 * var(--u)); right: calc(56 * var(--u));
	display: flex; justify-content: space-between;
	font-size: 11px; line-height: 1.45;
}

.txt { position: relative; z-index: 1; }

.art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.pc {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
}
img.pc, .card-img img {
	object-fit: cover;
	object-position: var(--op, 50% 50%);
	filter: grayscale(1) contrast(var(--c, 1.1));
}

.blk { mix-blend-mode: multiply; }
.blk.y { background: var(--yellow); }
.blk.b { background: var(--blue); }
.blk.g { background: var(--green); }
.blk.p { background: var(--pink); }
.rule-v { background: var(--ink); }

.vtext {
	width: auto; height: auto;
	transform: rotate(90deg); transform-origin: 0 0;
	font-size: 11px; letter-spacing: .06em; white-space: nowrap;
}

.tab { position: absolute; z-index: 2; background: var(--ink); width: calc(40 * var(--u)); height: calc(150 * var(--u)); top: calc(250 * var(--u)); }
.tab-l { left: 0; }
.tab-r { right: 0; }

.tab-sub {
	position: absolute; z-index: 3; right: 0; top: calc(250 * var(--u));
	width: calc(44 * var(--u)); min-width: 32px; height: calc(170 * var(--u)); min-height: 130px;
	display: flex; align-items: center; justify-content: center;
	background: var(--yellow);
}
.tab-sub > span {
	display: inline-flex; align-items: center; gap: .3em;
	transform: rotate(-90deg); white-space: nowrap;
	font-family: var(--display); font-weight: 500; font-size: 16px;
	letter-spacing: .06em; text-transform: uppercase;
}
@media (hover: hover) { .tab-sub:hover { opacity: 1; background: var(--ink); color: var(--yellow); } }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid var(--ink); padding-top: 12px; }
.stats > span { display: flex; flex-direction: column; gap: 2px; }
.stats b { font-family: var(--display); font-weight: 600; font-size: calc(34 * var(--u)); line-height: 1; }
.stats b + span { font-size: 11px; color: var(--grey); }

.colophon { display: flex; justify-content: space-between; gap: 4px 20px; font-size: 11px; }

/* Responsive helpers */
.m-only { display: none !important; }

/* ---------- Header ---------- */

.site-head {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 20px;
	align-items: center;
	padding: calc(26 * var(--u)) calc(56 * var(--u)) 0;
	font-size: 11px; line-height: 1.45;
}
.hm-1 { grid-column: 1 / 3; align-self: start; }
.hm-2 { grid-column: 3 / 5; align-self: start; }
.hm-3 { grid-column: 5 / 7; align-self: start; }
.site-nav {
	grid-column: 7 / 13;
	display: flex; justify-content: flex-end; align-items: center; gap: 26px;
	font-family: var(--display); font-weight: 500; font-size: 15px;
	letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.nav-brief { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--ink); color: var(--white); }

/* ---------- Home: hero ---------- */

.sec-hero { height: calc(760 * var(--u)); margin-top: calc(20 * var(--u)); border-top: 0; }
.sec-hero .txt { margin-left: calc(80 * var(--u)); }
.hero-hd { margin: calc(206 * var(--u)) 0 0 calc(-4 * var(--u)); font-size: calc(150 * var(--u)); letter-spacing: -.01em; }
.hero-sh { margin-top: calc(14 * var(--u)); font-size: calc(30 * var(--u)); }
.hero-lede { margin-top: calc(50 * var(--u)); width: calc(390 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.1; }

/* ---------- Home: Brief teaser ---------- */

.sec-brief { min-height: calc(800 * var(--u)); }
.sec-brief .txt { margin-left: calc(150 * var(--u)); width: calc(400 * var(--u)); }
.brief-hd { margin-top: calc(110 * var(--u)); width: calc(420 * var(--u)); font-size: calc(104 * var(--u)); line-height: .9; }
.brief-lede { margin-top: calc(39 * var(--u)); font-size: calc(28 * var(--u)); }
.teasers {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px;
	margin-top: calc(42 * var(--u));
	font-size: 12px; line-height: 1.55;
}
.teaser { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ink); }
.t-lbl { font-weight: 600; }
.t-time { color: var(--grey); }
.sec-brief .btns { margin-top: calc(14 * var(--u)); padding-bottom: 40px; }

/* ---------- Subscribe (shared) ---------- */

.sec-sub { padding-bottom: calc(70 * var(--u)); }
.sub-stage {
	position: relative;
	margin-top: calc(18 * var(--u) + 32px + 46 * var(--u));
	min-height: calc(680 * var(--u));
	padding-top: calc(50 * var(--u));
}
/* No z-index here on purpose: the yellow must multiply with the photo behind it. */
.sub-panel {
	position: relative;
	width: calc(820 * var(--u));
	min-height: calc(580 * var(--u));
	margin-left: calc(56 * var(--u));
	padding: calc(46 * var(--u)) 0 calc(46 * var(--u)) calc(54 * var(--u));
}
.sub-panel::before { content: ''; position: absolute; inset: 0; background: var(--yellow); mix-blend-mode: multiply; }
.sub-inner { position: relative; z-index: 1; width: calc(700 * var(--u)); }
.sub-hd { margin-top: calc(18 * var(--u)); font-size: calc(112 * var(--u)); }
.sub-sh { margin-top: calc(6 * var(--u)); font-size: calc(52 * var(--u)); line-height: 1; }
.sub-body { margin-top: calc(18 * var(--u)); max-width: max(calc(440 * var(--u)), 300px); font-size: 13px; }
.sub-li { position: absolute; z-index: 2; left: calc(840 * var(--u)); top: calc(24 * var(--u)); }

.sub-form {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "email go" "chips chips" "err err" "legal legal";
	gap: 20px 16px;
	margin-top: 28px;
}
.f-email { grid-area: email; display: flex; flex-direction: column; gap: 4px; }
.f-go { grid-area: go; align-self: end; height: 56px; padding: 0 22px; font-size: 18px; }
.f-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 16px 40px; }
.f-err { grid-area: err; font-size: 12px; font-weight: 600; }
.f-legal { grid-area: legal; max-width: 560px; font-size: 11px; line-height: 1.55; }
.f-legal a { text-decoration: underline; }
.f-lbl { font-size: 11px; font-weight: 600; }
.sub-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sub-form legend { padding: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.em-input {
	width: 100%; min-width: 0;
	border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
	background: transparent;
	padding: 6px 0 10px;
	font-family: var(--display); font-weight: 300; font-size: max(calc(40 * var(--u)), 28px); color: var(--ink);
	outline: none;
}
.em-input::placeholder { color: rgba(17, 17, 17, .45); }
.em-input:focus-visible { border-bottom-width: 3px; padding-bottom: 9px; }

.chip {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border: 1px solid var(--ink);
	font-family: var(--display); font-weight: 500; font-size: 15px;
	letter-spacing: .04em; text-transform: uppercase;
	cursor: pointer; user-select: none;
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip .cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.chip:has(input:checked) { background: var(--ink); color: var(--yellow); }
.chip:has(input:checked) .cdot { background: var(--yellow); }
.chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sub-done { margin-top: 28px; }
.sub-done:focus { outline: none; }
.sub-done-hd { font-size: max(calc(52 * var(--u)), 32px); line-height: 1; }
.sub-done .body { margin-top: 12px; font-size: 13px; max-width: 440px; }

/* ---------- Home: About ---------- */

.sec-about { min-height: calc(760 * var(--u)); }
.sec-about .txt { margin-left: calc(134 * var(--u)); width: calc(380 * var(--u)); padding-bottom: 40px; }
.about-hd { margin: calc(110 * var(--u)) 0 0 calc(-4 * var(--u)); font-size: calc(96 * var(--u)); line-height: .9; white-space: nowrap; }
.about-sh { margin-top: calc(27 * var(--u)); font-size: calc(30 * var(--u)); }
.about-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: calc(78 * var(--u)); }
.about-stats { margin-top: calc(70 * var(--u)); }

/* ---------- Home: Work ---------- */

.sec-work { padding: 0 calc(56 * var(--u)); }
.work-top { position: relative; height: calc(560 * var(--u)); margin-top: calc(18 * var(--u) + 32px); }
.work-top .txt { margin-left: calc(4 * var(--u)); width: calc(400 * var(--u)); }
.work-hd { margin: calc(50 * var(--u)) 0 0 calc(-4 * var(--u)); font-size: calc(128 * var(--u)); }
.work-sh { margin-top: calc(30 * var(--u)); font-size: calc(34 * var(--u)); line-height: 1; }
.work-body { margin-top: calc(24 * var(--u)); width: calc(330 * var(--u)); min-width: 240px; }

.work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(56 * var(--u)); margin-top: calc(40 * var(--u)); }
.wk {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px; gap: 0 16px; align-items: baseline;
	padding: 14px 0; border-top: 1px solid var(--ink);
}
.wk-n { font-family: var(--display); font-weight: 300; font-size: 22px; }
.wk-main { display: flex; flex-direction: column; gap: 4px; }
.wk-t { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1; text-transform: uppercase; }
.wk-d { font-size: 12px; line-height: 1.5; color: var(--grey2); }
.wk-meta { display: flex; flex-direction: column; gap: 3px; font-size: 11px; text-align: right; }
.wk-s { font-weight: 600; }
.wk-p { color: var(--grey); }

/* ---------- Home: Loki ---------- */

.sec-loki { min-height: calc(700 * var(--u)); margin-top: calc(80 * var(--u)); }
.sec-loki .txt { margin-left: calc(704 * var(--u)); width: calc(440 * var(--u)); padding-bottom: 40px; }
.loki-hd { margin: calc(130 * var(--u)) 0 0 calc(-4 * var(--u)); font-size: calc(110 * var(--u)); }
.loki-sh { margin-top: calc(21 * var(--u)); font-size: calc(32 * var(--u)); }
.loki-body { margin-top: calc(63 * var(--u)); width: calc(360 * var(--u)); min-width: 260px; }

/* ---------- Home: Contact ---------- */

.sec-contact { min-height: calc(620 * var(--u)); padding-bottom: 70px; }
.sec-contact .txt { margin-left: calc(96 * var(--u)); }
.contact-hd { margin-top: calc(150 * var(--u)); width: calc(900 * var(--u)); font-size: calc(118 * var(--u)); }
.contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: calc(77 * var(--u)); }
.contact-sh { font-size: calc(26 * var(--u)); line-height: 1.2; }
.contact-mail { font-family: var(--display); font-weight: 500; font-size: calc(44 * var(--u)); line-height: 1; }
.contact-note { font-size: 12px; color: var(--grey2); }
.contact-colophon { position: absolute; left: calc(56 * var(--u)); right: calc(56 * var(--u)); bottom: calc(22 * var(--u)); }

/* ---------- Brief page ---------- */

.brief-nav {
	display: flex; justify-content: space-between; align-items: center; gap: 10px 26px; flex-wrap: wrap;
	margin: calc(18 * var(--u)) calc(56 * var(--u)) 0;
	padding: 14px 0;
	border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
	font-family: var(--display); font-weight: 500; font-size: 15px;
	letter-spacing: .04em; text-transform: uppercase;
}
.bn-name { display: flex; align-items: center; gap: 10px; }
.bn-links { display: flex; align-items: center; gap: 26px; }
.bn-sub { padding: 2px 10px; background: var(--yellow); }

.sec-bhero { height: calc(720 * var(--u)); margin-top: calc(20 * var(--u)); border-top: 0; }
.sec-bhero .tab-l { top: calc(200 * var(--u)); }
.sec-bhero .txt { margin-left: calc(80 * var(--u)); width: calc(420 * var(--u)); min-width: 300px; }
.sec-bhero .txt:first-of-type { margin-left: calc(76 * var(--u)); width: calc(580 * var(--u)); }
.sec-bhero .kicker { padding-top: calc(90 * var(--u)); }
.bhero-hd { margin-top: calc(22 * var(--u)); font-size: calc(104 * var(--u)); line-height: .88; letter-spacing: -.01em; }
.bhero-sh { margin-top: calc(18 * var(--u)); font-size: calc(34 * var(--u)); line-height: 1.02; }
.bhero-body { margin-top: calc(16 * var(--u)); font-size: 14px; }
.sec-bhero .btns { margin-top: calc(26 * var(--u)); }

.sec-latest { padding: 0 calc(56 * var(--u)); }
.cards {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px calc(40 * var(--u));
	margin-top: calc(18 * var(--u) + 32px + 40 * var(--u));
}
.card {
	--shadow: var(--yellow);
	display: flex; flex-direction: column;
	border: 1px solid var(--ink); background: var(--white);
	box-shadow: 8px 8px 0 var(--shadow);
	transition: transform .2s, box-shadow .2s;
}
.card-g { --shadow: var(--green); }
@media (hover: hover) {
	.card:hover { opacity: 1; transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--shadow); }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card-img { position: relative; display: block; height: calc(300 * var(--u)); min-height: 220px; overflow: hidden; border-bottom: 1px solid var(--ink); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; --c: 1.12; }
.card-img .blk { position: absolute; }
.card-tag {
	position: absolute; left: 20px; top: 20px;
	padding: 6px 10px; background: var(--ink); color: var(--shadow);
	font-family: var(--display); font-weight: 500; font-size: 14px;
	letter-spacing: .06em; text-transform: uppercase;
}
.card-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 28px; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.card-title { font-family: var(--display); font-weight: 600; font-size: max(calc(50 * var(--u)), 34px); line-height: .92; text-transform: uppercase; }
.card-go {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: auto; padding: 14px 24px;
	background: var(--shadow); border-top: 1px solid var(--ink);
	font-family: var(--display); font-weight: 500; font-size: 16px;
	letter-spacing: .06em; text-transform: uppercase;
}

.ctx-brief .sec-sub { margin-top: calc(70 * var(--u)); }

.site-foot { margin-top: 0; padding: 0 calc(56 * var(--u)) 22px; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; padding-top: 40px; }
.foot-name { display: inline-flex; align-items: center; gap: .25em; font-family: var(--display); font-weight: 600; font-size: max(calc(56 * var(--u)), 40px); line-height: .9; text-transform: uppercase; }
.foot-mail { font-family: var(--display); font-weight: 500; font-size: max(calc(28 * var(--u)), 22px); }
.site-foot .colophon { margin-top: 40px; }

.sec-plain { padding: 0 calc(56 * var(--u)) 80px; }
.plain { padding-top: 80px; max-width: 760px; }
.plain .hd { font-size: max(calc(96 * var(--u)), 56px); line-height: .9; }
.plain .body { margin-top: 24px; font-size: 14px; }
.plain .body a { text-decoration: underline; }

/* ---------- Smaller desktops and tablets (768-1099) ---------- */

@media (min-width: 768px) and (max-width: 1099.98px) {
	.hm-2, .hm-3 { display: none; }
	.site-nav { grid-column: 3 / 13; gap: 20px; }
	.work-list { grid-template-columns: minmax(0, 1fr); }
	.about-body { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
	.sec-about .txt { width: calc(440 * var(--u)); }
}

/* ======================================================================
 * Phone (< 768px), from reference/mobile.html
 * ==================================================================== */

@media (max-width: 767.98px) {
	.d-only { display: none !important; }
	.m-only { display: revert !important; }
	span.m-only, b.m-only { display: inline !important; }
	div.m-only, .stats.m-only, .roles.m-only { display: grid !important; }
	.wk-more.m-only { display: flex !important; }

	.sec { margin-top: 56px; }
	.meta { position: static; padding: 14px 20px 0; }
	.txt { margin: 0 20px; width: auto; }

	.art { position: relative; inset: auto; height: calc(var(--ah) * var(--m)); }
	.art-abs { position: absolute; inset: 0; height: auto; }
	.pc {
		left: calc(var(--mx) * var(--m));
		top: calc(var(--my) * var(--m));
		width: calc(var(--mw) * var(--m));
		height: calc(var(--mh) * var(--m));
	}
	.vtext { width: auto; height: auto; font-size: 10px; }

	.tab { width: 16px; height: 112px; top: 58px; }
	.tab-sub { top: 58px; width: 32px; height: 130px; }
	.tab-sub > span { font-size: 13px; gap: 6px; }

	.btns { flex-direction: column; flex-wrap: nowrap; }
	.btns .btn, .f-go, .wk-more { justify-content: space-between; width: 100%; height: 52px; padding: 0 18px; font-size: 16px; }

	.stats b { font-size: 28px; }
	.stats { gap: 0 12px; }

	/* Header + menu */
	.site-head {
		position: relative; z-index: 5;
		display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
		padding: 18px 20px; border-bottom: 1px solid var(--ink); background: var(--white);
	}
	.hm-2, .hm-3 { display: none; }
	.menu-btn {
		display: flex !important; align-items: center; gap: 10px;
		height: 40px; padding: 0 14px;
		border: 1px solid var(--ink); border-radius: 0; background: var(--white);
		font-family: var(--display); font-weight: 500; font-size: 15px;
		letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
	}
	.menu-btn[aria-expanded="true"] { background: var(--yellow); }
	.site-nav {
		flex-basis: calc(100% + 40px);
		flex-direction: column; align-items: stretch; gap: 0;
		margin: 18px -20px -18px;
		padding: 8px 20px 22px;
		border-top: 1px solid var(--ink);
		font-weight: 600; font-size: 40px; line-height: 1.15; letter-spacing: 0; white-space: normal;
	}
	.js .site-nav { display: none; }
	.js .site-head.is-open .site-nav { display: flex; }
	.site-nav > a { padding: 6px 0; border-bottom: 1px solid #ddd; }
	.site-nav > .nav-brief {
		display: flex; justify-content: space-between;
		margin-top: 16px; padding: 12px 16px; border: 0;
		font-size: 22px; font-weight: 500; letter-spacing: .04em;
	}

	/* Hero */
	.sec-hero { height: auto; margin-top: 0; padding-top: 44px; }
	.sec-hero .txt { margin: 0 20px; }
	.hero-hd { margin: 0 0 0 12px; font-size: calc(96 * var(--mf)); }
	.hero-sh { margin: 14px 0 0 14px; font-size: calc(22 * var(--mf)); }
	.sec-hero .art { margin-top: 30px; }
	.hero-lede { margin-top: 0; width: auto; padding-top: 16px; border-top: 1px solid var(--ink); font-size: calc(24 * var(--mf)); }
	.hero-stats { margin-top: 26px; }

	/* Brief teaser */
	.sec-brief { min-height: 0; }
	.sec-brief .txt { margin: 0 20px; width: auto; }
	.brief-hd { margin-top: 34px; width: auto; font-size: calc(64 * var(--mf)); }
	.sec-brief .art { margin-top: 28px; }
	.brief-lede { margin-top: 24px; font-size: calc(22 * var(--mf)); line-height: 1.08; }
	.brief-body { margin-top: 12px; font-size: 13px; }
	.teasers { display: flex; flex-direction: column; gap: 0; margin-top: 22px; }
	.teaser {
		display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lbl time" "title title";
		gap: 4px 12px; padding: 14px 0;
	}
	.teaser:last-child { border-bottom: 1px solid var(--ink); }
	.t-lbl { grid-area: lbl; font-size: 12px; }
	.t-time { grid-area: time; font-size: 11px; }
	.t-title { grid-area: title; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
	.sec-brief .btns { margin-top: 22px; padding-bottom: 0; }

	/* Subscribe */
	.sec-sub { padding-bottom: 0; }
	.sub-stage { display: flex; flex-direction: column; min-height: 0; margin-top: 24px; padding-top: 0; }
	.sub-stage .art { order: 2; }
	.sub-panel { order: 1; width: auto; min-height: 0; margin: 0; padding: 34px 20px; }
	.sub-panel::before { mix-blend-mode: normal; }
	.sub-inner { width: auto; }
	.sub-hd { margin-top: 14px; font-size: calc(76 * var(--mf)); }
	.sub-sh { margin-top: 6px; font-size: calc(34 * var(--mf)); }
	.sub-body { margin-top: 16px; max-width: none; }
	.sub-li { top: auto; left: 20px; bottom: 18px; padding: 10px 14px; font-size: 14px; }
	.kicker { gap: 12px; font-size: 14px; }
	.kicker .dot { width: 8px; height: 8px; }
	.kicker .vr { height: 18px; }
	.sub-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "email" "chips" "go" "err" "legal"; margin-top: 24px; }
	.f-chips { flex-direction: column; gap: 20px; }
	.chip { padding: 10px 14px; }
	.em-input { font-size: 28px; }

	/* About */
	.sec-about { min-height: 0; }
	.sec-about .txt { margin: 0 20px; width: auto; padding-bottom: 0; }
	.about-hd { margin: 34px 0 0; font-size: calc(64 * var(--mf)); white-space: normal; }
	.about-sh { margin-top: 10px; font-size: calc(26 * var(--mf)); }
	.about-body { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; font-size: 13px; }
	.sec-about .art { margin-top: 30px; }
	.roles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 20px 0; border-top: 1px solid var(--ink); }
	.roles > span { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
	.roles .muted { font-size: 11px; }
	.roles b { font-family: var(--display); font-weight: 500; font-size: 20px; text-transform: uppercase; }

	/* Work */
	.sec-work { padding: 0; }
	.work-top { height: auto; margin-top: 0; }
	.work-top .txt { margin: 0 20px; width: auto; }
	.work-hd { margin: 34px 0 0; font-size: calc(76 * var(--mf)); }
	.work-sh { margin-top: 10px; font-size: calc(26 * var(--mf)); }
	.work-body { margin-top: 14px; width: auto; min-width: 0; font-size: 13px; }
	.work-top .art { margin-top: 26px; }
	.work-list { display: block; margin: 26px 20px 0; }
	.wk { grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; align-items: start; }
	.wk-n { font-size: 20px; line-height: 1.1; }
	.wk-main { gap: 5px; }
	.wk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
	.wk-row .wk-s { font-size: 11px; white-space: nowrap; }
	.wk-main .wk-p { font-size: 11px; }
	.work-list:not(.is-open) .wk.more { display: none; }
	.wk-more { margin-top: 4px; color: var(--white); }

	/* Loki */
	.sec-loki { min-height: 0; margin-top: 56px; }
	.sec-loki .art { margin-top: 24px; }
	.sec-loki .txt { margin: 0 20px; width: auto; padding-bottom: 0; }
	.loki-hd { margin: 24px 0 0; font-size: calc(76 * var(--mf)); }
	.loki-sh { margin-top: 10px; font-size: calc(26 * var(--mf)); }
	.loki-body { margin-top: 14px; width: auto; min-width: 0; font-size: 13px; }

	/* Contact */
	.sec-contact { min-height: 0; padding-bottom: 22px; }
	.sec-contact .tab-r { top: 110px; }
	.sec-contact .txt { margin: 0 20px 0 34px; }
	.contact-hd { margin-top: 60px; width: auto; font-size: calc(70 * var(--mf)); }
	.contact-block { margin-top: 30px; }
	.contact-sh { font-size: calc(22 * var(--mf)); }
	.contact-mail { font-size: calc(38 * var(--mf)); }
	.contact-colophon { position: static; flex-direction: column; margin: 56px 20px 0; padding-top: 14px; border-top: 1px solid var(--ink); }

	/* Brief page */
	.brief-nav { flex-direction: column; align-items: flex-start; margin: 0 20px; padding: 12px 0; border-top: 0; }
	.bn-links { gap: 20px; }
	.sec-bhero { height: auto; margin-top: 0; padding-top: 44px; }
	.sec-bhero .txt, .sec-bhero .txt:first-of-type { margin: 0 20px; width: auto; min-width: 0; }
	.sec-bhero .txt:first-of-type { margin-left: 32px; margin-right: 40px; }
	.sec-bhero .kicker { padding-top: 0; }
	.bhero-hd { margin-top: 14px; font-size: calc(64 * var(--mf)); }
	.sec-bhero .art { margin-top: 28px; }
	.bhero-sh { margin-top: 24px; font-size: calc(26 * var(--mf)); }
	.bhero-body { margin-top: 12px; font-size: 13px; }
	.sec-bhero .btns { margin-top: 22px; }
	.sec-bhero .tab-l { top: 58px; }

	.sec-latest { padding: 0 20px; }
	.cards { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
	.card-img { height: 220px; }
	.card-body { padding: 18px 18px 22px; }
	.card-title { font-size: 34px; }
	.card-go { padding: 14px 18px; }

	.ctx-brief .sec-sub { margin-top: 56px; }
	.site-foot { padding: 0 20px 22px; margin-top: 0; }
	.foot-row { flex-direction: column; align-items: flex-start; padding-top: 32px; }
	.site-foot .colophon { flex-direction: column; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--ink); }

	.sec-plain { padding: 0 20px 56px; }
	.plain { padding-top: 56px; }
}