/* Aria's Violin Studio — extra pieces for the newer pages (index, the five doors, play lists, studies).
   Loaded AFTER styles.css, so the header, title band, cards, buttons and footer are the original site's.
   Follows the Design Guide: plum = act, gold = done; English / 中文. */
:root{--card:#fff;--gold:#8a5a1d;--cream:#f6ecd8;--brand-dark:#4d3459}

/* English / 中文: write both, the page shows one */
.zh{display:none}
html[data-lang="zh"] .zh{display:revert}
html[data-lang="zh"] .en{display:none}
html[data-lang="zh"] body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}

/* language button, beside Menu in the site header */
.navlinks{margin-left:auto;order:1}
.e-lang{order:2;font:inherit;font-size:14px;font-weight:700;border-radius:999px;padding:7px 14px;border:1px solid var(--brand);background:#fff;color:var(--brand);cursor:pointer;white-space:nowrap}
.e-lang:hover{background:var(--soft)}
.menu-btn{order:3}
@media(max-width:850px){.e-lang{margin-left:auto}}

/* title band */
.page-hero .lede{margin-bottom:0}
.e-main{padding-bottom:20px}

/* "welcome back" bar */
.e-back{display:none;margin:22px 0 0;background:var(--brand);color:#fff;border-radius:16px;padding:14px 20px;text-decoration:none;font-weight:700;font-size:19px;align-items:center;gap:12px;max-width:760px}
.e-back:hover{background:var(--brand-dark);text-decoration:none}
.e-back.show{display:flex}
.e-back small{display:block;font-weight:500;font-size:14px;opacity:.85}
.e-back b{margin-left:auto;font-size:24px}

/* the five doors: white cards like the site's .card */
.doors{display:grid;grid-template-columns:1fr;gap:14px;max-width:760px;margin:34px auto 10px}
.doors + .tip{max-width:760px;margin-left:auto;margin-right:auto}
.door{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:18px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);transition:border-color .15s}
.door:hover,.door:focus-visible{border-color:var(--brand);text-decoration:none;outline:none}
.door .ico{font-size:28px;line-height:1;flex:none;width:56px;height:56px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center}
.door h2{font-size:clamp(21px,3vw,25px);margin:0}
.door p{margin:4px 0 0;color:var(--muted);font-size:16px}
.door .go{margin-left:auto;font-size:22px;color:var(--brand);flex:none}
.d2 .ico,.d4 .ico{background:var(--warm)}

/* sections and tiles */
.e-sec{margin:34px 0}
.e-sec>h2{font-size:clamp(26px,3.5vw,36px);margin-bottom:6px}
.e-sec>p.lead{color:var(--muted);margin:0 0 14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tile{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);min-height:80px}
.tile:hover{border-color:var(--brand);text-decoration:none}
.tile .ico{font-size:26px;flex:none;width:40px;text-align:center}
.tile b{display:block;font-size:18px}
.tile span.d{display:block;color:var(--muted);font-size:15px;line-height:1.4}

/* numbered steps (beginner page) */
.step{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin:0 0 14px}
.step .n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--soft);color:var(--brand-dark);font:700 20px Georgia,serif;display:flex;align-items:center;justify-content:center}
.step h2{font-size:24px}
.step p{margin:6px 0 12px;color:var(--muted)}
.step .tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.step .tile{min-height:68px;background:var(--bg)}
@media(max-width:520px){.step{flex-direction:column;gap:10px;padding:18px 16px}}

/* tip box: like the site's .notice */
.tip{background:#fff7e9;border:1px solid #efdfbf;border-radius:14px;padding:16px 20px;color:#6d593a}
.tip h3{font-size:20px;margin-bottom:6px;color:#4d3a1f}
.tip ol,.tip ul{margin:6px 0 0;padding-left:22px}
.tip li{margin:4px 0}

/* grade / book chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.chip{font:inherit;font-weight:700;font-size:15px;min-width:52px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.chip:hover{text-decoration:none;border-color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

/* play-along song list */
.songs{list-style:none;padding:0;margin:10px 0 0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.songs li{border-bottom:1px solid #f0ece7}
.songs li:last-child{border-bottom:0}
.songs a{display:flex;align-items:center;gap:14px;padding:15px 22px;text-decoration:none;color:var(--ink);font-size:20px;font-weight:700}
.songs a:hover{background:#faf8fb;text-decoration:none}
.songs .num{color:var(--muted);font-size:15px;width:30px;flex:none;text-align:right;font-weight:600}
.songs .play{margin-left:auto;flex:none;background:var(--brand);color:#fff;border-radius:8px;font-size:14px;font-weight:800;padding:8px 12px}

/* long lists: the same numbered outline as the journey pages (no sideways scrolling) */
.pl-tools{padding:14px 0 8px;margin-top:8px}
.pl-search{display:block;width:100%;max-width:560px;font:inherit;font-size:17px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.pl-search:focus{outline:none;border-color:var(--brand)}
.pl-jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pl-jump a{font-size:13px;font-weight:700;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;white-space:nowrap}
.pl-jump a:hover{border-color:var(--brand);text-decoration:none}
.pl-count{color:var(--muted);font-size:14px;margin:8px 2px 0}
.pl-sec{margin:30px 0 0;scroll-margin-top:90px}
.pl-unit{padding-left:14px;border-left:4px solid var(--brand);margin:0 0 10px}
.pl-unit small{display:block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--brand)}
.pl-unit h2{font-size:clamp(22px,3.2vw,30px);margin:2px 0 0}
.pl-sec:nth-of-type(3n+2) .pl-unit{border-left-color:var(--gold)}.pl-sec:nth-of-type(3n+2) .pl-unit small{color:var(--gold)}
.pl-sec:nth-of-type(3n) .pl-unit{border-left-color:#7c2f22}.pl-sec:nth-of-type(3n) .pl-unit small{color:#7c2f22}
.pl-lead{color:var(--muted);margin:0 0 10px}
.pl-note{background:#fff7e9;border:1px solid #efdfbf;border-radius:14px;padding:12px 16px;color:#6d593a;font-size:15px;margin:0 0 12px}
.pl-note a{font-weight:700}
.pl-path{list-style:none;margin:0;padding:0;position:relative}
.pl-path:before{content:"";position:absolute;left:21px;top:14px;bottom:14px;width:2px;background:var(--line)}
.pl-row{position:relative;display:flex;align-items:center;gap:14px;padding:6px 0}
.pl-n{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--line);font:700 15px Georgia,serif;color:var(--muted)}
.pl-card{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.pl-row:hover .pl-card{border-color:var(--brand)}
.pl-txt{flex:1;min-width:0}
.pl-num{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-title{display:block;font-weight:700;font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.pl-more{display:inline-block;font-weight:600;font-size:13px;margin-top:3px}
.pl-card .small-btn{flex:none}
.pl-none{display:none;padding:22px;text-align:center;color:var(--muted)}
@media(max-width:600px){.pl-card{flex-direction:column;align-items:flex-start;gap:8px}.pl-n{width:36px;height:36px;font-size:13px}.pl-path:before{left:17px}.pl-row{gap:10px}}
.pl-feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:center;background:#faf5e8;border:1px solid #e3d3b2;border-radius:16px;padding:18px;margin:0 0 14px}
.pl-feat img{width:100%;border-radius:12px;display:block;aspect-ratio:16/9;object-fit:cover;background:#eaddc0}
.pl-feat .kick{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pl-feat h3{font-size:23px;margin:6px 0 8px}
.pl-feat p{margin:0 0 14px;color:#50535a}
.pl-play,.pl-book{display:inline-block;background:var(--brand);color:#fff;border-radius:10px;padding:11px 16px;text-decoration:none;border:0;font:inherit;font-weight:750;cursor:pointer}
.pl-play:hover{background:var(--brand-dark);text-decoration:none}
.pl-book{background:#fff;color:var(--ink);border:1px solid var(--line)}
.pl-book:hover{border-color:var(--brand);text-decoration:none}
@media(max-width:600px){.pl-feat{grid-template-columns:1fr}}
/* room for the 中文 button: keep every menu item on one line */
@media(min-width:851px){.navlinks{gap:15px}.navlinks a{white-space:nowrap;font-size:15px}.navlinks a.nav-cta{padding:8px 14px}}
@media(min-width:851px) and (max-width:1120px){.brand small{display:none}.navlinks{gap:12px}.navlinks a{font-size:14px}}
/* pages that show the big choice cards: title band centred over the column */
.page-hero.e-center{text-align:center}
.page-hero.e-center .lede{margin-left:auto;margin-right:auto}
.page-hero.e-center .e-back{margin-left:auto;margin-right:auto;text-align:left}
.chip.chip-app{border-color:var(--brand);color:var(--brand)}
.chip.chip-app:hover{background:var(--soft)}