/* ===========================================================
   DR. NISHA SHASTRY — DESIGN TOKENS
   Palette:
     --lavender:  #E7E0F5   soft lavender atmosphere
     --sky:       #DCEAF6   soft blue
     --blush:     #F6E2EA   pale pink
     --gold:      #C9A24B   warm gold accent
     --violet:    #B7A0DA   subtle violet
     --cyan:      #CFEDEA   whisper cyan
     --ink:       #221D2C   deep ink (text)
     --paper:     #FBF8F4   warm white (surfaces)
   Type:
     Display  — Cormorant Garamond (headings, name, calligraphic weight)
     Body     — EB Garamond (literary, highly readable serif)
   =========================================================== */

:root{
  --lavender:#E7E0F5;
  --sky:#DCEAF6;
  --blush:#F6E2EA;
  --gold:#C9A24B;
  --violet:#B7A0DA;
  --cyan:#CFEDEA;
  --ink:#221D2C;
  --ink-soft:#4A4359;
  --paper:#FBF8F4;

  --font-display:'Cormorant Garamond', serif;
  --font-body:'EB Garamond', serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.5s;
  --dur-med:1s;
  --dur-slow:1.6s;

  --nav-h:84px;

  /* ---------- Motion system ----------
     A small, centralized set of physical motion tokens. Everything that
     moves on this site should reach for one of these rather than an
     arbitrary duration. Two families:
       spring-settle  — default UI motion, critically damped, no overshoot
       spring-momentum— only for motion that inherited real velocity
     (pointer drag, scroll-linked release) — the only place a touch of
     overshoot is earned. */
  --spring-settle:cubic-bezier(.22,.61,.36,1);
  --spring-momentum:cubic-bezier(.34,1.42,.4,1);
  --t-instant:.12s;
  --t-fast:.32s;
  --t-standard:.55s;
  --t-slow:1s;
  --t-cinematic:1.6s;

  /* ---------- Depth / material scale ----------
     Nisha's world reads in three planes: ink (foreground text/UI),
     manuscript (midground imagery/cards), atmosphere (background field).
     Consistent z + perspective values keep depth coherent site-wide. */
  --z-cursor:9999;
  --z-nav:100;
  --z-foreground:10;
  --z-midground:4;
  --z-background:0;
  --perspective:1400px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;}
p{margin:0;}
::selection{background:var(--gold);color:var(--paper);}

/* Visible focus states */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ===========================================================
   UNIVERSE CANVAS — one persistent WebGL layer for the whole page
   (universe-camera.js). Painted above every section's CSS
   atmosphere/gradient (which stays each world's "lighting"), below
   all real content — see universe-camera.js header comment for the
   full stacking rationale. Fully transparent and inert until the
   module decides WebGL + motion are both available.
   =========================================================== */
#universeCanvas{
  position:fixed;
  inset:0;
  z-index:1;
  width:100%;height:100%;
  display:block;
  pointer-events:none;
}
/* Every top-level section must out-rank the canvas's z:1 explicitly —
   position:relative alone (z-index:auto) still loses to a positive
   z-index sibling in paint order, which would put particles on top of
   readable text. Their own backgrounds are transparent or (for
   .cinematic) an intentionally opaque gradient, so this only affects
   ordering, never hides the canvas where it should show through. */
main > section, .footer{position:relative;z-index:2;}

/* ===========================================================
   ATMOSPHERIC BACKGROUND — persistent, luminous, slow-moving
   z-index:0 (not -1): a negative z-index at this root stacking level
   would paint the gradient BEHIND the page's own body background
   rather than merely "further back" — invisible in practice, since
   it happened to be nearly the same color as the body here. Kept
   positive and explicit so it stays honestly beneath #universeCanvas
   (z:1) instead of relying on that coincidence.
   =========================================================== */
.atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:linear-gradient(180deg,#FDFBF8 0%,var(--sky) 35%,var(--lavender) 65%,var(--blush) 100%);
}
.atmosphere__field{
  position:absolute;
  width:70vw;
  height:70vw;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
}
.field-1{
  background:radial-gradient(circle,var(--violet),transparent 70%);
  top:-20%;
  left:-15%;
  animation:drift1 34s ease-in-out infinite;
}
.field-2{
  background:radial-gradient(circle,var(--gold),transparent 70%);
  bottom:-25%;
  right:-10%;
  opacity:.35;
  animation:drift2 40s ease-in-out infinite;
}
.field-3{
  background:radial-gradient(circle,var(--cyan),transparent 70%);
  top:30%;
  right:20%;
  opacity:.4;
  animation:drift3 46s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(6vw,8vh) scale(1.12);}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-5vw,-6vh) scale(1.08);}
}
@keyframes drift3{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-4vw,7vh) scale(1.15);}
}
.atmosphere__grain{
  position:absolute;inset:0;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ===========================================================
   NAVBAR
   =========================================================== */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),backdrop-filter var(--dur-fast) var(--ease);
}
.navbar.scrolled{
  background:rgba(251,248,244,.72);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(34,29,44,.06);
}
.navbar__inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  opacity:0;
  transform:translateY(-14px);
  animation:navIn .9s var(--ease) .35s forwards;
}
@keyframes navIn{to{opacity:1;transform:translateY(0);}}

.navbar__brand{
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(20px,2.1vw,26px);
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}

.navbar__links{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,30px);
}
.nav-link{
  position:relative;
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 1px;
  opacity:0;
  transform:translateY(-8px);
  animation:navLinkIn .6s var(--ease) forwards;
  white-space:nowrap;
}
.navbar__links .nav-link:nth-child(1){animation-delay:.55s}
.navbar__links .nav-link:nth-child(2){animation-delay:.62s}
.navbar__links .nav-link:nth-child(3){animation-delay:.69s}
.navbar__links .nav-link:nth-child(4){animation-delay:.76s}
.navbar__links .nav-link:nth-child(5){animation-delay:.83s}
.navbar__links .nav-link:nth-child(6){animation-delay:.90s}
.navbar__links .nav-link:nth-child(7){animation-delay:.97s}
.navbar__links .nav-link:nth-child(8){animation-delay:1.04s}
@keyframes navLinkIn{to{opacity:1;transform:translateY(0);}}

.nav-link::after{
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:100%;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-link:hover::after,.nav-link.active-link::after{transform:scaleX(1);}
.nav-link.active-link{color:var(--ink);}

.navbar__toggle{
  display:none;
  width:30px;height:22px;
  position:relative;
  background:none;border:none;
  cursor:pointer;
  padding:0;
}
.navbar__toggle span{
  position:absolute;left:0;right:0;height:1.5px;
  background:var(--ink);
  transition:transform .35s var(--ease),opacity .35s var(--ease),top .35s var(--ease);
}
.navbar__toggle span:nth-child(1){top:0;}
.navbar__toggle span:nth-child(2){top:10px;}
.navbar__toggle span:nth-child(3){top:20px;}
.navbar__toggle[aria-expanded="true"] span:nth-child(1){top:10px;transform:rotate(45deg);}
.navbar__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navbar__toggle[aria-expanded="true"] span:nth-child(3){top:10px;transform:rotate(-45deg);}

.mobile-menu{
  position:fixed;
  top:var(--nav-h);left:0;right:0;
  max-height:0;
  overflow:hidden;
  background:rgba(251,248,244,.97);
  backdrop-filter:blur(16px);
  transition:max-height .5s var(--ease);
}
.mobile-menu.open{max-height:80vh;}
.mobile-menu__links{
  display:flex;
  flex-direction:column;
  padding:12px clamp(20px,6vw,56px) 30px;
}
.mobile-menu__links a{
  font-family:var(--font-display);
  font-size:20px;
  padding:14px 0;
  border-bottom:1px solid rgba(34,29,44,.08);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.mobile-menu.open .mobile-menu__links a{opacity:1;transform:translateY(0);}
.mobile-menu.open .mobile-menu__links a:nth-child(1){transition-delay:.05s}
.mobile-menu.open .mobile-menu__links a:nth-child(2){transition-delay:.10s}
.mobile-menu.open .mobile-menu__links a:nth-child(3){transition-delay:.15s}
.mobile-menu.open .mobile-menu__links a:nth-child(4){transition-delay:.20s}
.mobile-menu.open .mobile-menu__links a:nth-child(5){transition-delay:.25s}
.mobile-menu.open .mobile-menu__links a:nth-child(6){transition-delay:.30s}
.mobile-menu.open .mobile-menu__links a:nth-child(7){transition-delay:.35s}
.mobile-menu.open .mobile-menu__links a:nth-child(8){transition-delay:.40s}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--nav-h) + 40px) clamp(20px,5vw,72px) 60px;
  max-width:1400px;
  margin:0 auto;
  position:relative;
}
.hero__inner{
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.hero__image-col{
  opacity:0;
  transform:translateY(24px) scale(.95);
  filter:blur(6px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);
}
.hero__image-col.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}

.hero__image-frame{
  position:relative;
  border-radius:14px 60px 14px 60px;
  overflow:hidden;
  aspect-ratio:4/5;
  isolation:isolate;
}
.hero__image{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.hero__image-glow{
  position:absolute;inset:-30px;
  z-index:-1;
  background:radial-gradient(circle,rgba(201,162,75,.35),transparent 65%);
  filter:blur(30px);
}

.hero__text-col{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.hero__para{
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--ink-soft);
  max-width:56ch;
  opacity:0;
  transform:translateY(18px);
  filter:blur(3px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
.hero__para.in{opacity:1;transform:translateY(0);filter:blur(0);}
.hero__para--closing{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(20px,1.6vw,26px);
  color:var(--ink);
  margin-top:6px;
}

.scroll-cue{
  position:absolute;
  bottom:28px;left:50%;
  transform:translateX(-50%);
  width:22px;height:36px;
  border:1.5px solid rgba(34,29,44,.35);
  border-radius:12px;
}
.scroll-cue span{
  position:absolute;
  top:6px;left:50%;
  width:3px;height:8px;
  margin-left:-1.5px;
  border-radius:2px;
  background:var(--gold);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%{opacity:1;top:6px;}80%{opacity:0;top:18px;}100%{opacity:0;top:6px;}}

/* ===========================================================
   SECTION HEADINGS (shared)
   =========================================================== */
.section-heading{
  text-align:center;
  font-size:clamp(38px,6vw,68px);
  font-style:italic;
  letter-spacing:-0.015em;
  opacity:0;
  filter:blur(8px);
  transform:translateY(26px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease);
}
.section-heading.in{opacity:1;filter:blur(0);transform:translateY(0);}
.section-heading--small{font-size:clamp(28px,4vw,42px);}

/* ===========================================================
   VISION
   =========================================================== */
.vision{
  padding:140px clamp(20px,6vw,72px);
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.vision__text{
  margin-top:34px;
  font-size:clamp(18px,2vw,24px);
  font-style:italic;
  line-height:1.85;
  color:var(--ink-soft);
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1s var(--ease) .15s,transform 1s var(--ease) .15s;
}
.vision__text.in{opacity:1;transform:translateY(0);}

/* ===========================================================
   AWARDS
   =========================================================== */
.awards{
  padding:100px clamp(20px,6vw,72px) 60px;
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:56px;
}
.awards{perspective:var(--perspective);}
.award-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  min-height:360px;
  display:flex;
  align-items:flex-end;
  padding:44px clamp(24px,4vw,56px);
  isolation:isolate;
  opacity:0;
  transform:translateY(60px) translateZ(-120px) rotateX(6deg) scale(.96);
  transition:opacity 1s var(--spring-settle),transform 1s var(--spring-settle);
  margin-top:40px;
  transform-style:preserve-3d;
}
.award-card:first-child{margin-top:0;}
.award-card.in{opacity:1;transform:translateY(0) translateZ(0) rotateX(0) scale(1);}

.award-card__bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  transition:transform .8s var(--ease);
  z-index:-3;
}
.award-card:hover .award-card__bg{transform:scale(1.08);}
.award-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,29,44,.05) 0%,rgba(34,29,44,.78) 88%);
  z-index:-2;
}
.award-card__glow{
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.5px;
  z-index:-1;
  background:linear-gradient(120deg,rgba(201,162,75,.75),rgba(183,160,218,.4),rgba(201,162,75,.75));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.6;
  transition:opacity .5s var(--ease);
  animation:glowPulse 5s ease-in-out infinite;
}
.award-card:hover .award-card__glow{opacity:1;}
@keyframes glowPulse{0%,100%{opacity:.45;}50%{opacity:.75;}}

.award-card:hover{transform:translateY(-6px) scale(1);box-shadow:0 30px 60px -20px rgba(34,29,44,.35);}
.award-card.in:hover{transform:translateY(-6px);}

.award-card__content{color:var(--paper);max-width:640px;}
.award-card__title{
  font-size:clamp(22px,2.6vw,32px);
  font-style:italic;
  margin-bottom:14px;
}
.award-card__text{
  font-size:clamp(14.5px,1.2vw,17px);
  line-height:1.75;
  color:rgba(251,248,244,.88);
}

/* ===========================================================
   PRESS / FEATURED LINK CARDS
   =========================================================== */
.press{
  padding:60px clamp(20px,6vw,72px) 120px;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  perspective:var(--perspective);
}
.press-card{
  position:relative;
  display:block;
  border-radius:20px;
  overflow:hidden;
  min-height:280px;
  padding:32px;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  opacity:0;
  transform:translateY(50px) translateZ(-100px) rotateX(5deg);
  transition:opacity .95s var(--spring-settle),transform .95s var(--spring-settle),box-shadow .4s var(--ease);
  transform-style:preserve-3d;
}
.press-card.in{opacity:1;transform:translateY(0) translateZ(0) rotateX(0);}
.press-card__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform .8s var(--ease);
  z-index:-3;
}
.press-card:hover .press-card__bg{transform:scale(1.08);}
.press-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,29,44,.05) 0%,rgba(34,29,44,.8) 90%);
  z-index:-2;
}
.press-card__glow{
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:linear-gradient(120deg,rgba(201,162,75,.7),rgba(207,237,234,.35),rgba(201,162,75,.7));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;
}
.press-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -18px rgba(34,29,44,.32);}
.press-card:hover .press-card__glow{opacity:.95;}
.press-card__content{color:var(--paper);}
.press-card__title{font-size:clamp(20px,2vw,26px);font-style:italic;margin-bottom:10px;}
.press-card__link{
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:.03em;
  color:var(--gold);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.press-card:hover .press-card__link{border-color:var(--gold);}

/* ===========================================================
   CINEMATIC CIRCLE TRANSFORMATION
   =========================================================== */
.cinematic{
  position:relative;
  height:340vh;
  background:linear-gradient(180deg,#120C1C 0%,#180F24 40%,#0E0A16 100%);
  isolation:isolate;
}
/* soft seam where the light homepage atmosphere meets this section's
   night sky — echoes the same device used between the dark universe
   sections further down the page */
.cinematic::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:160px;
  background:linear-gradient(180deg,rgba(251,248,244,.55),transparent);
  z-index:1;
  pointer-events:none;
}
.cinematic__sticky{
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#cosmicCanvas{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
}
.cinematic__image-wrap{
  position:absolute;
  top:50%;left:50%;
  width:100vw;
  height:100svh;
  transform:translate(-50%,-50%);
  border-radius:0;
  overflow:hidden;
  box-shadow:0 0 0 0 rgba(201,162,75,0);
  transition:box-shadow .6s var(--ease);
  z-index:1;
}
.cinematic__image{
  width:100%;height:100%;
  object-fit:cover;
}
.cinematic__heading{
  position:relative;
  z-index:2;
  margin-top:36px;
  text-align:center;
  font-size:clamp(30px,4.4vw,54px);
  font-style:italic;
  color:var(--paper);
  text-shadow:0 2px 40px rgba(201,162,75,.35);
  opacity:0;
  filter:blur(10px);
  transform:translateY(24px);
  transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease);
  padding:0 20px;
}
.cinematic__heading.in{opacity:1;filter:blur(0);transform:translateY(0);}
.cinematic__spacer{height:1px;}

/* floating idle animation once settled */
.cinematic__image-wrap.settled{animation:floatCircle 6s ease-in-out infinite;}
@keyframes floatCircle{0%,100%{margin-top:0;}50%{margin-top:-10px;}}

/* ===========================================================
   STUB SECTIONS (future pages)
   =========================================================== */
.stub{
  min-height:50vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:60px 20px;
  border-top:1px solid rgba(34,29,44,.07);
}
.stub__link a{
  font-size:15px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  border-bottom:1px solid var(--gold);
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{
  text-align:center;
  padding:34px 20px 44px;
  font-size:13px;
  letter-spacing:.03em;
  color:var(--ink-soft);
  border-top:1px solid rgba(34,29,44,.07);
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .navbar__links{display:none;}
  .navbar__toggle{display:block;}
  .hero__inner{grid-template-columns:1fr;}
  .hero__image-frame{aspect-ratio:5/4;}
  .press{grid-template-columns:1fr;}
  .awards{gap:34px;}
}

@media (max-width:560px){
  :root{--nav-h:70px;}
  .navbar__brand{font-size:19px;}
  .hero{padding-top:calc(var(--nav-h) + 24px);}
  .award-card{min-height:auto;padding:30px 22px;}
  .vision{padding:90px 20px;}
}

/* ===========================================================
   THE RIBBON — signature motif.
   A slim gold reading-ribbon (bookmark thread) fixed to the right
   edge, filling as the visitor reads down through Nisha's worlds —
   literary rather than a generic "progress bar." Doubles as a
   position/wayfinding cue (Part 26: users should always know where
   they are). Desktop/tablet only; hidden on touch-narrow screens
   where it would just eat thumb space.
   =========================================================== */
.ribbon{
  position:fixed;
  top:0;right:14px;bottom:0;
  width:2px;
  z-index:99;
  pointer-events:none;
  background:rgba(34,29,44,.08);
}
.ribbon__fill{
  position:absolute;
  top:0;left:0;right:0;
  height:0%;
  /* colors are overridden per-world by universe-camera.js (via
     signature.js) as the visitor travels between chapters — see
     "Ribbon as world navigator". Falls back to the original gold/
     violet pairing when no world system is running (reduced motion,
     no WebGL). */
  background:linear-gradient(180deg,var(--ribbon-c1,var(--gold)),var(--ribbon-c2,var(--violet)));
  transform-origin:top;
  box-shadow:0 0 12px rgba(201,162,75,.5);
  transition:background 1.4s var(--spring-settle);
}
.ribbon__mark{
  position:absolute;
  left:50%;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px rgba(201,162,75,.7);
  transform:translate(-50%,-50%);
  top:0%;
}
@media (max-width:900px){ .ribbon{display:none;} }
@media (prefers-reduced-motion: reduce){
  .ribbon__fill,.ribbon__mark{transition:none !important;}
}

/* ===========================================================
   THE INK CURSOR — signature motif.
   A small dot that behaves like a nib of ink: it sits precisely at
   the pointer (no laggy trailing double-cursor cliche), and blooms
   into a soft gold ring when hovering anything interactive —
   "light catching gold leaf," echoing the ink-glow already used on
   cards (universe.css). Fine-pointer desktop only; the OS cursor is
   never hidden on touch or reduced-motion.
   =========================================================== */
.ink-cursor{
  position:fixed;
  top:0;left:0;
  width:0;height:0;
  z-index:var(--z-cursor);
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.ink-cursor__dot{
  position:absolute;top:0;left:0;
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:var(--ink);
}
.ink-cursor__ring{
  position:absolute;top:0;left:0;
  width:34px;height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1px solid var(--gold);
  opacity:0;
  transform:scale(.6);
  transition:opacity .25s var(--spring-settle),transform .3s var(--spring-settle);
}
.ink-cursor.is-active .ink-cursor__ring{opacity:.85;transform:scale(1);}
.ink-cursor.is-active .ink-cursor__dot{background:var(--gold);}
html.has-ink-cursor,html.has-ink-cursor a,html.has-ink-cursor button{cursor:none;}
@media (hover:none),(pointer:coarse){
  .ink-cursor{display:none;}
}

/* ===========================================================
   REDUCED TRANSPARENCY — frost the glass instead of removing depth
   =========================================================== */
@media (prefers-reduced-transparency: reduce){
  .navbar.scrolled{background:rgba(251,248,244,.97);backdrop-filter:none;}
  .mobile-menu{background:rgba(251,248,244,1);backdrop-filter:none;}
  .award-card__overlay{background:rgba(34,29,44,.92);}
  .press-card__overlay{background:rgba(34,29,44,.92);}
  .ink-glow{display:none;}
}

/* ===========================================================
   INCREASED CONTRAST
   =========================================================== */
@media (prefers-contrast: more){
  .nav-link{color:var(--ink);}
  .award-card__glow,.press-card__glow,.work-figure__glow{opacity:.95;}
  .ribbon{background:rgba(34,29,44,.25);}
}

/* ===========================================================
   REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .ribbon__fill,.ink-cursor{display:none;}
  .atmosphere__field{animation:none;}
  .navbar__inner,.nav-link,.mobile-menu__links a{animation:none !important;opacity:1 !important;transform:none !important;}
  .hero__image-col,.hero__para,.section-heading,.vision__text,.award-card,.press-card,.cinematic__heading{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .scroll-cue span{animation:none;}
  .award-card__glow{animation:none;}
  .cinematic__image-wrap.settled{animation:none;}
}