/* ==========================================================================
   SPRYK — shared base styles (design tokens, fonts, header, footer)
   Values captured from live spryk.in. Used by every page.
   ========================================================================== */

/* ---- Fonts (real brand fonts, served locally from preview/assets/fonts) ---- */
@font-face { font-family:"Archivo"; src:url("../assets/fonts/Archivo-VariableFont_wdthwght.ttf") format("truetype"); font-weight:100 700; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("../assets/fonts/Archivo_SemiCondensed-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Monument"; src:url("../assets/fonts/MonumentExtended-Regular.otf") format("opentype"); font-weight:200 500; font-display:swap; }
@font-face { font-family:"Monument"; src:url("../assets/fonts/MonumentExtended-Ultrabold.otf") format("opentype"); font-weight:600 800; font-display:swap; }
@font-face { font-family:"Helvatica"; src:url("../assets/fonts/Helvetica.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Helvatica"; src:url("../assets/fonts/Helvetica-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }

:root{
  /* brand palette (SPRYK 2025 deck) */
  --dari:#d4b1a2;        /* warm light neutral  */
  --henna:#635440;       /* olive earth         */
  --indigo:#272547;      /* deep navy           */
  --jamun:#4f172f;       /* maroon, primary dark*/
  --geru:#f2462a;        /* red-orange accent   */
  --off-white:#f4efea;
  --near-black:#0c0c0c;

  /* legacy aliases (kept so existing pages keep working) */
  --tan:var(--dari);
  --maroon:var(--jamun);
  --maroon-dark:#3a1023;
  --charcoal:#262626;
  --white:#ffffff;
  --orange:var(--geru);
  --ink:#000000;

  --font-body:"Archivo",sans-serif;
  --font-display:"Monument",sans-serif;

  --body-size:17px;
  --body-lh:30.6px;
  --body-ls:-0.34px;

  --header-h:64px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--body-size);
  line-height:var(--body-lh);
  letter-spacing:var(--body-ls);
  text-transform:uppercase;
  color:var(--ink);
  background:var(--tan);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--orange); text-decoration:none; }

.section-title{
  font-family:var(--font-display);
  font-weight:700;                 /* Monument UltraBold */
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.02;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0;
}

/* Scroll reveal — "grow-in": scale up + fade as it enters view */
[data-reveal]{ opacity:0; transform:scale(.9) translateY(14px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
[data-reveal].revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* shared section shells + grounds (used by every page) */
.sec{ padding:96px 0; }
.sec-inner{ max-width:1500px; margin:0 auto; padding:0 60px; }
.ground-light{ background:var(--dari); color:var(--ink); }
.ground-cream{ background:var(--off-white); color:var(--ink); }
.ground-indigo{ background:var(--indigo); color:var(--off-white); }
.ground-jamun{ background:var(--jamun); color:#fff; }
.ground-dark{ background:var(--near-black); color:var(--off-white); }
.ground-light .spec-index,.ground-cream .spec-index,.ground-indigo .spec-index,.ground-jamun .spec-index,.ground-dark .spec-index{ color:var(--geru); }
@media (max-width:1024px){ .sec{ padding:60px 0; } .sec-inner{ padding:0 20px; } }

/* =======================================================================
   SPEC-SHEET SYSTEM (restrained) — one index + one label per section max
   ======================================================================= */
.spec-row{ display:flex; align-items:baseline; gap:14px; margin:0 0 18px; }
.spec-index{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:1px; opacity:.9; }
.spec-label{ font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.72; }
.spec-row::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.22; align-self:center; }
.overbar{ display:inline-block; border-top:2px solid currentColor; padding-top:12px; }
.tech-tag{ font-family:var(--font-body); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; opacity:.6; }

/* SPRYKS marker — sharp angular brand glyph (used as bullets / dividers) */
.spryk-mark{ display:inline-block; width:1em; height:1em; vertical-align:-.12em;
  background:currentColor;
  -webkit-mask:var(--spryk-glyph) center/contain no-repeat; mask:var(--spryk-glyph) center/contain no-repeat; }
:root{ --spryk-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 60 L44 60 L30 40 L70 40 L56 60 L92 60 L64 92 L36 92 Z M42 8 L92 8 L58 40 L30 40 Z'/%3E%3C/svg%3E"); }

/* image hover FX — geru wash + slight zoom, tasteful */
.fx-img{ overflow:hidden; border-radius:10px; }
.fx-img img{ transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; display:block; width:100%; height:100%; object-fit:cover; }
.fx-img::after{ content:""; position:absolute; inset:0; background:var(--geru); mix-blend-mode:color; opacity:0; transition:opacity .45s ease; pointer-events:none; }
.fx-img{ position:relative; }
.fx-img:hover img{ transform:scale(1.05); }
.fx-img:hover::after{ opacity:.28; }

/* =======================================================================
   CUSTOM CURSOR (desktop / fine-pointer only)
   ======================================================================= */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-dot{ width:6px; height:6px; background:#fff; }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,.7);
  transition:width .25s ease,height .25s ease,background .25s ease,border-color .25s ease; }
.cursor-ring.hovering{ width:58px; height:58px; background:rgba(242,70,42,.12); border-color:var(--geru); }
.cursor-ring .c-label{ font-family:var(--font-body); font-size:9px; letter-spacing:1px; color:#fff; opacity:0;
  display:flex; align-items:center; justify-content:center; width:100%; height:100%; text-transform:uppercase; transition:opacity .2s; mix-blend-mode:normal; }
.cursor-ring.hovering .c-label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none !important; } }
body.has-custom-cursor{ cursor:none; }
body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }

/* =========================  HEADER  =========================
   Hamburger + cart clustered at top-left, wordmark at top-right. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 34px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:height .3s ease, background .3s ease, border-color .3s ease;
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }
.header-right{ pointer-events:none; }
.header-cart,.nav-toggle{ pointer-events:auto; }
/* thin hairline rule under the bar — a nod to the deck's layout elements */
.site-header::after{ content:""; position:absolute; left:34px; right:34px; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28) 12%, rgba(255,255,255,.28) 88%, transparent);
  opacity:.5; transition:opacity .3s ease; }
.site-header.scrolled{ background:rgba(12,12,12,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.site-header.scrolled::after{ opacity:.85; }

/* small technical label centered in the bar (deck-style) */
.header-tag{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.7);
  font-family:var(--font-body); font-size:10px; letter-spacing:2.5px; text-transform:uppercase; pointer-events:none; white-space:nowrap; }
.header-tag .spryk-mark{ width:11px; height:11px; color:var(--geru); }

.header-right{ display:flex; align-items:center; gap:20px; }
.nav-toggle{
  background:none; border:0; padding:0; cursor:pointer;
  width:26px; height:14px; position:relative; display:flex; flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:1.5px; width:100%; background:#fff; transition:.3s ease; }
.nav-toggle:hover span{ background:var(--orange); }
body.nav-open .nav-toggle{ visibility:hidden; pointer-events:none; }
.header-cart{ color:#fff; display:flex; align-items:center; transition:color .2s; }
.header-cart:hover{ color:var(--orange); }
.header-cart svg{ width:19px; height:19px; display:block; }
.brand img{ height:22px; width:auto; display:block; }

/* full-screen overlay nav — asymmetric split on desktop (deck-style layout elements) */
.nav-overlay{
  position:fixed; inset:0; z-index:70;
  background:var(--near-black);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.nav-overlay.open{ opacity:1; visibility:visible; }
.nav-inner{
  height:100%;
  display:grid; grid-template-columns:1.3fr .7fr;
  padding:var(--header-h) 0 0;
}
.nav-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:20px;
}
.nav-eyebrow .spryk-mark{ width:11px; height:11px; color:var(--geru); }
.nav-eyebrow.small{ font-size:10px; letter-spacing:2px; margin-bottom:14px; }

/* both columns start at the same y — top-aligned, same top padding */
.nav-main{
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:44px 5vw 40px 56px;
  overflow-y:auto; min-height:0;
}
.nav-primary{ list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; justify-content:center; }
.nav-primary li{ margin:3px 0; overflow:hidden; }
.nav-primary a{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,4.6vw,58px); line-height:1.14; letter-spacing:.5px; color:#fff;
  display:inline-block; transition:color .25s ease, transform .25s ease;
}
.nav-primary a:hover, .nav-primary a.active{ color:var(--orange); transform:translateX(10px); }

/* right info panel — structured, like the deck's spec-sheet layout blocks */
.nav-side{
  display:flex; flex-direction:column; gap:32px;
  border-left:1px solid rgba(255,255,255,.14);
  padding:44px 40px 32px;
  overflow-y:auto; min-height:0;
}
.nav-side-list{ list-style:none; margin:0; padding:0; }
.nav-side-list li{ border-top:1px solid rgba(255,255,255,.14); }
.nav-side-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.nav-side-list a{
  display:flex; align-items:center; gap:16px; padding:13px 2px;
  color:#fff; transition:color .2s;
}
.nav-side-list a:hover{ color:var(--orange); }
.nav-side-list a:hover .nav-side-arrow{ transform:translateX(4px); opacity:1; }
.nav-side-idx{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--geru); }
.nav-side-name{ font-family:var(--font-body); font-size:14px; letter-spacing:.5px; text-transform:uppercase; flex:1; }
.nav-side-arrow{ width:11px; height:11px; opacity:.5; transition:transform .2s ease, opacity .2s ease; }

/* Music + Socials mini-columns, reusing footer-links styling at a slightly smaller scale */
.nav-side-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.nav-side-col .footer-links a{ font-size:12px; gap:8px; padding:4px 0; white-space:nowrap; }
.nav-side-col .footer-links img.ic{ width:13px; height:13px; flex:0 0 auto; }
.nav-side-col .footer-links li{ margin:0 0 8px; }

/* the split .nav-inner (1.3fr/.7fr) leaves the side panel too narrow for two columns
   of icon labels between ~900-1150px (iPad-class widths) — stack to one column there */
@media (min-width:901px) and (max-width:1150px){
  .nav-side-cols{ grid-template-columns:1fr; gap:14px; }
}

.nav-meta{ display:flex; flex-direction:column; gap:6px; margin-top:auto; padding-top:8px; }
.nav-meta .tech-tag{ opacity:.5; font-size:10px; }

/* close button — same spot the hamburger occupies (top-right) */
.nav-close{
  position:absolute; top:0; right:21px; height:var(--header-h);
  width:52px; background:none; border:0; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.nav-close span{ position:absolute; width:26px; height:1.5px; background:#fff; transition:background .2s; }
.nav-close span:first-child{ transform:rotate(45deg); }
.nav-close span:last-child{ transform:rotate(-45deg); }
.nav-close:hover span{ background:var(--orange); }
body.nav-open{ overflow:hidden; }

/* mobile: collapse to a single centered stack (no split panel) */
@media (max-width:900px){
  .nav-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--header-h) 28px 40px; }
  .nav-main{ padding:0; text-align:center; flex:none; }
  .nav-eyebrow{ display:none; }
  .nav-primary{ text-align:center; }
  .nav-primary a{ font-size:clamp(28px,7vw,44px); }
  .nav-primary a:hover, .nav-primary a.active{ transform:none; }
  .nav-side{ border-left:0; border-top:1px solid rgba(255,255,255,.16); margin-top:26px; padding:24px 0 0; width:min(420px,86vw); flex-direction:column; gap:18px; }
  .nav-side-block .nav-eyebrow{ display:none; }
  .nav-side-list{ display:flex; flex-direction:column; }
  .nav-side-list li{ border-top:0 !important; border-bottom:0 !important; }
  .nav-side-list a{ justify-content:center; padding:6px 2px; text-align:center; }
  .nav-side-name{ flex:none; text-align:center; }
  .nav-side-idx{ display:none; }
  .nav-side-arrow{ display:none; }
  .nav-side-cols{ display:none; }
  .nav-meta{ align-items:center; text-align:center; margin-top:0; }
}

/* =========================  FOOTER  ========================= */
.site-footer{ background:var(--maroon); color:#fff; padding:70px 60px 26px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  max-width:1500px; margin:0 auto 40px;
}
.site-footer h4{
  font-family:var(--font-display); font-weight:400;
  font-size:18px; letter-spacing:-0.18px; margin:0 0 22px; color:#fff;
}
.newsletter h4{ font-size:24px; letter-spacing:normal; }
.newsletter label{ display:block; font-size:13px; letter-spacing:1px; margin:0 0 8px; }
.newsletter input{
  width:100%; background:var(--maroon-dark); border:0; color:#fff;
  padding:14px; margin:0 0 20px; font-family:var(--font-body);
  text-transform:uppercase; font-size:13px; letter-spacing:.5px;
}
.newsletter button{
  background:var(--orange); color:#fff; border:0; cursor:pointer;
  padding:12px 28px; border-radius:22px; font-family:var(--font-body);
  text-transform:uppercase; font-size:14px; letter-spacing:.5px;
}
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin:0 0 13px; }
.footer-links a{ color:#fff; font-size:13px; font-weight:400; letter-spacing:.3px; display:flex; align-items:center; gap:9px; transition:color .2s; }
.footer-links a:hover{ color:var(--orange); }
.footer-links img.ic{ width:15px; height:15px; filter:invert(1); flex:0 0 auto; }
.footer-bottom{
  max-width:1500px; margin:0 auto;
  border-top:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:space-between;
  padding-top:24px; font-size:13px; letter-spacing:.5px;
}
.footer-bottom .foot-logo{ height:31px; width:auto; }

/* =========================  RESPONSIVE  ========================= */
@media (max-width:1024px){
  :root{ --header-h:56px; }
  .site-header{ padding:0 20px; }
  .site-header::after{ left:20px; right:20px; }
  .header-tag{ display:none; }
  .header-right{ gap:16px; }
  .nav-close{ right:7px; }
  .nav-inner{ padding:var(--header-h) 24px 40px; }
  .nav-secondary{ gap:24px; }
  .brand img{ height:20px; }
}
@media (max-width:820px){
  .site-footer{ padding:52px 24px 24px; overflow:hidden; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px 20px; }
  .newsletter{ grid-column:1 / -1; }
  .site-footer h4{ font-size:16px; margin-bottom:16px; }
  .footer-links a{ font-size:15px; gap:10px; }
  .footer-links img.ic{ width:18px; height:18px; flex-shrink:0; }
  .footer-bottom{ flex-direction:column; gap:16px; align-items:flex-start; }
  .footer-bottom .foot-logo{ max-width:100%; }
}