:root{
  --container: 1180px;
  --paper: #f2ede3;
  --paper-strong: #ebe3d6;
  --ink: #111111;
  --muted: #4a4a46;
  --line: #111111;
  --yellow: #efe64d;
  --green: #40d89f;
  --blue: #2d74ff;
  --red: #eb5e41;
  --black: #111111;
  --white: #f7f2e8;
  --radius: 0;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height:1.6;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
img{ display:block; max-width:100%; }
.site{ overflow-x:hidden; }
.container{ width:min(var(--container), calc(100% - 24px)); margin:0 auto; }
.site-main{ padding: 18px 0 40px; }
.no-scroll{ overflow:hidden; }

.skip-link{ position:absolute; left:-9999px; top:0; }
.skip-link:focus{
  left:12px; top:12px; z-index:999;
  padding:10px 12px; background:var(--yellow); color:var(--ink);
  border:3px solid var(--line);
}

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:var(--paper); }
.header-topline{
  border-bottom:4px solid var(--line);
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  background:var(--yellow);
}
.header-topline .container{ padding:10px 0; }
.header-topline .justify-content{ display: flex; justify-content: space-between;}
.header-row{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:84px; border-bottom:4px solid var(--line); background:var(--paper);
}
.brand{ display:flex; flex-direction:column; gap:4px; padding:12px 0; }
.brand-title{ display:flex; align-items:center; gap:12px; font-weight:900; text-transform:uppercase; }
.brand-badge{
  display:grid; place-items:center; width:52px; height:52px;
  background:var(--ink); color:var(--white); border:4px solid var(--line);
  font-size:18px; letter-spacing:.06em;
}
.brand-wordmark{ font-size:28px; line-height:.9; letter-spacing:-.04em; }
.brand-tagline{ color:var(--muted); font-size:13px; max-width:40ch; }

.nav{ display:flex; }
.nav-list{
  list-style:none; margin:0; padding:0; display:flex; align-items:stretch; gap:0;
  border-left:4px solid var(--line); border-top:4px solid var(--line); border-right:4px solid var(--line);
}
.nav-item{ position:relative; border-bottom:4px solid var(--line); }
.nav-item + .nav-item{ border-left:4px solid var(--line); }
.nav-link{
  display:flex; align-items:center; gap:8px; min-height:56px; padding:0 16px;
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:var(--paper);
}
.nav-link:hover, .nav-item.dropdown-open > .nav-link{ background:var(--green); }
.chev{ font-size:16px; line-height:1; }
.dropdown{
  display:none; position:absolute; top:100%; left:-4px; min-width:220px; z-index:10;
  list-style:none; margin:0; padding:0; border:4px solid var(--line); background:var(--paper);
}
.dropdown-item + .dropdown-item{ border-top:4px solid var(--line); }
.dropdown-link{ display:block; padding:14px 16px; font-size:14px; font-weight:700; text-transform:uppercase; }
.dropdown-link:hover{ background:var(--yellow); }
.nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.38); z-index:25; }
.menu-toggle{
  display:none; width:60px; height:60px; border:4px solid var(--line); background:var(--white); cursor:pointer;
}
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after{
  display:block; width:22px; height:3px; background:var(--ink); position:relative; margin:0 auto;
}
.menu-toggle-bars::before, .menu-toggle-bars::after{ content:""; position:absolute; left:0; }
.menu-toggle-bars::before{ top:-7px; }
.menu-toggle-bars::after{ top:7px; }

@media (min-width:901px){
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown,
  .has-dropdown.dropdown-open .dropdown{ display:block; }
}

/* Generic blocks */
.frame-block{ border:4px solid var(--line); background:var(--paper); }
.kicker{
  display:inline-block; padding:7px 10px 6px; background:var(--ink); color:var(--white);
  font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.kicker--alt{ background:var(--yellow); color:var(--ink); }
.hs-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 18px;
  border:4px solid var(--line); font-weight:900; text-transform:uppercase; letter-spacing:.06em;
}
.hs-btn--solid{ background:var(--yellow); }
.hs-btn--ghost{ background:var(--paper); }
.hs-btn:hover{ transform:translate(-3px,-3px); box-shadow: 6px 6px 0 var(--line); }

/* Home */
.brutalist-home{ display:grid; gap:0; }
.brutalist-hero{ display:grid; grid-template-columns:260px 1fr; border-bottom:none; }
.hero-flag{
  padding:22px; background:var(--yellow); border-right:4px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}
.hero-flag strong{ font-size:15px; line-height:1.35; }
.hero-main{ padding:24px; display:grid; align-content:center; min-height:240px; }
.hero-kicker{ font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.hero-main h1{ margin:0; font-size:clamp(42px, 7vw, 88px); line-height:.9; letter-spacing:-.06em; text-transform:uppercase; max-width:10ch; }
.hero-summary{ max-width:70ch; font-size:18px; margin:18px 0 0; }
.brutal-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

.brutalist-menu{
  display:grid; grid-template-columns:repeat(6, 1fr); border-top:none; border-bottom:none;
}
.brutalist-menu {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  border-top: 4px solid #111;
  border-bottom: 4px solid #111;
}

.brutalist-menu a {
  flex: 0 0 auto;
  padding: 16px 22px;
  /* border-right: 4px solid #111; */
  font-weight: 700;
  text-transform: uppercase;
}
.brutalist-menu a:hover{ background:var(--green); }

.product-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.product-link:hover {
  background: #EFE64D;
}

.internal-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  color: inherit;
}

.internal-link:hover {
  background: #EFE64D;
}

.footer-dev {
  margin-top: 8px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.footer-dev a {
  font-weight: 600;
  text-decoration: underline;
}

.brutalist-main{ display:grid; grid-template-columns:1.15fr .85fr; border-top:none; }
.main-story{ padding:22px; border-right:4px solid var(--line); }
.poster-link{
  display:block; min-height:380px; border:4px solid var(--line); background:var(--paper-strong); overflow:hidden; margin-bottom:18px;
}
.poster-image{ width:100%; height:100%; object-fit:cover; min-height:380px; }
.poster-fallback{
  background:linear-gradient(135deg, var(--red) 0 26%, var(--paper) 26% 33%, var(--ink) 33% 57%, var(--green) 57% 71%, var(--paper) 71% 76%, var(--blue) 76% 100%);
}
.main-story h2{
  margin:14px 0 12px; font-size:clamp(34px, 4vw, 58px); line-height:.92; letter-spacing:-.05em; text-transform:uppercase;
}
.main-story p{ margin:0; max-width:62ch; font-size:17px; }
.main-story-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.side-column{ display:grid; }
.side-block{ padding:20px; border-bottom:4px solid var(--line); }
.side-column .side-block:last-child{ border-bottom:none; }
.side-block h3{ margin:12px 0 10px; font-size:clamp(26px, 3vw, 38px); line-height:.95; text-transform:uppercase; letter-spacing:-.04em; }
.side-block p{ margin:0; font-size:16px; }
.side-block--inverse{ background:var(--ink); color:var(--white); }
.side-block--accent{ background:var(--green); }

.ticker{ display:grid; grid-template-columns:240px 1fr; border-top:none; }
.ticker-label{
  padding:18px 20px; background:var(--green); border-right:4px solid var(--line);
  font-weight:900; text-transform:uppercase; letter-spacing:.06em;
}
.ticker-news{ padding:18px 20px; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

.home-section{ border-top:none; padding:22px; }
.section-title-row{
  display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px;
}
.section-tag{
  display:inline-block; margin-bottom:6px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
}
.section-title-row h2{ margin:0; font-size:clamp(30px, 4vw, 50px); line-height:.92; letter-spacing:-.05em; text-transform:uppercase; }
.section-link{
  min-height:44px; padding:10px 14px; border:4px solid var(--line); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
}
.section-link:hover{ background:var(--yellow); }

.editorial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:4px solid var(--line); border-left:4px solid var(--line); }
.editorial-grid > *{ min-width:0; }
.editorial-card{ background:var(--paper); border-right:4px solid var(--line); border-bottom:4px solid var(--line); }
.editorial-card--guide{ background:var(--paper-strong); }
.editorial-card-media{ display:block; aspect-ratio:16/9; overflow:hidden; border-bottom:4px solid var(--line); }
.editorial-card-media img{ width:100%; height:100%; object-fit:cover; }
.editorial-card-body{ padding:18px; }
.editorial-card-title{ margin:12px 0 10px; font-size:clamp(24px, 2vw, 34px); line-height:.95; letter-spacing:-.04em; text-transform:uppercase; }
.editorial-card-desc{ margin:0; font-size:15px; }
.editorial-card-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }

/* Prose and internal pages */
.prose{ max-width:920px; }
.prose h1{ margin:0 0 12px; font-size:clamp(36px, 5vw, 70px); line-height:.92; letter-spacing:-.05em; text-transform:uppercase; }
.prose h2{ margin:34px 0 12px; font-size:clamp(24px, 3vw, 38px); line-height:1; text-transform:uppercase; }
.prose h3{ margin:26px 0 10px; font-size:clamp(20px, 2.4vw, 28px); text-transform:uppercase; }
.prose p, .prose li{ font-size:18px; }
.prose ul, .prose ol{ padding-left:24px; }
.lead{ margin:0 0 10px; font-size:20px; max-width:64ch; }
.meta{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.tag{ display:inline-block; padding:5px 8px; border:3px solid var(--line); margin-right:6px; }
.breadcrumbs{ margin:0 0 16px; padding:10px 12px; border:4px solid var(--line); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.breadcrumbs .sep{ margin:0 8px; }
.post-cover{ margin:0 0 24px; border:4px solid var(--line); }
.post-cover img{ width:100%; height:auto; }
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:4px solid var(--line); border-left:4px solid var(--line); }
.card{ background:var(--paper); border-right:4px solid var(--line); border-bottom:4px solid var(--line); padding:18px; }
.card:hover{ background:var(--yellow); }
.card-title{ margin:0 0 10px; font-size:28px; line-height:.95; text-transform:uppercase; letter-spacing:-.04em; }
.card-desc{ margin:0; font-size:15px; }
.card-meta, .muted{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }

.callout{
  margin:24px 0; padding:18px; border:4px solid var(--line); background:var(--paper-strong);
}
.callout strong{ display:block; margin-bottom:8px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.callout-tip{ background:var(--green); }
.callout-warning{ background:var(--yellow); }
.callout-note{ background:var(--paper-strong); }
.callout-summary{ background:var(--paper-strong); }

/* Footer */
.site-footer{ margin-top:40px; padding-bottom:24px; }
.footer-frame{ border:4px solid var(--line); background:var(--paper); }
.footer-stamp{
  padding:14px 18px; border-bottom:4px solid var(--line); background:var(--yellow);
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
}
.footer-main{ display:grid; grid-template-columns:1.2fr .8fr 1fr; }
.footer-main > *{ padding:22px; }
.footer-main > * + *{ border-left:4px solid var(--line); }
.footer-title{ font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:-.04em; }
.footer-tagline, .affiliate-disclaimer, .footer-copy{ margin:0; font-size:15px; }
.footer-nav ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-nav a{ font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.footer-nav a:hover{ background:var(--green); }
.footer-legal{ display:grid; gap:14px; }

/* Contact form bits */
form{ display:grid; gap:14px; max-width:720px; }
input, textarea, select{
  width:100%; padding:14px 16px; border:4px solid var(--line); background:var(--white); color:var(--ink); font:inherit;
}
button[type="submit"]{
  justify-self:start; min-height:52px; padding:0 18px; border:4px solid var(--line); background:var(--yellow);
  font:inherit; font-weight:900; text-transform:uppercase; letter-spacing:.06em; cursor:pointer;
}
.form-status{ padding:12px 14px; border:4px solid var(--line); font-weight:700; }
.form-status.success{ background:var(--green); }
.form-status.error{ background:var(--red); color:var(--white); }

/* Responsive */
@media (max-width: 1100px){
  .brutalist-menu{ grid-template-columns:repeat(3, 1fr); }
  .editorial-grid, .grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 900px){
  .header-row{ min-height:auto; padding:14px 0; align-items:flex-start; }
  .brand-wordmark{ font-size:24px; }
  .menu-toggle{ display:grid; place-items:center; }
  .nav{
    position:fixed; top:0; right:0; bottom:0; width:min(360px, 92vw); transform:translateX(100%);
    transition:transform .2s ease; background:var(--paper); z-index:40; border-left:4px solid var(--line); padding-top:76px;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav-list{ width:100%; flex-direction:column; align-items:stretch; border:none; }
  .nav-item, .nav-item + .nav-item{ border-left:none; }
  .nav-item{ border-top:4px solid var(--line); border-bottom:none; }
  .nav-link{ min-height:60px; justify-content:space-between; }
  .dropdown{ position:static; border:none; border-top:4px solid var(--line); }
  .has-dropdown.is-open .dropdown{ display:block; }

  .brutalist-hero,
  .brutalist-main,
  .ticker,
  .footer-main{ grid-template-columns:1fr; }
  .hero-flag, .main-story{ border-right:none; border-bottom:4px solid var(--line); }
  .ticker-label{ border-right:none; border-bottom:4px solid var(--line); }
  .footer-main > * + *{ border-left:none; border-top:4px solid var(--line); }
}

@media (max-width: 680px){
  .container{ width:min(var(--container), calc(100% - 16px)); }
  .site-main{ padding-top:14px; }
  .hero-main, .main-story, .side-block, .home-section{ padding:16px; }
  .hero-main h1{ font-size:clamp(34px, 14vw, 62px); max-width:none; }
  .hero-summary, .prose p, .prose li{ font-size:17px; }
  .brutalist-menu,
  .editorial-grid,
  .grid{ grid-template-columns:1fr; }
  .brutalist-menu a + a{ border-left:none; border-top:4px solid var(--line); }
  .section-title-row{ align-items:flex-start; flex-direction:column; }
  .poster-link, .poster-image{ min-height:250px; }
}


/* Header search */
.header-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.search-link{
  display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 16px;
  border:4px solid var(--line); background:var(--white); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
}
.search-link:hover{ background:var(--green); }

/* Search page */
.search-page__header{ align-items:end; gap:18px; }
.search-page__intro{ max-width:52ch; margin:0; font-size:16px; }
.search-shell{ display:grid; gap:10px; margin:18px 0 10px; }
.search-label{ font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.search-input{ font-size:18px; background:var(--white); }
.search-hint{ margin:0; font-size:13px; color:var(--muted); }
.search-status{
  margin:18px 0 0; padding:14px 16px; border:4px solid var(--line); background:var(--paper-strong);
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
}
.search-results{ margin-top:0; }
.search-result-card{ background:var(--paper); }
.search-result-card:hover{ background:var(--yellow); }
.search-result-type{ display:inline-block; margin-bottom:10px; padding:5px 8px; border:3px solid var(--line); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.search-result-title{ margin:0 0 8px; font-size:28px; line-height:.95; text-transform:uppercase; letter-spacing:-.04em; }
.search-result-desc{ margin:0 0 14px; font-size:15px; }
.search-result-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }

@media (max-width: 900px){
  .header-actions{ order:2; margin-left:0; }
  .search-link{ min-height:48px; }
  .brutalist-menu{ grid-template-columns:none !important; display:grid; grid-auto-flow:column; grid-auto-columns:max-content; }
}