/* ─────────────────────────────────────────────────────────────
   Finance Fraternity Seva Wing — Brahma Kumaris
   Palette derived from the wing's own emblem: aubergine ring,
   marigold coin-gold, lotus magenta, parchment ground.
   ───────────────────────────────────────────────────────────── */

:root{
  /* ground + ink */
  --bg:            #FDFAF4;
  --surface:       #F8F2E6;
  --surface-2:     #F3EBDB;
  --ink:           #4A3646;
  --ink-soft:      #6F5B6A;
  --ink-faint:     #7C6877;
  --hairline:      #E8DCC7;

  /* brand */
  --plum:          #7B5474;
  --plum-deep:     #6E4A68;
  --plum-tint:     #EFE4EC;
  --gold:          #856220;   /* AA on cream at label sizes */   /* AA-safe on parchment */
  --gold-bright:   #D9B15F;
  --gold-glow:     rgba(217,177,95,.18);
  --lotus:         #A9668E;

  /* on-plum (inverted band) */
  --on-plum:       #FBF3EA;
  --on-plum-soft:  #DCC6D6;

  /* golden fills stand in for every dark block: CTAs and the footer */
  --cta-bg:        #E0BC72;
  --cta-ink:       #45300F;
  --foot-bg:       #F5EBD8;

  /* stats band: a soft golden inset, never a dark block */
  --band-bg:       #F6ECD9;
  --band-ink:      #4A3646;
  --band-ink-soft: #6F5B6A;
  --band-accent:   #9A6F26;
  --band-rule:     #E5D6BB;

  --shadow: 0 1px 2px rgba(67,32,62,.04), 0 10px 30px -16px rgba(67,32,62,.16);
  --shadow-lift: 0 2px 4px rgba(67,32,62,.05), 0 22px 48px -22px rgba(67,32,62,.24);

  --maxw: 1140px;
  --gut: clamp(20px, 5vw, 56px);

  /* Calibri where it exists; Carlito is metric-identical everywhere else.
     Hind trails the stack to supply Devanagari glyphs. */
  --display: Calibri, Carlito, "Hind", "Segoe UI", system-ui, sans-serif;
  --body:    Calibri, Carlito, "Hind", "Segoe UI", system-ui, sans-serif;

  color-scheme: light;
}


*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.14;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.004em;
}

p{ margin:0; }
a{ color:inherit; }

:focus-visible{
  outline:2.5px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:3px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ── Devanagari + eyebrow utility type ───────────────────── */
.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.dev{ font-family:"Hind","Noto Sans Devanagari",sans-serif; font-weight:500; }

/* ── The ledger rule: an accountant's grand-total line, used
      as the site's structural divider. Thick over thin. ───── */
.ledger{
  display:block;
  height:5px;
  border-top:2.5px solid var(--gold-bright);
  border-bottom:1px solid var(--hairline);
  opacity:.85;
}

/* ── Letterhead: the wing's official masthead, rebuilt as type ─── */
.letterhead{
  position:relative;
  background:
    radial-gradient(56% 130% at 50% 4%, rgba(217,177,95,.09), transparent 70%),
    linear-gradient(180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--band-bg) 38%, var(--bg)) 62%,
      color-mix(in srgb, var(--band-bg) 62%, var(--bg)) 100%);
}
.letterhead{ border-bottom:1px solid var(--band-rule); }
.lh-in{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(12px,2.4vw,30px);
  padding-block:clamp(13px,1.9vw,19px);
}

/* each mark sits on its own warm halo */
.lh-badge{ position:relative; display:grid; place-items:center; }
.lh-badge::before{
  content:""; position:absolute; inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(217,177,95,.17) 0%, transparent 70%);
}
.lh-mark{
  position:relative;
  width:clamp(54px,6.6vw,80px); height:auto; display:block;
}
.lh-mark.emblem{
  width:clamp(58px,7.2vw,88px);
  border-radius:50%;
  box-shadow:0 2px 12px -6px rgba(74,54,70,.22);
}

.lh-text{ text-align:center; min-width:0; display:grid; place-items:center; }
.lh-name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,2.5vw,1.52rem);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); line-height:1.16; margin:0;
  text-wrap:balance;
}
/* a lotus petal between two rules — the emblem's own motif, scaled down */
.lh-orn{
  display:block; width:min(230px,66%); height:9px; margin-top:8px;
  color:var(--gold); opacity:.75;
}
.lh-orn svg{ width:100%; height:100%; display:block; }

@media (max-width:600px){
  .lh-in{ gap:12px; }
  .lh-orn{ width:min(190px,74%); margin-top:9px; }
}

/* ── Header ──────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.head-in{
  display:flex; align-items:center; gap:18px;
  min-height:72px;
}

.nav{ display:flex; gap:2px; align-items:center; margin-right:auto; }
.nav a{
  text-decoration:none; color:var(--ink);
  font-size:.96rem; font-weight:700;
  padding:9px 12px; border-radius:7px;
  white-space:nowrap;
  transition:color .18s, background .18s;
}
.nav a:hover{ color:var(--plum); background:var(--surface-2); }

.head-cta{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--cta-bg); color:var(--cta-ink);
  text-decoration:none; font-size:.9rem; font-weight:700;
  padding:10px 18px; border-radius:999px; white-space:nowrap;
  transition:transform .18s, box-shadow .18s;
}
.head-cta:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }

.lang{
  position:relative; display:inline-flex; align-items:center; flex-shrink:0;
}
.lang select{
  appearance:none; -webkit-appearance:none;
  font:600 .9rem/1 var(--body); color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:999px; padding:10px 34px 10px 16px; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.lang select:hover{ border-color:var(--gold-bright); }
.lang svg{
  position:absolute; right:13px; pointer-events:none; color:var(--gold);
}
@media (max-width:400px){ .lang select{ padding:9px 30px 9px 12px; font-size:.8rem; } }

.nav-toggle{
  display:none; background:none; border:1px solid var(--hairline);
  border-radius:8px; padding:7px 10px; cursor:pointer; color:var(--ink);
  font:inherit; font-size:.8rem;
}
@media (max-width:1080px){
  .head-in{ justify-content:space-between; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--hairline);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--gut) 18px; display:none;
    box-shadow:var(--shadow);
  }
  .nav.open{ display:flex; }
  .nav a{ padding:11px 4px; border-bottom:1px solid var(--hairline); border-radius:0; }
  .nav a:last-child{ border-bottom:0; }
  .lang{
  position:relative; display:inline-flex; align-items:center; flex-shrink:0;
}
.lang select{
  appearance:none; -webkit-appearance:none;
  font:600 .9rem/1 var(--body); color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:999px; padding:10px 34px 10px 16px; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.lang select:hover{ border-color:var(--gold-bright); }
.lang svg{
  position:absolute; right:13px; pointer-events:none; color:var(--gold);
}
@media (max-width:400px){ .lang select{ padding:9px 30px 9px 12px; font-size:.8rem; } }

.nav-toggle{ display:block; order:3; }
  .head-cta{ order:2; }
}
@media (max-width:620px){
  .head-cta{ display:none; }
    .head-in{ gap:12px; }
  /* the trailing rule reads as a stray dash once the kicker wraps */
  .hero-kicker::after{ display:none; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(52px,8vw,96px) clamp(48px,7vw,84px);
}
.hero::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:120%;
  background:
    radial-gradient(46% 52% at 22% 34%, var(--gold-glow) 0%, transparent 68%),
    radial-gradient(40% 46% at 78% 12%, color-mix(in srgb, var(--lotus) 16%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.hero-in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(32px,5vw,68px); align-items:center;
}
@media (max-width:880px){
  .hero-in{ grid-template-columns:1fr; text-align:left; }
}

/* Medallion: the emblem, ringed, with the four virtue petals
   from the emblem itself orbiting it. */
.medallion{
  position:relative; width:min(100%,340px); aspect-ratio:1; margin-inline:auto;
}
.medallion-glow{
  position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow) 0%, transparent 65%);
  filter:blur(14px);
}
.medallion img{
  position:absolute; inset:13%; width:74%; height:74%;
  border-radius:50%; display:block;
  box-shadow:0 18px 46px -18px rgba(59,10,54,.55);
}
.ring{ position:absolute; inset:0; }
.ring circle{ fill:none; stroke:var(--gold-bright); }

.petal{
  position:absolute; width:74px; height:36px;
  display:grid; place-items:center;
}
.petal svg{ position:absolute; inset:0; width:100%; height:100%; }
.petal span{
  position:relative; font-size:.76rem; font-weight:600;
  color:#6B4238; letter-spacing:.01em; white-space:nowrap;
}
.p1{ top:6%;  left:-4%; transform:rotate(-14deg); }
.p2{ top:30%; left:-13%; transform:rotate(-4deg); }
.p3{ bottom:26%; left:-9%; transform:rotate(8deg); }
.p4{ bottom:4%; left:6%; transform:rotate(16deg); }
@media (max-width:520px){
  .p2,.p3{ left:-6%; }
  .petal{ width:64px; height:31px; }
  .petal span{ font-size:.68rem; }
}

@media (prefers-reduced-motion:no-preference){
  .petal{ animation:drift 7s ease-in-out infinite; }
  .p2{ animation-delay:-1.6s } .p3{ animation-delay:-3.2s } .p4{ animation-delay:-4.8s }
  @keyframes drift{
    0%,100%{ translate:0 0 }
    50%{ translate:-5px -7px }
  }
}

.hero-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:18px;
}
.hero-kicker::after{ content:""; width:44px; height:1.5px; background:var(--gold-bright); }

.hero h1{
  font-size:clamp(2.15rem,5.3vw,3.55rem);
  font-weight:600;
}
.hero h1 em{ font-style:normal; color:var(--plum); }
.hero-sub{
  margin-top:20px; font-size:1.11rem; color:var(--ink-soft);
  max-width:56ch;
}
.hero-place{
  margin-top:16px; font-size:.85rem; color:var(--ink-faint);
  letter-spacing:.03em;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; font-weight:600; font-size:.94rem;
  padding:13px 24px; border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--cta-bg); color:var(--cta-ink); box-shadow:var(--shadow); }
.btn-primary:hover{ box-shadow:var(--shadow-lift); }
.btn-ghost{ border-color:var(--gold-bright); color:var(--ink); }
.btn-ghost:hover{ background:color-mix(in srgb, var(--gold-bright) 14%, transparent); }
.btn svg{ flex-shrink:0; }

/* ── Section scaffolding ─────────────────────────────────── */
.section{ padding-block:clamp(56px,7vw,88px); }
:target, section[id]{ scroll-margin-top:86px; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
.section-head{ margin-bottom:clamp(30px,4vw,46px); }
.section-head .ledger{ margin-bottom:20px; }
.section-head h2{
  font-size:clamp(1.6rem,3.3vw,2.35rem);
  margin-top:6px;
}
.section-head .lede{
  margin-top:14px; color:var(--ink-soft); max-width:66ch; font-size:1.04rem;
}

.prose p + p{ margin-top:1.05em; }
.prose{ color:var(--ink-soft); max-width:68ch; }
.prose strong{ color:var(--ink); font-weight:600; }

/* ── About: two-column with pull ─────────────────────────── */
.two{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,60px);
}
@media (max-width:820px){ .two{ grid-template-columns:1fr; } }

.card-quiet{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:clamp(22px,3vw,32px);
}
.card-quiet h3{
  font-size:1.22rem; margin-bottom:12px;
}

.pull{
  border-left:3px solid var(--gold-bright);
  padding:4px 0 4px 22px; margin-top:26px;
  font-family:var(--display);
  font-size:1.24rem; line-height:1.45; color:var(--ink);
}
.pull cite{ display:block; font-family:var(--body); font-style:normal;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin-top:10px; }

/* ── Stats band on plum ──────────────────────────────────── */
.band{
  background:var(--band-bg); color:var(--band-ink);
  position:relative; overflow:hidden;
  border-block:1px solid var(--band-rule);
}
.band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 120% at 50% -20%, var(--gold-glow), transparent 62%);
}
.stats{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; padding-block:clamp(38px,5vw,56px);
}
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; } }
.stat{ padding-inline:clamp(8px,2vw,22px); border-left:1px solid var(--band-rule); }
.stat:first-child{ border-left:0; padding-left:0; }
@media (max-width:720px){
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
}
.stat-n{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem,4vw,2.7rem); line-height:1;
  color:var(--band-accent);
  font-variant-numeric:tabular-nums;
}
.stat-l{
  margin-top:9px; font-size:.85rem; color:var(--band-ink-soft);
  line-height:1.45;
}

/* ── Profession chips ────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip{
  font-size:.86rem; font-weight:500;
  padding:7px 15px; border-radius:999px;
  background:var(--surface-2); color:var(--ink-soft);
  border:1px solid var(--hairline);
}

/* ── Benefits grid ───────────────────────────────────────── */
.grid-benefits{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:18px;
}
.benefit{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:14px; padding:24px 22px 26px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.benefit:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--gold-bright) 55%, var(--hairline));
}
.benefit .petal-mark{ display:block; width:34px; height:17px; margin-bottom:15px; }
.benefit h3{
  font-size:1.05rem; margin-bottom:8px;
}
.benefit p{ font-size:.94rem; color:var(--ink-soft); line-height:1.6; }

/* ── Team ────────────────────────────────────────────────── */
.team{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,2vw,24px);
}
@media (max-width:900px){ .team{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .team{ grid-template-columns:repeat(2,1fr); } }
.member{ text-align:center; }
.member-photo{
  position:relative; width:100%; max-width:150px; aspect-ratio:1;
  margin:0 auto 16px; border-radius:50%;
  background:var(--surface-2);
  padding:5px;
  background-image:conic-gradient(from 210deg, var(--gold-bright), var(--lotus), var(--gold-bright));
  transition:transform .22s;
}
.member:hover .member-photo{ transform:translateY(-4px) scale(1.02); }
.member-photo img{
  width:100%; height:100%; border-radius:50%; display:block;
  object-fit:cover; object-position:50% 46%;
}
.member h3{
  font-size:1rem;
}
.member p{
  font-size:.79rem; color:var(--gold); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; margin-top:5px; line-height:1.4;
}

/* ── Programme / events ──────────────────────────────────── */
.feature{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,52px); align-items:start;
}
@media (max-width:860px){ .feature{ grid-template-columns:1fr; } }
@media (max-width:420px){ .agenda-row{ grid-template-columns:1fr; gap:5px; } }

.agenda{ display:flex; flex-direction:column; gap:0; margin-top:4px; }
.agenda-row{
  display:grid; grid-template-columns:112px 1fr; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.agenda-row:last-child{ border-bottom:0; }
.agenda-k{
  font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); line-height:1.5;
}
.agenda-v{ font-size:.97rem; color:var(--ink-soft); }
.agenda-v b{ color:var(--ink); font-weight:600; display:block; margin-bottom:2px;
  font-family:var(--display); font-size:1.04rem; }

/* ── Seva activity list ──────────────────────────────────── */
.seva-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:20px;
}
.seva{
  border:1px solid var(--hairline); border-radius:14px;
  padding:26px 24px; background:var(--bg);
  position:relative;
}
.seva::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:2.5px;
  background:linear-gradient(90deg, var(--gold-bright), transparent);
  border-radius:0 0 3px 3px;
}
.seva h3{ font-size:1.08rem; margin-bottom:9px; }
.seva p{ font-size:.94rem; color:var(--ink-soft); }

/* ── Placeholder slots (gallery / video / articles) ──────── */
.slot-note{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.76rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold);
  border:1px dashed color-mix(in srgb, var(--gold-bright) 60%, transparent);
  border-radius:999px; padding:6px 14px; margin-bottom:22px;
}
.gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;
}

/* photo tiles */
.shots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.shot{
  position:relative; margin:0;
  border-radius:14px; overflow:hidden; border:1px solid var(--hairline);
  background:var(--surface); cursor:zoom-in;
  padding:0; appearance:none; font:inherit; color:inherit; text-align:left;
  transition:transform .22s, box-shadow .22s;
}
.shot img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.shot:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.shot:hover img{ transform:scale(1.04); }
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 16px 13px;
  font-size:.84rem; line-height:1.4; color:#FFF8EE;
  background:linear-gradient(to top, rgba(46,26,42,.86), rgba(46,26,42,0));
}
@media (max-width:820px){
  .shots{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .shots{ grid-template-columns:1fr; }
}

/* gallery filter chips */
.filters{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;
}
.filter{
  font:600 .82rem/1 var(--body); letter-spacing:.02em;
  padding:9px 16px; border-radius:999px; cursor:pointer;
  background:var(--surface); color:var(--ink-soft);
  border:1px solid var(--hairline);
  transition:background .16s, color .16s, border-color .16s;
}
.filter:hover{ border-color:var(--gold-bright); color:var(--ink); }
.filter[aria-pressed="true"]{
  background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg);
}
.filter .n{ opacity:.6; font-weight:500; margin-left:5px; }
.shot[hidden]{ display:none; }

/* wide stage photo in the events section */
.stage{ margin:0 0 clamp(28px,4vw,44px); }
.stage img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:16px; border:1px solid var(--hairline); box-shadow:var(--shadow);
}
.stage figcaption{
  margin-top:11px; font-size:.85rem; color:var(--ink-faint);
}
.gallery-count{ margin-top:18px; font-size:.84rem; color:var(--ink-faint); }

/* lightbox */
.lightbox{
  border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh;
  width:min(1120px,94vw);
}
.lightbox::backdrop{ background:rgba(46,26,42,.86); }
.lightbox img{
  display:block; width:100%; height:auto; max-height:82vh; object-fit:contain;
  border-radius:12px; background:var(--surface);
}
.lightbox figcaption{
  color:#F6ECE0; font-size:.9rem; padding:12px 4px 0; text-align:center;
}
.lightbox-close{
  position:absolute; top:-6px; right:-6px;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid var(--gold-bright); background:var(--cta-bg); color:var(--cta-ink);
  font:600 18px/1 var(--body);
}
.lightbox form{ position:relative; margin:0; }
.slot{
  aspect-ratio:4/3; border-radius:12px;
  border:1.5px dashed var(--hairline);
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--gold-bright) 9%, transparent), transparent 58%),
    var(--surface);
  display:grid; place-content:center; gap:6px; text-align:center;
  padding:16px; color:var(--ink-faint); font-size:.84rem;
}
.slot svg{ justify-self:center; opacity:.55; }
.slot-tall{ aspect-ratio:16/10; }

.articles{ display:flex; flex-direction:column; }
.article{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px;
  align-items:center; padding:20px 0;
  border-bottom:1px solid var(--hairline);
}
.article:first-child{ border-top:1px solid var(--hairline); }
.article-tag{
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.article-t{ font-family:var(--display); font-size:1.06rem; font-weight:600; }
.article-d{ font-size:.88rem; color:var(--ink-faint); white-space:nowrap; }
@media (max-width:640px){
  .article{ grid-template-columns:1fr; gap:6px; }
  .article-d{ display:none; }
}

/* ── Connect ─────────────────────────────────────────────── */
.connect{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px;
}
.link-card{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:13px; padding:17px 19px;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.link-card:hover{
  transform:translateY(-2px); box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--gold-bright) 55%, var(--hairline));
}
.link-card svg{ flex-shrink:0; color:var(--plum); }
.link-card b{ display:block; font-size:.97rem; font-weight:600; }
.link-card span{ display:block; font-size:.81rem; color:var(--ink-faint);
  overflow-wrap:anywhere; }

.contact-note{
  margin-top:26px; padding:20px 24px;
  background:var(--surface-2); border-radius:13px;
  border:1px solid var(--hairline);
  border-left:3px solid var(--gold-bright);
  font-size:.95rem; color:var(--ink-soft);
}
.contact-note strong{ color:var(--ink); }

/* ── Footer ──────────────────────────────────────────────── */
.site-foot{
  background:var(--foot-bg); color:var(--ink-soft);
  border-top:2.5px solid var(--gold-bright);
  padding-block:clamp(46px,5.5vw,68px) 0; margin-top:clamp(50px,6vw,80px);
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,.95fr) minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(28px,4vw,54px);
  padding-bottom:clamp(34px,4.5vw,48px);
}
@media (max-width:940px){ .foot-top{ grid-template-columns:1fr 1fr; row-gap:38px; } }
@media (max-width:560px){ .foot-top{ grid-template-columns:1fr; } }

.foot-brand img{ width:60px; height:60px; border-radius:50%; display:block; }
.foot-brand h3{
  color:var(--ink); font-size:1.22rem; margin-top:14px; line-height:1.25;
}
.foot-brand p{ font-size:.97rem; margin-top:10px; line-height:1.62; max-width:34ch; }

.foot-col h4{
  font-family:var(--body); font-size:.8rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  margin-bottom:18px;
}
.foot-col ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.foot-col a{
  text-decoration:none; font-size:.99rem; color:var(--ink-soft);
  transition:color .16s;
}
.foot-col a:hover{ color:var(--plum); }

/* Reach us: an icon beside each line, like a contact block */
.foot-reach ul{ gap:16px; }
.foot-reach li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px;
  align-items:start; font-size:.99rem; line-height:1.6;
}
.foot-reach svg{ color:var(--gold); margin-top:3px; flex-shrink:0; }

.social-row{ display:flex; gap:8px; margin-top:22px; flex-wrap:wrap; }
.social-row a{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; color:var(--plum);
  background:var(--surface); border:1px solid var(--gold-bright);
  transition:background .18s, color .18s, transform .18s;
}
.social-row a:hover{ background:var(--cta-bg); color:var(--cta-ink); transform:translateY(-2px); }

.foot-bottom{
  border-top:1px solid var(--band-rule);
  padding-block:22px;
  text-align:center; font-size:.92rem; color:var(--ink-soft);
}

/* ── Conference feature ──────────────────────────────────── */
.event-lead{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,4vw,52px); align-items:start;
  margin-bottom:clamp(34px,4.5vw,52px);
}
@media (max-width:800px){ .event-lead{ grid-template-columns:1fr; } }
.poster{
  width:100%; border-radius:14px; display:block;
  box-shadow:var(--shadow-lift);
  border:1px solid var(--hairline);
}
.meta-row{ display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 22px; }
.meta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.87rem; font-weight:500;
  padding:8px 15px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--hairline);
}
.meta svg{ color:var(--gold); flex-shrink:0; }
.tagline{
  font-family:var(--display);
  font-size:1.3rem; color:var(--lotus); margin-top:2px;
}
.editions{ display:flex; flex-direction:column; margin-top:8px; }
.edition{
  display:grid; grid-template-columns:52px 1fr auto; gap:16px;
  align-items:baseline; padding:15px 0; border-top:1px solid var(--hairline);
}
.edition-n{
  font-family:var(--display); font-weight:600; font-size:1.28rem;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.edition-t b{ display:block; font-size:.99rem; }
.edition-t span{ font-size:.86rem; color:var(--ink-faint); }
.edition-d{ font-size:.84rem; color:var(--ink-faint); white-space:nowrap; }
@media (max-width:560px){
  .edition{ grid-template-columns:44px 1fr; }
  .edition-d{ grid-column:2; }
}

/* ── Divine experiences (testimonials) ───────────────────── */
.quotes{ columns:3 300px; column-gap:18px; }
.quote{
  break-inside:avoid; margin-bottom:18px;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:14px; padding:26px 24px 24px;
  position:relative;
}
.quote::before{
  content:"\201C"; position:absolute; top:2px; left:20px;
  font-family:var(--display); font-size:3.4rem; line-height:1;
  color:var(--gold-bright); opacity:.5;
}
.quote p{
  font-size:.97rem; line-height:1.62; color:var(--ink-soft);
  position:relative; margin-top:14px;
}
.quote footer{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--hairline);
}
.quote cite{
  font-style:normal; font-family:var(--display); font-weight:600;
  font-size:1rem; color:var(--ink); display:block;
}
.quote small{
  display:block; margin-top:3px; font-size:.79rem;
  color:var(--gold); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.45;
}


/* ── Divine experiences, as a slider ─────────────────────── */
.testi{ margin-top:10px; }
.testi-slides{ display:grid; }          /* one shared cell: every slide is as
                                           tall as the longest experience */
.testi-slide{
  grid-area:1/1; margin:0; max-width:74ch;
  opacity:0; visibility:hidden; translate:0 10px;
  transition:opacity .45s ease, translate .45s cubic-bezier(.2,.7,.3,1), visibility .45s;
}
.testi-slide.is-active{ opacity:1; visibility:visible; translate:0 0; }
@media (prefers-reduced-motion:reduce){
  .testi-slide{ transition:none; translate:none; }
}

.testi-name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.3rem,2.8vw,1.9rem); color:var(--ink);
  margin:0; line-height:1.2;
}
.testi-role{
  margin-top:7px; font-size:.82rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold); line-height:1.55;
}
.testi-quote{
  margin:20px 0 0; padding:0 0 0 26px; border:0;
  border-left:2.5px solid var(--gold-bright);
  font-size:clamp(1.02rem,1.7vw,1.16rem); line-height:1.72; color:var(--ink-soft);
}

.testi-controls{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  margin-top:clamp(28px,4vw,40px);
  max-width:74ch;      /* centred against the quote, not the whole page */
}
.testi-btn{
  display:inline-flex; align-items:center; gap:8px;
  font:700 .88rem/1 var(--body); cursor:pointer;
  padding:13px 30px; border-radius:999px;
  background:var(--cta-bg); color:var(--cta-ink); border:1.5px solid transparent;
  transition:transform .18s, box-shadow .18s;
}
.testi-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.testi-dots{ display:flex; gap:9px; align-items:center; }
.testi-dot{
  width:10px; height:10px; border-radius:50%; cursor:pointer; padding:0;
  border:1.5px solid var(--gold); background:transparent;
  transition:background .18s, transform .18s;
}
.testi-dot[aria-current="true"]{ background:var(--gold); transform:scale(1.25); }
@media (max-width:520px){
  }

/* ── Scroll reveal ───────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; translate:0 18px; transition:opacity .7s ease, translate .7s cubic-bezier(.2,.7,.3,1); }
  .reveal.in{ opacity:1; translate:0 0; }
}

/* ── YouTube embeds (admin-managed) ──────────────────────── */
.video-embed{
  position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  border:1px solid var(--hairline); background:var(--surface);
  box-shadow:var(--shadow);
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.article-t a{ text-decoration:none; }
.article-t a:hover{ color:var(--plum); text-decoration:underline; }