/* ============================================================
   A Pact of Disobedience — Boniface Presbytery · CREC
   Built on the Pact of Disobedience Design System.
   Tokens are copied verbatim from the design-system project.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..600&family=Gelasio:ital,wght@0,400..700;1,400..600&family=Barlow+Condensed:wght@400;500;600;700&family=Great+Vibes&family=Homemade+Apple&family=Satisfy&display=swap");

:root{
  /* Base — Canadian red */
  --red-900:#4E0C13;
  --red-800:#6E1119;
  --red-700:#8E1520;
  --red-600:#A81C26;
  --red-500:#C8102E;
  --red-300:#D9636F;
  --red-100:#F3D7D9;

  /* Base — ink / black */
  --ink-900:#0E0C0A;
  --ink-800:#1C1917;
  --ink-700:#2E2A25;
  --ink-600:#4A443C;
  --ink-500:#6B6459;
  --ink-400:#918A7C;

  /* Base — parchment / white */
  --parchment-050:#FDFAF3;
  --parchment-100:#F6EEDC;
  --parchment-200:#EFE3CB;
  --parchment-300:#E3D3B4;
  --parchment-400:#D2BE99;
  --paper-white:#FFFDF8;

  /* Base — gold */
  --gold-700:#7A5C1E;
  --gold-600:#9A7526;
  --gold-500:#B4913C;
  --gold-400:#C9A961;
  --gold-200:#E6D3A3;

  /* Base — wax */
  --wax-500:#8C1119;
  --wax-700:#5C0A10;
  --wax-300:#B2313A;

  /* Semantic — surfaces */
  --surface-page:var(--parchment-100);
  --surface-card:var(--parchment-050);
  --surface-raised:var(--paper-white);
  --surface-inverse:var(--ink-900);
  --surface-accent:var(--red-800);
  --surface-sunken:var(--parchment-200);

  /* Semantic — text */
  --text-body:var(--ink-800);
  --text-display:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-meta:var(--ink-600);
  --text-accent:var(--red-700);
  --text-gold:var(--gold-600);
  --text-on-dark:var(--parchment-100);
  --text-on-accent:var(--parchment-050);

  /* Semantic — lines */
  --line-hairline:rgba(46,42,37,.18);
  --line-rule:var(--ink-700);
  --line-gold:var(--gold-500);
  --line-accent:var(--red-700);

  /* Semantic — interactive */
  --action-primary:var(--red-700);
  --action-primary-hover:var(--red-800);
  --action-primary-press:var(--red-900);
  --action-secondary-border:var(--ink-700);
  --action-focus-ring:var(--gold-500);
  --action-disabled-bg:var(--parchment-300);
  --action-disabled-text:var(--ink-400);
  --selection-bg:var(--gold-200);

  /* Semantic — status */
  --status-approved:#2E5E3A;
  --status-pending:var(--gold-600);

  /* Type */
  --font-display:"EB Garamond","Adobe Garamond Pro",Garamond,"Times New Roman",serif;
  --font-body:"Gelasio",Georgia,"Times New Roman",serif;
  --font-meta:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-mono:"Courier New",Courier,monospace;

  --size-display-1:clamp(3rem,7vw,5.25rem);
  --size-display-2:clamp(2.25rem,4.5vw,3.5rem);
  --size-h1:2.5rem;
  --size-h2:1.875rem;
  --size-h3:1.4375rem;
  --size-h4:1.1875rem;
  --size-body-lg:1.1875rem;
  --size-body:1.0625rem;
  --size-body-sm:.9375rem;
  --size-meta:.8125rem;
  --size-micro:.6875rem;

  --leading-display:1.04;
  --leading-heading:1.16;
  --leading-body:1.62;
  --leading-statement:1.78;
  --leading-tight:1.25;

  --tracking-display:-0.015em;
  --tracking-meta:.14em;
  --tracking-caps:.09em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --measure-statement:34rem;
  --measure-prose:40rem;
  --measure-wide:62rem;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;
  --gutter-page:clamp(20px,5vw,64px);
  --max-page:1180px;

  /* Borders */
  --radius-sm:2px;
  --radius-seal:50%;
  --border-hairline:1px solid var(--line-hairline);
  --border-ink:1px solid var(--line-rule);
  --border-frame:3px double var(--gold-500);

  /* Elevation */
  --shadow-leaf:0 1px 0 rgba(46,42,37,.12),0 2px 10px rgba(46,42,37,.08);
  --shadow-sheet:0 2px 2px rgba(46,42,37,.08),0 14px 34px rgba(46,42,37,.14);
  --shadow-lifted:0 6px 6px rgba(46,42,37,.10),0 28px 60px rgba(46,42,37,.20);
  --shadow-seal:0 2px 4px rgba(78,12,19,.45),inset 0 2px 6px rgba(255,255,255,.22),inset 0 -6px 12px rgba(0,0,0,.30);
  --shadow-inset-well:inset 0 1px 3px rgba(46,42,37,.18);
  --shadow-focus:0 0 0 3px rgba(180,145,60,.45);

  /* Motion */
  --ease-paper:cubic-bezier(.22,.61,.36,1);
  --ease-ink:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:420ms;
  --dur-marquee:38s;
  --press-shift:1px;

  /* Texture */
  --texture-parchment:
    radial-gradient(120% 90% at 12% 8%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 88% 96%,rgba(178,140,84,.20) 0%,rgba(178,140,84,0) 60%),
    radial-gradient(60% 50% at 70% 22%,rgba(178,140,84,.10) 0%,rgba(178,140,84,0) 70%),
    linear-gradient(180deg,var(--parchment-050) 0%,var(--parchment-100) 48%,var(--parchment-200) 100%);
  --texture-parchment-dark:
    radial-gradient(100% 80% at 20% 0%,rgba(200,16,46,.14) 0%,rgba(0,0,0,0) 60%),
    linear-gradient(180deg,var(--ink-900) 0%,#171310 100%);
  --texture-fibre:repeating-linear-gradient(96deg,rgba(120,96,54,.05) 0 2px,rgba(0,0,0,0) 2px 5px);
  --texture-hatch:repeating-linear-gradient(45deg,rgba(46,42,37,.10) 0 1px,rgba(0,0,0,0) 1px 7px);
}

@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-marquee:0s; }
}

/* ============================================================
   BASE
   ============================================================ */

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--selection-bg); color:var(--ink-900); }

img{ max-width:100%; display:block; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--action-focus-ring);
  outline-offset:2px;
  box-shadow:var(--shadow-focus);
}

/* ============================================================
   LANDING — the sealed envelope fills the hero
   ============================================================ */

.landing{
  position:relative;
  height:340vh;
  background:var(--texture-parchment-dark);
}

.scene{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:var(--texture-parchment-dark);
}

/* --- envelope: edge to edge --------------------------------- */

.env-stage{
  --seal-w:clamp(150px, 34vmin, 280px);
  position:absolute;
  inset:0;
  cursor:pointer;
}

/* parchment wash covering the envelope at the hand-off */
.scene-wash{
  position:absolute; inset:0;
  z-index:5;
  background:var(--texture-parchment);
  opacity:0;
  pointer-events:none;
}

/* the pact — the full size of the envelope, slides out in front */
.letter{
  position:absolute;
  left:50%;
  top:1.5%;
  width:97%;
  height:97%;
  z-index:2;
  background:var(--parchment-100);
  border:var(--border-frame);
  outline:1px solid var(--line-hairline);
  outline-offset:4px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lifted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(12px, 2.4vh, 24px);
  padding:clamp(32px, 9vh, 88px) clamp(20px, 5vw, 56px);
  text-align:center;
  transform:translate(-50%, 1.5%);
  transform-origin:50% 30%;
  justify-content:center;
}

.letter::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--texture-fibre);
  mix-blend-mode:multiply;
  pointer-events:none;
}

.letter-eyebrow{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
}

.letter-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 7vmin, 3.6rem);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);
  color:var(--text-display);
}

.letter-standfirst{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1rem, 2.6vmin, 1.3rem);
  color:var(--text-muted);
}

.letter .ornament{ width:min(40%, 200px); }

/* envelope interior — what you see through the opened flap */
.env-body{
  position:absolute; inset:0;
  z-index:1;
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(46,42,37,.24) 0%, rgba(46,42,37,0) 55%),
    linear-gradient(180deg,var(--parchment-400) 0%,var(--parchment-300) 42%,var(--parchment-200) 100%);
}

.env-body::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--texture-fibre);
  mix-blend-mode:multiply;
}

/* folded paper: sides + bottom form the pocket the pact sits in */
.env-folds{
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
}

.env-fold{ position:absolute; inset:0; }

.env-fold-left{
  clip-path:polygon(0 0, 50.5% 50.5%, 0 100%);
  background:
    linear-gradient(105deg,
      var(--paper-white) 0%,
      var(--parchment-050) 34%,
      var(--parchment-100) 62%,
      var(--parchment-300) 96%,
      var(--parchment-400) 100%);
  filter:drop-shadow(2px 0 3px rgba(46,42,37,.22));
}

.env-fold-right{
  clip-path:polygon(100% 0, 49.5% 50.5%, 100% 100%);
  background:
    linear-gradient(-105deg,
      var(--parchment-050) 0%,
      var(--parchment-100) 40%,
      var(--parchment-200) 68%,
      var(--parchment-300) 96%,
      var(--parchment-400) 100%);
  filter:drop-shadow(-2px 0 3px rgba(46,42,37,.24));
}

.env-fold-bottom{
  clip-path:polygon(0 100%, 50% 47%, 100% 100%);
  background:
    linear-gradient(180deg,
      var(--parchment-400) 0%,
      var(--parchment-200) 12%,
      var(--parchment-100) 38%,
      var(--parchment-050) 82%,
      var(--paper-white) 100%);
  filter:drop-shadow(0 -2px 3px rgba(46,42,37,.24));
}

.env-fold::after{
  content:"";
  position:absolute; inset:0;
  clip-path:inherit;
  background-image:var(--texture-fibre);
  mix-blend-mode:multiply;
}

.env-fold-left::after{ clip-path:polygon(0 0, 50.5% 50.5%, 0 100%); }
.env-fold-right::after{ clip-path:polygon(100% 0, 49.5% 50.5%, 100% 100%); }
.env-fold-bottom::after{ clip-path:polygon(0 100%, 50% 47%, 100% 100%); }

/* crease lines where the folds meet */
.env-creases{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* sealing flap — folds up and out of frame on scroll (2D hinge) */
.env-flap-wrap{
  position:absolute; inset:0;
  z-index:4;
  transform-origin:50% 0;
}

.landing.is-open .env-flap-wrap{ z-index:0; }

.env-flap{
  position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 56%);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255,253,248,.75) 0%, rgba(255,253,248,0) 60%),
    linear-gradient(180deg,
      var(--parchment-050) 0%,
      var(--parchment-100) 52%,
      var(--parchment-200) 80%,
      var(--parchment-300) 94%,
      var(--parchment-400) 100%);
  filter:drop-shadow(0 5px 10px rgba(14,12,10,.28));
}

.env-flap::after{
  content:"";
  position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 56%);
  background-image:var(--texture-fibre);
  mix-blend-mode:multiply;
}

/* the wax seal — the presbytery's real seal artwork */
.seal{
  position:absolute;
  left:50%; top:56%;
  width:var(--seal-w);
  transform:translate(-50%,-52%) rotate(-4deg);
  filter:drop-shadow(0 6px 12px rgba(14,12,10,.45));
}

/* circling title — tight to the seal */
.seal-ring{
  position:absolute;
  left:50%; top:56%;
  width:calc(var(--seal-w) * 1.6);
  aspect-ratio:1;
  transform:translate(-50%,-51%);
  z-index:6;
  pointer-events:none;
  color:var(--gold-700);
}

.seal-ring svg{ width:100%; height:100%; display:block; overflow:visible; }

.seal-ring text{
  font-family:var(--font-meta);
  font-weight:var(--weight-semibold);
  font-size:24px;
  letter-spacing:.28em;
  fill:currentColor;
}

@media (prefers-reduced-motion:no-preference){
  .seal-ring svg{ animation:pod-ring 70s linear infinite; }
}

@keyframes pod-ring{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* scroll hint — small, quiet, ink on the envelope paper */
.scene-hint{
  position:absolute;
  bottom:clamp(14px, 3.5vh, 30px);
  left:0; right:0;
  z-index:7;
  display:grid;
  justify-items:center;
  gap:var(--space-2);
  color:var(--ink-500);
  pointer-events:none;
  opacity:.8;
}

.scene-hint-label{
  font-family:var(--font-meta);
  font-size:var(--size-micro);
  font-weight:var(--weight-semibold);
  letter-spacing:.22em;
  text-transform:uppercase;
}

.scene-hint-line{
  width:1px; height:30px;
  background:linear-gradient(to bottom,rgba(46,42,37,.5),rgba(46,42,37,0));
  position:relative;
  overflow:hidden;
}

@media (prefers-reduced-motion:no-preference){
  .scene-hint-line::after{
    content:"";
    position:absolute; left:0; top:0;
    width:1px; height:8px;
    background:var(--ink-700);
    animation:pod-drip 2.4s var(--ease-paper) infinite;
  }
}

@keyframes pod-drip{
  0%{ transform:translateY(-10px); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(32px); opacity:0; }
}

/* no-JS / reduced-motion fallback: collapse the scrub */
.landing.is-static{ height:100svh; }
.landing.is-static .scene{ position:relative; }

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead{
  border-top:4px solid var(--red-700);
  border-bottom:var(--border-hairline);
  background-color:var(--parchment-100);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='%234A443C' fill-opacity='0.055'><path transform='translate(18,18) rotate(-10) scale(0.0062)' d='m-90 2030 45-863a95 95 0 0 0-111-98l-859 151 116-320a65 65 0 0 0-20-73l-941-762 212-99a65 65 0 0 0 34-79l-186-572 542 115a65 65 0 0 0 73-38l105-247 423 454a65 65 0 0 0 111-57l-204-1052 327 189a65 65 0 0 0 91-27l332-652 332 652a65 65 0 0 0 91 27l327-189-204 1052a65 65 0 0 0 111 57l423-454 105 247a65 65 0 0 0 73 38l542-115-186 572a65 65 0 0 0 34 79l212 99-941 762a65 65 0 0 0-20 73l116 320-859-151a95 95 0 0 0-111 98l45 863z'/><path transform='translate(54,54) rotate(12) scale(0.0062)' d='m-90 2030 45-863a95 95 0 0 0-111-98l-859 151 116-320a65 65 0 0 0-20-73l-941-762 212-99a65 65 0 0 0 34-79l-186-572 542 115a65 65 0 0 0 73-38l105-247 423 454a65 65 0 0 0 111-57l-204-1052 327 189a65 65 0 0 0 91-27l332-652 332 652a65 65 0 0 0 91 27l327-189-204 1052a65 65 0 0 0 111 57l423-454 105 247a65 65 0 0 0 73 38l542-115-186 572a65 65 0 0 0 34 79l212 99-941 762a65 65 0 0 0-20 73l116 320-859-151a95 95 0 0 0-111 98l45 863z'/></g></svg>");
  background-size:72px 72px;
}

.masthead-inner{
  max-width:var(--max-page);
  margin:0 auto;
  padding:var(--space-5) var(--gutter-page);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  flex-wrap:wrap;
}

.masthead-brand{
  text-decoration:none;
  color:inherit;
  display:grid;
  gap:2px;
}

.masthead-title{
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:var(--weight-bold);
  letter-spacing:-.01em;
  color:var(--text-display);
}

.masthead-kicker{
  font-family:var(--font-meta);
  font-size:var(--size-micro);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
}

.masthead-nav{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  flex-wrap:wrap;
}

.masthead-nav a{
  font-family:var(--font-meta);
  font-size:var(--size-body-sm);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:3px;
  color:var(--text-meta);
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-ink);
}

.masthead-nav a:hover{ color:var(--text-gold); border-bottom-color:var(--line-accent); }
.masthead-nav a[aria-current="page"]{ color:var(--text-gold); border-bottom-color:var(--line-accent); }

.masthead-nav a.btn{
  padding:8px 16px;
  font-size:var(--size-meta);
  color:var(--text-on-accent);
  border:1px solid var(--red-900);
}
.masthead-nav a.btn:hover{ color:var(--text-on-accent); background:var(--action-primary-hover); }
.masthead-nav a.btn[aria-current="page"]{ color:var(--text-on-accent); background:var(--action-primary-press); }

/* ============================================================
   VERSE MARQUEE
   ============================================================ */

.marquee{
  overflow:hidden;
  padding:10px 0;
  background:var(--red-800);
  color:var(--parchment-100);
  border-top:1px solid var(--red-900);
  border-bottom:1px solid var(--red-900);
}

.marquee.ink{
  background:var(--ink-900);
  color:var(--gold-200);
  border-color:var(--ink-800);
}

.marquee-track{
  display:inline-flex;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--size-body);
  letter-spacing:.01em;
  white-space:nowrap;
  animation:pod-marquee var(--dur-marquee) linear infinite;
}

.marquee-run{
  display:inline-flex;
  gap:var(--space-6);
  align-items:center;
  padding-right:var(--space-6);
  white-space:nowrap;
}

.marquee-run .sep{ opacity:.6; }

@keyframes pod-marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   SHARED PIECES
   ============================================================ */

.eyebrow{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
}

.ornament{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  width:100%;
  margin:0 auto;
}

.ornament .line{ flex:1; height:1px; background:var(--line-gold); opacity:.8; }
.ornament .glyph{
  font-family:var(--font-display);
  font-size:var(--size-meta);
  color:var(--line-gold);
  line-height:1;
}
.ornament.ink .line{ background:var(--line-rule); opacity:.35; }
.ornament.ink .glyph{ color:var(--line-rule); }
.ornament.start{ margin:0; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:var(--radius-sm);
}

.badge.red{ background:var(--red-700); color:var(--text-on-accent); }
.badge.gold-outline{ background:transparent; color:var(--gold-700); border:1px solid var(--line-gold); }
.badge.pending{ background:transparent; color:var(--status-pending); border:1px solid var(--gold-500); }
.badge.approved{ background:transparent; color:var(--status-approved); border:1px solid var(--status-approved); }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  padding:13px 26px;
  font-size:var(--size-body-sm);
  background:var(--action-primary);
  color:var(--text-on-accent);
  border:1px solid var(--red-900);
  box-shadow:var(--shadow-leaf);
  transition:background var(--dur-fast) var(--ease-ink),transform var(--dur-fast) var(--ease-ink),color var(--dur-fast) var(--ease-ink);
}

.btn:hover{ background:var(--action-primary-hover); }
.btn:active{ transform:translateY(var(--press-shift)); box-shadow:var(--shadow-inset-well); }

.btn.lg{ padding:17px 38px; font-size:var(--size-body); }

.btn.secondary{
  background:transparent;
  color:var(--text-body);
  border:var(--border-ink);
  box-shadow:none;
}
.btn.secondary:hover{ background:var(--parchment-200); }

.btn.ghost{
  background:transparent;
  color:var(--text-accent);
  border:1px solid transparent;
  box-shadow:none;
  text-decoration:underline;
  text-underline-offset:.2em;
  padding:8px 0;
}
.btn.ghost:hover{ color:var(--red-900); }

/* parchment sheets and cards */
.sheet{
  position:relative;
  background:var(--texture-parchment);
  color:var(--text-body);
  box-shadow:var(--shadow-sheet);
  border-radius:var(--radius-sm);
  border:var(--border-frame);
  outline:1px solid var(--line-hairline);
  outline-offset:4px;
  padding:var(--space-9) clamp(24px,6vw,var(--space-9));
}

.sheet::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background-image:var(--texture-fibre);
  mix-blend-mode:multiply;
}

.sheet > *{ position:relative; z-index:1; }

.sheet.tight{ padding:clamp(24px,5vw,var(--space-8)); }

.card{
  background:var(--surface-card);
  border:var(--border-hairline);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-leaf);
  padding:var(--space-5);
}

.sheet-heading{
  display:grid;
  gap:var(--space-3);
  justify-items:center;
  text-align:center;
  max-width:var(--measure-prose);
  margin:0 auto;
}

.sheet-heading.left{ justify-items:start; text-align:left; margin:0; }

.sheet-heading h1{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--size-display-2);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);
  color:var(--text-display);
}

.sheet-heading h1.smaller{ font-size:var(--size-h2); }

.standfirst{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-body-lg);
  line-height:var(--leading-body);
  color:var(--text-muted);
  max-width:var(--measure-prose);
}

/* page scaffolding */
.page-main{ padding:var(--space-8) var(--gutter-page) var(--space-9); }
.page-inner{ max-width:var(--max-page); margin:0 auto; }
.sheet-wrap{ max-width:var(--measure-wide); margin:0 auto; }

/* ============================================================
   HOME
   ============================================================ */

.home-hero{
  background:var(--texture-parchment);
  padding:var(--space-9) var(--gutter-page) var(--space-8);
}

.home-hero-inner{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--space-8);
  align-items:center;
}

.home-hero-copy{
  display:grid;
  gap:var(--space-5);
  justify-items:start;
}

.home-hero h1{
  font-family:var(--font-display);
  font-size:var(--size-display-1);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  font-weight:var(--weight-semibold);
  margin:0;
}

.home-hero .lede{
  max-width:var(--measure-statement);
  font-size:var(--size-body-lg);
  line-height:var(--leading-body);
  color:var(--text-body);
  margin:0;
}

.btn-row{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

@media (max-width:860px){
  .home-hero-inner{ grid-template-columns:1fr; }
}

/* image plate — gold double frame, honest placeholder */
.image-plate{
  border:3px double var(--gold-500);
  padding:6px;
  background:var(--parchment-050);
  box-shadow:var(--shadow-leaf);
  width:100%;
  max-width:420px;
}

.image-plate.ink{ border-color:var(--line-rule); }

.image-plate .plate-well{
  aspect-ratio:4 / 5;
  background-image:var(--texture-hatch);
  background-color:var(--parchment-200);
  display:grid;
  place-items:center;
}

.image-plate.square .plate-well{ aspect-ratio:1 / 1; }

.image-plate .plate-note{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--ink-500);
}

.image-plate figcaption{
  padding:8px 4px 2px;
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--text-meta);
  text-align:center;
}

/* three-up explainer */
.threeup{
  padding:var(--space-8) var(--gutter-page);
}

.threeup-inner{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
}

.threeup-item{
  display:grid;
  gap:var(--space-3);
  justify-items:start;
  align-content:start;
  border-top:2px solid var(--line-accent);
  padding-top:var(--space-4);
}

.threeup-item h3{
  font-family:var(--font-display);
  font-size:var(--size-h3);
  margin:0;
}

.threeup-item p{
  font-size:var(--size-body-sm);
  line-height:var(--leading-body);
  color:var(--text-body);
  margin:0;
}

@media (max-width:760px){
  .threeup-inner{ grid-template-columns:1fr; }
}

/* dark verse band */
.verse-band{
  background:var(--texture-parchment-dark);
  padding:var(--space-9) var(--gutter-page);
}

.verse-band-inner{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--space-8);
  align-items:center;
}

@media (max-width:760px){
  .verse-band-inner{ grid-template-columns:1fr; justify-items:center; }
}

.pullquote{
  margin:0;
  display:grid;
  gap:var(--space-4);
}

.pullquote p{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.5rem, 3.2vw, 2.25rem);
  line-height:1.4;
  color:var(--text-display);
}

.pullquote cite{
  font-family:var(--font-meta);
  font-style:normal;
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
}

.pullquote.dark p{ color:var(--parchment-050); }
.pullquote.dark cite{ color:var(--gold-400); }

.pullquote.body-size p{ font-size:var(--size-h3); }

.seal-img{ filter:drop-shadow(0 2px 5px rgba(0,0,0,.35)); }

/* home closing card */
.home-close{ padding:var(--space-9) var(--gutter-page); }

/* ============================================================
   THE PACT — full width of the window
   ============================================================ */

.pact-full{
  position:relative;
  background:var(--parchment-100);
  border-left:3px double var(--line-gold);
  border-right:3px double var(--line-gold);
  border-bottom:3px double var(--line-gold);
  padding:var(--space-8) var(--gutter-page) var(--space-9);
}

.pact-full::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--texture-fibre);
  mix-blend-mode:multiply;
  pointer-events:none;
}

.pact-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:230px minmax(0,1fr) 230px;
  gap:var(--space-7);
  align-items:start;
}

.pact-body{ grid-column:2; min-width:0; }

/* table of contents — sticky at the left of the document */
.toc{
  grid-column:1;
  position:sticky;
  top:var(--space-7);
  display:grid;
  gap:2px;
  border-top:var(--border-hairline);
}

.toc-title{
  font-family:var(--font-meta);
  font-size:var(--size-micro);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
  padding:10px 0 6px;
}

.toc a{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-meta);
  padding:8px 0 8px 12px;
  border-bottom:var(--border-hairline);
  border-left:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-ink), border-color var(--dur-fast) var(--ease-ink);
}

.toc a:hover{ color:var(--text-accent); border-left-color:var(--line-gold); }
.toc a.current{ color:var(--text-accent); border-left-color:var(--line-accent); }

@media (max-width:1100px){
  .pact-grid{ grid-template-columns:1fr; }
  .toc{ display:none; }
  .pact-body{ grid-column:1; }
}

.statement h2, .statement p[id], .closing, .statement{ scroll-margin-top:var(--space-7); }

.toc a.toc-sub{
  padding-left:26px;
  font-weight:var(--weight-medium);
  font-size:var(--size-micro);
}

/* sign section at the end of the pact — inked in seal red */
.sign-section{
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(78,12,19,.6) 0%, rgba(78,12,19,0) 60%),
    linear-gradient(180deg, var(--red-800) 0%, var(--red-900) 100%);
  border-top:1px solid var(--red-900);
  color:var(--parchment-100);
  padding:var(--space-9) var(--gutter-page);
}

.sign-section .eyebrow{ color:var(--gold-400); }
.sign-section .sheet-heading h1{ color:var(--parchment-050); }
.sign-section .standfirst{ color:var(--parchment-200); }
.sign-section .ornament.ink .line{ background:var(--gold-500); opacity:.8; }
.sign-section .ornament.ink .glyph{ color:var(--gold-500); }

.sign-section .field label{ color:var(--parchment-200); }
.sign-section .field .hint{ color:var(--parchment-300); }
.sign-section .field input,
.sign-section .field select{
  border-color:var(--red-900);
  box-shadow:0 2px 8px rgba(46,12,10,.35);
}
.sign-section .field.error input,
.sign-section .field.error select{ border-color:var(--gold-400); }
.sign-section .error-msg,
.sign-section .field .error-msg{ color:var(--red-100); }

.sign-section .consent{ color:var(--parchment-100); }
.sign-section .consent-block{ border-top-color:rgba(253,250,243,.22); }

.sign-section .btn{
  background:var(--gold-500);
  color:var(--ink-900);
  border:1px solid var(--gold-700);
}
.sign-section .btn:hover{ background:var(--gold-600); }
.sign-section .btn.ghost{
  background:transparent;
  color:var(--gold-200);
  border-color:transparent;
}
.sign-section .btn.ghost:hover{ color:var(--parchment-050); }

.sign-section .sign-confirm{
  color:var(--red-100);
  border-left-color:var(--gold-500);
}

/* ============================================================
   WIREFRAME SITE SECTIONS (per the design handoff)
   ============================================================ */

.sign-narrow{
  max-width:40rem;
  margin:0 auto;
  display:grid;
  gap:var(--space-6);
}

.wire-section{
  background:var(--surface-page);
  padding:0 var(--gutter-page) var(--space-9);
}

.wire-section.intro{
  padding-top:80px;
  padding-bottom:80px;
  background:var(--paper-white);
}
.wire-section.faq-last{ padding-bottom:112px; }

.wire-wide{ max-width:var(--max-page); margin:0 auto; }

.wire-narrow{
  max-width:40rem;
  margin:0 auto;
  display:grid;
  gap:var(--space-6);
}

.intro-grid{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 460px;
  gap:var(--space-8);
  align-items:center;
}

.intro-copy{ display:grid; gap:var(--space-6); max-width:40rem; }

.intro-body{
  margin:0;
  font-size:var(--size-body);
  line-height:var(--leading-body);
  color:var(--text-body);
}

@media (max-width:860px){
  .intro-grid{ grid-template-columns:1fr; }
}

.signatories-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-5);
  flex-wrap:wrap;
  margin-bottom:var(--space-6);
}

/* ============================================================
   STATEMENT
   ============================================================ */

.statement{
  max-width:var(--measure-statement);
  margin:0 auto;
  display:grid;
  gap:var(--space-5);
}

.statement p{
  margin:0;
  font-size:var(--size-body);
  line-height:var(--leading-statement);
}

.statement .article-label{
  margin-top:var(--space-6);
  text-align:center;
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
}

.statement h2{
  margin:var(--space-6) 0 0;
  text-align:center;
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);
  color:var(--text-display);
}

.statement ol{
  margin:0;
  padding-left:1.4em;
  display:grid;
  gap:var(--space-4);
}

.statement ol li{
  font-size:var(--size-body);
  line-height:var(--leading-statement);
  padding-left:.35em;
}

.statement ol li::marker{
  font-family:var(--font-meta);
  font-weight:var(--weight-semibold);
  color:var(--text-gold);
}

.statement .aside{
  font-style:italic;
  color:var(--text-muted);
  border-left:2px solid var(--line-gold);
  padding-left:var(--space-4);
}

.statement a{
  color:var(--text-accent);
  text-decoration:underline;
  text-underline-offset:.2em;
  transition:color var(--dur-fast) var(--ease-ink);
}
.statement a:hover{ color:var(--red-900); text-decoration-color:var(--line-gold); }

.closing{
  margin-top:var(--space-8);
  display:grid;
  justify-items:center;
  gap:var(--space-5);
  text-align:center;
}

.closing blockquote{
  margin:0;
  max-width:var(--measure-statement);
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--size-h3);
  line-height:1.45;
  color:var(--text-display);
}

.closing .seal-img{ width:132px; transform:rotate(-6deg); }

/* ============================================================
   LEGISLATION
   ============================================================ */

.legis-grid{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:var(--space-8);
  align-items:start;
}

@media (max-width:900px){
  .legis-grid{ grid-template-columns:1fr; }
  .legis-side{ position:static !important; }
}

.legis-main{ display:grid; gap:var(--space-6); }

.legis-side{
  display:grid;
  gap:var(--space-4);
  position:sticky;
  top:var(--space-5);
}

.clause{
  display:grid;
  grid-template-columns:clamp(48px,8%,72px) 1fr;
  column-gap:var(--space-4);
  padding:var(--space-5) 0;
  border-top:var(--border-hairline);
}

.clause-number{
  font-family:var(--font-mono);
  font-size:var(--size-body-sm);
  color:var(--text-gold);
  padding-top:3px;
}

.clause-body{ display:grid; gap:var(--space-3); max-width:var(--measure-statement); }

.clause-body h4{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-meta);
  margin:0;
}

.clause-text{
  font-family:var(--font-body);
  font-size:var(--size-body-sm);
  line-height:var(--leading-statement);
  color:var(--text-body);
}

.clause.struck .clause-text{
  color:var(--text-muted);
  text-decoration:line-through;
  text-decoration-color:var(--red-500);
  text-decoration-thickness:1px;
}

.clause-commentary{
  margin:0;
  border-left:2px solid var(--line-accent);
  padding-left:var(--space-4);
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--size-body-sm);
  color:var(--text-accent);
}

/* ============================================================
   RESOURCES
   ============================================================ */

.resource-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--space-4);
}

.resource-card{
  display:grid;
  gap:var(--space-3);
  align-content:start;
  background:var(--surface-card);
  border:var(--border-hairline);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-leaf);
  padding:var(--space-5);
  text-decoration:none;
  color:inherit;
  transition:border-color var(--dur-fast) var(--ease-ink), box-shadow var(--dur-base) var(--ease-paper);
}

.resource-card:hover{ border-color:var(--line-gold); box-shadow:var(--shadow-sheet); }

.resource-kind{
  display:flex;
  gap:var(--space-3);
  align-items:baseline;
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}

.resource-kind .kind{ color:var(--text-gold); }
.resource-kind .source{ color:var(--text-muted); font-weight:var(--weight-regular); }

.resource-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--size-h4);
  line-height:var(--leading-heading);
}

.resource-card p{
  margin:0;
  font-size:var(--size-body-sm);
  line-height:var(--leading-body);
  color:var(--text-body);
}

.resource-card .meta{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq-list{ border-bottom:var(--border-hairline); }

.faq-item{ border-top:var(--border-hairline); }

.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-5);
  padding:var(--space-5) 0;
  font-family:var(--font-display);
  font-size:var(--size-h4);
  font-weight:var(--weight-semibold);
  color:var(--text-display);
  transition:color var(--dur-fast) var(--ease-ink);
}

.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--text-accent); }

.faq-item summary .mark{
  font-family:var(--font-body);
  font-size:var(--size-h3);
  line-height:1;
  color:var(--text-gold);
  transition:transform var(--dur-base) var(--ease-paper);
  flex-shrink:0;
}

.faq-item[open] summary .mark{ transform:rotate(45deg); }

.faq-answer{
  padding:0 0 var(--space-5);
  max-width:var(--measure-prose);
  display:grid;
  gap:var(--space-3);
}

.faq-answer p{ margin:0; font-size:var(--size-body); line-height:var(--leading-body); }

/* ============================================================
   SIGN
   ============================================================ */

.sign-grid{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:var(--space-8);
  align-items:start;
}

@media (max-width:900px){
  .sign-grid{ grid-template-columns:1fr; }
  .sign-side{ position:static !important; }
}

.sign-card{
  background:var(--texture-parchment);
  border:var(--border-hairline);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sheet);
  padding:clamp(24px,5vw,var(--space-8));
}

.sign-form{ display:grid; gap:var(--space-6); margin-top:var(--space-6); }

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}

@media (max-width:560px){ .field-grid{ grid-template-columns:1fr; } }

.field{ display:grid; gap:var(--space-2); align-content:start; }

.field.full{ grid-column:1 / -1; }

.field label{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--text-meta);
}

.field .hint{
  font-family:var(--font-body);
  font-style:italic;
  font-size:var(--size-body-sm);
  color:var(--text-muted);
  text-transform:none;
  letter-spacing:0;
  font-weight:var(--weight-regular);
  margin-left:var(--space-2);
}

.field input, .field select{
  font-family:var(--font-body);
  font-size:var(--size-body);
  color:var(--text-body);
  background:var(--surface-raised);
  border:var(--border-ink);
  border-bottom-width:2px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-inset-well);
  padding:12px 14px;
  width:100%;
}

.field.error input, .field.error select{
  border-color:var(--red-700);
}

.field .error-msg{
  margin:0;
  font-style:italic;
  font-size:var(--size-body-sm);
  color:var(--text-accent);
}

.consent-block{
  display:grid;
  gap:var(--space-4);
  border-top:var(--border-hairline);
  padding-top:var(--space-5);
}

.consent{
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  font-size:var(--size-body-sm);
  line-height:var(--leading-body);
}

.consent input{
  margin-top:.3em;
  width:16px; height:16px;
  accent-color:var(--red-700);
  flex-shrink:0;
}

.sign-side{
  background:var(--texture-parchment-dark);
  border-radius:var(--radius-sm);
  padding:clamp(24px,5vw,var(--space-8));
  display:grid;
  gap:var(--space-4);
  position:sticky;
  top:var(--space-5);
}

.sign-side h3{
  font-family:var(--font-display);
  font-size:var(--size-h4);
  color:var(--parchment-050);
  margin:0;
}

.sign-side ol{
  margin:0;
  padding-left:1.1em;
  color:var(--parchment-200);
  font-size:var(--size-body-sm);
  line-height:var(--leading-body);
  display:grid;
  gap:var(--space-3);
}

.sign-side .side-note{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold-200);
  font-size:var(--size-body-sm);
}

.sign-confirm{
  margin:0;
  font-style:italic;
  color:var(--text-accent);
  border-left:2px solid var(--line-accent);
  padding-left:var(--space-4);
}

/* signatories empty state */
.register-empty{
  display:grid;
  justify-items:center;
  gap:var(--space-5);
  text-align:center;
  padding:var(--space-8) var(--space-5);
}

.register-empty .seal-img{ width:92px; transform:rotate(-6deg); }

.register-empty p{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--size-body-lg);
  color:var(--text-muted);
  max-width:var(--measure-statement);
}

.signatory-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-4);
}

.signatory-card{
  background:var(--surface-card);
  border:var(--border-hairline);
  border-left:2px solid var(--line-gold);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-leaf);
  padding:var(--space-5);
  display:grid;
  gap:var(--space-1);
}

.signatory-card .name{
  font-family:var(--font-display);
  font-size:var(--size-h4);
  font-weight:var(--weight-semibold);
  color:var(--text-display);
}

.signatory-card .org{ font-size:var(--size-body-sm); color:var(--text-body); }

.signatory-card .place{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  background:var(--texture-parchment-dark);
  color:var(--text-on-dark);
  padding:var(--space-8) var(--gutter-page) var(--space-7);
}

.footer-inner{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  justify-items:center;
  gap:var(--space-5);
  text-align:center;
}

.footer-inner .seal-img{
  width:92px;
  transform:rotate(-6deg);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
}

.footer-inner .ornament{ width:160px; }

.attribution{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--size-body-lg);
  font-style:italic;
  max-width:none;
  color:var(--parchment-200);
}

.footer-links{
  display:flex;
  gap:var(--space-5);
  flex-wrap:wrap;
  justify-content:center;
}

.footer-links a{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--gold-400);
  text-decoration:none;
}

.footer-links a:hover{ color:var(--gold-200); }


/* ============================================================
   SITE MENU — line stack, top right
   ============================================================ */

.menu-toggle{
  position:fixed;
  top:18px; right:18px;
  z-index:60;
  width:46px; height:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:var(--parchment-050);
  border:var(--border-hairline);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-leaf);
  cursor:pointer;
  padding:0;
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity var(--dur-base) var(--ease-ink), transform var(--dur-base) var(--ease-paper);
}

/* appears only once the declaration itself is on screen */
.menu-toggle.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

.menu-toggle:hover{ border-color:var(--line-gold); }

.menu-toggle span{
  display:block;
  width:20px; height:2px;
  background:var(--ink-800);
  transition:transform var(--dur-base) var(--ease-paper), opacity var(--dur-fast) var(--ease-ink);
}

.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu-scrim{
  position:fixed; inset:0;
  z-index:55;
  background:rgba(14,12,10,.45);
}

.menu-scrim[hidden], .site-menu[hidden]{ display:none; }

.site-menu{
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:58;
  width:min(320px, 85vw);
  background:var(--texture-parchment-dark);
  display:grid;
  align-content:start;
  gap:2px;
  padding:96px var(--space-6) var(--space-6);
  box-shadow:-10px 0 40px rgba(14,12,10,.4);
}

.menu-kicker{
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--size-body-lg);
  color:var(--parchment-200);
  padding-bottom:var(--space-4);
}

.site-menu a{
  font-family:var(--font-meta);
  font-size:var(--size-body-sm);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold-400);
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color var(--dur-fast) var(--ease-ink);
}

.site-menu a:hover{ color:var(--gold-200); }


/* ============================================================
   STICKY SITE CHROME — nav bar + ticker pin in the site area
   ============================================================ */

.site-chrome{
  position:sticky;
  top:0;
  z-index:40;
  box-shadow:var(--shadow-leaf);
}

/* anchor jumps land below the pinned chrome */
#intro, #signatories, #legislation, #resources, #faq{
  scroll-margin-top:160px;
}


/* dark band variant for wireframe sections */
.wire-section.dark{
  background:var(--texture-parchment-dark);
  color:var(--parchment-100);
  padding-top:var(--space-8);
  padding-bottom:var(--space-9);
}

/* room between the dark legislation band and the signatories */
#signatories{ padding-top:var(--space-9); }

.wire-section.dark .eyebrow{ color:var(--gold-400); }
.wire-section.dark .sheet-heading h1{ color:var(--parchment-050); }
.wire-section.dark .standfirst{ color:var(--parchment-200); }
.wire-section.dark .ornament.ink .line{ background:var(--gold-500); opacity:.8; }
.wire-section.dark .ornament.ink .glyph{ color:var(--gold-500); }

.wire-section.dark .clause{ border-top-color:rgba(253,250,243,.16); }
.wire-section.dark .clause-number{ color:var(--gold-400); }
.wire-section.dark .clause-body h4{ color:var(--parchment-300); }
.wire-section.dark .clause-text{ color:var(--parchment-100); }
.wire-section.dark .clause.struck .clause-text{
  color:rgba(246,238,220,.55);
  text-decoration-color:var(--red-500);
}
.wire-section.dark .clause-commentary{
  color:var(--red-300);
  border-left-color:var(--red-500);
}


/* ============================================================
   SIGNING CEREMONY — the slip falls onto the form, the pen
   writes the name letter by letter
   ============================================================ */

.sign-section{ position:relative; }

.sign-section.signed .sign-narrow{
  opacity:.25;
  filter:saturate(.6);
  pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-ink), filter var(--dur-slow) var(--ease-ink);
}

.sig-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  padding:0 var(--gutter-page);
}

.sig-overlay[hidden]{ display:none; }

.sig-card{
  position:sticky;
  top:max(18vh, 120px);
  margin:0 auto;
  width:min(100%, 560px);
  background:var(--parchment-050);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lifted);
  padding:var(--space-6) var(--space-6) var(--space-4);
  display:grid;
  gap:var(--space-3);
  justify-items:center;
}

@media (prefers-reduced-motion:no-preference){
  .sig-card.fall{ animation:pod-slip-fall .7s var(--ease-paper) both; }
}

@keyframes pod-slip-fall{
  0%{ transform:translateY(-70vh) rotate(-5deg); }
  62%{ transform:translateY(10px) rotate(1.6deg); }
  82%{ transform:translateY(-4px) rotate(-.6deg); }
  100%{ transform:translateY(0) rotate(0); }
}

.sig-line{
  position:relative;
  width:100%;
  min-height:104px;
  border-bottom:1px solid var(--ink-700);
  padding:var(--space-4) var(--space-3) 10px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.sig-name{
  font-family:"Great Vibes", "Snell Roundhand", cursive;
  font-size:clamp(2rem, 6vw, 2.75rem);
  line-height:1.3;
  color:var(--ink-800);
  white-space:nowrap;
  max-width:100%;
  clip-path:inset(-40% 105% -20% -10px);
}

.sig-pen{
  position:absolute;
  bottom:0;
  left:0;
  width:96px;
  pointer-events:none;
  filter:drop-shadow(1px 2px 2px rgba(46,42,37,.3));
  will-change:transform;
}

.sig-card.done .sig-pen{
  transition:opacity .45s var(--ease-ink);
  opacity:0;
}

.sig-caption{
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--text-gold);
  opacity:0;
  transition:opacity .5s var(--ease-ink);
}

.sig-card.done .sig-caption{ opacity:1; }

.sig-card .sign-confirm{
  color:var(--text-accent);
  border-left-color:var(--line-accent);
  font-size:var(--size-body-sm);
}

.sig-back{
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-meta);
  font-size:var(--size-meta);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--text-accent);
  text-decoration:underline;
  text-underline-offset:.2em;
  padding:6px 0 2px;
}

.sig-back:hover{ color:var(--red-900); }


/* red band variant — the FAQ closes the site in seal red */
.wire-section.red{
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(78,12,19,.6) 0%, rgba(78,12,19,0) 60%),
    linear-gradient(180deg, var(--red-800) 0%, var(--red-900) 100%);
  color:var(--parchment-100);
  padding-top:var(--space-8);
}

.wire-section.red .eyebrow{ color:var(--gold-400); }
.wire-section.red .sheet-heading h1{ color:var(--parchment-050); }
.wire-section.red .standfirst{ color:var(--parchment-200); }
.wire-section.red .ornament.ink .line{ background:var(--gold-500); opacity:.8; }
.wire-section.red .ornament.ink .glyph{ color:var(--gold-500); }

.wire-section.red .faq-list{ border-bottom-color:rgba(253,250,243,.2); }
.wire-section.red .faq-item{ border-top-color:rgba(253,250,243,.2); }
.wire-section.red .faq-item summary{ color:var(--parchment-050); }
.wire-section.red .faq-item summary:hover{ color:var(--gold-200); }
.wire-section.red .faq-item summary .mark{ color:var(--gold-400); }
.wire-section.red .faq-answer p{ color:var(--parchment-100); }


/* the arms engraving, unframed — inked straight onto the page */
.intro-sketch{
  justify-self:center;
  width:100%;
  max-width:460px;
}


/* links inside the dark legislation band */
.wire-section.dark a:not(.resource-card){
  color:var(--gold-200);
  text-decoration:underline;
  text-underline-offset:.2em;
}
.wire-section.dark a:not(.resource-card):hover{ color:var(--parchment-050); }


/* the pact reads larger and wider — a shorter scroll */
.pact-full .statement{
  max-width:46rem;
  gap:var(--space-5);
}

.pact-full .statement p,
.pact-full .statement ol li{
  font-size:var(--size-body-lg);
  line-height:1.7;
}

.pact-full .statement h2{
  font-size:var(--size-h2);
}


/* ============================================================
   MOBILE
   ============================================================ */

/* portrait screens: the envelope keeps true envelope proportions,
   letterboxed on the inked ground */
@media (max-aspect-ratio: 9/10){
  .env-stage{
    inset:auto;
    left:0; right:0;
    top:50%;
    height:min(72vw, 84svh);
    transform:translateY(-50%);
  }

  /* the envelope lies on a desk: walnut grain, a pool of light,
     and a shadow cast by the paper */
  .landing,
  .scene{
    background:url("assets/desk.webp") center / cover no-repeat #1E1209;
  }

  .env-body{
    box-shadow:0 22px 44px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4);
  }

  .scene-hint{ color:var(--gold-400); }
  .scene-hint-line{
    background:linear-gradient(to bottom, rgba(201,169,97,.8), rgba(201,169,97,0));
  }
  .scene-hint-line::after{ background:var(--gold-200); }
}

/* the site nav collapses behind a line-stack on small screens */
.masthead-toggle{ display:none; }

@media (max-width:840px){
  .masthead{ position:relative; }

  .masthead-inner{
    flex-wrap:nowrap;
    gap:var(--space-4);
    padding-block:var(--space-4);
  }

  .masthead-toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:44px; height:44px;
    flex:0 0 auto;
    background:var(--parchment-050);
    border:var(--border-hairline);
    border-radius:var(--radius-sm);
    cursor:pointer;
    padding:0;
  }

  .masthead-toggle span{
    display:block;
    width:18px; height:2px;
    background:var(--ink-800);
    transition:transform var(--dur-base) var(--ease-paper), opacity var(--dur-fast) var(--ease-ink);
  }

  .masthead-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .masthead-toggle.open span:nth-child(2){ opacity:0; }
  .masthead-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .masthead-nav{ display:none; }

  .masthead.nav-open .masthead-nav{
    display:grid;
    gap:0;
    position:absolute;
    top:100%; left:0; right:0;
    background-color:var(--parchment-100);
    border-bottom:var(--border-hairline);
    box-shadow:var(--shadow-sheet);
    padding:var(--space-2) var(--gutter-page) var(--space-4);
  }

  .masthead.nav-open .masthead-nav a{
    padding:13px 0;
    border-bottom:var(--border-hairline);
  }

  .masthead.nav-open .masthead-nav a:last-child{ border-bottom:none; }
}

/* small-screen comfort */
@media (max-width:560px){
  .pact-full{ padding-top:var(--space-7); }
  .pact-full .statement p,
  .pact-full .statement ol li{ font-size:var(--size-body); }
  .closing blockquote{ font-size:var(--size-h4); }
  .sig-card{ padding:var(--space-5) var(--space-4) var(--space-4); }
  .sig-pen{ width:72px; }
}


/* the letter's content counter-scales during the finale so the paper
   grows to cover the window while the type stays true-sized */
.letter-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(12px, 2.4vh, 24px);
  will-change:transform;
}


/* signatory sub-groups: the framers, then the undersigned */
.sig-group{
  display:grid;
  gap:var(--space-4);
  margin-top:var(--space-6);
}

.sig-group-title{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:var(--weight-semibold);
  color:var(--text-display);
  border-bottom:var(--border-hairline);
  padding-bottom:var(--space-3);
}

.sig-group-note{
  margin:0;
  font-size:var(--size-body-sm);
  color:var(--text-muted);
}


/* framer cards in seal red, set apart from the undersigned */
.sig-group.framers .signatory-card{
  background:linear-gradient(180deg, var(--red-800) 0%, var(--red-900) 100%);
  border-color:var(--red-900);
  border-left-color:var(--gold-500);
}

.sig-group.framers .signatory-card .name{ color:var(--parchment-050); }
.sig-group.framers .signatory-card .org{ color:var(--parchment-200); }
.sig-group.framers .signatory-card .place{ color:var(--gold-400); }


/* legislation band: statute left, primary sources right */
.legis-band-grid{
  max-width:var(--max-page);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(24px, 4vw, var(--space-8));
  align-items:start;
}

.legis-band-side{
  display:grid;
  gap:var(--space-4);
  position:sticky;
  top:170px;
}

@media (max-width:900px){
  .legis-band-grid{ grid-template-columns:1fr; }
  .legis-band-side{ position:static; }
}

/* resource cards keep ink text even inside dark bands */
.wire-section.dark .resource-card{ color:var(--text-body); }
.wire-section.dark .resource-card h3{ color:var(--text-display); }


/* ============================================================
   SIGNING CEREMONY v2 — signing the pact itself, with the
   desk's own fountain pen and ink that dries
   ============================================================ */

.sig-card{
  background:var(--parchment-100);
  border:var(--border-frame);
  outline:1px solid var(--line-hairline);
  outline-offset:4px;
}

.sig-eyebrow{
  font-family:var(--font-meta);
  font-size:var(--size-micro);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
}

.sig-excerpt{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--size-body);
  line-height:1.55;
  color:var(--ink-700);
  text-align:center;
  max-width:26rem;
}

.sig-write{
  position:relative;
  display:inline-block;
}

.sig-name{
  font-family:"Homemade Apple", "Bradley Hand", cursive;
  font-size:clamp(1.3rem, 4.2vw, 1.8rem);
  line-height:1.5;
  color:var(--ink-800);
}

.sig-name-wet{
  position:absolute;
  inset:0;
  color:#0A0806;
  filter:blur(.4px);
  text-shadow:0 0 1px rgba(10,8,6,.55);
  transition:opacity .9s var(--ease-ink);
}

.sig-pen{
  width:128px;
  bottom:-18px;
  filter:drop-shadow(3px 5px 5px rgba(46,42,37,.35));
}


/* the framers' signatures already on the slip */
.sig-prior{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2) var(--space-6);
  align-items:end;
  width:min(100%, 26rem);
}

.sig-prior-label{
  grid-column:1 / -1;
  font-family:var(--font-meta);
  font-size:var(--size-micro);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-muted);
  text-align:center;
  padding-bottom:2px;
}

.sig-prior-name{
  color:var(--ink-700);
  border-bottom:1px solid var(--line-hairline);
  padding:0 6px 3px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sig-prior-name.f1{ font-family:"Homemade Apple", cursive; font-size:.85rem; transform:rotate(-1.4deg); }
.sig-prior-name.f2{ font-family:"Satisfy", cursive; font-size:1.1rem; transform:rotate(.9deg); }
.sig-prior-name.f3{ font-family:"Satisfy", cursive; font-size:1.05rem; transform:rotate(1.2deg); }
.sig-prior-name.f4{ font-family:"Homemade Apple", cursive; font-size:.82rem; transform:rotate(-.8deg); }

/* stroke-traced signature (Vara) */
.sig-write{ width:100%; }

.sig-vara{ width:100%; }

.sig-vara svg path{
  transition:stroke 1s var(--ease-ink);
}

.sig-pen.vara-track{
  top:0;
  bottom:auto;
}

/* fallback lettering matches the traced hand */
.sig-name{ font-family:"Satisfy", "Homemade Apple", cursive; }


/* tall letters need headroom — never clip the traced strokes */
.sig-vara svg{ overflow:visible; }
.sig-vara{ padding-top:16px; }

/* maple-leaf confetti when the signature completes */
.sig-confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
  overflow:hidden;
}

.sig-leaf{ position:absolute; }

.sig-leaf svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 1px 1px rgba(46,42,37,.25));
}


/* the pen appears only once it is poised at the first stroke */
.sig-pen{ opacity:0; }
.sig-pen.ready{
  opacity:1;
  transition:opacity .4s var(--ease-ink);
}


/* honeypot — off-screen for people */
.sig-hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}


/* field notice — a small popover right above the entry it explains */
.notice-toast{
  position:absolute;
  bottom:calc(100% + 10px);
  left:0;
  z-index:20;
  width:min(330px, calc(100vw - 60px));
  background:var(--parchment-050);
  border:1px solid var(--line-gold);
  border-left:3px solid var(--line-gold);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sheet);
  padding:var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  display:grid;
  gap:3px;
}

.notice-toast::after{
  content:"";
  position:absolute;
  top:100%;
  left:26px;
  border:7px solid transparent;
  border-top-color:var(--line-gold);
}

.notice-toast .notice-kicker{
  font-family:var(--font-meta);
  font-size:var(--size-micro);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--text-gold);
}

.notice-toast p{
  margin:0;
  font-size:var(--size-body-sm);
  line-height:var(--leading-body);
  color:var(--text-body);
}

.notice-toast .notice-close{
  position:absolute;
  top:4px; right:6px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  color:var(--text-muted);
  padding:4px;
}

.notice-toast .notice-close:hover{ color:var(--text-accent); }

@media (prefers-reduced-motion:no-preference){
  .notice-toast{ animation:pod-toast-in .4s var(--ease-paper) both; }
  .notice-toast.leaving{ animation:pod-toast-out .3s var(--ease-ink) both; }
}

@keyframes pod-toast-in{
  from{ transform:translateY(8px); opacity:0; }
  to{ transform:none; opacity:1; }
}

@keyframes pod-toast-out{
  from{ opacity:1; }
  to{ transform:translateY(8px); opacity:0; }
}


/* the popover anchors to its field */
.field{ position:relative; }