/* chaenna archive — final design layer. Periwinkle (#89A4C9) on cool paper, soft serif display type
   (Instrument Serif for Latin, Gowun Batang for Hangul), a quiet apricot for "today", and the butterfly
   as the only ornament. Loaded last. */
:root{
 --serif-en:'Instrument Serif','Gowun Batang',Georgia,serif;--serif-ko:'Gowun Batang','Noto Serif KR','AppleMyungjo',serif;
 --brand:#89a4c9;--brand-ink:#46658f;--brand-soft:#b9cce6;--mist:#e9eff7;--mist-2:#dce5f2;
 --paper:#f4f6fa;--surface:#fff;--ink:#18243a;--ink-2:#3a4c68;--muted:#64748b;--line:#dde3ec;--line-2:#c6d1df;
 --dusk:#1c2b44;--dusk-2:#2b4064;--glow:#f3d2bf;--glow-ink:#9a5636;--rose:#b84d72;--rose-soft:#fbe9f0;--sun:#c8475b;--sat:#3d6fb8;
 --r-s:10px;--r-m:16px;--r-l:24px;--ease:cubic-bezier(.2,.7,.2,1);
 --lift:0 1px 2px #18243a0a,0 10px 28px -14px #18243a38;--lift-2:0 2px 4px #18243a0d,0 22px 44px -18px #18243a4d;
 --white:#fff;--green:var(--mist);--blue:var(--mist-2);
 /* Screen-mode tokens (docs/ui_theme.md). Light values equal the colours these rules used before. */
 --line-soft:#edf1f6;--field:#fff;--field-line:var(--line);--on-ink:#fff;--ink-hover:#2b4064;--on-brand:#18243a;--danger:#a3455f;
 --chrome:#18243a;--on-chrome:#fff;--chrome-muted:#aebbd0;--chrome-accent:#b9cce6;--chip:#ffffffe6;--chip-ink:#18243a;
 --header-bg:#f4f6fadb;--wash:#e9eff7b3;--hover-cell:#e9eff780;--today-wash:#fdf5ef;--anniv:#f6ece6;--off-bg:#f3ecf1;--off-ink:#80566f;
 --stage-hi:#fff;--switch-on:var(--brand-ink);--letter-ink:#222;
 color-scheme:light;accent-color:var(--brand-ink)
}
/* Dark: the same #89A4C9 hue, lowered to a night-blue surface. Media is never filtered or inverted. */
:root[data-theme=dark]{
 --brand-ink:#a9c0e2;--brand-soft:#4a6187;--mist:#1c2738;--mist-2:#243248;
 --paper:#0f1520;--surface:#161e2c;--ink:#e6ecf5;--ink-2:#c3cfe0;--muted:#93a1b7;--line:#263246;--line-2:#36445c;--line-soft:#1d2738;
 --dusk:#0b111b;--dusk-2:#1f2d44;--glow:#7a5440;--glow-ink:#e2b49a;--rose:#ec8fb0;--rose-soft:#3a2030;--sun:#f08a98;--sat:#8cb2ec;
 --lift:0 1px 2px #0000004d,0 10px 28px -14px #000000b3;--lift-2:0 2px 4px #00000059,0 22px 44px -18px #000000cc;
 --white:#161e2c;--field:#182131;--field-line:#63779a;--on-ink:#0f1520;--ink-hover:#c3d0e4;--danger:#f29bb4;
 --chrome:#232f44;--on-chrome:#e6ecf5;--chrome-muted:#a3b1c7;--chrome-accent:#a9c0e2;--chip:#121a27e0;--chip-ink:#e6ecf5;
 --header-bg:#0f1520d9;--wash:#1c2738b3;--hover-cell:#1c273880;--today-wash:#2a2220;--anniv:#2a2430;--off-bg:#2e2230;--off-ink:#d7a9c4;
 --stage-hi:#2a3850;--switch-on:#5b7bab;--letter-ink:#e3e8ef;
 color-scheme:dark
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink)}
/* Colours that arrive with content (notice editors, schedule colours): their dark stand-ins (color_tone.mjs). */
:root[data-theme=dark] [data-tone][style*="--tone-ink"]{color:var(--tone-ink)!important}
:root[data-theme=dark] [data-tone][style*="--tone-bg"]{background-color:var(--tone-bg)!important}
:root[data-theme=dark] .next-entry{--event:var(--event-dark)!important}
:focus-visible{outline:3px solid var(--brand-ink);outline-offset:3px}
::selection{background:var(--mist-2);color:var(--ink)}
/* Shared field treatment, including dialog and account forms. */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]),textarea,select){border:1px solid var(--field-line);border-radius:14px;background-color:var(--field);color:var(--ink);transition:border-color .2s,box-shadow .2s}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]),textarea,select):hover:not(:disabled){border-color:var(--line-2)}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]),textarea,select):focus{outline:0;outline-offset:0;border-color:var(--brand-ink);box-shadow:0 0 0 4px #89a4c940}
@media(forced-colors:active){:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]),textarea,select):focus{outline:2px solid Highlight;outline-offset:2px}}

button,.button{border-radius:var(--r-s);transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s var(--ease)}
button:hover,.button:hover{background:var(--mist)}
button:active,.button:active{transform:scale(.97)}
.primary,button.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}.primary:hover,button.primary:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:var(--on-ink);box-shadow:none}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--brand-ink)}
/* The English name stays lowercase inside uppercase eyebrows; display:contents keeps it in the same flex item as its sentence. */
.name-en{text-transform:none}.eyebrow .name-en{display:contents}
.muted,small{color:var(--muted)}

/* ---------- butterfly mark */
.butterfly{display:inline-block;flex:0 0 auto;overflow:visible}
.butterfly .wing{transform-box:view-box;transform-origin:24px 24px}
@keyframes flutter{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
@keyframes flutter-idle{0%,80%,100%{transform:scaleX(1)}84%{transform:scaleX(.55)}88%{transform:scaleX(1)}92%{transform:scaleX(.68)}96%{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
 .masthead-mark .wing{animation:flutter-idle 7s ease-in-out 1.2s infinite}
 .page-title .title-mark .wing{animation:flutter .42s ease-in-out .35s 2}
 .brand:hover .mark .wing,.page-title h1:hover .title-mark .wing{animation:flutter .42s ease-in-out 2}
}
/* Fallback for star spans rendered by modules outside this layer (e.g. account orbit). */
.title-star,.account-orbit{color:transparent!important;overflow:hidden;-webkit-mask:var(--butterfly-mask) center/contain no-repeat;mask:var(--butterfly-mask) center/contain no-repeat}
.account-orbit{font-size:0!important}
:root{--butterfly-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill-rule='evenodd' d='M22.6 20.5C19.8 13.2 13.4 7.2 8.2 7.6 4.3 7.9 3.6 12.6 5.6 16.7 7.7 21 13.2 24.2 18.4 24.5 20.4 24.6 21.9 23.6 22.6 20.5ZM13.8 14.6a2.1 2.1 0 1 0-4.2 0 2.1 2.1 0 1 0 4.2 0ZM25.4 20.5C28.2 13.2 34.6 7.2 39.8 7.6 43.7 7.9 44.4 12.6 42.4 16.7 40.3 21 34.8 24.2 29.6 24.5 27.6 24.6 26.1 23.6 25.4 20.5ZM38.4 14.6a2.1 2.1 0 1 0-4.2 0 2.1 2.1 0 1 0 4.2 0Z'/%3E%3Cpath opacity='.6' d='M22.4 26.2C19.2 25.6 13.8 26.6 11.1 29.6 8.6 32.4 9.4 37.8 12.9 39.4 16.4 41 20.2 37.4 21.6 33.2 22.3 31 22.6 28.4 22.4 26.2ZM25.6 26.2C28.8 25.6 34.2 26.6 36.9 29.6 39.4 32.4 38.6 37.8 35.1 39.4 31.6 41 27.8 37.4 26.4 33.2 25.7 31 25.4 28.4 25.6 26.2Z'/%3E%3Cpath d='M24 17.5v19' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.title-star{display:inline-block;width:.6em;height:.6em;margin-left:.25em;line-height:0;vertical-align:middle;background:var(--brand)}
.account-orbit{width:260px;height:260px;right:-40px;bottom:-60px;background:#ffffff40}

/* ---------- header & navigation */
body>header{position:sticky;top:0;z-index:8;height:72px;margin:0;padding:0 max(20px,calc((100% - 1320px)/2));gap:28px;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.brand{gap:12px;font-family:var(--serif-ko);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);min-height:44px}
.brand small{font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.24em;font-weight:600;color:var(--muted);margin-top:2px}
.brand .mark{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mist);color:var(--brand-ink);font-size:0;line-height:0;box-shadow:inset 0 0 0 1px var(--mist-2);transition:transform .3s var(--ease)}
.brand .mark .butterfly{width:28px;height:28px}
.brand:hover .mark{transform:rotate(-6deg)}
body>header nav{--nav-pad:14px;gap:4px;margin:0 auto;align-self:stretch}
body>header nav a{position:relative;display:flex;align-items:center;padding:0 var(--nav-pad);font-size:13px;font-weight:500;color:var(--ink-2);border:0;box-shadow:none;transition:color .2s}
body>header nav a::after,body>header nav a[aria-current]::after{content:'';position:absolute;left:var(--nav-pad);right:var(--nav-pad);bottom:-1px;width:auto;height:2px;border-radius:2px;background:var(--brand-ink);transform:scaleX(0);transition:transform .3s var(--ease)}
body>header nav a:hover{color:var(--ink)}
body>header nav a[aria-current=page]{color:var(--ink);font-weight:700;border:0}
body>header nav a[aria-current=page]::after{transform:scaleX(1)}
body>header nav a:hover::after{transform:scaleX(.35)}body>header nav a[aria-current=page]:hover::after{transform:scaleX(1)}
body>header .outline.external{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-s);font-size:11px;letter-spacing:.12em;color:var(--ink-2)}
body>header .outline.external:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
body>header .external .icon{width:14px;height:14px}
main{max-width:1320px;padding:36px max(20px,4%) 88px}
body>footer{margin:0;padding:28px max(20px,calc((100% - 1320px)/2));border-top:1px solid var(--line);font-size:11px;color:var(--muted);align-items:center}
body>footer span:first-child{color:var(--ink-2);font-weight:600}

/* ---------- page titles */
main .page-title{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:40px;align-items:end;position:relative;margin:0 0 28px;padding:20px 0 26px;border-bottom:1px solid var(--line);background:none;overflow:visible;min-height:0}
main .page-title .eyebrow{grid-column:1/-1;font-size:10px;color:var(--brand-ink);letter-spacing:.2em}
main .page-title .eyebrow::before{content:'';width:20px;height:1px;background:currentColor}
main .page-title h1{grid-column:1;display:flex;align-items:center;gap:.3em;margin:14px 0 0;font-family:var(--serif-ko);font-size:clamp(28px,3.2vw,42px);line-height:1.25;font-weight:400;letter-spacing:-.015em;color:var(--ink);white-space:normal;word-break:keep-all}
main .page-title .title-mark{width:.6em;height:.6em;color:var(--brand);transform:translateY(-.04em)}
main .page-title p{grid-column:2;justify-self:end;max-width:34ch;margin:0;font-size:13px;line-height:1.7;color:var(--muted);text-align:right}
main .page-title::after{display:none}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){main:not([data-view=home])>.page-title{animation:layer-in .45s var(--ease) both}}
@keyframes layer-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- search & tabs */
main .toolbar{margin:0 0 26px;max-width:none}
main .toolbar input{width:100%;max-width:560px;min-height:52px;padding:14px 18px 14px 48px;border:1px solid var(--line);border-radius:14px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") 17px 50%/19px no-repeat;font-size:14px;box-shadow:0 1px 2px #18243a08;transition:border-color .2s,box-shadow .2s}
:root[data-theme=dark] main .toolbar input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1b7' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E")}
main .toolbar input::placeholder{color:#8794a7}
main .toolbar input:hover{border-color:var(--line-2)}
main .toolbar input:focus{outline:0;border-color:var(--brand-ink);box-shadow:0 0 0 4px #89a4c940}
/* One flush rail for page switches (clips) and in-page tabs (songs): heavy bar + darker bold label. */
main .tabs{display:flex;flex-wrap:nowrap;gap:2px;width:100%;max-width:none;margin:0 0 24px;padding:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;overflow-x:auto;scrollbar-width:none}
main .tabs::-webkit-scrollbar{display:none}
main .tabs>a,main .tabs>button{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:0 18px;border:0;border-radius:var(--r-s) var(--r-s) 0 0;background:transparent;box-shadow:none;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;transform:none}
main .tabs>a::after,main .tabs>button::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;width:auto;height:3px;border-radius:3px 3px 0 0;background:var(--brand-ink);transform:scaleX(0);transition:transform .3s var(--ease)}
main .tabs>a:hover,main .tabs>button:hover{color:var(--ink);background:linear-gradient(transparent,var(--mist));transform:none}
main .tabs>a[aria-current=page],main .tabs>button.active,main .tabs>button[aria-pressed=true]{color:var(--ink);font-weight:700;background:transparent;box-shadow:none}
main .tabs>a[aria-current=page]::after,main .tabs>button.active::after,main .tabs>button[aria-pressed=true]::after{transform:scaleX(1)}
main .tabs small{display:inline-grid;place-items:center;min-width:24px;height:22px;margin:0;padding:0 7px;border-radius:7px;background:var(--mist);color:var(--brand-ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;opacity:1}
main .tabs>button[aria-pressed=true] small{background:var(--ink);color:var(--on-ink)}

/* ---------- home: editorial folio
   Wordmark and lede on the left, an arched portrait with a round cameo on the right; below, an asymmetric
   index (next meeting | letters), a song refrain and a staggered clip reel. One link per destination. */
main[data-view=home]{overflow-x:clip}
.folio{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(8px,2vw,28px) 0 clamp(48px,6vw,96px)}
.folio::before{content:'';position:absolute;z-index:-1;left:-12%;top:-80px;width:72%;height:115%;background:radial-gradient(closest-side,#89a4c929,#89a4c90a 60%,transparent);pointer-events:none}
.folio-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 clamp(22px,3vw,40px);font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.folio-kicker span+span::before{content:'';display:inline-block;width:22px;height:1px;margin-right:16px;background:currentColor;vertical-align:middle;opacity:.6}
.folio h1{display:grid;justify-items:start;gap:clamp(10px,1.4vw,18px);margin:0;font-weight:400}
.folio-word{display:inline-flex;align-items:flex-start;font-family:var(--serif-en);font-style:italic;font-weight:400;font-size:clamp(52px,7.4vw,108px);line-height:.92;letter-spacing:-.015em;color:var(--ink)}
.folio-word .masthead-mark{width:.3em;height:.3em;margin:-.02em 0 0 .1em;color:var(--brand)}
.folio-ko{font-family:var(--serif-ko);font-size:clamp(19px,1.8vw,24px);line-height:1.3;letter-spacing:-.01em;color:var(--ink-2);padding-left:.15em}
.folio-lede{max-width:30ch;margin:clamp(22px,3vw,36px) 0 20px;padding-left:16px;border-left:1px solid var(--brand-soft);font-size:15px;line-height:1.9;color:var(--muted);word-break:keep-all}
.folio .motion-toggle{min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted);font-size:12px;font-weight:500}
.folio .motion-toggle:hover{background:none;color:var(--ink)}
.folio .motion-toggle[aria-pressed=true]{background:none;color:var(--brand-ink)}
.folio-figure{position:relative;margin:0;min-width:0}
.folio-photo{position:relative;aspect-ratio:4/5;max-height:680px;overflow:hidden;border-radius:50% 50% 22px 22px/36% 36% 22px 22px;background:linear-gradient(170deg,var(--mist),var(--mist-2));display:grid;place-items:center}
.folio-photo>video,.folio-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.folio-photo .folio-fallback{width:28%;height:auto;color:var(--brand)}
.folio-inset{position:absolute;left:-9%;bottom:16%;width:32%;aspect-ratio:1;overflow:hidden;border-radius:50%;border:6px solid var(--paper);background:var(--mist-2);box-shadow:0 22px 44px -26px #18243a66}
.folio-inset>video,.folio-inset>img{width:100%;height:100%;object-fit:cover}
.folio-figure figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.folio-figure.has-inset figcaption{padding-left:26%}
.folio-credit{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.folio-credit:hover{color:var(--brand-ink);text-decoration:underline;text-underline-offset:4px}
.folio-credit .icon{width:12px;height:12px}
.index-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0 0 20px}
.index-head h2{margin:0;font-family:var(--serif-ko);font-size:clamp(20px,1.9vw,24px);font-weight:400;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.index-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:12px;font-weight:500;color:var(--brand-ink);text-decoration:underline 1px transparent;text-underline-offset:5px;transition:color .2s,text-decoration-color .25s}
.index-link:hover{color:var(--ink);text-decoration-color:currentColor}
.index-link .icon{width:14px;height:14px;transition:transform .25s var(--ease)}.index-link:hover .icon{transform:translateX(3px)}
.index-empty{margin:0 0 12px;font-family:var(--serif-ko);font-size:17px;line-height:1.6;color:var(--ink-2)}
.folio-index{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);padding-top:clamp(28px,4vw,52px);border-top:1px solid var(--line)}
.next-date{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.next-date span{font-family:var(--serif-en);font-size:clamp(56px,6vw,84px);line-height:.9;letter-spacing:-.01em;color:var(--brand-ink)}
.next-date small{font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.next-entry h3{margin:20px 0 8px;padding-left:14px;border-left:2px solid var(--event,var(--brand));font-family:var(--serif-ko);font-size:19px;font-weight:700;line-height:1.5;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.next-entry p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;padding-left:16px;font-size:13px;line-height:1.75;color:var(--muted);white-space:pre-line}
.letters{margin:0;padding:0;list-style:none}
.letter{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:18px;padding:16px 2px;border-top:1px solid var(--line);cursor:pointer}
.letters li:last-child .letter{border-bottom:1px solid var(--line)}
.letter time{font-family:var(--serif-en);font-size:16px;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.letter h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-family:var(--serif-ko);font-size:17px;font-weight:400;line-height:1.6;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;transition:color .2s,transform .35s var(--ease)}
.letters li:first-child .letter h3{font-size:20px;line-height:1.5}
.letter:hover h3{color:var(--brand-ink);transform:translateX(6px)}
.letter:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:4px}
.index-letters .source-links a{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:12px;color:var(--brand-ink)}
.refrain{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(24px,5vw,72px);margin:clamp(64px,8vw,120px) 0 0}
.refrain::before{content:'';position:absolute;z-index:-1;right:0;top:-32px;bottom:-32px;width:56%;border-radius:28px;background:linear-gradient(160deg,var(--mist),#f7f1ec00 85%);pointer-events:none}
.refrain.no-art{grid-template-columns:minmax(0,1fr)}.refrain.no-art::before{width:100%}
.refrain-art{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:22px;background:var(--mist-2)}
.refrain-art>video,.refrain-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.refrain-art .folio-credit{position:absolute;right:10px;bottom:10px;min-height:32px;padding:0 10px;border-radius:8px;background:var(--chip);color:var(--chip-ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.refrain-text{padding:8px clamp(0px,2vw,24px) 8px 0}
.refrain h2{margin:14px 0 14px;font-family:var(--serif-ko);font-size:clamp(24px,2.6vw,34px);font-weight:400;line-height:1.5;letter-spacing:-.015em;color:var(--ink);word-break:keep-all}
.reel{margin-top:clamp(64px,8vw,120px)}
main .home-reel{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
main .home-reel>.card{margin-top:0}
main .home-reel>.card h3{min-height:3em}
.folio-colophon{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:clamp(64px,8vw,112px) 0 0;font-size:12px;color:var(--muted)}
.folio-colophon .colophon-mark{width:18px;height:18px;color:var(--brand)}
.folio-colophon a{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-weight:600;letter-spacing:.12em;color:var(--ink-2)}
.folio-colophon a:hover{color:var(--brand-ink);text-decoration:underline;text-underline-offset:4px}
.folio-colophon .icon{width:13px;height:13px}
@keyframes folio-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes cameo-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:no-preference){
 .folio-text>*{animation:layer-in .8s var(--ease) both}
 .folio-text>:nth-child(2){animation-delay:.08s}.folio-text>:nth-child(3){animation-delay:.16s}.folio-text>:nth-child(4){animation-delay:.24s}
 .folio-photo>video,.folio-photo>img{animation:folio-in 1.4s var(--ease) both}
 .folio-inset{animation:layer-in .9s var(--ease) .35s both,cameo-drift 9s ease-in-out 1.3s infinite}
}

/* motion toggle: same unit everywhere */
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:600;letter-spacing:0}
.motion-toggle:hover{background:var(--mist);border-color:var(--line-2)}
.motion-toggle[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.motion-toggle .icon{width:14px;height:14px}

/* ---------- section heads (gallery, admin) */
main .section-head{margin:40px 0 16px;gap:12px}
main .section-head h2{font-family:var(--serif-ko);font-size:22px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
main .section-head>a{min-height:44px;padding:0 4px;font-size:12px;font-weight:600;color:var(--brand-ink)}
main .section-head>a:hover{color:var(--ink)}
main .section-head>a .icon{width:15px;height:15px;transition:transform .25s var(--ease)}main .section-head>a:hover .icon{transform:translateX(3px)}

/* ---------- notices */
main .notice-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:none;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .25s var(--ease)}
main .notice-row+.notice-row{margin-top:10px}
main .notice-row:hover{transform:translateY(-2px);border-color:var(--line-2);background:var(--surface);box-shadow:var(--lift)}
main .notice-row:focus-visible{outline:3px solid var(--brand-ink);outline-offset:3px}
main .notice-row h3{margin:0 0 8px;font-family:var(--serif-ko);font-size:18px;line-height:1.6;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
main .notice-row small{font-size:11px;font-variant-numeric:tabular-nums}
.letter-number{display:block;font-family:var(--serif-en);font-style:normal;font-size:15px;font-weight:400;line-height:1;letter-spacing:0;color:var(--brand-ink);font-variant-numeric:tabular-nums}
main .notice-row>.notice-arrow{display:none}
main .notice-row .source-links{margin-top:14px;gap:6px}
main .notice-row .source-links a,.letter-head .source-links a{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink-2);font-size:11px;font-weight:600}
main .notice-row .source-links a:hover,.letter-head .source-links a:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink);text-decoration:none}
main[data-view=notices] [data-results]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
main[data-view=notices] .notice-row{min-height:220px;padding:26px;margin:0}
main[data-view=notices] .notice-row>div{display:flex;flex-direction:column;height:100%}
main[data-view=notices] .notice-row .letter-number{font-size:32px;margin-bottom:16px}
main[data-view=notices] .notice-row h3{font-size:19px;margin:0 0 10px;padding-right:28px}
main[data-view=notices] .notice-row .source-links{margin-top:auto;padding-top:18px}
main[data-view=notices] .notice-row>.notice-arrow{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--mist);color:var(--brand-ink);transition:background .2s,color .2s,transform .3s var(--ease)}
main[data-view=notices] .notice-row>.notice-arrow .icon{width:16px;height:16px}
main[data-view=notices] .notice-row:hover>.notice-arrow{background:var(--ink);color:var(--on-ink);transform:rotate(45deg)}
/* the newest letter leads the page: wider, on a pale wash rather than a dark slab */
main[data-view=notices] [data-results]>.notice-row:first-child{grid-column:span 2;background:linear-gradient(150deg,var(--mist),var(--surface) 72%);border-color:var(--mist-2)}
main[data-view=notices] [data-results]>.notice-row:first-child h3{font-size:24px;line-height:1.5}
main[data-view=notices] [data-results]>.notice-row:first-child .letter-number{font-size:44px}
main[data-view=notices] .pagination,main[data-view=notices] .empty{grid-column:1/-1}

/* ---------- clip cards */
main .cards{gap:32px 22px}
main .card{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
main .card-image-wrap{display:block;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;background:var(--mist-2);box-shadow:0 1px 2px #18243a0d;isolation:isolate}
main .card-image-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#121d3080);opacity:0;transition:opacity .3s}
main .card-image{display:block;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;transition:transform .6s var(--ease)}
main .card:hover .card-image{transform:scale(1.05)}
main .card:hover .card-image-wrap::after,main .card-image-wrap:focus-visible::after{opacity:1}
main .card .play{position:absolute;z-index:1;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--chip);color:var(--chip-ink);box-shadow:0 6px 16px -6px #121d3066;opacity:1;transform:none;transition:background .2s,color .2s,transform .3s var(--ease)}
main .card .play .icon{width:20px;height:20px;margin:0}
main .card:hover .play{background:var(--ink);color:var(--on-ink);transform:scale(1.06)}
main .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:14px 0 6px;font-size:15px;line-height:1.5;font-weight:700;letter-spacing:-.03em;transition:color .2s}
main .card:hover h3{color:var(--brand-ink)}
main .card small{font-size:11px;font-variant-numeric:tabular-nums}

/* ---------- songbook: one tracklist panel */
main .song-row{margin:0;padding:16px 22px;border:1px solid var(--line);border-top:0;border-radius:0;background:var(--surface);box-shadow:none;transform:none;transition:background .2s,box-shadow .2s}
main [data-results]>.song-row:first-child{border-top:1px solid var(--line);border-radius:var(--r-m) var(--r-m) 0 0}
main .song-row:not(:has(+ .song-row)){border-radius:0 0 var(--r-m) var(--r-m)}
main [data-results]>.song-row:first-child:not(:has(+ .song-row)){border-radius:var(--r-m)}
main .song-row:hover,main .song-row:focus-within{background:var(--wash);box-shadow:inset 3px 0 0 var(--brand);transform:none;border-color:var(--line)}
main .song-row .number{padding-top:2px;font-family:inherit;font-style:normal;font-size:12px;font-weight:700;line-height:1.6;color:#8b99ad;font-variant-numeric:tabular-nums}
main .song-row:hover .number{color:var(--brand-ink)}
main .song-row h3{margin:0 0 3px;font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
main .song-row small{font-size:12px}
main .song-row .controls{gap:8px}
main .date-picker summary{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);color:var(--ink-2);font-size:12px;font-weight:600}
main .date-picker summary:hover{border-color:var(--line-2);background:var(--surface)}
main .date-picker[open] summary{border-color:var(--brand-ink);background:var(--surface);box-shadow:0 0 0 3px #89a4c933}
main .date-menu{padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--lift-2)}
main .menu-heading{font-size:10px;font-weight:600;color:var(--muted)}
main .date-menu button{min-height:44px;border-radius:8px;font-size:12px;font-variant-numeric:tabular-nums}
main .date-menu button:hover,main .date-menu button:focus{background:var(--paper)}
main .date-menu button[aria-checked=true]{background:var(--mist);color:var(--ink);font-weight:700}
main .date-check{color:var(--brand-ink);font-weight:800}
main .song-row .controls>button{width:44px;min-width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink-2)}
main .song-row .controls>button:hover{border-color:var(--line-2);background:var(--mist)}
main .song-row .controls>button[data-selected-play],main .playlist-row .controls>button[data-play]{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
main .song-row .controls>button[data-selected-play]:hover,main .playlist-row .controls>button[data-play]:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:var(--on-ink)}
main .song-row .controls>button .icon-play{width:20px;height:20px;margin:0}
main .song-row .controls>.heart[aria-pressed=true]{border-color:var(--rose-soft);background:var(--rose-soft);color:var(--rose)}
main .drag-handle{min-width:32px;min-height:44px;border:0;border-radius:8px;background:transparent;color:#8b99ad;cursor:grab}
main .drag-handle:hover{background:var(--mist);color:var(--ink)}
main .playlist-row.dragging{background:var(--mist);box-shadow:var(--lift-2),inset 3px 0 0 var(--brand-ink);outline:0;z-index:5}
main .hint{position:relative;margin:18px 0 0;padding:0 0 0 16px;border:0;background:none;font-size:12px;color:var(--muted)}
main .hint::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
main .audio-options{margin-top:24px;padding:4px 0 0;border-top:1px solid var(--line)}
main .audio-options summary{display:flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--ink-2)}
main .audio-options .file-label{border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:600}

/* ---------- empty, pagination */
main .empty{padding:48px 24px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);text-align:center}
main .empty .symbol{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 6px;border-radius:50%;background:var(--mist);font-family:inherit;font-size:28px;line-height:1;color:var(--brand-ink)}
main .empty h3{font-family:var(--serif-ko);font-size:19px;font-weight:400;letter-spacing:-.01em}
main .pagination{gap:16px;margin:28px 0 0;padding:0}
main .pagination>span{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
main .pagination button,main [data-more-media]{min-height:44px;padding:0 20px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink)}
main .pagination button:hover,main [data-more-media]:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

/* ---------- calendar */
.diary-book{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--lift);overflow:hidden}
.diary-book .calendar-head{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:20px;margin:0;padding:22px 24px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink)}
.diary-book .month-title{display:flex;align-items:baseline;gap:10px;margin:0;min-width:0;font-size:inherit}
.diary-book .month-title em{font-family:var(--serif-en);font-style:normal;font-size:64px;line-height:.85;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.diary-book .month-title span{font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.month-stepper{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.month-stepper>button{width:44px;min-width:44px;height:40px;min-height:40px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--ink-2)}
.month-stepper>button:hover:not(:disabled){background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #18243a1f}
.month-stepper>button:disabled{opacity:.3}
.month-stepper .icon{width:18px;height:18px}
.calendar-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.calendar-tools>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;margin:0;padding:0 16px;line-height:1;font-family:var(--serif-ko);font-size:14px;font-weight:400;white-space:nowrap}
.calendar-tools>button .icon{display:block;flex:none;width:16px;height:16px;margin:0}
.calendar-tools [data-add]{border:1px solid var(--brand-soft);border-radius:var(--r-s);background:var(--mist-2);color:var(--ink-2)}
.calendar-tools [data-add]:hover{background:#cbd9ec;border-color:var(--brand)}
.calendar-tools .motion-toggle[aria-pressed=true]{background:var(--mist-2);border-color:var(--brand-soft);color:var(--ink-2)}
[data-add] .icon{width:16px;height:16px}
.diary-book .calendar{border:0;border-radius:0;background:var(--surface)}
.diary-book .day-label{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-align:left}
.diary-book .day-label.sunday{color:var(--sun)}.diary-book .day-label.saturday{color:var(--sat)}
.diary-book .diary-day{min-height:136px;padding:10px 12px;border:0;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);border-radius:0;background:var(--surface);transition:background .2s}
.diary-book .monthly-calendar>.diary-day:nth-child(7n){border-right:0}
.diary-book .diary-day:hover{background:var(--hover-cell);outline:0}
.diary-book .diary-day:focus-visible{outline:2px solid var(--brand-ink);outline-offset:-2px;z-index:1}
.diary-book .diary-day .day-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:transparent;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .2s}
.diary-book .diary-day:hover .day-number{background:var(--mist)}
.diary-book .diary-day.today{background:linear-gradient(180deg,var(--today-wash),var(--surface) 70%)}
.diary-book .diary-day.today .day-number,.diary-book .diary-day.today .day-number.sunday,.diary-book .diary-day.today .day-number.saturday{background:var(--ink);color:var(--on-ink)!important;box-shadow:0 0 0 3px var(--glow)}
.diary-book .diary-day.other{opacity:1;background:var(--paper)}
.diary-book .diary-day.other:hover{background:var(--paper)}
.diary-book .sunday{color:var(--sun)}.diary-book .saturday{color:var(--sat)}
.diary-book .diary-character{opacity:.38;transition:opacity .3s}
.diary-book .diary-day:hover .diary-character{opacity:.6}
.broadcast-badge{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--mist);color:var(--brand-ink);font-size:10px;font-weight:700;letter-spacing:.02em}
.broadcast-badge.off{background:var(--off-bg);color:var(--off-ink)}
.diary-book .diary-day .event{display:block;margin-top:4px;padding:3px 7px;border-left:3px solid currentColor;border-radius:4px 6px 6px 4px;background:var(--surface);background:color-mix(in srgb,currentColor 9%,var(--surface));font-size:11px;font-weight:600;line-height:1.4}
.diary-book .diary-day .event time{font-weight:800}
.holiday-name{font-size:11px;font-weight:600;color:var(--sun)}
.diary-note{padding:14px 24px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
#manage-editors{margin-top:20px;border:1px solid var(--line-2);background:var(--surface);font-weight:600}
#editor-list{margin-top:10px;border-radius:var(--r-m);background:var(--surface)}

/* mobile week view */
.week-navigation{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.week-navigation>button{width:44px;min-width:44px;min-height:40px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--ink-2)}
.week-navigation>button:hover:not(:disabled){background:var(--surface);box-shadow:0 1px 3px #18243a1f}
.week-navigation>span{flex:1;min-width:0;text-align:center;font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.week-navigation [data-diary-today]{width:auto;margin-left:2px;padding:0 12px;border-left:1px solid var(--line);border-radius:0 11px 11px 0;font-size:12px;font-weight:700;color:var(--brand-ink)}
.week-strip{gap:4px;margin:16px 0 20px}
.diary-book .week-strip>button{min-height:64px;padding:8px 0;gap:6px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--ink-2)}
.diary-book .week-strip>button:hover:not(:disabled):not([aria-pressed=true]){background:var(--mist)}
.week-strip small{font-size:11px;font-weight:600}
.week-strip b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.week-strip i.has-record{background:var(--brand-ink);width:5px;height:5px}
.diary-book .week-strip>button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink);box-shadow:0 8px 18px -10px #18243acc}
.diary-book .week-strip>button[aria-pressed=true] i.has-record{background:var(--brand-soft)}
.day-feature{padding-top:20px;border-top:1px solid var(--line)}
.day-feature-heading .eyebrow{font-size:10px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.day-feature-heading h2{margin:8px 0 16px;font-family:var(--serif-ko);font-size:22px;font-weight:400;letter-spacing:-.01em}
.day-feature-photo{border-radius:18px}
.day-feature-empty{border-radius:18px;background:var(--paper)}
.day-feature-event time{color:var(--brand-ink);font-weight:700;font-variant-numeric:tabular-nums}
.day-replay{min-height:56px}
.day-replay>.icon:first-child{background:var(--ink);color:var(--on-ink);fill:currentColor}
.day-replay:hover b{color:var(--brand-ink)}
.day-detail-button{min-height:48px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);font-weight:600}
.day-detail-button:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

/* ---------- dialogs */
dialog{border-radius:var(--r-l);box-shadow:0 40px 90px -30px #18243a80}
dialog::backdrop,#dialog::backdrop{background:#18243a66;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#dialog #close-dialog,.dialog-close{width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink)}
#dialog #close-dialog:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.diary-detail{padding:8px 4px}
.diary-detail h2{margin:10px 0 16px;font-family:var(--serif-en);font-style:normal;font-size:40px;font-weight:400;line-height:1.05;letter-spacing:0}
.diary-detail>video,.diary-detail>img{border-radius:18px}
.diary-detail [data-add]{margin-top:16px;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);font-weight:600}
.anniversary{background:linear-gradient(135deg,var(--mist-2),var(--anniv))}
.letter-head{background:linear-gradient(150deg,var(--mist),var(--surface) 70%);border-bottom:1px solid var(--line)}
.letter-head h2{font-family:var(--serif-ko);font-weight:400;letter-spacing:-.015em;word-break:keep-all}
.letter-body{background:var(--surface)}
.letter-footer{background:var(--paper);color:var(--brand-ink);font-family:var(--serif-en);font-size:18px}
#dialog.notice-dialog{border-radius:var(--r-l)}

/* ---------- settings */
.admin-entry{border-radius:var(--r-m);background:linear-gradient(150deg,var(--dusk-2),var(--dusk));transition:transform .25s var(--ease)}
.admin-entry:hover{transform:translateY(-2px)}
.account-panel,.connection-panel{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:none}
.account-intro h2,.connection-panel h2{font-family:var(--serif-ko);font-size:22px;font-weight:400;line-height:1.5;letter-spacing:-.01em}
.account-intro{background:linear-gradient(155deg,var(--brand),#b7c8e1);color:var(--ink)}
.account-intro .eyebrow{color:var(--dusk)}
.auth-tabs button{position:relative;min-height:48px;font-weight:600}
.auth-tabs button.active{border-bottom:3px solid var(--brand-ink);color:var(--ink);font-weight:700}
.service-icon{border-radius:12px;background:var(--mist);color:var(--brand-ink)}
.connection-row>a,.connection-row .button{border:1px solid var(--line-2);border-radius:var(--r-s);font-weight:600}
.connection-row>a:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.media-library{margin:40px 0 0;padding:0}
.media-library .section-head>span{font-size:12px;color:var(--muted)}
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery-photo{border-radius:var(--r-m);background:var(--mist-2)}
.gallery-photo video,.gallery-photo img{transition:transform .6s var(--ease)}
.gallery-photo:hover video,.gallery-photo:hover img{transform:scale(1.04)}
.hades-banner{position:relative;margin:40px 0;padding:38px 40px;border-radius:28px;background:linear-gradient(140deg,var(--dusk-2),var(--ink) 70%);overflow:hidden;transition:transform .3s var(--ease)}
.hades-banner::after{content:'';position:absolute;right:-80px;bottom:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#89a4c955,transparent 70%);pointer-events:none}
.hades-banner:hover{background:linear-gradient(140deg,var(--dusk-2),var(--ink) 70%);transform:translateY(-2px)}
.hades-banner .eyebrow{color:var(--brand-soft)}
.hades-banner h2{font-family:var(--serif-ko);font-weight:400;letter-spacing:-.01em}
.hades-banner>strong{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px;color:#fff}
.hades-banner>strong span{display:grid;place-items:center;width:52px;height:52px;margin:0;border-radius:50%;background:#ffffff1a;transition:background .2s,transform .3s var(--ease)}
.hades-banner>strong span .icon{width:22px;height:22px}
.hades-banner:hover>strong span{background:var(--brand);color:var(--ink);transform:rotate(-8deg)}
.settings-grid{gap:16px}
.setting{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.setting h2{font-family:var(--serif-ko);font-size:19px;font-weight:400;letter-spacing:-.01em}
.setting .actions>a,.setting .actions>button,.setting .file-label{border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);font-weight:600}
.setting .actions>a:hover,.setting .actions>button:hover,.setting .file-label:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

/* ---------- player & toast */
/* A dark band in both modes (--chrome), so it never turns into a white slab on the dark theme. */
#player{padding:16px;border:1px solid #ffffff14;border-radius:20px;background:var(--chrome);color:var(--on-chrome);box-shadow:0 30px 60px -24px #18243acc}
#player .player-head small{color:var(--chrome-accent);font-weight:700;letter-spacing:.2em}
#player .player-head strong{color:var(--on-chrome);font-size:14px}
#close-player{width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#ffffff14;color:var(--on-chrome)}
#close-player:hover{background:#ffffff2e}
#media iframe,#media audio{border-radius:12px}
#player .player-actions{gap:6px}
#player .player-actions button,#player .player-actions a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-s);background:#ffffff14;color:var(--on-chrome);font-size:12px;font-weight:600}
#player .player-actions button:hover,#player .player-actions a:hover{background:var(--brand);color:var(--on-brand)}
#player .player-actions .icon{width:15px;height:15px}
#player p{color:var(--chrome-muted)}
#player :focus-visible{outline-color:var(--chrome-accent)}
#player [hidden]{display:none!important}
#toast{border-radius:14px;background:var(--chrome);color:var(--on-chrome);font-size:13px;font-weight:500;box-shadow:0 18px 40px -16px #18243acc}

/* ---------- responsive */
@media(max-width:1000px){
 body>header{gap:16px}body>header nav{--nav-pad:10px}body>header .outline.external{display:none}
 .folio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 main[data-view=notices] [data-results]{grid-template-columns:repeat(2,minmax(0,1fr))}
 .diary-book .calendar-head{grid-template-columns:auto auto;gap:16px}
 .calendar-tools{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:900px){
 .folio-index{grid-template-columns:minmax(0,1fr);gap:44px}
 .refrain{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:700px){
 body>header{height:auto;min-height:0;flex-wrap:wrap;gap:0;padding:10px 16px 0}
 .brand{min-height:48px}.brand .mark{width:36px;height:36px;border-radius:11px}.brand .mark .butterfly{width:25px;height:25px}
 body>header nav{--nav-pad:6px;order:3;width:100%;margin:6px 0 0;gap:0;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
 body>header nav::-webkit-scrollbar{display:none}
 body>header nav a{flex:0 0 auto;min-height:44px;font-size:12px}
 main{padding:20px 16px 56px}
 body>footer{flex-direction:column;align-items:flex-start;gap:6px;padding:24px 16px}
 main .page-title{grid-template-columns:minmax(0,1fr);padding:8px 0 20px;margin-bottom:22px}
 main .page-title h1{font-size:clamp(26px,7.6vw,32px);margin-top:10px}
 main .page-title p{grid-column:1;justify-self:start;text-align:left;max-width:none;margin-top:10px;font-size:13px}
 main .toolbar input{max-width:none;min-height:50px;font-size:16px}
 main .tabs>a,main .tabs>button{flex:1 1 0;min-width:0;padding:0 8px;font-size:13px}
 .folio{grid-template-columns:minmax(0,1fr);gap:28px;padding:4px 0 48px}
 .folio::before{left:-30%;top:-40px;width:120%;height:60%}
 .folio-kicker{margin-bottom:18px;letter-spacing:.18em}
 .folio-word{font-size:clamp(46px,15vw,72px)}
 .folio-lede{margin:18px 0 6px;font-size:14px}
 .folio-figure{margin:0 4px}
 .folio-photo{max-height:72vh}
 .folio-inset{left:-4px;bottom:14%;width:30%;border-width:4px}
 .folio-figure.has-inset figcaption{padding-left:0}
 .next-date span{font-size:56px}
 .letter{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:14px 0}
 .letters li:first-child .letter h3{font-size:18px}
 .refrain{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:64px}
 .refrain::before{top:30%;bottom:-24px;width:100%;border-radius:22px}
 .refrain-text{padding:0 16px 8px}
 .reel{margin-top:64px}
 main .home-reel{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 main .home-reel>.card:first-child{grid-column:1/-1}
 main .home-reel>.card:nth-child(2),main .home-reel>.card:nth-child(3){margin-top:0}
 main .home-reel>.card:first-child h3{font-size:15px}
 .folio-colophon{margin-top:56px}
 main .section-head{margin:32px 0 14px}main .section-head h2{font-size:20px}
 main .notice-row{padding:18px}
 main[data-view=notices] [data-results]{grid-template-columns:minmax(0,1fr);gap:12px}
 main[data-view=notices] [data-results]>.notice-row:first-child{grid-column:auto}
 main[data-view=notices] .notice-row{min-height:0;padding:22px}
 main[data-view=notices] .notice-row .letter-number{font-size:26px;margin-bottom:12px}
 main[data-view=notices] [data-results]>.notice-row:first-child .letter-number{font-size:34px}
 main[data-view=notices] [data-results]>.notice-row:first-child h3{font-size:20px}
 main[data-view=notices] .notice-row>.notice-arrow{top:18px;right:18px}
 main .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 main .card-image-wrap{border-radius:12px}
 main .card h3{font-size:13px;margin-top:10px}
 main .card .play{width:36px;height:36px;right:8px;bottom:8px}
 main .song-row{padding:14px 14px}
 main .song-row h3{font-size:15px}
 main .song-row .controls{gap:6px}
 main .song-row .controls>button{width:44px;min-width:44px;height:44px}
 main .date-picker summary{padding:0 10px;gap:4px}
 .diary-book{border-radius:20px}
 .diary-book .calendar-head{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px}
 .diary-book .month-title em{font-size:48px}
 .diary-book .month-title span{font-size:13px}
 .calendar-tools{grid-column:1/-1;justify-content:flex-end}
 .calendar-tools [data-add]{flex:1 1 auto}
 .calendar-tools .motion-toggle{margin:0;padding:0 12px;font-size:14px}
 .mobile-diary{padding:16px}
 .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hades-banner{margin:32px 0;padding:26px 22px;border-radius:22px}
 .hades-banner>strong{align-self:flex-start}
 .hades-banner>strong span{width:44px;height:44px}
 #player{left:12px;right:12px;bottom:12px;width:auto;max-width:none}
}
@media(max-width:360px){
 body>header nav{--nav-pad:4px}body>header nav a{font-size:11px}
 main{padding-left:14px;padding-right:14px}
 .folio-kicker span+span::before{width:14px;margin-right:10px}
 .letter{grid-template-columns:minmax(0,1fr);gap:4px}
 main .home-reel{grid-template-columns:minmax(0,1fr)}
 main .song-row{padding:12px 10px}
 main .song-row .controls>button{width:40px;min-width:40px;height:44px}
 .diary-book .calendar-head{padding:14px}
 .diary-book .month-title em{font-size:40px}
 .month-stepper>button{width:40px;min-width:40px}
 .mobile-diary{padding:12px}
 .week-strip{gap:2px}
 .week-navigation>button{width:40px;min-width:40px}
 .week-navigation>span{font-size:12px}
 .week-navigation [data-diary-today]{padding:0 8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}