/* skin.css — seoyeonjihoon (Seo-yeon & Ji-hoon). Site 7: K-Drama, first snow in Seoul.
   Hero feature: the cast and the finale countdown, joined as a cast reveal (lab/docs/SITE7-PLAN.md).
   The loud axes: a drama's promotional campaign (a main poster, character posters, "coming soon"),
   Hangul and Latin set side by side, a first-snow winter grade, and snow falling on every page.
   Tokens and every visual rule for this site. Engine internals are never touched here.

   §1 type · §2 tokens · §3 base · §4 frame · §5 masthead + Episodes · §6 dock · §7 cover ·
   §8 the reveal band · §9 invitation · §10 the cast · §11 story, day · §12 snow · §13 reply ·
   §14 page turn + footer · §15 motion · §16 print · §17 the opening titles · §18 the cinematic round */

/* §1 · type. EB Garamond for the Latin display, shared from demo/assets/type (cached across
   sites). Hangul is never a webfont here (a Korean font is megabytes): the system's own, which
   every phone and laptop that can show Hangul already has. */
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/type/eb-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../assets/type/eb-garamond-600.woff2") format("woff2"); }

/* §2 · tokens */
[data-skin="seoyeonjihoon"] {
  --snow: #f3f5f7;
  --white: #ffffff;
  --frost: #dde4eb;
  --frost-deep: #b9c5d1;
  --slate: #56606e;         /* 5.6:1 on --snow */
  --ink: #202833;
  --night: #1b2330;
  --scarf: #a3313d;         /* the one warm accent: a scarf, a ribbon, the reveal badge */

  --bg: var(--snow);
  --bg-raised: var(--white);
  --muted: var(--slate);
  --rule: #cfd7df;
  --accent: var(--scarf);
  --accent-soft: #f5e4e5;
  --on-accent: var(--white);
  --field: var(--white);

  --ko: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", "Nanum Gothic", sans-serif;
  --display: "EB Garamond", Garamond, "Times New Roman", serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, var(--ko);
  --ui: var(--body);

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --step-4: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);

  --radius: 999px;          /* buttons: soft pills */
  --radius-card: 14px;      /* posters, cards, the dock */
  --margin: clamp(1rem, 5vw, 4.5rem);
  --module: clamp(3rem, 7vw, 6rem);
  --mast-h: 4rem;
  --motion-fast: 240ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, .84, .24, 1);
  --focus-w: 2px;
  --focus-off: 3px;

  --a-reveal-dur: 1000ms;
  --a-reveal-ease: var(--ease-soft);
  --a-rise-y: 20px;
  --a-step: 110ms;
}

/* §3 · base */
html[data-skin="seoyeonjihoon"] { overflow-x: clip; scroll-padding-top: calc(var(--mast-h) + 1rem); }
[data-skin="seoyeonjihoon"] body {
  background: var(--bg);
  color: var(--ink);
  font: var(--step-0)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[data-skin="seoyeonjihoon"] a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
[data-skin="seoyeonjihoon"] a:hover { color: var(--accent); }
[data-skin="seoyeonjihoon"] main img:not([class|="orn"]) { background: var(--frost); }   /* an ornament (orn-*) is alpha: no backing */
[lang="ko"] { font-family: var(--ko); }
.amp { font-family: var(--display); font-style: normal; color: var(--accent); }
.label, .kicker {
  font: 600 var(--step--1)/1.4 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; color: var(--accent); }
.kicker [lang="ko"] { letter-spacing: .08em; font-weight: 700; }
.lede { font-size: var(--step-1); line-height: 1.55; max-width: 36em; color: var(--ink); }
.hint { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.prose { max-width: 34em; }
.prose p + p { margin-top: 1em; }

/* §4 · the frame. One centred column with generous margins; sections stack in modules. */
.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--module); }
.head { padding-top: calc(var(--mast-h) + var(--module)); padding-bottom: calc(var(--module) / 2); display: grid; gap: 1rem; }
.head-title { font: 400 var(--step-4)/1 var(--display); letter-spacing: -.01em; }
.band-head { display: grid; gap: .6rem; margin-bottom: 2rem; max-width: 44rem; }
.band-title { font: 400 var(--step-3)/1.05 var(--display); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.6rem;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--snow);
  font: 600 var(--step--1)/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
[data-skin="seoyeonjihoon"] a.btn { color: var(--snow); }
.btn:hover, [data-skin="seoyeonjihoon"] a.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--quiet { background: transparent; color: var(--ink); min-height: 44px; padding: 0 1.2rem; }
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--snow); }
.more { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1rem; }
.more::after { content: " →"; }

/* §5 · the masthead. A thin frosted bar: the names on the left (Hangul over Latin), the
   design-study tab and the Episodes button on the right. The Episodes menu is a sheet. */
.mast {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--mast-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: var(--margin);
  background: var(--snow);   /* solid: a translucent bar let the cast's names read through it */
  border-bottom: 1px solid var(--rule);
}
.mast-name { display: grid; align-content: center; min-height: 44px; line-height: 1.1; text-decoration: none; }   /* the 44px floor */
.mast-name .ko { font: 700 .75rem/1.2 var(--ko); letter-spacing: .12em; color: var(--accent); }
.mast-name .en { font: 400 1.2rem/1.1 var(--display); white-space: nowrap; }
.mast-ctl { position: relative; display: flex; align-items: center; gap: .5rem; }
.menu-btn {
  min-height: 44px; min-width: 44px; padding: 0 1rem;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--snow);
  font: 600 var(--step--1)/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
}
.menu-btn .say-close { display: none; }
.menu-btn[aria-expanded="true"] .say-open { display: none; }
.menu-btn[aria-expanded="true"] .say-close { display: inline; }

.eps { display: none; }
.eps[data-open] {
  display: block; position: fixed; inset: var(--mast-h) 0 0 0; z-index: 19;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--night); color: var(--snow);
  padding: 1.5rem var(--margin) 3rem;
}
.eps-list { max-width: 60rem; margin-inline: auto; display: grid; }
.eps-list a {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; row-gap: .15rem;
  padding: 1.1rem 0; border-bottom: 1px solid rgb(243 245 247 / .16); text-decoration: none; color: var(--snow);
}
.eps-no { grid-row: 1 / span 3; font: 400 var(--step-2)/1 var(--display); color: #e7a3aa; }
.eps-ko { font: 700 var(--step--1)/1.3 var(--ko); letter-spacing: .12em; color: #aebccb; }
.eps-name { font: 400 var(--step-3)/1.05 var(--display); }
.eps-sub { font-size: var(--step--1); color: #c6d0da; }
.eps-list a:hover .eps-name, .eps-list a[aria-current="page"] .eps-name { color: #f2b8be; }
.eps-list a[aria-current="page"] .eps-sub::after { content: " · you are here"; }
@media (prefers-reduced-motion: no-preference) {
  .eps[data-open] { animation: sj-drop 420ms var(--ease-soft) both; }
}

/* §6 · the design-study dock: the tab is always readable; its panel drops under the bar */
.demo-dock { display: flex; }
.dock-tab, .demo-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--snow);
  font: 600 var(--step--1)/1 var(--ui); letter-spacing: .1em; text-transform: uppercase;
}
.dock-tab:hover, .demo-btn:hover { background: var(--ink); color: var(--snow); }
.dock-mark { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.dock-panel {
  position: absolute; top: calc(100% + .6rem); right: 0; z-index: 21;
  width: min(23rem, calc(100vw - 2 * var(--margin)));
  padding: 1.25rem; display: grid; gap: .9rem;
  background: var(--bg-raised); border: 1px solid var(--ink); border-radius: var(--radius-card);
}
.dock-panel p { font-size: var(--step--1); line-height: 1.5; }
.dock-ctl { display: flex; flex-wrap: wrap; gap: .5rem; }
/* a phone: the tab says "Study", the names drop the Hangul line */
@media (max-width: 26em) {
  .dock-tab [data-i18n] { font-size: 0; }
  .dock-tab [data-i18n]::after { content: "Study"; font-size: var(--step--1); }
  .mast-name .en { font-size: 1.05rem; }
}

/* §7 · the cover. The main poster beside (or above) the title card. Until the couple's own
   reveal, a week before the wedding, the poster is frosted over with a "coming" card; party.js
   writes who is out onto <html data-party-revealed>, and the frost lifts when "couple" is in it. */
.cover {
  min-height: 100svh;
  padding-top: calc(var(--mast-h) + 1.25rem); padding-bottom: 2rem;
  display: grid; gap: 1.25rem; align-content: start;
}
.poster { position: relative; overflow: clip; border-radius: var(--radius-card); background: var(--frost); }
.poster img {
  width: 100%; object-fit: cover; object-position: 50% 30%;
  height: clamp(9rem, 100svh - 23.25rem, 60svh);   /* an iPhone SE keeps Reply on its first screen */
  filter: blur(16px) saturate(.55) brightness(1.08);
  transform: scale(1.12);
}
.poster-veil {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: .35rem; text-align: center;
  padding: 1rem; color: var(--night);
  background: rgb(243 245 247 / .42);
}
/* the frost itself: heavier at the edges, like a window, and drawn in from the edges when it forms
   (--sj-frost 0% is clear glass, 100% is frosted over). The opening titles land on a clear poster
   and this creeps back over it (§17). */
@property --sj-frost { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.poster::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --sj-frost: 100%;
  background: radial-gradient(farthest-corner at 50% 45%, rgb(255 255 255 / 0), rgb(240 244 248 / .3) 72%, rgb(226 233 240 / .6));
  -webkit-mask-image: radial-gradient(farthest-corner at 50% 45%, transparent calc(100% - 1.18 * var(--sj-frost)), #000 calc(118% - 1.18 * var(--sj-frost)));
  mask-image: radial-gradient(farthest-corner at 50% 45%, transparent calc(100% - 1.18 * var(--sj-frost)), #000 calc(118% - 1.18 * var(--sj-frost)));
}
.veil-ko { font: 700 var(--step--1)/1 var(--ko); letter-spacing: .3em; color: var(--accent); }
.veil-say { font: 400 var(--step-3)/1 var(--display); }
.veil-when { font-size: var(--step--1); letter-spacing: .06em; }
/* the ornament frost (orn-frost.webp, 2026-10-01): window frost grown in from two corners of a locked
   poster, the cover's and every locked card's. Backgrounds on pseudo-elements, so a missing file
   leaves nothing; it goes with the veil, so it lifts when the couple is revealed and while the
   opening runs. The words stay above it. */
.poster-veil::before, .poster-veil::after, .frost::before, .frost::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 58%; aspect-ratio: 480 / 367;
  background: url("../assets/seoyeonjihoon/orn-frost.webp") 0 0 / 100% 100% no-repeat;
}
.poster-veil::before, .frost::before { top: 0; left: 0; }
.poster-veil::after, .frost::after { right: 0; bottom: 0; transform: rotate(180deg); }
.poster-veil > *, .frost > * { position: relative; z-index: 1; }
html[data-party-revealed~="couple"] .poster img { filter: none; transform: none; }
html[data-party-revealed~="couple"] .poster-veil { opacity: 0; visibility: hidden; }
html[data-party-revealed~="couple"] .poster::after { --sj-frost: 0%; }
/* while the opening titles run, the poster under them is clear glass, so the last shot lands on the
   same picture it shows; when they leave, the cover's own state frosts it again */
html[data-arrival] .poster img { filter: none; transform: none; }
html[data-arrival] .poster-veil { opacity: 0; visibility: hidden; }
html[data-arrival] .poster::after { --sj-frost: 0%; }
@media (prefers-reduced-motion: no-preference) {
  .poster img { transition: filter 1.8s var(--ease-soft), transform 1.8s var(--ease-soft); }
  .poster-veil { transition: opacity 900ms var(--ease), visibility 0s 900ms; }
  .poster::after { transition: --sj-frost 2.4s var(--ease-soft); }
  /* coming back (the opening has landed, or Back to today): the words wait for the frost, then
     fade in. A transition belongs to the state it ends in, so this one is the visible state's. */
  html:not([data-arrival]):not([data-party-revealed~="couple"]) .poster-veil {
    transition: opacity 1.2s var(--ease) .6s, visibility 0s .6s;
  }
}

.cover-say { display: grid; gap: .5rem; align-content: start; }
.names { display: grid; gap: .2rem; }
/* regular, not bold (2026-10-03, S5): at 700 the system Gothic was the loudest type on the cover, over a
   light Garamond. Small Hangul labels elsewhere keep their weight: they need it at their size. */
.names-ko { font: 400 var(--step-2)/1.1 var(--ko); letter-spacing: .1em; color: var(--ink); }
.names-en { font: 400 var(--step-4)/.95 var(--display); letter-spacing: -.015em; }
.nw { white-space: nowrap; }   /* a name never breaks at its own hyphen */
.cover-date { font-size: var(--step-0); color: var(--muted); }
.count { margin-top: .4rem; }
/* the ornament lattice (orn-lattice.webp): a paper-screen door behind the countdown, faint, like the
   lit doors behind the couple. Drawn outside the box (a negative inset), so it moves nothing and an
   iPhone SE keeps Reply on its first screen; the snow veil keeps the slate labels at 4.5:1, and with
   the file missing the veil is the page's own colour. */
.count { position: relative; isolation: isolate; }
/* the panel frames the figures, not the column (2026-10-03, design read S4): it ran twice their width */
.count { justify-self: start; width: fit-content; padding-right: .4rem; }
.count::before {
  content: ""; position: absolute; inset: -.6rem -.75rem; z-index: -1; pointer-events: none;
  border-radius: var(--radius-card);
  background: linear-gradient(rgb(243 245 247 / .84), rgb(243 245 247 / .84)), url("../assets/seoyeonjihoon/orn-lattice.webp") center / cover;
}
.count-row { display: flex; gap: clamp(1rem, 4vw, 2.2rem); }
.count-cell { display: grid; gap: .1rem; }
.count-cell b { font: 400 var(--step-3)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.count-u { font: 600 .75rem/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.count-u [lang="ko"] { color: var(--accent); margin-right: .2rem; }
.count-after { display: none; font: 400 var(--step-2)/1.2 var(--display); }
[data-phase="after"] .count-row { display: none; }
[data-phase="after"] .count-after { display: block; }
.cover-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }

@media (min-width: 56em) {
  .cover {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 5rem);
    align-items: center; align-content: center; padding-top: calc(var(--mast-h) + 2rem); padding-bottom: 3rem;
  }
  .poster img { height: min(78svh, 46rem); }
}

/* §8 · the reveal band on the cover: the latest poster, the next, the skip-ahead */
.band { border-top: 1px solid var(--rule); }
.latest { display: grid; gap: 1rem; }
@media (min-width: 40em) { .latest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lcard {
  display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: .75rem; border-radius: var(--radius-card); background: var(--bg-raised);
  border: 1px solid var(--rule); text-decoration: none;
}
[data-skin="seoyeonjihoon"] a.lcard:hover { color: inherit; border-color: var(--ink); }
.lcard-shot { display: block; aspect-ratio: 4 / 5; border-radius: calc(var(--radius-card) - 4px); overflow: clip; }
.lcard-shot img { width: 100%; height: 100%; object-fit: cover; }
.lcard-say { display: grid; gap: .3rem; justify-items: start; }
.lcard-name { font: 400 var(--step-2)/1.1 var(--display); }
.lcard-role { font-size: var(--step--1); color: var(--muted); }
.badge {
  display: inline-block; padding: .3rem .7rem; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font: 700 .75rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
}
.badge--next { background: var(--ink); }
/* the ornament ribbon (orn-ribbon.webp): scarf red, draped over the corner of the newest poster. A
   lazy <img> in the template (below a phone's first screen), out of the grid, so a missing file
   leaves nothing. */
.lcard { position: relative; }
.orn-ribbon {
  position: absolute; z-index: 1; top: -.85rem; left: -.9rem; width: 6.5rem; height: auto;
  transform: rotate(-9deg); pointer-events: none;
}

/* the frost: a locked poster, ice-grey with a soft light across it and "coming" in Hangul */
.frost {
  position: relative;   /* the corner frost (§7) hangs off it; a card's own .frost is absolute (§10) */
  display: grid; place-items: center;
  width: 100%; height: 100%; aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 70% at 30% 18%, rgb(255 255 255 / .85), rgb(255 255 255 / 0) 60%),
    linear-gradient(165deg, #eef2f6 0%, var(--frost) 55%, var(--frost-deep) 100%);
}
.frost-ko { font: 700 var(--step--1)/1 var(--ko); letter-spacing: .3em; color: var(--slate); writing-mode: vertical-rl; }

.skip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  border: 1px dashed var(--frost-deep); border-radius: var(--radius-card); background: rgb(255 255 255 / .55);
}
.skip-said { font: 400 var(--step-1)/1.2 var(--display); }
.skip-sim { font: 600 var(--step--1)/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.skip-ctl { display: flex; flex-wrap: wrap; gap: .5rem; }
.skip .hint { flex-basis: 100%; }
/* after the wedding there is nobody left to reveal, so there is nothing to skip to (2026-10-03);
   Back to today stays while the visitor has moved time */
html[data-phase="after"] .skip [data-wsd-el="ahead"] { display: none; }
/* a phone: the pinned bar's two buttons on one row, not two (it held 130px of every screen) */
@media (max-width: 30em) {
  .skip .btn--quiet { padding: 0 .8rem; letter-spacing: .08em; }
}
.band-more { margin-top: 1.5rem; }

/* §9 · the invitation */
.invite { border-top: 1px solid var(--rule); display: grid; gap: 1rem; }
.invite-say { font: 400 var(--step-3)/1.15 var(--display); max-width: 22em; }
.invite-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.invite-links a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* §10 · the cast. One grid per group; each card is a character poster. A locked card is frost,
   the role and "revealed in 3 days"; a revealed one is the portrait, the name, and, when opened,
   a line from the couple. */
.skip--bar {
  position: sticky; top: var(--mast-h); z-index: 10; margin-top: 0;
  border-radius: 0; border-width: 0 0 1px; border-style: solid; border-color: var(--rule);
  background: var(--snow); padding: .6rem var(--margin);   /* on the page margin, like everything below it */
}
.troupe { padding-block: calc(var(--module) * .7); }
.troupe + .troupe { border-top: 1px solid var(--rule); }
/* the ornament roof (orn-roof.webp): a hanok eave standing on the rule between two groups, over the
   heading's own left edge. A lazy <img> in each group after the first (all below the first screen),
   out of flow, so a missing file leaves nothing. */
.troupe { position: relative; }
.orn-roof {
  position: absolute; top: 0; left: var(--margin); width: min(11rem, 50%); height: auto;
  transform: translateY(-100%); pointer-events: none;
}
/* not on a phone (2026-10-03, S6): at 30px tall its tiles read as a black-and-white checker strip.
   display: none, so the lazy image is never fetched there either. */
@media (max-width: 47.99em) { .orn-roof { display: none; } }
.troupe-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; font: 400 var(--step-3)/1.05 var(--display); margin-bottom: 1.25rem; }
.troupe-cap [lang="ko"] { font: 700 var(--step--1)/1 var(--ko); letter-spacing: .2em; color: var(--accent); }
.troupe-note { margin: -.5rem 0 1.25rem; color: var(--muted); }
.cast-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 1.25rem 1rem; }
@media (min-width: 48em) { .cast-cards { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 2rem 1.5rem; } }
/* six to a row on a laptop: the largest group is six, so every group reads as one line-up */
@media (min-width: 64em) { .cast-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cast--leads .cast-cards { grid-template-columns: minmax(0, 24rem); }

.pcard {
  display: grid; gap: .7rem; align-content: start; width: 100%;
  padding: 0; border: 0; background: none; text-align: left; color: inherit;
}
.pcard-shot {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: clip;
  border-radius: var(--radius-card); background: var(--frost);
  box-shadow: 0 1px 0 rgb(32 40 51 / .06), 0 14px 30px -18px rgb(32 40 51 / .45);
}
.pcard-shot img { width: 100%; height: 100%; object-fit: cover; }
.pcard-shot .frost { position: absolute; inset: 0; }
.pcard-say { display: grid; gap: .2rem; }
.pcard-role { font: 600 .75rem/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pcard-name { font: 400 clamp(1.25rem, 1rem + .7vw, 1.6rem)/1.1 var(--display); }
.pcard-soon { font-size: var(--step--1); color: var(--muted); }
.pcard-line { display: none; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.pcard[data-open] .pcard-line { display: block; }
.pcard[data-revealed] { cursor: pointer; }
.pcard[data-locked] { cursor: default; }
.pcard[data-revealed]:hover .pcard-name { color: var(--accent); }
.pcard[data-open] .pcard-shot { outline: 2px solid var(--accent); outline-offset: 3px; }
/* a phone: a locked poster is half as tall (2026-10-03, S7). At 49 days out 17 of the 26 are locked,
   and at full height they were five screens of the same frost. It grows to a poster as it turns over. */
@media (max-width: 47.99em) {
  .pcard[data-locked] .pcard-shot { aspect-ratio: 2 / 1; }
  .pcard[data-locked] .frost-ko { writing-mode: horizontal-tb; letter-spacing: .24em; }
  .pcard[data-locked] .frost::before, .pcard[data-locked] .frost::after { width: 36%; }
}

/* §11 · the story, as episodes: a still, then a title card */
.episodes { display: grid; gap: var(--module); }
.episode { display: grid; gap: 1.25rem; }
/* the still is a scene (2026-10-03, idea A5): atelier's .a-push and .a-letterbox on the figure, so the
   figure carries the corner and clips; the bars are the opening's letterbox ink */
.ep-shots figure { border-radius: var(--radius-card); --a-letterbox: 6.5%; --a-letterbox-ink: #0b0f15; --a-push: 1.07; }
/* never taller than most of the screen (S8): on a tablet one portrait still was 85% of it */
.ep-shots img { width: 100%; max-height: min(72svh, 46rem); object-fit: cover; object-position: 50% 35%; }
.ep-card { display: grid; gap: .5rem; align-content: start; }
/* the ornament slate (orn-slate.webp, 2026-10-03): a drama's title card, a double rule with square
   corner marks, around the episode's number, title, date and blurb (not its prose). A sliced
   border-image, so the corners stay square at any height: the file's corner marks and both rules sit
   in its outer 24px. The border is transparent, so a missing file leaves nothing but the space. */
.ep-slate {
  display: grid; gap: .5rem; padding: 1.1rem 1.2rem 1.3rem;
  border: 12px solid transparent;
  border-image: url("../assets/seoyeonjihoon/orn-slate.webp") 24 / 12px stretch;
}
.ep-no { font: 700 var(--step--1)/1 var(--ui); letter-spacing: .24em; color: var(--accent); }
.ep-title { font: 400 var(--step-3)/1.05 var(--display); }
.ep-blurb { font: 400 var(--step-1)/1.45 var(--display); color: var(--muted); max-width: 30em; }
.ep-card .prose { margin-top: .5rem; }
@media (min-width: 56em) {
  .episode { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .episode:nth-child(even) .ep-shots { order: 2; }
  /* every title card one size, the narrow column's (2026-10-03, DECISIONS.md): on the even episodes the
     card sits in the wide column and came out larger. 5/12 of the list's width less the gap's share. */
  .episodes { container-type: inline-size; }
  .ep-slate { width: min(100%, calc((100cqw - clamp(2rem, 4vw, 4rem)) * 5 / 12)); }
}

/* the day */
.venues { display: grid; gap: 2.5rem; }
@media (min-width: 48em) { .venues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.venue { display: grid; gap: .5rem; align-content: start; }
.venue figure { margin-bottom: .6rem; }
.venue img { width: 100%; border-radius: var(--radius-card); }
.venue-name { font: 400 var(--step-3)/1.05 var(--display); }
.sched-list { display: grid; border-top: 1px solid var(--ink); }
.sched-item { display: grid; grid-template-columns: max(5.5rem, calc(var(--step-2) * 3.6)) minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.sched-time { font: 400 var(--step-2)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
/* the time column follows the time's own size (the widest time is about 3.34 of it, 3.6 leaves room
   for a "12:00 PM"): at a fixed 5.5rem every time broke before "PM" from 834 up (design read C1,
   2026-10-03). Phones keep the 5.5rem. */
.sched-say { display: grid; gap: .2rem; }
.sched-title { font: 600 var(--step-1)/1.25 var(--body); }
.sched-note { color: var(--muted); }
.sched-item:nth-child(2) .sched-time, .sched-item:nth-child(2) .sched-title { color: var(--accent); }
.qa { display: grid; border-top: 1px solid var(--ink); }
.qa-row { display: grid; gap: .35rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.qa dt { font: 400 var(--step-2)/1.1 var(--display); }
.qa dd { margin: 0; max-width: 40em; }
@media (min-width: 48em) { .qa-row { grid-template-columns: 14rem minmax(0, 1fr); column-gap: 2rem; } }

/* §12 · the first snow. petals.js draws soft round flakes when --petal-shape is snow. Blue-grey,
   not white, because white on a snow-white page is invisible; the far flakes paler and slower. */
[data-skin="seoyeonjihoon"] .a-petals {
  --petal-shape: snow;
  --petal-near: #9aabbd;
  --petal-far: #c4cfda;
  --petal-size: 5;
  --petal-fall: 24;
  --petal-shadow: none;
}
/* over the opening's dark cards and stills the blue-grey flakes read as dust (2026-10-03): while the
   titles run the fall is lit to near white, and it goes back to blue-grey as the poster lands */
[data-skin="seoyeonjihoon"] .a-petals { transition: filter 1.2s var(--ease); }
html:has(.a-arrival--titles:not([hidden]):not([data-landing]):not([data-leaving])) .a-petals {
  filter: brightness(1.9) saturate(.4);
}
/* the flakes are photographs since 2026-10-01 (orn-flake-01…03.webp, 64px, tinted the near flake's
   blue-grey in the lab, because white on --snow vanishes). Until they decode, or if they 404, the
   drawn flake above is what falls. Written without ../ : the engine resolves them (wsd.js). */
[data-skin="seoyeonjihoon"] .a-petals {
  --petal-sprites:
    url("assets/seoyeonjihoon/orn-flake-01.webp")
    url("assets/seoyeonjihoon/orn-flake-02.webp")
    url("assets/seoyeonjihoon/orn-flake-03.webp");
}

/* §13 · the reply. rsvp-simple.js hydrates the form; everything visible here is the skin's. */
.reply-body { display: grid; gap: 1.5rem; max-width: 40rem; }
.reply-form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: .4rem; }
.field label, .reply-q { font-weight: 600; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  border: 1px solid var(--frost-deep); border-radius: 10px; background: var(--field);
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.reply-ask { display: grid; gap: .6rem; }
.choices { display: grid; gap: .5rem; }
@media (min-width: 30em) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: .6rem 1rem;
  border: 1px solid var(--frost-deep); border-radius: 12px; background: var(--field); cursor: pointer;
}
.choice input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.plus { display: grid; gap: .6rem; }
.stepper { display: flex; align-items: center; gap: .75rem; }
.step-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--field); font-size: 1.25rem; line-height: 1;
}
.step-out { font: 400 var(--step-2)/1 var(--display); min-width: 1.5ch; text-align: center; }
.step-label { color: var(--muted); }
.plus-names { display: grid; gap: .8rem; }
.error { padding: .75rem 1rem; border-radius: 10px; background: var(--accent-soft); color: #7d1f29; }
.confirm { display: grid; gap: .8rem; padding: 1.5rem; border-radius: var(--radius-card); background: var(--bg-raised); border: 1px solid var(--rule); }
.confirm h2 { font: 400 var(--step-3)/1.05 var(--display); }
/* rsvp-simple.js moves focus to this heading (tabindex -1) so a screen reader hears the result; it is
   not a control, so it draws no ring. Without this, reopening Reply after a reply loaded the page with a
   red box round "You're in the finale." (2026-10-03; site 7's skin only, sites 1 and 3 untouched). */
.confirm [data-wsd-el="headline"]:focus { outline: none; }
.confirm-ctl { display: flex; flex-wrap: wrap; gap: .5rem; }
.summary { display: grid; gap: .3rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .35rem; border-bottom: 1px solid var(--rule); }
.answer { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
@media (min-width: 40em) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: grid; gap: .15rem; }
.stat b { font: 400 var(--step-3)/1 var(--display); font-variant-numeric: lining-nums; }
.stat span { font-size: var(--step--1); color: var(--muted); }

/* §14 · the page turn and the footer */
.turn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-block: var(--module); border-top: 1px solid var(--rule); }
/* the ornament pine (orn-pine.webp, 2026-10-03): a snowy sprig lying across the rule over every page
   turn and over the invitation, centred, half above it in the previous section's padding. A lazy <img>
   out of flow (like the roof, §10), so a missing file leaves nothing. */
.turn, .invite { position: relative; }
.orn-pine {
  position: absolute; top: 0; left: 50%; width: min(8.5rem, 32%); height: auto;
  transform: translate(-50%, -52%); pointer-events: none;
  /* the generated sprig was cut square at its tip by the canvas edge: the needles fade out instead */
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 98%);
  mask-image: linear-gradient(to right, #000 72%, transparent 98%);
}
.turn a { display: grid; gap: .3rem; text-decoration: none; min-height: 44px; }
.turn-next { text-align: right; margin-left: auto; }
.turn-say { font: 400 var(--step-2)/1.1 var(--display); }
.turn-next .turn-say { font-size: var(--step-3); }
.foot { display: grid; gap: .6rem; padding-block: 2.5rem 3rem; border-top: 1px solid var(--ink); font-size: var(--step--1); color: var(--muted); }
.foot-names { font: 400 var(--step-2)/1.1 var(--display); color: var(--ink); }
.foot-names [lang="ko"] { font: 700 var(--step--1)/1 var(--ko); letter-spacing: .12em; color: var(--accent); margin-right: .5rem; }
.foot-mark { max-width: 44em; color: var(--ink); }
.wsd-mark { display: flex; align-items: center; gap: .5rem; }
.wsd-mark i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
[data-skin="seoyeonjihoon"] .wsd-skip { background: var(--ink); color: var(--snow); padding: .75rem 1rem; border-radius: 0 0 10px 0; z-index: 30; }

/* §15 · motion. A card that turns over while the page is open develops like a print: out of a
   blur and up from pale. Everything else is the engine's reveal register, set soft above. */
@media (prefers-reduced-motion: no-preference) {
  .pcard[data-fresh] .pcard-shot img { animation: sj-develop 1.6s var(--ease-soft) both; }
  .pcard[data-fresh] .pcard-name { animation: sj-rise 900ms 300ms var(--ease-soft) both; }
  .pcard-shot { transition: transform 420ms var(--ease-soft), box-shadow 420ms var(--ease-soft); }
  .pcard[data-revealed]:hover .pcard-shot { transform: translateY(-4px); }
}
@keyframes sj-develop {
  from { filter: blur(14px) saturate(.3) brightness(1.25); transform: scale(1.08); opacity: .4; }
  to { filter: none; transform: none; opacity: 1; }
}
@keyframes sj-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sj-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* §16 · print: the page as a document, no chrome, no snow */
@media print {
  .mast, .skip, .a-petals, .turn, .wsd-skip { display: none !important; }
  .cover, .head { padding-top: 0; min-height: 0; }
}

/* §17 · the opening titles (engine: atelier.css §X, atelier.js titles()). A drama's opening, about
   sixteen seconds: the studio card, Seoul in the first snow, the two leads in turn (each looking toward the
   other across the cut), "special appearance: you", then the main poster with the title written in.
   The poster is then flown into the cover's own poster and frosted over (§7). Once per visitor;
   It plays by itself (the user's pick); ?arrival=press, still an engine option, holds it on Play. */
[data-skin="seoyeonjihoon"] .a-arrival--titles {
  --a-titles-ground: #0e131b;
  --a-titles-ink: var(--snow);
  --a-titles-bar-ink: #06090e;
  --a-titles-bar: clamp(5.75rem, 12vh, 7.5rem);
  --a-shot-fade: 1000ms;
  --a-land-pos: 50% 30%;                   /* the crop contract: .poster img's object-position */
  --a-land-radius: var(--radius-card);     /* and its corner */
  --a-titles-land: 1500ms;
  --a-titles-land-ease: cubic-bezier(.7, 0, .2, 1);
  font-family: var(--body);
  text-shadow: 0 1px 18px rgb(0 0 0 / .4);
}
/* the beats: sixteen seconds before the flight (the user, 2026-10-01: ten was too fast) */
.ttl-s0 { --a-shot-hold: 2000ms; }
.ttl-s1 { --a-shot-hold: 2700ms; --a-shot-from: scale(1.12) translateY(1.5%); --a-shot-to: scale(1.02); }   /* pulls back */
.ttl-s2 { --a-shot-hold: 2700ms; --a-shot-from: scale(1.03) translateX(1.2%); --a-shot-to: scale(1.12) translateX(-.8%); }
.ttl-s3 { --a-shot-hold: 2700ms; --a-shot-from: scale(1.03) translateX(-1.2%); --a-shot-to: scale(1.12) translateX(.8%); }
.ttl-s4 { --a-shot-hold: 1700ms; }
.ttl-s5 { --a-shot-hold: 4200ms; --a-frame-to: scale(1.05); }

.a-arrival--titles [lang="ko"] { font-family: var(--ko); }
.ttl-role, .ttl-ep, .ttl-hold-ep { font: 600 .75rem/1.3 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: #dfe6ec; }
:is(.ttl-role, .ttl-ep, .ttl-hold-ep) [lang="ko"] { font-weight: 700; letter-spacing: .12em; color: #f2b8be; margin-right: .45em; }
.ttl-name { font: 400 var(--step-4)/1 var(--display); }
.ttl-name-ko { font: 700 .34em/1 var(--ko); letter-spacing: .12em; vertical-align: .6em; color: #f2b8be; margin-left: .2em; }

/* the studio card, on the ground */
/* the two cards keep to the picture, between the bars */
.ttl-studio, .ttl-special { inset: var(--a-titles-bar) var(--margin); }
.ttl-studio { display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center; }
.ttl-studio > :first-child { font: 400 var(--step-3)/1 var(--display); letter-spacing: .02em; }
.ttl-studio > :last-child { font: 600 .75rem/1 var(--ui); letter-spacing: .32em; text-transform: uppercase; color: #aebccb; }
/* the place, low on the left */
.ttl-place { left: var(--margin); bottom: calc(var(--a-titles-bar) + 1.25rem); display: grid; gap: .45rem; }
.ttl-place > [lang="ko"] { font-size: var(--step-0); font-weight: 700; letter-spacing: .3em; color: #f2b8be; }
.ttl-place > :last-child { font: 400 var(--step-3)/1.05 var(--display); }
/* the leads: Seo-yeon on the left, Ji-hoon on the right, so the two credits face each other too */
.ttl-star { left: var(--margin); right: var(--margin); bottom: calc(var(--a-titles-bar) + 1.25rem); display: grid; gap: .4rem; justify-items: start; }
.ttl-star--far { justify-items: end; text-align: right; }
/* special appearance: you, centred on the ground */
.ttl-special { display: grid; place-content: center; justify-items: center; gap: .7rem; text-align: center; }
.ttl-special .ttl-name { color: #f2b8be; }
/* the title, over the main poster */
.ttl-title {
  left: var(--margin); right: var(--margin); bottom: calc(var(--a-titles-bar) + 1.25rem);
  display: grid; justify-items: center; gap: .55rem; text-align: center;
  --a-credit-delay: 720ms;
}
.ttl-ko { font: 700 var(--step-2)/1.1 var(--ko); letter-spacing: .16em; }
.ttl-heart { color: #f2b8be; }
.ttl-names { font: 400 clamp(2.4rem, 1.3rem + 5vw, 5.6rem)/.98 var(--display); letter-spacing: -.01em; }
.a-arrival--titles .amp { color: #f2b8be; }   /* the scarf red is for snow-white; on night it goes pink */
/* the Hangul writes itself in a syllable at a time, each inking up out of a blur */
.a-titles-shot[data-on] .ttl-title > .ttl-ko { animation: none; }
.a-titles-shot[data-on] .ttl-ko > span { display: inline-block; animation: sj-ink 900ms var(--ease-soft) var(--sj-at, 0ms) both; }
.ttl-ko > :nth-child(1) { --sj-at: 220ms; }
.ttl-ko > :nth-child(2) { --sj-at: 400ms; }
.ttl-ko > :nth-child(3) { --sj-at: 580ms; }
.ttl-ko > :nth-child(4) { --sj-at: 760ms; }
.ttl-ko > :nth-child(5) { --sj-at: 940ms; }
@keyframes sj-ink {
  from { opacity: 0; filter: blur(8px); transform: translateY(.12em) scale(1.08); }
  to { opacity: 1; filter: none; transform: none; }
}

/* the press start: the episode, the names, and Play */
.ttl-hold-names { font: 400 var(--step-4)/1 var(--display); }
.ttl-play {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 52px; margin-top: .6rem; padding: 0 1.7rem 0 1.35rem;
  border: 1px solid rgb(243 245 247 / .7); border-radius: var(--radius); background: rgb(243 245 247 / .06); color: var(--snow);
  font: 600 var(--step--1)/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; text-shadow: none; cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.ttl-play:hover { background: var(--snow); color: var(--night); }
.ttl-play:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }
.ttl-play-icon { width: 0; height: 0; border-style: solid; border-width: .45rem 0 .45rem .75rem; border-color: transparent transparent transparent currentColor; }

/* Skip and the design-study line, light on the foot bar */
[data-skin="seoyeonjihoon"] .a-arrival--titles .a-arrival-skip { color: var(--snow); border-color: rgb(243 245 247 / .55); background: transparent; text-shadow: none; }
[data-skin="seoyeonjihoon"] .a-arrival--titles .a-arrival-skip:hover { background: var(--snow); border-color: var(--snow); color: var(--night); }
[data-skin="seoyeonjihoon"] .a-arrival--titles .a-arrival-skip:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }
[data-skin="seoyeonjihoon"] .a-arrival--titles .a-arrival-note { color: #c6d0da; text-shadow: none; }

/* §18 · the cinematic round (2026-10-03, the user's picks: A1–A6 and S9–S10; lab/docs/DESIGN-READ-site7.md).
   Engine: clock.js (D-day), you.js (your poster), credits.js + atelier.css §Z (the credits), atelier.css Z2
   (.a-push, .a-letterbox on the story's stills, §11), petals.js (--petal-bokeh). The skin dresses each. */

/* A3 · D-day, the way a Korean couple counts down, in the cover's kicker */
.dday {
  display: inline-block; padding: .3rem .62rem .26rem; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font: 700 .8125rem/1 var(--ui); letter-spacing: .1em; font-variant-numeric: lining-nums tabular-nums;
}

/* A2 · your poster. One state on the mount (you.js): none, yes, no. Locked, it is the cast's frost;
   on a yes the courtyard comes up with your name on it and it develops like a card turning over. */
.you-when-yes, .you-when-not, .you-when-none, .you-when-no { display: none; }
[data-you="yes"] .you-when-yes,
:is([data-you="none"], [data-you="no"]) .you-when-not,
[data-you="none"] .you-when-none,
[data-you="no"] .you-when-no { display: revert; }

.you { display: grid; gap: .9rem; align-content: start; width: min(100%, 22rem); }
.you-poster {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); background: var(--frost);
  box-shadow: 0 1px 0 rgb(32 40 51 / .06), 0 18px 40px -22px rgb(32 40 51 / .55);
}
.you-poster > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.you-poster .you-frost { position: absolute; inset: 0; border-radius: inherit; overflow: clip; place-items: start center; padding-top: 18%; }
.you-over {
  position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: .35rem; justify-items: center;
  padding: 1.2rem 1.2rem 1.4rem; text-align: center; color: var(--night);
}
.you-role { font: 700 .72rem/1.3 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.you-role [lang="ko"] { letter-spacing: .08em; margin-right: .3em; }
.you-name { font: 400 var(--step-3)/1.02 var(--display); overflow-wrap: anywhere; }
.you-line { font-size: .75rem; letter-spacing: .08em; color: var(--ink); }   /* ink on the frost: slate measured 4.1:1 there */
.you-ribbon { display: none; }
[data-you="yes"] .you-frost, .troupe--you[data-you="yes"] .pcard-shot .frost { display: none; }
[data-you="yes"] .you-poster::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top, rgb(11 15 21 / .9), rgb(11 15 21 / .42) 36%, transparent 60%);
}
[data-you="yes"] .you-over { color: var(--snow); }
[data-you="yes"] .you-role { color: #f2b8be; }
[data-you="yes"] .you-line { color: #c6d0da; }
[data-you="yes"] .you-ribbon { display: block; position: absolute; z-index: 3; top: -.9rem; left: -1rem; width: 7.5rem; height: auto; transform: rotate(-9deg); pointer-events: none; }
:is(.you, .troupe--you):not([data-you="yes"]) img[data-you-src] { display: none; }

/* the cast page's own card for you: a link to Reply until you have one */
.you-card { text-decoration: none; }
[data-skin="seoyeonjihoon"] a.you-card:hover { color: inherit; }
.you-card .pcard-name > span { display: none; }
.troupe--you[data-you="yes"] .you-card .pcard-name > .you-when-yes,
.troupe--you:not([data-you="yes"]) .you-card .pcard-name > .you-when-not { display: inline; }
@media (max-width: 47.99em) {
  .troupe--you:not([data-you="yes"]) .pcard-shot { aspect-ratio: 2 / 1; }
  .troupe--you:not([data-you="yes"]) .frost-ko { writing-mode: horizontal-tb; letter-spacing: .24em; }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.you, .troupe--you)[data-fresh] img[data-you-src] { animation: sj-develop 2.2s var(--ease-soft) both; }
  .you[data-fresh] .you-over > * { animation: sj-rise 900ms var(--ease-soft) both; }
  .you[data-fresh] .you-over > :nth-child(1) { animation-delay: .9s; }
  .you[data-fresh] .you-over > :nth-child(2) { animation-delay: 1.15s; }
  .you[data-fresh] .you-over > :nth-child(3) { animation-delay: 1.4s; }
  .you[data-fresh] .you-ribbon { animation: sj-ribbon 900ms var(--ease-soft) 1.6s both; }
}
@keyframes sj-ribbon { from { opacity: 0; transform: rotate(-26deg) translate(-.6rem, -.6rem); } to { opacity: 1; transform: rotate(-9deg); } }

/* S10 · the reply page on a laptop: the form on the left, your poster beside it, kept in view */
@media (min-width: 64em) {
  .reply-body {
    max-width: none; grid-template-columns: minmax(0, 40rem) minmax(0, 21rem);
    column-gap: clamp(3rem, 6vw, 6rem); align-items: start;
  }
  .reply-body > * { grid-column: 1; }
  .reply-body > .you { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: calc(var(--mast-h) + 1.5rem); }
}

/* A4 · the next episode, previewed at the page turn (다음 회 예고) */
.turn-preview { grid-template-columns: auto minmax(0, auto); column-gap: 1.1rem; align-items: center; text-align: left; }
.turn-text { display: grid; gap: .3rem; }
.turn-shot {
  position: relative; display: block; width: clamp(6.5rem, 12vw, 9.5rem); aspect-ratio: 16 / 10;
  border-radius: 10px; overflow: clip; background: var(--frost);
  box-shadow: 0 12px 26px -18px rgb(32 40 51 / .55);
}
.turn-shot.frost { width: clamp(6.5rem, 12vw, 9.5rem); height: auto; aspect-ratio: 16 / 10; }
.turn-shot .frost-ko { writing-mode: horizontal-tb; letter-spacing: .24em; }
.turn-shot.frost::before, .turn-shot.frost::after { width: 46%; }
.turn-shot img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .turn-shot img { transition: transform 700ms var(--ease-soft); }
  .turn-preview:hover .turn-shot img { transform: scale(1.06); }
}

/* A1 · the end credits: the opening's night, its type and its pink on dark */
[data-skin="seoyeonjihoon"] .a-credits {
  --a-credits-ground: #0e131b; --a-credits-ink: var(--snow); --a-credits-speed: 150; --a-credits-w: 36rem;
  --a-credits-foot: 6.5rem;
  font-family: var(--body);
}
.cr-title { display: grid; justify-items: center; gap: .55rem; margin-bottom: 5rem; text-align: center; }
.cr-ko { font: 700 var(--step-2)/1.1 var(--ko); letter-spacing: .16em; }
.cr-names { font: 400 clamp(2.4rem, 1.4rem + 4vw, 4.4rem)/1 var(--display); }
.cr-ep, .cr-end-role { font: 600 .75rem/1.3 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: #dfe6ec; }
:is(.cr-ep, .cr-end-role) [lang="ko"] { color: #f2b8be; letter-spacing: .12em; font-weight: 700; margin-right: .45em; }
.cr-group { margin-bottom: 3.5rem; }
.cr-cap { margin: 0 0 1.1rem; text-align: center; font: 600 .75rem/1.3 var(--ui); letter-spacing: .28em; text-transform: uppercase; color: #f2b8be; }
.cr-rows { margin: 0; display: grid; gap: .6rem; }
.cr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline; }
.cr-row dt { text-align: right; font: 600 .6875rem/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #aebccb; }
.cr-row dd { margin: 0; font: 400 1.3rem/1.2 var(--display); }
.cr-studio { margin: 5rem 0 0; text-align: center; font: 600 .75rem/1.4 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: #aebccb; }
.cr-end-name { margin: .7rem 0 1rem; font: 400 clamp(3rem, 1.6rem + 6vw, 6.4rem)/1 var(--display); color: #f2b8be; overflow-wrap: anywhere; }
.a-credits:not([data-named]) .cr-end-name::before { content: "You"; }
.cr-end-ep { font-size: .8125rem; letter-spacing: .1em; color: #c6d0da; }
.cr-end-ep [lang="ko"] { font-family: var(--ko); }
[data-skin="seoyeonjihoon"] .a-credits .a-arrival-skip { color: var(--snow); border-color: rgb(243 245 247 / .55); background: transparent; }
[data-skin="seoyeonjihoon"] .a-credits .a-arrival-skip:hover { background: var(--snow); border-color: var(--snow); color: var(--night); }
[data-skin="seoyeonjihoon"] .a-credits .a-arrival-skip:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }
.a-credits .a-credits-note { color: #c6d0da; }
/* the snow falls over the credits too, lit as over the opening */
html[data-credits] .a-petals { z-index: 96; filter: brightness(1.9) saturate(.4); }

/* A6 · snow with depth: a few large, soft, out-of-focus flakes in front of the page (petals.js) */
[data-skin="seoyeonjihoon"] .a-petals { --petal-bokeh: 5; --petal-bokeh-size: 26; --petal-bokeh-alpha: .2; }
@media (max-width: 30em) { [data-skin="seoyeonjihoon"] .a-petals { --petal-bokeh: 3; --petal-bokeh-size: 20; } }