:root {
  --ink:#10231d; --forest:#0b2c22; --forest-2:#124936; --green:#196c4a; --lime:#c6e66a;
  --sand:#f5f2ea; --paper:#fffefb; --muted:#65736e; --line:#dfe6e1; --white:#fff;
  --radius:18px; --shadow:0 18px 60px rgba(8,35,27,.09);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--sand); color:var(--ink); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
a { color:inherit; }
[hidden] { display:none !important; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:1000; background:var(--white); color:var(--ink); padding:12px 18px; border-radius:10px; font-weight:800; }
.skip-link:focus { top:16px; }
.reading-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; background:transparent; }
.reading-progress span { display:block; height:100%; background:var(--lime); transform:scaleX(0); transform-origin:left; }
.topbar { min-height:34px; display:flex; align-items:center; justify-content:center; padding:6px 24px; background:#071c16; color:#d7e4de; font-size:.76rem; text-align:center; }
.topbar strong { color:var(--lime); }
.topbar strong { margin-right:.25em; }
.site-header { position:sticky; top:0; z-index:90; background:rgba(11,44,34,.97); border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px); }
.header-inner { width:min(1180px,calc(100% - 40px)); min-height:74px; margin:auto; display:flex; align-items:center; gap:36px; }
.logo { display:flex; align-items:center; gap:12px; color:var(--white); text-decoration:none; }
.logo-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(198,230,106,.65); border-radius:50%; color:var(--lime); font-weight:800; font-size:.82rem; }
.logo-copy { display:grid; line-height:1.15; }
.logo-copy strong { font-size:.9rem; letter-spacing:.035em; }
.logo-copy small { margin-top:5px; color:#a8bbb3; font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; }
.header-inner nav { flex:1; display:flex; justify-content:center; gap:30px; }
.header-inner nav a { position:relative; color:#cddbd5; text-decoration:none; font-size:.82rem; font-weight:700; }
.header-inner nav a:hover, .header-inner nav a[aria-current] { color:var(--white); }
.header-inner nav a[aria-current]::after { content:''; position:absolute; left:0; right:0; bottom:-10px; height:2px; background:var(--lime); }
.cart-trigger { display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:transparent; color:var(--white); padding:9px 15px; cursor:pointer; font-weight:800; font-size:.78rem; }
.cart-count { min-width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--forest); font-size:.68rem; }
.breadcrumb { width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:54px; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.75rem; white-space:nowrap; overflow:hidden; }
.breadcrumb a { color:var(--green); text-decoration:none; font-weight:700; }
.breadcrumb span:last-child { overflow:hidden; text-overflow:ellipsis; }
.article-hero { position:relative; min-height:480px; overflow:hidden; background:var(--forest); color:var(--white); display:grid; }
.hero-art { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(135deg,#154f38,#071c18); }
.hero-art::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 76% 36%,rgba(198,230,106,.14),transparent 26%),linear-gradient(90deg,rgba(6,25,19,.98) 0%,rgba(6,25,19,.82) 48%,rgba(6,25,19,.3) 100%); }
.hero-art span { position:absolute; right:13%; font-size:9rem; filter:grayscale(1); opacity:.18; }
.hero-art.has-image { background-size:cover; background-position:center; }
.hero-art.has-image span { display:none; }
.hero-inner { position:relative; z-index:1; width:min(900px,calc(100% - 40px)); margin:auto; padding:86px 0; }
.eyebrow { display:inline-flex; margin:0 0 18px; color:var(--lime); text-decoration:none; text-transform:uppercase; letter-spacing:.13em; font-size:.69rem; font-weight:800; }
.hero-inner h1 { max-width:850px; margin:0; font-family:'Source Serif 4',serif; font-size:clamp(2.6rem,6vw,5rem); line-height:1.02; letter-spacing:-.035em; text-wrap:balance; }
.article-lead { max-width:710px; margin:24px 0 0; color:#d8e4df; font-family:'Source Serif 4',serif; font-size:1.2rem; line-height:1.6; }
.article-meta { display:flex; flex-wrap:wrap; gap:0; margin-top:30px; color:#b3c5bd; font-size:.76rem; font-weight:700; }
.article-meta span + span::before { content:'•'; margin:0 13px; color:var(--lime); }
.article-shell { width:min(1100px,calc(100% - 40px)); margin:56px auto 80px; display:grid; grid-template-columns:minmax(0,730px) 280px; gap:48px; align-items:start; }
.article-card { min-width:0; }
.article-content { color:#293b35; font-family:'Source Serif 4',serif; font-size:1.12rem; line-height:1.85; }
.article-content > *:first-child { margin-top:0; }
.article-content h2 { scroll-margin-top:105px; margin:2.7em 0 .75em; color:var(--ink); font-family:'Manrope',sans-serif; font-size:1.45rem; line-height:1.3; letter-spacing:-.025em; }
.article-content h3 { margin:2em 0 .6em; color:var(--ink); font-family:'Manrope',sans-serif; font-size:1.12rem; }
.article-content p { margin:0 0 1.35em; }
.article-content a { color:var(--green); text-decoration-thickness:1px; text-underline-offset:3px; }
.article-content strong { color:var(--ink); }
.article-content ul, .article-content ol { margin:0 0 1.5em; padding-left:1.3em; }
.article-content li { margin:.55em 0; padding-left:.25em; }
.article-content blockquote { margin:2em 0; padding:22px 26px; border-left:3px solid var(--lime); background:rgba(255,255,255,.65); color:var(--forest-2); font-size:1.18rem; }
.article-content img { max-width:100%; height:auto; border-radius:var(--radius); }
.editorial-note { display:flex; gap:16px; margin:50px 0 0; padding:24px; border:1px solid #d6dfd9; border-radius:var(--radius); background:rgba(255,255,255,.54); }
.note-icon { flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--forest); color:var(--lime); font-family:'Source Serif 4',serif; font-weight:700; }
.editorial-note strong { font-size:.86rem; }
.editorial-note p { margin:6px 0 0; color:var(--muted); font-size:.78rem; line-height:1.6; }
.article-actions { margin-top:32px; padding:28px 0; border-top:1px solid #d6dfd9; border-bottom:1px solid #d6dfd9; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.article-actions > div:first-child { display:grid; gap:4px; font-size:.82rem; }
.action-label { color:var(--muted); font-size:.72rem; }
.share-buttons { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.share-buttons button { border:1px solid #cdd8d1; border-radius:999px; background:transparent; color:var(--forest); padding:8px 11px; cursor:pointer; font-size:.68rem; font-weight:800; }
.share-buttons button:hover { background:var(--white); border-color:var(--green); }
.article-sidebar { position:sticky; top:105px; display:grid; gap:16px; }
.sidebar-card { padding:24px; border:1px solid rgba(16,35,29,.1); border-radius:var(--radius); background:rgba(255,255,255,.68); }
.sidebar-kicker { margin:0 0 12px; color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; font-weight:800; }
.sidebar-card h2 { margin:0 0 10px; font-family:'Source Serif 4',serif; font-size:1.28rem; line-height:1.25; }
.sidebar-card > p:not(.sidebar-kicker) { margin:0 0 18px; color:var(--muted); font-size:.75rem; line-height:1.55; }
.toc-card nav { display:grid; gap:3px; }
.toc-card nav a { padding:8px 0; border-bottom:1px solid var(--line); color:#53645d; text-decoration:none; font-family:'Source Serif 4',serif; font-size:.82rem; line-height:1.35; }
.toc-card nav a:last-child { border-bottom:0; }
.toc-card nav a:hover { color:var(--green); }
.catalog-card { background:var(--forest); color:var(--white); }
.catalog-card .sidebar-kicker { color:var(--lime); }
.catalog-card > p:not(.sidebar-kicker) { color:#b9cac3; }
.primary-link, .secondary-link, .help-card a { display:inline-flex; align-items:center; gap:8px; color:var(--forest); font-size:.74rem; font-weight:800; text-decoration:none; }
.catalog-card .primary-link { color:var(--lime); }
.help-card a { color:var(--green); }
.recommendations { width:min(1100px,calc(100% - 40px)); margin:0 auto 80px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.section-heading span { color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; font-weight:800; }
.section-heading h2 { margin:6px 0 0; font-family:'Source Serif 4',serif; font-size:2rem; letter-spacing:-.025em; }
.section-heading > a { color:var(--green); font-size:.76rem; font-weight:800; text-decoration:none; }
.product-editorial-card { display:grid; grid-template-columns:280px 1fr; overflow:hidden; border-radius:24px; background:var(--paper); color:inherit; text-decoration:none; box-shadow:var(--shadow); }
.product-editorial-image { min-height:280px; background:#eef0e8; }
.product-editorial-image img { width:100%; height:100%; display:block; object-fit:contain; padding:24px; }
.product-editorial-copy { padding:42px; align-self:center; }
.product-editorial-copy > span, .related-card small { color:var(--green); text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; font-weight:800; }
.product-editorial-copy h3 { margin:9px 0 12px; font-family:'Source Serif 4',serif; font-size:1.7rem; line-height:1.15; }
.product-editorial-copy p { margin:0 0 24px; color:var(--muted); font-size:.82rem; line-height:1.65; }
.product-editorial-copy > div { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.product-editorial-copy strong { font-size:1rem; }
.product-editorial-copy b { color:var(--green); font-size:.74rem; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.related-card { overflow:hidden; border:1px solid rgba(16,35,29,.09); border-radius:var(--radius); background:rgba(255,255,255,.62); color:inherit; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.related-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.related-art { height:150px; display:grid; place-items:center; }
.related-art span { font-size:3rem; opacity:.75; }
.related-card > div:last-child { padding:22px; }
.related-card h3 { margin:8px 0; font-family:'Source Serif 4',serif; font-size:1.25rem; line-height:1.25; }
.related-card p { display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical; margin:0 0 16px; color:var(--muted); font-size:.75rem; line-height:1.55; }
.related-card b { color:var(--green); font-size:.7rem; }
.empty-state { width:min(760px,calc(100% - 40px)); min-height:600px; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.empty-state > span { font-size:4rem; opacity:.4; }
.empty-state .eyebrow { margin-top:24px; }
.empty-state h1 { margin:0; font-family:'Source Serif 4',serif; font-size:clamp(2.2rem,6vw,4rem); line-height:1.05; }
.empty-state > p:not(.eyebrow) { max-width:520px; margin:20px auto 28px; color:var(--muted); line-height:1.65; }
.empty-state > div { display:flex; gap:10px; }
.empty-state .primary-link, .empty-state .secondary-link { padding:12px 18px; border-radius:999px; }
.empty-state .primary-link { background:var(--forest); color:var(--white); }
.empty-state .secondary-link { border:1px solid #ccd7d0; }
footer { min-height:100px; padding:24px max(20px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:25px; background:#071c16; color:#92aaa0; font-size:.7rem; }
footer > div { display:flex; gap:12px; align-items:center; }
footer strong { color:var(--white); }
footer nav { display:flex; flex-wrap:wrap; gap:22px; }
footer a { color:#b7c9c1; text-decoration:none; }

@media (max-width:900px) {
  .header-inner { min-height:66px; gap:14px; }
  .logo-copy small, .header-inner nav { display:none; }
  .logo { margin-right:auto; }
  .article-hero { min-height:420px; }
  .hero-inner { padding:68px 0; }
  .article-shell { grid-template-columns:1fr; margin-top:42px; gap:32px; }
  .article-sidebar { position:static; grid-template-columns:1fr 1fr; }
  .toc-card { grid-column:1/-1; }
  .product-editorial-card { grid-template-columns:220px 1fr; }
}
@media (max-width:620px) {
  .topbar { font-size:.66rem; }
  .header-inner, .breadcrumb, .hero-inner, .article-shell, .recommendations { width:min(100% - 28px,1100px); }
  .logo-mark { width:38px; height:38px; }
  .logo-copy strong { font-size:.76rem; }
  .article-hero { min-height:430px; }
  .hero-art::after { background:linear-gradient(180deg,rgba(6,25,19,.58),rgba(6,25,19,.98)); }
  .hero-art span { right:50%; transform:translateX(50%); font-size:7rem; }
  .hero-inner h1 { font-size:2.6rem; }
  .article-lead { font-size:1.05rem; line-height:1.5; }
  .article-meta { line-height:2; }
  .article-content { font-size:1.04rem; line-height:1.78; }
  .article-content h2 { font-size:1.25rem; }
  .article-actions { align-items:flex-start; flex-direction:column; }
  .share-buttons { justify-content:flex-start; }
  .article-sidebar { grid-template-columns:1fr; }
  .toc-card { grid-column:auto; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .section-heading h2 { font-size:1.65rem; }
  .product-editorial-card { grid-template-columns:1fr; }
  .product-editorial-image { min-height:230px; max-height:260px; }
  .product-editorial-copy { padding:26px; }
  .product-editorial-copy > div { align-items:flex-start; flex-direction:column; gap:10px; }
  .related-grid { grid-template-columns:1fr; }
  .empty-state > div { flex-direction:column; }
  footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}