/* Fonts (SIL Open Font License) are served from this site, not from Google Fonts, so the browser can fetch the ones
   the page needs before the first paint (see the preload links in the page head) and keep them for a year.
   Regenerate the files and these rules with scripts/fonts.mjs. */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(fonts/cormorant-garamond-v21-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(fonts/cormorant-garamond-v21-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(fonts/cormorant-garamond-v21-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(fonts/cormorant-garamond-v21-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(fonts/cormorant-garamond-v21-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/montserrat-v31-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/montserrat-v31-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/montserrat-v31-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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/montserrat-v31-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/montserrat-v31-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;
}

/* Seame Yoga: palette taken from the logo (gold) and the studio's own schedule graphic (blush + sage). */
:root {
  --sand: #F6ECE4;
  --paper: #FFFBF7;
  --gold: #C19C6A;
  --gold-ink: #7E5A2E;
  --sage: #56704F;
  --sage-deep: #44593E;
  --ink: #2E3329;
  --muted: #5C5F55;
  --rule: rgba(46, 51, 41, 0.16);

  --display: "Cormorant Garamond", "Noto Serif SC", "Noto Serif KR", Georgia, serif;
  --text: "Montserrat", "Noto Sans SC", "Noto Sans KR", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.375rem;
  --step-2: clamp(1.6rem, 1.3rem + 1vw, 1.95rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  --step-4: clamp(2.7rem, 1.6rem + 5vw, 5.4rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius: 4px;
  --header-h: 64px;
}

/* CJK pages: Cormorant has no CJK glyphs, so lead with the Noto faces and loosen the heading weight. */
.lang-zh { --display: "Noto Serif SC", "Cormorant Garamond", serif; --text: "Noto Sans SC", "Montserrat", system-ui, sans-serif; }
.lang-ko { --display: "Noto Serif KR", "Cormorant Garamond", serif; --text: "Noto Sans KR", "Montserrat", system-ui, sans-serif; }
.lang-zh h1, .lang-ko h1 { font-weight: 400; letter-spacing: 0.02em; line-height: 1.25; }
.lang-zh, .lang-ko { --step-4: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); }
.lang-ko { word-break: keep-all; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 300; letter-spacing: -0.01em; line-height: 1.02; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 500; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--ink); color: var(--sand); padding: 0.5rem 1rem; z-index: 100; }
.skip:focus { left: 0.5rem; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.75rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn-small { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.btn-sage { background: var(--sage); color: var(--paper); }
.btn-sage:hover { background: var(--sage-deep); }
.btn-quiet { background: transparent; border-color: rgba(46, 51, 41, 0.45); color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink); background: rgba(255, 251, 247, 0.6); }
.text-link, .link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--sage-deep); font-weight: 500; font-size: 0.95rem;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
}
.text-link:hover, .link-btn:hover { text-decoration-color: currentColor; }

/* Language suggestion */
/* The language suggestion floats over the page, so showing it after the page has drawn moves nothing (no layout shift). */
.lang-hint {
  position: fixed; z-index: 40; left: 50%; bottom: 1rem; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.4rem 0.55rem 1rem;
  background: var(--ink); color: var(--sand); font-size: var(--step--1); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(46, 51, 41, 0.28);
}
.lang-hint p { margin: 0; }
.lang-hint a { color: var(--paper); font-weight: 600; }
.lang-hint-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--sand); padding: 0.25rem 0.5rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(246, 236, 228, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.header-book { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; margin-right: auto; }
.brand-name { font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: 0.14em; font-size: 0.95rem; color: var(--gold-ink); white-space: nowrap; }
.site-header .wrap { max-width: 1360px; }
.site-nav { display: flex; gap: 1.25rem; font-size: 0.9rem; }
.site-nav a { text-decoration: none; padding: 0.35rem 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.site-nav a:hover { border-bottom-color: var(--gold); }
.lang-switch { display: flex; gap: 0.15rem; font-size: 0.8rem; }
.lang-switch a { text-decoration: none; padding: 0.3rem 0.45rem; border-radius: var(--radius); color: var(--muted); white-space: nowrap; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.menu-toggle { display: none; }
.lang-menu { position: relative; font-size: 0.85rem; }
.lang-menu summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.4rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; list-style: none; white-space: nowrap; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu[open] summary svg { transform: rotate(180deg); }
.lang-menu nav { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30; display: flex; flex-direction: column; min-width: 10rem; padding: 0.35rem; background: var(--paper, #FFFBF7); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 8px 24px rgba(46, 51, 41, 0.12); }
.lang-menu nav a { padding: 0.6rem 0.75rem; border-radius: 8px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.lang-menu nav a:hover, .lang-menu nav a:focus-visible { background: var(--sand); }
.lang-menu nav a[aria-current="page"] { font-weight: 600; }

/* Hero */
.hero { position: relative; padding-block: clamp(2rem, 4vw, 4.5rem) 1.5rem; isolation: isolate; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { max-width: 12ch; }
.lang-zh .hero h1, .lang-ko .hero h1 { max-width: 14em; }
.lede { font-size: 1.125rem; max-width: 34em; margin-top: 1.5rem; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.breathe-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transition: transform 0.3s; }
.breathe-status { min-height: 1.6em; margin-top: 0.9rem; font-family: var(--display); font-size: var(--step-1); color: var(--gold-ink); }
.rating { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); color: var(--muted); text-decoration: none; }
.rating:hover span:last-child { text-decoration: underline; }
.stars { color: var(--gold); letter-spacing: 0.12em; font-size: 0.95rem; }
.hero-photo { margin: 0; position: relative; z-index: 1; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 58% 50%; border-radius: 180px 180px var(--radius) var(--radius); }

/* The gold line: the logo's single stroke, stretched into a breath that runs through the hero. */
.breath-line { position: absolute; left: 0; right: 0; bottom: -1%; width: 100%; height: clamp(160px, 26vw, 320px); z-index: 2; pointer-events: none; overflow: visible; }
.breath-line path { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s 0.3s cubic-bezier(0.6, 0, 0.3, 1) forwards; }
.breath-wave { transform-origin: 50% 70%; transform-box: fill-box; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.next-class { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-top: clamp(3rem, 7vw, 6rem); padding: 1rem 0; border-top: 1px solid var(--rule); font-size: 0.95rem; position: relative; z-index: 2; }
/* The script fills in the next class after the page has drawn. Until then the line keeps its space, invisible,
   so showing it moves nothing below it (no layout shift). */
.next-class.is-pending { visibility: hidden; }
.next-label { color: var(--muted); }
.next-when { font-weight: 600; }
.next-in { color: var(--gold-ink); }

/* Promise strip */
.promise { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 1.25rem 0; margin-block: 0; font-size: 0.92rem; }
.promise li { padding: 0.25rem 1.25rem; border-left: 1px solid var(--gold); }
.promise li:first-child { border-left: 0; padding-left: 0; }

/* Section rhythm */
.ways, .styles, .teacher, .finder, .schedule, .prices, .courses, .reviews, .social, .shop, .studios, .journal { padding-block: var(--section); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head p { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }

/* Ways */
.ways-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(2rem, 4vw, 3.5rem); }
.way-main { grid-row: span 2; }
.way img { border-radius: var(--radius); width: 100%; object-fit: cover; }
.way-main img { aspect-ratio: 4 / 3; margin-bottom: 1.5rem; }
.way h3 { margin-bottom: 0.6rem; }
.way p { margin-bottom: 1rem; max-width: 34em; }
.way-side { display: grid; grid-template-columns: 38% 1fr; gap: 1.5rem; align-items: start; }
.way-side img { aspect-ratio: 3 / 4; }

/* Styles */
.styles { background: var(--paper); }
.styles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.styles-grid .section-head { grid-column: 1 / -1; }
.style { border-top: 1px solid var(--gold); padding-top: 1.5rem; }
.style img { width: 100%; aspect-ratio: 5 / 4; border-radius: 90px 90px var(--radius) var(--radius); object-fit: cover; margin-bottom: 1.25rem; }
.style h3 { margin-bottom: 0.5rem; }
.style p { color: var(--muted); }

/* Teacher */
.teacher-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.teacher-photo { margin: 0; }
.teacher-photo img { border-radius: var(--radius); aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.teacher-copy > p { margin-top: 1.25rem; max-width: 34em; }
.teacher blockquote { margin: 2rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--gold); }
.teacher blockquote p { font-family: var(--display); font-size: var(--step-2); line-height: 1.25; }
.teacher blockquote footer { margin-top: 0.4rem; font-size: var(--step--1); color: var(--muted); }

/* Finder */
.finder { background: var(--paper); }
.finder-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.finder-form fieldset { border: 0; margin: 0; padding: 0; }
.finder-form legend { font-family: var(--display); font-size: var(--step-2); line-height: 1.2; padding: 0; margin-bottom: 1.25rem; }
.step-count { display: block; font-family: var(--text); font-size: var(--step--1); color: var(--gold-ink); margin-bottom: 0.4rem; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.choices label, .pills label { position: relative; cursor: pointer; }
.choices input, .pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: flex; align-items: center; min-height: 64px; padding: 0.9rem 1.15rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sand); transition: border-color 0.15s, background-color 0.15s; }
.choices label:hover span { border-color: var(--gold); }
.choices input:checked + span { border-color: var(--sage); background: #EEF1EA; }
.choices input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
.finder-result { padding: 1.75rem; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--sand); }
.finder-result:focus { outline: none; }
.finder-result dl { margin: 1.25rem 0 1.5rem; display: grid; gap: 0.75rem; }
.finder-result dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.finder-result dt { color: var(--muted); font-size: 0.9rem; }
.finder-result dd { margin: 0; font-weight: 500; }
.finder-result dd::first-letter { text-transform: uppercase; }
.finder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

/* Schedule: sage band, echoing the studio's printed timetable */
.schedule { background: var(--sage); color: var(--paper); }
.schedule .section-head p, .schedule-note { color: rgba(255, 251, 247, 0.86); }
.timetable { overflow-x: auto; }
.timetable table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.timetable th, .timetable td { padding: 0.9rem 0.5rem; text-align: center; border-bottom: 1px dashed rgba(255, 251, 247, 0.35); }
.timetable thead th { font-weight: 500; padding-bottom: 1.1rem; }
.timetable thead th:first-child, .timetable tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.timetable abbr { text-decoration: none; }
.timetable .is-today { background: rgba(255, 251, 247, 0.09); }
.timetable thead .is-today abbr { box-shadow: inset 0 -2px 0 var(--gold); padding-bottom: 2px; }
.slot {
  min-width: 72px; min-height: 40px; padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer;
  background: var(--sand); color: var(--ink); border: 1px solid var(--sand); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color 0.15s, color 0.15s;
}
.slot:hover { background: var(--paper); }
.slot:focus-visible { outline-color: var(--paper); }
.slot.is-next { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.day-list { display: none; list-style: none; margin: 0; padding: 0; }
.schedule-note { margin-top: 1.5rem; font-size: 0.92rem; max-width: 42em; }
/* Two studios: each class carries its studio's name and mark (a filled dot for 1, a ring for 2, so not by colour alone) */
.slot-tagged { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; padding-block: 0.35rem; }
.slot-studio { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; }
.studio-dot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.dot-s1 { background: var(--gold-ink); }
.dot-s2 { border: 2px solid var(--sage-deep); background: transparent; }
.timetable td .slot + .slot { margin-top: 0.4rem; }
.studio-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.studio-filter button {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 251, 247, 0.6); background: transparent; color: var(--paper); font-size: 0.875rem;
}
.studio-filter button .studio-dot { background-clip: padding-box; box-shadow: 0 0 0 2px var(--paper); }
.studio-filter button .dot-s2 { box-shadow: none; border-color: var(--paper); }
.studio-filter button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.studio-filter button[aria-pressed="true"] .studio-dot { box-shadow: none; }
.studio-filter button[aria-pressed="true"] .dot-s2 { border-color: var(--sage-deep); }
.studio-filter button:focus-visible { outline-color: var(--paper); }
/* Changes in the next two weeks */
.schedule-changes { margin-top: 2rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(255, 251, 247, 0.45); border-radius: 8px; max-width: 48rem; }
.schedule-changes h3 { font-family: var(--text); font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.changes-list { list-style: none; margin: 0; padding: 0; }
.changes-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0; }
.changes-list li + li { border-top: 1px dashed rgba(255, 251, 247, 0.35); }
.changes-list p { flex: 1 1 16rem; }
.changes-list p::first-letter { text-transform: uppercase; }
.changes-list strong { font-weight: 600; }
.change-cancelled p { color: rgba(255, 251, 247, 0.86); }

/* Reviews */
.reviews-head { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.reviews-head > div { max-width: 40rem; }
.rating-big { display: grid; grid-template-columns: auto auto; column-gap: 0.75rem; align-items: center; color: var(--ink); }
.rating-big .rating-value { font-family: var(--display); font-size: 3.4rem; line-height: 1; grid-row: span 2; }
.rating-big span:last-child { font-size: var(--step--1); color: var(--muted); }
.review-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.review-filter button { border: 1px solid var(--rule); background: transparent; border-radius: 999px; padding: 0.45rem 1rem; min-height: 40px; font-size: 0.875rem; cursor: pointer; }
.review-filter button[aria-pressed="true"] { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.review-grid { columns: 3 18rem; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.review { break-inside: avoid; margin: 0 0 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gold); }
.review blockquote { margin: 0; }
.review blockquote p { font-family: var(--display); font-size: 1.4rem; line-height: 1.35; }
.review blockquote[lang="ko"] p, .review blockquote[lang="zh"] p { font-family: "Noto Serif KR", "Noto Serif SC", var(--display); font-size: 1.15rem; line-height: 1.6; }
.lang-zh .review blockquote p, .lang-ko .review blockquote p { font-size: 1.2rem; line-height: 1.55; }
.review figcaption { margin-top: 0.9rem; font-size: var(--step--1); color: var(--muted); }
.review-name { color: var(--ink); font-weight: 600; margin-right: 0.4rem; }
.review-links { display: flex; gap: 1rem; margin-top: 0.4rem; font-size: 0.82rem; }
.review-links a { color: var(--gold-ink); }
.reviews-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* Social */
.social { background: var(--paper); }
.social-head { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.social-head > div { max-width: 40rem; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ig-tile { position: relative; display: block; overflow: hidden; border-radius: 2px; }
.ig-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.5s; }
.ig-tile:hover img { transform: scale(1.04); }
.ig-tile .ig-caption { position: absolute; inset: auto 0 0 0; padding: 0.6rem; font-size: 0.75rem; line-height: 1.35; color: var(--paper); background: linear-gradient(transparent, rgba(46, 51, 41, 0.8)); opacity: 0; transition: opacity 0.2s; }
.ig-tile:hover .ig-caption, .ig-tile:focus-visible .ig-caption { opacity: 1; }
.social-elsewhere { margin-top: 1.5rem; font-size: 0.92rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.social-elsewhere a { color: var(--ink); }

/* Prices: a card per group (Drop-in, 12 classes a month…), each line an option, its price and a button */
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; }
.price-card { background: var(--paper); border-top: 2px solid var(--gold); border-radius: var(--radius); padding: 1.25rem 1.25rem 0.5rem; min-width: 0; }
.price-card h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.2; }
.lang-zh .price-card h3, .lang-ko .price-card h3 { font-size: 1.2rem; }
.price-lines { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.price-lines li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; }
.price-lines li + li { border-top: 1px dashed var(--rule); }
.price-what { display: grid; gap: 0.1rem; min-width: 0; }
.price-option { font-size: 0.85rem; font-weight: 600; color: var(--gold-ink); }
.price-amount { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.price-note { font-weight: 500; font-style: italic; color: var(--sage-deep); }
.lang-zh .price-note, .lang-ko .price-note { font-style: normal; }
.price-lines .btn { flex: none; }
.prices-ask { margin-top: 2rem; }
.prices-ask .text-link { text-align: left; }
/* Two sand sections in a row (no online courses between prices and reviews): a rule between them */
.prices + .reviews { padding-top: 0; }
.prices + .reviews > .wrap { border-top: 1px solid var(--rule); padding-top: var(--section); }

/* Online courses */
.courses { background: var(--paper); }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: clamp(2rem, 3vw, 2.75rem); }
.course { display: flex; flex-direction: column; border-top: 1px solid var(--gold); padding-top: 1.5rem; }
.course img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 90px 90px var(--radius) var(--radius); margin-bottom: 1.25rem; }
.course-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; flex: 1; }
.course h3 { font-size: 1.75rem; }
.course-meta { font-size: 0.85rem; font-weight: 600; color: var(--gold-ink); }
.course-text { color: var(--muted); }
.course-price { margin-top: auto; padding-top: 0.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.courses-open { margin-top: 2.5rem; }
.sample-note { margin-top: 1rem; padding-left: 0.8rem; border-left: 2px solid var(--gold); font-size: 0.9rem; font-style: italic; color: var(--gold-ink); }
.lang-zh .sample-note, .lang-ko .sample-note, .lang-zh .product-sold-out, .lang-ko .product-sold-out { font-style: normal; }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(2rem, 3vw, 2.75rem); }
.product { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 90px 90px var(--radius) var(--radius); background: var(--paper); margin-bottom: 0.75rem; }
.product h3 { font-size: 1.6rem; }
.product-text { color: var(--muted); font-size: 0.95rem; }
.product-price { margin-top: auto; padding-top: 0.25rem; font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.product-option { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 600; }
.product-option select { font: inherit; font-size: 0.95rem; font-weight: 400; color: var(--ink); min-height: 40px; padding: 0.4rem 0.9rem; border: 1px solid rgba(46, 51, 41, 0.45); border-radius: 999px; background: var(--paper); }
.product-in-bag { font-size: 0.85rem; font-weight: 500; color: var(--sage-deep); }
.product-sold-out { color: var(--muted); font-style: italic; }
.bag { display: grid; gap: 1rem; max-width: 30rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0 auto; padding: 1.5rem 1.75rem; background: var(--paper); border: 1px solid var(--gold); border-radius: var(--radius); }
.bag h3 { font-size: var(--step-1); }
.bag-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.bag-lines li { display: grid; grid-template-columns: 1fr auto 2.5ch auto 7.5rem; align-items: center; gap: 0.4rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.bag-step { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(46, 51, 41, 0.35); background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.bag-step:hover { border-color: var(--ink); }
.bag-qty, .bag-price { font-variant-numeric: tabular-nums; }
.bag-qty { text-align: center; }
.bag-price { text-align: right; }
.bag-total { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.05rem; }
.bag-total strong { font-weight: 600; }
/* Two sand sections in a row: divide them the way the journal is divided */
.shop + .studios { padding-top: 0; }
.shop + .studios > .wrap { border-top: 1px solid var(--rule); padding-top: var(--section); }

/* Cards link to their course or product page: the photo and the title */
.card-photo { display: block; }
.card-link { text-decoration: none; }
.card-link:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.card-photo:hover img { opacity: 0.92; }

/* Course and product pages */
.item-page { padding-block: clamp(1.5rem, 4vw, 3rem) var(--section); }
.crumb { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.item-photo { margin: 0; }
.item-photo img, .gallery-main { width: 100%; object-fit: cover; border-radius: 160px 160px var(--radius) var(--radius); background: var(--paper); }
.item-photo-course img { aspect-ratio: 4 / 3; }
.gallery-main { aspect-ratio: 1; }
.item-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.item-info h1 { font-size: var(--step-3); font-weight: 400; line-height: 1.08; }
.lang-zh .item-info h1, .lang-ko .item-info h1 { line-height: 1.3; }
.item-lede { font-size: 1.125rem; max-width: 34em; }
.item-price { font-size: var(--step-1); font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 0.4rem; }
.product-actions { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.stock-left { font-size: 0.9rem; font-weight: 600; color: var(--sage-deep); }
.item-details { display: grid; gap: 1rem; max-width: 38em; color: var(--ink); }
.item-info .item-details { align-self: stretch; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.item-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.item-more > .item-details { padding-top: 1.5rem; border-top: 1px solid var(--gold); }
.item-more > :only-child { grid-column: 1 / -1; max-width: 46rem; }
.page-product .bag { margin-top: clamp(2.5rem, 6vw, 4rem); }

.gallery { display: grid; gap: 0.75rem; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gallery-thumb { padding: 0; width: 72px; height: 72px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); cursor: pointer; overflow: hidden; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { border-color: var(--gold); }
.gallery-thumb[aria-pressed="true"] { border-color: var(--sage); box-shadow: 0 0 0 1px var(--sage); }

.lessons { padding-top: 1.5rem; border-top: 1px solid var(--gold); }
.lessons h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson { display: grid; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.lesson-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; }
.lesson-n { min-width: 1.6rem; font-size: 0.9rem; font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.lesson-title { flex: 1 1 12rem; }
.lesson-free { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sage-deep); border: 1px solid var(--sage); border-radius: 999px; padding: 0.1rem 0.6rem; }
.lesson .learn-video, .lesson-video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }

/* 404 */
.nf-main { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section); }
.nf-main h1 { color: var(--gold); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.nf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.nf-lang { display: grid; gap: 0.6rem; align-content: start; border-top: 1px solid var(--gold); padding-top: 1.25rem; }
.nf-lang h2 { font-size: var(--step-2); }
.nf-lang p { color: var(--muted); }
.nf-lang[lang="zh"] h2 { font-family: "Noto Serif SC", var(--display); }
.nf-lang[lang="ko"] h2 { font-family: "Noto Serif KR", var(--display); }

/* Studios */
.studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.studio-grid-one { grid-template-columns: minmax(0, 40rem); }
.studio { border-top: 1px solid var(--gold); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.studio-address { font-weight: 600; }
.studio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 0.6rem 0 1rem; }
.map-slot {
  margin-top: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); display: grid; place-items: center;
  /* a quiet street-grid hint while the map loads */
  background:
    linear-gradient(115deg, transparent 47%, rgba(193, 156, 106, 0.55) 47.4%, rgba(193, 156, 106, 0.55) 48.6%, transparent 49%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(46, 51, 41, 0.07) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(46, 51, 41, 0.07) 62px 64px),
    var(--paper);
}
.map-slot iframe { width: 100%; height: 100%; border: 0; }
.studios-ask { margin-top: 2.5rem; color: var(--muted); }

/* Journal */
.journal { padding-top: 0; }
.journal-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--rule); padding-top: var(--section); }
.journal-list { list-style: none; margin: 0; padding: 0; }
.journal-list a { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.journal-list a:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.25em; }
.journal-list time { color: var(--muted); font-size: 0.9rem; padding-top: 0.2rem; }
.journal-list span { font-family: var(--display); font-size: 1.4rem; line-height: 1.25; }

/* Footer */
.site-footer { background: var(--ink); color: var(--sand); padding-block: 4rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.footer-brand img { width: 200px; background: var(--paper); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.footer-brand p { max-width: 32em; font-size: 0.95rem; color: rgba(246, 236, 228, 0.82); }
.site-footer h2 { font-family: var(--text); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.9rem; color: var(--gold); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { text-decoration: none; }
.site-footer ul a:hover { text-decoration: underline; }
.footer-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(246, 236, 228, 0.18); font-size: var(--step--1); color: rgba(246, 236, 228, 0.7); }
.site-footer .lang-switch a { color: rgba(246, 236, 228, 0.75); }
.site-footer .lang-switch a[aria-current="page"] { color: var(--paper); }
.footer-legal { flex-basis: 100%; max-width: 64em; margin: 0; font-size: 0.8rem; line-height: 1.6; color: rgba(246, 236, 228, 0.7); }
.footer-legal strong { color: var(--paper); font-weight: 600; }
.footer-legal a { color: inherit; }
.footer-legal-title { opacity: 0.75; }
.footer-privacy { flex-basis: 100%; max-width: 64em; font-size: 0.8rem; line-height: 1.55; color: rgba(246, 236, 228, 0.6); }
.footer-privacy summary { cursor: pointer; width: max-content; }
.footer-privacy summary:hover { text-decoration: underline; }
.footer-privacy p { margin: 0.5rem 0 0; }

/* Booking dialog */
.book { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(46, 51, 41, 0.35); }
.book::backdrop { background: rgba(46, 51, 41, 0.55); }
.book-form { padding: 1.75rem; display: grid; gap: 1.25rem; }
.book-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.book-head h2 { font-size: var(--step-2); }
.book-close { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; min-width: 44px; min-height: 44px; }
.book-topic { margin-top: -0.75rem; color: var(--gold-ink); font-weight: 500; }
.book-skipped { display: block; margin-top: 0.25rem; color: var(--muted); font-weight: 400; font-size: 0.9rem; }
.book fieldset { border: 0; padding: 0; margin: 0; }
.book legend, .field > span { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; display: block; padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pills span { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.95rem; border: 1px solid rgba(46, 51, 41, 0.3); border-radius: 999px; font-size: 0.9rem; }
.pills input:checked + span { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.pills input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
.field { display: block; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--sand); border: 1px solid rgba(46, 51, 41, 0.45); border-radius: var(--radius); padding: 0.65rem 0.8rem; }
.field input::placeholder { color: #6E6F66; }
.field textarea { resize: vertical; line-height: 1.5; }
.book-hint { font-size: 0.85rem; color: var(--muted); }
.book-qr { display: grid; gap: 0.75rem; justify-items: center; padding: 1rem; border-radius: 8px; background: var(--sand); text-align: center; }
.book-qr h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.book-qr img { width: min(240px, 70vw); height: auto; aspect-ratio: 1; border-radius: 6px; background: #fff; }
.book-qr-details { margin: 0; display: grid; gap: 0.35rem; width: 100%; text-align: left; font-size: 0.9rem; }
.book-qr-details div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.book-qr-details dt { color: var(--muted); }
.book-qr-details dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.book-qr-details .text-link { font-weight: 500; font-size: 0.85rem; }
.book-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.book-status { min-height: 1.4em; font-size: 0.9rem; color: var(--sage-deep); font-weight: 500; }

/* Mobile bar */
.mobile-bar { display: none; }

@media (max-width: 1200px) {
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 0.5rem var(--gutter) 1rem; background: var(--sand); border-bottom: 1px solid var(--rule); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
  .menu-toggle { display: inline-flex; align-items: center; min-height: 40px; background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; cursor: pointer; }
  .header-inner { gap: 0.75rem; }
}

@media (max-width: 860px) {
  .hero-grid, .teacher-grid, .finder-inner, .journal-grid, .item-grid, .item-more { grid-template-columns: 1fr; }
  .item-photo img, .gallery-main { border-radius: 120px 120px var(--radius) var(--radius); }
  .hero-photo { order: -1; }
  .hero-photo img { aspect-ratio: 4 / 3; border-radius: 120px 120px var(--radius) var(--radius); }
  .hero h1 { max-width: 14ch; }
  /* ride along the bottom edge of the stacked photo */
  .breath-line { bottom: auto; top: calc(2rem + 92vw * 0.75 - 112px); }
  .promise { grid-template-columns: repeat(2, 1fr); row-gap: 0.75rem; }
  .promise li:nth-child(3) { border-left: 0; padding-left: 0; }
  .ways-grid { grid-template-columns: 1fr; }
  .way-main { grid-row: auto; }
  .styles-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .style img { aspect-ratio: 16 / 10; }
  .studio-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .header-book { display: none; }
  .brand { margin-right: auto; }
  .lede { font-size: 1.05rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .way-side { grid-template-columns: 1fr; }
  .way-side img { aspect-ratio: 4 / 3; }
  .choices { grid-template-columns: 1fr; }
  .choices span { min-height: 56px; }
  .finder-result dl div { grid-template-columns: 1fr; gap: 0.15rem; }
  .timetable { display: none; }
  .day-list { display: grid; gap: 0; }
  .day-list li { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px dashed rgba(255, 251, 247, 0.35); }
  .day-list li.is-today .day-name { box-shadow: inset 0 -2px 0 var(--gold); justify-self: start; }
  .day-name::first-letter { text-transform: uppercase; }
  .day-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .journal-list a { grid-template-columns: 1fr; gap: 0.2rem; }
  .bag { padding: 1.25rem; }
  .bag-lines li { grid-template-columns: auto 2.5ch auto 1fr; }
  .bag-name { grid-column: 1 / -1; }
  .mobile-bar {
    display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--ink); color: var(--sand); font-size: 0.875rem;
  }
  body { padding-bottom: 64px; }
  /* Above the fixed booking bar. */
  .lang-hint { bottom: calc(64px + 0.75rem + env(safe-area-inset-bottom)); }
  .book { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .breath-line path { animation: none; stroke-dashoffset: 0; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Student area (/learn, Cloudflare only) */
.learn-main { padding-block: clamp(2rem, 5vw, 4rem) 5rem; display: grid; gap: 1.25rem; max-width: 960px; }
.learn-hello { color: var(--gold-ink); font-weight: 500; }
.learn-lede { max-width: 36em; color: var(--muted); font-size: 1.05rem; }
.learn-contact { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.learn-form { display: grid; gap: 1rem; max-width: 26rem; margin-block: 1.5rem; justify-items: start; }
.learn-form .field { width: 100%; }
.learn-legal, .book-legal { font-size: 0.8rem; color: var(--ink-soft, inherit); opacity: 0.8; }
.learn-legal a, .book-legal a { color: inherit; text-decoration: underline; }
.learn-status { max-width: 36em; padding: 0.8rem 1rem; border-radius: var(--radius); background: #E7EEE3; border-left: 3px solid var(--sage); font-weight: 500; }
.learn-status.is-error { background: #F5E6E1; border-left-color: #9B3B2E; }
.field small { display: block; margin-top: 0.4rem; }
.learn-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.75rem; margin-top: 1rem; }
.learn-course { display: grid; gap: 0.4rem; text-decoration: none; }
.learn-course img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 90px 90px var(--radius) var(--radius); margin-bottom: 0.6rem; }
.learn-course-title { font-family: var(--display); font-size: 1.6rem; line-height: 1.15; }
.learn-course:hover .learn-course-title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
.learn-course-meta { font-size: 0.85rem; font-weight: 600; color: var(--gold-ink); }
.learn-lessons { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 2.5rem; }
.learn-lesson { display: grid; gap: 0.9rem; }
.learn-lesson h2 { font-size: var(--step-2); display: flex; gap: 0.75rem; align-items: baseline; }
.learn-lesson h2 span { font-family: var(--text); font-size: 0.9rem; font-weight: 600; color: var(--gold-ink); min-width: 1.5rem; }
.learn-video, .learn-lesson iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.learn-video { position: relative; padding: 0; cursor: pointer; background: var(--ink); overflow: hidden; }
.learn-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.learn-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: var(--paper); box-shadow: 0 6px 24px rgba(46, 51, 41, 0.35); }
.learn-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--sage); }
.learn-video:hover .learn-play { background: var(--sand); }
.learn-soon { padding: 1.25rem; border: 1px dashed var(--gold); border-radius: var(--radius); color: var(--muted); }

/* ---------- blog ---------- */
.journal-all { margin: 1.5rem 0 0; }
.post { max-width: 42rem; margin-inline: auto; }
.post-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: 1.25rem; border-bottom: 1px solid var(--gold); }
.post-head h1 { font-size: var(--step-3); font-weight: 400; line-height: 1.1; }
.lang-zh .post-head h1, .lang-ko .post-head h1 { line-height: 1.3; }
.post-date { margin: 0; color: var(--muted); font-size: 0.9rem; }
.post-note { margin: 0; font-size: 0.9rem; color: var(--muted); }
.post-body { display: grid; gap: 1.1rem; font-size: 1.05rem; line-height: 1.75; overflow-wrap: anywhere; }
.post-body > * { margin: 0; }
.post-body h2 { font-size: var(--step-2); margin-top: 1rem; line-height: 1.2; }
.post-body ul { padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.post-body figure img { width: 100%; height: auto; border-radius: var(--radius); }
.post-body a { color: var(--sage-deep); text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
.post-list { list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); }
.post-card a { display: grid; gap: 0.9rem; text-decoration: none; color: inherit; }
.post-card img, .post-card-blank { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--sand); display: block; }
.post-card-text { display: grid; gap: 0.4rem; }
.post-card time { color: var(--muted); font-size: 0.85rem; }
.post-card strong { font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.post-card-text > span { color: var(--muted); font-size: 0.95rem; }
.post-card a:hover strong { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.2em; }