/* ──────────────────────────────────────────────────────────
   Sokcho Sprint — v2
   Editorial letter on lacquer.
   One typeface family for English body text, Arizonia for the hero,
   Noto Serif KR for Korean. No mono. No kickers.
   Small nacre accents in the title, body, and heading flourishes.
   ────────────────────────────────────────────────────────── */

@property --cta-halo-pulse {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

:root {
  /* lacquer */
  --lacquer-0: oklch(0.105 0.008 30);
  --lacquer-1: oklch(0.135 0.008 30);

  /* pearl text */
  --pearl-0: oklch(0.94 0.012 85);
  --pearl-1: oklch(0.91 0.018 82);
  --pearl-2: oklch(0.66 0.014 75);
  --pearl-3: oklch(0.48 0.013 70);

  /* faint hairline */
  --hair: oklch(0.30 0.012 70 / 0.55);
  --hair-soft: oklch(0.30 0.012 70 / 0.30);

  /* nacre hues — cool holographic-foil palette:
     mint → cyan → sky → periwinkle → lavender, with small warm highlights. */
  --n-mint:    oklch(0.90 0.11  170);
  --n-cyan:    oklch(0.89 0.13  205);
  --n-sky:     oklch(0.87 0.15  235);
  --n-peri:    oklch(0.82 0.16  265);
  --n-lav:     oklch(0.82 0.16  290);
  --n-lilac:   oklch(0.86 0.098 306);
  --n-blush:   oklch(0.84 0.112 198);
  --n-amber:   oklch(0.91 0.052 70);
  --n-silver:  oklch(0.94 0.025 250);  /* pearly white highlight */
  --n-shade:   oklch(0.58 0.17  275);  /* one soft shadow note */

  --nacre: conic-gradient(
    from 190deg,
    oklch(0.96 0.018 248) 0deg,
    oklch(0.88 0.104 180) 30deg,
    oklch(0.84 0.122 208) 62deg,
    oklch(0.96 0.016 250) 94deg,
    oklch(0.83 0.116 252) 132deg,
    oklch(0.80 0.122 292) 176deg,
    oklch(0.95 0.018 250) 216deg,
    oklch(0.86 0.098 306) 252deg,
    oklch(0.91 0.052 70) 288deg,
    oklch(0.84 0.112 198) 326deg,
    oklch(0.96 0.018 248) 360deg
  );

  --nacre-sheen: linear-gradient(
    112deg,
    oklch(0.97 0.015 250 / 0) 0%,
    oklch(0.97 0.015 250 / 0.18) 18%,
    oklch(0.95 0.025 230 / 0.72) 32%,
    oklch(0.92 0.055 185 / 0.88) 48%,
    oklch(0.90 0.070 270 / 0.78) 62%,
    oklch(0.90 0.070 305 / 0.52) 74%,
    oklch(0.90 0.060 68 / 0.36) 82%,
    oklch(0.97 0.015 250 / 0.10) 88%,
    oklch(0.97 0.015 250 / 0) 100%
  );

  --nacre-text-base: linear-gradient(
    132deg,
    oklch(0.96 0.018 248) 0%,
    oklch(0.88 0.104 180) 8%,
    oklch(0.84 0.122 208) 17%,
    oklch(0.96 0.016 250) 26%,
    oklch(0.83 0.116 252) 38%,
    oklch(0.80 0.122 292) 51%,
    oklch(0.95 0.018 250) 60%,
    oklch(0.86 0.098 306) 70%,
    oklch(0.91 0.052 70) 80%,
    oklch(0.84 0.112 198) 90%,
    oklch(0.96 0.018 248) 100%
  );

  --nacre-text-soft: linear-gradient(
    132deg,
    oklch(0.95 0.014 248) 0%,
    oklch(0.89 0.072 180) 10%,
    oklch(0.86 0.088 208) 20%,
    oklch(0.95 0.014 250) 30%,
    oklch(0.86 0.080 252) 43%,
    oklch(0.84 0.086 292) 56%,
    oklch(0.94 0.014 250) 66%,
    oklch(0.88 0.068 306) 76%,
    oklch(0.91 0.040 70) 86%,
    oklch(0.87 0.078 198) 94%,
    oklch(0.95 0.014 248) 100%
  );

  --nacre-sheen-pass: linear-gradient(
    135deg,
    transparent 0%,
    transparent 32%,
    oklch(0.96 0.045 240 / 0.30) 38%,
    oklch(0.95 0.075 220 / 0.90) 45%,
    oklch(0.89 0.145 190 / 1.00) 50%,
    oklch(0.83 0.135 252 / 0.92) 56%,
    oklch(0.83 0.125 292 / 0.76) 62%,
    oklch(0.91 0.052 70 / 0.38) 68%,
    transparent 70%,
    transparent 100%
  );

  /* type */
  --f-title: "Arizonia", "Newsreader", "Noto Serif KR", serif;
  --f-body:    "Newsreader", "Noto Serif KR", Georgia, serif;
  --f-ko:      "Noto Serif KR", "Newsreader", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--lacquer-0);
}

body {
  background: transparent;
  color: var(--pearl-1);
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 1.65;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--n-lav); color: var(--lacquer-0); }

/* ────────── FLOATING HEADER ────────── */
.float-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  background:
    radial-gradient(ellipse 70% 180% at 50% -60%, oklch(0.28 0.045 255 / 0.54), transparent 72%),
    linear-gradient(to bottom, oklch(0.018 0.004 30) 0%, oklch(0.028 0.006 255) 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.float-header.shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fh-mark {
  --logo-size: 30px;
  --logo-leading: 0.92;
  --logo-y: 0;
  --logo-scale-x: 0.96;
  font-family: var(--f-title);
  font-style: normal;
  line-height: var(--logo-leading);
  color: var(--pearl-1);
  text-decoration: none;
  white-space: nowrap;
}

/* soft film grain */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85   0 0 0 0 0.8   0 0 0 0 0.7   0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; }

#passport {
  scroll-margin-top: 88px;
}

.passport-cta {
  --cta-radius: 0;
  --cta-border-size: 1px;
  --cta-pad-y: 12px;
  --cta-pad-x: 22px;
  --cta-sheen-size: 240% 100%;
  --cta-transition: 0.22s ease;
  --cta-halo-pulse: 1;
  --cta-glow-pulse-duration: 3.4s;
  --cta-shadow-inset:
    0 1px 0 oklch(1 0 0 / 0.10) inset,
    0 -1px 0 oklch(0 0 0 / 0.42) inset;
  --cta-shadow-inset-hover:
    0 1px 0 oklch(1 0 0 / 0.12) inset,
    0 -1px 0 oklch(0 0 0 / 0.46) inset;
  --cta-shadow-base:
    0 12px 28px oklch(0.06 0.01 30 / 0.34),
    0 0 18px oklch(0.86 0.09 245 / 0.11);
  --cta-shadow-hover:
    0 12px 28px oklch(0.06 0.01 30 / 0.34),
    0 0 38px oklch(0.86 0.09 245 / calc(0.36 * var(--cta-halo-pulse))),
    0 0 64px oklch(0.80 0.122 292 / calc(0.20 * var(--cta-halo-pulse)));
  --cta-text-emboss:
    0 1px 0 oklch(1 0 0 / 0.12),
    0 -1px 0 oklch(0 0 0 / 0.68),
    0 0 10px oklch(0.92 0.03 245 / 0.12);
  --cta-halo-base:
    0 0 0 1px oklch(1 0 0 / 0.14) inset,
    0 0 26px oklch(0.87 0.11 220 / 0.30),
    0 0 36px oklch(0.88 0.10 315 / 0.20);
  --cta-halo-hover:
    0 0 0 1px oklch(1 0 0 / 0.30) inset,
    0 0 24px oklch(0.88 0.104 180 / 0.72),
    0 0 46px oklch(0.84 0.122 208 / 0.64),
    0 0 74px oklch(0.83 0.116 252 / 0.56),
    0 0 104px oklch(0.80 0.122 292 / 0.44),
    0 0 138px oklch(0.94 0.025 250 / 0.30);
  --cta-fill:
    radial-gradient(ellipse 92% 120% at 24% 0%, oklch(0.31 0.060 245 / 0.78), transparent 58%),
    radial-gradient(ellipse 110% 90% at 92% 18%, oklch(0.22 0.040 292 / 0.46), transparent 55%),
    linear-gradient(135deg, oklch(0.165 0.030 252), oklch(0.098 0.014 30) 58%, oklch(0.065 0.012 285));
  --cta-nacre-border:
    linear-gradient(
      132deg,
      oklch(0.96 0.018 248) 0%,
      oklch(0.88 0.104 180) 8%,
      oklch(0.84 0.122 208) 17%,
      oklch(0.96 0.016 250) 26%,
      oklch(0.83 0.116 252) 38%,
      oklch(0.80 0.122 292) 51%,
      oklch(0.95 0.018 250) 60%,
      oklch(0.86 0.098 306) 70%,
      oklch(0.91 0.052 70) 80%,
      oklch(0.84 0.112 198) 90%,
      oklch(0.96 0.018 248) 100%
    );
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border: var(--cta-border-size) solid transparent;
  border-radius: var(--cta-radius);
  overflow: hidden;
  isolation: isolate;
  color: var(--pearl-0);
  font-family: var(--f-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  background:
    var(--cta-fill) padding-box,
    var(--nacre-sheen-pass) border-box,
    var(--cta-nacre-border) border-box;
  background-size:
    100% 100%,
    var(--cta-sheen-size),
    100% 100%;
  background-position:
    50% 50%,
    var(--nacre-sheen-x, 50%) 50%,
    50% 50%;
  box-shadow:
    var(--cta-shadow-inset),
    var(--cta-shadow-base);
  text-shadow: var(--cta-text-emboss);
  filter: saturate(1.08) brightness(1.02);
  transition: box-shadow var(--cta-transition), filter var(--cta-transition);
}
.passport-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.10), transparent 42%),
    linear-gradient(to top, oklch(0 0 0 / 0.32), transparent 50%);
  mix-blend-mode: soft-light;
}
.passport-cta::after {
  content: "";
  position: absolute;
  inset: calc(var(--cta-border-size) * -8);
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  box-shadow: var(--cta-halo-base);
  opacity: 0.88;
  transition: box-shadow var(--cta-transition), opacity var(--cta-transition);
}
.passport-cta:hover,
.passport-cta:focus-visible {
  animation: cta-glow-pulse var(--cta-glow-pulse-duration) ease-in-out infinite;
}
.passport-cta:hover {
  filter: saturate(1.26) brightness(1.10);
  box-shadow:
    var(--cta-shadow-inset-hover),
    var(--cta-shadow-hover);
}
.passport-cta:hover::after,
.passport-cta:focus-visible::after {
  opacity: 1;
  box-shadow: var(--cta-halo-hover);
}
.passport-cta:focus-visible {
  outline: 2px solid var(--n-silver);
  outline-offset: 4px;
}
.passport-cta-hero {
  --cta-pad-y: 15px;
  --cta-pad-x: 28px;
  margin-top: clamp(60px, 8vh, 92px);
  font-size: 24px;
}
.passport-cta-header {
  --cta-pad-y: 9px;
  --cta-pad-x: 16px;
  min-height: 36px;
  font-size: 16px;
  --cta-shadow-base:
    0 8px 20px oklch(0.06 0.01 30 / 0.24),
    0 0 14px oklch(0.86 0.09 245 / 0.10);
}

/* ────────── POSTER ────────── */
.poster {
  position: relative;
  min-height: 64vh;
  min-height: 64svh;
  padding: clamp(72px, 12vh, 132px) clamp(24px, 5vw, 72px) clamp(56px, 9vh, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("https://assets.ntrpd.com/sokcho-sprint/wave.webp");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  opacity: 0.5;
}

/* the stage where title and event details sit */
.poster-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(1080px, 100%);
}

/* poster title — stacked, Sokcho / Sprint. */
.poster-title {
  --logo-size: clamp(65px, 9.75vw, 135px);
  --logo-leading: 0.96;
  --logo-y: 0;
  --logo-scale-x: 0.96;
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--f-title);
  font-weight: 400;
  color: var(--pearl-0);
  line-height: var(--logo-leading, 0.86);
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 2px 0 oklch(0.08 0.01 30 / 0.42),
    0 0 14px oklch(0.92 0.03 245 / 0.05);
}
.logo-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.16em 0.08em 0.20em;
  transform: translateY(var(--logo-y)) rotate(var(--logo-tilt)) scaleX(var(--logo-scale-x));
  transform-origin: 50% 56%;
}
.logo-live {
  --logo-tilt: -7deg;
  --logo-sprint-offset: 0.48em;
}
.logo-mark .t-line {
  display: block;
  font-size: var(--logo-size, clamp(58px, 8vw, 126px));
  color: var(--pearl-0);
  padding-right: 0.28em;
}
.logo-mark .t-line + .t-line {
  margin-top: -0.25em;
  margin-left: var(--logo-sprint-offset, 0.08em);
}
.logo-mark .t-line.italic {
  font-style: normal;
  color: var(--pearl-0);
}
.poster-summary {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: clamp(28px, 3.5vh, 42px) auto 0;
  color: var(--pearl-1);
  font-size: 24px;
  line-height: 1.34;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.poster-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.4vw, 34px);
  padding: 0;
  margin: clamp(36px, 4.5vh, 52px) 0 0;
  list-style: none;
  color: var(--pearl-1);
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 1.25;
}
.poster-meta li {
  position: relative;
  white-space: nowrap;
}
.poster-meta li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(clamp(18px, 2.4vw, 34px) / -2);
  width: 7px;
  height: 7px;
  background:
    radial-gradient(circle at 35% 35%, oklch(0.98 0.02 240 / 0.9), transparent 28%),
    var(--nacre);
  background-size: 100% 100%, 180% 180%;
  background-position: 50% 50%, var(--nacre-fill-x, 50%) var(--nacre-fill-y, 50%);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow:
    0 0 0 0.5px oklch(0.20 0.01 30 / 0.8) inset,
    0 0 10px oklch(0.85 0.06 245 / 0.12);
}

.greeting em,
.heading-text,
.diary .d-date,
.theme-list dt,
a.apply,
.fh-mark .t-line,
.logo-mark .t-line {
  position: relative;
}

@media (max-width: 820px) {
  .poster {
    min-height: auto;
    padding-top: 96px;
  }
  .fh-mark {
    --logo-size: 24px;
  }
  .poster-title {
    --logo-size: clamp(62px, 18vw, 93px);
  }
  .logo-mark .t-line {
    font-size: var(--logo-size, clamp(62px, 17vw, 108px));
  }
  .logo-mark .t-line + .t-line {
    margin-left: var(--logo-sprint-offset, 0.08em);
  }
  .poster-summary {
    font-size: 24px;
  }
  .poster-meta {
    flex-direction: column;
    gap: 8px;
    font-size: 20px;
  }
  .poster-meta li + li::before {
    display: none;
  }
}

/* ────────── LETTER ────────── */
.letter {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(32px, 5vw, 64px) 80px;
  color: var(--pearl-1);
  font-size: 20px;
  line-height: 1.7;
}

.letter-intro {
  --letter-intro-pad-x: clamp(32px, 5vw, 64px);
  max-width: none;
  margin: clamp(80px, 14vh, 160px) calc(var(--letter-intro-pad-x) * -1) clamp(60px, 8vh, 100px);
  padding: clamp(48px, 6vw, 80px) var(--letter-intro-pad-x);
  background: var(--pearl-0);
  color: var(--lacquer-0);
  border-radius: 0;
}

.letter-body {
  margin-bottom: clamp(40px, 5vh, 60px);
}

.letter-photos {
  display: flex;
  flex-direction: row;
  gap: clamp(16px, 3vw, 28px);
}

.cohost {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  transform: rotate(var(--photo-rotation, 0deg));
  transform-origin: center center;
  box-shadow: 0 2px 16px oklch(0.15 0.01 30 / 0.12);
}
.cohost-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 0;
  background: linear-gradient(135deg, oklch(0.88 0.02 245), oklch(0.78 0.03 30));
}
.cohost figcaption {
  margin-top: 10px;
  font-style: italic;
  font-size: 16px;
  color: var(--lacquer-1);
}

.letter p {
  margin: 0 0 1.25em;
  text-wrap: pretty;
  hanging-punctuation: first last;
}
.letter p em,
.letter dd em,
.letter .aside em {
  font-style: italic;
  color: var(--pearl-0);
}

.greeting {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 24px;
  color: var(--pearl-0);
  margin-bottom: 1.6em !important;
}

/* section heading — body stack, no number, with side flourishes */
h2.section {
  --heading-flourish-gap: clamp(14px, 2.4vw, 28px);
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  color: var(--pearl-0);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  gap: var(--heading-flourish-gap);
  margin: 2.1em 0 1.1em;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 2px 0 oklch(0.08 0.01 30 / 0.36),
    0 0 10px oklch(0.92 0.03 245 / 0.04);
}
.heading-text {
  min-width: 0;
}
.heading-flourish {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.heading-flourish-left {
  justify-content: flex-start;
}
.heading-flourish-right {
  justify-content: flex-start;
}
.fl-diamond {
  width: 7px;
  height: 7px;
  background:
    radial-gradient(circle at 35% 35%, oklch(0.98 0.02 240 / 0.9), transparent 28%),
    var(--nacre);
  background-size: 100% 100%, 180% 180%;
  background-position: 50% 50%, var(--nacre-fill-x, 50%) var(--nacre-fill-y, 50%);
  transform: rotate(45deg);
  flex: 0 0 auto;
  box-shadow:
    0 0 0 0.5px oklch(0.20 0.01 30 / 0.8) inset,
    0 0 10px oklch(0.85 0.06 245 / 0.12);
}
.fl-line {
  flex: 1 1 100%;
  min-width: 0;
  height: 1px;
  background-image:
    var(--nacre-sheen-pass),
    var(--nacre-text-soft);
  background-size:
    240% 100%,
    100% 100%;
  background-position:
    var(--nacre-sheen-x, 50%) 50%,
    50% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24%, black 76%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 24%, black 76%, transparent 100%);
}
h2.section.sign { margin-top: 2.4em; }

/* the diary */
.diary {
  margin: 1.4em 0 1.4em;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6em;
}
.diary-day {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.diary-day dt { margin-top: 0; }
.diary dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 24px;
  color: var(--pearl-0);
  margin-top: 0.4em;
}
.diary dt:first-child { margin-top: 0; }
.diary .d-date { letter-spacing: 0.01em; }
.diary .muted { color: var(--pearl-3); }
.diary dd {
  margin: 0;
  padding-left: 0;
  color: var(--pearl-1);
  font-size: 20px;
  line-height: 1.65;
}
.diary dd.muted {
  color: var(--pearl-3);
  font-style: italic;
}

.faq-list ol {
  margin: 0;
  padding-left: 1.3em;
}
.faq-list li + li {
  margin-top: 0.45em;
}
.faq-list dt {
  width: 100%;
  align-items: stretch;
}
.faq-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: none;
  color: inherit;
  font: inherit;
  font-style: inherit;
  text-align: left;
  cursor: pointer;
}
.faq-toggle:focus-visible {
  outline: 1px solid var(--n-lav);
  outline-offset: 5px;
}
.faq-question {
  min-width: 0;
}
.faq-arrow {
  width: 14px;
  height: 7px;
  align-self: center;
  justify-self: end;
  background:
    radial-gradient(circle at 35% 35%, oklch(0.98 0.02 240 / 0.9), transparent 28%),
    var(--nacre);
  background-size: 100% 200%, 180% 360%;
  background-position: 50% 0%, var(--nacre-fill-x, 50%) var(--nacre-fill-y, 50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  flex: 0 0 auto;
  filter: brightness(1.02);
  box-shadow:
    0 0 0 0.5px oklch(0.20 0.01 30 / 0.8) inset,
    0 0 10px oklch(0.85 0.06 245 / 0.12);
  transition: transform 180ms ease;
}
.faq-toggle[aria-expanded="true"] .faq-arrow {
  transform: rotate(180deg);
}



.aside {
  margin-top: 2em !important;
  padding-left: 18px;
  border-left: 1px solid var(--hair);
  color: var(--pearl-2);
  font-size: 16px;
  line-height: 1.6;
}

/* apply */
#passport {
  margin-top: clamp(64px, 10vh, 112px);
}

.passport-card {
  --cta-radius: 0;
  --cta-border-size: 1px;
  --cta-sheen-size: 240% 100%;
  --cta-shadow-inset:
    0 1px 0 oklch(1 0 0 / 0.10) inset,
    0 -1px 0 oklch(0 0 0 / 0.42) inset;
  --cta-text-emboss:
    0 1px 0 oklch(1 0 0 / 0.12),
    0 -1px 0 oklch(0 0 0 / 0.68),
    0 0 10px oklch(0.92 0.03 245 / 0.12);
  --cta-fill:
    radial-gradient(ellipse 92% 120% at 24% 0%, oklch(0.31 0.060 245 / 0.78), transparent 58%),
    radial-gradient(ellipse 110% 90% at 92% 18%, oklch(0.22 0.040 292 / 0.46), transparent 55%),
    linear-gradient(135deg, oklch(0.165 0.030 252), oklch(0.098 0.014 30) 58%, oklch(0.065 0.012 285));
  --cta-nacre-border:
    linear-gradient(
      132deg,
      oklch(0.96 0.018 248) 0%,
      oklch(0.88 0.104 180) 8%,
      oklch(0.84 0.122 208) 17%,
      oklch(0.96 0.016 250) 26%,
      oklch(0.83 0.116 252) 38%,
      oklch(0.80 0.122 292) 51%,
      oklch(0.95 0.018 250) 60%,
      oklch(0.86 0.098 306) 70%,
      oklch(0.91 0.052 70) 80%,
      oklch(0.84 0.112 198) 90%,
      oklch(0.96 0.018 248) 100%
    );
  --passport-card-pad-x: clamp(28px, 5vw, 64px);
  --passport-card-pad-y: clamp(32px, 5vw, 56px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--passport-card-pad-y) var(--passport-card-pad-x);
  border: var(--cta-border-size) solid transparent;
  border-radius: var(--cta-radius);
  color: var(--pearl-1);
  background:
    var(--cta-fill) padding-box,
    var(--nacre-sheen-pass) border-box,
    var(--cta-nacre-border) border-box;
  background-size:
    100% 100%,
    var(--cta-sheen-size),
    var(--cta-sheen-size);
  background-position:
    50% 50%,
    var(--nacre-sheen-x, 50%) 50%,
    var(--nacre-sheen-x, 50%) 50%;
  box-shadow: var(--cta-shadow-inset);
  filter: saturate(1.08) brightness(1.02);
}
.passport-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.10), transparent 42%),
    linear-gradient(to top, oklch(0 0 0 / 0.34), transparent 56%);
  mix-blend-mode: soft-light;
}
.passport-card > * {
  position: relative;
  z-index: 1;
}
.passport-card-title {
  margin: 0 0 0.72em;
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--pearl-0);
  text-wrap: balance;
  text-shadow:
    0 2px 0 oklch(0.08 0.01 30 / 0.36),
    0 0 10px oklch(0.92 0.03 245 / 0.04);
}
.passport-card p {
  max-width: 720px;
}
.passport-card p:last-child {
  margin-bottom: 0;
}
.passport-card .apply-line {
  margin-top: 1.2em !important;
}
.passport-card a.apply {
  font-size: clamp(28px, 5vw, 38px);
  overflow-wrap: anywhere;
}
.passport-card .signature {
  margin-top: 2em !important;
}

.apply-line {
  margin: 1.4em 0 1.6em !important;
}
a.apply {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 38px;
  color: var(--pearl-0);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 4px;
  transition: border-color 0.25s, color 0.25s;
  text-shadow:
    0 2px 0 oklch(0.08 0.01 30 / 0.36),
    0 0 12px oklch(0.92 0.03 245 / 0.04);
}
a.apply:hover {
  border-color: var(--n-lav);
}

.greeting em,
.heading-text,
.passport-card-title,
.diary .d-date,
.theme-list dt,
.faq-list dt,
.faq-question,
a.apply,
.fh-mark .t-line,
.logo-mark .t-line {
  background-image:
    var(--nacre-sheen-pass),
    var(--nacre-text-soft);
  background-size:
    240% 100%,
    100% 100%;
  background-position:
    var(--nacre-sheen-x, 50%) 50%,
    50% 50%;
  filter: brightness(1.02);
}

.logo-mark .t-line {
  background-image:
    var(--nacre-sheen-pass),
    var(--nacre-text-base);
  background-size:
    235% 100%,
    100% 100%;
  background-position:
    var(--nacre-sheen-x, 50%) 50%,
    50% 50%;
  filter: brightness(1.08) saturate(1.04);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .greeting em,
  .heading-text,
  .passport-card-title,
  .diary .d-date,
  .theme-list dt,
  .faq-list dt,
  .faq-question,
  a.apply,
  .fh-mark .t-line,
  .logo-mark .t-line {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .greeting em,
  .heading-text,
  .passport-card-title,
  .diary .d-date,
  .theme-list dt,
  .faq-list dt,
  .faq-question,
  a.apply,
  .fh-mark .t-line,
  .logo-mark .t-line {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .passport-cta {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
    box-shadow: none;
    text-shadow: none;
  }
  .passport-cta::before,
  .passport-cta::after {
    display: none;
  }
}

.greeting em,
.diary .d-date,
.theme-list dt,
.faq-list dt,
.faq-question {
  color: var(--pearl-0);
}

.signature {
  margin-top: 2.4em !important;
  color: var(--pearl-2);
  font-size: 16px;
  line-height: 1.5;
}
.signature em {
  color: var(--pearl-1);
  font-style: italic;
}

/* ─── letter body: dark-on-light overrides ─── */

/* general text colors */
.letter-body .greeting,
.letter-body p em,
.letter-body dd em,
.letter-body .aside em { color: var(--lacquer-0); }

.letter-body .aside {
  color: var(--lacquer-1);
  border-left-color: var(--lacquer-1);
}
.letter-body .signature { color: var(--lacquer-1); }
.letter-body .signature em { color: var(--lacquer-0); }
.letter-body .diary .muted,
.letter-body dd.muted { color: var(--lacquer-1); opacity: 0.55; }

/* cancel nacre background-clip text treatments on the card's white bg */
.letter-body .greeting em,
.letter-body .heading-text,
.letter-body .diary .d-date,
.letter-body a.apply {
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--lacquer-0);
  filter: none;
}

/* apply link: strip glow shadow, keep border */
.letter-body a.apply {
  text-shadow: none;
  border-bottom-color: oklch(0.30 0.012 70 / 0.4);
}

/* heading flourishes: quiet dark treatment on white */
.letter-body .fl-diamond {
  background: var(--lacquer-1);
  box-shadow: none;
}
.letter-body .fl-line {
  background-image: none;
  background-color: var(--lacquer-1);
  opacity: 0.35;
}

/* footer */
.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px 56px;
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hair-soft);
  max-width: 820px;
  margin: 0 auto;
}
.foot-mark {
  font-family: var(--f-ko);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--pearl-3);
}

@media (max-width: 820px) {
  .float-header {
    padding: 12px 16px;
    gap: 12px;
  }
  .fh-mark {
    --logo-size: 24px;
  }
  .passport-cta-header {
    --cta-pad-y: 8px;
    --cta-pad-x: 12px;
    min-height: 34px;
    font-size: 14px;
  }
  .passport-cta-hero {
    font-size: 22px;
  }
  .passport-card-title,
  h2.section {
    --heading-flourish-gap: clamp(10px, 2.8vw, 16px);
    font-size: 24px;
  }
  .heading-text {
    white-space: nowrap;
  }
  .heading-flourish {
    gap: 10px;
  }
  .letter-intro {
    --letter-intro-pad-x: clamp(20px, 5vw, 32px);
    padding: clamp(32px, 6vw, 48px) clamp(20px, 5vw, 32px);
    border-radius: 0;
    margin-right: calc(var(--letter-intro-pad-x) * -1);
    margin-left: calc(var(--letter-intro-pad-x) * -1);
  }
  .letter-photos { gap: clamp(10px, 3vw, 16px); }
  .cohost figcaption { font-size: 14px; }
  .diary dt {
    font-size: 20px;
  }
}

@media (min-width: 820px) {
  .diary {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: 2em;
  }
  .theme-list {
    grid-template-columns: 1fr 1fr;
  }
  .faq-list {
    grid-template-columns: 1fr;
  }
  .schedule-list .diary-day:last-child {
    grid-column: 1 / -1;
    width: calc(50% - clamp(16px, 2vw, 28px));
    margin-inline: auto;
  }
}

@keyframes cta-glow-pulse {
  0%, 100% { --cta-halo-pulse: 1; }
  50%       { --cta-halo-pulse: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}