/* Theme 2 site shell, Kobe style (requests 1105-T2d, 1105-T2e): library option data-shell="kobe" on <html>.
   Theme 2's style of the site header, inner banner and footer, following kobe-wu.ac.jp, on EdUHK brand colours and
   fonts. Used by every OCIO page and /ocio/home-demo/; the homepage sections add kobe-home.css. FO and Theme 1 keep
   the default shell (site-shell.css), which Kobe pages do not load.
   Kobe devices: orange star + Chinese eyebrow over a Jost 300 English heading, 46px / 26px round arrows, small square
   tag chips, big quarter-circle corners, one-corner-radius cards and images, full-bleed colour bands, a
   transparent-to-white two-row header, a right-edge rail.
   Not used here (FO look): white 12px-radius bordered cards on grey, the inset floating header, pill chip rows.
   Radius system: 0 for buttons, fields, tiles and chips (2px); one big corner (40px cards and images, 350px / 120px
   bands); 50% for round arrows and icon discs. Orange #F06423 is only the star mark.
   White text only on #006437 or darker, or on a tint measured to give 4.5:1.
   Bands: every band pads itself (--kd-sec: 104px desktop, 72px phone); no margin between two bands shows page white. */
/* Noto Sans TC draws curly quotes and the ellipsis full-width (CJK metrics), so "CIO's" read "CIO' s". These
   characters come from a Latin system face instead (unicode-range: nothing else changes). */
@font-face{font-family:"KD Latin Punct";src:local("Helvetica Neue"),local("HelveticaNeue"),local("Arial"),local("Roboto"),local("Segoe UI");unicode-range:U+2018-201F,U+2026}
@font-face{font-family:"KD Latin Punct";font-weight:700;src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Segoe UI Bold");unicode-range:U+2018-201F,U+2026}
.kd{
  --kd-green:#006437; --kd-green-hover:#00562F; --kd-deep:#0B4D2E; --kd-pale:#F0F6F3; --kd-wash:#E6F0EB;
  --kd-star:#F06423; --kd-ink:#202723; --kd-muted:#57635D; --kd-line:#E3E1DB; --kd-rule:#DDE5E0; --kd-control:#78877D;
  --kd-max:1200px; --kd-gutter:24px; --kd-head-h:104px; --kd-sec:104px; --kd-overlap:180px;
  margin:0; color:var(--kd-ink); overflow-x:clip;
  font:400 16px/1.8 "KD Latin Punct","Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  letter-spacing:.04em; -webkit-font-smoothing:antialiased;
}
/* Theme 2 tints the page (specimen-mode) and pads the default header bar; the Kobe shell is white and full-bleed */
:root[data-shell=kobe] body.kd{background:#fff}
:root[data-shell=kobe]{--edu-radius-md:var(--t2-r-m);--edu-radius-sm:var(--t2-r-s)} /* Theme 2 components on Kobe pages follow the radius rule (foundations.css, 1105-T2g) */
/* chrome reset: one class of specificity (beats the shared element styles in theme.css), so every component class below wins over it */
:where(.kd) *,:where(.kd) *::before,:where(.kd) *::after{box-sizing:border-box}
:is(.kd-header,.kd-rail,.kd-banner,.kd-pager,.kd-end,.kd-home) :where(h1,h2,h3,h4,p){margin:0;font:inherit;letter-spacing:inherit;color:inherit}
:is(.kd-header,.kd-rail,.kd-banner,.kd-pager,.kd-end,.kd-home) :where(ul){margin:0;padding:0;list-style:none}
:is(.kd-header,.kd-rail,.kd-banner,.kd-pager,.kd-end,.kd-home) :where(a){color:inherit;text-decoration:none}
:is(.kd-header,.kd-rail,.kd-banner,.kd-pager,.kd-end,.kd-home) :where(img){display:block;max-width:100%}
:is(.kd-header,.kd-rail,.kd-banner,.kd-pager,.kd-end,.kd-home) :where(button,input){font:inherit;letter-spacing:inherit;color:inherit}
:is(.kd-header,.kd-rail,.kd-banner,.kd-pager,.kd-end,.kd-home) :where(details){margin:0;padding:0;border:0;background:none}
:is(.kd-header,.kd-rail,.kd-banner,.kd-pager,.kd-end,.kd-home) :where(summary){padding:0;gap:0;justify-content:normal;font:inherit}
.kd-header summary::after,.kd-header details[open] summary::after{content:none} /* theme.css gives every summary the FAQ +/- mark */
.kd :focus-visible{outline:3px solid var(--kd-green);outline-offset:3px;box-shadow:none}
html:has(body.kd){scroll-padding-top:calc(var(--kd-head-h,104px) + 16px)} /* the fixed header never covers the focused element */
@media (prefers-reduced-motion:no-preference){html:has(body.kd){scroll-behavior:smooth}} /* in-page anchors glide (1105-T2g); instant with reduced motion */
/* the arrival mark on an in-page anchor target (kobe-shell.js): pale fades out; reduced motion gets a static outline */
@keyframes kd-flash{from{background-color:var(--kd-pale)}to{background-color:transparent}}
.kd-flash{animation:kd-flash 1.2s ease-out}
@media (prefers-reduced-motion:reduce){.kd-flash{animation:none;outline:2px solid var(--kd-green);outline-offset:6px}}
.kd [tabindex="-1"]:focus{outline:none} /* a heading that receives focus after a jump: the arrival mark shows it, no ring */
@media (max-width:900px){html:has(body.kd){scroll-padding-top:80px}}
.kd :where(a,button,summary,input){touch-action:manipulation;-webkit-tap-highlight-color:transparent} /* every control has its own hover / pressed state */
.kd :where(.kd-head-title,.kd-notice h2,.kd-start-col h3,.kd-row-title,.kd-banner-title){text-wrap:balance}
.kd .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kd-wrap{width:min(var(--kd-max),100% - 2 * var(--kd-gutter));margin-inline:auto}
@media (min-width:1280px){.kd{--kd-gutter:112px}} /* the 88px rail never covers content */
@media (max-width:900px){.kd{--kd-gutter:20px;--kd-head-h:64px;--kd-sec:72px;--kd-overlap:200px}}
.kd-skip{position:absolute;left:-999px;top:12px;z-index:100;padding:10px 16px;background:#fff;color:var(--kd-green);font-weight:700}
.kd-skip:focus{left:12px}
.kd-nw{white-space:nowrap}
.kd-top-sentinel{position:absolute;top:80px;left:0;width:1px;height:1px;pointer-events:none}
.kd-ic{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.kd .ocio-icon{display:inline-block;flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.kd .link-icon{width:.9em;height:.9em}
/* link icon in running text (1105-T2h fixes, 1105-T2k): an inline-block (measured when the line is fitted, so it never hangs
   past the edge) with a word joiner before it in the markup (so it never wraps alone onto the next line). A bare-URL link
   (.kd-link-url, shown without "https://") may break inside the URL only when it is longer than the whole line. */
:root[data-shell=kobe] .kd-article :is(p,li,td,th,dd,figcaption) a>.link-icon{vertical-align:-.02em} /* centred on the text; the build's word joiner keeps it on the last word's line (1105-T2k) */
:root[data-shell=kobe] .kd-article :is(p,li,dd,figcaption) a.kd-link-url{overflow-wrap:anywhere}

/* ---------- shared devices ---------- */
.kd-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:6px;color:var(--kd-green)}
.kd-head-title{font-family:Jost,sans-serif;font-weight:300;font-size:56px;line-height:1.15;letter-spacing:.02em}
.kd-head--zh .kd-head-title{font-family:"Noto Sans TC",sans-serif;font-weight:300;letter-spacing:.04em} /* Jost has no CJK glyphs: same sizes, Noto Sans TC 300 */
.kd-eyebrow,.kd-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.08em;color:var(--kd-ink)}
.kd-eyebrow::before,.kd-hero-eyebrow::before,.kd-fhead::before{content:"\2726" / "";color:var(--kd-star);font-size:12px;letter-spacing:0}
.kd-head--center{align-items:center;text-align:center}
.kd-go{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid currentColor;border-radius:var(--t2-r-round);transition:background-color .2s,border-color .2s,color .2s}
.kd-go--lg{width:46px;height:46px}
.kd-go--sm{width:26px;height:26px}
.kd-go-ic{display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.kd-go--sm .kd-go-ic{width:11px;height:11px}
/* a page link's arrow is the straight → (1105-T2i: no angled arrows; the Kobe diagonal was removed) */
.kd-more{display:inline-flex;align-items:center;gap:16px;min-height:46px;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--kd-green)}
.kd-more:hover .kd-go,.kd-more:focus-visible .kd-go{background:var(--kd-green);border-color:var(--kd-green);color:#fff}
.kd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:var(--t2-r-m);background:var(--kd-green);color:#fff;font-size:16px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:background-color .2s}
.kd-btn:hover{background:var(--kd-green-hover)}
.kd-btn--deep{background:var(--kd-deep)}
.kd-btn--deep:hover{background:#073A22}
.kd-btn:active{transform:translateY(1px)}
.kd-btn .kd-ic{width:18px;height:18px}
.kd-field{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;background:#fff;border:1px solid var(--kd-control);border-radius:var(--t2-r-m);color:var(--kd-muted)}
.kd-field input{flex:1;min-width:0;min-height:50px;padding:0;border:0;border-radius:0;outline:none;background:none;color:var(--kd-ink);font-size:16px;letter-spacing:.02em;box-shadow:none}
.kd-field input::placeholder{color:var(--kd-muted);opacity:1}
.kd-field:focus-within{outline:3px solid var(--kd-green);outline-offset:2px}
.kd-field input{border-radius:0}
.kd-round{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid currentColor;border-radius:var(--t2-r-round);background:none;color:inherit;cursor:pointer;transition:background-color .2s,color .2s}
.kd-round .kd-ic{width:18px;height:18px}
.kd-round[aria-disabled=true]{opacity:.4;cursor:default}

/* ---------- header: transparent over the photo, solid white after 80px ---------- */
:root[data-shell=kobe] .kd-header{position:fixed;inset:0 0 auto;z-index:40;padding:0;background:transparent;color:#fff;box-shadow:none;transition:background-color .25s,color .25s,box-shadow .25s,transform .3s}
.kd-header::before{content:"";position:absolute;inset:0 0 auto;height:120px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(0 0 0 / .45) 0%,rgb(0 0 0 / .45) 72%,rgb(0 0 0 / 0) 100%);transition:opacity .25s} /* homepage: short (120px), max .45, the photo stays clear */
.kd-is-inner .kd-header::before{display:none} /* inner banner: its own tint already gives the header text 4.5:1 (measured), and the white gutter stays white */
.kd-header:not(.is-solid):not(:has(.is-wide .shell-menu[open],.shell-search-panel:not([hidden]),.kd-navwrap[open]:not(.is-wide))) :where(.kd-util a,.kd-groups .ocio-link){text-shadow:0 0 1px rgb(0 0 0 / .85),0 0 2px rgb(0 0 0 / .7),0 0 4px rgb(0 0 0 / .5),0 1px 8px rgb(0 0 0 / .4),0 0 18px rgb(0 0 0 / .25)} /* halo: white text >= 4.5:1 next to every glyph (measured) */
.kd-is-inner .kd-header:not(.is-solid) :where(.kd-util a,.kd-groups .ocio-link){text-shadow:0 0 2px rgb(0 40 22 / .6),0 1px 10px rgb(0 40 22 / .35)}
:root[data-shell=kobe] :is(.kd-header.is-solid,.kd-header:has(.is-wide .shell-menu[open]),.kd-header:has(.shell-search-panel:not([hidden])),.kd-header:has(.kd-navwrap[open]:not(.is-wide))){background:#fff;color:var(--kd-ink);box-shadow:var(--t2-sh-card)}
:is(.kd-header.is-solid,.kd-header:has(.is-wide .shell-menu[open]),.kd-header:has(.shell-search-panel:not([hidden])),.kd-header:has(.kd-navwrap[open]:not(.is-wide)))::before{opacity:0}
:root[data-shell=kobe] .kd-header.is-hidden{transform:translateY(-100%)}
.kd-bar{position:relative;display:flex;align-items:center;gap:24px;min-height:var(--kd-head-h);padding:0 40px 0 max(var(--kd-gutter),(100% - var(--kd-max)) / 2)} /* the logo lines up with the banner copy, the content and the footer (1200 grid) */
.kd-brand{display:block;flex:none;line-height:0}
.kd-brand img{width:auto;height:56px;filter:brightness(0) invert(1);transition:filter .25s}
:is(.kd-header.is-solid,.kd-header:has(.is-wide .shell-menu[open]),.kd-header:has(.shell-search-panel:not([hidden])),.kd-header:has(.kd-navwrap[open]:not(.is-wide))) .kd-brand img{filter:none}
.kd-header:not(.is-solid):not(:has(.is-wide .shell-menu[open],.shell-search-panel:not([hidden]),.kd-navwrap[open]:not(.is-wide))) :focus-visible{outline-color:#fff}
.kd-navwrap{margin-left:auto}
.kd-navwrap>summary{list-style:none}
.kd-navwrap>summary::-webkit-details-marker{display:none}
.kd-nav{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.kd-util{display:flex;align-items:center;gap:0 18px;font-size:12px;letter-spacing:.06em}
.kd-util a{display:inline-flex;align-items:center;min-height:28px}
.kd-util a:hover{text-decoration:underline;text-underline-offset:4px}
.kd-util-sep{width:1px;height:12px;background:currentColor;opacity:.45}
.kd-groups{display:flex;align-items:center;gap:0 28px}
.kd .kd-groups .ocio-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:16px;font-weight:700;letter-spacing:.06em;white-space:nowrap;cursor:pointer;color:inherit;text-decoration:none}
.kd .kd-groups .shell-menu{position:static}
.kd .kd-groups .shell-menu>summary{list-style:none}
.kd .kd-groups .shell-menu>summary::-webkit-details-marker{display:none}
.kd .kd-groups .shell-menu>summary .ocio-icon{opacity:.7;transition:transform .2s}
.kd .kd-groups .shell-menu[open]>summary .ocio-icon{transform:rotate(180deg)}
.kd .kd-groups .shell-menu[open]>summary,.kd .kd-groups .ocio-link:hover{color:var(--kd-green)}
.kd-header:not(.is-solid):not(:has(.is-wide .shell-menu[open])) .kd-groups .ocio-link:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
/* current group: a 2px underline on its name (green on white; white while the header is transparent, where green would not show) */
.kd .kd-groups :is(.shell-menu.is-active>summary,.shell-top[aria-current]){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:var(--kd-green)}
.kd-header:not(.is-solid):not(:has(.is-wide .shell-menu[open],.shell-search-panel:not([hidden]),.kd-navwrap[open]:not(.is-wide))) .kd-groups :is(.shell-menu.is-active>summary,.shell-top[aria-current]){text-decoration-color:#fff}
.kd-sheet-search,.kd-sheet-help{display:none}
.kd-tile{display:grid;place-items:center;align-content:center;gap:2px;flex:none;width:64px;height:64px;padding:0;border:0;border-radius:var(--t2-r-m);cursor:pointer;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.06em}
.kd-tile .kd-ic{width:22px;height:22px}
.kd-tile--search{background:#fff;color:var(--kd-green)}
.kd-tile--menu{background:var(--kd-green);color:#fff}
.kd-tile--menu:focus-visible{outline-color:var(--kd-green);outline-offset:-6px;box-shadow:inset 0 0 0 3px #fff}
.kd-navwrap>summary.kd-tile{display:none}
.kd .shell-menu-close{display:none}

/* mega panel: hangs from the whole header, content on the 1200px grid */
.kd .shell-menu-panel{position:absolute;left:0;right:0;top:100%;z-index:41;max-height:calc(100vh - var(--kd-head-h));overflow:auto;overscroll-behavior:contain;padding:28px max(40px,(100% - 1200px) / 2) 32px;background:#fff;color:var(--kd-ink);border-top:1px solid var(--kd-line);box-shadow:var(--t2-sh-raised)}
.kd .shell-menu-top{display:flex;flex-wrap:wrap;gap:0 28px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--kd-line)}
.kd .shell-menu-overview{font-weight:700;color:var(--kd-green)}
.kd .shell-menu-cols{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:0 40px}
.kd .shell-menu-col{display:flex;flex-direction:column;min-width:0}
.kd .shell-menu-head{margin:4px 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--kd-muted)}
.kd .shell-menu-panel a{display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:16px;line-height:1.5;border-bottom:1px solid var(--kd-line);color:inherit;text-decoration:none}
.kd .shell-menu-top a{border-bottom:0}
.kd .shell-menu-panel a[data-depth]{padding-left:16px;font-size:14px}
.kd .shell-menu-panel a:hover{color:var(--kd-green);text-decoration:underline;text-underline-offset:4px}
.kd .shell-menu-panel a[aria-current]{color:var(--kd-green);font-weight:700}
.kd .shell-menu-panel .shell-menu-overview{color:var(--kd-green)}
/* Menu levels (798691-R47; user: the menu items are too busy). One system in the mega panel and the drawer:
   L1 group = the only filled thing (pale band, drawer); "X overview" = the first L2 row (600, text colour);
   L2 = plain 16px rows, 16px in, no hairlines (spacing instead); .shell-menu-head = an L2 with children (600, text
   colour, sentence case); L3 (a[data-depth]) = 14px, 32px in, a 2px rule in the line colour, muted text (AA).
   The drawer's L1 band is the group <summary>; the mega panel has no band (R47b: its open top-nav item names the
   group), and in both the overview link is the first row (600, text colour). Focus rings sit inside the row (never
   clipped). Theme 2 tokens only. */
.kd .shell-menu-top{display:block;margin:0;padding:0;border:0}
.kd .shell-menu-panel a{min-height:44px;padding:8px 16px;border-bottom:0;font-size:16px;font-weight:400}
.kd .shell-menu-panel .shell-menu-overview{font-weight:600;color:var(--kd-ink)}
/* R47c: the bold level titles (the overview row and the .shell-menu-head column headings) carry a decorative bullet
   (6px --kd-green dot on the first line, 10px to the text, hanging indent). Plain L2 page rows have no bullet and
   start at the title text's edge (32px), so the dots stand alone in the left column; L3 hangs from that edge. */
.kd :is(.shell-menu-cols a:not([data-depth]),.shell-menu-top a){display:block;position:relative;padding:10px 16px 10px 32px;line-height:24px}
.kd .shell-menu-panel .shell-menu-head{position:relative;padding:10px 16px 2px 32px;line-height:24px}
.kd :is(.shell-menu-top .shell-menu-overview,.shell-menu-panel .shell-menu-head)::before{content:"";position:absolute;left:16px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--kd-green)}
.kd .shell-menu-head{margin:12px 0 0;padding:10px 16px 2px;font-size:16px;font-weight:600;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--kd-ink)}
.kd .shell-menu-panel a[data-depth]{margin-left:32px;padding-left:14px;border-left:2px solid var(--kd-line);font-size:14px;color:var(--kd-muted)}
.kd .shell-menu-panel a[aria-current]{color:var(--kd-green);font-weight:600}
.kd .shell-menu-panel a:focus-visible{outline-offset:-3px}

/* search panel */
.kd-search-panel{position:absolute;left:0;right:0;top:100%;z-index:41;background:#fff;color:var(--kd-ink);border-top:1px solid var(--kd-line);box-shadow:var(--t2-sh-raised)}
.kd-search-panel[hidden]{display:none}
.kd-search-inner{width:min(880px,100% - 40px);margin:0 auto;padding:24px 0 28px}
.kd .shell-search-results{max-height:min(60vh,520px);overflow:auto;overscroll-behavior:contain;margin:12px 0 0;padding:0;list-style:none}
.kd .shell-search-results a{display:block;padding:14px 4px;border-bottom:1px solid var(--kd-line);color:inherit;text-decoration:none}
.kd .shell-search-results a:hover strong{color:var(--kd-green);text-decoration:underline}
.kd .shell-search-results strong{display:block;font-size:16px;font-weight:700}
.kd .shell-search-results span{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:var(--kd-muted)}
.kd .shell-search-none{padding:14px 4px;color:var(--kd-muted)}

/* right-edge rail (Kobe), wide screens only */
.kd-rail{display:none}
@media (min-width:1280px){
  .kd-rail{position:fixed;right:0;top:calc(var(--kd-head-h) + 12px);z-index:35;display:flex;flex-direction:column;width:88px;overflow:hidden;border-radius:var(--t2-r-m) 0 0 var(--t2-r-m);background:#fff;box-shadow:var(--t2-sh-raised)}
  .kd-rail-tile{display:grid;place-items:center;align-content:center;gap:6px;height:88px;padding:0 4px;border:0;border-radius:0;background:#fff;color:var(--kd-ink);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.04em;text-align:center;cursor:pointer}
  .kd-rail-tile+.kd-rail-tile{border-top:1px solid var(--kd-line)}
  .kd-rail-tile .kd-ic{width:24px;height:24px;color:var(--kd-green)}
  .kd-rail-tile:hover,.kd-rail-tile[aria-expanded=true]{background:var(--kd-pale);color:var(--kd-green)}
  .kd-rail-tile:focus-visible{outline-offset:-4px}
  .kd-rail .link-icon{display:none} /* the tile is the link; its new-tab text stays for screen readers */
  .kd-tile--search{display:none}
}

/* ---------- inner banner (Kobe guide page): photo flush to the left edge, bottom-left quarter circle; copy on the 1200 grid ---------- */
.kd-banner{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:575px;padding:calc(var(--kd-head-h) + 24px) 120px 120px max(var(--kd-gutter),(100% - var(--kd-max)) / 2);color:#fff} /* grows with a long title; the bottom padding keeps the copy clear of the curve (>= 1280: 350px curve, copy at >= 112px) */
.kd-banner-media{position:absolute;inset:0;z-index:-1;overflow:hidden;border-bottom-left-radius:var(--t2-curve-l);background:var(--kd-green)}
.kd-banner-media img{width:100%;height:100%;object-fit:cover}
/* green tint: strongest under the copy (left) and the header text (top), lighter to the right so the photo shows.
   Every white text >= 4.5:1 on the real pixels of all 8 banner photos (measured). */
.kd-banner-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 60 33 / .5) 0,rgb(0 60 33 / 0) 150px),linear-gradient(90deg,rgb(0 100 55 / .88) 0%,rgb(0 100 55 / .84) 45%,rgb(0 100 55 / .8) 76%,rgb(0 100 55 / .62) 100%)} /* >= .8 wherever a title can reach (76%): white text >= 4.5:1 even on a white pixel */
.kd-banner-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.kd-crumbs{font-size:13px;line-height:1.7;letter-spacing:.04em}
.kd-crumbs a{text-decoration:underline;text-decoration-color:rgb(255 255 255 / .6);text-underline-offset:3px}
.kd-crumbs a:hover{text-decoration-color:#fff}
.kd-crumbs [aria-current]{font-weight:500}
.kd-banner :focus-visible{outline-color:#fff}
.kd-banner-title{max-width:min(920px,100%);overflow-wrap:break-word;margin-top:14px;font-family:"KD Latin Punct","Noto Sans TC",sans-serif;font-size:44px;font-weight:500;line-height:1.3;letter-spacing:.06em}
.kd-banner-sub{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:Jost,sans-serif;font-size:20px;font-weight:300;line-height:1.4;letter-spacing:.06em}
.kd-banner-sub::before{content:"\2726" / "";color:var(--kd-star);font-size:16px}

/* ---------- inner content on white: the 1200 container, aligned with the footer (1105-T2e amendment) ---------- */
.kd-body{padding:var(--kd-sec) 0}
.kd-article,.kd-pager{width:min(var(--kd-max),100% - 2 * var(--kd-gutter));margin-inline:auto}
.kd-article{font-size:16px;line-height:1.9;overflow-wrap:break-word} /* long URLs and paths wrap only when they would overflow; words in table cells never split */
.kd-article :is(iframe,video,embed,object){max-width:100%}
.kd-article>:first-child,.kd-article>.rich:first-child>:first-child{margin-top:0}
.kd-lead{margin:0 0 40px;font-size:20px;line-height:1.8;color:var(--kd-ink)}
.kd-article .rich{max-width:none} /* theme.css caps rich text at 720px; the column width comes from .kd-article */
:root[data-shell=kobe] .kd-article .rich p{max-width:none} /* 1105-T2i: text uses the full content column (user directive: no narrow text) */
:root[data-shell=kobe] .kd-article :is(.table-wrap,.split-content,.faq,.contact-panel) :is(p,li){max-width:none}
/* Section heading (Kobe access page): the top heading level the page uses (OCIO content mostly starts at h3).
   Dark 28px bold; under it an orange star and a 2px green rule across the full width. Replaces the orange bar + grey rule. */
:root[data-shell=kobe] .kd-article--top2 :is(h2,.rich>h2,.split-content>div>h2):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top3 :is(h3,.rich>h3,.split-content>div>h3):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top4 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] h2.kd-ch{position:relative;margin:80px 0 32px;padding:0 0 26px;border:0;font-family:"KD Latin Punct","Noto Sans TC",sans-serif;font-size:28px;font-weight:700;line-height:1.5;letter-spacing:.06em;color:var(--kd-ink);text-transform:none;
  background:linear-gradient(var(--kd-green),var(--kd-green)) 24px calc(100% - 7px) / calc(100% - 24px) 2px no-repeat}
:root[data-shell=kobe] .kd-article--top2 :is(h2,.rich>h2,.split-content>div>h2):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::before,:root[data-shell=kobe] .kd-article--top3 :is(h3,.rich>h3,.split-content>div>h3):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::before,:root[data-shell=kobe] .kd-article--top4 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::before,:root[data-shell=kobe] h2.kd-ch::before{content:"\2726" / "";position:absolute;left:0;bottom:0;width:16px;height:16px;font-size:16px;line-height:16px;letter-spacing:0;color:var(--kd-star);background:none}
:root[data-shell=kobe] .kd-article--top2 :is(h2,.rich>h2,.split-content>div>h2):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::after,:root[data-shell=kobe] .kd-article--top3 :is(h3,.rich>h3,.split-content>div>h3):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::after,:root[data-shell=kobe] .kd-article--top4 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::after,:root[data-shell=kobe] h2.kd-ch::after{content:none}
/* sub heading: 20px bold green, no rule */
:root[data-shell=kobe] .kd-article--top2 :is(h3,.rich>h3,.split-content>div>h3):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top3 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *){margin:48px 0 16px;padding:0;border:0;background:none;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:.06em;color:var(--kd-green);text-transform:none}
:root[data-shell=kobe] .kd-article--top2 :is(h3,.rich>h3,.split-content>div>h3):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::before,:root[data-shell=kobe] .kd-article--top2 :is(h3,.rich>h3,.split-content>div>h3):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::after,:root[data-shell=kobe] .kd-article--top3 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::before,:root[data-shell=kobe] .kd-article--top3 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *)::after{content:none}
:root[data-shell=kobe] .kd-article--top2 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top2 :is(h5,.rich>h5,.split-content>div>h5):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top3 :is(h5,.rich>h5,.split-content>div>h5):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top4 :is(h5,.rich>h5,.split-content>div>h5):not(.news-tile *,.contact-card *,.kd-team *,td *,th *){margin:32px 0 12px;padding:0;border:0;background:none;font-size:16px;font-weight:700;line-height:1.6;color:var(--kd-ink)}
:root[data-shell=kobe] .kd-article :is(.rich:first-child>h2:first-child,.split-content>div>h2:first-child),:root[data-shell=kobe] .kd-article :is(.rich:first-child>h3:first-child,.split-content>div>h3:first-child),:root[data-shell=kobe] .kd-article :is(.rich:first-child>h4:first-child,.split-content>div>h4:first-child){margin-top:0}
:root[data-shell=kobe] .kd-article .rich a:not([class]){color:var(--kd-green);text-decoration:underline;text-underline-offset:4px}
:root[data-shell=kobe] .kd-article .rich a:not([class]):hover{color:var(--kd-green-hover);text-decoration-thickness:2px}
/* images: Kobe's one rounded corner (bottom-left), never the 12px all-round radius */
:root[data-shell=kobe] .kd-article img:not([data-inline],[data-float]){border-radius:var(--t2-r-sig)}
:root[data-shell=kobe] .kd-article .shell-news .news-tile>img{border-radius:var(--t2-r-m)} /* list thumbnails: a plain box */
:root[data-shell=kobe] .kd-article .split-content{gap:56px;margin:0 0 72px}
:root[data-shell=kobe] .kd-article .split-content img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
:root[data-shell=kobe] .kd-article .rich-figure{margin:32px 0}
/* tables, notices, FAQs, news, contact, sitemap keep their components; on Kobe pages they sit on white, square, no card frame */
:root[data-shell=kobe] .kd-article .table-wrap{margin:24px 0 32px;border-radius:var(--t2-r-s) var(--t2-r-s) 0 0;box-shadow:none}
:root[data-shell=kobe] .kd-article .table-wrap :is(th,td){border-radius:0}
:root[data-shell=kobe] .kd-article .table-wrap :is(table,thead,tbody,tr,th,td){border-radius:0!important} /* 1105-T2k: one radius, on the wrapper's top corners, which clips */
:root[data-shell=kobe] .kd-article .table-wrap:not(.table-wrap--scroll){overflow:hidden}
:root[data-shell=kobe] .kd-article .table-wrap--scroll{overflow-x:auto}
:root[data-shell=kobe] .kd-article .faq details{border-radius:var(--t2-r-m);box-shadow:none}
:root[data-shell=kobe] .kd-article .toc{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 56px;padding:0 0 24px;border:0;border-bottom:1px solid var(--kd-rule);border-radius:0;background:none} /* a ruled list, not a box */
:root[data-shell=kobe] .kd-article .toc a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--kd-green)}
:root[data-shell=kobe] .kd-article .contact-card{border-radius:var(--t2-r-sig);overflow:hidden}
/* C06 link list (e.g. external sites): Kobe link rows on white, a hairline under each, the behaviour icon in a 26px round outline.
   Replaces the grey grid of white cells (the FO card-on-grey look). */
:root[data-shell=kobe] .kd-article .quicklinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:24px 0 40px;padding:0;border:0;border-radius:0;background:none}
:root[data-shell=kobe] .kd-article .quicklinks a{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:2px 0;min-height:64px;padding:12px 44px 12px 0;border:0;border-bottom:1px solid var(--kd-rule);border-radius:0;background:none;box-shadow:none;transform:none;color:var(--kd-ink);font-size:16px;font-weight:500;line-height:1.5;text-decoration:none}
:root[data-shell=kobe] .kd-article .quicklinks a>.link-meta{grid-column:1;grid-row:2;margin:2px 0 0;font-size:13px;font-weight:400;color:var(--kd-muted)}
:root[data-shell=kobe] .kd-article .quicklinks a>.link-icon{grid-area:auto;display:block;position:absolute;z-index:1;right:7px;top:50%;width:12px;height:12px;margin:-6px 0 0;color:var(--kd-green);transition:color .2s}
:root[data-shell=kobe] .kd-article .quicklinks a::after{content:"";position:absolute;right:0;bottom:auto;top:50%;width:26px;height:26px;margin-top:-13px;border:1px solid var(--kd-green);border-radius:var(--t2-r-round);background:none;-webkit-mask:none;mask:none;transform:none;transition:background-color .2s}
:root[data-shell=kobe] .kd-article .quicklinks a:hover{color:var(--kd-green);background:none;box-shadow:none;transform:none}
:root[data-shell=kobe] .kd-article .quicklinks a:is(:hover,:focus-visible)::after{background:var(--kd-green);transform:none}
:root[data-shell=kobe] .kd-article .quicklinks a:is(:hover,:focus-visible)>.link-icon{color:#fff}
:root[data-shell=kobe] .kd-article .quicklinks a:focus-visible{outline:3px solid var(--kd-green);outline-offset:2px}
:root[data-shell=kobe] .kd-article .rich :is(td,th){line-height:1.6}
:root[data-shell=kobe] .kd-article .rich :is(td,th) :is(p,h3,h4,h5,li){margin:.25em 0;line-height:1.6} /* cell content keeps cell spacing, not article spacing */
:root[data-shell=kobe] .kd-article .rich :is(td,th)>:first-child{margin-top:0}
:root[data-shell=kobe] .kd-article .rich :is(td,th)>:last-child{margin-bottom:0}
/* a heading that is wholly a link (source markup) reads as a heading, with the Kobe round arrow to show it goes somewhere;
   on every inner-page layout (rich text, sections beside "On this page", FAQ answers: 1107-T2o); the doubled class beats the
   rich-text link colour / underline; the ring sits on the first line of a wrapped heading (0.5lh) */
:root[data-shell=kobe] .kd-article :is(h2,h3,h4,h5,h6).kd-head-link.kd-head-link a{position:relative;display:inline-block;padding-right:40px;color:inherit;text-decoration:none}
:root[data-shell=kobe] .kd-article :is(h2,h3,h4,h5,h6).kd-head-link.kd-head-link a::before{content:"";position:absolute;right:0;top:.75em;top:.5lh;width:26px;height:26px;margin-top:-13px;border:1px solid var(--kd-green);border-radius:var(--t2-r-round);transition:background-color .2s}
:root[data-shell=kobe] .kd-article :is(h2,h3,h4,h5,h6).kd-head-link.kd-head-link a>.link-icon{display:block;position:absolute;z-index:1;right:7px;top:.75em;top:.5lh;width:12px;height:12px;margin:-6px 0 0;color:var(--kd-green);transition:color .2s} /* the glyph link_rules chose for this link (→ page, external box, file type: 1107-T2o), centred in the ring like link rows */
:root[data-shell=kobe] .kd-article :is(h2,h3,h4,h5,h6).kd-head-link.kd-head-link a:is(:hover,:focus-visible)::before{background:var(--kd-green)}
:root[data-shell=kobe] .kd-article :is(h2,h3,h4,h5,h6).kd-head-link.kd-head-link a:is(:hover,:focus-visible)>.link-icon{color:#fff}
:root[data-shell=kobe] .kd-article :is(h2,h3,h4,h5,h6).kd-head-link.kd-head-link a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* C11 tables on phones (render marks each table): 'stack' = each row as label / value blocks; 'scroll' (merged cells) = a
   horizontal scroll region with a hint. Words never split; long e-mails / URLs may break where they must. */
.kd-scroll-hint{display:none;margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--kd-green)}
:root[data-shell=kobe] .kd-article .table-wrap--scroll[data-overflow] .kd-scroll-hint{display:block} /* only when the table overflows (kobe-shell.js) */
@media (max-width:600px){
  :root[data-shell=kobe] .kd-article .table-wrap--stack{overflow:visible;border-top:1px solid var(--kd-rule)}
  :root[data-shell=kobe] .kd-article .table-wrap--stack :is(table,tbody,thead,tr,td,th){display:block;width:auto}
  :root[data-shell=kobe] .kd-article .table-wrap--stack .kd-thead{display:none}
  :root[data-shell=kobe] .kd-article .table-wrap--stack tr{padding:14px 0;border-bottom:1px solid var(--kd-rule)}
  :root[data-shell=kobe] .kd-article .table-wrap--stack tr:not(.kd-thead)>:is(td,th){padding:3px 0;border:0;background:none;text-align:left} /* beats Theme 2's tr:not(:first-child)>td */
  :root[data-shell=kobe] .kd-article .table-wrap--stack td:empty{display:none} /* an empty source cell: no label over nothing (1105-T2i) */
  :root[data-shell=kobe] .kd-article .table-wrap--stack td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.06em;color:var(--kd-muted)}
  :root[data-shell=kobe] .kd-article .table-wrap--stack tr>:first-child:not([data-label]){font-weight:700} /* no header row: the first cell is the label */
  :root[data-shell=kobe] .kd-article .table-wrap--stack td a{overflow-wrap:anywhere}
  :root[data-shell=kobe] .kd-article .table-wrap--scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--t2-r-m)}
  :root[data-shell=kobe] .kd-article .table-wrap--scroll table{min-width:640px}
  :root[data-shell=kobe] .kd-article .table-wrap--scroll tr>:first-child{width:9em} /* the label column stays narrow, so the values get the width */

}
/* news list (OCIO News): one row per item on white, hairline rules (the 3-column card grid is the default shell's) */
:root[data-shell=kobe] .kd-article .shell-news{display:block;border-top:1px solid var(--kd-rule)}
:root[data-shell=kobe] .kd-article .shell-news .news-tile{border:0;border-bottom:1px solid var(--kd-rule);border-radius:0;background:none;box-shadow:none;overflow:visible}
:root[data-shell=kobe] .kd-article .shell-news .news-tile:last-child{border-bottom:1px solid var(--kd-rule)}
:root[data-shell=kobe] .kd-article .shell-news .news-tag{font-size:14px;color:var(--kd-muted)}
:root[data-shell=kobe] .kd-article .shell-news .news-tile h2{margin:0;padding:0;background:none;font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.02em;color:var(--kd-ink)}
:root[data-shell=kobe] .kd-article .shell-news .news-tile h2::before{content:none}
:root[data-shell=kobe] .kd-article .shell-news .news-tile h2 a{color:inherit;text-decoration:none}
:root[data-shell=kobe] .kd-article .shell-news .news-tile:hover h2 a{color:var(--kd-green);text-decoration:underline;text-underline-offset:3px}
/* C10 document list (default shell styles live in site-shell.css, not loaded here): one row per document, hairline rules */
.kd-article .shell-docs{margin:24px 0 40px;border-top:1px solid var(--kd-rule)}
.kd-article .shell-docs .file-row{display:flex;align-items:center;min-height:56px;padding:12px 0;border:0;border-bottom:1px solid var(--kd-rule);border-radius:0;background:none;box-shadow:none}
.kd-article .shell-docs .file-copy strong{font-size:16px;font-weight:500;line-height:1.6}
.kd-article .shell-docs .file-copy strong a{color:var(--kd-ink);text-decoration:none}
.kd-article .shell-docs .file-row:hover .file-copy strong a{color:var(--kd-green);text-decoration:underline;text-underline-offset:4px}
.kd-article .shell-section+.shell-section{margin-top:72px}
.kd-article .shell-block-title{margin-top:0}
/* sitemap: the menu tree in Kobe columns */
.kd-article .shell-sitemap{columns:3;column-gap:56px}
.kd-article .shell-sitemap section{break-inside:avoid;margin:0 0 48px}
:root[data-shell=kobe] .kd-article .shell-sitemap h2{margin:0 0 12px;padding:0 0 12px;background:none;border-bottom:2px solid var(--kd-rule);font-size:20px;color:var(--kd-green)}
:root[data-shell=kobe] .kd-article .shell-sitemap h2::before{content:none}
.kd-article .shell-sitemap ul{margin:0;padding:0;list-style:none}
.kd-article .shell-sitemap ul ul{margin:2px 0 8px;padding-left:16px}
.kd-article .shell-sitemap li{max-width:none;font-size:16px;line-height:1.6}
.kd-article .shell-sitemap a{display:inline-block;padding:6px 0;line-height:1.5;color:var(--kd-ink);text-decoration:none} /* inline-block keeps the space before a glued icon (1105-T2k); 36px target */
.kd-article .shell-sitemap a:hover{color:var(--kd-green);text-decoration:underline;text-underline-offset:4px}
/* login: the compact centred 420px form */
.kd-article .shell-login{width:min(420px,100%);margin:0 auto}
:root[data-shell=kobe] .kd-article .shell-login .shell-block-title{font-size:28px}
.kd-article .shell-login-form{display:grid;gap:20px;margin:28px 0 20px}
.kd-article .shell-login-form label{display:grid;gap:8px;font-size:16px;font-weight:700}
.kd-article .shell-login-form input{min-height:52px;padding:0 16px;border:1px solid var(--kd-control);border-radius:var(--t2-r-m);background:#fff;font:inherit;font-weight:400;color:var(--kd-ink)}
.kd-article .shell-login-form input:focus-visible{outline:3px solid var(--kd-green);outline-offset:2px}
.kd-article .shell-login-form .ocio-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:0;border-radius:var(--t2-r-m);background:var(--kd-green);color:#fff;font:inherit;font-size:16px;font-weight:700;letter-spacing:.08em;cursor:pointer}
.kd-article .shell-login-form .ocio-button:hover{background:var(--kd-green-hover)}
.kd-article .shell-login-note{font-size:14px;color:var(--kd-muted)}

/* previous / next */
.kd-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:80px;padding-top:8px;border-top:1px solid var(--kd-rule)}
.kd-pager-link{display:flex;flex-direction:column;gap:2px;min-height:64px;padding:16px 0}
.kd-pager-link small{display:inline-flex;align-items:center;gap:8px;font-family:Jost,sans-serif;font-size:14px;font-weight:500;letter-spacing:.1em;color:var(--kd-green)}
.kd-pager-link span{font-size:16px;font-weight:500;line-height:1.6}
.kd-pager-prev small::before,.kd-pager-next small::after{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--kd-chev) center/contain no-repeat;mask:var(--kd-chev) center/contain no-repeat} /* previous / next: chevrons (1105-T2i) */
.kd-pager-prev small::before{--kd-chev:url("/ocio/img/icons/chevron-left.svg")}
.kd-pager-next{align-items:flex-end;text-align:right}
.kd-pager-next small::after{--kd-chev:url("/ocio/img/icons/chevron-right.svg")}
.kd-pager-link:hover span{color:var(--kd-green);text-decoration:underline;text-underline-offset:4px}

/* ---------- topic list (homepage Topics panel) ---------- */

/* ---------- contact panel + footer: a white panel on the pale band, its bottom half over the footer ---------- */
.kd-end{background:var(--kd-pale);padding-top:var(--kd-sec)} /* also fills the footer's top-right curve: no white wedge */
.kd-is-home .kd-end{padding-top:0} /* the homepage's pale Quick links band runs straight on */
.kd-contact{position:relative;z-index:1;margin-bottom:calc(-1 * var(--kd-overlap))}
.kd-contact-panel{padding:72px 40px 64px;border-radius:var(--t2-r-m);background:#fff;text-align:center;box-shadow:var(--t2-sh-raised)}
.kd-contact-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:36px}
.kd-cbtn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:350px;max-width:100%;min-height:60px;padding:8px 20px 8px 28px;border-radius:var(--t2-r-m);background:var(--kd-pale);color:var(--kd-green);font-size:16px;font-weight:700;text-align:left;letter-spacing:.04em;transition:background-color .2s}
.kd-cbtn small{display:block;font-size:12px;font-weight:500;line-height:1.4;color:var(--kd-muted)}
.kd-cbtn:hover{background:var(--kd-wash)}
.kd-cbtn:hover .kd-go,.kd-cbtn:focus-visible .kd-go{background:var(--kd-green);border-color:var(--kd-green);color:#fff}
.kd-contact-hours{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:28px;font-size:13px;line-height:1.7}
.kd-contact-hours .kd-ic{width:16px;height:16px;color:var(--kd-green)}
.kd-hours::before{content:"·" / "";margin-right:8px}
.kd-footer{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--kd-overlap) + 80px) 0 40px;background:var(--kd-deep);color:#fff;border-top-right-radius:var(--t2-curve-l)}
.kd-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/theme-library/home-one/edu/campus.jpg") center 70% / cover;opacity:.1}
.kd-footer :focus-visible{outline-color:#fff}
.kd-footer-brand{display:flex;align-items:center;gap:28px;padding-bottom:40px;border-bottom:1px solid rgb(255 255 255 / .3)}
.kd-footer-brand img{width:auto;height:56px;filter:brightness(0) invert(1)}
.kd-footer-brand p{font-family:Jost,"Noto Sans TC",sans-serif;font-size:20px;font-weight:400;letter-spacing:.06em}
.kd-footer-cols{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:48px;padding:48px 0 56px}
.kd-fhead{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-family:Jost,sans-serif;font-size:20px;font-weight:400;letter-spacing:.08em}
.kd-footer p{display:flex;gap:12px;font-size:14px;line-height:1.9}
.kd-footer p+p{margin-top:14px}
.kd-footer p .kd-ic{width:18px;height:18px;margin-top:5px;opacity:.85}
.kd-footer a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgb(255 255 255 / .5)}
.kd-footer a:hover{text-decoration-color:#fff}
.kd-flinks a{display:inline-flex;align-items:center;min-height:36px;font-size:14px;text-decoration:none}
.kd-flinks a:hover{text-decoration:underline}
.kd-sns{display:grid;gap:8px}
.kd-sns a{display:flex;align-items:center;justify-content:center;gap:12px;min-height:72px;border-radius:var(--t2-r-m);background:var(--kd-green);font-family:Jost,sans-serif;font-size:16px;letter-spacing:.08em;text-decoration:none}
.kd-sns a:hover{background:var(--kd-green-hover);text-decoration:underline}
.kd-sns .kd-ic{width:22px;height:22px}
.kd-copy{justify-content:center;font-size:12px!important;letter-spacing:.06em;color:rgb(255 255 255 / .85)}

/* ---------- 901-1279: same header, tighter (site-shell.js shows the desktop menu from 901px) ---------- */
@media (min-width:901px) and (max-width:1279px){
  /* the nav row is wider than the photo's blue sky here, so its left end sits on cloud: a little more shade (still 120px) */
  .kd-header::before{background:linear-gradient(180deg,rgb(0 0 0 / .52) 0%,rgb(0 0 0 / .52) 72%,rgb(0 0 0 / 0) 100%)}
  .kd-bar{padding-right:24px;gap:16px}
  .kd-groups{gap:0 18px}
  .kd .kd-groups .ocio-link{font-size:14px;letter-spacing:.04em}
  .kd-util{gap:0 14px}
  .kd-tile--search{width:56px;height:56px}
}
@media (min-width:901px) and (max-width:1100px){
  .kd-groups{gap:0 14px}
  .kd .kd-groups .ocio-link{font-size:13px;letter-spacing:.02em}
  .kd-util{font-size:12px;gap:0 10px}
}
@media (min-width:901px) and (max-width:1023px){
  .kd-bar{padding-right:16px;gap:12px}
  .kd-brand img{height:40px}
  .kd-groups{gap:0 10px}
  .kd .kd-groups .ocio-link{letter-spacing:0}
}
@media (max-width:1279px){
  .kd-article .shell-sitemap{columns:2}
  /* below 1280 a title can run almost the full width: one even tint (white text >= 4.5:1 on a white pixel) */
  .kd-banner-media::after{background:linear-gradient(180deg,rgb(0 60 33 / .5) 0,rgb(0 60 33 / 0) 120px),rgb(0 100 55 / .84)}
  .kd-banner{padding-right:40px;padding-bottom:232px} /* the copy starts at the 24px gutter, so it must clear the 350px curve: bottom >= 350 - sqrt(350^2 - 326^2) + margin */
}
@media (max-width:1023px){
  .kd-banner{min-height:440px;padding:calc(var(--kd-head-h) + 32px) var(--kd-gutter) 124px} /* clears the 200px curve at the gutter */
  .kd-banner-media{border-bottom-left-radius:var(--t2-curve-m)}
  .kd-footer-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kd-footer-cols>div:first-child{grid-column:1 / -1}
}

/* ---------- phone and small tablet: Kobe phone header (logo, Search tile, green Menu tile) + all-open sheet ---------- */
@media (max-width:900px){
  .kd-bar{gap:0;padding:0 env(safe-area-inset-right) 0 max(20px,env(safe-area-inset-left))} /* landscape phones: clear of the notch */
  .kd-header::before{height:72px} /* ends just below the 64px bar */
  .kd-brand img{height:40px}
  .kd-navwrap{order:3;margin-left:0}
  .kd-tile--search{order:2;margin-left:auto}
  .kd-navwrap>summary.kd-tile{display:grid}
  .kd-navwrap[open] .shell-menu-open{display:none}
  .kd-navwrap:not([open])>summary.kd-tile .shell-menu-open,.kd-navwrap[open] .shell-menu-close{display:contents} /* icon + label are the tile's own grid items in both states, exactly as in the Search tile (1105-T2h fixes) */
  .kd-navwrap:not([open]) .kd-nav{display:none}
  .kd-navwrap[open] .kd-nav{position:fixed;inset:var(--shell-head-h,64px) 0 0 0;z-index:60;display:flex;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 40px;background:#fff;color:var(--kd-ink);border-top:1px solid var(--kd-line)}
  body.kd:has(.kd-navwrap[open]){overflow:hidden}
  .kd-sheet-search{display:block;order:0;padding:12px 0 8px}
  .kd-util{order:2;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:24px;padding-top:16px;border-top:1px solid var(--kd-line);font-size:14px}
  .kd-util a{min-height:44px}
  .kd-util-sep{display:none}
  .kd-groups{order:1;flex-direction:column;align-items:stretch;gap:0}
  .kd .kd-groups .shell-menu{border-bottom:1px solid var(--kd-line);padding-bottom:12px}
  .kd .kd-groups .ocio-link{display:flex;width:100%;min-height:52px;font-size:16px;color:var(--kd-ink)!important;text-decoration:none!important}
  .kd .kd-groups .shell-menu>summary{pointer-events:none;padding-top:12px;color:var(--kd-green)!important}
  .kd .kd-groups .shell-menu>summary .ocio-icon{display:none}
  .kd .kd-groups .shell-top{border-bottom:1px solid var(--kd-line)}
  .kd .shell-menu-panel{position:static;max-height:none;overflow:visible;padding:0;border:0;box-shadow:none;background:none}
  .kd .shell-menu-top{flex-direction:column;margin:0;padding:0;border:0}
  .kd .shell-menu-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .kd .shell-menu-head{margin:14px 0 2px}
  .kd .shell-menu-panel a{font-size:16px;border-bottom:0}
  /* R47 drawer: each group starts with its L1 band (the group <summary>); 24px between groups, no dividers */
  .kd .kd-groups .shell-menu,.kd .kd-groups .shell-top{margin-bottom:24px;padding-bottom:0;border-bottom:0}
  .kd .kd-groups .shell-menu>summary,.kd .kd-groups .shell-top.ocio-link{min-height:0;margin-bottom:4px;padding:12px 16px;border-radius:8px;background:var(--kd-pale);color:var(--kd-green)!important;font-weight:600}
  .kd .kd-groups :is(.shell-menu>summary,.shell-top):focus-visible{outline-offset:-3px}
  .kd .kd-groups :is(.shell-menu>summary,.shell-top.ocio-link){text-shadow:none} /* the inner-page header halo is for text over the photo, not the drawer */
  .kd .shell-menu-head{margin-top:8px}
  .kd-sheet-help{order:3;display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:28px;background:var(--kd-green);color:#fff;font-weight:700}
  .kd-search-panel{position:fixed;top:var(--shell-head-h,64px);max-height:calc(100dvh - var(--shell-head-h,64px));overflow:auto}
  .kd-search-inner{padding:16px 0 20px}
  .kd-head-title{font-size:40px}

  .kd-contact-panel{padding:48px 20px 40px}
  .kd-contact-btns{flex-direction:column;align-items:stretch;gap:12px}
  .kd-cbtn{width:auto}
  .kd-contact-hours{flex-direction:column;gap:2px}
  .kd-hours::before{content:none}
  .kd-footer{border-top-right-radius:var(--t2-curve-s)}
  .kd-footer-brand{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:28px}
  .kd-footer-brand img{height:48px}
  .kd-footer-cols{grid-template-columns:minmax(0,1fr);gap:36px;padding:36px 0 40px}
  .kd-footer-cols>div:first-child{grid-column:auto}
}
@media (max-width:600px){
  .kd-banner{justify-content:flex-start;min-height:300px;padding:calc(var(--kd-head-h) + 20px) 20px 64px} /* clears the 120px curve at the 20px gutter */
  .kd-banner-media{border-bottom-left-radius:var(--t2-curve-s)}
  .kd-banner-title{margin-top:8px;font-size:40px;line-height:1.25;letter-spacing:.04em}
  .kd-banner-sub{margin-top:8px;font-size:16px}
  .kd-crumbs{font-size:13px;line-height:1.6}
  .kd-article .shell-sitemap{columns:1}
  .kd-pager{grid-template-columns:minmax(0,1fr);gap:0}
  :root[data-shell=kobe] .kd-article .quicklinks{grid-template-columns:minmax(0,1fr)}
  .kd-pager-next{align-items:flex-start;text-align:left;border-top:1px solid var(--kd-rule)}
  :root[data-shell=kobe] .kd-article--top2 :is(h2,.rich>h2,.split-content>div>h2):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top3 :is(h3,.rich>h3,.split-content>div>h3):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] .kd-article--top4 :is(h4,.rich>h4,.split-content>div>h4):not(.news-tile *,.contact-card *,.kd-team *,td *,th *),:root[data-shell=kobe] h2.kd-ch{margin-top:64px;font-size:28px} /* section headings only: component labels (contact card, tables) keep their own size */
  :root[data-shell=kobe] .kd-article .split-content{gap:24px;margin-bottom:56px}
}

/* ---------- library specimens (Library > Components > Navigation, Theme 2) ---------- */
.kd-specimen{min-height:0}
.kd-spec-header .kd-header{position:absolute}
.kd-spec-header-space{height:24px;background:#fff}
.kd-spec-banner .kd-header{position:absolute}
.kd-spec-banner main{padding-bottom:64px}
.kd-spec-footer .kd-end{padding-top:64px}

@media (prefers-reduced-motion:reduce){
  .kd *,.kd *::before,.kd *::after{transition:none!important;scroll-behavior:auto!important}
}