@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

:root {
  --paper:#f7f3eb;
  --surface:#fffdfa;
  --ink:#103451;
  --text:#1b2c3b;
  --muted:#66798a;
  --line:#d6dfe5;
  --accent:#67b8f3;
  --accent-strong:#368dce;
  --warm:#a0432b;
  --blue-stripe:#78c4ef;
  --max:76rem;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--text);
  font:400 17px/1.58 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--accent-strong); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.wrap { width:min(calc(100% - 2.5rem), var(--max)); margin-inline:auto; }

.top {
  border-bottom:1px solid var(--line);
  padding:.82rem 0;
  background:rgba(255,253,250,.92);
}
.top .wrap { display:flex; gap:1.5rem; justify-content:space-between; align-items:center; }
.brand {
  display:flex;
  align-items:center;
  gap:1rem;
  color:var(--muted);
  font:500 .88rem/1.08 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  letter-spacing:.035em;
  text-decoration:none;
  white-space:nowrap;
}
.brand::before {
  content:"(MoH)";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:5.4rem;
  padding:.6rem .9rem;
  background:var(--ink);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
}
.brand br {
  display:inline-block;
  width:.42em;
  height:0;
  content:"";
}
.nav { display:flex; gap:.68rem 1rem; flex-wrap:wrap; justify-content:flex-end; align-items:center; font-size:.81rem; }
.nav a { text-decoration:none; font-weight:500; }

.hero {
  padding:clamp(2.7rem,4.1vw,3.4rem) 0 clamp(2.05rem,3vw,2.55rem);
  border-bottom:1px solid var(--line);
}
.hero + section { padding-top:clamp(2.65rem,4.6vw,4rem); }
.hero .wrap, .pagehead .wrap {
  border-left:clamp(.56rem,.82vw,.72rem) solid var(--blue-stripe);
  padding-left:clamp(1.45rem,2.8vw,2.25rem);
}
.hero-lockup {
  display:inline-grid;
  grid-template-columns:max-content;
  max-width:100%;
  align-items:start;
}
.hero-lockup > * { grid-column:1; }
.mark {
  margin:.1rem 0 1.5rem;
  color:var(--ink);
  font:400 clamp(1rem,1.85vw,1.28rem)/1.25 "IBM Plex Mono","IBM Plex Sans",monospace;
  letter-spacing:.1em;
}
.hero-lockup .mark {
  justify-self:stretch;
  width:auto;
  text-align:center;
}
.eyebrow {
  display:block;
  justify-self:start;
  margin:0 0 1rem;
  color:var(--accent-strong);
  font:500 .75rem/1.3 "IBM Plex Mono","IBM Plex Sans",monospace;
  letter-spacing:.115em;
  text-transform:uppercase;
}
.academy-plaque {
  margin:0 0 1.4rem;
  color:var(--ink);
  font:500 .73rem/1.35 "IBM Plex Mono","IBM Plex Sans",monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}

h1,h2,h3 {
  color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  margin:0 0 1rem;
}
h1 { font-size:clamp(2.65rem,5.55vw,5.2rem); font-weight:600; line-height:1; letter-spacing:-.012em; max-width:15ch; }
h2 { font-size:clamp(1.85rem,3.9vw,3.25rem); font-weight:600; line-height:1.05; letter-spacing:-.018em; max-width:22ch; }
h3 { font-size:1.36rem; font-weight:600; line-height:1.15; letter-spacing:-.006em; }
.lede {
  width:min(100%,48rem);
  margin:1.55rem 0 0;
  color:var(--muted);
  font:300 clamp(1.2rem,1.9vw,1.47rem)/1.45 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
}
.lede-line { display:block; white-space:nowrap; }
.hero .wrap > .lede + p {
  max-width:44rem;
  margin:1.18rem 0 0;
  font-size:.97rem;
  line-height:1.5;
}

.display-wordmark {
  display:grid;
  grid-template-columns:max-content;
  width:max-content;
  max-width:100%;
  margin-top:.22rem;
  text-transform:uppercase;
  font-size:clamp(2.85rem,6.05vw,5.65rem);
  font-weight:500;
  line-height:.94;
  letter-spacing:.012em;
  font-kerning:normal;
}
.wordmark-main {
  grid-column:1;
  grid-row:1;
  display:block;
  white-space:nowrap;
  letter-spacing:.018em;
}
.wordmark-sub {
  grid-column:1;
  grid-row:2;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  justify-self:stretch;
  gap:.11em;
  width:auto;
  margin-top:.11em;
  padding-left:0;
  font-size:.66em;
  line-height:.98;
  letter-spacing:.022em;
  white-space:nowrap;
}
.wordmark-of {
  display:inline-block;
  color:var(--muted);
  font:400 1.04em/1 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  letter-spacing:.005em;
  text-transform:lowercase;
  transform:none;
}

.actions { display:flex; flex-wrap:wrap; gap:.72rem; margin-top:1.72rem; }
.button {
  display:inline-block;
  border:1px solid var(--ink);
  padding:.74rem 1.02rem;
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  font-family:inherit;
  font-weight:600;
  font-size:.9rem;
  line-height:1.2;
  cursor:pointer;
  border-radius:0;
}
.button.primary { background:var(--ink); color:#fff; }
.button:hover { border-color:var(--accent-strong); color:var(--accent-strong); }
.button.primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; }

section { padding:clamp(3.4rem,6.5vw,5.9rem) 0; border-bottom:1px solid var(--line); }
.grid { display:grid; gap:1.25rem; grid-template-columns:repeat(12,1fr); }
.copy { grid-column:span 7; max-width:46rem; }
.aside { grid-column:9 / span 4; align-self:start; color:var(--muted); font-size:.93rem; border-top:3px solid var(--blue-stripe); padding-top:1rem; }
.cards { display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); margin-top:2rem; }
.card {
  padding:1.3rem;
  min-height:14rem;
  border:1px solid var(--line);
  border-top:3px solid var(--blue-stripe);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:rgba(255,253,250,.72);
}
.card p { color:var(--muted); margin:.4rem 0 1rem; }
.constellation { display:flex; flex-wrap:wrap; gap:.5rem; padding:1.4rem; margin-top:2rem; border:1px solid var(--line); font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif; }
.constellation span { border:1px solid var(--line); padding:.45rem .6rem; }

.pagehead { padding:clamp(3.4rem,6vw,5.2rem) 0 2.9rem; border-bottom:1px solid var(--line); }
.prose { width:min(calc(100% - 2.5rem), 52rem); margin:3.7rem auto 5.6rem; font-size:1.02rem; line-height:1.68; }
.prose h2 { font-size:clamp(1.65rem,3vw,2.15rem); margin-top:3.2rem; }
.prose h3 { margin-top:2.1rem; }
.prose p { margin:1.05rem 0; }
.quote { font:500 1.35rem/1.4 "IBM Plex Sans","Segoe UI",Arial,sans-serif; border-left:3px solid var(--blue-stripe); margin:2rem 0; padding-left:1rem; }
.meta { font:400 .79rem/1.45 "IBM Plex Mono","IBM Plex Sans",monospace; color:var(--muted); }

.domain-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.domain { min-height:8rem; padding:1rem; background:var(--paper); }
.domain strong { display:block; font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif; font-size:1.2rem; }
.open { color:var(--accent-strong); }
.search { width:100%; border:1px solid var(--ink); padding:.8rem; background:transparent; font:inherit; }
.result { border-top:1px solid var(--line); padding:1.2rem 0; }

.document-head { border-left:clamp(.45rem,1vw,.7rem) solid var(--blue-stripe); }
.document-card { border-top:4px solid var(--blue-stripe); }
.document-prose { padding-left:clamp(1rem,3vw,2.2rem); border-left:3px solid var(--blue-stripe); }
.document-plaque { color:var(--muted); font:500 .74rem/1.35 "IBM Plex Mono","IBM Plex Sans",monospace; letter-spacing:.08em; text-transform:uppercase; }
.document-series { border-left:clamp(.35rem,.7vw,.55rem) solid var(--blue-stripe); padding-left:clamp(1rem,2vw,1.5rem); }
.document-sign { color:var(--muted); font:400 .8rem/1.45 "IBM Plex Mono","IBM Plex Sans",monospace; letter-spacing:.035em; white-space:nowrap; }
.document-sign strong { color:var(--ink); font-weight:500; }
.edition-links { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.5rem 0; }

.language-switch { display:flex; gap:.38rem; align-items:center; font:500 .74rem/1.2 "IBM Plex Mono","IBM Plex Sans",monospace; letter-spacing:.04em; }
.language-switch a { text-decoration:none; border:1px solid var(--line); padding:.28rem .48rem; }
.language-switch a[aria-current="page"] { background:var(--ink); color:#fff; border-color:var(--ink); }

.literary-body { width:min(calc(100% - 2.5rem), 70rem); }
.literary-body pre { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font:400 1rem/1.8 "Noto Sans Devanagari","IBM Plex Sans","Segoe UI",sans-serif; }
.document-reading { margin-top:0; }
.document-reading h1 { display:none; }
.document-reading h2 { font-size:clamp(1.65rem,3vw,2.15rem); margin-top:3rem; }
.document-reading h3 { margin-top:2rem; }
.document-reading ul { padding-left:1.25rem; }
.document-reading hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }

footer { padding:2.7rem 0; border-top:0; font-size:.84rem; color:var(--muted); }
footer .author-link { color:var(--ink); text-decoration:none; font-weight:500; }
footer .author-link:hover { color:var(--accent-strong); }

@media (max-width:900px) {
  .top .wrap { align-items:flex-start; flex-direction:column; }
  .nav { justify-content:flex-start; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .display-wordmark { font-size:clamp(2.7rem,8.5vw,5rem); }
}
@media (max-width:760px) {
  .wrap { width:min(calc(100% - 1.5rem), var(--max)); }
  .brand { white-space:normal; }
  .brand::before { min-width:4.7rem; padding:.5rem .7rem; }
  .copy,.aside { grid-column:1/-1; }
  .cards { grid-template-columns:1fr; }
  .domain-grid { grid-template-columns:1fr 1fr; }
  .hero { padding:2.2rem 0 2rem; }
  .hero + section { padding-top:2.6rem; }
  .hero-lockup { display:block; width:100%; }
  .hero-lockup .mark { width:100%; text-align:left; }
  .display-wordmark { display:grid; grid-template-columns:minmax(0,1fr); width:100%; font-size:clamp(2.35rem,10.8vw,4.1rem); letter-spacing:.006em; }
  .wordmark-main { white-space:normal; }
  .wordmark-sub { white-space:nowrap; justify-self:stretch; }
  .lede { max-width:34rem; }
  .lede-line { white-space:normal; }
  .document-sign { white-space:normal; }
}
@media (max-width:430px) {
  .display-wordmark { font-size:clamp(2.05rem,11.2vw,3.1rem); }
  .wordmark-sub { font-size:.68em; }
  .wordmark-of { font-size:1.04em; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }