/* ==========================================================================
   Cedar & Breath — assets/css/style.css
   One stylesheet, no build step, no framework.

   The structural idea: the page is a STACK OF FULL-WIDTH BANDS. Each band is
   a complete section with its own background — snow, oat, or spruce-charcoal —
   and the sequence of backgrounds is what separates sections. There are almost
   no rules or shadows anywhere, because the colour change does that job.

   The consequence, and the thing to keep in mind when editing: body text on
   this site sits on THREE different backgrounds, not one. Every text colour
   therefore has to clear its contrast floor three times over. The oat tint in
   particular was lightened from the original #E6DFD2 after the audit found
   muted text at 6.11:1 on it — see _tools/contrast.py for the full note.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, Latin subset, woff2 only. No network font calls.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Besley';
  src: url('../fonts/besley-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Besley';
  src: url('../fonts/besley-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo';
  src: url('../fonts/chivo-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo';
  src: url('../fonts/chivo-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --snow: #FAFAF8;
  --card: #FFFFFF;
  --oat: #EAE4D8;          /* the tinted band */
  --spruce: #23322F;       /* the dark band and the header */
  --ink: #1E2724;          /* 14.7:1 snow · 12.1:1 oat */
  --muted: #3F4845;        /* 9.0:1 snow · 7.5:1 oat */
  --cedar: #7A4B30;        /* button background; white label 7.3:1 */
  --link: #653A22;         /* 9.2:1 snow · 7.6:1 oat */
  --link-dark: #EFC9A6;    /* links inside a spruce band — 8.7:1 */
  --on-dark: #FAFAF8;      /* 12.8:1 on spruce */
  --hair: #CBD4D6;
  --control: #787E7F;      /* 3.3:1 on oat, the tightest of the three */

  --slab: 'Besley', 'Bitter', Georgia, 'Times New Roman', serif;
  --sans: 'Chivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --wrap: 68rem;           /* band content width */
  --measure: 38rem;        /* prose measure inside a band */
  --gutter: 1.5rem;
  --sp: 1.5rem;
  --radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 19px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
  font-synthesis-weight: none;
}

img, svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { margin: 0 0 var(--sp); padding-left: 1.3em; }
li + li { margin-top: .4em; }
p { margin: 0 0 var(--sp); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

h1, h2, h3 {
  font-family: var(--slab);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: 2.35rem; letter-spacing: -.015em; }
h2 { font-size: 1.65rem; letter-spacing: -.008em; }
h3 { font-size: 1.18rem; font-weight: 600; }
h4 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6em;
}

a { color: var(--link); text-decoration-thickness: 1px;
    text-underline-offset: .17em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--cedar); outline-offset: 2px; }

strong { font-weight: 600; }
small { font-size: .85rem; }
abbr[title] { text-decoration: underline dotted; }

/* --------------------------------------------------------------------------
   4. Bands
   A band is a full-width <section>. `.band__in` holds it to the wrap width.
   The three variants set a background and, where it is dark, re-point every
   inherited colour at a token that is legible against it — rather than
   overriding colours case by case further down the file, which is how a dark
   section ends up with one unreadable element nobody noticed.
   -------------------------------------------------------------------------- */

.band { padding-block: calc(var(--sp) * 2.4); }
.band__in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band__in > .measure { max-width: var(--measure); }

.band--snow { background: var(--snow); }
.band--oat { background: var(--oat); }

.band--dark {
  background: var(--spruce);
  color: var(--on-dark);
}
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--on-dark); }
.band--dark h4 { color: var(--link-dark); }
.band--dark a { color: var(--link-dark); }
/* Every role that normally renders in --muted has to be re-pointed here.
   Missing one is invisible rather than merely wrong: --muted on spruce is
   about 1.4:1. `caption` and `.hint` were missed on the first pass and
   found by measuring computed colours in the browser, not by reading. */
.band--dark .muted,
.band--dark .meta,
.band--dark figcaption,
.band--dark .facts b,
.band--dark .field .hint,
.band--dark .price small,
.band--dark .lede { color: #CFD6D3; }
.band--dark .card {
  background: rgba(250, 250, 248, .07);
  border-color: rgba(250, 250, 248, .3);
}

/* The schedule is the one component that keeps its own LIGHT background
   inside a dark band — it is a white card sitting on spruce. So everything
   inside it has to keep the dark-on-light colours, or the cells inherit the
   band's near-white text onto a near-white card and the whole table vanishes
   at about 1.05:1. That is exactly what happened on the first build, and it
   was invisible in a screenshot of the top of the page. */
.band--dark .sched__scroll { color: var(--ink); }
.band--dark .sched__scroll a { color: var(--link); }
.band--dark .sched__scroll caption { color: var(--muted); }
.band--dark .sched__scroll .pill { border-color: var(--control); }
/* The caption sits above the card, outside its background, so it stays light. */
.band--dark .sched > caption, .band--dark .sched__cap { color: #CFD6D3; }
.band--dark .btn--ghost { color: var(--link-dark);
  border-color: rgba(250, 250, 248, .45); }
.band--dark .btn--ghost:hover { background: rgba(250, 250, 248, .1);
  border-color: var(--link-dark); }

/* A tighter band, for a single short statement between two big ones. */
.band--slim { padding-block: calc(var(--sp) * 1.5); }

.muted { color: var(--muted); }

.lede {
  font-size: 1.18rem;      /* must stay above 1rem — the base here is 19px, so
                              a sub-1rem lede would be smaller than body text */
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
}

.kicker {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cedar);
  margin: 0 0 .7rem;
}
.band--dark .kicker { color: var(--link-dark); }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--cedar);
  color: #FFFFFF;
  padding: .7rem 1.1rem;
  z-index: 60;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --------------------------------------------------------------------------
   5. Header — a solid spruce band, wordmark left, nav right.
   The cedar hairline underneath is the only rule in the whole header, and it
   is what stops the dark header from merging into a dark first band.
   -------------------------------------------------------------------------- */

.head {
  background: var(--spruce);
  color: var(--on-dark);
  border-bottom: 3px solid var(--cedar);
}
.head__in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--on-dark);
}
.brand__mark { flex: none; }
.brand__name {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.brand__amp { color: var(--link-dark); }
.brand__sub {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #CFD6D3;
  margin-top: .15rem;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .4rem;
}
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: .45rem .5rem;
  font-size: .9rem;
  font-weight: 400;
  color: var(--on-dark);
  text-decoration: none;
  /* The marker is a permanently-present transparent border that only changes
     colour, so switching pages never shifts the row by 3px. */
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: rgba(239, 201, 166, .55); }
.nav a.is-current { border-bottom-color: var(--cedar); font-weight: 600; }
/* Cedar at 3px against spruce is a 1.9:1 boundary, which is fine for a
   decorative marker but not enough on its own to signal state — so the
   current item is also bolded, and carries aria-current in the markup. */

.menu-toggle {
  display: none;
  background: transparent;
  color: var(--on-dark);
  border: 1px solid rgba(250, 250, 248, .45);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  font: 600 .88rem/1 var(--sans);
  cursor: pointer;
}

.crumbs {
  background: var(--snow);
  border-bottom: 1px solid var(--hair);
  font-size: .82rem;
  color: var(--muted);
}
.crumbs ol {
  list-style: none;
  margin-inline: auto;
  margin-block: 0;
  max-width: var(--wrap);
  padding: .5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
}
.crumbs li { margin: 0; display: flex; gap: .5rem; align-items: baseline; }
.crumbs li + li::before { content: '/'; color: var(--hair); }
.crumbs [aria-current='page'] { color: var(--ink); }

/* --------------------------------------------------------------------------
   6. Cards and grids — 1px border, 2px radius, no shadow anywhere.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
}
.band--oat .card { background: var(--card); }
.card__h { font-size: 1.1rem; margin-bottom: .45em; }
.card__h a { color: inherit; text-decoration-color: var(--hair); }
.card__h a:hover { color: var(--link); text-decoration-color: currentColor; }
.card p { font-size: .95rem; }
.card figure { margin: -1.25rem -1.3rem 1rem; }
.card figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Pose cards show a whole person, so they must not be cropped to a band.
   `contain` on a neutral panel keeps heads and feet in frame. */
.card--pose figure img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--oat);
}
.band--oat .card--pose figure img { background: var(--snow); }

.meta { font-size: .84rem; color: var(--muted); margin: 0 0 1rem; }
.meta > * + *::before { content: ' · '; color: var(--hair); }

/* --------------------------------------------------------------------------
   7. The weekly schedule — the centrepiece of classes.html.
   Scrolls inside its own wrapper on narrow screens rather than shrinking its
   own type, because a timetable you cannot read is not a timetable.
   -------------------------------------------------------------------------- */

.sched { margin-block: var(--sp); }
.sched__scroll {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: .93rem;
  min-width: 34rem;
}
caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .5rem;
}
th, td {
  padding: .6rem .8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
thead th {
  background: var(--oat);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--spruce);
  white-space: nowrap;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sched td time { font-variant-numeric: tabular-nums; font-weight: 600; }

/* A small pill marking the format of a session. Text, not colour alone. */
.pill {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border: 1px solid var(--control);
  border-radius: 999px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Pose blocks
   Every pose carries its care note in the same box and the same typeface as
   the pose itself — not in a footer disclaimer, where nobody reads it.
   -------------------------------------------------------------------------- */

.pose {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
  margin-bottom: var(--sp);
}
.pose__media { display: grid; grid-template-columns: 15rem 1fr; gap: 1.4rem; }
.pose__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--oat);
  border-radius: var(--radius);
}
.pose__h { margin-bottom: .2em; }
.pose__sanskrit {
  font-style: italic;
  color: var(--muted);
  font-size: .92rem;
  margin: 0 0 1rem;
}
.pose__care {
  margin-top: 1.1rem;
  padding: .9rem 1rem;
  background: var(--oat);
  border-left: 4px solid var(--cedar);
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* The care heading is styled by class, not by tag, because the correct
   tag depends on what encloses it: h4 inside a pose guide (where the pose
   name is an h3) and h3 inside an article (where the section is an h2).
   Styling the tag would force one of those two contexts to skip a level. */
.pose__care .care__h,
.pose__care h4 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cedar);
  margin: 0 0 .45em;
}
.pose__care p { font-size: .93rem; }
.pose__chair {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
}
.pose__chair h4, .pose__chair .care__h { color: var(--muted); }

/* --------------------------------------------------------------------------
   9. Buttons and forms
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--cedar);
  color: #FFFFFF;
  font: 600 .95rem/1 var(--sans);
  padding: .85rem 1.35rem;
  border: 1px solid var(--cedar);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: #653E28; border-color: #653E28; }
.btn--ghost { background: transparent; color: var(--link);
  border-color: var(--control); }
.btn--ghost:hover { background: var(--card); border-color: var(--cedar); }
.btn--wide { display: block; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp); }

.form { display: grid; gap: 1rem; max-width: var(--measure); }
.field { display: grid; gap: .3rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field .hint { font-size: .83rem; color: var(--muted); font-weight: 400; }
input[type='text'], input[type='email'], input[type='tel'], select, textarea {
  font: 400 1rem/1.5 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--control);
  border-radius: var(--radius);
  padding: .6rem .7rem;
  width: 100%;
}
textarea { min-height: 9rem; resize: vertical; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: start; }
.check input { margin-top: .32rem; }
.req { color: var(--cedar); }
.band--dark .req { color: var(--link-dark); }

/* --------------------------------------------------------------------------
   10. Advertisement slots
   Always inside a snow band, never inside a dark one — an advertisement on a
   dark background looks like site furniture, which is precisely the confusion
   the labelling rules exist to prevent.
   -------------------------------------------------------------------------- */

.ad-slot {
  margin-block: calc(var(--sp) * 2.2);
  padding: .55rem;
  background: var(--snow);
  border: 1px dashed var(--control);
  border-radius: var(--radius);
  max-width: var(--wrap);
  margin-inline: auto;
}
.ad-slot__label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}
.ad-slot__frame {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--hair);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.foot {
  background: var(--spruce);
  color: #DDE2E0;
  border-top: 3px solid var(--cedar);
  padding-block: calc(var(--sp) * 1.8);
  font-size: .92rem;
}
.foot a { color: #FFFFFF; }
.foot .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter); }
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp) 1.6rem;
}
.foot__col--wide { grid-column: 1 / -1; }
.foot__h {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 .6rem;
}
.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list li { margin: 0 0 .35rem; }
.foot__list--two { columns: 2; column-gap: 1.2rem; }
.foot__addr { font-style: normal; line-height: 1.7; }
.foot__hours { margin: 0; }
.foot__legal {
  border-top: 1px solid rgba(255, 255, 255, .25);
  margin-top: var(--sp);
  padding-top: 1rem;
  font-size: .86rem;
}
.foot__legal--small { font-size: .8rem; color: #D2D8D6; }
.foot__note { max-width: 46rem; }

/* --------------------------------------------------------------------------
   12. Consent banner
   Accept and Reject are the same element, same styling, same flex basis,
   adjacent in source order. Equal prominence is structural.
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--card);
  border-top: 3px solid var(--cedar);
  box-shadow: 0 -2px 14px rgba(30, 39, 36, .18);
  padding: 1rem 0 1.1rem;
}
.consent[hidden] { display: none; }
.consent__inner {
  display: grid;
  gap: .85rem;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.consent__title { font-size: 1.1rem; margin: 0; }
.consent__text { font-size: .9rem; margin: 0; max-width: 52rem; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem 1rem; }
.btn--consent { flex: 0 1 11rem; min-width: 10rem; }
.consent__link { font-size: .86rem; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.vh {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.util__line { display: block; }
.tnum { font-variant-numeric: tabular-nums; }

.price {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: .4rem;
}
.price small { display: block; font-family: var(--sans); font-weight: 400;
  font-size: .82rem; color: var(--muted); margin-top: .2rem; }

figure.wide { margin-block: var(--sp); }
figure.wide img {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  border-radius: var(--radius);
}
figcaption { font-size: .85rem; color: var(--muted); padding-top: .5rem; }

/* A plain list of facts, used for class details and pack terms. */
.facts { list-style: none; margin: 0 0 var(--sp); padding: 0;
  display: grid; gap: .7rem; }
.facts li { margin: 0; display: grid; grid-template-columns: 9rem 1fr;
  gap: .4rem 1rem; }
.facts b { font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-top: .18rem; }

/* --------------------------------------------------------------------------
   14. Narrow widths
   -------------------------------------------------------------------------- */

@media (max-width: 54rem) {
  .menu-toggle { display: block; }
  .nav { flex-basis: 100%; }
  .nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-top: .6rem;
    border-top: 1px solid rgba(250, 250, 248, .2);
    margin-top: .7rem;
  }
  .nav ul.is-open { display: flex; }
  .nav a {
    padding: .62rem .2rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: .7rem;
  }
  .nav a:hover { border-left-color: rgba(239, 201, 166, .55); }
  .nav a.is-current { border-left-color: var(--cedar); }

  .pose__media { grid-template-columns: 1fr; }
  .pose__media img { max-width: 18rem; }

  .band { padding-block: calc(var(--sp) * 1.8); }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.45rem; }
  .facts li { grid-template-columns: 1fr; gap: .1rem; }
}

@media (max-width: 26rem) {
  .btn--consent { flex-basis: 100%; }
  .card figure { margin-inline: -1rem; }
  .card { padding: 1rem; }
}

/* --------------------------------------------------------------------------
   15. Forced colours (Windows high contrast)
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .nav a.is-current { border-bottom-color: Highlight; }
  .pose__care { border-left-color: Highlight; }
  .ad-slot { border-style: dashed; }
  .btn { border: 1px solid ButtonBorder; }
  .card, .pose { border: 1px solid CanvasText; }
}