@font-face{font-family:Manrope;src:url("assets/manrope.woff2") format("woff2");font-weight:400 800;font-display:swap}
:root{--paper:#f7f6f2;--ink:#1e1d1a;--muted:#625e56;--line:#d5d1c8;--accent:#c41d22;--max:1512px;--header-height:76px;--gutter:clamp(20px,4vw,64px);font:500 16px/1.5 Manrope,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select{color:inherit;font:inherit}
button{cursor:pointer}
img{display:block;width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:700;letter-spacing:-.038em}
button{border:0;background:none}
a,button,input,select{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{color:white;background:var(--accent)}
::placeholder{color:var(--muted)}
.shell{width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;z-index:20;top:10px;left:12px;background:var(--paper);padding:12px;transform:translateY(-150%)}
.skip:focus{transform:none}

/* The traced brush mark becomes the aperture onto the live page. */
.site-entry{position:fixed;inset:0;z-index:100;isolation:isolate}
.entry-art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.entry-paper,.entry-aperture{fill:var(--paper)}
.entry-aperture,.site-entry.is-opening .entry-paper{visibility:hidden}
.site-entry.is-opening .entry-aperture{visibility:visible}
.entry-ink{fill:#ff0909}
.entry-seal{opacity:0}
.entry-stroke{opacity:0;stroke-dasharray:1 1;stroke-dashoffset:1}
.site-entry.is-writing .entry-stroke{
  animation:entry-write var(--write-duration) cubic-bezier(.37,.08,.39,.98) var(--write-delay) forwards;
}
.entry-g{--write-duration:720ms;--write-delay:50ms}
.entry-join{--write-duration:395ms;--write-delay:570ms}
.entry-o{--write-duration:340ms;--write-delay:806ms}
.entry-dot{--write-duration:110ms;--write-delay:1080ms}
.entry-tail{--write-duration:105ms;--write-delay:1150ms}
.site-entry.is-writing .entry-seal{animation:entry-seal 110ms ease-in-out 1230ms forwards}
.site-entry.is-opening .entry-ink{opacity:0;transition:opacity 340ms cubic-bezier(.34,0,.38,1)}
.entry-skip{
  position:absolute;right:max(var(--gutter),env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));
  padding:0 2px;min-height:44px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.78rem;font-weight:750;
}
.entry-skip:hover{color:var(--accent);border-bottom-color:currentColor}
.site-entry.is-opening .entry-skip:not(:focus-visible){opacity:0;transition:opacity 140ms ease-out;pointer-events:none}
@keyframes entry-write{
  from{opacity:0;stroke-dashoffset:1}
  9%{opacity:1}
  to{opacity:1;stroke-dashoffset:0}
}
@keyframes entry-seal{to{opacity:1}}

[data-icon],.icon{display:inline-flex;width:19px;height:19px;vertical-align:middle;flex:none}
.icon{width:100%;height:100%}
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:10}
.header-inner{min-height:var(--header-height);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.brand{justify-self:start;display:inline-flex;gap:13px;align-items:center}
.brand img{width:54px;height:42px;object-fit:contain}
.brand span{font-size:.69rem;font-weight:800;line-height:1.22;letter-spacing:.12em;text-transform:uppercase;border-left:1px solid var(--line);padding-left:12px}
.site-nav{display:flex;gap:clamp(20px,3.2vw,48px);align-items:center}
.site-nav a,.header-search{font-weight:700;font-size:.84rem;white-space:nowrap}
.site-nav a:hover,.header-search:hover,.project-photo figcaption a:hover,.footer-links a:hover{color:var(--accent)}
.header-search{justify-self:end;display:flex;align-items:center;gap:8px}
/* The photo and the type share a single, viewport-height canvas. */
.intro{position:relative;isolation:isolate;display:grid;align-items:end;min-height:max(570px,calc(100svh - var(--header-height)));background:var(--ink);color:var(--paper)}
.intro-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.intro-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(0deg,#151411ed 0%,#15141172 30%,#15141100 69%),
  linear-gradient(90deg,#151411a3 0%,#15141140 39%,#15141100 69%);pointer-events:none}
.intro-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 53%;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .6s ease,transform 1s cubic-bezier(.18,.7,.23,1),visibility 0s .6s}
.intro-image.is-current{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s}
.intro-image:nth-child(2){object-position:50% 55%}
.intro-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;padding-block:54px clamp(30px,4.45vw,72px)}
.intro h1{font-size:clamp(3.2rem,7.45vw,6rem);font-weight:650;line-height:.97;letter-spacing:-.04em;text-wrap:balance}
.intro-copy p{font-size:clamp(.95rem,1.26vw,1.13rem);line-height:1.5;max-width:38ch;margin-top:22px}
.intro-cta{display:inline-flex;align-items:center;gap:23px;min-height:44px;border-bottom:1px solid currentColor;font-weight:800;font-size:.9rem;margin-top:15px}
.intro-cta:hover,.scene-product:hover{color:#ffb3aa}
.intro :focus-visible{outline-color:var(--paper)}
.scene-index{display:grid;gap:12px;justify-items:end;min-width:143px}
.scene-product{display:flex;align-items:center;gap:5px;font-size:.81rem;font-weight:800}
.scene-product [data-icon]{width:16px;height:16px}
.scene-controls{display:flex;gap:10px}
.scene-controls button{min-width:44px;min-height:44px;padding:0;border-bottom:1px solid #f7f6f267;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--paper)}
.scene-controls button[aria-pressed=true]{border-bottom:2px solid var(--paper)}
.scene-controls button:hover{border-color:var(--paper)}

.project-guide{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);gap:clamp(40px,7vw,116px);align-items:center;padding-block:clamp(65px,9vw,145px)}
.project-copy h2{font-size:clamp(2.8rem,5.3vw,5.25rem);line-height:.99}
.project-copy>p{max-width:36ch;margin:18px 0 28px;color:var(--muted)}
.buying-index{border-top:1px solid var(--line)}
.buy-row{width:100%;display:grid;grid-template-columns:29px 1fr auto;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:12px 0;transition:color .2s}
.buy-row:hover{color:var(--accent)}
.buy-row .index-no{font-size:.72rem;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.07em;font-weight:800}
.buy-row strong{font-size:clamp(.91rem,1.22vw,1.07rem);font-weight:800}
.buy-row small{display:block;font-size:.74rem;color:var(--muted);line-height:1.4}
.project-photo img{height:100%;min-height:clamp(360px,40vw,580px);object-fit:cover;object-position:48% 50%}
.project-photo figcaption{display:flex;justify-content:end;margin-top:11px;font-size:.78rem;font-weight:800}
.project-photo figcaption a{display:inline-flex;align-items:center;gap:6px}

.retail-band{border-block:1px solid var(--line)}
.retail-band-inner{display:grid;grid-template-columns:1fr 2.2fr;min-height:106px;align-items:center;gap:24px}
.retail-band h2{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.retail-band a:not(.retail-mark){font-size:.77rem;color:var(--muted)}
.retail-band a:hover{color:var(--accent)}
.quick-logos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}
.retail-mark{display:grid;place-items:center;min-width:0;min-height:60px;padding:10px}
.retail-mark img,.retailer-card img{max-width:118px;max-height:35px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);transition:filter .2s}
.retail-mark:hover img,.retailer-card:hover img{filter:none}
.retail-mark[data-retailer="leroy"] img,.retailer-card[data-retailer="leroy"] img{max-height:46px}
.catalogue,.retailers{padding-block:clamp(62px,8.3vw,130px)}
.catalogue{border-top:1px solid var(--line)}
#main,#home,#catalogue,#finishes,#retailers{scroll-margin-top:92px}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:clamp(28px,3.5vw,54px)}
.section-title h2,.finish-copy h2{font-size:clamp(2.7rem,5.2vw,5.4rem);line-height:1.04}
.section-title p{max-width:37ch;color:var(--muted);line-height:1.6}
.stage-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:25px;gap:clamp(13px,2vw,32px)}
.stage-tab{text-align:left;display:flex;align-items:center;flex:1;gap:9px;padding:13px 0;white-space:nowrap;border-bottom:2px solid transparent;font-size:.85rem;font-weight:750}
.stage-tab span{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.69rem;font-weight:800}
.stage-tab[aria-pressed=true]{border-bottom-color:var(--ink)}
.stage-tab:hover{color:var(--accent)}
.browse-layout{display:grid;grid-template-columns:minmax(178px,.84fr) minmax(0,3.45fr);gap:clamp(25px,3.6vw,55px)}
.filters{padding-top:10px}
.filter-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:22px}
.filter-heading h3{font-size:.97rem;letter-spacing:-.015em}
.text-button{padding:0;color:var(--accent);font-size:.78rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.field-label{display:block;font-size:.77rem;font-weight:800;margin-bottom:7px}
.search-field{position:relative;display:flex;align-items:center}
.search-field>span{position:absolute;left:4px;width:16px;height:16px;pointer-events:none}
input[type=search],select{min-width:0;width:100%;background:transparent;border:0;border-bottom:1px solid #a49e93;border-radius:0;font-size:.83rem;min-height:44px;padding:9px 4px}
input[type=search]{padding-left:28px}
.facet{margin-top:20px}
.results-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px;min-height:40px}
.results-tools p{font-size:.83rem;color:var(--muted)}
.sort-field{display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:.78rem}
.sort-field select{min-height:40px;width:auto;color:var(--ink);font-weight:700}
/* Let the photograph and the product name define each entry. */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4.4vw,70px) clamp(18px,2.3vw,37px)}
.product-card{min-width:0}
.product-visual{display:block;overflow:hidden;aspect-ratio:1.11}
.product-visual img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.18,.7,.23,1)}
.product-visual[data-framing=photo] img{object-fit:cover;mix-blend-mode:normal}
.product-visual:hover img{transform:scale(1.035)}
.product-info{padding-top:10px}
.product-meta{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;align-items:baseline;margin-bottom:4px;color:var(--muted);font-size:.73rem}
.finish-count{font-weight:750}
.product-info h3{font-size:clamp(1rem,1.32vw,1.25rem);line-height:1.3;overflow-wrap:anywhere}
.product-info h3 a{display:flex;align-items:start;justify-content:space-between;gap:7px}
.product-info h3 [data-icon]{width:16px;height:16px;margin-top:3px}
.product-info h3 a:hover{color:var(--accent)}
.swatches{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.product-info .swatches{margin-top:8px}
.swatch{display:grid;place-items:center;width:30px;height:32px;padding:0;position:relative}
.swatch::before{content:"";width:16px;height:16px;display:block;background:var(--swatch);border:1px solid #1e1d1a55;border-radius:50%}
.swatch[aria-pressed=true]::before{outline:1px solid var(--ink);outline-offset:3px}
.finish-caption{display:block;min-height:1.45em;font-size:.69rem;color:var(--muted);margin-top:2px}
.pagination{text-align:center;margin-top:44px}
.pagination p{font-size:.78rem;color:var(--muted);margin-bottom:10px}
.button{min-height:47px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:.85rem;font-weight:800}
.button-line{border:1px solid var(--ink)}
.button-line:hover{background:var(--ink);color:var(--paper)}
.button-dark{background:var(--ink);color:var(--paper)}
.button-dark:hover{background:var(--accent)}
.empty{grid-column:1/-1;border-top:1px solid var(--line);padding:28px 0 46px}
.empty h3{font-size:1.55rem}
.empty p{color:var(--muted);margin:6px 0 15px}
/* Full-width material study, with open space around the cutout. */
.finish-section{background:#e9e5dc}
.finish-inner{display:grid;grid-template-columns:minmax(0,.77fr) minmax(0,1.23fr);gap:clamp(30px,5.9vw,90px);align-items:center;min-height:calc(100svh - var(--header-height));padding-block:clamp(48px,6vw,95px)}
.finish-figure{min-width:0}
.finish-art{display:grid;place-items:center;aspect-ratio:1.29}
.finish-art img{grid-area:1/1;width:min(90%,670px);height:auto;max-height:100%;object-fit:contain;opacity:0;visibility:hidden;transition:opacity .36s ease,visibility 0s .36s}
.finish-art img.is-current{opacity:1;visibility:visible;transition-delay:0s}
.finish-figure figcaption{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #bfb7a9;padding-top:12px;color:var(--muted);font-size:.78rem;font-weight:750}
#finish-index{font-variant-numeric:tabular-nums}
.finish-copy p{max-width:38ch;margin:18px 0 22px;color:var(--muted)}
.finish-copy .swatch,.detail .swatch{width:44px;height:44px}
.finish-copy .swatch::before,.detail .swatch::before{width:24px;height:24px}
.finish-copy .finish-caption{font-size:.83rem;margin:6px 0 15px;font-weight:800;color:var(--ink)}
.editorial-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;border-bottom:1px solid currentColor;font-size:.85rem;font-weight:800}
.editorial-link:hover{color:var(--accent)}
.retailer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.retailer-card{display:grid;grid-template-columns:1fr auto;align-content:space-between;min-height:155px;padding:20px 20px 18px 0;gap:10px}
.retailer-card+.retailer-card{padding-left:22px}
.retailer-card img{grid-column:1/-1;margin-top:8px}
.retailer-card span{font-size:.8rem;color:var(--muted)}
.retailer-card:hover span{color:var(--accent)}
.site-footer{background:#211f1b;color:var(--paper);padding:36px 0 20px}
.footer-main,.footer-meta{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-main{margin-bottom:34px}
.footer-meta{border-top:1px solid #524e47;padding-top:15px;color:#d0c9ba;font-size:.72rem}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-weight:700;font-size:.8rem}
.footer-links a:hover{color:#ff8e86}
.detail{padding-top:28px;padding-bottom:85px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:.81rem;color:var(--muted);margin-bottom:25px}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px}
.detail-layout{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(30px,6vw,90px);align-items:start}
.detail-image{display:block;aspect-ratio:1.08}
.detail-image img{height:100%;object-fit:contain;mix-blend-mode:multiply}
.detail-image[data-framing=photo] img{mix-blend-mode:normal}
.thumbnails{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.thumb{border-bottom:1px solid var(--line);padding:0;width:66px;height:66px}
.thumb[aria-pressed=true]{border-bottom-color:var(--ink)}
.thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.detail-content{padding-top:clamp(0px,1.5vw,20px)}
.detail-content h1{font-size:clamp(2.3rem,4.55vw,5rem);line-height:1.04;margin:10px 0 19px;overflow-wrap:anywhere}
.detail-category{color:var(--accent);font-weight:800;font-size:.81rem}
.spec-row{font-size:.8rem;color:var(--muted)}
.spec-row strong{color:var(--ink)}
.detail-finishes{border-block:1px solid var(--line);margin:23px 0;padding:17px 0}
.detail-finishes h2,.buy-block h2{font-size:1.05rem;letter-spacing:-.02em}
.detail-finishes .finish-caption{font-size:.81rem}
.variant-desc{white-space:pre-line;margin-bottom:20px;max-width:56ch;font-size:.92rem}
.buy-block{margin-top:29px}
.buy-block p{color:var(--muted);font-size:.83rem;margin:7px 0 13px;max-width:46ch}
.detail-links{display:flex;flex-wrap:wrap;gap:9px}
.detail-links a{font-size:.79rem}
.missing-image{display:grid;place-items:center;width:100%;height:100%;font-size:.75rem;color:var(--muted)}
@media(max-width:1020px){
  .stage-tab{font-size:.78rem}
  .browse-layout{grid-template-columns:174px minmax(0,1fr);gap:20px}
}
@media(max-width:800px){
  :root{--header-height:65px}
  .project-guide{gap:28px}
  .buy-row{grid-template-columns:21px 1fr auto;gap:8px;min-height:49px}
  .catalogue,.retailers{padding-block:64px}
  .stage-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
  .stage-tab{white-space:normal;line-height:1.25;padding-block:12px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-layout{gap:22px}
}
@media(max-width:630px){
  .site-header{position:relative}
  .header-inner{grid-template-columns:1fr 1fr;gap:0;min-height:0}
  .brand{padding-block:9px}
  .brand img{width:44px;height:34px}
  .brand span{font-size:.69rem}
  .header-search{grid-column:2;grid-row:1;font-size:.77rem}
  .site-nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-block:11px}
  .site-nav a{font-size:.79rem}
  #main,#home,#catalogue,#finishes,#retailers{scroll-margin-top:15px}
  :root{--header-height:94px}
  .intro{min-height:max(590px,calc(100svh - var(--header-height)))}
  .intro-media{bottom:23%}
  .intro-media::after{background:linear-gradient(0deg,var(--ink) 0%,#1e1d1a74 37%,#1e1d1a00 70%)}
  .intro-image{object-position:69% 61%}
  .intro-image:nth-child(2){object-position:51% 58%}
  .intro-layout{grid-template-columns:minmax(0,1fr);gap:20px;padding-block:225px 15px}
  .intro h1{font-size:clamp(2.3rem,11.2vw,4.2rem);line-height:1.01}
  .intro-copy p{max-width:33ch;font-size:.89rem;margin-top:12px}
  .intro-cta{margin-top:7px}
  .scene-index{display:flex;justify-content:space-between;align-items:center}
  .scene-controls{gap:5px}
  .project-guide{grid-template-columns:minmax(0,1fr);gap:29px}
  .project-photo img{min-height:0;aspect-ratio:1.43}
  .buy-row{grid-template-columns:25px 1fr auto;gap:9px}
  .retail-band-inner{display:block;padding-block:16px}
  .retail-band-inner>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
  .retail-mark{min-height:45px;padding:6px}
  .retail-mark img{max-width:min(90px,100%);max-height:28px}
  .retail-mark[data-retailer="leroy"] img{max-height:35px}
  .section-title{display:block;margin-bottom:23px}
  .section-title p{margin-top:10px;font-size:.92rem}
  .stage-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 13px;margin-bottom:19px}
  .stage-tab{min-height:42px;padding-block:10px}
  .stage-tab:first-child{grid-column:1/-1;justify-content:start}
  .browse-layout{display:block}
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding-top:0;margin-bottom:18px}
  .filters>*:not(.facet){grid-column:1/-1}
  .filter-heading{margin-bottom:9px}
  .facet{margin-top:11px}
  .product-grid{gap:27px 15px}
  .product-meta{gap:2px 7px;font-size:.69rem}
  .product-info h3{font-size:.96rem}
  .results-tools{margin-bottom:10px}
  .product-info .swatches{gap:1px}
  .product-info .swatch{width:25px}
  .product-info .swatch::before{width:14px;height:14px}
  .finish-inner,.detail-layout{display:flex;flex-direction:column;align-items:stretch}
  .finish-inner{min-height:0;gap:22px}
  .finish-art{aspect-ratio:1.45}
  .finish-art img{width:84%}
  .retailer-grid{display:block;border-bottom:0}
  .retailer-card,.retailer-card+.retailer-card{padding:16px 0;border-left:0;border-bottom:1px solid var(--line);min-height:0}
  .retailer-card img{margin:0}
  .footer-main{align-items:start;flex-direction:column}
  .footer-links{gap:11px 20px}
  .detail{padding-block:18px 55px}
  .breadcrumb{margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .site-entry{display:none}
}

#catalogue .section-title{scroll-margin-top:105px}
@media(max-width:630px){#catalogue .section-title{scroll-margin-top:18px}}