/* ==========================================================================
   MUN Society Pakistan

   One face does every job. White is the ground; flag green owns whole
   full-bleed regions; gold is struck metal, spent only on rules, small caps,
   and what was won. Grammar studied from oxford-union.org, palette from the
   society's own crest.
   ========================================================================== */

/* --- One typeface, both styles ------------------------------------------ */

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/ebgaramond-roman.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/ebgaramond-italic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  --paper:      #ffffff;
  --stone:      #ecebe4;   /* the one warm surface, for punctuating bands */
  --stone-deep: #e0e0d6;
  --rule-hair:  #d6d8cf;

  --green:      #01411c;   /* sampled from the crest */
  --field:      #04351a;   /* full-bleed regions */
  --field-deep: #022611;   /* footer */
  --green-mid:  #2f6b47;

  --gold:       #b49761;   /* rules, small caps on dark, metal */
  --gold-ink:   #8a6c34;   /* gold text on white, 4.9:1 */
  --gold-pale:  #e3cf9f;

  --ink:        #1a1a1a;
  --ink-soft:   #4a4a46;
  --ink-faint:  #6a6a63;

  --serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  /* Measured from the reference, then set to our own scale. */
  --t-micro: 0.6875rem;                                     /* small caps */
  --t-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --t-body:  clamp(1.0625rem, 1rem + 0.22vw, 1.25rem);      /* 17 → 20 */
  --t-lead:  clamp(1.1875rem, 1.09rem + 0.4vw, 1.5rem);
  --t-h3:    clamp(1.25rem, 1.14rem + 0.42vw, 1.625rem);
  --t-h2:    clamp(1.5rem, 1.25rem + 1.1vw, 2.5rem);        /* uppercase, tracked */
  --t-h1:    clamp(2rem, 1.5rem + 2.2vw, 3.75rem);
  --t-display: clamp(2.25rem, 1.2rem + 4.6vw, 6rem);        /* the quotation */

  --gutter: clamp(1.375rem, 0.9rem + 2vw, 3rem);
  --shell: 75rem;          /* 1200px, as measured on the reference */
  --shell-text: 46rem;
  --band: clamp(4rem, 2.9rem + 4.8vw, 7.5rem);

  --radius: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--green-mid) var(--stone);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.72;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.16; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* --- Browser surfaces, themed rather than left default ------------------ */

::selection { background: var(--green); color: #fff; }
:root { caret-color: var(--green); accent-color: var(--green); }

:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
.field-green :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-pale); }

a { text-underline-offset: 0.2em; text-decoration-thickness: from-font; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--stone); }
::-webkit-scrollbar-thumb { background: var(--green-mid); border: 3px solid var(--stone); }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --- Structure ---------------------------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }

/* Full-bleed colour fields. These carry the width on a large monitor, so the
   text container never has to stretch to fill it. */
.field-green { background: var(--field); color: rgba(255, 255, 255, 0.86); }
.field-green h1, .field-green h2, .field-green h3, .field-green h4, .field-green strong { color: #fff; }
.field-stone { background: var(--stone); }

.rule-gold { height: 1px; border: 0; margin: 0; background: var(--gold); opacity: 0.55; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 300;
  background: var(--green); color: #fff;
  padding: 0.8rem 1.4rem;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* --- Type registers ------------------------------------------------------
   The label register is the same serif in small tracked capitals. No sans
   anywhere; that single decision is most of the heritage voice. */

.label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--gold-ink);
}
.field-green .label, .site-footer .label { color: var(--gold-pale); }

/* Breadcrumbs sit in the label register; pad the hit area without moving it. */
.label a { padding-block: 0.55rem; margin-block: -0.55rem; text-decoration: none; }
.label a:hover { color: var(--green); }

/* Section heading: uppercase, widely tracked, set in the display face. */
.sect {
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.18;
  color: var(--green);
}
.field-green .sect { color: #fff; }

.title { font-size: var(--t-h1); font-weight: 500; letter-spacing: -0.005em; line-height: 1.08; color: var(--green); }
.field-green .title { color: #fff; }

.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--ink-soft); max-width: var(--shell-text); }
.field-green .lead { color: rgba(255, 255, 255, 0.8); }

.prose { max-width: var(--shell-text); }
.prose p + p { margin-top: 1.15rem; }
.prose p { color: var(--ink-soft); }

.section-head { max-width: 48rem; margin-bottom: clamp(2.5rem, 1.9rem + 2.2vw, 4rem); }
.section-head .sect + p { margin-top: 1.15rem; }

/* --- Actions ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.75rem 1.9rem;
  font-family: var(--serif);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.btn svg { width: 0.85rem; height: 0.85rem; flex: none; }

.btn-gold { background: var(--gold); color: var(--field-deep); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-pale); border-color: var(--gold-pale); }

.btn-green { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover { background: var(--field-deep); border-color: var(--field-deep); }

.btn-line { background: transparent; color: var(--green); border-color: var(--rule-hair); }
.btn-line:hover { border-color: var(--green); background: var(--green); color: #fff; }

.btn-lineLight { background: transparent; color: #fff; border-color: rgba(180, 151, 97, 0.75); }
.btn-lineLight:hover { background: var(--gold); color: var(--field-deep); border-color: var(--gold); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.textlink {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--gold);
  transition: color 260ms var(--ease), border-color 260ms var(--ease);
}
.textlink:hover { color: var(--gold-ink); border-color: var(--green); }
.textlink svg { width: 0.8rem; height: 0.8rem; }
.field-green .textlink { color: var(--gold-pale); border-color: rgba(180, 151, 97, 0.6); }
.field-green .textlink:hover { color: #fff; border-color: #fff; }

/* --- Masthead ------------------------------------------------------------
   Crest over wordmark, both centred, nav centred beneath. The brand block
   scrolls away; the nav rail alone stays. */

.masthead { background: var(--paper); }

.masthead-brand { display: grid; justify-items: center; gap: 0.55rem; padding-block: clamp(1.2rem, 0.95rem + 1vw, 1.9rem) clamp(0.9rem, 0.75rem + 0.7vw, 1.35rem); }
.masthead-brand a { display: grid; justify-items: center; gap: 0.65rem; text-decoration: none; }
.masthead-brand img { width: clamp(50px, 44px + 1vw, 66px); height: auto; }

.wordmark {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gold-ink);
  text-align: center;
}
/* Green belongs to the country: #01411c is the flag green, sampled from the
   crest. Gold leads into it. gold-ink not gold, so the wordmark clears AA at
   the mobile size too. */
.wordmark .pk { color: var(--green); }

.nav-rail {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
  transition: box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.nav-rail[data-stuck='true'] { border-bottom-color: var(--gold); box-shadow: 0 12px 34px -26px rgba(1, 65, 28, 0.6); }

.nav-inner { display: flex; align-items: center; justify-content: center; gap: 1.25rem; min-height: 54px; }

.nav-primary { display: none; }
@media (min-width: 60rem) { .nav-primary { display: flex; align-items: center; gap: clamp(1.5rem, 0.3rem + 2vw, 2.75rem); } }

.nav-primary a {
  position: relative;
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 1rem;
  transition: color 240ms var(--ease);
}
.nav-primary a:hover { color: var(--green); }
.nav-primary a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0.75rem;
  height: 1px; background: var(--gold);
  transition: right 340ms var(--slow);
}
.nav-primary a:hover::after { right: 0; }
.nav-primary a[aria-current='page'] { color: var(--green); }
.nav-primary a[aria-current='page']::after { right: 0; }

/* "Join" reads as a bordered box in the rail, as on the reference. */
.nav-join {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; color: var(--green);
  border: 1px solid var(--gold);
  padding: 0.6rem 1.25rem;
  transition: background-color 260ms var(--ease), color 260ms var(--ease);
}
.nav-join:hover { background: var(--green); color: #fff; border-color: var(--green); }
@media (max-width: 59.99rem) { .nav-join { display: none; } }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 46px; height: 46px;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 60rem) { .nav-toggle { display: none; } }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--green); transition: transform 300ms var(--ease), opacity 160ms var(--ease); }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer { display: grid; grid-template-rows: 0fr; overflow: hidden; background: var(--paper); transition: grid-template-rows 360ms var(--slow); }
.nav-drawer[data-open='true'] { grid-template-rows: 1fr; }
.nav-drawer > div { min-height: 0; }
@media (min-width: 60rem) { .nav-drawer { display: none; } }
.nav-drawer nav { display: flex; flex-direction: column; padding-block: 0.5rem 1.75rem; }
.nav-drawer nav a { padding: 0.95rem 0; text-decoration: none; border-bottom: 1px solid var(--rule-hair); }
.nav-drawer nav a[aria-current='page']:not(.btn) { color: var(--green); }
.nav-drawer .btn { margin-top: 1.5rem; }

/* --- Overture: photograph as ground, quotation over it ------------------- */

.overture { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(70vh, 44rem); overflow: hidden; }
.overture-bg { position: absolute; inset: 0; z-index: -2; }
/* The picture element has to fill too, or the img's height:100% resolves
   against auto and object-fit never engages. */
.overture-bg picture { display: block; width: 100%; height: 100%; }
.overture-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
/* Graded to the society's own green so the photograph joins the palette,
   heaviest at the foot where the type sits and lightest across the faces. */
.overture::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(2, 27, 13, 0.88) 2%, rgba(3, 40, 20, 0.62) 34%, rgba(4, 53, 26, 0.3) 70%, rgba(4, 53, 26, 0.22) 100%),
    linear-gradient(to right, rgba(2, 27, 13, 0.88) 0%, rgba(2, 27, 13, 0.74) 46%, rgba(2, 27, 13, 0.34) 74%, rgba(2, 27, 13, 0.04) 100%);
}
.overture-inner { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); max-width: 58rem; }

.overture blockquote {
  margin: 0;
  font-size: var(--t-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(2, 27, 13, 0.5);
}
.overture blockquote .mark { color: var(--gold-pale); }

/* Three descending tiers, as measured on the reference. */
.overture figcaption { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.overture .who {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-style: normal; color: #fff; line-height: 1.2;
}
.overture .role { margin-top: 0.5rem; color: var(--gold-pale); }
.overture .sub { margin-top: 0.3rem; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.14em; }
.overture .btn-row { margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }

/* --- Columns with hairline dividers -------------------------------------
   The reference's opening-hours block: plain columns, ruled apart. No icon
   cards, no boxes. */

.cols { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
@media (min-width: 44rem) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 44rem) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 44rem) {
  .cols--ruled > * + * { padding-left: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-left: 1px solid var(--rule-hair); }
  .field-green .cols--ruled > * + * { border-left-color: rgba(227, 207, 159, 0.28); }
}
@media (min-width: 44rem) and (max-width: 61.99rem) {
  .cols-3.cols--ruled > *:nth-child(odd) { padding-left: 0; border-left: 0; }
}

.col h3 { font-size: var(--t-h3); color: var(--green); }
.field-green .col h3 { color: #fff; }
.col p { margin-top: 0.7rem; font-size: var(--t-small); line-height: 1.68; color: var(--ink-soft); }
.field-green .col p { color: rgba(255, 255, 255, 0.72); }

/* --- The register (signature) --------------------------------------------
   A ruled ledger of conferences. The gold rule strikes in as each row
   arrives; this is the page's one authored motion. */

.register { border-top: 1px solid var(--green); }

.register-head {
  display: none;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule-hair);
}
@media (min-width: 56rem) {
  .register-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 1.35fr) 132px; gap: 2rem; }
}

.reg-row { position: relative; display: grid; gap: 0.5rem 2rem; padding-block: 1.75rem; border-bottom: 1px solid var(--rule-hair); }
@media (min-width: 56rem) {
  .reg-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 1.35fr) 132px; align-items: center; padding-block: 1.5rem; }
}
.reg-row::before {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--slow) var(--reg-delay, 120ms);
}
.reg-row[data-seen='true']::before { transform: scaleX(1); }

.reg-conf { font-size: var(--t-h3); font-weight: 500; color: var(--green); line-height: 1.2; }
.reg-where { font-size: var(--t-small); color: var(--ink-faint); }
.reg-result { font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); }
.reg-result strong { color: var(--ink); font-weight: 600; }

.reg-plate { width: 132px; overflow: hidden; background: var(--stone); }
.reg-plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 38%; filter: saturate(0.86) contrast(1.05); transition: transform 900ms var(--slow); }
.reg-row:hover .reg-plate img { transform: scale(1.06); }
@media (max-width: 55.99rem) { .reg-plate { width: 100%; margin-top: 0.9rem; } }

.register-note { margin-top: 2rem; font-size: var(--t-small); color: var(--ink-faint); max-width: 50rem; }

/* --- Plate: photograph with a caption bar beneath ------------------------
   The reference's speaker grid. The bar belongs to the image, not the page. */

.plate { margin: 0; }
.plate-img { overflow: hidden; background: var(--stone); }
.plate-img img { width: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.04); }
.plate-bar { background: var(--field); color: #fff; padding: 0.75rem 1rem 0.85rem; }
.plate-bar .n { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.plate-bar .d { display: block; margin-top: 0.2rem; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-pale); }
.plate figcaption { margin-top: 0.85rem; font-size: var(--t-small); color: var(--ink-faint); line-height: 1.55; }

.plate-grid { display: grid; gap: 1px; background: var(--rule-hair); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.plate-grid .plate-img img { aspect-ratio: 1; }

/* --- Coaches: the founding four, in a row -------------------------------
   Portraits are capped and square-cropped. Without the cap they inherit the
   full column width and tower over the rest of the page. */

.coaches { display: grid; gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 50rem) { .coaches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.coaches .plate-img { max-width: 13rem; border-bottom: 2px solid var(--gold); }
.coaches .plate-img img { aspect-ratio: 1; display: block; }
.coaches h3 { margin-top: 1rem; font-size: var(--t-h3); color: var(--green); }
.coaches .label { margin-top: 0.4rem; }

/* --- Gallery: the record in photographs ----------------------------------
   Column flow rather than a grid. Eleven of these frames are portrait and
   seven landscape; a fixed-ratio grid would crop faces off every tall one. */

.gallery { column-gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); }
@media (min-width: 34rem) { .gallery { columns: 2; } }
@media (min-width: 62rem) { .gallery { columns: 3; } }
.gallery .plate { break-inside: avoid; margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); }
.gallery .plate-img { border-bottom: 2px solid var(--gold); }
.gallery .plate-img img { display: block; }

/* --- Numbered sequence --------------------------------------------------- */

.steps { counter-reset: step; border-top: 1px solid var(--rule-hair); }
.step { counter-increment: step; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.25rem; padding-block: 1.9rem; border-bottom: 1px solid var(--rule-hair); align-items: start; }
.step::before { content: counter(step, decimal-leading-zero); font-size: var(--t-h3); color: var(--gold); line-height: 1.3; font-variant-numeric: lining-nums; }
.steps--plain { counter-reset: none; }
.steps--plain .step { grid-template-columns: 1fr; }
.steps--plain .step::before { content: none; }
.step h3 { font-size: var(--t-h3); color: var(--green); }
.step p { margin-top: 0.55rem; font-size: var(--t-small); line-height: 1.68; color: var(--ink-soft); max-width: 42rem; }

/* --- Roster -------------------------------------------------------------- */

.roster { border-top: 1px solid var(--green); }
.person { display: grid; gap: 1.5rem 2.75rem; padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); border-bottom: 1px solid var(--rule-hair); }
@media (min-width: 48rem) { .person { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } }
.person-photo { overflow: hidden; background: var(--stone); max-width: 22rem; }
.person-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(0.88) contrast(1.04); }
.person h2, .person h3 { font-size: var(--t-h3); color: var(--green); }
.person .role { margin-top: 0.45rem; }
.person .bio { margin-top: 0.9rem; font-size: var(--t-small); line-height: 1.7; color: var(--ink-soft); max-width: 44rem; }

details.more { margin-top: 1rem; }
details.more summary {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); padding-block: 0.45rem;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary:hover { color: var(--gold-ink); }
details.more summary svg { width: 0.75rem; height: 0.75rem; transition: transform 320ms var(--ease); }
details.more[open] summary svg { transform: rotate(180deg); }
details.more .more-body { padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid var(--rule-hair); display: grid; gap: 1rem; max-width: 44rem; }
details.more .more-body p { font-size: var(--t-small); line-height: 1.72; color: var(--ink-soft); }

/* --- Split --------------------------------------------------------------- */

.split { display: grid; gap: clamp(2rem, 1.2rem + 3.5vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--text { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* --- Pull quote ----------------------------------------------------------- */

.pull { border-left: 1px solid var(--gold); padding-left: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); max-width: 46rem; }
.pull blockquote { margin: 0; font-size: var(--t-lead); font-style: italic; line-height: 1.45; color: var(--ink); }
.pull figcaption { margin-top: 1.15rem; }

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: 1.35rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.field .hint { font-size: var(--t-small); color: var(--ink-faint); font-weight: 400; letter-spacing: 0; text-transform: none; }
.field .req { color: var(--gold-ink); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 3.125rem; padding: 0.7rem 0.95rem;
  font-family: var(--serif); font-size: var(--t-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-hair); border-radius: var(--radius);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: #7d7d75; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--green-mid); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(1, 65, 28, 0.12); }
.field[data-invalid='true'] input, .field[data-invalid='true'] select, .field[data-invalid='true'] textarea { border-color: #9e2a24; }

.field-error { display: none; align-items: center; gap: 0.4rem; font-size: var(--t-small); color: #85211c; }
.field[data-invalid='true'] .field-error { display: flex; }

.form-row { display: grid; gap: 1.35rem; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-status { display: none; gap: 0.8rem; align-items: flex-start; padding: 1.1rem 1.25rem; font-size: var(--t-small); line-height: 1.62; }
.form-status[data-state='success'] { display: flex; background: var(--stone); border-top: 1px solid var(--green); color: var(--ink); }
.form-status[data-state='error'] { display: flex; background: #f8ece9; border-top: 1px solid #9e2a24; color: #6b1712; }
.form-status svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.2rem; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Contact rail ---------------------------------------------------------- */

.rail { display: grid; gap: 1.6rem; }
.rail-item { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.9rem; align-items: start; }
.rail-item svg { width: 1.05rem; height: 1.05rem; color: var(--gold-ink); margin-top: 0.4rem; }
.rail-item .v { display: block; margin-top: 0.25rem; text-decoration: none; }
a.v { color: var(--green); border-bottom: 1px solid var(--rule-hair); transition: border-color 240ms var(--ease); }
a.v:hover { border-bottom-color: var(--gold); }

/* --- Footer ---------------------------------------------------------------- */

.site-footer { background: var(--field-deep); color: rgba(255, 255, 255, 0.68); border-top: 1px solid var(--gold); }
.site-footer a { color: rgba(255, 255, 255, 0.68); text-decoration: none; transition: color 240ms var(--ease); }
.site-footer a:hover { color: var(--gold-pale); }

.footer-grid { display: grid; gap: clamp(2.5rem, 1.6rem + 3vw, 4rem); padding-block: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: 1.15fr 1fr 1fr; } }
@media (min-width: 68rem) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.15fr; } }
@media (min-width: 46rem) { .footer-grid > * + * { padding-left: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-left: 1px solid rgba(255, 255, 255, 0.14); } }

.footer-crest { display: grid; justify-items: start; gap: 1.25rem; }
.footer-crest img { width: clamp(96px, 80px + 3vw, 132px); height: auto; filter: brightness(0) invert(1); opacity: 0.88; }
.footer-crest p { font-size: var(--t-small); line-height: 1.72; max-width: 22rem; }

.footer-grid h2 { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-pale); margin-bottom: 1.25rem; }
.footer-links { display: grid; gap: 0.15rem; font-size: var(--t-small); }
.footer-links li > * { display: inline-flex; align-items: center; gap: 0.6rem; padding-block: 0.5rem; }
.footer-links svg { width: 0.95rem; height: 0.95rem; color: var(--gold); flex: none; }

.social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.2); transition: border-color 260ms var(--ease), background-color 260ms var(--ease), color 260ms var(--ease); }
.social a:hover { border-color: var(--gold); background: rgba(180, 151, 97, 0.12); color: var(--gold-pale); }
.social svg { width: 1.05rem; height: 1.05rem; }

.footer-base { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-base-inner { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1.5rem; font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

/* --- Error page ------------------------------------------------------------- */

.errorpage { min-height: 56vh; display: grid; align-content: center; }
.errorpage .step h2 a { display: inline-block; padding-block: 0.3rem; text-decoration: none; color: var(--green); }
.errorcode { font-size: clamp(4.5rem, 2.5rem + 10vw, 9rem); font-weight: 400; line-height: 0.9; color: var(--stone-deep); font-variant-numeric: lining-nums; }

/* --- Motion: one authored moment ------------------------------------------
   The register's gold rule draws across each row as it arrives. Nothing
   else on the page enters; a uniform fade on every section is not a moment. */

@media (prefers-reduced-motion: reduce) { .reg-row::before { transform: none; transition: none; } }
.no-js .reg-row::before { transform: none; }