/* 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);
}
.brands { display: flex; align-items: center; gap: 16px; }
.brand { font-weight: 600; text-decoration: none; }
/* 桃李: the site's name, in Chinese only (analysis/website/39). Set type until there is
   calligraphy. Larger than the Latin brand so the characters, not "Bern 2027", read as the name. */
.taoli-mark { font-size: 22px; line-height: 1; letter-spacing: 0.05em; text-decoration: none; color: var(--accent); }
a.taoli-mark:hover { text-decoration: underline; }
.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 */
/* The peach and plum sketch above the kicker: 4:1, capped at 900 px (about 225 px tall) so
   the title stays in the first screen on a laptop. */
.hero-art { display: block; max-width: 900px; margin: 0 0 clamp(8px, 2vw, 24px); }
.hero-art img, img.hero-art, .taoli-art { display: block; width: 100%; height: auto; }
.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; }
/* In place of the button while registration is closed. */
.hero-cta .closed { margin: 0; font-weight: 600; }

.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; }
/* Drawn here rather than by the browser: on the blue selected option, accent-color cannot
   make a radio that reads as checked in Chrome or Firefox. White gives a white ring with a
   grey centre, and the option's blue gives a white ring with a blue centre; both look empty.
   (Safari ignores accent-color on radios, so it looked right there.) currentColor makes it
   white on the selected option and ink on the others, in every browser. */
.opt input {
  appearance: none; width: 20px; height: 20px; margin: 0; flex: none;
  /* Chrome gives form controls their own text colour; inherit it so currentColor is the
     option's. On the baseline, an empty box sits on it like a letter; 4px lower centres it
     on the text, as the native radio was. */
  color: inherit; position: relative; top: 4px;
  border: 2px solid currentColor; border-radius: 50%; cursor: pointer;
}
.opt input:checked { background: radial-gradient(currentColor 0 4px, transparent 4.5px); }
.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; }
@supports selector(:has(*)) {
  .opt-week { background: none; color: inherit; box-shadow: 0 0 0 1px var(--line); }
  .opt:has(input:checked) {
    background: var(--accent); color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent);
  }
}
.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 { display: flex; flex-wrap: wrap; gap: 0 24px; 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 and "Why taoli" */
.legal, .taoli { padding-bottom: 56px; }
.taoli-art { margin-top: clamp(32px, 5vw, 64px); }
.legal h1, .taoli 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;
}
.taoli h1 { margin-top: clamp(16px, 2vw, 24px); }
.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; }
/* The three sayings: the Chinese on its own line, slightly larger, the English directly
   under it, ordinary paragraph spacing between blocks. */
.taoli .sayings { max-width: 680px; margin-bottom: clamp(40px, 6vw, 64px); }
.sayings p { margin: 0 0 24px; }
.sayings p:last-child { margin-bottom: 0; }
.saying { display: block; font-size: 21px; line-height: 1.4; }
.pinyin { font-size: 17px; color: var(--muted); }
.tight p { margin-top: 8px; }
.tight p:first-child { margin-top: 0; }

/* Chinese: the negative tracking set on headings above suits Latin type but squeezes
   CJK characters together, which reads as cramped. The CJK glyphs come from the system
   font (PingFang, Microsoft YaHei); a self-hosted Chinese font would run to megabytes. */
:lang(zh) h1, :lang(zh) h3, :lang(zh) .when, :lang(zh) .options > legend,
:lang(zh) .thanks .sub { letter-spacing: 0; }