@import url("../fonts/fonts.css");

/* ==========================================================================
   M.CT.M MUN 2026
   Print-newspaper editorial language. Light theme only: the whole page is
   emulating newsprint, which is the one case where a single locked mode is
   the correct call rather than a shortcut.
   Radius system: all-sharp (0) everywhere. Newspapers have no rounded corners.
   Accent: one green, #177A4B, taken from the school emblem.
   ========================================================================== */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

/* --------------------------------------------------------------- tokens */
:root {
  /* paper */
  /* warmed toward the washi so the cover and the inside pages read as the
     same family of stock rather than two unrelated papers */
  --paper:        #eae6dc;
  --paper-hi:     #fbf9f4;
  /* This is the hairline colour, not a surface. At #d8d3c6 it sat within a
     shade of the textured paper behind it and every divider vanished. */
  --paper-lo:     #c8c0ac;
  --paper-edge:   #f5f2ea;

  /* ink */
  --ink:          #16181a;
  --ink-soft:     #4d5153;
  --ink-faint:    #55595b;   /* 5.7:1 on newsprint; the lighter grey failed AA */

  /* brand */
  --green:        #177a4b;
  --green-deep:   #0c3d26;
  --green-tint:   #e3ece7;

  /* type */
  --f-black:  "UnifrakturMaguntia", "Times New Roman", serif;
  --f-punch:  "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-display:"Playfair Display", Georgia, serif;
  --f-body:   "Libre Baskerville", Georgia, "Times New Roman", serif;

  /* rhythm */
  --wrap: 1320px;
  --gut: clamp(1.15rem, 4vw, 3.25rem);
  --sect: clamp(4.5rem, 9vw, 8.5rem);

  /* the strip that tears out and rolls away */
  --roll-angle: 30deg;
  --strip-width: 500px;

  /* Real newsprint, seamless. Cut from the supplied stock texture: the file
     as delivered carries a Dreamstime watermark, so the tile is lifted from
     the clean region above it and re-tiled. See README. */
  --paper-tex: url("../img/newsprint.jpg");
  --washi-tex: url("../img/washi.jpg");
  /* The original procedural grain, kept in the mix. The photographic tiles
     carry the blotches and the stains; this puts the fine fibre back on top,
     at a frequency no JPEG tile can hold without artefacts. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.28'/%3E%3C/svg%3E");
  --grain-size: 260px;
  --tex-size: 384px;
  /* A second pass at a size that shares no factor with the first. The tile
     is only 384px, which reads as an obvious grid across a wide screen; two
     coprime periods push the visible repeat out of sight. */
  --tex-size-2: 553px;
  --tex-veil: rgba(250, 246, 237, 0.38);
}

/* One textured paper surface, used everywhere paper appears. The veil rides
   over the multiplied texture so the sheet stays light instead of muddy. */
.paper-tex {
  background-color: var(--paper);
  background-image: linear-gradient(var(--tex-veil), var(--tex-veil)),
                    var(--grain), var(--paper-tex), var(--paper-tex);
  background-size: auto, var(--grain-size) var(--grain-size),
                   var(--tex-size) var(--tex-size),
                   var(--tex-size-2) var(--tex-size-2);
  background-blend-mode: normal, multiply, multiply, soft-light;
}

/* ----------------------------------------------------------------- base */
body {
  font-family: var(--f-body);
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(var(--tex-veil), var(--tex-veil)),
                    var(--grain), var(--paper-tex), var(--paper-tex);
  background-size: auto, var(--grain-size) var(--grain-size),
                   var(--tex-size) var(--tex-size),
                   var(--tex-size-2) var(--tex-size-2);
  background-blend-mode: normal, multiply, multiply, soft-light;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 400; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--green); color: var(--paper-hi); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* the gallery grid wants more room than a column of prose does */
.wrap--wide { max-width: 1680px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper-hi);
  padding: 0.75rem 1.25rem;
  font-family: var(--f-body);
  font-size: 0.8rem;
}
.skip:focus { left: 0; }

/* newspaper rules */
.rule       { border-top: 1px solid var(--ink); }
.rule--double {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 5px;
}

.kicker {
  font-family: var(--f-body);
  font-size: 0.62rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ============================================================ THE ROLL ==
   Loading screen. The whole viewport is one sheet of newsprint carrying the
   masthead in ink. The sheet rolls itself up along a 30 degree diagonal,
   takes the ink lettering with it, and exits, leaving the green underneath
   with the same lettering in cream.

   The roll is drawn on a canvas rather than in CSS. CSS 3D can rotate a
   plane but it cannot bend one, and a page that curls has to bend: every
   slice sits at a different angle on the cylinder. The script projects each
   slice individually. See main.js.
   ====================================================================== */
.load { display: none; }

.js .load {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--green-deep);
  overflow: hidden;
}

.js.is-loading, .js.is-loading body { overflow: hidden; height: 100%; }

/* what the sheet is covering */
.load__under {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--gut);
  text-align: center;
}
.load__crest { width: clamp(66px, 7.5vw, 104px); margin: 0 auto 1.3rem; }
.load__word {
  font-family: var(--f-punch);
  font-size: clamp(2.6rem, 17vw, 19rem);
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-hi);
}
.load__sub {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.9rem, 2.4vw, 1.8rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  padding-bottom: 0.18em;      /* descender clearance for the italic 'p' */
  margin-top: 0.7rem;
  color: #9fd9ba;
}

/* Plain paper covers the green from the very first frame, before the fonts
   and the texture have arrived. The canvas cross-fades over it once the
   sheet has actually been painted, which is when the masthead appears. */
.load__paper {
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  background-image: linear-gradient(var(--tex-veil), var(--tex-veil)),
                    var(--grain), var(--paper-tex), var(--paper-tex);
  background-size: auto, var(--grain-size) var(--grain-size),
                   var(--tex-size) var(--tex-size),
                   var(--tex-size-2) var(--tex-size-2);
  background-blend-mode: normal, multiply, multiply, soft-light;
  transition: opacity 0.35s ease;
}
.load__paper.is-out { opacity: 0; }

/* the sheet itself */
.load__sheet {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.load__sheet.is-in { opacity: 1; }

/* real progress, read out small and low. Sits on paper first, then green. */
.load__count {
  position: absolute;
  left: var(--gut);
  bottom: calc(var(--gut) + 0.1rem);
  font-family: var(--f-display);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  transition: color 0.7s ease, opacity 0.4s ease;
}
.load.is-rolling .load__count { color: #9fd9ba; }
.load.is-gone .load__count { opacity: 0; }

.load.is-gone {
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

/* ------------------------------------------------------------------ nav */
/* Transparent while the washi frame is on screen, then the newsprint bar
   fades in behind it. Driven by an IntersectionObserver on a sentinel, not
   a scroll listener. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--paper);
  background-image: linear-gradient(var(--tex-veil), var(--tex-veil)),
                    var(--grain), var(--paper-tex), var(--paper-tex);
  background-size: auto, var(--grain-size) var(--grain-size),
                   var(--tex-size) var(--tex-size),
                   var(--tex-size-2) var(--tex-size-2);
  background-blend-mode: normal, multiply, multiply, soft-light;
  box-shadow: inset 0 -3px 0 0 var(--ink), 0 2px 0 0 var(--ink);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.nav.is-stuck::before { opacity: 1; }
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__crest { width: 34px; }
.nav__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2.1rem);
}
.nav__link {
  font-family: var(--f-body);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.nav__link:hover { border-bottom-color: var(--green); color: var(--green); }
/* Scoped away from the solid CTA: unscoped, this painted dark green text on
   the dark green Register button and the label vanished. */
.nav__link:not(.nav__link--cta)[aria-current="page"] {
  border-bottom-color: var(--green-deep);
  color: var(--green-deep);
}
.nav__link--cta[aria-current="page"] {
  background: var(--green);
  color: var(--paper-hi);
}
.nav__link--cta {
  background: var(--green-deep);
  color: var(--paper-hi);
  padding: 0.55rem 1.05rem;
  border-bottom: 0;
}
.nav__link--cta:hover { background: var(--green); color: var(--paper-hi); }

/* Text label rather than a drawn glyph: this project has no build step and
   so no icon package, and inventing SVG paths by hand is worse than a word. */
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  padding: 0.5rem 0.9rem;
  font-family: var(--f-body);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ----------------------------------------------------------------- hero
   One quiet full bleed frame before the site starts, the way Izanami opens.
   Their ground is a photograph; ours is Japanese paper, so the texture has
   to hold the whole frame by itself. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100dvh;
  margin-top: -68px;                   /* run the paper up behind the nav */
  padding-top: 68px;
  background-color: #fbf6ea;
  background-image:
    radial-gradient(125% 95% at 50% 6%, rgba(255, 252, 243, 0.55), rgba(150, 124, 80, 0.2) 78%),
    var(--grain), var(--washi-tex);
  background-size: auto, var(--grain-size) var(--grain-size), 860px 860px;
  background-blend-mode: soft-light, multiply, multiply;
  overflow: hidden;
}

/* out of flow, so it is not a flex child of the hero */
#nav-sentinel {
  position: absolute;
  top: 130px;
  left: 0;
  width: 1px;
  height: 1px;
}

.hero__in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  margin-block: auto;                  /* centres in whatever is left over */
  padding-inline: var(--gut);
  padding-block: clamp(2.5rem, 8vh, 6rem);
}

.hero__title {
  font-family: var(--f-punch);
  font-size: clamp(2.5rem, 7.2vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
/* scoped to the accent, not to any span: the word splitter fills this
   heading with spans and an unscoped rule turned the whole line green */
.hero__title .hero__accent { color: var(--green-deep); }

.hero__when {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.7vw, 2.1rem);
  line-height: 1.2;
  padding-bottom: 0.18em;              /* italic descender clearance */
  margin-top: 0.8rem;
  color: var(--green);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

/* the quiet meta line along the foot of the frame */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.45rem 2rem;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  padding-bottom: clamp(1.3rem, 3.5vh, 2.4rem);
  font-family: var(--f-body);
  font-size: 0.63rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border: 2px solid var(--green-deep);
  white-space: nowrap;
  transition: transform 0.15s, background-color 0.2s, color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--green-deep); color: var(--paper-hi); }
.btn--solid:hover { background: var(--green); border-color: var(--green); }
.btn--ghost { background: transparent; color: var(--green-deep); }
.btn--ghost:hover { background: var(--green-deep); color: var(--paper-hi); }

/* ---------------------------------------------------------------- phead
   Inner pages open on a short washi banner instead of the full frame, so
   every page still arrives on paper without repeating the whole overture. */
.phead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 40vh, 400px);
  margin-top: -68px;
  padding-top: 68px;
  background-color: #fbf6ea;
  background-image:
    radial-gradient(130% 120% at 20% 0%, rgba(255, 252, 243, 0.5), rgba(150, 124, 80, 0.2) 80%),
    var(--grain), var(--washi-tex);
  background-size: auto, var(--grain-size) var(--grain-size), 860px 860px;
  background-blend-mode: soft-light, multiply, multiply;
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 4px 0 0 var(--paper), 0 5px 0 0 var(--ink);
}
.phead__in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.8rem) var(--gut) clamp(1.4rem, 3.5vw, 2.4rem);
}
.phead__title {
  font-family: var(--f-punch);
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.phead__lede {
  max-width: 58ch;
  margin-top: 1rem;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------------- band
   Full bleed photograph directly under the paper: the washi frame is all
   atmosphere, so the room full of delegates has to arrive immediately. */
.band { position: relative; margin: 0; }
.band img {
  width: 100%;
  height: min(72vh, 620px);
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.05);
}
.band figcaption {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.7rem var(--gut) 0;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- section */
.sect { padding-block: var(--sect); }
.sect__head { margin-bottom: clamp(2rem, 4.5vw, 3.4rem); }
.sect__title {
  font-family: var(--f-punch);
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.sect__lede {
  max-width: 58ch;
  margin-top: 1.1rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- legacy
   Layout family: full-bleed banner quote over a stat band. */
.legacy { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.legacy__quote {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.1vw, 3.1rem);
  line-height: 1.16;
  max-width: 22ch;
}
.legacy__quote em { font-style: italic; color: var(--green); }
.legacy__body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.legacy__cols { columns: 2; column-gap: 2.2rem; column-rule: 1px solid var(--paper-lo); }
.legacy__cols p { margin-bottom: 1rem; orphans: 2; widows: 2; }
.legacy__cols p:first-child::first-letter {
  float: left;
  font-family: var(--f-punch);
  font-size: 3.4em;
  line-height: 0.76;
  padding: 0.06em 0.1em 0 0;
  color: var(--green-deep);
}

.changes { border-top: 1px solid var(--ink); }
.changes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--paper-lo);
}
.changes b {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--green-deep);
  white-space: nowrap;
}
.changes span { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.stats > div {
  background-color: var(--paper);
  background-image: linear-gradient(var(--tex-veil), var(--tex-veil)),
                    var(--grain), var(--paper-tex), var(--paper-tex);
  background-size: auto, var(--grain-size) var(--grain-size),
                   var(--tex-size) var(--tex-size),
                   var(--tex-size-2) var(--tex-size-2);
  background-blend-mode: normal, multiply, multiply, soft-light;
  padding: 1.4rem 1.2rem;
}
.stats dt {
  font-family: var(--f-punch);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 0.9;
  color: var(--green-deep);
}
.stats dd {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------- index
   The home page contents list, set like the index of a newspaper. */
.index {
  border-top: 1px solid var(--ink);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.index a {
  display: grid;
  grid-template-columns: minmax(8rem, 20%) 1fr auto;
  gap: 0.3rem 1.6rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--paper-lo);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.index a:hover, .index a:focus-visible { color: var(--green-deep); padding-left: 0.6rem; }
.index b {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.2;
}
.index span { font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }
.index em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* faculty note at the foot of the secretariat */
.sec__faculty {
  display: grid;
  grid-template-columns: minmax(8rem, 18%) 1fr;
  gap: 0.6rem 2rem;
  align-items: start;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink);
}
.sec__faculty h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--green-deep);
}
.sec__faculty p { max-width: 60ch; font-size: 0.9rem; color: var(--ink-soft); }

/* ----------------------------------------------------------- committees
   Layout family: asymmetric bento. Exactly seven cells for seven
   committees, sized by delegate count. No filler tiles. */
.comms {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.comm {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 190px;
  padding: 1.35rem;
  border: 1px solid var(--ink);
  background-color: var(--paper-hi);
  overflow: hidden;
  text-decoration: none;
}
.comm__tag {
  font-family: var(--f-punch);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--green-deep);
}
.comm__full {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}
.comm__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 0.75rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--paper-lo);
}
.comm__meta b { font-weight: 700; color: var(--green); }

/* the two photo cells carry the visual variation for the grid */
.comm--shot { color: var(--paper-hi); border-color: var(--ink); }
.comm--shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.8) contrast(1.05) brightness(0.72);
}
/* The scrim has to carry the caption on its own: these classroom photographs
   are bright and evenly lit, so a soft corner wash left the text unreadable.
   Bottom-anchored and near-opaque where the type actually sits. */
.comm--shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(12, 61, 38, 0.97) 0%,
    rgba(12, 61, 38, 0.93) 45%,
    rgba(12, 61, 38, 0.78) 78%,
    rgba(12, 61, 38, 0.64) 100%);
}
.comm--shot > * { position: relative; z-index: 1; }
.comm--shot .comm__tag  { color: var(--paper-hi); }
.comm--shot .comm__full { color: #cfe4d8; }
.comm--shot .comm__meta { color: var(--paper-hi); border-top-color: rgba(250, 249, 247, 0.3); }
.comm--shot .comm__meta b { color: #9fd9ba; }

.c1 { grid-column: span 7; grid-row: span 2; }
.c2 { grid-column: span 5; }
.c3 { grid-column: span 5; }
.c4 { grid-column: span 5; }
.c5 { grid-column: span 4; }
.c6 { grid-column: span 3; }
.c7 { grid-column: span 12; min-height: 240px; }

/* --------------------------------------------------------------- records
   One entry per committee. Reference content, so the format repeats on
   purpose: a delegate scanning for their own room should not have to relearn
   the layout seven times. */
.recs { border-top: 3px solid var(--ink); }
.rec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.7rem, 4vw, 2.7rem) 0;
  border-bottom: 1px solid var(--paper-lo);
}
.rec__tag {
  font-family: var(--f-punch);
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--green-deep);
}
.rec__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  margin-top: 0.45rem;
}
.rec__desc {
  max-width: 46ch;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.rec__data {
  display: grid;
  grid-template-columns: minmax(6.5rem, 32%) 1fr;
  gap: 0.6rem 1.2rem;
  align-content: start;
}
.rec__data dt {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.18em;
}
.rec__data dd { font-size: 0.88rem; line-height: 1.5; }
.rec__data dd b { font-weight: 700; color: var(--green-deep); }

/* ---------------------------------------------------------------- gallery
   White and green, as asked: the one section that steps off the newsprint
   onto clean stock, still inside the same light theme. */
.gal { background: var(--paper-hi); }
.gal .sect__title { color: var(--green-deep); }
.gal .sect__lede  { color: var(--ink-soft); }

/* Tiles carry the page: tight gutters, tall rows, barely any paper showing
   between them. At rest every photograph is held in the same grey green
   duotone so the grid reads as one surface. Hovering gives a tile its real
   colour back and lifts it clear of its neighbours. */
.gal__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 18.5vw, 250px);
  gap: 7px;
}
.shot {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--green-tint);
  cursor: zoom-in;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Grey dominant, with only a light green cast over it. The tint rides in
     through the sepia channel; saturate below 1 keeps it a shade rather than
     a wash. */
  filter: grayscale(1) sepia(0.3) hue-rotate(78deg) saturate(0.75)
          brightness(0.95) contrast(1.07);
  transition: filter 0.55s ease;
}
.shot:hover, .shot:focus-visible {
  transform: scale(1.05);
  z-index: 3;
  box-shadow: 0 18px 44px rgba(12, 61, 38, 0.32);
}
.shot:hover img, .shot:focus-visible img { filter: none; }
.shot__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.85rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(12, 61, 38, 0.9) 55%);
  color: var(--paper-hi);
  font-size: 0.68rem;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; transform: none; }

.s1 { grid-column: span 4; grid-row: span 2; }
.s2 { grid-column: span 2; }
.s3 { grid-column: span 2; }
.s4 { grid-column: span 3; }
.s5 { grid-column: span 3; }
.s6 { grid-column: span 2; }
.s7 { grid-column: span 4; }
.s8 { grid-column: span 3; }
.s9 { grid-column: span 3; }
.s10{ grid-column: span 2; }
.s11{ grid-column: span 4; }

/* lightbox */
.lbox {
  border: 0;
  padding: 0;
  max-width: min(94vw, 1200px);
  max-height: 92vh;
  background: transparent;
}
.lbox::backdrop { background: rgba(12, 61, 38, 0.9); }
.lbox img { width: 100%; height: auto; border: 1px solid var(--green); }
.lbox__cap {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--paper-hi);
  color: var(--ink);
  padding: 0.75rem 1rem;
  font-size: 0.72rem;
}
.lbox__x {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* ------------------------------------------------------------ secretariat
   Layout family: featured trio, then the rest grouped into columns.
   Not a hairlined roster table. */
.sec__lead {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.sec__lead article {
  background-color: var(--paper-hi);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.sec__role {
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.sec__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  margin-top: 0.5rem;
}
.sec__note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.7rem; }

.sec__groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sec__group h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--green-deep);
  color: var(--green-deep);
}
.sec__group li {
  padding: 0.7rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.sec__group li + li { border-top: 1px solid var(--paper-lo); }
.sec__group span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- register
   Layout family: split information panel, steps against the practicals. */
.reg {
  border-top: 3px solid var(--ink);
  background-color: var(--green-deep);
  /* The newsprint tile is mid grey, and soft-light lifts anything darker
     than it. Against a deep forest that turned the panel emerald, so a green
     veil pulls it back on brand while the texture still reads. */
  background-image: linear-gradient(rgba(12, 61, 38, 0.55), rgba(12, 61, 38, 0.55)),
                    var(--paper-tex);
  background-size: auto, var(--tex-size) var(--tex-size);
  background-blend-mode: normal, soft-light;
  color: var(--paper-hi);
}
.reg .sect__title { color: var(--paper-hi); }
.reg .sect__lede  { color: #c9ded4; }

.reg__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.steps { counter-reset: s; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(250, 249, 247, 0.22);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--f-punch);
  font-size: 1.5rem;
  line-height: 1;
  color: #9fd9ba;
}
.steps b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 1rem; }
.steps p { font-size: 0.85rem; color: #c9ded4; margin-top: 0.3rem; }

.fee {
  border: 1px solid rgba(250, 249, 247, 0.35);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.fee .sec__role { color: #9fd9ba; }
.fee__amt {
  font-family: var(--f-punch);
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 0.9;
  color: var(--paper-hi);
}
.fee__note { font-size: 0.78rem; color: #c9ded4; margin-top: 0.6rem; }
.fee .btn {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  background: var(--paper-hi);
  color: var(--green-deep);
  border-color: var(--paper-hi);
}
.fee .btn:hover { background: #9fd9ba; border-color: #9fd9ba; color: var(--green-deep); }

.sched { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.sched__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.sched h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.05rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid rgba(250, 249, 247, 0.5);
}
.sched li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.9rem;
  padding: 0.6rem 0;
  font-size: 0.82rem;
}
.sched li + li { border-top: 1px solid rgba(250, 249, 247, 0.16); }
.sched time { color: #9fd9ba; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */
.foot { padding-block: clamp(2.5rem, 5vw, 4rem); }
.foot__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
}
.foot__crest { width: 62px; }
.foot__name { font-family: var(--f-display); font-weight: 900; font-size: 1.05rem; }
.foot__meta { font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.3rem; }
.foot__link {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
  white-space: nowrap;
}
.foot__link:hover { color: var(--green); }

/* ------------------------------------------------------- the other edition
   The one crossing between the two sites. Its opposite number sits in the
   same place on the second edition's register page, so neither site reads as
   a draft of the other: they are two settings of the same conference. */
.swap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 3px solid var(--ink);
}
.swap__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.15;
  margin-top: 0.5rem;
}
.swap p {
  max-width: 34rem;
  margin-top: 0.7rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.swap .btn { white-space: nowrap; }

@media (max-width: 720px) {
  .swap { grid-template-columns: 1fr; align-items: start; }
}

/* ============================================================== MOTION ==
   Borrowed from izanami-official.com, which runs Lenis for scroll, splits
   headings into spans for staggered reveals, hangs everything off a single
   observer class, and draws its underlines as real 1px elements rather than
   text-decoration. Their timings are long and patient; ours follow.
   ====================================================================== */

/* Lenis needs the document to stop managing its own scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- blocks rise as they arrive ---- */
.rise {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.rise.is-in { opacity: 1; transform: none; }

/* ---- headings arrive a word at a time ----
   Per word rather than per character: 167 char spans is what Izanami runs,
   and on a masthead set in Anton the letterforms tear apart at that grain. */
.reveal .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(1.2deg);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 52ms);
}
.reveal.is-in .w { opacity: 1; transform: none; }

/* ---- underlines are drawn, not decorated ---- */
.nav__link:not(.nav__link--cta),
.foot__link,
.lbox__x {
  position: relative;
  border-bottom: 0;
  text-decoration: none;
}
.nav__link:not(.nav__link--cta)::after,
.foot__link::after,
.lbox__x::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__link:not(.nav__link--cta):hover::after,
.nav__link:not(.nav__link--cta):focus-visible::after,
.nav__link[aria-current="page"]::after,
.foot__link:hover::after,
.foot__link:focus-visible::after,
.lbox__x:hover::after { transform: scaleX(1); }

/* ---- a section label turned on its side and pinned in the margin ----
   The cheapest idea on Izanami and the one that suits newsprint best: three
   properties, and the section names itself down the gutter as you read. */
.vcol {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start;
}
.vlabel {
  position: sticky;
  top: 118px;
  writing-mode: vertical-rl;
  height: max-content;
  padding: 0.5rem 0;
  font-family: var(--f-body);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-left: 1px solid var(--paper-lo);
  padding-left: 0.55rem;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .c1 { grid-column: span 12; grid-row: span 1; }
  .c2, .c3, .c4 { grid-column: span 6; }
  .c5, .c6 { grid-column: span 6; }
  .c7 { grid-column: span 12; }
  .gal__grid { grid-template-columns: repeat(4, 1fr); }
  .s1 { grid-column: span 4; grid-row: span 2; }
  .s2, .s3, .s6, .s10 { grid-column: span 2; }
  .s4, .s5, .s8, .s9 { grid-column: span 2; }
  .s7, .s11 { grid-column: span 4; }
  .sec__groups { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .band img { height: min(52vh, 380px); }
  .legacy__body { grid-template-columns: 1fr; }
  .legacy__cols { columns: 1; }
  .reg__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .sec__lead { grid-template-columns: 1fr; }
  .sched__grid { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: auto 1fr; }
  .foot__link { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  /* nav drops to a disclosure panel so it never wraps to two lines */
  .nav__toggle { display: block; }
  .nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gut) 1.2rem;
    background-color: var(--paper);
    background-image: linear-gradient(var(--tex-veil), var(--tex-veil)),
                      var(--grain), var(--paper-tex), var(--paper-tex);
    background-size: auto, var(--grain-size) var(--grain-size),
                     var(--tex-size) var(--tex-size),
                     var(--tex-size-2) var(--tex-size-2);
    background-blend-mode: normal, multiply, multiply, soft-light;
    border-bottom: 3px solid var(--ink);
  }
  .nav__list.is-open { display: flex; }
  .nav__link { padding: 0.85rem 0; border-bottom: 1px solid var(--paper-lo); }
  .nav__link--cta { text-align: center; margin-top: 0.8rem; border-bottom: 0; }
  .hero__foot { flex-direction: column; gap: 0.3rem; }
  .index a { grid-template-columns: 1fr; }
  .index em { display: none; }
  /* the margin is too narrow on a phone to spend on a rotated label */
  .vcol { grid-template-columns: 1fr; }
  .vlabel { display: none; }
  .rec { grid-template-columns: 1fr; gap: 1.2rem; }
  .rec__data { grid-template-columns: minmax(6rem, 38%) 1fr; }
  .sec__faculty { grid-template-columns: 1fr; }
  .comms { grid-template-columns: 1fr; }
  .comm, .c1, .c2, .c3, .c4, .c5, .c6, .c7 { grid-column: span 1; }
  .gal__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .shot, .s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .s1 { grid-column: span 2; grid-row: span 2; }
  .sec__groups { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 1fr; gap: 0.3rem; }
  .sched li { grid-template-columns: 1fr; gap: 0.1rem; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* the roll never runs under reduced motion; the script skips straight to
     the revealed state and removes the loader */
  .load__sheet { display: none; }
  .rise { opacity: 1; transform: none; }
  .shot img { transition: none; }
}