/* Topic landing pages (website/<slug>/index.html), added 2026-10-12 for SEO.
   They load ../styles.css first and reuse its sections (.chalk-section,
   .paper-section, .section-inner, .section-heading, .steps, .paper-form,
   .faq-list, .site-footer). This file only adds the pieces the homepage's
   full-screen .desk hero doesn't cover: a slim top bar, a two-column topic
   hero, and the "what's inside" list. */

.topic-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(20px,4.5vw);background:var(--ink);border-bottom:1px solid #c69b4236}
.topic-bar .brand{font-family:Impact,"Arial Narrow",Arial,sans-serif;font-size:1.7rem;letter-spacing:.03em;color:var(--paper);text-decoration:none}
.topic-bar nav{display:flex;gap:10px;flex-wrap:wrap}
.topic-bar nav a{text-decoration:none;text-transform:uppercase;font:800 .95rem "Arial Narrow",Arial,sans-serif;letter-spacing:.04em;padding:10px 16px;border-radius:9px}
.topic-bar .login{color:var(--paper);box-shadow:inset 0 0 0 2px #c69b42}
.topic-bar .trial{background:var(--green);color:#fff;box-shadow:0 4px 0 #416d1f}

.topic-hero{padding:56px 0 70px}
.topic-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.breadcrumb{font:1rem Arial,sans-serif;color:#b9b4a6;margin:0 0 14px}
.breadcrumb a{color:var(--gold);text-decoration:none}
.topic-hero h1{font-family:Impact,"Arial Narrow",Arial,sans-serif;text-transform:uppercase;font-size:clamp(2.6rem,5vw,4.6rem);line-height:.95;letter-spacing:.015em;margin:0 0 18px;color:var(--paper)}
.topic-hero h1 span{display:inline-block;font-size:.5em;line-height:1.1;background:var(--gold);color:#0d0e0b;padding:2px 12px 4px;margin-top:6px;clip-path:polygon(1% 9%,5% 3%,13% 8%,24% 3%,37% 8%,49% 1%,65% 7%,79% 2%,94% 8%,100% 2%,99% 90%,88% 96%,74% 91%,61% 98%,44% 92%,29% 97%,12% 91%,0 98%)}
.topic-lead{font:1.22rem/1.55 Georgia,serif;color:#e7e2d6;margin:0 0 26px;max-width:600px}
.topic-ctas{display:flex;gap:14px;flex-wrap:wrap}
.topic-ctas a{display:inline-block;text-decoration:none;text-transform:uppercase;font:800 1.05rem "Arial Narrow",Arial,sans-serif;letter-spacing:.04em;padding:14px 22px}
.topic-ctas .primary{background:var(--green);color:#fff;box-shadow:0 4px 0 #456c23}
.topic-ctas .secondary{background:var(--paper);color:#161711;box-shadow:0 4px 0 #aa9e84}
.topic-sample{position:relative;margin:0}
.topic-sample img{display:block;width:100%;height:auto;background:#fff;border:6px solid #fff;box-shadow:0 15px 24px #000b;transform:rotate(-1.5deg)}
.topic-sample figcaption{margin-top:16px;text-align:center;font:italic 1rem Georgia,serif;color:#cfc9bb}

.topic-body{padding:80px 0 90px}
.topic-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.topic-card{background:#fffdf6;border:3px solid #171813;padding:28px 26px;box-shadow:7px 8px 0 var(--gold)}
.topic-card:nth-child(2){box-shadow:7px 8px 0 var(--green)}
.topic-card h3{font-size:1.6rem;margin:0 0 12px}
.topic-card p,.topic-card li{font:1.02rem/1.55 Georgia,serif}
.topic-card ul{margin:0;padding-left:22px}
.topic-card li+li{margin-top:6px}
.topic-prose{max-width:760px;margin:46px auto 0;font:1.08rem/1.65 Georgia,serif}
.topic-prose h2{font-family:Impact,"Arial Narrow",Arial,sans-serif;text-transform:uppercase;font-size:2.1rem;letter-spacing:.015em;margin:0 0 10px}
.topic-prose p{margin:0 0 14px}

.related{padding:60px 0;border-top:7px solid var(--gold)}
.related h2{font-family:Impact,"Arial Narrow",Arial,sans-serif;text-transform:uppercase;text-align:center;font-size:2.2rem;margin:0 0 22px}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.related a{display:block;background:var(--paper);color:#171813;text-decoration:none;font:800 1.1rem "Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;padding:12px 18px;box-shadow:4px 4px 0 var(--green)}

@media(max-width:820px){
  .topic-hero-grid,.topic-columns{grid-template-columns:1fr;gap:36px}
  .topic-sample img{transform:none}
}
@media(max-width:560px){
  .topic-bar .brand{font-size:1.35rem}
  .topic-bar nav a{padding:8px 11px;font-size:.85rem}
  .topic-hero{padding:38px 0 50px}
  .topic-body{padding:56px 0 64px}
}

/* The sign-up comes straight after the hero (Jerry, 2026-10-12), so both dark
   sections touch; the sign-up's gold top border separates them and the gap
   between them is tightened. */
.topic-hero{padding-bottom:52px}
.topic-hero+.signup-section{padding:60px 0 66px}
.topic-hero+.signup-section:before{display:none}