/* The burgundy theme, in the Shika Group palette (shika.group/assets/css/shika.css,
   read 28 Sep 2026): plum #210911, stage #3A0810 to #4A0C18, claret bloom #8E1C2A,
   ivory #F2EBE1. Her signature gold #c9a84c stays for buttons and accents so the site
   and the ads still match; Shika's warmer #C9A468 is used for soft light.
   Loaded after courses.css. Remove the <link> to return to navy. */
:root{
  --bg:#1a060c;--bg2:#2a050c;--panel:rgba(242,235,225,.045);
  --line:rgba(242,235,225,.11);--cream:#f2ebe1;--body:rgba(242,235,225,.84);--faint:rgba(242,235,225,.66);
  --plum:#210911;--stage:#3a0810;--stage-mid:#4a0c18;--claret:#8e1c2a;--gold-lift:#c9a468;
}
html{background:#1a060c}
body{background:#1a060c}

/* Heroes: the Shika stage, a claret bloom top right and a gold ember bottom left */
.c-hero,.i-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 60% at 76% 6%,rgba(142,28,42,.78),transparent 66%),
    radial-gradient(50% 46% at 6% 100%,rgba(176,138,71,.16),transparent 70%),
    linear-gradient(180deg,#2a050c 0%,#4a0c18 55%,#24060c 100%);
}
.c-hero>.wrap,.i-hero>.wrap{position:relative;z-index:1}

/* Nav, drawer, phone bar: plum glass */
nav{background:rgba(26,6,12,.86);border-bottom-color:rgba(242,235,225,.09)}
.mob-menu{background:rgba(26,6,12,.97)}
.mbar{background:rgba(26,6,12,.94);border-top-color:rgba(201,164,104,.35)}

/* Section rhythm: alternate plum and a warmer stage */
.fishrod,.proof{background:linear-gradient(180deg,#1a060c,#2a050c)}
.band{background:radial-gradient(ellipse 60% 90% at 15% 50%,rgba(201,164,104,.22),transparent 65%),#3a0810;border-block-color:rgba(201,164,104,.28)}
.reserve{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(142,28,42,.55),transparent 62%),linear-gradient(180deg,#2a050c,#1a060c)}

/* Glass cards with a warm edge */
.fr,.ccard,.card,.bcard{background:linear-gradient(168deg,rgba(242,235,225,.07),rgba(242,235,225,.018))}
.fr.fish,.card{border-color:rgba(201,164,104,.45);box-shadow:0 0 60px -26px rgba(201,164,104,.55)}
.ccard:hover,.bcard:hover{border-color:rgba(201,164,104,.6);box-shadow:0 26px 60px -24px rgba(0,0,0,.7),0 0 40px -18px rgba(201,164,104,.55)}
.portrait,.bcard .shot{background:#2e101a}
.portrait{border-color:rgba(201,164,104,.4);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 70px -26px rgba(142,28,42,.9)}
.portrait::after{background:linear-gradient(180deg,transparent 55%,rgba(26,6,12,.9))}
.field input,.field textarea{background:rgba(26,6,12,.55);border-color:rgba(242,235,225,.18)}
.btn-ghost{background:rgba(26,6,12,.35)}
.syl .task,.awards li{background:rgba(201,164,104,.07);border-color:rgba(201,164,104,.32)}
.instr blockquote{background:rgba(242,235,225,.05)}

/* The gold strip becomes champagne on claret, softer than a solid gold bar */
.marquee{background:linear-gradient(90deg,#6e101f,#8e1c2a 50%,#6e101f);color:#f2ebe1;border-block-color:rgba(201,164,104,.4)}
.marquee .track span::after{color:#c9a468;opacity:.9}

/* Sparkle layer (courses/sparkle.js draws into it); sits behind the hero content */
.sparkle{position:absolute;inset:0;z-index:0;pointer-events:none}

/* The cookie banner is drawn by js/wgo.js in navy; match it to the page */
html #wgo-consent{background:rgba(33,9,17,.96)!important;border-color:rgba(201,164,104,.38)!important}
html #wgo-consent .no{background:transparent!important}

/* Plain sections carry a soft claret light, alternating sides, so the whole page reads
   as burgundy rather than only the hero */
body{background:#200710}
html{background:#200710}
.summary,.aboutc,.needs,.others{background:radial-gradient(55% 60% at 92% 0%,rgba(142,28,42,.34),transparent 72%)}
.foryou,.instr,.syllabus{background:radial-gradient(55% 60% at 6% 0%,rgba(142,28,42,.3),transparent 72%)}
.i-hero+.marquee+section{background:radial-gradient(55% 60% at 92% 0%,rgba(142,28,42,.34),transparent 72%)}
footer{background:linear-gradient(180deg,#200710,#16050a)}

/* ============================================================
   LIGHT AND DEPTH (proposal, 28 Sep 2026)
   The page alternates ivory rooms and burgundy rooms, as shika.group does:
   hero (burgundy) > summary (ivory) > fish and rod (claret) > for you (ivory)
   > band (claret) > about (ivory) > instructor (plum) > proof (ivory)
   > syllabus (claret) > needs (ivory) > reserve (claret) > others (ivory) > footer.
   Ivory sections redefine the colour tokens, so every existing rule that reads
   var(--cream), var(--body), var(--faint), var(--gold) or var(--line) flips to
   the light palette by itself, inline style="color:var(--gold)" links included.
   Buttons never sit in an ivory section, so the signature gold #c9a84c on the
   buttons is untouched.
   ============================================================ */

/* 1. Ivory tokens. Contrast on #F6F1E9: plum 15.9:1, body 10.4:1, faint 6.6:1,
   deep gold #7a5a22 5.4:1 (AA for the small uppercase labels). */
.summary,.foryou,.aboutc,.proof,.needs,.others,.i-hero+.marquee+section{
  --cream:#241016;--body:#4a3238;--faint:#6b5359;--gold:#7a5a22;
  --line:rgba(36,16,22,.13);--panel:#fffdf9;
  color:#241016;
  background:
    radial-gradient(60% 70% at 100% 0%,rgba(176,138,71,.13),transparent 70%),
    radial-gradient(50% 60% at 0% 100%,rgba(142,28,42,.06),transparent 70%),
    linear-gradient(180deg,#f7f2ea,#f2ebe1);
}
/* Every second ivory room is a touch warmer so two ivory bands never look pasted */
.foryou,.proof,.others{
  background:
    radial-gradient(60% 70% at 0% 0%,rgba(176,138,71,.14),transparent 70%),
    linear-gradient(180deg,#f2ebe1,#efe6d9);
}
.summary ::selection,.foryou ::selection,.aboutc ::selection,.proof ::selection,.needs ::selection,.others ::selection{background:rgba(176,138,71,.3)}
.summary .eyebrow::before,.foryou .eyebrow::before,.aboutc .eyebrow::before,.proof .eyebrow::before,.needs .eyebrow::before,.others .eyebrow::before{background:linear-gradient(90deg,#b08a47,transparent)}

/* Ivory details that were hard-coded white in courses.css */
.foryou-grid h3::before{background:linear-gradient(90deg,#b08a47,rgba(176,138,71,.15));height:2px;width:44px}
.about-row h3::before{color:#7a5a22}
.faq summary::after{color:#7a5a22}
.need-list li,.faq details,.about-rows,.about-row{border-color:rgba(36,16,22,.12)}

/* Ivory cards: paper on linen, a real layered shadow instead of a glow */
.proof .bcard,.others .ccard{
  background:linear-gradient(180deg,#fffdf9,#fbf6ee);
  border:1px solid rgba(176,138,71,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(36,16,22,.06),0 12px 28px -14px rgba(58,8,16,.22),0 30px 60px -36px rgba(58,8,16,.28);
}
.proof .bcard .shot{background:#ebe2d4;border-bottom-color:rgba(176,138,71,.22)}
.proof .bcard:hover,.others .ccard:hover{
  border-color:rgba(176,138,71,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(36,16,22,.06),0 22px 40px -16px rgba(58,8,16,.3),0 44px 80px -40px rgba(142,28,42,.35);
}
.bookproof .bp-photo::before{background:radial-gradient(circle,rgba(176,138,71,.38),transparent 68%)}
.proof .awards li{background:#fffdf9;border-color:rgba(176,138,71,.35);box-shadow:0 10px 24px -18px rgba(58,8,16,.3)}
.proof .awards li b{color:#7a5a22}

/* 2. Burgundy rooms: richer claret mid-tones, lit from one side, never flat black */
.fishrod{background:
  radial-gradient(60% 70% at 88% 0%,rgba(142,28,42,.62),transparent 70%),
  radial-gradient(45% 50% at 0% 100%,rgba(201,164,104,.14),transparent 70%),
  linear-gradient(180deg,#3a0810,#4a0c18 60%,#3a0810)}
.instr{background:
  radial-gradient(55% 65% at 100% 20%,rgba(142,28,42,.55),transparent 70%),
  linear-gradient(180deg,#2c0710,#3d0a15)}
.syllabus{background:
  radial-gradient(60% 50% at 10% 0%,rgba(142,28,42,.55),transparent 70%),
  radial-gradient(40% 40% at 100% 100%,rgba(201,164,104,.12),transparent 70%),
  linear-gradient(180deg,#3a0810,#300711)}
.band{background:
  radial-gradient(ellipse 60% 90% at 15% 50%,rgba(201,164,104,.26),transparent 65%),
  linear-gradient(120deg,#5a0f1d,#7a1626 55%,#5a0f1d);border-block-color:rgba(201,164,104,.4)}
.reserve{background:
  radial-gradient(ellipse 70% 60% at 50% 0%,rgba(142,28,42,.75),transparent 62%),
  radial-gradient(40% 40% at 90% 100%,rgba(201,164,104,.16),transparent 70%),
  linear-gradient(180deg,#3a0810,#2a050c)}
.fishrod,.instr,.syllabus,.band,.reserve{--body:rgba(242,235,225,.88);--faint:rgba(242,235,225,.72)}

/* 3. Glass with real depth on the burgundy rooms: blur, a lit top edge, layered shadow */
.fr,.card,.syl .task,.instr blockquote{
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,244,228,.14),0 2px 6px rgba(10,2,4,.25),0 24px 60px -28px rgba(10,2,4,.7);
}
.fr{background:linear-gradient(160deg,rgba(242,235,225,.10),rgba(242,235,225,.03) 60%);border-color:rgba(242,235,225,.16);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .5s}
.fr.fish,.card{border-color:rgba(201,164,104,.5);box-shadow:inset 0 1px 0 rgba(255,244,228,.18),0 2px 6px rgba(10,2,4,.25),0 30px 70px -30px rgba(10,2,4,.75),0 0 70px -28px rgba(201,164,104,.6)}
@media(hover:hover){.fr:hover{transform:translateY(-4px);border-color:rgba(201,164,104,.6)}}
.card{background:linear-gradient(160deg,rgba(242,235,225,.11),rgba(242,235,225,.03) 70%)}
.portrait,.instr .photo{box-shadow:0 2px 0 rgba(255,244,228,.08) inset,0 50px 100px -40px rgba(10,2,4,.85),0 0 90px -30px rgba(142,28,42,.95)}
.instr .photo{border-color:rgba(201,164,104,.4)}

/* 4. Air and scale: calmer rhythm for a senior reader */
section{padding:6.5rem 0}
@media(max-width:700px){section{padding:4.5rem 0}}
.sec-title{letter-spacing:-.015em}
.lead{line-height:1.8}
.summary h2{max-width:18ch}

/* 5. Footer: dark plum so the page closes on the same stage it opened on */
footer{background:radial-gradient(50% 60% at 90% 0%,rgba(142,28,42,.35),transparent 70%),linear-gradient(180deg,#24060c,#16050a);border-top-color:rgba(201,164,104,.25)}

@media(prefers-reduced-motion:reduce){.fr{transition:none}.fr:hover{transform:none}}

/* 6. The nav passes over ivory now: more opaque plum so it never turns muddy brown */
nav{background:rgba(33,9,17,.94);box-shadow:0 10px 30px -18px rgba(10,2,4,.6)}

/* A solid ivory under the gradients, so the ivory rooms stay ivory even where a
   gradient does not paint (and the contrast audit measures against ivory). */
.summary,.aboutc,.needs,.i-hero+.marquee+section{background-color:#f4eee5}
.foryou,.proof,.others{background-color:#f1e9dd}
