/* ============================================================
   INTERNAL KUNG FU AUSTRALIA — DESIGN SYSTEM
   Inspired by editorial / experimental web aesthetics.
   ============================================================ */

:root {
  /* RICEPAPER — default palette */
  --bg: #f3f1ea;           /* cool off-white, not warm cream */
  --bg-2: #e8e4d6;
  --bg-3: #d6d0bc;
  --fg: #14110f;
  --fg-2: #2a261f;
  --muted: #4a463f;
  --silver: #8a857c;
  --rust: #c8102e;
  --rust-deep: #8a0a1f;
  --gold: #b89455;
  --line: rgba(20, 17, 15, 0.10);
  --line-strong: rgba(20, 17, 15, 0.26);

  /* Back-compat aliases used throughout the stylesheet */
  /* Light "surface" colour used by every card/box AND the footer
     (the bone the user recognises). Drives them all through ONE token
     so the Tweaks panel can recolour every box + the page's bottom at
     once. -2/-3 are auto-derived darker shades for hover/inset states. */
  --surface: #f8f8f8;
  --surface-2: color-mix(in srgb, var(--surface) 93%, #1b1916);
  --surface-3: color-mix(in srgb, var(--surface) 84%, #1b1916);

  --ink: var(--surface);
  --ink-2: var(--surface-2);
  --ink-3: var(--surface-3);

  /* TEXT ON LIGHT BOXES — the surface (--ink) is ALWAYS a light "bone"
     tone (even on dark themes), so text printed on boxes must stay dark
     no matter the theme. These are deliberately theme-INDEPENDENT and are
     exposed to the Tweaks panel via the *-ovr override hooks.
     (Page-level text that sits on --bg uses --fg/--muted instead — those
     DO flip per theme so they always contrast the page background.) */
  --paper:      var(--paper-ovr,        #3a2a20); /* primary ink on boxes */
  --paper-2:    var(--paper-ovr-2,      #3a2a20); /* secondary ink */
  --bone:       var(--paper-ovr-muted,  color-mix(in srgb, #3a2a20 80%, var(--surface))); /* muted body copy on boxes */
  --paper-soft: var(--paper-ovr-soft,   color-mix(in srgb, #3a2a20 60%, var(--surface))); /* soft / label copy on boxes */
  --accent: var(--rust);

  --f-display: "Archivo", "Archivo Black", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --f-cjk: "Noto Serif SC", "Songti SC", serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}

/* Allow cursor on touch devices */
@media (hover: none) {
  body { cursor: auto; }
  .cursor { display: none !important; }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
@media (hover: none) { button { cursor: pointer; } }

::selection { background: var(--rust); color: var(--paper); }

/* ---------- CUSTOM CURSOR ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  background: var(--fg);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 9999;
  transition: transform .25s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out);
  transform: translate(-50%, -50%);
}
.cursor.hover {
  width: 56px; height: 56px;
  background: var(--rust);
  mix-blend-mode: normal;
}
.cursor.hover.text-cursor::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- TYPE ---------- */
.h-display {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  letter-spacing: -0.04em;
  line-height: 0.85;
  text-transform: uppercase;
}
.h-display em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}
.label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}
.label .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--rust);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-1px);
}

/* ---------- LAYOUT ---------- */
.shell {
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}
.section {
  padding-top: clamp(80px, 12vw, 180px);
  padding-bottom: clamp(80px, 12vw, 180px);
  position: relative;
}
.section > .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: clamp(40px, 6vw, 80px);
}

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(20px, 4vw, 56px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .3s, padding .3s;
}
.nav.scrolled {
  padding: 14px clamp(20px, 4vw, 56px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.nav-logo img {
  width: 46px; height: 46px;
  object-fit: contain;
}
.nav-logo .stack { line-height: 1.2; }
.nav-logo .stack b { display: block; font-weight: 600; }
.nav-logo .stack span { color: var(--silver); font-size: 9px; }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--rust);
  transition: right .35s var(--ease-out);
}
.nav-links a:hover::after { right: 0; }
.nav-links a:hover { color: var(--rust); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-out);
  will-change: transform;
}
.nav-cta:hover { background: var(--rust); color: var(--bg); border-color: var(--rust); transform: translateY(-2px); }
.nav-cta .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2s infinite;
}
.nav-cta:hover .pulse { background: var(--paper); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(200,16,46,.7); }
  70% { box-shadow: 0 0 0 10px rgba(200,16,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  padding: 120px clamp(20px, 4vw, 56px) 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-bg .cjk {
  position: absolute;
  font-family: var(--f-cjk);
  font-weight: 700;
  color: var(--rust);
  opacity: 0.06;
  user-select: none;
  line-height: 0.9;
}
.hero-bg .cjk.big {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(280px, 60vw, 900px);
  letter-spacing: -0.05em;
  opacity: 0.09;
}
.hero-bg .cjk {
  opacity: 0.09;
}
.hero-bg .grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: multiply;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  position: relative;
  z-index: 2;
}
.hero-meta-item {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.hero-meta-item b { color: var(--fg); display: block; font-weight: 500; margin-top: 4px; }

.hero-title {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0;
}
.hero-title h1 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(72px, 15vw, 248px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero-title h1 .line {
  display: block;
  overflow: hidden;
  /* Tight line-height (0.82) + overflow:hidden clips glyph descenders
     (the "g" in the italic "kung fu"). Pad the clip box down and pull it
     back with an equal negative margin so descenders show with no layout
     shift. The rise-in span still starts below this box, so it stays
     hidden until it animates up. */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.hero-title h1 .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.1s var(--ease-out) forwards;
}
.hero-title h1 .line:nth-child(2) > span { animation-delay: .15s; }
.hero-title h1 .line:nth-child(3) > span { animation-delay: .30s; }
/* Once the rise-in finishes, stop clipping so wide lines like "— Australia"
   (and any glyph that overruns the text box) are never cut off. */
.hero-title.lines-in h1 .line { overflow: visible; }
.hero-title h1 .red { color: var(--rust); }
.hero-title h1 .italic {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
}
@keyframes rise {
  to { transform: translateY(0); }
}

.hero-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: end;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.hero-tag {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.hero-tag .serif {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  margin-bottom: 8px;
  line-height: 1.25;
}
.hero-scroll {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-scroll .line {
  width: 1px;
  height: 50px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.hero-scroll .line::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--rust);
  animation: scroll-tick 2s var(--ease-out) infinite;
}
@keyframes scroll-tick {
  0% { top: -50%; }
  100% { top: 100%; }
}
.hero-stats {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.hero-stats b {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 40px;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-stats { text-align: left; }
  .hero-meta-item:nth-child(2) { display: none; }
}

/* ---------- ARTICLE LONGREAD (used on articles.html and per-article pages) ---------- */
.longread {
  padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.longread-inner {
  max-width: 760px;
  margin: 0 auto;
}
.longread .crumb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 32px;
}
.longread .crumb a { color: var(--silver); transition: color .2s; }
.longread .crumb a:hover { color: var(--rust); }
.longread .crumb .sep { color: var(--rust); margin: 0 8px; }
.longread h1 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(48px, 7vw, 92px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.88;
  margin-bottom: 32px;
  color: var(--fg);
}
.longread h1 em, .longread h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.longread h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(48px, 7vw, 92px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.88;
  margin-bottom: 32px;
}
.longread .dek {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  color: var(--fg);
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.longread .body-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 48px;
}
.longread .body > p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 24px;
  color: var(--fg);
}
.longread .body > p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 86px;
  line-height: 0.8;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--rust);
}
.longread .body h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 30px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 48px 0 24px;
}
.longread .body ol, .longread .body ul {
  margin: 0 0 28px 1.2em;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
}
.longread .body li { margin-bottom: 12px; }
.longread .body a { color: var(--rust); border-bottom: 1px solid currentColor; }
.longread .pullquote {
  border-left: 2px solid var(--rust);
  padding: 12px 0 12px 28px;
  margin: 36px 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  color: var(--fg);
}
.longread .body .article-note {
  margin: 28px 0;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.longread .end {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--f-cjk);
  color: var(--rust);
  font-size: 28px;
}
.longread .signoff {
  margin-top: 40px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  line-height: 1.7;
}
.longread .signoff b { color: var(--fg); display: block; font-weight: 600; }

/* "More articles" footer block on individual article pages */
.next-articles {
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.next-articles h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.next-articles h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.next-articles .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .next-articles .grid { grid-template-columns: 1fr; } }

/* ---------- SEAL (large brand mark) ---------- */
.seal {
  padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px);
  position: relative;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.seal-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.seal-side {
  text-align: left;
}
.seal-side.right { text-align: right; }
.seal-side .label { justify-content: flex-start; border: 0; padding: 0; margin-bottom: 18px; }
.seal-side.right .label { justify-content: flex-end; }
.seal-side h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.95;
}
.seal-side h3 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.seal-side p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 280px;
}
.seal-side.right p { margin-left: auto; }
.seal-mark {
  width: clamp(320px, 42vw, 610px);
  position: relative;
}
.seal-mark img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--fg) 18%, transparent));
  animation: seal-spin 90s linear infinite;
}
@keyframes seal-spin {
  to { transform: rotate(360deg); }
}
.seal-mark .ring-label {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}
.seal-mark .ring-label text {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  fill: var(--muted);
  text-transform: uppercase;
}
.no-motion .seal-mark img { animation: none; }

@media (max-width: 900px) {
  .seal-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .seal-side, .seal-side.right { text-align: center; }
  .seal-side p, .seal-side.right p { margin-left: auto; margin-right: auto; }
  .seal-side .label, .seal-side.right .label { justify-content: center; }
  /* The crest is a fixed-width block; in a 1-col grid it defaults to the
     left of its cell. Centre it explicitly so it sits mid-screen. */
  .seal-mark { justify-self: center; margin-left: auto; margin-right: auto; }
}

/* CTA emblem */
.cta-emblem {
  width: clamp(140px, 18vw, 220px);
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
}
.cta-emblem img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--fg) 18%, transparent));
}

/* ---------- MARQUEE ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
  background: var(--fg);
  color: var(--bg);
}
.marquee .marquee-track > span { color: var(--bg); }
.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee-track > span {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 36px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 60px;
  color: var(--fg);
}
.marquee-track > span::after {
  content: "✦";
  color: var(--rust);
  font-size: 22px;
}
.marquee-track .cjk {
  font-family: var(--f-cjk);
  color: var(--rust);
  font-stretch: 100%;
  letter-spacing: 0;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- ABOUT / INTRO ---------- */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.intro-left {
  position: sticky;
  top: 120px;
}
.intro-left h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.intro-left h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.intro-right p {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  margin-bottom: 28px;
  color: var(--fg);
}
.intro-right p:first-of-type {
  font-family: var(--f-serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-style: italic;
  color: var(--fg);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.intro-right p strong { color: var(--rust); font-weight: 500; }

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .intro-left { position: static; }
}

/* ---------- PHILOSOPHY (4 pillars) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillar {
  background: var(--ink);
  color: var(--paper);
  padding: 40px 28px 32px;
  min-height: 360px;
  position: relative;
  overflow: hidden;
  transition: background .5s var(--ease-out), transform .5s var(--ease-out);
  will-change: transform;
}
.pillar:hover {
  background: var(--ink-2);
  transform: translateY(-6px);
}
.pillar:hover .pillar-cjk { transform: translate(-10px, 10px); opacity: 0.2; }
.pillar-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--paper-soft);
}
.pillar-cjk {
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-family: var(--f-cjk);
  font-weight: 700;
  font-size: 180px;
  color: var(--rust);
  opacity: 0.12;
  line-height: 0.9;
  transition: transform .8s var(--ease-out), opacity .8s var(--ease-out);
  user-select: none;
}
.pillar h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 32px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: clamp(80px, 14vw, 160px);
  line-height: 1;
}
.pillar p {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone);
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ---------- INSTRUCTORS ---------- */
.instructors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
}
.instructor {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.instructor-portrait {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  position: relative;
  margin-bottom: 32px;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--line);
}
.instructor-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(200, 16, 46, 0.18), transparent 60%);
}
.instructor-portrait .portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  z-index: 1;
  filter: saturate(0.96) contrast(1.03);
}
.instructor-portrait .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(80px, 14vw, 200px);
  color: var(--rust);
  opacity: 0.25;
  letter-spacing: -0.04em;
}
.instructor-portrait .silhouette {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 90%;
}
.instructor-portrait .stamp {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg);
}
.instructor-portrait .stamp .dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--rust);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.instructor h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.95;
}
.instructor h3 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.instructor .role {
  margin-top: 12px;
  margin-bottom: 20px;
}
.instructor p {
  color: var(--bone);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}

@media (max-width: 800px) {
  /* Instructors become a horizontal swipe carousel: cards sit side by side
     and you scroll left/right between them. Each card is 84% wide so the
     next peeks in (the affordance that it scrolls), and scroll-snap pages
     neatly from one to the next. Full-bleed to the screen edges. */
  .instructors {
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * clamp(20px, 4vw, 56px));
    margin-right: calc(-1 * clamp(20px, 4vw, 56px));
    padding: 4px clamp(20px, 4vw, 56px) 2px;
    scroll-padding-left: clamp(20px, 4vw, 56px);
  }
  .instructors::-webkit-scrollbar { display: none; }
  .instructor {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  /* The role stamp normally sits top-right, but on the smaller mobile
     portrait that overlaps the subject's head/face. Move it to the
     bottom-left, over the lower part of the image. */
  .instructor-portrait .stamp {
    top: auto;
    right: auto;
    bottom: 14px;
    left: 14px;
  }
}

/* ---------- SCHEDULE ---------- */
.schedule {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.schedule-table {
  border-top: 1px solid var(--line-strong);
}
.schedule-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  position: relative;
  transition: padding-left .4s var(--ease-out);
}
.schedule-row:hover { padding-left: 16px; }
.schedule-row:hover::before {
  width: 8px;
}
.schedule-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 70%;
  background: var(--rust);
  transition: width .4s var(--ease-out);
}
.schedule-day {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}
.schedule-class {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.schedule-class span {
  display: block;
  font-family: var(--f-body);
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  font-size: 13px;
  color: var(--silver);
  letter-spacing: 0;
  margin-top: 6px;
}
.schedule-time {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--fg);
  letter-spacing: 0.05em;
}
.schedule-note {
  background: var(--ink-2);
  color: var(--paper);
  padding: 36px 32px;
  border-radius: 2px;
  border-left: 2px solid var(--rust);
}
.schedule-note h4 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.schedule-note p {
  color: var(--bone);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.schedule-note .kbd {
  display: inline-block;
  padding: 4px 10px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  margin-right: 6px;
  margin-bottom: 6px;
}

@media (max-width: 900px) {
  .schedule { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 60px 1fr auto; gap: 16px; }
}

/* ---------- LOCATIONS ---------- */
.locations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.location {
  border: 1px solid var(--line);
  padding: 36px 28px 32px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, background .3s, transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  will-change: transform;
}
.location:hover {
  border-color: var(--rust);
  background: var(--ink-2);
  transform: translateY(-6px);
  box-shadow: 0 20px 36px -18px color-mix(in srgb, var(--fg) 28%, transparent);
}
.location-num {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 14px;
  color: var(--silver);
  letter-spacing: 0.1em;
  margin-bottom: 90px;
}
.location-num em {
  color: var(--rust);
  font-style: normal;
}
.location h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 8px;
}
.location .region {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 28px;
}
.location-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.location-meta div { font-size: 13px; color: var(--bone); }
.location-meta div b { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); margin-bottom: 6px; font-weight: 400; }
.location .map-dot {
  position: absolute;
  top: 28px; right: 28px;
  width: 12px; height: 12px;
  border: 1px solid var(--rust);
  border-radius: 50%;
  position: absolute;
}
.location .map-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--rust);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 50% { opacity: 0.4; } }

@media (max-width: 900px) { .locations { grid-template-columns: 1fr; } }

/* Single-location feature */
.location-single {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}
.location-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 18px;
}
.location-single-main h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(56px, 9vw, 132px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.85;
  margin-bottom: 24px;
}
.location-single-main .region {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 24px;
}
.location-single-main .location-blurb {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 440px;
}
.location-single-meta {
  position: relative;
  border: 1px solid var(--line);
  border-left: 2px solid var(--rust);
  background: var(--ink-2);
  color: var(--paper);
  border-radius: 2px;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
}
.location-single-meta div { font-size: 15px; color: var(--paper); line-height: 1.5; }
.location-single-meta div b {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-soft);
  margin-bottom: 6px;
  font-weight: 400;
}
@media (max-width: 800px) { .location-single { grid-template-columns: 1fr; } }

/* ---------- PRICES ---------- */
.prices {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line-strong);
}
.prices-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.prices-head h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(34px, 5vw, 68px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.9;
}
.prices-note {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: right;
  max-width: 260px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}
.price-group {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px clamp(20px, 2.2vw, 30px) 22px;
}
.price-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 8px;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.price-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 87%;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.price-name span {
  display: block;
  font-family: var(--f-body);
  font-weight: 400;
  font-stretch: 100%;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--fg-2);
  margin-top: 5px;
  line-height: 1.45;
  text-transform: none;
  max-width: 30ch;
}
.price-fig {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.03em;
  color: var(--fg);
  white-space: nowrap;
}
.price-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.price-foot b { color: var(--rust); font-weight: 600; }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .prices-head { flex-direction: column; gap: 12px; }
  .prices-note { text-align: left; }
}

/* Tariff / menu style */
.tariff { display: flex; flex-direction: column; }
.tariff-cat {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 3.2vw, 44px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.tariff-cat:last-child { border-bottom: 1px solid var(--line); }
.tariff-cat-head { display: flex; align-items: baseline; gap: 16px; }
.tariff-cjk {
  font-family: var(--f-cjk);
  font-weight: 700;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 0.8;
  color: var(--rust);
  opacity: 0.9;
}
.tariff-cat-head h4 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: -0.03em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--fg);
}
.tariff-lines { padding-top: 6px; }
.tariff-item { padding: 9px 0; }
.tariff-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.tariff-line .nm {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 87%;
  font-size: clamp(16px, 1.45vw, 19px);
  letter-spacing: -0.01em;
  color: var(--fg);
  white-space: nowrap;
}
.tariff-line .leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-5px);
  min-width: 20px;
}
.tariff-line .pr {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.03em;
  color: var(--fg);
  white-space: nowrap;
}
.tariff-desc {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--fg-2);
  margin-top: 3px;
}
.tariff-note {
  margin-top: 14px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--fg-2);
}
.tariff-note b { color: var(--rust); font-style: normal; font-weight: 500; }
@media (max-width: 640px) {
  .tariff-cat { grid-template-columns: 1fr; gap: 14px; }
  /* Keep cards at their natural height (no stretch) and give every category
     header an identical height with a single-line title, so the price rows
     ("Single class", "Single lesson", "Membership fee") line up at the same
     position across all three swipe cards. */
  .tariff { align-items: start; }
  .tariff-cat-head { align-items: center; min-height: 48px; }
  .tariff-cat-head h4 br { display: none; }
  .tariff-cat-head h4 { white-space: nowrap; }
}

/* ---------- LINEAGE STRIP ---------- */
.lineage {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0;
  border-top: 1px solid var(--line);
}
.lineage-track {
  display: flex;
  gap: 80px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 40px clamp(20px, 4vw, 56px);
  scrollbar-width: none;
}
.lineage-track::-webkit-scrollbar { display: none; }
.lineage-node {
  min-width: 280px;
  scroll-snap-align: start;
  position: relative;
}
.lineage-node::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  right: -80px;
  height: 1px;
  background: var(--line-strong);
}
.lineage-node::after {
  content: "";
  position: absolute;
  top: 26px;
  left: -4px;
  width: 9px; height: 9px;
  background: var(--rust);
  border-radius: 50%;
  border: 1px solid var(--rust);
}
.lineage-node:last-child::before { display: none; }
.lineage-node .year {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--silver);
  padding-top: 50px;
  margin-bottom: 12px;
  display: block;
}
.lineage-node h4 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 28px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 6px;
}
.lineage-node .cjk-name {
  font-family: var(--f-cjk);
  color: var(--rust);
  font-size: 18px;
  margin-bottom: 12px;
}
.lineage-node p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- TESTIMONIALS ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  align-items: stretch;
}
.testimonial {
  background: var(--ink);
  color: var(--paper);
  padding: 30px 26px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background .4s var(--ease-out);
}
.testimonial:hover { background: var(--ink-2); }
.testimonial .quote-mark {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 54px;
  color: var(--rust);
  line-height: 0.6;
  margin-bottom: 12px;
}
.testimonial .t-stars {
  color: var(--rust);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial blockquote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.5;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.testimonial blockquote.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonial .t-more {
  align-self: flex-start;
  position: relative;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 2px;
  cursor: pointer;
}
/* Invisible hit-area expander so the small underlined toggle is an easy
   ~46px tap target on touch, without changing how it looks. */
.testimonial .t-more::after {
  content: "";
  position: absolute;
  inset: -16px -12px;
}
.testimonial .who {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.testimonial .who b {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.testimonial .who span {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-soft);
  text-align: right;
}

@media (max-width: 860px) { .testimonials { grid-template-columns: 1fr; } }

/* ---------- ARTICLES TEASER ---------- */
.articles-teaser-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 60px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.articles-teaser-header h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.9;
}
.articles-teaser-header h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-card {
  background: var(--ink);
  color: var(--paper);
  padding: 40px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 380px;
  transition: background .4s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  position: relative;
  will-change: transform;
}
.article-card:hover {
  background: var(--ink-2);
  transform: translateY(-8px);
  box-shadow: 0 24px 40px -20px color-mix(in srgb, var(--fg) 25%, transparent);
  z-index: 2;
}
.article-card:hover h3 { color: var(--rust); }
.article-card .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-soft);
}
.article-card h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  transition: color .3s;
  flex: 1;
}
.article-card .excerpt { font-size: 14px; line-height: 1.55; color: var(--bone); }
.article-card .arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}
.article-card .arrow svg { transition: transform .3s; }
.article-card:hover .arrow svg { transform: translateX(6px); }

@media (max-width: 900px) { .articles-grid { grid-template-columns: 1fr; } }

/* ---------- CTA / CONTACT ---------- */
.cta {
  padding: clamp(100px, 16vw, 220px) clamp(20px, 4vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  /* Opaque page-colour fill so the fixed 詠春 background watermark doesn't
     bleed through and collide with this section's own 問 decoration. */
  background: var(--bg);
}
.cta-cjk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-cjk);
  font-weight: 700;
  font-size: clamp(300px, 50vw, 700px);
  color: var(--rust);
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
.cta-content { position: relative; z-index: 1; }
.cta h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(56px, 10vw, 160px);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  line-height: 0.85;
  max-width: 1200px;
  margin: 0 auto 40px;
}
.cta h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.cta .big-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 36px;
  background: var(--rust);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  transition: transform .3s, background .3s;
}
.cta .big-btn:hover { transform: scale(1.04); background: var(--paper); color: var(--ink); }
.cta .big-btn .arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, color .3s;
}
.cta .big-btn:hover .arrow { background: var(--rust); color: var(--paper); }
.cta-sub {
  margin-top: 40px;
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.cta-sub b { color: var(--paper); display: block; font-weight: 500; margin-top: 4px; font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: 14px; }

/* ---------- FOOTER ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 60px clamp(20px, 4vw, 56px) 30px;
  background: var(--surface);
  color: #1b1916;
}
.footer .footer-col h4 { color: color-mix(in srgb, #1b1916 55%, transparent); }
.footer .footer-col a, .footer .footer-brand h3, .footer .footer-brand p { color: #1b1916; }
.footer .footer-col a:hover { color: var(--rust); }
.footer .footer-brand p { color: color-mix(in srgb, #1b1916 65%, transparent); }
.footer .footer-bottom { color: color-mix(in srgb, #1b1916 55%, transparent); }
.footer .footer-top, .footer .footer-bottom { border-color: color-mix(in srgb, #1b1916 18%, transparent); }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.footer-brand img { width: 72px; margin-bottom: 20px; }
.footer-brand h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.footer-brand p {
  margin-top: 12px;
  font-size: 13px;
  color: var(--silver);
  max-width: 280px;
  line-height: 1.5;
}
.footer-col h4 {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; transition: color .2s; }
.footer-col a:hover { color: var(--rust); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.footer-bottom .marquee-small {
  display: flex;
  gap: 16px;
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- BIG MOVING TYPE ---------- */
.giant-type {
  padding: clamp(100px, 14vw, 200px) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.giant-type .giant {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(80px, 16vw, 240px);
  letter-spacing: -0.05em;
  line-height: 0.85;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}
.giant-type .giant > span {
  padding: 0;
  display: inline-flex;
  align-items: center;
}
/* Separator dot sits BETWEEN phrases with em-based margins, so the
   rhythm scales with the type and never balloons into a huge fixed
   void on wide screens (the old fixed 60/80px padding did exactly that). */
.giant-type .giant > span::after {
  content: "";
  width: 0.14em; height: 0.14em;
  margin: 0 0.34em;
  background: var(--rust);
  border-radius: 50%;
  flex: 0 0 auto;
  transform: translateY(0.04em);
}
.giant-type .giant em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}

/* ---------- REVEAL ANIMATION ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; }

/* ---------- LOADING INTRO ---------- */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  pointer-events: none;
  animation: loader-out 1.4s var(--ease-out) 1.5s forwards;
}
.loader .cjk-loader {
  font-family: var(--f-cjk);
  font-size: clamp(80px, 12vw, 160px);
  color: var(--rust);
  opacity: 0;
  animation: loader-cjk 1.5s var(--ease-out) 0.1s forwards;
}
.loader .bar {
  width: 240px;
  height: 1px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.loader .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rust);
  transform-origin: left;
  animation: loader-bar 1.2s var(--ease-out) forwards;
}
.loader .ttl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0;
  animation: loader-cjk 1s var(--ease-out) 0.3s forwards;
}
@keyframes loader-cjk { to { opacity: 1; } }
@keyframes loader-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-out {
  to { transform: translateY(-100%); opacity: 0; }
}

/* ---------- PILLAR ICON SVGS ---------- */
.pillar-icon {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px; height: 48px;
  stroke: var(--paper);
  stroke-width: 1;
  fill: none;
  opacity: 0.6;
  transition: opacity .3s, stroke .3s;
}
.pillar:hover .pillar-icon { opacity: 1; stroke: var(--rust); }

/* ============================================================
   PALETTES (driven by Tweaks)
   ============================================================ */
body.theme-ricepaper { /* default — vars already set on :root */ }

body.theme-ink {
  --bg: #0e0c0a;
  --bg-2: #17130f;
  --bg-3: #211c19;
  --fg: #f1ece2;
  --fg-2: #d8cebb;
  --muted: #b8ae9a;
  --silver: #6f6b62;
  --rust: #c8102e;
  --line: rgba(241, 236, 226, 0.12);
  --line-strong: rgba(241, 236, 226, 0.28);
}

body.theme-teahouse {
  --bg: #1f3a32;
  --bg-2: #173028;
  --bg-3: #0f231d;
  --fg: #ece4cd;
  --fg-2: #d4cbaf;
  --muted: #a8a085;
  --silver: #75705e;
  --rust: #d8a01f;
  --line: rgba(236, 228, 205, 0.12);
  --line-strong: rgba(236, 228, 205, 0.30);
}

body.theme-slate {
  --bg: #2e333a;
  --bg-2: #262a30;
  --bg-3: #1d2126;
  --fg: #e9e5dd;
  --fg-2: #d0ccc3;
  --muted: #a8a39b;
  --silver: #6c6862;
  --rust: #e0383d;
  --line: rgba(233, 229, 221, 0.12);
  --line-strong: rgba(233, 229, 221, 0.28);
}

body.theme-jade {
  --bg: #e8ecdf;
  --bg-2: #d8dec6;
  --bg-3: #c2caa9;
  --fg: #1c2a1f;
  --fg-2: #2d3d2f;
  --muted: #4d5a4e;
  --silver: #82897f;
  --rust: #a82a2a;
  --line: rgba(28, 42, 31, 0.12);
  --line-strong: rgba(28, 42, 31, 0.30);
}

body.theme-sandstone {
  --bg: #d4b88a;
  --bg-2: #c4a878;
  --bg-3: #b09360;
  --fg: #2a1c12;
  --fg-2: #45301f;
  --muted: #6b4d36;
  --silver: #8a6f55;
  --rust: #a8351a;
  --line: rgba(42, 28, 18, 0.15);
  --line-strong: rgba(42, 28, 18, 0.32);
}

body.theme-bamboo {
  --bg: #e8e9c8;
  --bg-2: #d8dab2;
  --bg-3: #bfc28e;
  --fg: #1c2a16;
  --fg-2: #2d3d23;
  --muted: #4d5a3e;
  --silver: #828a72;
  --rust: #c8102e;
  --line: rgba(28, 42, 22, 0.12);
  --line-strong: rgba(28, 42, 22, 0.28);
}

body.theme-indigo {
  --bg: #182640;
  --bg-2: #131e33;
  --bg-3: #0d1626;
  --fg: #ece5d2;
  --fg-2: #d4cab2;
  --muted: #a89e84;
  --silver: #6f6858;
  --rust: #d8a01f;
  --line: rgba(236, 229, 210, 0.12);
  --line-strong: rgba(236, 229, 210, 0.30);
}

body.theme-mist {
  --bg: #e2e6e8;
  --bg-2: #d2d8db;
  --bg-3: #b8c0c4;
  --fg: #1a2028;
  --fg-2: #2c343c;
  --muted: #4e565e;
  --silver: #82888e;
  --rust: #c8102e;
  --line: rgba(26, 32, 40, 0.10);
  --line-strong: rgba(26, 32, 40, 0.26);
}

body.theme-charcoal {
  --bg: #2a2826;
  --bg-2: #221f1e;
  --bg-3: #1a1816;
  --fg: #efe9dc;
  --fg-2: #efe9dc;
  --muted: color-mix(in srgb, #efe9dc 68%, var(--bg));
  --silver: #9c9586;
  --rust: #de2438;
  --line: rgba(230, 224, 210, 0.14);
  --line-strong: rgba(230, 224, 210, 0.32);
}

.no-motion .reveal, .no-motion .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
.no-motion .marquee-track, .no-motion .giant-type .giant { animation: none; }
.no-motion .hero-title h1 .line > span { transform: none; animation: none; }
.no-motion .loader { display: none; }

/* ============================================================
   SCROLL-REACTIVE BACKGROUND (site-wide)
   Fixed layer behind all content: a parallax CJK character
   + a drifting rust glow. Driven by script.js on scroll.
   ============================================================ */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.site-bg-grad {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(55% 48% at var(--gx, 30%) var(--gy, 18%), color-mix(in srgb, var(--rust) 28%, transparent), transparent 63%),
    radial-gradient(48% 46% at 84% 88%, color-mix(in srgb, var(--rust) 16%, transparent), transparent 57%);
  opacity: 0.9;
  will-change: opacity;
}
.site-bg-char {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-cjk);
  font-weight: 700;
  font-size: clamp(160px, 30vw, 460px);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 0.78;
  color: var(--rust);
  opacity: 0.07;
  user-select: none;
  will-change: transform;
}
.no-motion .site-bg-char { transform: translate(-50%, -50%) !important; }
.no-motion .site-bg-grad { opacity: 0.8 !important; }

/* ============================================================
   MOBILE NAVIGATION — burger + full-screen menu
   Burger and overlay are injected by script.js on every page,
   built from that page's own .nav-links (so paths/active state
   carry over). These styles drive the whole thing.
   ============================================================ */

/* Burger button — hidden on desktop, shown <=900px */
.nav-burger {
  display: none;
  width: 46px;
  height: 46px;
  margin: -8px -10px -8px 0;   /* keep the 46px hit target without growing the bar */
  position: relative;
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.nav-burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform .45s var(--ease-out), top .35s var(--ease-out), background .3s, width .35s var(--ease-out);
}
.nav-burger span:nth-child(1) { top: 19px; }
.nav-burger span:nth-child(2) { top: 27px; }
body.menu-open .nav-burger span { background: var(--fg); }
body.menu-open .nav-burger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

/* Full-screen overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;                 /* below .nav (100) so logo + burger stay live */
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: clamp(96px, 18vw, 132px) clamp(24px, 7vw, 56px) calc(env(safe-area-inset-bottom, 0px) + 32px);
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  /* Opacity is NOT transitioned: the overlay is fully opaque the instant
     it opens (never stuck transparent). Motion comes from the transform
     slide + the staggered links below. */
  transition: transform .5s var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.menu-open .mobile-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Backstop only affects the (optional) entry slide; opacity is instant. */
@starting-style {
  body.menu-open .mobile-menu {
    transform: translateY(-14px);
  }
}
.mobile-menu-char {
  position: absolute;
  right: -6%;
  bottom: 4%;
  font-family: var(--f-cjk);
  font-weight: 700;
  font-size: clamp(220px, 60vw, 460px);
  line-height: 0.8;
  color: var(--rust);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
}
.mobile-menu-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 8px;
}
.mobile-menu-label .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--rust);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.mobile-menu-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(14px, 3.4vw, 22px) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(34px, 9vw, 52px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--fg);
  transition: color .25s, padding-left .4s var(--ease-out);
}
.mobile-menu-links a .idx {
  font-family: var(--f-mono);
  font-weight: 500;
  font-stretch: 100%;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--silver);
  flex: 0 0 auto;
  transform: translateY(-0.55em);
  transition: color .25s;
}
.mobile-menu-links a:active,
.mobile-menu-links a:hover { color: var(--rust); padding-left: 10px; }
.mobile-menu-links a:hover .idx { color: var(--rust); }
/* Staggered entrance for the links — TRANSFORM only, never opacity,
   so links are always readable the instant the menu opens (the slide
   is pure enhancement and degrades to an instant show if unanimated). */
.mobile-menu-links a {
  transform: translateY(16px);
}
body.menu-open .mobile-menu-links a {
  transform: translateY(0);
  transition: transform .55s var(--ease-out), color .25s, padding-left .4s var(--ease-out);
}
body.menu-open .mobile-menu-links a:nth-child(1) { transition-delay: .04s; }
body.menu-open .mobile-menu-links a:nth-child(2) { transition-delay: .09s; }
body.menu-open .mobile-menu-links a:nth-child(3) { transition-delay: .14s; }
body.menu-open .mobile-menu-links a:nth-child(4) { transition-delay: .19s; }
body.menu-open .mobile-menu-links a:nth-child(5) { transition-delay: .24s; }
body.menu-open .mobile-menu-links a:nth-child(6) { transition-delay: .29s; }

.mobile-menu-foot {
  margin-top: auto;
  padding-top: clamp(28px, 6vw, 44px);
  position: relative;
  z-index: 1;
}
.mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  background: var(--rust);
  color: var(--bg);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  transition: transform .3s var(--ease-out);
}
.mobile-menu-cta:active { transform: scale(0.97); }
.mobile-menu-cta .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bg);
}
.mobile-menu-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
}
.mobile-menu-meta a { color: var(--silver); transition: color .2s; }
.mobile-menu-meta a:active,
.mobile-menu-meta a:hover { color: var(--rust); }

@media (max-width: 900px) {
  .nav-burger { display: block; }
  .nav-cta { display: none; }
}
/* Touch devices get a normal pointer on the burger (cursor:none is desktop-only) */
@media (hover: none) {
  .nav-burger { cursor: pointer; }
}
.no-motion .mobile-menu,
.no-motion .mobile-menu-links a { transition: opacity .2s linear !important; transform: none !important; }

/* ---------- SMALL-SCREEN POLISH ---------- */
/* Hero headline never overflows on narrow phones, and uses dynamic vh
   so it isn't clipped by mobile browser chrome. */
.hero { min-height: 100svh; }
@media (max-width: 600px) {
  .hero { padding-top: 104px; }
  .hero-title { padding: 32px 0; }
  /* Scale the headline to the viewport so the widest line ("— Australia",
     ~6.13× the font-size) always fits inside the shell padding (2×20px) on
     ANY phone — no fixed breakpoint can overflow. ÷6.4 leaves a small,
     even side margin so the text never touches the screen edge. */
  .hero-title h1 { font-size: clamp(34px, calc((100vw - 40px) / 6.4), 92px); }
  .hero-bottom { gap: 28px; }
  .hero-meta { padding-top: 24px; }
}

/* ---------- FAQ (homepage) — native <details> accordion ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--fg);
  transition: color .25s, padding-left .4s var(--ease-out);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--rust); padding-left: 8px; }
.faq-num {
  font-family: var(--f-mono);
  font-weight: 500;
  font-stretch: 100%;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--silver);
  flex: 0 0 auto;
  transform: translateY(-2px);
  transition: color .25s;
}
.faq-item[open] .faq-num { color: var(--rust); }
.faq-q .faq-txt { flex: 1; }
.faq-ico {
  position: relative;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  align-self: center;
}
.faq-ico::before, .faq-ico::after {
  content: "";
  position: absolute;
  background: var(--rust);
  transition: transform .3s var(--ease-out);
}
.faq-ico::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-ico::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq-item[open] .faq-ico::after { transform: translateX(-50%) scaleY(0); }
.faq-a { padding: 0 0 30px; max-width: 760px; }
.faq-a p {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 12px;
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--rust); border-bottom: 1px solid currentColor; }
@media (max-width: 560px) {
  .faq-q { gap: 12px; }
}

/* ============================================================
   REUSABLE SOLID PILL BUTTON
   (a standalone version of .cta .big-btn for use outside the CTA)
   ============================================================ */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  background: var(--rust);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  cursor: none;
  transition: transform .3s var(--ease-out), background .3s, color .3s;
}
@media (hover: none) { .cta-pill { cursor: pointer; } }
.cta-pill:hover { transform: translateY(-2px); background: var(--paper); color: var(--ink); }
.cta-pill .arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, color .3s;
}
.cta-pill:hover .arrow { background: var(--rust); color: var(--paper); }
.cta-pill[disabled] { opacity: 0.55; pointer-events: none; }

/* ============================================================
   YOUR FIRST CLASS — newcomer's step-by-step starter path
   ============================================================ */
.firstclass .fc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  padding-bottom: 28px;
  margin-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.firstclass .fc-head h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(48px, 7vw, 100px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.88;
}
.firstclass .fc-head h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.firstclass .fc-head p {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  max-width: 280px;
  text-align: right;
  line-height: 1.6;
}
.fc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fc-step {
  background: var(--ink);
  color: var(--paper);
  padding: 40px 28px 36px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: background .4s var(--ease-out);
}
.fc-step:hover { background: var(--ink-2); }
.fc-step .fc-n {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: -0.03em;
  color: var(--rust);
  line-height: 0.9;
  margin-bottom: 22px;
}
.fc-step .fc-k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-soft);
  margin-bottom: 12px;
}
.fc-step h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 16px;
}
.fc-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone);
  position: relative;
  z-index: 2;
  text-wrap: pretty;
}
.fc-step .fc-cjk {
  position: absolute;
  bottom: -12px;
  right: -6px;
  font-family: var(--f-cjk);
  font-weight: 700;
  font-size: 120px;
  color: var(--rust);
  opacity: 0.08;
  line-height: 0.9;
  user-select: none;
  pointer-events: none;
  transition: transform .8s var(--ease-out), opacity .8s var(--ease-out);
}
.fc-step:hover .fc-cjk { transform: translate(-8px, 8px); opacity: 0.16; }

.fc-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 36px;
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--line);
  border-left: 2px solid var(--rust);
  border-radius: 2px;
}
.fc-strip .fc-strip-txt {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.95;
}
.fc-strip .fc-strip-txt em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  color: var(--rust);
  letter-spacing: -0.02em;
}
.fc-strip .fc-strip-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-soft);
  line-height: 1.8;
}
.fc-strip .fc-strip-meta b { color: var(--paper); font-weight: 500; }
.fc-strip .cta-pill { margin-left: auto; }

@media (max-width: 900px) { .fc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .fc-steps { grid-template-columns: 1fr; }
  .firstclass .fc-head { grid-template-columns: 1fr; }
  .firstclass .fc-head p { text-align: left; max-width: none; }
  .fc-strip .cta-pill { margin-left: 0; }
}

/* ============================================================
   LOCATION MAP — embedded map + directions
   ============================================================ */
.location-map {
  margin-top: clamp(40px, 5vw, 72px);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background: var(--ink-2);
}
.location-map .lm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-soft);
}
.location-map .lm-bar b { color: var(--paper); font-weight: 500; }
.location-map .lm-bar .lm-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rust);
  margin-right: 9px;
  vertical-align: middle;
}
.location-map .lm-bar .lm-right { color: var(--paper-soft); }
.location-map-frame {
  position: relative;
  aspect-ratio: 21 / 8;
  min-height: 320px;
  background: var(--bg-3);
}
@media (max-width: 700px) { .location-map-frame { aspect-ratio: 4 / 3; min-height: 300px; } }
.location-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(1.02);
  transition: filter .6s var(--ease-out);
}
.location-map:hover .location-map-frame iframe { filter: grayscale(0); }
.location-map-cta {
  position: absolute;
  left: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55);
  transition: background .3s, color .3s, transform .3s, border-color .3s;
}
.location-map-cta:hover { background: var(--rust); color: var(--paper); border-color: var(--rust); transform: translateY(-2px); }
.location-map-cta .arrow { transition: transform .3s; }
.location-map-cta:hover .arrow { transform: translateX(4px); }

/* ============================================================
   ENQUIRE — inline enquiry form (homepage #contact)
   Reuses the .cta shell (padding + 問 background); .enquire
   re-flows it into a two-column intro + form layout.
   ============================================================ */
.enquire .enquire-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
  text-align: left;
}
.enquire .enquire-intro .label { justify-content: flex-start; margin-bottom: 28px; }
.enquire .enquire-intro h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(48px, 6.4vw, 104px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.85;
  margin: 0 0 24px;
}
.enquire .enquire-intro h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--rust);
}
.enquire-lead {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--fg);
  max-width: 420px;
  margin-bottom: 40px;
}
.enquire-contacts { display: grid; gap: 22px; max-width: 440px; }
.enquire-contacts div {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.enquire-contacts div b {
  display: block;
  margin-top: 6px;
  font-family: var(--f-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
  color: var(--fg);
}
.enquire-contacts a { transition: color .2s; }
.enquire-contacts a:hover { color: var(--rust); }

.enquire-form {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--rust);
  border-radius: 2px;
  padding: clamp(26px, 3.2vw, 46px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 34px 64px -34px color-mix(in srgb, var(--fg) 34%, transparent);
}
.enquire-form .field { display: flex; flex-direction: column; gap: 9px; border: 0; padding: 0; margin: 0; min-width: 0; }
.enquire-form .field > label,
.enquire-form .field-legend {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 700;
  padding: 0;
}
.enquire-form .req { color: var(--rust); }
.enquire-form .opt { color: var(--paper-soft); text-transform: none; letter-spacing: 0; }
.enquire-form input[type="text"],
.enquire-form input[type="email"],
.enquire-form input[type="tel"],
.enquire-form textarea {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 14px 16px;
  width: 100%;
  cursor: text;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.enquire-form textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.enquire-form input::placeholder,
.enquire-form textarea::placeholder { color: var(--silver); opacity: 1; }
.enquire-form input:focus,
.enquire-form textarea:focus {
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust) 18%, transparent);
}
.enquire-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .enquire-form .field-row { grid-template-columns: 1fr; } }

/* Button questions arranged two-per-row to keep the form compact,
   instead of four full-width groups stacked under each other. */
.enquire-form .q-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.enquire-form .q-grid .field { gap: 8px; }
/* Stay two-per-row even on mobile (the user wants them side by side);
   in the narrow columns the buttons stack vertically so labels stay legible. */

.enquire-form .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.enquire-form .seg-2 { grid-template-columns: repeat(2, 1fr); }
.enquire-form .seg label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9px 6px;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.3;
  cursor: none;
  transition: border-color .2s, color .2s, background .2s;
}
@media (hover: none) { .enquire-form .seg label { cursor: pointer; } }
.enquire-form .seg input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.enquire-form .seg label:hover { border-color: var(--rust); color: var(--paper); }
.enquire-form .seg label:focus-within { border-color: var(--rust); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust) 18%, transparent); }
.enquire-form .seg label:has(input:checked) { border-color: var(--rust); background: var(--rust); color: var(--paper); }
@media (max-width: 600px) { .enquire-form .q-grid .seg { grid-template-columns: 1fr; } }

.enquire-submit { align-self: flex-start; margin-top: 2px; }
.enquire-status {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rust);
  min-height: 1em;
}
.enquire-status:empty { display: none; }
.enquire-note { font-size: 12.5px; line-height: 1.5; color: var(--paper-soft); }
.enquire-note b { color: var(--paper); }
.enquire-privacy { font-size: 11px; margin-top: 6px; opacity: 0.7; }

.enquire-done { text-align: center; padding: 28px 8px; }
.enquire-done .tick {
  font-family: var(--f-cjk);
  font-size: 64px;
  color: var(--rust);
  line-height: 1;
  margin-bottom: 18px;
}
.enquire-done h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 32px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.enquire-done p { color: var(--bone); font-size: 15px; line-height: 1.6; max-width: 360px; margin: 0 auto; }

@media (max-width: 860px) {
  .enquire .enquire-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE CAROUSELS
   On phones, these card rows scroll horizontally (swipe) instead
   of stacking down the page — same pattern as the instructors
   carousel: each card ~84% wide so the next peeks in (the swipe
   affordance), scroll-snap pages between them, full-bleed to the
   screen edges. Overrides each grid's 1px-hairline styling.
   Sections: Approach (.pillars), Prices (.tariff),
   Testimonials, Your first class (.fc-steps), Articles.
   ============================================================ */
@media (max-width: 640px) {
  .pillars,
  .tariff,
  .testimonials,
  .fc-steps,
  .articles-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    gap: 16px;
    background: none;
    border: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * clamp(20px, 4vw, 56px));
    margin-right: calc(-1 * clamp(20px, 4vw, 56px));
    padding: 4px clamp(20px, 4vw, 56px) 2px;
    scroll-padding-left: clamp(20px, 4vw, 56px);
  }
  .pillars::-webkit-scrollbar,
  .tariff::-webkit-scrollbar,
  .testimonials::-webkit-scrollbar,
  .fc-steps::-webkit-scrollbar,
  .articles-grid::-webkit-scrollbar { display: none; }

  .pillar,
  .tariff-cat,
  .testimonial,
  .fc-step,
  .article-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  /* tariff columns become side-by-side cards: keep a single top rule each */
  .tariff-cat { border-top: 1px solid var(--line); }
  .tariff-cat:last-child { border-bottom: 0; }
}