/* The sealed letter: shown once, on a visitor's first arrival. One click plays it; "Enter the site" closes it. */
.env-overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow: hidden; overscroll-behavior: contain; touch-action: none; transition: opacity .5s ease, visibility .5s;
  --paper: #fbf7ee; --ink: #1b2747; --wax: #1f3a78;
  --letter: "Cormorant Garamond", Georgia, serif; --script: "Pinyon Script", "Snell Roundhand", cursive; --serif: "Cormorant Garamond", Georgia, serif; }
.env-overlay.closing { opacity: 0; visibility: hidden; }
.env-overlay[hidden] { display: none; }
.env-stage { position: relative; height: 100%; display: grid; place-items: center; }
.env { cursor: pointer; }
.env-overlay.playing .env { cursor: default; }
.env-actions { position: absolute; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; gap: 10px; transition: opacity .4s, visibility 0s; }
.env-overlay.playing .env-actions, .env-overlay.scrolling .env-actions, .env-overlay.done .env-actions { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility 0s .4s; }
.env-hint { align-self: center; font-size: 13px; color: var(--quiet); }
.env-enter { position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-inline: 16px; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .5s, transform .5s, visibility 0s .5s; }
.env-overlay.done .env-enter { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .5s, transform .5s, visibility 0s; }
@media (max-width: 420px) { .env-enter { padding-inline: 12px; } .env-enter .btn { height: 42px; padding: 0 14px; font-size: 14px; } }
.paper .sign .next a, .letter .sign .next a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.env-skip { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); z-index: 8; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--quiet); font: 500 13px var(--sans); cursor: pointer; }
.env-skip:hover { color: var(--text); }
.env-overlay.done .env-skip { display: none; }
.paper .big, .letter .big { font-weight: 500; }
/* ---------- envelope intro: a sealed letter from the Secretariat, opened by scrolling ---------- */
.env { position: relative; width: min(620px, 88vw, calc(100svh * .95)); aspect-ratio: 3 / 2; container-type: inline-size; perspective: 1600px; margin-top: 10vh; }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; will-change: transform, opacity; }
/* inside of the envelope: navy liner with a fine silver pattern */
.env-back { z-index: 1; border-radius: 6px; background:
  repeating-linear-gradient(45deg, rgba(211, 217, 227, .07) 0 1px, transparent 1px 9px),
  repeating-linear-gradient(-45deg, rgba(211, 217, 227, .07) 0 1px, transparent 1px 9px), #13285a;
  box-shadow: 0 40px 80px -30px rgba(2, 8, 22, .8), 0 0 0 1px rgba(255, 255, 255, .04); }
.env-front { z-index: 3; filter: drop-shadow(0 -1px 1px rgba(60, 45, 20, .18)); }
.env-front .pocket { position: absolute; inset: 0; border-radius: 0 0 6px 6px; clip-path: polygon(0 0, 50% 53%, 100% 0, 100% 100%, 0 100%);
  background: radial-gradient(120% 90% at 50% 120%, #f6efdf, #e9dfc8 70%), #ece3cf; }
.env-front .pocket::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to top right, transparent calc(50% - 1px), rgba(110, 85, 45, .16) 50%, transparent calc(50% + 1px)) left bottom / 50.2% 100% no-repeat,
  linear-gradient(to top left, transparent calc(50% - 1px), rgba(110, 85, 45, .16) 50%, transparent calc(50% + 1px)) right bottom / 50.2% 100% no-repeat; }
.env-front .addr { position: absolute; left: 7%; bottom: 9%; font: 4.3cqw/1.05 var(--script); color: #24325a; transform: rotate(-3deg); transform-origin: left bottom; }
.env-front .addr small { display: block; font: 600 1.35cqw/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #6d6450; margin-bottom: .6cqw; transform: rotate(3deg); }
.postmark { position: absolute; right: 6%; bottom: 7%; width: 19cqw; opacity: .5; color: #2a3a68; transform: rotate(-14deg); }
.env-flap { z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d; }
.env-flap .face { position: absolute; inset: 0 0 auto; height: 60%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 53% 94%, 50% 100%, 47% 94%); }
.env-flap .out { background: linear-gradient(180deg, #efe7d4, #e2d7bf); }
.env-flap .out::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 30%); }
.env-flap .in { transform: rotateX(180deg); background:
  repeating-linear-gradient(45deg, rgba(211, 217, 227, .09) 0 1px, transparent 1px 9px),
  repeating-linear-gradient(-45deg, rgba(211, 217, 227, .09) 0 1px, transparent 1px 9px), #172f66; }
/* wax seal, which splits in two before the flap lifts */
.seal { position: absolute; z-index: 6; left: 50%; top: 60%; width: 17cqw; aspect-ratio: 1; margin: -8.5cqw 0 0 -8.5cqw; pointer-events: none; }
.seal .half { position: absolute; inset: 0; will-change: transform, opacity; }
.seal .half.l { clip-path: polygon(0 0, 54% 0, 46% 35%, 56% 62%, 47% 100%, 0 100%); }
.seal .half.r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 47% 100%, 56% 62%, 46% 35%); }
.wax { position: absolute; inset: 0; border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 34% 28%, #4766ad, var(--wax) 46%, #0b1a3c 100%);
  box-shadow: 0 3px 6px rgba(0, 6, 20, .5), inset 0 -3px 6px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(210, 222, 245, .3); }
.wax::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 8, 30, .4), 0 0 0 1px rgba(211, 217, 227, .25); }
.wax .emblem { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); background: #dfe5ef; opacity: .7; }
/* the letter: folded in two, rises out, then unfolds */
.letter { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 4%; height: 88%; transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform; color: var(--ink); }
.panel { position: absolute; inset: 0; background: var(--paper); background-image:
  repeating-linear-gradient(0deg, rgba(120, 95, 50, .035) 0 1px, transparent 1px 5px),
  radial-gradient(140% 120% at 50% 40%, transparent 60%, rgba(150, 120, 70, .12)); }
.p1 { box-shadow: 0 2px 6px rgba(10, 20, 40, .18); padding: 4.2cqw 6.5cqw 0; }
.p2 { position: absolute; left: 0; right: 0; top: 100%; height: 100%; transform-origin: 50% 0; transform-style: preserve-3d; background: none; }
.p2 .front, .p2 .back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.p2 .front { padding: 2.6cqw 6.5cqw 4cqw; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 14px 30px -10px rgba(10, 20, 40, .35);
  background: linear-gradient(180deg, rgba(120, 95, 50, .14), transparent 2.2cqw), repeating-linear-gradient(0deg, rgba(120, 95, 50, .035) 0 1px, transparent 1px 5px), var(--paper); }
.p2 .front .para:first-child { margin-top: 0; }
.p2 .back { transform: rotateX(180deg); background: #efe8d8; }
.p2 .shade { position: absolute; inset: 0; background: #1a1206; opacity: 0; pointer-events: none; }
.lh { text-align: center; }
.lh .emblem { width: 7.5cqw; background: var(--ink); }
.lh .org { margin: 1cqw 0 0; font: 600 1.55cqw/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.lh .office { margin: .5cqw 0 0; font: italic 1.9cqw/1.3 var(--letter); color: #5d6681; }
.refline { display: flex; justify-content: space-between; gap: 2cqw; margin: 2.4cqw 0 0; padding-top: 1.4cqw; border-top: 1px solid rgba(27, 39, 71, .2); font: 600 1.3cqw/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6f7790; }
.paper .salute, .letter .salute { margin: 2.8cqw 0 0; font: italic 3.4cqw/1.2 var(--letter); }
.paper .para, .letter .para { margin: 1.4cqw 0 0; font: 400 3cqw/1.42 var(--letter); }
.paper .big, .letter .big { position: relative; margin: 0; font: 400 8.2cqw/1 var(--serif); letter-spacing: -.02em; color: #0f2148; }
.paper .big, .letter .big span { color: var(--wax); }
.paper .sign, .letter .sign { display: flex; justify-content: space-between; align-items: end; gap: 3cqw; margin-top: 0; padding-top: 1.6cqw; border-top: 1px solid rgba(27, 39, 71, .2); }
.paper .ps, .letter .ps { margin: 0; font: italic 2.5cqw/1.4 var(--letter); color: #5d6681; }
.paper .sign .who, .letter .sign .who { font: 5.2cqw/1 var(--script); color: #24325a; }
.paper .sign .who small, .letter .sign .who small { display: block; margin-top: .8cqw; font: 600 1.25cqw/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6f7790; }
.paper .sign .next, .letter .sign .next { font: 600 1.45cqw/1.4 var(--sans); color: #4c5675; text-align: right; }
.stamp { position: absolute; right: 1cqw; top: -7cqw; padding: .8cqw 1.8cqw; border: .45cqw double #0f2148; color: #0f2148; font: 700 2.4cqw/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; mix-blend-mode: multiply; opacity: 0; transform: rotate(-11deg) scale(1.6); }
.env-title { position: absolute; top: 5%; left: 0; right: 0; text-align: center; pointer-events: none; }
.env-title p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--quiet); }
.env-title .t { margin: 8px 0 0; font: 400 clamp(32px, 4.6vw, 56px)/1 var(--serif); color: var(--text); }
@media (max-width: 640px) {
  .env { aspect-ratio: 1 / 1; width: min(88vw, calc(100svh * .55)); margin-top: 12vh; }
  .env-title { top: calc(max(16px, env(safe-area-inset-top, 0px)) + 46px); }
  .p1 { padding: 5cqw 6cqw 0; }
  .p2 .front { padding: 2cqw 6cqw 5cqw; }
  .lh .emblem { width: 9cqw; }
  .lh .org { font-size: max(8.5px, 1.55cqw); letter-spacing: .18em; }
  .lh .office { font-size: max(12px, 1.9cqw); }
  .refline { font-size: max(8px, 1.3cqw); flex-direction: column; gap: 3px; }
  .paper .salute, .letter .salute { font-size: max(17px, 3.4cqw); }
  .paper .para, .letter .para { font-size: max(15.5px, 3cqw); line-height: 1.35; }
  .paper .big, .letter .big { font-size: 9.6cqw; }
  .paper .ps, .letter .ps { font-size: max(14px, 2.5cqw); }
  .paper .sign, .letter .sign { flex-direction: column; align-items: start; gap: 6px; }
  .paper .sign .who, .letter .sign .who { font-size: max(26px, 5.2cqw); }
  .letter .sign .who small, .letter .sign .next, .paper .sign .who small, .paper .sign .next { font-size: max(9px, 1.3cqw); text-align: left; }
  .stamp { font-size: max(12px, 2.4cqw); top: -9cqw; }
  .env-front .addr { font-size: 5.6cqw; max-width: 62%; }
  .env-front .addr small { font-size: max(8px, 1.6cqw); }
  .postmark { width: 22cqw; bottom: 30%; }
}

/* the same letter, laid flat on the home page */
#letter-sec { --paper: #fbf7ee; --ink: #1b2747; --wax: #1f3a78; --letter: "Cormorant Garamond", Georgia, serif; --script: "Pinyon Script", "Snell Roundhand", cursive; --serif: "Cormorant Garamond", Georgia, serif; }
.paper { container-type: inline-size; max-width: 620px; padding: 40px 44px 34px; border-radius: 3px; color: var(--ink); background: var(--paper);
  background-image: repeating-linear-gradient(0deg, rgba(120, 95, 50, .035) 0 1px, transparent 1px 5px), radial-gradient(140% 120% at 50% 40%, transparent 60%, rgba(150, 120, 70, .12));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 0; transform: rotate(-.6deg); }
.paper .lh .emblem { background: var(--ink); }
.paper .big { margin-top: 5cqw; }
.paper .sign { margin-top: 3cqw; }
.paper .ps { margin-top: 3cqw; }
.paper .stamp { opacity: 1; transform: rotate(-11deg); }
/* the home page keeps only the letter's opening, as a slip that replays the whole thing */
.paper.slip { position: relative; max-width: 520px; text-decoration: none; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.paper.slip:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 36px 60px -30px rgba(0, 0, 0, .7); }
.paper.slip .para { -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
.paper.slip .stamp { position: absolute; top: auto; right: 7%; bottom: 9%; }
.paper.slip .open { align-self: start; margin-top: 4cqw; font: 600 14px var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (max-width: 640px) { .paper { transform: none; padding: 28px 20px; } .paper .big { margin-top: 16cqw; } }

/* Readable floors for the letter's small print (it was dropping to 7px). */
.lh .org { font-size: max(10px, 1.55cqw); }
.refline { font-size: max(9.5px, 1.3cqw); }
.paper .sign .who small, .letter .sign .who small { font-size: max(9.5px, 1.25cqw); }
.paper .sign .next, .letter .sign .next { font-size: max(10.5px, 1.45cqw); }
.refline, .paper .sign .who small, .letter .sign .who small { color: #555e78; }