/* ===========================================================================
   DRUM-CLINIC.COM — shared stylesheet
   Same construction as the Vibes Motor site: fixed dark nav, Bebas Neue
   display, DM Sans body, Playfair italic accents, fine noise overlay.
   Re-pitched from green/gold to vivid dark blue.
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy-deep:#050A18;      /* page background            */
  --navy:#0A1430;           /* nav / footer               */
  --navy-mid:#122252;
  --blue:#0A3CFF;           /* vivid, near-pure blue      */
  --blue-bright:#2E6BFF;
  --blue-light:#6FA0FF;
  --blue-dim:rgba(46,107,255,.20);
  /* cylinder shading for the header and footer rules */
  --bar:linear-gradient(180deg,
      rgb(0,62,21) 0%,   /* top edge */
      #00201C 7%,
      #010F33 20%,
      #031C63 32%,
      #0A3199 40%,
      #4C86E8 44.5%,
      #DCEBFF 46.5%,     /* specular - narrow band */
      #4C86E8 48.5%,
      #0A3199 53%,
      #03153F 64%,
      #010A1C 78%,
      #061E52 90%,       /* bounce light */
      rgb(0,62,21) 100%);/* bottom edge */
  --off-white:#EEF2FA;
  --paper:#FFFFFF;
  --ink:#101828;
  --ink-soft:#3D4A63;
  --muted:#6B7A96;
  --line:#DCE3F0;

  --display:'Bebas Neue',Impact,sans-serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Playfair Display',Georgia,serif;

  --shell:1240px;
  --rail:236px;
  --nav-h:96px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--navy-deep);
  color:var(--ink);
  padding-top:var(--nav-h);
  padding-bottom:56px;          /* clears the pinned footer */
  overflow-x:hidden;
}

/* fine noise, as on the Vibes Motor site */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.035;
  pointer-events:none;
  z-index:1000;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}

.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 18px;z-index:200;text-decoration:none;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

/* ---------- fixed header ------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--navy);
  border-bottom:0;
  padding:0 clamp(1.2rem,3vw,2.4rem);
}
.nav::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:11px;
  background:var(--bar);
  box-shadow:0 4px 16px rgba(10,60,255,.45),
             inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -1px 0 rgba(0,0,0,.65);
}
.nav__inner{
  max-width:var(--shell);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:var(--nav-h);
  gap:.15rem;
}
.nav__top{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
.nav__logo{
  font-family:var(--display);
  font-size:clamp(1.7rem,4vw,2.3rem);
  letter-spacing:.14em;
  color:rgb(0,0,200);
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  /* hard 1px edge top-left lifts the letterforms off the glow */
  text-shadow:
    -1px -1px 0 rgba(190,146,20,.97),
     0 0 16px   rgba(255,231,166,.50),
     0 0 42px   rgba(232,196,104,.42),
     0 0 90px   rgba(212,168,67,.34),
     0 0 165px  rgba(184,146,42,.26),
     0 0 280px  rgba(184,146,42,.16);
}
.nav__byline{
  font-family:var(--serif);
  font-style:italic;
  font-size:.9rem;
  letter-spacing:.04em;
  color:#fff;
  white-space:nowrap;
}
.nav__links{display:flex;align-items:center;flex-wrap:wrap;list-style:none;gap:0}
.nav__links a{
  display:flex;align-items:center;
  height:34px;
  padding:0 .85rem;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(238,242,250,.72);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav__links a:first-child{padding-left:0}
.nav__links a:hover{color:var(--blue-light);background:var(--blue-dim)}
.nav__links a.is-current{color:var(--off-white)}
/* underline the words, not the link's padding */
.nav__links a.is-current span{
  border-bottom:2px solid var(--blue-bright);
  padding-bottom:3px;
}

/* ---------- layout ------------------------------------------------------ */
.sheet{
  max-width:var(--shell);
  margin:clamp(1.2rem,3vw,2.4rem) auto;
  background:var(--paper);
  box-shadow:0 0 60px rgba(0,0,0,.5);
}
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail);
  gap:clamp(.7rem,1.5vw,1.3rem);
  align-items:start;
  padding:clamp(1.5rem,3.4vw,2.8rem) clamp(1.2rem,3vw,2.6rem) clamp(2rem,4vw,3.2rem);
}
.layout > *{min-width:0}

/* right-hand rail, stays with you as the page scrolls */
.rail{
  position:sticky;
  top:calc(var(--nav-h) + 16px);
  max-height:calc(100vh - var(--nav-h) - 70px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.rail__card{border:1px solid var(--line);margin:0 0 1.1rem}
.rail__card:last-child{margin-bottom:0}
.rail__head{
  background:var(--navy);
  color:var(--off-white);
  font-family:var(--display);
  font-size:.95rem;
  letter-spacing:.08em;
  line-height:1.2;
  padding:.6rem .85rem;
  border-bottom:3px solid transparent;
  border-image:var(--bar) 1;
}
.rail__body{padding:.85rem .9rem;font-size:.86rem;line-height:1.6;color:var(--ink-soft)}
.rail__body ul{list-style:none}
.rail__body li{padding:.4rem 0;border-bottom:1px solid var(--line)}
.rail__body li:last-child{border-bottom:0}
.rail__body a{color:var(--blue);text-decoration:none;font-weight:500}
.rail__body a:hover{color:var(--navy);text-decoration:underline}

/* ---------- body copy --------------------------------------------------- */
.eyebrow{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:700;
  margin-bottom:.6rem;
}
.page-title{
  font-family:var(--display);
  font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:.03em;
  line-height:1.04;
  color:var(--navy);
  margin-bottom:.7rem;
}
.page-title span{color:var(--blue)}
.standfirst{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.02rem,2.2vw,1.25rem);
  line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:1.6rem;
}
.section-title{
  font-family:var(--display);
  font-size:clamp(1.35rem,3vw,1.9rem);
  letter-spacing:.04em;
  line-height:1.15;
  color:var(--navy);
  margin:0 0 .9rem;
}
.prose{max-width:76ch;font-size:1rem;line-height:1.75;color:var(--ink)}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose a{font-weight:500}

/* blue rule, the site's repeating divider */
.rule{
  height:9px;
  border-radius:5px;
  background:var(--bar);
  box-shadow:0 2px 10px rgba(10,60,255,.32),
             inset 0 1px 0 rgba(255,255,255,.16),
             inset 0 -1px 0 rgba(0,0,0,.6);
  margin:clamp(1.6rem,3.4vw,2.6rem) 0;
}

/* ---------- pinned footer ----------------------------------------------- */
.footerbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding-top:11px;
  background:var(--navy);
  border-top:0;
}
.footerbar::before{
  content:'';
  position:absolute;left:0;right:0;top:0;
  height:11px;
  background:var(--bar);
  box-shadow:0 -4px 16px rgba(10,60,255,.45),
             inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -1px 0 rgba(0,0,0,.65);
}
.footerbar__inner{
  max-width:var(--shell);
  margin-inline:auto;
  padding:.6rem clamp(1.2rem,3vw,2.4rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.2rem 0;
  font-size:.74rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.footerbar a{color:rgba(238,242,250,.7);text-decoration:none;white-space:nowrap;transition:color .2s}
.footerbar a:hover{color:var(--blue-light)}
.footerbar .sep{color:rgba(61,123,255,.45);padding:0 .8rem}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .rail{position:static;max-height:none;overflow:visible;order:2}
  .nav__links a{font-size:.68rem;padding:0 .55rem}
}
@media (max-width:560px){
  body{padding-bottom:62px}
  .footerbar .sep{display:none}
  .footerbar__inner{gap:.15rem .9rem}
  .nav__byline{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ---------- home page ---------------------------------------------------- */
.clearfix::after{content:'';display:block;clear:both}

.portrait{
  float:right;
  width:200px;
  margin:.2rem 0 1rem 1.8rem;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(5,10,24,.34), 0 3px 8px rgba(5,10,24,.20);
}
.prose .lede{margin-bottom:.5em;letter-spacing:.06em;color:var(--navy)}
.prose .signoff{margin-top:1.4rem}
.prose .signoff img{margin:0}

@media (max-width:560px){
  .portrait{float:none;margin:0 auto 1.2rem}
}

/* ---------- subscription form in the rail -------------------------------- */
.subform label{
  display:block;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--navy);
  margin:0 0 .25rem;
}
.subform label + input{margin-bottom:.7rem}
.subform input[type=text]{
  width:100%;
  font-family:var(--body);
  font-size:.9rem;
  color:var(--ink);
  background:#F7F9FD;
  border:1px solid var(--line);
  border-radius:5px;
  padding:.5rem .6rem;
}
.subform input[type=text]:focus{
  outline:none;
  border-color:var(--blue-bright);
  background:#fff;
  box-shadow:0 0 0 3px rgba(46,107,255,.18);
}
.subform button{
  width:100%;
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.09em;
  color:#fff;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border:0;
  border-radius:6px;
  padding:.55rem .6rem;
  cursor:pointer;
  box-shadow:0 2px 0 #041A66, 0 6px 16px rgba(10,60,255,.32);
  transition:transform .12s ease, box-shadow .12s ease;
}
.subform button:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 0 #041A66, 0 9px 20px rgba(10,60,255,.42);
}
.subform button:active{transform:translateY(1px);box-shadow:0 1px 0 #041A66}

/* ---------- pages with no rail (policies, submit, etc.) ------------------- */
.layout--full{grid-template-columns:minmax(0,1fr)}
.layout--full .prose{max-width:76ch}

.doc-date{
  font-size:.84rem;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
  margin:0 0 1.6rem;
}
.doc-heading{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.6vw,1.55rem);
  letter-spacing:.05em;
  color:var(--navy);
  margin:1.9rem 0 .6rem;
}
.doc-list{margin:0 0 1.1em;padding-left:1.25em}
.doc-list li{margin-bottom:.3em;line-height:1.6}
.doc-address{
  font-style:normal;
  line-height:1.65;
  background:#F2F6FD;
  border-left:3px solid var(--blue);
  border-radius:0 6px 6px 0;
  padding:.9rem 1.1rem;
  margin:0 0 1.2rem;
  display:inline-block;
}
.sites-strip{
  font-family:var(--display);
  font-size:clamp(1rem,2.2vw,1.2rem);
  letter-spacing:.06em;
  color:var(--blue);
  margin:0 0 1rem;
}

/* ---------- opt-in box (rudiments page) ---------------------------------- */
.optin{
  max-width:430px;
  margin:2rem auto;
  background:#E8F1FF;
  border:2px solid var(--navy);
  border-radius:12px;
  box-shadow:0 6px 0 rgba(190,146,20,.55), 0 14px 30px rgba(190,146,20,.30);
  padding:1.2rem 1.4rem 1.3rem;
  text-align:center;
}
.optin__lead{
  font-family:var(--display);
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  letter-spacing:.03em;
  line-height:1.2;
  color:var(--blue);
  margin:0 0 .9rem;
}
.optin__title{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.05em;
  color:var(--navy);
  margin:0 0 .9rem;
}
.optin__title img{width:52px;height:auto;flex:0 0 auto}
.optin .subform label{text-align:left}
.optin .subform input[type=text]{background:#fff}

/* ---------- article furniture -------------------------------------------- */
.byline-card{
  float:left;
  width:150px;
  margin:.2rem 1.5rem 1rem 0;
  text-align:center;
  font-size:.76rem;
  line-height:1.45;
  color:var(--ink-soft);
}
.byline-card img{border-radius:8px;margin:0 0 .5rem;box-shadow:0 6px 18px rgba(5,10,24,.28)}
.byline-card b{color:var(--navy)}

.pull{
  background:var(--navy);
  color:#fff;
  border-radius:10px;
  padding:1rem 1.2rem;
  margin:0 0 1.4rem;
  float:right;
  width:230px;
  margin-left:1.6rem;
  font-style:italic;
  line-height:1.5;
  font-size:.9rem;
}
.pull cite{display:block;margin-top:.6rem;font-style:normal;font-weight:700;color:var(--blue-light)}

.note-box{
  background:#F2F6FD;
  border-left:3px solid var(--blue);
  border-radius:0 6px 6px 0;
  padding:.9rem 1.1rem;
  margin:0 0 1.3rem;
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-soft);
}

.fig{margin:1.4rem 0;text-align:center}
.fig img{margin-inline:auto;border-radius:6px}
.fig figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem;line-height:1.45}
.fig--pair{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;align-items:flex-end}
.fig--pair figure{margin:0}
.fig--l{float:left;margin:.3rem 1.6rem 1rem 0;max-width:280px}
.fig--r{float:right;margin:.3rem 0 1rem 1.6rem;max-width:300px}

.rudlist{
  float:right;width:290px;margin:.3rem 0 1.2rem 1.6rem;
  border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem;background:#FAFBFE;
}
.rudlist h3{font-family:var(--display);font-size:1rem;letter-spacing:.05em;color:var(--navy);margin:0 0 .6rem}
.rudlist table{width:100%;border-collapse:collapse;font-size:.82rem}
.rudlist td{padding:.35rem 0;vertical-align:middle}
.rudlist td:last-child{text-align:right}

.endcard{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:flex-start;margin:1.6rem 0 0}
.endcard img.sq{flex:0 0 auto;width:260px;border-radius:10px;box-shadow:0 8px 24px rgba(5,10,24,.28)}
.endcard__body{flex:1 1 260px;min-width:0}
.endcard__sig{margin-top:1.2rem;text-align:right}
.endcard__sig img{display:inline-block}
.endcard__sig span{display:block;font-size:.74rem;font-weight:700;color:var(--muted);margin-top:.3rem}

@media (max-width:640px){
  .pull,.rudlist,.fig--l,.fig--r,.byline-card{float:none;width:auto;max-width:100%;margin:1.2rem 0}
  .endcard img.sq{width:100%}
}

/* quote standfirst, with the author photo beside it */
.standfirst--quote{
  color:#1B7A4B;
  border-left:3px solid #1B7A4B;
  padding-left:1.1rem;
  margin-bottom:1.4rem;
}
.standfirst--quote::before,.standfirst--quote::after{content:none}

/* opt-in when it sits in the narrow rail */
.optin--rail{
  max-width:none;
  margin:0 0 1.1rem;
  padding:1rem 1rem 1.1rem;
  border-radius:10px;
  box-shadow:0 5px 0 rgba(190,146,20,.55), 0 10px 22px rgba(190,146,20,.28);
}
.optin--rail .optin__lead{font-size:1rem;margin-bottom:.7rem}
.optin--rail .optin__title{font-size:.98rem;gap:.5rem;margin-bottom:.7rem}
.optin--rail .optin__title img{width:40px}


/* ---------- confirmation / notice panels --------------------------------- */
.notice{border-radius:10px;padding:1.1rem 1.3rem;margin:0 0 1.3rem}
.notice__title{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.6vw,1.4rem);
  letter-spacing:.06em;
  margin:0 0 .45rem;
}
.notice p:last-child{margin-bottom:0}
/* the thing they still have to do */
.notice--action{
  background:#FFF6E2;
  border:2px solid rgba(190,146,20,.85);
  box-shadow:0 5px 0 rgba(190,146,20,.45), 0 12px 26px rgba(190,146,20,.24);
}
.notice--action .notice__title{color:#8A6A0C;text-transform:uppercase}
.notice--tip{background:#E8F1FF;border:2px solid var(--navy)}
.notice--tip .notice__title{color:var(--blue)}

.endnote{
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:1.6rem;margin-top:1.6rem;
}
.endnote img.cover{flex:0 0 auto;width:230px;border-radius:10px;box-shadow:0 8px 24px rgba(5,10,24,.30)}
.endnote__body{flex:1 1 260px;min-width:0}
.backnote{
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .8rem;
}
.postal{font-style:normal;font-size:.8rem;line-height:1.6;color:var(--muted);margin-top:1.2rem}
@media (max-width:560px){.endnote img.cover{width:100%}}

.signoff--centre{text-align:center;margin:1.8rem 0 1.4rem}
.signoff--centre img{margin-inline:auto}
.signoff__enjoy{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.8vw,1.5rem);
  letter-spacing:.06em;
  color:var(--navy);
  margin:0 0 .5rem;
}

/* ---------- download delivery page --------------------------------------- */
.byline-card--right{float:right;margin:.2rem 0 1rem 1.5rem}

.download{
  max-width:520px;
  margin:1.8rem 0 0;
  background:#E8F1FF;
  border:2px solid var(--navy);
  border-radius:12px;
  box-shadow:0 6px 0 rgba(190,146,20,.55), 0 14px 30px rgba(190,146,20,.30);
  padding:1.4rem 1.5rem 1.5rem;
  text-align:center;
}
.download__lead{
  font-family:var(--display);
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  letter-spacing:.03em;
  color:var(--navy);
  margin:0 0 1rem;
}
.download__btn{margin:0 0 .9rem}
.download__btn a{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(1.6rem,4vw,2.2rem);
  letter-spacing:.09em;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border-radius:8px;
  padding:.5rem 1.8rem;
  box-shadow:0 3px 0 #041A66, 0 8px 20px rgba(10,60,255,.36);
  transition:transform .12s ease, box-shadow .12s ease;
}
.download__btn a:hover{transform:translateY(-2px);box-shadow:0 5px 0 #041A66, 0 12px 26px rgba(10,60,255,.46)}
.download__btn a:active{transform:translateY(1px);box-shadow:0 1px 0 #041A66}
.download__note{font-size:.84rem;color:var(--ink-soft);margin:0}

.endnote__sig{margin-top:1.2rem;text-align:right}
.endnote__sig img{display:inline-block}
.endnote__sig span{display:block;font-size:.74rem;font-weight:700;color:var(--muted);margin-top:.3rem}

@media (max-width:560px){
  .byline-card--right{float:none;margin:0 auto 1.2rem}
}

/* ---------- free stuff: download cards and lessons ----------------------- */
.dl-grid{display:grid;gap:1rem;margin:0 0 1.6rem}
.dl{
  display:flex;align-items:center;gap:1.1rem;
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:10px;
  background:#FAFBFE;
  padding:.9rem 1.1rem;
  transition:box-shadow .14s ease, transform .14s ease;
}
.dl:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,60,255,.14)}
.dl__body{
  flex:1 1 auto;min-width:0;
  display:block;
  text-decoration:none;
  color:inherit;
}
.dl__title{
  display:block;
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.03em;
  color:var(--navy);
  margin:0 0 .2rem;
}
.dl__sub{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.dl__cue{
  display:block;
  margin-top:.35rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#1B7A4B;
}
.dl__body:hover .dl__title{color:var(--blue)}
.dl__body:hover .dl__cue{color:#0F5C38;text-decoration:underline}
.dl__vid{flex:0 0 auto;text-align:center;text-decoration:none}
.dl__vid img{border-radius:6px;border:1px solid var(--line)}
.dl__vid span{
  display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--blue);margin-top:.3rem;
}
.dl__vid:hover img{border-color:var(--blue-bright)}

.lesson-list{display:grid;gap:1rem;margin:0 0 1.6rem}
.lesson{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  padding:1rem 1.2rem;
}
.lesson__title{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.03em;
  color:var(--navy);
  margin:0 0 .4rem;
}
.lesson p{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink-soft)}
.lesson__go{margin-top:.8rem !important}
.lesson__go a{
  display:inline-block;
  font-family:var(--display);
  font-size:.98rem;
  letter-spacing:.07em;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border-radius:6px;
  padding:.4rem 1.1rem;
  box-shadow:0 2px 0 #041A66;
}
.lesson__go a:hover{box-shadow:0 3px 0 #041A66, 0 6px 16px rgba(10,60,255,.32)}

.banner{text-align:center;margin:1.6rem 0}
.banner img{margin-inline:auto;border-radius:8px;box-shadow:0 6px 18px rgba(5,10,24,.22)}

.jumpline{
  text-align:center;
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.03em;
  margin:1.4rem 0;
  color:var(--muted);
}
.jumpline a{color:var(--blue);text-decoration:none;border-bottom:2px solid rgba(46,107,255,.3)}
.jumpline a:hover{color:var(--navy);border-bottom-color:var(--navy)}
.lesson__body{min-width:0}

/* jump buttons */
.jumpbtns{
  float:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.55rem;
  margin:.2rem 1.6rem 1.1rem 0;
  max-width:250px;
}
.jumpbtns a{
  display:block;
  width:100%;
  text-align:center;
  font-family:var(--display);
  font-size:.95rem;
  letter-spacing:.05em;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border-radius:6px;
  padding:.42rem 1rem;
  box-shadow:0 2px 0 #041A66;
  transition:transform .12s ease, box-shadow .12s ease;
}
.jumpbtns a:hover{transform:translateY(-1px);box-shadow:0 3px 0 #041A66, 0 6px 16px rgba(10,60,255,.32)}

/* password reveal */
.pw{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.pw__text{flex:1 1 260px;min-width:0;margin:0 !important}
.pw__reveal{flex:0 0 auto;margin-left:auto}
.pw__reveal summary{
  list-style:none;
  cursor:pointer;
  display:inline-block;
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border-radius:7px;
  padding:.5rem 1.3rem;
  box-shadow:0 3px 0 #041A66, 0 8px 20px rgba(10,60,255,.30);
  transition:transform .12s ease, box-shadow .12s ease;
}
.pw__reveal summary::-webkit-details-marker{display:none}
.pw__reveal summary:hover{transform:translateY(-1px);box-shadow:0 4px 0 #041A66, 0 11px 24px rgba(10,60,255,.40)}
.pw__reveal[open] summary{background:var(--navy);box-shadow:0 2px 0 #010A1C}
.pw__reveal p{
  margin:.8rem 0 0;
  background:var(--paper);
  border:2px solid var(--navy);
  border-radius:8px;
  padding:.7rem .9rem;
  font-size:.92rem;
  line-height:1.5;
  text-align:center;
}
.pw__reveal p b{color:var(--blue);font-size:1.08rem;letter-spacing:.03em}

/* lesson titles are green links, with a green button */
.lesson__title a{color:#1B7A4B;text-decoration:none}
.lesson__title a:hover{color:#0F5C38;text-decoration:underline}
.lesson__go a{background:linear-gradient(180deg,#25A164,#1B7A4B);box-shadow:0 2px 0 #0C3D25}
.lesson__go a:hover{box-shadow:0 3px 0 #0C3D25, 0 6px 16px rgba(27,122,75,.34)}

@media (max-width:560px){
  .dl{flex-wrap:wrap}
  .pw__reveal{margin-left:0}
}

/* ---------- recommended products ----------------------------------------- */
.product{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:flex-start;margin:0 0 .4rem}
.product__shot{flex:0 0 auto}
.product__shot img{
  width:150px;height:auto;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(5,10,24,.28);
  transition:transform .14s ease, box-shadow .14s ease;
}
.product__shot:hover img{transform:translateY(-2px);box-shadow:0 12px 30px rgba(5,10,24,.38)}
.product__body{flex:1 1 300px;min-width:0;font-size:1rem;line-height:1.7;color:var(--ink)}
.product__body p{margin:0 0 1em}
.product__title{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2rem);
  letter-spacing:.05em;
  line-height:1.1;
  margin:0 0 .25rem;
}
.product__title a{color:var(--blue);text-decoration:none}
.product__title a:hover{color:var(--navy);text-decoration:underline}
.product__by{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--ink-soft);
  margin:0 0 1.1rem !important;
}
.flag{
  display:inline-block;
  font-family:var(--body);
  font-style:normal;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
  background:#C4761A;
  border-radius:4px;
  padding:.15rem .5rem;
  margin-left:.4rem;
  vertical-align:middle;
}
.product__note{overflow:hidden}
.product__note img{float:left;margin:0 1rem .5rem 0;width:90px}
.product__format{
  font-weight:700;
  letter-spacing:.05em;
  color:var(--blue);
}
.product__go a{
  display:inline-block;
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.06em;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border-radius:7px;
  padding:.5rem 1.3rem;
  box-shadow:0 3px 0 #041A66, 0 8px 20px rgba(10,60,255,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.product__go a:hover{transform:translateY(-1px);box-shadow:0 4px 0 #041A66, 0 11px 24px rgba(10,60,255,.38)}
.product__go a:active{transform:translateY(1px);box-shadow:0 1px 0 #041A66}

@media (max-width:560px){
  .product__shot img{width:120px}
  .product__note img{float:none;margin:0 auto .7rem}
}

/* ---------- submit page call to action ----------------------------------- */
.submit-cta{text-align:center;margin:2rem 0 1rem}
.submit-cta a{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(1.3rem,3.2vw,1.7rem);
  letter-spacing:.07em;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border-radius:9px;
  padding:.7rem 2rem;
  box-shadow:0 4px 0 #041A66, 0 10px 26px rgba(10,60,255,.34);
  transition:transform .12s ease, box-shadow .12s ease;
}
.submit-cta a:hover{transform:translateY(-2px);box-shadow:0 6px 0 #041A66, 0 14px 32px rgba(10,60,255,.44)}
.submit-cta a:active{transform:translateY(2px);box-shadow:0 2px 0 #041A66}
.submit-cta__addr{
  display:block;
  margin-top:.8rem;
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--muted);
}

/* ---------- post index cards --------------------------------------------- */
.post{
  display:flex;
  gap:1.3rem;
  align-items:flex-start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 3px 10px rgba(5,10,24,.08), 0 12px 28px rgba(5,10,24,.10);
  padding:1.2rem 1.4rem;
  margin:0 0 1.3rem;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.post:hover{
  transform:translateY(-2px);
  border-color:#C6D6EF;
  box-shadow:0 5px 14px rgba(10,60,255,.12), 0 18px 38px rgba(10,60,255,.16);
}
.post__thumb{flex:0 0 auto}
.post__thumb img{
  width:130px;height:auto;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(5,10,24,.22);
}
.post__body{flex:1 1 auto;min-width:0}
.post__meta{
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  margin:0 0 .35rem;
}
.post__dot{padding:0 .5rem;color:var(--blue-light)}
.post__author{color:var(--blue)}
.post__title{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.6vw,1.5rem);
  letter-spacing:.03em;
  line-height:1.15;
  margin:0 0 .5rem;
}
.post__title a{color:var(--navy);text-decoration:none}
.post:hover .post__title a{color:var(--blue)}
.post__summary{font-size:.94rem;line-height:1.65;color:var(--ink-soft);margin:0}
.post__more{margin:.7rem 0 0}
.post__more a{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue);
  text-decoration:none;
  border-bottom:2px solid rgba(46,107,255,.3);
}
.post__more a:hover{color:var(--navy);border-bottom-color:var(--navy)}

@media (max-width:560px){
  .post{flex-direction:column}
  .post__thumb img{width:100%;max-width:220px}
}

/* ---------- rail post list (mirrors latest-content.html) ----------------- */
.rail-posts{list-style:none;margin:0;padding:0}
.rail-posts li{padding:.55rem 0;border-bottom:1px solid var(--line)}
.rail-posts li:last-child{border-bottom:0}
.rail-posts__title{
  display:block;
  font-weight:500;
  line-height:1.35;
  color:var(--blue);
  text-decoration:none;
}
.rail-posts__title:hover{color:var(--navy);text-decoration:underline}
.rail-posts__meta{
  display:block;
  margin-top:.2rem;
  font-size:.74rem;
  line-height:1.35;
  color:var(--muted);
}

/* ---------- individual post pages ---------------------------------------- */
.postmeta{
  font-size:.76rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  margin:0 0 1.4rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.postsig{
  border-left:3px solid var(--blue);
  background:#F2F6FD;
  border-radius:0 8px 8px 0;
  padding:1rem 1.2rem;
  margin:1.6rem 0 0;
  line-height:1.6;
}
.postsig p{margin:0}
.backlink{margin:1.6rem 0 0}
.backlink a{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue);
  text-decoration:none;
  border-bottom:2px solid rgba(46,107,255,.3);
}
.backlink a:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* responsive video embed */
.video{
  position:relative;
  aspect-ratio:16/9;
  max-width:560px;
  margin:0 0 1.6rem;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(5,10,24,.28);
  background:#000;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- quoted email exchange ---------------------------------------- */
.email{
  background:#F4F7FC;
  border:1px solid var(--line);
  border-left:3px solid var(--muted);
  border-radius:0 8px 8px 0;
  padding:1rem 1.2rem;
  margin:0 0 1.4rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.email p{margin:0 0 .8em}
.email p:last-child{margin:0}
.email__head{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;
  line-height:1.7;
  color:var(--muted);
  padding-bottom:.7em;
  border-bottom:1px solid var(--line);
}
.email__link{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.84rem;
  color:var(--muted);
  word-break:break-all;
}
.replyfrom{
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 .9rem;
}

/* numbered tip headings within a post */
.prose .tip{
  font-family:var(--display);
  font-size:1.2rem;
  letter-spacing:.04em;
  line-height:1.2;
  color:var(--navy);
  border-left:4px solid var(--blue);
  padding-left:.7rem;
  margin:1.9em 0 .7em;
}

/* light aside for a post footnote */
.footnote{
  background:#F4F7FC;
  border:1px dashed #B9C8DE;
  border-radius:8px;
  padding:1rem 1.2rem;
  margin:1.6rem 0 0;
  font-size:.92rem;
  line-height:1.65;
  color:var(--ink-soft);
}
.footnote p{margin:0}
.footnote__title{
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--navy);
  margin:0 0 .5em !important;
}

/* video part label + numbered movement steps */
.vidlabel{
  font-family:var(--display);
  font-size:1.1rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 .5rem;
}
.steps{margin:0 0 1.2em;padding-left:1.4em}
.steps li{margin-bottom:.9em;line-height:1.7;padding-left:.3em}
.steps li::marker{font-weight:700;color:var(--blue)}

/* ---------- practice post: chart, key box, progress line, versus --------- */
.chart{margin:1.6rem 0;text-align:center}
.chart svg{width:100%;height:auto;max-width:660px;margin-inline:auto;display:block}
.chart figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem;line-height:1.45}

.keybox{
  background:var(--navy);
  color:#fff;
  border-radius:12px;
  padding:1.3rem 1.5rem;
  margin:1.6rem 0;
  line-height:1.7;
}
.keybox p{margin:0 0 .8em}
.keybox p:last-child{margin:0}
.keybox b{color:#9CC2FF}
.keybox__punch{
  font-family:var(--display);
  font-size:clamp(1.4rem,3.4vw,2rem);
  letter-spacing:.04em;
  line-height:1.1;
  color:#fff;
  margin:.4em 0 .5em !important;
}

.progline{display:flex;align-items:center;gap:.8rem;margin:1.4rem 0}
.progline__end{
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:.08em;
  color:var(--muted);
  flex:0 0 auto;
}
.progline__end--good{color:var(--blue)}
.progline__track{
  flex:1 1 auto;
  height:14px;
  border-radius:7px;
  background:
    repeating-linear-gradient(90deg,#DCE3F0 0 2px,transparent 2px 26px),
    linear-gradient(90deg,#C6D0E2,#2E6BFF);
}

.versus{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin:1.6rem 0}
.versus--stack .versus__side{flex:1 1 260px}
.versus__side{
  flex:0 1 200px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.1rem 1.2rem;
  background:#FAFBFE;
}
.versus__side--win{
  border-color:#9ED8B7;
  background:#F0FBF4;
  box-shadow:0 6px 18px rgba(21,128,61,.14);
}
.versus__num{
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,3.4rem);
  line-height:1;
  color:var(--muted);
  margin:0 0 .3rem;
}
.versus__side--win .versus__num{color:#15803D}
.versus__cap{font-size:.9rem;line-height:1.45;color:var(--ink-soft);margin:0}
.versus__cap--long{font-size:.92rem}
.versus__or{
  font-family:var(--display);
  font-size:1.1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

/* sticking patterns */
.sticking{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(1.05rem,2.6vw,1.35rem);
  letter-spacing:.22em;
  text-align:center;
  color:var(--navy);
  background:#F2F6FD;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.85rem 1rem;
  margin:0 0 1.4rem;
}
.sticking--alt{background:#E8F1FF;border-color:#C6D6EA}
.sticking b{color:var(--blue);font-weight:700}
.sticking__key{
  text-align:center;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--muted);
  margin:-1rem 0 1.4rem;
}

.section-title__sub{
  display:block;
  font-family:var(--body);
  font-size:.86rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--muted);
  margin-top:.25rem;
}

.fig--stack{display:flex;flex-direction:column;align-items:center;gap:.9rem}

/* reader question block */
.question{
  position:relative;
  background:#E8F1FF;
  border:1px solid #C6D6EA;
  border-left:4px solid var(--blue);
  border-radius:0 10px 10px 0;
  padding:1.1rem 1.3rem 1.1rem 3.6rem;
  margin:0 0 1.4rem;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ink);
}
.question p{margin:0}
.question__mark{
  position:absolute;
  left:1.1rem;top:.75rem;
  font-family:var(--display);
  font-size:2.1rem;
  line-height:1;
  color:var(--blue);
  opacity:.55;
}

/* placeholder for media not yet recovered */
.mediaslot{
  border:2px dashed #C6D0E2;
  border-radius:10px;
  background:#FAFBFE;
  padding:1rem 1.2rem;
  margin:0 0 1.2rem;
  text-align:center;
}
.mediaslot__label{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--blue);margin:0 0 .3rem;
}
.mediaslot__title{
  font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;
  color:var(--navy);margin:0 0 .3rem;
}
.mediaslot__note{font-size:.82rem;color:var(--muted);margin:0}

/* self-hosted video file (not an iframe embed) */
.video--file{background:#000}
.video--file video{position:absolute;inset:0;width:100%;height:100%;display:block}

/* notation exported at 2x - display at half so it stays sharp on retina */
.fig--sheet img{width:100%;max-width:800px;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}

.question__by{margin-top:.7em !important;font-size:.86rem;font-weight:700;color:var(--blue);text-align:right}
.question p + p{margin-top:.8em !important}

/* call-to-action button linking out to a feature article */
.gcta{text-align:center;margin:1.8rem 0}
.btn--article{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(1.15rem,2.8vw,1.45rem);
  letter-spacing:.07em;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border-radius:9px;
  padding:.65rem 1.9rem;
  box-shadow:0 4px 0 #041A66, 0 10px 26px rgba(10,60,255,.32);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn--article:hover{transform:translateY(-2px);box-shadow:0 6px 0 #041A66, 0 14px 32px rgba(10,60,255,.42)}
.btn--article:active{transform:translateY(2px);box-shadow:0 2px 0 #041A66}