/* ============================================================
   ONYX — Natural Stone · Concept & UI-Kit
   Warm-white theme · contrast serif + grotesque · copper/gold
   Support stylesheet (tokens + components + artboard layouts)
   ============================================================ */

:root{
  /* type families — overridden per direction */
  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', system-ui, -apple-system, sans-serif;

  /* surfaces — warm white */
  --paper:#F4F1EC;        /* page */
  --paper-2:#EFEBE3;      /* alt section */
  --surface:#FBFAF7;      /* card */
  --white:#FFFFFF;

  /* ink */
  --ink:#1C1A17;          /* near-black warm */
  --ink-2:#4C463D;        /* secondary text */
  --ink-3:#8C8478;        /* muted / captions */
  --ink-on-stone:#FBF6EE; /* text over dark stone */

  /* hairlines */
  --line:#E4DED3;
  --line-2:#D6CDBE;

  /* metals — used sparingly */
  --copper:#A75F35;
  --copper-deep:#864A28;
  --copper-soft:#C68A5C;
  --gold:#9A7C2C;
  --gold-deep:#7B6320;
  --gold-soft:#CBA75A;

  /* radii — architectural: minimal rounding */
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px;

  /* spacing scale 4 / 8 / 16 / 24 / 40 / 64 / 96 */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px;
}

*{box-sizing:border-box;}

html, body{ overflow-x:clip; }

.dir-a{ --font-display:'Cormorant Garamond', Georgia, serif; --accent:var(--copper); --accent-deep:var(--copper-deep); --accent-soft:var(--copper-soft); }
.dir-b{ --font-display:'Playfair Display', Georgia, serif; --accent:var(--gold); --accent-deep:var(--gold-deep); --accent-soft:var(--gold-soft); }

/* ---- artboard root ---- */
.ab{
  width:100%; height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow:hidden;
}
.ab-pad{ padding:56px 64px; }

/* a small honest tag marking placeholder imagery */
.ph-tag{
  position:absolute; z-index:6;
  font-family:var(--font-body);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-on-stone);
  background:rgba(20,16,12,.42);
  backdrop-filter:blur(3px);
  padding:5px 9px; border-radius:2px;
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600;
}
.ph-tag::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--copper-soft); }

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */
.display{ font-family:var(--font-display); font-weight:500; line-height:.98; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent,var(--copper));
}
.kicker{
  font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
}
.h1{ font-family:var(--font-display); font-weight:500; font-size:84px; line-height:1.0; letter-spacing:-.012em; }
.h2{ font-family:var(--font-display); font-weight:500; font-size:56px; line-height:1.04; letter-spacing:-.01em; }
.h3{ font-family:var(--font-display); font-weight:500; font-size:40px; line-height:1.08; }
.h4{ font-family:var(--font-display); font-weight:600; font-size:28px; line-height:1.15; }
.h5{ font-family:var(--font-body); font-weight:700; font-size:21px; line-height:1.25; letter-spacing:-.01em; }
.h6{ font-family:var(--font-body); font-weight:700; font-size:16px; line-height:1.3; letter-spacing:.01em; }
.body-l{ font-family:var(--font-body); font-weight:400; font-size:19px; line-height:1.65; color:var(--ink-2); }
.body-m{ font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.62; color:var(--ink-2); }
.body-s{ font-family:var(--font-body); font-weight:400; font-size:14px; line-height:1.55; color:var(--ink-2); }
.caption{ font-family:var(--font-body); font-weight:500; font-size:12.5px; line-height:1.4; color:var(--ink-3); letter-spacing:.01em; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer;
  transition:all .25s cubic-bezier(.2,.7,.3,1); white-space:nowrap;
  text-decoration:none; line-height:1;
}
.btn .ic{ width:16px; height:16px; transition:transform .25s; }
.btn-primary{ background:var(--accent,var(--copper)); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep,var(--copper-deep)); }
.btn-primary:hover .ic{ transform:translateX(3px); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-secondary:hover{ border-color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--accent,var(--copper)); padding-left:0; padding-right:0; }
.btn-ghost:hover .ic{ transform:translateX(3px); }
.btn-disabled,.btn[disabled]{ background:var(--line); color:var(--ink-3); cursor:not-allowed; border-color:transparent; }
.btn-focus{ box-shadow:0 0 0 3px rgba(167,95,53,.28); }
/* on dark stone */
.btn-on-stone{ background:rgba(251,246,238,.0); color:var(--ink-on-stone); border-color:rgba(251,246,238,.45); }
.btn-on-stone:hover{ border-color:var(--ink-on-stone); background:rgba(251,246,238,.08); }
.btn-gold{ background:var(--gold); color:#fff; }
.btn-gold:hover{ background:var(--gold-deep); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 64px; position:relative; z-index:20;
}
.nav.on-stone{ color:var(--ink-on-stone); }
.wordmark{ font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:.02em; display:flex; align-items:baseline; gap:3px; }
.wordmark .dot{ color:var(--accent,var(--copper)); }
.wordmark sup{ font-family:var(--font-body); font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-left:8px; }
.nav.on-stone .wordmark sup{ color:rgba(251,246,238,.6); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:inherit; text-decoration:none; position:relative; padding:4px 0;
  opacity:.8; transition:opacity .2s;
}
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ opacity:1; }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; background:var(--accent,var(--copper));
}
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-cta{ padding:11px 20px; font-size:12.5px; }
@media (max-width:1020px){ .nav-cta{ display:none; } }
.lang{ display:flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.08em; }
.lang b{ color:var(--accent,var(--copper)); }
.lang span{ opacity:.45; }
.nav .icon-btn{ width:38px; height:38px; border:1px solid currentColor; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:.55; }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); text-transform:uppercase; }
.input{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:14px 16px; transition:border-color .2s, box-shadow .2s; width:100%;
}
.input::placeholder{ color:var(--ink-3); }
.input.is-focus{ border-color:var(--copper); box-shadow:0 0 0 3px rgba(167,95,53,.14); outline:none; }
.input.is-error{ border-color:#B23A2E; box-shadow:0 0 0 3px rgba(178,58,46,.12); }
.input.is-disabled{ background:var(--paper-2); color:var(--ink-3); border-color:var(--line); }
.field .hint{ font-size:12px; color:var(--ink-3); }
.field .err{ font-size:12px; color:#B23A2E; display:flex; align-items:center; gap:6px; }
.field .ok{ font-size:12px; color:#2F7D52; display:flex; align-items:center; gap:6px; }

/* ============================================================
   TAGS / FILTERS
   ============================================================ */
.chip{
  font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:.02em;
  padding:9px 16px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-2);
  background:transparent; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:8px;
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip .x{ width:12px; height:12px; opacity:.7; }

/* ============================================================
   STONE CARD
   ============================================================ */
.stone-card{
  width:340px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; transition:box-shadow .3s, transform .3s; cursor:pointer;
  display:flex; flex-direction:column;
}
.stone-card:hover{ box-shadow:0 18px 50px -18px rgba(40,28,16,.4); transform:translateY(-4px); }
.stone-card .thumb{ position:relative; height:300px; overflow:hidden; }
.stone-card .thumb .badge{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-on-stone); background:rgba(20,16,12,.4); backdrop-filter:blur(4px);
  padding:6px 10px; border-radius:2px;
}
.stone-card .thumb .view360{
  position:absolute; bottom:14px; right:14px; z-index:3;
  width:40px; height:40px; border-radius:50%; background:rgba(251,246,238,.92);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  opacity:0; transform:translateY(6px); transition:.3s;
}
.stone-card:hover .thumb .view360{ opacity:1; transform:translateY(0); }
.stone-card .meta{ padding:22px 22px 24px; }
.stone-card .meta .origin{ font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.stone-card .meta .name{ font-family:var(--font-display); font-weight:500; font-size:30px; line-height:1; margin-bottom:14px; }
.stone-card .meta .row{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line); }
.stone-card .meta .row .sample{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--copper); display:flex; align-items:center; gap:8px; }

/* ============================================================
   PROJECT CARD
   ============================================================ */
.proj-card{ width:380px; cursor:pointer; }
.proj-card .img{ position:relative; height:260px; overflow:hidden; border-radius:var(--r-sm); }
.proj-card .img .stones{ position:absolute; left:14px; bottom:14px; z-index:3; display:flex; gap:6px; }
.proj-card .img .stones span{ font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-on-stone); background:rgba(20,16,12,.42); backdrop-filter:blur(4px); padding:5px 9px; border-radius:2px; }
.proj-card .pc-meta{ padding:18px 2px 0; }
.proj-card .pc-meta .ptype{ font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.proj-card .pc-meta .pname{ font-family:var(--font-display); font-weight:500; font-size:26px; line-height:1.05; }
.proj-card .pc-meta .pby{ font-family:var(--font-body); font-size:13px; color:var(--ink-3); margin-top:6px; }

/* ============================================================
   MODAL — Order a Sample
   ============================================================ */
.modal{ width:480px; background:var(--surface); border-radius:var(--r-md); box-shadow:0 40px 100px -30px rgba(30,20,10,.6); overflow:hidden; }
.modal .m-head{ position:relative; height:160px; overflow:hidden; }
.modal .m-head .close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:rgba(251,246,238,.92); display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; z-index:3; }
.modal .m-body{ padding:30px 32px 32px; }
.modal .m-body .m-eyebrow{ font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); margin-bottom:10px; }
.modal .m-body h3{ font-family:var(--font-display); font-weight:500; font-size:32px; line-height:1.05; margin:0 0 8px; }
.modal .m-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
.modal .m-grid .full{ grid-column:1 / -1; }

/* swatch grid for color artboard */
.swatch{ border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--white); }
.swatch .chip-c{ height:72px; }
.swatch .lab{ padding:10px 12px; }
.swatch .lab .nm{ font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--ink); }
.swatch .lab .hx{ font-family:var(--font-body); font-size:11px; font-weight:500; color:var(--ink-3); letter-spacing:.04em; margin-top:2px; }
.swatch .lab .use{ font-family:var(--font-body); font-size:10.5px; color:var(--ink-3); margin-top:5px; line-height:1.3; }

.aa{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:.08em; padding:2px 7px; border-radius:3px; }
.aa.pass{ background:rgba(47,125,82,.14); color:#2F7D52; }
.aa.large{ background:rgba(167,95,53,.14); color:var(--copper-deep); }

/* spacing scale visual */
.sp-bar{ background:var(--copper-soft); height:14px; border-radius:2px; }
.grid-col{ background:rgba(167,95,53,.12); border-left:1px solid rgba(167,95,53,.3); border-right:1px solid rgba(167,95,53,.3); }

/* generic divider */
.rule{ height:1px; background:var(--line); border:0; }
.v-rule{ width:1px; background:var(--line); }

/* numbered index used in heroes */
.idx{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.18em; color:var(--ink-3); }

/* scroll cue */
.scrollcue{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.scrollcue .line{ width:1px; height:46px; background:linear-gradient(var(--accent,var(--copper)), transparent); }
.scrollcue .t{ writing-mode:vertical-rl; font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }

/* note card on reasoning board */
.note{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:20px 22px; }
.note .nh{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:10px; display:flex; align-items:center; gap:9px; }
.note .nh .d{ width:7px; height:7px; border-radius:50%; background:var(--copper); }
.note ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.note li{ font-family:var(--font-body); font-size:13.5px; line-height:1.5; color:var(--ink-2); padding-left:18px; position:relative; }
.note li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--copper); }

/* top-5 slider strip */
.slider-strip{ display:flex; align-items:stretch; gap:2px; }
.slider-strip .s-item{ position:relative; flex:1; height:96px; overflow:hidden; cursor:pointer; }
.slider-strip .s-item .s-cap{ position:absolute; left:12px; bottom:10px; z-index:3; color:var(--ink-on-stone); }
.slider-strip .s-item .s-cap .sn{ font-family:var(--font-display); font-size:18px; font-weight:500; line-height:1; }
.slider-strip .s-item .s-cap .so{ font-family:var(--font-body); font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.8; margin-top:3px; }
.slider-strip .s-item .s-no{ position:absolute; top:10px; left:12px; z-index:3; font-family:var(--font-body); font-size:10px; font-weight:700; color:var(--ink-on-stone); opacity:.8; }

/* ============================================================
   LOADING STATES
   ============================================================ */
.btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading .ic{ opacity:0; }
.btn.is-loading::after{
  content:''; position:absolute; top:50%; left:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn-secondary.is-loading::after,.btn-ghost.is-loading::after{ border-color:rgba(76,70,61,.3); border-top-color:var(--ink); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* inline spinner */
.spinner{ display:inline-block; width:16px; height:16px; border:2px solid var(--line-2); border-top-color:var(--copper); border-radius:50%; animation:spin .7s linear infinite; }

/* skeleton shimmer */
.skel{ position:relative; overflow:hidden; background:var(--paper-2); border-radius:3px; }
.skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-100%);
}
@media (prefers-reduced-motion: no-preference){
  .skel::after{ animation:shimmer 1.35s ease-in-out infinite; }
}
@keyframes shimmer{ to{ transform:translateX(100%); } }

/* skeleton stone card */
.skel-card{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.skel-card .sk-thumb{ height:320px; }
.skel-card .sk-meta{ padding:22px; display:flex; flex-direction:column; gap:12px; }
.skel-card .sk-line{ height:12px; }
.skel-card .sk-line.w40{ width:40%; } .skel-card .sk-line.w70{ width:70%; height:26px; } .skel-card .sk-line.w100{ width:100%; }
.skel-card .sk-row{ display:flex; justify-content:space-between; margin-top:8px; }
.skel-card .sk-row .sk-pill{ width:120px; height:14px; }

/* ============================================================
   MOBILE NAV (hamburger + slide-over menu)
   ============================================================ */
.nav-burger{ display:none; flex-direction:column; gap:5px; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; background:transparent; cursor:pointer; padding:0; }
.nav-burger span{ display:block; width:17px; height:1.5px; background:var(--ink); border-radius:2px; }
.nav.on-stone .nav-burger{ border-color:rgba(251,246,238,.4); }
.nav.on-stone .nav-burger span{ background:var(--ink-on-stone); }

.mobile-menu{ position:fixed; inset:0; z-index:130; background:var(--paper); display:flex; flex-direction:column; padding:20px 22px 30px; transform:translateX(100%); pointer-events:none; }
.mobile-menu.open{ transform:translateX(0); pointer-events:auto; }
.mm-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mm-top .wordmark{ font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--ink); text-decoration:none; }
.mm-top .wordmark .dot{ color:var(--copper); }
.mm-close{ width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.mm-links{ display:flex; flex-direction:column; flex:1; }
.mm-links a{ font-family:var(--font-display); font-weight:500; font-size:34px; line-height:1.1; color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.mm-links a .mi{ opacity:0; transform:translateX(-6px); transition:.2s; color:var(--copper); }
.mm-links a.active{ color:var(--copper); }
.mm-links a.active .mi{ opacity:1; transform:none; }
.mm-foot{ display:flex; flex-direction:column; gap:18px; margin-top:24px; }
.mm-foot .mm-lang{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:.08em; }
.mm-foot .mm-lang b{ color:var(--copper); }
.mm-foot .mm-lang span{ opacity:.45; }

@media (max-width:900px){
  .nav-burger{ display:flex; }
  .nav-links{ display:none !important; }
  .nav-right .lang, .nav-right .icon-btn{ display:none !important; }
}