@font-face {font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face {font-family:Jost;src:url(fonts/jost.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face {font-family:"Noto Sans Malayalam";src:url(fonts/noto-sans-malayalam.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face {font-family:"Noto Sans Devanagari";src:url(fonts/noto-sans-devanagari.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face {font-family:"Noto Sans Tamil";src:url(fonts/noto-sans-tamil.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face {font-family:"Noto Sans Kannada";src:url(fonts/noto-sans-kannada.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root {
  color-scheme: dark;
  --bg: #090b10;
  --surface: #14161b;
  --text: #f2ede3;
  --muted: #aaa69f;
  --accent: #c5ab7a;
  --on-light: #8a6e3e;
  --rule: #333437;
  font: 100%/1.55 Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
* {box-sizing: border-box}
body {margin: 0}
.wrap {width: min(680px, calc(100% - 40px)); margin-inline: auto}
a {color: inherit; text-underline-offset: .23em}
a:hover {color: var(--accent)}
a:focus-visible {outline: 2px solid var(--accent); outline-offset: 4px}
.skip {position:absolute; left: 12px; top: -7rem; z-index: 10; background: var(--surface); padding: .75rem}
.skip:focus {top: 12px}
h1, h2, p {margin: 0}
h1, .topic h2, .directory h2, .archive-list h2 {font-family: Inter, system-ui, sans-serif; font-weight: 500}
.masthead {border-bottom: 1px solid var(--rule)}
.bar {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 65px; padding-block: 8px}
.wordmark {font: 500 clamp(1.2rem, 4.8vw, 1.55rem)/1.2 Jost, sans-serif; letter-spacing: -.035em; text-decoration: none}
.wordmark span {font-weight: 300}
.switches {display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px}
.switches a {font-size: .75rem; text-decoration: none; padding-block: 9px; color: var(--muted)}
.switches a[lang=ml] {font-family: "Noto Sans Malayalam", sans-serif}
.switches a[lang=hi] {font-family: "Noto Sans Devanagari", sans-serif}
.switches a[lang=ta] {font-family: "Noto Sans Tamil", sans-serif}
.switches a[lang=kn] {font-family: "Noto Sans Kannada", sans-serif}
.switches a[aria-current] {color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px}
.backline {display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-block: 14px; font-size: .76rem; color: var(--muted)}
.backline a {padding-block: 5px; text-decoration: none}
.backline span {margin-right: 4px}
.edition {font-variant-numeric: tabular-nums; letter-spacing: .07em}
.hero {position: relative; isolation: isolate; border-block: 1px solid #484239; background: #121419}
.hero-copy {position: relative; z-index: 1; padding: 30px 18px 27px}
.eyebrow, .section-label, .basis h2, .reflection h2 {font: 600 .64rem/1.6 Inter, sans-serif; letter-spacing: .15em; text-transform: uppercase}
.eyebrow {color: var(--accent)}
.hero h1 {font-weight: 350; font-size: clamp(3.05rem, 11.5vw, 5.5rem); line-height: 1.13; letter-spacing: -.055em; margin: 10px 0 11px}
.period {font-size: .83rem; font-weight: 450; color: var(--text); font-variant-numeric: tabular-nums}
.period span {color: var(--muted); padding-left: 2px}
.reading-hero .orbit-map {height: clamp(120px, 25vw, 175px)}
.reading-hero .rashi-note {margin-top: .6rem; font-size: .96875rem; line-height: 1.85; color: var(--muted)}
.orbit-map {position: absolute; z-index: 0; inset: 0 0 0 auto; width: 48%; overflow: hidden; pointer-events: none; opacity: .92; mask-image: linear-gradient(90deg, transparent, black 38%)}
.orbit {position: absolute; border: 1px solid #5b5448; width: 205%; height: 83%; border-radius: 50%; top: -1%; left: -19%; transform: rotate(-33deg)}
.o2 {width: 175%; height: 62%; top: 16%; left: -7%; border-color: #82725b}
.o3 {width: 145%; height: 43%; top: 29%; left: 6%; border-color: #504b41}
.meridian, .axis {position: absolute; left: 48%; top: -50%; width: 1px; height: 210%; background: #403f3a; transform: rotate(34deg)}
.axis {left: 74%; transform: rotate(-62deg)}
.planet {position: absolute; top: 28%; right: 18%; width: clamp(14px, 3.2vw, 25px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #a88f63; background: radial-gradient(circle at 22% 18%, #d4bd91 0%, #968463 44%, #2e2c27 85%)}
.stars {position: absolute; right: 37%; top: 25%; width: 2px; height: 2px; border-radius: 100%; background: #aea48f; box-shadow: 2.25rem 4.5rem #c4b6a0, -2.625rem 2rem #807768, -1.5rem 6.5rem #a79980, 3.5rem -1rem #7c786d, .5rem 5rem #938978}
.reading {padding-block-start: 30px}
.section-label {display: flex; align-items: center; gap: 10px; color: var(--accent)}
.mock {border: 1px solid #6c6252; border-radius: 3px; padding: 1px 5px; font: 600 .59rem/1.5 Inter, sans-serif; letter-spacing: .09em; color: var(--text)}
.story-title {font-size: clamp(1.55rem, 4.5vw, 2.17rem); letter-spacing: -.035em; font-weight: 500; line-height: 1.3; margin-block: 11px}
.copy {font-family: Inter, var(--reading-font), sans-serif; overflow-wrap: break-word}
.story-title:not(:lang(en)) {font-size: clamp(1.42rem, 4.5vw, 2rem); line-height: 1.65; letter-spacing: 0}
p.copy {font-size: 1rem; line-height: 1.9}
.contents {display: flex; flex-wrap: wrap; gap: 4px 18px; border-block: 1px solid var(--rule); padding-block: 9px; margin-block: 24px 0}
.contents a {font-size: .8rem; color: var(--accent); text-decoration: none; padding-block: 5px}
.contents a:hover, .backline a:hover, .page-footer a:hover, .sign-grid a:hover strong {text-decoration: underline}
.topic {padding-block: 22px 23px; border-bottom: 1px solid var(--rule); scroll-margin-top: 1rem}
.topic h2, .directory h2, .archive-list h2 {font-size: 1.65rem; letter-spacing: -.035em; line-height: 1.3; margin-bottom: 10px}
.reflection {padding: 22px; background: var(--surface); border-left: 2px solid var(--accent); margin-block: 28px}
.reflection h2, .basis h2 {color: var(--accent); margin-bottom: .6rem}
.reflection p + h2 {margin-top: 1.25rem}
.basis p + p {margin-top: .5rem}
.basis p {color: var(--muted)}
.archive-list {margin-top: 24px; display: grid; justify-items: start; gap: 8px}
.page-footer {border-top: 1px solid var(--rule); padding-block: 24px 36px; margin-top: 40px; color: var(--muted)}
.page-footer nav {display: flex; flex-wrap: wrap; gap: 24px}
.page-footer a {font-size: .85rem; text-decoration: none}
.page-footer p.copy {font-size: .8rem; margin-top: 14px; line-height: 1.85}
.grid-hero {margin-top: 30px}
.grid-hero h1 {font-size: clamp(2.75rem, 10vw, 4.3rem)}
.grid-hero .orbit-map {width: 36%}
.intro, .info p {font-size: 1rem; line-height: 1.85; margin-top: 20px}
.directory, .info {margin-top: 32px}
.sign-grid {display: grid; grid-template-columns: 1fr 1fr; list-style: none; gap: 0 20px; padding: 0; margin: 16px 0}
.sign-grid li {border-top: 1px solid var(--rule); min-width: 0}
.sign-grid li > * {display: grid; align-content: center; min-height: 77px; position: relative; text-decoration: none}
.sign-grid strong {font: 500 1.2rem/1.25 Inter, sans-serif; margin-bottom: 3px}
.sign-grid small {color: var(--muted); font-size: .72rem}
.sign-grid span {position: absolute; right: 0; top: 1.3rem; color: var(--accent)}
.info h1 {font-size: 3rem; line-height: 1.2}
@media (min-width: 600px) {
  .bar {min-height: 76px}
  .backline {margin-block: 19px}
  .hero-copy {padding: 35px 30px 32px}
  .eyebrow {font-size: .68rem}
  .reading {padding-top: 38px}
  .sign-grid {grid-template-columns: repeat(3, 1fr)}
  .topic {padding-block: 30px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {scroll-behavior: auto !important}
}

.directory-heading {display: flex; align-items: baseline; gap: 12px}