/* v4 — pure-black-warm night, pine green, header regroup, post meta strip,
   link-exchange form, local comments, and extra American-retro stickers. */

/* ---------- palette corrections ---------- */
:root, body[data-theme=light]{
  --green:#1f4a35;            /* deep pine, not the old mint-adjacent green */
  --tile-mint:#1f4a35;
  --pine:#1f4a35;
  --pine-soft:#2c5c44;
  --ink-warm:#1d1813;
}
body[data-theme=dark]{
  --paper:#0a0806;            /* near-black, a trace of brown */
  --paper-light:#14100c;
  --paper-deep:#1b1611;
  --ink:#ece0c8;
  --muted:#a99a80;
  --line:#c3b08c;
  --green:#2f6b4f;
  --tile-mint:#24523d;
  --pine:#2f6b4f;
  --navy:#3a5f96;
  --red:#d4553a;
  --yellow:#e0aa45;
  --heat-0:#171310;
  --heat-1:#22352a;
  --heat-2:#2f5340;
  --heat-3:#417c57;
  --heat-4:#7fbd8a;
  --grain:.07;
}
html[data-theme=dark] body{background:#0a0806}
body[data-theme=dark]:before{mix-blend-mode:screen;opacity:.055}

/* ---------- header: one flex row, grouped, never wraps ---------- */
.site-header{
  display:flex!important;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px;
  grid-template-columns:none!important;
}
.signature{flex:0 0 auto}
.main-nav{flex:0 1 auto;margin-left:2px;min-width:0;display:flex;gap:6px}
.deck{flex:0 1 auto;margin-left:2px;min-width:0}
.nav-about{flex:0 0 auto}
.header-actions{flex:0 0 auto;margin-left:auto;display:flex;gap:6px}
@media(max-width:1340px){
  .main-nav a{font-size:15px;padding:6px 10px}
  .deck{max-width:220px}
  .deck-artist{display:none}
}
@media(max-width:1180px){
  .deck{max-width:180px}
  .deck-time{display:none}
}
@media(max-width:1080px){
  .deck{display:none}
}
@media(max-width:980px){
  .main-nav{position:absolute}
}
/* deck as a little radio window: tighter, more deliberate */
.deck{
  border:2.5px solid var(--line);
  border-radius:10px;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--paper-deep) 92%,transparent), var(--paper-deep));
  box-shadow:3px 3px 0 var(--hard);
  padding:4px 6px 4px 5px;
  height:50px;
}
.deck-play{background:var(--paper-light);border:2px solid var(--line)}
.deck-play:hover{background:var(--yellow);color:#221d17}
.deck-play .i-external{display:none}
.deck[data-state=external] .deck-play .i-play{display:none}
.deck[data-state=external] .deck-play .i-external{display:block}
#musicExternalLink{display:block;font-weight:700;text-decoration:underline;text-underline-offset:4px;line-height:1.8}
#musicExternalNote{font-size:13px;line-height:1.7;color:var(--muted);margin:8px 0 0}
@media(max-width:1080px){
  .deck{display:flex;flex:none;width:44px;max-width:44px;padding:2px;justify-content:center}
  .deck-info,.deck-more{display:none!important}
  .deck-pop{position:fixed;top:104px;right:16px;width:min(280px,calc(100vw - 32px))}
}
@media(max-width:600px){
  .site-header{padding-inline:12px;gap:6px}
  .signature{gap:5px}
  .signature>span{font-size:36px}
  .signature-pine{width:16px;height:24px}
  .header-actions{gap:4px}
  .utility-btn{width:34px;height:38px}
  .deck{width:40px;max-width:40px}
  .deck-pop{top:88px}
}
@media(max-width:360px){
  .site-header{padding-inline:8px;gap:4px}
  .signature>span{font-size:30px}
  .header-actions{gap:3px}
  .utility-btn{width:30px}
  .deck{width:36px;max-width:36px}
}
.deck[data-state=playing] .deck-play{background:var(--red);color:#fbf4e3;border-color:var(--line)}
.deck-info{background:var(--paper-light);border:1.5px solid var(--line);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 30%,transparent)}
.deck-reels i{
  border-width:2px;
  border-color:var(--line);
  background:radial-gradient(circle, var(--paper-light) 0 26%, transparent 27%),
             repeating-conic-gradient(from 0deg, var(--line) 0 8deg, transparent 8deg 30deg);
}
.deck[data-state=playing] .deck-reels i{animation:spin-slow 3.2s linear infinite}
.deck-title{font-weight:700}
.deck-time{font-variant-numeric:tabular-nums}

/* ---------- notice: full retro window, floats, default open ---------- */
.notice-float{
  border-width:2.5px;
  border-radius:12px;
  box-shadow:8px 9px 0 var(--red), 0 24px 60px rgba(20,14,8,.22);
  max-height:min(70vh,560px);
  display:flex;
  flex-direction:column;
}
.notice-bar{
  background:var(--navy);
  border-bottom:2.5px solid var(--line);
  padding:10px 12px 10px 16px;
}
.notice-bar h2{letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.notice-pin{background:var(--yellow);border-color:var(--line)}
.notice-body{
  overflow:auto;
  border-radius:0 0 9px 9px;
  background:
    repeating-linear-gradient(var(--paper-light) 0 31px, color-mix(in srgb,var(--sky) 40%,transparent) 31px 32px);
  background-position:0 14px;
  background-attachment:local;
}
#noticeBody{font-size:17px;line-height:32px}
.notice-tab{box-shadow:3px 4px 0 var(--hard), 0 8px 24px rgba(20,14,8,.16)}
.notice-tab:hover{transform:translateY(-3px) rotate(-2deg)}

/* ---------- boot screen ---------- */
html.booting .boot{background:radial-gradient(circle at 50% 42%, var(--paper-light), var(--paper) 70%)}
html.booting[data-theme=dark] .boot{background:radial-gradient(circle at 50% 42%, #17120d, #070504 72%)}
.boot-name{font-size:clamp(96px,17vw,220px);letter-spacing:-.03em}
.boot-name span{clip-path:inset(-25% 100% -30% 0)}
.boot-motto{letter-spacing:.2em;font-size:clamp(15px,1.7vw,22px)}
.boot:after{
  content:'';
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:5px 5px;
  mix-blend-mode:overlay;
}
@media(prefers-reduced-motion:reduce){
  .boot:after{display:none}
}

/* ---------- post meta strip (Created / Updated / Views / Comments / Words / Tags) ---------- */
.page-meta{
  display:flex;flex-direction:column;gap:5px;
  margin:16px 0 26px;padding:14px 18px;
  border:1.5px solid var(--line);border-left:6px solid var(--red);
  border-radius:0 8px 8px 0;
  background:color-mix(in srgb,var(--paper-light) 92%,var(--paper-deep));
  font:400 14px/1.75 var(--font-label);font-style:normal;color:var(--muted);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--hard) 55%,transparent);
}
.page-meta b{color:var(--ink);font-weight:700}
.page-meta .sep{margin:0 8px;opacity:.45}
.page-meta .meta-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0}
.page-meta .tags{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.page-meta .tags a,.page-meta .tag{
  display:inline-block;padding:1px 9px;border:1.5px solid var(--line);border-radius:3px;
  background:var(--paper);color:var(--ink);font-weight:700;font-size:13px;
  text-decoration:none;letter-spacing:.02em;
}
.page-meta .tags a:hover{background:var(--yellow);color:#221d17;transform:translateY(-1px)}
.page-meta .meta-stat{font-variant-numeric:tabular-nums}

/* ---------- friends: apply form ---------- */
.apply-form{display:grid;gap:12px;margin:0 0 6px;padding:20px 22px;border:2.5px solid var(--line);border-radius:12px;background:var(--paper-light);box-shadow:6px 7px 0 var(--hard)}
.apply-form label{display:grid;gap:6px;font:700 14px/1.4 var(--font-label);letter-spacing:.03em}
.apply-form input{
  min-height:44px;padding:9px 12px;border:1.6px solid var(--line);border-radius:6px;
  background:var(--paper);font:16px/1.4 var(--font-label);color:var(--ink);
}
.apply-form input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.apply-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.apply-actions button,.apply-mail{
  min-height:44px;padding:9px 18px;border:2px solid var(--line);border-radius:6px;
  background:var(--yellow);color:#221d17;font:700 15px/1.2 var(--font-label);
  box-shadow:2px 3px 0 var(--hard);text-decoration:none;display:inline-flex;align-items:center;
}
.apply-actions button:hover,.apply-mail:hover{transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--hard)}
.apply-output{margin-top:16px}
.apply-output .apply-note{font:600 14px/1.6 var(--font-label);color:var(--red);min-height:1em}
.apply-preview{
  margin:8px 0 12px;padding:14px 16px;border:1.5px dashed var(--line);border-radius:6px;
  background:var(--paper);font:13.5px/1.9 Consolas,'SF Mono',monospace;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);
}
.apply-rules-title{font:400 26px/1.3 var(--font-display);margin:0 0 10px}
.fr-section>h2{scroll-margin-top:120px}

/* local comments */
.local-comments{display:grid;gap:18px}
.local-banner{
  display:grid;gap:2px;padding:12px 16px;border:1.5px dashed var(--line);
  border-radius:8px;background:color-mix(in srgb,var(--yellow) 20%,var(--paper-light));
  font:14px/1.7 var(--font-reading);color:var(--muted);
}
.local-banner strong{color:var(--ink);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-label)}
.local-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.local-list li{padding:14px 16px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);box-shadow:2px 2px 0 color-mix(in srgb,var(--hard) 40%,transparent)}
.local-list .local-empty{border-style:dashed;box-shadow:none;color:var(--muted);font:16px/1.7 var(--font-reading);background:transparent}
.local-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.local-head strong{font:700 15px/1.4 var(--font-label)}
.local-head time{font:12px/1.4 Consolas,monospace;color:var(--muted);margin-left:auto}
.local-list p{font:17px/1.75 var(--font-reading);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.local-form{display:grid;gap:10px;padding:18px 20px;border:2px solid var(--line);border-radius:10px;background:var(--paper-light);box-shadow:4px 5px 0 var(--hard)}
.local-form label{display:grid;gap:6px;font:700 14px/1.4 var(--font-label)}
.local-form input,.local-form textarea{
  padding:9px 12px;border:1.6px solid var(--line);border-radius:6px;background:var(--paper);
  font:16px/1.6 var(--font-reading);color:var(--ink);resize:vertical;
}
.local-form textarea{min-height:96px}
.local-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.local-actions button{
  min-height:44px;padding:9px 20px;border:2px solid var(--line);border-radius:6px;
  background:var(--navy);color:#fbf4e3;font:700 15px var(--font-label);box-shadow:2px 3px 0 var(--hard);
}
.local-actions button:hover{transform:translate(-1px,-2px)}
.local-status{font:14px var(--font-label);color:var(--muted)}

/* ---------- timeline & constellation polish ---------- */
.timeline-strip{
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb,var(--yellow) 16%,transparent), transparent 42%),
    var(--paper-light);
}
.tl-star path{transition:transform .25s cubic-bezier(.3,1.6,.5,1),filter .25s}
.tl-star:hover path,.tl-star:focus-visible path{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--yellow) 70%,transparent))}
.heatmap{background:radial-gradient(circle at 78% 12%, color-mix(in srgb,var(--green) 10%,transparent), transparent 46%), var(--paper-light)}
.hm-cell{transition:transform .3s cubic-bezier(.3,1.6,.5,1), outline .15s}
.hm-grid:hover .hm-cell{opacity:.85}
.hm-grid:hover .hm-cell:hover{opacity:1}
.chron-head h2{letter-spacing:.03em}

/* ---------- extra retro stickers ---------- */
.hero-copy{position:relative}
.st-portrait-tape{
  position:absolute;top:-18px;left:-14px;width:104px;height:30px;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--yellow) 78%,transparent) 0 8px,
    color-mix(in srgb,var(--yellow) 58%,transparent) 8px 16px);
  transform:rotate(-6deg);opacity:.75;z-index:0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.home-screen{position:relative}
.home-screen:before{
  content:'';position:absolute;right:2%;top:8%;width:180px;height:180px;
  background-image:radial-gradient(var(--line) 1.2px, transparent 1.3px);
  background-size:11px 11px;opacity:.16;pointer-events:none;z-index:0;
  mask-image:radial-gradient(circle,#000 30%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%);
}
html[data-theme=dark] .home-screen:before{opacity:.22}
.portal{isolation:isolate}
.portal:after{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px);
  background-size:9px 9px;transition:opacity .3s;
}
.portal:hover:after{opacity:.16}
.section-heading:before{
  content:'';position:absolute;left:-6px;top:-14px;width:78px;height:22px;
  background:color-mix(in srgb,var(--red) 26%,transparent);
  transform:rotate(-5deg);pointer-events:none;
}
.site-footer{
  background:
    repeating-linear-gradient(90deg, var(--red) 0 46px, var(--yellow) 46px 92px, var(--green) 92px 138px, var(--navy) 138px 184px) top/100% 6px no-repeat,
    var(--paper-light);
  padding-top:26px;
}

/* hero identity block breathes a little more */
.hero-lead{white-space:pre-line;margin-top:6px}
.hero-lead::first-line{font-weight:500}
.hero-credentials{
  background:var(--paper-light);
  border:1.6px solid var(--line);
  box-shadow:2px 2px 0 var(--hard);
}

/* section pages get a paper edge */
.section-screen{padding-bottom:110px}
.section-header{border-bottom:2px dashed var(--line);padding-bottom:22px}

/* mobile tidy for new components */
@media(max-width:760px){
  .apply-form{padding:16px}
  .page-meta{padding:12px 14px;font-size:13px}
  .deck{height:46px}
  .home-screen:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .deck[data-state=playing] .deck-reels i{animation:none}
  .portal:after{transition:none}
}


/* ---------- section heading: sticker must not sit on the words ---------- */
.section-heading{display:block;min-width:0}
.section-sticker{
  position:relative;
  left:auto;top:auto;right:auto;
  float:right;
  margin:-6px 0 8px 18px;
  width:84px;height:66px;
}
@media(max-width:900px){
  .section-sticker{width:60px;height:48px;margin-left:10px}
}
.fr-section>h2{gap:10px}
.fr-section>h2 .sticker{flex:none;width:36px;height:30px;margin-right:2px;transform:none}
.apply-rules-title{display:flex;align-items:center;gap:10px}

/* ---------- empty timeline collapses instead of leaving a big void ---------- */
.timeline-strip.is-empty{padding:18px;min-height:0}
.timeline-strip.is-empty .timeline-svg{display:none}
.timeline-strip.is-empty .tl-caption{margin:0;padding:2px 2px 4px}
.timeline-strip{padding:16px 18px 6px}

/* ---------- notice: floating window that dodges the four portals ---------- */
.notice-float{
  position:fixed;
  top:var(--notice-top,112px);
  bottom:auto;
  right:22px;
  width:min(330px,calc(100vw - 32px));
  max-height:min(58vh,460px);
  animation:pin-rise .55s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes pin-rise{0%{opacity:0;transform:translateY(-16px) rotate(2deg) scale(.96)}100%{opacity:1;transform:none}}
@media(max-width:600px){
  .notice-float{left:12px;right:12px;width:auto;max-height:56vh}
}
.notice-tab{bottom:22px;right:22px}

/* ---------- mobile: reading order, and the notice must never hide the title ---------- */
@media(max-width:600px){
  /* document order, not a shuffled one: hero → portals → canvas → chronicle */
  .home-screen{display:block!important}
  .hero-layout{display:block!important}
  .homepage-nav{order:initial;margin-top:22px}
  .field-wrap{order:initial;margin:26px auto 0}
  .chronicle{order:initial;margin-top:40px}
  .hero-copy{order:initial}

  /* park the notice at the bottom as a sheet, out of the way of everything */
  .notice-float{
    top:auto!important;bottom:12px;left:12px;right:12px;width:auto;
    max-height:46vh;
  }
  .notice-tab{right:14px;bottom:14px}
  .portal-sticker{bottom:8px;right:8px}
}
@media(max-width:600px){
  .section-sticker{display:none}
}

/* ---------- portal label must never sit under the sticker ---------- */
.portal{justify-content:flex-start}
.portal strong{width:100%;padding-right:64px;box-sizing:border-box;overflow-wrap:anywhere;font-size:clamp(25px,2.25vw,40px);line-height:1.2}
.portal-friends strong{padding-right:66px;font-size:clamp(19px,1.62vw,27px);letter-spacing:0;line-height:1.25}
@media(max-width:1180px){
  .portal strong{padding-right:58px}
  .portal-friends strong{padding-right:60px;font-size:clamp(17px,1.5vw,22px)}
}
@media(max-width:760px){
  .portal strong{padding-right:0}
  .portal-sticker{width:42px;height:34px;right:8px;bottom:8px}
  .portal-friends strong{font-size:clamp(19px,4.6vw,27px)}
}

/* ---------- heatmap: label row must have real width, cells must be visible ---------- */
.hm-months{height:18px;margin-bottom:2px}
.hm-months span{white-space:nowrap;font-size:11px;letter-spacing:.02em}
.hm-grid{width:max-content}
.heatmap .hm-cell{transform:none}
@keyframes hm-pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.heatmap .hm-grid.in .hm-cell{animation:hm-pop .34s cubic-bezier(.3,1.6,.5,1) backwards}

/* ---------- heatmap must scroll inside its own frame, never widen the page ---------- */
.heatmap{overflow-x:auto;overflow-y:hidden;max-width:100%;contain:paint}
.heatmap>*{max-width:none}
.hm-months,.hm-grid{width:max-content}
.hm-foot{flex-wrap:wrap}
@media(max-width:600px){
  .heatmap{padding:14px 12px 10px}
  .hm-grid{grid-template-rows:repeat(7,11px);grid-auto-columns:11px;gap:2.5px}
  .hm-cell{width:11px;height:11px;border-radius:2.5px}
  .hm-months{width:max-content}
}

/* keep decorative stickers inside the viewport on small screens */
@media(max-width:600px){
  .st-field-sun{left:4px!important;top:-22px}
  .st-field-stamp{right:2px!important}
  .st-hero-badge{right:6px!important}
  .hero-copy{overflow:visible}
}

/* ---------- hero lead: the first line must fit on one line ---------- */
.hero-lead{
  font-size:clamp(16px,1.16vw,20px);
  line-height:1.85;
  text-wrap:pretty;
}
.hero-lead::first-line{font-size:1.04em}
/* the copy column is narrow on laptops; give the lead its own measure */
.hero-copy{min-width:0}
@media(max-width:1280px){
  .hero-lead{font-size:17px;line-height:1.8}
}
@media(max-width:1100px){
  .hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-lead{font-size:16.5px}
}
@media(max-width:960px){
  .hero-lead{font-size:19px;line-height:1.85}
}
@media(max-width:600px){
  .hero-lead{font-size:17px;line-height:1.85}
}

/* ---------- About ---------- */
.site-header{grid-template-columns:auto auto auto auto 1fr auto}
.nav-about{
  grid-column:4;
  justify-self:start;
  display:inline-flex;align-items:center;
  min-height:42px;padding:6px 13px;
  border:2px solid var(--line);border-radius:6px;
  background:var(--paper);color:var(--ink);
  box-shadow:2px 3px 0 var(--hard);
  font:700 16px/1.2 var(--font-label);letter-spacing:.04em;
  transition:transform .2s,background .2s;
}
.nav-about:before{content:'✦';margin-right:7px;font-size:12px;color:var(--red)}
.nav-about:hover{background:var(--yellow);color:#221d17;transform:translateY(-2px)}
.nav-about.active{background:var(--green);color:#fbf4e3;border-color:var(--line)}
body[data-theme=dark] .nav-about.active{background:var(--green);color:#f3e6c9}
.header-actions{grid-column:6}
@media(max-width:1180px){
  .nav-about{display:none}
}
@media(max-width:980px){
  .nav-about{display:inline-flex;min-height:36px;font-size:14px;padding:4px 9px}
}
@media(max-width:760px){
  .nav-about{display:none}
}
@media(max-width:600px){
  .nav-about{display:none}
}

.about-screen{
  max-width:1240px;margin:0 auto;
  padding:34px clamp(20px,4.6vw,74px) 96px;
  position:relative;z-index:2;
}
.about-shell{
  display:grid;
  grid-template-columns:minmax(180px,255px) minmax(0,1fr);
  gap:clamp(26px,4vw,68px);
  margin-top:34px;
  align-items:start;
}
.about-side{position:sticky;top:112px}
.about-sticker{
  width:78px;height:78px;margin-bottom:14px;
  animation:spin-slow 26s linear infinite;
}
.about-seal{
  display:inline-block;padding:3px 10px;margin-bottom:12px;
  border:1.6px solid var(--line);border-radius:3px;
  background:var(--red);color:#fbf4e3;
  font:700 11px/1.5 var(--font-label);letter-spacing:.22em;
  transform:rotate(-2deg);
}
.about-side h1{
  font:400 clamp(40px,4.4vw,66px)/1.06 var(--font-display);
  letter-spacing:-.02em;
  text-shadow:3px 3px 0 var(--paper-deep);
  margin-bottom:12px;
}
.lang-en .about-side h1{font-family:Fraunces,serif;font-weight:700;letter-spacing:-.04em}
.about-lede{font:15px/1.75 var(--font-reading);color:var(--muted);max-width:22ch}
.about-jump{display:flex;flex-direction:column;gap:2px;margin-top:22px;padding-top:16px;border-top:2px dashed var(--line)}
.about-jump a{
  font:14px/1.5 var(--font-label);color:var(--muted);
  padding:6px 9px;border-radius:4px;border-left:2px solid transparent;
  transition:background .18s,color .18s,border-color .18s;
}
.about-jump a:hover{background:var(--yellow);color:#221d17;border-left-color:var(--red)}

.about-body{
  border:2px solid var(--line);border-radius:12px;
  background:var(--paper-light);
  box-shadow:7px 8px 0 var(--hard);
  padding:clamp(24px,3.4vw,48px) clamp(22px,3.4vw,52px);
  max-width:44em;
  position:relative;
}
.about-body:before{
  content:'';position:absolute;left:0;right:0;top:0;height:7px;
  border-radius:10px 10px 0 0;
  background:repeating-linear-gradient(90deg,var(--red) 0 34px,var(--yellow) 34px 68px,var(--green) 68px 102px,var(--navy) 102px 136px);
}
.about-body p{
  font:19px/2.05 var(--font-reading);
  color:var(--ink);
  margin:0 0 1.35em;
  text-wrap:pretty;
}
.about-body p:first-of-type{
  font-size:23px;
  line-height:1.8;
  color:var(--ink);
  border-left:4px solid var(--red);
  padding-left:18px;
  margin-bottom:1.6em;
}
.about-body h2{
  font:400 clamp(24px,2.4vw,32px)/1.4 var(--font-display);
  margin:2em 0 .7em;
  padding-bottom:8px;
  border-bottom:2px dashed var(--line);
  scroll-margin-top:120px;
}
.lang-en .about-body h2{font-family:Fraunces,serif;font-weight:700}
.about-body h2:first-child{margin-top:0}
.about-body > p:last-child{margin-bottom:0}
@media(max-width:900px){
  .about-shell{grid-template-columns:1fr;gap:26px}
  .about-side{position:static;display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:center}
  .about-sticker{width:56px;height:56px;grid-row:1/3;margin:0}
  .about-seal{grid-column:2;justify-self:start;margin-bottom:6px}
  .about-side h1{grid-column:2;margin:0}
  .about-lede{grid-column:1/-1;margin-top:12px;max-width:none}
  .about-jump{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:6px}
}
@media(max-width:600px){
  .about-screen{padding:22px 16px 76px}
  .about-body{padding:24px 20px;box-shadow:4px 5px 0 var(--hard)}
  .about-body p{font-size:17px;line-height:1.95}
  .about-body p:first-of-type{font-size:19px}
  .about-body:before{background-size:auto}
}

/* ---------- Signal Runner game ---------- */
.runner-host{padding:0}
.binary-game.runner{
  display:block;max-width:760px;margin:20px auto 26px;padding:0 22px 28px;
  border:0;background:transparent;
}
.runner-hud{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font:700 14px/1.5 var(--font-label);letter-spacing:.06em;
  padding:10px 14px;margin-bottom:10px;
  border:2px solid var(--line);border-radius:8px 8px 0 0;
  background:var(--paper-deep);color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.runner-score:before{content:'▸ ';color:var(--red)}
.runner-best{color:var(--muted)}
.runner-stage{
  border:2.5px solid var(--line);border-top:0;border-radius:0 0 8px 8px;
  overflow:hidden;background:var(--paper-light);
  box-shadow:6px 7px 0 var(--hard);
  line-height:0;
}
.runner-canvas{display:block;width:100%;touch-action:manipulation;cursor:pointer}
.runner-hint{
  font:15px/1.75 var(--font-reading);color:var(--muted);
  margin:14px 2px 0;text-align:center;
}
.runner-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.runner-actions button{
  min-height:46px;padding:10px 22px;border:2px solid var(--line);border-radius:6px;
  background:var(--yellow);color:#221d17;font:700 16px/1.2 var(--font-label);
  box-shadow:3px 4px 0 var(--hard);transition:transform .16s,box-shadow .16s;
}
.runner-actions button:hover{transform:translate(-1px,-2px);box-shadow:5px 7px 0 var(--hard)}
.runner-actions button:active{transform:translateY(1px);box-shadow:1px 2px 0 var(--hard)}
.runner-status{
  min-height:24px;text-align:center;
  font:600 15px/1.6 var(--font-label);color:var(--ink);margin-top:10px;
}
@media(max-width:600px){
  .binary-game.runner{margin:14px auto 20px;padding:0 14px 22px}
  .runner-hud{font-size:12.5px;padding:8px 10px}
  .runner-hint{font-size:14px}
  .runner-actions button{min-height:44px;padding:9px 16px;font-size:15px}
}

/* ---------- sticker placement for the new retro set ---------- */
.st-hero-burst{
  position:absolute;width:78px;height:78px;
  right:-8px;bottom:118px;
  transform:rotate(11deg);
  animation:wobble 7s ease-in-out infinite;
  --r:11deg;
}
.st-hero-arrows{
  position:absolute;width:64px;height:64px;
  left:6px;bottom:60px;
  transform:rotate(-8deg) scaleX(-1);
  opacity:.5;
}
.st-field-coffee{
  position:absolute;width:60px;height:69px;
  left:-30px;bottom:-12px;
  transform:rotate(-9deg);
  animation:wobble 6s ease-in-out infinite;
  --r:-9deg;
}
.chronicle-wrap{position:relative;margin-top:56px}
.chronicle{margin-top:0}
.st-chronicle-sign{
  position:absolute;width:104px;height:56px;
  right:6px;top:-26px;
  transform:rotate(4deg);
  z-index:3;
  pointer-events:none;
}
@media(max-width:1100px){
  .st-hero-arrows{display:none}
}
@media(max-width:960px){
  .st-hero-burst{width:64px;height:64px;right:2%;top:-8px}
  .st-field-coffee{width:46px;height:53px;left:-14px;bottom:-8px}
  .st-chronicle-sign{width:82px;height:45px;right:0;top:-30px}
}
@media(max-width:600px){
  .st-hero-burst{width:52px;height:52px;right:0;top:-6px}
  .st-field-coffee{display:none}
  .st-chronicle-sign{display:none}
}
/* section pages: a sticker beside the seal */
.section-heading .sticker{position:relative}

/* ---------- header transport: seek bar visible without opening the popover ---------- */
.deck{
  display:grid!important;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"play info seek more";
  align-items:center;
  gap:8px;
  height:58px;
  max-width:520px;
  padding:5px 8px;
}
.deck-play{grid-area:play}
.deck-info{grid-area:info;min-width:0;max-width:170px}
.deck-more{grid-area:more}
.deck-bar{
  grid-area:seek;
  display:flex;align-items:center;gap:7px;
  min-width:110px;padding:0 2px;
}
.deck-seek{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;min-width:70px;
  border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,var(--red) 0 var(--fill,0%),color-mix(in srgb,var(--line) 28%,transparent) var(--fill,0%) 100%);
  border:1.5px solid var(--line);
  transition:height .15s;
}
.deck-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--yellow);border:2px solid var(--line);
  box-shadow:1px 1px 0 var(--hard);cursor:grab;
}
.deck-seek::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:var(--yellow);border:2px solid var(--line);cursor:grab;
}
.deck-seek:hover{height:8px}
.deck-seek:disabled{cursor:default;opacity:.55;background:color-mix(in srgb,var(--line) 20%,transparent)}
.deck-seek:disabled::-webkit-slider-thumb{background:var(--muted);cursor:default}
.deck-elapsed{
  font:600 11px/1 Consolas,monospace;
  color:var(--muted);font-variant-numeric:tabular-nums;
  flex:none;min-width:30px;text-align:right;
}
@media(max-width:1340px){
  .deck{max-width:420px;height:54px}
  .deck-info{max-width:120px}
}
@media(max-width:1180px){
  .deck{max-width:330px}
  .deck-artist{display:none}
}
@media(max-width:1080px){
  .deck{max-width:none;width:auto;height:50px;grid-template-columns:auto auto minmax(70px,1fr);grid-template-areas:"play seek more"}
  .deck-info{display:none}
}
@media(max-width:600px){
  .deck{height:46px;gap:5px;padding:3px 5px}
  .deck-elapsed{display:none}
  .deck-seek{min-width:44px}
}

/* netease embed inside the popover */
.netease-frame{border:0;border-radius:6px;margin-bottom:10px;background:var(--paper)}
.external-link{display:inline-block;margin-top:4px}
#musicExternalPanel p{font:13px/1.6 var(--font-label);color:var(--muted);margin:6px 0 8px}

/* avatar: make the saved photo read as a photo, not a placeholder */
.avatar-button img{border-radius:50%;object-fit:cover}

/* ---------- runner HUD gains a stage label ---------- */
.runner-hud{justify-content:space-between}
.runner-stage-label{
  font:600 12.5px/1.5 var(--font-label);
  color:var(--muted);letter-spacing:.04em;
  text-align:center;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.runner-stage-label:before{content:'◆ ';color:var(--green)}
.runner-canvas{outline:none}
.runner-canvas:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
@media(max-width:600px){
  .runner-stage-label{display:none}
}

/* ---------- new iconic stickers ---------- */
.st-hero-eye{
  position:absolute;width:70px;height:45px;
  right:8px;top:34px;transform:rotate(-6deg);
  opacity:.9;
}
.st-field-cassette{
  position:absolute;width:76px;height:50px;
  left:-38px;top:38%;transform:rotate(-7deg);
}
.sticker-strip{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(10px,2vw,26px);
  margin:20px 0 4px;
  padding:8px 4px;
  flex-wrap:wrap;
  opacity:.95;
}
.sticker-strip .sticker{
  height:56px;width:auto;
  animation:wobble 8s ease-in-out infinite;
}
.sticker-strip .sticker:nth-child(2){height:40px;--r:4deg;animation-delay:-1.4s;transform:rotate(4deg)}
.sticker-strip .sticker:nth-child(3){height:58px;--r:-5deg;animation-delay:-2.8s;transform:rotate(-5deg)}
.sticker-strip .sticker:nth-child(4){height:52px;--r:6deg;animation-delay:-3.6s;transform:rotate(6deg)}
.sticker-strip .sticker:nth-child(5){height:38px;--r:-3deg;animation-delay:-4.4s;transform:rotate(-3deg)}
@media(max-width:960px){
  .st-hero-eye{display:none}
  .st-field-cassette{width:58px;height:38px;left:-20px}
}
@media(max-width:600px){
  .st-field-cassette{display:none}
  .sticker-strip{gap:8px;margin:14px 0 0}
  .sticker-strip .sticker{height:44px}
  .sticker-strip .sticker:nth-child(2){height:32px}
  .sticker-strip .sticker:nth-child(3){height:46px}
  .sticker-strip .sticker:nth-child(4){height:40px}
  .sticker-strip .sticker:nth-child(5){height:30px}
}
@media(prefers-reduced-motion:reduce){
  .sticker-strip .sticker{animation:none}
}