/* Self-hosted fonts (SIL Open Font License, see ../fonts/OFL.txt). Nothing loads from other sites. */
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lilita-one-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lilita-one-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/fredoka-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/fredoka-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Hanja only (stems, branches and a few more); Hangul falls back to the system's Korean font. */
@font-face { font-family: "Saju Hanja"; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/hanja-black.otf) format("opentype"); }

/* Saju Grandma readings. Layout: one phone-first column, like a Short scrolled downward, in three chapters (quick read, your life, timing); comic stickers on a purple halftone ground. Single dark world on purpose (the channel's look). */
:root {
  --ground: #4a2470; --ground-dk: #2a1846; --ground-lt: #6b3fa0;
  --ink: #22182e; --paper: #fff4e0; --paper-dim: #f1dfc4; --muted: #5b4a6b;
  --yellow: #ffd23f; --pink: #ff7eb6; --red: #ff4d3d; --moon: #fff1b8;
  --fire: #ff5a3d; --water: #4a8cff; --wood: #43b765; --earth: #f0b43a; --metal: #dfe4ee;
  --on-ground: #ffffff; --on-ground-dim: #d9c8ef;
  --display: "Lilita One", "Arial Black", Impact, sans-serif;
  --body: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --hanja: "Saju Hanja", "Noto Serif KR", "Noto Serif CJK KR", "AppleMyungjo", "Batang", "Songti SC", serif;
  color-scheme: dark;
}
/* Korean: Jua for headings (its @font-face rules are in fonts-ko.css, which the Korean page loads), the system's
   Korean font for text, no letter-spacing, and lines that break between words, not inside them. */
:root:lang(ko) {
  --display: "Jua", "Lilita One", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
}
:lang(ko) { letter-spacing: normal !important; word-break: keep-all; overflow-wrap: break-word; }
/* Hindi: Baloo 2 for headings (fonts-hi.css), the system's Devanagari font for text. Its letters join, so no
   letter-spacing; it has no capitals, so a Latin word in a label stays as written; and its vowel signs reach well
   above and below the letters, so lines that can wrap get room for them. */
:root:lang(hi) {
  --display: "Baloo 2", "Lilita One", "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --body: "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", "Mangal", system-ui, sans-serif;
}
:lang(hi) { letter-spacing: normal !important; text-transform: none !important; }
:lang(hi) :is(h1, h2, h3, .ld-say, details.note summary, .season .nm, .today .date, .pillar .who, .char small, .role, .partcard b, .nextcard b, .nextcard small, .prevpart) { line-height: 1.3; }
/* Japanese and Chinese: Mochiy Pop One, Chiron GoRound TC (Taiwan) or ZCOOL KuaiLe (mainland) for headings
   (fonts-ja.css, fonts-zh-Hant.css, fonts-zh-Hans.css), the system's font for text, no letter-spacing or capitals,
   and the strict line-break rules (no line starts with ー, っ or a closing mark). Japanese headings and the short
   lines around them break between phrases where the browser knows how (Chrome and Edge), and inside a phrase
   only when it is longer than the line. */
:root:lang(ja) {
  --display: "Mochiy Pop One", "Lilita One", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
}
:root:lang(zh-Hant) {
  --display: "Chiron GoRound TC", "Lilita One", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
}
:root:lang(zh-Hans) {
  --display: "ZCOOL KuaiLe", "Lilita One", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
:is(:lang(ja), :lang(zh)) { letter-spacing: normal !important; text-transform: none !important; line-break: strict; }
:lang(ja) :is(h1, h2, h3, .ribbon, .lede, .chapter p, .dm p, .ld-say) { word-break: auto-phrase; overflow-wrap: anywhere; }
/* Their lines can break between any two letters, so a squeezed label goes down one letter a line: when the logo
   and the links don't fit side by side, they take a row each instead. */
:is(:lang(ja), :lang(zh)) .top { flex-wrap: wrap; row-gap: 10px; }
:is(:lang(ja), :lang(zh)) .ribbon { text-wrap: balance; }
* { box-sizing: border-box; }
html { background: var(--ground); scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
body {
  margin: 0; overflow-x: clip; background-color: var(--ground); color: var(--on-ground);
  background-image: radial-gradient(rgba(255,255,255,.08) 2.2px, transparent 2.6px);
  background-size: 18px 18px;
  font: 500 17px/1.5 var(--body);
}
.wrap {
  max-width: 560px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.hz { font-family: var(--hanja); font-weight: 900; }

/* ribbon + top bar */
.ribbon { background: var(--ink); color: var(--yellow); font: 600 13px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding-block: 8px; }
.ribbon .wrap { display: block; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.logo { font: 400 20px/1 var(--display); background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 7px 14px 5px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; letter-spacing: .03em; }
.top nav { display: flex; gap: 16px; font-weight: 600; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--on-ground-dim); }
.top nav a:hover { color: var(--on-ground); }
/* the language menu: a native select laid invisibly over a small pill that shows the current language */
.lang { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; font: 600 14px/1 var(--body); color: var(--on-ground); border: 2px solid var(--on-ground-dim); border-radius: 999px; padding: 6px 10px 5px; }
.lang[hidden] { display: none; }
.lang::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.lang::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.lang:focus-within { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* On a narrow phone the logo, the links and the language menu don't fit on one row: the links take a row of their
   own under the other two. Japanese and Chinese, whose links are wider, do it on most phones. */
@media (max-width: 359px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .top nav { order: 3; flex-basis: 100%; }
  .logo { font-size: 17px; padding: 6px 12px 4px; }
}
@media (max-width: 399px) {
  :is(:lang(ja), :lang(zh)) .top nav { order: 3; flex-basis: 100%; }
}

/* hero */
.hero { overflow: clip; display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding-block: 8px 24px; }
.stage { position: relative; width: min(300px, 78vw); aspect-ratio: 560 / 585; }
.stage::before {
  content: ""; position: absolute; inset: -30% -40%; z-index: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,210,63,.22) 0 7deg, transparent 7deg 14deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 38%, transparent 62%);
          mask: radial-gradient(circle at 50% 50%, #000 0 38%, transparent 62%);
}
.stage img { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 0 rgba(20,10,40,.35)); }
.kicker { font: 400 15px/1 var(--display); letter-spacing: .06em; background: var(--pink); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 7px 14px 5px; }
.hero h1 { font-size: clamp(38px, 10vw, 54px); text-shadow: 4px 5px 0 rgba(20,10,40,.55); }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero .lede { max-width: 30em; color: var(--on-ground-dim); }

/* the sticker: paper, ink outline, hard shadow */
.sticker { background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 6px 7px 0 var(--ink); }

/* form */
form.sticker { display: grid; gap: 14px; padding: 20px; margin-bottom: 32px; color-scheme: light; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 400 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.field input[type=date], .field input[type=time], .field input[type=text] {
  font: 600 18px/1.2 var(--body); color: var(--ink); background: #fff; color-scheme: light;
  border: 3px solid var(--ink); border-radius: 14px; padding: 11px 12px; width: 100%; min-width: 0;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 600; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.resolved { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: var(--muted); }
.resolved b { color: var(--ink); font-weight: 600; }
.go { font: 400 22px/1 var(--display); letter-spacing: .04em; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); border-radius: 999px; padding: 15px 18px 12px; box-shadow: 4px 5px 0 var(--ink); cursor: pointer; text-decoration: none; text-align: center; }
.go:active { transform: translate(3px,4px); box-shadow: 1px 1px 0 var(--ink); }

/* chapter nav + chapter headers */
.chapnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ground-dk); border-block: 3px solid var(--ink); }
.chapnav .wrap { display: flex; gap: 8px; padding-block: 9px; overflow-x: auto; scrollbar-width: none; }
.chapnav a { flex: none; font: 400 15px/1 var(--display); letter-spacing: .04em; text-decoration: none; color: var(--on-ground); border: 3px solid var(--on-ground-dim); border-radius: 999px; padding: 7px 12px 5px; }
.chapnav a b { color: var(--yellow); font-weight: 400; margin-right: 4px; }
.chapter { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-block: 36px 4px; }
.chapter .num { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 400 32px/1 var(--display); background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.chapter h2 { font-size: clamp(30px, 8vw, 40px); text-shadow: 3px 4px 0 rgba(20,10,40,.5); }
.chapter p { color: var(--on-ground-dim); margin-top: 4px; }

/* section rhythm */
.section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 24px; }
.eyebrow { justify-self: start; font: 400 14px/1 var(--display); letter-spacing: .08em; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 999px; padding: 6px 12px 4px; }
.section h3.big { font-size: clamp(27px, 7.4vw, 36px); text-shadow: 3px 4px 0 rgba(20,10,40,.5); }
.section > p.lead { color: var(--on-ground-dim); }

/* Grandma speaks: face + bubble */
.says { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.says .face { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); background: var(--pink) center 14% / 150% auto no-repeat; background-image: url(../art/grandma-mystic.webp); box-shadow: 2px 3px 0 var(--ink); }
.bubble { position: relative; min-width: 0; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 20px; padding: 26px 16px 14px; }
.bubble::before { content: ""; position: absolute; left: -14px; top: 22px; width: 20px; height: 20px; background: var(--paper); border-left: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: rotate(45deg); }
.chip { position: absolute; top: -14px; left: 14px; font: 400 14px/1 var(--display); letter-spacing: .06em; background: var(--pink); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 5px 10px 3px; }
.bubble p + p { margin-top: 8px; }
.bubble strong { background: var(--yellow); padding: 0 4px; border-radius: 6px; font-weight: 700; }
.bubble .go { display: inline-block; margin-top: 12px; font-size: 18px; padding: 11px 16px 9px; }

/* Grandma's notes and "How Grandma read this": the saju terms and the real Korean words, folded away */
details.note { border: 3px dashed var(--on-ground-dim); border-radius: 16px; padding: 10px 14px; color: var(--on-ground-dim); font-size: 15px; }
details.note summary { cursor: pointer; font: 400 15px/1.2 var(--display); letter-spacing: .04em; color: var(--on-ground); }
details.note p { margin-top: 8px; }
details.note .hz { color: var(--yellow); font-weight: 900; }
details.note strong { color: var(--on-ground); }
details.fold .looked { margin-top: 10px; }
details.fold.sun .says { margin-top: 12px; }

/* luggage tag, the channel's recurring device */
.tag { --tag: var(--paper); justify-self: start; display: inline-grid; place-items: center; background: var(--ink); padding: 3px; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); border-radius: 0 12px 12px 0; }
.tag > span { display: flex; align-items: center; gap: 8px; background: var(--tag); color: var(--ink); clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); border-radius: 0 10px 10px 0; padding: 7px 14px 5px 26px; font: 400 18px/1 var(--display); letter-spacing: .03em; position: relative; white-space: nowrap; }
.tag > span::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ink); }

.clock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.clock .t { display: grid; justify-items: center; gap: 2px; text-align: center; }
.clock .t b { font: 400 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.clock .t small { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.clock .t.sun b { color: #c9321f; }
.clock .arrow { font: 400 26px/1 var(--display); }
.adj { margin-top: 10px; display: grid; gap: 4px; font-size: 14px; }
.adj div { display: flex; justify-content: space-between; gap: 10px; border-top: 2px dashed #d9c3a3; padding-top: 4px; font-variant-numeric: tabular-nums; }
.adj div span:last-child { white-space: nowrap; }

/* four pillars */
.chart { padding: 18px 12px 16px; display: grid; gap: 12px; }
.chart header { display: grid; gap: 2px; padding-inline: 6px; }
.chart header h3 { margin: 0; font: 400 24px/1.1 var(--display); }
.chart header p { font-size: 14px; color: var(--muted); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 8px; }
.pillar { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: 6px; justify-items: center; align-content: start; min-width: 0; padding: 8px 4px; border-radius: 16px; }
.pillar.you { background: #ffe7a6; outline: 3px dashed var(--ink); outline-offset: -3px; }
.pillar .head { font: 400 13px/1 var(--display); letter-spacing: .06em; text-align: center; }
.seat { font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--paper); background: var(--ink); border-radius: 999px; padding: 4px 8px 3px; }
.pillar.you .seat { color: var(--yellow); }
.pillar .who { font: 700 11px/1.1 var(--body); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.pillar img { width: 100%; max-width: 92px; height: auto; display: block; align-self: end; }
.char { width: 100%; display: grid; justify-items: center; gap: 1px; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 2px 5px; color: var(--ink); }
.char .hz { font-size: clamp(30px, 8.5vw, 42px); line-height: 1; }
.char small { font: 700 10.5px/1.15 var(--body); text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.el-fire { background: var(--fire); }
.el-wood { background: var(--wood); }
.el-earth { background: var(--earth); }
.el-water { background: var(--water); }
.el-metal { background: var(--metal); }
.chart .note { font-size: 13px; color: var(--muted); padding-inline: 6px; }

/* day master */
/* the day's type, first thing in the reading */
.typecard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.typecard img { width: clamp(112px, 34vw, 150px); height: auto; filter: drop-shadow(0 6px 0 rgba(10,5,25,.4)); }
.typecard > div { container-type: inline-size; }
.typecard h3.big { color: var(--yellow); font-size: clamp(30px, 8.6vw, 44px); font-size: min(clamp(30px, 8.6vw, 44px), calc(100cqi / var(--fit, 1))); text-wrap: balance; }
.daytype .about { margin-top: 14px; }
.dm { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.bigchar { width: 104px; aspect-ratio: 1; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 5px 6px 0 var(--ink); font: 900 70px/1 var(--hanja); color: var(--ink); }
.dm h3 { font-size: clamp(26px, 7vw, 34px); }
.dm p { color: var(--on-ground-dim); margin-top: 4px; }
.traits { display: flex; flex-wrap: wrap; gap: 8px; }
.traits span { font: 600 14px/1 var(--body); border: 3px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 7px 12px; }

/* five elements */
.spirits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }
.spirit { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.spirit img { width: 100%; max-width: 76px; height: auto; }
.spirit.none img { opacity: .55; filter: grayscale(.3); }
.meter { width: 100%; height: 96px; display: flex; align-items: flex-end; border: 3px solid var(--ink); border-radius: 12px; background: var(--ground-dk); overflow: hidden; }
.meter i { display: block; width: 100%; border-top: 3px solid var(--ink); }
.spirit .n { font: 400 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.spirit .nm { font: 400 13px/1 var(--display); letter-spacing: .06em; }
.spirit.none .n { color: var(--on-ground-dim); }

/* chips: the month's and the day's theme */
.role { display: inline-flex; align-items: center; gap: 4px; font: 600 13.5px/1 var(--body); border: 2.5px solid var(--ink); border-radius: 999px; padding: 5px 9px 4px; color: var(--ink); white-space: nowrap; }
.role.theme { background: var(--paper); }

/* 10-year seasons */
.toggle { display: inline-grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); justify-self: start; }
.toggle-note { font-size: 14px; color: var(--on-ground-dim); }
.seasons-scroll { overflow-x: auto; padding: 6px 2px 14px; margin-inline: -2px; scrollbar-color: var(--ground-lt) transparent; }
.seasons { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px; }
.season { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 6px 10px; border-radius: 16px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); position: relative; }
.season.now { background: #ffe7a6; box-shadow: 0 0 0 4px var(--yellow); }
.season .nowpin { position: absolute; top: -12px; font: 400 12px/1 var(--display); background: var(--ink); color: var(--yellow); border-radius: 999px; padding: 4px 8px 3px; letter-spacing: .06em; }
.season img { width: 70px; height: auto; }
.season .nm { font: 400 15px/1.05 var(--display); }
.season .ages { font: 600 12.5px/1.2 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }

/* months */
.months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.month { display: grid; gap: 3px; justify-items: center; text-align: center; padding: 8px 4px 7px; border-radius: 14px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); min-width: 0; position: relative; }
.month.now { background: #ffe7a6; box-shadow: 0 0 0 4px var(--yellow); }
.month .mn { font: 400 15px/1 var(--display); letter-spacing: .04em; }
.month .hz { font-size: 20px; line-height: 1.05; }
/* a long name (Serpiente de Agua) takes two lines in a narrow card */
.month small { font: 600 11.5px/1.15 var(--body); color: var(--muted); text-wrap: balance; }
.month .en { font: 700 11px/1.1 var(--body); text-wrap: balance; }
.month .role { font-size: 11.5px; padding: 3px 6px 2px; }
.month.helper-month::after { content: attr(data-tag); position: absolute; bottom: -10px; font: 700 9.5px/1 var(--body); text-transform: uppercase; letter-spacing: .04em; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 6px 1px; }

/* today */
.today { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px; }
.today .day { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 14px; }
.today .day .hz { font-size: 34px; line-height: 1.05; }
.today .day small { font: 700 11px/1.1 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.today .date { font: 400 15px/1.1 var(--display); letter-spacing: .04em; color: var(--muted); }
.today .line { font: 600 18px/1.35 var(--body); margin-top: 6px; }

/* 2026 */
.year { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: end; }
.year img { width: 100%; height: auto; }
.year .tag { --tag: var(--red); }
.year .tag > span { font-size: 22px; }
.year .tag > span::before { background: var(--ink); }

/* share card + shorts */
.share { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.story { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 5px 6px 0 var(--ink); background: var(--ground); }
.share-side { display: grid; gap: 12px; min-width: 0; }
.share-side > p:first-child { font-size: 15.5px; color: var(--on-ground-dim); }
.share-status { font-size: 14px; color: var(--on-ground-dim); }
.share-status:empty { display: none; }
.linkbox { display: block; width: 100%; margin-top: 6px; font: 500 14px/1.2 var(--body); color: var(--ink); background: #fff; color-scheme: light; border: 3px solid var(--ink); border-radius: 10px; padding: 8px 10px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { font: 400 17px/1 var(--display); letter-spacing: .04em; border: 3px solid var(--ink); border-radius: 999px; padding: 11px 14px 9px; box-shadow: 3px 4px 0 var(--ink); background: var(--yellow); color: var(--ink); cursor: pointer; }
.btn.alt { background: var(--paper); }
.shorts { display: grid; gap: 10px; }
.short { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; text-decoration: none; padding: 12px 14px; }
.short .play { width: 40px; height: 40px; border-radius: 50%; background: var(--red); border: 3px solid var(--ink); display: grid; place-items: center; }
.short .play::after { content: ""; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.short b { font: 400 18px/1.1 var(--display); display: block; }
.short small { font-size: 13px; color: var(--muted); }
.later { display: flex; flex-wrap: wrap; gap: 8px; }
.later span { font: 600 14px/1 var(--body); border: 3px dashed var(--on-ground-dim); color: var(--on-ground-dim); border-radius: 999px; padding: 8px 12px; }

footer { padding-block: 28px 40px; text-align: center; color: var(--on-ground-dim); font-size: 14px; display: grid; gap: 6px; }
footer b { color: var(--on-ground); font-weight: 600; }

/* your life: eight parts, each showing what Grandma looked at */
.partmenu { display: grid; gap: 10px; }
.partcard { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; text-align: start; font: inherit; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 4px 0 var(--ink); padding: 10px 12px; cursor: pointer; }
.partcard[aria-expanded="true"] { background: var(--yellow); }
.partcard .art { width: 52px; display: grid; place-items: center; }
.partcard .art img { width: 100%; height: auto; }
.partcard .dmtile, .nextcard .dmtile { width: 46px; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; font: 900 28px/1 var(--hanja); color: var(--ink); }
.partcard .txt { display: grid; gap: 3px; min-width: 0; }
.partcard b { font: 400 16px/1.1 var(--display); letter-spacing: .04em; }
.partcard .txt span { font-size: 14.5px; line-height: 1.35; }
/* the end of a part: a small Back button on the left, then a big pink "up next" card, which nothing else on the page
   looks like (badges and Grandma's notes are yellow), with the next part's picture and a nudging arrow */
.partnav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: stretch; margin-top: 8px; }
.partnav > :only-child { grid-column: 1 / -1; }
.prevpart { display: grid; place-content: center; justify-items: center; gap: 6px; min-width: 64px; padding: 8px 10px; font: 400 14px/1.1 var(--display); letter-spacing: .04em; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 4px 0 var(--ink); cursor: pointer; }
.prevpart .arr { font: 700 22px/1 var(--body); }
.nextcard { display: grid; grid-template-columns: 52px minmax(0, 1fr) 42px; gap: 12px; align-items: center; width: 100%; text-align: start; text-decoration: none; font: inherit; color: var(--ink); background: var(--pink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); padding: 12px 12px 12px 14px; cursor: pointer; }
.nextcard .art { width: 52px; display: grid; place-items: center; }
.nextcard .art img { width: 100%; height: auto; }
.nextcard .num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 400 26px/1 var(--display); background: var(--yellow); border: 3px solid var(--ink); }
.nextcard .txt { display: grid; gap: 4px; min-width: 0; }
.nextcard small { font: 400 12px/1 var(--display); letter-spacing: .08em; }
.nextcard b { font: 400 22px/1.05 var(--display); letter-spacing: .03em; }
.nextcard .txt span { font-size: 14px; line-height: 1.3; }
.nextcard .arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--yellow); font: 700 22px/1 var(--body); }
.nextcard:hover, .prevpart:hover { transform: translate(-1px, -1px); }
@media (max-width: 380px) {
  .partnav { gap: 8px; }
  .prevpart { min-width: 54px; padding: 8px 6px; }
  .nextcard { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 10px; padding: 10px; }
  .nextcard .art { width: 44px; }
  .nextcard .num { width: 40px; height: 40px; font-size: 22px; }
  .nextcard .arrow { width: 36px; height: 36px; font-size: 20px; }
  .nextcard b { font-size: 20px; }
}
.area { border-top: 3px dashed rgba(217,200,239,.35); margin-top: 8px; }
.area-head { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 12px; align-items: end; }
.area-head > div:first-child { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.area-head img { width: 100%; height: auto; }
.area-head .dmtile { width: 84px; aspect-ratio: 1; display: grid; place-items: center; justify-self: end; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); font: 900 54px/1 var(--hanja); color: var(--ink); }
.bigchar.el-fire, .bigchar.el-water, .dmtile.el-fire, .dmtile.el-water { color: #fff; text-shadow: 2px 3px 0 var(--ink); }
.looked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.looked .lbl, .when .lbl { flex-basis: 100%; font: 400 13px/1 var(--display); letter-spacing: .07em; color: var(--on-ground-dim); }
.ev { font: 600 13.5px/1.15 var(--body); background: var(--ground-dk); color: var(--on-ground); border: 2.5px solid var(--on-ground-dim); border-radius: 999px; padding: 6px 10px 5px; }
.ev .hz { color: var(--yellow); }
.ev.miss { border-style: dashed; color: var(--on-ground-dim); }
.notice { padding: 14px 16px 16px; display: grid; gap: 8px; }
.notice h3, .notice h4, .tip b { margin: 0; font: 400 14px/1 var(--display); letter-spacing: .07em; }
.notice ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.4; }
.tip { display: grid; gap: 6px; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); padding: 12px 16px 14px; }
.tip p { font-size: 16px; line-height: 1.45; }
.tip.add ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tip.add li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15.5px; line-height: 1.4; }
.tip.add li img { width: 34px; height: auto; }
.tip.add strong { font-weight: 700; }
.when { display: grid; gap: 8px; }
.when > p { font-size: 15.5px; color: var(--on-ground-dim); }
.season .what { font: 700 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .03em; }
.helpers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.helper { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; }
.helper img { width: 52px; height: auto; }
.helper b { display: block; font: 400 18px/1 var(--display); letter-spacing: .04em; }
.helper small { text-wrap: balance; display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }

/* long readings, and every bubble on a phone: the bubble takes the full width, Grandma's face sits on its corner */
.says.long { display: block; position: relative; padding-top: 14px; }
.says.long .face { position: absolute; top: 0; left: 10px; width: 54px; height: 54px; z-index: 2; }
.says.long .bubble { padding: 46px 16px 16px; }
.says.long .bubble::before { display: none; }
.says.long .chip { left: 74px; }
@media (max-width: 600px) {
  .says { display: block; position: relative; padding-top: 14px; }
  .says .face { position: absolute; top: 0; left: 10px; width: 54px; height: 54px; z-index: 2; }
  .says .bubble { padding: 46px 16px 16px; }
  .says .bubble::before { display: none; }
  .says .chip { left: 74px; }
}

/* birth sex in the form */
.field .flabel { font: 400 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; }
.toggle.sex { position: relative; display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; background: #fff; }
.toggle.sex input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.field .toggle.sex label { font: 400 16px/1 var(--display); letter-spacing: .03em; text-transform: none; text-align: center; padding: 12px 4px 10px; cursor: pointer; color: var(--ink); }
.toggle.sex label:not(:first-of-type) { border-left: 3px solid var(--ink); }
.toggle.sex input:checked + label { background: var(--ink); color: var(--yellow); }
.toggle.sex input:focus-visible + label { outline: 3px dashed currentColor; outline-offset: -7px; }
.hint { font-size: 13.5px; color: var(--muted); }

@media (max-width: 420px) {
  .row2 { grid-template-columns: 1fr; }
  .share { grid-template-columns: 120px 1fr; }
  .year { grid-template-columns: 1fr 96px; }
  .pillars { column-gap: 5px; }
  .pillar { padding: 6px 2px; }
  .pockets { grid-template-columns: 1fr; }
  .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .moonrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .badge span { font-size: 13.5px; }
  .helper { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; }
}
@media (max-width: 380px) {
  .today { grid-template-columns: 1fr; }
  .month { padding-inline: 2px; }
  .month .role { font-size: 10.5px; padding-inline: 4px; }
  .today .day { justify-self: start; grid-template-columns: auto auto; align-items: center; gap: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage::before { animation: spin 60s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .nextcard .arrow { animation: nudge 1.4s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: translateX(4px); } }
}

/* page basics the mockup didn't need */
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; font: 400 16px/1 var(--display); background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 10px 14px 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.noscript { padding: 16px 18px; margin-bottom: 32px; font-weight: 600; }
.about h2.big { font-size: clamp(27px, 7.4vw, 36px); text-shadow: 3px 4px 0 rgba(20,10,40,.5); }
.about .notice ul { font-size: 15.5px; }

/* form: disabled time, city list, errors */
.field input:disabled { background: var(--paper-dim); color: var(--muted); border-style: dashed; cursor: not-allowed; }
.field input::placeholder { color: #8a7b98; opacity: 1; }
.options { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 288px; overflow-y: auto; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 4px 0 var(--ink); }
.options [role=option] { display: grid; gap: 1px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.options [role=option] small { font-size: 13px; color: var(--muted); }
.options .opt-name { font-weight: 600; }
.options [role=option]:hover { background: var(--paper); }
.options [role=option][aria-selected=true] { background: var(--yellow); }
.options .none { cursor: default; color: var(--muted); font-style: italic; }
.error { background: #ffe1dc; color: var(--ink); border: 3px solid #c9321f; border-radius: 14px; padding: 10px 12px; font-weight: 600; }

/* chapter 1 extras */
.chapter:focus { outline: none; }
.chapter:focus-visible h2 { text-decoration: underline 3px var(--yellow); text-underline-offset: 6px; }
.bubble p.after { margin-top: 12px; }
.bubble p.flag { margin-top: 10px; font-size: 14.5px; background: #ffe7a6; border-left: 4px solid var(--ink); border-radius: 0 10px 10px 0; padding: 7px 10px; }
.chart header h3 .hz.small { font-size: 15px; color: var(--muted); margin-left: 2px; letter-spacing: .05em; }
.pillar.empty { outline: 3px dashed #c8b49a; outline-offset: -3px; color: var(--muted); }
.pillar.empty .seat { background: var(--muted); }
.pillar .qmark { align-self: center; font: 400 54px/1.2 var(--display); color: #c8b49a; }
.char.blank { border-style: dashed; border-color: #c8b49a; color: #c8b49a; }
.meter .fill-fire { background: var(--fire); } .meter .fill-water { background: var(--water); } .meter .fill-wood { background: var(--wood); }
.meter .fill-earth { background: var(--earth); } .meter .fill-metal { background: var(--metal); }

/* chapter 3 (timing) extras */
.year-head { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.season .hz { font-size: 18px; line-height: 1.05; }

/* two views: the reading's top bar and its closing call */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
form.sticker:focus { outline: none; }
form.sticker:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.result-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 2px 16px; }
.back { display: inline-flex; align-items: center; gap: 8px; font: 400 15px/1 var(--display); letter-spacing: .04em; color: var(--on-ground); background: transparent; border: 3px solid var(--on-ground-dim); border-radius: 999px; padding: 8px 14px 6px 13px; cursor: pointer; }
.back::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 3px 3px; transform: rotate(45deg); margin-top: -2px; }
.back:hover { border-color: var(--on-ground); }
.born { min-width: 0; font-size: 14.5px; color: var(--on-ground-dim); }
.again { justify-items: center; text-align: center; padding-block: 28px 8px; }
.again p { max-width: 30em; color: var(--on-ground-dim); }

/* the loading screen: Grandma reads while the eight characters land in their seats */
.busy, .busy body { overflow: hidden; }
.loading {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background-color: var(--ground-dk); color: var(--on-ground);
  background-image: radial-gradient(rgba(255,255,255,.07) 2.2px, transparent 2.6px); background-size: 18px 18px;
  animation: ld-in .25s ease-out;
}
.loading:focus { outline: none; }
.loading.out { animation: ld-out .35s ease-in forwards; }
.ld { --S: min(52vw, 27vh, 220px); position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(8px, 2vh, 16px); width: min(420px, 100%); text-align: center; }
.ld-stage { position: relative; width: var(--S); height: var(--S); margin-block: calc(var(--S) * .32); }
.ld-rays {
  position: absolute; inset: -55%; opacity: .75; transition: opacity .4s;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,210,63,.26) 0 7deg, transparent 7deg 14deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 26%, transparent 60%);
          mask: radial-gradient(circle at 50% 50%, #000 0 26%, transparent 60%);
}
.tada .ld-rays { opacity: 1; }
.ld-glow { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(255,241,184,.6), rgba(255,126,182,.22) 52%, transparent 70%); }
.ld-grandma { position: absolute; inset: 0; z-index: 1; height: 100%; width: auto; max-width: none; margin: auto; filter: drop-shadow(0 8px 0 rgba(10,5,25,.45)); }
.ld-orbit { position: absolute; inset: -18%; z-index: 2; }
.ld-spirit { position: absolute; inset: 0; transform: rotate(var(--a)); }
.ld-spirit img { position: absolute; left: 50%; top: 0; width: 20%; height: auto; max-width: none; margin: -10% 0 0 -10%; transform: rotate(calc(var(--a) * -1)); filter: drop-shadow(0 4px 0 rgba(10,5,25,.4)); }
.ld-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 360px); }
.ld-seat { position: relative; display: grid; gap: 6px; justify-items: center; align-content: start; min-width: 0; padding: 8px 3px 7px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 4px 0 var(--ink); }
.ld-seat.you { background: #ffe7a6; }
.ld-head { font: 400 11px/1.1 var(--display); letter-spacing: .04em; text-align: center; }
.ld-head .hz { font-size: 10.5px; }
.ld-char { width: min(100%, 64px); aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--ink); border-radius: 12px; }
.ld-char:not(.land) { background: var(--paper-dim); }
.ld-char .hz { font-size: clamp(22px, min(7.5vw, 4.6vh), 38px); line-height: 1; }
.ld-char.blank { border-style: dashed; border-color: #c8b49a; color: #b39d82; background: transparent; }
.ld-name { min-height: 2.3em; font: 700 10px/1.15 var(--body); text-transform: uppercase; letter-spacing: .03em; visibility: hidden; overflow-wrap: anywhere; }
.ld-seat.landed .ld-name { visibility: visible; }
.ld-say { min-height: 2.3em; font: 400 clamp(19px, 5.2vw, 26px)/1.15 var(--display); letter-spacing: .02em; text-shadow: 2px 3px 0 rgba(10,5,25,.55); text-wrap: balance; }
/* the visitor's type, popping up at Grandma's side at the end */
.ld-type { position: absolute; z-index: 3; right: -30%; bottom: -12%; width: 56%; height: auto; max-width: none; visibility: hidden; filter: drop-shadow(0 6px 0 rgba(10,5,25,.45)); }
.typed .ld-type { visibility: visible; }
.typed .ld-orbit { visibility: hidden; }
.ld-drift { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ld-drift span { position: absolute; left: var(--x); top: 100%; font-size: var(--s); line-height: 1; color: rgba(255,255,255,.08); }
@media (max-height: 460px) and (orientation: landscape) {
  .ld { --S: min(30vw, 46vh, 200px); grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; width: min(720px, 100%); }
  .ld-stage { grid-row: span 2; margin: 0 calc(var(--S) * .32); }
}
@media (prefers-reduced-motion: no-preference) {
  .loading.out { animation-name: ld-out-zoom; }
  .ld-rays { animation: ld-turn 24s linear infinite; }
  .ld-glow { animation: ld-pulse 1.3s ease-in-out infinite alternate; }
  .ld-grandma { animation: ld-float 2.6s ease-in-out infinite alternate; }
  .tada .ld-grandma { animation: ld-tada .5s cubic-bezier(.2, 1.6, .45, 1), ld-float 2.6s ease-in-out .5s infinite alternate; }
  .ld-orbit { animation: ld-turn 8s linear infinite; }
  .ld-spirit img { animation: ld-unturn 8s linear infinite; }
  .ld-char.spin .hz { animation: ld-roll .16s linear infinite; }
  .ld-char.land { animation: ld-stamp .4s cubic-bezier(.2, 1.7, .45, 1); }
  .ld-seat.landed::after { content: ""; position: absolute; inset: -5px; border: 3px solid var(--yellow); border-radius: 19px; pointer-events: none; animation: ld-ring .55s ease-out forwards; }
  .ld-say.new { animation: ld-say .3s ease-out; }
  .typed .ld-type { animation: ld-pop .55s cubic-bezier(.2, 1.6, .45, 1); }
  .ld-drift span { animation: ld-rise var(--t) linear var(--d) infinite; }
}
@keyframes ld-in { from { opacity: 0; } }
@keyframes ld-out { to { opacity: 0; } }
@keyframes ld-out-zoom { to { opacity: 0; transform: scale(1.05); } }
@keyframes ld-turn { to { transform: rotate(360deg); } }
@keyframes ld-unturn { to { rotate: -360deg; } }
@keyframes ld-pulse { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.06); opacity: 1; } }
@keyframes ld-float { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes ld-tada { from { transform: scale(.82) rotate(-4deg); } }
@keyframes ld-pop { from { transform: translateY(30%) scale(.3) rotate(-12deg); opacity: 0; } }
@keyframes ld-roll { from { transform: translateY(-40%); opacity: .35; } 50% { opacity: 1; } to { transform: translateY(40%); opacity: .35; } }
@keyframes ld-stamp { from { transform: scale(1.4); } to { transform: scale(1); } }
@keyframes ld-ring { from { opacity: 1; transform: scale(.94); } to { opacity: 0; transform: scale(1.18); } }
@keyframes ld-say { from { opacity: 0; transform: translateY(8px); } }
@keyframes ld-rise { to { transform: translateY(calc(-100vh - 100%)); } }
/* the waiting screen before a match: the two types pop up beside Grandma, a red thread runs from one to the other
   with a heart tied in the middle, and their two cards fill in under her */
.lm-type { position: absolute; z-index: 3; bottom: -12%; width: 56%; height: auto; max-width: none; visibility: hidden; filter: drop-shadow(0 6px 0 rgba(10,5,25,.45)); }
.lm-type.left { left: -34%; }
.lm-type.right { right: -34%; }
.lm-type.in { visibility: visible; }
.lm-thread { position: absolute; z-index: 2; left: -10%; width: 120%; top: 56%; height: 34%; pointer-events: none; }
.lm-thread svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lm-thread path { fill: none; stroke: #ff5c8a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lm-thread path.edge { stroke: var(--ink); stroke-width: 10; }
.tied .lm-thread path { stroke-dashoffset: 0; }
.lm.done .ld-orbit { visibility: hidden; }
.lm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: min(100%, 360px); }
.lm-card { position: relative; display: grid; gap: 4px; justify-items: center; align-content: center; min-width: 0; min-height: 66px; padding: 9px 6px 8px; color: transparent; border: 3px dashed var(--on-ground-dim); border-radius: 16px; }
.lm-card::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 32px/1 var(--display); color: var(--on-ground-dim); }
.lm-card.in { color: var(--ink); background: var(--paper); border-style: solid; border-color: var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.lm-card.in::after { content: none; }
.lm-card b { font: 400 19px/1.05 var(--display); letter-spacing: .02em; overflow-wrap: anywhere; }
.lm-card span { font: 700 10px/1.15 var(--body); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.lm-heart { position: relative; display: grid; place-items: center; }
.lm-heart > .heart { margin: 0; width: 38px; height: 35px; opacity: .3; filter: grayscale(1); }
.tied .lm-heart > .heart { opacity: 1; filter: none; }
.lm-burst { position: absolute; inset: 0; pointer-events: none; }
.lm-burst .heart { position: absolute; left: 50%; top: 50%; width: 16px; height: 15px; margin: -7px 0 0 -8px; opacity: 0; }
.lm .ld-say { min-height: calc(2.3 * clamp(22px, 6.4vw, 31px)); } /* room for the pair's name, so nothing jumps */
.ld-say.named { color: var(--yellow); font-size: clamp(22px, 6.4vw, 31px); }
@media (prefers-reduced-motion: no-preference) {
  .lm-type.in { animation: ld-pop .55s cubic-bezier(.2, 1.6, .45, 1); }
  .lm-card.in { animation: ld-stamp .4s cubic-bezier(.2, 1.7, .45, 1); }
  .lm-card.in::before { content: ""; position: absolute; inset: -5px; border: 3px solid var(--yellow); border-radius: 19px; pointer-events: none; animation: ld-ring .55s ease-out forwards; }
  .lm-thread path { transition: stroke-dashoffset 1.4s ease-in-out; }
  .tied .lm-heart > .heart { transition: opacity .3s .9s, filter .3s .9s; }
  .lm.mixing .ld-orbit, .lm.mixing .ld-spirit img { animation-duration: 2.4s; }
  .lm.done .lm-heart > .heart { animation: lm-beat 1.1s ease-in-out infinite; }
  .lm.done .lm-burst .heart { animation: lm-burst .9s ease-out forwards; }
  .ld-say.named.new { animation: ld-tada .5s cubic-bezier(.2, 1.6, .45, 1); }
}
@keyframes lm-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(.95); } }
@keyframes lm-burst { from { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); } 70% { opacity: 1; } to { opacity: 0; transform: rotate(var(--a)) translateY(-56px) scale(1); } }

/* compatibility (궁합): the call at the end of a reading, the banner over the form for the other person, and the
   match itself, with the two day types side by side and a heart between them */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; justify-items: center; gap: 6px; width: 100%; }
.pair .one { margin: 0; display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
.pair .one img { width: min(100%, 176px); height: auto; filter: drop-shadow(0 6px 0 rgba(10,5,25,.4)); }
.pair figcaption { display: grid; gap: 3px; min-width: 0; }
.pair figcaption b { font: 400 22px/1.05 var(--display); letter-spacing: .02em; overflow-wrap: anywhere; }
.pair figcaption span { font: 600 13px/1.2 var(--body); color: var(--on-ground-dim); text-transform: uppercase; letter-spacing: .04em; }
.heart { align-self: center; width: 48px; height: 44px; margin-bottom: 30px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 86C18 62 4 44 8 26 12 9 32 2 50 20 68 2 88 9 92 26 96 44 82 62 50 86Z' fill='%23ff7eb6' stroke='%2322182e' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pair.small { max-width: 340px; }
.pair.small .heart { margin-bottom: 0; width: 40px; height: 37px; }
.pair.small .one img { width: min(100%, 120px); }
.pair .mystery { width: min(100%, 112px); aspect-ratio: 360 / 455; display: grid; place-items: center; font: 400 60px/1 var(--display); color: var(--on-ground-dim); border: 4px dashed var(--on-ground-dim); border-radius: 26px; }
.match-call { justify-items: start; }
.partner { display: grid; gap: 14px; padding-block: 18px 22px; }
.partner .back { justify-self: start; }
.partner-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.partner-card figure { margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.partner-card img { width: clamp(100px, 30vw, 140px); height: auto; filter: drop-shadow(0 6px 0 rgba(10,5,25,.4)); }
.partner-card figcaption b { display: block; font: 400 18px/1.1 var(--display); overflow-wrap: anywhere; }
.partner-card figcaption span { display: block; font: 600 12px/1.2 var(--body); color: var(--on-ground-dim); text-transform: uppercase; letter-spacing: .04em; }
.partner-text { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.partner-text h1 { font-size: clamp(27px, 7.4vw, 40px); text-shadow: 3px 4px 0 rgba(20,10,40,.5); }
.partner-text .lede { color: var(--on-ground-dim); }
#match .result-top { padding-block: 16px 0; }
.pairtop { justify-items: center; text-align: center; padding-top: 8px; }
.pairtop .eyebrow { justify-self: center; }
.section h2.pairname { font-size: clamp(34px, 9.6vw, 50px); color: var(--yellow); text-shadow: 3px 4px 0 rgba(20,10,40,.55); }
.pairname:focus { outline: none; }
.click { padding: 14px 16px; font-size: 16px; line-height: 1.45; }
.click strong { background: var(--yellow); padding: 0 4px; border-radius: 6px; font-weight: 700; }
.gifts { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.gifts .icons { display: grid; gap: 8px; }
.gifts img { width: 44px; height: auto; }
.gifts p { margin: 0; }
.together { margin-top: 14px; }
.pairyear { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.pairyear img { width: 64px; height: auto; }
.again .btns { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .pairtop .one:first-child { animation: pair-l .6s cubic-bezier(.2, 1.4, .45, 1); }
  .pairtop .one:last-child { animation: pair-r .6s cubic-bezier(.2, 1.4, .45, 1); }
  .pairtop .heart, .match-call .heart { animation: pair-beat 1.6s ease-in-out .6s infinite; }
  @keyframes pair-l { from { transform: translateX(-40%) rotate(-8deg); opacity: 0; } }
  @keyframes pair-r { from { transform: translateX(40%) rotate(8deg); opacity: 0; } }
  @keyframes pair-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(.96); } }
}