/* =============================================================================
   Ambudhi.com — main stylesheet
   Brand colors & fonts are injected via assets/theme.css (generated from
   config.toml). This file only uses those variables, so you rarely touch it.
   ========================================================================== */

:root{
  --maxw: 1120px;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: clamp(1rem, 3vw, 2rem);
  --pad-section: clamp(3.5rem, 8vw, 6rem);
  --shadow-sm: 0 1px 2px rgba(20,24,40,.06), 0 2px 8px rgba(20,24,40,.05);
  --shadow-md: 0 10px 30px rgba(20,24,40,.10);
  --shadow-lg: 0 30px 60px rgba(20,24,40,.22);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--background);
  line-height:1.65;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-heading); line-height:1.12; color:var(--primary); font-weight:600; letter-spacing:-.01em; }
h2{ font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem); margin:0 0 .4em; }
h3{ font-size:1.2rem; margin:0 0 .3em; color:var(--primary); }
p{ margin:0 0 1rem; }
.tel{ font-family:"Nirmala UI","Gautami",var(--font-heading),sans-serif; }

/* ------------------------------------------------------------- utilities */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); }
.section{ padding-block:var(--pad-section); }
.section-alt{ background:var(--surface); border-block:1px solid var(--border); }
.kicker{ text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:700; color:var(--accent); margin:0 0 .5rem; }
.section-head{ max-width:44rem; margin:0 auto clamp(2rem,5vw,3rem); text-align:center; }
.section-lead{ color:var(--muted); font-size:1.08rem; margin:0; }
.muted-tel{ color:var(--muted); font-weight:500; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--primary); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--radius-sm) 0; z-index:200; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }

/* --------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--primary); --btn-fg:#fff; --btn-bd:var(--primary);
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);
  padding:.8rem 1.4rem; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:var(--shadow-sm); white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-accent{ --btn-bg:var(--accent); --btn-fg:#20180a; --btn-bd:var(--accent); }
.btn-outline{ --btn-bg:transparent; --btn-fg:var(--primary); --btn-bd:color-mix(in srgb,var(--primary) 30%,transparent); box-shadow:none; }
.btn-outline:hover{ --btn-bg:var(--primary); --btn-fg:#fff; }
.btn-sm{ padding:.55rem 1rem; font-size:.9rem; }
.btn.is-soon{ opacity:.62; cursor:default; }
.btn.is-soon:hover{ transform:none; box-shadow:none; }
.soon{ font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; background:color-mix(in srgb,currentColor 18%,transparent); padding:.1rem .4rem; border-radius:999px; font-weight:700; }

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--background) 82%,transparent);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; }
.brand-mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--primary); color:#fff; font-family:"Nirmala UI",var(--font-heading),sans-serif;
  font-size:1.15rem; line-height:1;
}
.brand-name{ font-family:var(--font-heading); font-size:1.3rem; color:var(--primary); letter-spacing:-.01em; }
.nav{ display:flex; align-items:center; }
.nav-menu{ display:flex; align-items:center; gap:1.6rem; list-style:none; margin:0; padding:0; }
.nav-menu a{ font-weight:500; color:var(--ink); font-size:.98rem; }
.nav-menu a:hover{ color:var(--accent); }
.nav-menu .btn{ color:#20180a; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.nav-toggle span{ width:22px; height:2px; background:var(--primary); border-radius:2px; transition:.25s; }

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, color-mix(in srgb,var(--primary) 12%,transparent), transparent 55%),
    var(--surface);
  border-bottom:1px solid var(--border);
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(3rem,7vw,5.5rem); }
.eyebrow{ font-weight:700; color:var(--accent); letter-spacing:.04em; margin:0 0 .8rem; }
.eyebrow .tel{ color:var(--primary); }
.hero-title{ font-size:clamp(2.5rem,1.6rem + 4vw,4.2rem); margin:0 0 .2em; color:var(--primary); }
.hero-subtitle{ font-size:clamp(1.1rem,1rem + .6vw,1.4rem); color:var(--ink); font-weight:500; margin:0 0 1rem; }
.hero-blurb{ color:var(--muted); font-size:1.1rem; max-width:34rem; margin:0 0 1.6rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.4rem; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:1.2rem; color:var(--muted); font-size:.92rem; margin:0; }
.hero-meta span{ position:relative; }
.hero-meta span+span::before{ content:"·"; position:absolute; left:-.75rem; }

.hero-cover{ position:relative; justify-self:center; }
.cover-frame{
  transform:rotate(1.5deg); transition:transform .4s ease;
  border-radius:6px; overflow:hidden;
  box-shadow:var(--shadow-lg);
  outline:1px solid rgba(0,0,0,.06); outline-offset:-1px;
}
.cover-frame img{ width:min(380px,72vw); height:auto; }
.hero-cover:hover .cover-frame{ transform:rotate(0deg) translateY(-4px); }

/* ---- flip cover: click the front to reveal the back ---- */
.cover-flip{
  -webkit-appearance:none; appearance:none;
  border:0; margin:0; padding:0; background:transparent; color:inherit;
  font:inherit; cursor:pointer; display:inline-block; perspective:1400px;
}
.cover-flip-inner{
  display:block; position:relative;
  width:min(380px,72vw);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.75,.2,1);
  transform:rotate(1.5deg);
}
.cover-face{
  display:block;
  border-radius:6px; overflow:hidden;
  box-shadow:var(--shadow-lg);
  outline:1px solid rgba(0,0,0,.06); outline-offset:-1px;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:var(--dark-section,#280D16);
}
.cover-face img{ display:block; width:100%; }
.cover-face--front{ position:relative; }            /* in normal flow -> defines the box height */
.cover-face--front img{ height:auto; }
.cover-face--back{ position:absolute; inset:0; transform:rotateY(180deg); }
.cover-face--back img{ height:100%; object-fit:cover; }
.cover-flip:hover .cover-flip-inner,
.cover-flip:focus-visible .cover-flip-inner{ transform:rotate(0deg) translateY(-4px); }
.cover-flip.is-flipped .cover-flip-inner{ transform:rotateY(180deg); }
.cover-flip.is-flipped:hover .cover-flip-inner,
.cover-flip.is-flipped:focus-visible .cover-flip-inner{ transform:rotateY(180deg) translateY(-4px); }
.cover-flip:focus-visible{ outline:none; }
.cover-flip:focus-visible .cover-face--front,
.cover-flip.is-flipped:focus-visible .cover-face--back{ outline:2px solid var(--accent); outline-offset:2px; }
.cover-flip-hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:rgba(0,0,0,.58); color:#fff; font-size:.72rem; font-weight:600;
  letter-spacing:.02em; padding:.3rem .65rem; border-radius:999px;
  pointer-events:none; opacity:0; transition:opacity .25s ease; z-index:3;
}
.cover-flip:hover .cover-flip-hint,
.cover-flip:focus-visible .cover-flip-hint{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .cover-flip-inner{ transition:none; } }

.price-tag{
  position:absolute; bottom:-14px; right:-10px;
  background:var(--accent); color:#20180a; font-weight:700;
  padding:.5rem .9rem; border-radius:999px; box-shadow:var(--shadow-md); font-size:1rem;
}

/* -------------------------------------------------------------- features */
.features{ padding-block:clamp(2.5rem,5vw,3.5rem); }
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.feature-card{
  background:var(--background); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.feature-icon{ display:grid; place-items:center; width:46px; height:46px; border-radius:12px; margin-bottom:.9rem;
  background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary); }
.feature-icon svg{ width:24px; height:24px; }
.feature-card h3{ margin-bottom:.25rem; }
.feature-card p{ margin:0; color:var(--muted); font-size:.95rem; }

/* ----------------------------------------------------------------- about */
.about-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.about-copy p{ color:var(--ink); }
.about-copy .kicker{ color:var(--accent); }
.details-card{
  position:sticky; top:90px;
  background:var(--background); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-md);
}
.details-title{ padding-bottom:.8rem; border-bottom:2px solid var(--accent); display:inline-block; }
.details-list{ margin:1rem 0 0; }
.details-row{ display:grid; grid-template-columns:1fr auto; gap:1rem; padding:.6rem 0; border-bottom:1px dashed var(--border); }
.details-row:last-child{ border-bottom:0; }
.details-row dt{ color:var(--muted); font-size:.92rem; }
.details-row dd{ margin:0; font-weight:600; text-align:right; color:var(--ink); }

/* ------------------------------------------------------------------- buy */
.buy-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; max-width:820px; margin-inline:auto; }
.buy-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--background); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm);
}
.buy-card--primary{ border-color:color-mix(in srgb,var(--accent) 60%,var(--border)); box-shadow:var(--shadow-md); }
.buy-card h3{ margin:0; }
.buy-note{ margin:.2rem 0 0; color:var(--muted); font-size:.9rem; }
.buy-isbn{ margin:.55rem 0 0; font-size:.86rem; color:var(--ink); }
.buy-isbn span{ font-weight:700; letter-spacing:.02em; }
.buy-card--trade{ border-left:3px solid var(--accent); }
.buy-stores{ width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.2rem; padding-top:.95rem; border-top:1px solid var(--border); }
.buy-stores-label{ width:100%; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin-bottom:.1rem; }
.store-link{ font-size:.86rem; font-weight:600; color:var(--primary); text-decoration:none; padding:.3rem .7rem; border:1px solid var(--border); border-radius:999px; background:var(--background); transition:background .18s ease, color .18s ease, border-color .18s ease; }
.store-link:hover,.store-link:focus-visible{ background:var(--primary); color:#fff; border-color:var(--primary); }
.buy-stores--buttons{ border-top:0; padding-top:0; margin-top:.35rem; gap:.6rem; }
.buy-stores--buttons .btn{ flex:1 1 auto; text-align:center; }

/* ---------------------------------------------------------------- social */
.social-row{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.social-chip{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); background:var(--background);
  padding:.6rem 1.1rem; border-radius:999px; font-weight:600; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.social-chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); }
.social-ic{ display:inline-grid; place-items:center; color:var(--primary); }
.social-ic svg{ width:20px; height:20px; }
.qr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1.2rem; max-width:760px; margin-inline:auto; }
.qr-card{ margin:0; text-align:center; background:var(--background); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow-sm); }
.qr-card img{ width:100%; max-width:150px; height:auto; margin:0 auto .6rem; border-radius:8px; }
.qr-card figcaption{ font-size:.85rem; color:var(--muted); font-weight:600; }

/* ---------------------------------------------------------------- footer */
.site-footer{ background:var(--dark_section); color:#E7D7DD; padding-top:clamp(3rem,6vw,4rem); }
.site-footer .brand-name{ color:#fff; }
.site-footer .brand-mark{ background:var(--accent); color:#20180a; }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; padding-bottom:2rem; }
.footer-tag{ margin:.9rem 0 .3rem; color:#F3E8EC; font-family:var(--font-heading); font-size:1.05rem; }
.footer-note{ color:#C8A9B4; font-size:.92rem; max-width:26rem; }
.footer-links{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.footer-links>a{ color:#F3E8EC; font-weight:600; }
.footer-links nav{ display:flex; flex-wrap:wrap; gap:1rem; }
.footer-links nav a{ color:#C8A9B4; }
.footer-links nav a:hover,.footer-links>a:hover{ color:var(--accent); }
.footer-social{ display:flex; gap:.6rem; }
.footer-social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; transition:.18s; }
.footer-social a:hover{ background:var(--accent); color:#20180a; }
.footer-social svg{ width:18px; height:18px; }
.footer-legal{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1); padding-block:1.2rem; font-size:.85rem; color:#B294A0; }
.footer-legal p{ margin:0; }

/* ----------------------------------------------------------- daily mini */
.daily-grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:1.4rem; align-items:start; }
.daily-card{ background:var(--background); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow-sm); }
.daily-card--today{ border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); box-shadow:var(--shadow-md); }
.daily-card-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; flex-wrap:wrap; }
.daily-badge{ font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent);
  padding:.3rem .6rem; border-radius:999px; }
.daily-badge--muted{ color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,transparent); }
.daily-date{ color:var(--muted); font-size:.9rem; font-weight:600; }
.daily-figure{ position:relative; display:block; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border); background:var(--surface); }
.daily-figure img{ display:block; width:100%; height:auto; }
.daily-figure:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
.daily-zoom{ position:absolute; right:.6rem; bottom:.6rem; font-size:.75rem; font-weight:600;
  color:#fff; background:color-mix(in srgb,var(--primary) 88%,black); padding:.28rem .55rem;
  border-radius:999px; opacity:0; transform:translateY(4px); transition:.18s; pointer-events:none; }
.daily-figure:hover .daily-zoom,.daily-figure:focus-visible .daily-zoom{ opacity:1; transform:none; }
.daily-hints{ margin-top:1rem; }
.daily-hints h3{ font-size:.95rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin:0 0 .5rem; }
.daily-hints ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.daily-hints li{ position:relative; padding-left:1.4rem; color:var(--ink); }
.daily-hints li::before{ content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem;
  border-radius:2px; background:var(--accent); transform:rotate(45deg); }
.daily-side{ display:grid; gap:1.4rem; }
.daily-video video{ display:block; width:100%; border-radius:var(--radius-sm); background:#000; }
.daily-archive{ margin-top:2.4rem; border-top:1px solid var(--border); padding-top:1.4rem; }
.daily-archive-title{ font-size:.9rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:0 0 1rem; }
.archive-strip{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory; }
.archive-item{ margin:0; flex:0 0 auto; width:132px; scroll-snap-align:start; text-align:center; }
.archive-thumb{ display:block; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); transition:.18s; }
.archive-thumb img{ display:block; width:100%; height:auto; }
.archive-thumb:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
.archive-item figcaption{ margin-top:.45rem; font-size:.8rem; color:var(--muted); font-weight:600; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:4vmin;
  background:color-mix(in srgb,var(--dark_section) 92%,black); }
.lightbox[hidden]{ display:none; }
.lightbox-inner{ margin:0; text-align:center; max-width:min(94vw,900px); }
.lightbox-img{ max-width:100%; max-height:80vh; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); background:#fff; }
.lightbox-toggle{ margin-top:1rem; }
.lightbox-close{ position:absolute; top:1rem; right:1.2rem; width:44px; height:44px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; line-height:1; }
.lightbox-close:hover{ background:var(--accent); color:#20180a; }

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-actions,.hero-meta{ justify-content:center; }
  .hero-cover{ order:-1; }
  .hero-blurb{ margin-inline:auto; }
  .about-grid{ grid-template-columns:1fr; }
  .details-card{ position:static; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .daily-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:absolute; top:68px; right:0; left:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--background); border-bottom:1px solid var(--border);
    padding:.5rem 1.2rem 1.2rem; box-shadow:var(--shadow-md);
    clip-path:inset(0 0 100% 0); transition:clip-path .25s ease;
  }
  .nav-menu.open{ clip-path:inset(0 0 0 0); }
  .nav-menu li{ padding:.3rem 0; border-bottom:1px solid var(--border); }
  .nav-menu li:last-child{ border-bottom:0; padding-top:.8rem; }
  .nav-menu .btn{ width:100%; justify-content:center; }
  .feature-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}