/* Carried over from the canvas "Chen Ziqiang Workshop Bern" (version 32). The canvas sized
   text with cqw on a full-width container; on a real page that is the viewport, so vw. */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/hanken-grotesk-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/hanken-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #F5F5F1;
  --ink: #15181B;
  --accent: #1E3F66;
  --rule: #C9CAC4;
  --line: #7E8387;
  --muted: #4A4F54;
  --paper: #FFFFFF;
  --mark: #FBE9B7;
  --photo: #E4E5DF;
  --gutter: clamp(16px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Chinese falls back to the system font (PingFang, Microsoft YaHei): no CJK webfont. */
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
p { margin: 16px 0 0; }
p:first-child { margin-top: 0; }
a { color: inherit; }
mark { background: var(--mark); padding: 0 4px; font-weight: 600; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 8px 24px; min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--ink);
}
.brand { font-weight: 600; text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 4px; }
.lang {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; text-decoration: none;
}
.lang[aria-current] { font-weight: 700; text-decoration: underline; }
.nav-register {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; margin-left: 8px;
  color: var(--accent); font-weight: 600;
}

/* Hero */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); }
.kicker { margin: 0 0 16px; font-weight: 500; }
h1 {
  margin: 0; font-size: clamp(44px, 8.4vw, 107.2px); line-height: 0.98;
  font-weight: 500; letter-spacing: -0.03em;
}
.when {
  margin: clamp(16px, 2vw, 28px) 0 0; font-size: clamp(26px, 4.2vw, 54px); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--accent);
}
.hero-foot {
  display: flex; flex-wrap: wrap; gap: 32px 64px; margin-top: clamp(40px, 6vw, 80px);
  align-items: flex-end; justify-content: space-between;
}
.lead {
  flex: 999 1 460px; min-width: 0; max-width: 680px; margin: 0;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.35;
}
.hero-cta { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 0;
  background: var(--accent); color: #FFFFFF; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.button:hover { filter: brightness(1.15); }

/* Heading-left, content-right rows */
.row {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  padding: 32px 0 56px; border-top: 1px solid var(--ink);
}
.row > h2, .row-head { flex: 1 1 220px; }
.row > h2, .row-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.col { flex: 999 1 560px; min-width: 0; max-width: 680px; }
.lead-small { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.45; }

h3 {
  margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2;
  font-weight: 500; letter-spacing: -0.01em;
}

/* Term/description lists */
.pairs { margin: 0; }
.pairs > div { display: flex; flex-wrap: wrap; gap: 2px 24px; padding: 14px 0; border-top: 1px solid var(--rule); }
.pairs > div:first-child { padding-top: 0; border-top: 0; }
.pairs dt { flex: 1 1 170px; font-weight: 600; }
.pairs dd { flex: 999 1 320px; margin: 0; }
.col > .pairs > div:last-child { border-bottom: 1px solid var(--rule); }
.after-pairs { margin-top: 24px; }

.topic { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.topic:first-of-type { margin-top: 40px; }

/* "More" panels: plain <details>, so they work without JavaScript */
details { margin-top: 4px; }
summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--accent); font-weight: 600; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: 8px; font-weight: 400; }
details[open] > summary::after { content: "−"; }
details > p:first-of-type { margin-top: 4px; }

/* Teacher */
/* 3:2, the photo's own shape, so nothing is cropped. Capped at 480 px so that, once the row
   stacks on narrow screens, the 750 px original still covers it at 1.5x. The right margin
   keeps it off the text column when the two sit side by side. */
.photo { max-width: 480px; margin: 20px 16px 0 0; aspect-ratio: 3 / 2; background: var(--photo); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 16 px, the gap there was when the bio's <p> followed the name directly (its 16 px top margin
   collapsed with the name's 8 px). Inside .bio the <p> is a first child and has no top margin. */
.row-head + .col > h3 { margin-bottom: 16px; }

/* Wide screens: the photo's top lines up with the bio's first line (tasks/22, "More fine
   tuning"). A grid does it by construction: "Teacher" and the name share the first row, the
   photo and the bio the second, so it holds however the name wraps. Rejected: a margin-top
   computed from the h3's clamp() size, which breaks whenever a font size changes.
   The columns copy the flex rows above (heading takes what the 680 px text column leaves,
   at least 220 px). 904 px is where those rows stop stacking (812 px of content plus a
   5vw gutter each side); below it this section stays a flex row like the others. */
@media (min-width: 904px) {
  .teacher {
    display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 680px);
    grid-template-areas: "head name" "photo bio"; gap: 0 32px;
  }
  .teacher .row-head, .teacher .col { display: contents; }
  .teacher h2 { grid-area: head; }
  .teacher h3 { grid-area: name; }
  /* 0.35em: the half-leading of a 1.55 line plus the gap above Hanken's capitals, so the photo
     meets the top of the first line's letters, not of its invisible line box (~6 px lower). */
  .teacher .photo { grid-area: photo; margin-top: 0.35em; }
  .teacher .bio { grid-area: bio; }
}

/* Registration */
.register { background: var(--paper); border-top: 1px solid var(--ink); }
/* Both .wrap and .row set padding; spell out all four so the side gutter survives. */
.register > .row { border-top: 0; padding: 32px var(--gutter) clamp(56px, 7vw, 96px); }
.form { max-width: none; display: flex; flex-direction: column; gap: 32px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.options { display: flex; flex-direction: column; gap: 14px; }
.options > legend {
  padding: 0 0 14px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2;
  font-weight: 500; letter-spacing: -0.01em;
}
.opt {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between;
  padding: 12px clamp(20px, 3vw, 32px); cursor: pointer; box-shadow: 0 0 0 1px var(--line);
}
.opt-name { flex: 999 1 240px; min-width: 0; display: flex; gap: 14px; align-items: baseline; }
.opt input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.opt-price { flex: 1 1 auto; text-align: right; white-space: nowrap; }

/* The blue follows the selection, so switching away from the week visibly unselects it.
   Browsers without :has() drop this rule and fall back to the week alone in blue. */
.opt-week { background: var(--accent); color: #FFFFFF; box-shadow: none; }
.opt-week input { accent-color: #FFFFFF; }
@supports selector(:has(*)) {
  .opt-week { background: none; color: inherit; box-shadow: 0 0 0 1px var(--line); }
  .opt-week input { accent-color: var(--ink); }
  .opt:has(input:checked) {
    background: var(--accent); color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent);
  }
  .opt:has(input:checked) input { accent-color: #FFFFFF; }
}
.opt-week { gap: 8px 16px; padding: clamp(20px, 3vw, 32px); }
.opt-week .opt-name { flex-basis: 280px; }
.opt-title { display: block; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 500; }
.opt-detail { display: block; margin-top: 4px; }
.opt-note { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; line-height: 1.4; }
.opt-week .opt-price { font-size: clamp(34px, 4.4vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -0.02em; }

.opt-weekend { padding-top: 18px; padding-bottom: 18px; }
.opt-weekend .opt-name > span, .opt-weekend .opt-price { font-weight: 600; }

.days { padding-top: 6px; }
.days > legend { padding: 0 0 8px; font-weight: 600; }
@supports selector(:has(*)) {
  .days { display: none; }
  .form:has(input[name="option"][value="days"]:checked) .days { display: block; }
}
.day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.day {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px;
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.day input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }

.total {
  display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline; justify-content: space-between;
  padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.total[hidden], .nudge[hidden] { display: none; }
.total-label { font-weight: 600; }
.total-amount { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; }
.nudge { flex: 1 1 100%; color: var(--accent); font-weight: 600; }

.fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px 24px; align-items: start;
}
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.optional { font-weight: 400; }
.field input, .field textarea {
  width: 100%; font: inherit; font-weight: 400; color: inherit;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 0;
}
.field input { height: 48px; padding: 0 12px; }
.field textarea { padding: 10px 12px; resize: vertical; }
.field input:user-invalid { border-color: #B3261E; }
.hint { font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--muted); }

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 600; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--ink); }
.check .hint { display: block; margin-top: 2px; }

.submit-row { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.submit-row .button { padding: 0 32px; }
.submit-row p { flex: 1 1 280px; min-width: 0; margin: 0; }

.foot { padding-top: 20px; padding-bottom: 20px; }
.foot a, .back { display: inline-flex; align-items: center; min-height: 44px; }
.back { color: var(--accent); font-weight: 600; }

/* Thanks */
.thanks { padding-bottom: 56px; }
.thanks h1 { margin-top: clamp(48px, 8vw, 112px); font-size: clamp(52px, 9vw, 116px); line-height: 1; }
.thanks .sub {
  margin: 20px 0 0; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--accent);
}
.narrow { max-width: 640px; margin-top: 32px; }
.thanks > p:last-child { margin-top: 24px; }

/* Legal */
.legal { padding-bottom: 56px; }
.legal h1 {
  margin: clamp(40px, 6vw, 80px) 0 clamp(32px, 5vw, 64px);
  font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.025em;
}
.legal .row { padding-bottom: 48px; }
.legal h3 { margin: 24px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.legal h3:first-child { margin-top: 0; }
.legal h3 + p { margin-top: 0; }
.tight p { margin-top: 8px; }
.tight p:first-child { margin-top: 0; }