/* Cutline public site chrome (Round 62, the approved site map, 30 Sep 2026).
   One top bar, the HSFY sub-nav and one footer for every public page: / (the brand home), /hsfy, /hsfy/year-13, /ucat (guests),
   /parents, /summer and /postgrad. The markup is written by shared/site.js, so the pages never drift; this file styles it.
   Colours from the page's --cl-* tokens (shared/tokens.css, or the postgrad page's own copy of them), motion from shared/motion.css
   where the page loads it (every value has a fallback for the postgrad page, which does not). No uppercase labels, no dashes.
   The top bar: the wordmark, the product switcher HSFY, UCAT, MMI, Postgrad with the current product filled white, the language
   switch where the page has Chinese, and Sign in. On a laptop it is one 64 px row; under 760 px it is two rows, the switcher full
   width in four equal segments under the wordmark, and it slides away while you read down and comes back when you scroll up. */
:root{--tb-h:65px}
@media (max-width:759.98px){:root{--tb-h:113px}}
.tb{position:sticky;top:0;z-index:40;background:var(--cl-paper);border-bottom:1px solid var(--cl-line);transition:transform var(--mo-sheet,320ms) var(--mo-ease-out,cubic-bezier(.2,0,0,1))}
.tb.tb-fixed{position:fixed;left:0;right:0}
.tb.tb-glass{background:color-mix(in srgb,var(--cl-paper) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:color-mix(in srgb,var(--cl-line) 60%,transparent)}
.tb.tb-away{transform:translateY(-100%)}
.tb-in{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--cl-gut-page,80px);height:64px;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"brand sw . lang sign";align-items:center;column-gap:12px}
.tb .brand{grid-area:brand;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px 0 0;border-radius:12px;color:var(--cl-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.tb .brand .mk{width:28px;height:28px;object-fit:contain;display:block}
.tb .brand .wm{font-family:var(--cl-font-display);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1}
/* the product switcher: a quiet pill track, the current product a white segment on it */
.tb-sw{grid-area:sw;display:flex;align-items:center;gap:2px;margin-left:10px;padding:2px;border-radius:999px;background:color-mix(in srgb,var(--cl-ink) 6%,transparent)}
.tb-sw a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;font:500 14px/1 var(--cl-font-text);color:var(--cl-body);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color var(--mo-quick,140ms) var(--mo-ease-out,ease),color var(--mo-quick,140ms) var(--mo-ease-out,ease),transform var(--mo-release,220ms) var(--mo-spring,ease)}
.tb-sw a:hover{color:var(--cl-ink)}
.tb-sw a[aria-current="page"]{background:var(--cl-card);color:var(--cl-ink);font-weight:600;box-shadow:var(--cl-shadow-1)}
.tb-sw a:active{transform:scale(var(--mo-press-scale,.96))}
.tb-lang.seg{grid-area:lang;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;width:auto;gap:2px;padding:2px;border-radius:12px;background:var(--cl-paper-2)}
.tb-lang.seg button{min-width:44px;height:44px;padding:0 10px;border:0;border-radius:9px;background:transparent;font:500 14px var(--cl-font-text);color:var(--cl-body);cursor:pointer;white-space:nowrap}
.tb-lang.seg button.on{background:var(--cl-card);color:var(--cl-ink);font-weight:600;box-shadow:var(--cl-shadow-1)}
/* a page with an address per language (the postgrad page) draws the same two segments as links: the other language a link, this one a span */
.tb-lang.seg a[data-lang],.tb-lang.seg span[data-lang]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;border-radius:9px;background:transparent;font:500 14px var(--cl-font-text);color:var(--cl-body);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.tb-lang.seg span[data-lang].on{background:var(--cl-card);color:var(--cl-ink);font-weight:600;box-shadow:var(--cl-shadow-1)}
.tb .signin{grid-area:sign;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 16px;border-radius:12px;background:var(--cl-card);box-shadow:inset 0 0 0 1px var(--cl-line-2);font:600 14px/1 var(--cl-font-text);color:var(--cl-ink);text-decoration:none;white-space:nowrap;transition:background-color var(--mo-quick,140ms) var(--mo-ease-out,ease),transform var(--mo-release,220ms) var(--mo-spring,ease)}
.tb .signin:hover{background:var(--cl-paper-2)}
.tb .signin[data-site-sign="signed-in"]{background:var(--cl-ink);color:var(--cl-card);box-shadow:none}
.tb .signin[data-site-sign="signed-in"]:hover{background:var(--cl-fig-soft)}
.tb .signin:active{transform:scale(var(--mo-press-scale,.96))}
/* signed in (Round 76): the student's face and "open cutline", to the app's /home */
.tb .signin.me{gap:8px;padding:0 14px 0 6px;border-radius:999px}
.tb .me-av{width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--cl-accent);color:var(--cl-accent-ink);font:600 13px/1 var(--cl-font-text)}
.tb .me-av img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:759.98px){
  .tb-in{height:auto;padding:0 var(--cl-gut-page,16px) 8px;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"brand . lang sign" "sw sw sw sw";row-gap:2px;column-gap:8px}
  .tb .brand,.tb-lang.seg,.tb .signin{align-self:center}
  .tb .brand{min-height:56px}
  .tb .brand .wm{font-size:20px}
  .tb-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-left:0}
  .tb-sw a{padding:0 6px;font-size:14px}
  .tb-lang.seg button,.tb-lang.seg a[data-lang],.tb-lang.seg span[data-lang]{padding:0 8px}
  .tb .signin{padding:0 13px}
  .tb .signin.me{padding:0 12px 0 5px;gap:7px}
}
@media (prefers-reduced-motion:reduce){.tb,.tb-sw a,.tb .signin{transition:none}}

/* the HSFY sub-nav: Papers, Year 13, Parents, Summer, under the top bar on the HSFY pages; the current page underlined */
.hsub{border-bottom:1px solid var(--cl-line);background:var(--cl-paper)}
.hsub-in{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--cl-gut-page,80px);display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.hsub-in::-webkit-scrollbar{display:none}
.hsub .hl{flex:none;display:inline-flex;align-items:center;margin-right:10px;padding-right:14px;border-right:1px solid var(--cl-line-2);font:600 14px/1 var(--cl-font-display);color:var(--cl-ink)}
.hsub a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font:500 14.5px/1 var(--cl-font-text);color:var(--cl-body);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.hsub a:hover{color:var(--cl-ink)}
.hsub a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--cl-blue);transform:scaleX(0);transition:transform var(--mo-base,200ms) var(--mo-ease-out,ease)}
.hsub a[aria-current="page"]{color:var(--cl-ink);font-weight:600}
.hsub a[aria-current="page"]::after{transform:none}
@media (max-width:759.98px){.hsub .hl{display:none}.hsub-in{gap:0;justify-content:space-between}.hsub a{padding:0 10px;font-size:14px}.hsub a::after{left:10px;right:10px}}
@media (max-width:359.98px){.hsub a{padding:0 7px}}

/* the footer: the brand and the switch, the four products, the rest of Cutline (Med Y2 for existing students lives here only), legal, contact */
.sf{border-top:1px solid var(--cl-line);background:var(--cl-paper);padding:44px 0 36px;font-size:14px;color:var(--cl-body)}
.sf-in{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--cl-gut-page,80px)}
.sf-cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:28px}
.sf-brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sf-brand .brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cl-ink);text-decoration:none}
.sf-brand .brand .mk{width:26px;height:26px;display:block}
.sf-brand .brand .wm{font-family:var(--cl-font-display);font-weight:600;font-size:20px;letter-spacing:-.02em}
.sf-brand p{margin:0;font-size:14px;line-height:1.5;max-width:26em}
.sf .tb-lang.seg{align-self:flex-start;justify-self:start}
.sf .tb-lang.seg button,.sf .tb-lang.seg a[data-lang],.sf .tb-lang.seg span[data-lang]{min-width:56px}
.sf-h{margin:0 0 6px;font-weight:600;color:var(--cl-ink)}
.sf-col a{display:flex;align-items:center;min-height:44px;line-height:1.3;color:var(--cl-body);text-decoration:none}
.sf-col a:hover{color:var(--cl-ink)}
.sf-col a[data-footer-med2]{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:4px 0}
.sf-col a small{font-size:12.5px;color:var(--cl-muted)}
.sf-fine{margin-top:28px;padding-top:20px;border-top:1px solid var(--cl-line);font-size:12.5px;color:var(--cl-muted);line-height:1.6;display:flex;flex-direction:column;gap:4px}
.sf-fine p{margin:0}
@media (max-width:959.98px){.sf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}.sf-brand{grid-column:1 / -1}}
@media (max-width:759.98px){.sf{padding:36px env(safe-area-inset-right) calc(32px + env(safe-area-inset-bottom)) env(safe-area-inset-left)}.sf-cols{font-size:13.5px}}

/* Roro on the public pages (Round 63): shared/site.js draws him and keeps him looping while he is on screen */
.roro[data-roro-mood]{display:inline-block;vertical-align:middle;flex:none;line-height:0}
/* Round 69: a mascot span is not the parts.css .roro speech box (14px padding, blue fill, border, 16px radius). Without this reset a 30px Roro
   kept 28px of padding, so the image drew at 0 x 0 (the empty circle in the Year 13 door) and the closing Roro sat in a pale blue box. */
.roro[data-roro-mood]{padding:0;gap:0;background:none;border:0;border-radius:0}
.roro[data-roro-mood] img{width:100%;height:100%}

/* ---- Chinese type (Round 5 ZH2, 5 Oct 2026): once the switch sets <html lang="zh-Hans">, Noto Sans SC (loaded by site.js) sits
   behind Inter and Bricolage in the shared font tokens, so CJK glyphs keep their weight on every public page; display headings lose
   the tight Latin tracking, which squeezes Chinese ---- */
html[lang="zh-Hans"]{--cl-font-text:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;--cl-font-display:'Bricolage Grotesque','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif}
html[lang="zh-Hans"] .dsp,html[lang="zh-Hans"] .d{letter-spacing:0}
/* a Chinese headline breaks between its clauses, never inside a word (the hsfy page's own rule, Round 5 ZH): span.nw holds a clause together */
html[lang="zh-Hans"] .nw{white-space:nowrap}