/* hanlin-en chrome.css — project chrome translated from the approved v3 static design.
   Header is position:fixed per skill L106 (sticky dies inside template-part wrappers);
   the v3 top info bar therefore rides inside the fixed chrome (always visible).
   Dropdowns open on :hover/:focus-within — no project behavior JS (L113). */

:root{
  --navy:#08263e;
  --navy-dark:#051b2d;
  --blue:#087f9d;
  --blue-soft:#eaf6f8;
  --gold:#efb33d;
  --gold-light:#f7d487;
  --ink:#172c3d;
  --muted:#657784;
  --line:#dce5e9;
  --light:#f5f8f9;
  --f-sans:"Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif;
  --f-display:var(--f-sans);            /* v3 brand decision: system sans throughout (design-brief S02) */
  --f-mono:ui-monospace,"Cascadia Code",Consolas,"Courier New",monospace;
  --shell:min(1180px,calc(100% - 48px));
  --section:clamp(60px,6.5vw,84px);
  --chrome-h:116px;                     /* 38px info bar + 78px header */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--chrome-h) + 16px)}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.65;letter-spacing:.002em;overflow-x:hidden}
.shell{width:var(--shell);margin-inline:auto}
.skip-link{position:fixed;z-index:1000;left:20px;top:16px;background:var(--gold-light);color:var(--navy-dark);padding:10px 16px;transform:translateY(-180%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.site-footer :focus-visible,.preview-bar :focus-visible{outline-color:var(--gold-light)}

/* Fixed chrome + spacer (L106/L90: header carries classes "fixed top-0") */
header.site-chrome{position:fixed;top:0;left:0;right:0;z-index:40}
.site-chrome-spacer{height:var(--chrome-h)}

.preview-bar{background:var(--navy-dark);color:#d8e6ec;font-size:11px;font-weight:500;letter-spacing:.03em}
.preview-bar__inner{height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.preview-bar a{color:#fff;font-weight:600;text-decoration:none}
.topbar-links{display:flex;align-items:center;gap:24px}
.topbar-links a:first-child{padding-left:20px;border-left:1px solid rgba(255,255,255,.22)}

.site-header{background:#fff;border-bottom:1px solid #e1e7ea}
.site-header__inner{height:78px;display:grid;grid-template-columns:210px minmax(0,1fr) 94px;align-items:center;gap:18px}
.brand{display:block;width:198px}
.brand img{display:block;max-width:100%}
.desktop-nav{height:100%;display:block;align-self:stretch}
.desktop-menu{height:100%;margin:0;padding:0;display:flex;align-items:stretch;justify-content:center;list-style:none}
.nav-home{display:flex;align-items:stretch}
.nav-home>a{position:relative;padding:0 clamp(11px,1.15vw,17px);display:flex;align-items:center;gap:7px;color:#263a49;font-size:12px;font-weight:600;letter-spacing:0;text-decoration:none;transition:color .2s,background .2s,box-shadow .2s}
.nav-home>a:hover,.nav-home>a:focus-visible{background:var(--blue-soft);color:var(--navy)}
.nav-home>a.is-current{color:var(--blue);font-weight:700;box-shadow:inset 0 -3px 0 var(--blue)}
.nav-home>a.is-current:hover,.nav-home>a.is-current:focus-visible{background:var(--blue-soft);color:var(--navy);box-shadow:inset 0 -4px 0 var(--blue)}
.nav-group{position:relative;display:flex;align-items:stretch}
.nav-group>button,.nav-group>.nav-group__top{min-width:0;text-decoration:none;padding:0 clamp(11px,1.15vw,17px);display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#263a49;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:color .2s,background .2s}
.nav-group:hover>button,.nav-group:focus-within>button,.nav-group:hover>.nav-group__top,.nav-group:focus-within>.nav-group__top{background:var(--blue);color:#fff}
/* 一级导航图标（用户要求「加一些 ICON，增加趣味性」）：复用 wp_footer 注入的 SVG sprite，
   常态低透明度当作辅助识别，hover/当前项提亮，不喧宾夺主 */
.nav-ic{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .2s}
.nav-home>a:hover .nav-ic,.nav-home>a.is-current .nav-ic,.nav-group:hover .nav-ic,.nav-group:focus-within .nav-ic{opacity:1}
.mobile-menu summary .nav-ic,.mobile-menu__home .nav-ic{width:17px;height:17px;opacity:.75}
.nav-chevron{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-group:hover .nav-chevron,.nav-group:focus-within .nav-chevron{transform:translateY(2px) rotate(225deg)}
/* 二级菜单（用户反馈「现在的不好看」）。原样式的唯一反馈是 hover 时左内边距
   +4px，静止状态下每一项没有任何视觉锚点，整块读起来就是一堆散字；且 hover
   改 padding 会引起布局位移。改为：每行前置一个小箭头指示符，静止低透明、
   hover 提亮并右移，位置不变；行本身给圆角悬停面，两列各自成块。 */
.submenu{position:absolute;z-index:60;left:0;top:calc(100% - 1px);width:264px;padding:8px 8px 10px;background:#fff;border-top:3px solid var(--blue);border-radius:0 0 4px 4px;box-shadow:0 18px 38px rgba(6,35,57,.17),0 2px 6px rgba(6,35,57,.06);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,visibility .18s,transform .18s}
.nav-group:hover>.submenu,.nav-group:focus-within>.submenu{opacity:1;visibility:visible;transform:none}
.submenu--right{left:auto;right:0}
.submenu--grid{width:452px;grid-template-columns:1fr 1fr;column-gap:6px;padding:8px 10px 12px}
.nav-group:hover>.submenu--grid,.nav-group:focus-within>.submenu--grid{display:grid}
.submenu__label{display:block;margin:0 9px 6px;padding:6px 0 9px;border-bottom:1px solid var(--line);color:#9aa7b0;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.submenu--grid .submenu__label{grid-column:1/3;margin-inline:8px}
.submenu a{position:relative;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:3px;color:#33485a;font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.3;text-decoration:none;transition:color .16s,background .16s}
/* 静止即可见的指示符：hover 时只改透明度和位移，不改 padding，避免文字跳动 */
.submenu a::before{content:"";flex:none;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.3;transition:opacity .16s,transform .16s}
.submenu a:hover,.submenu a:focus-visible{background:var(--blue-soft);color:var(--blue)}
.submenu a:hover::before,.submenu a:focus-visible::before{opacity:1;transform:translateX(2px) rotate(-45deg)}
.header-cta{min-height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;font-size:12px;font-weight:600;letter-spacing:0;text-decoration:none}
.header-cta:hover{background:var(--navy)}
.menu-toggle{display:none}

/* Mobile drawer — visibility is the [hidden] attribute (theme.js contract). */
.mobile-menu{position:fixed;z-index:39;left:0;right:0;top:calc(var(--chrome-h) - 10px);bottom:0;padding:24px;background:#fff;border-top:4px solid var(--blue);color:var(--ink);overflow:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:block}
/* 移动端导航：图标 + 文字左对齐成一组，+/- 用 margin-left:auto 顶到右侧。
   原来 summary 用 justify-content:space-between，三个子元素被均分成
   「图标贴最左 / 文字浮中间 / 加号贴最右」，是之前排版散掉的根因。
   展开的分组用淡蓝底整体收口，子项左缩进与父级文字严格对齐（12+17+10=39px），
   点击区统一 ≥44px 满足触控可达性。 */
.mobile-menu nav .mobile-menu__home{min-height:56px;padding:0 12px;display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--blue);color:var(--blue);font-size:17px;font-weight:700;text-decoration:none}
.mobile-menu nav details{border-bottom:1px solid var(--line);transition:background .18s}
.mobile-menu nav details[open]{background:var(--blue-soft);border-bottom-color:transparent}
.mobile-menu nav summary{min-height:58px;padding:0 12px;display:flex;align-items:center;gap:10px;list-style:none;color:var(--navy);font-size:17px;font-weight:700;cursor:pointer}
.mobile-menu nav summary::-webkit-details-marker{display:none}
.mobile-menu nav summary::after{content:"+";flex:none;margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--blue);font-size:17px;font-weight:400;line-height:1}
.mobile-menu nav details[open] summary::after{content:"\2212";background:var(--blue);border-color:var(--blue);color:#fff}
.mobile-menu nav details[open] summary .nav-ic{opacity:1;color:var(--blue)}
.mobile-menu nav details>div{padding:0 12px 10px 23px;display:flex;flex-direction:column}
.mobile-menu nav details a{min-height:44px;display:flex;align-items:center;color:#41576a;font-size:14.5px;font-weight:600;line-height:1.35;text-decoration:none;border-top:1px solid rgba(8,38,62,.08)}
.mobile-menu nav details a:first-child{border-top:0}
.mobile-menu nav details a::before{content:"";flex:none;width:5px;height:5px;margin-right:11px;border-radius:50%;background:var(--blue);opacity:.45}
.mobile-menu nav details a:active{color:var(--blue)}
.mobile-menu nav details a:active::before{opacity:1}
.mobile-menu__cta{min-height:48px;margin:24px 0 16px;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-weight:700;text-decoration:none}

/* Footer — 4 columns mirroring the CN site footer (brand | quick access | navigate | contact) */
.site-footer{padding:58px 0 24px;background:var(--navy-dark);border-top:1px solid rgba(255,255,255,.15);color:#dbe5ec}
/* Column four is the QR, sized to its content; the two long enquiry lines moved
   out to their own band below. Stacking logo + blurb + QR in column one made
   that column much taller than the rest and left the right side empty. */
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr auto;gap:44px;padding:0 0 28px;align-items:start}
.footer-qr-col{justify-self:end}
/* Symmetric padding: with only a top value the last line of one band sat
   directly on the next band's rule. */
.footer-band{padding:26px 0 28px;border-top:1px solid rgba(255,255,255,.12)}
.footer-contact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px 26px;margin:15px 0 0;padding:0;list-style:none}
.footer-contact-row li{display:flex;align-items:flex-start;gap:9px}
.footer-contact-row .ic{width:16px;height:16px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--gold)}
.footer-contact-row strong{display:block;margin-bottom:3px;font-size:12.5px;font-weight:600;color:#fff}
.footer-contact-row a,.footer-contact-row span{display:block;font-size:13px;line-height:1.6;color:#aebdca;text-decoration:none}
.footer-contact-row a:hover{color:var(--gold-light)}
.footer-campuses{padding:26px 0 38px;border-top:1px solid rgba(255,255,255,.12)}
/* auto-fit, not a fixed 4: there are five campuses now and the count changes.
   A hardcoded column count orphans the last one onto a row of its own. */
.footer-campus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:20px 26px;margin:15px 0 0;padding:0;list-style:none}
.footer-campus-grid li{display:flex;align-items:flex-start;gap:9px}
.footer-campus-grid .ic{width:16px;height:16px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--gold)}
.footer-campus-grid strong{display:block;margin-bottom:3px;font-size:12.5px;font-weight:600;color:#fff}
.footer-campus-grid span{display:block;font-size:12px;line-height:1.6;color:#aebdca}
.footer-line{display:block;font-size:12.5px;line-height:1.6;color:#aebdca}
/* Direct child only. As `.footer-brand img` this also hit the QR nested in
   .footer-contact, and brightness(0) invert(1) flattened the code into a
   solid white square - the "QR not showing" report. */
.footer-brand > img{width:200px;filter:brightness(0) invert(1)}
.footer-brand p{max-width:410px;margin:22px 0 0;font-size:14px;color:#aebdca}
/* In its own column the QR reads best stacked with the caption under it.
   Capped at 200px by the site rule; 104px is what this column needs. */
.footer-qr-group{display:flex;gap:16px}
.footer-qr-group .hl-cta-qr-panel{margin:0;text-align:center}
.footer-qr-group .hl-cta-qr-panel img{width:104px;height:104px;max-width:200px;max-height:200px;object-fit:contain;background:#fff;border-radius:4px;padding:5px}
.footer-qr-group figcaption{margin:9px auto 0;max-width:118px;font-size:11.5px;line-height:1.5;color:#aebdca}
.hl-cta-qr-panel img{width:120px;height:120px;max-width:200px;max-height:200px;object-fit:contain;background:#fff;border-radius:4px}
.footer-contact figcaption{margin-top:6px;font-size:11px;color:#aebdca}
.site-footer .hl-cta-online-btn{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;text-decoration:none;border-radius:3px}
.site-footer .hl-cta-online-btn:hover{background:var(--gold);color:var(--navy-dark)}
.footer-nav__head{margin:0 0 10px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.footer-nav__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-nav__link{width:max-content;font-size:14px;color:#dbe5ec;text-decoration:none}
.footer-nav__link:hover{color:var(--gold-light)}
.site-footer__bottom{padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:24px;font-size:10px;color:#8fa2b1}

/* Baseline furniture recolor (behavior stays in theme.js — L113) */
.hl-back-to-top{background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:2px}
.hl-toc-item.is-active{border-left-color:var(--blue)}
.hl-toc-item.is-active>a{color:var(--navy)}
.hl-toc-head{color:var(--muted)}
.hl-prose{--hl-prose-accent:var(--blue);--hl-prose-heading:var(--navy)}

/* News list — bespoke card grid in the v3 language (L149) */
/* ---- News list (redesigned) -------------------------------------------
   Masthead + series chips + one lead card, so the page reads as an edited
   index instead of six identical tiles. Card text blocks are clamped to a
   fixed number of lines: excerpt lengths differ, and without a clamp the
   bottoms of a row go ragged. */
.hl-news-masthead{padding:clamp(36px,4.6vw,58px) 0 clamp(26px,3.4vw,38px);background:var(--light);border-bottom:1px solid var(--line)}
.hl-news-kicker{margin:0 0 10px;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.hl-news-masthead h1{margin:0;font-size:clamp(28px,3.7vw,44px);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--navy)}
.hl-news-intro{max-width:620px;margin:14px 0 0;font-size:15px;line-height:1.7;color:var(--muted)}
.hl-news-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.hl-news-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 15px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.hl-news-chip span{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--muted)}
.hl-news-chip:hover{border-color:var(--blue);color:var(--blue)}
.hl-news-chip.is-current{background:var(--blue);border-color:var(--blue);color:#fff}
.hl-news-chip.is-current span{color:rgba(255,255,255,.72)}

.hl-news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none}
.hl-news-list>li{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:5px;box-shadow:0 9px 25px rgba(8,38,62,.065);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.hl-news-list>li:hover{transform:translateY(-3px);border-color:#b9d7df;box-shadow:0 15px 32px rgba(8,38,62,.105)}
/* The newest item is marked with a gold rule only. A spanning lead card was
   tried first and dropped: with no cover images a text card stretched across
   two columns takes its height from its neighbour and leaves a large void
   under the excerpt. Bring the lead back if/when these posts get artwork. */
.hl-news-list>li:first-child{border-top-color:var(--gold)}
/* contain, not cover: the artwork is a mix of wide banners, square crests and
   upright portraits. A 16:9 crop beheaded the crests and sliced the wording
   off the competition banners, so the whole image is shown on a tinted panel. */
.hl-news-list .hl-news-cover{background:var(--light);border-bottom:1px solid var(--line)}
/* Panel padding only. object-fit CANNOT be set here: the post-featured-image
   block writes it as an inline style, which beats any stylesheet - it is set
   via the block's own "scale" attribute in templates/index.html instead. */
.hl-news-list .hl-news-cover img{padding:14px}
.hl-news-list .hl-news-cat{padding:18px 22px 0;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.hl-news-list .hl-news-cat a{color:var(--blue);text-decoration:none}
.hl-news-list .hl-news-cat a:hover{text-decoration:underline}
.hl-news-list .hl-news-date{padding:7px 22px 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#d79519}
.hl-news-list .hl-news-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em;padding:8px 22px 4px;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.hl-news-list .hl-news-title a{color:var(--navy);text-decoration:none}
.hl-news-list .hl-news-title a:hover{color:var(--blue)}
.hl-news-list .hl-news-excerpt{padding:0 22px 22px;font-size:13px;color:var(--muted)}
.hl-news-list .hl-news-excerpt p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;line-height:1.62}

/* Article masthead — wide typographic head over narrow body column (L149/L154) */
/* Article masthead. .hl-article-head keeps the baseline 760px centred column
   (do NOT set max-width:100% here again - that is what pushed the title away
   from the body's left edge); the tint comes from the wrapper instead. */
.hl-article-masthead{padding:clamp(34px,4.2vw,52px) 0 clamp(26px,3.4vw,38px);background:var(--light);border-bottom:1px solid var(--line)}
.hl-article-head{padding:0;border-bottom:0}
.hl-article-head .hl-article-cat{margin:0 0 12px;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hl-article-head .hl-article-cat a{color:var(--blue);text-decoration:none}
.hl-article-head .hl-article-cat a:hover{text-decoration:underline}
.hl-article-head .wp-block-post-title{margin:0 0 12px;font-size:clamp(29px,3.9vw,46px);font-weight:800;line-height:1.12;letter-spacing:-.028em;color:var(--navy);max-width:none}
.hl-article-head .wp-block-post-date{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.hl-article-standfirst{margin:18px 0 0}
.hl-article-standfirst p{margin:0;font-size:17px;line-height:1.68;color:var(--muted)}
.hl-article-standfirst .wp-block-post-excerpt__more-link{display:none}
/* Inline article figures. Captions are optional - several images are official
   competition marks that speak for themselves and read worse with a label. */
.hl-prose .hl-fig{margin:30px 0;padding:0}
/* max-width, not width: a 300px-wide competition mark stretched to the full
   760px reading column looked soft. Small artwork now sits at native size. */
.hl-prose .hl-fig img{display:block;max-width:100%;width:auto;height:auto;margin-inline:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.hl-prose .hl-fig figcaption{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--muted)}
/* cover image sits between masthead and prose, at reading width */
.hl-article-cover{max-width:var(--hl-content-narrow,760px);margin:0 auto 6px}
.hl-article-cover img{width:100%;border-radius:6px}

@media(max-width:1120px){
  .site-header__inner{grid-template-columns:185px minmax(0,1fr) 82px;gap:10px}
  .brand{width:178px}
  .nav-group>button,.nav-group>.nav-group__top{padding-inline:9px;font-size:11px}
  .header-cta{padding-inline:12px}
}

@media(max-width:820px){
  :root{--shell:min(100% - 36px,740px);--chrome-h:106px}
  .preview-bar__inner{justify-content:space-between}
  .preview-bar__inner>span{display:block;max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-links{gap:0}
  .topbar-links a:first-child{display:none}
  .site-header{border-bottom:1px solid var(--line)}
  .site-header__inner{position:relative;height:68px;grid-template-columns:1fr auto;max-width:calc(100% - 36px)}
  .desktop-nav,.header-cta{display:none}
  .menu-toggle{display:flex;position:absolute;right:0;top:10px;width:48px;height:48px;border:1px solid var(--line);border-radius:2px;background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer}
  .menu-toggle span{width:23px;height:2px;background:var(--navy);transition:transform .2s}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
  .hl-news-list{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-qr-col{justify-self:start}
}

@media(max-width:560px){
  :root{--shell:calc(100% - 32px)}
  .preview-bar__inner>span{max-width:68%;font-size:9px}
  .preview-bar a{font-size:9px}
  .brand{width:178px}
  .hl-news-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .footer-brand{grid-column:1/-1}
  .footer-qr-col{grid-column:1/-1;justify-self:start}
  .site-footer__bottom{flex-direction:column;gap:6px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
/* news list: pagination as controls, and cards without artwork use the space
   for text instead of leaving a hole beside illustrated neighbours */
.hl-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:34px 0 0;
  font-size:13.5px;font-weight:600}
.hl-pagination a,.hl-pagination .page-numbers{display:inline-flex;align-items:center;
  justify-content:center;min-width:38px;min-height:38px;padding:0 13px;background:#fff;
  border:1px solid var(--line);border-radius:999px;color:var(--navy);text-decoration:none;
  transition:border-color .15s,color .15s,background .15s}
.hl-pagination a:hover{border-color:var(--blue);color:var(--blue)}
.hl-pagination .current{background:var(--navy);border-color:var(--navy);color:#fff}
.hl-pagination .wp-block-query-pagination-previous,
.hl-pagination .wp-block-query-pagination-next{border:0;background:none;min-width:0;
  padding:0 4px;color:var(--blue)}
.hl-news-list>li:not(:has(.hl-news-cover)) .hl-news-title{-webkit-line-clamp:4;min-height:0}
.hl-news-list>li:not(:has(.hl-news-cover)) .hl-news-excerpt p{-webkit-line-clamp:9}
.hl-news-list>li:not(:has(.hl-news-cover)) .hl-news-cat{padding-top:24px}