/* ===================================================================
   Path — News & PR pages (news/ listing + articles)
   Same Path Web Style Pack tokens as the home page (index.html).
   If you change a token there, change it here too.
   =================================================================== */
:root{
  --path-primary:#5CC271; --path-primary-light:#69E282; --path-primary-soft:#8FECA1;
  --path-primary-dark:#297D2D; --path-primary-highlight:#263228;
  --path-pink:#EB5181; --path-pink-deep:#AD4162;
  --path-cyan:#29C9E1; --path-cyan-deep:#2D9DB7;

  --bg-canvas:#F8F8F8; --bg-surface:#FFFFFF; --bg-raised:#FFFFFF; --bg-sunken:#F5F5F5; --bg-hover:#F3F3F3;
  --border-subtle:#EAECF0; --border-default:#D8DBD8; --border-strong:#AFB3AF;
  --fg-1:#1E1E1E; --fg-2:#454745; --fg-3:#747973; --fg-4:#919593;
  --fg-brand:#297D2D;
  --primary-ink:#037847;

  --tint-green:rgba(92,194,113,.16); --tint-green-2:rgba(92,194,113,.09);
  --tint-pink:rgba(235,81,129,.13); --tint-cyan:rgba(41,201,225,.13);
  --topbar-bg:rgba(248,248,248,.78);
  --glow-opacity:.55;

  --font-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Roboto',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --maxw:1180px;
  --topbar-h:64px;
  --radius:14px; --radius-lg:20px; --radius-sm:10px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-3:0 18px 50px rgba(16,24,40,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg-canvas:#0A0A0A; --bg-surface:#141414; --bg-raised:#1A1A1A; --bg-sunken:#050505; --bg-hover:#1F1F1F;
  --border-subtle:#1C1C1C; --border-default:#232323; --border-strong:#303030;
  --fg-1:#FFFFFF; --fg-2:#DCDFDD; --fg-3:#9CA09D; --fg-4:#6E6E6E;
  --fg-brand:#5CC271;
  --primary-ink:#6FE284;
  --tint-green:rgba(92,194,113,.14); --tint-green-2:rgba(92,194,113,.08);
  --tint-pink:rgba(235,81,129,.14); --tint-cyan:rgba(41,201,225,.14);
  --topbar-bg:rgba(10,10,10,.72);
  --glow-opacity:1;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.20);
  --shadow-3:0 18px 50px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg-canvas); color:var(--fg-2);
  font-family:var(--font-body); font-weight:300; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .3s, color .3s;
}
::selection{background:rgba(92,194,113,.30); color:var(--fg-1)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--fg-1); margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.12}
.ic{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ic-sm{width:16px; height:16px}
.micro{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px)}

/* ---------- reading progress ---------- */
#progress{position:fixed; top:0; left:0; height:2px; width:0%; z-index:120;
  background:linear-gradient(90deg,var(--path-primary),var(--path-cyan))}

/* ---------- top bar (same as the home page) ---------- */
.topbar{position:fixed; inset:0 0 auto 0; height:var(--topbar-h); z-index:100;
  display:flex; align-items:center; gap:14px; padding:0 clamp(16px,4vw,32px);
  background:var(--topbar-bg); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border-subtle)}
.topbar .logo{height:60px; width:auto; flex:none}
.logo-light{display:none}
[data-theme="light"] .logo-light{display:block}
[data-theme="light"] .logo-dark{display:none}
.topbar nav{display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{font-family:var(--font-head); font-size:12.5px; font-weight:500; color:var(--fg-3);
  padding:7px 10px; border-radius:8px; white-space:nowrap; transition:color .15s, background .15s}
.topbar nav a:hover{color:var(--fg-1); background:var(--bg-hover)}
.topbar nav a.active{color:var(--fg-brand); background:var(--tint-green-2)}
.topbar .actions{display:flex; align-items:center; gap:8px; margin-left:6px; flex:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-head);
  font-weight:500; font-size:13.5px; border-radius:11px; padding:9px 18px; border:1px solid transparent;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--path-primary); color:#06140A; border-color:var(--path-primary)}
.btn-primary:hover{background:var(--path-primary-light)}
.btn-ghost{color:var(--fg-2); border-color:var(--border-default); background:transparent}
.btn-ghost:hover{border-color:var(--border-strong); color:var(--fg-1); background:var(--bg-hover)}
.btn-lg{font-size:15px; padding:13px 26px; border-radius:13px}
.theme-toggle{width:36px; height:36px; border-radius:10px; border:1px solid var(--border-default);
  background:transparent; color:var(--fg-3); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none; transition:color .15s, border-color .15s, background .15s}
.theme-toggle:hover{color:var(--fg-1); border-color:var(--border-strong); background:var(--bg-hover)}
.theme-toggle .ic{width:17px; height:17px}
.theme-toggle .sun{display:none}
[data-theme="light"] .theme-toggle .sun{display:block}
[data-theme="light"] .theme-toggle .moon{display:none}
/* Narrow screens: the full nav hides (as on the home page) but News & PR stays. */
@media (max-width:1120px){.topbar nav a:not(.nav-news){display:none}}
@media (max-width:560px){.topbar .btn-login, .topbar nav{display:none}}

/* ---------- section tag ---------- */
.tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3)}
.tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--path-primary);
  box-shadow:0 0 0 4px var(--tint-green)}
.tag a{color:inherit} .tag a:hover{color:var(--fg-1)}
.tag .sep{color:var(--fg-4)}
.tag .kind{color:var(--path-pink)}

/* ---------- page glow (quiet echo of the hero) ---------- */
.page-glow{position:absolute; inset:0 0 auto 0; height:620px; z-index:0; pointer-events:none; opacity:var(--glow-opacity); overflow:hidden}
.page-glow::before{content:""; position:absolute; top:-260px; right:-8%; width:min(760px,70vw); aspect-ratio:1.15; border-radius:50%;
  background:radial-gradient(closest-side, rgba(92,194,113,.16), rgba(92,194,113,.05) 55%, transparent 72%)}
.page-glow::after{content:""; position:absolute; top:120px; left:-12%; width:min(560px,60vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(41,201,225,.07), transparent 70%)}
main{position:relative}

/* ---------- byline ---------- */
.byline{display:flex; align-items:center; gap:13px}
.avatar{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--bg-canvas); box-shadow:0 0 0 1.5px var(--path-primary)}
.avatar.sm{width:36px; height:36px}
.avatar.lg{width:68px; height:68px}
.byline .who{font-family:var(--font-head); font-weight:500; font-size:14.5px; color:var(--fg-1); line-height:1.3}
.byline .meta{font-size:13px; color:var(--fg-3); margin-top:2px; line-height:1.35}
.byline .meta .dot{margin:0 7px; color:var(--fg-4)}
.byline .meta span, .byline .meta time{white-space:nowrap}

/* ============ NEWS LISTING ============ */
.news-head{position:relative; z-index:1; padding:calc(var(--topbar-h) + clamp(48px,7vw,88px)) 0 0}
.news-head h1{font-size:clamp(34px,5vw,56px); margin:18px 0 0; letter-spacing:-.03em}
.news-head .lead{font-size:clamp(16px,1.7vw,19px); color:var(--fg-2); margin:16px 0 0; max-width:58ch; line-height:1.55}
.news-list{position:relative; z-index:1; padding:clamp(36px,5vw,56px) 0 clamp(72px,9vw,110px)}
.feature{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease), border-color .3s}
.feature:hover{transform:translateY(-3px); border-color:var(--border-strong)}
/* The art is 16:9 with text baked in, so never crop it: centre it on a matching dark panel. */
.feature .pic{position:relative; background:#0D121A; display:flex; align-items:center}
.feature .pic img{width:100%; height:auto; aspect-ratio:16/9}
.feature .body{padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:0}
.feature .kicker{font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4)}
.feature .kicker .kind{color:var(--path-pink)}
.feature h2{font-size:clamp(22px,2.4vw,29px); margin:14px 0 0; line-height:1.18}
.feature .dek{font-size:15px; color:var(--fg-3); margin:12px 0 0; line-height:1.6}
.feature .byline{margin-top:auto; padding-top:24px}
.feature .more{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--font-head);
  font-weight:500; font-size:14px; color:var(--fg-brand)}
.feature .more .ic{transition:transform .25s var(--ease)}
.feature:hover .more .ic{transform:translateX(4px)}
@media (max-width:900px){.feature{grid-template-columns:1fr}}

.press{margin-top:22px; background:var(--bg-surface); border:1px solid var(--border-default); border-left:3px solid var(--path-pink);
  border-radius:var(--radius-sm); padding:20px 24px; font-size:14.5px; color:var(--fg-3)}
.press b{font-family:var(--font-head); font-weight:600; color:var(--fg-1); display:block; margin-bottom:5px; font-size:15px}
.press a{color:var(--fg-brand); text-decoration:underline; text-underline-offset:3px}

/* ============ ARTICLE ============ */
/* --read-w is the width of the text itself; padding sits outside it (content-box). */
.art-head, .art-hero, .prose, .art-foot{--read-w:820px; box-sizing:content-box}
.art-head{position:relative; z-index:1; max-width:var(--read-w); margin:0 auto;
  padding:calc(var(--topbar-h) + clamp(44px,6vw,80px)) clamp(20px,5vw,40px) 0}
.art-head h1{font-size:clamp(30px,4.3vw,50px); margin:20px 0 0; letter-spacing:-.03em; line-height:1.1}
.art-head .dek{font-family:var(--font-head); font-weight:400; font-size:clamp(17px,1.9vw,21px); color:var(--fg-2);
  margin:20px 0 0; line-height:1.5; letter-spacing:-.005em; max-width:62ch}
.art-head .byline{margin-top:30px; padding-top:24px; border-top:1px solid var(--border-subtle)}

.art-hero{position:relative; z-index:1; max-width:var(--read-w); margin:clamp(32px,4vw,48px) auto 0; padding:0 clamp(20px,5vw,40px)}
.art-hero img{width:100%; height:auto; border-radius:var(--radius-lg); border:1px solid var(--border-default); box-shadow:var(--shadow-3)}

.prose{max-width:var(--read-w); margin:0 auto; padding:clamp(40px,5vw,60px) clamp(20px,5vw,40px) 0;
  font-size:clamp(17px,1.6vw,19px); line-height:1.75; color:var(--fg-2); font-weight:400}
[data-theme="dark"] .prose{font-weight:300}
.prose p{margin:0 0 1.15em}
.prose strong{font-weight:500; color:var(--fg-1)}
.prose h2{font-size:clamp(22px,2.5vw,28px); margin:2.3em 0 .75em; line-height:1.2; scroll-margin-top:calc(var(--topbar-h) + 20px)}
.prose h2::before{content:""; display:block; width:34px; height:3px; border-radius:2px; margin-bottom:18px;
  background:linear-gradient(90deg,var(--path-primary),var(--path-cyan))}

/* pull quote */
.pull{margin:1.9em 0; padding:4px 0 4px 24px; border-left:3px solid var(--path-primary)}
.pull p{font-family:var(--font-head); font-weight:400; font-size:clamp(19px,2.1vw,23px); color:var(--fg-1);
  line-height:1.42; letter-spacing:-.01em; margin:0}
.pull p + p{margin-top:.5em}

/* "from" and "to" strategic question */
.shiftq{margin:1.6em 0 1.8em; display:grid; gap:10px}
.shiftq .q{background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-1)}
.shiftq .q .l{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.shiftq .q p{font-family:var(--font-head); font-weight:500; font-size:clamp(16.5px,1.8vw,19px); color:var(--fg-1); margin:6px 0 0; line-height:1.4}
.shiftq .from{border-top:2px solid var(--border-strong)} .shiftq .from .l{color:var(--fg-4)}
.shiftq .from p{color:var(--fg-3)}
.shiftq .to{border-top:2px solid var(--path-primary); background:linear-gradient(var(--tint-green-2),var(--tint-green-2)), var(--bg-surface)}
.shiftq .to .l{color:var(--fg-brand)}
.shiftq .arrow{display:flex; justify-content:center; color:var(--fg-4)}
.shiftq .arrow .ic{transform:rotate(90deg)}

/* the four capabilities */
.caps{list-style:none; margin:1.4em 0 1.8em; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:620px){.caps{grid-template-columns:1fr}}
.caps li{background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-1)}
.caps li:nth-child(1){border-top:2px solid var(--path-primary)}
.caps li:nth-child(2){border-top:2px solid var(--path-cyan)}
.caps li:nth-child(3){border-top:2px solid var(--path-pink)}
.caps li:nth-child(4){border-top:2px solid var(--border-strong)}
.caps .n{font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--path-pink)}
.caps h3{font-size:17px; margin:8px 0 0}
.caps p{font-size:14.5px; line-height:1.6; color:var(--fg-3); margin:7px 0 0}

/* sign-off, tags, author and share */
.signoff{margin:2.6em 0 0; padding-top:24px; border-top:1px solid var(--border-subtle)}
.signoff b{font-family:var(--font-head); font-weight:600; color:var(--fg-1); font-size:15.5px}
.signoff b span{color:var(--fg-brand)}
.signoff p{margin:4px 0 0; font-size:15px; color:var(--fg-3)}
.hashtags{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none}
.hashtags li{font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.02em; color:var(--fg-3);
  padding:5px 11px; border-radius:8px; border:1px solid var(--border-default); background:var(--bg-raised)}

.art-foot{max-width:var(--read-w); margin:0 auto; padding:40px clamp(20px,5vw,40px) clamp(72px,9vw,110px)}
.author{display:flex; gap:18px; align-items:center; background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow-1)}
.author .micro{display:block; margin-bottom:4px}
.author .who{font-family:var(--font-head); font-weight:600; font-size:18px; color:var(--fg-1)}
.author .role{font-size:14px; color:var(--fg-3); margin-top:2px}
.share{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px}
.share .micro{margin-right:4px}
.share .btn{font-size:13px; padding:8px 14px}
.next{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:34px; padding-top:28px; border-top:1px solid var(--border-subtle)}

/* ---------- footer (same as the home page) ---------- */
.footer{border-top:1px solid var(--border-subtle); padding:42px 0 56px; background:var(--bg-sunken)}
.footer .wrap{display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap}
.footer .meta{font-family:var(--font-head); font-size:12px; color:var(--fg-4); letter-spacing:.03em; text-align:center; line-height:1.8}
.footer .meta a{color:var(--fg-3)} .footer .meta a:hover{color:var(--fg-1)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important; transform:none !important}.feature,.feature .more .ic{transition:none}}