with each pair wrapped in a so the grid has
something to lay out — dt/dd cannot be grid items of the same row otherwise. */
.record{margin-top:26px;border-top:1px solid var(--rule);}
.record > div{
display:grid;
grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
gap:6px 28px;
padding:11px 0;
border-bottom:1px solid var(--rule);
}
.record dt{
font-family:var(--sans);
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-mute);
padding-top:3px;
}
.record dd{font-size:14.5px;line-height:1.6;}
@media(max-width:640px){
.record > div{grid-template-columns:1fr;gap:3px;}
}
/* A COMPARANDUM — two figures that only mean anything read together, so they
share one grid and one baseline. Used for the Benson: the panel as it is now
beside the 1938 plate that fixes it in the literature.
align-items:end keeps the captions on a common line when the two photographs
are different shapes, which they always are — an archive plate and a modern
record shot are never the same crop. */
.plate-pair{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(18px,3vw,38px);
align-items:end;
}
@media(max-width:560px){.plate-pair{grid-template-columns:1fr;}}
.plate-pair figure{margin:0;}
.plate-pair .fig-ground{background:var(--paper-deep);border:1px solid var(--rule);}
.plate-pair img{width:100%;display:block;}
.plate-pair figcaption{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--ink-mute);}
.plate-pair .fig-n{
font-family:var(--sans);
font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--siena);display:block;margin-bottom:3px;
}
/* A picture photographed in its frame sits on the paper ground rather than the
dark one. The frame supplies its own edge, so a second one fights it. */
.plate--framed .plate-fig{background:var(--paper);}
/* ==========================================================================
MOBILE
Everything below is the small-screen pass: responsive hero art, stacked
tables, 44px touch targets, iOS-safe form sizing, tightened rhythm, and a
persistent call/quote bar.
========================================================================== */
/* ------------------------------------------------- responsive hero art ---- */
/* Small viewport does NOT mean few pixels. A 393pt phone at DPR 3 paints 1179
physical pixels across, and because the hero is background-size:cover on a
tall portrait box the binding constraint is height: about 1680 physical
pixels. Serving a 720px image there upscales it ~2.6x, which is exactly what
soft, mushy hero art looks like.
Two mutually exclusive breakpoints, one image-set() each, so the browser
selects by device pixel ratio and fetches exactly one file. */
@media(min-width:901px){
.hero-home{
background-image:url('../assets/hero-1600.jpg');
background-image:-webkit-image-set(
url('../assets/hero-1600.jpg') 1x,
url('../assets/hero-2100.jpg') 2x);
background-image:image-set(
url('../assets/hero-1600.webp') type('image/webp') 1x,
url('../assets/hero-2100.webp') type('image/webp') 2x,
url('../assets/hero-1600.jpg') type('image/jpeg') 1x,
url('../assets/hero-2100.jpg') type('image/jpeg') 2x);
}
}
@media(max-width:900px){
.hero-home{
background-image:url('../assets/hero-1100.jpg');
background-image:-webkit-image-set(
url('../assets/hero-1100.jpg') 1x,
url('../assets/hero-1600.jpg') 2x,
url('../assets/hero-2100.jpg') 3x);
background-image:image-set(
url('../assets/hero-1100.webp') type('image/webp') 1x,
url('../assets/hero-1600.webp') type('image/webp') 2x,
url('../assets/hero-2100.webp') type('image/webp') 3x,
url('../assets/hero-1100.jpg') type('image/jpeg') 1x,
url('../assets/hero-1600.jpg') type('image/jpeg') 2x,
url('../assets/hero-2100.jpg') type('image/jpeg') 3x);
}
}
/* --------------------------------------------------- stacked data tables -- */
/* Under 700px every table becomes a stack of labelled rows. The labels come
from data-label attributes written at build time, so this needs no JS. */
@media(max-width:700px){
.table-wrap{overflow:visible;}
table{min-width:0;display:block;}
thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
tbody,tr,td{display:block;width:100%;}
caption{display:block;padding-bottom:16px;}
tbody tr{
border:1px solid var(--rule);
background:rgba(255,255,255,.28);
padding:6px 18px 12px;
margin-bottom:14px;
}
tbody tr:last-child{margin-bottom:0;}
td{border-bottom:1px solid var(--rule);padding:13px 0;}
tr td:last-child{border-bottom:0;}
td[data-label]::before{
content:attr(data-label);
display:block;
font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-mute);margin-bottom:6px;
}
td.rate{font-size:26px;}
td .note{display:block;margin-top:4px;}
}
/* ------------------------------------------------------- touch targets ---- */
@media(max-width:900px){
a,button,summary,label{-webkit-tap-highlight-color:rgba(138,75,42,.18);}
.nav-toggle{padding:14px 18px;font-size:11px;}
/* Footer link lists were 12–16px tall. Give every one a real target. */
.foot li{margin-bottom:0;}
.foot li a{display:block;padding:12px 0;min-height:44px;line-height:1.5;}
.foot ul{border-top:1px solid rgba(255,255,255,.12);}
.foot li{border-bottom:1px solid rgba(255,255,255,.12);}
.foot .contact-line a{display:inline-block;padding:9px 0;min-height:38px;}
.textlink{display:inline-block;padding:10px 0;}
.crumbs a{display:inline-block;padding:8px 0;}
input[type=radio],input[type=checkbox]{width:22px;height:22px;}
.radio-row label{padding:10px 0;min-height:44px;}
.radio-row{gap:18px;}
.btn{padding:17px 26px;width:100%;text-align:center;}
.btn-row{gap:12px;}
.btn-row .btn{flex:1 1 100%;}
}
/* --------------------------------------------------------- readability ---- */
@media(max-width:900px){
body{font-size:17px;line-height:1.7;}
.note,.card-note,.fact .t,.faq .answer p{font-size:15.5px;line-height:1.65;}
.field .hint{font-size:14px;}
.eyebrow,.card-value,.callout .label,.field label{font-size:11.5px;letter-spacing:.2em;}
.foot li{font-size:15.5px;}
.foot .contact-line{font-size:15.5px;}
.foot .disclaimer{font-size:13.5px;line-height:1.7;}
.foot-base{font-size:12.5px;}
.foot-base .tri{font-size:12px;}
caption{font-size:11.5px;}
/* Long single-word URLs and object titles should never force a scrollbar. */
h1,h2,h3,p,li,td{overflow-wrap:break-word;}
}
/* Prevent iOS zooming the page when a field takes focus (needs >=16px). */
@media(max-width:900px){
input[type=text],input[type=email],input[type=tel],input[type=number],
select,textarea{font-size:16px;padding:15px 15px;}
textarea{min-height:170px;}
.field{margin-bottom:22px;}
}
/* ------------------------------------------------------------- rhythm ---- */
/* Desktop's generous spacing turns into a lot of scrolling on a phone. */
@media(max-width:760px){
section{padding:clamp(40px,9vw,58px) 0;}
section.tight{padding:clamp(30px,6vw,40px) 0;}
.page-head{padding:34px 0 26px;}
.cols{gap:26px;}
.stack-lg > * + *{margin-top:26px;}
.hairline{margin:22px 0;}
h2[style*="margin-bottom"]{margin-bottom:16px !important;}
.card{padding:24px 22px 26px;}
.fact{padding:24px 22px;}
.facts{border-inline:1px solid var(--rule);}
.callout{padding-left:20px;}
.pull{font-size:22px;}
ol.checklist li{padding-left:38px;margin-bottom:26px;}
/* The eyebrow column of the two-column sections reads as a section label */
.cols-side > div:first-child{margin-bottom:-8px;}
}
/* ------------------------------------------------------ mobile actionbar -- */
.actionbar{display:none;}
@media(max-width:760px){
/* The bar is visible from here down, so full-height sections must account
for it. 56px is the a-element min-height set below. */
:root{--actionbar-h:calc(56px + env(safe-area-inset-bottom));}
.actionbar{
display:flex;
position:fixed;left:0;right:0;bottom:0;z-index:70;
background:var(--night);
border-top:1px solid rgba(255,255,255,.16);
padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{
flex:1;text-decoration:none;text-align:center;
padding:17px 8px;min-height:56px;
font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:#fff;display:flex;align-items:center;justify-content:center;
}
.actionbar a + a{border-left:1px solid rgba(255,255,255,.16);}
.actionbar a.primary{background:var(--siena);}
.actionbar a:active{opacity:.85;}
/* Keep the bar from covering the last of the footer. */
body.has-actionbar{padding-bottom:calc(56px + env(safe-area-inset-bottom));}
}
/* ------------------------------------------------------- small phones ----- */
@media(max-width:400px){
:root{--gut:20px;}
.brand .mark{font-size:19px;letter-spacing:.30em;}
.brand .sub{font-size:8.5px;letter-spacing:.2em;}
.hero-home .sub{font-size:15px;}
.faq summary{font-size:18px;padding-right:34px;}
td.rate{font-size:23px;}
}
/* --------------------------------------------------------- landscape ------ */
@media(max-height:520px) and (orientation:landscape){
/* Bar is hidden here, so the reservation goes back to zero. A full-height
hero on a 520px-tall screen would bury the copy, so it reverts to auto. */
:root{--actionbar-h:0px;}
.hero-home{min-height:auto;padding-top:96px;}
.hero-home .hero-body{padding-bottom:40px;}
.actionbar{display:none;}
body.has-actionbar{padding-bottom:0;}
}
/* A couple of targets still landed just under 44px in testing. */
@media(max-width:900px){
.nav-toggle{padding:16px 20px;}
.crumbs{padding-top:18px;}
.crumbs a{padding:11px 0;}
.brand{padding:2px 0;}
}
/* Geographic line inside the hero H1 — visible, small, above the display line. */
.h1-geo{
display:block;
font-family:var(--sans);
font-size:clamp(10.5px,1.05vw,12.5px);
font-weight:500;
letter-spacing:.26em;
text-transform:uppercase;
line-height:1.5;
margin-bottom:18px;
opacity:.92;
}
@media(max-width:600px){ .h1-geo{letter-spacing:.2em;margin-bottom:14px;} }
/* ==========================================================================
Scroll reveals
--------------------------------------------------------------------------
Blocks fade and lift into place as they enter the viewport. Only opacity and
transform are animated, so the compositor handles it and layout never moves:
CLS stays at zero.
The hiding rule is scoped to html.js, set by a one-line inline script in the
head so it applies before first paint and nothing flashes. That same inline
script sets a 2.5s failsafe (html.reveal-all) so a failed site.js can never
leave the page invisible.
Nothing above the fold is in this list — not .hero-home, not .page-head —
because hiding the LCP element to fade it in would make LCP worse.
KEEP THIS SELECTOR LIST IN SYNC with the one in js/site.js.
========================================================================== */
/* :where() is load-bearing. Written plainly, `html.js .cols-side > div + div`
scores (0,2,3) and outranks `html.js .is-in` at (0,2,1), so those blocks got
the is-in class and stayed invisible anyway. :where() contributes zero
specificity, which puts every hiding rule at (0,1,1) and lets the reveal
win. Add new selectors INSIDE the :where(), never beside it. */
html.js :where(
.work-copy,
.work-caption,
.cols-side > div + div,
.cols-2 > div,
.callout,
.card,
.faq,
.table-wrap,
.fact
){
opacity:0;
transform:translateY(20px);
transition:opacity .7s cubic-bezier(.22,.61,.36,1),
transform .7s cubic-bezier(.22,.61,.36,1);
}
html.reveal-all :where(
.work-copy,
.work-caption,
.cols-side > div + div,
.cols-2 > div,
.callout,
.card,
.faq,
.table-wrap,
.fact
),
html.js .is-in{
opacity:1;
transform:none;
}
/* Cards and paired columns arrive in sequence rather than as a block. */
html.js .card:nth-child(2),
html.js .cols-2 > div:nth-child(2){transition-delay:.09s;}
html.js .card:nth-child(3){transition-delay:.18s;}
html.js .card:nth-child(4){transition-delay:.27s;}
/* The caption is a footnote to the picture, so it follows it in. */
html.js .work-caption{transition-delay:.16s;}
@media(prefers-reduced-motion:reduce){
html.js .work-copy,
html.js .work-caption,
html.js .cols-side > div + div,
html.js .cols-2 > div,
html.js .callout,
html.js .card,
html.js .faq,
html.js .table-wrap{
opacity:1;
transform:none;
transition:none;
}
}
/* ----------------------------------------------- opening-block reveals ----
Removed 4 Sept 2026. The hero copy and every page's h1/eyebrow/lede used to
start at opacity 0 and fade in as an entrance. In practice the first screen
sat blank for several seconds on a normal connection, which read as a
broken page rather than an entrance. Above-the-fold content now renders
immediately; scroll reveals further down the page are unchanged.
The previous rules are in archive/pages/css__site.2026-09-04.css.
-------------------------------------------------------------------------- */
/* ------------------------------------------------------- headline lines ---
Each line sits in its own clipping box and rises into it, so the words are
uncovered rather than faded. The is the moving part; the is the
mask. Both are display:block, so the h2 keeps its normal line box and the
heading occupies exactly the same space whether or not it has animated —
nothing reflows.
-------------------------------------------------------------------------- */
h2.lines .ln{
display:block;
overflow:hidden;
}
h2.lines .ln > i{
display:block;
font-style:inherit;
}
html.js h2.lines .ln > i{
transform:translateY(105%);
transition:transform .95s cubic-bezier(.19,.85,.3,1);
}
html.js .work-copy.is-in h2.lines .ln > i,
html.reveal-all h2.lines .ln > i{
transform:translateY(0);
}
/* The second line follows the first rather than arriving with it. */
html.js h2.lines .ln:nth-child(2) > i{transition-delay:.13s;}
@media(prefers-reduced-motion:reduce){
html.js h2.lines .ln > i{transform:none;transition:none;}
}
/* ------------------------------------------- hero CTA on small screens ----
The fixed action bar already carries "Request a quote", so the hero's copy
of it is redundant on a phone — two identical calls to action a thumb apart.
Hidden at exactly the breakpoint where the bar appears, and restored in
landscape where the bar is hidden again.
-------------------------------------------------------------------------- */
@media(max-width:760px){
.hero-home .btn-row a[href="/contact"]{display:none;}
}
@media(max-height:520px) and (orientation:landscape){
.hero-home .btn-row a[href="/contact"]{display:inline-block;}
}