/* Tools & Tips. Design tokens and header/footer match the main site pages (see about.php). */

:root{
  --ground:#f4f2ed; --surface:#faf8f4; --recessed:#efece4; --inverted:#1A2A44;
  --ink:#1A2A44; --ink-hover:#24365A; --ink-2:#4E5A70; --ink-3:#7E8798; --ink-on-dark:#9AA4B5;
  --rule:rgba(26,42,68,0.16); --rule-soft:rgba(26,42,68,0.11);
  --current:#1f6b4a; --current-bg:rgba(31,107,74,0.08); --current-line:rgba(31,107,74,0.45);
  --stale:#8a5a12; --stale-bg:rgba(138,90,18,0.08); --stale-line:rgba(138,90,18,0.45);
  --font-prose:'Spectral', Georgia, serif; --font-ui:'Schibsted Grotesk', sans-serif;
  --font-data:'IBM Plex Mono', monospace; --font-logo:'Archivo', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--ground);color:var(--ink-2);font-family:var(--font-prose);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--current);}
:focus-visible{outline:2px solid var(--current);outline-offset:2px;}

body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.wrap.narrow{max-width:780px;}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,242,237,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 32px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:34px;height:34px;border-radius:50%;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text .wordmark{font-family:var(--font-logo);font-weight:800;letter-spacing:0.06em;font-size:15px;color:var(--ink);}
.brand-text .byline{font-family:var(--font-logo);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--ink-2);margin-top:2px;}
.site-header nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-family:var(--font-ui);}
.site-header nav a.navlink{font-size:13px;color:var(--ink-2);padding:14px 2px;display:inline-block;}
.site-header nav a.navlink.active{color:var(--ink);border-bottom:2px solid var(--current);}
.site-header nav a.navlink:hover{color:var(--ink);}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:var(--ink);color:var(--ground);font-family:var(--font-ui);font-weight:600;padding:10px 18px;border-radius:3px;border:none;cursor:pointer;font-size:14px;transition:background 0.15s;}
.btn:hover{background:var(--ink-hover);color:var(--ground);}

/* Shared type */
.eyebrow,.kicker{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px;}
.kicker{font-size:10px;color:var(--ink-3);margin-bottom:10px;}
h2.section-title{font-family:var(--font-prose);font-weight:400;font-size:clamp(24px,2.8vw,32px);line-height:1.26;letter-spacing:-0.012em;color:var(--ink);max-width:28ch;}
.tag{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.10em;padding:4px 7px;border-radius:2px;white-space:nowrap;border:1px solid var(--rule);color:var(--ink-2);}
.tag--status{color:var(--current);background:var(--current-bg);border-color:var(--current-line);}
.card-cta{display:inline-block;margin-top:16px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--current);}

/* Hero */
.hero{padding:88px 0 72px;border-bottom:1px solid var(--rule);}
.hero .wrap > *{max-width:760px;}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.hero-eyebrow .rule{width:28px;height:1px;background:var(--current);display:inline-block;}
.hero-eyebrow span{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}
.hero h1{font-family:var(--font-prose);font-weight:500;font-size:clamp(30px,4vw,46px);line-height:1.18;letter-spacing:-0.016em;color:var(--ink);}
.hero h1 em{font-style:italic;font-weight:400;}
.hero p.lead{margin-top:22px;font-size:18px;color:var(--ink-2);max-width:620px;}

/* Hub sections */
.tt-section{padding:72px 0;border-bottom:1px solid var(--rule);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px;}
.feed-link{font-family:var(--font-data);font-size:11px;color:var(--ink-3);letter-spacing:0.04em;}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.tool-card,.tool-callout{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:26px;transition:border-color 0.15s;}
.tool-card:hover,.tool-callout:hover{border-color:var(--current-line);color:inherit;}
.tool-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.tool-card h3,.tool-callout h3{font-family:var(--font-prose);font-weight:500;font-size:21px;color:var(--ink);}
.tool-card p,.tool-callout p{margin-top:8px;font-size:16px;}

.topic-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.chip{font-family:var(--font-ui);font-size:13px;padding:7px 14px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);background:var(--surface);}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.chip.active:hover{color:var(--ground);}
.topic-description{margin-bottom:24px;font-size:17px;max-width:66ch;}

.article-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;}
.article-card{border-top:1px solid var(--ink);padding-top:18px;}
.card-topic{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;color:var(--current);margin-bottom:8px;}
.article-card h3{font-family:var(--font-prose);font-weight:500;font-size:21px;line-height:1.3;color:var(--ink);}
.article-card p{margin-top:8px;font-size:16px;}
.card-meta{display:flex;gap:16px;margin-top:12px;font-family:var(--font-data);font-size:11px;color:var(--ink-3);letter-spacing:0.04em;}
.empty-state{background:var(--recessed);border-radius:3px;padding:28px;font-size:17px;}
.empty-state a{color:var(--current);text-decoration:underline;}
.pagination{display:flex;justify-content:center;gap:24px;margin-top:40px;font-family:var(--font-ui);font-size:14px;}
.pagination a{color:var(--current);font-weight:600;}

/* Article */
.draft-banner{position:relative;z-index:2;background:var(--stale-bg);border-bottom:1px solid var(--stale-line);color:var(--stale);font-family:var(--font-ui);font-size:13px;font-weight:600;text-align:center;padding:10px 20px;}
.article-header{padding:56px 0 36px;border-bottom:1px solid var(--rule);}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--font-ui);font-size:12px;color:var(--ink-3);margin-bottom:22px;}
.breadcrumb a{color:var(--ink-2);}
.article-header h1{font-family:var(--font-prose);font-weight:500;font-size:clamp(30px,4vw,44px);line-height:1.18;letter-spacing:-0.016em;color:var(--ink);}
.byline{display:flex;gap:6px 20px;flex-wrap:wrap;margin-top:22px;font-family:var(--font-data);font-size:12px;color:var(--ink-3);letter-spacing:0.02em;}
.byline a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);}

.article-main{padding-top:40px;padding-bottom:72px;}
.short-answer{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--current);border-radius:3px;padding:22px 24px;}
.short-answer p{font-size:19px;line-height:1.55;color:var(--ink);}
.key-points,.toc{margin-top:28px;padding:22px 24px;background:var(--recessed);border-radius:3px;}
.key-points ul,.toc ol{padding-left:20px;font-size:16px;}
.key-points li+li,.toc li+li{margin-top:6px;}
.toc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);}

.prose{margin-top:40px;font-size:18px;line-height:1.7;}
.prose h2{font-family:var(--font-prose);font-weight:500;font-size:clamp(22px,2.6vw,28px);line-height:1.3;color:var(--ink);margin:48px 0 14px;scroll-margin-top:96px;}
.prose h3{font-family:var(--font-prose);font-weight:500;font-size:21px;color:var(--ink);margin:32px 0 10px;}
.prose p+p,.prose ul,.prose ol,.prose blockquote{margin-top:16px;}
.prose ul,.prose ol{padding-left:24px;}
.prose li+li{margin-top:8px;}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--current);text-decoration:underline;}
.prose blockquote{border-left:3px solid var(--rule);padding-left:20px;font-style:italic;color:var(--ink);}

.inline-tools{margin-top:48px;display:grid;gap:16px;}
.faq,.sources{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule);}
.faq h2,.sources h2{font-family:var(--font-prose);font-weight:500;font-size:26px;color:var(--ink);margin-bottom:8px;}
.faq-item{padding:18px 0;border-bottom:1px solid var(--rule-soft);}
.faq-item h3{font-family:var(--font-prose);font-weight:500;font-size:19px;color:var(--ink);}
.faq-item p{margin-top:6px;font-size:17px;}
.sources ol{padding-left:22px;font-size:15px;margin-top:12px;}
.sources li+li{margin-top:8px;}
.sources a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);}
.sources .publisher{color:var(--ink-3);}

.author-card{display:flex;gap:20px;align-items:flex-start;margin-top:56px;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:26px;}
.author-photo{width:72px;height:72px;border-radius:2px;overflow:hidden;flex-shrink:0;background:var(--recessed);}
.author-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.author-card h3{font-family:var(--font-prose);font-weight:500;font-size:20px;color:var(--ink);}
.author-card .role{font-family:var(--font-ui);font-size:12px;color:var(--ink-2);margin-top:2px;}
.author-card p{margin-top:10px;font-size:16px;}

/* Closing band and footer */
.closing-band{background:var(--inverted);color:var(--ground);padding:80px 32px;}
.closing-band .wrap{padding:0;}
.closing-band h2{font-family:var(--font-prose);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.24;letter-spacing:-0.014em;max-width:26ch;color:var(--ground);}
.closing-band p.lede{margin-top:16px;font-size:16px;color:var(--ink-on-dark);max-width:56ch;}
.closing-band .cta-row{margin-top:26px;display:flex;gap:16px;flex-wrap:wrap;}
.closing-band .btn{background:var(--ground);color:var(--ink);}
.closing-band .btn:hover{background:#ffffff;}
.closing-band .btn.ghost{background:transparent;border:1px solid rgba(244,242,237,0.4);color:var(--ground);}
.closing-band .btn.ghost:hover{border-color:var(--ground);}

.site-footer{background:var(--ground);border-top:1px solid var(--rule);padding:28px 0;}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--font-data);font-size:11px;letter-spacing:0.04em;color:var(--ink-2);}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;}

@media (max-width:560px){
  .wrap{padding:0 20px;}
  .header-inner{padding:14px 20px;}
  .site-header nav{gap:18px;}
  .hero{padding:56px 0 48px;}
  .tt-section{padding:56px 0;}
  .tool-grid,.article-list{grid-template-columns:1fr;}
  .author-card{flex-direction:column;}
  .closing-band{padding:56px 20px;}
}