/* =============================================================================
Zovle — site stylesheet
-----------------------------------------------------------------------------
Design rules this file obeys (adapted from JPL/NASA "Power of 10" for the web):
1. No external resource is ever fetched at runtime. Fonts are self-hosted,
drawings are inline SVG, there is no CDN and no third-party CSS.
2. Every rule degrades. Custom properties have literal fallbacks, grid falls
back to normal flow, `clamp()` falls back to the middle value on old
engines, and nothing is invisible until JavaScript runs.
3. No feature is used that cannot be expressed with a static fallback in the
same declaration block.
4. All motion is opt-out (`prefers-reduced-motion`) and purely decorative.
5. Fixed bounds: no rule depends on content length; text may wrap or scroll
but never overflows the viewport horizontally.
6. One source of truth. Tokens live in :root and nowhere else.
Palette is intentionally tiny: paper white, ink black, one blue.
========================================================================== */
/* fonts.css is linked from alongside this file, not @import-ed. An
@import here would make the browser fetch this stylesheet, parse line 1, and
only then discover fonts.css — a serial hop in front of every @font-face on
the critical path. Two s fetch in parallel. */
/* ---------------------------------------------------------------- tokens -- */
:root {
--paper: #ffffff;
--ink: #0d0d10;
--ink-2: #35353c; /* body copy */
--ink-3: #6b6b75; /* secondary copy */
/* Technical labels. Was #9a9aa4, which is 2.79:1 on paper — below WCAG AA
for any text size, and these labels are set at 9–10.5px. #74747c is
4.64:1. It sits a hair lighter than --ink-3, so the hierarchy now comes
from size and letter-spacing rather than from an illegible tint. */
--ink-4: #74747c; /* technical labels */
--blue: #2b54c8; /* the single accent */
--blue-soft: #7f97e0;
--rule: #e6e6e4; /* hairline dividers */
--draw: #c6c6c2; /* blueprint construction lines */
--panel: #f6f6f4; /* image / placeholder wells */
--serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
--gut: 24px; /* page gutter, overridden below */
--maxw: 1560px;
--rail: 0px; /* width of the blueprint margin rails */
--shadow-1: 0 1px 1px rgba(13,13,16,.10), 0 2px 4px rgba(13,13,16,.07);
--shadow-2: 0 2px 3px rgba(13,13,16,.13), 0 6px 14px rgba(13,13,16,.11);
--shadow-3: 0 1px 2px rgba(13,13,16,.16), 0 10px 26px rgba(13,13,16,.15);
}
@media (min-width: 700px) { :root { --gut: 40px; } }
@media (min-width: 1100px) { :root { --gut: 104px; --rail: 28px; } }
@media (min-width: 1500px) { :root { --gut: 128px; --rail: 34px; } }
/* ------------------------------------------------------------ foundation -- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* anchored sections must clear the fixed masthead */
scroll-padding-top: 96px;
}
body {
margin: 0;
background: #ffffff;
background: var(--paper, #ffffff);
color: #35353c;
color: var(--ink-2, #35353c);
font-family: var(--sans);
font-size: 16px;
line-height: 1.65;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* rule 5: nothing may push the page sideways */
overflow-x: hidden;
}
img, svg, canvas, video { max-width: 100%; height: auto; display: block; }
img { background: var(--panel, #f6f6f4); }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: #2b54c8; background: var(--blue); color: #fff; }
:focus-visible {
outline: 2px solid #2b54c8;
outline: 2px solid var(--blue, #2b54c8);
outline-offset: 3px;
border-radius: 2px;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--ink); color: #fff; padding: 12px 18px;
font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
}
.skip:focus { left: 8px; top: 8px; }
.sr {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------- type helpers -- */
.mono {
font-family: var(--mono);
font-size: 10px;
line-height: 1.5;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-4);
}
@media (min-width: 700px) { .mono { font-size: 10.5px; } }
.mono--blue { color: var(--blue); }
.mono--ink { color: var(--ink); }
.kicker {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--blue);
}
.display {
font-family: var(--serif);
font-weight: 400;
color: var(--ink);
letter-spacing: -.018em;
line-height: 1.02;
text-wrap: balance;
}
.display .dot { color: var(--blue); }
.h-xl { font-size: clamp(42px, 6.8vw, 92px); }
.h-lg { font-size: clamp(36px, 5.4vw, 78px); }
.h-md { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; }
.h-bd { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.14; }
.h-sm { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; }
.h-an { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; }
.lede {
font-size: 15px;
line-height: 1.7;
color: var(--ink-3);
max-width: 46ch;
}
@media (min-width: 700px) { .lede { font-size: 16px; } }
.body { font-size: 14.5px; line-height: 1.72; color: var(--ink-3); }
.rule { height: 1px; background: var(--rule); border: 0; }
.dash { width: 34px; height: 1px; background: var(--ink); border: 0; margin: 0; }
/* --------------------------------------------------------------- layout -- */
.wrap {
width: 100%;
max-width: var(--maxw, 1560px);
margin-inline: auto;
padding-inline: var(--gut, 24px);
}
.sheet { position: relative; } /* a "drawing sheet" section */
.sheet + .sheet { border-top: 1px solid var(--rule); }
.pad-y { padding-block: clamp(64px, 9vw, 128px); }
.pad-y-s { padding-block: clamp(44px, 6vw, 80px); }
/* Blueprint margin rails. Decorative only, and only when there is room. */
.rails { display: none; }
@media (min-width: 1100px) {
.rails {
display: block;
position: absolute;
inset-block: 0;
inset-inline: 0;
pointer-events: none;
z-index: 0;
}
.rails::before, .rails::after {
content: "";
position: absolute;
inset-block: 0;
width: 1px;
background: var(--rule);
}
.rails::before { left: calc(var(--gut) - var(--rail)); }
.rails::after { right: calc(var(--gut) - var(--rail)); }
}
/* a tick label parked in a rail */
.tick {
display: none;
}
@media (min-width: 1100px) {
.tick {
display: block;
position: absolute;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-4);
white-space: pre-line;
z-index: 1;
max-width: calc(var(--gut) - 34px);
}
.tick--l { left: 26px; }
.tick--r { right: 26px; text-align: right; }
.tick--blue { color: var(--blue); }
/* corner stamps sit outside the rail budget and must not be clipped */
.tick--wide { max-width: min(40vw, 320px); white-space: nowrap; }
}
/* corner crosshair */
.cross { display: none; }
@media (min-width: 1100px) {
.cross {
display: block; position: absolute;
width: 22px; height: 22px; color: var(--draw); z-index: 1;
}
.cross::before, .cross::after {
content: ""; position: absolute; background: currentColor;
}
.cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
}
/* --------------------------------------------------------------- masthead - */
.masthead {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 60;
background: rgba(255,255,255,.86);
border-bottom: 1px solid transparent;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Backdrop blur is an enhancement; the 86% white above is the fallback. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.masthead { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.masthead[data-stuck="true"] {
border-bottom-color: var(--rule);
box-shadow: 0 1px 12px rgba(13,13,16,.05);
}
.masthead__in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 64px;
}
@media (min-width: 700px) { .masthead__in { min-height: 78px; } }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand svg { width: 88px; height: 20px; }
@media (min-width: 700px) { .brand svg { width: 104px; height: 23px; } }
.nav { display: none; }
@media (min-width: 900px) {
.nav {
display: flex;
align-items: center;
gap: clamp(24px, 3.4vw, 56px);
}
.nav a {
font-family: var(--sans);
font-size: 15px;
letter-spacing: -.005em;
color: var(--ink-2);
text-decoration: none;
padding: 6px 0;
position: relative;
}
.nav a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--ink);
transform: scaleX(0); transform-origin: left;
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
}
/* Mobile menu: native . Works with JavaScript disabled, is keyboard
operable for free, and cannot get stuck open in a broken state. */
.menu { position: relative; }
@media (min-width: 900px) { .menu { display: none; } }
.menu > summary {
list-style: none;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0 9px;
align-items: flex-end;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu > summary i { display: block; height: 1.5px; background: var(--ink); width: 26px; transition: width .2s ease; }
.menu > summary i:last-child { width: 17px; }
.menu[open] > summary i:last-child { width: 26px; }
.menu__panel {
position: fixed;
inset-inline: 0;
top: 64px;
bottom: auto;
background: var(--paper);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 12px var(--gut) 24px;
box-shadow: var(--shadow-2);
max-height: calc(100dvh - 64px);
max-height: calc(100vh - 64px);
overflow-y: auto;
}
/* Scoped to `nav` on purpose: the panel also holds a .btn, and an unscoped
`a` rule here outranks .btn--solid and would paint black text on black. */
.menu__panel nav a {
display: block;
padding: 15px 0;
font-family: var(--serif);
font-size: 26px;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--rule);
}
.menu__panel .btn { margin-top: 20px; width: 100%; justify-content: center; }
/* ---------------------------------------------------------------- buttons - */
/* Every button carries real depth: a hairline, a lift, and a pressed state. */
.btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 22px;
min-height: 48px;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 2px;
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transform: translateZ(0);
transition: transform .18s cubic-bezier(.2,.7,.2,1),
box-shadow .18s cubic-bezier(.2,.7,.2,1),
background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 13px; height: 13px; flex: none; }
.btn--solid {
background: #0d0d10;
background: var(--ink, #0d0d10);
color: #fff;
border-color: #0d0d10;
border-color: var(--ink, #0d0d10);
box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.2); }
.btn--solid:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(13,13,16,.2) inset, 0 1px 1px rgba(13,13,16,.12); }
.btn--ghost {
background: #fff;
color: var(--ink);
border-color: #d8d8d4;
box-shadow: var(--shadow-1);
}
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #b9b9b4; }
.btn--ghost:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(13,13,16,.10); }
.btn--wide { min-height: 62px; padding: 18px 26px; gap: 60px; font-size: 16px; min-width: min(100%, 320px); }
/* Hover/focus label swap. Both labels occupy the same grid cell, so the button
width is fixed to the wider of the two — no layout shift on hover. The
carries a stable aria-label, so the visual swap is invisible to assistive tech. */
.btn-swap { display: inline-grid; }
.btn-swap__a, .btn-swap__b {
grid-area: 1 / 1;
transition: opacity .18s ease;
}
.btn-swap__b { opacity: 0; }
.btn:hover .btn-swap__a, .btn:focus-visible .btn-swap__a { opacity: 0; }
.btn:hover .btn-swap__b, .btn:focus-visible .btn-swap__b { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.btn-swap__a, .btn-swap__b { transition: none; }
}
/* text link that reads as a control */
.link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--ink);
text-decoration: none;
padding: 4px 0;
}
.link svg { width: 14px; height: 10px; flex: none; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.link > span { position: relative; }
.link > span::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.link:hover > span::after, .link:focus-visible > span::after { transform: scaleX(1); }
.link:hover svg { transform: translateX(5px); }
.link--blue { color: var(--blue); }
/* the mail link reads as a link at rest, not only on hover */
.link--blue > span::after { transform: scaleX(1); }
.link--blue:hover > span::after { opacity: .5; }
/* --------------------------------------------------------------- drawings - */
.draw { color: var(--draw); }
.draw .ln { stroke: currentColor; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.draw .ln-d { stroke: currentColor; stroke-width: 1; fill: none; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.draw .ln-b { stroke: var(--blue); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.draw .ln-k { stroke: var(--ink); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; }
.draw .fl-b { fill: var(--blue); }
.draw .fl-k { fill: var(--ink); }
.draw .tx { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; fill: var(--ink-4); text-transform: uppercase; }
.draw .tx-b { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; fill: var(--blue); text-transform: uppercase; }
/* ------------------------------------------------------------------ hero -- */
.hero { padding-top: clamp(96px, 13vh, 150px); padding-bottom: clamp(40px, 6vw, 76px); }
.hero__grid {
display: grid;
gap: clamp(40px, 6vw, 72px);
align-items: center;
}
@media (min-width: 1000px) {
.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 80px); }
}
.hero__copy > * + * { margin-top: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { flex: 1 1 auto; min-width: 190px; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 0 auto; } }
.hero__note {
display: flex;
align-items: flex-start;
gap: 18px;
margin-top: clamp(40px, 6vw, 72px);
}
/* `position: relative` matters: the ::before/::after arms are absolute, and a
static parent would let them escape to the section and draw across the page. */
.hero__note .cross { position: relative; display: block; flex: none; }
@media (max-width: 1099px) { .hero__note .cross { display: none; } }
/* hairline under the masthead, with a crosshair sitting on it */
.hero__rule { position: relative; margin-bottom: clamp(28px, 4vw, 46px); }
.hero__rule hr { height: 1px; background: var(--rule); border: 0; margin: 0; }
.hero__rule .cross { display: none; }
@media (min-width: 1100px) {
.hero__rule .cross { display: block; left: -11px; top: -11px; }
}
/* ---------------------------------------------------------- selected work - */
.work__head { margin-bottom: clamp(36px, 5vw, 64px); }
.work__head .kicker { display: block; margin-bottom: 20px; }
.work-list > li { border-top: 1px solid var(--rule); }
.work-list > li:last-child { border-bottom: 1px solid var(--rule); }
.work-row {
display: grid;
gap: clamp(24px, 4vw, 48px);
align-items: center;
padding-block: clamp(28px, 4vw, 44px);
}
@media (min-width: 900px) {
.work-row { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
/* Mirrored rows swap the track widths too, so the artwork keeps the wide
column on both sides. Reordering alone would shrink it. */
.work-row--flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
.work-row--flip .work-row__copy { order: 2; }
.work-row--flip .work-row__shot { order: 1; }
}
.work-row__copy > * + * { margin-top: 14px; }
.work-row__copy .kicker { display: block; }
.work-row__copy .dash { margin-top: 12px; }
.work-row__copy .work-cat {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-4);
}
.work-row__copy .link { margin-top: 22px; }
.work-row__copy .body { max-width: 42ch; }
/* Production numbers inside a work row. Deliberately small: they belong to the
project they sit beside, not to the studio, and a full-width stat band
implied otherwise. */
.rowstats { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 20px; }
.rowstats li {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-4);
}
.rowstats b {
display: block; margin-bottom: 3px;
font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px);
line-height: 1; letter-spacing: -.015em; color: var(--ink); text-transform: none;
}
/* ------------------------------------------------------- image placeholder */
.shot {
position: relative;
overflow: hidden;
background: var(--panel);
border: 1px solid var(--rule);
box-shadow: var(--shadow-1);
}
.shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot--12x5 { aspect-ratio: 12 / 5; }
.shot--21x5 { aspect-ratio: 21 / 5; }
.shot--16x10 { aspect-ratio: 16 / 10; }
.shot--16x9 { aspect-ratio: 16 / 9; }
.shot--21x9 { aspect-ratio: 21 / 9; }
.shot--4x3 { aspect-ratio: 4 / 3; }
/* aspect-ratio fallback for engines that lack it */
@supports not (aspect-ratio: 1) {
.shot--12x5 { height: 0; padding-bottom: 41.66%; }
.shot--21x5 { height: 0; padding-bottom: 23.8%; }
.shot--16x10 { height: 0; padding-bottom: 62.5%; }
.shot--16x9 { height: 0; padding-bottom: 56.25%; }
.shot--21x9 { height: 0; padding-bottom: 42.85%; }
.shot--4x3 { height: 0; padding-bottom: 75%; }
.shot > img { position: absolute; inset: 0; }
}
/* placeholder skin, used until real screenshots land */
.shot--ph {
display: grid;
place-items: center;
background-color: #fbfbfa;
background-image:
linear-gradient(to right, rgba(13,13,16,.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(13,13,16,.045) 1px, transparent 1px);
background-size: 28px 28px;
}
.shot--ph .shot__tag {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-4);
border: 1px dashed #cfcfca; background: rgba(255,255,255,.75);
padding: 8px 14px; text-align: center; max-width: 88%;
}
/* ---------------------------------------------------------- what we build - */
.build__head { display: grid; gap: 28px; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) {
.build__head { grid-template-columns: minmax(0,1fr) auto; align-items: start; }
.build__head .build__note { text-align: right; white-space: pre-line; }
}
.build-list > li { border-top: 1px solid var(--rule); position: relative; }
.build-list > li:last-child { border-bottom: 1px solid var(--rule); }
.build-row {
display: grid;
gap: clamp(18px, 3vw, 40px);
align-items: center;
padding-block: clamp(24px, 3vw, 34px);
}
@media (min-width: 860px) {
.build-row { grid-template-columns: 34px minmax(215px, .36fr) minmax(0, 1.64fr); gap: clamp(18px, 2.4vw, 36px); }
}
.build-row__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--blue); }
.build-row__t {
font-family: var(--serif);
font-size: clamp(21px, 2.1vw, 28px);
line-height: 1.08;
letter-spacing: -.01em;
color: var(--ink);
text-transform: uppercase;
}
.build-row__d { margin-top: 12px; white-space: pre-line; }
/* ------------------------------------------------------------- philosophy - */
.phil__head { text-align: center; display: grid; justify-items: center; gap: 18px; }
.phil__head .dash { width: 26px; }
.phil__head .display { max-width: 15ch; }
.phil-grid {
display: grid;
gap: 0;
margin-top: clamp(48px, 7vw, 96px);
border-top: 1px solid var(--rule);
}
@media (min-width: 760px) { .phil-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px) { .phil-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.phil-cell {
padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px) clamp(56px, 7vw, 92px);
border-bottom: 1px solid var(--rule);
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
@media (min-width: 760px) {
.phil-cell { border-inline-start: 1px solid var(--rule); }
.phil-cell:nth-child(2n+1) { border-inline-start: 0; }
}
@media (min-width: 1180px) {
.phil-cell { border-inline-start: 1px solid var(--rule); border-bottom: 0; }
.phil-cell:nth-child(2n+1) { border-inline-start: 1px solid var(--rule); }
.phil-cell:first-child { border-inline-start: 0; }
}
.phil-cell__n {
font-family: var(--serif);
font-size: clamp(40px, 3.4vw, 54px);
line-height: 1;
color: var(--ink);
}
.phil-cell__t {
font-family: var(--serif);
font-size: clamp(24px, 1.9vw, 29px);
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ink);
}
.phil-cell__mark {
position: absolute;
left: clamp(20px, 2vw, 32px);
right: clamp(20px, 2vw, 32px);
bottom: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--draw);
}
.phil-cell__mark .mono { font-size: 9px; letter-spacing: .16em; white-space: pre-line; }
/* ---------------------------------------------------------------- anatomy - */
.anatomy__grid { display: grid; gap: clamp(28px, 3vw, 44px); align-items: center; }
@media (min-width: 1100px) {
.anatomy__grid { grid-template-columns: minmax(0, .66fr) minmax(0, 2.2fr) minmax(226px, .7fr); }
}
.anatomy__copy > * + * { margin-top: 22px; }
.anatomy__copy .body { white-space: pre-line; max-width: 30ch; }
.layers { display: grid; gap: 0; }
.layer {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 14px;
padding-block: clamp(16px, 1.8vw, 22px);
border-bottom: 1px solid var(--rule);
}
.layer:first-child { border-top: 1px solid var(--rule); }
.layer__n { font-family: var(--serif); font-size: 20px; color: var(--blue); line-height: 1.1; }
.layer__t {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink);
/* the two-word labels ("Application logic") must hold one line, as drawn */
white-space: nowrap;
}
.layer__d { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.layer__c { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.layer.is-on .layer__t { color: var(--blue); }
.scalebar { display: none; }
@media (min-width: 1100px) {
.scalebar { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.scalebar svg { width: 190px; height: 22px; }
}
/* ------------------------------------------------------- client field notes */
.notes__grid { display: grid; gap: clamp(32px, 4vw, 52px); }
@media (min-width: 1080px) {
.notes__grid { grid-template-columns: minmax(260px, .62fr) minmax(0, 2fr); align-items: start; }
}
.notes__aside > * + * { margin-top: 22px; }
/* Sized so the widest word ("remember.") stays inside the aside column at every
width; at h-lg it overran the column and kissed the note-list border. */
.notes__aside .display {
max-width: 9ch;
font-size: clamp(32px, 3.1vw, 50px);
line-height: 1.03;
}
.notes__aside .body { white-space: pre-line; }
.docbox { border: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; }
.docbox > div { padding: 14px 16px; border-inline-start: 1px solid var(--rule); }
.docbox > div:first-child { border-inline-start: 0; grid-row: span 3; }
.docbox dt { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.docbox dd { margin: 6px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--blue); }
.docbox .body { font-size: 12.5px; line-height: 1.55; }
.stampbox {
display: inline-block;
border: 1px solid var(--blue);
padding: 12px 18px;
font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
text-transform: uppercase; color: var(--blue); white-space: pre-line;
}
.note-list { border: 1px solid var(--rule); }
.note-list > li + li { border-top: 1px solid var(--rule); }
.note-row { display: grid; gap: 0; }
@media (min-width: 980px) {
.note-row { grid-template-columns: minmax(168px, .8fr) minmax(0, 1.5fr) minmax(320px, 2.2fr); }
}
.note-row > * { padding: clamp(18px, 1.5vw, 22px); }
@media (min-width: 980px) {
.note-row > * + * { border-inline-start: 1px solid var(--rule); }
}
@media (max-width: 979px) {
.note-row > * + * { border-top: 1px solid var(--rule); }
}
.note-row__id .kicker { display: block; margin-bottom: 14px; }
.note-row__id h3 { font-family: var(--serif); font-size: clamp(21px,1.8vw,26px); line-height: 1.1; color: var(--ink); font-weight: 400; }
.note-row__id .dash { margin: 14px 0; }
/* Quote on the left, stamps in their own strip on the right, with the
REVIEW NOTE / REF. line spanning both — mirrors the reference sheet. */
.note-row__q { display: grid; gap: 18px 22px; align-content: start; }
@media (min-width: 1240px) {
.note-row__q { grid-template-columns: minmax(0, 1fr) minmax(84px, auto); }
.note-row__head { grid-column: 1 / -1; }
.note-row__marks { justify-items: end; text-align: right; }
}
.note-row__head { display: flex; justify-content: space-between; gap: 12px; }
.note-row__body { display: flex; flex-direction: column; gap: 16px; }
.note-row__marks { display: grid; gap: 14px; align-content: start; justify-items: start; }
.note-row__q .quote {
font-family: var(--hand);
font-size: clamp(19px, 1.45vw, 22px);
line-height: 1.45;
color: var(--ink);
}
.note-row__q .quote em { font-style: normal; border-bottom: 1.5px solid var(--blue); }
.note-row__q cite { font-style: normal; }
/* The round VERIFIED / APPROVED stamp lived here. It was removed with the
markup: a verification badge on an unattributed quote is a claim we cannot
substantiate. If named, permissioned references land, bring it back. */
/* vertical spine label down the outer edge of the field-notes sheet */
.spine { display: none; }
@media (min-width: 1240px) {
.spine {
display: block; position: absolute;
top: 190px; left: 30px;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--mono); font-size: 9px; letter-spacing: .28em;
text-transform: uppercase; color: var(--ink-4);
white-space: nowrap; z-index: 1;
}
}
.hand { font-family: var(--hand); font-size: 20px; line-height: 1.35; color: var(--blue); }
/* --------------------------------------------------------------- contact -- */
.blueprint__grid { display: grid; gap: clamp(36px, 4vw, 56px); align-items: start; }
@media (min-width: 1050px) {
/* the reference sheet is a 44:56 split; the title block, drawing, revision
log and notes all belong to the right column, not to the full width. */
.blueprint__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.14fr); }
}
.blueprint__copy > * + * { margin-top: 26px; }
/* The drafting sheet reads in one voice: everything but the display heading
is monospace, as on the reference. */
.bp-body {
font-family: var(--mono);
font-size: 13px;
letter-spacing: .04em;
line-height: 2.05;
color: var(--ink-2);
white-space: pre-line;
}
.bp-btn { font-family: var(--mono); font-size: 13.5px; font-weight: 400; letter-spacing: .1em; }
.bp-mail { font-family: var(--mono); font-size: 13.5px; letter-spacing: .06em; }
.blueprint__sheet { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.blueprint__sheet .titleblock { margin-left: auto; }
.bp-draw { margin-top: 4px; }
.titleblock {
border: 1px solid var(--rule);
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
max-width: 340px;
}
.titleblock > div { padding: 9px 12px; border-inline-start: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.titleblock > div:nth-child(2n+1) { border-inline-start: 0; }
.titleblock > div:nth-child(-n+2) { border-top: 0; }
.titleblock dt { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.titleblock dd { margin: 5px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
/* `position: relative` contains the crosshair's absolute arms — see .hero__note */
.docfoot .cross { position: relative; display: block; }
.docfoot {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) 24px;
align-items: center;
gap: 20px;
border-top: 1px solid var(--rule);
padding-block: 22px;
margin-top: clamp(44px, 6vw, 76px);
}
.docfoot > .mono { text-align: center; }
/* case pages reuse the bar for prev / all / next links */
.docfoot--nav { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
/* the drawing sheet closes on its own footer bar, so no extra section padding */
#contact { padding-bottom: 0; padding-top: clamp(56px, 6vw, 92px); }
.blueprint__sheet .titleblock { margin-top: -6px; }
/* ----------------------------------------------------------------- footer - */
.foot { border-top: 1px solid var(--rule); }
.foot__grid {
display: grid;
gap: clamp(30px, 5vw, 56px);
padding-block: clamp(48px, 7vw, 84px) clamp(28px, 4vw, 44px);
}
@media (min-width: 720px) {
.foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}
.foot__brand { display: grid; gap: 18px; align-content: start; }
.foot__brand .brand svg { width: 104px; height: 23px; }
.foot__tag { font-size: 14.5px; line-height: 1.65; color: var(--ink-3); max-width: 34ch; }
.foot__loc { color: var(--ink-4); }
.foot__social { display: flex; gap: 12px; margin-top: 2px; }
.foot__social a {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border: 1px solid var(--rule); border-radius: 2px;
color: var(--ink-2); box-shadow: var(--shadow-1);
transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.foot__social svg { width: 19px; height: 19px; }
.foot__social a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--blue); border-color: var(--blue-soft); }
.foot__social a:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.foot__col { display: grid; gap: 12px; align-content: start; }
.foot__h { color: var(--ink-4); margin-bottom: 2px; }
.foot__col a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; width: fit-content; }
.foot__col a:hover { color: var(--blue); }
.foot__legal {
display: flex; flex-wrap: wrap; gap: 10px 28px;
align-items: baseline; justify-content: space-between;
border-top: 1px solid var(--rule);
padding-block: 22px;
}
.foot__legal .mono { color: var(--ink-4); }
/* -------------------------------------------------------------- case page - */
.case-hero { padding-top: clamp(104px, 14vh, 168px); }
.case-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 30px; }
.spec { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .spec { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .spec { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.spec > div { padding: 22px clamp(16px,2vw,26px); border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .spec > div { border-inline-start: 1px solid var(--rule); } .spec > div:nth-child(2n+1) { border-inline-start: 0; } }
@media (min-width: 1100px) { .spec > div { border-inline-start: 1px solid var(--rule); } .spec > div:nth-child(2n+1) { border-inline-start: 1px solid var(--rule); } .spec > div:first-child { border-inline-start: 0; } }
.spec dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.spec dd { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
/* headline-figure variant of .spec: the term is the number, the definition
is its caption, which is why dt/dd read "backwards" here. */
.spec--stat dt {
font-family: var(--serif); font-size: clamp(34px, 3.6vw, 50px);
line-height: 1; letter-spacing: -.02em; color: var(--ink);
text-transform: none;
}
.spec--stat dd {
margin-top: 12px;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-4);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
padding: 7px 12px;
border: 1px solid var(--rule);
border-radius: 2px;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-3);
box-shadow: var(--shadow-1);
}
.chips li::before { content: none; }
.note-pending {
border-inline-start: 2px solid var(--blue);
padding: 4px 0 4px 18px;
color: var(--ink-3) !important;
font-size: 14.5px !important;
}
.prose { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.6vw,36px); line-height: 1.1; color: var(--ink); margin-top: 46px; }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px,1.8vw,24px); line-height: 1.15; color: var(--ink); margin-top: 32px; }
.prose p { color: var(--ink-2); font-size: 16px; line-height: 1.72; }
.prose ul { display: grid; gap: 12px; }
.prose ul li { position: relative; padding-left: 22px; color: var(--ink-2); }
.prose ul li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 7px; height: 7px; border: 1px solid var(--blue);
}
.prose a { color: var(--blue); text-underline-offset: 3px; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--blue); }
/* ------------------------------------------------------- location pages --- */
/* Native , so an FAQ opens with JavaScript off and is keyboard
operable for free. The marker is a rotating "+" drawn in CSS. */
.faqs { border-top: 1px solid var(--rule); max-width: 74ch; }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
padding: 20px 2px; cursor: pointer; list-style: none;
font-size: 16px; line-height: 1.5; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
content: "+"; flex: none;
font-family: var(--mono); font-size: 17px; color: var(--blue);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 2px 22px; font-size: 15px; line-height: 1.72; color: var(--ink-3); max-width: 68ch; }
/* The price band. Set at display size because it is the answer people came
for, and burying it in body copy is how the rest of the industry does it. */
.price {
font-family: var(--serif);
font-size: clamp(30px, 4.2vw, 58px);
line-height: 1.05;
letter-spacing: -.02em;
color: var(--ink);
margin-top: clamp(20px, 2.6vw, 30px);
}
/* A row of links wearing the .chips look. Padding sits on the so the whole
chip is the hit target, not just its label. */
.chiplinks { display: flex; flex-wrap: wrap; gap: 8px; }
.chiplinks a {
display: block; padding: 9px 14px;
border: 1px solid var(--rule); border-radius: 2px;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-3); text-decoration: none;
box-shadow: var(--shadow-1);
transition: color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
.chiplinks a:hover { color: var(--blue); border-color: var(--blue-soft); transform: translateY(-1px); }
/* --------------------------------------------------------------- consent -- */
/* Built by JavaScript and inserted as the first element in , so keyboard
and screen-reader users meet the choice before the page. These rules park it
at the foot of the viewport without changing that reading order. It is a
notice, not a wall: the page stays readable and scrollable behind it. */
.consent {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 80;
background: var(--paper, #ffffff);
border-top: 1px solid var(--ink, #0d0d10);
box-shadow: 0 -6px 24px rgba(13,13,16,.10);
}
@media (prefers-reduced-motion: no-preference) {
.consent { animation: consent-in .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }
}
.consent__in {
width: 100%;
max-width: var(--maxw, 1560px);
margin-inline: auto;
padding: 20px var(--gut, 24px);
display: grid;
gap: 18px;
align-items: center;
}
@media (min-width: 860px) {
.consent__in { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
}
.consent__t { display: block; margin-bottom: 8px; }
.consent__d {
font-size: 14px;
line-height: 1.65;
color: var(--ink-2, #35353c);
max-width: 78ch;
}
.consent__d a { color: var(--blue, #2b54c8); text-underline-offset: 3px; }
/* Both buttons carry identical classes and identical width. Refusing has to be
exactly as easy as agreeing — a quieter Decline is a dark pattern and has
been fined as one. */
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__actions .btn { flex: 1 1 auto; min-width: 148px; justify-content: center; }
/* ---------------------------------------------------------------- motion -- */
/* Reveal is an enhancement layered on top of already-visible content.
The `data-anim` attribute is only set by JavaScript once it has confirmed
IntersectionObserver exists, so with JS off nothing is ever hidden. */
[data-anim="ready"] [data-reveal] {
opacity: 0;
transform: translateY(14px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-anim="ready"] [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
[data-anim="ready"] [data-reveal] { opacity: 1; transform: none; }
}
/* ------------------------------------------------------------------ print - */
@media print {
.masthead, .menu, .rails, .tick, .cross, .btn { display: none !important; }
body { color: #000; }
.sheet { break-inside: avoid; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}
/* ------------------------------------------------------- forced colors --- */
@media (forced-colors: active) {
.btn { border: 1px solid ButtonText; }
.shot, .note-list, .docbox, .titleblock { border-color: CanvasText; }
}