/* Cabinetry and Custom Woodworks of Tucson - site concept
   Design language: #4 Earthy Organic (type, spacing, composition, motion only).
   Palette: sourced from THEIR site and THEIR photography. See PROJECT_RULES.md. */

:root{
  /* Their real brand colors, read from inline styles on their homepage */
  --gold:       #ffd700;   /* rgb(255,215,0) on their "CABINETRY" headline */
  --goldenrod:  #daa520;   /* rgb(218,165,32) on their subhead and service list */
  --bronze:     #7a5410;   /* goldenrod deepened in family, for text on light bands */
  --bronze-2:   #5e4009;

  /* Their dark bands, warmed toward their own cabinetry */
  --ink:        #14100a;
  --ink-2:      #1e1811;
  --cherry:     #3a1d10;   /* sampled from their stained cabinet photography */
  --cherry-2:   #26130a;

  /* Their light neutrals */
  --cream:      #f5ede0;   /* present in their own site.css */
  --parchment:  #ebe2d2;
  --stucco:     #d1d1d1;   /* their most used site color, the wall texture */

  --text-dark:  #241a10;
  --text-body:  #4a3b2c;
  --text-muted: #6d5c49;
  --text-light: #f6f1e8;
  --text-light-muted: rgba(246,241,232,.74);

  --font-display: "Libre Baskerville", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, sans-serif;

  --wrap: min(90%, 1100px);
  --pad-y: clamp(3.5rem, 7vw, 5.5rem);
  --nav-h: 78px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--text-body);
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(1rem,.97rem + .2vw,1.09rem); line-height:1.72;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); font-weight:400; line-height:1.18; color:var(--text-dark); margin:0}
p{margin:0 0 1.1rem}
ol,ul{margin:0; padding:0; list-style:none}

.wrap{width:var(--wrap); margin-inline:auto}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--ink); color:var(--text-light); padding:.75rem 1.1rem; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.eyebrow{
  font-size:.75rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:600; color:var(--bronze); margin:0 0 1rem;
}
.eyebrow--gold{color:var(--goldenrod)}

.h-display{font-size:clamp(1.85rem,1.2rem + 2.4vw,3.05rem); letter-spacing:-.005em}
.h-display--light{color:var(--text-light)}
.h-display em{font-style:italic; color:var(--bronze)}

.rule-gold{width:74px; height:2px; background:var(--goldenrod); margin:1.6rem 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.86rem 1.35rem; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:.94rem; letter-spacing:.01em; line-height:1.2;
  border:1px solid transparent; transition:background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
  min-height:44px;
}
.btn--lg{padding:1.02rem 1.7rem; font-size:1rem}
.btn__dot{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55; flex:none; transition:transform .35s var(--ease-out), opacity .35s var(--ease-out)}
.btn:hover .btn__dot{transform:scale(1.7); opacity:1}

.btn--gold{background:var(--gold); color:#1a1408; border-color:var(--gold)}
.btn--gold:hover{background:#ffe34d; border-color:#ffe34d}
.btn--ghost{background:rgba(20,16,10,.42); color:#fff; border-color:rgba(255,255,255,.62); backdrop-filter:blur(2px)}
.btn--ghost:hover{background:rgba(20,16,10,.72); border-color:#fff}
.btn--dark{background:var(--ink); color:var(--text-light); border-color:var(--ink)}
.btn--dark:hover{background:var(--cherry)}
.btn--outline{background:transparent; color:var(--bronze-2); border-color:rgba(122,84,16,.5)}
.btn--outline:hover{background:rgba(122,84,16,.09); border-color:var(--bronze)}

/* ---------- nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:120; transition:background .4s var(--ease-out), box-shadow .4s var(--ease-out)}
/* keeps nav links legible over hero photography before the solid state kicks in */
.nav::before{
  content:""; position:absolute; inset:0 0 auto 0; height:calc(var(--nav-h) + 34px);
  background:linear-gradient(to bottom, rgba(12,9,5,.86) 0%, rgba(12,9,5,.62) 52%, rgba(12,9,5,0) 100%);
  pointer-events:none; transition:opacity .4s var(--ease-out);
}
.nav.is-solid::before{opacity:0}
.nav__inner{
  position:relative; z-index:1;
  width:var(--wrap); margin-inline:auto; min-height:var(--nav-h);
  display:flex; align-items:center; gap:1.6rem;
}
.nav.is-solid{background:rgba(20,16,10,.95); box-shadow:0 1px 0 rgba(255,255,255,.09)}

.brand{text-decoration:none; display:flex; flex-direction:column; line-height:1.06; margin-right:auto}
.brand__mark{font-family:var(--font-display); font-size:1.18rem; letter-spacing:.02em; color:var(--gold)}
.brand__sub{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(246,241,232,.82); margin-top:.3rem}
.brand__mark--light{color:var(--gold)}
.brand__sub--light{color:rgba(246,241,232,.72)}

.nav__links{display:flex; gap:1.65rem}
.nav__links a{
  text-decoration:none; color:#f4efe6; font-size:.9rem; font-weight:500;
  padding-block:.4rem; border-bottom:1px solid transparent; transition:border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.nav__links a:hover{border-bottom-color:var(--gold); color:var(--gold)}

.burger{
  display:none; position:relative; z-index:200;
  width:46px; height:46px; border:1px solid rgba(255,255,255,.4); border-radius:999px;
  background:rgba(20,16,10,.55); cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{display:block; width:18px; height:1.5px; background:#fff; transition:transform .3s var(--ease-out), opacity .3s var(--ease-out)}
.burger.is-open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* ---------- mobile menu ---------- */
.mmenu{
  position:fixed; inset:0; z-index:110; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
  padding:calc(var(--nav-h) + 1.5rem) 8vw 3rem;
  opacity:0; transition:opacity .35s var(--ease-out);
}
.mmenu.is-open{opacity:1}
/* `hidden` must win over display:flex, or the closed overlay swallows every
   click on the page (it is a full-viewport fixed layer at opacity 0). */
.mmenu[hidden]{display:none}
.mmenu__links{display:flex; flex-direction:column; gap:.35rem}
.mmenu__links a{
  font-family:var(--font-display); font-size:clamp(1.5rem,7vw,2rem);
  color:var(--text-light); text-decoration:none; padding-block:.5rem;
}
.mmenu__links a:hover{color:var(--gold)}
.mmenu__rule{height:1px; background:rgba(255,255,255,.16); margin:1.2rem 0}
.mmenu__foot{display:flex; flex-direction:column; align-items:flex-start; gap:1rem}
.mmenu__mail{color:var(--text-light-muted); font-size:.95rem; padding-block:.55rem; text-decoration:none}

/* ---------- hero ---------- */
.hero{
  position:relative; height:100vh; height:100svh; min-height:600px;
  display:flex; align-items:center; overflow:hidden; background:var(--ink);
}
.hero__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:38% 46%;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(15,11,6,.95) 0%, rgba(15,11,6,.9) 22%, rgba(15,11,6,.55) 40%, rgba(15,11,6,.16) 52%, rgba(15,11,6,0) 64%),
    linear-gradient(to top, rgba(15,11,6,.62) 0%, rgba(15,11,6,0) 42%);
}
.hero__inner{position:relative; z-index:2; width:var(--wrap); margin-inline:auto; max-width:1100px}
.hero__title{
  color:#fff; font-size:clamp(2.15rem,1.15rem + 3.5vw,4rem);
  max-width:15ch; margin:0 0 1.25rem; text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.hero__title em{font-style:italic; color:var(--gold)}
/* their brighter primary gold here, not the goldenrod: the eyebrow sits over
   live photography and the goldenrod drops to 3.35:1 wherever the plate is light */
.hero .eyebrow{color:var(--gold); text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero__sub{
  color:#f3ede3; max-width:46ch; font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);
  margin:0 0 2.1rem; text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem}
.hero__tag{
  position:absolute; right:clamp(1rem,5vw,3rem); bottom:clamp(1rem,4vw,2.4rem); z-index:2;
  margin:0; max-width:100%;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8);
  background:rgba(15,11,6,.5); border:1px solid rgba(255,255,255,.24);
  padding:.5rem .9rem; border-radius:999px; backdrop-filter:blur(3px);
}

/* ---------- intro ---------- */
.intro{background:var(--cream); padding-block:var(--pad-y)}
.intro__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.intro__lead .h-display{max-width:min(100%,340px)}
.lead{font-size:clamp(1.12rem,1.02rem + .5vw,1.32rem); color:var(--text-dark); line-height:1.62}

.factlist{margin-top:2.2rem; border-top:1px solid rgba(36,26,16,.16)}
.factlist li{display:flex; gap:1.2rem; padding:.85rem 0; border-bottom:1px solid rgba(36,26,16,.13); flex-wrap:wrap}
.factlist__k{flex:0 0 5.5rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); padding-top:.28rem}
.factlist__v{flex:1 1 12rem; color:var(--text-dark); font-weight:500}
.factlist__v a{color:var(--bronze-2); text-decoration:none; border-bottom:1px solid rgba(94,64,9,.35); padding-block:.15rem}
.factlist__v a:hover{color:var(--text-dark); border-bottom-color:var(--text-dark)}

/* ---------- shop index (signature) ---------- */
.shop{background:var(--ink); padding-block:var(--pad-y); position:relative}
.shop__head{max-width:min(100%,660px); margin-bottom:clamp(2rem,4vw,3.2rem)}
.index{border-top:1px solid rgba(218,165,32,.3)}
.index__row{border-bottom:1px solid rgba(218,165,32,.3)}
.index__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:baseline; gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1.1rem,2.4vw,1.7rem) 0; color:var(--text-light);
  font-family:inherit; transition:color .3s var(--ease-out);
}
.index__btn:hover,.index__btn[aria-expanded="true"]{color:var(--gold)}
.index__num{
  font-family:var(--font-display); font-size:.92rem; color:var(--goldenrod);
  flex:0 0 2.4rem; letter-spacing:.04em;
}
.index__name{
  font-family:var(--font-display); font-size:clamp(1.2rem,.95rem + 1.35vw,2.15rem);
  line-height:1.2; flex:1 1 auto;
}
.index__plus{
  position:relative; flex:0 0 18px; width:18px; height:18px; align-self:center;
  transition:transform .45s var(--ease-out);
}
.index__plus::before,.index__plus::after{
  content:""; position:absolute; left:0; top:50%; width:18px; height:1.5px;
  background:var(--goldenrod); transform:translateY(-50%);
}
.index__plus::after{transform:translateY(-50%) rotate(90deg); transition:opacity .35s var(--ease-out)}
.index__btn[aria-expanded="true"] .index__plus{transform:rotate(180deg)}
.index__btn[aria-expanded="true"] .index__plus::after{opacity:0}
.index__panel{max-height:0; overflow:hidden; transition:max-height .55s var(--ease-out)}
.index__panel p{
  color:var(--text-light-muted); max-width:56ch;
  margin:0 0 clamp(1.1rem,2.4vw,1.7rem); padding-left:clamp(0rem,3vw + 2.4rem,4.8rem);
}

/* ---------- plates (matted photo frames, the build motif) ---------- */
.plate{margin:0}
.plate__frame{
  background:var(--parchment); padding:clamp(.55rem,1.4vw,1rem); border-radius:var(--radius);
  box-shadow:0 18px 46px rgba(36,26,16,.18); border:1px solid rgba(36,26,16,.1);
}
.plate__frame img{border-radius:6px; width:100%; height:100%; object-fit:cover}
.plate figcaption{
  margin-top:1rem; font-size:.95rem; color:var(--text-muted); line-height:1.62; max-width:52ch;
}
.plate__n{display:block; color:var(--text-dark); font-weight:600; letter-spacing:.01em}

/* ---------- work ---------- */
.work{background:var(--parchment); padding-block:var(--pad-y)}
.work__head{max-width:min(100%,560px); margin-bottom:clamp(2rem,4vw,3rem)}
.work .plate__frame{background:var(--cream)}
.plate--wide .plate__frame img{aspect-ratio:16/10}
.work__pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.4rem,3.5vw,2.8rem); margin-top:clamp(2rem,4vw,3.2rem)}
.work__pair .plate__frame img{aspect-ratio:4/3}

/* ---------- wood and finish ---------- */
.wood{background:var(--cherry); padding-block:var(--pad-y)}
.wood__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center}
.wood__copy p{color:var(--text-light-muted); max-width:46ch}
.wood__note{font-size:.98rem}
.wood__plate .plate__frame{background:rgba(245,237,224,.1); border-color:rgba(255,255,255,.14); box-shadow:0 22px 54px rgba(0,0,0,.4)}
.wood__plate .plate__frame img{aspect-ratio:3/2}
.wood__plate figcaption{margin-top:1rem; font-size:.92rem; color:var(--text-light-muted); max-width:44ch}

/* ---------- contact ---------- */
.contact{background:var(--cream); padding-block:var(--pad-y)}
.contact__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4rem); align-items:center}
.contact__copy p{max-width:44ch}
.contact__btns{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.9rem}
.contact__card{
  background:var(--parchment); border:1px solid rgba(36,26,16,.12); border-radius:var(--radius);
  padding:clamp(1.5rem,3.4vw,2.4rem); box-shadow:0 16px 40px rgba(36,26,16,.12);
}
.contact__k{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin:0 0 .3rem}
.contact__k + .contact__v{margin-bottom:1.45rem}
.contact__v{color:var(--text-dark); font-weight:500; margin:0}
.contact__card p:last-child{margin-bottom:0}
.contact__v a{color:var(--bronze-2); text-decoration:none; border-bottom:1px solid rgba(94,64,9,.35); padding-block:.15rem}
.contact__v a:hover{color:var(--text-dark); border-bottom-color:var(--text-dark)}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:var(--text-light-muted); padding-block:clamp(2.6rem,5vw,3.6rem) 0}
.foot__grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3rem)}
.foot__links{display:flex; flex-direction:column; gap:.1rem}
.foot__links a,.foot__meta a{color:var(--text-light-muted); text-decoration:none; padding-block:.35rem; display:inline-block}
.foot__links a:hover,.foot__meta a:hover{color:var(--gold)}
.foot__meta p{margin:0 0 .35rem; font-size:.95rem}
.foot__base{border-top:1px solid rgba(255,255,255,.12); margin-top:clamp(2rem,4vw,2.8rem); padding-block:1.5rem}
.foot__base p{margin:0; font-size:.85rem; color:rgba(246,241,232,.6)}

/* ---------- reveal motion ---------- */
.reveal{opacity:1}
html.js .reveal{opacity:0; transform:translateY(24px)}
html.js .hero-anim{opacity:0; transform:translateY(20px)}

/* ---------- error page ---------- */
.err{min-height:100svh; display:flex; align-items:center; background:var(--ink); padding-block:calc(var(--nav-h) + 3rem) 4rem}
.err__code{font-family:var(--font-display); font-size:clamp(5rem,18vw,11rem); line-height:1; color:rgba(218,165,32,.26); margin-bottom:.4rem}
.err h1{color:var(--text-light); font-size:clamp(1.75rem,1.2rem + 2.2vw,2.9rem); margin-bottom:1.1rem}
.err p{color:var(--text-light-muted); max-width:48ch}

/* ================= responsive ================= */
@media (max-width:1024px){
  .nav__links{gap:1.15rem}
  .nav__links a{font-size:.85rem}
}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .burger{display:flex}
  .hero__inner{max-width:none}
  .hero__scrim{
    background:
      linear-gradient(96deg, rgba(15,11,6,.9) 0%, rgba(15,11,6,.72) 34%, rgba(15,11,6,.3) 60%, rgba(15,11,6,.1) 80%),
      linear-gradient(to top, rgba(15,11,6,.8) 0%, rgba(15,11,6,.1) 55%);
  }
  .intro__grid,.wood__grid,.contact__grid,.work__pair{grid-template-columns:minmax(0,1fr)}
  .wood__plate{order:-1}
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot__brand{grid-column:1 / -1}
}

@media (max-width:768px){
  /* the hero is a flex row on desktop; stack it so the address tag drops below
     the copy instead of becoming a sibling column beside it */
  .hero{
    height:auto; min-height:100svh; padding-block:calc(var(--nav-h) + 3.5rem) 5.5rem;
    flex-direction:column; align-items:stretch; justify-content:center;
  }
  .hero__title{max-width:none}
  .hero__tag{
    position:static; inset:auto;
    align-self:flex-start;
    width:max-content; max-width:var(--wrap);
    /* line the tag up with the same gutter the wrap uses (no 100vw in this
       calc, per the percentage-token rule) */
    margin:1.8rem 0 0 calc((100% - var(--wrap)) / 2);
  }
  .index__panel p{padding-left:0}
  .contact__btns .btn{flex:1 1 100%; justify-content:center}
}

@media (max-width:480px){
  .hero{padding-block:calc(var(--nav-h) + 2.5rem) 4rem}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{justify-content:center}
  .factlist li{flex-direction:column; gap:.2rem}
  .factlist__k{flex:none; padding-top:0}
  /* 44px tap targets on the contact links */
  .factlist__v a,.contact__v a{display:inline-block; padding-block:.65rem}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  /* 44px tap targets in the footer (known QA gotcha) */
  .foot__links a,.foot__meta a{padding-block:.65rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,html.js .hero-anim{opacity:1; transform:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}