/* Round 3: one material palette, four native pages, soft photographic seams. */
@import url('fonts/bodoni-local.css');
@font-face { font-family: Switzer; src: url('fonts/Switzer-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --bone: #F4F3F1; --deep: var(--linen); --linen: #D4C7B9; --ink: #1B130E; --gold-light: #C4B59C; /* Bryn 10-21: a touch less yellow (was #C9B695; same hue and lightness, ~25% less saturation) */
  /* Page grounds (10-20): each page has its own primary colour from the brand kit (pages.css); --band is its
     accent strip and --rule the resting link underline. Default = Alabaster page, Linen bands. */
  --canvas: var(--bone); --band: var(--linen); --rule: var(--gold);
  --bronze: #65503F; --gold: #B69C6D; --sage: #686754; --slate: #656E74;
  --soft: var(--bronze); --light: var(--gold-light);
  --sc-canvas: var(--canvas); --sc-surface: var(--deep); --sc-ink: var(--ink);
  --sc-ink-soft: var(--bronze); --sc-accent: var(--bronze); --sc-accent-ink: var(--bone);
  --sc-font-display: 'Bodoni Moda', Georgia, serif; --sc-font-text: Switzer, sans-serif;
  --pad: 24px; --section-space: 56px; --feather: 4px;
  --display: clamp(36px, 5vw, 64px); --subhead: clamp(28px, 2.6vw, 36px);
  --arrival-ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
/* Two grounds, two jobs (Adrian 10-20). The BODY is Linen because iOS 26+ Safari tints the strip behind the status
   bar from the body whenever no fixed bar covers the top edge (theme-color is ignored); the sticky bar is Linen too,
   so that strip is one tan everywhere. Safari also fills the area under its bottom toolbar at the end of the page
   with the body colour, so site.js turns the body Sage while the Sage footer is on screen (.at-end). The ROOT is
   Sage for any rubber-band past the footer. The top overscroll is painted by body::before. */
html { scroll-behavior: smooth; scrollbar-color: var(--bronze) var(--canvas); background: var(--sage); overscroll-behavior-y: none; }
body { margin: 0; background: var(--linen); color: var(--ink); font: 400 17px/1.65 Switzer, sans-serif; }
body.at-end { background: var(--sage); }
main { background: var(--canvas); }
.paper-opening { background: var(--linen); }
body::before { content: ''; position: absolute; left: 0; right: 0; top: -100vh; height: 100vh; background: var(--ink); pointer-events: none; }
body.page-studio::before, body.page-consult::before, body.page-404::before { background: var(--linen); }
main, section, figure, header, footer { min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
section > *, .field-pair > * { min-width: 0; }
::selection { background: var(--bronze); color: var(--bone); }
figure, p, h1, h2, h3, blockquote { margin: 0; }
p { max-width: 62ch; text-wrap: pretty; }
h1, h2, h3, .serif { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400; line-height: 1.12; }
h1, h2 { font-size: var(--display); letter-spacing: -.025em; text-wrap: balance; }
h3 { font-size: var(--subhead); text-wrap: balance; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 20px; }
button, a, input, select, textarea { touch-action: manipulation; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--bronze); outline-offset: 5px; }
.dark :focus-visible, .hero :focus-visible, .page-opening :focus-visible { outline-color: var(--bone); }
button:disabled { cursor: default; opacity: .6; }
.cap { font: 500 12px/1.6 Switzer, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.soft { color: var(--soft); }
.dark { color: var(--bone); background: var(--ink); }
.section { padding: var(--section-space) var(--pad); }
.skip { position: absolute; top: 8px; left: var(--pad); z-index: 20; padding: 8px 16px; background: var(--bone); transform: translateY(-180%); }
.skip:focus { transform: none; }
.arrow { width: 32px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1; flex: none; }
.text-link { max-width: 100%; border-bottom: 1px solid var(--gold); font: 500 12px/1.5 Switzer, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.button { display: flex; align-items: center; gap: 16px; background: var(--sage); color: var(--bone); padding: 16px 20px; min-height: 52px; justify-content: space-between; border: 1px solid var(--sage); cursor: pointer; font: 500 12px/1.5 Switzer, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.filter-defs { position: absolute; pointer-events: none; }

/* Same navigation and identity in every page. The home composition keeps its phone crop. */
.site-header { position: absolute; inset: 20px var(--pad) auto; z-index: 5; color: var(--bone); }
.site-header nav { display: flex; gap: clamp(12px, 3.2vw, 22px); align-items: center; padding-top: 10px; }
.site-header nav a { min-width: 44px; min-height: 44px; font: 500 12px/1.5 Switzer, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.site-header [aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; }
.masthead { position: absolute; top: 84px; left: 50%; width: 220px; transform: translateX(-50%); display: block; }
.masthead img { width: 100%; height: auto; }
.masthead-line { display: none; }
/* Phones over a photo: the one-line lockup. About a third of the stacked logo's height, and the words come out a
   size larger (11px caps instead of 9.5px), so the room keeps the frame. Desktop keeps the stacked signature. */
@media (max-width: 767px) {
  :is(.hero, .page-opening) .masthead { width: min(320px, 100%); top: 72px; }
  :is(.hero, .page-opening) .masthead-stacked { display: none; }
  :is(.hero, .page-opening) .masthead-line { display: block; }
}
.on-paper { color: var(--ink); }
.hero-act { background: var(--canvas); --hero-exit: 0; isolation: isolate; }
/* Safari 26 paints its top and bottom chrome in the colour of any sticky element that fills the viewport, which
   made the home page's bottom bar a solid Espresso block. WebKit skips viewport-sized sticky stages with a
   negative z-index, so the two full-screen stages sit at -1 inside an isolated act: same paint, glass chrome. */
.hero, .stack-photo { z-index: -1; }
/* Round 5: the stage is sized in lvh so an iOS toolbar collapse during the pin never exposes the act's ground below a 100svh stage. Bottom-anchored copy keeps its svh offset. */
/* +96px: iOS 26+ Safari draws the page under its glass toolbar and home indicator, below 100lvh. The extra keeps the
   room under the glass instead of a strip of the act's Linen (Adrian 10-20). */
.hero { position: sticky; top: 0; min-height: 0; height: calc(100vh + 96px); height: calc(100lvh + 96px); --toolbar: 0px; --toolbar: calc(100lvh - 100svh); background: var(--ink); color: var(--bone); isolation: isolate; overflow: hidden; }
.hero-photo, .hero .hero-clip { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero .sc-stage__poster { transform: none; }
.hero-photo img, .hero .hero-clip { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: .2; z-index: -1; pointer-events: none; }
.hero-seam { position: absolute; inset: auto 0 0; height: var(--feather); background: linear-gradient(to bottom, transparent, var(--canvas)); opacity: var(--hero-exit); pointer-events: none; z-index: 3; }

/* Only the material media is masked. Its one short line remains real, unmasked HTML. */
.material { --material-p: 1; position: relative; width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; isolation: isolate; }
.material-ground { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.material-poster, .material-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.material-clip { opacity: 0; pointer-events: none; }
.material.has-frame .material-clip { opacity: 1; }
.material-line { position: relative; padding: 14px 24px; max-width: 14ch; font: 400 clamp(32px, 9.6vw, 42px)/1.14 'Bodoni Moda', Georgia, serif; letter-spacing: -.025em; text-wrap: balance; text-align: center; color: var(--ink); }
.material--plaster .material-line { filter: url('#plaster-deboss'); }
.material--oak .material-line { transform: translate3d(0, calc((.5 - var(--material-p)) * 28px), 0); }
.material--linen .material-line { max-width: 9ch; font-style: italic; line-height: 1.2; }
.sc-ready .material--linen .material-line { clip-path: inset(0 calc((1 - var(--material-p)) * 100%) 0 0); opacity: calc(.5 + var(--material-p) * .5); }
.sc-ready .material--brass .material-line { opacity: calc(.36 + var(--material-p) * .64); filter: blur(calc((1 - var(--material-p)) * 2px)); }
.sc-ready .material--plaster .material-line { opacity: calc(.7 + var(--material-p) * .3); }

/* The promise and supporting prose share one floor, with the plaster between them. */
.manifesto { padding: 36px var(--pad) 0; }
.manifesto-opening { max-width: 39ch; font: 400 clamp(27px, 3vw, 42px)/1.3 'Bodoni Moda', Georgia, serif; letter-spacing: -.018em; }
.manifesto .material { margin-block: 8px; }
.manifesto-tail { display: grid; gap: 24px; padding-bottom: 24px; }
.manifesto-tail .text-link { margin-top: 20px; }

/* The dining photograph bleeds beneath the project introduction, never into a caption card. */
.project-reveal { overflow: clip; }
.reveal-frame { margin: 0; }
.reveal-frame img { width: 100%; height: 480px; object-fit: cover; object-position: 54% center; }
.project-caption { position: relative; padding: 16px var(--pad) 24px; display: grid; gap: 16px; }
.project-caption h2 { margin-top: 4px; font-size: 48px; }
.project-caption .text-link { justify-self: start; }
.project-rooms { color: var(--bronze); text-transform: none; letter-spacing: .04em; }

/* Oak supports the service assurance. Proximity replaces the ruled service table. */
.services { display: grid; gap: 24px; padding-top: 48px; padding-bottom: 48px; background: var(--band); --rule: var(--gold); }
.service-head { display: grid; gap: 20px; align-content: start; }
/* The two statements are one thought: kept together at every width, second line in bronze. */
.service-pair { display: grid; gap: 10px; max-width: 24ch; font: 400 clamp(22px, 2.1vw, 30px)/1.28 'Bodoni Moda', Georgia, serif; letter-spacing: -.015em; }
.service-pair p { max-width: none; text-wrap: pretty; }
.services-list { display: grid; gap: 32px; }
.service { display: grid; gap: 12px; }
.service p { color: var(--bronze); }
.services-next { margin-top: 24px; }

/* The hearth: four espresso edges close around the room as it settles (round 2, kept by Adrian). */
.project-stack { --frame: 0; --frame-gutter: 18px; background: var(--ink); color: var(--bone); isolation: isolate; }
/* Phones get the hearth as a plain photo (site.js flips the act to flow): no frame, so no gutter for the scrim to sit inside. */
.project-stack[data-sc-act="flow"] { --frame-gutter: 0px; }
.stack-photo { position: sticky; top: 0; min-height: 0; height: 100vh; height: 100lvh; --toolbar: 0px; --toolbar: calc(100lvh - 100svh); overflow: hidden; isolation: isolate; }
/* Before the mats close, the room meets the bone above through a feather instead of a hard line. */
.hearth-feather { position: absolute; top: 0; left: 0; right: 0; height: var(--feather); z-index: 1; background: linear-gradient(to bottom, var(--canvas), transparent); opacity: calc(1 - var(--frame)); pointer-events: none; }
.stack-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; z-index: -2; transform: scale(calc(1.045 - var(--frame) * .045)); transform-origin: 50% 60%; will-change: transform; }
.hearth-mat { position: absolute; z-index: 1; background: var(--ink); pointer-events: none; }
.hearth-mat--left, .hearth-mat--right { width: var(--frame-gutter); top: 0; bottom: 0; }
.hearth-mat--left { left: 0; transform: translateX(calc((var(--frame) - 1) * 100%)); }
.hearth-mat--right { right: 0; transform: translateX(calc((1 - var(--frame)) * 100%)); }
.hearth-mat--top, .hearth-mat--bottom { height: var(--frame-gutter); left: 0; right: 0; }
.hearth-mat--top { top: 0; transform: translateY(calc((var(--frame) - 1) * 100%)); }
.hearth-mat--bottom { bottom: 0; transform: translateY(calc((1 - var(--frame)) * 100%)); }
.hearth-caption-scrim { position: absolute; left: var(--frame-gutter); bottom: var(--frame-gutter); width: 640px; max-width: calc(100% - 2 * var(--frame-gutter)); height: 340px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at bottom left, rgb(27 19 14 / .54) 0%, rgb(27 19 14 / .3) 38%, rgb(27 19 14 / 0) 72%); }
.hearth-caption { position: absolute; left: calc(var(--frame-gutter) + 24px); right: calc(var(--frame-gutter) + 24px); bottom: calc(var(--frame-gutter) + 28px + var(--toolbar)); z-index: 3; max-width: 36ch; }
.hearth-caption h2 { font-size: 32px; line-height: 1.12; padding: 0; background: none; }
.hearth-caption h2 a { min-height: 48px; }
.hearth-caption p { font-size: 14px; line-height: 1.55; max-width: 33ch; margin-top: 6px; }
.hearth-caption a:focus-visible { outline-color: var(--bone); }
/* Overlap the ink seam 1px onto the hearth: on iOS high-DPR a sub-pixel rounding gap at this
   ink/ink abutment can flash a hairline of the bone <main> behind it. Ink over ink is invisible. */
.stack-seam { height: var(--feather); margin-top: -1px; background: linear-gradient(to bottom, var(--ink), var(--canvas)); }

/* Materials: four light studies at native 3:4, full frame, scrubbed by scroll. No words on them. The head names why they are here. */
.materials { padding: 40px var(--pad) 8px; background: var(--canvas); }
.materials-head { display: grid; gap: 12px; margin: 0 0 28px; }
.materials-head .cap { color: var(--bronze); }
.materials-line { max-width: 22ch; font: 400 clamp(30px, 3.4vw, 46px)/1.16 'Bodoni Moda', Georgia, serif; letter-spacing: -.02em; }
.materials-head .soft { max-width: 46ch; }
/* Phones: a 2x2 grid, all four studies in one glance (Adrian, Loom 10-20). */
.materials-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Every edge of each study softens into the bone, so the frames sit in the page rather than on it. */
.mat { position: relative; margin: 0; aspect-ratio: 3 / 4; background: var(--linen); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.mat-poster, .mat-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mat-clip { opacity: 0; transition: opacity 380ms ease-out; }
.mat.has-frame .mat-clip { opacity: 1; }

/* The Friday letter is ordinary prose on bone. */
.friday-title { font-size: clamp(36px, 4vw, 56px); }
.manifesto-promise { margin: 14px 0 26px; max-width: 24ch; color: var(--bronze); font: 400 clamp(30px, 3.6vw, 48px)/1.18 'Bodoni Moda', Georgia, serif; letter-spacing: -.02em; }
.friday { display: grid; gap: 16px; padding-top: 36px; padding-bottom: 32px; }
.friday .material { margin-top: -20px; }
.letter { display: grid; gap: 24px; }
.letter-header { display: flex; align-items: center; gap: 16px; }
.letter-header img { width: 34px; height: auto; flex: none; }
.letter blockquote { font: 400 17px/1.8 Switzer, sans-serif; max-width: 54ch; }
.letter .signoff { max-width: 40ch; color: var(--bronze); text-transform: none; letter-spacing: .04em; }

/* The texture-free ending resolves into usable fields, then the shared dark colophon. */
.inquiry { display: grid; gap: 36px; background: var(--canvas); padding-top: 64px; padding-bottom: 24px; }
.inquiry-intro { display: grid; align-content: start; gap: 24px; }
.inquiry h2 { max-width: 12ch; }
.inquiry-intro .text-link { justify-self: start; text-transform: none; letter-spacing: 0; font-size: 17px; overflow-wrap: anywhere; }
.inquiry form { display: grid; gap: 28px; }
.field-pair { display: grid; gap: 28px; }
.field { display: grid; gap: 8px; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 52px; border: 0; border-bottom: 1px solid var(--bronze); background: transparent; padding: 10px 0; caret-color: var(--bronze); }
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--soft); opacity: 1; }
.form-note { font-size: 15px; color: var(--bronze); }
.form-result a { overflow-wrap: anywhere; }
.form-result[hidden] { display: none; }
.footer { padding: 56px var(--pad) 30px; background: var(--sage); color: var(--bone); }
.footer-top { display: grid; gap: 28px; padding-bottom: 32px; }
.footer-logo { width: 220px; max-width: 100%; height: auto; }
.footer-contacts { display: grid; gap: 6px; }
.footer-contacts a { overflow-wrap: anywhere; letter-spacing: 0; text-transform: none; font-size: 17px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgb(244 243 241 / .22); }

/* Interior pages share a shell while the reading has its own rhythm. */
.page-opening { position: relative; isolation: isolate; color: var(--bone); height: min(760px, 94svh); min-height: 590px; background-color: var(--canvas); }
.opening-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 43% center; z-index: -3; }
.page-opening::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(rgb(27 19 14 / .34), transparent 160px), radial-gradient(ellipse 95% 55% at 0% 100%, rgb(27 19 14 / .5), rgb(27 19 14 / .22) 45%, transparent 75%); }
.page-opening::after { content: ''; position: absolute; inset: auto 0 0; height: var(--feather); background: linear-gradient(to bottom, transparent, var(--below, var(--canvas))); z-index: -1; }
.opening-caption { position: absolute; inset: auto var(--pad) 64px; display: grid; gap: 14px; }
.opening-caption h1 { font-size: clamp(44px, 8vw, 88px); }
.opening-caption .cap { max-width: 42ch; }
.paper-opening { position: relative; height: 300px; }
/* One reading measure, six ruled rows. The gate closes each phase. */
.process { padding: 20px var(--pad) 48px; }
.process-intro, .phases { max-width: 1160px; margin-inline: auto; }
.process-intro { margin-bottom: 32px; }
.process-lede { max-width: 42ch; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(27px, 3.2vw, 42px); line-height: 1.3; letter-spacing: -.015em; }
.process-lede + .process-lede { margin-top: .9em; }
.phases { list-style: none; margin-block: 0; padding: 0; border-bottom: 1px solid var(--linen); }
.phase { display: grid; gap: 16px; padding-block: 24px; border-top: 1px solid var(--linen); align-items: start; }
.phase h2 { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: baseline; font-size: 28px; line-height: 1.2; }
.phase .phase-number { font: 400 24px/1 'Bodoni Moda', Georgia, serif; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--sage); }
.phase .phase-body { min-width: 0; max-width: 60ch; }
.phase .phase-body > p { max-width: none; color: var(--bronze); }
.gate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linen); }
.gate .cap { color: var(--bronze); }
.gate p { font-size: 16px; }
.overlap { margin-top: 20px; max-width: none; color: var(--bronze); font-size: 16px; }
.consult-close h2 { font-size: clamp(32px, 4.5vw, 56px); }
.studio-intro { display: grid; gap: 28px; padding-top: 8px; padding-bottom: 48px; }
.studio-story { display: grid; gap: 28px; }
.studio-story blockquote { font: 400 var(--subhead)/1.3 'Bodoni Moda', Georgia, serif; max-width: 28ch; }
.about-signature { display: grid; gap: 10px; }
.about-signature .serif { font-size: 28px; font-style: italic; }
.about-signature .cap { color: var(--bronze); }
.parade { padding: 64px var(--pad); background: var(--band); --rule: var(--gold); display: grid; gap: 24px; }
.parade > .cap { color: var(--ink); }
.parade h2 { font-size: var(--subhead); max-width: 18ch; }
.parade-body { display: grid; gap: 20px; }
.parade-body p a { display: inline; min-height: 0; border-bottom: 1px solid var(--ink); }
/* The Parade lockup, set in the site's own type: a link to the Parade site, not a copied logo. */
.parade-mark { display: grid; gap: 2px; justify-self: start; justify-items: start; min-height: 0; color: var(--ink); }
.parade-mark .cap { color: var(--ink); font-size: 12px; }
.parade-mark .serif { font-size: 26px; line-height: 1.05; letter-spacing: -.01em; }
.parade-mark em { font-style: italic; font-size: .8em; }
.studio-arrival { background: var(--canvas); padding: 48px var(--pad) 8px; overflow: clip; }
.studio-arrival figure { max-width: 1000px; margin: 0 auto; }
.studio-arrival img { width: 100%; height: 480px; object-fit: cover; object-position: 60% center; }
/* Framed photographs (anything narrower than the page) feather on all four sides; full-bleed ones only top and bottom. */
.studio-arrival img, .work-room--great img, .work-room--hearth img, .work-room--bedside img, .team-portrait img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 18px), transparent), linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 18px), transparent), linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.studio-arrival figcaption { position: relative; margin-top: 12px; color: var(--bronze); }
.work-opening { height: 100svh; min-height: 640px; }
.work-opening .opening-photo { object-position: 54% center; }
.work-sequence { overflow: clip; padding-top: 20px; }
.work-room { padding: 28px var(--pad); }
.work-room img { width: 100%; height: auto; }
.work-room figcaption { padding-top: 12px; color: var(--bronze); }
.work-room--hearth { background: var(--band); }
.work-room--hearth figcaption { color: var(--bronze); }
.work-room--hearth img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 48% center; }
.work-room--bedroom { padding-inline: 0; }
.work-room--bedroom figcaption { padding-inline: var(--pad); }
.work-room--bedroom .room-photo { overflow: hidden; }
.work-room--bedroom .bedroom-parallax { width: 100%; height: 430px; object-fit: cover; object-position: 43% center; margin-block: 30px; }
.work-room--bedside img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 60% center; }

/* Meet the team: one framed portrait beside the studio's own words, feathered like every framed photograph. */
.team-intro { display: grid; gap: 28px; padding-top: 8px; padding-bottom: 48px; }
.team-head { display: grid; gap: 12px; }
.team-head .cap { color: var(--bronze); }
.team-portrait { margin: 0; display: grid; gap: 12px; }
.team-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 18%; }
.team-portrait figcaption { color: var(--bronze); }
.team-story .text-link { justify-self: start; }
.team-bio { font-size: 15px; max-width: 46ch; margin-top: 6px; }

/* Complete passages arrive once. Departing accents fade only at the top edge, never while being read. */
[data-sc-arrival] { --arrive: 1; }
html:not(.sc-ready) [data-sc-in] { opacity: 1; transform: none; }
html:not(.sc-ready) .hero-seam { opacity: 1; }
.sc-ready [data-sc-arrival] { opacity: calc(.8 + var(--arrive) * .2); transform: translate3d(0, calc((1 - var(--arrive)) * 22px), 0); }
.sc-ready .studio-arrival [data-sc-arrival] { transform: translate3d(calc((var(--arrive) - 1) * 22px), calc((1 - var(--arrive)) * 28px), 0); }
.sc-ready [data-sc-in] { opacity: .5; transform: translate3d(0, 20px, 0); transition: opacity 760ms var(--arrival-ease), transform 900ms var(--arrival-ease); }
.sc-ready [data-sc-in].sc-in, .sc-ready [data-sc-in]:focus-within { opacity: 1; transform: none; }
.sc-ready [data-sc-depart] { opacity: var(--depart, 1); }
.sc-ready [data-sc-depart]:focus-within { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled) { transition: background-color 160ms ease-out; }
  .button:not(:disabled):hover { background: var(--ink); }
}
/* A narrow desktop window should not inherit an 850px-tall phone material passage. */
@media (min-width: 600px) {
  .material { aspect-ratio: auto; min-height: 340px; }
  .material-poster, .material-clip { object-fit: cover; }
  .manifesto .material-line { max-width: 22ch; }
}
@media (min-width: 768px) {
  .project-stack { --frame-gutter: 36px; }
  .hearth-caption h2 { font-size: 40px; }
  .materials { padding: 56px var(--pad) 24px; }
  .materials-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  :root { --pad: 48px; --section-space: 72px; --feather: 6px; }
  .masthead { width: 250px; }
  .hero::after { opacity: .22; }
  .manifesto { padding-top: 48px; }
  .manifesto-opening { max-width: 38ch; }
  .material { aspect-ratio: auto; min-height: 390px; }
  .material-poster, .material-clip { object-fit: cover; }
  .material-line { font-size: clamp(38px, 4.5vw, 60px); }
  .material-ground { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
  .manifesto .material { min-height: 370px; margin-block: 12px 0; }
  .manifesto .material-line { max-width: 24ch; font-size: clamp(42px, 5vw, 66px); padding-inline: 48px; }
  .manifesto-tail { padding-bottom: 28px; }
  .manifesto-tail > div { max-width: 62ch; }
  .reveal-frame img { height: 620px; }
  .project-caption { grid-template-columns: 1fr auto; gap: 12px 32px; }
  /* Four-side feathers widen on larger screens; on phones they stay narrow so the frames keep their size. */
  .mat { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent), linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent), linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
  .studio-arrival img, .work-room--great img, .work-room--hearth img, .work-room--bedside img, .team-portrait img { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 40px), transparent), linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 40px), transparent), linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  .project-caption .text-link { align-self: end; }
  .project-rooms { grid-column: 1 / -1; }
  .services { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px 48px; padding-top: 44px; padding-bottom: 36px; }
  .service-head { grid-column: 1; align-self: start; gap: 24px; }
  .services-detail { grid-column: 2; align-self: start; }
  .services-list { gap: 28px; }
  .service h3 { font-size: 30px; }
  .hearth-caption h2 { font-size: 44px; }
  .hearth-caption p { font-size: 15px; }
  .friday { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding-top: 64px; }
  .friday .material { min-height: 430px; margin: 0; }
  .friday .material-line { font-size: 54px; }
  .inquiry { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; padding-top: 128px; }
  .inquiry h2 { font-size: 44px; }
  .footer-top { display: flex; justify-content: space-between; align-items: start; gap: 48px; }
  .footer-logo { width: 260px; }
  .page-opening { height: 88svh; min-height: 680px; }
  .paper-opening { height: 316px; }
  .process { padding-top: 28px; }
  .process-intro { margin-bottom: 40px; }
  .process-lede { font-size: 34px; }
  .phase { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; padding-block: 28px; }
  .consult-close h2 { max-width: 12ch; }
  .studio-intro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
  .team-intro { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px 56px; align-items: start; }
  .team-head { grid-column: 1 / -1; }
  .team-portrait { max-width: 520px; }
  .studio-story { gap: 32px; }
  .parade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 56px; padding-block: 88px; }
  .parade > .cap { grid-column: 1 / -1; }
  .parade h2, .parade-mark { grid-column: 1; }
  .parade-mark { margin-top: 8px; }
  .parade-body { grid-column: 2; grid-row: 2 / 4; }
  .studio-arrival img { height: 630px; }
  .work-opening { height: 100svh; }
  .work-room { padding-block: 44px; }
  .work-room--great { max-width: 1240px; margin: 0 auto; }
  .work-room--hearth .room-photo { width: 68%; margin-left: auto; }
  .work-room--hearth img { aspect-ratio: 4 / 5; }
  .work-room--hearth figcaption { margin-left: 32%; }
  .work-room--bedroom .bedroom-parallax { height: 680px; }
  .work-room--bedside { width: 70%; }
  .work-room--bedside img { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .site-header { top: 28px; }
  .site-header nav { gap: 26px; }
  .masthead { top: 16px; width: 260px; }
  .field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper-opening { height: 272px; }
  .footer-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
  .footer-contacts .location { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .project-stack { --frame-gutter: 64px; }
  .materials-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .materials-line { margin-bottom: 36px; }
  :root { --pad: 64px; --section-space: 80px; }
  .manifesto .material { min-height: 410px; }
  .services { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 88px; }
  .service { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; }
  .friday { gap: 88px; }
  .friday .material { min-height: 450px; }
  .inquiry { gap: 88px; }
  .process-lede { font-size: 40px; }
  .phase { column-gap: 48px; }
  .phase h2 { font-size: 30px; }
  .studio-intro, .parade, .team-intro { column-gap: 100px; }
  .studio-arrival figure { margin-left: auto; margin-right: 0; }
  .work-room--bedside { width: 60%; }
}
@media (max-width: 767px) and (max-height: 600px) {
  :is(.hero, .page-opening) .masthead { top: 66px; }
}
/* A compact bar that follows the reader once the page header has scrolled away. Built by site.js from the header's own nav. */
.nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 8px var(--pad); padding-top: calc(8px + env(safe-area-inset-top, 0px)); color: var(--ink); background: var(--linen); border-bottom: 1px solid rgb(101 80 63 / .22); transform: translateY(-100%); visibility: hidden; transition: transform 420ms var(--arrival-ease), visibility 0s linear 420ms; }
.nav-bar.is-on { transform: none; visibility: visible; transition: transform 420ms var(--arrival-ease); }
.nav-bar-mark { min-height: 44px; min-width: 44px; flex: none; }
.nav-bar-mark img { height: 34px; width: auto; }
.nav-bar-lockup { display: none; }
.nav-bar nav { display: flex; gap: clamp(10px, 2.8vw, 22px); margin-left: auto; }
.nav-bar nav a { min-height: 44px; min-width: 44px; justify-content: center; font: 500 12px/1.5 Switzer, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.nav-bar [aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
@media (min-width: 768px) { .nav-bar nav a { font-size: 12px; letter-spacing: .1em; } .nav-bar nav { gap: 26px; } .nav-bar-mark img { height: 38px; } }
@media (min-width: 1024px) { .nav-bar-monogram { display: none; } .nav-bar-lockup { display: block; } .nav-bar-mark img.nav-bar-lockup { height: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .mat-clip { display: none; }
  .hearth-mat { transform: none; }
  .stack-img { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-act, .project-stack { height: auto !important; }
  .hero, .stack-photo { position: relative; }
  .hero .hero-clip, .material .material-clip { display: none !important; }
  .hero .sc-stage__poster,
  .sc-ready [data-sc-in], .sc-ready [data-sc-arrival], .sc-ready [data-sc-depart],
  .sc-ready .material .material-line { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .material--brass .material-line { filter: none !important; }
  .material--oak .material-line, .stack-img { transform: none; }
  .hero-seam { opacity: 1; }
  .hearth-feather { opacity: 0; }
  .work-room--bedroom .bedroom-parallax { transform: none !important; }
}