/* THORNBURY DIGITAL v6 — THE GROUND
   Limewash, ink, and one warm film of sand in raking light. The film is the
   hero and the only spectacle; the page under it is quiet. Two families only:
   Big Shoulders (display, labels, numerals) and Newsreader (text). No blue
   anywhere. */

:root {
  --wall: #ebe7df;
  --wall-2: #e1dcd2;
  --ink: #17150f;
  --ink-2: #4f4a41;
  --ink-3: rgba(23, 21, 15, .7);
  --rule: rgba(23, 21, 15, .17);
  --rule-2: rgba(23, 21, 15, .36);
  --sun: #f0a13d;
  --sun-ink: #7a4a10;
  --plate-edge: rgba(23, 21, 15, .28);
  --gutter: clamp(20px, 3.4vw, 60px);
  --gap: clamp(14px, 1.6vw, 28px);
  --max: 1760px;
  --bar-h: 64px;
  --disp: 'Big Shoulders', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.45, .05, .55, .95);
  --s1: 8px; --s2: 12px; --s3: 20px; --s4: 32px; --s5: 52px; --s6: 84px; --s7: 136px; --s8: 220px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html, body { margin: 0; }
body {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.1rem;
  line-height: 1.42;
  font-variation-settings: 'opsz' 18;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--sun); color: #17150f; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }

.skip { position: fixed; left: var(--gutter); top: -60px; z-index: 40; padding: 8px 12px; background: var(--ink); color: var(--wall); font: 600 .8rem var(--disp); letter-spacing: .08em; text-transform: uppercase; }
.skip:focus { top: 12px; }

.site { position: relative; z-index: 1; }
#main { outline: none; }
html.js #main { transition: opacity .32s var(--ease-io), translate .32s var(--ease-io); }
html.bg-out #main { opacity: 0; translate: 0 10px; }

/* ---------- display type ---------- */
.disp { font-family: var(--disp); font-weight: 800; font-variation-settings: 'opsz' 72; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; }
.lab { font-family: var(--disp); font-weight: 600; font-variation-settings: 'opsz' 12; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.2; font-variant-numeric: tabular-nums; }
.lab b { color: var(--ink); font-weight: 700; }
.lede { font-size: clamp(1.25rem, 1.1rem + .9vw, 1.9rem); line-height: 1.28; font-variation-settings: 'opsz' 30; max-width: 30ch; }
.lede em, .line em { font-style: italic; }
.text { max-width: 58ch; color: var(--ink-2); }
.text + .text { margin-top: 1em; }
.num { font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 72; font-variant-numeric: tabular-nums; }

/* ---------- the bar ---------- */
/* The bar is transparent over the top of a page and becomes a frosted strip
   of the wall once anything has scrolled under it, so nothing ever reads
   through the navigation. The shade canvas still multiplies over it, so the
   strip stays in the room. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 4; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--wall) 0%, transparent);
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
html.scrolled .bar { background: color-mix(in srgb, var(--wall) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); }
.bar::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--rule); opacity: 0; transition: opacity .4s var(--ease); }
html.scrolled .bar::after { opacity: 1; }
html { scroll-padding-top: calc(var(--bar-h) + var(--s3)); }
/* every inner page opens below the bar, on every width */
.page-head { padding-top: calc(var(--bar-h) + var(--s6)); }
.mark { font-family: var(--disp); font-weight: 800; font-variation-settings: 'opsz' 30; font-size: 1.25rem; letter-spacing: .02em; text-transform: uppercase; display: inline-flex; align-items: baseline; gap: .45em; }
.mark small { font-weight: 500; font-size: .78em; letter-spacing: .12em; color: var(--ink-3); }
.nav { display: flex; gap: clamp(18px, 2.4vw, 40px); justify-self: center; }
.nav a, .bar-time { font-family: var(--disp); font-weight: 600; font-variation-settings: 'opsz' 12; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; }
.nav a { position: relative; padding: 14px 0; color: var(--ink-2); transition: color .3s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--sun); }
.bar-time { justify-self: end; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-time b { color: var(--ink); font-weight: 700; }

/* ---------- section scaffold ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sec { padding-block: var(--s7); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-2); margin-bottom: var(--s5); }
.sec-head .lab { grid-column: 1 / 3; grid-row: 1; align-self: end; }
.sec-head h1, .sec-head h2 { grid-column: 3 / 10; grid-row: 1; font-size: clamp(2.6rem, 1.8rem + 4.6vw, 6.6rem); }
.sec-head .more, .sec-head .side { grid-column: 10 / 13; grid-row: 1; justify-self: end; align-self: end; }
.sec-head .side { text-align: right; max-width: 22ch; }
.sec-head + .ledger, .sec-head + .index, .sec-head + .factors { border-top: 0; }
.more { font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 12; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .6em; padding-bottom: 3px; border-bottom: 2px solid var(--ink); transition: gap .35s var(--ease), border-color .35s var(--ease); }
.more::after { content: "→"; font-family: var(--text); font-weight: 400; font-size: 1.1em; line-height: 1; translate: 0 -1px; }
.more:hover, .more:focus-visible { gap: 1em; border-color: var(--sun); }

/* ---------- the hero: a still that becomes a film, pinned while the page
   arrives over it. --p is written by js/hero.js, 0 at the top and 1 once
   the hero has handed over. ---------- */
.hero-stick { position: relative; height: 165svh; }
.hero { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: var(--bar-h) 1fr auto; padding: 0 var(--gutter) var(--s4); overflow: hidden; isolation: isolate; }
.hero-film { position: absolute; inset: 0; z-index: -1; --p: 0; transform: scale(calc(1 + var(--p) * .06)); opacity: calc(1 - var(--p) * .92); background: #b98b5a; }
.hero-film picture, .hero-film img, .hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero-film video { opacity: 0; transition: opacity 1.4s var(--ease-io); }
.hero-film.is-playing video { opacity: 1; }
/* the type is ink on sand; a whisper of shade at the foot keeps the wordmark's baseline clean */
.hero-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251, 247, 239, .12) 0%, rgba(251, 247, 239, 0) 22%, rgba(23, 21, 15, 0) 62%, rgba(23, 21, 15, .16) 100%); }
.hero-top { --p: 0; opacity: calc(1 - var(--p)); translate: 0 calc(var(--p) * -24px); }
.hero-word { --p: 0; opacity: calc(1 - var(--p)); translate: 0 calc(var(--p) * -40px); }
.hero-stick.is-spent .hero { visibility: hidden; }
html.js .hero .lede, html.js .hero .line, html.js .hero .hero-word h1 { animation: rise 1.1s var(--ease) both; }
html.js .hero .line { animation-delay: .12s; }
html.js .hero .hero-word h1 { animation-delay: .22s; }
@keyframes rise { from { translate: 0 22px; } to { translate: 0 0; } }

/* ---------- the wall has a surface: a soft plaster mottle under the grain ---------- */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .12 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); background-size: 900px 900px; }

/* ---------- the ground: a sand relief the cursor can touch ---------- */
.ground { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------- icons: hairline, ink, 1.5 px ---------- */
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.index-row .ic, .factor .ic { width: 26px; height: 26px; color: var(--ink-3); }
.plate-facts dt .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.more .ic, .btn .ic { width: 1.05em; height: 1.05em; }
.foot-meta .ic, .bar-time .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }

/* ---------- feedback ---------- */
.progress { position: fixed; left: 0; top: 0; z-index: 7; width: 100%; height: 2px; background: var(--sun); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 8; pointer-events: none; translate: -50% -50%; opacity: 0; scale: .6; transition: opacity .25s var(--ease), scale .35s var(--ease); }
.cursor span { display: inline-flex; align-items: center; gap: .5em; padding: 10px 14px; border-radius: 999px; background: var(--ink); color: var(--wall); font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 12; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 30px rgba(23, 21, 15, .18); }
.cursor.is-on { opacity: 1; scale: 1; }
@media (pointer: fine) { [data-cursor] { cursor: none; } }
.plate-media { transition: box-shadow .5s var(--ease); }
.plate:hover .plate-media, .plate:focus-within .plate-media { box-shadow: 0 24px 60px -30px rgba(23, 21, 15, .45); }
.plate-cap h3 a { background-image: linear-gradient(var(--sun), var(--sun)); background-size: 0 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .45s var(--ease); }
.plate:hover .plate-cap h3 a, .plate-cap h3 a:focus-visible { background-size: 100% 3px; }
.plate:hover .plate-cap .n { color: var(--sun-ink); }
.plate-open { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--wall); color: var(--ink); opacity: 0; translate: 0 -6px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.plate:hover .plate-open, .plate:focus-within .plate-open { opacity: 1; translate: 0 0; }
.btn, .more, .wall-filter button { transition: translate .25s var(--ease), background-color .3s var(--ease), color .3s var(--ease), gap .35s var(--ease), border-color .35s var(--ease); }
.btn:active { scale: .97; }
.btn.is-busy { background: var(--sun-ink); border-color: var(--sun-ink); color: var(--wall); pointer-events: none; }
.wall-filter button.is-pulse { animation: pulse .4s var(--ease); }
@keyframes pulse { 0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }
.field { position: relative; }
.field .hint { min-height: 1.2em; margin-top: 6px; color: var(--sun-ink); letter-spacing: .06em; text-transform: none; font-size: .82rem; }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-bottom-color: var(--sun); box-shadow: 0 1px 0 var(--sun); }
.field.is-ok::after { content: ""; position: absolute; right: 0; top: 28px; width: 9px; height: 5px; border-left: 2px solid var(--sun-ink); border-bottom: 2px solid var(--sun-ink); rotate: -45deg; }
.field input, .field textarea, .field select { transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 1px 0 var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 9; translate: -50% 20px; opacity: 0; padding: 12px 18px; background: var(--ink); color: var(--wall); font-family: var(--disp); font-weight: 600; font-variation-settings: 'opsz' 12; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; max-width: calc(100vw - 40px); overflow: hidden; text-overflow: ellipsis; transition: translate .4s var(--ease), opacity .4s var(--ease); pointer-events: none; }
.toast.is-on { translate: -50% 0; opacity: 1; }
.toast.is-bad { background: var(--sun-ink); }
.to-top { appearance: none; -webkit-appearance: none; background: none; border: 1px solid var(--rule-2); color: var(--ink-2); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease), translate .25s var(--ease); }
.to-top:hover, .to-top:focus-visible { border-color: var(--ink); color: var(--ink); translate: 0 -3px; }
.text a, .plate-note a, .foot-sun a { border-bottom: 1px solid var(--rule-2); transition: border-color .3s var(--ease), color .3s var(--ease); }
.text a:hover, .plate-note a:hover, .foot-sun a:hover { border-color: var(--sun); color: var(--ink); }
.nav a:active { translate: 0 1px; }
.index-row { transition: background-color .4s var(--ease); }
.index-row:hover { background-color: rgba(23, 21, 15, .025); }

/* ---------- grain: one living texture over the whole page ---------- */
body::after { content: ""; position: fixed; inset: -20%; z-index: 6; pointer-events: none; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 100% { transform: translate(-6%, 8%); } }

/* ---------- plates drift a few percent as they pass (js/hero.js) ---------- */
.plate-media img { transform: scale(1.1); will-change: transform; }

.hero-top { grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: start; padding-top: var(--s5); }
.hero-top .lab { grid-column: 1 / 5; }
.hero-top .lede { grid-column: 8 / 13; }
.hero-word { grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gap); align-items: end; }
/* "THORNBURY" in Big Shoulders 800 measures 5.94 em wide, so .166 of the
   column fills it edge to edge at any width; the svh term keeps a short
   laptop viewport from pushing the wordmark under the fold. */
.hero-word h1 { grid-column: 1 / 13; grid-row: 2; font-size: min(calc((100vw - 2 * var(--gutter)) * .166), 36svh); line-height: .82; letter-spacing: -.012em; margin-left: -.04em; white-space: nowrap; }
.hero-word h1 span { display: inline-block; width: max-content; }
/* js/main.js refits any .fit heading to its column after the fonts arrive,
   because the calc above is only an estimate of how wide the face renders */
.hero-word .line { grid-column: 1 / 8; grid-row: 1; font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.9rem); line-height: 1.1; font-variation-settings: 'opsz' 40; margin-bottom: .55em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- plates: the one component every page hangs its work on ---------- */
.plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s6); }
.plate { display: grid; gap: 14px; align-content: start; }
.plate-media { position: relative; border: 1px solid var(--plate-edge); background: var(--wall-2); overflow: hidden; }
.plate-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.plate:hover .plate-media img, .plate:focus-within .plate-media img { transform: scale(1.015); }
.plate-cap { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--gap); align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule-2); }
.plate-cap .n { font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 12; font-size: .84rem; letter-spacing: .1em; color: var(--ink-3); }
.plate-cap h3 { font-family: var(--disp); font-weight: 800; font-variation-settings: 'opsz' 40; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem); text-transform: uppercase; line-height: .95; }
.plate-cap h3 a { display: inline-block; }
.plate-cap .meta { justify-self: end; text-align: right; }
.plate-note { color: var(--ink-2); max-width: 48ch; font-size: 1.02rem; }
.plate-link { justify-self: start; }

/* home: five plates hung at five heights across the wall */
.plates--home .plate:nth-child(1) { grid-column: 1 / 6; }
.plates--home .plate:nth-child(2) { grid-column: 7 / 13; margin-top: var(--s7); }
.plates--home .plate:nth-child(3) { grid-column: 2 / 7; margin-top: calc(-1 * var(--s5)); }
.plates--home .plate:nth-child(4) { grid-column: 8 / 12; margin-top: var(--s6); }
.plates--home .plate:nth-child(5) { grid-column: 4 / 10; }

/* work: the same plates, larger, with the caption beside them */
.plates--work { row-gap: var(--s7); }
.plates--work .plate { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.plates--work .plate-media { grid-column: 1 / 9; }
.plates--work .plate:nth-child(even) .plate-media { grid-column: 5 / 13; grid-row: 1; }
.plates--work .plate-side { grid-column: 9 / 13; display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--bar-h) + var(--s3)); }
.plates--work .plate:nth-child(even) .plate-side { grid-column: 1 / 5; grid-row: 1; }
.plates--work .plate-cap { grid-template-columns: auto 1fr; }
.plates--work .plate-cap .meta { grid-column: 1 / 3; justify-self: start; text-align: left; }
.plates--work .plate-cap h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 4.2rem); }
.plate-facts { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); row-gap: 6px; font-size: .98rem; color: var(--ink-2); }
.plate-facts dt { font-family: var(--disp); font-weight: 600; font-variation-settings: 'opsz' 12; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; }
.plate-facts dd { margin: 0; }

/* ---------- the collection wall: every site the studio has built, hung
   dense, every seventh plate at double width so the wall has a rhythm ---------- */
.wall-filter { display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 2vw, 32px); padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
.wall-filter button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 8px 0; cursor: pointer; font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 12; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.wall-filter button:hover, .wall-filter button:focus-visible { color: var(--ink); }
.wall-filter button[aria-pressed="true"] { color: var(--ink); border-color: var(--sun); }
.wall-filter button small { font-weight: 600; color: var(--ink-3); margin-left: .5em; letter-spacing: .06em; }
.wall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--gap); }
.wall-grid .plate:nth-child(7n + 1) { grid-column: span 2; }
.wall-grid .plate-cap h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.wall-grid .plate:nth-child(7n + 1) .plate-cap h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem); }
.wall-grid .plate-cap .meta { font-size: .74rem; }
.wall-grid .plate-note { font-size: .96rem; }
.wall-grid .plate[hidden] { display: none; }
.wall-count { font-variant-numeric: tabular-nums; }
/* the home teaser: the first eighteen plates as a mosaic, six across */
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.mosaic .plate { gap: 8px; }
.mosaic .plate-cap { grid-template-columns: 1fr; padding-top: 8px; }
.mosaic .plate-cap .n, .mosaic .plate-cap .meta, .mosaic .plate-note { display: none; }
.mosaic .plate-cap h3 { font-size: .92rem; letter-spacing: .04em; }
@media (max-width: 1024px) {
  .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--gap); }
  .wall-grid .plate:nth-child(7n + 1) { grid-column: span 2; }
  .wall-grid .plate-cap { grid-template-columns: 1fr; }
  .wall-grid .plate-cap .n { display: none; }
  .wall-grid .plate-cap .meta { grid-column: 1; }
  .wall-grid .plate-note { display: none; }
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mosaic .plate-cap h3 { font-size: .78rem; }
}

/* ---------- statement bands ---------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); align-items: start; }
.statement .lab { grid-column: 1 / 3; }
.statement h1, .statement h2 { grid-column: 3 / 12; font-size: clamp(2.4rem, 1.4rem + 5.2vw, 7.4rem); line-height: .9; }
.statement h1 em, .statement h2 em { font-family: var(--text); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-variation-settings: 'opsz' 72; font-size: .92em; }
.statement .text { grid-column: 3 / 8; }
.statement .aside { grid-column: 9 / 13; }

/* the principles: a hairline index, numbered */
.index { border-top: 1px solid var(--rule-2); }
.index-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.index-row .n { grid-column: 1 / 2; font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 72; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); color: var(--ink-3); line-height: 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.factor .n { display: flex; align-items: center; gap: 10px; }
.index-row h3 { grid-column: 2 / 7; font-family: var(--disp); font-weight: 800; font-variation-settings: 'opsz' 60; font-size: clamp(1.7rem, 1.2rem + 2vw, 3.4rem); text-transform: uppercase; line-height: .92; }
.index-row .text { grid-column: 8 / 12; }

/* ---------- services: the rate ---------- */
.ledger { border-top: 1px solid var(--rule-2); }
.rate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.rate-fig { grid-column: 1 / 6; font-family: var(--disp); font-weight: 800; font-variation-settings: 'opsz' 72; font-size: clamp(3.6rem, 2rem + 8vw, 11rem); line-height: .86; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rate-fig small { font-size: .42em; font-weight: 700; color: var(--sun-ink); letter-spacing: .02em; vertical-align: .55em; margin-right: .1em; }
.rate-name { grid-column: 1 / 6; margin-top: 12px; }
.terms { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s4); }
.term .lab { margin-bottom: 8px; }
.term p { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.2; font-variation-settings: 'opsz' 24; }
.factors { border-top: 1px solid var(--rule-2); }
.factor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.factor .n { grid-column: 1 / 2; font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 12; font-size: .84rem; color: var(--ink-3); letter-spacing: .1em; }
.factor h3 { grid-column: 2 / 6; font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 40; font-size: clamp(1.3rem, 1rem + 1vw, 2rem); text-transform: uppercase; line-height: 1; }
.factor p { grid-column: 6 / 11; color: var(--ink-2); font-size: 1rem; }
.factor .q { grid-column: 11 / 13; justify-self: end; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s6); }
.contact .lead { grid-column: 1 / 7; }
.contact .lead h1 { font-size: clamp(3rem, 1.6rem + 8vw, 11rem); line-height: .84; }
.contact .lead .lede { margin-top: var(--s4); }
.contact .lead .email { display: inline-block; margin-top: var(--s4); font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 40; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.6rem); text-transform: uppercase; letter-spacing: .01em; border-bottom: 3px solid var(--sun); line-height: 1.1; }
.contact form { grid-column: 8 / 13; display: grid; gap: var(--s4); align-content: start; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--disp); font-weight: 600; font-variation-settings: 'opsz' 12; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-2); padding: 10px 0; font-size: 1.1rem; font-family: var(--text); font-variation-settings: 'opsz' 18; color: var(--ink); border-radius: 0; transition: border-color .3s var(--ease); }
.field textarea { min-height: 6.5em; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.field select option { color: #17150f; background: #ebe7df; }
.btn { appearance: none; -webkit-appearance: none; cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: .8em; min-height: 52px; padding: 0 22px; background: var(--ink); color: var(--wall); border: 1px solid var(--ink); font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 12; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; transition: background-color .3s var(--ease), color .3s var(--ease), gap .35s var(--ease); }
.btn::after { content: "→"; font-family: var(--text); font-weight: 400; font-size: 1.15em; line-height: 1; }
.btn:hover, .btn:focus-visible { background: var(--sun); color: #17150f; border-color: var(--sun); gap: 1.1em; }
.form-note { color: var(--ink-3); font-size: .95rem; font-style: italic; }
.form-sent { border-top: 1px solid var(--rule-2); padding-top: var(--s3); }

/* ---------- foot ---------- */
.foot { border-top: 1px solid var(--rule-2); margin-top: var(--s7); padding: var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s4); align-items: start; }
.foot .mark { grid-column: 1 / 4; }
.foot-nav { grid-column: 4 / 7; display: grid; gap: 8px; }
.foot-nav a { font-family: var(--disp); font-weight: 600; font-variation-settings: 'opsz' 12; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); width: max-content; }
.foot-nav a:hover { color: var(--ink); }
.foot-sun { grid-column: 7 / 11; color: var(--ink-2); font-size: 1rem; max-width: 34ch; }
.foot-sun b { font-family: var(--disp); font-weight: 700; font-variation-settings: 'opsz' 12; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-variant-numeric: tabular-nums; }
.foot-meta { grid-column: 11 / 13; justify-self: end; text-align: right; display: grid; gap: 8px; }

/* ---------- reveals: gated on html.js, failsafed in main.js ---------- */
html.js .reveal { opacity: 0; translate: 0 14px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
html.js .reveal.is-in { opacity: 1; translate: 0 0; }
html.js .reveal.d1 { transition-delay: .08s; }
html.js .reveal.d2 { transition-delay: .16s; }
html.js .reveal.d3 { transition-delay: .24s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; translate: none; transition: none; }
  html.js #main { transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 1024 and under: the wall narrows, the plates stack in twos ---------- */
@media (max-width: 1024px) {
  .hero-top .lab { grid-column: 1 / 7; }
  .hero-top .lede { grid-column: 7 / 13; }
  .hero-word .line { grid-column: 1 / 13; grid-row: 1; }
  .sec-head { grid-template-rows: auto auto; }
  .sec-head h1, .sec-head h2 { grid-column: 3 / 13; grid-row: 1; }
  .sec-head .more, .sec-head .side { grid-column: 3 / 13; grid-row: 2; justify-self: start; text-align: left; max-width: none; margin-top: var(--s3); }
  .plates--home .plate:nth-child(1) { grid-column: 1 / 7; }
  .plates--home .plate:nth-child(2) { grid-column: 7 / 13; margin-top: var(--s6); }
  .plates--home .plate:nth-child(3) { grid-column: 1 / 7; margin-top: 0; }
  .plates--home .plate:nth-child(4) { grid-column: 7 / 13; margin-top: var(--s6); }
  .plates--home .plate:nth-child(5) { grid-column: 3 / 11; }
  .plates--work .plate-media { grid-column: 1 / 13; }
  .plates--work .plate:nth-child(even) .plate-media { grid-column: 1 / 13; grid-row: auto; }
  .plates--work .plate-side, .plates--work .plate:nth-child(even) .plate-side { grid-column: 1 / 13; grid-row: auto; position: static; }
  .statement h1, .statement h2 { grid-column: 1 / 13; }
  .statement .text { grid-column: 1 / 8; }
  .statement .aside { grid-column: 8 / 13; }
  .index-row h3 { grid-column: 2 / 8; }
  .index-row .text { grid-column: 8 / 13; }
  .rate-fig, .rate-name { grid-column: 1 / 13; }
  .terms { grid-column: 1 / 13; margin-top: var(--s4); }
  .factor h3 { grid-column: 2 / 7; }
  .factor p { grid-column: 7 / 11; }
  .contact .lead { grid-column: 1 / 13; }
  .contact form { grid-column: 1 / 9; }
  .foot .mark { grid-column: 1 / 5; }
  .foot-nav { grid-column: 5 / 8; }
  .foot-sun { grid-column: 8 / 13; }
  .foot-meta { grid-column: 1 / 13; justify-self: start; text-align: left; }
}

/* ---------- 760 and under: a phone is composed again, not shrunk ---------- */
@media (max-width: 760px) {
  :root { --bar-h: 84px; }
  body { font-size: 1.05rem; }
  .bar { grid-template-columns: 1fr auto; }
  .nav { grid-column: 1 / 3; grid-row: 2; justify-self: start; gap: 18px; }
  .bar { height: var(--bar-h); padding-top: 10px; padding-bottom: 6px; row-gap: 0; align-content: start; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .5s var(--ease); }
  html.scrolled .bar { background: var(--wall); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar::after { left: 0; right: 0; }
  .bar-time { display: none; }
  .nav a { padding: 8px 0; font-size: .78rem; }
  .hero { grid-template-rows: var(--bar-h) 1fr auto; padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
  .hero-top { padding-top: var(--s4); row-gap: var(--s4); }
  .hero-top .lab, .hero-top .lede { grid-column: 1 / 13; }
  /* the phone breaks the wordmark in two: THORN over BURY, each line .30 of the column */
  .hero-word h1 { font-size: calc((100vw - 2 * var(--gutter)) * .295); line-height: .84; margin-left: -.03em; white-space: normal; }
  .hero-word h1 span { display: block; width: max-content; }
  .hero-word .line { font-size: 1.5rem; margin-bottom: .7em; }
  .sec { padding-block: var(--s6); }
  .sec-head { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: var(--s2); }
  .sec-head .lab { grid-column: 1; grid-row: 1; }
  .sec-head h1, .sec-head h2 { grid-column: 1; grid-row: 2; }
  .sec-head .more, .sec-head .side { grid-column: 1; grid-row: 3; margin-top: var(--s2); }
  .plates { row-gap: var(--s5); }
  .plates--home .plate, .plates--home .plate:nth-child(n) { grid-column: 1 / 13; margin-top: 0; }
  .plate-cap { grid-template-columns: auto 1fr; }
  .plate-cap .meta { grid-column: 1 / 3; justify-self: start; text-align: left; }
  .plates--work { row-gap: var(--s6); }
  .statement { row-gap: var(--s4); }
  .statement .lab, .statement h2, .statement .text, .statement .aside { grid-column: 1 / 13; }
  .index-row { grid-template-columns: 2.6rem 1fr; row-gap: 12px; padding: var(--s3) 0; }
  .index-row .n { grid-column: 1; grid-row: 1; }
  .index-row h3 { grid-column: 2; grid-row: 1; }
  .index-row .text { grid-column: 2; grid-row: 2; }
  .rate { padding: var(--s4) 0; }
  .terms { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
  .term { display: grid; grid-template-columns: 1fr 1.4fr; align-items: baseline; column-gap: var(--s3); padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .term .lab { margin: 0; }
  .term p { font-size: 1.1rem; }
  .factor { grid-template-columns: 2.6rem 1fr auto; row-gap: 6px; }
  .factor .n { grid-column: 1; grid-row: 1; }
  .factor h3 { grid-column: 2; grid-row: 1; }
  .factor p { grid-column: 2; grid-row: 2; }
  .factor .q { grid-column: 3; grid-row: 1; }
  .contact form { grid-column: 1 / 13; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .btn { width: 100%; justify-content: space-between; min-height: 52px; }
  .foot { grid-template-columns: 1fr 1fr; row-gap: var(--s4); margin-top: var(--s6); }
  .foot .mark { grid-column: 1 / 3; }
  .foot-nav { grid-column: 1; }
  .foot-sun { grid-column: 2; }
  .foot-meta { grid-column: 1 / 3; }
}
@media (max-width: 400px) {
  .nav { gap: 14px; }
  .nav a { font-size: .74rem; letter-spacing: .1em; }
}