/* ==========================================================================
   base.css — reset, typography, layout utilities, buttons, icons
   (SABHA-BUILD-SPEC §3). Lifted verbatim from the approved prototypes;
   prototype section numbers kept in the comments for traceability.
   Paths: this file lives in assets/css/, the fonts in assets/fonts/,
   hence ../fonts/ (the spec's §8 block is written from the HTML root).
   ========================================================================== */

/* --- Font faces (§8) ---------------------------------------------------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;
  font-display:swap;src:url(../fonts/cormorant-garamond-var.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;
  font-display:swap;src:url(../fonts/cormorant-garamond-italic-var.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;
  font-display:swap;src:url(../fonts/figtree-var.woff2) format("woff2")}
@font-face{font-family:"Tiro Devanagari Sanskrit";font-style:normal;font-weight:400;
  font-display:swap;src:url(../fonts/tiro-devanagari-sanskrit.woff2) format("woff2")}
/* Instrument Sans was trialled here 2026-08-07 and REJECTED by the owner
   after a full contact-page rollout; faces and files removed. The
   --font-info token remains (resolving to Figtree) so informational rules
   stay portable. */

/* ==========================================================================
   Prototype 3. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* Bricks ships html{font-size:62.5%} in frontend.min.css. The entire token
   system assumes a 16px rem base (SPEC §2), so restore the browser default.
   This loads after bricks-frontend and wins on source order. */
html{font-size:100%}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--ivory);
  /* A barely-there warm wash so the ivory reads as paper, not flat fill. */
  background-image:
    radial-gradient(58% 34% at 8% 0%,rgba(228,173,75,.10),transparent 70%),
    radial-gradient(46% 30% at 96% 4%,rgba(124,38,32,.05),transparent 72%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,picture,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
section[id],[id]:target{scroll-margin-top:calc(var(--player-h) + var(--sp-5))}

/* Focus — always visible, never removed */
:focus-visible{
  outline:2px solid var(--saffron);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.on-dark :focus-visible{outline-color:var(--gold-pale)}

::selection{background:var(--saffron);color:var(--burgundy-deep)}

/* ==========================================================================
   Prototype 4. TYPOGRAPHY
   ========================================================================== */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.script{font-family:var(--font-script);font-style:italic;font-weight:500}

.eyebrow{
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--saffron);
  line-height:1.4;
}
.lede{color:var(--muted);font-size:var(--fs-body)}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-3) var(--sp-5);
  margin-bottom:var(--sp-5);
}
.section-head__main{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:0}
.section-head__icon{flex:none;width:34px;height:34px;color:var(--saffron);margin-top:2px}
.section-title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:var(--lh-snug);
  color:var(--burgundy);
  letter-spacing:-.015em;
}
.section-sub{color:var(--muted);font-size:var(--fs-small);margin-top:2px}

/* Text link with trailing arrow */
.text-link{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  color:var(--burgundy);
  font-size:var(--fs-small);
  font-weight:700;
  padding:6px 2px;
  min-height:44px;
}
.text-link svg{width:18px;height:18px;transition:transform var(--dur) var(--ease)}
.text-link:hover{color:var(--burgundy-light)}
.text-link:hover svg{transform:translateX(4px)}

/* ==========================================================================
   Prototype 5. LAYOUT UTILITIES
   ========================================================================== */
/* The container carries no padding of its own: it is exactly as wide as the
   content should be, and the gutter is what remains either side of it.
   width = min(viewport - 2 gutters, 1440px). */
.container{
  width:min(calc(100% - (var(--gutter) * 2)),var(--container));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}
.section{padding-block:var(--section-y)}
.stack>*+*{margin-top:var(--sp-3)}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;
  top:-100px;left:var(--sp-4);
  z-index:200;
  background:var(--burgundy);
  color:var(--white);
  padding:12px 18px;
  border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:var(--fs-small);
  font-weight:700;
}
.skip-link:focus{top:0}
/* Every sprite icon strokes. The selector is general rather than a list of
   class names, so a new component cannot silently inherit the black fill
   default. An inline SVG opts out by declaring its own stroke-width. */
svg:not(.icon--solid):not(.sprite):not([stroke-width]){
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon{width:24px;height:24px;flex:none}
.icon--solid,.icon--solid *{fill:currentColor;stroke:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Deferred lower sections — reserve height so nothing shifts */
.defer{content-visibility:auto}

/* ==========================================================================
   Prototype 6. COMPONENTS — BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-height:48px;
  padding:12px 22px;
  border-radius:var(--r-sm);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--burgundy);color:var(--white)}
.btn--primary:hover{background:var(--burgundy-light)}
.btn--gold{background:var(--saffron);color:var(--burgundy-deep)}
.btn--gold:hover{background:var(--gold-soft)}
.btn--ghost{background:var(--ivory-warm);color:var(--burgundy);border-color:var(--stone)}
.btn--ghost:hover{background:var(--white);border-color:var(--saffron)}
.btn--outline-light{background:transparent;color:var(--on-dark);border-color:rgba(246,236,224,.4)}
.btn--outline-light:hover{background:rgba(246,236,224,.1);border-color:var(--gold-soft)}
.btn--block{width:100%}

/* Small round control used by carousels and the schedule */
.round-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;                    /* a control never gives up its touch target */
  width:44px;height:44px;
  border-radius:var(--r-pill);
  border:1px solid var(--stone);
  background:var(--ivory-warm);
  color:var(--burgundy);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.round-btn svg{width:20px;height:20px}
.round-btn:hover:not(:disabled){background:var(--burgundy);border-color:var(--burgundy);color:var(--white)}
.round-btn:disabled{opacity:.32;cursor:default}

/* Dots shared by both carousels */
.dots{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:var(--sp-4)}
.dots__btn{
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
}
.dots__btn::before{
  content:"";
  width:9px;height:9px;
  border-radius:var(--r-pill);
  background:var(--stone);
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.dots__btn[aria-current="true"]::before{background:var(--burgundy);transform:scale(1.1)}

/* Badges */
.badge{
  display:inline-block;
  padding:5px 12px;
  border-radius:var(--r-xs);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.04em;
}
.badge--prayer{background:var(--burgundy);color:var(--white)}
.badge--satsang{background:var(--saffron);color:var(--burgundy-deep)}
.badge--festival{background:var(--olive);color:var(--white)}

/* --------------------------------------------------------------------------
   Image placeholder fallback.
   Every photographic slot keeps its exact box. If the file is not present
   yet, initImageFallbacks() flags the wrapper and this warm fill stands in.
   The expected filename lives in the markup only, never in the interface.
   -------------------------------------------------------------------------- */
.media{position:relative;overflow:hidden;background:var(--ivory-deep)}
.media>img{width:100%;height:100%;object-fit:cover}
.media.is-missing>img,
.media.is-missing>picture{display:none}
.media.is-missing{
  background:
    radial-gradient(90% 70% at 70% 25%,rgba(228,173,75,.42),transparent 60%),
    radial-gradient(70% 60% at 20% 90%,rgba(124,38,32,.28),transparent 65%),
    linear-gradient(150deg,var(--ivory-deep),var(--stone));
}
.media.is-missing::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  background-image:
    repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 1px,transparent 1px 14px);
  opacity:.5;
}
.media--dark.is-missing{
  background:
    radial-gradient(80% 80% at 68% 40%,rgba(228,173,75,.5),transparent 62%),
    linear-gradient(120deg,var(--burgundy-ink),var(--burgundy-light));
}

/* ==========================================================================
   Prototype 8. MOTION PREFERENCES
   Accessibility invariant (SPEC §16): prefers-reduced-motion suppresses
   every transform and transition. Component selectors below exist on later
   phases' markup; harmless until then.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .carousel__viewport{scroll-behavior:auto}
  .event-card:hover,.gateway:hover,.round-btn:hover:not(:disabled),
  .socials a:hover,.support__option:hover{transform:none}
  .event-card:hover .event-card__media img,
  .gateway:hover .gateway__media img{transform:none}
}

/* ==========================================================================
   Prototype 10. TYPOGRAPHY SYSTEM — weight roles and numerals
   The optically compensated --fs-* scale from this prototype section already
   lives in tokens.css (§7 carries the collapsed final values).
   ========================================================================== */

/* --- Display weights ------------------------------------------------------
   Cormorant 700 is heavy and very high contrast; 600 carries the same
   authority without the fragility. Secondary display sits at 500. */
.hero__title,.page-hero__title,.section-title,.head__title,
.appeal__title,.legacy__title,.support__title,.gateway__title,
.event-card__title,.visit__title,.schedule__day-name,.brand__name,
.chapter__title,.promise__title,.feature__title,.gratitude__title,
.way__title,.showcase__title,.closing__title,.wishgroup__title,
.form-panel__title,.findus__title{font-weight:600}

.event-card__day,.footer__brand-name,.player__title,.need__name,
.chapter__year,.hinge__place,.address-lockup__num,.legacy-stamp strong,
.lead__stamp strong,.method__value,.map__address,.eft__value,
.promise__quote blockquote,.pull p{font-weight:500}

/* Cormorant italic at 500 reads as editorial heritage, not as a greeting card. */
.script{font-weight:500;letter-spacing:0}

/* --- Interface weights ----------------------------------------------------
   Figtree: 400 for reading, 600 for controls, 700 only where the existing
   hierarchy already demanded bold. 500 is unused and is not shipped. */
body{font-weight:400}
.nav__link,.nav__toggle,.mnav__link,.mnav__toggle,.btn,.jumpnav__link,
.field__label,.schedule__tab,.copy-btn{font-weight:600}

/* Figtree sets slightly tighter than Arial at small tracked sizes. */
.eyebrow,.badge,.status,.chip{letter-spacing:.12em}

/* --- Numerals -------------------------------------------------------------
   Cormorant ships oldstyle figures by default, so dates and times set in the
   display face sat at uneven heights. Wherever a numeral reads as data it is
   forced to lining, tabular figures. Editorial prose keeps the default. */
.brand__est,.event-card__day,.event-card__month,.schedule__date,.chapter__year,
.address-lockup__num,.legacy-stamp strong,.lead__stamp strong,.hinge__place small,
.eft__value--digits,.visit__times,.player__time,.method__value{
  font-variant-numeric:lining-nums tabular-nums;
}