/* ============================================================
   VESTON by GLASSFROM — Architectural Interior Surface Collection
   ============================================================ */

:root{
  --bg:        #F4F0E9;   /* bone      */
  --bg-2:      #EAE3D7;   /* sand      */
  --bg-3:      #E0D7C7;   /* deep sand */
  --ink:       #302D27;   /* near-black warm */
  --ink-soft:  #55504733;
  --muted:     #7C7364;   /* taupe text */
  --muted-2:   #9A9082;
  --line:      rgba(48,45,39,.14);
  --line-2:    rgba(48,45,39,.28);
  --bronze:    #9C866A;   /* warm bronze accent */
  --charcoal:  #242219;
  --white:     #FBF9F5;
  --shadow:    0 24px 60px -28px rgba(36,34,25,.45);

  --serif: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --sans:  "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 80px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  font-weight:400; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; width:100%; max-width:100%;
}
/* Prevent grid/flex children from forcing horizontal overflow on mobile */
.product > *, .editorial > *, .cards > *, .tech > *, .index__row > *,
.product__body, .editorial__body, .card, .tech__col, .feat li{ min-width:0; }
.product__body, .editorial__body, .card__body, .sec-head, .hero__sub{ overflow-wrap:break-word; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:500; line-height:1.08; }

/* ---------- typographic helpers ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--bronze);
}
.serif{ font-family:var(--serif); }
.display{
  font-family:var(--serif); font-weight:500; letter-spacing:.005em;
}
.kr{ font-family:var(--sans); }
.muted{ color:var(--muted); }
.center{ text-align:center; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }
.pad{ padding-block:clamp(72px,11vw,160px); }
.pad-s{ padding-block:clamp(48px,7vw,96px); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:background .5s ease, padding .5s ease, box-shadow .5s ease;
  color:var(--white);
}
.site-header.scrolled{
  background:rgba(244,240,233,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  color:var(--ink); padding-block:14px;
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand .name{
  font-family:var(--serif); font-weight:600; font-size:1.55rem;
  letter-spacing:.32em; padding-left:.32em;
}
.brand .by{
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  margin-top:5px; opacity:.72; padding-left:.32em;
}
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:500; opacity:.85; position:relative; padding-block:6px;
  transition:opacity .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .4s ease;
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ width:100%; }

.nav-toggle{
  display:none; width:40px; height:40px; border:0; background:none;
  cursor:pointer; color:inherit; padding:0;
}
.nav-toggle span{ display:block; height:1.5px; background:currentColor; margin:7px 6px; transition:.35s; }

/* Full-screen mobile drawer — a direct child of <body>, so it is NEVER
   trapped by the header's backdrop-filter/stacking context. */
.drawer{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:30px; background:#1f1d16;
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.7,0,.2,1);
  visibility:hidden;
}
.drawer.open{ transform:translateY(0); visibility:visible; }
.drawer nav{ display:flex; flex-direction:column; align-items:center; gap:30px; }
.drawer a{
  color:var(--white); font-family:var(--sans); font-size:1.15rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.92;
}
.drawer a:hover{ opacity:1; }
.drawer-close{
  position:absolute; top:20px; right:var(--gut); font-size:2.4rem; line-height:1;
  background:none; border:0; color:var(--white); cursor:pointer;
}

@media (max-width:880px){
  .nav{ display:none; }        /* hide inline desktop links */
  .nav-toggle{ display:block; } /* show hamburger */
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--white); overflow:hidden;
}
.hero__img{ position:absolute; inset:0; }
.hero__img img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,28,22,.36) 0%, rgba(30,28,22,.05) 34%, rgba(30,28,22,.55) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(56px,9vh,120px); }
.hero .eyebrow{ color:rgba(251,249,245,.85); }
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(3rem,9vw,7.5rem); letter-spacing:.01em; margin:.22em 0 .28em;
  text-wrap:balance;
}
.hero__sub{
  max-width:44ch; font-size:clamp(.95rem,1.6vw,1.15rem);
  color:rgba(251,249,245,.9); line-height:1.6;
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(251,249,245,.78);
}
.scroll-cue{
  position:absolute; left:var(--gut); bottom:26px; z-index:3;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(251,249,245,.8); display:flex; align-items:center; gap:12px;
}
.scroll-cue i{ display:block; width:46px; height:1px; background:currentColor; transform-origin:left;
  animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleX(.4); opacity:.5 } 50%{ transform:scaleX(1); opacity:1 } }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.sec-head{ max-width:60ch; }
.sec-head .eyebrow{ display:block; margin-bottom:20px; }
.sec-head h2{
  font-family:var(--serif); font-size:clamp(2.1rem,5vw,3.6rem);
  letter-spacing:.01em; margin-bottom:.4em;
}
.sec-head p{ color:var(--muted); font-size:1.02rem; max-width:52ch; }
.sec-head .kr{ margin-top:.9em; color:var(--muted-2); font-size:.95rem; line-height:1.8; }

/* ---------- intro editorial ---------- */
.editorial{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,88px);
  align-items:center;
}
.editorial__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.editorial__body h2{
  font-family:var(--serif); font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:.5em;
}
.editorial__body p{ color:var(--muted); margin:0 0 1.1em; }
.editorial__body .kr{ color:var(--muted-2); font-size:.95rem; }
@media (max-width:820px){ .editorial{ grid-template-columns:1fr; } .editorial__media{ order:-1; } }

/* ---------- collection index table ---------- */
.index{ border-top:1px solid var(--line-2); }
.index__row{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:24px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--line);
  transition:background .4s, padding-left .4s;
}
.index__row:hover{ background:var(--bg-2); padding-left:14px; }
.index__no{ font-family:var(--serif); font-size:1.1rem; color:var(--bronze); min-width:2.4ch; }
.index__name{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.9rem); }
.index__name small{ display:block; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.index__grade{ font-size:.8rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.index__count{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); }
@media (max-width:640px){
  .index__row{ grid-template-columns:auto 1fr auto; }
  .index__grade{ display:none; }
}

/* ---------- palette band ---------- */
.palette{ position:relative; color:var(--white); overflow:hidden; }
.palette__img{ position:absolute; inset:0; }
.palette__img img{ width:100%; height:100%; object-fit:cover; }
.palette::after{ content:""; position:absolute; inset:0; background:rgba(28,26,20,.5); }
.palette .wrap{ position:relative; z-index:2; }
.palette blockquote{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,4.6vw,3.4rem);
  line-height:1.28; max-width:20ch; margin:0; text-wrap:balance;
}
.palette cite{ display:block; margin-top:28px; font-style:normal; font-size:.76rem;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(251,249,245,.7); }
.palette__chips{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; }
.palette__chips span{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,249,245,.85); display:flex; align-items:center; gap:10px; }
.palette__chips i{ width:34px; height:34px; border-radius:50%; display:block; border:1px solid rgba(255,255,255,.35); }

/* ============================================================
   SECTION DIVIDERS (full-bleed image + label)
   ============================================================ */
.divider{
  position:relative; min-height:60vh; display:flex; align-items:center;
  color:var(--white); overflow:hidden;
}
.divider__img{ position:absolute; inset:0; }
.divider__img img{ width:100%; height:100%; object-fit:cover; }
.divider::after{ content:""; position:absolute; inset:0; background:rgba(28,26,20,.34); }
.divider .wrap{ position:relative; z-index:2; }
.divider .eyebrow{ color:rgba(251,249,245,.85); }
.divider h2{
  font-family:var(--serif); font-size:clamp(3rem,10vw,7rem); letter-spacing:.02em; margin-top:.15em;
}
.divider p{ margin-top:16px; color:rgba(251,249,245,.85); letter-spacing:.16em;
  text-transform:uppercase; font-size:.78rem; }

/* ============================================================
   PRODUCT BLOCK
   ============================================================ */
.product{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  border:1px solid var(--line); overflow:hidden; background:var(--white);
}
.product--rev .product__media{ order:2; }
.product__media{ position:relative; min-height:420px; }
.product__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product__body{ padding:clamp(32px,4.4vw,64px); display:flex; flex-direction:column; }
.product__tag{ margin-bottom:18px; }
.product__title{
  font-family:var(--serif); font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:.15em;
}
.product__sub{ color:var(--muted); font-size:.86rem; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:1.4em; }
.product__desc{ color:var(--muted); margin-bottom:1.8em; }

.feat{ list-style:none; padding:0; margin:0 0 2em; display:grid; gap:14px; }
.feat li{ display:flex; gap:14px; align-items:flex-start; font-size:.92rem; }
.feat li b{ font-weight:600; color:var(--ink); }
.feat li span{ color:var(--muted); }
.feat li::before{ content:""; flex:0 0 auto; width:7px; height:7px; margin-top:8px;
  background:var(--bronze); border-radius:50%; }

/* swatches */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:16px; margin-top:auto; }
.swatch figure{ margin:0; }
.swatch img{ width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line);
  transition:transform .5s ease, box-shadow .5s ease; }
.swatch:hover img{ transform:translateY(-4px); box-shadow:var(--shadow); }
.swatch figcaption{ margin-top:10px; font-size:.78rem; letter-spacing:.02em; }
.swatch figcaption b{ display:block; font-weight:600; }
.swatch figcaption small{ color:var(--muted); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }

/* spec + application chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chips span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-2); border-radius:100px; padding:6px 14px; }

.spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:26px; }
.spec div{ background:var(--white); padding:16px 18px; }
.spec dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.spec dd{ margin:6px 0 0; font-family:var(--serif); font-size:1.15rem; }

@media (max-width:820px){
  .product{ grid-template-columns:1fr; }
  .product--rev .product__media{ order:0; }
  .product__media{ min-height:300px; aspect-ratio:4/3; }
}

/* ============================================================
   TEXTURE CARDS
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.card{ background:var(--white); border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column; }
.card__media{ aspect-ratio:16/10; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__body{ padding:clamp(24px,3vw,40px); }
.card__body .badge{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); font-weight:700; }
.card__body h3{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.1rem); margin:.35em 0; }
.card__body .lead{ font-size:.9rem; color:var(--ink); margin-bottom:.7em; font-style:italic; font-family:var(--serif); }
.card__body p{ font-size:.9rem; color:var(--muted); margin:0; }
@media (max-width:720px){ .cards{ grid-template-columns:1fr; } }

/* ============================================================
   TECHNICAL DATA
   ============================================================ */
.tech{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); }
.tech__col h3{ font-family:var(--serif); font-size:1.7rem; }
.tech__col .abbr{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); }
.tech__col p{ color:var(--muted); font-size:.9rem; margin:1em 0 1.6em; }
.datatable{ width:100%; border-collapse:collapse; }
.datatable th, .datatable td{ text-align:left; padding:14px 0; border-bottom:1px solid var(--line);
  font-size:.9rem; }
.datatable th{ color:var(--muted); font-weight:500; }
.datatable td{ font-family:var(--serif); font-size:1.05rem; text-align:right; }
@media (max-width:720px){ .tech{ grid-template-columns:1fr; } }

/* ============================================================
   INSTALLATION STEPS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); }
.step{ background:var(--bg); padding:clamp(22px,2.6vw,34px); }
.step__no{ font-family:var(--serif); font-size:2.4rem; color:var(--bronze); line-height:1; }
.step h4{ margin:14px 0 8px; font-size:1rem; font-weight:600; }
.step p{ margin:0; font-size:.84rem; color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   REFERENCE GALLERY
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,20px); grid-auto-flow:dense; }
.gal{ position:relative; overflow:hidden; background:var(--bg-3); }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gal:hover img{ transform:scale(1.05); }
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:22px; z-index:2; color:var(--white);
  background:linear-gradient(0deg, rgba(24,22,16,.78), transparent);
  opacity:0; transform:translateY(10px); transition:.5s;
}
.gal:hover figcaption{ opacity:1; transform:translateY(0); }
.gal figcaption b{ display:block; font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.gal figcaption small{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.gal--wide{ grid-column:span 8; aspect-ratio:16/9; }
.gal--tall{ grid-column:span 4; aspect-ratio:3/4; }
.gal--sq{ grid-column:span 4; aspect-ratio:1; }
.gal--half{ grid-column:span 6; aspect-ratio:4/3; }
@media (max-width:820px){
  .gal--wide,.gal--tall,.gal--sq,.gal--half{ grid-column:span 6; aspect-ratio:4/3; }
}
@media (max-width:520px){
  .gal--wide,.gal--tall,.gal--sq,.gal--half{ grid-column:span 12; }
}

/* clients / references list */
.clients{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(30px,5vw,80px); margin-top:8px; }
.clients div{ display:flex; justify-content:space-between; gap:20px; padding:20px 0;
  border-bottom:1px solid var(--line); }
.clients b{ font-weight:500; font-family:var(--serif); font-size:1.15rem; }
.clients span{ color:var(--muted); font-size:.85rem; text-align:right; }
@media (max-width:680px){ .clients{ grid-template-columns:1fr; } }

/* certifications (legacy text badges — kept for reference) */
.certs{ display:flex; flex-wrap:wrap; gap:12px; }
.certs span{ border:1px solid var(--line-2); padding:12px 20px; font-size:.82rem;
  color:var(--muted); letter-spacing:.04em; }
.certs span b{ color:var(--ink); font-weight:600; }

/* ---------- accordion (collapsible panels) ---------- */
.accordion{ border-bottom:1px solid var(--line); }
.accordion:first-of-type{ border-top:1px solid var(--line-2); }
.accordion > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:28px 2px;
}
.accordion > summary::-webkit-details-marker{ display:none; }
.accordion > summary::marker{ content:""; }
.accordion .sum-txt h3{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); font-weight:500; }
.accordion .sum-txt .hint{ display:block; margin-top:6px; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); }
.accordion .plus{ position:relative; flex:0 0 auto; width:38px; height:38px;
  border:1px solid var(--line-2); border-radius:50%; transition:background .3s; }
.accordion .plus::before, .accordion .plus::after{ content:""; position:absolute; background:var(--ink); transition:.35s; }
.accordion .plus::before{ left:50%; top:11px; bottom:11px; width:1.5px; transform:translateX(-50%); }
.accordion .plus::after{ top:50%; left:11px; right:11px; height:1.5px; transform:translateY(-50%); }
.accordion[open] .plus::before{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.accordion[open] .plus{ background:var(--bg-3); }
.accordion__body{ padding:6px 2px 44px; }

/* certificate cards */
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.cert-card{ display:block; border:1px solid var(--line); background:#fff; transition:box-shadow .4s, transform .4s; }
.cert-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.cert-card img{ width:100%; aspect-ratio:1/1.414; object-fit:contain; background:#fff; }
.cert-card figcaption{ padding:14px 16px; border-top:1px solid var(--line); }
.cert-card figcaption b{ display:block; font-size:.9rem; font-weight:600; }
.cert-card figcaption small{ display:block; margin-top:4px; color:var(--muted); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.footer{ background:var(--charcoal); color:#D7CFBE; }
.footer__top{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(40px,6vw,90px);
  padding-block:clamp(70px,9vw,130px); }
.footer .brand .name{ color:var(--white); font-size:2.4rem; }
.footer .brand .by{ color:#B8AF9E; opacity:.7; }
.footer h4{ font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); color:var(--white);
  font-weight:500; max-width:16ch; line-height:1.15; }
.contact-list{ margin-top:36px; display:grid; gap:20px; }
.contact-list div dt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:#9A907E; }
.contact-list div dd{ margin:6px 0 0; font-size:1rem; color:#E7E0D2; }
.contact-list a:hover{ color:var(--white); }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.72rem; letter-spacing:.08em; color:#8A8072; }
.footer__bottom span{ color:#8A8072; }
@media (max-width:760px){ .footer__top{ grid-template-columns:1fr; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .scroll-cue i{ animation:none; }
}