/* ============================================================
   School History — the CIRS archive
   ------------------------------------------------------------
   Scoped to body.history. The page is built from tools/history.py.

   The journey is one document in reading order, in two arrangements:

   FLOW  the default, and what a phone, a short window, reduced
         motion, a failed WebGL context and a page without
         scripting all get: an editorial column of years,
         headings, text and the archive's own photographs.
   LIVE  html.hj-live, set by assets/js/history-journey.js on a
         wide, tall window with motion allowed, once the first
         WebGL frame has drawn. A fixed canvas behind the page
         carries the camera path through the photographs
         (history-world.js); each moment's text holds in the left
         column while the camera moves, and each photograph's
         caption is set beside its plate.

   Colour: the site's plum ground, ivory type, and gold held back
   to dates. The archive's images keep their own colour; nothing
   here tints them.
   ============================================================ */

body.history{
  --hx-deep:    var(--dark-ink);
  --hx-char:    var(--dark-deep);
  --hx-char-2:  var(--dark);
  --hx-ivory:   var(--rule-soft);
  --hx-paper:   var(--paper-3);
  --hx-ivory-soft: rgba(238,233,222,.82);
  --hx-ivory-mute: rgba(238,233,222,.66);
  --hx-gold:    var(--gold);     /* 8.4:1 on --hx-char */
  --hx-gold-ink:var(--label);     /* 5.6:1 on --hx-paper */
  --hx-rule:    rgba(238,233,222,.16);
  --hx-ink:     var(--ink);     /* type on ivory */
  --hx-ink-soft:var(--ink-soft);
  background:var(--hx-char);
  color:var(--hx-ivory);
}
body.history main{ background:var(--hx-char); }

body.history .hx-label{
  margin:0 0 var(--space-4);
  font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--hx-gold);
}
body.history :is(.hj a, .hx-filter, .hx-card, .hx-dialog button, .hx-archive a):focus-visible{
  outline:2px solid var(--hx-gold); outline-offset:3px;
}

/* ============================================================
   1. The journey — FLOW (the default)
   ============================================================ */
body.history .hj{
  --pad:max(clamp(20px,6.5vw,128px), calc((100% - 1560px) / 2));
  position:relative;
}
body.history .hj-canvas{ display:none; }

/* ---- the opening: a small name, a large year, nothing else ---------- */
body.history .hj-intro{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(112px,16vh,160px) var(--pad) clamp(96px,14vh,140px);
}
body.history .hj-intro__mark{
  margin:0; font-family:var(--font-body); font-size:var(--fs-sm); letter-spacing:.02em;
  color:var(--hx-ivory-mute);
}
body.history .hj-intro__title{
  margin:6px 0 0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.55rem,2.3vw,2.2rem); line-height:1.1; color:var(--hx-ivory);
}
body.history .hj-intro__year{
  margin:clamp(28px,6vh,64px) 0 0 -.05em;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(5.5rem,19vw,17rem); line-height:.84; letter-spacing:-.035em;
  color:var(--hx-ivory);
}
body.history .hj-intro__lede{
  margin:clamp(28px,5vh,48px) 0 0; max-width:30rem;
  font-family:var(--font-editorial); font-size:var(--fs-lead); line-height:1.5; color:var(--hx-ivory-soft);
}
body.history .hj-intro__skip{ margin:18px 0 0; font-family:var(--font-body); font-size:var(--fs-sm); }
body.history .hj-intro__skip a,
body.history .hj-more,
body.history .hj-end__links a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--hx-ivory); text-decoration:underline; text-decoration-color:rgba(238,233,222,.4);
  text-underline-offset:5px; text-decoration-thickness:1px;
  transition:text-decoration-color .25s var(--e), color .25s var(--e);
}
body.history :is(.hj-intro__skip a, .hj-more, .hj-end__links a):hover{ text-decoration-color:var(--hx-ivory); }
body.history .hj-intro__cue{
  position:absolute; left:var(--pad); bottom:clamp(24px,5vh,44px); margin:0;
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.04em; color:var(--hx-ivory-mute);
  transition:opacity .5s var(--e);
}
body.history .hj-intro__cue::before{ content:""; width:36px; height:1px; background:currentColor; }
html.hj-scrolled body.history .hj-intro__cue{ opacity:0; }

/* ---- the index of moments ------------------------------------------- */
body.history .hj-index ol{
  display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; padding:0 var(--pad) 24px; list-style:none;
}
body.history .hj-index a{
  display:inline-flex; align-items:center; gap:10px; min-height:36px;
  font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.04em;
  color:var(--hx-ivory-mute); text-decoration:none; transition:color .3s var(--e);
}
body.history .hj-index a::before{
  content:""; width:0; height:1px; background:currentColor; transition:width .4s var(--e2);
}
body.history .hj-index a:hover{ color:var(--hx-ivory); }
body.history .hj-index a[aria-current]{ color:var(--hx-ivory); }
body.history .hj-index a[aria-current]::before{ width:16px; }

/* ---- a moment -------------------------------------------------------- */
body.history .hj-scene{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,5vw,56px);
  padding:clamp(72px,12vh,128px) var(--pad);
  scroll-margin-top:72px;
}
body.history .hj-scene--quiet{ padding-block:clamp(120px,22vh,220px); }
body.history .hj-text{ max-width:34rem; }
body.history .hj-year{
  margin:0 0 18px; font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.7rem,6.6vw,5.4rem); line-height:.95; letter-spacing:-.02em; color:var(--hx-ivory);
}
/* Bodoni Moda has no rupee sign; Literata, the editorial face, sets it. */
body.history .hj-big{
  margin:-4px 0 12px -.04em; font-family:"Bodoni Moda", "Literata", Georgia, serif; font-weight:400;
  font-size:clamp(6rem,30vw,13rem); line-height:.9; color:var(--hx-ivory-soft);
}
body.history .hj-head{
  margin:0 0 16px; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.55rem,2.4vw,2.3rem); line-height:1.12; color:var(--hx-ivory);
}
body.history .hj-copy{
  margin:0 0 14px; font-family:var(--font-editorial); font-size:clamp(1.02rem,.3vw + .95rem,1.14rem);
  line-height:1.62; color:var(--hx-ivory-soft);
}
body.history .hj-actions{ display:flex; flex-wrap:wrap; gap:0 24px; margin:10px 0 0; font-family:var(--font-body); font-size:var(--fs-sm); }

body.history .hj-facts{ display:flex; flex-wrap:wrap; gap:14px 36px; margin:22px 0 18px; }
body.history .hj-facts div{ display:flex; flex-direction:column-reverse; }
body.history .hj-facts dd{
  margin:0; font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; color:var(--hx-ivory);
}
body.history .hj-facts dt{ margin-top:6px; font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.03em; color:var(--hx-ivory-mute); }

body.history .hj-notes{ margin:20px 0 6px; padding:0; list-style:none; border-top:1px solid var(--hx-rule); }
body.history .hj-notes li{ border-bottom:1px solid var(--hx-rule); }
body.history .hj-notes a{
  display:grid; grid-template-columns:8.2rem minmax(0,1fr); gap:14px; align-items:baseline;
  padding:9px 0; min-height:44px; box-sizing:border-box;
  color:var(--hx-ivory-soft); text-decoration:none; transition:color .25s var(--e);
}
body.history .hj-notes a:hover{ color:var(--hx-ivory); }
body.history .hj-notes a:hover .hj-notes__what{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(238,233,222,.45); }
body.history .hj-notes__when{ font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.03em; color:var(--hx-gold); }
body.history .hj-notes__what{ font-family:var(--font-body); font-size:.95rem; line-height:1.45; }

/* ---- photographs, in the column -------------------------------------- */
body.history .hj-plates{ display:grid; gap:clamp(28px,4vw,48px); align-content:start; }
body.history .hj-fig{ margin:0; }
body.history .hj-fig img{
  display:block; width:min(100%, calc(74svh * var(--ar))); height:auto;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
body.history .hj-cap{
  margin-top:12px; max-width:36rem;
  font-family:var(--font-body); font-size:.86rem; line-height:1.5; color:var(--hx-ivory-mute);
}

/* The school now: the campus from the air, edge to edge. */
body.history .hj-scene--now .hj-plates{ margin-inline:calc(-1 * var(--pad)); }
body.history .hj-scene--now .hj-fig img{ width:100%; box-shadow:none; }
body.history .hj-scene--now .hj-cap{ padding-inline:var(--pad); }

/* ---- the close ------------------------------------------------------- */
body.history .hj-end__frame .hj-fig{ margin:0; }
body.history .hj-end__frame img{ display:block; width:100%; height:auto; }
body.history .hj-end__frame .hj-cap{ padding-inline:var(--pad); }
body.history .hj-end__text{ padding:clamp(72px,12vh,140px) var(--pad) clamp(88px,14vh,160px); }
body.history .hj-end__span{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem,7vw,6.4rem); line-height:1; letter-spacing:-.02em; color:var(--hx-ivory);
}
body.history .hj-end__span span[aria-hidden]{ color:var(--hx-gold); padding-inline:.12em; }
body.history .hj-end__line{
  margin:clamp(20px,3vh,32px) 0 0; max-width:38rem;
  font-family:var(--font-editorial); font-size:var(--fs-lead); line-height:1.55; color:var(--hx-ivory-soft);
}
body.history .hj-end__links{ display:flex; flex-wrap:wrap; gap:0 28px; margin:24px 0 0; font-family:var(--font-body); font-size:var(--fs-sm); }

/* A wider window in the column arrangement (reduced motion, no WebGL):
   the text and its photographs side by side. */
@media (min-width:1000px){
  body.history .hj-scene{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:start; }
  body.history .hj-text{ position:sticky; top:120px; }
  body.history .hj-scene--now{ grid-template-columns:minmax(0,1fr); }
  body.history .hj-scene--now .hj-text{ position:static; }
  body.history .hj-plates{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
  body.history .hj-plates:has(> :only-child){ grid-template-columns:minmax(0,1fr); }
  body.history .hj-index{
    position:fixed; right:clamp(14px,1.8vw,30px); top:50%; z-index:30;
    transform:translateY(-50%); opacity:0; visibility:hidden;
    transition:opacity .5s var(--e), visibility 0s linear .5s;
  }
  body.history .hj-index ol{ flex-direction:column; align-items:flex-end; gap:0; padding:0; }
  body.history .hj-index a{ flex-direction:row-reverse; }
  html.hj-inview body.history .hj-index{ opacity:1; visibility:visible; transition:opacity .5s var(--e); }
  /* Without scripting the index cannot follow the page; it stays a row. */
  html:not(.hx-js) body.history .hj-index{ position:static; transform:none; opacity:1; visibility:visible; }
  html:not(.hx-js) body.history .hj-index ol{ flex-direction:row; padding:0 var(--pad) 24px; gap:4px 18px; }
}

/* Arrival: the name first, then the year. Short, and nothing waits on it. */
@media (prefers-reduced-motion:no-preference){
  html.hx-js body.history .hj-intro > *{ animation:hj-in .9s var(--e) both; }
  html.hx-js body.history .hj-intro__title{ animation-delay:.08s; }
  html.hx-js body.history .hj-intro__year{ animation:hj-mask 1.1s var(--e2) .18s both; }
  html.hx-js body.history .hj-intro__lede{ animation-delay:.45s; }
  html.hx-js body.history .hj-intro__skip,
  html.hx-js body.history .hj-intro__cue{ animation-delay:.6s; }
  /* The column arrangement with motion: each moment settles as it comes
     into view — opacity only, and the year uncovered from the top. */
  html.hj-flow body.history .hj-scene:not(.is-in) :is(.hj-head, .hj-copy, .hj-facts, .hj-notes, .hj-actions, .hj-big, .hj-fig){ opacity:0; }
  html.hj-flow body.history .hj-scene:not(.is-in) .hj-year{ clip-path:inset(0 0 100% 0); }
  html.hj-flow body.history .hj-scene :is(.hj-head, .hj-copy, .hj-facts, .hj-notes, .hj-actions, .hj-big, .hj-fig){ transition:opacity .8s var(--e) .12s; }
  html.hj-flow body.history .hj-scene .hj-year{ transition:clip-path .9s var(--e2); }
}
@keyframes hj-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes hj-mask{ from{ opacity:0; clip-path:inset(0 0 100% 0); } to{ opacity:1; clip-path:inset(0 0 -10% 0); } }

/* ============================================================
   2. The journey — LIVE (html.hj-live)
   The canvas is fixed behind the page; everything else is still
   ordinary markup scrolling over it. history-journey.js writes
   --o, --m and --y on each moment's text, and each caption's place.
   ============================================================ */
html.hj-live body.history .hj-canvas{
  display:block; position:fixed; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none;
}
html.hj-live body.history .hj-canvas.is-off{ visibility:hidden; }
html.hj-live body.history .hj > :not(.hj-canvas){ position:relative; z-index:1; }
html.hj-live body.history .hj > .hj-index{ position:fixed; z-index:30; }

html.hj-live body.history .hj-scene{
  display:block; min-height:155svh; padding:0 var(--pad);
}
html.hj-live body.history #chapter-rupee{ min-height:165svh; }
html.hj-live body.history .hj-scene--quiet{ min-height:190svh; padding:0 var(--pad); }
html.hj-live body.history #chapter-opening{ min-height:185svh; }
html.hj-live body.history #chapter-first{ min-height:170svh; }
html.hj-live body.history .hj-scene--now{ min-height:165svh; }
html.hj-live body.history .hj-text{
  position:sticky; top:var(--top, 26svh); max-width:min(27rem, 31vw);
  opacity:var(--o, 0);
  clip-path:inset(0 0 calc(var(--m, 1) * 100%) 0);
  transform:translate3d(0, calc(var(--y, 0) * 1px), 0);
}
/* Out of view but still in the tab order: focusing a link here brings its
   moment to the screen (history-journey.js). */
html.hj-live body.history .hj-text[data-hidden]{ pointer-events:none; }
html.hj-live body.history .hj-scene--quiet .hj-text{ max-width:min(24rem, 30vw); }
html.hj-live body.history .hj-year{ font-size:clamp(2.6rem,4.4vw,4.6rem); }
html.hj-live body.history .hj-big{ display:none; }
/* The opening's date is carved into the drawing in the scene; the page
   keeps it for assistive technology rather than setting it twice. */
html.hj-live body.history #chapter-opening .hj-year{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
html.hj-live body.history .hj-notes a{ padding:6px 0; min-height:36px; }
html.hj-live body.history .hj-notes__what{ font-size:.88rem; }
html.hj-live body.history .hj-facts{ margin:16px 0 14px; }
html.hj-live body.history .hj-facts dd{ font-size:clamp(1.6rem,2.4vw,2.2rem); }

/* The photographs are drawn in the scene; their images stay in the page
   for assistive technology and their captions are set beside the plates. */
html.hj-live body.history .hj-plates{ position:absolute; top:0; left:0; width:0; height:0; margin:0; display:block; }
html.hj-live body.history .hj-plates .hj-fig img{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); box-shadow:none;
}
html.hj-live body.history .hj-plates .hj-fig{
  position:fixed; left:0; top:0; z-index:2; width:var(--w, 240px);
  transform:translate3d(var(--x, -999px), var(--yy, -999px), 0);
  opacity:var(--co, 0); pointer-events:none;
}
html.hj-live body.history .hj-plates .hj-cap{
  margin:0; max-width:none; padding:0; font-size:.8rem; line-height:1.45; color:var(--hx-ivory-soft);
}

/* The close: the last plate becomes the photograph itself. */
html.hj-live body.history .hj-end__stage{ height:210svh; }
html.hj-live body.history .hj-end__frame{
  position:sticky; top:0; height:100svh; overflow:hidden;
}
html.hj-live body.history .hj-end__frame .hj-fig{ position:absolute; inset:0; }
html.hj-live body.history .hj-end__frame img{
  position:absolute; left:0; top:0; max-width:none; object-fit:cover; box-shadow:none;
  width:var(--fw, 1px); height:var(--fh, 1px);
  transform:translate3d(var(--fx, 0px), var(--fy, 0px), 0);
  opacity:var(--fo, 0);
}
html.hj-live body.history .hj-end__frame .hj-cap{
  position:absolute; left:var(--pad); bottom:clamp(20px,4vh,36px); margin:0; padding:0;
  color:rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(0,0,0,.6);
  opacity:var(--fc, 0);
}

/* ============================================================
   3. The archive
   ============================================================ */
body.history .hx-archive{
  position:relative; padding-block:clamp(72px,10vw,140px);
  background:var(--hx-char); border-top:1px solid var(--hx-rule);
  scroll-margin-top:72px;
}
body.history .hx-archive__head{ max-width:44rem; }
body.history .hx-archive__title{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.015em; color:var(--hx-ivory);
}
body.history .hx-archive__lead{ margin:var(--space-4) 0 0; font-family:var(--font-body); font-size:var(--fs-lead); line-height:1.5; color:var(--hx-ivory-soft); }

body.history .hx-filters{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-7) 0 var(--space-6); }
body.history .hx-filter{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px;
  font-family:var(--font-body); font-size:var(--fs-sm); color:var(--hx-ivory-soft);
  background:transparent; border:1px solid var(--hx-rule); border-radius:999px; cursor:pointer;
  transition:background .2s var(--e), color .2s var(--e), border-color .2s var(--e);
}
body.history .hx-filter:hover{ border-color:rgba(238,233,222,.5); color:var(--hx-ivory); }
body.history .hx-filter[aria-pressed="true"]{ background:var(--hx-ivory); color:var(--hx-ink); border-color:var(--hx-ivory); }
body.history .hx-filter__n{ font-size:.74rem; opacity:.72; }

body.history .hx-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px);
  margin:0; padding:0; list-style:none;
}
body.history .hx-item[hidden]{ display:none; }
body.history .hx-rec{ height:100%; scroll-margin-top:96px; }
body.history .hx-card{
  display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%; height:100%;
  padding:0; text-align:left; background:none; border:0; color:inherit; cursor:pointer;
  font:inherit;
}
body.history .hx-card__thumb{
  display:grid; place-items:center; aspect-ratio:4/5; margin-bottom:var(--space-2);
  background:var(--hx-char-2); overflow:hidden;
  transition:transform .35s var(--e2), box-shadow .35s var(--e);
}
body.history .hx-card__thumb img{
  display:block; max-width:84%; max-height:84%; width:auto; height:auto; object-fit:contain;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
body.history .hx-card__thumb--type{ background:var(--hx-paper); color:var(--hx-ink); }
body.history .hx-card__thumb--type span{
  padding:0 12%; text-align:center;
  font-family:var(--font-display); font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.1;
}
body.history .hx-card:hover .hx-card__thumb{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.35); }
body.history .hx-card__when{ font-family:var(--font-ui); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--hx-gold); }
body.history .hx-card__title{ font-family:var(--font-display); font-size:1.08rem; line-height:1.3; color:var(--hx-ivory); }

/* Without scripting, each record's detail sits under its card. */
body.history .hx-rec__detail{ margin-top:var(--space-3); font-size:var(--fs-sm); color:var(--hx-ivory-soft); }
body.history .hx-rec__detail .hx-rec__meta,
body.history .hx-rec__detail .hx-rec__title{ display:none; }
html.hx-js body.history .hx-grid .hx-rec__detail{ display:none; }
body.history .hx-rec__figure{ margin:0 0 var(--space-4); }
body.history .hx-rec__figure img{ display:block; width:auto; max-width:100%; height:auto; }
body.history .hx-rec__figure figcaption{ margin-top:var(--space-2); font-size:var(--fs-xs); line-height:1.5; color:var(--hx-ivory-mute); }
body.history .hx-rec__body{ margin:0; line-height:1.6; }
body.history .hx-rec__source{ margin:var(--space-3) 0 0; font-size:var(--fs-xs); line-height:1.55; color:var(--hx-ivory-mute); }
body.history .hx-rec__source span{ display:block; letter-spacing:.14em; text-transform:uppercase; color:var(--hx-gold); }
body.history .hx-rec__source a,
body.history .hx-rec__body a{ color:var(--hx-ivory); text-decoration:underline; text-underline-offset:3px; }
body.history .hx-archive__more{ margin:var(--space-8) 0 0; font-family:var(--font-body); color:var(--hx-ivory-soft); }
body.history .hx-archive__more a{ color:var(--hx-ivory); text-decoration:underline; text-underline-offset:3px; }

/* ---- the record's own view ------------------------------------------ */
body.history .hx-dialog{
  width:min(100% - 24px, 980px); max-height:calc(100dvh - 24px); margin:auto; padding:0;
  color:var(--hx-ink); background:var(--hx-paper); border:0; border-radius:3px;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  overscroll-behavior:contain;
}
body.history .hx-dialog::backdrop{ background:rgba(17,17,15,.82); }
body.history .hx-dialog__panel{ position:relative; padding:clamp(24px,4vw,48px); }
body.history .hx-dialog__close{
  position:absolute; top:10px; right:10px; width:44px; height:44px; display:grid; place-items:center;
  color:var(--hx-ink); background:transparent; border:0; border-radius:50%; cursor:pointer;
}
body.history .hx-dialog__close:hover{ background:rgba(24,24,21,.08); }
body.history .hx-dialog .hx-rec__detail{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0 var(--space-7); margin:0;
  font-size:1rem; color:var(--hx-ink-soft);
}
body.history .hx-dialog .hx-rec__detail.has-figure{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
body.history .hx-dialog .hx-rec__figure{ grid-row:1 / span 4; margin:0; }
body.history .hx-dialog .hx-rec__figure img{ max-height:min(70dvh, 760px); box-shadow:0 12px 30px rgba(0,0,0,.18); }
body.history .hx-dialog .hx-rec__figure figcaption{ color:var(--hx-ink-soft); }
body.history .hx-dialog .hx-rec__meta{
  display:block; margin:0 0 var(--space-3); padding-right:44px;
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--hx-gold-ink);
}
body.history .hx-dialog .hx-rec__title{
  display:block; margin:0 0 var(--space-4); padding-right:44px;
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.08; color:var(--hx-ink);
}
body.history .hx-dialog .hx-rec__body{ font-family:var(--font-body); font-size:1.08rem; line-height:1.6; color:var(--hx-ink); max-width:60ch; }
body.history .hx-dialog .hx-rec__source{ color:var(--hx-ink-soft); padding-top:var(--space-4); border-top:1px solid rgba(24,24,21,.16); margin-top:var(--space-5); }
body.history .hx-dialog .hx-rec__source span{ color:var(--hx-gold-ink); }
body.history .hx-dialog .hx-rec__source a,
body.history .hx-dialog .hx-rec__body a{ color:var(--hx-ink); }
body.history .hx-dialog__step{
  display:flex; justify-content:space-between; gap:var(--space-4);
  margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid rgba(24,24,21,.16);
}
body.history .hx-dialog__step button{
  min-height:44px; padding:8px 0; font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600;
  color:var(--hx-ink); background:none; border:0; border-bottom:1px solid rgba(24,24,21,.3); cursor:pointer;
}
body.history .hx-dialog__step button[disabled]{ opacity:.35; cursor:default; }
@media (max-width:760px){
  body.history .hx-dialog .hx-rec__detail.has-figure{ grid-template-columns:minmax(0,1fr); }
  body.history .hx-dialog .hx-rec__figure{ grid-row:auto; margin-bottom:var(--space-5); order:3; }
  body.history .hx-dialog .hx-rec__figure img{ max-height:56dvh; }
}

/* ============================================================
   4. The film
   ============================================================ */
body.history .hx-film{ padding-block:clamp(72px,9vw,128px); background:var(--hx-deep); border-top:1px solid var(--hx-rule); }
body.history .hx-film__inner{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,80px); align-items:center; }
body.history .hx-film__title{ margin:0; font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:1.04; color:var(--hx-ivory); }
body.history .hx-film__lead{ margin:var(--space-4) 0 0; max-width:40ch; font-family:var(--font-body); font-size:var(--fs-lead); line-height:1.5; color:var(--hx-ivory-soft); }
body.history .hx-film .filmwin{ margin:0; width:100%; max-width:none; border-color:var(--hx-rule); background:var(--hx-char-2); }
body.history .hx-film .filmwin__play{ background:var(--hx-ivory); color:var(--hx-ink); }
body.history .hx-film .filmwin:hover .filmwin__play{ background:#fff; }
body.history .hx-film .filmwin:focus-visible{ outline:2px solid var(--hx-gold); outline-offset:4px; }

body.history .closing-scene__note{
  max-width:40rem; margin:var(--space-5) 0 0;
  font-family:var(--font-body); font-size:var(--fs-lead); line-height:1.5; color:rgba(255,255,255,.86);
}

/* ============================================================
   Narrow windows
   ============================================================ */
@media (max-width:900px){
  body.history .hx-film__inner{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  body.history .hx-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  body.history .hx-card__title{ font-size:1rem; }
  body.history .hj-notes a{ grid-template-columns:minmax(0,1fr); gap:2px; }
}

/* ---- The column arrangement on a phone or narrow window ---------------
   The index of moments is a compact grid, every moment on one screen and
   numbered, instead of a row that ran off the side. While the journey is
   read, a line under the header names the moment on screen (written by
   history-journey.js). The wide window keeps its side index and the live
   camera, unchanged. */
body.history .hj-reading{ display:none; }
@media (max-width:999.98px){
  body.history .hj-index{ counter-reset:hjm; padding:0 var(--pad) 28px; }
  body.history .hj-index::before{
    content:"The history in moments"; display:block; margin:0 0 12px;
    font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
    color:var(--hx-ivory-mute);
  }
  body.history .hj-index ol{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0;
  }
  body.history .hj-index li{ counter-increment:hjm; }
  body.history .hj-index a{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    width:100%; min-height:52px; padding:8px 10px;
    border:1px solid rgba(244,240,230,.18); border-radius:10px;
    font-size:.95rem; color:var(--hx-ivory-soft, var(--hx-ivory-mute));
  }
  body.history .hj-index a::before{
    content:counter(hjm, decimal-leading-zero); width:auto; height:auto; background:none;
    font-size:.7rem; letter-spacing:.06em; color:var(--hx-ivory-mute);
  }
  body.history .hj-index a[aria-current]{ border-color:rgba(244,240,230,.6); color:var(--hx-ivory); }
  body.history .hj-index a[aria-current]::before{ width:auto; }

  html.hj-flow body.history .hj-reading{
    display:flex; align-items:baseline; gap:10px;
    position:fixed; z-index:40; left:50%; top:calc(env(safe-area-inset-top, 0px) + 64px);
    transform:translate(-50%,-8px); max-width:calc(100% - 2 * var(--pad)); margin:0;
    padding:7px 14px; border-radius:999px;
    background:rgba(20,16,26,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 6px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(244,240,230,.14);
    font-family:var(--font-body); font-size:.78rem; line-height:1.2; color:var(--hx-ivory);
    white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s var(--e), transform .35s var(--e), visibility 0s linear .35s;
  }
  html.hj-flow body.history .hj-reading b{ font-weight:600; color:var(--hx-ivory-mute); }
  html.hj-flow body.history .hj-reading span{ overflow:hidden; text-overflow:ellipsis; }
  html.hj-flow body.history .hj-reading span:last-child{ min-width:0; }
  html.hj-flow.hj-inview body.history .hj-reading{
    opacity:1; visibility:visible; transform:translate(-50%,0);
    transition:opacity .35s var(--e), transform .35s var(--e);
  }
}