/* =============================================================================
   The Golden Woodshop — site.css
   The ONE stylesheet. No inline styles anywhere in the PHP. Order of blocks:
   1 Tokens · 2 Base · 3 Layout & sidebar · 4 Section framework · 5 Home sections
   6 Images · 7 Transitions · 8 Media queries live inside the block they affect
   ============================================================================= */

/* ---------- 0. Self-hosted fonts (SEO decision 8) ---------- */
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 400;font-display:swap;src:url("../fonts/fraunces-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/fraunces-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/work-sans-italic.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/work-sans-normal.woff2") format("woff2")}

/* ---------- 1–3. Tokens, base, layout, sidebar, section framework ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--gold:#bb812e;--rock:#6d4c45;--brass:#f4ca90;--off:#ebd9c1;--base:#070401;--base2:#0a0602;--base3:#0d0803;--rockdeep:#4a3330;--muted:rgba(235,217,193,.66);--side:320px;--side-max:512px;--content:min(clamp(912px,74.2vw,1680px),calc(100vw - var(--side)));--pad:clamp(24px,3.75vw,72px);--x0:calc(50% - var(--content)/2);--nudge:10px;--text-min:53px;--vh:100dvh;--serif:Fraunces,Georgia,serif;--sans:"Work Sans","Helvetica Neue",Arial,sans-serif;--logo:url("../img/logo/workshop-logo-alt.svg?v=1788454153");--mark:url("../img/logo/golden-mark.svg?v=1788452678")}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
html,body{height:100%}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--base);color:var(--off);font-family:var(--sans);font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;text-wrap:balance}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block;max-width:100%}
.site{display:grid;grid-template-columns:var(--side) minmax(0,var(--content)) minmax(0,1fr);height:100vh;height:var(--vh)}
/* the sidebar holds at --side on every screen (Nik, 2026-09-21: keep it small); the old wide-screen
   growth to --side-max is retired but the token is left in case it comes back */
/* sidebar: real wood, fills everything left of the content column */
.side{grid-column:1;position:relative;height:100vh;height:var(--vh);overflow:hidden;background:var(--base) var(--wood) var(--wood-pos,center)/var(--wood-size,cover) var(--wood-repeat,no-repeat);z-index:3}
.main{position:relative;z-index:1}
.side::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
/* contents hug the page edge, where the wall is in shade, so the type sits on the darkest wood */
/* deliberately no z-index: a stacking context here would isolate the brand mark's blend modes
   from the wood behind it, and the burn would composite against nothing. */
.side-in{position:relative;width:var(--side);margin-left:auto;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;text-align:right;padding:40px var(--side-pad-r,30px) calc(360px * 1182 / 982.1 + 10px) 30px}
.wood-slab{--side-pad-r:46px}
.logo{position:relative;display:block;align-self:center;margin:20px 0 40px;width:264px;aspect-ratio:1465.1/928;filter:drop-shadow(0 4px 10px rgba(0,0,0,.85)) drop-shadow(0 12px 28px rgba(0,0,0,.6))}
.logo img{width:100%;height:100%;filter:drop-shadow(0 -1px 0 rgba(252,233,196,.45)) drop-shadow(0 1px 0 rgba(40,20,4,.75)) drop-shadow(0 2px 3px rgba(0,0,0,.75))}
.logo .sweep{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;mask-mode:alpha;
  background:linear-gradient(var(--ang),transparent 0%,transparent 28%,rgba(255,240,205,.14) 42%,rgba(255,248,225,.3) 50%,rgba(255,240,205,.14) 58%,transparent 72%,transparent 100%);
  animation:turn 30s linear infinite}
@keyframes turn{to{--ang:360deg}}
.nav{margin-top:auto}
.nav ul{list-style:none;margin:0;padding:0}
.nav li{margin:0 0 10px}
.nav li:last-child{margin-bottom:0}
.nav a{position:relative;display:inline-block;white-space:nowrap;font-size:16px;letter-spacing:.2em;text-transform:uppercase;transition:color .25s,letter-spacing .25s;text-shadow:0 2px 0 #000,0 3px 6px #000,0 0 14px #000,0 0 26px rgba(0,0,0,.9)}
/* the underline lives on every link at zero width, anchored to the right (the labels are right-aligned); it draws in on hover and stays on the current page */
.nav a::after{content:"";position:absolute;right:0;bottom:10px;height:1px;width:0;background:var(--gold);box-shadow:0 1px 2px rgba(0,0,0,.9);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.nav a:hover,.nav a:focus-visible{color:var(--brass);letter-spacing:.24em;outline:none}
.nav a:hover::after,.nav a:focus-visible::after{width:100%}
.nav a[aria-current]{color:var(--gold);font-weight:500}
.nav a[aria-current]::after{width:100%}
.nav .s{display:none}
.social{display:flex;gap:20px;margin-top:20px;margin-right:5px;margin-bottom:auto}
.side-contact{position:absolute;bottom:47px;right:calc(var(--side-pad-r,30px) + 5px);z-index:2;display:flex;flex-direction:column;gap:3px;margin:0;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--muted);text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.8)}
.side-contact a{color:var(--off);opacity:.85;margin-top:4px}
.social a{position:relative;width:34px;height:34px;border:1px solid rgba(187,129,46,.8);display:grid;place-items:center;color:var(--gold);background:rgba(0,0,0,.55);box-shadow:0 2px 6px rgba(0,0,0,.5);transition:color .25s,border-color .25s}
.social svg{width:17px;height:17px;display:block}
.social a:hover,.social a:focus-visible{color:var(--brass);border-color:var(--brass);outline:none}
.social a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* The fibonacci mark burned into the boards.
   A vector edge never reads as a burn, so each layer is the SVG used as a mask inside a wrapper that
   carries an feTurbulence displacement filter. The filter runs on the already-masked shape, so the
   silhouette itself goes ragged. Nothing here may sit inside a stacking context, or the blend modes
   would be isolated from the wood and the whole thing flattens into a sticker: see the note on
   .side-in. The stack from the wood up is a wide dark heat bloom, a black singe glow smeared
   along the grain, the charred line, then a second char pass on another noise seed so the weight is
   uneven. The scorch and the line use color-burn rather than multiply: multiply at this darkness paints a
   solid silhouette, while color-burn drives the boards toward black but keeps their grain running
   straight through the mark. The line filters do the rest of the work, and they are the difference
   between a burn and an outline: after the wobble, a patchy dilation thickens the stroke only where
   noise allows, so its width varies the way an iron bites unevenly; then a second noise stretched
   into vertical streaks, matching the plank grain, eats holes in the density, so the burn is starved
   in places and saturated in others; and last a very coarse band of noise fades whole vertical
   stretches of the mark, because an iron pressed against boards this uneven never makes contact
   evenly and one side always bites harder than the other. The mark is also set a degree off square,
   since nobody stamps a brand perfectly upright. */
.fx{position:absolute;width:0;height:0;overflow:hidden}
.brand{--mark-w:360px;--mark-bottom:10px;position:absolute;left:50%;margin-left:-220px;bottom:var(--mark-bottom);width:var(--mark-w);aspect-ratio:982.1/1182;pointer-events:none}
.brand div{position:absolute;inset:0}
.brand i{position:absolute;inset:0;display:block;transform:rotate(-3deg);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
/* heat that discoloured the board well past the iron */
.b-heat{filter:url(#burn-heat);mix-blend-mode:color-burn;opacity:.55}
.b-heat i{background:rgb(168,120,72)}
/* the black singe: charring that bled off the line and ran with the grain */
.b-singe{filter:url(#burn-singe);mix-blend-mode:color-burn;opacity:.75;transform:translate(.4px,.6px)}
.b-singe i{background:rgb(126,84,46)}
/* the charred line: ragged, unevenly dark where the iron pressed or lifted */
.b-char{filter:url(#burn-bite);mix-blend-mode:color-burn;opacity:.3}
.b-char i{background:repeating-linear-gradient(93deg,rgba(255,255,255,.1) 0 2px,rgba(255,255,255,0) 2px 5px,rgba(255,255,255,.06) 5px 6px,rgba(255,255,255,0) 6px 10px),linear-gradient(148deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 72%,rgba(255,255,255,.08) 100%),radial-gradient(ellipse at 42% 36%,rgb(78,46,20) 0%,rgb(60,34,14) 58%,rgb(50,28,10) 100%)}
/* second pass, different noise seed: overlaps imperfectly so the line is heavier in places */
/* a fine wavering rim traced around the mark, over the burn */
.b-edge{filter:url(#brand-edge);opacity:.6}
.b-edge i{background:#000}
.b-core{filter:url(#burn-eat);mix-blend-mode:color-burn;opacity:.55}
.b-core i{background:radial-gradient(ellipse at 55% 45%,rgb(92,54,24) 0%,rgb(80,46,20) 70%,rgb(70,40,16) 100%)}
.brand::before{background:radial-gradient(ellipse at 50% 40%,rgba(255,140,50,.55) 0%,rgba(255,104,26,.26) 45%,rgba(255,90,20,0) 75%);mix-blend-mode:color-dodge;filter:blur(7px);opacity:.6}
.brand::after{background:radial-gradient(ellipse at 50% 38%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.88) 55%,rgba(0,0,0,.96) 100%);mix-blend-mode:multiply}
/* main spans content column + right gutter so backgrounds run to the screen edge */
/* The main column is the only scroller. Native scrolling with mandatory snap on desktop; smooth motion is
   requested per call from the script (keys, buttons), never set on the container, and no snap-stop:always,
   so a trackpad flick can never wedge between sections. overscroll-behavior stops the page bouncing behind it. */
.main{grid-column:2/4;height:100vh;height:var(--vh);overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.main::-webkit-scrollbar{display:none}
/* Every section that has no covering photo stands on the same ground: near-black with a brown cast,
   oak grain laid over it with soft-light so the surface is never flat. Sections that carry a .bg photo
   or a bleed cover this entirely, so it only ever shows where the ground is bare. Even sections sit
   one step lighter to keep the subtle tone rotation the spec asks for. */
.sec{position:relative;min-height:100vh;min-height:var(--vh);scroll-snap-align:start;overflow:hidden;background:#030201;isolation:isolate}
.sec:nth-child(even){background:#050301}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../img/wood/grain-oak.webp") center/cover no-repeat;mix-blend-mode:soft-light;opacity:.14;pointer-events:none}
.sec::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.28);pointer-events:none}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){.sec::before{background-image:image-set(url("../img/wood/grain-oak.avif") type("image/avif"),url("../img/wood/grain-oak.webp") type("image/webp"))}}
/* text/content stays inside the 1000px column, pinned to the sidebar */
/* --nudge (Nik, 2026-10-08): page text sits 10px further left, into the slab's overhang; the right edge
   moves with it, so the line gets 10px more room on the right. Text only, photo panels stay put. The
   max() floor stops it before the text meets the bark: on ~1240-1340px screens there is no room to give,
   so the text holds where it was (--text-min = text start past the 320px column, measured at 1280). */
.in{position:relative;z-index:2;max-width:var(--content);margin-left:max(calc(var(--x0) - var(--nudge)),calc(var(--text-min) - var(--pad)));margin-right:auto;min-height:100vh;min-height:var(--vh)}
/* full-bleed photo layer (whole section, incl. right gutter) */
.bg{position:absolute;inset:0;z-index:0;background:var(--img) center/cover no-repeat}
.bg::after{content:"";position:absolute;inset:0;background:var(--dim,linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.3)))}
/* right-hand photo panel that starts at a golden-ratio split and runs to the screen edge */
.bleed{position:absolute;top:0;bottom:0;right:0;left:calc(var(--x0) + var(--content)*.382);z-index:1;background:var(--img) center/cover no-repeat}
.bleed.w{left:calc(var(--x0) + var(--content)*.618)}
.bleed::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);mix-blend-mode:multiply}
.bleed,.bg,.ph{filter:saturate(.78) sepia(.05)}
.ph{position:relative;background:var(--img) center/cover no-repeat}
.cap{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);opacity:.65;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.btn{display:inline-block;background:var(--gold);color:#070401;font-family:var(--sans);font-weight:500;font-size:13px;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;padding:16px 28px;border:0;border-radius:0;appearance:none;-webkit-appearance:none;cursor:pointer;transition:background .2s}
.btn:hover,.btn:focus-visible{background:var(--brass);outline:none}
/* keyboard focus: one gold ring everywhere, no ring for mouse clicks */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn:focus-visible,.nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1[tabindex]:focus{outline:none}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cta{box-shadow:inset 0 1px 0 rgba(187,129,46,.45)}
.sec.cta{background:var(--base)}
.cta .bleed.w{left:calc(var(--x0) + var(--content)*.618 - 140px)}
.ig{display:grid;grid-template-columns:repeat(3,1fr)}
@media (prefers-reduced-motion:reduce){
  .main{scroll-snap-type:none}
  .logo .sweep{animation:none;opacity:0}
  *{transition:none!important}
}
/* top bar (wordmark + hamburger) exists only on phones and tablets */
.topbar{display:none}
@media (max-width:900px){
  :root{--vh:calc(100dvh - 56px);--content:100%;--x0:0px;--nudge:0px;--text-min:0px}
  .site{display:block}
  .topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 18px;background:rgba(3,2,0,.94);border-bottom:1px solid rgba(187,129,46,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .wordmark{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:.02em;color:var(--gold);white-space:nowrap}
  .burger{position:relative;width:48px;height:48px;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger span{position:absolute;left:13px;top:23px;width:22px;height:1.5px;background:var(--brass);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .burger span:nth-child(1){transform:translateY(-6.5px)}
  .burger span:nth-child(3){transform:translateY(6.5px)}
  .menu-open .burger span:nth-child(1){transform:rotate(45deg)}
  .menu-open .burger span:nth-child(2){opacity:0}
  .menu-open .burger span:nth-child(3){transform:rotate(-45deg)}
  /* the sidebar itself becomes the menu: the desktop sidebar, slid in from the left. Same slab, same
     bark overhang and shadow, same right-hugging stack, same burned mark. Box + overhang stop 100px short. */
  .side{position:fixed;top:56px;left:0;right:auto;width:min(calc(100vw - 100px - var(--slab-over)),320px);bottom:0;height:auto;z-index:15;overflow:visible;transform:translateX(calc(-100% - 180px));transition:transform .38s cubic-bezier(.2,.7,.2,1);box-shadow:none}
  .menu-open .side{transform:none}
  body.wood-slab .side{background:none}
  body.wood-slab{--slab-over:60px;--side-pad-r:40px}
  /* the page stays visible behind the menu, dimmed; tapping it closes the menu */
  .main::after{content:"";position:fixed;left:0;right:0;top:56px;bottom:0;z-index:12;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .38s}
  .menu-open .main::after{opacity:1;pointer-events:auto}
  .side-in{width:100%;height:100%;padding:26px var(--side-pad-r,30px) 40px 16px!important}
  .logo{width:min(264px,100%);margin:0 0 30px}
  .nav{margin-top:40px}
  .nav a{font-size:15px;letter-spacing:.2em;padding-bottom:6px}
  .nav a::after{bottom:3px}
  .nav .f{display:inline}.nav .s{display:none}
  .side-contact{font-size:10px;bottom:36px}
  .brand{--mark-w:min(360px,calc(100% + 90px));left:50%;margin-left:calc(var(--mark-w) * -.61);bottom:10px}
  .main{height:var(--vh);margin-top:56px}
  .sec{min-height:var(--vh)}
  .in{min-height:0}
  .bleed{position:relative;left:auto;right:auto;height:38vh}
}

/* ---------- Middle zone: 901 to 1240px (tablet landscape, small laptops). Sidebar slims to 240 so the content column keeps room. ---------- */
@media (min-width:901px) and (max-width:1240px){
  /* the slab overhangs the column by 60px, so the content column starts past it */
  :root{--side:240px;--pad:28px;--content:calc(100vw - var(--side) - 60px);--x0:60px;--text-min:0px}
  .wood-slab{--side-pad-r:34px;--slab-over:60px}
  .side-in{padding-top:28px;padding-left:20px}
  .logo{width:190px;margin:12px 0 28px}
  .nav a{font-size:13px;letter-spacing:.2em}
  .nav li{margin:0 0 8px}
  .side-contact{font-size:10px;bottom:36px}
  .brand{--mark-w:280px;margin-left:-180px}
  .hero .low{gap:22px}
  .hero h1{font-size:clamp(44px,5.4vw,64px)}
  .who .copy{max-width:none}
  .story-text .left{width:calc(var(--content)*.42 - var(--pad) - 40px)}
  .story-text .right.chapter{margin-left:calc(var(--content)*.58 - var(--pad) + 44px);width:calc(var(--content)*.42 - var(--pad) - 44px)}
  .story-text .left.chapter::before,.story-text .left.chapter::after{right:-40px}
  .chapter::before,.chapter::after{left:-44px}
  .lead-piece .left{width:calc(var(--content)*.42 - var(--pad) - 20px)}
  .cta .in{padding-right:24px}
  .inquire-hero .left{width:calc(var(--content)*.42 - var(--pad) - 16px)}
  .inquire .in{margin-left:calc(var(--x0) - var(--nudge));max-width:var(--content);padding:5vh var(--pad)}
  .inquire .cols{gap:calc(var(--pad) * 1.2)}
  .form-card{padding:24px 22px 20px}
  .form-card .row3{grid-template-columns:1fr 1fr}
  .form-card .row-send{grid-template-columns:1fr}
  .f textarea{min-height:90px}
  .cta .btn,.hub-hero .btn,.inquire-hero .btn{white-space:nowrap}
  .cta .in{width:calc(var(--content)*.618 - 40px)}
  .cta .bleed.w{left:calc(var(--x0) + var(--content)*.618 - 40px)}
  .insta .ig{grid-template-columns:repeat(4,1fr)}
  .piece-story .in{gap:32px}
  .spec dl div{grid-template-columns:96px 1fr;gap:10px}
  .spec dd{font-size:17px}
  .contact-details .cols{gap:22px}
}

/* ---------- Page wood textures (one class on <body> per page) ---------- */
.wood-14{--wood:url("../img/wood/wood-14.webp")}
/* wood-rustic: one tall slab with a knot (rustic-wood-grain-with-knot, cropped to a 1:2 band), covers the column */
.wood-rustic{--wood:url("../img/wood/wood-rustic.webp")}
/* the slab goes on ::before, under the ::after shade: painted on .side itself it would sit on top of the shade and hide it */
.wood-rustic .side{background-image:none}
.wood-rustic .side::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wood) center/cover no-repeat}

/* wood-slab: a live-edge board. The PNG is a slab cut out on its right side, bark and all, on a
   transparent ground. At 917px wide the wood runs to x=816 at its narrowest and x=914 at its
   widest, so the live edge wanders across a 98px band. Scaled to fit the sidebar height, that
   band lands just past the column: the sidebar is --side wide, the board is drawn wider and hangs
   over the page by --slab-over, and the ragged bark edge falls on the page rather than being cut
   straight by the column. Its shadow is a filter, not a box-shadow, so it follows the bark. */
.wood-slab{--slab-over:88px}
.wood-slab .side{background:none;overflow:visible}
.wood-slab .side::before{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(-1 * var(--slab-over));z-index:-1;
  background:url("../img/wood/wood-slab.webp?v=1790020526") right top/cover no-repeat;
  filter:drop-shadow(6px 0 10px rgba(0,0,0,.6)) drop-shadow(14px 0 30px rgba(0,0,0,.5))}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){.wood-slab .side::before{background-image:image-set(url("../img/wood/wood-slab.avif?v=1790020526") type("image/avif"),url("../img/wood/wood-slab.webp?v=1790020526") type("image/webp"))}}
/* the shade only reaches the column edge; past it the bark is already dark and needs no help */
.wood-slab .side::after{right:0}
/* wood-grain: straight, tight walnut-tone grain (close-up-of-wooden-grain-texture), already sidebar-shaped */
.wood-grain{--wood:url("../img/wood/wood-grain.webp")}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){.wood-grain{--wood:image-set(url("../img/wood/wood-grain.avif") type("image/avif"),url("../img/wood/wood-grain.webp") type("image/webp"))}}
.wood-grain .side{background-image:none}
.wood-grain .side::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wood) center/cover no-repeat}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){.wood-rustic{--wood:image-set(url("../img/wood/wood-rustic.avif") type("image/avif"),url("../img/wood/wood-rustic.webp") type("image/webp"))}}
/* wood-nik: Nik's edited planks ("wood sidebar nik edit.png", 949x1024 with a transparent shadow strip on
   the right edge). Layout of the image: 0..350px is spare boards for wide screens, 350..940px is the normal
   sidebar, 940..949px is the see-through shadow. The image is scaled so that 590px (the normal part) equals
   the 320px column, its opaque right edge sits on the column edge, and the shadow strip hangs over the page.
   Wider sidebars reveal the spare boards on the left. */
.wood-nik{--wood:url("../img/wood/wood-nik.webp?v=10");--wood-scale:calc(320 / 588);--wood-w:calc(949px * var(--wood-scale));--wood-h:calc(1024px * var(--wood-scale));--wood-over:calc(11px * var(--wood-scale))}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){.wood-nik{--wood:image-set(url("../img/wood/wood-nik.avif?v=10") type("image/avif"),url("../img/wood/wood-nik.webp?v=10") type("image/webp"))}}
.wood-nik .side{background-image:none;overflow:visible}
.wood-nik .side::before{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(-1 * var(--wood-over));z-index:-1;background:var(--wood) right top/var(--wood-w) var(--wood-h) repeat}
/* Things mounted on the wall throw their own small shadow onto the boards. */
.wood-nik .logo img{filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}

@supports (background-image:image-set(url("a.avif") type("image/avif"))){.wood-14{--wood:image-set(url("../img/wood/wood-14.avif") type("image/avif"),url("../img/wood/wood-14.webp") type("image/webp"))}}

/* ---------- 4. Shared section helpers ---------- */
.eyebrow{color:var(--gold)}
.more{display:inline-block;margin-top:26px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.booking{margin-top:30px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.foot{position:absolute;bottom:18px;left:calc(var(--x0) + var(--pad));z-index:3;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
em{font-style:italic;color:var(--brass)}
.bleedL{position:absolute;top:0;bottom:0;left:0;right:calc(100% - var(--x0) - var(--content)*.618);z-index:1;background:var(--img) center/cover no-repeat;filter:saturate(.78) sepia(.05)}
.bleedL::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);mix-blend-mode:multiply}
.right{margin-left:calc(var(--content)*.618);width:calc(var(--content)*.382 - 40px)}
@media (max-width:900px){.bleedL{position:relative;right:auto;height:38vh}.right{margin-left:0;width:auto}.foot{left:20px}}

/* ---------- 5. Home sections (hero · who · mission · latest · insta · cta) ---------- */
/* H2 hero: Radiate the gold, low-left with side note */
.hero .in{display:flex;flex-direction:column;justify-content:space-between;padding:5vh var(--pad) 6vh}
.hero .top{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}
.hero .low{display:grid;grid-template-columns:61.8fr 38.2fr;gap:30px;align-items:end}
.hero h1{font-size:clamp(51px,6vw,87px);font-weight:300;line-height:.98;letter-spacing:-.01em}
.hero .note{border-left:1px solid var(--gold);padding-left:18px;font-size:14px;color:var(--muted);max-width:22em}
.hero .note b{display:block;color:var(--gold);font-weight:400;letter-spacing:.24em;text-transform:uppercase;font-size:11px;margin-bottom:8px}
/* W3 who: photo left, text right */
/* Who we are: the backdrop is a slab tabletop against blurred wood. The copy alone sits in the
   soft-focus air above the slab, no photo, so the section reads as a quiet beat between the hero
   and the mission statement. */
.who .bg{--dim:radial-gradient(ellipse 62% 52% at 30% 50%,rgba(0,0,0,.74),rgba(0,0,0,.58) 70%,rgba(0,0,0,.64) 100%)}
.who .in{display:flex;align-items:center;padding:0 var(--pad)}
.who .copy{max-width:54ch;position:relative;z-index:2;text-align:right}
.who h2{font-size:clamp(30px,3vw,42px);font-weight:300;line-height:1.2;margin:18px 0 22px;text-wrap:balance}
.who p{color:var(--off);opacity:.88;font-size:18px;line-height:1.65}
/* M3 mission: italic + signature, centered */
.mission .in{display:grid;place-items:center;text-align:center;padding:0 12%}
.mission .eyebrow{margin-bottom:26px}
.mission h2{font-size:clamp(29px,3vw,43px);font-weight:300;line-height:1.35;font-style:italic}
.mission .sig{margin-top:30px;font-family:var(--serif);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
/* L4 latest: text left, two photos stacked bleeding right */
/* left-aligned since 2026-10-08 (Nik: 'put text back left'); was right-aligned against the photo stack */
.latest .in{width:calc(var(--content)*.382);padding:0 30px 0 var(--pad);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left}
.latest h2{font-size:40px;font-weight:300;line-height:1.15;margin:16px 0 18px}
.latest p{color:var(--muted);font-size:17px}
.sec.latest{background:var(--base)}
.latest .more{margin-top:26px}
.latest .stack{position:absolute;left:calc(var(--x0) + var(--content)*.382);right:0;top:0;bottom:0;display:grid;grid-template-rows:1fr 1fr;gap:6px;z-index:1}
.latest .stack .ph{filter:saturate(.78) sepia(.05)}
.latest .stack .ph .pic img{object-position:center calc(50% - 30px)}
.latest .stack .ph .pic picture{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.latest .stack .ph:hover .pic picture,.latest .stack .ph:focus-visible .pic picture{transform:scale(1.05)}
.latest .stack .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82));pointer-events:none;z-index:1}
.latest .stack .tag{position:absolute;z-index:2;left:22px;bottom:18px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);text-shadow:0 1px 4px rgba(0,0,0,.9)}
/* I2 instagram: four columns, tall first */
.insta .in{padding:calc(4vh + 30px) var(--pad) 0}
.insta header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.insta h2{font-size:27px;font-weight:300}
.insta h2 em{font-style:normal;color:var(--gold)}
.insta .ig{gap:10px;grid-template-columns:repeat(5,1fr);align-content:start;width:calc(100% - 44px);margin:0 auto}
.insta header{width:calc(100% - 44px);margin-left:auto;margin-right:auto}
.insta .ig .ph{aspect-ratio:1}
.insta .ig .ph:nth-child(3){grid-column:3;grid-row:1/3;aspect-ratio:auto}
.insta .ig a.ph{display:block;color:inherit}
.insta .ig a.ph:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* C1 cta (Noir): text left, photo bleeds right */
.cta .in{width:calc(var(--content)*.618 - 140px);padding:0 40px 0 var(--pad);display:flex;flex-direction:column;justify-content:center}
.cta h2{font-size:clamp(37px,4.2vw,57px);font-weight:300;margin:18px 0 20px}
.cta p{color:var(--muted);font-size:17px;max-width:28em;margin-bottom:34px}
.cta .btn{align-self:flex-start}
.est{display:block;margin-top:6px;font-size:11px;letter-spacing:.12em;text-transform:none;color:var(--muted);opacity:.8}
.booking sup,.stat sup,.booking-line sup{font-size:.55em;color:var(--brass);margin-left:2px}
.gold{color:var(--gold)}

@media (max-width:900px){
  .hero .in{padding:24px 20px;min-height:var(--vh)}.hero .low{grid-template-columns:1fr}
  .who .in,.latest .in,.cta .in{width:auto;padding:24px 20px}
  .who .in{align-items:flex-start;padding:24px 20px}
  .who .copy,.who p{max-width:none}
  .mission .in{padding:24px 20px}
  .latest .stack{position:relative;left:auto;height:44vh}
  .insta .in{padding:28px 20px 0}.insta .ig{grid-template-columns:repeat(3,1fr)}.insta .ig .ph:nth-child(3){grid-column:auto;grid-row:auto;aspect-ratio:1}
}

/* ---------- Per-section photo dims ---------- */
/* footage stays bright; darkness is kept only where the type sits: the top-left line and the low headline */
.hero .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 9%,rgba(0,0,0,.34) 19%,rgba(0,0,0,0) 32%),radial-gradient(70% 45% at 0% 0%,rgba(0,0,0,.78),rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 32%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.62) 72%,rgba(0,0,0,.88) 86%,rgba(0,0,0,.97) 100%)}
/* the video itself sits a stop darker than the stills so bright footage reads as moody */
.hero-video{filter:brightness(.92) saturate(.9)}
.mission .bg .pic img{object-position:center bottom}
.mission .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.3) 45%,rgba(0,0,0,.22) 100%)}
.insta .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.78) 44%,rgba(0,0,0,.42) 64%,rgba(0,0,0,.16) 80%,rgba(0,0,0,.08) 100%)}
.insta .bg .pic img{object-position:center calc(100% + 200px)}

/* ---------- 6. Pictures: picture() output inside any photo container ---------- */
.pic{position:absolute;inset:0;display:block;overflow:hidden}
.pic img,.pic picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pic .lqip{filter:blur(14px);transform:scale(1.06)}
.pic picture img{opacity:0;transition:opacity .6s ease}
.pic picture img.loaded,.no-js .pic picture img{opacity:1}
.stack .ph,.ig .ph{position:relative;overflow:hidden}
.stack a.ph{display:block}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;z-index:1}
/* the dim overlay stays above the video and the stills so the headline is readable on bright footage */
.hero-media::after{z-index:2}
.hero-video.on{opacity:1}
/* stills: poster is .on from the server; JS rotates when the video is not welcome */
.hero-media .still{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-media .still.on{opacity:1}
.hero-media .still .lqip,.hero-media .still picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}.hero-media .still{transition:none}.nav a,.nav a::after{transition:none}}

/* ---------- 7. Section transition: Fade ---------- */
.js .sec .bg,.js .sec .bleed,.js .sec .bleedL,.js .sec .stack{opacity:0;transition:opacity .9s ease}
.js .sec .in{opacity:0;transform:translateY(14px);transition:opacity .7s ease .15s,transform .7s ease .15s}
.js .sec.live .bg,.js .sec.live .bleed,.js .sec.live .bleedL,.js .sec.live .stack{opacity:1}.js .sec.live .in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sec .bg,.sec .bleed,.sec .in{opacity:1;transform:none;transition:none}}

/* ---------- Live edit (only under body.editing, see lib/edit.php + assets/js/edit.js) ---------- */
.editing{--bar:52px}
.editing .main{scroll-snap-type:none}
.editing .site{margin-top:var(--bar);height:calc(var(--vh) - var(--bar))}
.editing .side,.editing .main{height:calc(var(--vh) - var(--bar))}
.editing .sec{min-height:calc(var(--vh) - var(--bar))}
.editing .in{min-height:calc(var(--vh) - var(--bar))}
.editing [data-edit]{outline:1px dashed rgba(244,202,144,.4);outline-offset:5px;cursor:text;min-width:1ch;transition:outline-color .15s,background .15s}
.editing [data-edit]:hover{outline-color:rgba(244,202,144,.8)}
.editing [data-edit]:focus{outline:1px solid var(--brass);background:rgba(187,129,46,.07)}
.editing a[data-edit]{cursor:text}
.editing .edit-uploading{opacity:.5}
.edit-photo-btn{position:absolute;top:22px;right:22px;z-index:12;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;background:rgba(3,2,0,.9);border:1px solid var(--gold);color:var(--brass);font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.6);transition:background .15s,color .15s}
.edit-photo-btn::before{content:"";width:14px;height:11px;border:1.5px solid currentColor;border-radius:2px;box-shadow:inset 0 0 0 2px rgba(3,2,0,.9),inset 0 0 0 3.5px currentColor}
.edit-photo-btn:hover{background:var(--gold);color:#070401}
.edit-photo-btn.l{right:auto;left:22px}
.sec > .edit-photo-btn{top:22px}
.ph > .edit-photo-btn{top:12px;right:12px;padding:8px 12px}
.edit-file{position:absolute;left:-9999px;width:1px;height:1px}
.edit-bar{position:fixed;top:0;left:0;right:0;height:var(--bar,52px);z-index:50;display:flex;align-items:center;gap:14px;padding:0 18px;background:rgba(3,2,0,.94);border-bottom:1px solid var(--gold);color:var(--off);font:300 13px/1.4 var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.edit-title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.edit-title{display:flex;align-items:center;gap:10px}
.edit-pages{appearance:none;background:transparent;border:1px solid rgba(187,129,46,.4);color:var(--brass);font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:8px 30px 8px 12px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.edit-pages:hover,.edit-pages:focus-visible{border-color:var(--gold);outline:none}
.edit-pages option{background:#070401;color:var(--off);text-transform:none;letter-spacing:0}
.editing [data-edit]{position:relative}
.edit-pop{position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;display:flex;gap:3px;padding:4px;background:rgba(3,2,0,.96);border:1px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.6);user-select:none;font-size:14px;line-height:1;letter-spacing:0;text-transform:none;text-align:left;white-space:nowrap}
.edit-pop::after{content:"";position:absolute;left:14px;top:100%;border:6px solid transparent;border-top-color:var(--gold)}
.edit-pop button{width:32px;height:30px;background:transparent;border:1px solid transparent;color:var(--off);font:inherit;font-size:14px;cursor:pointer;font-style:normal;font-weight:400}
.edit-pop button:hover{border-color:var(--gold);background:rgba(187,129,46,.15)}
.edit-pop em{color:var(--brass);font-family:var(--serif);font-style:italic}
.edit-pop b{font-weight:600}
.editing .who .copy .edit-pop,.editing .story-text .left .edit-pop{left:auto;right:0}
.editing .who .copy .edit-pop::after,.editing .story-text .left .edit-pop::after{left:auto;right:14px}
.edit-status{margin-left:auto;font-size:12px;color:var(--muted)}
.edit-status.ok{color:#9fc48f}
.edit-status.err{color:#e6a094}
.edit-status.busy{color:var(--brass)}
.edit-save{padding:9px 18px;background:var(--gold);color:#070401;border:0;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.edit-save:hover{background:var(--brass)}
.edit-save:disabled{opacity:.4;cursor:default}
.edit-exit{padding:9px 14px;border:1px solid rgba(187,129,46,.4);color:var(--off);font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.edit-exit:hover{border-color:var(--gold);color:var(--brass)}
.edit-admin{padding:9px 14px 9px 0;margin-right:4px;color:var(--muted);font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;border-right:1px solid rgba(187,129,46,.3)}
.edit-admin:hover{color:var(--brass)}

@media (prefers-reduced-motion:reduce){.latest .stack .ph .pic picture{transition:none;transform:none}}

/* ---------- 8. Stub pages (Phase 3 replaces these) ---------- */
.stub .in{display:grid;place-items:center;text-align:center;padding:0 var(--pad)}
.stub h1{font-size:clamp(41px,4.8vw,71px);font-weight:300;line-height:1.05;margin:16px 0 18px}
.stub p{color:var(--muted);max-width:32em;margin:0 auto}
.stub .bg{--dim:rgba(0,0,0,.8)}

/* ---------- 9. Shared page pieces (Phase 3) ---------- */
.in.flow{min-height:0;padding:9vh var(--pad) 8vh}
.sec.flow{min-height:0}
.in.flow header{margin-bottom:26px}
.in.flow header h2{font-size:clamp(29px,3vw,43px);font-weight:300;margin-top:10px}
.in.flow header h1{font-size:clamp(41px,4.8vw,67px);font-weight:300;line-height:1.02;margin:12px 0 14px}
.in.flow header p{color:var(--muted);max-width:40em}
.crumbs{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--off);text-shadow:0 2px 0 #000,0 3px 6px #000,0 0 8px #000,0 0 14px #000,0 0 24px #000,0 0 40px #000}
.crumbs a{color:var(--brass)}
.crumbs a:hover{color:#fff}
.cap-box{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.88);border-top:2px solid var(--gold);padding:12px 16px;max-width:100%;z-index:2}
.cap-box b{display:block;font-family:var(--serif);font-weight:300;font-size:20px;margin-top:4px}
.cap-box .eyebrow{font-size:11px}
.tiles{display:grid;gap:6px}
.tiles-3{grid-template-columns:repeat(3,1fr)}
.tiles-2{grid-template-columns:repeat(2,1fr)}
.tiles-1{grid-template-columns:1fr}
.tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#0a0602}
.tile[hidden]{display:none}
.muted{color:var(--muted)}
.card-dark{background:rgba(0,0,0,.88);border-left:2px solid var(--gold);padding:26px 30px}

/* ---------- 10. From the Shop ---------- */
.hub-hero .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 9%,rgba(0,0,0,.34) 19%,rgba(0,0,0,0) 32%),radial-gradient(70% 45% at 0% 0%,rgba(0,0,0,.78),rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.78) 77%,rgba(0,0,0,.95) 89%,rgba(0,0,0,1) 100%)}
.hub-hero .in{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;padding:0 var(--pad) 5vh}
.hub-hero .top.from{position:absolute;top:5vh;left:var(--pad);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);text-shadow:0 1px 3px rgba(0,0,0,.7);transition:color .15s}
.hub-hero .top.from b{font-weight:inherit;color:var(--off)}
.hub-hero .top.from::after{content:" →";color:var(--brass);opacity:0;transition:opacity .15s}
.hub-hero .top.from:hover{color:var(--brass)}
.hub-hero .top.from:hover::after{opacity:1}
.editing .hub-hero .top.from{top:5vh}
.hub-hero h1{font-size:clamp(45px,5.4vw,79px);font-weight:300;line-height:1;margin:14px 0 16px;max-width:17.6em}
.hub-hero p{color:var(--muted);max-width:40em;font-size:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.hub-hero .hub-row{display:flex;align-items:center;justify-content:flex-end;gap:34px;margin-top:6px}
.hub-hero .btn{margin-top:0;flex:0 0 auto;white-space:nowrap}
.pill{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--off);border:1px solid rgba(187,129,46,.45);padding:9px 14px;transition:border-color .2s,color .2s}
.pill span{color:var(--muted);margin-left:6px}
.pill.on,.pill:hover{border-color:var(--gold);color:var(--brass)}
/* The featured piece at hero scale: cover photo bleeding across the right 61.8%, the case study
   set beside it. This is where "every piece is a small case study" becomes something you can see. */
.lead-piece .bleed{display:block;filter:none}
.lead-piece .in{display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.lead-piece .left{width:calc(var(--content)*.382 - var(--pad) - 40px);display:flex;flex-direction:column;align-items:flex-start}
.lead-piece h2{font-size:clamp(34px,3.6vw,50px);font-weight:300;line-height:1.08;margin:14px 0 18px;text-wrap:balance}
.lead-piece .story{color:var(--off);opacity:.85;line-height:1.6;margin:0 0 22px}
.lead-piece .spec-line{width:100%}
.spec-line{margin:0 0 4px;padding:0}
.spec-line div{display:grid;grid-template-columns:38.2fr 61.8fr;gap:12px;padding:10px 0;border-top:1px solid rgba(187,129,46,.22)}
.spec-line dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);align-self:center}
.spec-line dd{margin:0;font-family:var(--serif);font-weight:300;font-size:19px}
/* The wall: pills sit with the heading, and the grid runs as content dictates. The newest piece
   is set large, the rest square, so it reads as a wall of work rather than a catalog row. The
   section is allowed to grow past a screen; a portfolio should not be cut off at the fold. */
.wall{min-height:100vh;min-height:var(--vh);height:auto}
.wall .in{min-height:0;padding-top:8vh;padding-bottom:10vh}
.wall .in header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.wall-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:min(calc((var(--content) - var(--pad)*2 - 16px)/3),calc((var(--vh) - 18vh - 190px)/2));gap:8px}
.wall-grid .tile{aspect-ratio:auto}
.wall-grid .tile:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.pieces .empty{margin-top:20px}

/* ---------- 11. Piece page ---------- */
/* a dark band across the top keeps the breadcrumb readable once the real photo fades in over the placeholder */
.piece-hero .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 8%,rgba(0,0,0,.34) 18%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.62) 72%,rgba(0,0,0,.88) 86%,rgba(0,0,0,.97) 100%)}
.piece-hero .in{display:flex;flex-direction:column;justify-content:space-between;padding:7vh var(--pad) 9vh}
.piece-hero h1{font-size:clamp(45px,5.4vw,81px);font-weight:300;line-height:1;margin-top:12px;max-width:11em}
.piece-story{height:auto}
.piece-story .in{display:grid;grid-template-columns:61.8fr 38.2fr;gap:50px;align-items:start;padding:6vh var(--pad) 3vh;min-height:0}
.piece-story.has-carousel .in{padding-top:5vh}
/* short laptops: tighten the story screen so story, spec and gallery still share it */
@media (min-width:901px) and (max-height:840px){.piece-story .in{padding-bottom:3vh;gap:36px}.carousel{margin-top:4vh}.piece-story .story p{font-size:15px;line-height:1.55}.spec dl div{padding:6px 0}.spec dd{font-size:16px}.spec dl{margin-top:8px}.main{scroll-snap-type:y proximity}}
.carousel{position:relative;z-index:2;max-width:var(--content);margin:5vh 0 0 var(--x0);padding:0 var(--pad)}
.carousel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.carousel-nav{display:flex;gap:8px}
.carousel-btn{width:40px;height:40px;border:1px solid rgba(187,129,46,.5);background:rgba(3,2,0,.7);color:var(--brass);font:inherit;font-size:16px;cursor:pointer;transition:border-color .15s,background .15s}
.carousel-btn:hover,.carousel-btn:focus-visible{border-color:var(--gold);background:var(--gold);color:#070401;outline:none}
.carousel-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.carousel-track::-webkit-scrollbar{display:none}
/* landscape tiles sized from the screen height so story, spec and gallery share one screen */
/* three landscape tiles fill the row exactly; any beyond the third scroll in from the right */
.carousel-track .ph{position:relative;flex:0 0 calc((100% - 16px) / 3);aspect-ratio:3/2;overflow:hidden;scroll-snap-align:start;background:#0a0602}
.carousel-track:focus-visible{outline:1px solid var(--gold);outline-offset:6px}

.piece-story .story p{font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.65;margin:10px 0 0}
.piece-story .story ul,.piece-story .story ol{font-size:17px;line-height:1.7;margin:12px 0 0;padding-left:1.4em;max-width:36em}
.piece-story .story li{margin:4px 0}
.piece-story .story b{font-weight:500;color:var(--off)}
.piece-story .story .eyebrow{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(187,129,46,.3)}
.spec dl{margin:14px 0 0;border-top:1px solid rgba(187,129,46,.3)}
.spec dl div{display:grid;grid-template-columns:38.2fr 61.8fr;gap:14px;padding:9px 0;border-bottom:1px solid rgba(187,129,46,.18)}
.spec dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);align-self:center}
.spec dd{margin:0;font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.3}
/* piece page: more from the shop. Three landscape cards across the page; the first is the titling card, then up to four pieces. */
.more-shop .in{display:flex;flex-direction:column;justify-content:center;min-height:var(--vh)}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.more-grid .cap-box{padding:10px 14px}
.more-grid .cap-box b{font-size:18px;margin-top:2px}
/* tiles take the row's height, so they always match the titling card even when its copy runs a little taller than 4:3 */
.more-grid .tile{aspect-ratio:auto;height:100%;min-height:0}
/* the titling card is a card: same 4:5 box as the tiles, 30px in from the top and bottom, text set to the right edge */
.more-lede{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;aspect-ratio:4/3;padding:20px 20px 20px 0;justify-content:center}
.more-lede h2{font-size:42px;font-weight:300;line-height:1.12;margin:10px 0 12px;text-wrap:balance}
.more-lede p{color:var(--muted);font-size:17px;line-height:1.5;margin:0 0 14px}
.more-lede .eyebrow{margin-bottom:0}
.more-lede .more{margin-top:4px}

/* ---------- 12. Custom Inquiries ---------- */
/* Custom Inquiries, two screens. The hero gives the photo the frame it never had: the nook bleeds
   across the right 61.8%, and the ask sits in the left 38.2% with the two numbers that do the
   persuading, review count and booking month, set large under it. The second screen is the form
   on the plain ground, the testimonial and the process beside it, the split reversed so the form
   is the wide column. */
.inquire-hero .in{display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.inquire-hero .left{width:calc(var(--content)*.382 - var(--pad) - 40px)}
.inquire-hero h1{font-size:clamp(44px,5vw,74px);font-weight:300;line-height:1.02;margin:14px 0 20px;text-wrap:balance}
.inquire-hero .lede{color:var(--off);opacity:.85;font-size:17px;line-height:1.6;max-width:46ch}
.inquire-hero .btn{margin-top:30px;align-self:flex-start}
.inquire-hero .proof{display:flex;gap:40px;margin:36px 0 34px;padding-top:26px;border-top:1px solid rgba(187,129,46,.3)}
.inquire-hero .stat b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(40px,3.6vw,56px);line-height:1;color:var(--brass)}
.inquire-hero .stat span{display:block;margin-bottom:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.5}
/* The form screen. Hands at the bench behind it, dimmed hard so it reads as atmosphere; the form
   itself on a solid card with the gold rule, the way the spec wants boxes on photos. Centred in
   the frame, with the testimonial and the process as two quieter cards beside it. */
/* full-bleed photo; darker toward the right and the bottom, where the form card sits */
.inquire .bg .pic img{object-position:center 30%}
.inquire .bg{--dim:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.72) 100%),linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.7) 100%)}
/* the review floats left and the card right, using the page's width: clear of the slab's bark on the left, 30px in on the right */
.inquire .in{max-width:none;margin:0;display:flex;flex-direction:column;justify-content:flex-end;padding:4vh 40px 4vh calc(var(--slab-over,88px) + 30px - var(--nudge))}
.inquire .cols{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.inquire .trust{width:calc(54% - 8px)}
.inquire .form-card{width:calc(46% - 8px)}
.inquire .form-card{order:2}
.inquire .trust{order:1;align-self:end}
.form-card{background:rgba(3,2,0,.94);border-top:2px solid var(--gold);padding:24px 28px 22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.form-card h2{font-size:clamp(22px,1.9vw,26px);font-weight:300;line-height:1.2;margin:6px 0 14px;text-wrap:balance}
/* booking line: one quiet ruled row under the heading. Label left, month right, the estimate note tucked under the month. */
.form-booking{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:16px;margin:0 0 14px;padding:9px 0;border-top:1px solid rgba(187,129,46,.22);border-bottom:1px solid rgba(187,129,46,.22)}
.form-booking .eyebrow{font-size:11px}
.form-booking b{font-family:var(--serif);font-weight:300;font-size:24px;line-height:1;color:var(--brass);text-align:right}
.form-booking .eyebrow{white-space:nowrap}
.form-booking .est{grid-column:1/-1;display:block;margin:4px 0 0;font-size:10.5px;letter-spacing:.08em;text-align:right;opacity:.7}
.form-card .row-send{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
.form-card .row-send .f{margin:0}
.form-card .row-send .btn{margin-bottom:0}
.form-card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-card .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.f{display:block;margin:0 0 8px}
.f span{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.f span small{color:var(--muted);letter-spacing:.1em;text-transform:none;margin-left:6px}
.f input,.f select,.f textarea{width:100%;background:rgba(0,0,0,.9);border:1px solid rgba(187,129,46,.42);color:var(--off);padding:9px 12px;font:inherit;font-size:16px;border-radius:0}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--gold)}
.f textarea{resize:vertical;min-height:176px}
.f input[type=file]{padding:9px;color:var(--muted)}
.f.bad input,.f.bad select,.f.bad textarea{border-color:#c0574a}
.f em{display:block;font-style:normal;color:#e6a094;font-size:14px;margin-top:6px}
.form-card .err{color:#e6a094;margin:0 0 14px}
.form-card .fine{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.form-card.sent h2{font-size:35px;font-weight:300;margin:10px 0 12px}
/* the trust column: the testimonial is the headline, set as a pull quote with no box; the process
   is a numbered list beneath it, quieter */
.trust{display:flex;flex-direction:column;gap:14px}
.trust .card-dark{background:rgba(3,2,0,.96);box-shadow:0 24px 50px -24px rgba(0,0,0,.9)}
.trust .quote{margin:0}
.trust .quote p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(20px,1.7vw,24px);line-height:1.4;margin:0 0 14px;color:var(--off)}
.trust .steps ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:step}
.trust .steps li{position:relative;padding-left:34px;margin:0 0 12px;color:var(--muted);line-height:1.5;counter-increment:step}
.trust .steps li::before{content:counter(step);position:absolute;left:0;top:1px;width:22px;height:22px;border:1px solid rgba(187,129,46,.5);color:var(--gold);font-size:11px;display:grid;place-items:center}
.trust .booking-line{margin-top:18px;padding-top:16px;border-top:1px solid rgba(187,129,46,.22)}
.trust .booking-line:first-child{margin-top:0;padding-top:0;border-top:0}
.trust .booking-line b{display:block;font-family:var(--serif);font-weight:300;font-size:26px;margin-top:6px;color:var(--brass)}
.trust .quote footer{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px}
.trust .quote .avatar,.trust .quote .avatar img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
.trust .quote .avatar .lqip{display:none}

/* ---------- 13. Our Story ---------- */
.story-hero .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 9%,rgba(0,0,0,.34) 19%,rgba(0,0,0,0) 32%),radial-gradient(ellipse 75% 65% at 65% 40%,rgba(0,0,0,.25) 20%,rgba(0,0,0,.92) 100%)}
.story-hero .in,.contact-hero .in{display:flex;flex-direction:column;justify-content:space-between;padding:5vh var(--pad) 6vh}
.story-hero .top,.contact-hero .top{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}
.hero .top b,.story-hero .top b,.contact-hero .top b{font-weight:inherit;color:var(--off)}
.hero .top span,.story-hero .top span,.contact-hero .top span{margin-left:.9em}
.story-hero h1,.contact-hero h1{font-size:clamp(47px,5.6vw,81px);font-weight:300;line-height:1;margin-top:12px;max-width:10em}
.contact-hero p{color:var(--muted);max-width:30em;margin-top:18px}
.contact-hero .bg .pic img{object-position:center 40%}
.story-text .in{display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.story-text p{font-size:clamp(15px,2.1vh,17px);line-height:1.65;color:var(--off);margin:12px 0 0}
.story-text .left{width:calc(var(--content)*.382 - var(--pad) - 50px);text-align:right}
/* The story in three chapters. A single gold thread runs through all three: it enters each
   section from the top, pauses for the text, and leaves at the bottom, so the chapters read as
   one line rather than three cards. The sections clip it, which is what makes it look continuous.
*/
.chapter{position:relative;z-index:2}
.story-text .right.chapter{margin-left:calc(var(--content)*.618 - var(--pad) + 54px);width:calc(var(--content)*.382 - var(--pad) - 54px)}
.story-text .left.chapter::before,.story-text .left.chapter::after{left:auto;right:-50px}
.chapter::before,.chapter::after{content:"";position:absolute;left:-54px;width:1px;background:linear-gradient(180deg,rgba(187,129,46,0),var(--gold) 12%,var(--gold) 88%,rgba(187,129,46,0))}
.chapter::before{bottom:calc(100% + 26px);height:220vh;background:linear-gradient(180deg,var(--gold),var(--gold) 92%,rgba(187,129,46,0))}
.chapter::after{top:calc(100% + 26px);height:220vh;background:linear-gradient(180deg,rgba(187,129,46,0),var(--gold) 8%,var(--gold))}
.story-text h2{font-size:clamp(28px,3vw,42px);font-weight:300;line-height:1.12;margin:16px 0 22px;text-wrap:balance}
.story-text h2 em{color:var(--brass)}
/* the finale: full-bleed hands at the bench, the copy centred on a solid ground, thread ends in a point */
.finale .in{align-items:center;padding:0 var(--pad)}
.finale .centre{max-width:58ch;text-align:center}
.finale .chapter::before{left:50%}
.finale .chapter::after{content:"";top:auto;bottom:-46px;left:50%;height:8px;width:8px;margin-left:-4px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(187,129,46,.6)}
.finale .bg{--dim:radial-gradient(ellipse 50% 66% at 50% 52%,rgba(0,0,0,.84) 0%,rgba(0,0,0,.78) 45%,rgba(0,0,0,.44) 75%,rgba(0,0,0,.3) 100%)}
.finale .sign{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:300;line-height:1.25;color:var(--off);margin-top:34px;text-wrap:balance}
.finale .sign em{color:var(--gold)}
.finale .signed{margin-top:16px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.woods{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.wood .ph{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:18px}
.wood h3{font-size:31px;font-weight:300;margin:0 0 8px}
.wood p{color:var(--muted);line-height:1.65}

/* ---------- 14. Get In Touch ---------- */
.contact-hero .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 9%,rgba(0,0,0,.34) 19%,rgba(0,0,0,0) 32%),radial-gradient(ellipse 75% 65% at 65% 40%,rgba(0,0,0,.25) 20%,rgba(0,0,0,.92) 100%)}
/* Get In Touch is one screen (Nik, 2026-09-30): heading up top, the shop card and the map along the bottom, nothing to scroll to. The card's inquiry button is the page's CTA. */
.contact-one .in{display:flex;flex-direction:column;justify-content:space-between;padding:5vh var(--pad) 8vh;min-height:var(--vh)}
.contact-one .lead{margin:auto 0;align-self:center;text-align:center}
.contact-one .lead p{margin-left:auto;margin-right:auto}
.contact-one h1{font-size:clamp(40px,4.6vw,64px);margin-top:8px}
.contact-one .cols{display:grid;grid-template-columns:38.2fr 61.8fr;gap:16px;align-items:stretch;position:relative;z-index:2}
.contact-one .card-dark{background:rgba(3,2,0,.94);padding:20px 24px}
.contact-one address{font-style:normal;font-size:16px;line-height:1.5;margin:8px 0 8px}
.contact-one .card-dark p{margin:0 0 4px}
.contact-one .card-dark a{color:var(--brass)}
.contact-one .card-dark .btn{margin-top:14px}
.contact-one .hours-label{margin-top:12px}
.contact-one .hours{margin:6px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.contact-one .hours div{grid-template-columns:auto 1fr;gap:10px;padding:3px 0;font-size:13.5px;border-bottom:1px solid rgba(187,129,46,.15)}
.contact-one .hours dd{white-space:nowrap;text-align:right}
@media (min-width:901px) and (max-height:840px){.contact-one .in{padding:3vh var(--pad) 6vh}.contact-one .lead{margin:1vh 0 2vh}.contact-one h1{font-size:clamp(36px,4vw,52px)}.contact-one address{font-size:15px}.contact-one .hours div{padding:2px 0}}
.contact-one .map{min-height:0;height:100%}
.contact-one .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 12%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.85) 100%)}
.contact-details .cols{display:grid;grid-template-columns:38.2fr 61.8fr;gap:30px;align-items:stretch}
.contact-details address{font-style:normal;font-size:17px;line-height:1.6;margin:10px 0 12px}
.contact-details .card-dark p{margin:0 0 8px}
.contact-details .card-dark a{color:var(--brass)}
.contact-details .card-dark .btn{margin-top:22px}
.hours-label{margin-top:22px}
.hours{margin:10px 0 0}
.hours div{display:grid;grid-template-columns:1fr 1fr;padding:6px 0;border-bottom:1px solid rgba(187,129,46,.15);font-size:15px}
.hours dt{color:var(--muted)}.hours dd{margin:0}
.map{min-height:52vh;background:#0a0602;position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.4) contrast(1.05)}
.map-wait{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px}


@media (max-width:900px){
  .in.flow{padding:28px 20px}
  .tiles-3,.tiles-2{grid-template-columns:1fr 1fr}
  .wall-grid{grid-template-columns:1fr 1fr}
  .wall-grid .tile:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .lead-piece .left{width:auto;text-align:left;align-items:flex-start}
  .lead-piece .in,.wall .in{padding:24px 20px}
  .hub-hero .in,.piece-hero .in,.story-hero .in,.contact-hero .in{padding:24px 20px;min-height:var(--vh)}
  .hub-hero .hub-row{flex-direction:column;align-items:flex-end;gap:18px}
  .piece-story .in{grid-template-columns:1fr;padding:28px 20px}
  .carousel{margin-left:0;padding:0 20px}.carousel-track .ph{flex-basis:80vw}
  .more-grid{grid-template-columns:1fr 1fr}.more-lede{grid-column:1/-1;aspect-ratio:auto;padding:0 0 14px;text-align:left;align-items:flex-start}.more-lede .eyebrow,.more-lede .more{margin:0}
  .inquire .cols,.contact-details .cols,.contact-one .cols,.woods{grid-template-columns:1fr}
  .contact-one .in{min-height:0;padding:24px 20px 60px}.contact-one .map{min-height:38vh}.contact-one .hours{grid-template-columns:1fr}
  .inquire-hero .left{width:auto}
  .inquire-hero .in,.inquire .in{padding:24px 20px}
  .inquire-hero .proof{gap:26px}
  .form-card .row-send{grid-template-columns:1fr}
  .form-card .row2,.form-card .row3{grid-template-columns:1fr}
  .story-text .in{padding:24px 20px}
  .chapter::before,.chapter::after{display:none}
  .finale .centre{max-width:none}
  .map{min-height:40vh}
  /* sections can run taller than a phone screen: snap to them when close, never trap the scroll */
  .main{scroll-snap-type:y proximity}
  .finale .bg{--dim:linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.86))}
  .hub-hero .in,.inquire-hero .in,.story-hero .in,.contact-hero .in,.hero .in{padding-bottom:40px}
  /* story chapters stack: photo band above, full-width copy below */
  .story-text .left,.story-text .right.chapter{width:auto;margin-left:0;text-align:left}
  .story-text .in{display:block}
  /* portfolio wall: natural rows, square tiles, wide lead tile */
  .wall-grid{grid-auto-rows:auto}
  .wall-grid .tile{aspect-ratio:1}
  .wall-grid .tile:first-child{aspect-ratio:4/3}
  .cap-box{padding:8px 10px}.cap-box b{font-size:15px}
  /* inquiry form screen: photo behind everything, form first */
  .inquire .bg{right:0;--dim:linear-gradient(180deg,rgba(0,0,0,.86),rgba(0,0,0,.9))}
  .inquire .form-card{order:1}.inquire .trust{order:2;align-self:auto}
  .inquire .cols{gap:18px}
  /* home extras */
  .hero .low{gap:16px}.hero .note{max-width:none}
  .insta header{flex-wrap:wrap;gap:4px 14px;width:auto}.insta .ig{width:auto}
  .cta .in{width:auto}.cta .bleed.w{left:0;height:38vh}
  .cta .in{padding-bottom:52px}
  .foot{left:20px;bottom:12px;font-size:10px}
  .latest .in{padding-top:18px}
  .top{font-size:10px}
}
/* tablets (561 to 900): tall portrait screens, so copy is centred in each screen and type stays generous */
@media (min-width:561px) and (max-width:900px){
  :root{--pad:32px}
  .who .in{align-items:center;min-height:var(--vh);padding:40px var(--pad)}
  .who h2{font-size:clamp(34px,5vw,44px)}
  .who p{font-size:19px}
  .mission .in{min-height:var(--vh);padding:40px 10%}
  .mission h2{font-size:clamp(32px,4.6vw,44px)}
  .latest .stack{height:52vh}
  .latest .in{min-height:calc(var(--vh) - 52vh);justify-content:center;padding:28px var(--pad)}
  .latest h2{font-size:clamp(32px,4.4vw,40px)}
  .insta .in{padding:36px var(--pad) 0}
  .insta .ig{grid-template-columns:repeat(4,1fr)}
  .cta .bleed.w{height:44vh}
  .cta .in{min-height:calc(var(--vh) - 44vh);justify-content:center;padding:28px var(--pad) 56px}
  .cta h2{font-size:clamp(38px,5.4vw,50px)}
  .hero h1{font-size:clamp(50px,8vw,72px)}
  .hero .note{max-width:26em}
  .story-text h2{font-size:clamp(32px,4.6vw,42px)}
  .story-text p{font-size:17px}
  .story-text .in{padding:36px var(--pad)}
  .bleed,.bleedL{height:44vh}
  .lead-piece .in{padding:32px var(--pad)}
  .lead-piece h2{font-size:clamp(36px,5vw,46px)}
  .wall-grid{grid-template-columns:1fr 1fr 1fr}
  .wall-grid .tile:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .inquire-hero .in{padding-top:40px}
  .inquire .cols{grid-template-columns:1fr;gap:20px}
  .form-card .row2{grid-template-columns:1fr 1fr}
  .form-card .row3{grid-template-columns:1fr 1fr 1fr}
  .form-card .row-send{grid-template-columns:1fr auto}
  .contact-details .cols{grid-template-columns:1fr}
  .piece-story .in{padding:36px var(--pad)}
  .carousel-track .ph{flex-basis:60vw}
}

/* phones: tighter type and spacing than tablets */
@media (max-width:560px){
  :root{--pad:18px}
  .hero h1{font-size:clamp(38px,11vw,48px)}
  .hero .in{padding:18px 18px 22px}
  .who .in,.mission .in,.latest .in,.cta .in,.story-text .in,.lead-piece .in,.wall .in,.inquire-hero .in,.inquire .in,.hub-hero .in,.piece-hero .in,.story-hero .in,.contact-hero .in,.in.flow,.piece-story .in{padding-left:18px;padding-right:18px}
  h2{font-size:clamp(26px,7.6vw,34px)}
  .hub-hero h1,.inquire-hero h1,.story-hero h1,.contact-hero h1,.piece-hero h1{font-size:clamp(36px,10.5vw,46px)}
  .insta .ig{grid-template-columns:repeat(3,1fr);gap:6px}
  .wall-grid{gap:6px}
  .pills{gap:6px}.pill{font-size:10px;padding:6px 9px}
  .form-card{padding:20px 16px 18px}
  .carousel-track .ph{flex-basis:86vw}
  .spec dl div,.spec-line div{grid-template-columns:1fr;gap:2px;padding:8px 0}
  .inquire-hero .proof{gap:18px;margin:24px 0}
  .inquire-hero .stat b{font-size:34px}
  .btn{padding:14px 18px;font-size:11px}
  body.wood-slab{--slab-over:44px;--side-pad-r:28px}
  .side-in{padding-left:10px!important}
  .nav a{font-size:13.5px;letter-spacing:.18em}
  .logo{width:min(230px,100%)}
}


/* ---- story page: the people behind the shop ------------------------------
   A paged carousel, three circular portraits to a page. --team-per is the only
   thing the breakpoints change; the card width and the scroll step both derive
   from it, so one number moves the whole layout. */
.sec.team{background:var(--base2)}
.team .in.flow{display:flex;flex-direction:column;justify-content:center;min-height:var(--vh)}
.team-car{--team-per:3;--team-gap:28px;position:relative;margin-top:30px}
.team-track{display:flex;gap:var(--team-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.team-track::-webkit-scrollbar{display:none}
.team-track:focus-visible{outline:1px solid var(--gold);outline-offset:8px}
.team-card{flex:0 0 calc((100% - (var(--team-per) - 1) * var(--team-gap)) / var(--team-per));
  scroll-snap-align:start;text-align:center;display:flex;flex-direction:column;align-items:center}

/* the circle. aspect-ratio keeps it round whatever the source crop is, and the
   image is cropped to fill rather than squashed. */
.team-ph{position:relative;width:min(188px,42vw);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--base3);border:1px solid rgba(187,129,46,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.45);margin-bottom:18px}
.team-ph .pic,.team-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* no portrait yet: a monogram rather than an empty disc */
.team-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.6vw,48px);color:var(--gold);
  letter-spacing:.04em}

.team-card h3{font-size:clamp(20px,2vw,26px);font-weight:400;margin:0}
.team-role{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:7px}
.team-card p{font-size:clamp(14px,1.6vh,15.5px);line-height:1.62;color:var(--muted);
  margin-top:12px;max-width:34ch}

/* arrows sit under the row, right-aligned, matching the gallery carousel */
.team-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}

@media (max-width:1100px){.team-car{--team-per:2}}
@media (max-width:760px){
  .team-car{--team-per:1;--team-gap:18px}
  .team-card p{max-width:40ch}
  .team-nav{justify-content:center}
}
/* someone who prefers less motion gets no smooth scrolling; the JS also stops
   auto-advancing, see site.js */
@media (prefers-reduced-motion:reduce){.team-track{scroll-behavior:auto}}


/* ---- live edit: choose a photo from the library, or upload a new one.
   Mirrors the admin gallery so the two feel like the same tool. */
.edit-pick{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:rgba(3,2,1,.76);backdrop-filter:blur(3px);padding:24px}
.edit-pick[hidden]{display:none}
.ep-box{width:min(1000px,100%);max-height:min(82vh,760px);display:flex;flex-direction:column;
  background:var(--base2);border:1px solid rgba(187,129,46,.42);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ep-head{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid rgba(187,129,46,.26)}
.ep-head b{font-family:var(--serif);font-weight:400;font-size:17px;margin-right:auto}
.ep-upload{cursor:pointer}
.ep-upload input{position:absolute;left:-9999px}
.ep-upload span{display:inline-block;padding:7px 13px;border:1px solid rgba(187,129,46,.5);
  font-size:12.5px;letter-spacing:.06em;color:var(--brass)}
.ep-upload:hover span{border-color:var(--gold);background:var(--gold);color:#070401}
.ep-x{width:34px;height:34px;border:1px solid rgba(187,129,46,.4);background:none;color:var(--brass);
  font-size:18px;line-height:1;cursor:pointer}
.ep-x:hover{border-color:var(--gold);background:var(--gold);color:#070401}
.ep-grid{flex:1;overflow-y:auto;display:grid;gap:10px;padding:16px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ep-item{border:1px solid transparent;background:var(--base3);padding:0;cursor:pointer;text-align:left;
  color:inherit;font:inherit;display:flex;flex-direction:column}
.ep-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ep-item span{padding:7px 8px;font-size:11.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ep-item:hover,.ep-item:focus-visible{border-color:var(--gold);outline:none}
.ep-item.on{border-color:var(--gold)}
.ep-item.on span{color:var(--brass)}
.ep-none{grid-column:1/-1;color:var(--muted);padding:26px 4px}
.ep-foot{padding:10px 16px;border-top:1px solid rgba(187,129,46,.26);min-height:40px}
.ep-status{font-size:12.5px;color:var(--muted)}
body.edit-picking{overflow:hidden}
@media (max-width:700px){
  .edit-pick{padding:0}
  .ep-box{max-height:100vh;height:100%;border:0}
  .ep-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}