/* Foster Tapware — public site. Brand Identity v1 (Phase 2): Lora + Lato, charcoal / gold / stone / smoke.
   Direction: photography-led, editorial, quiet. The photograph is the memorable element; type stays
   disciplined; gold appears only as a short rule and the link underline. No cards-with-borders, no
   uppercase labels, no decorative motion. */
:root{--charcoal:#1F1F1F;--ink2:#3A3A3A;--smoke:#6E6E6E;--mist:#E4DFD6;--stone:#FAF8F4;--white:#FFFFFF;--gold:#C9A961;--max:1280px;--gutter:clamp(20px,5vw,72px)}
*{box-sizing:border-box}html{scroll-behavior:auto}html,body{margin:0}
body{background:var(--stone);color:var(--charcoal);font:400 17px/1.65 "Lato",Calibri,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:"Lora",Cambria,Georgia,serif;font-weight:500;letter-spacing:-.012em;margin:0;line-height:1.1}
p{margin:0 0 1.1rem;max-width:62ch}
a{color:inherit;text-decoration:none}
p a,.text a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em;text-decoration-thickness:1.5px}p a:hover,.text a:hover{text-decoration-color:var(--charcoal)}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.rule{width:44px;height:2px;background:var(--gold);margin:1.2rem 0 1.6rem}
.lead{font-size:1.25rem;line-height:1.55;font-weight:300;color:var(--ink2)}
.small{font-size:.92rem;color:var(--smoke)}
/* ---- header: transparent over photography, solid on stone ---- */
header{position:absolute;top:0;left:0;right:0;z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
header img{height:30px;width:auto}
header nav a{margin-left:2.2rem;font-size:.95rem;font-weight:400;color:#fff;opacity:.92}header nav a:hover{opacity:1;border-bottom:1px solid var(--gold)}
header.solid{position:static;background:var(--stone);border-bottom:1px solid var(--mist)}
header.solid nav a{color:var(--charcoal)}
@media(max-width:760px){header nav a{margin-left:1.1rem;font-size:.85rem}header .wrap{height:72px}header img{height:24px}}
/* ---- hero ---- */
.hero{position:relative;height:100vh;height:100svh;min-height:480px;max-height:960px;display:flex;align-items:center;color:#fff;background:var(--charcoal);overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.32) 100%),linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%)}
.hero .wrap{position:relative;z-index:1;width:100%;display:flex;justify-content:flex-end;padding-top:clamp(4.5rem,11vh,7rem);padding-bottom:clamp(1.5rem,5vh,4rem)}
.hero .copy{max-width:min(410px,34vw);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero h1{font-size:clamp(1.8rem,min(4.6vw,7.4vh),4rem);font-weight:500;text-wrap:balance;line-height:1.08}
.hero p{margin:clamp(.6rem,2vh,1.3rem) 0 0;max-width:40ch;font-size:clamp(.92rem,min(1.1vw,2.2vh),1.08rem);line-height:1.5;font-weight:300;color:rgba(255,255,255,.92)}
.hero .tag{margin-top:clamp(.8rem,3vh,2.2rem);font-size:.9rem;color:rgba(255,255,255,.75)}
@media(max-height:620px){.hero .tag{display:none}}
@media(max-width:860px){.hero{align-items:flex-end;max-height:none}.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 30%,rgba(0,0,0,.62) 100%)}.hero .wrap{justify-content:flex-start;padding-bottom:2.5rem}.hero .copy{max-width:100%}.hero h1{font-size:clamp(1.9rem,min(8vw,7vh),3rem)}}
/* ---- sections ---- */
section{padding:clamp(4rem,9vw,7.5rem) 0;scroll-margin-top:0}
.cols{display:grid;gap:clamp(2rem,6vw,5rem);grid-template-columns:minmax(260px,5fr) minmax(300px,7fr);align-items:start}
@media(max-width:860px){.cols{grid-template-columns:1fr}}
.sticky{position:sticky;top:2rem}
h2.display{font-size:clamp(2rem,3.6vw,3rem);max-width:16ch;text-wrap:balance}
/* image-led list of categories (home) */
.catlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--mist)}
.catlist li{border-bottom:1px solid var(--mist)}
.catlist a{display:grid;grid-template-columns:132px 1fr auto;gap:1.4rem;align-items:center;padding:1rem 0}
.catlist img{width:132px;height:88px;object-fit:cover;background:var(--mist)}
.catlist h3{font-size:1.35rem}.catlist p{margin:.15rem 0 0;color:var(--smoke);font-size:.95rem}
.catlist .n{color:var(--smoke);font-size:.95rem;white-space:nowrap}
.catlist a:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
@media(max-width:560px){.catlist a{grid-template-columns:96px 1fr}.catlist img{width:96px;height:64px}.catlist .n{display:none}}
/* photographic band */
.band{position:relative;color:#fff;min-height:min(520px,70vh);display:flex;align-items:center;background:var(--charcoal)}
.band img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 62%)}
.band .wrap{position:relative;z-index:1;width:100%;padding-top:5rem;padding-bottom:5rem}
.band .copy{max-width:400px;text-shadow:0 1px 14px rgba(0,0,0,.35)}.band h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}.band p{color:rgba(255,255,255,.9);font-weight:300}
.dark{background:var(--charcoal);color:#EDE9E2}.dark .lead{color:#D9D4CB}.dark p a{text-decoration-color:var(--gold)}
.services{list-style:none;padding:0;margin:0;columns:2;column-gap:3rem}.services li{break-inside:avoid;padding:.6rem 0;border-bottom:1px solid var(--mist)}
.services b{font-weight:700}
@media(max-width:700px){.services{columns:1}}
.collections{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1rem}
.collections a{font-family:"Lora",serif;font-size:1.2rem}.collections a span{color:var(--smoke);font-family:"Lato",sans-serif;font-size:.9rem;margin-left:.4rem}
.collections a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.25em}
/* ---- footer ---- */
footer{background:var(--charcoal);color:#B9B5AE;padding:3rem 0;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center}
footer img{height:24px}footer a{color:#EDE9E2}
/* ================= range pages ================= */
.photohead{position:relative;min-height:min(380px,48vh);height:min(420px,52vh);display:flex;align-items:flex-end;color:#fff;background:var(--charcoal)}
.photohead img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photohead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 40%,rgba(0,0,0,.45))}
.photohead .wrap{position:relative;z-index:1;padding-bottom:2.4rem;width:100%}
.photohead h1{font-size:clamp(2.4rem,5vw,4.2rem)}
.crumbs{font-size:.9rem;color:rgba(255,255,255,.8);margin-bottom:.8rem}.crumbs a{color:inherit}.crumbs a:hover{text-decoration:underline}
.crumbs.onstone{color:var(--smoke)}
.intro{padding:2.6rem 0 1rem}.intro p{max-width:66ch}
.toolbar{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--mist);border-bottom:1px solid var(--mist);margin:1.4rem 0 2.4rem;font-size:.95rem}
.toolbar .count{color:var(--smoke);margin-right:auto}.toolbar a{color:var(--ink2)}.toolbar a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.grouphead{display:flex;align-items:baseline;gap:1rem;margin:3rem 0 1.4rem}.grouphead h2{font-size:1.7rem}.grouphead span{color:var(--smoke);font-size:.95rem}
.products{display:grid;gap:2.2rem 1.6rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.product{display:block}
.product .pimg{aspect-ratio:1/1;background:var(--white);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:none}
.product .pimg img{width:88%;height:88%;object-fit:contain}
.product .pimg .ph{font-family:"Lora",serif;font-size:2.4rem;color:var(--mist)}
.product h3{font-size:1.05rem;line-height:1.35;margin:.8rem 0 .2rem;font-weight:500}
.product .meta{font-size:.86rem;color:var(--smoke)}.product .meta span+span::before{content:" / ";color:var(--mist)}
.product:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
/* category tiles (range index) */
.cattiles{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cattile{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--charcoal);color:#fff}
.cattile img{width:100%;height:100%;object-fit:cover}
.cattile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.cattile div{position:absolute;left:1.4rem;right:1.4rem;bottom:1.2rem;z-index:1}
.cattile h3{font-size:1.6rem}.cattile span{font-size:.9rem;color:rgba(255,255,255,.8)}
/* product page */
.detail{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(300px,6fr) minmax(280px,5fr);align-items:start;padding-top:2.5rem}
@media(max-width:860px){.detail{grid-template-columns:1fr}}
.detail .pimg{aspect-ratio:1/1;background:var(--white);display:flex;align-items:center;justify-content:center}
.detail .pimg img{width:86%;height:86%;object-fit:contain}.detail .pimg .ph{font-family:"Lora",serif;font-size:4rem;color:var(--mist)}
.detail h1{font-size:clamp(2rem,3.4vw,2.8rem);max-width:16ch;text-wrap:balance}
.code{font-size:1rem;color:var(--smoke);margin:.6rem 0 0}
dl.facts{margin:1.8rem 0 0;border-top:1px solid var(--mist)}
dl.facts div{display:grid;grid-template-columns:minmax(120px,36%) 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--mist)}
dl.facts dt{color:var(--smoke);font-size:.95rem}dl.facts dd{margin:0}
.finishes{list-style:none;padding:0;margin:1rem 0 0}.finishes li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--mist)}
.finishes li span:last-child{color:var(--smoke);font-size:.92rem}
h2.sub{font-size:1.3rem;margin-top:2.2rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}