/* ══════════════════════════════════════════════════════════════════
   shared/observatory.css — design system for every observatory page
   TRIIIKAAAL® · Tricolour / Revolutionary Edition
   Editorial restraint inspired by Mattis. Discipline by Tilak.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* paper-and-ink palette · austere, Mattis-grade */
  --paper:#F2EBDC;
  --paper-2:#E7DFCD;
  --paper-3:#FAF6E9;
  --ink:#0B0B0A;
  --ink-2:#1A1A18;
  --ink-mute:#6E6A60;
  --ink-soft:#9A9385;
  --rule:#15140F;
  --rule-soft:rgba(11,11,10,.14);

  /* indian tricolour, official */
  --saffron:#FF671F;
  --saffron-deep:#C84F18;
  --green:#046A38;
  --green-deep:#024922;
  --navy:#06038D;
  --navy-bright:#1D4ED8;
  --crimson:#9C1A1A;
  --blood:#7A0F0F;
  --rebel:#D8281C;

  /* dark cosmic (for cosmic-overlay sections) */
  --cosmos:#05060B;
  --cosmos-2:#0B0F1B;
  --gold:#E0BF60;
  --gold-deep:#C9A84C;

  /* type stacks */
  --display:'Instrument Serif', ui-serif, Georgia, serif;
  --sans:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --deva:'Tiro Devanagari Sanskrit','Tiro Devanagari Hindi', ui-serif, serif;
  --hindi:'Tiro Devanagari Hindi','Tiro Devanagari Sanskrit', ui-serif, serif;

  /* sacred-count spacing — 3·9·27·81·243·729 px only */
  --sp-3:3px;
  --sp-9:9px;
  --sp-27:27px;
  --sp-81:81px;
  --sp-243:243px;
  --sp-729:729px;

  --pad:32px;
  --content-max:1296px; /* 9 × 144 — Paramasāyika */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
html{scroll-behavior:auto}
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","ss02","kern";
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper-3)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Mattis grain overlay */
body::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1000;
  opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* type primitives */
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--ink-mute);font-weight:500}
.mono b{color:var(--ink);font-weight:500}
.mono-sm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:9.5px;color:var(--ink-mute);font-weight:500}
.deva{font-family:var(--deva);font-weight:400}
.hindi{font-family:var(--hindi);font-weight:400}
.display{font-family:var(--display);font-weight:400;letter-spacing:-.012em}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.012em}
h1{font-size:clamp(48px,7vw,108px);line-height:1.02}
h2{font-size:clamp(36px,5vw,72px);line-height:1.05}
h3{font-size:clamp(24px,3vw,40px);line-height:1.15}
h4{font-size:clamp(18px,2vw,24px);line-height:1.3}
p{margin:0}

/* layout helpers */
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--pad)}
.rule{height:1px;background:var(--rule-soft);width:100%;margin:var(--sp-27) 0}
.cosmic{background:var(--cosmos);color:var(--paper)}
.cosmic .mono{color:var(--gold)}
.cosmic h1,.cosmic h2,.cosmic h3,.cosmic h4{color:var(--paper-3)}

/* section primitive */
section{padding:clamp(48px, 8vh, 108px) 0;position:relative}
section.cosmic{padding:clamp(81px,12vh,162px) 0}

/* pull-quote */
.pinch{
  font-family:var(--display);font-style:italic;
  font-size:clamp(20px,2.4vw,32px);
  line-height:1.35;color:var(--ink);
  border-left:3px solid var(--rebel);
  padding:var(--sp-9) var(--sp-27);
  margin:var(--sp-27) 0;max-width:81ch;
}
.pinch em{color:var(--saffron-deep);font-style:normal;font-weight:500}
.pinch.cosmic{border-color:var(--gold);color:var(--paper)}

/* button (austere) */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 27px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--paper-3);
  border:1px solid var(--ink);border-radius:0;
  cursor:pointer;transition:transform .2s, background .2s;
}
.btn:hover{transform:translateY(-1px);background:var(--rebel);border-color:var(--rebel)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper-3)}
.btn.gold{background:var(--gold);color:var(--ink);border-color:var(--gold-deep)}
.btn.gold:hover{background:var(--gold-deep)}
.btn .arr{display:inline-block;transform:translateY(-1px)}

/* tag (derivation-tag pill) */
.dt-tag{
  display:inline-block;padding:2px 8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--paper-2);color:var(--ink-mute);
  border-radius:2px;margin:0 4px;
}
.dt-tag.gold{background:var(--gold);color:var(--ink)}
.dt-tag.rebel{background:var(--rebel);color:var(--paper-3)}

/* śloka block — closes every page */
.shloka{
  margin:var(--sp-81) auto var(--sp-27);
  max-width:54ch;text-align:center;
}
.shloka .deva{font-size:24px;line-height:1.5;color:var(--ink);display:block;margin-bottom:var(--sp-9)}
.shloka .gloss{font-family:var(--display);font-style:italic;color:var(--ink-mute);font-size:14px}

/* lift-on-view (used by motion.js) */
.lift{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.lift.in{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE · mobile-first observatory · full functionality
   ═══════════════════════════════════════════════════════════════ */

/* tablet · ≤960px */
@media (max-width:960px){
  :root{--pad:24px}
  h1{font-size:clamp(40px,7vw,84px);line-height:1.05}
  h2{font-size:clamp(32px,5.5vw,60px);line-height:1.08}
  section{padding:clamp(48px,7vh,84px) 0}
}

/* mobile · ≤640px */
@media (max-width:640px){
  :root{--pad:16px}
  body{font-size:16px;line-height:1.6} /* prevent iOS zoom on focus */

  h1{font-size:clamp(36px,9vw,56px);line-height:1.05;letter-spacing:-.01em}
  h2{font-size:clamp(28px,7vw,42px);line-height:1.1}
  h3{font-size:clamp(22px,5.5vw,30px);line-height:1.2}
  h4{font-size:clamp(18px,4.5vw,22px);line-height:1.3}

  section{padding:36px 0}
  .wrap{padding:0 16px}

  /* touch targets — Apple HIG minimum 44×44 */
  .btn,button.btn,a.btn,.cta,button[type="submit"]{
    min-height:48px;padding:14px 22px;
    font-size:13px;letter-spacing:.14em;
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* form controls — 16px minimum to prevent iOS zoom-on-focus */
  input,select,textarea{font-size:16px !important;min-height:48px;padding:12px 14px}

  /* pull-quote / pinch — shrink padding */
  .pinch{
    font-size:clamp(18px,5vw,24px);line-height:1.4;
    padding:9px 18px;border-left-width:2px;
  }

  /* shloka — keep readable */
  .shloka .deva{font-size:20px;line-height:1.55}
  .shloka .gloss{font-size:13px}

  /* dt-tag pills — keep clickable */
  .dt-tag{font-size:10px;padding:3px 9px;margin:2px 3px;display:inline-block}

  /* horizontal scroll guard */
  body{overflow-x:hidden}
  img,svg,canvas,iframe{max-width:100%;height:auto}
}

/* very small · ≤380px (iPhone SE etc.) */
@media (max-width:380px){
  h1{font-size:clamp(32px,9vw,44px)}
  h2{font-size:clamp(24px,7vw,32px)}
  .wrap{padding:0 12px}
}

/* dark-mode + reduced-motion respect (used by motion.js) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* still allow critical UX transitions to be perceivable */
  .btn,.cta{transition:background .15s !important}
}

/* battery / data saver hint */
@media (prefers-reduced-data: reduce){
  body::after{display:none} /* skip grain */
  canvas[data-decorative]{display:none}
}