/* The FAB-06 site's paper, ink, red marks and dotted-rule system, with Lust display type. */
@font-face {
	font-family: 'Lexend';
	src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lexend Exa';
	src: url('../fonts/LexendExa-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
:root {
	color-scheme: light;
	--paper: #ffffff;
	--ink: #0b0b0c;
	--ink-2: #3a3b3d;
	--mute: #6b6d71;
	--hair: rgba(11, 11, 12, .14);
	--hair-strong: rgba(11, 11, 12, .32);
	--tint: #f6f6f5;
	--accent: #e5261c;
	--ink-rgb: 11, 11, 12;
	--paper-rgb: 255, 255, 255;
	--ease: cubic-bezier(.2, .7, .1, 1);
	--font-title: lust, 'Bodoni MT', Didot, 'Times New Roman', serif;
	--font-label: 'Lexend Exa', 'Lexend', 'Segoe UI', sans-serif;
	--font-body: 'Lexend', 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-mono: 'Cascadia Code', Consolas, ui-monospace, monospace;
	--gutter: clamp(20px, 4vw, 64px);
	--max: 1600px;
}
html[data-mode='dark'] {
	color-scheme: dark;
	--paper: #0b0b0c;
	--ink: #f3f3f1;
	--ink-2: #c3c4c6;
	--mute: #a0a0a5;
	--hair: rgba(243, 243, 241, .14);
	--hair-strong: rgba(243, 243, 241, .32);
	--tint: #151516;
	--accent: #f0392d;
	--ink-rgb: 243, 243, 241;
	--paper-rgb: 11, 11, 12;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color: var(--ink); background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 300 16px/1.65 var(--font-body); }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button { color: inherit; font: inherit; }
h1, h2, h3, p { margin: 0; }
address { font-style: normal; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -10000px; top: 8px; z-index: 10; }
.skip:focus { left: var(--gutter); padding: 8px 12px; background: var(--ink); color: var(--paper); }
.dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.code { font: 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.topbar { border-bottom: 1px solid var(--hair); }
.topbar-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 500 11px/1.5 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 36px); }
nav a, .mode { font: 400 11px/1.5 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.mode { min-height: 44px; min-width: 52px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: .35em; }
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(52px, 7.5vw, 112px) clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--hair); }
.field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .3)); mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .3)); }
.hero-notes { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.hero-notes .code:last-child { display: inline-flex; align-items: center; gap: 10px; }
.wordmark { margin-block: clamp(38px, 5vw, 72px) clamp(34px, 4vw, 60px); font: 400 clamp(40px, 10.4vw, 166px)/1.05 var(--font-title); letter-spacing: -.045em; white-space: nowrap; }
.wordmark-image { display: block; width: 100%; height: auto; animation: wipe 1.3s var(--ease) .15s both; }
.hero-notes, .hero-foot { animation: rise .9s var(--ease) both; }
.hero-notes { animation-delay: .05s; }
.hero-foot { animation-delay: .7s; }
.hero-notes .dot { animation: blink 1.1s steps(1) infinite; }
html[data-mode='dark'] .wordmark-image { filter: invert(1); }
.hero-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; border-top: 1px dotted var(--hair-strong); padding-top: 25px; }
.hero-foot p { max-width: 600px; font-size: clamp(17px, 1.55vw, 23px); line-height: 1.65; }
.hero-foot strong { font-weight: 500; }
.quiet-link { flex: none; font-size: 12px; }
.quiet-link span { margin-left: 12px; font-size: 20px; }
.company-section { padding-block: clamp(44px, 5.5vw, 80px); scroll-margin-top: 24px; }
.section-head { display: flex; align-items: center; gap: 20px; margin-bottom: 38px; }
.section-head .code { flex: none; white-space: nowrap; }
.section-head h2 { font: 400 clamp(26px, 3vw, 44px)/1.2 var(--font-title); letter-spacing: -.02em; }
.rule { position: relative; flex: 1; min-width: 20px; border-top: 1px dotted var(--hair-strong); }
.rule::before, .rule::after { content: ''; position: absolute; width: 4px; height: 4px; top: -2.5px; background: var(--ink); }
.rule::before { left: 0; }
.rule::after { right: 0; }
.company-layout { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.company-figure { margin: 0; border-top: 1px solid var(--hair); padding-top: 20px; }
.company-figure canvas { display: block; width: 100%; aspect-ratio: 1; }
.company-figure figcaption { margin-top: 12px; }
.company-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.company-detail { position: relative; border-top: 1px solid var(--hair); padding-top: 20px; min-width: 0; scroll-margin-top: 24px; }
.company-detail::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; border-top: 1px solid var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.company-detail:hover::before, .company-detail:focus-within::before { transform: scaleX(1); }
.company-detail h3 { margin-bottom: 20px; font: 500 10px/1.5 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.company-detail p, .company-detail address { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.company-detail .company-name { margin-bottom: 7px; color: var(--ink); font-weight: 500; }
.contact-link { overflow-wrap: anywhere; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 22px; border-top: 1px solid var(--hair); font: 10px/1.7 var(--font-mono); color: var(--mute); }
.credit a { display: inline; min-height: 0; }
.footer a { min-height: 32px; display: inline-flex; align-items: baseline; gap: 8px; }
/* Scroll reveals: figures.js sets .reveal-ready only when it can observe, so without it everything shows. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
.reveal-ready .section-head[data-reveal] { transform: none; }
.reveal-ready .section-head .rule { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .2s; }
.reveal-ready .section-head.is-in .rule { transform: none; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 1200px) {
	.company-layout { grid-template-columns: 1fr; }
	.company-figure canvas { aspect-ratio: 4 / 1; }
}
@media (min-width: 1600px) { .wordmark { font-size: 166px; } }
@media (max-width: 760px) {
	.topbar-inner { min-height: 62px; }
	.brand { font-size: 10px; letter-spacing: .06em; gap: 7px; }
	nav { gap: 16px; }
	nav a:first-child { display: none; }
	nav a, .mode { font-size: 10px; }
	.hero-foot { flex-direction: column; gap: 18px; }
	.hero-foot p { max-width: 29ch; }
	.section-head { gap: 13px; margin-bottom: 28px; }
	.company-grid { grid-template-columns: 1fr; gap: 26px; }
	.company-detail h3 { margin-bottom: 12px; }
	.company-detail p, .company-detail address { font-size: 14px; }
}
@media (max-width: 370px) { .wordmark { font-size: 10.7vw; } .hero-notes .code { font-size: 10px; } }
@media (max-width: 760px) { .footer { flex-wrap: wrap; } .credit { order: 3; flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.reveal-ready [data-reveal], .reveal-ready .section-head .rule { opacity: 1; transform: none; }
}
@media print {
	html:root { color-scheme: light; --paper: #fff; --ink: #0b0b0c; --ink-2: #3a3b3d; --mute: #6b6d71; --hair: #ddd; --hair-strong: #777; }
	nav, .quiet-link, .footer a, .field, .company-figure { display: none; }
	.company-layout { display: block; }
	.reveal-ready [data-reveal] { opacity: 1; transform: none; }
	html[data-mode='dark'] .wordmark-image { filter: none; }
}