/* ============================================================
   GANESH S — PORTFOLIO & PRODUCTS
   Design system: dark premium
   You normally never need to edit this file. Text lives in the
   HTML pages; links/emails live in js/main.js (CONFIG block).
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg:        #0B0B0C;   /* page background — near black */
  --bg-raise:  #131315;   /* raised panels / cards */
  --bg-raise2: #1A1A1D;   /* hover state for cards */
  --ink:       #F2EFE8;   /* primary text — warm ivory */
  --muted:     #A29D91;   /* secondary text */
  --faint:     #6B675E;   /* tertiary / labels */
  --accent:    #BFF54A;   /* signal green — use sparingly */
  --accent-rgb: 191, 245, 74;
  --accent-hi: #D3FF74;   /* brighter green for hover */
  --accent-soft: rgba(191, 245, 74, 0.13);
  --hairline:  rgba(242, 239, 232, 0.14);
  --hairline-soft: rgba(242, 239, 232, 0.07);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-condensed: 'Anton', 'Arial Narrow', 'Impact', sans-serif;

  --size-hero:  clamp(3rem, 10vw, 8.5rem);
  --size-h1:    clamp(2.6rem, 7vw, 5.5rem);
  --size-h2:    clamp(1.9rem, 4.5vw, 3.25rem);
  --size-h3:    clamp(1.3rem, 2.5vw, 1.7rem);
  --size-body:  1.0625rem;
  --size-small: 0.875rem;
  --size-micro: 0.72rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3.5rem;
  --space-5: 6rem;
  --space-6: 9rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max-w: 82rem;

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

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #0B0B0C; }

/* Page fade-in */
body { opacity: 0; transition: opacity 0.5s ease; }
body.is-loaded { opacity: 1; }

/* ---------- Typography helpers ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.micro-label {
  font-family: var(--font-body);
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

.micro-label--accent { color: var(--accent); }

.serif-italic { font-family: var(--font-display); font-style: italic; color: var(--accent); }

.text-muted { color: var(--muted); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Vertical rhythm only — longhands so these never wipe out the horizontal
   gutter that .container sets on the same element. */
.section { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.section--tight { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.section-head h2 { font-size: var(--size-h2); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(11, 11, 12, 0.72);
  border-bottom: 1px solid var(--hairline-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.nav-brand .dot { color: var(--accent); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-search-btn:hover { color: var(--ink); background: var(--hairline-soft); }
.nav-search-btn svg { display: block; }

.nav-links a {
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.25s ease;
}

.nav-links a:hover { color: var(--ink); }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* Hamburger (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.75rem 0;
  z-index: 102;
}
.nav-toggle span {
  display: block;
  width: 1.75rem;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}
.nav-toggle span + span { margin-top: 7px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  /* Right-side drawer. Explicit top/right/bottom longhands (not just
     "inset") so it still fills the edge correctly on older mobile
     WebViews that don't support the inset shorthand. Fully opaque
     background + the .nav-scrim below it means page content can no
     longer show through or collide with the menu items. */
  .nav-links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: auto;
    width: min(84vw, 360px);
    height: 100vh;
    height: 100dvh;
    z-index: 101;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 6rem var(--gutter) 2rem;
    background: var(--bg);
    border-left: 1px solid var(--hairline);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.42s var(--ease-out);
    overflow-y: auto;
  }
  .nav-links.is-open { transform: translateX(0); pointer-events: auto; }

  /* Staggered entrance for each link, tactile rather than a flat reveal. */
  .nav-links li {
    width: 100%;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  }
  .nav-links.is-open li { opacity: 1; transform: translateX(0); }
  .nav-links.is-open li:nth-child(1) { transition-delay: 0.06s; }
  .nav-links.is-open li:nth-child(2) { transition-delay: 0.11s; }
  .nav-links.is-open li:nth-child(3) { transition-delay: 0.16s; }
  .nav-links.is-open li:nth-child(4) { transition-delay: 0.21s; }
  .nav-links.is-open li:nth-child(5) { transition-delay: 0.26s; }
  .nav-links.is-open li:nth-child(6) { transition-delay: 0.31s; }

  .nav-links a {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--ink);
    padding: 0.85rem 0;
  }
  .nav-links a:active { color: var(--accent); transform: translateX(4px); }
}

/* Scrim behind the drawer, dims the rest of the page. Sits below the
   .nav stacking context (fixed header, z-index:100 — the open drawer at
   101 and the hamburger/close button at 102 live inside it) but above
   ordinary page content, so nothing bleeds through while the menu is open. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
.hero {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;
  padding-bottom: var(--space-4);
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}
.hero-status .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(var(--accent-rgb),0); }
}

.hero h1 {
  font-size: var(--size-hero);
  line-height: 0.98;
}

.hero-sub {
  margin-top: var(--space-3);
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

/* Staggered line reveal.
   padding-bottom gives descenders (g, y, p) room inside the clip mask that
   the tight 0.98 line-height would otherwise cut off; the matching negative
   margin keeps the line spacing unchanged. */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; }
.reveal-line > span {
  display: block;
  transform: translateY(115%);
  animation: line-up 1s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.12s + 0.15s);
}
@keyframes line-up { to { transform: translateY(0); } }

/* ---------- Ticker ---------- */
.ticker {
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  overflow: hidden;
  padding: 0.9rem 0;
  white-space: nowrap;
}
.ticker-track {
  display: inline-block;
  animation: ticker 42s linear infinite;
}
.ticker span {
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 1.4rem;
}
.ticker span::after { content: "◆"; color: var(--accent); font-size: 0.5rem; vertical-align: middle; margin-left: 2.8rem; opacity: 0.6; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Scroll reveal ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.95rem 1.8rem;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}
.btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }   /* tap feedback on touch devices */

.btn--solid {
  background: var(--ink);
  color: #0B0B0C;
  border-color: var(--ink);
}
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #0B0B0C; }

.btn--gold {
  background: var(--accent);
  border-color: var(--accent);
  color: #0B0B0C;
}
.btn--gold:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.btn .arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.link-arrow .arrow { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-raise);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: var(--space-3);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s var(--ease-out);
}
.card:hover { background: var(--bg-raise2); border-color: var(--hairline); transform: translateY(-4px); }

.card h3 { font-size: var(--size-h3); margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: var(--size-small); line-height: 1.7; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Feature panel (home: field guide) ---------- */
.feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: center;
  background: linear-gradient(135deg, var(--bg-raise) 0%, #0E1207 100%);
  border: 1px solid var(--hairline-soft);
  border-radius: 20px;
  padding: var(--space-4);
  overflow: hidden;
}
.feature img { filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55)); transition: transform 0.5s var(--ease-out); }
.feature:hover img { transform: translateY(-8px) rotate(-1deg); }
.feature h2 { font-size: var(--size-h2); margin: 0.75rem 0 1rem; }
.feature p { color: var(--muted); max-width: 30rem; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; padding: var(--space-3); }
  .feature img { max-width: 260px; margin: 0 auto; }
}

/* ---------- Stat row ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
}
.stat {
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  display: block;
  line-height: 1.1;
}
.stat .label { font-size: var(--size-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Timeline (about) ---------- */
.timeline { list-style: none; border-left: 1px solid var(--hairline); margin-left: 4px; }
.timeline li { position: relative; padding: 0 0 var(--space-3) var(--space-3); }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.5rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.timeline .when { font-size: var(--size-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.timeline h3 { font-size: 1.25rem; margin: 0.35rem 0; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.timeline p { color: var(--muted); font-size: var(--size-small); max-width: 40rem; }

/* ---------- Pill tags ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill {
  font-size: var(--size-small);
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 0.45rem 1.1rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.pill:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- Contact rows ---------- */
.contact-rows { border-top: 1px solid var(--hairline); }
.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.35s var(--ease-out);
}
.contact-row:hover { padding-left: 1rem; }
.contact-row .name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.contact-row .handle { color: var(--faint); font-size: var(--size-small); }
.contact-row .arrow { color: var(--accent); font-size: 1.4rem; transition: transform 0.35s var(--ease-out); }
.contact-row:hover .arrow { transform: translate(6px, -6px); }

/* ---------- Blog cards ---------- */
.post-card {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.35s var(--ease-out);
}
.post-card:hover { padding-left: 1rem; }
.post-card .date { font-size: var(--size-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.post-card h3 { font-size: var(--size-h3); margin: 0.5rem 0; transition: color 0.25s ease; }
.post-card:hover h3 { color: var(--accent); }
.post-card p { color: var(--muted); font-size: var(--size-small); max-width: 44rem; }

/* ---------- Product ---------- */
.price-tag { font-family: var(--font-display); font-size: 2.2rem; }
.price-tag .strike { font-size: 1.1rem; color: var(--faint); text-decoration: line-through; margin-right: 0.6rem; }

.badge {
  display: inline-block;
  font-size: var(--size-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb),0.35);
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
}

.check-list { list-style: none; }
.check-list li { padding-left: 1.6rem; position: relative; margin-bottom: 0.7rem; color: var(--muted); font-size: var(--size-small); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  padding: var(--space-5) 0 var(--space-3);
}
.footer-cta h2 { font-size: var(--size-h1); line-height: 1; }
.footer-cta { margin-bottom: var(--space-4); }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-soft);
  color: var(--faint);
  font-size: var(--size-micro);
  letter-spacing: 0.06em;
}
.footer-meta a { color: var(--muted); }
.footer-meta a:hover { color: var(--accent); }
.footer-socials { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding-top: 10rem; padding-bottom: var(--space-4); }
.page-head h1 { font-size: var(--size-h1); margin-top: 0.75rem; }
.page-head .lede { margin-top: var(--space-2); color: var(--muted); max-width: 38rem; font-size: 1.1rem; }

/* ---------- Notices ---------- */
.notice {
  background: var(--bg-raise);
  border: 1px solid var(--hairline-soft);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: var(--space-2) var(--space-3);
  color: var(--muted);
  font-size: var(--size-small);
}

/* ============================================================
   REDESIGN COMPONENTS — editorial hero, cursor, work list
   (Homepage. These layer on top of the base system above.)
   ============================================================ */

/* ---------- Mega editorial hero ---------- */
.mega-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5.5rem;
  padding-bottom: var(--space-3);
  overflow: clip;
}

.mega-corners {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  position: relative;
  z-index: 3;
  margin-bottom: auto;
  padding-top: 1rem;
}
.mega-corners .corner-r { text-align: right; }
.mega-corners .micro-label { display: block; line-height: 1.7; }
.mega-corners .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); display: inline-block; margin-right: 0.5rem;
  animation: pulse 2.4s ease-in-out infinite;
}

/* Hero heading + WebGL overlay. The real <h1 class="gl-head"> is always in the
   DOM (SEO / no-JS / reduced-motion / no-WebGL). The WebGL canvas overlays it
   with the warp + RGB-split glitch: cursor-driven on desktop, touch-driven with
   an ambient drift on mobile/tablet. Used on every page — the homepage adds
   .gl-head--mega for the full-width name. */
.gl-stage { position: relative; z-index: 2; }

.gl-head {
  position: relative;
  font-family: var(--font-condensed);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 11vw, 8rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0;
}
.gl-head .gl-line { display: block; }
.gl-head .accent { color: var(--accent); }

/* Homepage wordmark — one line, filling the full width, extra large */
.gl-head--mega {
  font-size: clamp(3.8rem, 19vw, 16rem);
  line-height: 0.82;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* WebGL warp canvas — hidden until the shader is running */
.hero-gl {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
body.gl-active .gl-head { visibility: hidden; }
body.gl-active .gl-stage .gl-head { position: absolute; top: 0; left: 0; right: 0; }
body.gl-active .hero-gl { display: block; }

.mega-tag {
  position: relative;
  z-index: 2;
  margin-top: var(--space-3);
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--muted);
}
.mega-tag em { font-family: var(--font-display); font-style: italic; color: var(--ink); }

.mega-actions {
  position: relative; z-index: 2;
  margin-top: var(--space-3);
  display: flex; gap: 1rem; flex-wrap: wrap;
}

.mega-scroll {
  position: relative; z-index: 2;
  margin-top: var(--space-4);
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--faint);
  font-size: var(--size-micro); letter-spacing: 0.22em; text-transform: uppercase;
}
.mega-scroll .down { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Concentric rings, centered behind the wordmark, slowly rotating */
.hero-rings {
  position: absolute;
  top: 50%; left: 50%;
  width: min(96vw, 900px);
  height: min(96vw, 900px);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}
.hero-rings svg { width: 100%; height: 100%; display: block; }
.hero-rings circle { stroke: var(--accent); }
.rings-spin {
  transform-origin: 50% 50%;
  animation: ringspin 46s linear infinite;
  will-change: transform;
}
@keyframes ringspin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .hero-rings { opacity: 0.26; width: min(120vw, 620px); height: min(120vw, 620px); }
}

/* ---------- Hover-reveal work list ---------- */
.worklist { border-top: 1px solid var(--hairline); }
.work-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: clamp(1.1rem, 3.2vw, 2.3rem) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: padding-left 0.4s var(--ease-out);
}
.work-row .wr-index {
  font-family: var(--font-body);
  font-size: var(--size-micro);
  color: var(--faint);
  width: 2.5rem; flex: none;
  transition: color 0.3s ease;
}
.work-row .wr-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4.4vw, 3.05rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-right: auto;
  color: var(--ink);
  transition: color 0.3s ease, transform 0.45s var(--ease-out);
}
.work-row .wr-meta {
  font-size: var(--size-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.work-row .wr-arrow {
  color: var(--accent);
  font-size: 1.5rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}
/* Slide the whole row to the right on hover, title leads the way.
   :active gives touch devices the same feedback on tap. */
.work-row:hover,
.work-row:active { padding-left: clamp(1rem, 3.5vw, 3rem); }
.work-row:hover .wr-title,
.work-row:active .wr-title { color: var(--accent); transform: translateX(0.4rem); }
.work-row:hover .wr-index,
.work-row:hover .wr-meta,
.work-row:active .wr-index,
.work-row:active .wr-meta { color: var(--muted); }
.work-row:hover .wr-arrow,
.work-row:active .wr-arrow { opacity: 1; transform: translateX(0); }

/* ---------- Mega hero + work list: small screens ---------- */
@media (max-width: 640px) {
  .mega-corners { flex-direction: column; gap: 0.4rem; }
  .mega-corners .corner-r { text-align: left; }
  .work-row {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 1.25rem 0;
  }
  .work-row .wr-index { width: auto; order: -1; }
  .work-row .wr-title {
    flex-basis: 100%;
    order: 1;
    margin-right: 0;
  }
  .work-row .wr-meta { order: 2; }
  .work-row .wr-arrow { display: none; }
}

/* ---------- Site-wide search ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1.25rem 2rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }

.search-panel {
  width: 100%;
  max-width: 40rem;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transform: translateY(-16px) scale(0.98);
  transition: transform 0.3s var(--ease-out);
}
.search-overlay.is-open .search-panel { transform: translateY(0) scale(1); }

.search-input-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--hairline);
}
.search-input-row svg { flex-shrink: 0; color: var(--faint); }
.search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
}
.search-input::placeholder { color: var(--faint); }
.search-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--faint);
  border-radius: 6px;
  font-size: var(--size-micro);
  letter-spacing: 0.05em;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}
.search-close:hover { color: var(--ink); border-color: var(--accent); }

.search-results { overflow-y: auto; padding: 0.5rem 0; }
.search-group-label { padding: 0.9rem 1.4rem 0.4rem; }
.search-empty, .search-hint {
  padding: 2rem 1.4rem;
  color: var(--faint);
  font-size: var(--size-small);
  text-align: center;
}

.search-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1.4rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
}
.search-row .search-row-title { font-weight: 500; font-size: 0.98rem; }
.search-row .search-row-snippet {
  color: var(--muted);
  font-size: var(--size-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-row mark {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 0.15em;
}
.search-row.is-active { background: var(--bg-raise2); }
.search-row.is-active .search-row-title { color: var(--accent); }

@media (max-width: 640px) {
  .search-overlay { padding: 0; }
  .search-panel { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
}

/* Landing highlight — briefly pulses the section a search result jumped to. */
.search-hit { animation: search-pulse 1.8s var(--ease-out); border-radius: 10px; }
@keyframes search-pulse {
  0%   { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
  100% { background: transparent; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ---------- Cookie consent ---------- */
.cookie-banner {
  position: fixed;
  left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
  z-index: 250;
  max-width: 40rem;
  margin: 0 auto;
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  transform: translateY(140%);
  transition: transform 0.5s var(--ease-out);
}
.cookie-banner.is-open { transform: translateY(0); }
.cookie-banner p { color: var(--muted); font-size: var(--size-small); margin-top: 0.5rem; line-height: 1.6; }
.cookie-banner .cookie-actions { display: flex; gap: 0.75rem; margin-top: 1.1rem; flex-wrap: wrap; }
.cookie-banner .btn { padding: 0.7rem 1.4rem; font-size: var(--size-small); }

.cookie-settings-link {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
}
.cookie-settings-link:hover { color: var(--accent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-line > span { transform: none; animation: none; }
  .fade-up { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .rings-spin { animation: none !important; }
  .hero-gl { display: none !important; }
  .gl-head { visibility: visible !important; }
}

/* ============================================================
   PAID POSTS — the reading page, the paywall, and the ₹/$ toggle
   IMPORTANT: elements that also carry .container must use
   padding-top/padding-bottom longhands, never `padding: X 0`,
   or they lose the horizontal gutter on phones.
   ============================================================ */

/* ---- the article itself ---- */
.post-head { padding-top: 9rem; padding-bottom: var(--space-2); }
.post-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin-top: 0.75rem;
  max-width: 22ch;
}
.post-head h1 .accent { color: var(--accent); }
.post-meta {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-soft);
  color: var(--faint); font-size: var(--size-small);
  max-width: 44rem;
}

.post-body { padding-top: var(--space-3); padding-bottom: 0; }
.post-body > * { max-width: 44rem; }          /* a comfortable reading measure */
.post-body p {
  color: var(--ink); font-size: 1.09rem; line-height: 1.85;
  margin-bottom: 1.5rem;
}
.post-standfirst {
  font-family: var(--font-display);
  font-size: 1.3rem !important; line-height: 1.6 !important;
  color: var(--muted) !important;
  margin-bottom: var(--space-3) !important;
}
.post-body h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-top: var(--space-4); margin-bottom: var(--space-2);
  padding-top: 1.5rem; border-top: 1px solid var(--hairline);
}
.post-body h3 {
  font-size: var(--size-h3); color: var(--accent);
  margin-top: var(--space-3); margin-bottom: 1rem;
}

/* ---- the Field Guide plug that sits mid-article ---- */
.post-promo {
  background: var(--bg-raise); border: 1px solid var(--hairline-soft);
  border-left: 2px solid var(--accent);
  border-radius: 4px; padding: 1.5rem;
  margin: var(--space-3) 0;
}
.post-promo p {
  font-size: var(--size-small) !important; color: var(--muted) !important;
  margin-bottom: 1.1rem !important;
}
.post-promo-mark { color: var(--accent); }

/* ---- the last paragraph fades out, so the cut feels deliberate ---- */
.post-cut {
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
  margin-bottom: 0 !important;
}

/* ---- the paywall ---- */
.paywall { padding-top: var(--space-2); padding-bottom: var(--space-5); }
.paywall-card {
  max-width: 44rem;
  background: var(--bg-raise); border: 1px solid var(--hairline);
  border-radius: 6px; padding: clamp(1.5rem, 5vw, 2.75rem);
}
.paywall-card h2 { font-size: var(--size-h2); margin: 0.5rem 0 1.25rem; }
.paywall-copy {
  color: var(--muted); font-size: var(--size-body); line-height: 1.75;
  margin-bottom: 1.1rem;
}
.paywall-price {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin: var(--space-3) 0 1.5rem;
}
.paywall-buy { width: 100%; justify-content: center; }
.paywall .fineprint,
.post-foot + .fineprint,
.fineprint {
  font-size: var(--size-micro); color: var(--faint);
  letter-spacing: 0.04em; margin-top: 1rem;
}
.paywall .fineprint a { color: var(--accent); }
.paywall .oktick {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #0B0B0C;
  font-size: 1.4rem; font-weight: 700;
}

/* ---- the ₹ / $ switch ---- */
.cur-toggle {
  display: inline-flex; border: 1px solid var(--hairline);
  border-radius: 999px; overflow: hidden;
}
.cur-toggle button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--faint); font-family: var(--font-body);
  font-size: var(--size-micro); letter-spacing: 0.1em;
  padding: 0.5rem 0.9rem; transition: color 0.2s ease, background 0.2s ease;
}
.cur-toggle button:hover { color: var(--ink); }
.cur-toggle button.is-on { background: var(--accent-soft); color: var(--accent); }

/* ---- footer nav on the post ---- */
.post-foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: var(--space-3); padding-bottom: var(--space-4);
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--size-small);
}
.post-foot a { color: var(--muted); }
.post-foot a:hover { color: var(--accent); }

/* ---- paid posts as they appear in the blog list ---- */
.post-card--paid .lock {
  display: inline-block; margin-left: 0.6rem;
  font-size: var(--size-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 0.2rem 0.6rem; vertical-align: middle;
}
.blog-group + .blog-group { margin-top: var(--space-4); }
.blog-group > h2 {
  font-size: var(--size-h3); margin-bottom: 0.4rem;
}
.blog-group > .group-note {
  color: var(--faint); font-size: var(--size-small);
  margin-bottom: var(--space-3);
}

/* ---- the ₹/$ switch where it sits next to a product price ---- */
.price-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   YOUTUBE PAGE — long-form grid (2fr) beside a Shorts rail (1fr).
   The rail is STICKY, not a second full-height scroll pane. Two
   nested scroll panes trap the mouse wheel and remove the page's
   own scroll, which makes the footer unreachable. Sticky gives the
   same independent Shorts scrolling without that cost.
   ============================================================ */

/* ---- hero: subscribe button + live counters ---- */
.yt-hero-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.yt-stats { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.yt-stat { color: var(--faint); font-size: var(--size-small); }
.yt-stat b { color: var(--ink); font-weight: 600; }

/* ---- tab bar: narrow screens only, see the media query below ---- */
.yt-tabs { display: none; gap: 0.5rem; margin-bottom: var(--space-3); }
/* .yt-tabs and .yt-stats both set their own `display` (none above, flex
   under the narrow-screen media query / on .yt-stats), which beats the
   browser's default [hidden] { display: none } — author styles win over UA
   styles at equal specificity. Without this rule, the `hidden` attribute
   JS sets on them before the channel/tab data arrives is silently ignored
   and they render as an empty tab bar / a dangling flex gap. */
.yt-tabs[hidden], .yt-stats[hidden] { display: none; }
.yt-tab {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body); font-size: var(--size-small);
  transition: color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              background 0.25s var(--ease-out);
}
.yt-tab.is-on {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: var(--accent-soft);
}

/* ---- the two columns ---- */
.yt-split {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: var(--space-4); align-items: start;
}
.yt-split--empty { display: block; }
.yt-col-title { font-size: var(--size-h3); margin-bottom: 0.4rem; }
.yt-split .group-note {
  color: var(--faint); font-size: var(--size-small);
  margin-bottom: var(--space-3);
}
.yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-2); }
.yt-shorts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-2); }

/* The rail pins beside the long-form column. Only the grid inside it
   scrolls, so the "Shorts." heading stays put. min-height:0 is required —
   without it the flex child refuses to shrink and overflow never engages. */
.yt-rail {
  position: sticky; top: 92px;
  max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
}
.yt-rail .yt-shorts-grid {
  flex: 1; min-height: 0;
  overflow-y: auto; padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
.yt-rail .yt-shorts-grid::-webkit-scrollbar { width: 6px; }
.yt-rail .yt-shorts-grid::-webkit-scrollbar-track { background: transparent; }
.yt-rail .yt-shorts-grid::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3); border-radius: 999px;
}
.yt-rail .yt-shorts-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.55);
}

/* ---- cards. Deliberately NOT .card — that class attaches the site-wide
       tilt effect, which on a hundred tiles looks wrong and costs scroll
       performance. ---- */
.yt-card { display: block; color: inherit; text-decoration: none; }
.yt-thumb {
  position: relative; overflow: hidden;
  border-radius: 10px; background: var(--bg-raise);
  aspect-ratio: 16 / 9;
}
.yt-card--short .yt-thumb { aspect-ratio: 9 / 16; border-radius: 12px; }
.yt-thumb img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.yt-card:hover .yt-thumb img { transform: scale(1.045); }
/* Play glyph drawn as a CSS triangle so it costs no extra request. */
.yt-thumb::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; opacity: 0; pointer-events: none;
  border-left: 16px solid var(--ink);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transition: opacity 0.3s var(--ease-out);
}
.yt-card:hover .yt-thumb::after { opacity: 0.92; }
.yt-title {
  font-family: var(--font-body); font-size: var(--size-small);
  font-weight: 500; line-height: 1.4; color: var(--ink);
  margin: 0.7rem 0 0.25rem;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.25s var(--ease-out);
}
.yt-card:hover .yt-title { color: var(--accent); }
.yt-meta { color: var(--faint); font-size: var(--size-micro); margin: 0; }
.yt-card--short .yt-title { font-size: var(--size-micro); margin-top: 0.55rem; }

/* ---- narrow screens: stack the columns and let the tabs take over ---- */
@media (max-width: 899px) {
  .yt-tabs { display: flex; }
  .yt-split { grid-template-columns: 1fr; gap: var(--space-3); }
  .yt-rail { position: static; max-height: none; display: block; }
  .yt-rail .yt-shorts-grid {
    overflow: visible; padding-right: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .yt-grid { grid-template-columns: repeat(2, 1fr); }
  .yt-shorts-grid { grid-template-columns: repeat(3, 1fr); }
  .yt-split[data-yt-tab-state="long"] .yt-rail { display: none; }
  .yt-split[data-yt-tab-state="shorts"] .yt-main { display: none; }
}
@media (max-width: 519px) {
  .yt-grid { grid-template-columns: 1fr; }
  .yt-shorts-grid { grid-template-columns: repeat(2, 1fr); }
}