/* Baba Plywood & Timber Store — dark editorial / trade-counter system.
   Deliberately unlike the Sunmica House site: dark ground, serif display type,
   zero corner radius, hairline rules instead of cards and shadows. */

:root{
  --ink:#0f0d0b;
  --surface:#171310;
  --surface-2:#1e1915;
  --bone:#f3eee5;
  --muted:#a2968a;
  --brass:#c8933f;
  --brass-dim:#8a6528;
  --rule:rgba(243,238,229,.15);
  --rule-strong:rgba(243,238,229,.3);
  --max:1180px;
  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:1.2rem;line-height:1.25}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:clamp(56px,8vw,110px) 0}
.lede{font-size:1.14rem;color:var(--muted);max-width:60ch}

/* uppercase micro-label — the signature detail of this site */
.label{
  font:700 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin:0 0 1.4em;display:block
}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

.skip{position:absolute;left:-9999px;background:var(--brass);color:var(--ink);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* header */
header{
  position:sticky;top:0;z-index:100;background:rgba(15,13,11,.93);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)
}
.nav{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone);
  font-family:var(--serif);font-size:1.12rem;letter-spacing:.01em
}
.brand img{width:36px;height:36px}
.brand small{
  display:block;font:700 .6rem/1.2 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)
}
.nav ul{display:flex;gap:30px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{
  color:var(--muted);text-decoration:none;
  font:700 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase
}
.nav ul a:hover{color:var(--bone)}
@media(max-width:900px){.nav ul{display:none}}

/* buttons — rectangular, no radius */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border:1px solid var(--brass);text-decoration:none;
  font:700 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:.16s ease;background:none;color:var(--brass)
}
.btn-fill{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn-fill:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn-line:hover{background:rgba(200,147,63,.12)}
.btn-sm{padding:12px 20px;font-size:.7rem}
header .btn{margin-left:auto}
@media(max-width:900px){.nav ul+.btn{margin-left:auto}}

/* hero — typographic, no image beside it */
.hero{padding:clamp(64px,11vw,150px) 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--rule)}
.hero h1{max-width:14ch}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero-foot{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:38px
}
.hero .lede{margin-top:26px;font-size:1.22rem}

/* facts band */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{padding:30px 26px 34px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.facts div:last-child{border-right:0}
@media(max-width:820px){.facts div:nth-child(2n){border-right:0}}
.facts b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;margin-bottom:8px}
.facts span{font:700 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* full-bleed storefront band */
.bleed{position:relative;background:var(--surface)}
.bleed-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
@media(max-width:860px){.bleed-grid{grid-template-columns:1fr}}
.bleed-img{margin:0;overflow:hidden}
.bleed-img .zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
/* the source photo is portrait (800x1422); without a cap it sets the whole band's height */
.bleed-img img{width:100%;height:52vh;max-height:440px;object-fit:cover;object-position:center 42%}
@media(min-width:861px){
  .bleed-grid{height:clamp(420px,54vh,540px)}
  .bleed-img,.bleed-img .zoom{height:100%}
  .bleed-img img{height:100%;max-height:none}
  .bleed-copy{overflow:auto}
}
.bleed-copy{padding:clamp(38px,6vw,76px)}

/* owner pull-quote */
.quote{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface)}
blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.5rem);
  line-height:1.32;max-width:22ch
}
blockquote+cite{
  display:block;margin-top:26px;font:700 .7rem/1.5 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-style:normal
}
.quote-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:860px){.quote-grid{grid-template-columns:1fr}blockquote{max-width:none}}

/* panel index — numbered grid */
.index{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--rule);border-top:1px solid var(--rule);padding:0;margin:0}
@media(max-width:1000px){.index{grid-template-columns:repeat(3,1fr)}}
@media(max-width:660px){.index{grid-template-columns:repeat(2,1fr)}}
.index li{list-style:none;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.index .zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.index img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.94)}
.zoom:hover img{filter:saturate(1.05) brightness(1.06)}
.index .meta{display:flex;gap:10px;padding:14px 16px 18px;align-items:baseline}
.index .n{font:700 .68rem/1 var(--sans);letter-spacing:.1em;color:var(--brass-dim)}
.index .nm{font-family:var(--serif);font-size:1rem;line-height:1.2}

/* spec list */
.spec{border-top:1px solid var(--rule);margin:0}
.spec div{
  display:grid;grid-template-columns:.9fr 1.6fr;gap:24px;
  padding:26px 0;border-bottom:1px solid var(--rule)
}
@media(max-width:700px){.spec div{grid-template-columns:1fr;gap:6px}}
.spec dt{font-family:var(--serif);font-size:1.35rem}
.spec dd{margin:0;color:var(--muted)}

/* audience columns */
.aud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:900px){.aud{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.aud{grid-template-columns:1fr}}
.aud div{background:var(--ink);padding:32px 26px 38px}
.aud h3{color:var(--brass);margin-bottom:.5em}
.aud p{margin:0;color:var(--muted);font-size:.95rem}

/* visit */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px)}
@media(max-width:860px){.visit-grid{grid-template-columns:1fr}}
.nap{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.nap li{padding:20px 0;border-bottom:1px solid var(--rule)}
.nap b{
  display:block;font:700 .68rem/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px
}
.nap a{color:var(--bone);text-decoration:none;font-size:1.05rem}
.nap a:hover{color:var(--brass)}
.map{border:0;width:100%;min-height:400px;height:100%;filter:grayscale(.35) contrast(1.05)}

/* faq */
details{border-bottom:1px solid var(--rule)}
summary{
  padding:24px 0;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:20px;align-items:baseline;
  font-family:var(--serif);font-size:1.22rem
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brass);font-family:var(--sans);font-size:1.3rem}
details[open] summary::after{content:"–"}
details .ans{padding:0 0 24px;color:var(--muted);margin:0;max-width:65ch}

footer{border-top:1px solid var(--rule);padding:64px 0 100px;color:var(--muted);font-size:.94rem}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
@media(max-width:780px){.foot{grid-template-columns:1fr}}
footer h3{
  font:700 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);margin-bottom:16px
}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:10px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--brass)}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--rule);font-size:.82rem;color:#6d6459}

/* sticky mobile bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:var(--surface-2);border-top:1px solid var(--rule-strong)
}
.callbar a{
  flex:1;padding:16px 8px;text-align:center;text-decoration:none;color:var(--bone);
  font:700 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  border-right:1px solid var(--rule)
}
.callbar a:last-child{border-right:0}
.callbar a.primary{background:var(--brass);color:var(--ink)}
@media(max-width:900px){.callbar{display:flex}footer{padding-bottom:100px}}

/* lightbox */
#lightbox{
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  border:0;padding:0;background:rgba(8,7,6,.94);color:var(--bone)
}
#lightbox[open]{display:grid;place-items:center;grid-template-rows:1fr auto}
#lightbox::backdrop{background:rgba(8,7,6,.94)}
#lightbox img{max-width:min(94vw,1150px);max-height:80dvh;width:auto;height:auto;align-self:center}
.lb-cap{
  margin:0;padding:18px 24px 30px;text-align:center;max-width:70ch;
  font:700 .72rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}
.lb-close{
  position:fixed;top:18px;right:20px;z-index:2;width:48px;height:48px;
  border:1px solid var(--rule-strong);background:none;color:var(--bone);
  font-size:1.8rem;line-height:1;cursor:pointer;display:grid;place-items:center
}
.lb-close:hover{background:var(--brass);color:var(--ink);border-color:var(--brass)}

@media(max-width:560px){
  .brand{font-size:.92rem;gap:9px}
  .brand img{width:30px;height:30px}
  .brand span,.brand small{white-space:normal}
  .btn{white-space:nowrap}
}
/* brand lockup: full trading name on one line, locality + city beneath */
.brand span{white-space:nowrap}
.brand small{white-space:nowrap}
@media(max-width:1120px){.brand{font-size:1rem}}
/* below this width the sticky call bar takes over, so the header CTA is redundant —
   dropping it gives the full trading name room instead of overflowing the viewport */
@media(max-width:900px){header .btn{display:none}}