/* ==========================================================================
   ADINATHA — Rishabhanatha Bhagwan | Sacred Heritage Portal
   Designed & Managed by Creaa Designs
   ========================================================================== */

/* ---------- 1. Root Tokens ---------- */
:root{
  --ivory: #f6efe1;
  --ivory-2: #ede2c8;
  --ivory-3: #f9f4e8;
  --sandstone: #e7d6b3;
  --gold: #b88a2a;
  --gold-deep: #8d6618;
  --gold-soft: #d6b265;
  --saffron: #d97a23;
  --saffron-deep: #b65b13;
  --maroon: #6f2418;
  --maroon-bronze: #8a3a23;
  --forest: #294d3a;
  --forest-deep: #1d3a2c;
  --charcoal: #2a2520;
  --ink: #18130d;
  --line: rgba(138, 102, 35, .22);
  --line-strong: rgba(138, 102, 35, .42);

  --serif: "Cormorant Garamond", "Playfair Display", "Trajan Pro", Georgia, serif;
  --display: "Cinzel", "Trajan Pro", "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Inter", "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --shadow-soft: 0 30px 60px -30px rgba(40,30,10,.35);
  --shadow-card: 0 14px 40px -18px rgba(40,30,10,.4);
  --radius-s: 4px;
  --radius-m: 10px;

  --max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(80px, 10vw, 140px);

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-fluid: cubic-bezier(.65,.05,.36,1);
}

/* ---------- 2. Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--charcoal);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background: var(--gold); color:var(--ivory)}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4,h5{
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.08;
}
.eyebrow{
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before{
  content:"";
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow.center::after{
  content:"";
  width: 36px;
  height: 1px;
  background: linear-gradient(-90deg, var(--gold), transparent);
}
.display-xxl{
  font-family: var(--serif);
  font-size: clamp(54px, 9vw, 132px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.015em;
}
.display-xl{
  font-family: var(--serif);
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: 1;
  letter-spacing: -.01em;
}
.display-l{
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
}
.display-m{
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.15;
}
.lead{
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.7;
  color: #4a3f2e;
}
.italic{font-style: italic; font-family: var(--serif)}
.gold{color: var(--gold-deep)}
.center{text-align:center}

/* devanagari accent */
.sanskrit{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--maroon-bronze);
  letter-spacing: .02em;
}

/* ---------- 4. Layout Helpers ---------- */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-narrow{max-width: 940px; margin:0 auto; padding: 0 var(--gutter)}
.section{padding: var(--section) 0}
.section-tight{padding: clamp(60px, 7vw, 100px) 0}

/* Ornamental rule */
.ornament{
  display:flex; align-items:center; justify-content:center;
  gap: 18px; margin: 28px 0;
}
.ornament .line{height:1px; width:80px; background: linear-gradient(90deg, transparent, var(--gold), transparent)}
.ornament .glyph{
  width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--gold); position: relative;
}
.ornament .glyph::after{
  content:""; position:absolute; inset:3px; background: var(--ivory);
}

/* ---------- 5. Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--ink);
  background: transparent;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: color .5s var(--ease-out);
}
.btn > span{white-space: nowrap}
.btn::before{
  content:"";
  position: absolute; inset:0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s var(--ease-fluid);
  z-index: 0;
}
.btn > *{position: relative; z-index: 1}
.btn:hover{color: var(--ivory)}
.btn:hover::before{transform: translateY(0)}
.btn .arrow{
  width: 18px; height: 1px; background: currentColor; position: relative;
  transition: width .4s var(--ease-out);
}
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow{width: 26px}

.btn-gold{
  border-color: transparent;
  background: linear-gradient(180deg, #d8aa45, var(--gold));
  color: var(--ink);
}
.btn-gold::before{background: var(--ink)}
.btn-gold:hover{color: var(--gold-soft)}

.btn-ghost{
  border-color: rgba(246,239,225,.5);
  color: var(--ivory);
}
.btn-ghost::before{background: var(--ivory)}
.btn-ghost:hover{color: var(--ink)}

/* ---------- 6. Header / Navigation ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 18px 0;
  background: rgba(246,239,225,.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .35s var(--ease-out), background .35s var(--ease-out);
}
.site-header.scrolled{
  padding: 12px 0;
  background: rgba(246,239,225,.94);
}
.nav{
  display:flex; align-items:center; justify-content: space-between;
  gap: 24px;
}
.brand{
  display:flex; align-items:center; gap: 14px;
}
.brand-mark{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.brand-mark::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  border: 1px dashed rgba(184,138,42,.5);
}
.brand-mark svg{width: 24px; height: 24px}
.brand-text{display:flex; flex-direction: column; line-height: 1}
.brand-name{
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ink);
}
.brand-sub{
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--gold-deep);
  margin-top: 3px;
  letter-spacing: .02em;
}

.nav-menu{
  display:flex; align-items:center; gap: 36px;
}
.nav-menu a{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3a2f1f;
  position: relative;
  padding: 6px 0;
  transition: color .3s ease;
}
.nav-menu a::after{
  content:"";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .35s var(--ease-out);
}
.nav-menu a:hover, .nav-menu a.active{color: var(--maroon)}
.nav-menu a:hover::after, .nav-menu a.active::after{width: 100%}

.nav-cta{
  display:flex; align-items:center; gap: 18px;
}
.nav-cta .om{
  font-family: var(--serif);
  font-size: 22px;
  color: var(--maroon-bronze);
  line-height: 1;
}

.nav-toggle{
  display:none;
  width: 44px; height: 44px;
  position: relative;
  border: 1px solid var(--line-strong);
}
.nav-toggle span{
  position:absolute; left: 12px; right: 12px; height:1px;
  background: var(--ink);
  transition: transform .35s ease, opacity .35s ease, top .35s ease;
}
.nav-toggle span:nth-child(1){top: 16px}
.nav-toggle span:nth-child(2){top: 22px}
.nav-toggle span:nth-child(3){top: 28px}
.nav-toggle.open span:nth-child(1){top: 22px; transform: rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity: 0}
.nav-toggle.open span:nth-child(3){top: 22px; transform: rotate(-45deg)}

@media (max-width: 1080px){
  .nav-menu{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 88vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 80px 40px;
    background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
    transform: translateX(110%);
    transition: transform .55s var(--ease-fluid);
    box-shadow: var(--shadow-soft);
  }
  .nav-menu.open{transform: translateX(0)}
  .nav-menu a{font-size: 16px}
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
}

/* ---------- 7. Passcode Gate ---------- */
.gate{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #0d0a06;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.gate.hide{
  animation: gateOut 1.4s var(--ease-fluid) forwards;
}
@keyframes gateOut{
  0%{opacity: 1; transform: scale(1)}
  60%{opacity: 1; transform: scale(1.03)}
  100%{opacity: 0; transform: scale(1.08); visibility: hidden}
}
.gate-bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(216,170,69,.14) 0%, rgba(13,10,6,1) 70%),
    linear-gradient(135deg, #1a1308 0%, #0d0a06 50%, #221709 100%);
  z-index: 0;
}
.gate-bg::before{
  content:"";
  position: absolute; inset:0;
  background-image: radial-gradient(circle at center, rgba(216,170,69,.7) 0%, transparent 70%);
  opacity: .14;
  filter: blur(40px);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform: scale(1); opacity:.14}
  50%{transform: scale(1.15); opacity: .22}
}
.gate-mandala{
  position: absolute;
  width: min(880px, 90vw);
  height: min(880px, 90vw);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: .14;
  z-index: 1;
  animation: rotate 80s linear infinite;
}
.gate-mandala-2{
  position: absolute;
  width: min(560px, 70vw);
  height: min(560px, 70vw);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: .22;
  z-index: 1;
  animation: rotate 60s linear infinite reverse;
}
@keyframes rotate{
  to{transform: translate(-50%, -50%) rotate(360deg)}
}
.gate-content{
  position: relative;
  z-index: 5;
  text-align: center;
  width: min(560px, 90vw);
  padding: 40px;
  animation: gateIn 1.4s var(--ease-fluid) .2s both;
}
@keyframes gateIn{
  from{opacity:0; transform: translateY(30px)}
  to{opacity: 1; transform: translateY(0)}
}
.gate-symbol{
  width: 70px; height: 70px;
  margin: 0 auto 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(216,170,69,.5);
  border-radius: 50%;
  position: relative;
}
.gate-symbol::after{
  content:""; position:absolute; inset:5px; border-radius: 50%;
  border: 1px solid rgba(216,170,69,.25);
}
.gate-symbol svg{width: 36px; height: 36px; color: var(--gold-soft)}
.gate-eyebrow{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 24px;
}
.gate-title{
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 72px);
  color: #f4e8c8;
  line-height: 1;
  margin-bottom: 16px;
  font-weight: 400;
}
.gate-sanskrit{
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(216,170,69,.7);
  margin-bottom: 40px;
}
.gate-form{
  margin: 0 auto;
  max-width: 380px;
  position: relative;
}
.gate-input{
  width: 100%;
  padding: 18px 22px;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .12em;
  color: #f4e8c8;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(216,170,69,.35);
  border-radius: 0;
  outline: none;
  text-align: center;
  text-transform: lowercase;
  transition: border-color .3s ease, background .3s ease;
}
.gate-input::placeholder{color: rgba(244,232,200,.4); letter-spacing: .35em; text-transform: uppercase; font-size:11px}
.gate-input:focus{
  border-color: var(--gold-soft);
  background: rgba(255,255,255,.08);
}
.gate-form.error .gate-input{
  border-color: #c44;
  animation: shake .5s ease;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}
.gate-submit{
  margin-top: 18px;
  width: 100%;
  padding: 16px;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #0d0a06;
  background: linear-gradient(180deg, #e7c576, var(--gold-soft));
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease;
}
.gate-submit:hover{transform: translateY(-2px)}
.gate-error-msg{
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: #e89090;
  opacity: 0;
  transition: opacity .3s ease;
  height: 18px;
}
.gate-form.error .gate-error-msg{opacity: 1}
.gate-foot{
  margin-top: 50px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(244,232,200,.4);
}

/* ---------- 8. Hero ---------- */
.hero{
  position: relative;
  padding: clamp(120px, 16vw, 200px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
  isolation: isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(184,138,42,.08), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(217,122,35,.06), transparent 50%);
  z-index: -1;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.hero-content{position: relative}
.hero-content .eyebrow{margin-bottom: 32px}
.hero-title{
  font-family: var(--serif);
  font-size: clamp(54px, 8vw, 120px);
  line-height: .94;
  letter-spacing: -.018em;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 500;
}
.hero-title .accent{
  display: block;
  font-style: italic;
  font-size: .58em;
  color: var(--gold-deep);
  margin-top: 16px;
  letter-spacing: 0;
  font-weight: 400;
}
.hero-sub{
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-style: italic;
  color: var(--maroon-bronze);
  margin: 28px 0 18px;
}
.hero-lead{
  font-size: 17px;
  color: #4a3f2e;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 40px;
}
.hero-actions{display:flex; gap: 16px; flex-wrap: wrap}
.hero-image-wrap{
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sandstone);
  overflow: hidden;
}
.hero-image{
  position: absolute; inset:0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(1.05) contrast(1.02);
}
.hero-image-frame{
  position: absolute; inset: 12px;
  border: 1px solid rgba(246,239,225,.5);
  pointer-events: none;
  z-index: 2;
}
.hero-image-frame::before,
.hero-image-frame::after{
  content:""; position:absolute;
  width: 28px; height: 28px;
  border: 1px solid var(--gold-soft);
}
.hero-image-frame::before{top:-6px; left:-6px; border-right:0; border-bottom:0}
.hero-image-frame::after{bottom:-6px; right:-6px; border-left:0; border-top:0}

.hero-meta{
  position: absolute;
  bottom: -1px; left: -1px;
  background: var(--ink);
  color: var(--ivory);
  padding: 18px 24px;
  z-index: 3;
}
.hero-meta .num{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--gold-soft);
}
.hero-meta .label{
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  margin-top: 6px;
}

.hero-marquee{
  position: absolute;
  bottom: 30px; left: 0; right: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-marquee-inner{
  display: flex;
  animation: marquee 38s linear infinite;
  gap: 60px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: rgba(138,58,35,.18);
  white-space: nowrap;
  font-weight: 600;
}
@keyframes marquee{
  to{transform: translateX(-50%)}
}

@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr; gap: 50px}
  .hero-image-wrap{order: -1; aspect-ratio: 3/4; max-height: 70vh}
}

/* ---------- 9. Page hero (interior) ---------- */
.page-hero{
  position: relative;
  padding: clamp(140px, 18vw, 220px) 0 clamp(60px, 8vw, 100px);
  background: linear-gradient(180deg, var(--ivory-3) 0%, var(--ivory) 100%);
  overflow: hidden;
}
.page-hero::after{
  content:"";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line);
}
.page-hero-grid{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
}
.page-num{
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .4em;
  color: var(--gold);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-num::after{
  content:"";
  width: 1px; height: 80px;
  background: linear-gradient(180deg, transparent, var(--gold-soft), transparent);
}
.page-hero-title{
  font-family: var(--serif);
  font-size: clamp(46px, 7vw, 100px);
  line-height: .96;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.012em;
}
.page-hero-title em{
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.page-hero-sub{
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--maroon-bronze);
  margin-top: 18px;
  max-width: 600px;
}
.crumbs{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
}
.crumbs a{color: #6f5b34}
.crumbs a:hover{color: var(--maroon)}
.crumbs span{margin: 0 8px; opacity: .5}

@media (max-width: 760px){
  .page-hero-grid{grid-template-columns: 1fr; gap: 16px}
  .page-num{writing-mode: horizontal-tb; transform: none}
  .page-num::after{width: 60px; height: 1px; background: linear-gradient(90deg, var(--gold-soft), transparent)}
  .crumbs{text-align: left}
}

/* ---------- 10. Sacred Attributes Strip ---------- */
.attributes{
  background: var(--ink);
  color: var(--ivory);
  padding: 70px 0;
  border-top: 1px solid rgba(216,170,69,.2);
  border-bottom: 1px solid rgba(216,170,69,.2);
}
.attributes-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.attr{
  padding: 10px 30px;
  border-right: 1px solid rgba(216,170,69,.18);
  text-align: center;
}
.attr:last-child{border-right: 0}
.attr .num{
  font-family: var(--display);
  font-size: 38px;
  font-weight: 500;
  color: var(--gold-soft);
  display: block;
  line-height: 1;
}
.attr .num small{font-size: 18px; vertical-align: top; margin-left: 4px}
.attr .label{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(246,239,225,.7);
  margin-top: 14px;
  display: block;
}
.attr .desc{
  font-family: var(--serif);
  font-style: italic;
  color: rgba(246,239,225,.55);
  font-size: 13.5px;
  margin-top: 8px;
}
@media (max-width: 800px){
  .attributes-grid{grid-template-columns: repeat(2, 1fr)}
  .attr{padding: 30px 20px; border-right: 1px solid rgba(216,170,69,.18); border-bottom:1px solid rgba(216,170,69,.18)}
  .attr:nth-child(2n){border-right: 0}
  .attr:nth-last-child(-n+2){border-bottom: 0}
}

/* ---------- 11. Names Mosaic ---------- */
.names{
  position: relative;
  background: var(--ivory-3);
  padding: var(--section) 0;
  overflow: hidden;
}
.names-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.names-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.name-card{
  border: 1px solid var(--line);
  padding: 28px 26px;
  background: var(--ivory);
  position: relative;
  transition: transform .5s var(--ease-out), border-color .4s ease;
}
.name-card:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
}
.name-card .num{
  font-family: var(--display);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .3em;
}
.name-card .name{
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink);
  margin-top: 10px;
  font-weight: 500;
}
.name-card .meaning{
  font-family: var(--serif);
  font-style: italic;
  color: var(--maroon-bronze);
  font-size: 14.5px;
  margin-top: 6px;
}
@media (max-width: 800px){
  .names-grid{grid-template-columns: 1fr}
  .names-list{grid-template-columns: 1fr 1fr}
}
@media (max-width: 560px){
  .names-list{grid-template-columns: 1fr}
}

/* ---------- 12. Two-column feature blocks ---------- */
.feature{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.feature.flip .feature-image{order: 2}
.feature-image{
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  background: var(--sandstone);
}
.feature-image img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  transition: transform 1.2s var(--ease-out);
}
.feature-image:hover img{transform: scale(1.04)}
.feature-image .badge{
  position: absolute; top: 24px; left: 24px;
  padding: 8px 14px;
  background: var(--ivory);
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
}
.feature-content .eyebrow{margin-bottom: 24px}
.feature-content h2{margin-bottom: 24px}
.feature-content p + p{margin-top: 18px}
@media (max-width: 900px){
  .feature{grid-template-columns: 1fr}
  .feature.flip .feature-image{order: -1}
}

/* ---------- 13. Teachings Grid ---------- */
.principles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.principle{
  background: var(--ivory);
  padding: 50px 36px;
  position: relative;
  transition: background .45s var(--ease-out);
  min-height: 360px;
  display: flex; flex-direction: column;
}
.principle:hover{background: var(--ivory-3)}
.principle .icon{
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  margin-bottom: 28px;
  color: var(--gold-deep);
  transition: background .45s var(--ease-out), color .45s var(--ease-out);
}
.principle:hover .icon{background: var(--ink); color: var(--gold-soft); border-color: var(--ink)}
.principle .icon svg{width: 26px; height: 26px}
.principle .number{
  position: absolute; top: 32px; right: 36px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
}
.principle h3{
  font-family: var(--serif);
  font-size: 30px;
  margin-bottom: 6px;
}
.principle .skt{
  font-family: var(--serif);
  font-style: italic;
  color: var(--maroon-bronze);
  font-size: 14.5px;
  margin-bottom: 18px;
}
.principle p{
  color: #4a3f2e;
  font-size: 15.5px;
  line-height: 1.65;
}
@media (max-width: 900px){.principles{grid-template-columns: 1fr 1fr}}
@media (max-width: 600px){.principles{grid-template-columns: 1fr}}

/* ---------- 14. Timeline ---------- */
.timeline{
  position: relative;
  padding: 40px 0;
}
.timeline::before{
  content:"";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft), transparent);
}
.tline-item{
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 100px;
  position: relative;
}
.tline-item:last-child{margin-bottom: 0}
.tline-mark{
  width: 18px; height: 18px;
  background: var(--ivory);
  border: 1px solid var(--gold);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}
.tline-mark::after{
  content:""; position: absolute; inset: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.tline-card{
  padding: 36px;
  background: var(--ivory-3);
  border: 1px solid var(--line);
  position: relative;
}
.tline-item:nth-child(odd) .tline-card{grid-column: 1}
.tline-item:nth-child(even) .tline-card{grid-column: 3}
.tline-card .era{
  font-family: var(--display);
  font-size: 11px; letter-spacing: .3em; color: var(--gold);
}
.tline-card h3{
  font-family: var(--serif);
  font-size: 28px;
  margin: 8px 0 12px;
}
.tline-card p{font-size: 15px; color: #4a3f2e; line-height: 1.7}
.tline-img{
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sandstone);
}
.tline-img img{width:100%; height:100%; object-fit:cover; object-position: center top}
.tline-item:nth-child(odd) .tline-img{grid-column: 3}
.tline-item:nth-child(even) .tline-img{grid-column: 1}

@media (max-width: 800px){
  .timeline::before{left: 22px}
  .tline-item{grid-template-columns: 44px 1fr; gap: 20px; margin-bottom: 50px}
  .tline-mark{margin: 12px 0 0}
  .tline-card, .tline-img{grid-column: 2 !important}
  .tline-img{margin-top: 16px}
}

/* ---------- 15. Quote / Sutra Block ---------- */
.sutra{
  position: relative;
  padding: var(--section) 0;
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
}
.sutra::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(216,170,69,.08), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(184,138,42,.06), transparent 50%);
}
.sutra .container{position: relative}
.sutra .quote-mark{
  font-family: var(--serif);
  font-size: 140px;
  color: var(--gold-soft);
  line-height: .6;
  margin-bottom: 12px;
  opacity: .5;
}
.sutra blockquote{
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.32;
  font-weight: 400;
  font-style: italic;
  color: var(--ivory-3);
  max-width: 1080px;
}
.sutra blockquote em{color: var(--gold-soft); font-style: italic}
.sutra .attribution{
  margin-top: 36px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-soft);
  display: flex; align-items: center; gap: 18px;
}
.sutra .attribution::before{
  content:""; width: 36px; height: 1px; background: var(--gold-soft);
}

/* ---------- 16. Gallery ---------- */
.gallery-tabs{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 60px;
}
.gallery-tab{
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all .35s ease;
}
.gallery-tab.active{background: var(--ink); color: var(--ivory); border-color: var(--ink)}
.gallery-tab:hover{border-color: var(--gold)}

.masonry{
  columns: 3;
  column-gap: 24px;
}
.masonry-item{
  break-inside: avoid;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  background: var(--sandstone);
  cursor: pointer;
}
.masonry-item img{
  width: 100%; height: auto; display: block;
  transition: transform 1.2s var(--ease-out), filter .6s ease;
}
.masonry-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(24,19,13,.7));
  opacity: 0;
  transition: opacity .5s ease;
}
.masonry-item:hover img{transform: scale(1.05); filter: saturate(1.1)}
.masonry-item:hover::after{opacity: 1}
.masonry-item .caption{
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  z-index: 2;
  color: var(--ivory);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s ease;
}
.masonry-item:hover .caption{transform: translateY(0); opacity: 1}
.masonry-item .caption .tag{
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--gold-soft);
}
.masonry-item .caption .title{
  font-family: var(--serif);
  font-size: 22px;
  margin-top: 6px;
}
@media (max-width: 900px){.masonry{columns: 2}}
@media (max-width: 560px){.masonry{columns: 1}}

/* Lightbox */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(13,10,6,.94);
  z-index: 200;
  display: none;
  place-items: center;
  padding: 40px;
}
.lightbox.open{display: grid}
.lightbox img{
  max-width: 90vw; max-height: 86vh;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox-close{
  position: absolute; top: 24px; right: 24px;
  width: 50px; height: 50px;
  border: 1px solid var(--gold-soft);
  color: var(--ivory);
  font-size: 24px;
}

/* ---------- 17. Articles / Cards ---------- */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.card{
  background: var(--ivory-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .55s var(--ease-out), box-shadow .5s ease;
}
.card:hover{transform: translateY(-6px); box-shadow: var(--shadow-card)}
.card-img{
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sandstone);
}
.card-img img{
  width:100%; height:100%; object-fit:cover; object-position:center 25%;
  transition: transform 1s var(--ease-out);
}
.card:hover .card-img img{transform: scale(1.05)}
.card-body{padding: 32px 28px 36px; flex: 1; display:flex; flex-direction:column}
.card-meta{
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 14px;
}
.card-meta span{position: relative}
.card-meta span + span::before{
  content:""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--gold-soft);
}
.card h3{
  font-family: var(--serif);
  font-size: 24px;
  margin: 16px 0 10px;
  color: var(--ink);
  line-height: 1.2;
}
.card p{
  color: #4a3f2e;
  font-size: 15px;
  flex: 1;
  line-height: 1.65;
}
.card .read{
  margin-top: 22px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--maroon-bronze);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.card .read::after{
  content:"→";
  transition: transform .35s ease;
}
.card:hover .read::after{transform: translateX(4px)}
@media (max-width: 900px){.cards{grid-template-columns: 1fr 1fr}}
@media (max-width: 600px){.cards{grid-template-columns: 1fr}}

/* ---------- 18. Heritage / Map / Stats ---------- */
.heritage-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.heritage-list{
  display: flex; flex-direction: column;
}
.heritage-item{
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: center;
  position: relative;
  transition: padding .45s var(--ease-out);
}
.heritage-item:hover{padding-left: 18px}
.heritage-item:last-child{border-bottom: 1px solid var(--line)}
.heritage-item .h-num{
  font-family: var(--display);
  font-size: 36px;
  color: var(--gold-deep);
  font-weight: 500;
}
.heritage-item h4{
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 4px;
}
.heritage-item .meta{
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .3em;
  color: #6f5b34;
  text-transform: uppercase;
}
.heritage-item .arrow{
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background .35s ease, color .35s ease;
}
.heritage-item:hover .arrow{background: var(--ink); color: var(--ivory)}

@media (max-width: 800px){
  .heritage-grid{grid-template-columns: 1fr}
}

/* ---------- 19. Contact ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact-info{
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.contact-info::before{
  content:""; position:absolute;
  bottom: -100px; right: -100px;
  width: 400px; height: 400px;
  border: 1px solid rgba(216,170,69,.12);
  border-radius: 50%;
}
.contact-info::after{
  content:""; position:absolute;
  bottom: -180px; right: -180px;
  width: 540px; height: 540px;
  border: 1px solid rgba(216,170,69,.08);
  border-radius: 50%;
}
.contact-info .eyebrow{color: var(--gold-soft)}
.contact-info h2{color: var(--ivory); margin: 18px 0 30px}
.contact-info p{color: rgba(246,239,225,.7); margin-bottom: 36px; max-width: 420px}
.contact-link{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(216,170,69,.18);
  position: relative;
  transition: padding .35s ease;
}
.contact-link:last-child{border-bottom: 1px solid rgba(216,170,69,.18)}
.contact-link:hover{padding-left: 12px}
.contact-link .ic{
  width: 42px; height: 42px;
  border: 1px solid rgba(216,170,69,.4);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-soft);
  flex-shrink: 0;
}
.contact-link .ic svg{width: 18px; height: 18px}
.contact-link .label{
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(216,170,69,.7);
  display: block;
}
.contact-link .val{
  font-family: var(--serif);
  font-size: 19px;
  margin-top: 4px;
  color: var(--ivory);
}

.contact-form{
  background: var(--ivory-3);
  border: 1px solid var(--line);
  padding: clamp(32px, 4vw, 56px);
}
.form-row{display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px}
.field{position: relative}
.field label{
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.field input, .field textarea, .field select{
  width: 100%;
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  outline: none;
  transition: border-color .35s ease;
}
.field textarea{min-height: 120px; resize: vertical; padding: 14px 0}
.field input:focus, .field textarea:focus{border-color: var(--gold)}

@media (max-width: 800px){
  .contact-grid{grid-template-columns: 1fr}
  .form-row{grid-template-columns: 1fr}
}

/* ---------- 20. Footer ---------- */
.footer{
  background: #0d0a06;
  color: rgba(246,239,225,.7);
  padding: clamp(80px, 9vw, 120px) 0 40px;
  position: relative;
  overflow: hidden;
}
.footer::before{
  content:"";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 50px;
  margin-bottom: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(216,170,69,.12);
}
.footer-brand{max-width: 380px}
.footer-brand .brand{margin-bottom: 28px}
.footer-brand .brand-mark{border-color: var(--gold-soft)}
.footer-brand .brand-mark svg{color: var(--gold-soft)}
.footer-brand .brand-name{color: var(--ivory)}
.footer-brand .brand-sub{color: var(--gold-soft)}
.footer-brand p{
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(246,239,225,.55);
  line-height: 1.6;
}
.footer-col h5{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 600;
}
.footer-col a{
  display: block;
  font-size: 14px;
  color: rgba(246,239,225,.55);
  padding: 6px 0;
  transition: color .3s ease, padding .3s ease;
}
.footer-col a:hover{color: var(--gold-soft); padding-left: 6px}

.socials{display: flex; gap: 12px; margin-top: 24px}
.socials a{
  width: 38px; height: 38px;
  border: 1px solid rgba(216,170,69,.3);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(246,239,225,.7);
  padding: 0 !important;
  transition: all .35s ease;
}
.socials a:hover{
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  padding: 0 !important;
}
.socials a svg{width: 14px; height: 14px}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12.5px;
  color: rgba(246,239,225,.4);
  letter-spacing: .04em;
}
.footer-bottom a{color: var(--gold-soft); transition: color .3s ease}
.footer-bottom a:hover{color: var(--ivory)}
.footer-credit{
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
}
.footer-credit a{font-style: normal; font-family: var(--display); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; margin-left: 6px}

@media (max-width: 900px){
  .footer-top{grid-template-columns: 1fr 1fr; gap: 50px 30px}
}
@media (max-width: 560px){
  .footer-top{grid-template-columns: 1fr}
  .footer-bottom{flex-direction: column; align-items: flex-start}
}

/* ---------- 21. Reveal animations ---------- */
.reveal{opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal.in{opacity: 1; transform: translateY(0)}
.reveal-d2{transition-delay: .1s}
.reveal-d3{transition-delay: .2s}
.reveal-d4{transition-delay: .3s}

/* ---------- 22. Section Headings ---------- */
.section-head{
  text-align: center;
  margin-bottom: clamp(50px, 6vw, 80px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section-head .eyebrow{margin-bottom: 22px}
.section-head h2{margin-bottom: 18px}
.section-head p{color: #4a3f2e; font-size: 16.5px}

/* ---------- 23. Featured row (home) ---------- */
.feat-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feat-row .feat-tile{
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  background: var(--sandstone);
}
.feat-row .feat-tile img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  transition: transform 1s var(--ease-out);
}
.feat-row .feat-tile:hover img{transform: scale(1.06)}
.feat-row .feat-tile::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(13,10,6,.85));
}
.feat-row .feat-tile .lab{
  position: absolute;
  left: 24px; bottom: 24px;
  z-index: 2;
  color: var(--ivory);
}
.feat-row .feat-tile .lab .num{
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold-soft);
}
.feat-row .feat-tile .lab .ti{
  font-family: var(--serif);
  font-size: 22px;
  margin-top: 6px;
  display: block;
  line-height: 1.2;
}
@media (max-width: 800px){.feat-row{grid-template-columns: 1fr 1fr}}

/* ---------- 24. CTA banner ---------- */
.cta-banner{
  position: relative;
  background: var(--maroon);
  color: var(--ivory);
  padding: clamp(60px, 7vw, 100px) 0;
  overflow: hidden;
}
.cta-banner::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(216,170,69,.18), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(217,122,35,.14), transparent 50%);
}
.cta-banner .container{
  position: relative;
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: center;
}
.cta-banner h2{color: var(--ivory); font-size: clamp(30px, 4vw, 52px)}
.cta-banner .actions{display: flex; gap: 16px; justify-content: flex-end; flex-wrap: wrap}
@media (max-width: 760px){.cta-banner .container{grid-template-columns: 1fr; text-align:center}.cta-banner .actions{justify-content:flex-start}}

/* ---------- 25. About modules ---------- */
.module{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(60px, 8vw, 110px) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.module:first-child{border-top: 0}
.module .num-large{
  font-family: var(--display);
  font-size: clamp(80px, 12vw, 180px);
  font-weight: 400;
  line-height: 1;
  color: var(--ivory-2);
  margin-bottom: 12px;
}
.module h2{margin-bottom: 18px}
.module-image{
  position: relative;
  aspect-ratio: 5/6;
  overflow: hidden;
  background: var(--sandstone);
}
.module-image img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
}
.module-image .corner{
  position: absolute; inset: 12px;
  border: 1px solid rgba(246,239,225,.5);
}
.module.flip .module-image{order: 2}
@media (max-width: 800px){
  .module{grid-template-columns: 1fr}
  .module.flip .module-image{order: -1}
}

/* ---------- 26. Banner image ---------- */
.banner-image{
  position: relative;
  height: 70vh;
  min-height: 560px;
  overflow: hidden;
}
.banner-image img{
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.banner-image::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,10,6,.2) 0%, rgba(13,10,6,.7));
}
.banner-image .container{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 60px;
  z-index: 2;
}
.banner-image h2{
  color: var(--ivory);
  font-size: clamp(40px, 6vw, 80px);
  max-width: 900px;
}
.banner-image .desc{
  color: rgba(246,239,225,.85);
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  margin-top: 16px;
  max-width: 680px;
}

/* ---------- 27. Tirthankar list (heritage) ---------- */
.dynasty-tree{
  position: relative;
  padding: 40px 0;
}
.dy-row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.dy-row:last-child{border-bottom: 1px solid var(--line)}
.dy-row .y{
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--gold);
  width: 200px;
  padding-top: 10px;
}
.dy-row h3{
  font-family: var(--serif);
  font-size: 28px;
  margin-bottom: 8px;
}
.dy-row p{font-size: 15.5px; color: #4a3f2e}

@media (max-width: 700px){
  .dy-row{grid-template-columns: 1fr}
  .dy-row .y{width:auto; padding-top: 0}
}

/* ---------- 28. Misc utility ---------- */
.split-text{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
}
.split-text h2{
  font-size: clamp(36px, 5vw, 60px);
}
@media (max-width: 800px){.split-text{grid-template-columns: 1fr; gap: 30px}}

.bg-ivory-2{background: var(--ivory-2)}
.bg-ivory-3{background: var(--ivory-3)}
.bg-ink{background: var(--ink); color: var(--ivory)}
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4{color: var(--ivory)}

/* Print-safe */
@media print{ .site-header, .footer, .gate{display:none}}