/* ============================================================================
   John Locke EN · chrome.css  (build-chrome · johnlocke-en)
   Editorial Review (B×C light) · Ink Navy + Antique Gold on white/cool-grey
   Fonts loaded via Site Tools code_head (Fraunces / Newsreader / Hanken Grotesk).
   Loaded AFTER baseline style.css (via <link> in parts/header.html) so the
   :root overrides below win the cascade.
   ============================================================================ */

:root{
  /* project tokens */
  --jl-ink:#14253E; --jl-ink-2:#1D3354; --jl-ink-deep:#0E1B30;
  --jl-gold:#A98841; --jl-gold-lite:#C2A463; --jl-gold-deep:#8C6B2A;
  --jl-paper:#FFFFFF; --jl-cool:#F5F7FA; --jl-cool-2:#EEF1F5;
  --jl-text:#2C2830; --jl-muted:#697078; --jl-hair:#E5E8EE;
  --jl-display:'Fraunces',Georgia,'Times New Roman',serif;
  --jl-body:'Newsreader',Georgia,'Times New Roman',serif;
  --jl-ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  /* override baseline preset vars so .hl-prose / TOC / markers / links pick up brand */
  --wp--preset--color--accent:#A98841;
  --wp--preset--color--heading:#14253E;
  --wp--preset--color--body:#2C2830;
  --wp--preset--color--muted:#697078;
  --wp--preset--color--border:#E5E8EE;
}

/* base typography (override baseline Inter) */
body{font-family:var(--jl-body);color:var(--jl-text);background:var(--jl-paper);}
h1,h2,h3,h4,.jl-display{font-family:var(--jl-display);}
.hl-prose h2,.hl-prose h3,.hl-prose h4{font-family:var(--jl-display);letter-spacing:-.01em;}
.hl-prose{font-family:var(--jl-body);}

/* ============================ HEADER ============================ */
.jl-header{background:var(--jl-paper);border-bottom:1px solid var(--jl-hair);}
.jl-header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:22px;}
.jl-brand{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;}
.jl-logo{height:50px;width:auto;display:block;}
.jl-nav-desktop{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;}
.jl-nav-link{font-family:var(--jl-ui);font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--jl-ink);text-decoration:none;padding:6px 2px;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.jl-nav-link:hover{color:var(--jl-gold-deep);}
.jl-nav-link.is-current{color:var(--jl-ink);border-bottom-color:var(--jl-gold);font-weight:600;}
.jl-header-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.jl-cta{font-family:var(--jl-ui);font-size:13px;font-weight:700;letter-spacing:.01em;text-decoration:none;color:#23210e;padding:10px 18px;border-radius:3px;white-space:nowrap;
  background:linear-gradient(100deg,var(--jl-gold-deep),var(--jl-gold-lite) 50%,var(--jl-gold-deep));
  box-shadow:0 1px 2px rgba(20,37,62,.12);transition:filter .15s,transform .15s;}
.jl-cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
.jl-burger{display:none;align-items:center;justify-content:center;background:none;border:0;padding:8px;margin:-8px;color:var(--jl-ink);cursor:pointer;}

/* ============================ MOBILE DRAWER ============================ */
.jl-drawer{position:fixed;inset:0;z-index:60;}
.jl-drawer[hidden]{display:none;}
.jl-drawer-scrim{position:absolute;inset:0;background:rgba(10,16,28,.5);backdrop-filter:saturate(120%) blur(1px);}
.jl-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,330px);box-sizing:border-box;
  background:var(--jl-paper);padding:20px 22px;display:flex;flex-direction:column;gap:6px;
  box-shadow:-12px 0 40px rgba(10,16,28,.28);animation:jlSlideIn .22s ease;}
@keyframes jlSlideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.jl-drawer-close{align-self:flex-end;background:none;border:0;padding:8px;margin:-4px -6px 6px 0;color:var(--jl-ink);cursor:pointer;}
.jl-drawer-nav{display:flex;flex-direction:column;}
.jl-drawer-link{font-family:var(--jl-ui);font-size:15px;font-weight:500;color:var(--jl-ink);text-decoration:none;padding:12px 2px;border-bottom:1px solid var(--jl-hair);}
.jl-drawer-link.is-current{color:var(--jl-gold-deep);font-weight:700;}
.jl-drawer-cta{margin-top:16px;text-align:center;}

/* show drawer toggle / hide desktop nav below 1024px (8 nav items need room) */
@media (max-width:1024px){
  .jl-nav-desktop{display:none;}
  .jl-burger{display:inline-flex;}
}
@media (max-width:520px){
  .jl-header-right .jl-cta{display:none;} /* keep burger only on very small screens */
}

/* ============================ FOOTER ============================ */
.jl-footer{background:var(--jl-ink);color:#C9CEDA;padding:56px 24px 26px;}
.jl-footer-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;align-items:start;}
.jl-footer-contact-note{font-family:var(--jl-ui);font-size:12.5px;line-height:1.5;color:#8E96A8;margin:16px 0 4px;}
/* footer brand = logo image, bg recolored #0E2050 → footer navy #14253E so it sits seamlessly (media 129) */
.jl-footer-brand-link{display:inline-block;text-decoration:none;margin-bottom:16px;}
.jl-footer-logo{display:block;height:36px;width:auto;}
.jl-footer-tag{font-family:var(--jl-ui);font-size:13px;line-height:1.65;color:#A9B0C0;max-width:360px;margin:0 0 18px;}
.jl-footer-qr{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;}
.jl-qr{width:104px;height:104px;object-fit:contain;background:#fff;border-radius:6px;padding:5px;display:block;}
.jl-footer-qr-cap{font-family:var(--jl-ui);font-size:11.5px;letter-spacing:.04em;color:#8E96A8;margin:10px 0 0;}
.jl-footer-h{font-family:var(--jl-ui);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 14px;}
.jl-footer-list{list-style:none;margin:0;padding:0;}
.jl-footer-list li{margin:0 0 9px;}
.jl-footer-link{font-family:var(--jl-ui);font-size:13.5px;color:#C9CEDA;text-decoration:none;transition:color .15s;}
.jl-footer-link:hover{color:var(--jl-gold-lite);}
.jl-footer-chat{display:inline-block;margin-top:8px;font-family:var(--jl-ui);font-size:13.5px;font-weight:600;color:var(--jl-gold-lite);text-decoration:none;}
.jl-footer-chat:hover{color:#fff;}
.jl-footer-bottom{max-width:1120px;margin:36px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:10px;}
.jl-footer-disclaimer{font-family:var(--jl-ui);font-size:11.5px;line-height:1.6;color:#8E96A8;max-width:760px;}
.jl-footer-legal{font-family:var(--jl-ui);font-size:12px;color:#A9B0C0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.jl-footer-legal a{color:#A9B0C0;text-decoration:none;}
.jl-footer-legal a:hover{color:var(--jl-gold-lite);}
.jl-footer-legal .jl-dot{opacity:.5;}
@media (max-width:1024px){
  .jl-footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:560px){
  .jl-footer-grid{grid-template-columns:1fr;gap:28px;}
}

/* ============================ ARTICLE DETAIL — wider + richer (user: 太素 / 内容宽一些) ============ */
/* widen the reading column 760 → 840, and re-fit the floating TOC into the (now smaller) left gutter */
:root{ --hl-content-narrow:840px; }
.hl-toc-float{ --hl-toc-width:170px; --hl-reading-half:420px; left:calc(50% - var(--hl-reading-half) - var(--hl-toc-width) - 22px); top:108px; }
.hl-toc-head{font-family:var(--jl-ui);letter-spacing:.16em;text-transform:uppercase;}
.hl-toc-item a{font-family:var(--jl-ui);}
.hl-toc-item.is-active{border-left-color:var(--jl-gold)!important;}
.hl-toc-item.is-active>a{color:var(--jl-ink)!important;}

/* back-to-top */
.hl-back-to-top{background:var(--jl-ink)!important;color:#fff!important;border:1px solid var(--jl-gold)!important;}
.hl-back-to-top:hover{background:var(--jl-ink-2)!important;}

/* article header — cover banner + editorial title + meta */
.hl-article-head .wp-block-post-title,.hl-article-head h1{font-family:var(--jl-display);font-weight:800;font-size:clamp(31px,4.3vw,48px);line-height:1.07;letter-spacing:-.015em;color:var(--jl-ink);margin:8px 0 12px;}
.hl-article-cover{margin:0 0 24px!important;}
.hl-article-cover img{width:100%;max-height:400px;object-fit:cover;border-radius:12px;box-shadow:0 18px 46px rgba(20,37,62,.16);}
.hl-breadcrumb{font-family:var(--jl-ui);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--jl-muted);}
.hl-breadcrumb a{color:var(--jl-gold-deep);text-decoration:none;}
.hl-post-meta{font-family:var(--jl-ui);color:var(--jl-muted);font-size:13px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:6px;padding-bottom:18px;border-bottom:1px solid var(--jl-hair);}
.hl-post-meta .reading-time::before{content:"·\00a0";color:var(--jl-gold);}
.hl-cat-badge,.hl-post-meta .hl-cat-badge{background:var(--jl-cool-2);color:var(--jl-gold-deep);font-family:var(--jl-ui);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px;padding:3px 10px;border-radius:99px;}

/* prose — richer editorial type */
.hl-prose{font-family:var(--jl-body);font-size:18px;line-height:1.82;color:#2b2f36;}
.hl-prose > p:first-of-type::first-letter{float:left;font-family:var(--jl-display);font-weight:600;font-size:3.5em;line-height:.78;padding:8px 12px 0 0;color:var(--jl-gold-deep);}
.hl-prose h2{font-family:var(--jl-display);font-weight:700;font-size:clamp(23px,2.8vw,29px);color:var(--jl-ink);margin:2.1em 0 .55em;}
.hl-prose h2::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--jl-gold),var(--jl-gold-lite));margin-bottom:14px;}
.hl-prose h3{font-family:var(--jl-display);font-weight:600;font-size:21px;color:var(--jl-ink-2);margin:1.7em 0 .45em;}
.hl-prose a{color:var(--jl-gold-deep);text-decoration:none;border-bottom:1px solid rgba(169,136,65,.45);}
.hl-prose a:hover{border-bottom-color:var(--jl-gold-deep);}
.hl-prose strong{color:var(--jl-ink);font-weight:700;}
.hl-prose blockquote{margin:1.7em 0;padding:20px 26px;background:var(--jl-cool);border-left:3px solid var(--jl-gold);border-radius:0 10px 10px 0;font-family:var(--jl-display);font-style:italic;font-size:21px;line-height:1.5;color:var(--jl-ink);}
.hl-prose blockquote p{margin:0;}
.hl-prose ul li::marker{color:var(--jl-gold);}
.hl-prose ol li::marker{color:var(--jl-gold-deep);font-weight:700;}
.hl-prose img{border-radius:8px;}
.hl-prose figure figcaption{font-family:var(--jl-ui);font-size:12.5px;color:var(--jl-muted);margin-top:8px;}
.hl-prose hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--jl-hair) 30%,var(--jl-hair) 70%,transparent);margin:2.4em 0;}

/* in-content CTA card (auto-injected mid + end) — navy card, gold button */
.hl-article-cta{background:var(--jl-ink);color:#e9e4d7;border-radius:12px;padding:28px 30px;margin:2.6em 0;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;}
.hl-article-cta-title{font-family:var(--jl-display);color:#fff;font-weight:700;font-size:23px;margin:0 0 6px;}
.hl-article-cta-sub{color:#c4beb0;font-size:15px;line-height:1.55;margin:0 0 14px;max-width:430px;}
.hl-article-cta-bullets{margin:0 0 16px;padding:0;list-style:none;}
.hl-article-cta-bullets li{font-family:var(--jl-ui);font-size:13.5px;color:#cfd4df;padding:3px 0 3px 20px;position:relative;}
.hl-article-cta-bullets li::before{content:"›";position:absolute;left:4px;color:var(--jl-gold-lite);}
.hl-cta-online-btn{display:inline-block;font-family:var(--jl-ui);font-weight:700;font-size:14px;color:#23210e;padding:11px 22px;border-radius:4px;text-decoration:none;background:linear-gradient(100deg,var(--jl-gold-deep),var(--jl-gold-lite) 50%,var(--jl-gold-deep));}
.hl-cta-qr-panel figcaption{font-family:var(--jl-ui);color:#c4beb0;}
.hl-cta-qr-panel{display:block!important;}
.hl-cta-scan-img,.hl-cta-qr-img{background:#fff;border-radius:8px;padding:6px;}

/* related posts + prev/next */
.hl-related-title,.hl-related h2{font-family:var(--jl-display);color:var(--jl-ink);}
.hl-related-card,.hl-related li{border-color:var(--jl-hair);}
.hl-post-nav a{font-family:var(--jl-ui);color:var(--jl-ink);}
.hl-post-tags a{font-family:var(--jl-ui);background:var(--jl-cool-2);color:var(--jl-gold-deep);border-radius:99px;padding:4px 12px;font-size:12px;text-decoration:none;}

/* ============================ LIST PAGE — cards archetype (baseline 3-col grid) + brand + clamp ============ */
/* baseline §21 body.hl-list-cards already gives a uniform 3-col image-card grid (no giant first card).
   Here we add brand colour/type + the real line-clamp (on the <a>/<p> text leaves, NOT the wrappers —
   the wrappers' children are block-level so clamping them does nothing). */
/* 🔴 archive/list uses the WIDE container (1200px, like the rest of the site) — the baseline archive
   template wraps the list in .hl-container--narrow (the article reading column, 840px here), which is
   far too narrow for a 3-col card grid. Override it back to full content width on list pages. */
body.archive .hl-archive-main, body.blog .hl-archive-main{max-width:var(--hl-content-max,1200px);}
body.hl-list-cards .hl-news-list{gap:26px;}
body.hl-list-cards .hl-news-list > li{border:1px solid var(--jl-hair);border-radius:12px;transition:box-shadow .18s,transform .18s;}
body.hl-list-cards .hl-news-list > li:hover{box-shadow:0 16px 40px rgba(20,37,62,.13);transform:translateY(-3px);}
body.hl-list-cards .hl-news-cover img{width:100%;display:block;height:auto;aspect-ratio:16/10;object-fit:cover;}
body.hl-list-cards .hl-news-date{font-family:var(--jl-ui);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--jl-gold-deep);padding-top:16px;}
body.hl-list-cards .hl-news-title{font-family:var(--jl-display);font-size:17px;line-height:1.3;}
body.hl-list-cards .hl-news-title a{color:var(--jl-ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
body.hl-list-cards .hl-news-title a:hover{color:var(--jl-gold-deep);}
body.hl-list-cards .hl-news-excerpt{padding-bottom:20px;}
body.hl-list-cards .hl-news-excerpt p{color:#5a626c;font-size:13.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* home "From the Journal" cards (now dynamic via [jl_home_journal]) — clamp titles for uniform cards */
.jl-jt{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ============================ ARCHIVE PAGINATION — styled buttons (was default WP block) ============ */
.hl-pagination{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:46px;}
.hl-pagination .wp-block-query-pagination-numbers{display:flex;gap:8px;flex-wrap:wrap;}
.hl-pagination a.page-numbers,.hl-pagination span.page-numbers,.hl-pagination .wp-block-query-pagination-previous,.hl-pagination .wp-block-query-pagination-next{font-family:var(--jl-ui);font-size:14px;font-weight:500;min-width:42px;height:42px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--jl-hair);border-radius:8px;color:var(--jl-ink);text-decoration:none;transition:border-color .15s,color .15s,background .15s;box-sizing:border-box;}
.hl-pagination a.page-numbers:hover,.hl-pagination .wp-block-query-pagination-previous:hover,.hl-pagination .wp-block-query-pagination-next:hover{border-color:var(--jl-gold);color:var(--jl-gold-deep);background:var(--jl-cool);}
.hl-pagination .page-numbers.current{background:var(--jl-ink);color:#fff;border-color:var(--jl-ink);font-weight:700;}
.hl-pagination .wp-block-query-pagination-previous,.hl-pagination .wp-block-query-pagination-next{font-weight:600;letter-spacing:.01em;}
.hl-pagination .page-numbers.dots{border:0;min-width:auto;padding:0 4px;background:none;color:var(--jl-muted);}