:root {
  --bg: #f4ead7;
  --paper: #fff8ec;
  --ink: #2a2118;
  --muted: #6b5846;
  --faint: #9a836a;
  --gold: #c08a2e;
  --deep: #a8681a;
  --line: #e3d2b4;
  --shadow: 0 14px 34px rgba(42, 33, 24, 0.13);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--deep); }

/* ---------- shell ---------- */

.wrap {
  width: min(680px, calc(100% - 2.2rem));
  margin: 0 auto;
}

.wide {
  width: min(940px, calc(100% - 2.2rem));
  margin: 0 auto;
}

/* ---------- masthead ---------- */

.top {
  width: min(940px, calc(100% - 2.2rem));
  margin: 0 auto;
  padding: 1.6rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.top .mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.top .links {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

/* the rule is what stops the language switch reading as another section */
.top .lang {
  padding-left: 0.85rem;
  border-left: 1px solid var(--line);
}

.top .links a:first-child.lang {
  padding-left: 0;
  border-left: 0;
}

/* नेपाली sits in the English masthead, and it is one word joined along the
   top, so it cannot take the tracking the rest of the line does. It is set
   larger as well, because Devanagari fills less of its em than a Latin
   capital and at a matched size it reads as an afterthought. */
.top .lang[hreflang="ne"] {
  font-size: 0.87rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.top .mark img {
  display: block;
  width: 24px;
  height: 24px;
}

.top .mark,
.top .links a {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
}

.top .links a:hover { color: var(--deep); }

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

.hero {
  padding: 2.6rem 0 1rem;
}

.hero .kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.15rem, 8.4vw, 3.5rem);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

.standfirst {
  margin: 0;
  font-size: clamp(1.12rem, 4.3vw, 1.32rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- sections ---------- */

section { padding: 2.4rem 0 0; }

.num {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.55rem;
}

h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.55rem, 6vw, 2.05rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.14;
  text-wrap: balance;
}

h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 640;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.05rem; text-wrap: pretty; }

.lead { font-size: 1.08em; }

/* ---------- figures ---------- */

figure {
  margin: 1.9rem 0 0;
}

figure img,
figure .chart {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chart { padding: 0.6rem 0.4rem 0.2rem; }

figcaption {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.73rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.5;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 1.9rem 0 0;
}

.pair figure { margin: 0; }

/* ---------- the colour ladder ---------- */

.ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin: 1.9rem 0 0;
}

.ladder figure { margin: 0; }

.ladder img { border-radius: 10px; }

.ladder figcaption {
  margin-top: 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

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

.pull {
  margin: 2.4rem 0 0;
  padding: 1.5rem 0 0.2rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- spec list ---------- */

.spec {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.spec li {
  display: flex;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.spec .k {
  flex: 0 0 8.5rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

.spec .v { flex: 1; }

/* ---------- next link ---------- */

.next {
  margin: 2.8rem 0 0;
  padding: 1.35rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.next a {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.next a:hover { text-decoration: underline; }

.next p {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

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

footer {
  margin: 4rem 0 0;
  padding: 1.6rem 0 3.2rem;
  border-top: 1px solid var(--line);
}

footer p {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--faint);
  margin: 0 0 0.6rem;
}

footer a { color: var(--faint); }

/* ---------- mobile ---------- */

@media (max-width: 620px) {
  body { font-size: 17px; }

  .ladder {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
  }

  .ladder figure:first-child { grid-column: 1 / -1; }

  .spec li { display: block; }

  .spec .k,
  .spec .v { display: block; }

  .spec .k { margin-bottom: 0.2rem; }

  figure img, figure .chart { border-radius: 11px; }


}

/* the chart sits in its own card, so the image inside carries no chrome */
.chart picture { display: block; }

.chart img {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

/* both halves of a pair share one shape so the captions line up */
.pair img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- video ---------- */

.video-figure { margin: 2rem 0 0.4rem; }

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1a140e;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 620px) {
  .video { border-radius: 11px; }
}

.contact a { color: var(--deep); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact a:hover { border-bottom-color: var(--deep); }

/* ---------- the Nepali pages ---------- */

/* Devanagari letters hang from one continuous bar along the top of the word,
   so the loose tracking that makes the Latin micro-type work snaps that bar
   into pieces. Every tracked rule is reset below, and the negative tracking
   on the headings with it.

   No font is loaded. The Latin faces stay at the front of the stack, so a
   Devanagari face is only reached for the characters the faces before it do
   not carry. Between them the four cover macOS, iOS, Windows, Android and
   the desktop Linux distributions. */

html[lang="ne"] {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman",
           "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI",
           "Noto Serif Devanagari", "Noto Sans Devanagari", Mangal, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, "Kohinoor Devanagari",
          "Devanagari Sangam MN", "Nirmala UI", "Noto Sans Devanagari",
          Mangal, sans-serif;
}

/* matras sit above and below the line, so the leading has to open up */
html[lang="ne"] body { line-height: 1.8; }

html[lang="ne"] h1 {
  letter-spacing: 0;
  line-height: 1.28;
  font-weight: 600;
}

html[lang="ne"] h2 {
  letter-spacing: 0;
  line-height: 1.38;
  font-weight: 600;
}

html[lang="ne"] h3 { letter-spacing: 0; }

html[lang="ne"] .standfirst { line-height: 1.62; }

html[lang="ne"] .pull {
  letter-spacing: 0;
  line-height: 1.5;
}

html[lang="ne"] .kicker,
html[lang="ne"] figcaption,
html[lang="ne"] .spec .k,
html[lang="ne"] .top .mark,
html[lang="ne"] .top .links a { letter-spacing: 0.02em; }

/* the same lift, applied to every line of micro-type on the page */
html[lang="ne"] .kicker,
html[lang="ne"] figcaption,
html[lang="ne"] .spec .k,
html[lang="ne"] .top .mark,
html[lang="ne"] .top .links a { font-size: 0.84rem; }

html[lang="ne"] .ladder figcaption { font-size: 0.72rem; }

html[lang="ne"] footer p { font-size: 0.86rem; }

/* English is the one Latin word on the page, and it does not need the lift */
html[lang="ne"] .top .lang[hreflang="en"] { font-size: 0.72rem; }

/* the section numbers stay tracked, because Devanagari digits stand apart
   from each other the way the Latin ones do */
html[lang="ne"] .num { letter-spacing: 0.2em; }

/* a key like मोटर is a word, not a line of small caps, so it needs the room */
html[lang="ne"] .spec .k { flex-basis: 7rem; }

html[lang="ne"] .ladder figcaption { letter-spacing: 0.02em; }