/* ============================================================
   STONECRAFT — visual identity

   Palette
     --basalt        #17181A   near-black, hero + footer bg
     --basalt-2      #232421   raised panels on dark
     --stone         #504B43   mid warm grey, secondary text
     --parchment     #EEE8DB   light bg
     --parchment-2   #E2DAC8   raised panels on light
     --vein          #B08A3E   muted brass/gold — the one accent

   Type
     Display: 'Fraunces'   (characterful serif, catalog/luxury)
     Body:    'Work Sans'  (clean, quiet)
     Spec:    'IBM Plex Mono' (data / catalog specs, small caps labels)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --basalt:#17181A;
  --basalt-2:#232421;
  --stone:#504B43;
  --parchment:#EEE8DB;
  --parchment-2:#E2DAC8;
  --vein:#B08A3E;
  --vein-soft:#B08A3E66;
  --text-dark:#EEE8DB;
  --text-light:#201F1D;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--text-light);
  font-family:'Work Sans',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vein);
  display:block;
  margin-bottom:.9em;
}
.spec{font-family:'IBM Plex Mono',monospace;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--parchment);
  border-bottom:1px solid #00000014;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;max-width:1180px;margin:0 auto;
}
.brand{
  font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;
  display:flex;align-items:baseline;gap:.5em;
}
.brand small{
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.12em;
  color:var(--stone);text-transform:uppercase;font-weight:400;
}
.site-logo-link{display:flex;align-items:center;}
.site-logo-img{
  height:56px;width:auto;display:block;
  border-radius:6px;
  box-shadow:0 2px 8px #00000033;
}
@media(max-width:600px){.site-logo-img{height:44px;border-radius:5px;}}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{
  font-size:.92rem;font-weight:500;position:relative;padding:4px 0;
}
.nav-links a.active,.nav-links a:hover{color:var(--vein);}
.btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 22px;border:1px solid var(--text-light);
  border-radius:var(--radius);
  transition:background .18s,color .18s,border-color .18s;
  display:inline-block;background:transparent;cursor:pointer;
}
.btn:hover{background:var(--text-light);color:var(--parchment);}
.btn-vein{border-color:var(--vein);color:var(--vein);}
.btn-vein:hover{background:var(--vein);color:var(--basalt);}
.btn-fill{background:var(--vein);border-color:var(--vein);color:var(--basalt);}
.btn-fill:hover{background:transparent;color:var(--vein);}
.nav-cta{display:none;}
@media(min-width:720px){.nav-cta{display:inline-block;}}

.mobile-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--text-light);}
@media(max-width:720px){
  .nav-links{position:absolute;top:64px;left:0;right:0;background:var(--parchment);
    flex-direction:column;align-items:flex-start;padding:20px 28px;gap:18px;
    border-bottom:1px solid #00000014;display:none;}
  .nav-links.open{display:flex;}
  .mobile-toggle{display:block;}
}

/* ---------- hero: procedural granite veining ---------- */
.hero{
  position:relative;background:var(--basalt);color:var(--text-dark);
  overflow:hidden;padding:110px 0 90px;
}
.hero-texture{
  position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:
    radial-gradient(ellipse 220px 140px at 12% 20%, #B08A3E22, transparent 60%),
    radial-gradient(ellipse 300px 200px at 80% 15%, #ffffff10, transparent 60%),
    radial-gradient(ellipse 260px 180px at 65% 80%, #B08A3E1a, transparent 60%),
    radial-gradient(ellipse 180px 120px at 25% 85%, #ffffff0d, transparent 60%);
}
.hero-texture svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
.hero-inner{position:relative;z-index:2;max-width:640px;}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);}
.hero p.lede{font-size:1.15rem;color:#EEE8DBcc;max-width:520px;margin:0 0 2em;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:84px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head p{color:var(--stone);font-size:1.05rem;}
.hr{border:none;border-top:1px solid var(--vein-soft);margin:0 0 84px;}

/* ---------- catalog / gallery grid ---------- */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.catalog-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.catalog-grid{grid-template-columns:1fr;}}
.stone-card{
  background:var(--basalt-2);border-radius:var(--radius);overflow:hidden;
  border:1px solid #00000010;
}
.swatch{
  aspect-ratio:4/3;position:relative;overflow:hidden;
}
.swatch img{width:100%;height:100%;object-fit:cover;}
/* procedural stand-in textures, used only when no real photo is uploaded */
.tone-dark{background:
    radial-gradient(circle at 20% 30%,#B08A3E 0 2px,transparent 3px),
    radial-gradient(circle at 60% 60%,#B08A3E 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 80% 20%,#ffffff44 0 1px,transparent 2px),
    radial-gradient(circle at 40% 80%,#ffffff33 0 1px,transparent 2px),
    radial-gradient(circle at 90% 70%,#B08A3E 0 1.5px,transparent 2.5px),
    linear-gradient(135deg,#17181A,#232421);
  background-size:60px 60px,45px 45px,30px 30px,38px 38px,52px 52px,100% 100%;
}
.tone-light{background:
    radial-gradient(circle at 25% 35%,#a89a7c88 0 2px,transparent 3px),
    radial-gradient(circle at 70% 65%,#7d715288 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 55% 15%,#8a3d3d55 0 1px,transparent 2px),
    linear-gradient(135deg,#EDE7DA,#DCD3BC);
  background-size:40px 40px,55px 55px,34px 34px,100% 100%;
}
.tone-warm{background:
    radial-gradient(circle at 30% 30%,#2a201888 0 2px,transparent 3px),
    radial-gradient(circle at 65% 70%,#1c130f88 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 80% 25%,#c9955722 0 3px,transparent 4px),
    linear-gradient(135deg,#8C6A4A,#6B4E33);
  background-size:36px 36px,48px 48px,70px 70px,100% 100%;
}
.tone-cool{background:
    radial-gradient(circle at 30% 30%,#dbe4ea55 0 2px,transparent 3px),
    radial-gradient(circle at 70% 60%,#0f151a66 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 50% 80%,#9fb6c433 0 3px,transparent 4px),
    linear-gradient(135deg,#4A5A63,#2E3A40);
  background-size:34px 34px,50px 50px,66px 66px,100% 100%;
}
.swatch-label{
  position:absolute;bottom:0;left:0;right:0;padding:10px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;
  color:#EEE8DB99;background:linear-gradient(0deg,#00000090,transparent);
  text-transform:uppercase;
}
.stone-info{padding:18px 18px 20px;color:var(--text-dark);}
.stone-info h3{font-size:1.15rem;color:var(--text-dark);margin-bottom:.3em;}
.stone-info p{color:#EEE8DBaa;font-size:.9rem;margin:0 0 .9em;}
.stone-meta{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--vein);letter-spacing:.04em;}

/* quarry -> block -> polished -> installation stage panels (stacked inside .swatch, toggled by filter pills) */
.stage-panel{position:absolute;inset:0;display:none;}
.stage-panel.active{display:block;}
.stage-panel img{width:100%;height:100%;object-fit:cover;display:block;}

/* Some stones show several real photos per stage as a scrollable strip
   instead of one photo (see "stagePhotos" in data/gallery.php) */
.stage-strip{display:flex;gap:2px;height:100%;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.stage-strip img{flex:0 0 auto;width:auto;height:100%;object-fit:cover;scroll-snap-align:start;}
.stage-strip::-webkit-scrollbar{height:5px;}
.stage-strip::-webkit-scrollbar-thumb{background:#00000030;border-radius:3px;}

/* "All" view: show all 4 stage panels side-by-side instead of stacked */
.stage-all .swatch{display:flex;gap:2px;}
.stage-all .stage-panel{
  position:static;display:block;flex:1 1 25%;height:100%;overflow:hidden;
}
.stage-all .stage-panel .swatch-label{font-size:.56rem;padding:8px 8px;}

/* filter pills (also used as jump-to-section links on the catalog page) */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;}
.filter-pill{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.05em;
  padding:8px 16px;border:1px solid #00000022;border-radius:20px;
  cursor:pointer;background:transparent;text-transform:uppercase;
  display:inline-block;
}
.filter-pill.active,.filter-pill:hover{background:var(--text-light);color:var(--parchment);border-color:var(--text-light);}
html{scroll-behavior:smooth;}
.stage-section{scroll-margin-top:100px;}

/* ---------- quarry photos ---------- */
.quarry-card{background:var(--basalt-2);border-radius:var(--radius);overflow:hidden;border:1px solid #00000010;}
.quarry-photo{aspect-ratio:4/3;position:relative;overflow:hidden;}
.quarry-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.quarry-caption{padding:12px 16px 16px;font-size:.85rem;color:#EEE8DBaa;}

/* ---------- plain photo grid (used for full stage photo sets) ---------- */
.photo-card{background:var(--basalt-2);border-radius:var(--radius);overflow:hidden;border:1px solid #00000010;aspect-ratio:4/3;}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block;}
.stage-section{margin-bottom:56px;}
.stage-section:last-child{margin-bottom:0;}
.stage-section h3{font-size:1.3rem;margin-bottom:18px;}

/* ---------- projects ---------- */
.project-card{
  background:#fff;border:1px solid #00000012;border-radius:var(--radius);overflow:hidden;
}
.project-photo{aspect-ratio:16/10;position:relative;overflow:hidden;}
.project-photo img{width:100%;height:100%;object-fit:cover;}
.project-body{padding:20px 22px 24px;}
.project-body h3{font-size:1.1rem;margin-bottom:.25em;}
.project-body .spec{color:var(--stone);font-size:.82rem;display:block;margin-bottom:2px;}
.project-tag{
  display:inline-block;margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--vein);
  border:1px solid var(--vein-soft);padding:4px 10px;border-radius:14px;
}

/* ---------- quote form ---------- */
.quote-section{background:var(--basalt);color:var(--text-dark);}
.quote-layout{display:grid;grid-template-columns:1fr;gap:56px;align-items:stretch;}
@media(min-width:860px){.quote-layout{grid-template-columns:1fr 1.3fr;}}
.quote-side{display:flex;flex-direction:column;height:100%;}
.quote-side h2{color:var(--text-dark);}
.quote-side p{color:#EEE8DBaa;}
.quote-side .map-embed{margin-top:auto;padding-top:28px;}
.contact-line{display:flex;gap:12px;margin:22px 0 0;font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--vein);}
.map-embed{
  margin-top:28px;border-radius:var(--radius);overflow:hidden;
  border:1px solid #ffffff1f;
}
.map-embed iframe{display:block;}
.map-placeholder{
  height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:24px;
  background:var(--basalt-2);color:#EEE8DB99;
}
.map-placeholder span{font-size:1.8rem;}
.map-placeholder p{font-size:.8rem;line-height:1.5;margin:0;}
.map-placeholder p code{color:var(--vein);font-family:'IBM Plex Mono',monospace;}
.map-placeholder-address{color:#EEE8DBcc !important;font-weight:500;margin-top:4px !important;}

.form-card{background:var(--basalt-2);border:1px solid #ffffff14;border-radius:var(--radius);padding:34px;height:100%;display:flex;flex-direction:column;}
.form-card form{display:flex;flex-direction:column;flex:1;}
.form-card form button{margin-top:auto;}
.quote-form-wrap{height:100%;}
.field{margin-bottom:20px;}
.field label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--vein);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--basalt);border:1px solid #ffffff22;
  color:var(--text-dark);padding:12px 14px;font-family:'Work Sans',sans-serif;
  font-size:.95rem;border-radius:var(--radius);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--vein);outline-offset:1px;}
.field-row{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:520px){.field-row{grid-template-columns:1fr 1fr;}}
textarea{resize:vertical;min-height:110px;}
.hp{position:absolute;left:-9999px;}

.alert{
  padding:14px 18px;border-radius:var(--radius);font-size:.9rem;margin-bottom:24px;
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;
}
.alert-success{background:#1f3d2a;color:#a9e6bc;border:1px solid #2e5a3d;}
.alert-error{background:#3d1f1f;color:#e6a9a9;border:1px solid #5a2e2e;}

/* ---------- footer ---------- */
footer{background:var(--basalt);color:#EEE8DB88;padding:50px 0 30px;border-top:1px solid #ffffff10;}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;margin-bottom:30px;}
.footer-grid h4{color:var(--text-dark);font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;}
.footer-grid a{display:block;font-size:.88rem;margin-bottom:8px;color:#EEE8DBaa;}
.footer-grid a:hover{color:var(--vein);}
.foot-bottom{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:#EEE8DB55;border-top:1px solid #ffffff10;padding-top:22px;}

/* ---------- misc ---------- */
.cols-3{display:grid;gap:40px;grid-template-columns:1fr;}
@media(min-width:760px){.cols-3{grid-template-columns:repeat(3,1fr);}}
.stat{border-top:1px solid var(--vein-soft);padding-top:14px;}
.stat b{display:block;font-family:'Fraunces',serif;font-size:2rem;font-weight:500;}
.stat span{color:var(--stone);font-size:.85rem;}