/* Caruth Piano Studio - shared subpage styles */
:root{
  --ink:#211c15; --ink-2:#2b241b;
  --ivory:#f7f1e4; --ivory-dim:#dbd4c3;
  --gold:#d2ac62; --gold-soft:#b3965c; --gold-hi:#e0bb70;
  --ink-rgb:33,28,21; --ink0-rgb:28,24,18; --ink2-rgb:38,32,24;
  --ivory-rgb:247,241,228; --gold-rgb:210,172,98;
  --cal-filter:invert(.915) hue-rotate(180deg) sepia(.22) saturate(.82) brightness(1.04);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--ivory);font-family:var(--sans);font-weight:300;line-height:1.75;overflow-x:hidden}
::selection{background:var(--gold);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.14}
.wrap{max-width:1060px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.kicker{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);font-weight:500}
.rule{width:56px;height:1px;background:var(--gold);margin:1.6rem 0}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* top bar + dropdown */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem clamp(1.25rem,4vw,2.5rem);transition:background .5s,backdrop-filter .5s;background:rgba(var(--ink-rgb),.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(var(--gold-rgb),.15)}
.bar .mark{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ivory);cursor:pointer;transition:color .3s}
.bar .mark:hover{color:var(--gold)}
.bar .mark em{color:var(--gold);font-style:normal}
.bar nav{display:flex;gap:2rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;align-items:center}
.bar nav>a{text-decoration:none;color:var(--ivory-dim);transition:color .3s}
.bar nav>a:hover{color:var(--gold)}
.drop{position:relative}
.drop>span{color:var(--ivory-dim);cursor:pointer;transition:color .3s;display:inline-flex;align-items:center;gap:.45rem}
.drop>span::after{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.drop:hover>span{color:var(--gold)}
.drop-menu{position:absolute;top:100%;right:0;padding-top:1rem;display:none;min-width:220px}
.drop:hover .drop-menu{display:block}
/* direct child only - a bare `div` also matched .drop-note and wrapped it in
   its own bordered panel */
.drop-menu>div{background:rgba(var(--ink2-rgb),.97);border:1px solid rgba(var(--gold-rgb),.25);padding:.6rem 0}
/* nowrap so the menu sizes to its longest item instead of silently wrapping a
   label onto two lines once it passes the 220px min-width (~175px of text room
   after padding). Changes nothing today - every current label clears it - but a
   two-line nav item is the kind of break nobody notices until a client does. */
.drop-menu a{display:block;padding:.7rem 1.4rem;text-decoration:none;color:var(--ivory-dim);transition:color .3s,background .3s;font-size:.7rem;white-space:nowrap}
.drop-menu a:hover{color:var(--gold);background:rgba(var(--gold-rgb),.07)}
.drop-menu a.here{color:var(--gold)}

/* ---- gated pages ----
   An inline SVG padlock marks which items need a password; the note under the
   Resources menu explains why, so the icon reads as "yours once you enrol"
   rather than "keep out". Replaced the old 🜲 alchemical glyph, which rendered
   inconsistently across platforms and was announced as noise by screen readers. */
.lock-ico{display:inline-flex;align-items:center;vertical-align:-1px;
  margin-left:.35rem;opacity:.62;color:var(--gold)}
.lock-ico svg{width:11px;height:11px;display:block}
.drop-menu a:hover .lock-ico{opacity:1}
/* .bar nav sets uppercase + .2em tracking, which the note inherits and which
   blew it wide enough to wrap onto two lines. Reset both - it is meant to read
   as a quiet italic aside, not as another nav item. */
.drop-note{margin:.55rem 1.4rem 0;padding-top:.65rem;
  border-top:1px solid rgba(var(--gold-rgb),.2);
  font-family:var(--serif);font-style:italic;font-size:.82rem;
  text-transform:none;letter-spacing:normal;white-space:nowrap;
  color:rgba(var(--ivory-rgb),.6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:1300px){.bar nav{display:none}}

/* page hero */
.phero{padding:9.5rem 0 4rem;text-align:center;position:relative;overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% -20%,rgba(var(--gold-rgb),.14),transparent 60%)}
.phero h1{font-size:clamp(2.4rem,5.6vw,4rem);position:relative}
.phero h1 em{color:var(--gold)}
.phero .kicker{display:block;margin-bottom:1.3rem;position:relative}
.phero p{color:var(--ivory-dim);max-width:640px;margin:1.4rem auto 0;position:relative}
.rule.center{margin:1.8rem auto 0}

/* content */
.content{padding:3rem 0 6rem}
.card{border:1px solid rgba(var(--gold-rgb),.2);background:rgba(var(--ivory-rgb),.025);padding:2.2rem 2.2rem}
footer{padding:3.5rem 0 3rem;border-top:1px solid rgba(var(--gold-rgb),.14);text-align:center}
footer .mark{font-family:var(--serif);letter-spacing:.16em;text-transform:uppercase;font-size:1rem}
footer .tag{font-family:var(--serif);font-style:italic;color:var(--gold);margin-top:.4rem}
footer .credit{margin-top:2rem;font-size:.68rem;color:rgba(var(--ivory-rgb),.42);letter-spacing:.06em;line-height:2}
footer .credit a{color:rgba(var(--gold-rgb),.7);text-decoration:none}

@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}


/* =====================================================================
   PAGE TRANSITION
   Ink to paper is a 72x luminance jump - 1.2% relative luminance to 86.8% -
   and without this it lands in a single frame, which is why arriving at a
   lessons page from the homepage stung. The crossfade ramps it instead.
   Must be declared on BOTH the outgoing and incoming document or it never
   fires, so index.html carries a copy in its own style block.
   Firefox has no support yet and silently falls back to the instant swap.
   ===================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.3s;
  animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}


/* =====================================================================
   PAPER REGISTER
   The long-read pages (for-beginners, why-choose, policy, contact,
   announcements) run on ivory instead of ink. Add class="paper" to <html>
   and the page flips register. The top bar, footer, and any .band-ink
   section stay dark, so the site keeps one identity in two values.
   Gold splits: #d2ac62 stays on dark, #7d5c17 is the text-safe gold on
   paper (5.4:1). #c6a45c is for rules and ornament only, never for text.
   ===================================================================== */
/* Tokens live on :root, not on html.paper, so dark pages can borrow the paper
   palette for a single element - the gate card is an ivory card on a dark page.
   html.paper below is what actually switches the page into the paper register. */
:root{
  --paper:#f6efe1;
  --paper-2:#efe6d3;
  --p-ink:#241d15;
  --p-soft:#4d4132;
  --p-faint:#736555;   /* 4.9:1 on paper - #7b6d5b missed AA for small text */
  --p-gold:#7d5c17;
  --p-line:#c6a45c;
  --p-gold-wash:rgba(125,92,23,.1);
  --body-serif:'Lora',Georgia,serif;
}
html.paper body{
  background:var(--paper);
  color:var(--p-soft);
  font-family:var(--body-serif);
  font-weight:400;
  line-height:1.78;
  /* paper grain keeps the ivory from reading as flat white */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
html.paper h1,html.paper h2,html.paper h3,html.paper h4{color:var(--p-ink)}
html.paper .kicker{font-family:var(--sans);color:var(--p-gold);font-weight:600}
html.paper ::selection{background:var(--p-line);color:var(--p-ink)}
html.paper strong{color:var(--p-ink);font-weight:500}
html.paper .rule{background:var(--p-line)}

/* page hero on paper: asymmetric, headline left */
html.paper .phero{padding:11rem 0 3.4rem}
html.paper .phero::before{background:radial-gradient(ellipse at 18% -10%,var(--p-gold-wash),transparent 62%)}
html.paper .phero h1 em{color:var(--p-gold)}
.phero-grid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:clamp(2rem,6vw,5rem);align-items:end;text-align:left}
@media(max-width:940px){.phero-grid{grid-template-columns:1fr}}
.phero-grid h1{margin-top:1.1rem}
.phero-grid .sub{color:var(--p-soft);font-size:1.02rem;line-height:1.8;max-width:none;margin:0;
  padding:0 0 .5rem 1.5rem;border-left:2px solid var(--p-line)}
/* five-line stave, the shared ornament */
.stave{margin-top:2.8rem;height:9px;width:100%;opacity:.5;
  background:repeating-linear-gradient(to bottom,var(--p-line) 0 1px,transparent 1px 5px)}

/* dawn scrim: softens the join between the dark fixed bar and the ivory page,
   which otherwise reads as a stripe pasted onto paper.
   Stops at 150px, above the hero text - the gold kicker drops below 4.5:1 the
   moment more than .09 alpha sits behind it, so this deliberately falls short
   of the type rather than washing over it. */
html.paper .phero::after{content:'';position:absolute;inset:0 0 auto;height:150px;
  z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(43,36,27,.32),rgba(43,36,27,.09) 55%,rgba(43,36,27,0))}
html.paper .phero .wrap{z-index:1}
/* the bar casts onto the paper rather than sitting flat on it */
html.paper .bar{box-shadow:0 10px 30px rgba(36,29,21,.10)}

/* letterpress note card: no 1px box, a gold spine instead */
html.paper .note-card{background:var(--paper-2);border-left:3px solid var(--p-gold);
  padding:1.6rem 1.8rem;margin:2.2rem 0;box-shadow:0 1px 0 rgba(36,29,21,.06)}
html.paper .note-card .t{font-family:var(--sans);font-size:.63rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--p-gold);font-weight:600;margin-bottom:.5rem}
html.paper .note-card p{margin:0;font-size:.95rem}

/* photo plates */
.plate{margin:3.2rem 0}
/* height:auto is load-bearing - .plate img sets width:100% but nothing else
   constrained height, so an <img> carrying width/height attributes had the
   height attribute applied as a presentational px value and stretched. */
.plate img{width:100%;height:auto;filter:sepia(.14) contrast(1.03) saturate(.94);border:1px solid rgba(125,92,23,.3)}
.plate figcaption{font-style:italic;font-size:.86rem;color:var(--p-faint);
  margin-top:.8rem;padding-left:.9rem;border-left:2px solid var(--p-line)}
@media(min-width:820px){
  .plate.half{float:right;width:46%;margin:.4rem 0 1.6rem 2.4rem}
  .plate.half figcaption{font-size:.8rem}
}
/* Portrait plates. .plate.wide is built for landscape - it spans the text
   column plus negative margins either side, which on a 3:4 image becomes a
   wall of photograph taller than the section it illustrates. .tall keeps the
   plate inside the column and centres it, at roughly half the footprint. */
.plate.tall{max-width:68%;margin-left:auto;margin-right:auto}
@media(max-width:820px){.plate.tall{max-width:82%}}

/* pull quote */
.pull{margin:3.2rem 0;padding:2.4rem 0;text-align:center;
  border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.pull p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.1rem);
  line-height:1.42;color:var(--p-ink);margin:0}
.pull .by{font-family:var(--sans);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--p-gold);margin-top:1.2rem}


/* =====================================================================
   HANDBOOK PAGE
   The shared skeleton for every long-read paper page: sticky contents
   rail, a 68ch text column, a drop-capped lead, and numbered sections
   whose numeral hangs in the left margin on wide screens.
   Used by for-beginners, why-choose, policy, contact, announcements.
   ===================================================================== */
html.paper .layout{display:grid;grid-template-columns:210px 1fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
@media(max-width:940px){html.paper .layout{grid-template-columns:1fr}html.paper .toc{display:none}}
/* bottom padding lives here rather than on .cta-band, because contact and
   announcements have no closing band and would otherwise butt into the footer */
html.paper .content{padding:3.4rem 0 clamp(4rem,9vh,6rem)}
html.paper .col{max-width:68ch}

html.paper .toc{position:sticky;top:6.5rem}
html.paper .toc .t{font-family:var(--sans);font-size:.63rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--p-gold);margin-bottom:1.1rem;font-weight:600}
html.paper .toc a{display:block;padding:.48rem 0 .48rem 1rem;font-family:var(--sans);
  font-size:.78rem;color:var(--p-faint);text-decoration:none;
  border-left:1px solid rgba(125,92,23,.25);transition:color .25s,border-color .25s}
html.paper .toc a:hover,html.paper .toc a.on{color:var(--p-gold);border-color:var(--p-gold)}

html.paper .lead{font-size:1.2rem;line-height:1.72;color:var(--p-ink)}
html.paper .lead::first-letter{font-family:var(--serif);float:left;font-size:4.6rem;
  line-height:.82;padding:.42rem .6rem 0 0;color:var(--p-gold);font-weight:500}
html.paper .lead strong{color:var(--p-ink);font-weight:500;
  box-shadow:inset 0 -.5em 0 var(--p-gold-wash)}
html.paper .lead-rule{height:1px;margin:2.6rem 0;
  background:linear-gradient(to right,var(--p-line),transparent)}

html.paper .sec{position:relative;padding:2.6rem 0;border-bottom:1px solid rgba(36,29,21,.1)}
/* clearfix contains a floated .plate.half - overflow:hidden would clip the
   numeral hanging out in the margin */
html.paper .sec::after{content:'';display:table;clear:both}
html.paper .sec:last-of-type{border-bottom:none}
html.paper .sec .num{font-family:var(--serif);font-size:4.6rem;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--p-line);position:absolute;left:-5.6rem;top:2.1rem;user-select:none}
@media(max-width:1180px){
  html.paper .sec .num{position:static;font-family:var(--sans);font-size:.95rem;font-weight:600;
    -webkit-text-stroke:0;color:var(--p-gold);letter-spacing:.3em;margin-bottom:.4rem}
}
html.paper .sec h2{font-size:clamp(1.7rem,3.4vw,2.45rem);margin-bottom:1rem}
html.paper .sec p{margin-top:1rem;font-size:1.005rem}
html.paper .sec p:first-of-type{margin-top:0}
html.paper .sublabel{font-family:var(--sans);font-size:.86rem;color:var(--p-ink);
  font-weight:500;margin-top:1.5rem!important}
html.paper .sec ul{list-style:none;margin-top:.8rem}
html.paper .sec ul li{padding:.4rem 0 .4rem 1.6rem;position:relative;font-size:.98rem}
html.paper .sec ul li::before{content:'♪';position:absolute;left:.1rem;
  color:var(--p-line);font-size:.85rem;top:.62rem}
html.paper .cols{columns:2;column-gap:2.4rem}
html.paper .cols li{break-inside:avoid}
@media(max-width:640px){html.paper .cols{columns:1}}

/* the wide plate breaks the text column - the asymmetry lever */
@media(min-width:1180px){html.paper .plate.wide{margin-left:-5.6rem;margin-right:-9rem}}


/* =====================================================================
   BUTTON HIERARCHY
   One solid gold pill per page for the primary action. Ghost outline for
   secondary. Anything else is a text link.
   ===================================================================== */
.btn-primary,.btn-ghost{display:inline-block;text-decoration:none;border-radius:999px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;padding:1rem 2.6rem;transition:background .16s,transform .16s,color .16s}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-hi);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--gold);margin-left:.7rem}
.btn-ghost:hover{background:rgba(var(--gold-rgb),.14)}
@media(max-width:520px){.btn-ghost{margin-left:0;margin-top:.8rem}}


/* =====================================================================
   CLOSING CTA BAND
   Always dark, whatever register the page is in. Returning to ink at the
   end of a paper page is the moment the action lands.
   ===================================================================== */
.cta-band{background:var(--ink);color:var(--ivory-dim);
  padding:clamp(5rem,12vh,8rem) 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 120%,rgba(var(--gold-rgb),.16),transparent 60%)}
.cta-band .wrap{position:relative}
.cta-band h2{color:var(--ivory)!important;font-size:clamp(2rem,4.6vw,3.2rem)}
.cta-band h2 em{color:var(--gold);font-style:italic}
.cta-band p{max-width:60ch;margin:1.5rem auto 0;color:var(--ivory-dim);font-size:1rem}
.cta-band .actions{margin-top:2.2rem}


/* =====================================================================
   SITE FOOTER
   Replaces the three centred lines. Contact block doubles as the NAP
   source of truth for local search.
   ===================================================================== */
footer.site{background:var(--ink);padding:0 0 3rem;text-align:left;
  border-top:1px solid rgba(var(--gold-rgb),.14)}
footer.site .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);padding:3.4rem 0 2.6rem}
@media(max-width:820px){footer.site .f-grid{grid-template-columns:1fr;gap:2.2rem}}
footer.site h4{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold)!important;margin-bottom:1rem;font-weight:600}
footer.site .f-links a{display:block;color:var(--ivory-dim);text-decoration:none;
  font-family:var(--sans);font-size:.85rem;padding:.24rem 0;transition:color .25s}
footer.site .f-links a:hover{color:var(--gold)}
footer.site .f-mark{font-family:var(--serif);font-size:1.25rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivory)}
footer.site .f-tag{font-family:var(--serif);font-style:italic;color:var(--gold);margin-top:.3rem}
footer.site .f-body{font-family:var(--sans);font-size:.85rem;color:var(--ivory-dim);
  margin-top:1rem;line-height:1.9}
footer.site .f-body a{color:var(--ivory-dim);text-decoration:none}
footer.site .f-body a:hover{color:var(--gold)}
footer.site .f-awards{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
footer.site .f-awards span{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.4rem .75rem;border:1px solid rgba(var(--gold-rgb),.35);
  color:var(--ivory-dim)}
footer.site .f-base{border-top:1px solid rgba(var(--gold-rgb),.14);padding-top:1.5rem;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;color:rgba(var(--ivory-rgb),.42)}
footer.site .f-base a{color:rgba(var(--gold-rgb),.75);text-decoration:none}


/* =====================================================================
   PASSWORD GATE
   Shared by calendar, library and ear-training - the CSS used to be pasted
   into all three.
   The backdrop is Cyndie's own studio: the two Baldwin grands, already black
   and white, so the ivory card and the gold are the only colour on screen.
   The old treatment buried the photo at .25 opacity under a near-opaque ink
   wash, which is why it felt like a locked basement. The photo now carries the
   frame and the card is paper rather than more ink.
   ===================================================================== */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:7rem 1.5rem 4rem;position:relative;overflow:hidden}
.gate::before{content:'';position:absolute;inset:0;
  background:url('img/caruth-piano-studio-two-baldwin-grands.jpg') center/cover no-repeat;
  /* warmed slightly so the neutral B&W does not read cold against the gold */
  filter:sepia(.3) contrast(1.04)}
/* vignette only - enough to seat the card and keep the bar legible */
.gate::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,
    rgba(var(--ink-rgb),.28) 0%,rgba(var(--ink-rgb),.62) 62%,rgba(var(--ink-rgb),.86) 100%)}

.gate-card{position:relative;z-index:2;max-width:430px;width:100%;text-align:center;
  background:var(--paper);border:1px solid rgba(125,92,23,.25);
  padding:3.2rem 2.6rem;
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.3)}
.gate-card .glyph{color:var(--p-gold);margin-bottom:1.2rem;display:flex;justify-content:center}
.gate-card .glyph svg{width:34px;height:34px}
.gate-card h1{font-size:1.9rem;margin-bottom:.5rem;color:var(--p-ink)}
.gate-card p{color:var(--p-soft);font-family:var(--body-serif);font-size:.92rem;
  line-height:1.7;margin-bottom:1.8rem}
/* matches the application form on contact, so the two password-ish moments
   on the site behave identically */
.gate-card input{width:100%;background:#fffdf7;border:1px solid rgba(36,29,21,.22);
  color:var(--p-ink);padding:.95rem 1.1rem;font-family:var(--sans);
  font-size:16px;   /* 16px or iOS zooms the page on focus */
  letter-spacing:.2em;text-align:center;outline:none;border-radius:2px;
  transition:border-color .25s,box-shadow .25s}
.gate-card input:focus{border-color:var(--p-gold);box-shadow:0 0 0 3px var(--p-gold-wash)}
.gate-card button{margin-top:1rem;width:100%;padding:1rem;
  background:var(--gold);color:var(--ink);border:none;border-radius:999px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;transition:background .16s,transform .16s}
.gate-card button:hover{background:var(--gold-hi);transform:translateY(-1px)}
.gate-card button:focus-visible{outline:2px solid var(--p-gold);outline-offset:3px}
.gate-card .demo-note{margin-top:1.4rem;font-size:.78rem;color:var(--p-faint);
  font-style:italic;font-family:var(--body-serif)}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media(prefers-reduced-motion:reduce){.shake{animation:none}}


/* =====================================================================
   SLIM BAR
   Three dropdowns plus the CTA pill instead of seven flat items, so the
   desktop nav survives to ~900px rather than collapsing at 1300px.
   nav.js hides .bar nav below 1300px with !important, so these override.
   ===================================================================== */
@media(min-width:900px){
  .bar.slim nav{display:flex!important}
  .bar.slim .burger{display:none!important}
}
@media(max-width:899px){
  .bar.slim nav{display:none!important}
}


/* =====================================================================
   MEMBERSHIP MARKS
   Every logo arrives on pure white with no alpha channel, so
   mix-blend-mode:multiply erases the box against any light ground while
   leaving the artwork untouched. No recolouring, no knocked-out PNGs -
   which matters because membership bodies generally require their marks be
   reproduced as issued.

   The four have wildly different proportions (MTNA is a 4.2:1 banner, the
   NCTM seal is near square), so each asset is pre-scaled onto a shared
   240px-tall canvas. One height here therefore gives all four the same
   OPTICAL weight; matching pixel heights would not.

   NB: .plate is already taken by the figure/photo class above, hence
   .mark-plate.
   ===================================================================== */
.creds{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.6rem,5vw,3.6rem)}
.creds img{height:60px;width:auto;mix-blend-mode:multiply}

/* inside a reading section the row sits with the prose, not centred under it */
.creds.inline{justify-content:flex-start;margin:2.2rem 0 .4rem;
  gap:clamp(1.4rem,4vw,2.8rem)}

/* Four across needs 297px of the 300px available inside the plate at 375px -
   that is not slack, that is luck, and it breaks outright on a 360px Galaxy.
   Go to a deliberate 2x2 below 640 rather than letting flex wrap 3+1. */
@media(max-width:640px){
  .creds,.creds.inline{display:grid;grid-template-columns:1fr 1fr;
    gap:1.7rem 1.1rem;justify-items:center;align-items:center}
  .creds img{height:44px}
}

/* The plate: the paper register borrowed for a single element on a dark page,
   so multiply still works and nothing has to be inverted. The shadow is what
   makes it read as an object resting on the page rather than a hole in it. */
.mark-plate{background:var(--paper-2);max-width:900px;margin:0 auto;
  padding:2rem clamp(1.2rem,4vw,2.6rem);
  border:1px solid rgba(var(--gold-rgb),.32);
  box-shadow:0 20px 55px rgba(0,0,0,.42)}
.mark-plate .plate-foot{text-align:center;font-family:var(--body-serif);
  font-style:italic;font-size:.85rem;line-height:1.6;
  color:var(--p-faint);margin-top:1.4rem}
@media(max-width:640px){.mark-plate{padding:1.6rem 1.1rem}
  .mark-plate .plate-foot{font-size:.78rem}}

/* ---------------------------------------------------------------------------
   OUTSIDE EVENT LINKS (see events.js)

   Festivals and competitions are run by other organizations, so their names on
   the season calendar link out to the host's own page. These are the only
   outbound links in a long list of plain dates, so they get a dotted underline
   rather than a solid one - enough to read as clickable, not enough to turn the
   calendar into a wall of blue.
--------------------------------------------------------------------------- */
.ev-link{color:inherit;text-decoration:none;
  border-bottom:1px dotted rgba(125,92,23,.55);
  transition:color .18s,border-color .18s}
.ev-link:hover,.ev-link:focus-visible{color:var(--p-gold);border-bottom-color:var(--p-gold)}
.ev-link:focus-visible{outline:2px solid var(--p-gold);outline-offset:3px}
.ev-out{font-size:.7em;color:var(--p-gold);margin-left:.22em;
  vertical-align:.12em;letter-spacing:0}

/* the directory printed under the calendar embed */
.ev-cards{display:grid;gap:.5rem;margin-top:.4rem}
.ev-card{display:flex;gap:.85rem;align-items:flex-start;text-decoration:none;
  border:1px solid rgba(36,29,21,.14);background:var(--paper-2);
  padding:.8rem .95rem;transition:border-color .18s,transform .18s}
.ev-card:hover{border-color:var(--p-gold);transform:translateX(2px)}
.ev-card .ico{font-family:var(--serif);color:var(--p-gold);font-size:1.15rem;line-height:1.1}
.ev-card .nm{display:block;color:var(--p-ink);font-family:var(--sans);
  font-size:.87rem;font-weight:500}
.ev-card .tp{display:block;font-family:var(--sans);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--p-faint);margin-top:.22rem}