/* Self-hosted fonts — replaces the former fonts.googleapis.com/fonts.gstatic.com
   <link> tags (removed from all 7 HTML pages) so the site makes no request to
   Google on page load. Files live in /fonts/ and were downloaded directly from
   the exact Google Fonts CSS response this site was requesting (same families,
   weights, styles, subsets and unicode-ranges — including latin-ext and
   vietnamese, since dropping those would silently change glyph fallback for
   characters like the "→" used in the accordion icons). Newsreader's three
   normal weights (and two italic weights) intentionally point at the same
   physical file per subset — Google serves Newsreader as a variable font
   instance here, so multiple font-weight declarations legitimately share one
   file; that isn't a mistake, it mirrors what was being downloaded before. */

@font-face{
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/courier-prime-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/courier-prime-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/courier-prime-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/courier-prime-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dancing-script-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dancing-script-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dancing-script-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-italic-400-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-italic-400-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-italic-400-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-italic-400-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-italic-400-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-italic-400-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/newsreader-normal-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/public-sans-300-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg: #f5f0e4;
  --ink: #1c1a16;
  --ink-soft: #514b40;
  --ink-faint: #8c8577;
  --red: #a8281c;
  --red-hover: #8c2016;
  --line: rgba(28, 26, 22, 0.16);
  --line-strong: rgba(28, 26, 22, 0.55);
  --serif: 'Newsreader', serif;
  --sans: 'Public Sans', sans-serif;
  --mono: 'Courier Prime', monospace;
}

*{ box-sizing: border-box; }

/* Smooth anchor jumps (e.g. from the sidebar links on our-syllabus.html,
   privacy-policy.html and terms-and-conditions.html) — overridden back to
   instant under prefers-reduced-motion below. */
html{ scroll-behavior: smooth; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

h1, h2, h3{
  font-family: var(--serif);
  color: var(--ink);
  margin: 0;
}

.site-banner{
  width: 100%;
  line-height: 0;
  background: var(--bg);
}
.site-banner img{
  width: 100%;
  height: auto;
  display: block;
}

/* Skip-to-content link — visually hidden until keyboard focus, standard
   accessible pattern. Positioned off the top of the viewport rather than
   with a clip-rect hack; on :focus it's repositioned into view. Styled with
   the site's own tokens (cream background, ink text, red accent border) to
   match the existing visual language rather than a generic browser-default
   look. */
.skip-link{
  position: absolute;
  top: -4rem;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-left: 4px solid var(--red);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus{
  top: 0.5rem;
}

.site-nav{
  position: relative;
  background: var(--bg);
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding: 0.9rem 3.5rem;
}

.site-nav-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.site-nav-links a,
.site-nav-links .nav-trigger{
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.site-nav-links a::after,
.site-nav-links .nav-trigger::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.site-nav-links a:hover,
.site-nav-links a:focus-visible,
.site-nav-links .nav-trigger:hover,
.site-nav-links .nav-trigger:focus-visible{
  color: var(--ink);
}

.site-nav-links a:hover::after,
.site-nav-links a:focus-visible::after,
.site-nav-links .nav-trigger:hover::after,
.site-nav-links .nav-trigger:focus-visible::after{
  width: 28px;
}

/* Custom keyboard-focus outline for the whole nav (top-level links,
   dropdown-row links, the Lessons trigger, and the icon links) — replaces
   the mismatched default browser outline, matching the same outline style
   already established for the photo stack on index.html (1.5px solid
   var(--red)), just with a smaller offset appropriate to compact nav text
   rather than that pattern's large clickable card. This also visually
   separates "this is focused" (a ring around the item) from "this is the
   current page" (the persistent underline below) — before this rule, a
   focused link showed the exact same 28px underline the current-page
   indicator uses, which is what made a merely-tabbed-to Home link look
   like it was incorrectly marked current. */
.site-nav a:focus,
.site-nav button:focus{
  outline: none;
}
.site-nav a:focus-visible,
.site-nav button:focus-visible{
  outline: 1.5px solid var(--red);
  outline-offset: 4px;
}

/* Persistent "current page" underline — the current page's own nav link
   gets the same treatment the hover state already uses (same colour via
   .site-nav-links a's existing color transition target, same 28px width),
   just applied permanently via [aria-current="page"] rather than only on
   :hover/:focus-visible. Other links' hover-only behavior is untouched. */
.site-nav-links a[aria-current="page"]{
  color: var(--ink);
}
.site-nav-links a[aria-current="page"]::after{
  width: 28px;
}

.site-nav-icons{
  position: absolute;
  right: 3.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-icon-link{
  display: inline-flex;
  color: var(--ink-soft);
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-icon-link:hover,
.nav-icon-link:focus-visible{
  opacity: 0.7;
}

.nav-icon-link-email:hover,
.nav-icon-link-email:focus-visible{
  opacity: 1;
  color: var(--red);
}

.nav-trigger{
  font: inherit;
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
}

.nav-item-dropdown{
  position: relative;
}

.nav-dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.6rem;
  min-width: 230px;
  z-index: 20;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.is-open .nav-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-row{
  padding: 0.6rem 1.1rem;
}

/* Intentionally does NOT override text-transform, font-weight,
   letter-spacing, padding-bottom, or ::after here — this link is meant
   to inherit those from .site-nav-links a (uppercase, bold, letter-
   spaced, red underline hover animation), matching the top-level nav
   links' look. This was previously "fixed" as unintended leakage, but
   the inherited look is the preferred one — do not re-add overrides
   for these properties. */
.nav-dropdown-row a{
  display: block;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-dropdown-row a:hover,
.nav-dropdown-row a:focus-visible{
  color: var(--red);
}

.nav-dropdown-row a:hover::after,
.nav-dropdown-row a:focus-visible::after{
  width: 100%;
}

.nav-dropdown-row-disabled{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.nav-dropdown-soon{
  font-size: 0.68rem;
  font-style: italic;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* .nav-dropdown reuses the shared .card class for its box (double-rule top,
   border, background) applied directly in the HTML alongside .nav-dropdown,
   and .nav-dropdown-row reuses .card-row for the dashed divider between rows
   the same way — this file only adds the positioning/reveal/typography
   layered on top of those two shared classes, it does not redefine their
   border or background. */

.folio{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding: 0.55rem 0;
}

.folio-mark{
  flex: none;
  width: 44px;
  height: 4px;
  background: var(--red);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0;
}

.eyebrow .num{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0;
  color: var(--red);
  border: 1px solid var(--ink);
  padding: 0.15rem 0.5rem;
}

/* shared "inner page" headline treatment — single-line h1 with a small red
   accent bar above its top-left corner. Promoted here once a third page
   (about-us.html) needed the same pattern that private-lessons.html and
   our-syllabus.html had each been duplicating on their own. */
.inner-page-h1{
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin: 0 0 2rem;
  position: relative;
}
.inner-page-h1::before{
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 0;
  width: 32px;
  height: 4px;
  background: var(--red);
}

/* shared intro/lede paragraph treatment — promoted here once six pages
   (private-lessons.html, about-us.html, our-syllabus.html, calendar.html,
   privacy-policy.html, terms-and-conditions.html) turned out to be
   duplicating the same font-family/color, at two different font-size/
   max-width pairs (1.2rem/68ch vs 1.05rem/60ch or 56ch) with no real reason
   for the split — standardized on the larger, already-correct values.
   line-height and margin are deliberately NOT included here: they genuinely
   vary page to page (1.6 vs 1.8 line-height; 1.5–2rem margin depending on
   what sits below) and stay declared on each page's own selector. */
.page-lede{
  font-family: var(--sans);
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 68ch;
}

.card{
  border: 1px solid var(--line-strong);
  border-top: 3px double var(--ink);
  padding: 1.3rem 1.5rem 1.5rem;
  background: rgba(255,255,255,0.35);
}

.card-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
}

.card-row:last-of-type{ border-bottom: none; }

.btn{
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.btn-primary{
  background: var(--ink);
  color: var(--bg);
  padding: 0.9rem 2rem;
  transition: background 0.3s ease;
}

.btn-primary:hover{
  background: var(--red);
}

.btn-link{
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

.btn-link:hover{
  color: var(--red);
}

.cta-buttons{
  display: flex;
  align-items: center;
  gap: 2.25rem;
  flex-wrap: wrap;
}

/* Shared "inner page" wrapper padding + folio margin — promoted here once
   a fourth page (privacy-policy.html) needed the exact same pattern that
   about-us.html and our-syllabus.html had each been duplicating on their
   own (milongas.html's own version diverged from this after a later fix,
   so it correctly stays separate; private-lessons.html's wrapper is a
   structurally different grid with its own baked-in bottom padding, so
   it also stays separate). */
.inner-page{
  padding: 0.75rem 3.5rem 0;
}
.inner-page .folio{
  margin-bottom: 2.25rem;
}

/* Site footer — small and quiet, reusing the site's existing double-rule
   border, the shared underline-grows-on-hover link pattern already used
   on the About Us contact card and the "Lessons" nav dropdown, and the
   same uppercase-label typography used in the nav. */
.site-footer{
  border-top: 3px double var(--ink);
  margin-top: 3rem;
  padding: 2.5rem 3.5rem 1.75rem;
}

.site-footer-cols{
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 4rem;
  margin-bottom: 2rem;
}

.site-footer-col{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer-heading{
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.site-footer-link{
  position: relative;
  width: fit-content;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.site-footer-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s ease;
}
.site-footer-link:hover,
.site-footer-link:focus-visible{
  color: var(--red);
}
.site-footer-link:hover::after,
.site-footer-link:focus-visible::after{
  width: 100%;
}

.site-footer-bottom{
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

@media (max-width: 900px){
  .site-nav{ padding: 0.9rem 1.5rem; }
  .site-nav-links{ gap: 1.75rem; flex-wrap: wrap; }
  /* Stopgap until mobile nav (hamburger) redesign — hide icons rather than let them break the layout */
  .site-nav-icons{ display: none; }
  .inner-page{
    padding: 0.75rem 1.5rem 0;
  }
  .site-footer{
    padding: 2rem 1.5rem 1.5rem;
  }
}

/* Genuine tablets (touch-primary) between 768–1100px — distinct from a
   resized desktop window at the same width via (pointer: coarse). This
   sits below in source order so it wins over the max-width:900px rule
   above for the 768–899px slice (same specificity, later wins), and is
   the only rule active for 900–1100px since the max-width:900px block
   doesn't match there. Reclaims side padding in the 900–1100px sidebar
   zone (where the fixed-width sidebar pages get cramped) while also
   giving the sub-900px accordion zone more room than plain mobile gets —
   see our-syllabus.html/privacy-policy.html/terms-and-conditions.html's
   own inline styles for the sidebar-specific half of this fix. */
@media (min-width: 768px) and (max-width: 1100px) and (pointer: coarse){
  .inner-page{
    padding: 0.75rem 2.25rem 0;
  }
}

/* Sidebar/accordion pattern — shared CSS for our-syllabus.html,
   privacy-policy.html, and terms-and-conditions.html. Each page keeps its
   own class prefix (.syllabus-/.privacy-/.terms-) in its HTML — grouped
   selectors target all three rather than renaming markup. Genuinely
   page-specific values stay in each page's own inline <style> block: each
   page's own .X-section h2 font-size (1.6rem on our-syllabus.html vs
   1.3rem on the other two) and .X-content ul/ol line-height+margin (1.6 /
   0 0 1rem on our-syllabus.html vs 1.65 / 0 0 0.75rem on the other two),
   plus selectors that only exist on one page at all: our-syllabus.html's
   .syllabus-content h3/h4/li/::marker/.syllabus-diagram*, terms-and-
   conditions.html's .terms-content p a and .terms-content h3, and
   privacy-policy.html's .privacy-content .contact-section. our-syllabus.html's
   .back-to-top button is a separate, unrelated feature (only that page has
   it) and stays entirely in its own inline styles too. */
.syllabus-intro, .privacy-intro, .terms-intro{
  line-height: 1.6;
  margin: 0 0 2rem;
}

.syllabus-layout, .privacy-layout, .terms-layout{
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 3rem;
  align-items: start;
  padding-bottom: 3rem;
}

.syllabus-sidebar, .privacy-sidebar, .terms-sidebar{
  position: sticky;
  top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-right: 1px solid rgba(28,26,22,0.16);
  padding-right: 1.25rem;
}

.syllabus-sidebar-link, .privacy-sidebar-link, .terms-sidebar-link{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.85rem 0;
  min-height: 44px;
  box-sizing: border-box;
  position: relative;
  transition: color 0.2s ease;
}

.syllabus-sidebar-link::after, .privacy-sidebar-link::after, .terms-sidebar-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.syllabus-sidebar-link:hover, .syllabus-sidebar-link:focus-visible,
.privacy-sidebar-link:hover, .privacy-sidebar-link:focus-visible,
.terms-sidebar-link:hover, .terms-sidebar-link:focus-visible{
  color: var(--red);
}

.syllabus-sidebar-link:hover::after, .syllabus-sidebar-link:focus-visible::after,
.privacy-sidebar-link:hover::after, .privacy-sidebar-link:focus-visible::after,
.terms-sidebar-link:hover::after, .terms-sidebar-link:focus-visible::after{
  width: 100%;
}

.syllabus-sidebar-link:hover .syllabus-sidebar-chip, .syllabus-sidebar-link:focus-visible .syllabus-sidebar-chip,
.privacy-sidebar-link:hover .privacy-sidebar-chip, .privacy-sidebar-link:focus-visible .privacy-sidebar-chip,
.terms-sidebar-link:hover .terms-sidebar-chip, .terms-sidebar-link:focus-visible .terms-sidebar-chip{
  border-color: var(--red);
  color: var(--red);
}

.syllabus-sidebar-chip, .privacy-sidebar-chip, .terms-sidebar-chip{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--mono);
  font-size: 0.75rem;
  border: 1px solid var(--ink);
  color: var(--ink-soft);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.syllabus-sidebar-link.is-active, .privacy-sidebar-link.is-active, .terms-sidebar-link.is-active{
  color: var(--red);
}

.syllabus-sidebar-link.is-active .syllabus-sidebar-chip,
.privacy-sidebar-link.is-active .privacy-sidebar-chip,
.terms-sidebar-link.is-active .terms-sidebar-chip{
  color: #f5f0e4;
  background: var(--red);
  border-color: var(--red);
}

.syllabus-section, .privacy-section, .terms-section{
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(28,26,22,0.16);
}
.syllabus-section:first-child, .privacy-section:first-child, .terms-section:first-child{
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
/* font-size stays page-specific — see each page's own inline <style> */
.syllabus-section h2, .privacy-section h2, .terms-section h2{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1rem;
}
.syllabus-section-chip, .privacy-section-chip, .terms-section-chip{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  font-family: var(--mono);
  font-size: 0.92rem;
  border: 1px solid var(--ink);
  color: var(--red);
}

.syllabus-content p, .privacy-content p, .terms-content p{
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
  max-width: 68ch;
}
/* line-height/margin stay page-specific — see each page's own inline <style> */
.syllabus-content ul, .syllabus-content ol,
.privacy-content ul, .privacy-content ol,
.terms-content ul, .terms-content ol{
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink-soft);
  padding-left: 1.3rem;
  max-width: 68ch;
}

.syllabus-section-toggle, .privacy-section-toggle, .terms-section-toggle{
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 900px){
  .syllabus-layout, .privacy-layout, .terms-layout{
    grid-template-columns: 1fr;
  }
  .syllabus-sidebar, .privacy-sidebar, .terms-sidebar{
    display: none;
  }
  .syllabus-section-toggle, .privacy-section-toggle, .terms-section-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .syllabus-accordion-icon, .privacy-accordion-icon, .terms-accordion-icon{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    font-size: 1rem;
    margin-left: auto;
    transition: transform 0.3s ease;
  }
  .syllabus-accordion-icon::after, .privacy-accordion-icon::after, .terms-accordion-icon::after{
    content: '→';
    display: block;
  }
  .syllabus-section.is-open .syllabus-accordion-icon,
  .privacy-section.is-open .privacy-accordion-icon,
  .terms-section.is-open .terms-accordion-icon{
    transform: rotate(90deg);
  }
  .syllabus-section-body, .privacy-section-body, .terms-section-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
}

@media (min-width: 900px) and (max-width: 1100px) and (pointer: coarse){
  .syllabus-layout, .privacy-layout, .terms-layout{
    grid-template-columns: 170px 1fr;
    column-gap: 2rem;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .site-nav-links a::after,
  .site-nav-links .nav-trigger::after{ transition: none; }
  .site-footer-link::after{ transition: none; }
  .syllabus-accordion-icon, .privacy-accordion-icon, .terms-accordion-icon,
  .syllabus-section-body, .privacy-section-body, .terms-section-body,
  .syllabus-sidebar-link::after, .privacy-sidebar-link::after, .terms-sidebar-link::after{ transition: none; }
}