:root {
  --night: #10141d;
  --night-2: #161b26;
  --cream: #f4eee2;
  --gold: #dfc57e;
  --gold-dim: #c9ad6c;
  --muted: #bdb7ad;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: min(1180px, calc(100% - 2 * var(--gutter)));
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); }
/* the landing page is dark from the root down. Scoped to .landing-page because
   manuc.html also loads this stylesheet but has a paper body. */
body.landing-page { --fr-ink: #e0c68e; }
body { color: var(--cream); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }

.landing-eyebrow {
  margin: 0; color: var(--gold);
  font: 750 clamp(.6rem, .7vw, .68rem)/1.3 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
}

/* French sits at full size beside its English — an echo, never a footnote.
   The colour reads --fr-ink so it stays gold like every other French passage on
   the site; the body is dark, so landing.css sets the light gold on
   body.landing-page. Hardcoding it here is what left the landing French looking
   like plain cream copy, indistinguishable from the English. */
.landing-fr { font-style: italic; color: var(--fr-ink); }

/* ---------- screen one: the claim ---------- */

.screen { position: relative; }
.screen-inner { width: var(--measure); margin-inline: auto; padding: clamp(4.5rem, 11vh, 8rem) 0; }

.screen--hero {
  min-height: 100svh;
  display: grid; align-items: center;
  overflow: hidden; isolation: isolate;
  background: var(--night);
}
.landing-scenes { position: absolute; z-index: -3; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.landing-scene { min-width: 0; margin: 0; overflow: hidden; }
.landing-scene img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08) brightness(.7); }
.landing-scene--kyiv img { object-position: 58% center; }
.landing-shade {
  position: absolute; z-index: -2; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,10,16,.92), rgba(7,10,16,.7) 47%, rgba(7,10,16,.34)),
    linear-gradient(0deg, rgba(7,10,16,.92), transparent 62%, rgba(7,10,16,.34));
}

.hero-inner {
  width: var(--measure); margin-inline: auto;
  padding: clamp(2rem, 6vh, 4.5rem) 0;
  display: grid; gap: clamp(2rem, 5vh, 3.5rem); align-content: center;
}
.landing-intro { max-width: 42rem; }
.landing-intro h1 {
  max-width: 15ch; margin: .85rem 0 1.1rem;
  font-size: clamp(2.9rem, 6.4vw, 7rem);
  font-weight: 400; letter-spacing: -.055em; line-height: .9;
  text-wrap: balance;
}
.landing-intro h1 em { color: var(--gold); font-weight: 400; }
.landing-intro .landing-fr {
  max-width: 34rem; margin: 0;
  font-size: clamp(1.1rem, 1.9vw, 1.6rem); line-height: 1.4;
}
.landing-connection { max-width: 36rem; margin-top: 1.6rem; display: grid; gap: .7rem; }
.landing-connection p { margin: 0; font-size: clamp(1rem, 1.15vw, 1.09rem); line-height: 1.5; }
/* same size as its English twin — the hero-title rule would otherwise win here */
.landing-connection .landing-fr { font-size: clamp(1rem, 1.15vw, 1.09rem); color: var(--fr-ink); }

.hero-cue {
  justify-self: start;
  display: inline-flex; align-items: baseline; gap: .7rem;
  padding: .55rem 1.1rem .6rem;
  color: var(--cream); text-decoration: none;
  border: 1px solid rgba(223,197,126,.42); border-radius: 999px;
  transition: background .2s ease, border-color .2s ease;
}
.hero-cue span { font: 700 clamp(.72rem, .85vw, .8rem)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.hero-cue small { font: italic clamp(.8rem, .95vw, .9rem)/1 var(--serif); color: var(--gold-dim); }
.hero-cue i { color: var(--gold); font-size: .95rem; font-style: normal; }
.hero-cue:hover, .hero-cue:focus-visible { background: rgba(223,197,126,.12); border-color: var(--gold); outline: 0; }

/* ---------- screen two: the chapters ---------- */

.screen--chapters { background: var(--night); border-top: 1px solid rgba(244,238,226,.09); }
.screen-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.screen-head h2 {
  margin: .8rem 0 .5rem;
  font-size: clamp(2.2rem, 4.4vw, 4.2rem);
  font-weight: 400; letter-spacing: -.045em; line-height: .95; text-wrap: balance;
}
.screen-head .landing-fr { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.screen-lede { margin: 1.5rem 0 0; max-width: 40rem; font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.52; color: var(--muted); }
.screen-lede.landing-fr { margin-top: .7rem; color: var(--fr-ink); }

/* ---------- screen two: the text Europe already has ---------- */

.screen--text {
  background: var(--night-2);
  border-top: 1px solid rgba(244,238,226,.09);
  display: grid; align-items: center;
}
.screen-inner--narrow { max-width: 46rem; }
.screen--text h2 {
  margin: .9rem 0 .6rem;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance;
}
.screen--text .landing-fr {
  margin: 0; font-size: clamp(1.05rem, 1.55vw, 1.34rem); line-height: 1.4;
}
.screen--text .screen-lede { margin-top: 1.8rem; }

/* ---------- screen three ---------- */

/* A hint of where the edge is: the tricolour Romania used from 1867 to 1948,
   set to the right of the text and faded back. Decorative only — the screen
   reads the same without it. */
.chapters-flag {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(2.5rem, 8vh, 5.5rem); right: 0;
  width: clamp(260px, 27vw, 520px);
  aspect-ratio: 3 / 2;
  background: url(./assets/romania-flag-1867.webp) center / cover no-repeat;
  opacity: .18;
  filter: saturate(.9);
  /* Fade every edge the viewport does not already crop. One gradient can only
     fade along a single axis, so the left and the bottom are two masks
     intersected; the right bleeds off-screen and the top tucks under the nav. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%),
                      linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 46%),
              linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* The flag sits above the section background but below the text. It cannot be
   given a negative z-index: .screen is position:relative with z-index:auto, so
   it creates no stacking context and a -1 child paints behind the section's own
   opaque background — i.e. nowhere. Raise the content instead. */
.screen--chapters > .screen-inner { position: relative; z-index: 1; }

/* ---------- screen four: the warning ---------- */

.closing {
  max-width: 34rem; margin: clamp(2.6rem, 6vh, 4rem) 0 0; padding-top: 1.8rem;
  border-top: 1px solid rgba(244,238,226,.14);
  color: var(--cream);
  font-size: clamp(1.1rem, 1.55vw, 1.38rem); line-height: 1.5; font-style: italic;
}
.closing.landing-fr {
  margin-top: .8rem; padding-top: 0; border-top: 0;
  color: var(--fr-ink); font-size: clamp(.98rem, 1.25vw, 1.16rem);
}
/* the attribution line: apparatus, so it stays French-free */
.closing-attr {
  max-width: 34rem; margin: .9rem 0 0;
  color: rgba(244,238,226,.4);
  font: 600 .6rem/1.45 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
}
.closing-attr cite { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: .02em; text-transform: none; }

.chapter-list { display: grid; gap: 0; margin-top: clamp(2.2rem, 5vh, 3.2rem); border-top: 1px solid rgba(244,238,226,.14); }
.chapter {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  padding: clamp(1.6rem, 3.4vh, 2.4rem) 0;
  border-bottom: 1px solid rgba(244,238,226,.14);
  text-decoration: none; color: inherit;
  transition: background .2s ease;
}
.chapter:hover, .chapter:focus-visible { background: rgba(223,197,126,.07); outline: 0; }
.chapter-num {
  color: var(--gold); font: 700 clamp(.72rem, .85vw, .8rem)/1.6 var(--sans);
  letter-spacing: .1em;
}
.chapter-body { display: grid; gap: .45rem; max-width: 52rem; }
.chapter-title { font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.15; letter-spacing: -.02em; }
.chapter-title.landing-fr { font-size: clamp(1.05rem, 1.4vw, 1.28rem); color: var(--fr-ink); }
.chapter-why { font-size: clamp(.98rem, 1.12vw, 1.08rem); line-height: 1.5; color: var(--muted); }
.chapter-why.landing-fr { color: var(--fr-ink); }

/* ---------- screen three: the cabinet ---------- */

.screen--cabinet { background: var(--night-2); border-top: 1px solid rgba(244,238,226,.09); }
.cabinet-door {
  display: grid; gap: .5rem; justify-items: start;
  padding: clamp(1.6rem, 3vh, 2.2rem) clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid rgba(223,197,126,.32); border-radius: 4px;
  text-decoration: none; color: inherit;
  transition: background .2s ease, border-color .2s ease;
}
.cabinet-door:hover, .cabinet-door:focus-visible { background: rgba(223,197,126,.1); border-color: var(--gold); outline: 0; }
.cabinet-rooms {
  color: var(--gold); font: 700 clamp(.68rem, .8vw, .76rem)/1.5 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
}
.cabinet-cta { font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -.02em; }
.cabinet-cta i { color: var(--gold); font-style: normal; }
.cabinet-cta.landing-fr { font-size: clamp(.98rem, 1.2vw, 1.1rem); color: var(--fr-ink); }

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

.landing-footer {
  width: var(--measure); margin-inline: auto;
  padding: clamp(2rem, 4vh, 3rem) 0 clamp(2rem, 5vh, 3.5rem);
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
}
.landing-credit { margin: 0; color: rgba(244,238,226,.62); font: 500 clamp(.58rem, .72vw, .68rem)/1.6 var(--sans); }
.landing-credit a { color: inherit; text-decoration: none; }
.landing-credit a:hover, .landing-credit a:focus-visible { color: var(--gold); text-decoration: underline; }
.landing-foot-links { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: center; }
.landing-foot-links a {
  color: var(--muted); font: 600 clamp(.7rem, .82vw, .78rem)/1.4 var(--sans);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.landing-foot-links a span { font-family: var(--serif); font-style: italic; letter-spacing: 0; text-transform: none; color: var(--gold-dim); }
.landing-foot-links a:hover, .landing-foot-links a:focus-visible { color: var(--gold); outline: 0; }

/* the sources drawer: apparatus, so it stays French-free and closed by default */
.landing-sources { width: 100%; margin: 0; text-align: left; }
.landing-sources summary {
  cursor: pointer; justify-self: center; color: rgba(244,238,226,.62);
  font: 600 clamp(.58rem, .72vw, .68rem)/1.6 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
}
.landing-sources summary:hover, .landing-sources summary:focus-visible { color: var(--gold); outline: 0; }
.landing-sources[open] summary { color: var(--gold); }

.landing-sources-grid {
  margin-top: 1.8rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(244,238,226,.14);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem);
}
.landing-sources-grid h3 {
  margin: 0 0 .7rem; color: var(--gold-dim);
  font: 600 clamp(.58rem, .72vw, .68rem)/1.4 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
}
.landing-sources-grid h3 + p + h3 { margin-top: 1.5rem; }
.landing-sources-grid p, .landing-sources-grid li {
  color: rgba(244,238,226,.62);
  font: 500 clamp(.62rem, .78vw, .73rem)/1.65 var(--sans);
}
.landing-sources-grid ul { margin: 0; padding: 0; list-style: none; }
.landing-sources-grid li + li { margin-top: .4rem; }
.landing-sources-grid a { color: inherit; text-decoration: none; }
.landing-sources-grid a:hover, .landing-sources-grid a:focus-visible { color: var(--gold); text-decoration: underline; }
.landing-sources-grid cite { font-family: var(--serif); font-style: italic; }

/* ---------- stacking context ----------
   The landing hero puts its images at z-index: -3 so the copy sits above them
   without a wrapper. That only works inside an isolated stacking context,
   which this rule provides. The Manuc chapter used to borrow it and no
   longer does: it has its own single-image hero in annex.css. */

.landing { position: relative; isolation: isolate; background: var(--night); }

/* ---------- narrow screens ---------- */

@media (max-width: 760px) {
  /* On a phone the four images become four small squares, too small to carry
     anything. Bucha alone fills the screen instead, which is also the image
     the closing line of the caption is about. Scoped to the landing hero:
     the chapter pages reuse .landing-scene for their own four images, and
     they are meant to keep all of them. */
  .screen--hero .landing-scene:not(.landing-scene--bucha) { display: none; }
  .landing-scenes { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .landing-scene img { object-position: center; }
  .landing-shade {
    background:
      linear-gradient(0deg, rgba(7,10,16,.97), rgba(7,10,16,.62) 58%, rgba(7,10,16,.86)),
      linear-gradient(90deg, rgba(7,10,16,.6), rgba(7,10,16,.35));
  }

  .screen-inner { padding: clamp(3.2rem, 8vh, 4.5rem) 0; }
  /* clear the fixed site-nav before the hero content starts */
  .hero-inner { gap: 1.8rem; padding: 4.6rem 0 2rem; }

  .landing-intro h1 { font-size: clamp(2.35rem, 10.5vw, 3.4rem); line-height: .92; margin: .7rem 0 .9rem; }
  .landing-intro .landing-fr { font-size: clamp(1rem, 4.4vw, 1.15rem); }
  .landing-connection { margin-top: 1.25rem; gap: .6rem; }
  .landing-connection p { font-size: .95rem; line-height: 1.46; }

  .hero-cue { padding: .5rem 1rem .55rem; }

  .screen-head h2 { font-size: clamp(1.95rem, 8.6vw, 2.6rem); }
  .screen-head .landing-fr { font-size: 1.05rem; }
  .screen-lede { font-size: .98rem; line-height: 1.48; }

  .screen--text h2 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .screen--text .landing-fr { font-size: 1rem; }
  .screen--text .screen-lede { margin-top: 1.4rem; }

  /* The tricolour would sit under the text on a phone — tuck it into the corner.
     A 168px flag loses too much to the desktop 46% left fade to read as a flag,
     so start the fade much later here. */
  .chapters-flag {
    width: 168px; opacity: .22; top: 4.6rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%),
                        linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 16%),
                        linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  }

  .chapter-list { margin-top: 1.9rem; }
  .closing { margin-top: 2.2rem; padding-top: 1.4rem; font-size: 1.08rem; }
  .closing.landing-fr { margin-top: .7rem; font-size: .98rem; }
  .closing-attr { margin-top: .7rem; }

  /* stack the number above the copy so nothing is squeezed into a column */
  .chapter { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; }
  .chapter-title { font-size: 1.32rem; }
  .chapter-title.landing-fr { font-size: 1rem; }
  .chapter-why { font-size: .95rem; line-height: 1.46; }

  .cabinet-cta { font-size: 1.2rem; }
  .landing-credit { font-size: .6rem; line-height: 1.7; }
  .landing-sources-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue, .chapter, .cabinet-door { transition: none; }
}