/* GrowthBiz Magazine — business broadsheet / journal aesthetic.
   Cream paper, bold Space Grotesk display, Newsreader serif body, ruled list rows.
   Deliberately different from any sibling publication (no cards, no gradients). */
:root{
  --paper:#f8f5ee; --ink:#1a1813; --ink-soft:#38342b; --muted:#726c5e;
  --muted-2:#9a9384; --accent:#1c6b52; --accent-2:#a8641b; --rule:#e2dccc; --rule-soft:#ece7da;
  --card:#fffdf8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Newsreader',Georgia,serif;font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.display{font-family:'Space Grotesk',sans-serif}

/* ---------- MASTHEAD ---------- */
.masthead{background:var(--paper);border-bottom:2px solid var(--ink)}
.mast-top{display:flex;justify-content:space-between;font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:11px 0 10px;border-bottom:1px solid var(--rule)}
.wordmark{display:block;text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(30px,6vw,52px);letter-spacing:-.02em;padding:22px 0 6px;color:var(--ink)}
.wordmark em{font-style:normal;font-weight:500;color:var(--accent);margin-left:.28em}
.mainnav{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;padding:12px 0 16px;
  border-top:1px solid var(--rule);margin-top:14px}
.mainnav a{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:2px;
  border-bottom:2px solid transparent;transition:border-color .15s,color .15s}
.mainnav a:hover,.mainnav a.on{color:var(--accent);border-color:var(--accent)}
#navtoggle,.burger{display:none}
@media (max-width:760px){
  .wordmark{font-size:34px}
  .burger{display:block;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:12px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:8px 0 14px;cursor:pointer;
    border-top:1px solid var(--rule);margin-top:12px}
  .mainnav{display:none;border-top:0;padding-top:0}
  #navtoggle:checked ~ .mainnav{display:flex;flex-direction:column;gap:0;align-items:center;padding-bottom:14px}
  #navtoggle:checked ~ .mainnav a{padding:11px 0;width:100%;text-align:center;border-bottom:1px solid var(--rule-soft)}
}
@media (max-width:420px){
  .wrap{padding-left:18px;padding-right:18px}
  .wordmark{font-size:27px;letter-spacing:-.035em}
  .lead h1,.article-hero h1,.story h3{overflow-wrap:anywhere}
  .article-body{padding-left:18px;padding-right:18px}
  .article-body table{font-size:13px}
  .article-body th,.article-body td{padding:8px 6px}
}

/* ---------- LEAD STORY ---------- */
.lead{padding:40px 0 34px;border-bottom:1px solid var(--rule)}
.kicker{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.lead h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(32px,5.4vw,56px);
  line-height:1.04;letter-spacing:-.02em;margin:14px 0 16px;max-width:16ch}
.lead .dek{font-size:21px;color:var(--ink-soft);max-width:60ch;margin:0 0 16px;line-height:1.5}
.lead .byline{font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.lead-link:hover h1{color:var(--accent)}

/* ---------- SECTION LABEL ---------- */
.rail{display:flex;align-items:center;gap:16px;margin:38px 0 6px}
.rail h2{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin:0;white-space:nowrap}
.rail::after{content:"";flex:1;height:2px;background:var(--ink)}

/* ---------- STORY LIST (ruled rows, numbered) ---------- */
.stories{border-top:1px solid var(--rule)}
.story{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--rule);
  align-items:start;transition:background .15s}
.story:hover{background:var(--card)}
.story .num{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:var(--rule);
  line-height:1;padding-top:4px}
.story:hover .num{color:var(--accent)}
.story .kicker{font-size:11.5px}
.story h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:24px;line-height:1.15;
  letter-spacing:-.01em;margin:7px 0 8px}
.story:hover h3{color:var(--accent)}
.story p{margin:0 0 9px;color:var(--ink-soft);font-size:17px;line-height:1.5;max-width:66ch}
.story .meta{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2)}
@media (max-width:560px){.story{grid-template-columns:1fr;gap:6px}.story .num{font-size:22px}}

/* ---------- CATEGORY / SIMPLE PAGE HEADERS ---------- */
.pagehead{padding:44px 0 30px;border-bottom:2px solid var(--ink)}
.pagehead .kicker{font-size:12px}
.pagehead h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,5vw,46px);
  letter-spacing:-.02em;margin:12px 0 10px}
.pagehead p{color:var(--ink-soft);font-size:19px;max-width:60ch;margin:0}

/* ---------- ARTICLE ---------- */
.article-hero{padding:44px 0 4px;border-bottom:1px solid var(--rule)}
.article-hero .kicker{font-size:12px}
.article-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,5vw,48px);
  line-height:1.06;letter-spacing:-.02em;margin:14px 0 16px;max-width:20ch}
.article-hero .byline{font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding-bottom:18px}
.article-body{max-width:680px;margin:0 auto;padding:30px 22px 70px}
.article-body>p:first-of-type::first-letter{font-family:'Space Grotesk',sans-serif;font-weight:700;
  float:left;font-size:64px;line-height:.82;padding:6px 12px 0 0;color:var(--accent)}
.article-body p{font-size:19.5px;margin:0 0 22px;line-height:1.68}
.article-body p a,.article-body li a{
  color:#008a55;font-weight:inherit;text-decoration:none;
  background:none;border-radius:0;padding:0;transition:none}
.article-body p a:hover,.article-body li a:hover{
  color:#008a55;background:none}
.article-body h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:26px;
  letter-spacing:-.01em;margin:40px 0 14px}
.article-body h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;margin:30px 0 12px}
.article-body ul,.article-body ol{font-size:19px;padding-left:22px;margin:0 0 22px;line-height:1.62}
.article-body li{margin-bottom:9px}
.article-body figure{margin:30px 0 34px}
.article-body figure img{width:auto;height:auto;max-width:100%;max-height:400px;margin:0 auto;object-fit:contain;border-radius:2px}
.article-body figcaption{max-width:560px;margin:10px auto 0;text-align:center;font-size:14px;line-height:1.45;color:var(--muted);font-style:italic}
@media (max-width:560px){.article-body figure img{max-height:58vh}}
.article-body table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px;
  font-family:'Space Grotesk',sans-serif}
.article-body th,.article-body td{border-bottom:1px solid var(--rule);padding:11px 12px;text-align:left}
.article-body th{border-bottom:2px solid var(--ink);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tldr{border-left:3px solid var(--accent);background:transparent;padding:6px 0 6px 22px;margin:0 0 30px}
.tldr::before{content:"THE BRIEF";display:block;font-family:'Space Grotesk',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:10px}
.tldr ul{margin:0;padding-left:18px;font-family:'Space Grotesk',sans-serif;font-size:16px;line-height:1.5}
.tldr li{margin-bottom:8px;color:var(--ink-soft)}
.article-end{display:flex;align-items:center;gap:14px;margin-top:44px;padding-top:22px;
  border-top:2px solid var(--ink)}
.article-end .endmark{color:var(--accent);font-size:14px;line-height:1}
.article-end a{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.article-end a:hover{color:var(--accent)}

/* ---------- SIMPLE PAGES ---------- */
.simple{max-width:680px;padding:6px 0 60px}
.simple .body{font-size:19px;line-height:1.68}
.simple .body p{margin:0 0 20px;color:var(--ink-soft)}

/* ---------- FORMS ---------- */
form.contact{max-width:520px;display:flex;flex-direction:column;gap:14px;margin-top:26px}
form.contact input,form.contact textarea{font:inherit;font-family:'Space Grotesk',sans-serif;font-size:15px;
  padding:13px 15px;border:1px solid var(--rule);border-radius:2px;background:var(--card)}
form.contact input:focus,form.contact textarea:focus{outline:none;border-color:var(--accent)}
form.contact button{font-family:'Space Grotesk',sans-serif;background:var(--ink);color:var(--paper);border:0;
  border-radius:2px;padding:13px 22px;font-weight:600;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;width:fit-content}
form.contact button:hover{background:var(--accent)}

/* ---------- FOOTER ---------- */
footer{border-top:2px solid var(--ink);margin-top:20px;padding:48px 0 40px;text-align:center}
.foot-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.01em}
.foot-brand em{font-style:normal;font-weight:500;color:var(--accent);margin-left:.28em}
.foot-tag{color:var(--muted);font-size:17px;max-width:44ch;margin:10px auto 22px}
.foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin-bottom:26px}
.foot-nav a{font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.foot-nav a:hover{color:var(--accent)}
.foot-sub form{display:inline-flex;gap:8px;max-width:420px;width:100%}
.foot-sub input{flex:1;min-width:0;font-family:'Space Grotesk',sans-serif;font-size:14px;padding:11px 13px;
  border:1px solid var(--rule);border-radius:2px;background:var(--card)}
.foot-sub button{font-family:'Space Grotesk',sans-serif;background:var(--ink);color:var(--paper);border:0;
  border-radius:2px;padding:11px 18px;font-weight:600;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap}
.foot-legal{margin-top:26px;font-family:'Space Grotesk',sans-serif;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-2)}
.table-wrap{
  width:100%; max-width:100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}