/* Relaxing Calm Music — East Asian layer
   Shared by every page: tap-to-play video cards, playable instruments,
   the two-gardens gate, ink-wash art and marked artwork placeholders.
   Colours come from each page's own variables (--ice, --edge, --glass…). */

/* ---------- breadcrumb: where an instrument sits ---------- */
.ea-crumb{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:14px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.ea-crumb a{color:var(--ice);border-bottom:1px solid color-mix(in srgb,var(--ice) 35%,transparent)}
.ea-crumb a:hover{border-bottom-color:var(--ice)}
.ea-crumb .sep{opacity:.5}

/* ---------- video cards (nothing loads from YouTube until play) ---------- */
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.ytcard{border-radius:var(--r,18px);overflow:hidden;border:1px solid var(--edge);background:var(--glass);display:flex;flex-direction:column}
.yt-frame{position:relative;aspect-ratio:16/9;background:radial-gradient(70% 80% at 50% 40%,color-mix(in srgb,var(--ice) 16%,transparent),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.5)),#020304}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--text);font:inherit}
.yt-k{position:absolute;font-family:var(--wserif,var(--serif));font-size:clamp(3.4rem,9vw,5.6rem);line-height:1;color:var(--ice);opacity:.16;pointer-events:none}
.yt-i{position:relative;width:66px;height:66px;border-radius:50%;border:1px solid var(--edge-hi);background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .35s var(--ease,ease),border-color .35s}
.yt-i::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ice)}
.yt-play:hover .yt-i,.yt-play:focus-visible .yt-i{transform:scale(1.08);border-color:var(--ice)}
.yt-play:focus-visible{outline:2px solid var(--ice);outline-offset:-4px}
.ytcard.on .yt-play{display:none}
.yt-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px 14px;font-size:.84rem}
.yt-t{font-family:var(--wserif,var(--serif));color:var(--text);font-size:.98rem}
.yt-d{color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.yt-d a{color:var(--ice)}
.yt-note{margin-top:12px;font-size:.76rem;color:var(--text-3)}

/* ---------- playable instruments ---------- */
.inst{--a:var(--ice,#B8D0C4);--a2:var(--ice-2,#7FA894);margin-top:18px}
.inst-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.inst-tabs button,.inst-bar button{font:inherit;font-size:.8rem;color:var(--text-2);background:var(--glass);border:1px solid var(--edge);border-radius:999px;padding:9px 15px;min-height:40px;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.inst-tabs button:hover,.inst-bar button:hover{border-color:var(--edge-hi);color:var(--text)}
.inst-tabs button[aria-pressed="true"],.inst-bar button[aria-pressed="true"]{border-color:var(--a);color:var(--text);background:color-mix(in srgb,var(--a) 14%,transparent)}
.inst-tabs button:focus-visible,.inst-bar button:focus-visible,.inst-board button:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.inst-tabs .grp{width:100%;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
.inst-board{position:relative;display:flex;height:clamp(200px,30vw,270px);border-radius:14px;border:1px solid var(--edge);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.28)),repeating-linear-gradient(92deg,rgba(255,255,255,.012) 0 3px,transparent 3px 9px),color-mix(in srgb,var(--a) 5%,#07080a)}
.inst-board button{font:inherit;-webkit-tap-highlight-color:transparent}
/* zithers: strings run top to bottom, swipe across them */
.inst-str{flex:1;min-width:0;position:relative;border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:0}
.inst-str::before{content:"";position:absolute;top:7%;bottom:17%;left:50%;width:1.4px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a) 80%,#fff) 12%,var(--a) 88%,transparent);opacity:.55;transition:opacity .3s,box-shadow .3s}
.inst-str::after{content:"";position:absolute;left:50%;top:var(--bh,50%);width:12px;height:8px;transform:translateX(-50%);border:1.2px solid var(--a2);border-bottom:0;border-radius:6px 6px 0 0;opacity:.55}
.inst-str .lb{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:.72rem;line-height:1.1;font-variant-numeric:tabular-nums;pointer-events:none}
.inst-str .lb i{display:block;font-style:normal;font-size:.6rem;opacity:.7;letter-spacing:.04em}
.inst-str.hit::before{opacity:1;width:2.2px;box-shadow:0 0 14px var(--a);animation:ea-vib .42s linear}
.inst-str.hit .lb{color:var(--text)}
@keyframes ea-vib{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% + 1.6px))}40%{transform:translateX(calc(-50% - 1.4px))}60%{transform:translateX(calc(-50% + 1px))}80%{transform:translateX(calc(-50% - .6px))}}
.inst-board.many .inst-str .lb i{display:none}
@media (max-width:560px){.inst-board.many .inst-str .lb{font-size:.6rem}.inst-board.many .inst-str:not(.oct) .lb{opacity:0}}
/* winds, bow and frets: a row of pads */
.inst-board.pads{gap:clamp(4px,1vw,8px);padding:clamp(10px,2vw,16px);height:auto;min-height:170px;align-items:stretch}
.inst-pad{flex:1;min-width:0;position:relative;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.025);color:var(--text-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 0;transition:background .2s,border-color .2s,color .2s}
.inst-pad .hole{width:min(34px,78%);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--a);transition:background .2s,box-shadow .2s}
.inst-pad .lb{font-size:.78rem;line-height:1.15;text-align:center;font-variant-numeric:tabular-nums}
.inst-pad .lb i{display:block;font-style:normal;font-size:.6rem;opacity:.65}
.inst-pad.hit{border-color:var(--a);color:var(--text);background:color-mix(in srgb,var(--a) 13%,transparent)}
.inst-pad.hit .hole{background:var(--a);box-shadow:0 0 16px var(--a)}
.inst-board.bow .inst-pad .hole{width:3px;height:56%;aspect-ratio:auto;border-radius:2px;border:0;background:color-mix(in srgb,var(--a) 45%,transparent)}
.inst-board.bow .inst-pad.hit .hole{background:var(--a)}
.inst-board.frets .inst-pad{border-radius:4px;border-width:0 0 0 2px;border-color:color-mix(in srgb,var(--a2) 60%,transparent);background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 70%)}
.inst-board.frets .inst-pad .hole{width:70%;height:2px;aspect-ratio:auto;border-radius:1px;border:0;background:var(--a2)}
.inst-board.frets .inst-pad.hit{background:color-mix(in srgb,var(--a) 16%,transparent)}
@media (max-width:560px){.inst-pad .lb i{display:none}.inst-board.pads{gap:3px;padding:8px}}
.inst-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:12px;font-size:.8rem;color:var(--text-2)}
.inst-bar label{display:flex;align-items:center;gap:8px}
.inst-bar input[type=range]{accent-color:var(--a);width:120px}
.inst-hint{margin-top:10px;font-size:.8rem;color:var(--text-3);line-height:1.6;max-width:70ch}
.inst-hint kbd{font:inherit;font-size:.72rem;border:1px solid var(--edge);border-radius:4px;padding:0 5px}
.inst-none{padding:18px;border:1px dashed var(--edge-hi);border-radius:12px;color:var(--text-2)}
@media (prefers-reduced-motion:reduce){.inst-str.hit::before{animation:none}}

/* ---------- two gardens behind one gate ---------- */
.gates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.gates{grid-template-columns:1fr}}
.gatecard{position:relative;display:flex;flex-direction:column;border-radius:var(--r,18px);overflow:hidden;border:1px solid var(--edge);background:var(--glass);transition:border-color .4s,transform .5s var(--ease,ease)}
.gatecard:hover,.gatecard:focus-visible{border-color:var(--edge-hi);transform:translateY(-3px)}
.gatecard:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
.gate-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:#030405}
.gate-art svg{position:absolute;inset:0;width:100%;height:100%}
.gate-txt{padding:clamp(20px,2.6vw,28px)}
.gate-txt .we{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.gate-txt h3{font-family:var(--serif);font-weight:600;font-size:1.45rem;margin:6px 0 8px;color:var(--text)}
.gate-txt p{color:var(--text-2);line-height:1.65;max-width:52ch}
.gate-txt .go{display:inline-block;margin-top:14px;color:var(--ice);font-family:var(--serif);font-size:.92rem}

/* ---------- ink-wash mountains (drawn in code) ---------- */
.inkwash{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.inkwash svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- marked artwork placeholders (see PROMPTS.md) ---------- */
.ph{position:relative;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px),rgba(0,0,0,.25)!important;border:1.5px dashed var(--edge-hi)!important}
.ph::after{content:"Artwork placeholder \00B7  " attr(data-ph);padding:0 14px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* ---------- tea steps, pavilions ---------- */
.tea-steps{list-style:none;counter-reset:t;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;margin-top:18px}
.tea-steps li{counter-increment:t;padding:16px 18px;border:1px solid var(--edge);border-radius:14px;background:rgba(255,255,255,.025);color:var(--text-2);line-height:1.6;font-size:.92rem}
.tea-steps li::before{content:counter(t,cjk-ideographic);display:block;font-family:var(--wserif,var(--serif));font-size:1.3rem;color:var(--ice);margin-bottom:6px}
.pav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.src-note{margin-top:14px;font-size:.8rem;color:var(--text-3);line-height:1.6;max-width:72ch}
.src-note b{color:var(--text-2);font-weight:500}

/* moon gate wall over the hero mountains; Rooms menu tint for the new rooms */
.mg-wall{position:absolute;inset:0;width:100%;height:100%}
.rm[href^="chinese"]:hover{background:rgba(169,201,184,.09)}
.rm[href^="east-asian"]:hover{background:rgba(201,211,218,.09)}
/* the site map's guide row forced three columns, which overflowed phones (original bug) */
@media (max-width:640px){#guides .bento{grid-template-columns:1fr!important}}
/* the hero's 24px clip margin let its background spill sideways, widening phones to ~391px (original bug) */
html{overflow-x:clip}

/* =====================================================================
   POLISH (2026-11-03): same look, calmer and easier to use.
   `:root` in front of a selector lifts it just above the page's own rule,
   so nothing here needs !important unless the original used it.
   ===================================================================== */

/* 1. speed: the entry veil showed a black screen for ~2s on every page */
:root .veil{animation:veilOut .4s var(--ease,ease) 0s forwards}
@media (prefers-reduced-motion:reduce){:root .veil{display:none}}

/* 2. declutter */
/* the custom cursor ring: back to the normal pointer */
:root .cur{display:none!important}
:root body.curon{cursor:auto}
/* the floating YouTube pill: the channel is linked in the menu, footer and every video card */
:root .chanfab{display:none!important}
/* stamp book and sound: smaller and quieter on desktop, moved into the menu on phones and tablets */
:root .stampfab{width:42px;height:42px;font-size:1.05rem;opacity:.78}
:root .sndfab{opacity:.78}
:root .stampfab:hover,:root .sndfab:hover{opacity:1}
@media (max-width:900px){:root .stampfab,:root .sndfab{display:none!important}}
/* vertical side text runs into the content unless the screen is wide */
@media (max-width:1320px){:root .tate,:root .tate-r{display:none}}
/* the red seal sits on the title on phones */
@media (max-width:760px){:root .hero .hanko{display:none}}
/* menu buttons added to the phone sheet (stamp book, sound) look like its links */
.msheet button.mlink{font:inherit;color:inherit;background:none;width:100%;text-align:left;cursor:pointer}

/* 3. reading: larger, regular-weight body text and stronger greys */
:root{--text-2:#A9B2BE;--text-3:#808A98}
:root body{font-weight:400}
:root .panel p{font-size:1.06rem;line-height:1.75;max-width:66ch}
:root .sec-head p{font-size:1.02rem}
:root .faq p{font-size:1rem}
:root .feat p{font-size:.92rem;line-height:1.6}
:root .td{font-size:.9rem}
:root .hero-sub{font-size:1.04rem;line-height:1.65}
:root .yt-note,:root .src-note,:root .inst-hint{font-size:.86rem}
@media (max-width:760px){:root .panel p{font-size:1.02rem}}

/* 4. rhythm: "How it sounds" becomes an open passage instead of another box */
:root #sounds .glass.panel{background:none;border:0;border-left:1px solid color-mix(in srgb,var(--ice) 55%,transparent);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-block:6px;padding-right:0}
:root #sounds .glass.panel::before,:root #sounds .glass.panel::after{display:none}
:root #sounds .panel h3{font-size:1.5rem}

/* the five-item top menu: one line always; on narrower laptops the two smaller links step out (both stay in the footer) */
:root .nav-links a{white-space:nowrap}
@media (max-width:1240px){:root .nav-links{gap:20px}:root .roomswrap{margin-right:20px}}
@media (max-width:1100px){:root .nav-links a[href="quiet-hour.html"],:root .nav-links a[href="navigate.html"]{display:none}}

/* the section rail on the right edge and the two small buttons on the left need a wide screen; below that the rail hides
   and the buttons become slim tabs docked into the page margin, clear of the text */
@media (max-width:1320px){
  :root .rail{display:none}
  :root .stampfab,:root .sndfab{left:0;width:26px;height:40px;border-radius:0 10px 10px 0;border-left:0;font-size:.8rem}
  :root .stampfab{bottom:18px}:root .sndfab{bottom:64px}
}
/* the breadcrumb picked up block-link styling from the panel */
:root .ea-crumb a,:root .ea-crumb span{display:inline;width:auto;padding:0;margin:0;background:none}
:root .ea-crumb a::before,:root .ea-crumb a::after{display:none}
/* phones give every link a 44px tap height: keep it, but centre the crumb text and underline the text itself */
:root .ea-crumb{align-items:center;column-gap:10px;row-gap:0}
:root .ea-crumb a{display:inline-flex;align-items:center;border-bottom:0;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ice) 40%,transparent);text-underline-offset:4px}
/* once the page scrolls, the header gets a solid, blurred backing so text never shows through the logo */
:root header#hd.stuck{background:rgba(4,5,8,.86);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
/* which recording an instrument uses, under its instructions */
.inst-src{display:block;margin-top:8px;color:var(--text-3)}
.inst-src a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}
/* what kind of sound an instrument uses, shown above the board */
.inst-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 12px;border-radius:999px;font-size:.74rem;letter-spacing:.04em;border:1px solid var(--edge-hi);color:var(--text-2)}
.inst-badge:empty{display:none}
.inst-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.inst-badge.real{color:#BFE3C4;border-color:rgba(191,227,196,.4)}
.inst-badge.sampled{color:#D9D3B5;border-color:rgba(217,211,181,.4)}
.inst-badge.standin{color:#F2C49B;border-color:rgba(242,196,155,.55);background:rgba(242,196,155,.07)}