/* =====================================================================
   Music with Mr. B : shared styles for every page
   ---------------------------------------------------------------------
   Look: "Busy bee". Sunny yellow and bee black, rounded type, a cartoon bee,
   honeycomb cells, and dashed "flight trails" that connect things.
   Night mode (dark screens) is black with yellow.

   TO CHANGE A COLOUR: edit it in the :root block just below.
   Each colour appears twice more in the dark-mode blocks; change those
   too if you want night mode to match.
   ===================================================================== */

:root{
  --paper:#FFFDF5;        /* page background, warm white             */
  --paper-2:#FFF3C4;      /* alternate band, pale sunshine yellow    */
  --card:#FFFFFF;         /* cards and boxes                         */
  --ink:#1A1A1A;          /* main text, bee black                    */
  --muted:#4F4836;        /* secondary text                          */
  --faint:#8F8668;        /* captions                                */
  --line:#F0E2AE;         /* thin dividing lines                     */
  --honey:#FFC62E;        /* the yellow: buttons, hexagons, highlights */
  --honey-soft:#FFE9A0;   /* pale yellow for tags and fills          */
  --accent:#805300;       /* links and small labels (dark amber)     */
  --trail:#2B2B2B;        /* dashed flight trails                    */
  --comb:#F3D97E;         /* faint honeycomb texture                 */
  --on-honey:#1A1A1A;     /* text on yellow buttons                  */
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121212; --paper-2:#1A1913; --card:#202019;
    --ink:#F7F2E2; --muted:#C2B995; --faint:#8A8366; --line:#34321F;
    --honey:#FFC62E; --honey-soft:#3D3310; --accent:#FFC62E;
    --trail:#BDB38F; --comb:#2B2918; --on-honey:#1A1A1A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121212; --paper-2:#1A1913; --card:#202019;
    --ink:#F7F2E2; --muted:#C2B995; --faint:#8A8366; --line:#34321F;
    --honey:#FFC62E; --honey-soft:#3D3310; --accent:#FFC62E;
    --trail:#BDB38F; --comb:#2B2918; --on-honey:#1A1A1A;
    color-scheme:dark;
}

/* ---------- the shapes, stored as tiny drawings ---------- */
:root{
  /* dotted flight trail with a loop near the end (the bee sits at the right end) */
  --trail-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 64'%3E%3Cpath d='M6 40 C60 12 110 12 160 34 S260 58 320 34 S400 8 436 28 C458 46 504 54 510 30 C516 4 470 2 466 26 C462 50 520 54 566 38 S600 26 610 27' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='8 8'/%3E%3C/svg%3E");
  /* honeycomb tile */
  --comb-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
  /* hexagon outline, for bullets */
  --hex:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.serif,h1,h2,h3{font-family:"Fredoka","Nunito",sans-serif}
a{color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent); text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:3px solid var(--honey); outline-offset:3px; border-radius:6px}
img{max-width:100%}

/* ---------- bands (page sections) ---------- */
.band{background:var(--paper); position:relative}
.band.alt{background:var(--paper-2); overflow:hidden}
/* faint honeycomb texture tucked into the corner of each alternate band */
.band.alt::before{
  content:""; position:absolute; top:0; right:0; width:min(520px,70%); height:100%;
  background:var(--comb);
  -webkit-mask:var(--comb-shape) 0 0/56px 100px, linear-gradient(to left,#000,transparent 85%);
  -webkit-mask-composite:source-in;
          mask:var(--comb-shape) 0 0/56px 100px, linear-gradient(to left,#000,transparent 85%);
          mask-composite:intersect;
  pointer-events:none;
}
.wrap{
  position:relative; max-width:980px; margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:clamp(52px,8vw,96px);
}
.wrap.tight{padding-block:clamp(36px,6vw,64px)}

/* ---------- top navigation ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav .inner{
  max-width:980px; margin:0 auto; display:flex; align-items:center; gap:6px 22px; flex-wrap:wrap;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:9px;
}
.nav .home{display:flex; align-items:center; gap:10px; margin-right:auto; color:var(--ink); text-decoration:none}
.nav .home img{width:44px; height:auto; display:block}
.nav .home b{font-family:"Fredoka","Nunito",sans-serif; font-weight:600; font-size:20px; letter-spacing:-.01em; line-height:1.05; display:block}
.nav .home small{display:block; font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.02em}
.nav a.lnk{color:var(--muted); font-size:15px; font-weight:700; text-decoration:none; padding-block:4px; border-bottom:2px solid transparent}
.nav a.lnk:hover{color:var(--ink)}
.nav a.lnk[aria-current="page"]{color:var(--ink); border-bottom:3px solid var(--honey)}

/* ---------- type ---------- */
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.005em}
h1{font-size:clamp(40px,6.6vw,70px); line-height:1.04}
h2{font-size:clamp(27px,3.6vw,38px); line-height:1.12}
h3{font-size:21px; line-height:1.25}
.lede{font-size:clamp(19px,2.3vw,22px); line-height:1.5; color:var(--muted); max-width:33em; margin:18px 0 0}
p{margin:16px 0 0; max-width:38em}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.eyebrow::before{content:""; width:12px; height:13px; background:var(--honey); clip-path:var(--hex)}

/* ---------- dotted flight trail with the bee at the end ---------- */
.trail{position:relative; max-width:600px; margin:36px 0 0; padding-right:52px}
.trail::before{
  content:""; display:block; aspect-ratio:10/1; background:var(--trail);
  -webkit-mask:var(--trail-shape) center/contain no-repeat; mask:var(--trail-shape) center/contain no-repeat;
}
.trail img{position:absolute; right:0; top:50%; width:62px; transform:translate(4px,-62%) rotate(-8deg)}

/* ---------- home page hero ---------- */
.hero{display:grid; gap:20px; align-items:center}
@media (min-width:820px){ .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)} }
.hero-art{position:relative; max-width:340px; width:100%; justify-self:center}
.hero-art svg{display:block; width:100%; height:auto}
.hero-art .comb-full{fill:var(--honey); stroke:var(--ink); stroke-width:2.6}
.hero-art .comb-pale{fill:var(--honey-soft); stroke:var(--ink); stroke-width:2.2}
.hero-art .comb-empty{fill:var(--card); stroke:var(--ink); stroke-width:2.2}
.hero-art .flight{fill:none; stroke:var(--trail); stroke-width:3; stroke-linecap:round; stroke-dasharray:8 8}
.hero-art img{position:absolute; width:44%; left:2%; bottom:4%; transform:rotate(-10deg)}
@media (max-width:819px){ .hero-art{max-width:240px; order:-1; justify-self:start} }

/* ---------- cards, linked by a dotted trail ---------- */
.cards{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:30px; margin-top:34px}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cards::before{
  content:""; position:absolute; z-index:0;
  left:50%; top:0; bottom:0; width:4px; margin-left:-2px;
  background:repeating-linear-gradient(to bottom,var(--trail) 0 8px,transparent 8px 16px) center/3px 100% no-repeat;
}
@media (min-width:760px){
  .cards::before{left:0; right:0; top:50%; bottom:auto; width:auto; height:4px; margin:-2px 0 0;
    background:repeating-linear-gradient(to right,var(--trail) 0 8px,transparent 8px 16px) center/100% 3px no-repeat}
}
.card{
  position:relative; z-index:1;
  background:var(--card); border:1.5px solid var(--line); border-radius:18px;
  padding:24px; display:flex; flex-direction:column; gap:8px; min-width:0;
  color:var(--ink); text-decoration:none;
}
.hexnum{
  width:38px; height:42px; display:grid; place-items:center; margin-bottom:6px;
  background:var(--honey); color:var(--on-honey); clip-path:var(--hex);
  font-family:"Fredoka","Nunito",sans-serif; font-weight:600; font-size:18px;
}
.card h3{margin:0}
.card p{margin:0; color:var(--muted); font-size:16px}
.card .go{margin-top:auto; padding-top:14px; font-size:15.5px; font-weight:800; color:var(--accent)}
a.card:hover{border-color:var(--honey); text-decoration:none}
a.card:hover .go{text-decoration:underline}

/* ---------- rows on a path (grades, recommendations, contact) ---------- */
.path{position:relative}
.path::before{
  content:""; position:absolute; left:9px; top:40px; bottom:40px; width:4px;
  background:repeating-linear-gradient(to bottom,var(--trail) 0 8px,transparent 8px 16px) center/3px 100% no-repeat;
}
.row{position:relative; display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px 28px; padding:28px 0 28px 40px; border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row::before{
  content:""; position:absolute; left:0; top:30px; width:22px; height:24px;
  background:var(--honey); clip-path:var(--hex);
}
.row .who{font-family:"Fredoka","Nunito",sans-serif; font-weight:600; font-size:18px; line-height:1.3}
.row .who span{display:block; font-family:"Nunito",sans-serif; color:var(--muted); font-weight:600; font-size:14px; margin-top:3px}
.row p{margin:0}
.row p + p{margin-top:12px}
@media (max-width:560px){ .row{grid-template-columns:minmax(0,1fr); gap:6px} }

/* ---------- small pill links (Quaver, Link Up, etc.) ---------- */
.btns{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:14px}
.btns a{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:15px; font-weight:800; color:var(--on-honey);
  background:var(--honey); border-radius:999px; padding:7px 15px;
}
.btns a.ghost{background:transparent; color:var(--ink); border:2px solid var(--honey); padding:5px 13px}
.btns a:hover{filter:brightness(1.05); text-decoration:underline}

/* ---------- practice tools (big picture cards on In Class) ---------- */
.tools{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:30px; margin-top:30px}
@media (min-width:760px){ .tools{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tool{
  position:relative; z-index:1; display:flex; flex-direction:column; min-width:0;
  background:var(--card); border:1.5px solid var(--line); border-radius:20px; overflow:hidden;
  color:var(--ink); text-decoration:none;
}
.tool img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-bottom:1.5px solid var(--line)}
.tool .txt{padding:20px 22px 22px; display:flex; flex-direction:column; gap:6px}
.tool h3{margin:0}
.tool p{margin:0; color:var(--muted); font-size:16px}
.tool .go{margin-top:8px; font-weight:800; color:var(--accent)}
a.tool:hover{border-color:var(--honey); text-decoration:none}
a.tool:hover .go{text-decoration:underline}

/* ---------- picture + description rows (Music Sites) ---------- */
.media{list-style:none; margin:0; padding:0}
.media li{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:34px 0}
@media (min-width:700px){ .media li{grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:32px; align-items:center} }
/* the dashed flight-trail break between items */
.media li + li{border-top:0; background:repeating-linear-gradient(to right,var(--trail) 0 8px,transparent 8px 16px) top left/100% 3px no-repeat}
.media .pic{display:block; border-radius:18px; overflow:hidden; border:2px solid var(--ink); background:var(--card); transition:transform .15s}
.media .pic img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top}
.media .pic:hover{transform:rotate(-1.2deg) scale(1.02)}
.media .name{font-family:"Fredoka","Nunito",sans-serif; font-weight:600; font-size:24px}
.media .who2{display:block; color:var(--faint); font-size:14px; font-weight:700; margin-top:2px}
.media p{margin:10px 0 0; color:var(--muted); font-size:16.5px; max-width:36em}

/* ---------- music Mr. B loves ---------- */
.loves{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-top:28px}
.love{background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:6px; min-width:0}
.love .disc{width:54px; height:54px; border-radius:50%; margin-bottom:6px;
  background:radial-gradient(circle,var(--honey) 0 9px,var(--ink) 10px 13px,#2E2E2E 14px 100%);
  box-shadow:inset 0 0 0 3px #3A3A3A}
.love h3{margin:0; font-size:20px}
.love .kind{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.love p{margin:0; color:var(--muted); font-size:15.5px}
.love.todo{border:2px dashed var(--faint); background:transparent}
.love.todo .disc{background:transparent; border:2px dashed var(--faint); box-shadow:none}
.love.todo{position:relative; min-height:170px; justify-content:center; align-items:center}
.stamp{display:inline-block; transform:rotate(-8deg); border:3px solid var(--accent); color:var(--accent); border-radius:10px;
  padding:6px 14px; font-family:Fredoka,Nunito,sans-serif; font-weight:600; font-size:22px; letter-spacing:.08em; text-transform:uppercase; opacity:.85}

/* ---------- link list ---------- */
.links{list-style:none; margin:10px 0 0; padding:0}
.links li{position:relative; border-top:1px solid var(--line); padding:22px 0 22px 40px; min-width:0}
.links li:first-child{border-top:0}
.links li::before{content:""; position:absolute; left:0; top:27px; width:22px; height:24px; background:var(--honey); clip-path:var(--hex)}
.links .name{font-family:"Fredoka","Nunito",sans-serif; font-weight:600; font-size:20px}
.links .who2{color:var(--faint); font-size:14px; margin-left:9px; font-weight:700}
.links p{margin:6px 0 0; color:var(--muted); font-size:16px; max-width:44em}
.tag{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.03em;
  color:var(--accent); background:var(--honey-soft); border-radius:999px; padding:3px 11px; margin-top:10px;
}

/* ---------- quote ---------- */
blockquote{
  margin:34px 0 0; padding:4px 0 4px 24px; border-left:4px dashed var(--honey);
  font-family:"Fredoka","Nunito",sans-serif; font-weight:500;
  font-size:clamp(21px,2.6vw,27px); line-height:1.38;
}
blockquote p{margin:0; max-width:30em}

/* ---------- contact box ---------- */
.addr{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:26px; max-width:560px;
  background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:14px 16px;
}
.addr code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:16px; color:var(--ink); word-break:break-all}
button.copy{
  font:inherit; font-size:15px; font-weight:800; cursor:pointer; margin-left:auto;
  background:var(--honey); color:var(--on-honey); border:0; border-radius:999px; padding:8px 18px;
}
button.copy:hover{filter:brightness(1.05)}
.fillin{border:1.5px dashed var(--faint); border-radius:10px; padding:3px 9px; color:var(--muted); font-size:14px; display:inline-block}

/* ---------- footer ---------- */
footer{position:relative; overflow:hidden; border-top:1px solid var(--line); background:var(--paper-2)}
footer .inner{
  position:relative; max-width:980px; margin:0 auto; display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:26px;
  color:var(--muted); font-size:15px;
}
footer img{width:40px; height:auto}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
footer .sp{margin-left:auto; font-weight:700}

@media (max-width:560px){
  .nav .home{flex-basis:100%}
  .nav .inner{gap:2px 14px}
  .nav a.lnk{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}