/* ==========================================================================
   Sera Jey Monastic University — design system
   Palette drawn from the monastery's own building colours:
   ochre walls, maroon robes, gold roofs, turquoise trim, cardamom green.
   ========================================================================== */

:root {
  /* ---- ground: paper -------------------------------------------------- */
  --ground:     #faf5ea;   /* warm paper */
  --ground-2:   #f2e7d3;   /* deeper paper band */
  --paper:      #fffdf6;   /* card stock */

  /* ---- ink: warm, never black ----------------------------------------- */
  --ink:        #2a120d;   /* deep robe-dark for inverted sections */
  --ink-2:      #3d1d14;

  /* ---- the Buddhist colours ------------------------------------------- */
  --red:        #a3200f;   /* sindura red — primary accent */
  --red-lt:     #c2361f;
  --maroon:     #6e1812;   /* robe maroon — deepest */
  --saffron:    #e2741a;   /* monk's orange */
  --saffron-lt: #f09338;
  --gold:       #cf9426;
  --gold-lt:    #e8b954;
  --turquoise:  #1c6f66;   /* trim green-blue, used sparingly */

  /* ---- text ------------------------------------------------------------ */
  --tx:         #2b1a12;
  --tx-soft:    #614435;
  --tx-faint:   #94745f;
  --tx-invert:  #f8ede0;

  /* ---- lines ----------------------------------------------------------- */
  --rule:       rgba(110,24,18,.16);
  --rule-soft:  rgba(110,24,18,.08);

  /* ---- metrics --------------------------------------------------------- */
  --gutter:     clamp(1.25rem, 5vw, 5rem);
  --max:        1240px;
  --measure:    68ch;
  --r:          14px;

  --ease:       cubic-bezier(.22,.61,.36,1);

  --f-display:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-tib:      "Noto Serif Tibetan", "Kailasa", var(--f-display), serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--tx);
  font-family: var(--f-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 12, "WONK" 1;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem); }
h2 { font-size: clamp(1.95rem, 1.25rem + 2.9vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); }
p  { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }

::selection { background: var(--saffron-lt); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- layout primitives ------------------------------------------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

section { padding-block: clamp(3.5rem, 7vw, 7.5rem); }
section.tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

.dark  { background: var(--ink); color: var(--tx-invert); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p { color: rgba(244,236,224,.78); }
.dark .eyebrow { color: var(--gold-lt); }
.dark .rule { background: rgba(255,255,255,.16); }

.tinted { background: var(--ground-2); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-l { grid-template-columns: 1.25fr 1fr; } }

/* ---------- type helpers ------------------------------------------------- */

.eyebrow {
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; flex: none; opacity: .7;
}
.lede { font-size: clamp(1.12rem, 1rem + .55vw, 1.42rem); line-height: 1.52; color: var(--tx-soft); }
.dark .lede { color: rgba(244,236,224,.82); }
.small { font-size: .85rem; color: var(--tx-faint); }
.tib { font-family: var(--f-tib); font-size: 1.15em; line-height: 1.9; }
.rule { height: 1px; background: var(--rule); border: 0; margin-block: clamp(2rem,4vw,3.5rem); }

/* five prayer-flag colours, used as a hairline motif */
.flagline { height: 3px; display: flex; width: 100%; }
.flagline i { flex: 1; }
.flagline i:nth-child(1){ background:#2b5fa8 }
.flagline i:nth-child(2){ background:#f0f0ee }
.flagline i:nth-child(3){ background:#c4211c }
.flagline i:nth-child(4){ background:#0f7a54 }
.flagline i:nth-child(5){ background:#e0a51c }

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid  { background: var(--red); color: #fff; }
.btn--solid:hover { background: var(--red-lt); }
.btn--gold   { background: var(--gold); color: #22180a; }
.btn--gold:hover { background: var(--gold-lt); }
.btn--ghost  { border-color: var(--rule); color: var(--tx); background: transparent; }
.btn--ghost:hover { border-color: var(--tx); }
.dark .btn--ghost, .hero .btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.dark .btn--ghost:hover, .hero .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn .ar { transition: transform .25s var(--ease); }
.btn:hover .ar { transform: translateX(3px); }

/* ---------- site header -------------------------------------------------- */

.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .35s var(--ease), box-shadow .35s, backdrop-filter .35s;
}
.site-head__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .95rem;
}
.site-head.is-stuck {
  background: rgba(250,245,234,.9);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--rule), 0 10px 30px -22px rgba(26,20,16,.5);
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__mark circle, .brand__mark path { vector-effect: non-scaling-stroke; }
.brand__txt { display: grid; line-height: 1.12; }
.brand__txt b { font-family: var(--f-display); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; }
.brand__txt span { font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-faint); }

.nav { display: flex; align-items: center; gap: clamp(.85rem, 1.4vw, 1.4rem); }
.nav a {
  text-decoration: none; font-size: .89rem; font-weight: 500; color: var(--tx-soft);
  padding: .3rem 0; position: relative; transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--tx); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--red); }
@media (max-width: 1140px) { .nav--main { display: none; } }
@media (max-width: 560px) { .nav--cta { display: none; } }

/* header over a dark hero, before scroll */
.site-head:not(.is-stuck).on-dark .brand__txt b,
.site-head:not(.is-stuck).on-dark .nav a { color: rgba(255,255,255,.9); }
.site-head:not(.is-stuck).on-dark .brand__txt span { color: rgba(255,255,255,.55); }
.site-head:not(.is-stuck).on-dark .nav a::after { background: var(--gold-lt); }
.site-head:not(.is-stuck).on-dark .nav a[aria-current="page"] { color: var(--gold-lt); }
.site-head:not(.is-stuck).on-dark .burger span { background: #fff; }
.site-head:not(.is-stuck).on-dark .burger__label { color: rgba(255,255,255,.75); }

.site-head.drawer-open { background: transparent !important; box-shadow: none !important; }
.site-head.drawer-open .brand, .site-head.drawer-open .brand__txt b { color: #fff; }
.site-head.drawer-open .brand__txt span { color: rgba(255,255,255,.55); }
.site-head.drawer-open .burger span { background: #fff; }
.site-head.drawer-open .burger__label { color: rgba(255,255,255,.8); }
.site-head.drawer-open .nav--cta { display: none; }

/* The menu button is shown at EVERY width, not only on phones.
   It used to be display:none above 880px, which meant that on a desktop the
   only navigation was seven links in the bar and the footer. Sixteen of the
   twenty-four pages, the calendar and the people page among them, were
   unreachable without scrolling to the bottom. */
.burger {
  display: grid; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  padding: 0; place-items: center; gap: 5px; grid-auto-flow: row;
}
.burger__label {
  display: none; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-faint); font-weight: 600;
}
@media (min-width: 1141px) {
  .burger { width: auto; height: 44px; grid-auto-flow: column; gap: .5rem; padding: 0 .3rem 0 .7rem; }
  .burger__lines { display: grid; gap: 5px; }
  .burger__label { display: block; }
}
.burger__lines span, .burger > span { display: block; width: 22px; height: 1.6px; background: var(--tx); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(1), .burger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(2), .burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(3), .burger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
@media (max-width: 880px) { .site-head.drawer-open { background: transparent !important; box-shadow: none !important; }
.site-head.drawer-open .brand, .site-head.drawer-open .brand__txt b { color: #fff; }
.site-head.drawer-open .brand__txt span { color: rgba(255,255,255,.55); }
.site-head.drawer-open .burger span { background: #fff; }
.site-head.drawer-open .burger__label { color: rgba(255,255,255,.8); }
.site-head.drawer-open .nav--cta { display: none; }

.burger { display: grid; } }

/* The drawer is the only route to most of the site at every width, so it has
   to hold 25 links in 5 groups without running off the screen. It used to be a
   phone menu of 23 flat links in very large type, with no scrolling, and it was
   hidden entirely above 880px. */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: #fff;
  align-content: start;
  padding: clamp(4.8rem, 9vh, 6.5rem) var(--gutter) calc(var(--gutter) + 2rem);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0% at calc(100% - 46px) 44px);
  transition: clip-path .55s var(--ease);
  pointer-events: none;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 46px) 44px); pointer-events: auto; }
.drawer a {
  font-family: var(--f-display); font-size: 1.12rem; text-decoration: none;
  color: #fff; padding-block: .5em; border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.drawer a:hover, .drawer a:focus-visible { color: var(--gold-lt); }
.drawer a[aria-current="page"] { color: var(--gold); }

/* From tablet up the groups sit side by side, so the whole map fits one screen.
   CSS columns were tried first and overflowed sideways out of a fixed-height
   scroller, which cut the last group off the right edge. Grid wraps downwards. */
.drawer { display: grid; gap: 0 clamp(1.5rem, 3.5vw, 3.5rem); }
@media (min-width: 620px)  { .drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .drawer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .drawer { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.drawer__g { margin-bottom: 1.4rem; }

.drawer a em { font-family: var(--f-body); font-style: normal; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); flex: none; }

/* ---------- hero --------------------------------------------------------- */

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(16,11,8,.92) 0%, rgba(16,11,8,.58) 38%, rgba(16,11,8,.22) 68%, rgba(16,11,8,.45) 100%);
}
/* On a phone the hero text stack is tall enough to reach the light part of
   that gradient, and the introduction was sitting straight on a sunlit temple
   roof. Narrow screens get a darker wash. The photograph is a backdrop here,
   not the subject, so there is nothing to lose by covering it. */
@media (max-width: 760px) {
  .hero__media::after {
    background:
      linear-gradient(to top, rgba(16,11,8,.94) 0%, rgba(16,11,8,.82) 45%, rgba(16,11,8,.7) 80%, rgba(16,11,8,.72) 100%);
  }
}
.hero__inner { position: relative; padding-bottom: clamp(3rem, 8vh, 6rem); padding-top: 8rem; }
.hero h1 { color: #fff; margin-bottom: .3em; }
/* The subtitle is sized off the h1 so it stays in proportion as the heading
   grows. On a phone that proportion collapsed: .21em of a 42px heading is 9px,
   which is not readable at any distance. The max() puts a floor under it. */
.hero h1 .sub { display: block; font-family: var(--f-body); font-size: max(1rem, .21em); line-height: 1.4; letter-spacing: .02em; color: var(--gold-lt); font-weight: 500; margin-top: .8em; max-width: 26ch; }
.hero .lede { max-width: 46ch; color: rgba(255,255,255,.85); }
@media (max-width: 560px) { .hero .lede { font-size: 1.02rem; line-height: 1.55; } .hero__inner { padding-top: 6rem; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* Four figures, and they have to break evenly. auto-fit used to put three on
   one row and leave the fourth stranded on its own at around 600px wide, which
   read as a layout bug rather than as a fourth fact. Two and two, then four. */
.hero__meta {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem; border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.5rem;
}
@media (min-width: 760px) { .hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__meta div b { display: block; font-family: var(--f-display); font-size: clamp(1.5rem,1.1rem+1.3vw,2.1rem); color: #fff; font-weight: 500; }
.hero__meta div span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ---- The image rule ----------------------------------------------------
   Two kinds of image, two rules, and nothing is ever stretched.

   Photographs are backdrops. They may be cropped by `object-fit: cover` to
   fill whatever box the layout gives them, because the subject sits in the
   middle and losing an edge costs nothing.

   Commissioned illustrations are artwork. They are drawn at 16:9 and are
   shown COMPLETE: the box is given `aspect-ratio: 16/9` so that `cover` has
   nothing left to crop. Never put one in a box of another shape, and never
   set width and height that disagree with its ratio. If a layout needs a
   different shape, commission a new image, do not trim this one.
   ---------------------------------------------------------------------- */
.art { aspect-ratio: 16 / 9; }
.art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* small page banner for interior pages */
.pagehead { position: relative; color: #fff; padding-top: clamp(8rem, 18vh, 12rem); padding-bottom: clamp(3rem, 7vh, 5.5rem); overflow: hidden; }
.pagehead__media { position: absolute; inset: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }

/* An article headed by artwork shows the whole picture, then the title under
   it, rather than cropping the picture into a banner behind the title. */
.pagehead--art { padding-top: 0; background: var(--ink); }
.pagehead--art .pagehead__media {
  position: relative; inset: auto; aspect-ratio: 16 / 9; width: 100%;
}
.pagehead--art .pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/* Only a scrim at the very top, so the site header stays legible over a bright
   sky. It darkens nothing that matters and crops nothing. */
.pagehead--art .pagehead__media::after {
  background: linear-gradient(to bottom, rgba(16,11,8,.62), rgba(16,11,8,.22) 22%, transparent 42%);
}
.pagehead--art .wrap { padding-top: clamp(1.8rem, 4vh, 3rem); }
.pagehead__media::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(16,11,8,.9), rgba(16,11,8,.55)); }
.pagehead .wrap { position: relative; }
.pagehead h1 { color: #fff; }
.pagehead .lede { color: rgba(255,255,255,.82); }

/* ---------- cards -------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 45px -30px rgba(26,20,16,.55); border-color: var(--rule); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card__num { font-family: var(--f-display); font-size: 2.2rem; color: var(--saffron); line-height: 1; display: block; margin-bottom: .5rem; }
.dark .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }

.figure { border-radius: var(--r); overflow: hidden; position: relative; background: var(--ground-2); }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.figure:hover img { transform: scale(1.045); }
.figure figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.1rem .9rem;
  background: linear-gradient(to top, rgba(16,11,8,.85), transparent);
  color: #fff; font-size: .82rem; line-height: 1.4;
}

/* ---------- timeline ----------------------------------------------------- */

.tl { position: relative; margin: 0; padding: 0; list-style: none; }
.tl::before { content: ""; position: absolute; left: 7px; top: .6rem; bottom: .6rem; width: 1px; background: var(--rule); }
.dark .tl::before { background: rgba(255,255,255,.18); }
.tl li { position: relative; padding: 0 0 clamp(2rem,4vw,3rem) clamp(2.2rem,4vw,3.4rem); }
.tl li::before {
  content: ""; position: absolute; left: 0; top: .45rem; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ground); border: 2px solid var(--gold);
}
.dark .tl li::before { background: var(--ink); }
.tl li:last-child { padding-bottom: 0; }
.tl time {
  display: block; font-family: var(--f-display); font-size: 1.55rem; color: var(--red);
  line-height: 1; margin-bottom: .45rem;
}
.dark .tl time { color: var(--gold-lt); }
.tl h3 { font-size: 1.15rem; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; margin-bottom: .35em; }

/* ---------- feature list ------------------------------------------------- */

.rows { border-top: 1px solid var(--rule); }
.rows > div {
  display: grid; gap: .5rem 2.5rem; padding-block: clamp(1.4rem, 2.5vw, 2.1rem);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 780px) { .rows > div { grid-template-columns: 12rem 1fr; } }
.rows dt, .rows .k {
  font-family: var(--f-display); font-size: 1.18rem; color: var(--red); margin: 0;
}
.dark .rows { border-color: rgba(255,255,255,.15); }
.dark .rows > div { border-color: rgba(255,255,255,.15); }
.dark .rows dt, .dark .rows .k { color: var(--gold-lt); }
.rows dd { margin: 0; color: var(--tx-soft); }
.dark .rows dd { color: rgba(244,236,224,.76); }

/* ---------- map module --------------------------------------------------- */

.mapbox { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); background: var(--ground-2); }
.mapbox__tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: .45rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.mapbox__tabs button {
  flex: 1 1 auto; min-width: 92px;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--tx-soft);
  padding: .6rem .8rem; transition: background-color .2s, color .2s;
}
.mapbox__tabs button:hover { background: var(--ground-2); color: var(--tx); }
.mapbox__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.mapbox__stage { position: relative; height: clamp(360px, 56vh, 620px); }
.mapbox__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapbox__stage [hidden] { display: none !important; }
.mapbox__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .85rem 1.1rem; background: var(--paper); border-top: 1px solid var(--rule); font-size: .82rem; color: var(--tx-faint);
}
.mapbox__foot .spacer { margin-left: auto; }
.leaflet-container { font: inherit; background: #dfd8c8; }
.pin-label {
  background: var(--ink); color: #fff; padding: .3rem .6rem; border-radius: 7px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.8);
}

/* ---------- journal (The Courtyard) -------------------------------------- */

.post { display: grid; gap: 1.1rem; text-decoration: none; color: inherit; }
.post .figure { aspect-ratio: 16/9; }  /* the artwork's own ratio, see the image rule */
/* No hover zoom on artwork: a zoom is a crop. Photographs elsewhere keep theirs. */
.post .figure:hover img { transform: none; }
.post__tag {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--red);
}
.post h3 { margin-bottom: .2em; transition: color .25s; }
.post:hover h3 { color: var(--red); }
.post time { font-size: .8rem; color: var(--tx-faint); }

.post--lead { gap: clamp(1.5rem,3vw,2.75rem); }
@media (min-width: 880px) { .post--lead { grid-template-columns: 1.15fr 1fr; align-items: center; } .post--lead .figure { aspect-ratio: 16/9; } }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button {
  border: 1px solid var(--rule); background: transparent; border-radius: 999px;
  padding: .5rem 1.05rem; font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer;
  color: var(--tx-soft); transition: all .22s;
}
.filters button:hover { border-color: var(--tx); color: var(--tx); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- lexicon ------------------------------------------------------ */

.lex-tools { display: grid; gap: 1rem; }
.search {
  display: flex; align-items: center; gap: .8rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 999px;
  padding: .85rem 1.35rem; transition: border-color .25s, box-shadow .25s;
}
.search:focus-within { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(31,111,104,.12); }
.search input { flex: 1; border: 0; background: none; font: inherit; color: inherit; outline: none; min-width: 0; }
.search svg { flex: none; opacity: .45; }

.lex-list { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: 2rem; }
.entry { border-bottom: 1px solid var(--rule); }
.entry__btn {
  width: 100%; display: grid; gap: .35rem .5rem; grid-template-columns: 1fr auto; align-items: baseline;
  background: none; border: 0; text-align: left; font: inherit; cursor: pointer;
  padding: clamp(1.1rem,2vw,1.5rem) 0; color: inherit;
}
.entry__term { font-family: var(--f-display); font-size: clamp(1.2rem,1rem+.7vw,1.55rem); }
.entry__term small { font-family: var(--f-body); font-size: .62em; color: var(--tx-faint); margin-left: .7em; letter-spacing: .02em; }
.entry__cat { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.entry__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.entry[open] .entry__body, .entry.is-open .entry__body { grid-template-rows: 1fr; }
.entry__body > div { overflow: hidden; }
.entry__body p { padding-bottom: 1.35rem; }
.entry__body .tibline { font-family: var(--f-tib); color: var(--turquoise); font-size: 1.3rem; margin-bottom: .5rem; }
.entry__chev { transition: transform .35s var(--ease); color: var(--tx-faint); }
.entry.is-open .entry__chev { transform: rotate(180deg); }
.entry.is-hidden { display: none; }

.az { display: flex; flex-wrap: wrap; gap: .25rem; }
.az button {
  width: 2rem; height: 2rem; border-radius: 7px; border: 0; background: transparent;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--tx-faint); cursor: pointer;
}
.az button:hover:not(:disabled) { background: var(--ground-2); color: var(--tx); }
.az button[aria-pressed="true"] { background: var(--red); color: #fff; }
.az button:disabled { opacity: .22; cursor: default; }

/* ---------- gallery strip ------------------------------------------------ */

.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 31%); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 99px; }
.strip .figure { scroll-snap-align: start; aspect-ratio: 4/3; }

/* ---------- pull quote --------------------------------------------------- */

.quote { max-width: 24ch; font-family: var(--f-display); font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem); line-height: 1.22; margin: 0; }
.quote footer { font-family: var(--f-body); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-faint); margin-top: 1.4rem; }
.dark .quote footer { color: rgba(244,236,224,.55); }

/* ---------- footer ------------------------------------------------------- */

.site-foot { background: var(--ink); color: rgba(244,236,224,.72); padding-block: clamp(3rem,6vw,5rem) 2rem; }
.site-foot a { color: rgba(244,236,224,.72); text-decoration: none; transition: color .2s; }
.site-foot a:hover { color: #fff; }
.site-foot h4 { font-family: var(--f-body); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 1.1rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; }
.site-foot__grid { display: grid; gap: clamp(2rem,4vw,3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%,190px),1fr)); }
.site-foot__base { margin-top: clamp(2.5rem,5vw,4rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: .78rem; color: rgba(244,236,224,.45); }
.site-foot__base .spacer { margin-left: auto; }

/* ---------- reveal animation --------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__media img { transform: none; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }


/* ==========================================================================
   Shared filter bar — used by the Lexicon and the Mantras pages
   ========================================================================== */

/* ---------- sticky filter bar -------------------------------------------- */

.lexbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,245,234,.92);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.lexbar__inner { display: grid; gap: .85rem; padding-block: .95rem; }
@media (min-width: 1040px) {
  .lexbar__inner { grid-template-columns: minmax(260px, 360px) 1fr; align-items: center; gap: 1.5rem; }
}
.search__kbd {
  font: inherit; font-size: .7rem; color: var(--tx-faint);
  border: 1px solid var(--rule); border-radius: 5px; padding: .05rem .4rem;
}
@media (max-width: 700px) { .search__kbd { display: none; } }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 1040px) { .chips { justify-content: flex-end; } }
:where(.chip) { --acc: var(--tx-faint); }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--rule); background: transparent; border-radius: 999px;
  padding: .42rem .85rem; font: inherit; font-size: .79rem; font-weight: 500;
  color: var(--tx-soft); cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip b { font-weight: 600; font-size: .72em; opacity: .55; }
.chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc); flex: none;
}
.chip[data-cat="all"]::before, .chip[data-region="all"]::before { display: none; }
.chip:hover { border-color: var(--acc); color: var(--tx); }
.chip[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #fff; }
.chip[aria-pressed="true"] b { opacity: .7; }
.chip[data-cat="all"][aria-pressed="true"],
.chip[data-region="all"][aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }

.lexsec { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 7rem); }
#lex-count { margin: 0 0 1.5rem; }

.linkbtn {
  border: 0; background: none; font: inherit; color: var(--red);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0;
}


/* wiki-style links to the Lexicon, generated at build time */
.lexlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--saffron);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s, text-decoration-color .2s;
}
.lexlink:hover { color: var(--red); text-decoration-color: var(--red); text-decoration-style: solid; }
.dark .lexlink { text-decoration-color: var(--gold-lt); }
.dark .lexlink:hover { color: #fff; text-decoration-color: #fff; }


/* ==========================================================================
   Coordinates lines, shared across pages
   ========================================================================== */

/* linked coordinates line */
.geo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem;
  font-size: .78rem; margin: .7rem 0 0; max-width: none;
}
.geo__label {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-faint); font-weight: 600;
}
.geo__val { color: var(--tx-soft); font-variant-numeric: tabular-nums; }
.geo a {
  color: var(--red); text-decoration: none;
  border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
.geo a:hover { border-bottom-style: solid; }
.dark .geo__val { color: rgba(244,236,224,.72); }
.dark .geo a { color: var(--gold-lt); }

.geobox {
  margin-top: 1.2rem; background: var(--paper); border: 1px solid var(--rule-soft);
  border-radius: 12px; padding: 1rem 1.2rem;
}
.geobox .geo { margin-top: 0; padding: .35rem 0; border-bottom: 1px solid var(--rule-soft); }
.geobox .geo:last-of-type { border-bottom: 0; }

/* a standing marker on speculative pieces */
.fictionflag {
  background: var(--ground-2); border-left: 4px solid var(--saffron);
  border-radius: 0 11px 11px 0; padding: 1rem 1.2rem;
  font-size: .88rem; line-height: 1.65; color: var(--tx-soft);
  max-width: none; margin-bottom: 2rem;
}
.fictionflag strong { color: var(--tx); }

/* ==========================================================================
   Reference blocks
   ========================================================================== */

.refsec { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.refs { list-style: none; counter-reset: none; margin: 2rem 0 0; padding: 0; }
.refs li {
  display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .9rem;
  padding: .95rem 0; border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 6rem;
}
.refs li:first-child { border-top: 1px solid var(--rule); }
.refs li:last-child { border-bottom: 1px solid var(--rule); }
.ref__n {
  font-family: var(--f-display); font-size: .92rem; color: var(--saffron);
  line-height: 1.5; font-variant-numeric: tabular-nums;
}
.ref__title {
  font-size: .95rem; font-weight: 500; color: var(--tx); text-decoration: none;
  border-bottom: 1px solid var(--rule); transition: color .2s, border-color .2s;
}
.ref__title:hover { color: var(--red); border-color: var(--red); }
.ref__pub {
  display: block; font-size: .76rem; color: var(--tx-faint); margin-top: .15rem;
  letter-spacing: .01em;
}
.ref__what {
  font-size: .84rem; line-height: 1.6; color: var(--tx-soft);
  margin: .45rem 0 0; max-width: none;
}
.refs__note {
  font-size: .8rem; line-height: 1.6; color: var(--tx-faint);
  margin-top: 1.6rem; max-width: 62ch;
}
.refs__note a { color: var(--red); }

.dark .refs li { border-color: rgba(255,255,255,.14); }
.dark .ref__title { color: #fff; border-color: rgba(255,255,255,.25); }
.dark .ref__what { color: rgba(244,236,224,.75); }

/* ---- Share row -------------------------------------------------------- */
.share {
  margin: 2.6rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(42, 18, 13, .12);
}
.share__label {
  margin: 0 0 .7rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(42, 18, 13, .55);
}
.share__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.share__b {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .8rem;
  border: 1px solid rgba(42, 18, 13, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.share__b svg { flex: none; opacity: .75; transition: opacity .18s ease; }
.share__b:hover,
.share__b:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-1px);
}
.share__b:hover svg, .share__b:focus-visible svg { opacity: 1; }
.share__b--native, .share__b--copy { border-style: dashed; }
.share__b--copy.is-done { background: var(--turquoise); border-color: var(--turquoise); color: #fff; }
.share__b--copy.is-done svg { opacity: 1; }

.share.on-dark { border-top-color: rgba(255, 255, 255, .16); }
.share.on-dark .share__label { color: rgba(255, 255, 255, .6); }
.share.on-dark .share__b {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.share.on-dark .share__b:hover, .share.on-dark .share__b:focus-visible {
  background: var(--saffron); border-color: var(--saffron); color: var(--ink);
}

@media (max-width: 560px) {
  .share__b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .share__b { padding: .6rem; }
  .share__b--native span, .share__b--copy .share__copytext {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
  }
}
@media (prefers-reduced-motion: reduce) { .share__b { transition: none; } }

.geo__plus {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; letter-spacing: .02em;
  padding: .12rem .4rem; border-radius: 4px;
  background: rgba(163, 32, 15, .08); color: var(--maroon);
  border: 1px solid rgba(163, 32, 15, .16);
}

/* ---- FPMT coverage map -------------------------------------------------- */
.wm { margin-top: 2rem; }
.wm__holder {
  background: rgba(255, 255, 255, .45);
  border: 1px solid var(--rule-soft); border-radius: var(--r);
  padding: clamp(.6rem, 1.6vw, 1.4rem);
}
.wm__svg { display: block; width: 100%; height: auto; aspect-ratio: 2754 / 1398; border: 0; }
.wm__legend {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
}
.wm__legend li { display: flex; align-items: center; gap: .45rem; font-size: .84rem; }
.wm__legend em { font-style: normal; color: var(--tx-faint); }
.wm__key { width: 15px; height: 15px; border-radius: 3px; flex: none; }
.wm__key--1 { background: #e8b06a; }
.wm__key--3 { background: #d98b3a; }
.wm__key--6 { background: #b5541c; }
.wm__key--11 { background: #7d2410; }
.wm__tip { min-height: 1.3em; margin: .7rem 0 0; font-size: .88rem; color: var(--maroon); font-weight: 500; }

.country--flash { animation: wmflash 1.6s ease; }
@keyframes wmflash {
  0%, 100% { background: transparent; }
  15% { background: rgba(207, 148, 38, .22); }
}
@media (prefers-reduced-motion: reduce) { .country--flash { animation: none; } }