/* Self-hosted typefaces. Young Serif and Archivo are both SIL Open Font License,
   so they ship with the site instead of coming from Google — no third party sees
   the visitor's IP, and the text paints without a round trip to fonts.gstatic.com. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;
  src:url(/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;
  src:url(/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/youngserif-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/youngserif-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Beautiful Granite & Marble — shared stylesheet
   Palette: warm paper ground, dark bands as punctuation.
   Dry stone / wet stone: the page is dry quarried limestone, interaction is water.
   NOTE: brass was rejected (it is on every countertop site in America and in none of
   Peter's photos). The accent is WET STONE. --brass/--brass-lt remain only as aliases
   so nothing breaks; use --wet / --wet-lt in all new rules. */
:root{
  /* Dark stone, 2026-08-14. Two problems with what this replaces:
     (1) 86% of the site was #F4F1EB paper, and 133 photographs of white and grey
         marble on a near-white ground have nothing to sit against. Stone reads as
         luminous on dark and washed out on light — which is why every high-end
         stone house (Antolini, Aria, both in research/REFERENCES.md) grounds dark.
     (2) The accent was #22514C, a deep green, chosen for a "wet stone" metaphor.
         There is no green in any of Peter's 1,007 photographs. It was a concept
         colour, not a material one, and it read as borrowed.
     The replacement is achromatic on purpose: warm bone for emphasis, no hue
     anywhere. The stone is the only colour on the page. */
  --paper:#1B1A18; --paper-2:#232220; --paper-3:#2E2C29;
  --char:#0E0E0C; --char-2:#141412;
  --ink:#EDE9E1; --ink-soft:#ABA79E; --ink-faint:#8A867D;
  --wet:#EFE9DC; --wet-lt:#FAF6EC; --wet-deep:#C9C3B5;
  --brass:var(--wet); --brass-lt:var(--wet-lt);
  --rule:rgba(237,233,225,.15); --rule-d:rgba(237,233,225,.15);
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Flex column so the footer sits at the bottom on short pages (the 404 left a
   band of paper below the footer). */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100svh;display:flex;flex-direction:column;}
main{flex:1 0 auto;}
footer{flex-shrink:0;}
img{display:block;max-width:100%;}
picture{display:contents;}
a{color:inherit;}
.label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;}
.label.on-dark{color:rgba(237,233,225,.62);}

/* nav */
nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;
  padding:15px clamp(18px,4vw,46px);background:rgba(27,26,24,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);}
.brand{font-family:var(--serif);font-size:19px;letter-spacing:.03em;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.brand em{font-style:normal;color:var(--brass);}
.nav-r{display:flex;align-items:center;gap:clamp(8px,2.2vw,28px);flex:0 0 auto;}
.nav-r a{font-size:13.5px;text-decoration:none;color:var(--ink-soft);letter-spacing:.03em;transition:color .22s;}
.nav-r a:hover{color:var(--ink);}
.callbtn{background:var(--ink);color:var(--char)!important;padding:10px 18px;border-radius:1px;
  font-weight:600;letter-spacing:.05em;white-space:nowrap;transition:background .22s;}
.callbtn:hover{background:var(--brass);}

.navtoggle{display:none;background:none;border:1px solid var(--rule);border-radius:1px;
  padding:9px 12px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);letter-spacing:.05em;}
.navtoggle:hover{border-color:var(--ink);}
@media(max-width:820px){
  .navtoggle{display:inline-block;}
  nav{flex-wrap:nowrap;}
  .nav-r{gap:10px;}
  .nav-links{display:none!important;}
  /* menu drops as a full-width panel below the bar, not inside the flex row */
  nav.open .nav-links{
    display:flex!important;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:2px clamp(18px,4vw,46px) 10px;
    box-shadow:0 14px 26px rgba(26,27,24,.10);
  }
  nav.open .nav-links a{display:block;padding:15px 0;font-size:17px;
    color:var(--ink);border-bottom:1px solid var(--rule);}
  nav.open .nav-links a:last-child{border-bottom:none;}
}
@media(max-width:700px){
  .brand{font-size:15px;letter-spacing:0;}
  .callbtn{padding:9px 11px;font-size:12px;}
  nav{padding:12px 14px;}
  .nav-r{gap:8px;}
}
@media(max-width:430px){
  /* Let the name wrap to two lines rather than ellipsing to "Beautiful Granite & M…".
     A truncated business name in the header reads as a broken page. */
  .brand{font-size:14px;white-space:normal;text-overflow:clip;line-height:1.06;}
  .brand em{display:block;}
  .callbtn{padding:8px 9px;font-size:11.5px;}
}


/* hero */
.hero{position:relative;background:var(--paper);}
.hero-frame{position:relative;width:100%;height:clamp(300px,58svh,620px);overflow:hidden;background:var(--paper-3);}
/* No object-position. The crop is baked into the file (hero-wide / hero-tall) —
   one object-position value cannot serve both a 16:6 desktop box and a 4:5 phone box,
   which is how the same photo once showed a ceiling on desktop and a floor on a phone.
   No scrim either: the headline sits below the image on paper, so nothing needs darkening. */
.hero-frame img{width:100%;height:100%;object-fit:cover;}
.hero-type{position:relative;z-index:3;padding:clamp(30px,4.5vw,58px) clamp(20px,5vw,60px) clamp(18px,2.5vw,26px);
  max-width:1240px;margin:0 auto;color:var(--ink);}
.hero-type .label{color:var(--ink-faint);margin-bottom:14px;}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,7vw,88px);line-height:.99;
  letter-spacing:-.022em;margin:0 0 16px;text-wrap:balance;}
/* Wet stone reads dark on paper and light on char. The light tone on paper measured
   1.86:1 against #F4F1EB — large display type needs 3:1 — so paper always gets --wet. */
h1 em{font-style:normal;color:var(--wet);}
.dark h1 em{color:var(--wet-lt);}
.hero-sub{font-size:clamp(15.5px,1.7vw,19px);max-width:52ch;margin:0;
  color:var(--ink-soft);}

/* action bar */
.actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2.4vw,26px);
  padding:20px clamp(18px,4vw,46px);border-bottom:1px solid var(--rule);background:var(--paper-2);}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;}
.btn{display:inline-block;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:15px 28px;border-radius:1px;
  transition:transform .2s,background .2s,color .2s,border-color .2s;}
.btn-solid{background:var(--ink);color:var(--char);border:1px solid var(--ink);}
.btn-solid:hover{background:var(--brass);border-color:var(--brass);transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--rule);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.dark .btn-ghost{border-color:var(--rule-d);color:var(--ink);}
.dark .btn-ghost:hover{border-color:var(--ink);}
.trust{display:flex;flex-wrap:wrap;gap:clamp(14px,2.6vw,32px);font-size:13.5px;color:var(--ink-soft);margin-left:auto;}
.trust b{color:var(--ink);font-weight:600;}
.trust .st{color:var(--brass);}

/* sections */
section{padding:clamp(60px,8.5vw,120px) clamp(20px,5vw,60px);}
.inner{max-width:1240px;margin:0 auto;}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,4.8vw,56px);line-height:1.05;
  letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance;}
h2 em{font-style:normal;color:var(--brass);}
.lede{font-size:clamp(16px,1.75vw,19px);color:var(--ink-soft);max-width:58ch;margin:0;}
.dark{background:var(--char);color:var(--ink);}
.dark h2 em{color:var(--brass-lt);}
.dark .lede{color:rgba(237,233,225,.7);}
.dark .label{color:rgba(237,233,225,.55);}

/* split — the text:image ratio Dre picked */
.split{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,58px);align-items:center;}
@media(min-width:940px){.split{grid-template-columns:1.02fr .98fr;} .split.flip .s-copy{order:2;}}
.s-copy p{color:var(--ink-soft);max-width:54ch;}
.s-copy p.first{color:var(--ink);font-size:clamp(17.5px,2vw,21px);line-height:1.55;}
.dark .s-copy p{color:rgba(237,233,225,.72);}
.dark .s-copy p.first{color:var(--ink);}
.s-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-3);}
.s-img img{width:100%;height:100%;object-fit:cover;}
.s-img.wide{aspect-ratio:4/3;}
.pull{font-family:var(--serif);font-style:normal;font-size:clamp(20px,2.7vw,30px);line-height:1.32;
  border-left:2px solid var(--brass);padding-left:24px;margin:30px 0 0;}
.dark .pull{border-color:var(--brass-lt);}

/* cards — capped at three columns. auto-fit gave four at 1240px, which left the
   six-card "what we make" grid as a row of four and an orphan row of two. */
.work{display:grid;grid-template-columns:1fr;gap:12px;margin-top:42px;}
@media(min-width:640px){.work{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.work{grid-template-columns:repeat(3,1fr);}}
.card{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/5;display:block;text-decoration:none;}
.card img{width:100%;height:100%;object-fit:cover;transition:filter .55s cubic-bezier(.2,.7,.25,1);}
.card:hover img{filter:saturate(1.22) brightness(.9) contrast(1.06);}
.card .cap{position:absolute;inset:auto 0 0 0;padding:22px;color:#F7F4EE;
  background:linear-gradient(to top,rgba(18,19,16,.93),rgba(18,19,16,.26) 62%,transparent);}
.card .cap h3{font-family:var(--serif);font-weight:400;font-size:25px;margin:0 0 3px;}
.card .cap p{margin:0;font-size:13.5px;color:rgba(247,244,238,.76);}

/* slab cards */
.slabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px;margin-top:42px;}
.slab{position:relative;display:block;text-decoration:none;overflow:hidden;aspect-ratio:3/4;background:var(--char-2);}
.slab img{width:100%;height:100%;object-fit:cover;transition:filter .55s cubic-bezier(.2,.7,.25,1);}
.slab:hover img{filter:saturate(1.25) brightness(.88) contrast(1.08);}
.slab .sc{position:absolute;inset:auto 0 0 0;padding:18px;color:#F7F4EE;
  background:linear-gradient(to top,rgba(18,19,16,.93),transparent);
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.slab .sc strong{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
.slab .sc span{font-size:19px;line-height:1;color:var(--brass-lt);transition:transform .25s;}
.slab:hover .sc span{transform:translateX(4px);}

/* gallery grid for material pages */
.gal{columns:3 300px;column-gap:12px;margin-top:40px;}
.gal figure{margin:0 0 12px;break-inside:avoid;position:relative;overflow:hidden;background:var(--paper-3);}
.gal img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.25,1);}
.gal figure:hover img{transform:scale(1.04);}

/* reviews */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1px;background:var(--rule-d);margin-top:40px;}
.q{background:var(--char);padding:32px 28px;display:flex;flex-direction:column;gap:14px;}
.q p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;}
.q span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,233,225,.5);}
.stars{color:var(--brass-lt);letter-spacing:.16em;font-size:14px;}

/* areas */
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;}
.areas a,.areas span{border:1px solid var(--rule);padding:9px 16px;font-size:13.5px;
  color:var(--ink-soft);text-decoration:none;transition:border-color .2s,color .2s;}
.areas a:hover{border-color:var(--ink);color:var(--ink);}

/* final */
.final{text-align:center;background:var(--paper-2);border-top:1px solid var(--rule);}
/* --ink-faint on --paper-2 measures 4.38:1 — under WCAG AA's 4.5:1 for 11px text.
   Reuse the site's existing on-dark label treatment, which measures ~5.8:1 here.
   Found 2026-08-15 pre-cutover; affects the closing CTA on all 17 pages. */
.final .label{color:rgba(237,233,225,.62);}
.final .lede{margin:0 auto 26px;}
.bigphone{font-family:var(--serif);font-size:clamp(30px,5.4vw,60px);color:var(--ink);
  text-decoration:none;display:inline-block;margin:6px 0 22px;transition:color .22s;}
.bigphone:hover{color:var(--brass);}
.final .cta-row{justify-content:center;}

/* form */
/* Left-aligned with the page heading. Centering it left a dead gutter beside the form. */
.formwrap{max-width:640px;margin:38px 0 0;text-align:left;}
.fld{margin-bottom:18px;}
.fld label{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 15px;font-family:var(--sans);
  font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:1px;}
.fld textarea{min-height:130px;resize:vertical;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:transparent;}
.hint{font-size:13px;color:var(--ink-faint);margin-top:6px;}
.formnote{font-size:13.5px;color:var(--ink-faint);margin-top:16px;}
.formmsg{margin-top:18px;padding:14px 16px;border-radius:1px;font-size:15px;display:none;}
.formmsg.ok{display:block;background:#E4EADF;color:#2C4128;border:1px solid #A9BEA2;}
.formmsg.err{display:block;background:#F2E1DB;color:#6B2F1C;border:1px solid #D3A996;}

footer{background:var(--char);color:rgba(237,233,225,.62);padding:56px clamp(20px,5vw,60px) 40px;
  display:block;font-size:13.5px;}
/* Real footer navigation. It was a single copyright line, which left every interior
   page with no way onward except the browser back button. */
.foot-cols{max-width:1240px;margin:0 auto 40px;display:grid;gap:34px 26px;
  grid-template-columns:1fr;}
@media(min-width:680px){.foot-cols{grid-template-columns:repeat(3,1fr);}}
.foot-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.foot-h{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:rgba(237,233,225,.5);margin-bottom:3px;}
.foot-col a{font-size:14.5px;color:rgba(237,233,225,.82);text-decoration:none;
  transition:color .2s;}
.foot-col a:hover{color:var(--paper);}
.foot-base{max-width:1240px;margin:0 auto;padding-top:26px;border-top:1px solid var(--rule-d);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;}
footer a{color:rgba(237,233,225,.84);text-decoration:none;}
footer a:hover{color:var(--paper);}
.byline{font-size:12.5px;letter-spacing:.04em;}
.byline a{color:var(--brass-lt);}

/* page header for interior pages */
.phead{padding:clamp(52px,7vw,96px) clamp(20px,5vw,60px) clamp(28px,4vw,52px);border-bottom:1px solid var(--rule);}
.phead h1{font-size:clamp(32px,5.6vw,64px);color:var(--ink);text-shadow:none;margin-bottom:14px;}
.phead h1 em{color:var(--brass);}
.crumb{font-size:13px;color:var(--ink-faint);margin-bottom:16px;}
.crumb a{text-decoration:none;color:var(--ink-soft);}
.crumb a:hover{color:var(--ink);}

.rv{opacity:0;transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  /* never `animation:none` on everything — anything whose visible state is only
     reached by an animation would be permanently HIDDEN, not merely un-animated */
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
  .rv{opacity:1!important;transform:none!important;}
  html{scroll-behavior:auto;}
}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
.dark :focus-visible,.q :focus-visible,footer :focus-visible{outline-color:var(--brass-lt);}

/* skip link — first focusable element on every page */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--char);
  padding:12px 18px;text-decoration:none;font-size:14px;font-weight:600;}
.skip:focus{left:8px;top:8px;}

/* interior page banner */
.pbanner{width:100%;height:clamp(200px,34svh,360px);overflow:hidden;background:var(--paper-3);
  border-bottom:1px solid var(--rule);}
.pbanner img{width:100%;height:100%;object-fit:cover;}

/* the slab gets wet — the first second of the page */
.hero-frame img{animation:wet 900ms cubic-bezier(.25,.6,.3,1) both;}
@keyframes wet{
  from{filter:saturate(.72) brightness(1.1) contrast(.94);}
  to{filter:saturate(1) brightness(1) contrast(1);}
}
h1{font-weight:400;letter-spacing:-.018em;}


/* ============ THE CUT — drag the seam, the slab bookmatches live ============ */
.cutwrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--char-2);cursor:ew-resize;touch-action:none;user-select:none;}
@media(max-width:700px){ .cutwrap{aspect-ratio:4/3;} }
.cutpane{position:absolute;top:0;bottom:0;background-repeat:repeat-x;background-position-y:center;}
.cutL{left:0;background-position:left center;}
.cutR{right:0;transform:scaleX(-1);background-position:left center;}
.cutseam{position:absolute;top:0;bottom:0;width:2px;background:var(--wet-lt);
  box-shadow:0 0 0 1px rgba(20,21,15,.45),0 0 22px rgba(127,191,180,.55);pointer-events:none;}
.cuthandle{position:absolute;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--wet-lt);
  display:grid;place-items:center;color:var(--char);font-size:15px;font-weight:700;
  box-shadow:0 4px 18px rgba(20,21,15,.45);pointer-events:none;}
.cutcap{margin-top:14px;font-size:13.5px;color:var(--ink-faint);max-width:60ch;}
.dark .cutcap{color:rgba(237,233,225,.6);}
.cutrange{position:absolute;left:0;bottom:0;width:100%;opacity:0;height:44px;margin:0;cursor:ew-resize;}
.cutrange:focus-visible{opacity:1;outline:2px solid var(--wet-lt);outline-offset:2px;}
.no-js-note{display:none;}

/* Long-form body copy. These pages were running text the full 1240px of .inner —
   about 150 characters a line, roughly twice a readable measure — and the section
   subheads inherited the 56px page-title h2 scale. */
.copy p, .copy ul, .copy h2, .copy h3{max-width:74ch;}
.copy h2{font-size:clamp(23px,2.3vw,30px);line-height:1.2;margin:2.1em 0 .55em;letter-spacing:-.012em;}
.copy h2:first-child{margin-top:0;}
.copy ul{padding-left:1.15em;margin:.6em 0 1.1em;}
.copy li{margin:.3em 0;}

/* ── /work/ gallery ────────────────────────────────────────────────────────
   Peter has 750 photographs and nineteen of them were on the site. This grid
   is the point of the page, so it gets the width — the prose measure that the
   rest of the site uses would waste half the screen on a photo wall. */
.gwrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3.5vw,34px) 10px;}
.gfilters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 30px;
  position:sticky;top:56px;z-index:40;background:var(--paper);
  padding:12px 0;border-bottom:1px solid var(--rule);}
.gfilt{font:inherit;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);background:var(--paper-2);
  border:1px solid var(--rule);padding:9px 15px;cursor:pointer;border-radius:2px;
  transition:background .18s,color .18s,border-color .18s;}
.gfilt:hover{background:var(--paper-3);color:var(--ink);}
.gfilt.on{background:var(--ink);border-color:var(--ink);color:var(--char);}
.gh{font-size:clamp(19px,2vw,25px);font-weight:400;margin:0 0 16px;
  display:flex;align-items:baseline;gap:10px;}
.gh span{font-family:var(--sans,inherit);font-size:12px;letter-spacing:.14em;
  font-weight:600;color:var(--ink-faint);}
.gsec{margin:0 0 46px;}
.ggrid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);}
@media(min-width:700px){.ggrid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1060px){.ggrid{grid-template-columns:repeat(4,1fr);}}
.gcard{margin:0;overflow:hidden;background:var(--paper-3);position:relative;}
.gcard img{display:block;width:100%;height:auto;
  transition:filter .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
  filter:saturate(.86) brightness(1.02);}
/* wet stone: hovering saturates and darkens, the way water does on a slab. */
.gcard:hover img{filter:saturate(1.1) brightness(.95);}
.gcta{border-top:1px solid var(--rule);padding:44px 0 10px;max-width:74ch;}
.gcta h2{font-size:clamp(23px,2.4vw,31px);font-weight:400;margin:0 0 .5em;}
.gcta p{color:var(--ink-soft);max-width:62ch;}
@media(max-width:520px){.gfilters{top:52px;}}

/* ── work strip on interior pages ──────────────────────────────────────────
   Every page but the homepage was ~400 words and one banner. These are 6
   photographs and a way through to /work/. Same 4:5 box as the gallery, so the
   files are shared and nothing needs a second crop. */
.wstrip-sec{padding:clamp(46px,6vw,78px) 0;border-top:1px solid var(--rule);}
.wstrip{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:30px;}
@media(min-width:640px){.wstrip{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.wstrip{grid-template-columns:repeat(6,1fr);}}
.wcard{display:block;overflow:hidden;background:var(--paper-3);line-height:0;}
.wcard img{width:100%;height:auto;display:block;
  filter:saturate(.86) brightness(1.02);
  transition:filter .5s cubic-bezier(.2,.7,.3,1);}
.wcard:hover img{filter:saturate(1.1) brightness(.95);}
.wstrip-more{margin-top:26px;}
.dark .wstrip-sec{border-top-color:rgba(255,255,255,.1);}
.work-more{margin-top:34px;text-align:center;}

/* On a 390px screen the filter bar wrapped to five rows — 180px of sticky
   chrome on top of the 56px nav, 28% of the viewport, permanently covering the
   photographs it exists to filter. One swipeable row instead. */
@media(max-width:760px){
  .gfilters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(clamp(16px,3.5vw,34px) * -1);
    margin-right:calc(clamp(16px,3.5vw,34px) * -1);
    padding-left:clamp(16px,3.5vw,34px);padding-right:clamp(16px,3.5vw,34px);}
  .gfilters::-webkit-scrollbar{display:none}
  .gfilt{flex:0 0 auto;}
}

/* Slab tiles: where the supplier's own tag documents the stone, name it. The tile that
   has no tagged frame in the library shows no name — a link, not a claim. */
.slab .sc strong em{display:block;font-style:normal;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(247,244,238,.72);margin-top:4px;font-weight:500;}

/* ── lightbox ──────────────────────────────────────────────────────────────
   The gallery cards used to be inert <figure> elements. They are buttons now, so
   they need a button reset before anything else. */
.gcard{padding:0;border:0;font:inherit;color:inherit;cursor:zoom-in;width:100%;
  display:block;text-align:left;}
.gcard:focus-visible{outline:2px solid var(--wet);outline-offset:3px;}
body.lb-open{overflow:hidden;}
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,7,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.lb[hidden]{display:none;}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;max-height:100%;}
.lb-img{max-width:100%;max-height:82svh;width:auto;height:auto;display:block;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);}
.lb-cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,233,225,.55);font-variant-numeric:tabular-nums;}
.lb-x,.lb-nav{position:absolute;background:transparent;border:0;cursor:pointer;
  color:rgba(237,233,225,.7);line-height:1;padding:14px;
  transition:color .18s,transform .18s;}
.lb-x:hover,.lb-nav:hover{color:var(--ink);}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.lb-x{top:6px;right:10px;font-size:38px;}
.lb-nav{top:50%;transform:translateY(-50%);font-size:52px;}
.lb-prev{left:2px;} .lb-next{right:2px;}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px);}
.lb-next:hover{transform:translateY(-50%) translateX(3px);}
@media(max-width:640px){
  .lb-nav{font-size:40px;padding:10px;}
  .lb-img{max-height:74svh;}
}
@media(prefers-reduced-motion:reduce){.lb-x,.lb-nav{transition:none;}}