/* Reeves Wong Piano — shared styles for every page.
   Layout: black page, logo header, grey nav band, centred narrow text sections, wide grids for videos. */
/* Reeves Wong Piano, site design (Option 1): forest-black ground, ivory text, mint for anything clickable,
   gold for small labels and stars, soft sage-mint for headings. Lora for headings, Poppins for everything else. */
:root {
  --ground: #0D1411;
  --ground-2: #121C18;
  --ground-deep: #0A100D;
  --rule: #26352E;
  --ink: #F1EFE8;
  --mint: #7FD8AE;
  --gold: #D4AE52;
  --heading: #B8DCC6;
  --display: "Lora", Georgia, "Times New Roman", serif;
  --text: "Poppins", "Helvetica Neue", Arial, sans-serif;
  /* older names used across the pages, mapped onto the new palette */
  --black: var(--ground);
  --header: var(--ground);
  --nav: var(--ground);
  --panel: var(--ground-2);
  --card: var(--ground-2);
  --line: var(--rule);
  --white: var(--ink);
  --soft: #A9B5AE;
  --green: var(--mint);
  --font-display: var(--display);
  --font-sub: var(--text);
  --font-body: var(--text);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 15px/1.75 var(--text); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--header); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; margin: 0 auto; }
.mid { max-width: 1100px; margin: 0 auto; }
.wide { max-width: 1500px; margin: 0 auto; }
section { padding-block: clamp(56px, 7vw, 100px); }
section.panel { background: var(--panel); }
section.deep { background: var(--ground-deep); }
.center { text-align: center; }
.big { font: 500 clamp(2.2rem, 4.6vw, 3.3rem)/1.1 var(--display); color: var(--heading); letter-spacing: -.015em; }
.sub { font: 500 clamp(1.35rem, 2.4vw, 1.75rem)/1.25 var(--display); color: var(--heading); }
.eyebrow { font: 500 14px/1.2 var(--text); color: var(--gold); }
.lede { color: var(--soft); font-size: 1.05rem; }
.stack { display: grid; gap: 22px; }
.stack-sm { display: grid; gap: 10px; }
.stack-lg { display: grid; gap: 44px; }
.stack > *, .stack-sm > *, .stack-lg > * { min-width: 0; }
.songgroups { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }
.sheets { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important; }
ul.plain { margin: 0; padding-left: 28px; display: grid; gap: 4px; }
.hl { color: var(--green); }
.rule { width: 108px; height: 1px; background: var(--white); }

/* Header: one bar, logo left, menu right */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.site-head .wide { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.site-head .logo img { width: 112px; height: auto; }
.mainnav { display: flex; gap: 24px; flex-wrap: wrap; margin-left: auto; }
.mainnav a { color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; opacity: .85; }
.mainnav a:hover { opacity: 1; color: var(--mint); }
.mainnav a[aria-current="page"] { opacity: 1; color: var(--mint); }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; font: 500 14px/1 var(--text); padding: 12px 0; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ☰"; color: var(--mint); }
.menu[open] summary::after { content: " ✕"; }
.menu nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); background: var(--ground); border-bottom: 1px solid var(--rule); }
.menu nav a { color: var(--ink); text-decoration: none; padding: 11px 0; border-top: 1px solid var(--rule); }
.menu nav a[aria-current="page"] { color: var(--mint); }
.social { display: flex; gap: 14px; align-items: center; }
.social a { color: var(--ink); display: flex; opacity: .8; }
.social a:hover { color: var(--mint); opacity: 1; }
.social svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 1100px) { .mainnav { display: none; } .menu { display: block; } .site-head .social { display: none; } }

/* Page heading for inner pages */
.pagehead { padding-block: clamp(48px, 7vw, 88px) clamp(24px, 4vw, 40px); }
.pagehead h1 { font: italic 400 clamp(2.6rem, 6vw, 4.4rem)/1.04 var(--display); letter-spacing: -.02em; color: var(--ink); }
.pagehead h1 span { color: var(--heading); }
.crumbs { font-size: 13px; color: var(--soft); }
.crumbs a { color: var(--soft); }

/* Home hero + intro */
.hero { background: #000; overflow: hidden; }
.hero video { display: block; width: 100%; max-width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 62%; pointer-events: none; }
@media (max-width: 600px) { .hero video { aspect-ratio: 16 / 9; } }
.intro { padding-block: clamp(40px, 6vw, 72px) 0; text-align: center; }
.intro h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; }
.intro h1 span { color: var(--green); }
.intro p { color: var(--soft); max-width: 60ch; margin: 18px auto 0; font-size: 1.05rem; }
.welcome { padding-block: clamp(40px, 6vw, 80px) 40px; }
.frame { max-width: 900px; margin: 0 auto; width: 100%; display: block; }

/* Buttons */
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.cta-row.left { justify-content: flex-start; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--font-sub); letter-spacing: .03em; padding: 14px 24px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn-wa { background: var(--mint); color: #08140F; }
.btn-wa:hover { filter: brightness(1.1); }
.btn-line { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn-line:hover { border-color: var(--green); color: var(--green); }
.more { font: 600 14px/1 var(--font-sub); letter-spacing: .04em; color: var(--green); text-decoration: none; }
.more::after { content: " →"; }
.more:hover { text-decoration: underline; }

/* Video thumbs */
.video { position: relative; display: block; text-decoration: none; color: var(--white); }
.video::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 2px solid #fff; border-radius: 50%;
  background: rgba(0,0,0,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center / 26px no-repeat; }
.video.placeholder { aspect-ratio: 16 / 9; background: var(--ground-2); border: 1px dashed var(--rule); display: grid; place-items: end start; padding: 12px; font-size: 12px; color: var(--soft); }

/* Reviews */
.rating { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.rating b { font: 600 26px/1 var(--font-body); }
.rating .stars-inline { color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.rating a { color: var(--white); }
.review-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 40px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px; }
.review { display: grid; gap: 14px; scroll-snap-align: start; align-content: start; }
.review .stars { display: flex; justify-content: space-between; align-items: center; color: var(--gold); font-size: 22px; letter-spacing: 2px; }
.review .g { font: 700 22px/1 var(--font-body); background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.review blockquote { margin: 0; border: 1px solid var(--rule); background: var(--ground-2); border-radius: 12px; padding: 18px 16px 12px; font: 13px/1.45 Arial, sans-serif; display: grid; gap: 10px; }
.review blockquote a { color: var(--white); text-decoration: none; text-align: center; }
.review blockquote a:hover { text-decoration: underline; }
.who { display: flex; gap: 10px; align-items: center; justify-content: center; font: 13px/1.3 Arial, sans-serif; }
.who i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; color: #fff; }

/* Grids */
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 60px; }
.styles article { display: grid; gap: 20px; align-content: start; min-width: 0; }
.styles h3 { font: 15px/1.5 var(--font-body); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.grid3 > * { display: grid; gap: 10px; align-content: start; min-width: 0; }
.grid3 h3 { font: 600 15px/1.4 var(--font-body); }
.grid3 p { color: var(--soft); font-size: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.grid2 > * { min-width: 0; }

/* Feature ticks */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.features li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.features li::before { content: "✓"; color: var(--green); font-weight: 700; }

/* Numbered setup steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.steps li::before { content: counter(s); width: 32px; height: 32px; border: 1px solid var(--green); color: var(--green); border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--font-sub); }

/* Curriculum levels */
.levels { display: grid; gap: 28px; }
.level { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: clamp(22px, 3vw, 36px); display: grid; gap: 22px; }
.level-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.level-head h3 { font: italic 500 clamp(1.8rem, 3vw, 2.3rem)/1.2 var(--display); }
.level-head h3 span { color: var(--green); }
.level-head .when { font: 500 13px/1 var(--text); letter-spacing: .01em; color: var(--soft); }
.level > p { color: var(--soft); max-width: 70ch; }
.patterns { display: flex; flex-wrap: wrap; gap: 8px; }
.patterns code { font: 13px/1 ui-monospace, "SF Mono", Menlo, monospace; padding: 8px 12px; border: 1px solid var(--green); color: var(--green); border-radius: 999px; overflow-wrap: anywhere; }
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 28px; }
.skills div { display: grid; gap: 6px; align-content: start; min-width: 0; }
.skills b { font: 500 13px/1.3 var(--text); letter-spacing: .01em; color: var(--white); }
.skills p { color: var(--soft); font-size: 14px; line-height: 1.6; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--green); }
.timeline div { padding: 14px 12px 0 0; display: grid; gap: 4px; min-width: 0; }
.timeline b { font: 600 13px/1.3 var(--font-sub); color: var(--green); letter-spacing: .06em; }
.timeline span { font-size: 13px; color: var(--soft); }

/* Songs */
.songgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.songlist { list-style: none; margin: 0; padding: 0; display: grid; }
.songlist li { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.songlist li span:last-child { color: var(--soft); font-size: 13px; text-align: right; }

/* FAQ */
.faq { display: grid; gap: 0; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; font: 1.12rem/1.4 var(--font-sub); letter-spacing: .02em; padding-block: 18px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q."; color: var(--green); margin-right: -6px; }
.faq summary span { flex: 1; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--soft); padding-bottom: 20px; max-width: 65ch; }
.faq-group { display: grid; gap: 8px; }

/* Contact strip */
.contactline { display: grid; gap: 4px; }
.contactline b { color: var(--green); font-weight: 400; font-family: var(--font-sub); letter-spacing: .06em; }
.num { font: 1.4rem/1.3 var(--font-sub); letter-spacing: .04em; user-select: all; }

/* Footer */
footer { background: var(--header); border-top: 1px solid var(--rule); color: var(--soft); font-size: 13px; }
footer .wide { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 32px; padding-block: 48px 36px; }
footer h2 { font: 500 14px/1 var(--text); color: var(--gold); margin-bottom: 14px; }
footer nav { display: grid; gap: 6px; }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--mint); }
footer .base { border-top: 1px solid var(--rule); padding-block: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Floating WhatsApp button */
.wa-float { position: fixed; z-index: 25; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
.wa-float:hover { filter: brightness(1.08); }

@media (max-width: 900px) {
  .styles, .grid3 { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  footer .wide { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 14px; }
}
@media (max-width: 600px) {
  .styles, .grid3 { grid-template-columns: 1fr; }
  .top .wide { padding-block: 22px; }
  footer .wide { grid-template-columns: 1fr; }
}

/* Lead sheet previews */
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px 28px; }
.sheet { display: grid; gap: 12px; align-content: start; min-width: 0; }
.sheet button { all: unset; cursor: zoom-in; display: block; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #2A2A2A; }
.sheet button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sheet button:hover { box-shadow: 0 0 0 2px var(--green); }
.sheet img { width: 100%; user-select: none; -webkit-user-drag: none; }
.sheet .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sheet h3 { font: 600 1rem/1.35 var(--font-body); }
.sheet .meta span { color: var(--soft); font-size: 13px; white-space: nowrap; }
.genre { font: 500 13px/1 var(--text); letter-spacing: .01em; color: var(--green); }
.viewer { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); }
.viewer::backdrop { background: rgba(0,0,0,.85); }
.viewer img { width: 100%; border-radius: 6px; user-select: none; }
.viewer form { position: absolute; top: 8px; right: 8px; }
.viewer button { font: 600 13px/1 var(--font-sub); background: #000; color: #fff; border: 1px solid #555; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.songgroups > *, .songgroups .stack-sm, .songlist { align-content: start; }

/* Song library (filters are radio buttons, so they work without scripts) */
.sr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.libwrap { display: grid; gap: 22px; position: relative; }
.lib-tools { display: grid; gap: 14px; }
.lib-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lib-row .label { font: 500 13px/1 var(--text); letter-spacing: .01em; color: var(--soft); margin-right: 6px; }
.chip { font: 600 13px/1 var(--font-sub); color: var(--white); border: 1px solid var(--rule); border-radius: 999px; padding: 9px 14px; cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--green); }
.chip .gold { color: #D4AE52; }
#c-all:checked ~ .lib-tools [for=c-all], #c-mandopop:checked ~ .lib-tools [for=c-mandopop], #c-english:checked ~ .lib-tools [for=c-english],
#s-all:checked ~ .lib-tools [for=s-all], #s-1:checked ~ .lib-tools [for=s-1], #s-2:checked ~ .lib-tools [for=s-2], #s-3:checked ~ .lib-tools [for=s-3], #s-4:checked ~ .lib-tools [for=s-4], #s-5:checked ~ .lib-tools [for=s-5] { background: var(--green); border-color: var(--green); color: #08140F; }
#c-all:checked ~ .lib-tools [for=c-all] .gold, .libwrap input:checked ~ .lib-tools .chip .gold { color: #D4AE52; }
#s-1:checked ~ .lib-tools [for=s-1] .gold, #s-2:checked ~ .lib-tools [for=s-2] .gold, #s-3:checked ~ .lib-tools [for=s-3] .gold, #s-4:checked ~ .lib-tools [for=s-4] .gold, #s-5:checked ~ .lib-tools [for=s-5] .gold { color: #08140F; }
.libwrap input:focus-visible ~ .lib-tools .chip { outline: none; }
#c-all:focus-visible ~ .lib-tools [for=c-all], #c-mandopop:focus-visible ~ .lib-tools [for=c-mandopop], #c-english:focus-visible ~ .lib-tools [for=c-english],
#s-all:focus-visible ~ .lib-tools [for=s-all], #s-1:focus-visible ~ .lib-tools [for=s-1], #s-2:focus-visible ~ .lib-tools [for=s-2], #s-3:focus-visible ~ .lib-tools [for=s-3], #s-4:focus-visible ~ .lib-tools [for=s-4], #s-5:focus-visible ~ .lib-tools [for=s-5] { outline: 2px solid var(--green); outline-offset: 2px; }
#c-mandopop:checked ~ .library li:not([data-cat=mandopop]), #c-english:checked ~ .library li:not([data-cat=english]),
#s-1:checked ~ .library li:not([data-stars="1"]), #s-2:checked ~ .library li:not([data-stars="2"]), #s-3:checked ~ .library li:not([data-stars="3"]), #s-4:checked ~ .library li:not([data-stars="4"]), #s-5:checked ~ .library li:not([data-stars="5"]),
.library li.nomatch { display: none; }
.lib-search { width: 100%; max-width: 420px; margin-top: 10px; font: 15px/1.2 var(--font-body); color: var(--white); background: var(--ground-2); border: 1px solid var(--rule); border-radius: 999px; padding: 12px 18px; }
.lib-search:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.lib-search-wrap { display: grid; }
.lib-search-wrap[hidden] { display: none; }
.lib-count { color: var(--soft); font-size: 13px; }
.lib-count:empty { display: none; }
.library { max-height: 680px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--ground-2); padding: 4px 18px; overscroll-behavior: contain; }
.library ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); column-gap: 36px; }
.library li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-block: 9px; border-bottom: 1px solid var(--rule); }
.library li b { font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.library li i { font-style: normal; color: #D4AE52; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.library li i span { color: #3A4A42; }
.library li small { grid-column: 1 / -1; color: var(--soft); font-size: 12px; }
.lib-empty { padding: 24px 0; color: var(--soft); }

/* Lead sheet enlarge (works without scripts) */
.sheet-link { display: block; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #2A2A2A; cursor: zoom-in; }
.sheet-link:hover { box-shadow: 0 0 0 2px var(--green); }
.lightbox { display: none; }
.lightbox:target { display: grid; place-items: center; position: fixed; inset: 0; z-index: 40; padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lb-bg { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.lightbox figure { position: relative; margin: 0; width: min(1100px, 100%); }
.lightbox img { width: 100%; border-radius: 6px; user-select: none; }
.lb-close { position: absolute; top: 10px; right: 10px; font: 600 13px/1 var(--font-sub); background: #000; color: #fff; border: 1px solid #555; border-radius: 999px; padding: 10px 14px; text-decoration: none; }
.sheet .meta { flex-wrap: wrap; row-gap: 2px; } .sheet .meta span { white-space: normal; } .sheet .meta h3 { min-width: 0; }

/* Level chapter pages */
.skillcounts { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--green); }
.skillcounts div { padding: 14px 10px 0 0; display: grid; gap: 2px; }
.skillcounts b { font: 400 2rem/1 var(--font-display); color: var(--green); }
.skillcounts span { font: 500 13px/1.3 var(--text); letter-spacing: .01em; color: var(--soft); }
.skill-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 40px 48px; align-items: start; }
.skill-line { display: grid; gap: 12px; min-width: 0; }
.skill-line .count { font: 13px/1 var(--font-body); color: var(--soft); letter-spacing: 0; margin-left: 8px; }
.chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ch { border-bottom: 1px solid var(--rule); }
.ch-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: baseline; padding-block: 13px; }
.ch details summary { cursor: pointer; list-style: none; }
.ch details summary::-webkit-details-marker { display: none; }
.ch details summary:hover .ch-ti { color: var(--green); }
.ch details summary::after { content: "+"; color: var(--green); font-size: 1.2rem; line-height: 1; grid-column: 3; grid-row: 1; justify-self: end; }
.ch details[open] summary::after { content: "–"; }
.ch-no { font: 600 13px/1 var(--font-sub); color: var(--green); font-variant-numeric: tabular-nums; }
.ch-ti { min-width: 0; }
.ch-pg { font-size: 12px; color: var(--soft); grid-column: 3; grid-row: 1; margin-right: 26px; white-space: nowrap; }
.ch.pending .ch-ti { color: var(--soft); }
.ch-body { display: grid; gap: 10px; padding: 0 0 18px 46px; color: var(--soft); font-size: 14px; }
.ch-body .features { gap: 6px; }
.ch-body .features li { color: var(--white); }
@media (max-width: 600px) { .skillcounts { grid-template-columns: repeat(3, 1fr); row-gap: 14px; } .ch-body { padding-left: 0; } .ch-pg { display: none; } }
.sheets.three { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 900px) { .sheets.three { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .sheets.three { grid-template-columns: 1fr !important; } }

/* Levels that have their own chapter page */
.skills { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.level.has-page { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 40px rgba(76,182,72,.12); }
.level.has-page > .when { margin-top: -14px; }
.level-badge { font: 500 13px/1 var(--text); letter-spacing: .01em; color: #08140F; background: var(--green); padding: 9px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.level-badge:hover { filter: brightness(1.1); }
.skill-link { display: grid; gap: 6px; align-content: start; min-width: 0; text-decoration: none; padding: 12px; margin: -12px; border-radius: 10px; }
.skill-link b { font: 500 13px/1.3 var(--text); letter-spacing: .01em; color: var(--green); }
.skill-link p { color: var(--soft); font-size: 14px; line-height: 1.6; }
.skill-link:hover { background: #151915; }
.skill-link:hover p { color: var(--white); }
.level-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: #08140F; background: var(--green); border-radius: 12px; padding: 18px 22px; }
.level-cta span { display: grid; gap: 4px; }
.level-cta b { font: 600 1.05rem/1.3 var(--font-sub); }
.level-cta small { font-size: 13px; opacity: .8; }
.level-cta i { font-style: normal; font-size: 1.8rem; line-height: 1; }
.level-cta:hover { filter: brightness(1.08); }
.skill-line { scroll-margin-top: 70px; }

/* Each level has its own colour so levels are easy to tell apart */
.timeline > div[style*="--lv"] { border-top: 3px solid var(--lv); margin-top: -2px; }
.timeline > div[style*="--lv"] b { color: var(--lv); }
.timeline:has(> div[style*="--lv"]) { border-top-color: transparent; }
.btn-lv { background: var(--lv); color: #070A0D; }
.btn-lv:hover { filter: brightness(1.1); }
.level[style*="--lv"] .level-head h3 { color: var(--white); }
.level[style*="--lv"] .level-head h3 span, .level[style*="--lv"] .eyebrow { color: var(--lv); }
.level[style*="--lv"] .patterns code { border-color: var(--lv); color: var(--lv); }
.level[style*="--lv"] { border-left: 4px solid var(--lv); }
.level.has-page { border-color: var(--lv); box-shadow: 0 0 0 1px var(--lv), 0 0 40px color-mix(in srgb, var(--lv) 14%, transparent); }
.level.has-page .level-badge, .level.has-page .level-cta { background: var(--lv); color: #070A0D; }
.level.has-page .skill-link b { color: var(--lv); }
.lvpage .pagehead h1 span, .lvpage .pagehead .eyebrow, .lvpage .big, .lvpage .sub, .lvpage .genre, .lvpage .ch-no,
.lvpage .ch details summary::after, .lvpage .ch-body .features li::before, .lvpage .skillcounts b { color: var(--lv); }
.lvpage .skillcounts { border-top-color: var(--lv); }
.lvpage .ch details summary:hover .ch-ti { color: var(--lv); }
.lvpage .sheet-link:hover { box-shadow: 0 0 0 2px var(--lv); }
.lvpage .more { color: var(--lv); }

/* ---- Home page (Option 1) ---- */
.home .wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.home h1, .home h2 { font-family: var(--display); font-weight: 500; text-wrap: balance; margin: 0; }
.home h3 { font: 500 1.08rem/1.35 var(--text); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .home .hero-copy > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.home h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -.015em; color: var(--heading); }
.home .kicker { display: flex; align-items: center; gap: 12px; font: 500 15px/1 var(--text); color: var(--gold); }
.home .kicker::before { content: ""; width: 36px; height: 2px; background: var(--gold); }
.home section + section, .home .facts + section { border-top: 1px solid var(--rule); }
.home section { padding-block: clamp(64px, 9vw, 120px); }
.home .lede { color: var(--soft); font-size: 1.05rem; max-width: 58ch; }
.home .head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 60px); }
.home .link { font-weight: 500; color: var(--mint); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--mint) 40%, transparent); padding-bottom: 2px; }
.home .link:hover { border-bottom-color: var(--mint); }
.home .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.home .btn { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--text); padding: 15px 24px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; }
.home .btn svg { width: 20px; height: 20px; fill: currentColor; }
.home .btn-main { background: var(--mint); color: #08140F; }
.home .btn-main:hover { background: #95E3BE; }
.home .btn-quiet { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.home .btn-quiet:hover { border-color: var(--ink); }
.home .hero { position: relative; overflow: hidden; background: var(--ground); min-height: clamp(560px, 80vh, 740px); display: grid; align-items: center; }
.home .hero video { position: absolute; top: 0; right: 0; height: 100%; width: 64%; object-fit: cover; object-position: 50% 60%; filter: saturate(.8) brightness(.9);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.home .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--ground) 0%, transparent 22%), linear-gradient(180deg, rgba(13,20,17,.7) 0%, transparent 25%); }
@media (max-width: 900px) {
  .home .hero { align-items: end; }
  .home .hero video { width: 100%; -webkit-mask-image: none; mask-image: none; opacity: .45; }
  .home .hero::after { background: linear-gradient(0deg, var(--ground) 8%, rgba(13,20,17,.55) 60%, rgba(13,20,17,.75) 100%); }
}
.home .hero > .wrap { width: 100%; position: relative; z-index: 2; }
.home .hero-copy { position: relative; z-index: 2; display: grid; gap: 24px; padding-block: 72px 84px; max-width: 560px; }
.home .hero h1 { font-style: italic; font-weight: 400; font-size: clamp(2.9rem, 7.2vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; }
.home .hero p.sub { font-size: 1.12rem; color: #D3DAD5; max-width: 46ch; }
.home .proof { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); }
.home .proof b { color: var(--gold); letter-spacing: 2px; font-weight: 400; }
.home .hero-copy > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.home .hero-copy > *:nth-child(2) { animation-delay: .12s; }
.home .hero-copy > *:nth-child(3) { animation-delay: .24s; }
.home .hero-copy > *:nth-child(4) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.home .facts { border-block: 1px solid var(--rule); }
.home .facts .wrap { display: grid; grid-template-columns: repeat(5, 1fr); }
.home .fact { padding: 26px 18px 26px 0; display: grid; gap: 2px; }
.home .fact + .fact { padding-left: 22px; border-left: 1px solid var(--rule); }
.home .fact b { font: 500 1.9rem/1.1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.home .fact span { font-size: 13px; color: var(--soft); }
@media (max-width: 900px) {
  .home .facts .wrap { grid-template-columns: repeat(2, 1fr); }
  .home .fact, .home .fact + .fact { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .home .fact:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule); }
  .home .fact:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
.home .meet { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.home .meet video { width: 100%; border-radius: 6px; background: #000; }
.home .meet .copy { display: grid; gap: 20px; }
.home .meet .copy p { color: var(--soft); }
.home .venues { font-size: 14px; color: var(--soft); border-top: 1px solid var(--rule); padding-top: 18px; }
.home .venues strong { color: var(--ink); font-weight: 500; }
.home .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.home .pillar { border-top: 1px solid var(--gold); padding-top: 22px; display: grid; gap: 10px; align-content: start; }
.home .pillar p { color: var(--soft); font-size: 15px; }
.home .ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.home .way { display: grid; gap: 14px; text-decoration: none; color: var(--ink); align-content: start; }
.home .way .img { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--ground-2); }
.home .way img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home .way:hover img { transform: scale(1.03); }
.home .way .kind { font-size: 13px; color: var(--gold); }
.home .way p { color: var(--soft); font-size: 15px; }
.home .way .go { font-size: 14px; font-weight: 500; color: var(--mint); }
.home .clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.home .clip { display: grid; gap: 10px; text-decoration: none; color: var(--ink); }
.home .clip .img { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; }
.home .clip img { width: 100%; height: 100%; object-fit: cover; }
.home .clip span { font-size: 13px; color: var(--soft); }
.home .clip b { font-weight: 500; }
.home .course { background: var(--ground); border-block: 1px solid var(--rule); }
.home .levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.home .lvl { display: grid; gap: 12px; align-content: start; grid-template-rows: auto auto 1fr auto; padding: 26px 22px 22px; text-decoration: none; color: var(--ink); background: var(--ground-2); border: 1px solid var(--rule); border-top: 4px solid var(--c); border-radius: 10px; }
.home .lvl:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--rule)); border-top-color: var(--c); }
.home .lvl .n { font: italic 500 2.2rem/1 var(--display); color: var(--c); }
.home .lvl .when { font-size: 13px; color: var(--soft); }
.home .lvl p { font-size: 14px; color: #D3DAD5; }
.home .lvl .count { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--text); color: #08140F; background: var(--c); padding: 11px 16px; border-radius: 999px; }
.home .lvl .count svg { width: 14px; height: 14px; }
.home .lvl:hover .count { filter: brightness(1.08); }
.home .course .after { margin-top: 32px; color: var(--soft); font-size: 15px; }
.home .songs { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.home .fan { position: relative; aspect-ratio: 5 / 4; }
.home .fan img { position: absolute; width: 74%; border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.home .fan img:nth-child(1) { left: 0; top: 4%; transform: rotate(-5deg); }
.home .fan img:nth-child(2) { left: 13%; top: 16%; transform: rotate(1deg); }
.home .fan img:nth-child(3) { left: 26%; top: 30%; transform: rotate(5deg); }
.home .songs .copy { display: grid; gap: 22px; }
.home .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.home .tags span { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: var(--ground-2); border: 1px solid var(--rule); color: #DCE3DE; }
.home .reviews { background: var(--ground-2); }
.home .featured { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; max-width: 960px; }
.home .featured .mark { font: italic 500 7rem/0.8 var(--display); color: var(--gold); }
.home .featured blockquote { margin: 0; display: grid; gap: 20px; }
.home .featured blockquote p { font: italic 400 clamp(1.4rem, 2.6vw, 2rem)/1.4 var(--display); }
.home .featured cite { font-style: normal; font-size: 14px; color: var(--soft); }
.home .quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; border-top: 1px solid var(--rule); padding-top: 36px; }
.home .quotes figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.home .quotes .stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; }
.home .quotes p { font-size: 14px; color: #D5DCD7; }
.home .quotes figcaption { font-size: 13px; color: var(--soft); }
.home .rating-line { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 15px; }
.home .rating-line b { font: 500 1.6rem/1 var(--display); }
.home .closing { text-align: left; }
.home .closing .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.home .closing h2 { font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.home .closing .side { display: grid; gap: 16px; justify-items: start; }
.home .closing .num { font-size: 15px; color: var(--soft); user-select: all; }
@media (max-width: 900px) {
  .home .meet, .home .songs, .home .closing .wrap { grid-template-columns: 1fr; }
  .home .pillars, .home .ways { grid-template-columns: 1fr; gap: 32px; }
  .home .clips { grid-template-columns: 1fr 1fr; }
  .home .levels { grid-template-columns: 1fr 1fr; }
  .home .quotes { grid-template-columns: 1fr 1fr; }
  .home .featured { grid-template-columns: 1fr; gap: 6px; }
  .home .featured .mark { font-size: 5rem; }
  .home .hero-copy { padding-block: 64px 48px; }
}
@media (max-width: 560px) {
  .home .clips, .home .quotes, .home .levels { grid-template-columns: 1fr; }
  .home .fan { aspect-ratio: 4 / 3.6; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Tutorial pages */
.tut-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: start; }
.tut-video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--ground-2); display: block; }
.tut-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.placeholder-vid { display: grid; place-items: center; align-content: center; gap: 14px; text-decoration: none; color: var(--soft); border: 1px dashed var(--rule); font-size: 14px; }
.placeholder-vid .play { width: 64px; height: 64px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%2308140F'/%3E%3C/svg%3E") center / 30px no-repeat; }
.tut-facts { display: grid; border: 1px solid var(--rule); border-radius: 12px; background: var(--ground-2); }
.tut-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--rule); }
.tut-facts div:first-child { border-top: 0; }
.tut-facts span { color: var(--soft); font-size: 14px; }
.tut-facts b { font-weight: 500; }
.tut-facts .stars, .tut-card .genre { color: var(--gold); letter-spacing: 1px; }
.tut-facts .stars .off, .tut-card .off { color: #3A4A42; }
.tut-chords { display: flex; flex-wrap: wrap; gap: 8px; }
.tut-chords span { font: 500 15px/1 var(--text); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--mint); color: var(--mint); }
.tut-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.tut-card { display: grid; gap: 8px; text-decoration: none; color: var(--ink); }
.tut-card img { width: 100%; border-radius: 8px; background: #fff; }
.tut-card h3 { font: 500 1.2rem/1.3 var(--display); }
.tut-card .who-a { font-size: 13px; color: var(--soft); }
.tut-card:hover h3 { color: var(--mint); }
@media (max-width: 900px) { .tut-grid { grid-template-columns: 1fr; } }
.home .clip video { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.studio-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.studio-tiles figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.studio-tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.studio-tiles figcaption { font-size: 14px; color: var(--soft); display: grid; gap: 2px; }
.studio-tiles figcaption b { color: var(--ink); font-weight: 500; font-size: 15px; }
@media (max-width: 700px) { .studio-tiles { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .studio-tiles figcaption { font-size: 12px; } .studio-tiles figcaption b { font-size: 13px; } }
.studio-main { margin: 0 auto; display: grid; gap: 14px; }
.studio-main img { width: 100%; border-radius: 10px; }
.studio-main figcaption { font-size: 14px; color: var(--soft); text-align: center; max-width: 560px; margin: 0 auto; }
.vid { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.vid video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Online lessons: setup diagram and review */
.setup-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.setup-fig { margin: 0; display: grid; gap: 10px; }
.setup-svg { width: 100%; height: auto; display: block; background: var(--ground); border: 1px solid var(--rule); border-radius: 12px; padding: 8px; }
.setup-fig figcaption { font-size: 13px; color: var(--soft); text-align: center; }
@media (max-width: 760px) { .setup-grid { grid-template-columns: 1fr; gap: 24px; } }
.pull-review { margin: 0; padding: 28px 30px; border-left: 3px solid var(--gold); background: var(--ground-2); border-radius: 0 12px 12px 0; display: grid; gap: 14px; }
.pull-review .stars { color: var(--gold); letter-spacing: 2px; }
.pull-review blockquote { margin: 0; }
.pull-review blockquote p { font: italic 400 1.2rem/1.55 var(--display); color: var(--ink); }
.pull-review figcaption { font-size: 14px; color: var(--soft); }
.setup-photo { position: relative; border-radius: 12px; overflow: hidden; }
.setup-photo img { width: 100%; display: block; }
.setup-photo .pin { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: #08140F; display: grid; place-items: center; font: 600 15px/1 var(--text); box-shadow: 0 0 0 4px rgba(13,20,17,.55); }
@media (max-width: 760px) { .setup-photo .pin { width: 28px; height: 28px; font-size: 13px; } }
/* Online lessons: sample documents */
.sample-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 860px; }
.sample-docs a { display: grid; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 500; text-align: center; }
.sample-docs img { width: 100%; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.45); transition: transform .2s; }
.sample-docs a:hover img { transform: translateY(-4px); }
.sample-note { font-size: 13px; color: var(--soft); }
@media (max-width: 600px) { .sample-docs { gap: 14px; } .sample-docs a { font-size: 13px; } }
#doc-summary figure, #doc-map figure { width: auto; max-width: min(92vw, 720px); }
#doc-summary img, #doc-map img { max-height: 84vh; width: auto; max-width: 100%; margin: 0 auto; }
#doc-summary figure, #doc-map figure { margin-top: 48px; }
#doc-summary .lb-close, #doc-map .lb-close { top: -46px; right: 0; }
.zoom-view { margin: 0; display: grid; gap: 10px; }
.zoom-view figcaption { font-size: 13px; color: var(--soft); text-align: center; }
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rec-grid figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.rec-grid figcaption { font-size: 14px; color: var(--soft); display: grid; gap: 4px; }
.rec-grid figcaption b { color: var(--ink); font-weight: 500; font-size: 15px; }
@media (max-width: 700px) { .rec-grid { grid-template-columns: 1fr; } }
.mid-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 24px 28px; border: 1px solid var(--rule); border-radius: 12px; background: var(--ground); margin-top: 8px; }
.mid-cta p { max-width: 520px; }
@media (max-width: 600px) { .mid-cta { padding: 20px; } .mid-cta .btn { width: 100%; justify-content: center; } }
/* Google review cards (Reviews page, Home Studio, Online Lessons) */
.rv-wall { columns: 3 300px; column-gap: 24px; }
.rv-wall .rv { break-inside: avoid; margin: 0 0 24px; }
.rv-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: start; }
.rv { background: var(--ground-2); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 22px 20px; display: grid; gap: 14px; }
.rv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.rv-stars .off { color: #3A4A42; }
.rv-tag { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mint); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; }
.rv-text { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.6; color: #D9E0DB; overflow-wrap: anywhere; }
.rv-text p { margin: 0; }
.rv-more summary { list-style: none; cursor: pointer; display: grid; gap: 10px; }
.rv-more summary::-webkit-details-marker { display: none; }
.rv-toggle { color: var(--mint); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.rv-more[open] summary { display: none; }
.rv-full { display: grid; gap: 10px; }
.rv-who { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--rule); padding-top: 14px; }
.rv-who i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 var(--text); font-style: normal; color: #fff; flex: none; }
.rv-who span { display: grid; font-size: 14px; color: var(--ink); }
.rv-who small { font-size: 12px; color: var(--soft); }
.rv-note { font-size: 13px; color: var(--soft); }
/* About: key numbers */
.about-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--rule); }
.about-facts div { padding: 20px 14px; display: grid; gap: 2px; }
.about-facts div + div { border-left: 1px solid var(--rule); }
.about-facts b { font: 500 1.8rem/1.1 var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
.about-facts span { font-size: 13px; color: var(--soft); }
.about-facts a { color: inherit; }
@media (max-width: 640px) {
  .about-facts { grid-template-columns: repeat(2, 1fr); }
  .about-facts div + div { border-left: 0; }
  .about-facts div:nth-child(even) { border-left: 1px solid var(--rule); }
  .about-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.story p:first-of-type { font: italic 400 1.25rem/1.5 var(--display); color: var(--ink); }
/* Tutorials: YouTube thumbnails are 4:3 with bars, crop to 16:9 */
.tut-card img { aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.tut-learn { background: var(--ground-2); border: 1px solid var(--rule); border-radius: 12px; padding: 24px; }
/* Tutorial cards: branded fallback sits underneath the YouTube thumbnail, so the card never shows a broken image */
.tut-card .thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #163A2B, #0A100D 70%); border: 1px solid var(--rule); }
.tut-card .thumb .fb { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 0 22px; }
.tut-card .thumb .fb small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.tut-card .thumb .fb b { font: 500 1.35rem/1.2 var(--display); color: var(--ink); }
.tut-card .thumb .fb i { font-style: normal; font-size: 13px; color: var(--soft); }
.tut-card .thumb .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tut-card .thumb .play { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.35); }
.tut-card .thumb .play::after { content: ""; position: absolute; left: 15px; top: 12px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.tut-card:hover .thumb { border-color: var(--mint); }
/* Home: Instagram reels */
.home .ig-h { font: 500 clamp(1.6rem, 3vw, 2.2rem)/1.2 var(--display); margin-top: 10px; }
.home .ig-lede { color: var(--soft); margin-top: 10px; max-width: 620px; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 32px; }
.ig-card { display: grid; gap: 6px; text-decoration: none; color: var(--ink); align-content: start; }
.ig-img { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); background: #000; }
.ig-img img { width: 100%; height: auto; display: block; }
.ig-likes { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.ig-likes b { color: #FF5A79; font-weight: 400; }
.ig-t { font-size: 14px; font-weight: 500; line-height: 1.3; margin-top: 4px; }
.ig-a { font-size: 12.5px; color: var(--soft); }
.ig-card:hover .ig-img { border-color: var(--mint); }
.ig-card:hover .ig-t { color: var(--mint); }
@media (max-width: 1000px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }