/* ==========================================================================
   BAY Studios — live-class marketplace
   Time is the primary axis. The accent colour has exactly one job: ON AIR.
   Type scale:  12 14 16 20 25 31 39 61 (+ display)
   Space scale: 4 8 12 16 24 40 64 96
   ========================================================================== */

:root {
  /* neutrals — warm paper, near-black ink */
  --paper:    #f7f5f2;
  --surface:  #ffffff;
  --surface-2:#f1eeea;
  --ink:      #17130f;
  --ink-2:    #6d665f;
  --ink-3:    #9a938b;
  --line:     #e4dfd8;
  --line-2:   #d3cdc4;

  /* the one accent: scheduled to be running now */
  --air:      #d6372b;
  --air-soft: #fbeae7;
  --air-ink:  #a82a20;

  /* type */
  --t12: 12px; --t14: 14px; --t16: 16px; --t20: 20px;
  --t25: 25px; --t31: 31px; --t39: 39px; --t61: 61px;

  /* space */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px;
  --s24: 24px; --s40: 40px; --s64: 64px; --s96: 96px;

  --r: 4px;
  --maxw: 1220px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #100e0d;
    --surface:  #191614;
    --surface-2:#211d1a;
    --ink:      #f4f1ed;
    --ink-2:    #a49c94;
    --ink-3:    #7c746c;
    --line:     #2c2724;
    --line-2:   #3b3532;
    --air:      #ff5a4a;
    --air-soft: #2a1512;
    --air-ink:  #ff7c6e;
  }
}

* { box-sizing: border-box; }
/* Any display rule (e.g. `.book form { display: flex }`) outranks the UA's
   [hidden] style, so state it explicitly or hidden elements stay visible. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t16); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.06; }
svg { width: 1em; height: 1em; }
::selection { background: var(--ink); color: var(--paper); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s24); }
.label {
  display: block; font-size: var(--t12); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- On-air strip (absent unless something is genuinely scheduled now) */
.onair-strip {
  display: flex; align-items: center; gap: var(--s8);
  background: var(--air); color: #fff;
  padding: var(--s8) var(--s24); font-size: var(--t14); font-weight: 600;
}
.onair-strip a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.onair-strip a:hover { text-decoration: underline; }
.onair-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s24);
  padding: var(--s16) var(--s24);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 11px; height: 11px; border-radius: 2px; background: var(--ink-3);
  flex: none; transition: background .2s;
}
.brand-mark.is-live { background: var(--air); box-shadow: 0 0 0 4px var(--air-soft); }
.brand-name { font-size: var(--t20); font-weight: 800; letter-spacing: -.04em; }
.brand-thin { font-weight: 400; color: var(--ink-2); margin-left: 4px; }
.nav-links { display: flex; align-items: center; gap: var(--s4); }
.nav-links a {
  padding: 8px 12px; border-radius: var(--r); font-size: var(--t14);
  font-weight: 600; color: var(--ink-2);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-cta { background: var(--ink) !important; color: var(--paper) !important; }
.nav-cta:hover { opacity: .85; }

/* ---------- Buttons — ink on paper. The accent is never a button. ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  padding: 13px 20px; border-radius: var(--r); font-size: var(--t14); font-weight: 700;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #000; }
.btn.ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Hero — headline generated from the real schedule ---------- */
.hero { padding: var(--s64) 0 var(--s40); }
.hero-head {
  font-size: clamp(44px, 8.4vw, 96px); font-weight: 800;
  letter-spacing: -.045em; line-height: .95; max-width: 14ch;
}
.hero-head .air-word { color: var(--air); }
.hero-sub {
  margin: var(--s24) 0 0; font-size: clamp(16px, 2vw, var(--t20));
  color: var(--ink-2); max-width: 46ch;
}
.hero-actions { display: flex; gap: var(--s12); flex-wrap: wrap; margin-top: var(--s24); }
.hero-meta {
  display: flex; gap: var(--s24); flex-wrap: wrap; margin-top: var(--s40);
  padding-top: var(--s24); border-top: 1px solid var(--line);
}
.hero-meta div { display: flex; flex-direction: column; gap: 2px; }
.hero-meta strong { font-size: var(--t25); font-weight: 700; letter-spacing: -.03em; }
.hero-meta span { font-size: var(--t12); color: var(--ink-3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Section heads ---------- */
.sec { padding: var(--s64) 0; }
.sec.tight { padding: var(--s40) 0; }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s24); margin-bottom: var(--s24); flex-wrap: wrap;
}
.sec-head h2 { font-size: var(--t31); }
.sec-head p { margin: var(--s4) 0 0; color: var(--ink-2); font-size: var(--t14); }
.sec-link { font-size: var(--t14); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.sec-link:hover { text-decoration: underline; }

/* ==========================================================================
   THE RUNDOWN — a departures board. One class per row, ordered by time.
   ========================================================================== */
.rundown { border-top: 1px solid var(--line); }
.run-group { margin-top: var(--s40); }
.run-group:first-child { margin-top: 0; }
.run-group > .label { padding: var(--s16) 0 var(--s8); border-bottom: 1px solid var(--line); }

.run-row {
  display: grid;
  grid-template-columns: 124px 72px 1fr 140px 96px 92px;
  align-items: center; gap: var(--s16);
  padding: var(--s12) var(--s8);
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.run-thumb {
  width: 72px; height: 52px; border-radius: 3px; overflow: hidden;
  background: var(--surface-2); flex: none;
}
.run-thumb img { width: 100%; height: 100%; object-fit: cover; }
.run-row:hover { background: var(--surface); }
.run-row.is-onair { background: var(--air-soft); }
.run-row.is-ended { opacity: .5; }

.run-time { display: flex; flex-direction: column; gap: 2px; }
.run-time .t-main {
  font-size: var(--t14); font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.run-row.is-onair .t-main, .run-row.is-imminent .t-main { color: var(--air); }
.run-time .t-sub { font-size: var(--t12); color: var(--ink-3); }
.t-main .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--air); margin-right: 6px; vertical-align: 1px;
}

.run-main { min-width: 0; }
.run-title { font-size: var(--t16); font-weight: 700; letter-spacing: -.02em; }
.run-row:hover .run-title { text-decoration: underline; }
.run-sub {
  display: flex; align-items: center; gap: var(--s8); margin-top: 3px;
  font-size: var(--t12); color: var(--ink-2); flex-wrap: wrap;
}
.run-sub .dot { color: var(--line-2); }
.run-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }

.run-seats { display: flex; flex-direction: column; gap: 5px; }
.seat-meter { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.seat-meter i { display: block; height: 100%; background: var(--ink-3); }
.seat-meter.hot i { background: var(--air); }
.seat-text { font-size: var(--t12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.seat-text.hot { color: var(--air-ink); font-weight: 700; }
.seat-text.full { color: var(--ink-3); }

.run-price { font-size: var(--t16); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.run-price .free { font-size: var(--t14); }
.run-cta { justify-self: end; }
.run-cta .btn { padding: 9px 14px; font-size: var(--t12); }

/* ---------- Featured trio — the only large cards in the product ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s16); }
.tcard {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: border-color .15s;
}
.tcard:hover { border-color: var(--ink-3); }
.tcard-cover { aspect-ratio: 3 / 2; background: var(--surface-2); position: relative; }
.tcard-cover img { width: 100%; height: 100%; object-fit: cover; }
.tcard-state {
  position: absolute; top: var(--s12); left: var(--s12);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--ink); padding: 5px 10px;
  border-radius: var(--r); font-size: var(--t12); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tcard-state.is-onair { background: var(--air); color: #fff; }
.tcard-body { padding: var(--s16); display: flex; flex-direction: column; gap: var(--s8); flex: 1; }
.tcard-body .label { color: var(--ink-3); }
.tcard-title { font-size: var(--t20); font-weight: 700; letter-spacing: -.03em; }
.tcard-meta { display: flex; align-items: center; gap: var(--s8); font-size: var(--t14); color: var(--ink-2); }
.tcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s8);
  margin-top: auto; padding-top: var(--s12); border-top: 1px solid var(--line);
  font-size: var(--t14);
}

/* ---------- Rating ---------- */
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t12); font-weight: 600; color: var(--ink-2); }
.rating svg { width: 13px; height: 13px; fill: currentColor; color: var(--ink); }

/* ==========================================================================
   SCHEDULE — week board
   ========================================================================== */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.day { background: var(--paper); min-height: 200px; display: flex; flex-direction: column; }
.day-head { padding: var(--s12); border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 64px; z-index: 2; }
.day-head.is-today { background: var(--ink); color: var(--paper); }
.day-name { font-size: var(--t12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.day-date { font-size: var(--t20); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.day-count { font-size: var(--t12); color: var(--ink-3); }
.day-head.is-today .day-count { color: rgba(255,255,255,.6); }
.day-body { padding: var(--s8); display: flex; flex-direction: column; gap: var(--s8); }
.slot {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3); border-radius: 3px; padding: var(--s8);
  transition: border-color .15s;
}
.slot:hover { border-color: var(--ink); border-left-color: var(--ink); }
.slot.is-onair { border-left-color: var(--air); background: var(--air-soft); }
.slot.is-full { opacity: .55; }
.slot-time { font-size: var(--t12); font-weight: 700; font-variant-numeric: tabular-nums; }
.slot.is-onair .slot-time { color: var(--air); }
.slot-title { font-size: var(--t12); font-weight: 600; line-height: 1.3; margin: 3px 0; }
.slot-meta { font-size: 11px; color: var(--ink-3); }
.day-empty { padding: var(--s16) var(--s12); font-size: var(--t12); color: var(--ink-3); }

/* ==========================================================================
   FILTERS
   ========================================================================== */
.filters { display: flex; gap: var(--s8); flex-wrap: wrap; align-items: center; padding: var(--s16) 0; border-bottom: 1px solid var(--line); }
.chip {
  padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 100px;
  background: transparent; font-size: var(--t12); font-weight: 600; color: var(--ink-2);
  cursor: pointer; font-family: inherit; transition: .12s; white-space: nowrap;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-search {
  display: flex; align-items: center; gap: var(--s8); margin-left: auto;
  border: 1px solid var(--line-2); border-radius: 100px; padding: 7px 14px; min-width: 220px;
}
.filter-search svg { width: 15px; height: 15px; color: var(--ink-3); }
.filter-search input { border: 0; background: transparent; outline: none; color: var(--ink); font-size: var(--t14); font-family: inherit; width: 100%; }
.result-count { font-size: var(--t12); color: var(--ink-3); padding: var(--s12) var(--s8); }
.no-results { padding: var(--s64) var(--s24); text-align: center; color: var(--ink-2); }
.no-results h3 { font-size: var(--t20); margin-bottom: var(--s8); }

/* ==========================================================================
   CLASS DETAIL
   ========================================================================== */
.detail { padding: var(--s40) 0 var(--s64); }
.crumb { font-size: var(--t12); font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.crumb:hover { color: var(--ink); }
.crumb svg { width: 14px; height: 14px; transform: rotate(180deg); }
.detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--s64); align-items: start; margin-top: var(--s24); }
.detail-title { font-size: clamp(31px, 5vw, 56px); letter-spacing: -.04em; line-height: 1; margin: var(--s12) 0; }
.detail-sum { font-size: var(--t20); color: var(--ink-2); margin: 0 0 var(--s24); }
.detail-cover { aspect-ratio: 2 / 1; background: var(--surface-2); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s24); }
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.spec {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s16);
  padding: var(--s16) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s24);
}
.spec div { display: flex; flex-direction: column; gap: 3px; }
.spec dt, .spec .k { font-size: var(--t12); color: var(--ink-3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.spec .v { font-size: var(--t16); font-weight: 700; letter-spacing: -.02em; }
.detail h3 { font-size: var(--t20); margin: var(--s40) 0 var(--s12); }
.detail-desc p { margin: 0 0 var(--s12); color: var(--ink-2); }
.learn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); }
.learn-list li { display: flex; gap: var(--s8); font-size: var(--t14); }
.learn-list svg { width: 16px; height: 16px; color: var(--ink); flex: none; margin-top: 2px; }
.materials { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s16); font-size: var(--t14); color: var(--ink-2); }

.tutor { display: flex; gap: var(--s16); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s16); }
.tutor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.tutor-name { font-size: var(--t16); font-weight: 700; }
.tutor p { margin: 3px 0 var(--s8); font-size: var(--t14); color: var(--ink-2); }
.tutor-stats { display: flex; gap: var(--s16); font-size: var(--t12); color: var(--ink-3); }

/* Booking panel */
.book { position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s24); }
.book-state {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t12); font-weight: 700;
  padding: 5px 10px; border-radius: 100px; background: var(--surface-2); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.book-state.is-onair { background: var(--air); color: #fff; }
.book-state.is-imminent { background: var(--air-soft); color: var(--air-ink); }
.book-price { font-size: var(--t39); font-weight: 800; letter-spacing: -.04em; margin: var(--s12) 0 var(--s4); }
.book-price small { font-size: var(--t14); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.book-when { font-size: var(--t14); color: var(--ink-2); margin-bottom: var(--s16); }
.book form { display: flex; flex-direction: column; gap: var(--s12); }
.book label, .tf label { display: flex; flex-direction: column; gap: 5px; font-size: var(--t12); font-weight: 600; color: var(--ink-2); }
.book input, .book select, .tf input, .tf select, .tf textarea {
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  border-radius: var(--r); padding: 11px 12px; font-size: var(--t14); font-weight: 400;
  outline: none; font-family: inherit; width: 100%;
}
.book input:focus, .book select:focus, .tf input:focus, .tf textarea:focus, .tf select:focus { border-color: var(--ink); }
.book-note { font-size: var(--t12); color: var(--ink-3); margin: 0; }
/* ==========================================================================
   LIVE ROOM
   ========================================================================== */
.room-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s24); flex-wrap: wrap; margin-bottom: var(--s16);
}
.room-head h1 { font-size: var(--t31); margin: var(--s8) 0 var(--s4); }
.room-head p { margin: 0; color: var(--ink-2); font-size: var(--t14); }
.room-actions { display: flex; gap: var(--s8); }

.room-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  min-height: 420px; background: #0e0c0b; border-radius: 6px;
  overflow: hidden; border: 1px solid var(--line);
}
.room-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.room-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s12);
  color: #e9e2db; text-align: center; padding: var(--s24);
}
.room-loading p { margin: 0; font-size: var(--t14); }
.room-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18); border-top-color: var(--air);
  animation: room-spin .9s linear infinite;
}
@keyframes room-spin { to { transform: rotate(360deg); } }
.room-hint { color: var(--ink-3); font-size: var(--t12); }
.room-loading .room-hint { color: rgba(255,255,255,.55); }
.room-loading a { color: #fff; text-decoration: underline; }

.room-foot { margin-top: var(--s16); font-size: var(--t14); color: var(--ink-2); }
.room-foot p { margin: 0 0 var(--s4); }
.room-foot a { text-decoration: underline; }
.linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--ink); text-decoration: underline; cursor: pointer;
}

/* Hand-off card for Zoom / Teams / Meet */
.handoff {
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  padding: var(--s40); max-width: 620px;
}
.handoff-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); color: var(--ink-2);
  padding: 6px 12px; border-radius: 100px;
  font-size: var(--t12); font-weight: 700; margin-bottom: var(--s16);
}
.handoff h2 { font-size: var(--t25); margin-bottom: var(--s12); }
.handoff p { color: var(--ink-2); margin: 0 0 var(--s16); }
.handoff-btn { font-size: var(--t16); padding: 15px 26px; }
.handoff .room-hint { margin-top: var(--s12); }
.handoff-bring {
  margin-top: var(--s24) !important; padding-top: var(--s16);
  border-top: 1px solid var(--line); font-size: var(--t14);
}

.room-closed {
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  padding: var(--s40); text-align: center; max-width: 560px;
}
.room-closed p { color: var(--ink-2); margin: 0 0 var(--s12); }
.room-closed-when {
  font-size: var(--t25); font-weight: 700; letter-spacing: -.03em;
  color: var(--ink) !important; font-variant-numeric: tabular-nums;
}
.room-closed .btn { margin-top: var(--s8); }

@media (max-width: 700px) {
  .room-stage { aspect-ratio: 3 / 4; min-height: 380px; }
}

/* ==========================================================================
   PROGRAMS & COMMUNITY (ideas board, one-on-one, English, Ivy)
   ========================================================================== */

/* ---- Programme badge on a class page ---- */
.program-badge {
  display: inline-flex; align-items: center; gap: 6px; margin: var(--s8) 0 var(--s4);
  background: var(--air-soft); color: var(--air-ink); border-radius: 100px;
  padding: 5px 12px; font-size: var(--t12); font-weight: 700;
}
.program-badge:hover { text-decoration: underline; }

/* ==========================================================================
   HELP CENTRE
   ========================================================================== */
.help-dl { display: flex; gap: var(--s12); flex-wrap: wrap; margin: var(--s16) 0 var(--s24); }
.help-dl a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 11px 16px; font-size: var(--t14); font-weight: 700; background: var(--surface); }
.help-dl a:hover { border-color: var(--ink); }
.help-dl a small { font-weight: 500; color: var(--ink-3); }

.help-tabs { display: flex; gap: var(--s8); border-bottom: 1px solid var(--line); margin-bottom: var(--s24); flex-wrap: wrap; }
.help-tab { border: 0; background: none; padding: 10px 4px; margin-bottom: -1px; font: 700 var(--t16)/1 var(--font); color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; }
.help-tab.on { color: var(--ink); border-bottom-color: var(--air); }
.help-panel { display: none; }
.help-panel.on { display: block; }

.help-section { border-top: 1px solid var(--line); padding: var(--s24) 0; display: grid; grid-template-columns: 200px 1fr; gap: var(--s24); }
.help-section:first-of-type { border-top: 0; }
.help-section h3 { font-size: var(--t20); }
.help-section .help-body { font-size: var(--t14); color: var(--ink-2); }
.help-section .help-body p { margin: 0 0 var(--s8); }
.help-section .help-body strong { color: var(--ink); }
.help-section ol, .help-section ul { margin: 0 0 var(--s8); padding-left: 18px; }
.help-section li { margin-bottom: 4px; font-size: var(--t14); color: var(--ink-2); }
.help-steps { counter-reset: hs; list-style: none; padding-left: 0 !important; }
.help-steps li { counter-increment: hs; position: relative; padding-left: 26px; margin-bottom: 8px; }
.help-steps li::before { content: counter(hs); position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: var(--ink); color: var(--paper); border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.help-note { background: var(--surface-2); border-left: 3px solid var(--ink); border-radius: var(--r); padding: 10px 13px; margin: var(--s8) 0; font-size: var(--t14); }
@media (max-width: 720px) { .help-section { grid-template-columns: 1fr; gap: var(--s8); } }

/* ---- Homepage program tiles ---- */
.prog-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s16); }
.prog-tile { display: flex; flex-direction: column; gap: var(--s8); padding: var(--s24); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); transition: border-color .15s, transform .15s; }
.prog-tile:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.prog-tile.english { background: linear-gradient(160deg, var(--air-soft), var(--surface)); }
.prog-tile-kicker { font-size: var(--t12); font-weight: 700; color: var(--air-ink); }
.prog-tile strong { font-size: var(--t20); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.prog-tile-sub { font-size: var(--t14); color: var(--ink-2); flex: 1; }
.prog-tile-go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t14); font-weight: 700; margin-top: var(--s4); }
.prog-tile-go svg { width: 15px; height: 15px; }
@media (max-width: 860px) { .prog-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prog-tiles { grid-template-columns: 1fr; } }

/* ---- Ideas board ---- */
.ideas { display: flex; flex-direction: column; gap: var(--s8); margin-bottom: var(--s40); }
.idea { display: flex; gap: var(--s16); align-items: flex-start; padding: var(--s16); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.idea-vote {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 52px; padding: 8px 6px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); cursor: pointer; font-family: inherit; color: var(--ink-2); transition: .12s;
}
.idea-vote:hover:not(:disabled) { border-color: var(--air); color: var(--air); }
.idea-vote.voted { border-color: var(--air); background: var(--air-soft); color: var(--air-ink); cursor: default; }
.idea-caret { font-size: 11px; line-height: 1; }
.idea-count { font-size: var(--t16); font-weight: 800; font-variant-numeric: tabular-nums; }
.idea-body strong { font-size: var(--t16); font-weight: 700; }
.idea-body p { margin: 3px 0 0; font-size: var(--t14); color: var(--ink-2); }
.idea-meta { display: flex; gap: var(--s8); align-items: center; margin-top: 6px; font-size: var(--t12); color: var(--ink-3); }
.idea-tag { border-radius: 100px; padding: 2px 8px; font-weight: 700; font-size: 11px; }
.idea-tag.planned { background: #fdf3e3; color: #84581a; }
.idea-tag.done { background: var(--air-soft); color: var(--air-ink); }

.idea-form-wrap { border-top: 1px solid var(--line); padding-top: var(--s24); max-width: 620px; }
.idea-form-wrap h3 { font-size: var(--t25); }
.idea-form-lead { color: var(--ink-2); font-size: var(--t14); margin: var(--s4) 0 var(--s16); }
.idea-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--t12); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s12); }
.idea-form input, .idea-form textarea {
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); border-radius: var(--r);
  padding: 10px 12px; font-size: var(--t14); font-family: inherit; outline: none;
}
.idea-form input:focus, .idea-form textarea:focus { border-color: var(--ink); }
.idea-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s12); }
.idea-msg { font-size: var(--t12); font-weight: 600; margin-left: var(--s12); }
.idea-msg.ok { color: #1d6134; } .idea-msg.err { color: var(--air-ink); }

/* ---- One-on-one ---- */
.oo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s16); margin-bottom: var(--s40); }
.oo-card { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: var(--s16); display: flex; flex-direction: column; gap: var(--s12); }
.oo-head { display: flex; gap: var(--s12); align-items: center; }
.oo-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.oo-blank { display: grid; place-items: center; font-size: var(--t20); font-weight: 700; color: var(--ink-3); }
.oo-head strong { display: block; font-size: var(--t16); font-weight: 700; }
.oo-head span { font-size: var(--t12); color: var(--ink-2); }
.oo-note { font-size: var(--t14); color: var(--ink-2); margin: 0; flex: 1; }
.oo-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s8); border-top: 1px solid var(--line); padding-top: var(--s12); }
.oo-rate { font-size: var(--t12); font-weight: 700; color: var(--ink); }
.oo-req { padding: 8px 12px; font-size: var(--t12); }
.oo-form-wrap { border-top: 1px solid var(--line); padding-top: var(--s24); max-width: 640px; }
.oo-form-wrap h3 { font-size: var(--t25); margin-bottom: var(--s4); }
.oo-done { text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: var(--s40); max-width: 480px; }
.oo-done .tick { width: 44px; height: 44px; margin: 0 auto var(--s12); border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.oo-done .tick svg { width: 22px; height: 22px; stroke-width: 2.4; }
.oo-done h3 { font-size: var(--t20); margin-bottom: var(--s8); }
.oo-done p { color: var(--ink-2); font-size: var(--t14); margin: 0 0 var(--s16); }

/* ---- Program landing heroes (English / Ivy) ---- */
.prog-hero { padding: var(--s64) 0 var(--s40); }
.prog-hero h1 { font-size: clamp(34px, 5.6vw, 60px); letter-spacing: -.045em; line-height: 1; margin: var(--s12) 0; max-width: 18ch; }
.prog-sub { font-size: var(--t20); color: var(--ink-2); max-width: 52ch; margin: 0 0 var(--s24); }
.prog-hero.english { background: linear-gradient(180deg, var(--air-soft), transparent); }
.prog-hero.ivy .label, .prog-hero.ivy h1 { color: var(--ink); }
.prog-actions { display: flex; gap: var(--s12); flex-wrap: wrap; }
.prog-promo { display: inline-flex; align-items: center; gap: var(--s12); background: var(--ink); color: var(--paper); border-radius: 100px; padding: 8px 8px 8px 18px; }
.prog-promo span { font-size: var(--t12); font-weight: 600; opacity: .8; }
.prog-promo code { font-size: var(--t16); font-weight: 800; letter-spacing: .05em; color: var(--paper); background: none; }
.prog-copy { border: 0; background: var(--paper); color: var(--ink); border-radius: 100px; padding: 6px 14px; font-weight: 700; font-size: var(--t12); cursor: pointer; }

/* ---- Language tabs (English page) ---- */
.lang-tabs { display: flex; gap: var(--s8); flex-wrap: wrap; justify-content: center; margin-bottom: var(--s24); }
.lang-tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); border-radius: 100px; padding: 8px 14px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: var(--t14); font-weight: 600; color: var(--ink-2); }
.lang-tab:hover { border-color: var(--ink-3); }
.lang-tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lang-flag { font-size: 18px; line-height: 1; }
.lang-panel { display: none; max-width: 640px; margin: 0 auto; text-align: center; }
.lang-panel.on { display: block; }
.lang-panel[dir="rtl"] { text-align: right; }
.lang-title { font-size: var(--t25); margin-bottom: var(--s8); }
.lang-intro { color: var(--ink-2); margin-bottom: var(--s16); }
.lang-steps { display: inline-block; text-align: left; margin: 0; padding-left: 20px; }
.lang-panel[dir="rtl"] .lang-steps { text-align: right; padding-left: 0; padding-right: 20px; }
.lang-steps li { margin-bottom: var(--s8); font-size: var(--t16); }

@media (max-width: 860px) {
  .oo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .oo-grid { grid-template-columns: 1fr; }
  .idea-form-row { grid-template-columns: 1fr; }
  .idea-vote { min-width: 46px; }
}

/* ---- Image upload widget (public — teacher forms) ---- */
.aupload { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s16); }
.aupload .alabel { font-size: var(--t12); font-weight: 600; color: var(--ink-2); }
.aupload-row { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.aupload-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 14px; background: var(--surface); cursor: pointer; font-size: var(--t14); font-weight: 600; color: var(--ink); }
.aupload-btn:hover { border-color: var(--ink); }
.aupload-btn input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aupload-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.aupload-thumb { width: 84px; height: 60px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); }
.aupload-url { display: flex; flex-direction: column; gap: 5px; font-size: var(--t12); font-weight: 600; color: var(--ink-3); }
.aupload-url input { border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); border-radius: var(--r); padding: 9px 12px; font-size: var(--t14); font-family: inherit; }
.aupload-url input:disabled { background: var(--surface-2); color: var(--ink-3); }

/* ---- Instructor auth (sign in / apply) ---- */
.auth-form { margin: var(--s16) 0 var(--s24); }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--t12); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s16); }
.auth-form input, .auth-form textarea, .auth-form select {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  border-radius: var(--r); padding: 11px 13px; font-size: var(--t16); font-weight: 400; outline: none; font-family: inherit;
}
.auth-form input:focus, .auth-form textarea:focus { border-color: var(--ink); }
.agrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s16); }
.agrid2 .wide { grid-column: 1 / -1; }
.auth-actions { display: flex; align-items: center; gap: var(--s16); flex-wrap: wrap; }
.auth-actions a { font-size: var(--t14); font-weight: 600; color: var(--ink-2); text-decoration: underline; }
.auth-alt { margin-top: var(--s24); padding-top: var(--s24); border-top: 1px solid var(--line); font-size: var(--t14); }
.auth-alt a { color: var(--air-ink); font-weight: 700; text-decoration: underline; }
.auth-alt summary { cursor: pointer; color: var(--ink-2); margin-top: var(--s12); }
@media (max-width: 620px) { .agrid2 { grid-template-columns: 1fr; } }

/* ---- Teacher's upcoming sessions ---- */
.teach-line {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: var(--s16); align-items: center;
  padding: var(--s12) var(--s8); border-bottom: 1px solid var(--line);
}
.teach-when { display: flex; flex-direction: column; }
.teach-title strong { display: block; font-size: var(--t16); font-weight: 700; letter-spacing: -.02em; }
.teach-title span { font-size: var(--t12); color: var(--ink-2); }
.teach-line .btn { padding: 9px 14px; font-size: var(--t12); }
@media (max-width: 700px) {
  .teach-line { grid-template-columns: 1fr auto; }
  .teach-when { grid-column: 1 / -1; }
}

/* ---- Coupon list (instructor portal) ---- */
.coupon-line {
  display: grid; grid-template-columns: 150px 1fr 160px auto;
  gap: var(--s16); align-items: center;
  padding: var(--s12) var(--s8); border-bottom: 1px solid var(--line);
}
.coupon-line.is-dead { opacity: .5; }
.coupon-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t14);
  font-weight: 700; letter-spacing: .04em; background: var(--surface-2);
  padding: 7px 10px; border-radius: var(--r); text-align: center;
}
.coupon-info { display: flex; flex-direction: column; }
.coupon-info strong { font-size: var(--t14); }
.coupon-info span { font-size: var(--t12); color: var(--ink-2); }
.coupon-use { font-size: var(--t12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.coupon-line .btn { padding: 8px 12px; font-size: var(--t12); }
@media (max-width: 700px) {
  .coupon-line { grid-template-columns: 1fr auto; row-gap: var(--s8); }
  .coupon-use { grid-column: 1 / -1; }
}

/* ---- Discount code ---- */
.coupon-row { display: flex; gap: var(--s8); align-items: flex-end; }
.coupon-row .btn { padding: 11px 14px; font-size: var(--t12); flex: none; }
#coupon-code { text-transform: uppercase; }
.coupon-msg { font-size: var(--t12); font-weight: 600; }
.coupon-msg.ok  { color: #1d6134; }
.coupon-msg.err { color: var(--air-ink); }
.coupon-total {
  display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s12);
  padding: var(--s12); background: var(--surface-2); border-radius: var(--r);
  font-size: var(--t14);
}
.coupon-total span { color: var(--ink-2); }
.coupon-total strong { text-align: right; font-variant-numeric: tabular-nums; }
.coupon-total em { font-style: normal; color: var(--ink-3); font-size: var(--t12); }
.coupon-total .ct-final { font-weight: 700; color: var(--ink); padding-top: 6px; border-top: 1px solid var(--line); }

/* ---- PayPal step ---- */
.pay-step { display: flex; flex-direction: column; gap: var(--s12); }
.pay-badge {
  display: inline-block; align-self: flex-start; font-size: var(--t12); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--air);
}
.pay-amount { font-size: var(--t20); color: var(--ink-2); }
.pay-amount strong { font-size: var(--t31); font-weight: 800; letter-spacing: -.04em; color: var(--ink); display: block; }
.pay-note { font-size: var(--t14); color: var(--ink-2); margin: 0; }
.btn.paypal { background: #0070ba; color: #fff; border-color: #0070ba; }
.btn.paypal:hover { background: #005ea6; }

.book-done { text-align: center; }
.book-done .tick { width: 44px; height: 44px; margin: 0 auto var(--s12); border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.book-done .tick svg { width: 22px; height: 22px; stroke-width: 2.4; }
.book-done h3 { font-size: var(--t20); margin: 0 0 var(--s8); }
.book-done p { color: var(--ink-2); font-size: var(--t14); margin: 0 0 var(--s16); }

/* ==========================================================================
   ABOUT / STUDIO
   ========================================================================== */
.about-hero { padding: var(--s64) 0 var(--s40); display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s64); align-items: center; }
.about-hero h1 { font-size: clamp(39px, 6vw, 72px); letter-spacing: -.045em; line-height: .98; }
.about-hero p { font-size: var(--t20); color: var(--ink-2); margin: var(--s24) 0; max-width: 40ch; }
.about-portrait img { width: 100%; border-radius: var(--r); aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; }
.about-portrait figcaption { margin-top: var(--s8); font-size: var(--t12); color: var(--ink-3); }

.bio-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--s64); align-items: start; }
.bio-main h2 { font-size: var(--t31); margin-bottom: var(--s16); }
.bio-main p { margin: 0 0 var(--s16); color: var(--ink-2); line-height: 1.65; }
.bio-main blockquote {
  margin: var(--s24) 0; padding-left: var(--s24); border-left: 2px solid var(--ink);
  font-size: var(--t20); line-height: 1.4; color: var(--ink); font-style: italic;
}
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.facts li { padding: var(--s12) 0; border-bottom: 1px solid var(--line); font-size: var(--t14); color: var(--ink-2); }
.facts li span { display: block; font-size: var(--t12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }

.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s16); }
.offer { border-top: 2px solid var(--ink); padding-top: var(--s12); }
.offer h3 { font-size: var(--t16); margin-bottom: var(--s4); }
.offer p { font-size: var(--t14); color: var(--ink-2); margin: 0; }

/* Gallery — captions always visible, no hover theatre */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); }
.gal figure { margin: 0; }
.gal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--surface-2); border-radius: var(--r); }
.gal figcaption { margin-top: var(--s8); }
.gal strong { display: block; font-size: var(--t14); font-weight: 700; }
.gal span { font-size: var(--t12); color: var(--ink-3); }

/* ---------- Teach form ---------- */
.tf { padding: var(--s40) 0 var(--s64); }
.tf h1 { font-size: clamp(31px, 5vw, 56px); letter-spacing: -.04em; margin-bottom: var(--s12); }
.tf > p { color: var(--ink-2); font-size: var(--t20); max-width: 46ch; margin: 0 0 var(--s40); }
.tf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s24); }
.tf fieldset { border: 0; border-top: 2px solid var(--ink); padding: var(--s16) 0 0; margin: 0; display: flex; flex-direction: column; gap: var(--s12); }
.tf fieldset:last-of-type { grid-column: 1 / -1; }
.tf legend { font-size: var(--t14); font-weight: 700; padding: 0; }
.tf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s12); }
.tf-actions { display: flex; align-items: center; gap: var(--s16); margin-top: var(--s24); flex-wrap: wrap; }
.tf-msg { font-size: var(--t14); font-weight: 600; }
.tf-msg.ok { color: #1d6134; }
.tf-msg.err { color: var(--air-ink); }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); margin-top: var(--s96); }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: var(--s64) var(--s24) var(--s40); display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--s64); }
.foot-brand p { color: var(--ink-2); font-size: var(--t14); margin: var(--s12) 0 0; max-width: 34ch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); }
.foot-cols h4 { font-size: var(--t12); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s12); font-weight: 700; }
.foot-cols a { display: block; font-size: var(--t14); color: var(--ink-2); padding: 5px 0; }
.foot-cols a:hover { color: var(--ink); }
.foot-legal { max-width: var(--maxw); margin: 0 auto; padding: var(--s16) var(--s24) var(--s40); font-size: var(--t12); color: var(--ink-3); }

/* ---------- Banner / toast ---------- */
.banner { max-width: var(--maxw); margin: var(--s16) auto; padding: var(--s12) var(--s16); background: var(--air-soft); color: var(--air-ink); border-radius: var(--r); font-size: var(--t14); font-weight: 600; }
.banner a { text-decoration: underline; }
.toast {
  position: fixed; left: 50%; bottom: var(--s24); transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r);
  font-size: var(--t14); font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .2s; z-index: 100; max-width: 90vw;
}
.toast.show { opacity: 1; }
.toast.err { background: var(--air); color: #fff; }

/* ==========================================================================
   VISUAL LAYER — imagery carries the schedule, rather than decorating it.
   ========================================================================== */

/* ---- Hero: copy beside one real class, as a poster ---- */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s64); align-items: center; }
.air-label { color: var(--air); margin-bottom: var(--s16); }

.poster {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; transition: border-color .15s;
}
.poster:hover { border-color: var(--ink-3); }
.poster.is-onair { border-color: var(--air); }
.poster-img { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.poster-img img { width: 100%; height: 100%; object-fit: cover; }
.poster-state {
  position: absolute; top: var(--s12); left: var(--s12);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--ink); padding: 6px 11px;
  border-radius: 100px; font-size: var(--t12); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.poster-state.is-onair { background: var(--air); color: #fff; }
.poster-body { padding: var(--s16); display: flex; flex-direction: column; gap: var(--s8); }
.poster-title { font-size: var(--t25); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.poster-tutor { display: flex; align-items: center; gap: var(--s8); font-size: var(--t14); color: var(--ink-2); }
.poster-tutor img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.poster-seats { display: flex; flex-direction: column; gap: 5px; margin-top: var(--s4); }

/* ---- Horizontal poster strip ---- */
.strip-scroll { overflow-x: auto; padding: var(--s4) 0 var(--s16); -webkit-overflow-scrolling: touch; }
.strip-scroll::-webkit-scrollbar { height: 6px; }
.strip-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.strip {
  display: flex; gap: var(--s16);
  padding: 0 var(--s24);
  max-width: var(--maxw); margin: 0 auto; width: max-content; min-width: 100%;
}
.strip-card {
  width: 260px; flex: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; transition: border-color .15s;
}
.strip-card:hover { border-color: var(--ink-3); }
.strip-card.is-onair { border-color: var(--air); }
.strip-img { position: relative; aspect-ratio: 3 / 2; background: var(--surface-2); }
.strip-img img { width: 100%; height: 100%; object-fit: cover; }
.strip-state {
  position: absolute; top: var(--s8); left: var(--s8);
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); color: var(--ink); padding: 4px 9px;
  border-radius: 100px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.strip-state.is-onair { background: var(--air); color: #fff; }
.strip-price {
  position: absolute; bottom: var(--s8); right: var(--s8);
  background: var(--ink); color: var(--paper); padding: 4px 9px;
  border-radius: 100px; font-size: 11px; font-weight: 700;
}
.strip-body { padding: var(--s12); display: flex; flex-direction: column; gap: 5px; }
.strip-body strong { font-size: var(--t16); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.strip-tutor { display: flex; align-items: center; gap: 6px; font-size: var(--t12); color: var(--ink-2); margin-top: var(--s4); }
.strip-tutor img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.strip-tutor .seat-text { margin-left: auto; }

/* ---- Category tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s12); }
.tile {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 6px;
  overflow: hidden; background: var(--surface-2);
}
.tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .3s; }
.tile:hover img { filter: grayscale(0); }
.tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,.12) 30%, rgba(10,8,7,.78)); }
.tile-text { position: absolute; left: var(--s16); right: var(--s16); bottom: var(--s12); color: #fff; }
.tile-text strong { display: block; font-size: var(--t20); font-weight: 700; letter-spacing: -.03em; }
.tile-text small { font-size: var(--t12); color: rgba(255,255,255,.72); }

/* ---- Instructor faces ---- */
.faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s16); }
.face { text-align: center; }
.face img, .face-blank {
  width: 100%; max-width: 116px; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  margin: 0 auto var(--s8); display: block; background: var(--surface-2);
}
.face-blank {
  display: grid; place-items: center; font-size: var(--t31); font-weight: 700; color: var(--ink-3);
}
.face strong { display: block; font-size: var(--t14); font-weight: 700; }
.face small { font-size: var(--t12); color: var(--ink-3); }

/* ---- Founder band, image-led ---- */
.founder { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s64); align-items: center; }
.founder-art { position: relative; margin: 0; padding-bottom: var(--s40); }
.founder-art img { width: 100%; border-radius: 6px; aspect-ratio: 4/3; object-fit: cover; }
.founder-art-2 {
  position: absolute; right: -8px; bottom: 0; width: 46% !important;
  aspect-ratio: 3/4 !important; object-position: center 28%;
  border: 5px solid var(--paper); border-radius: 6px;
}
.founder-head { font-size: var(--t31); margin: var(--s12) 0; }
.founder p { color: var(--ink-2); margin: 0 0 var(--s24); max-width: 44ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .hero-grid, .founder { grid-template-columns: 1fr; gap: var(--s40); }
  .faces { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .faces { grid-template-columns: repeat(3, 1fr); }
  .run-row { grid-template-columns: 104px 56px 1fr 96px; }
  .run-thumb { width: 56px; height: 42px; }
}
@media (max-width: 560px) {
  .tiles, .faces { grid-template-columns: repeat(2, 1fr); }
  .run-row { grid-template-columns: 92px 1fr; }
  .run-thumb { display: none; }
  .strip { padding: 0 var(--s16); }
  .strip-card { width: 220px; }
  .founder-art-2 { display: none; }
}

@media (max-width: 1040px) {
  .detail-grid { grid-template-columns: 1fr; gap: var(--s40); }
  .book { position: static; }
  .week { grid-template-columns: repeat(4, 1fr); }
  .day-head { position: static; }
}
@media (max-width: 860px) {
  .trio, .offer-grid, .gal { grid-template-columns: repeat(2, 1fr); }
  .about-hero, .bio-grid, .foot-inner { grid-template-columns: 1fr; gap: var(--s40); }
  .about-portrait { max-width: 380px; }
  .spec { grid-template-columns: repeat(2, 1fr); }
  .learn-list { grid-template-columns: 1fr; }
  /* .run-row columns are set in the visual-layer block above */
  .run-price, .run-cta { display: none; }
  .week { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .trio, .offer-grid, .gal, .tf-grid, .tf-row { grid-template-columns: 1fr; }
  .run-row { row-gap: var(--s8); }
  .run-seats { grid-column: 1 / -1; }
  .week { grid-template-columns: 1fr; }
  .hero { padding: var(--s40) 0 var(--s24); }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}