html:has(.specimen-mode){background:white}.specimen-mode .sidebar,.specimen-mode .topbar,.specimen-mode .page-foot,.specimen-mode>.skip{display:none}.specimen-mode .workspace{margin:0}.specimen-mode .main{max-width:none;padding:0}.specimen-mode{background:white}.specimen-mode .site{container-type:inline-size}.specimen-pad{padding:32px}.specimen-mode[data-kind=header] .specimen-pad,.specimen-mode[data-kind=hero] .specimen-pad{padding:0}.specimen-mode[data-kind=card] .specimen-pad{max-width:480px;margin:auto}.specimen-mode .site-title{margin-top:18px}.site-nav span{font-size:12px}.utility{padding:8px 28px;background:var(--edu-action-primary);color:white;font-size:12px;display:flex;justify-content:space-between}.header-v2 .site-header{padding-top:32px;padding-bottom:32px}.header-v2 .site-nav{justify-content:center;background:var(--edu-primary-subtle)}.header-v3 .site-header{padding-top:30px;padding-bottom:30px}.header-v3 .site-nav{background:var(--edu-action-primary);color:white;padding:18px 28px;justify-content:space-between}.header-v1 .site-header>span,.header-v3 .site-header>span{font-size:12px}.hero-wide{position:relative;min-height:450px;isolation:isolate}.hero-wide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero-wide:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10251aec,#10251a18);z-index:-1}.hero-wide-copy{color:white;padding:70px 48px;max-width:670px}.hero-wide h2{font-size:48px;margin:18px 0}.hero-wide p{color:#f0f4f1}.hero-kicker{font-size:12px;letter-spacing:.16em}.hero-editorial{padding:60px 48px;display:grid;grid-template-columns:1.1fr 1fr;gap:42px;background:var(--edu-surface-muted);align-items:center}.hero-editorial h2{font-size:48px;line-height:1.4;margin:20px 0}.hero-editorial-image img{height:350px;object-fit:cover;width:100%}.hero-editorial-image span{font-size:12px;color:var(--edu-text-muted);display:block;margin-top:12px}.article-page{padding:42px}.article-page>.site-title{font-size:40px}.article-page>img{width:100%;height:360px;object-fit:cover}.article-copy{max-width:700px;margin:36px auto}.article-copy .lead{font-size:20px}.profile-intro{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center}.profile-avatar{background:var(--edu-primary-subtle);color:var(--edu-action-primary);height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:80px}.profile-avatar span{font-size:12px}.editorial-list>div{display:grid;grid-template-columns:50px 1fr 30px;gap:20px;padding:24px 0;border-bottom:1px solid var(--edu-border);align-items:center}.editorial-list h3{margin:12px 0 6px}.editorial-list p{margin:0}.list-number{font-size:24px;color:var(--edu-text-muted)}.feature-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--edu-border)}.feature-card>img{width:100%;height:330px;object-fit:cover}.feature-card>div{padding:32px}.feature-card h2{margin:16px 0}.cta-light{text-align:center;background:var(--edu-primary-subtle);padding:50px}.cta-light h2{margin:20px 0}.cta-light .btn{margin:0 5px}.compact-links{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.compact-links>div,.compact-links>a{border-bottom:1px solid var(--edu-border);padding:20px 0;display:flex;justify-content:space-between}.compact-links>a{color:inherit;text-decoration:none;gap:12px}.faq-columns{display:grid;grid-template-columns:1fr 1.5fr;gap:40px}.faq-columns h2{margin-top:18px}
/* Button style options, both themes (1104-T2). Pill: primary actions (help desk, log in, submit, hero CTA). Square + long arrow: More / View all / navigation. Theme 1 default stays 5px; Theme 2 defaults live in theme-2-components.css. */
.btn--pill{border-radius:999px}.btn--square{border-radius:0;gap:0}.btn--square::after{content:"";flex:none;width:32px;height:12px;margin-left:16px;background:currentColor;-webkit-mask:url("assets/icons/arrow-long.svg") center/contain no-repeat;mask:url("assets/icons/arrow-long.svg") center/contain no-repeat;transition:transform .2s ease}.btn--square:hover::after{transform:translateX(4px)}.table-wrap{position:relative} /* C11, both themes: the visually-hidden link text (position:absolute) stays inside the table scroll box instead of making the page scroll sideways */@media(prefers-reduced-motion:reduce){.btn--square::after{transition:none}}
@media(max-width:560px){.hero-editorial,.feature-card,.faq-columns,.profile-intro{grid-template-columns:1fr}.hero-editorial{padding:28px;gap:22px}.hero-editorial h2,.hero-wide h2{font-size:32px}.hero-wide-copy{padding:40px 24px}.hero-editorial-image img{height:230px}.site-header{flex-wrap:wrap;gap:12px}.site-nav{gap:16px}.article-page{padding:24px}.article-page>.site-title{font-size:32px}.article-page>img{height:220px}.specimen-pad{padding:20px}.profile-avatar{height:180px}.cta-light{padding:30px 20px}.cta-light .btn{margin:6px}.hero-wide{min-height:360px}}
/* Avoid showing the demo navigation while the isolated specimen initializes. */
body:not(.specimen-mode){visibility:hidden}
@media(max-width:560px){.specimen-mode .site-main{padding:24px}.site-header{padding:20px!important}.site-identity{flex-wrap:wrap}.site-dept{font-size:16px}.site-nav{flex-wrap:wrap;padding:16px!important}.site-hero{grid-template-columns:1fr!important}.site-hero-copy{padding:28px!important}.site-hero>img{width:100%;height:220px!important}.site-footer{display:grid;gap:16px;padding:24px}.grid2,.grid3,.card-grid,.quick-grid{grid-template-columns:1fr!important}.cta-band{flex-wrap:wrap;gap:20px}.profile-intro{grid-template-columns:1fr}.site-title{overflow-wrap:anywhere}.site table{display:block;overflow:auto;max-width:100%}}

.preview-return{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:#f6f8f6;border-bottom:1px solid #d8e0db;font:16px/1.5 system-ui,sans-serif;color:#26392d}.preview-return a{display:inline-flex;align-items:center;min-height:44px;color:#006437;font-weight:600;text-decoration:none}.preview-return a:hover{text-decoration:underline}.preview-return a:focus-visible{outline:2px solid currentColor;outline-offset:4px}@media(max-width:560px){.preview-return{padding:8px 16px}.preview-return span{font-size:12px}}
.story-intro{max-width:800px;margin:56px auto;text-align:center}.story-intro h2{font-size:40px;line-height:1.4}.usage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0 48px;padding:32px;background:var(--edu-primary-subtle)}.usage-stats>div{display:grid;gap:8px}.usage-stats strong{font-size:40px;color:var(--edu-action-primary)}.usage-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:40px;align-items:start}.usage-split.reverse{grid-template-columns:minmax(220px,1fr) minmax(0,2.6fr)}.usage-aside{padding:28px;background:var(--edu-surface-muted);border-top:4px solid var(--edu-action-primary);margin-top:32px}.usage-aside .quick-grid{grid-template-columns:1fr}.usage-list article{padding:20px 0;border-bottom:1px solid var(--edu-border)}.usage-list h3{margin:0 0 8px}.usage-list p{margin:0}.hub-intro{padding:64px 48px;background:var(--edu-primary-subtle)}.hub-intro .site-title{font-size:48px}.hub-search{display:grid;gap:12px;max-width:720px;margin-top:32px}.hub-search input{width:100%;padding:20px;border:1px solid var(--edu-border-control);font-size:16px}.audience-links{display:flex;flex-wrap:wrap;gap:32px;margin-top:32px;font-weight:600}.event-poster{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;background:var(--edu-primary-subtle);padding:48px}.event-poster>.hero-kicker,.event-poster>.site-title,.event-poster>.site-subtitle{grid-column:1;margin:0}.event-poster>img{grid-column:2;grid-row:1/4;height:360px;width:100%;object-fit:cover}.event-poster .site-title{font-size:44px}.profile-banner{display:grid;grid-template-columns:1fr 240px;padding:48px;gap:48px;background:var(--edu-primary-subtle);align-items:center}.service-intro{padding:48px;background:var(--edu-primary-subtle)}
@media(max-width:560px){.usage-split,.usage-split.reverse,.event-poster,.profile-banner{grid-template-columns:1fr}.event-poster>img{grid-column:1;grid-row:auto;height:220px}.event-poster,.profile-banner,.hub-intro,.service-intro{padding:28px 24px}.event-poster .site-title,.hub-intro .site-title,.story-intro h2{font-size:32px}.usage-stats{grid-template-columns:1fr;gap:24px;padding:24px}.usage-stats strong{font-size:32px}.usage-aside{margin:0;padding:24px}.profile-banner{gap:24px}.usage-split{gap:24px}}
.home-contained{padding:0 40px;margin:36px auto;max-width:1280px}.home-full{margin:0}.home-block .site-section{margin:0}.home-block .site-section>h2{font-size:28px;line-height:1.4;margin:0 0 24px}.home-block .usage-stats{margin:0 0 16px}.home-block .homepage-title{font-size:40px;line-height:1.4;margin:20px 0}.home-block .hero-wide .homepage-title,.home-block .hero-editorial .homepage-title{font-size:48px}.home-block .hub-intro .homepage-title{font-size:48px}.home-block .audience-links a{color:var(--edu-action-primary);text-underline-offset:4px}.home-block .upcoming{max-width:600px}.specimen-mode[data-kind=home-section] .specimen-pad{padding:32px}.home-block .site-footer{margin:0}
@media(max-width:560px){.home-contained{padding:0 24px;margin:28px auto}.home-block .homepage-title,.home-block .hero-wide .homepage-title,.home-block .hero-editorial .homepage-title,.home-block .hub-intro .homepage-title{font-size:32px}.home-block .site-section>h2{font-size:24px}}

.site-hero h2,.site-hero .homepage-title{font-size:40px;line-height:1.4;margin:12px 0 18px}.hero-wide h2,.hero-wide .homepage-title,.hero-editorial h2,.hero-editorial .homepage-title{font-size:48px;line-height:1.4;margin:20px 0}.specimen-mode[data-kind=home-section] .home-block .hub-intro .site-title{font-size:48px}@media(max-width:560px){.site-hero h2,.site-hero .homepage-title,.hero-wide h2,.hero-wide .homepage-title,.hero-editorial h2,.hero-editorial .homepage-title,.specimen-mode[data-kind=home-section] .home-block .hub-intro .site-title{font-size:32px}}
/* (Theme Two navy serif rules removed 2026-11-04, 1104-T2: Theme 2 lives in design-system/theme-2/) */
/* Campus hub: align the search intro with the 1280px content column below it. */
.hub-intro{padding-inline:max(48px,calc((100% - 1280px)/2 + 40px))}
@media(max-width:720px){.hub-intro{padding:40px 24px}}

/* Header 2 (Campus hub): two rows instead of three; readable nav and a visible search button. */
.header-v2 .utility{align-items:center;padding:6px max(28px,calc((100% - 1280px)/2 + 40px));font-size:13px}
.header-v2 .utility nav{display:flex;gap:20px}.header-v2 .utility a{color:white;opacity:.85;text-decoration:none;cursor:pointer}.header-v2 .utility a:hover,.header-v2 .utility a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.header-v2 .site-header{padding:18px max(28px,calc((100% - 1280px)/2 + 40px))!important;gap:32px;border-bottom:1px solid var(--edu-border)}
.hv2-nav{display:flex;gap:28px;margin-left:auto;font-size:15px}.hv2-nav a{color:var(--edu-text);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent;cursor:pointer}.hv2-nav a:hover{color:var(--edu-action-primary);border-bottom-color:var(--edu-action-primary)}
.hv2-actions{display:flex;gap:8px}.hv2-actions button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:4px;font:inherit;font-size:15px;cursor:pointer}
.hv2-search{background:var(--edu-action-primary);color:white;border:1px solid var(--edu-action-primary)}.hv2-search:hover{filter:brightness(.92)}
.hv2-menu{display:none!important;background:white;color:var(--edu-text);border:1px solid var(--edu-border)}
@media(max-width:1100px){.hv2-nav{display:none}.hv2-menu{display:inline-flex!important}.hv2-actions{margin-left:auto}}
@media(max-width:720px){.header-v2 .utility{padding:6px 16px;font-size:12px}.header-v2 .utility nav{gap:12px}.header-v2 .site-header{padding:12px 16px!important;flex-wrap:nowrap;gap:12px}.hv2-actions button{padding:0 12px}.hv2-search{font-size:0!important}.hv2-search span{font-size:18px}}
.hv2-actions{flex-shrink:0}.hv2-actions button{white-space:nowrap}

/* ---- Third designs ---- */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:220px;gap:20px;margin-top:32px}
.mosaic-tile{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--edu-surface);border:1px solid var(--edu-border);color:var(--edu-text);text-decoration:none}
.mosaic-tile img{width:100%;height:55%;object-fit:cover;display:block}
.mosaic-tile>div{padding:14px 16px}.mosaic-tile h3{margin:0 0 4px;font-size:18px}.mosaic-tile p{margin:0 0 6px;font-size:14px;color:var(--edu-text-muted)}.mosaic-tile span{font-size:14px;color:var(--edu-link);font-weight:600}
.mosaic-tile.is-big{grid-row:span 2}.mosaic-tile.is-big img{height:100%;position:absolute;inset:0}
.mosaic-tile.is-big>div{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(transparent,#000000b3);color:white}.mosaic-tile.is-big h3{font-size:24px}.mosaic-tile.is-big p,.mosaic-tile.is-big span{color:#ffffffe6}
.mosaic-tile:hover{border-color:var(--edu-action-primary)}.mosaic-tile:nth-child(6){grid-column:2 / span 2;grid-row:span 1}
.event-tabs,.course-tabs{display:flex;gap:8px;margin:28px 0 8px;border-bottom:1px solid var(--edu-border)}
.event-tabs button,.course-tabs button{border:0;background:none;padding:12px 16px;font:inherit;font-size:15px;color:var(--edu-text-muted);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.event-tabs button[aria-selected=true],.course-tabs button[aria-selected=true]{color:var(--edu-action-primary);border-bottom-color:var(--edu-action-primary);font-weight:600}
.event-row{display:grid;grid-template-columns:96px 1fr 280px;gap:28px;align-items:start;padding:28px 0;border-bottom:1px solid var(--edu-border)}
.event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;height:96px;background:var(--edu-primary-subtle);border-radius:6px}
.event-date strong{font-size:36px;line-height:1;color:var(--edu-action-primary)}.event-date span{font-size:13px;letter-spacing:1px;color:var(--edu-text-muted);margin-top:6px}
.event-body h3{margin:0 0 8px;font-size:20px}.event-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--edu-text-muted);margin:0 0 10px}.event-body p{margin:0 0 10px}.event-body a{color:var(--edu-link);font-weight:600}
.event-row img{width:100%;height:170px;object-fit:cover;border-radius:6px}
.people-hero{position:relative;padding:0 0 40px}.people-hero img{width:100%;height:340px;object-fit:cover;display:block}
.people-hero blockquote{position:relative;margin:-56px auto 0;max-width:640px;padding:22px 28px;background:var(--edu-text);color:white;font-size:16px;line-height:1.7}
.centered-heading{text-align:center;margin:0 0 20px}
.dept-links{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px}.dept-links a{color:var(--edu-text);text-decoration:none;font-weight:500}.dept-links a:hover{color:var(--edu-link)}
.person-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person-photo{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--edu-primary-subtle);color:var(--edu-action-primary);font-size:56px;font-weight:700;border-radius:6px;margin-bottom:12px}
.person-tile h3{margin:0 0 2px;font-size:17px}.person-tile p{margin:0;color:var(--edu-text-muted);font-size:14px}.person-tile small{color:var(--edu-text-muted);font-size:12px}
.two-col-text{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:40px}.two-col-text h3{margin-top:0}
.steps-heading{margin:8px 0 20px}
.step-cards{list-style:none;padding:0;margin:0 0 48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-cards li{display:flex;gap:16px;padding:22px;background:var(--edu-surface);border:1px solid var(--edu-border);border-radius:6px}
.step-cards span{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--edu-action-primary);color:var(--edu-action-primary);font-weight:700}
.step-cards h3{margin:4px 0 6px;font-size:17px}.step-cards p{margin:0;font-size:14px;color:var(--edu-text-muted)}
.check-list{list-style:none;padding:0;margin:0 0 24px}.check-list li{padding:6px 0 6px 28px;position:relative}.check-list li::before{content:"✓";position:absolute;left:0;color:var(--edu-success);font-weight:700}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.course-tile{border:1px solid var(--edu-border);border-radius:6px;overflow:hidden;background:var(--edu-surface);display:flex;flex-direction:column}
.course-tile img{width:100%;height:180px;object-fit:cover}.course-tile>div{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.course-tile h3{margin:0;font-size:19px}.course-tile p{margin:0;color:var(--edu-text-muted);font-size:14px}
.course-tile dl{margin:0;display:flex;flex-direction:column;gap:4px;font-size:14px}.course-tile dl div{display:flex;gap:8px}.course-tile dt{color:var(--edu-text-muted)}.course-tile dd{margin:0}
.course-tile .btn{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.mosaic{grid-template-columns:1fr 1fr}.mosaic-tile:nth-child(6){grid-column:span 2}.event-row{grid-template-columns:72px 1fr}.event-row img{grid-column:1 / -1;height:200px}.person-grid{grid-template-columns:repeat(2,1fr)}.step-cards,.course-grid{grid-template-columns:1fr 1fr}.dept-links{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mosaic{grid-template-columns:1fr;grid-auto-rows:auto}.mosaic-tile,.mosaic-tile.is-big,.mosaic-tile:nth-child(6){grid-row:auto;grid-column:auto}.mosaic-tile.is-big{height:260px}.mosaic-tile img{height:160px}.event-date{height:72px}.event-date strong{font-size:28px}.step-cards,.course-grid,.two-col-text{grid-template-columns:1fr}.two-col-text{gap:16px}.people-hero img{height:220px}.people-hero blockquote{margin:-32px 16px 0}}

.mosaic-tile:nth-child(6){grid-column:1 / -1;grid-row:span 1}
.mosaic-tile.is-big>div{background:linear-gradient(transparent,#000000cc 45%)}
.dept-links{max-width:900px;margin-left:auto;margin-right:auto}
.person-photo{font-size:44px}
.steps-split .site-section{margin-top:0;padding-top:0;border-top:0}.steps-split .site-section>h3,.steps-split>div>h3{margin-top:0;font-size:20px}
@media(max-width:900px){.mosaic-tile:nth-child(6){grid-column:1 / -1}}

.course-grid-2{grid-template-columns:repeat(2,minmax(0,420px))}
.person-tile small{display:block}.person-tile a{display:inline-block;margin-top:8px;color:var(--edu-link);font-size:14px;font-weight:600}
@media(max-width:600px){.course-grid-2{grid-template-columns:1fr}}

/* News listing */
.news-filters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px}
.news-filters button{border:1px solid var(--edu-border);background:var(--edu-surface);border-radius:20px;padding:8px 18px;font:inherit;font-size:14px;color:var(--edu-text);cursor:pointer}
.news-filters button[aria-pressed=true]{background:var(--edu-action-primary);border-color:var(--edu-action-primary);color:var(--edu-on-primary,#fff)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-tile{border:1px solid var(--edu-border);border-radius:6px;overflow:hidden;background:var(--edu-surface)}
.news-tile img{width:100%;height:190px;object-fit:cover;display:block}.news-tile>div{padding:18px 20px 22px}
.news-tag{font-size:13px;color:var(--edu-link);font-weight:600}.news-tile h3{margin:6px 0 8px;font-size:18px;line-height:1.45}
.news-tile p{margin:0 0 10px;font-size:14px;color:var(--edu-text-muted)}.news-tile small{font-size:13px;color:var(--edu-text-muted)}
.news-pages{display:flex;justify-content:center;gap:8px;margin-top:36px}.news-pages a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--edu-text);color:white;font-weight:600}
@media(max-width:900px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr}}

/* ---- Additional designs ---- */
.x-banner{position:relative;min-height:240px;display:flex;align-items:flex-end;background:var(--edu-text);overflow:hidden}
.x-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.x-banner>div{position:relative;padding:48px 44px;color:white;max-width:900px}.x-banner .site-title{color:white;margin:6px 0}.x-banner p{color:#ffffffd9;margin:0}.x-crumb{font-size:13px;letter-spacing:.5px}
.x-h{margin:48px 0 20px}
.x-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.x-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-card{border:1px solid var(--edu-border);border-radius:6px;overflow:hidden;background:var(--edu-surface);display:flex;flex-direction:column}
.x-card img{width:100%;height:190px;object-fit:cover;display:block}.x-card>div{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.x-card h3{margin:0;font-size:18px}.x-card p{margin:0;color:var(--edu-text-muted);font-size:14px}/* Text links in a card; a card button that is a link (a.btn, 798691-R27) keeps the button style. */
.x-card a:not(.btn){color:var(--edu-link);font-weight:600;font-size:14px;margin-top:auto}
.x-card-center>div{align-items:center;text-align:center}.x-card .btn{align-self:center;margin-top:auto}
.x-tag{font-size:12px;letter-spacing:.5px;color:var(--edu-link);font-weight:700}.x-tag-solid{display:inline-block;background:var(--edu-action-primary);color:var(--edu-on-primary,#fff);padding:4px 10px;border-radius:3px}
.x-stats,.x-stat-boxes,.x-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 8px}
.x-stats div,.x-stat-boxes div,.x-highlights div{display:flex;flex-direction:column;gap:4px}.x-stats strong,.x-stat-boxes strong,.x-highlights strong{font-size:32px;color:var(--edu-action-primary);line-height:1.1}.x-stats span,.x-stat-boxes span,.x-highlights span{font-size:14px;color:var(--edu-text-muted)}
.x-stat-boxes div,.x-highlights div{align-items:center;text-align:center;padding:24px;border:1px solid var(--edu-border);border-radius:6px;background:var(--edu-surface);box-shadow:0 4px 14px #0000000f}
/* Pull the tiles over the hero only where they follow it (home-campus); elsewhere (e.g. Components) keep them in flow. */
.x-hero-center+.site-main>.x-stat-boxes:first-child{margin-top:-60px;position:relative}
.x-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:48px 0}.x-split>img,.x-round-img{width:100%;height:340px;object-fit:cover;border-radius:6px}.x-round-img{border-radius:16px}
.x-collage{position:relative;height:340px}.x-collage img{position:absolute;object-fit:cover;border-radius:6px}.x-collage img:first-child{width:70%;height:80%;left:0;top:0}.x-collage img:last-child{width:50%;height:55%;right:0;bottom:0;border:6px solid var(--edu-surface)}
.x-hero-center{position:relative;height:440px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--edu-text);overflow:hidden}
.x-hero-center img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}.x-hero-center>div{position:relative;color:white;max-width:720px;padding:24px}.x-hero-center .site-title{color:white}.x-hero-center p{color:#ffffffe0}.x-hero-center .hero-kicker{color:#ffffffcc}
.x-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.x-tile{position:relative;height:150px;border-radius:6px;overflow:hidden;display:block}.x-tile img{width:100%;height:100%;object-fit:cover}
.x-tile span{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(transparent,#000000b3);color:white;font-weight:600}
.x-events-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}.x-events-img{width:100%;height:300px;object-fit:cover;border-radius:6px;margin-top:48px}
.x-mini-event{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--edu-border)}.x-mini-event .event-date{width:72px;height:72px;flex:none}.x-mini-event h3{margin:0 0 4px;font-size:17px}.x-mini-event p{margin:0;font-size:14px;color:var(--edu-text-muted)}
.x-band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:40px 44px;background:var(--edu-primary-subtle);margin-top:48px}.x-band h2{margin:4px 0}.x-band p{margin:4px 0 0}
.x-band-dark{background:var(--edu-text);color:white}.x-band-dark h2,.x-band-dark p{color:white}
.x-hero-split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:48px 44px;background:var(--edu-primary-subtle)}.x-hero-split img{width:100%;height:340px;object-fit:cover;border-radius:24px 24px 24px 120px}
.x-feature-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edu-action-primary);margin:0 44px;transform:translateY(-24px);border-radius:8px;overflow:hidden}
.x-feature-band div{padding:22px;background:var(--edu-action-primary);color:var(--edu-on-primary,#fff)}.x-feature-band h3{margin:0 0 6px;font-size:17px;color:inherit}.x-feature-band p{margin:0;font-size:14px;color:inherit;opacity:.9}
.x-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.x-cat-grid a{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--edu-border);border-radius:8px;color:var(--edu-text);text-decoration:none;background:var(--edu-surface)}.x-cat-grid img{width:72px;height:56px;object-fit:cover;border-radius:4px}
.x-hero-overlay{position:relative;height:460px;background:var(--edu-text);overflow:hidden}.x-hero-overlay>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.x-hero-copy{position:absolute;left:44px;bottom:56px;color:white;max-width:520px}.x-hero-copy .site-title{color:white}.x-hero-copy p,.x-hero-copy .hero-kicker{color:#ffffffe0}
.x-notice-box{position:absolute;right:44px;top:40px;width:320px;background:var(--edu-surface);border-radius:6px;padding:20px 22px;box-shadow:0 10px 30px #0003}.x-notice-box h3{margin:0 0 8px}.x-notice-box div{padding:10px 0;border-top:1px solid var(--edu-border)}.x-notice-box p{margin:2px 0 0;font-size:13px;color:var(--edu-text-muted)}
.x-strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--edu-action-primary)}.x-strip a{padding:20px;text-align:center;color:var(--edu-on-primary,#fff);font-weight:600;text-decoration:none;border-right:1px solid #ffffff33}
.x-dark-band{padding:48px 44px;background:var(--edu-text)}.x-dark-band h2{color:white;margin:0 0 24px}
.x-campus-banner{position:relative;margin:0;background:var(--edu-text);overflow:hidden}.x-campus-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}.x-campus-banner>div{position:relative;padding:56px 44px;color:white}.x-campus-banner h2{color:white}.x-campus-banner .x-stats strong{color:white}.x-campus-banner .x-stats span,.x-campus-banner .sample-caption{color:#ffffffcc}
.x-sidebar-layout{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.x-filter{border:1px solid var(--edu-border);border-radius:6px;padding:20px;background:var(--edu-surface);display:flex;flex-direction:column;gap:10px}.x-filter h3{margin:0 0 4px;font-size:16px}.x-filter label{font-size:14px;display:flex;gap:8px;align-items:center}
.x-list-row{display:grid;grid-template-columns:1fr 200px;gap:24px;align-items:center;padding:20px;border:1px solid var(--edu-border);border-radius:6px;margin-bottom:16px;background:var(--edu-surface)}.x-list-row h3{margin:4px 0 6px}.x-list-row p{margin:0 0 6px;color:var(--edu-text-muted)}.x-list-row a{color:var(--edu-link);font-weight:600;font-size:14px}.x-list-row img{width:100%;height:130px;object-fit:cover;border-radius:4px}
.x-wide-img{width:100%;height:360px;object-fit:cover;border-radius:6px;display:block}.x-flush{border-radius:0;height:320px}
.x-feature{padding:22px;border:1px solid var(--edu-border);border-radius:6px;background:var(--edu-surface)}.x-feature h3{margin:4px 0 6px}.x-feature p{margin:0 0 12px;color:var(--edu-text-muted);font-size:14px}.x-feature img{width:100%;height:150px;object-fit:cover;border-radius:4px}
.x-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}.x-gallery img{width:100%;height:180px;object-fit:cover;border-radius:4px}.x-gallery img:nth-child(1){grid-row:span 2;height:372px}
.x-img-wrap{position:relative}.x-badge{position:absolute;left:12px;bottom:12px;background:var(--edu-brand-accent,#F06423);color:#000;font-size:12px;font-weight:700;padding:4px 10px;border-radius:3px}
.x-centered-head{text-align:center;max-width:720px;margin:0 auto 28px}
.x-detail-grid{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:start;margin-top:32px}.x-detail-right{grid-template-columns:1fr 320px}
.x-info-card{border:1px solid var(--edu-border);border-radius:6px;padding:22px;background:var(--edu-surface);box-shadow:0 4px 14px #0000000f}.x-info-card h3{margin:0 0 10px}.x-info-card img{width:100%;height:160px;object-fit:cover;border-radius:4px;margin-bottom:14px}.x-info-card .btn{width:100%;margin-top:12px}.x-info-card p{font-size:14px;color:var(--edu-text-muted)}
.x-sticky{position:sticky;top:16px}
.x-people-round{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}.x-people-round article{padding:24px 12px;border:1px solid var(--edu-border);border-radius:6px;background:var(--edu-surface)}
.x-avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--edu-primary-subtle);color:var(--edu-action-primary);font-size:44px;font-weight:700;border:4px solid var(--edu-surface);box-shadow:0 0 0 2px var(--edu-brand-accent,#F06423)}
.x-people-round h3{margin:0 0 4px;font-size:17px}.x-people-round p,.x-people-round small{margin:0;display:block;color:var(--edu-text-muted);font-size:14px}
.x-people-overlay{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.x-people-overlay article{position:relative;border-radius:10px;overflow:hidden}
.x-portrait{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--edu-primary-subtle),var(--edu-surface-muted));color:var(--edu-action-primary);font-size:64px;font-weight:700;border-radius:8px}
.x-overlay{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,#000000c0);color:white}.x-overlay h3{margin:0;color:white;font-size:17px}.x-overlay p{margin:2px 0 0;font-size:13px;color:#ffffffd9}
.x-profile-top{display:grid;grid-template-columns:280px 1fr;gap:40px;margin-bottom:40px}.x-profile-top .x-h{margin-top:0}.x-profile-top h3{margin:14px 0 4px}.x-profile-top p{color:var(--edu-text-muted)}
.x-img-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.x-img-pair img{width:100%;height:220px;object-fit:cover;border-radius:6px}
.x-req-boxes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.x-req-boxes>div{padding:22px;border:1px solid var(--edu-border);border-radius:6px;background:var(--edu-surface)}.x-req-boxes h3{margin-top:0}.x-num-list{margin:0;padding-left:20px;display:grid;gap:8px}
.x-table{width:100%;border-collapse:collapse;margin:8px 0 40px}.x-table caption{text-align:left;font-weight:700;padding-bottom:10px}.x-table th,.x-table td{text-align:left;padding:12px 16px;border:1px solid var(--edu-border)}.x-table th{background:var(--edu-action-primary);color:var(--edu-on-primary,#fff);width:30%}
.x-faq-2 .faq,.x-faq-2>*{columns:2;column-gap:32px}
.x-icon-card{text-align:center}.x-icon-card>span{display:inline-flex;width:48px;height:48px;border-radius:50%;align-items:center;justify-content:center;background:var(--edu-primary-subtle);color:var(--edu-action-primary);font-weight:700;font-size:20px}
.x-course-head{background:var(--edu-primary-subtle)}.x-course-head .site-title{margin:12px 0}
.x-blog-side{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--edu-border);border-radius:6px;background:var(--edu-surface)}.x-blog-side h3{margin:12px 0 4px;font-size:16px}.x-blog-side ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.x-blog-side a{color:var(--edu-text);text-decoration:none}.x-blog-side a:hover{color:var(--edu-link)}
.x-search{display:grid;gap:6px;font-size:14px}.x-search input{min-height:44px;padding:8px 12px;border:1px solid var(--edu-border-control,#78877d);border-radius:4px}
.x-doc-card{padding:22px;border:1px solid var(--edu-border);border-radius:6px;background:var(--edu-surface)}.x-doc{display:inline-block;padding:6px 10px;background:var(--edu-primary-subtle);color:var(--edu-action-primary);font-weight:700;font-size:13px;border-radius:3px}.x-doc-card h3{margin:12px 0 6px}.x-doc-card p{margin:0 0 12px;color:var(--edu-text-muted);font-size:14px}.x-doc-card a{color:var(--edu-link);font-weight:600}
@media(max-width:900px){.x-grid-3,.x-tiles,.x-cat-grid{grid-template-columns:1fr 1fr}.x-people-round,.x-people-overlay{grid-template-columns:1fr 1fr}.x-split,.x-events-split,.x-hero-split,.x-detail-grid,.x-detail-right,.x-sidebar-layout,.x-profile-top{grid-template-columns:1fr}.x-notice-box{position:static;width:auto;margin:16px}.x-hero-overlay{height:auto}.x-hero-overlay>img{position:absolute}.x-hero-copy{position:relative;left:auto;bottom:auto;padding:40px 24px 8px}.x-feature-band{grid-template-columns:1fr;margin:0 16px}}
@media(max-width:600px){.x-grid-3,.x-grid-2,.x-tiles,.x-cat-grid,.x-people-round,.x-req-boxes,.x-img-pair,.x-gallery{grid-template-columns:1fr}.x-people-overlay{grid-template-columns:1fr 1fr}.x-gallery img:nth-child(1){grid-row:auto;height:180px}.x-stats,.x-stat-boxes,.x-highlights{grid-template-columns:1fr}.x-stat-boxes{margin-top:16px}.x-list-row{grid-template-columns:1fr}.x-banner>div,.x-band,.x-dark-band,.x-campus-banner>div,.x-hero-split{padding:32px 20px}.x-strip{grid-template-columns:1fr}.x-faq-2 .faq,.x-faq-2>*{columns:1}}
/* Mobile: notice box becomes a solid panel below the hero text (readable, no photo behind it) */
@media(max-width:900px){.x-hero-overlay{overflow:visible}.x-notice-box{position:relative;z-index:1;inset:auto;width:auto;margin:24px 0 0;border-radius:0;box-shadow:none;background:var(--edu-surface);color:var(--edu-text)}.x-notice-box h3{color:var(--edu-text)}}
/* Service steps: keep the two columns apart and headings on one baseline */
.steps-split{gap:56px;align-items:start}.steps-split .site-section>h2,.steps-split .site-section>h3,.steps-split>div>h3{margin:0 0 16px;font-size:20px;line-height:1.4}
@media(max-width:900px){.steps-split{grid-template-columns:1fr;gap:40px}}

/* Guided templates (GOV.UK / USWDS patterns) */
.g-narrow{max-width:760px}
.g-progress{display:flex;gap:8px;list-style:none;padding:0;margin:24px 0 4px}
.g-progress li{flex:1;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:6px solid var(--edu-border);font-size:14px;color:var(--edu-text-muted)}
.g-progress li span{width:26px;height:26px;border-radius:50%;border:2px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.g-progress li.done,.g-progress li[aria-current]{border-color:var(--edu-action-primary);color:var(--edu-text)}
.g-progress li[aria-current]{font-weight:700}
.g-progress li[aria-current] span,.g-progress li.done span{background:var(--edu-action-primary);border-color:var(--edu-action-primary);color:var(--edu-on-primary,#fff)}
.g-count{font-size:14px;color:var(--edu-text-muted);margin:6px 0 20px}
.g-step h3{margin-top:0}.g-nav{margin-top:28px}.g-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.g-q{font-size:20px;margin:28px 0 12px}
.g-choices{display:grid;gap:10px}
.g-choice{display:flex;gap:12px;align-items:center;border:2px solid var(--edu-border);border-radius:6px;padding:14px 16px;cursor:pointer;background:var(--edu-surface)}
.g-choice input{width:22px;height:22px;margin:0;accent-color:var(--edu-action-primary);flex:none}
.g-choice:has(input:checked){border-color:var(--edu-action-primary)}
.g-choice:has(input:focus-visible){outline:3px solid var(--edu-link);outline-offset:2px}
.g-links,.g-plain,.g-results,.g-tasks,.g-sbs{list-style:none;padding:0;margin:0}
.g-links li{border-bottom:1px solid var(--edu-border)}.g-links a{display:block;padding:14px 4px;font-weight:600;font-size:17px;color:var(--edu-link)}
[data-g-tags][hidden]{display:none}
.g-plain li{padding:12px 0;border-bottom:1px solid var(--edu-border)}.g-plain p{margin:4px 0 0;color:var(--edu-text-muted);font-size:14px}
.g-contents{border-left:4px solid var(--edu-action-primary);padding:4px 0 4px 20px;margin:28px 0}.g-contents h3{margin:0 0 8px;font-size:16px}.g-contents ol{margin:0;padding-left:20px;line-height:2}
.g-topic{padding:24px 0;border-top:1px solid var(--edu-border)}.g-topic h3{margin:0 0 6px}.g-topic p{margin:0 0 10px}.g-topic a{font-weight:600;color:var(--edu-link)}
.g-panel{border:2px solid var(--edu-action-primary);border-radius:6px;padding:20px 24px;margin:20px 0}.g-panel h3{margin:0 0 8px}
.g-panel-soft{border-width:0 0 0 6px;border-radius:0;background:var(--edu-surface-muted,#f2f4f2)}
.g-results li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--edu-border)}.g-results li>div{flex:1}.g-results h3{margin:0;font-size:17px}.g-results p{margin:2px 0 0;font-size:14px;color:var(--edu-text-muted)}.g-results a{font-weight:600;color:var(--edu-link);white-space:nowrap}
.g-avatar{width:48px;height:48px;border-radius:50%;background:var(--edu-surface-muted,#e8ece8);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.g-sbs{margin:8px 0 28px 15px;border-left:3px solid var(--edu-border)}
.g-sbs li{margin-left:-17px}.g-sbs details{padding:0 0 18px}
.g-sbs summary{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:19px;font-weight:700;padding:6px 0;list-style:none}.g-sbs summary::-webkit-details-marker{display:none}
.g-sbs summary::after{content:'顯示';margin-left:auto;font-size:14px;font-weight:600;color:var(--edu-link)}.g-sbs details[open] summary::after{content:'隱藏'}
.g-sbs summary:focus-visible{outline:3px solid var(--edu-link);outline-offset:2px}
.g-num{width:32px;height:32px;border-radius:50%;background:var(--edu-surface);border:2px solid var(--edu-text);display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.g-sbs details>div{padding:4px 0 0 46px}
.g-result-card{border:1px solid var(--edu-border);border-radius:6px;padding:20px 24px;margin-bottom:16px}.g-result-card h3{margin:6px 0}
.g-tasks{border-top:1px solid var(--edu-border)}.g-tasks li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--edu-border)}
.g-tasks li>div{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.g-tasks a{font-weight:600;color:var(--edu-link);font-size:17px}.g-tasks small{color:var(--edu-text-muted)}
.g-status{font-size:13px;font-weight:700;padding:4px 10px;border-radius:4px;background:var(--edu-surface-muted,#eceeec);color:var(--edu-text);white-space:nowrap}
.g-status.is-done{background:var(--edu-action-primary);color:var(--edu-on-primary,#fff)}
@media(max-width:600px){.g-progress li{flex-direction:column;align-items:flex-start;font-size:13px}.g-results li{flex-wrap:wrap}.g-sbs details>div{padding-left:0}}

/* Guided templates: visual layer */
.g-narrow{margin-left:auto;margin-right:auto;max-width:820px}
img.g-strip{display:block;width:100%;height:240px;object-fit:cover}
.g-narrow>.site-title{font-size:clamp(28px,4vw,40px)}
.g-choices{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g-choice{padding:18px 20px;transition:border-color .15s,background .15s,transform .15s}
.g-choice:hover{border-color:var(--edu-action-primary);transform:translateY(-2px)}
.g-choice:has(input:checked){background:color-mix(in srgb,var(--edu-action-primary) 8%,var(--edu-surface));box-shadow:0 0 0 1px var(--edu-action-primary)}
.g-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.g-links li{border:1px solid var(--edu-border);border-radius:6px;background:var(--edu-surface);transition:transform .15s,box-shadow .15s}
.g-links li:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001a}
.g-links a{display:flex;justify-content:space-between;padding:18px 20px;text-decoration:none}
.g-topic{border:1px solid var(--edu-border);border-left:6px solid var(--edu-action-primary);border-radius:6px;padding:20px 24px;margin-bottom:14px}
.g-progress li{border-top-width:8px;border-radius:2px}
.g-step:not([hidden]),[data-g-tags]:not([hidden]){animation:g-in .25s ease-out}
@keyframes g-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.g-sbs details[open] .g-num{background:var(--edu-action-primary);border-color:var(--edu-action-primary);color:var(--edu-on-primary,#fff)}
.g-avatar{background:color-mix(in srgb,var(--edu-action-primary) 12%,var(--edu-surface));color:var(--edu-action-primary)}
.g-results li{border:1px solid var(--edu-border);border-radius:6px;padding:16px 20px;margin-bottom:10px}
.g-result-card{border-top:6px solid var(--edu-action-primary)}
.g-meter{height:10px;border-radius:5px;background:var(--edu-border);overflow:hidden;margin:-8px 0 20px}.g-meter span{display:block;height:100%;background:var(--edu-action-primary);transition:width .3s}
.g-tasks li{transition:background .15s}.g-tasks li:hover{background:color-mix(in srgb,var(--edu-action-primary) 5%,transparent)}
@media(prefers-reduced-motion:reduce){.g-step,[data-g-tags],.g-choice,.g-links li{animation:none!important;transition:none!important;transform:none!important}}
@media(max-width:600px){img.g-strip{height:160px}}
.g-choices+.g-results,.g-choices+h3{margin-top:28px}
/* Long titles: end with an ellipsis instead of being cut mid-line */
.mosaic-tile h3,.x-overlay h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mosaic-tile:not(.is-big) p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.x-card h3,.news-tile h3,.course-tile h3,.x-event-card h3,.x-list-row h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.x-overlay{padding-top:48px;background:linear-gradient(transparent,#000000d9 40%)}

/* Homepage 3 · text-only newspaper version (same content as home-hub, no images) */
[data-home-layout="home-hub-text"]{--np-ink:#1b1b1b;--np-paper:#fbfaf6;--np-rule:#1b1b1b;--np-muted:#5b5b57;background:var(--np-paper);color:var(--np-ink)}
[data-home-layout="home-hub-text"] img,[data-home-layout="home-hub-text"] video,[data-home-layout="home-hub-text"] picture,[data-home-layout="home-hub-text"] iframe,[data-home-layout="home-hub-text"] [class*="hero-media"],[data-home-layout="home-hub-text"] .fh-album{display:none!important}
[data-home-layout="home-hub-text"] *{background-image:none!important;box-shadow:none!important}
[data-home-layout="home-hub-text"] h1,[data-home-layout="home-hub-text"] h2,[data-home-layout="home-hub-text"] h3,[data-home-layout="home-hub-text"] strong{font-family:Georgia,'Times New Roman','Noto Serif TC',serif;color:var(--np-ink)!important;letter-spacing:0}
[data-home-layout="home-hub-text"] p,[data-home-layout="home-hub-text"] li,[data-home-layout="home-hub-text"] small,[data-home-layout="home-hub-text"] span{color:var(--np-ink)}
[data-home-layout="home-hub-text"] .fh-eyebrow{font-family:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--np-muted)!important;border-bottom:1px solid var(--np-rule);padding-bottom:6px;margin-bottom:14px}
[data-home-layout="home-hub-text"] .home-block{background:var(--np-paper)!important}
[data-home-layout="home-hub-text"] .home-block+.home-block{border-top:1px solid var(--np-rule)}
[data-home-layout="home-hub-text"] section,[data-home-layout="home-hub-text"] .fh-research,[data-home-layout="home-hub-text"] .fh-quick,[data-home-layout="home-hub-text"] .fh-hero,[data-home-layout="home-hub-text"] footer{background:var(--np-paper)!important;color:var(--np-ink)!important}
[data-home-layout="home-hub-text"] a{color:var(--np-ink)!important;text-decoration:underline;text-underline-offset:3px}
[data-home-layout="home-hub-text"] .btn,[data-home-layout="home-hub-text"] [class*="button"],[data-home-layout="home-hub-text"] [class*="-cta"]{background:transparent!important;color:var(--np-ink)!important;border:1px solid var(--np-ink)!important}
/* Masthead */
[data-home-layout="home-hub-text"] .fh-header{flex-direction:column;align-items:center;text-align:center;border-bottom:4px double var(--np-rule);padding-bottom:14px}
[data-home-layout="home-hub-text"] .fh-brand strong{font-size:clamp(28px,4vw,46px);line-height:1.1}
[data-home-layout="home-hub-text"] .fh-brand small{display:block;font-style:italic;color:var(--np-muted)!important}
[data-home-layout="home-hub-text"] .fh-menu nav{justify-content:center}
/* Lead story: the hero becomes a full-width headline */
[data-home-layout="home-hub-text"] .fh-hero{display:block;height:auto;min-height:0;text-align:center;padding:48px 8% 40px}
[data-home-layout="home-hub-text"] .fh-hero h1,[data-home-layout="home-hub-text"] .fh-hero h2{font-size:clamp(34px,5vw,60px);line-height:1.08;max-width:18ch;margin-left:auto;margin-right:auto}
/* Columns instead of image + text pairs */
[data-home-layout="home-hub-text"] .fh-about,[data-home-layout="home-hub-text"] .fh-research,[data-home-layout="home-hub-text"] .fh-news-grid,[data-home-layout="home-hub-text"] .fh-people{grid-template-columns:1fr 1fr;gap:0 48px}
[data-home-layout="home-hub-text"] .fh-about>*+*,[data-home-layout="home-hub-text"] .fh-research>*+*,[data-home-layout="home-hub-text"] .fh-news-grid>*+*,[data-home-layout="home-hub-text"] .fh-people>*+*{border-left:1px solid var(--np-rule);padding-left:48px}
[data-home-layout="home-hub-text"] .fh-about>:empty,[data-home-layout="home-hub-text"] .fh-about>*:not(:has(p,h2,h3,a)){display:none}
[data-home-layout="home-hub-text"] .fh-programme-grid{gap:0}
[data-home-layout="home-hub-text"] .fh-programme-grid>*{border-left:1px solid var(--np-rule);padding:0 24px}
[data-home-layout="home-hub-text"] .fh-programme-grid>*:first-child{border-left:0;padding-left:0}
[data-home-layout="home-hub-text"] .fh-agenda{border-color:var(--np-rule)}
@media(max-width:760px){
 [data-home-layout="home-hub-text"] .fh-about,[data-home-layout="home-hub-text"] .fh-research,[data-home-layout="home-hub-text"] .fh-news-grid,[data-home-layout="home-hub-text"] .fh-people{grid-template-columns:1fr}
 [data-home-layout="home-hub-text"] .fh-about>*+*,[data-home-layout="home-hub-text"] .fh-research>*+*,[data-home-layout="home-hub-text"] .fh-news-grid>*+*,[data-home-layout="home-hub-text"] .fh-people>*+*,[data-home-layout="home-hub-text"] .fh-programme-grid>*{border-left:0;padding-left:0;border-top:1px solid var(--np-rule);padding-top:20px;margin-top:20px}
}
[data-home-layout="home-hub-text"] .fh-utility{background:var(--np-paper)!important;color:var(--np-ink)!important;border-bottom:1px solid var(--np-rule)}
[data-home-layout="home-hub-text"] .fh-utility *{color:var(--np-ink)!important}
[data-home-layout="home-hub-text"] .fh-about{grid-template-columns:1fr;max-width:780px;margin-left:auto;margin-right:auto}
[data-home-layout="home-hub-text"] .fh-about>*{border-left:0!important;padding-left:0!important;box-shadow:none;outline:0}
[data-home-layout="home-hub-text"] .fh-about>*>*{border:0}
[data-home-layout="home-hub-text"] figure,[data-home-layout="home-hub-text"] figcaption{display:none}
[data-home-layout="home-hub-text"] .fh-research *{color:var(--np-ink)!important;border-color:var(--np-rule)!important}
[data-home-layout="home-hub-text"] .fh-hero [class*="control"],[data-home-layout="home-hub-text"] .fh-hero [class*="dots"],[data-home-layout="home-hub-text"] .fh-hero button[aria-label],[data-home-layout="home-hub-text"] .fh-hero [role="group"]{display:none!important}
[data-home-layout="home-hub-text"] .fh-brand,[data-home-layout="home-hub-text"] .fh-brand>*{border:0!important;padding-left:0!important;margin-left:0!important}
[data-home-layout="home-hub-text"] .fh-hero p{margin-left:auto;margin-right:auto;max-width:56ch;text-align:center}

/* Filter checkboxes: comfortable tap size */
.x-filter input[type=checkbox],.x-filter input[type=radio]{width:20px;height:20px;accent-color:var(--edu-action-primary)}
.x-filter label{display:flex;align-items:center;gap:10px;min-height:32px}

/* Notice box outside its hero (e.g. on the Components page): normal flow, not floated over an image */
.site-main>.x-notice-box{position:static;width:auto;max-width:420px;margin:8px 0}

/* Quick links in a narrow side panel: one column so longer (English) labels are not cut off */
.usage-aside .quicklinks,aside .quicklinks{grid-template-columns:1fr}
.usage-aside .quicklinks button,aside .quicklinks button{padding:14px 18px;align-items:center;gap:12px}

/* Tabs: keep each label on one line and let the row scroll sideways on small screens */
.course-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.course-tabs>*{flex:none;white-space:nowrap}
/* Narrow side panels: label above value, and room around the button */
.usage-aside .facts{grid-template-columns:1fr;row-gap:2px}
.usage-aside .facts dt{margin-top:10px}
.usage-aside .facts+.btn,.usage-aside .facts+button,.usage-aside dl+*{margin-top:18px}
.usage-aside .btn+*,.usage-aside button+*{margin-top:28px}
@media(max-width:600px){.course-tabs{flex-wrap:wrap;overflow-x:visible;gap:0 4px}.course-tabs>*{padding:10px 12px}}
/* Quick links in a side panel: one white list with thin dividers (no grey gap bands) */
.usage-aside .quicklinks,aside .quicklinks{gap:0;background:var(--edu-surface,#fff);border:1px solid var(--edu-border);border-radius:6px;overflow:hidden}
.usage-aside .quicklinks>*,aside .quicklinks>*{border-radius:0;border-bottom:1px solid var(--edu-border);background:transparent}
.usage-aside .quicklinks>*:last-child,aside .quicklinks>*:last-child{border-bottom:0}
.usage-aside .quicklinks>*:hover,aside .quicklinks>*:hover{background:var(--edu-primary-subtle,#eef5f0)}
.usage-aside .quicklinks>*,aside .quicklinks>*{margin:0}
/* One page edge: logo, banner titles and body content share the same left line */
:root{--edu-edge:32px}
@media(max-width:560px){:root,:root[data-direction=two]{--edu-edge:20px}}
.site>.site-header,.site>[class^=header-v]>.site-header,.site>[class^=header-v]>.site-nav{padding-left:var(--edu-edge)!important;padding-right:var(--edu-edge)!important}
.site-main,:root[data-direction=two] .site-main,.specimen-mode .site-main{padding-left:var(--edu-edge);padding-right:var(--edu-edge)}
.x-banner>div,.x-hero-split,.x-dark-band,.site>.x-band,.site>[class^=header-v]~.x-band,.event-poster,.profile-banner,.service-intro,.article-page,.x-campus-banner>div{padding-left:var(--edu-edge);padding-right:var(--edu-edge)}
@media(min-width:561px){.x-hero-overlay .x-hero-copy{left:var(--edu-edge)}}
/* Highlight box (C08): also produced by the Editor's "重點提示框" style */
.edu-callout{background:#fff6d6;border:1px solid #f0d77a;border-left:6px solid #d9a400;border-radius:4px;padding:20px 24px;margin:24px 0;color:var(--edu-text,#1f2a24)}
.edu-callout>:first-child{margin-top:0}.edu-callout>:last-child{margin-bottom:0}.edu-callout h2,.edu-callout h3{font-size:20px;margin:0 0 8px}
.edu-callout--info{background:var(--edu-primary-subtle,#eef4ee);border-color:#cfe0d4;border-left-color:var(--edu-action-primary,#006437)}
/* Article navigation (C18): previous / back to section / next */
/* C18 page-end pager (798691-R37, user directive 2026-11-06): never centred. Two columns: the left item starts at the
   left edge, the right item ends at the right edge. Previous is always left, Next always right; "Back to" takes the
   free side (no Previous: left; no Next: right) and, with both there, its own row below, left-aligned. A lone item:
   Next right, Previous or Back to left. Placement follows which links exist, not their order, so the markup lists
   them in reading order (Previous, Next, then Back to when all three are there) and tab order matches what is seen.
   Empty placeholder spans take no cell. Columns may shrink below their longest word (minmax(0,1fr)): titles wrap at
   spaces inside their own column (798691-R26b). Link text sits on the content edges: the 16px hover padding is pulled
   outward (margin-inline:-16px), and the 48px column gap keeps 16px between hover boxes (798691-R37). */
.article-pager{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:stretch;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--edu-border,#d8e0db)}
.article-pager a{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:break-word;padding:12px 16px;margin-inline:-16px;border-radius:4px;color:var(--edu-text,#1f2a24);text-decoration:none}
.article-pager a:hover{background:var(--edu-primary-subtle,#eef4ee)}.article-pager small{font-size:13px;color:var(--edu-text-muted,#5b685e)}.article-pager span{font-weight:600;color:var(--edu-action-primary,#006437)}
.article-pager>span:empty{display:none}
.article-pager a>span{text-wrap:balance} /* a wrapped title splits evenly: no lone last word (798691-R39c) */
.article-pager>a{grid-row:1;grid-column:1;text-align:left;align-items:flex-start}
.article-pager>.article-pager-next{grid-column:2;text-align:right;align-items:flex-end}
.article-pager>.article-pager-up{grid-row:2;grid-column:1/-1;justify-self:start;max-width:calc(100% + 32px)}
.article-pager:not(:has(>a:not(.article-pager-up,.article-pager-next)))>.article-pager-up{grid-row:1;grid-column:1;justify-self:stretch}
.article-pager:not(:has(>.article-pager-next))>.article-pager-up{grid-row:1;grid-column:2;justify-self:stretch;text-align:right;align-items:flex-end}
.article-pager:not(:has(>a:not(.article-pager-up)))>.article-pager-up{grid-column:1;text-align:left;align-items:flex-start}
/* Phones: the same sides; a lone item takes the whole row (Next still right-aligned), so a short title never wraps
   beside an empty half (798691-R34 item 11). */
@media(max-width:560px){.article-pager{grid-template-columns:repeat(2,minmax(0,auto));justify-content:space-between}.article-pager>a:only-of-type{grid-column:1/-1}}
/* Phones (798691-R39c): columns sized by their titles, so a short title ("About FO") lends its spare width to a long
   one and "FO Organisation Chart" stays on one line; two long titles still split the row evenly. */
/* Highlight vs info: different roles, not just colours */
.edu-callout{position:relative;padding:20px 24px 20px 64px;border-left-width:6px}
.edu-callout::before{content:"!";position:absolute;left:20px;top:20px;width:28px;height:28px;border-radius:50%;background:#d9a400;color:#fff;font:700 16px/28px system-ui,sans-serif;text-align:center}
.edu-callout--info{padding:14px 18px 14px 48px;border-left-width:3px;font-size:14px;line-height:1.6;color:var(--edu-text-muted,#4a5650)}
.edu-callout--info::before{content:"i";left:16px;top:15px;width:20px;height:20px;font:700 12px/20px Georgia,serif;background:var(--edu-action-primary,#006437)}
.edu-callout--info h2,.edu-callout--info h3{font-size:16px;margin-bottom:4px;color:var(--edu-text,#1f2a24)}
.edu-callout--info p,.edu-callout--info li{font-size:14px}
/* Icon sits in its own column and lines up with the first line of text */
.edu-callout{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:baseline;padding:20px 24px}
.edu-callout>*{grid-column:2;min-width:0}
.edu-callout::before{position:static;grid-column:1;grid-row:1;align-self:baseline}
.edu-callout--info{grid-template-columns:20px minmax(0,1fr);column-gap:10px;padding:14px 18px}
.edu-callout--info::before{background:transparent;color:var(--edu-action-primary,#006437);box-shadow:inset 0 0 0 1.5px var(--edu-action-primary,#006437);line-height:20px}
/* Info box steps back behind body text: no fill, hairline bar, grey icon */
.edu-callout--info{background:transparent;border:0;border-left:2px solid #c9d4cd;border-radius:0;padding:4px 0 4px 16px;color:#5b685e}
.edu-callout--info::before{color:#8a958e;box-shadow:inset 0 0 0 1.5px #a9b3ad}

/* Director pass: one signal per box, text-sized icons, headings scaled to the box, 24px rhythm */
.edu-callout{border:0!important;border-left:5px solid #d9a400!important;border-radius:4px;background:#fff6d6;grid-template-columns:20px minmax(0,1fr);column-gap:12px;padding:16px 20px;margin:24px 0}
.edu-callout::before{content:"\200B";color:transparent;width:20px;height:20px;border-radius:0;box-shadow:none;background:#9a7300;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center/20px no-repeat;line-height:20px;font-size:16px;align-self:baseline}
.edu-callout h1,.edu-callout h2,.edu-callout h3,.edu-callout h4{font-size:19px;line-height:1.4;margin:0 0 6px;font-weight:600}
.edu-callout p,.edu-callout li{font-size:16px}
.edu-callout--info{border:0!important;background:transparent;grid-template-columns:18px minmax(0,1fr);column-gap:10px;padding:0}
.edu-callout--info::before{content:"i";-webkit-mask:none;mask:none;background:transparent;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #a9b3ad;color:#8a958e;font:700 11px/18px Georgia,serif;text-align:center}
.edu-callout--info h1,.edu-callout--info h2,.edu-callout--info h3,.edu-callout--info h4{font-size:15px;margin:0 0 2px}
.edu-callout--info p,.edu-callout--info li{font-size:14px}
.edu-callout+*{margin-top:24px}

/* ===== Designs first built for the Finance Office example site (/fo/), now library components.
   FO uses these classes as-is; it only changes colour, images and text. ===== */

/* C17 / B  Section tabs: sibling pages under the banner; one row, arrows only when the tabs overflow (components.js) */
.section-tabs{background:var(--edu-surface,#fff);border-bottom:1px solid var(--edu-border)}
.section-tabs-wrap{position:relative;display:flex;align-items:center;max-width:1320px;margin:0 auto;padding:0 32px}
.section-tabs-inner{flex:1;min-width:0;display:flex;gap:8px;margin:0;padding:24px 0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.section-tabs-inner::-webkit-scrollbar{display:none}
.section-tabs a{flex:none;padding:12px 20px;border:1px solid var(--edu-border);border-radius:4px;font-size:14px;line-height:1.3;color:var(--edu-text);text-decoration:none;white-space:nowrap}
.section-tabs a:hover{border-color:var(--edu-action-primary);color:var(--edu-action-primary)}
.section-tabs a[aria-current]{background:var(--edu-action-primary);border-color:var(--edu-action-primary);color:var(--edu-on-primary,#fff);font-weight:600}
.section-tabs-wrap:after{content:'';position:absolute;top:0;bottom:0;width:72px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.section-tabs-wrap:after{right:32px;background:linear-gradient(270deg,var(--edu-surface,#fff) 40%,transparent)}
.section-tabs-wrap.fade-right:after{opacity:1}
/* While an arrow shows (fade-left / fade-right), the strip keeps clear of it: button width + the 8px tab gap, so no
   tab ever sits under an arrow (798691-R18b). The view always starts on a whole tab, so there is no left fade (the prev
   arrow is the cue); the right fade, after the reserved space, marks the tab cut by the strip's edge. */
.section-tabs-wrap.fade-left .section-tabs-inner{margin-left:48px}.section-tabs-wrap.fade-right .section-tabs-inner{margin-right:48px}
.section-tabs-wrap.fade-right:after{right:80px}
.section-tabs-btn{position:absolute;z-index:2;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--edu-border);border-radius:4px;background:var(--edu-surface,#fff);color:var(--edu-text);cursor:pointer;box-shadow:0 4px 12px rgba(16,43,38,.08)}
.section-tabs-btn[hidden]{display:none}
.section-tabs-btn:hover{border-color:var(--edu-action-primary);color:var(--edu-action-primary)}
.section-tabs-btn .ocio-icon{width:18px;height:18px}
.section-tabs-prev{left:32px}.section-tabs-prev .ocio-icon{transform:rotate(90deg)}
.section-tabs-next{right:32px}.section-tabs-next .ocio-icon{transform:rotate(-90deg)}
@media(max-width:600px){.section-tabs-wrap{padding:0 20px}.section-tabs-inner{padding:16px 0}.section-tabs-prev{left:20px}.section-tabs-wrap:after,.section-tabs-next{right:20px}.section-tabs-btn{width:36px;height:36px}.section-tabs-wrap.fade-left .section-tabs-inner{margin-left:44px}.section-tabs-wrap.fade-right .section-tabs-inner{margin-right:44px}.section-tabs-wrap.fade-right:after{right:64px}}

/* C12 / B  Telephone grid with icons beside a dark details card */
.contact-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.contact-panel-title{margin:0 0 4px;padding:0 0 20px;border:0;border-bottom:2px solid var(--edu-text);font-size:30px;font-weight:600;line-height:1.3;letter-spacing:-.3px;color:var(--edu-text)}
.phone-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:20px 0 0;padding:0}
.phone-list li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 16px;align-items:start;margin:0;padding:22px 12px;border-bottom:1px solid var(--edu-border);border-radius:6px;transition:background .15s}
.phone-list li:hover{background:var(--edu-primary-subtle)}
.phone-ico{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--edu-action-primary);color:var(--edu-on-primary,#fff);font-style:normal}
.phone-ico .ocio-icon{width:20px;height:20px}
.phone-list li>span{font-size:14px;color:var(--edu-text-muted)}
.phone-list li>a{font-size:21px;font-weight:600;color:var(--edu-action-primary);text-decoration:none;white-space:nowrap}
.phone-list li>a:hover{text-decoration:underline}
/* C12 phone table, rows with several numbers (798691-R6a): each number dials on its own; qualifiers stay text. */
.phone-numbers{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px .4em;font-size:14px;color:var(--edu-text-muted)}
.phone-number{white-space:nowrap}
.phone-number>a{font-size:21px;font-weight:600;color:var(--edu-action-primary);text-decoration:none}
.phone-number>a:hover{text-decoration:underline}
.phone-qualifier{font-size:14px;color:var(--edu-text-muted)}
/* A row next to a taller row keeps its name and numbers together as one block, at the top of the row (was centred;
   798691-R34: a short card floating mid-row looked misaligned). */
.phone-list li{align-content:start}  /* top-aligned: a short card beside a tall one no longer floats mid-row (798691-R34) */
@media(max-width:480px){.phone-numbers{flex-direction:column;align-items:flex-start}.phone-sep{display:none}}
.phone-numbers.is-stacked{flex-direction:column;align-items:flex-start}.phone-numbers.is-stacked .phone-sep{display:none}  /* set by components.js when the numbers wrap (798691-R34) */
/* C10 A optional parts (798691-R10): a number before the title, and more than one button (e.g. English / 中文)
   side by side on the right. Additive: rows without them render as before. Below 600px the button or buttons
   go under the title, left-aligned, natural width, 44px tall (798691-R12: one button the same as several). */
/* C10 A rows inside a C09 item (example: service details, 798691-R22) keep their own title colour; the next
   part starts clear of the last row. */
details .file-copy strong{color:var(--edu-text)}
details .file-row+p{margin-top:16px}
.file-num{margin-right:4px;font-weight:400;color:var(--edu-text-muted)}
.file-actions{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@media(max-width:600px){.file-row:has(>.file-actions),.file-row:has(>.btn){flex-wrap:wrap}.file-row>.file-actions,.file-row:has(>.btn)>.file-copy{flex:1 1 100%}.file-row>.file-actions{justify-content:flex-start}.file-actions>.btn,.file-row>.btn{min-height:44px}}
.contact-panel-meta,.page-revised{margin:24px 0 0;font-size:14px;color:var(--edu-text-muted)}
.contact-card{position:sticky;top:24px;overflow:hidden;border-radius:16px;background:color-mix(in srgb,var(--edu-action-primary) 60%,#000);color:#fff}
.contact-card>img{display:block;width:100%;height:200px;object-fit:cover}
.contact-card>div{padding:28px 32px 32px}
.contact-card h2{margin:24px 0 8px;padding:0;border:0;font-size:12px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:color-mix(in srgb,var(--edu-action-primary) 35%,#fff)}
.contact-card h2:first-child{margin-top:0}
.contact-card p{margin:0;font-size:16px;line-height:1.6;color:#fff}
.contact-card a{color:#fff}
.contact-card .facts{margin:0}
.contact-card .facts dt{color:#ffffffb3}
.contact-card .facts dd{margin-bottom:12px;color:#fff}
/* C12 settings (798691-R22): with phone numbers off the card keeps its column width (the right-hand column of the
   default layout: 4fr of 7fr + 4fr), at the start of the row; below 900px nothing changes. The "Contact Us" button
   sits under the card's details. */
@media(min-width:901px){.contact-panel:not(:has(>.contact-panel-main:not([hidden]))){grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.contact-panel:not(:has(>.contact-panel-main:not([hidden])))>.contact-card{position:static}
.contact-card .contact-card-action{margin-top:24px}
@media(max-width:1100px){.phone-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.contact-panel{grid-template-columns:minmax(0,1fr);gap:32px}.contact-card{position:static}}
@media(max-width:600px){.contact-panel-title{font-size:24px}}

/* C12 / C  Closing contact band: brand colour, the page's enquiry lines and a Contact Us button */
.contact-band{background:var(--edu-action-primary);color:var(--edu-on-primary,#fff)}
.contact-band-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;align-items:start;max-width:1320px;margin:0 auto;padding:72px 32px}
.contact-band-label{display:block;margin:0 0 12px;font-size:12px;line-height:1.5;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:#ffffffcc}
.contact-band h2{margin:0 0 28px;font-size:40px;font-weight:600;line-height:1.2;color:#fff}
.contact-band-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.contact-band-lines>:only-child{grid-column:1/-1}  /* one line (e.g. e-mail only): full width, no empty column (798691-R34) */
.contact-band-lines a{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid #ffffff40;color:#fff;text-decoration:none}
.contact-band-lines small{font-size:14px;color:#ffffffcc}
.contact-band-lines strong{font-size:26px;font-weight:600;line-height:1.25}
.contact-band-lines a:hover strong{text-decoration:underline}
@media(max-width:900px){.contact-band-inner{grid-template-columns:minmax(0,1fr);gap:24px;padding:56px 32px}}
@media(max-width:600px){.contact-band-inner{padding:48px 20px}.contact-band h2{font-size:32px}.contact-band-lines{grid-template-columns:minmax(0,1fr)}.contact-band-lines strong{font-size:22px}}

/* C04 / B  Alternating copy / photo panels; the whole panel is one link */
.media-panels{display:grid;gap:24px}
.media-panel{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:stretch;padding:40px;background:var(--edu-primary-subtle);border-radius:0 24px 24px 0;transition:box-shadow .2s}
.media-panel:hover{box-shadow:0 12px 32px rgba(16,43,38,.08)}
.media-panel-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:24px 0 0 24px}
.media-panel-flip .media-panel-img{order:-1}
.media-panel-img{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:12px}
.media-panel-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;margin-bottom:20px}
.media-panel-num{font-size:15px;font-weight:650;letter-spacing:1.2px;color:var(--edu-action-primary)}
.media-panel-head h2{margin:0;padding:0;border:0;font-size:28px;font-weight:600;line-height:1.3;color:var(--edu-text)}
.media-panel-link{color:inherit;text-decoration:none}
.media-panel-link:after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.media-panel-link:focus-visible{outline:none}
.media-panel:hover .media-panel-link{color:var(--edu-action-primary)}
.media-panel:has(.media-panel-link:focus-visible){outline:3px solid var(--edu-action-primary);outline-offset:3px}
.media-panel-go{display:grid;place-items:center;width:48px;height:48px;border-radius:4px;background:var(--edu-action-primary);color:var(--edu-on-primary,#fff);pointer-events:none}
.media-panel-go .ocio-icon{width:18px;height:18px}
.media-panel-list{columns:2;column-gap:32px;list-style:none;margin:0;padding:0;font-size:17px}
.media-panel-list li{break-inside:avoid;display:flex;gap:14px;align-items:flex-start;margin:0;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--edu-action-primary) 10%,var(--edu-border));font-size:16px;line-height:1.45;color:var(--edu-text)}
.media-panel-list li:before{content:'';flex:none;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--edu-action-primary);opacity:.6}
@media(max-width:1100px){.media-panel-list{columns:1}}
@media(max-width:900px){.media-panel,.media-panel-flip{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px;border-radius:0 24px 24px 0}.media-panel-img,.media-panel-flip .media-panel-img{order:-1;min-height:0;height:200px}}
@media(max-width:600px){.media-panel,.media-panel-flip{padding:20px}.media-panel-head h2{font-size:21px}.media-panel-go{width:40px;height:40px}}

/* C04 / C  Tall captioned photo (sticky) beside the content */
.media-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.media-split-photo{position:sticky;top:24px;margin:0;overflow:hidden;border-radius:16px;aspect-ratio:4/5;background:var(--edu-text)}
.media-split-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* Option .media-split--fit (798691-R34): the photo matches the text column's height instead of a fixed 4:5, so a short
   list does not leave empty space under it and a long one is not cut short; phones keep a 16:10 photo. */
.media-split--fit{align-items:stretch}
.media-split--fit .media-split-photo{position:relative;top:auto;aspect-ratio:auto;min-height:280px}
.media-split--fit .media-split-photo img{position:absolute;inset:0}
@media(max-width:900px){.media-split--fit .media-split-photo{aspect-ratio:16/10;min-height:0}}
.media-split-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--edu-text) 90%,transparent) 0%,color-mix(in srgb,var(--edu-text) 40%,transparent) 38%,transparent 65%)}
.media-split-photo figcaption{position:absolute;z-index:1;left:32px;right:32px;bottom:32px;font-size:26px;font-weight:600;line-height:1.3;color:#fff}
.media-split-photo figcaption span{display:block;margin-bottom:10px;font-size:12px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:#ffffffcc}
.media-split-body>*+*{margin-top:24px}
@media(max-width:900px){.media-split{grid-template-columns:minmax(0,1fr);gap:28px}.media-split-photo{position:relative;top:auto;aspect-ratio:16/10}}
@media(max-width:600px){.media-split-photo figcaption{left:20px;right:20px;bottom:20px;font-size:21px}}

/* C02 / B  Statement + ruled points, with a supporting image (sticky) */
.statement-points{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:88px;align-items:start}
.statement-points-head{margin:0 0 20px;font-size:30px;font-weight:600;line-height:1.35;letter-spacing:-.3px;color:var(--edu-text)}
.statement-points .statement-points-lead{margin:0 0 64px;font-size:18px;line-height:1.75;color:var(--edu-text-muted)}
.statement-points-lead strong{font-weight:600;color:var(--edu-text)}
.statement-points-point{margin:0;padding:6px 0 6px 28px;border-left:3px solid var(--edu-action-primary);font-size:16px;line-height:1.75;color:var(--edu-text-muted)}
.statement-points-point+.statement-points-point{margin-top:44px}
.statement-meta{margin:0;font-size:14px;color:var(--edu-text-muted)}
.statement-points .statement-meta{margin-top:56px}
.statement-points-figure{position:sticky;top:140px;margin:0}
.statement-points-figure img{display:block;width:100%;border:1px solid var(--edu-border);border-radius:12px}
.statement-points-figure figcaption{margin-top:12px;font-size:13px;color:var(--edu-text-muted)}
@media(max-width:900px){.statement-points{grid-template-columns:minmax(0,1fr);gap:48px}.statement-points-figure{position:static;max-width:480px}}
@media(max-width:600px){.statement-points-head{font-size:24px}.statement-points-lead{font-size:17px}.statement-points-point{padding-left:20px}.statement-points-point+.statement-points-point{margin-top:32px}}

/* C02 / C  Sticky statement beside numbered tiles (compact numbered rows on phones) */
.statement-tiles{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start;margin:0 0 24px}
.statement-tiles-group>.statement-tiles+.statement-tiles{margin-top:72px;padding-top:56px;border-top:1px solid var(--edu-border)}
/* Sticky offsets (798691-R16b): --edu-header-offset is the sticky site header's height + 24px, set by the
   header script; 120px where a page has no sticky header. */
.statement-tiles-head{position:sticky;top:var(--edu-header-offset,120px)}
.statement-tiles-head:before{content:'';display:block;width:40px;height:4px;margin-bottom:20px;border-radius:2px;background:var(--edu-action-primary)}
.statement-tiles-head p,.statement-tiles-head h2{margin:0;padding:0;border:0;font-size:24px;font-weight:600;line-height:1.45;letter-spacing:-.2px;color:var(--edu-text)}
.statement-tiles-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.statement-tiles-list li{display:flex;flex-direction:column;gap:14px;margin:0;padding:24px;border:1px solid var(--edu-border);border-radius:12px;background:var(--edu-surface,#fff);transition:border-color .15s,background .15s}
.statement-tiles-list li:hover{border-color:var(--edu-action-primary);background:var(--edu-primary-subtle)}
.statement-tiles-list span{font-size:28px;font-weight:600;line-height:1;color:var(--edu-action-primary)}
.statement-tiles-list p{margin:0;font-size:16px;line-height:1.6;color:var(--edu-text)}
.statement-tiles-note{margin-top:28px;padding:28px 32px;border-radius:12px;background:var(--edu-primary-subtle)}
.statement-tiles-note p{margin:0;font-size:16px;line-height:1.7;color:var(--edu-text)}
.statement-tiles-note .statement-meta{margin-top:12px;font-size:14px;color:var(--edu-text-muted)}
@media(max-width:1000px){.statement-tiles{grid-template-columns:minmax(0,1fr);gap:24px}.statement-tiles-head{position:static}}
@media(max-width:600px){.statement-tiles-head p,.statement-tiles-head h2{font-size:20px}.statement-tiles-list{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--edu-border)}.statement-tiles-list li{flex-direction:row;align-items:baseline;gap:16px;padding:16px 4px;border:0;border-bottom:1px solid var(--edu-border);border-radius:0;background:none}.statement-tiles-list li:hover{background:none}.statement-tiles-list span{flex:none;width:28px;font-size:15px}.statement-tiles-list p{font-size:15px}.statement-tiles-note{padding:22px 20px}}

/* C13 / B  Deadline cards: the closing date leads; the rule that applies sits in a side column */
.deadline-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.deadline-kicker{margin:0 0 20px;padding:0;border:0;font-size:12px;font-weight:650;line-height:18px;letter-spacing:1.8px;text-transform:uppercase;color:var(--edu-action-primary)}
.deadline-card{display:grid;grid-template-columns:180px minmax(0,1fr);border:1px solid var(--edu-border);border-radius:12px;overflow:hidden;background:var(--edu-surface,#fff)}
.deadline-card+.deadline-card{margin-top:20px}
.deadline-card-date{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:28px 24px;background:var(--edu-action-primary);color:var(--edu-on-primary,#fff)}
.deadline-card-date small{font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:#ffffffcc}
.deadline-card-date strong{font-size:24px;font-weight:600;line-height:1.25}
.deadline-card-body{padding:28px 32px}
.deadline-card-body h3{margin:12px 0 20px;font-size:21px;font-weight:600;line-height:1.45;color:var(--edu-text)}
.deadline-card-ref{display:inline-flex;gap:8px;margin:0 0 12px;padding:4px 10px;border:1px solid var(--edu-border);border-radius:4px;font-size:13px;font-weight:600;color:var(--edu-text)}
.deadline-card-ref span{font-weight:400;color:var(--edu-text-muted)}
.deadline-card-contact{padding-top:16px;border-top:1px solid var(--edu-border)}
.deadline-card-contact small{display:block;margin-bottom:6px;font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:var(--edu-text-muted)}
.deadline-card-contact p{margin:0;font-size:15px;line-height:1.6;color:var(--edu-text)}
.deadline-meta{margin:24px 0 0;font-size:14px;color:var(--edu-text-muted)}
.deadline-aside{position:sticky;top:24px;display:flex;flex-direction:column;border:1px solid var(--edu-border);border-radius:12px;overflow:hidden;background:var(--edu-surface,#fff)}
.deadline-rule{padding:24px 24px 22px;background:var(--edu-warning-surface)}
.deadline-rule .ocio-icon{display:block;width:26px;height:26px;margin-bottom:14px;color:var(--edu-warning)}
.deadline-rule p{margin:0;font-size:16px;line-height:1.65;color:var(--edu-text)}
.deadline-rule strong{font-weight:650;color:color-mix(in srgb,var(--edu-warning) 75%,#000);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--edu-warning) 30%,var(--edu-warning-surface)) 62%)}
.deadline-aside>.deadline-note{margin:0;padding:20px 24px 24px;font-size:16px;line-height:1.7;color:var(--edu-text-muted)}
@media(min-width:1001px){.deadline-aside{margin-top:38px;top:var(--edu-header-offset,120px)}}
@media(max-width:1000px){.deadline-layout{grid-template-columns:minmax(0,1fr);gap:32px}.deadline-aside{position:static;order:-1}}
@media(max-width:600px){.deadline-card{grid-template-columns:minmax(0,1fr)}.deadline-card-date{flex-direction:row;align-items:baseline;justify-content:space-between;padding:16px 20px}.deadline-card-date strong{font-size:19px}.deadline-card-body{padding:22px 20px}.deadline-card-body h3{font-size:18px}}

/* C20 / B  Document viewer: a framed poster / map that opens full screen; click to zoom, Esc to close (components.js) */
.doc-viewer{display:block;margin:0;padding:28px;border-radius:20px;background:var(--edu-primary-subtle)}
.doc-viewer a{position:relative;display:block;cursor:zoom-in}
.doc-viewer img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 14px 34px rgba(16,43,38,.12)}
.doc-viewer-hint{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:var(--edu-action-primary);color:var(--edu-on-primary,#fff);box-shadow:0 6px 16px rgba(16,43,38,.2);transition:transform .15s}
.doc-viewer a:hover .doc-viewer-hint{transform:scale(1.08)}
.doc-viewer-hint .ocio-icon{width:20px;height:20px}
.doc-lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:color-mix(in srgb,var(--edu-text) 45%,#000)}
.doc-lightbox::backdrop{background:#0d1a13cc}
.doc-lightbox-stage{box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;padding:56px 24px 24px;overflow:auto}
.doc-lightbox-stage img{max-width:100%;max-height:calc(100dvh - 80px);border-radius:8px;background:#fff;cursor:zoom-in}
.doc-lightbox-stage.is-zoomed{place-items:start}
.doc-lightbox-stage.is-zoomed img{width:2400px;max-width:none;max-height:none;cursor:zoom-out}
.doc-lightbox-close{position:fixed;top:14px;right:18px;z-index:2;width:44px;height:44px;border:0;border-radius:4px;background:#fff;color:var(--edu-text);font-size:28px;line-height:1;cursor:pointer}
@media(max-width:600px){.doc-viewer{padding:14px;border-radius:14px}}

/* C21 / B  Vision statement: photo, the main sentence with key phrases emphasised, a supporting sentence */
.vision-statement{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.vision-statement>img{width:100%;height:440px;object-fit:cover;border-radius:16px}
.vision-statement-copy{display:flex;flex-direction:column;gap:12px;height:100%}
.vision-statement-copy .vision-statement-label{display:block;margin:0 0 20px;font-size:18px;line-height:1.65;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:var(--edu-text-muted)}
.vision-statement-copy p{margin:0;font-size:18px;line-height:1.65;color:var(--edu-text)}
.vision-statement-copy strong{font-weight:600;color:var(--edu-text)}
.vision-statement-main strong{color:var(--edu-action-primary)}
.vision-statement-sub{padding-top:28px;border-top:1px solid var(--edu-border)}
@media(max-width:900px){.vision-statement{grid-template-columns:minmax(0,1fr);gap:32px}.vision-statement>img{height:280px}}
/* Card previews in the catalogue sit straight on the tile: no page background behind the card */
html:has(.specimen-mode[data-kind=card]),.specimen-mode[data-kind=card]{background:transparent}
.specimen-mode[data-kind=card] .specimen-pad{padding:0}

/* C06 / A  Quick links as real links (sites use <a>; the specimen uses <button>) */
.quicklinks a{display:flex;justify-content:space-between;gap:16px;padding:22px;background:var(--edu-surface,#fff);color:var(--edu-action-primary);text-decoration:none}
.quicklinks a:hover{background:var(--edu-primary-subtle)}
.quicklinks a:focus-visible{outline:2px solid var(--edu-action-primary);outline-offset:-2px}
/* C06 rows with a visible domain (external links, 798691-R5): the domain sits on its own line under the label,
   left-aligned with it, and the icon stays top-right; the same at every width, so wrapped labels stay aligned. */
.quicklinks a:has(>.link-meta){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start}
.quicklinks a:has(>.link-meta)>.link-meta{grid-column:1;grid-row:2;justify-self:start;margin:4px 0 0}
.quicklinks a:has(>.link-meta)>.link-icon{grid-column:2;grid-row:1;margin:.2em 0 0}
@media(max-width:700px){.quicklinks:has(a){grid-template-columns:minmax(0,1fr)}}

/* C24 / B  Image carousel: banner images with a caption; previous / next, count and dots; no autoplay (components.js) */
.image-carousel{position:relative}
.image-carousel-track{display:grid}
.image-carousel-slide{grid-area:1/1;display:block;margin:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.image-carousel-slide.is-on{opacity:1;visibility:visible;transition:opacity .3s}
.image-carousel-slide img{display:block;width:100%;height:auto;aspect-ratio:var(--carousel-ratio,15/4);object-fit:cover;border-radius:12px;background:var(--edu-surface-muted)}
.image-carousel-slide figcaption{margin-top:12px;font-size:15px;line-height:1.5;color:var(--edu-text)}
.image-carousel-slide a{color:inherit;text-decoration:none}
.image-carousel-slide a:hover figcaption,.image-carousel-slide a:focus-visible figcaption{color:var(--edu-action-primary);text-decoration:underline}
.image-carousel-bar{display:flex;align-items:center;gap:16px;margin-top:16px}
.image-carousel-dots{display:flex;flex-wrap:wrap;gap:8px;margin-right:auto}
.image-carousel-dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.image-carousel-dots button::before{content:'';width:18px;height:4px;border-radius:2px;background:var(--edu-border-control,#78877d);opacity:.45}
.image-carousel-dots button[aria-current=true]::before{opacity:1;background:var(--edu-action-primary)}
.image-carousel-count{font-size:13px;color:var(--edu-text-muted);font-variant-numeric:tabular-nums}
.image-carousel-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--edu-border);border-radius:4px;background:var(--edu-surface,#fff);color:var(--edu-text);cursor:pointer}
.image-carousel-btn:hover{border-color:var(--edu-action-primary);color:var(--edu-action-primary)}
.image-carousel-btn .ocio-icon{width:18px;height:18px}
.image-carousel-prev .ocio-icon{transform:rotate(90deg)}
.image-carousel-next .ocio-icon{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.image-carousel-slide,.image-carousel-slide.is-on{transition:none}}

/* C02 / A  Images inside rich text: small images float beside the text, large ones take the column */
:where(.rich) img{max-width:100%;height:auto}  /* lowest specificity: component image rules always win */
.rich img[data-float=right]{float:right;max-width:min(40%,280px);margin:4px 0 16px 24px}
.rich img[data-float=left]{float:left;max-width:min(40%,280px);margin:4px 24px 16px 0}
.rich::after{content:'';display:table;clear:both}
.rich-figure{margin:24px 0}
.rich-figure img{display:block;max-width:100%;height:auto;border-radius:8px}
@media(max-width:600px){.rich img[data-float]{float:none;display:block;margin:0 0 16px}}
.rich img[data-inline]{display:inline-block;width:auto;height:1.1em;max-width:none;margin:0 0 0 6px;vertical-align:-.15em;float:none}

/* C26  Chatbot floating button. Fixed bottom-right, small but easy to spot (96px; 72px on phones), white round icon.
   The robot artwork is shown whole (no crop, no circle behind it). A: icon only (needs aria-label). B: --label adds a short text pill. C: --greet adds a dismissible greeting bubble. */
.chatbot-fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.chatbot-fab>*{pointer-events:auto}
.chatbot-fab-btn{display:inline-flex;align-items:center;gap:10px;border-radius:16px;text-decoration:none;color:var(--edu-text,#1f2a24);transition:transform .18s ease-out,box-shadow .18s ease-out}
.chatbot-fab-icon{display:block;flex:none;width:96px;height:96px}
.chatbot-fab-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(25,45,35,.22))}
.chatbot-fab-btn:hover{transform:translateY(-2px)}
.chatbot-fab-btn:hover .chatbot-fab-icon img{filter:drop-shadow(0 10px 14px rgba(25,45,35,.28))}
.chatbot-fab-btn:active{transform:scale(.97)}
.chatbot-fab-btn:focus-visible{outline:3px solid var(--edu-action-primary,#006633);outline-offset:3px}
.chatbot-fab--label .chatbot-fab-btn{padding:4px 18px 4px 4px;background:#fff;border:1px solid rgba(25,45,35,.12);box-shadow:0 6px 18px rgba(25,45,35,.16)}
.chatbot-fab--label .chatbot-fab-icon{width:56px;height:56px}
.chatbot-fab--label .chatbot-fab-icon img{filter:none}
.chatbot-fab-text{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap}
.chatbot-fab-bubble{position:relative;display:flex;align-items:center;gap:4px;max-width:260px;margin:0;padding:10px 4px 10px 14px;border-radius:14px 14px 4px 14px;background:#fff;border:1px solid rgba(25,45,35,.12);box-shadow:0 8px 22px rgba(25,45,35,.14);font-size:14px;line-height:1.45;color:var(--edu-text,#1f2a24)}
.chatbot-fab-close{flex:none;width:32px;height:32px;margin:-6px 0;border:0;border-radius:50%;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.chatbot-fab-close:hover{background:rgba(25,45,35,.08)}
.chatbot-fab-close:focus-visible{outline:2px solid var(--edu-action-primary,#006633)}
.chatbot-fab-bubble[hidden]{display:none}
@media (max-width:600px){.chatbot-fab{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}.chatbot-fab-icon{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){.chatbot-fab-btn{transition:none}.chatbot-fab-btn:hover{transform:none}}
@media print{.chatbot-fab{display:none}}
/* Library preview only: a mock page so the fixed button is seen in its corner. */
.fab-stage{position:relative;min-height:280px;padding:28px;border-radius:12px;background:var(--edu-surface-muted,#f3f5f3);overflow:hidden}
.fab-stage .chatbot-fab{position:absolute;right:20px;bottom:20px}
.fab-stage-page{display:grid;gap:12px;max-width:420px}
.fab-stage-page span{display:block;height:12px;border-radius:6px;background:rgba(25,45,35,.1)}
.fab-stage-page span:first-child{width:60%;height:20px}
.fab-stage-page span:last-child{width:80%}

/* C04 (A) image + text: options for long content pages. --flip puts the image on the right (alternate sections
   left / right); --top aligns to the top and keeps the image in view beside long text. Inside rich text the block
   gets section spacing. On one column the image always comes first. */
.split-content--flip>img:first-child{order:2}
.split-content--top{align-items:start}
.split-content--top>img{position:sticky;top:96px}
:where(.rich) .split-content{grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin:48px 0;gap:48px}
:where(.rich) .split-content--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
:where(.rich) .split-content:first-child{margin-top:0}
:where(.rich) .split-content>img{border-radius:12px;aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
:where(.rich) .split-content>div>:is(h2,h3):first-child{margin-top:0}
@media(max-width:900px){:where(.rich) .split-content,:where(.rich) .split-content--flip{grid-template-columns:1fr;gap:24px;margin:36px 0}.split-content--flip>img:first-child{order:0}.split-content--top>img{position:static}}

/* C27 Date and C28 Weather (798691-R6b). Rendered by components.js; hidden until they have content. */
.edu-date time{font-variant-numeric:tabular-nums}
.edu-date-tile{display:inline-grid;justify-items:center;min-width:132px;padding:16px 20px;border:1px solid var(--edu-border);border-radius:8px;background:var(--edu-surface,#fff);text-align:center}
.edu-date-day{font-size:48px;font-weight:600;line-height:1;color:var(--edu-action-primary)}
.edu-date-month{margin-top:8px;font-size:14px;font-weight:600;color:var(--edu-text)}
.edu-date-weekday{font-size:13px;color:var(--edu-text-muted)}
.edu-date-label{display:block;font-size:12px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--edu-text-muted)}
.edu-date-label+time{display:block;margin-top:4px;font-size:18px;font-weight:600;line-height:1.4;color:var(--edu-text)}
.edu-weather-now{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;color:var(--edu-text)}
.edu-weather-icon,.edu-weather-alert-icon{display:inline-block;flex:none;width:1.4em;height:1.4em;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.edu-weather-icon{color:var(--edu-action-primary)}
.edu-weather-temp{font-weight:600;font-variant-numeric:tabular-nums}
.edu-weather-place{color:var(--edu-text-muted)}
.edu-weather-source{display:grid;justify-items:start;gap:2px;margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--edu-text-muted)}
/* Update time left, source at the right end when both fit (798691-R13, R14); bounded to design B's card width
   (380px) so the source stays near the weather in wide containers. A wrapped source starts at the left under the time. */
/* C28 time and source row: "Updated hh:mm" left, "Source: HKO ↗" at the panel's right edge at every width (798691-R36);
   when both can't fit, the source drops to its own line, still on the right. */
.edu-weather-meta{display:flex;flex-wrap:wrap;justify-content:space-between;justify-self:stretch;gap:0 12px}
.edu-weather-meta>a{margin-left:auto}
.edu-weather-meta>*{white-space:nowrap}
.edu-weather-source a{color:inherit;text-decoration:underline}
.edu-weather-source a:hover,.edu-weather-source a:focus-visible{color:var(--edu-link,var(--edu-action-primary))}
.edu-weather-warnings{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.edu-weather-warnings li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--edu-text)}
.edu-weather-alert-icon{width:1.2em;height:1.2em;color:var(--edu-warning,#8A5700)}
.edu-weather-card{display:grid;gap:4px;max-width:380px;padding:20px 24px;border:1px solid var(--edu-border);border-radius:8px;background:var(--edu-surface,#fff)}
.edu-weather-card .edu-weather-now{gap:8px 14px}
.edu-weather-card .edu-weather-icon{width:44px;height:44px}
.edu-weather-card .edu-weather-temp{font-size:36px;line-height:1}
.edu-weather-card .edu-weather-text{flex-basis:100%;order:3;font-weight:600}
.edu-weather-card .edu-weather-place{order:4}
.edu-weather-band{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;padding:12px 16px;border-left:4px solid var(--edu-warning,#8A5700);background:var(--edu-warning-surface,#FFF6E5);color:var(--edu-text)}
.edu-weather-band p{margin:0;font-weight:600}
/* The "Today" panel: date (C) and weather (C) together. */
.edu-today{display:grid;align-content:start;gap:18px;padding:24px;border-top:3px solid var(--edu-action-primary);background:var(--edu-surface-muted)}
/* Compact Today block at the very top of C12's info card (電話表＋資料卡): date and weather lines in the card's
   dark styling, small type, no separators. Hidden (and taking no space) without script. */
.contact-card>.edu-today{gap:2px;padding:16px 32px 14px;border:0;background:none;font-size:14px;line-height:1.5}
.contact-card .edu-weather-now{gap:2px 8px;font-size:14px}
.contact-card .edu-weather-warnings{margin:4px 0 0;gap:2px}
.contact-card .edu-weather-source{margin:4px 0 0;font-size:12px;line-height:1.5}
.contact-card .edu-date,.contact-card .edu-date-label+time,.contact-card .edu-weather-now,.contact-card .edu-weather-warnings li,.contact-card .edu-weather-band{color:#fff}
.contact-card .edu-weather-icon,.contact-card .edu-weather-alert-icon{color:#fff}
.contact-card .edu-weather-place,.contact-card .edu-weather-source{color:#ffffffcc}
.contact-card .edu-weather-source a:hover,.contact-card .edu-weather-source a:focus-visible{color:#fff}
.contact-card .edu-weather-band{background:#ffffff1a;border-left-color:#fff}

/* C05 text list (editorial-list) on phones (798691-R6a): the number goes small above the tag, top-aligned,
   so the title and text use the full width; the arrow (when present) stays at the right. */
@media(max-width:480px){.editorial-list>div{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start}.editorial-list .list-number{grid-column:1/-1;font-size:14px;line-height:1.4}.editorial-list h3{margin-top:8px}}

/* C08 / F  Notice popup (798691-R23, moved from the Finance Office site unchanged): a notice that opens once per
   browser session (or on every load without a storage key), with a corner button to reopen it. Script: components.js.
   Setting: data-reopen-compact on the reopen button shows it as a 44px icon button on phones (label kept for screen
   readers). Colours: the Theme One shell tokens. */
.notice-popup,.notice-popup-reopen{--notice-ink:#233129;--notice-line:#d8e0db;--notice-muted:#5b685e}
/* Library preview: the popup in its stage (sites show it as a modal). */
.notice-stage{min-height:460px}.notice-stage .notice-popup{position:absolute;inset:40px auto auto 50%;transform:translateX(-50%);max-width:calc(100% - 32px);margin:0}
.notice-popup .notice-popup-ref{font-size:12px;font-weight:650;letter-spacing:1.2px;text-transform:uppercase;color:var(--notice-muted)}
.notice-popup .notice-popup-title{font-size:18px;font-weight:600;line-height:1.5;color:var(--notice-ink)}
.notice-popup .ocio-button{margin-top:12px}
/* Popup body: kicker > title > key facts > action */
.notice-popup{width:600px;border:0;border-radius:8px;box-shadow:0 24px 60px rgba(16,32,23,.25)}
.notice-popup-head{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 0}
.notice-popup-kicker{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:var(--edu-action-primary)}
.notice-popup-kicker .ocio-icon{width:16px;height:16px}
.notice-popup-close{display:grid;place-items:center;width:40px;height:40px;margin-right:-8px;padding:0;border:0;border-radius:4px;background:none;font-size:26px;line-height:1;color:var(--notice-muted);cursor:pointer}
.notice-popup-close:hover{background:var(--ocio-paper,#f3f5f3);color:var(--notice-ink)}
.notice-popup-body{padding:16px 28px 24px}
.notice-popup-ref{display:inline-flex;gap:8px;margin:0 0 12px;padding:4px 10px;border:1px solid var(--notice-line);border-radius:4px;font-size:13px;font-weight:600;color:var(--notice-ink)}
.notice-popup-ref span{font-weight:400;color:var(--notice-muted)}
.notice-popup .notice-popup-title{margin:0 0 24px;font-size:22px;font-weight:600;line-height:1.4;letter-spacing:-.2px;color:var(--notice-ink)}
.notice-popup-facts{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;margin:0;padding-top:20px;border-top:1px solid var(--notice-line)}
.notice-popup-facts dt{margin-bottom:6px;font-size:11px;font-weight:650;letter-spacing:1.2px;text-transform:uppercase;color:var(--notice-muted)}
.notice-popup-facts dd{margin:0;font-size:14px;line-height:1.6;color:var(--notice-ink)}
.notice-popup-facts .notice-popup-date{font-size:18px;font-weight:650;color:var(--edu-action-primary)}
.notice-popup-foot{display:flex;justify-content:flex-end;padding:16px 28px;background:var(--ocio-paper,#f6f8f6);border-top:1px solid var(--notice-line)}
@media(max-width:600px){.notice-popup-facts{grid-template-columns:1fr}.notice-popup-head,.notice-popup-body,.notice-popup-foot{padding-left:20px;padding-right:20px}.notice-popup .notice-popup-title{font-size:19px}.notice-popup-foot .ocio-button{width:100%;justify-content:center}}
.notice-popup:focus{outline:none}
/* Corner button to reopen the notice after it is closed */
.notice-popup-reopen{position:fixed;z-index:35;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--notice-line);border-radius:4px;background:#fff;color:var(--notice-ink);font:inherit;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(16,32,23,.14);cursor:pointer}
.notice-popup-reopen .ocio-icon{width:16px;height:16px;color:var(--edu-action-primary)}
.notice-popup-reopen:hover{border-color:var(--edu-action-primary);color:var(--edu-action-primary)}
.notice-popup-reopen[hidden]{display:none}
@media(max-width:600px){.notice-popup-reopen{left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));font-size:13px;padding:8px 12px}}
@media(max-width:600px){.notice-popup-reopen[data-reopen-compact]{width:44px;height:44px;padding:0;justify-content:center}
.notice-popup-reopen[data-reopen-compact] .ocio-icon{width:20px;height:20px}
.notice-popup-reopen[data-reopen-compact] .notice-popup-reopen-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Facts list (dl.facts, e.g. C12 contact card, org chart details): each small label sits on the baseline of its
   value's first line (798691-R33b A2), instead of ~4px above it. */
.facts{align-items:baseline}

/* C11 data table, "stack on phones" option (798691-R33): add .table-stack to .table-wrap. Desktop is unchanged;
   below 600px each row becomes its own block, the row header on top and every cell labelled with its column
   (td[data-label]), so a 3–4 column table never scrolls sideways on a phone. */
.table-stack caption{font-size:14px;font-weight:600;color:var(--edu-text)}
.table-stack td,.table-stack th{font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .table-stack table,.table-stack tbody,.table-stack tr,.table-stack th[scope=row],.table-stack td{display:block;width:100%}
  .table-stack table{overflow:visible}
  .table-stack caption{display:block;width:100%}
  .table-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .table-stack tr{padding:14px 0;border-bottom:1px solid var(--edu-border)}
  .table-stack th[scope=row],.table-stack td{padding:3px 0;border:0;background:none}
  .table-stack th[scope=row]{font-size:17px;font-weight:600}
  .table-stack td[data-label]{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:12px}
  .table-stack td[data-label]::before{content:attr(data-label);font-size:14px;color:var(--edu-text-muted)}
  .table-stack td:empty{display:none}
}

/* Login pop-up (798691-R33; user directive 2026-11-05: every login is a simple pop-up, never a separate page).
   Compact and centred like the login card: at most 420px wide, never stretched to the content width. */
.login-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overscroll-behavior:contain;padding:0;border:0;border-radius:12px;background:var(--edu-surface,#fff);color:var(--edu-text);box-shadow:0 24px 60px rgba(16,32,23,.25)}
.login-dialog::backdrop{background:rgba(16,32,23,.5)}
.login-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 24px 0}
.login-dialog-head h2{margin:0;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.2px}
.login-dialog-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-10px -12px 0 0;padding:0;border:0;border-radius:6px;background:none;font-size:26px;line-height:1;color:var(--edu-text-muted);cursor:pointer}
.login-dialog-close:hover{background:var(--edu-surface-muted)}
.login-dialog-close:focus-visible{outline:2px solid var(--edu-action-primary);outline-offset:2px}
.login-dialog-body{padding:6px 24px 24px}
.login-dialog-body>p{margin:0;font-size:15px;line-height:1.55;color:var(--edu-text-muted)}
.login-form{display:grid;gap:16px;margin-top:20px}
.login-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--edu-text)}
.login-form input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--edu-border-control);border-radius:6px;font:inherit;font-weight:400;color:inherit;background:var(--edu-surface,#fff)}
.login-form input:focus-visible{outline:2px solid var(--edu-action-primary);outline-offset:1px}
.login-form button[type=submit]{width:100%;min-height:48px;justify-content:center;margin-top:4px;cursor:pointer}
.login-dialog-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--edu-border);font-size:13px;text-align:center;color:var(--edu-text-muted)}

/* C20 Document viewer, PDF option (798691-R33b): a PDF drawn in the page (PDF.js), with zoom out / in, fit width,
   full screen and Download. Works on phones, where an <iframe> PDF does not render. Behaviour: components.js. */
.pdf-viewer{display:flex;flex-direction:column;border:1px solid var(--edu-border);border-radius:8px;background:var(--edu-surface-muted);overflow:hidden}
.pdf-viewer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--edu-border);background:var(--edu-surface,#fff)}
.pdf-viewer-bar button{touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--edu-border-control);border-radius:4px;background:var(--edu-surface,#fff);color:var(--edu-text);font:inherit;font-size:14px;cursor:pointer}
.pdf-viewer-bar button:hover{border-color:var(--edu-action-primary);color:var(--edu-action-primary)}
.pdf-viewer-bar button:focus-visible{outline:2px solid var(--edu-focus-ring,var(--edu-action-primary));outline-offset:2px}
.pdf-viewer-bar button:disabled{opacity:.45;cursor:default}
.pdf-viewer-bar button[aria-label]{font-size:20px;line-height:1}
.pdf-viewer-zoom{min-width:3.5em;font-size:14px;text-align:center;font-variant-numeric:tabular-nums;color:var(--edu-text-muted)}
.pdf-viewer-download{margin-left:auto}
.pdf-viewer-pages{height:min(72vh,680px);overflow:auto;padding:16px;overscroll-behavior:contain}
.pdf-viewer-pages canvas{display:block;max-width:none;margin:0 auto 16px;background:#fff;box-shadow:0 1px 4px rgba(16,32,23,.14)}
.pdf-viewer-pages canvas:last-child{margin-bottom:0}
.pdf-viewer-status{margin:24px auto;max-width:36em;text-align:center;color:var(--edu-text-muted)}
.pdf-viewer:fullscreen,.pdf-viewer.is-full{position:fixed;inset:0;z-index:1000;border:0;border-radius:0}
.pdf-viewer:fullscreen .pdf-viewer-pages,.pdf-viewer.is-full .pdf-viewer-pages{flex:1;height:auto}
html.pdf-viewer-locked,html.pdf-viewer-locked body{overflow:hidden}
/* phones: one deliberate two-row toolbar. Row 1: zoom out / % / zoom in; row 2: Fit width / Full screen / Download,
   equal widths (798691-R33b A4). */
@media(max-width:600px){
  .pdf-viewer-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:8px}
  .pdf-viewer-bar>*{min-width:0}
  .pdf-viewer-bar button{padding:0 6px}
  .pdf-viewer-bar>[data-pdf-zoom-out]{grid-column:1/3}.pdf-viewer-zoom{grid-column:3/5}.pdf-viewer-bar>[data-pdf-zoom-in]{grid-column:5/7}
  .pdf-viewer-bar>[data-pdf-fit],.pdf-viewer-bar>[data-pdf-full],.pdf-viewer-download{grid-column:span 2}
  .pdf-viewer-bar .pdf-viewer-download{margin-left:0;justify-content:center;min-height:44px;padding:0 6px;white-space:nowrap}
  /* the PDF icon shows the type; the visible "PDF" text moves to screen readers only so Download fits its third */
  .pdf-viewer-bar .pdf-viewer-download .link-meta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pdf-viewer-pages{padding:8px;height:min(64vh,520px)}
}

/* Headings on Theme 1 sites: lines of balanced length, so a heading never ends on one orphan word (798691-R34). */
.site :is(h1,h2,h3){text-wrap:balance}

/* C06 B compact links: a long label wraps at least 12px before its arrow; the arrow never shrinks (798691-R35). */
.compact-links>a>b{flex:none}
/* Inner-page banner setting "compact, no photo" (inner-banner--plain, 798691-R38): on the site's inner banner
   (FO .fo-inner-banner, library/OCIO .shell-inner-banner) it drops the photo, overlay and eyebrow and shows a slim
   light-green band with breadcrumb + H1 only, ~160px on desktop and ~120px on phones; a title that wraps grows it.
   One definition for every site: the class is repeated so it outranks each site's photo-banner rules, whatever the
   stylesheet order. */
.inner-banner--plain.inner-banner--plain.inner-banner--plain{min-height:0;align-items:center;background:var(--edu-primary-subtle,#e8f1ec);color:var(--edu-text,#1f2a24)}
.inner-banner--plain.inner-banner--plain.inner-banner--plain>img,.inner-banner--plain.inner-banner--plain.inner-banner--plain::after{display:none}
.inner-banner--plain.inner-banner--plain.inner-banner--plain>div{padding-top:40px;padding-bottom:40px}
.inner-banner--plain-sample>div{padding-left:32px;padding-right:32px}
.inner-banner--plain.inner-banner--plain.inner-banner--plain .breadcrumb{margin:0 0 8px;font-size:14px;line-height:20px;color:var(--edu-text-muted,#5b685e)}
.inner-banner--plain.inner-banner--plain.inner-banner--plain .breadcrumb a{color:var(--edu-action-primary,#006437)}
.inner-banner--plain.inner-banner--plain.inner-banner--plain .breadcrumb [aria-current]{color:var(--edu-text,#1f2a24)}
.inner-banner--plain.inner-banner--plain.inner-banner--plain .ocio-label{display:none}
.inner-banner--plain.inner-banner--plain.inner-banner--plain :is(h1,.ocio-heading){margin:0;font-size:40px;line-height:1.3;color:var(--edu-text,#1f2a24)}
@media(max-width:600px){
 .inner-banner--plain.inner-banner--plain.inner-banner--plain>div{padding-top:30px;padding-bottom:30px}
 .inner-banner--plain.inner-banner--plain.inner-banner--plain .breadcrumb{margin-bottom:6px;font-size:13px;line-height:18px}
 .inner-banner--plain.inner-banner--plain.inner-banner--plain :is(h1,.ocio-heading){font-size:28px;line-height:1.3}
}