/* ==========================================================================
   AI Policy.fyi (Tower) — theme stylesheet
   Design tokens mirror theme.json; this file handles layout/structure that
   theme.json + core blocks can't express on their own (grids, cards,
   pseudo-elements, hover states).
   ========================================================================== */

:root{
  --bg:#0E1116; --panel:#171B21; --line:#262c35;
  --green:#39FF88; --amber:#FFC145; --cyan:#38D6E0; --magenta:#FF4FA0;
  --text:#D9DEE6;
}

body{ background:var(--bg); color:var(--text); }
.wp-site-blocks{ overflow-x:hidden; }

/* ---------- header ---------- */
.tower-header{ border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:50; padding:18px 0 !important; }
.tower-header-inner{ align-items:center; }
.tower-mark a,.tower-mark{ font-family:'Space Grotesk',sans-serif !important; font-weight:700; font-size:18px; text-decoration:none; color:#fff; }
.tower-nav{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; }
.tower-nav a{ color:#8a90a0; }

/* ---------- hero (front page) ---------- */
.hero{ border-bottom:1px solid var(--line); }
.herogrid{ display:grid; grid-template-columns:2fr 1fr; align-items:stretch; }
.heromain{ position:relative; overflow:hidden; padding:64px 48px 64px 36px; border-right:1px solid var(--line); }
.heromain .scope{ position:absolute; top:50%; right:-70px; width:480px; height:480px; transform:translateY(-50%); opacity:.85; }
.herotext{ position:relative; max-width:34ch; }
.herotext h1{ font-size:32px; font-weight:700; line-height:1.18; margin:0 0 20px; }
.herotext h1 .hl{ color:var(--cyan); }
.herotext p{ font-size:15px; color:#9aa1ad; line-height:1.6; font-family:'Inter',sans-serif; }

.keycol{ background:#E7E9EC; color:#171B21; display:flex; flex-direction:column; }
.keysec{ flex:1; padding:26px 28px; border-bottom:1px solid #cfd3d9; display:flex; flex-direction:column; justify-content:center; }
.keysec:last-child{ border-bottom:none; }
.keysec .kcode{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#7d8494; margin-bottom:8px; }
.keysec h4{ font-size:16px; font-weight:700; margin:0 0 10px; }
.keysec ul{ margin:0; padding-left:16px; }
.keysec li{ font-family:'Inter',sans-serif; font-size:12.5px; color:#3c4149; line-height:1.6; margin-bottom:2px; }

/* ---------- about band ---------- */
.about{ padding:30px 36px; border-bottom:1px solid var(--line); display:flex; gap:26px; align-items:center; }
.about .tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--amber); text-transform:uppercase; letter-spacing:.1em; flex-shrink:0; }
.about p{ font-size:16px; margin:0; max-width:64ch; color:#c3cad4; }

/* ---------- article strip-board (Query Loop: Articles) ---------- */
.strip-board-query{ padding:50px 36px; border-bottom:1px solid var(--line); }
.strip-board{ display:flex; flex-direction:column; border:1px solid var(--line); counter-reset:stripcount; list-style:none; margin:0; padding:0; }
.strip{ position:relative; display:grid; grid-template-columns:90px 1.6fr 1fr; gap:20px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); background:var(--panel); counter-increment:stripcount; }
.strip:last-child{ border-bottom:none; }
.strip:hover{ background:#1c2129; }
.strip .sq{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#7d8494; }
.strip .sq::before{ content:counter(stripcount, decimal-leading-zero); }
.strip .wp-block-post-title{ font-size:16px; margin:0 0 6px; color:#fff; font-family:'Inter',sans-serif; font-weight:600; }
.strip .wp-block-post-title a{ color:inherit; text-decoration:none; }
.strip .wp-block-post-title a::before{ content:""; position:absolute; inset:0; } /* stretched link: whole row clickable */
.strip .wp-block-post-excerpt{ font-size:12px; color:#8a90a0; margin:0; font-family:'Inter',sans-serif; }
.strip .wp-block-post-featured-image{ height:56px; width:100%; margin:0; background:repeating-linear-gradient(90deg,#1c2028,#1c2028 2px,#171b21 2px,#171b21 20px); border:1px solid var(--line); overflow:hidden; }
.strip .wp-block-post-featured-image img{ height:100%; width:100%; object-fit:cover; }

/* ---------- beneath-articles: 2/3 excerpts + 1/3 twitter placeholder ---------- */
.bf-wrap{ padding:0 36px 50px; }
.bf-grid{ display:grid; grid-template-columns:2fr 1fr; border:1px solid var(--line); }
.bf-main{ display:flex; flex-direction:column; border-right:1px solid var(--line); counter-reset:bfcount; }
.bf-item{ position:relative; flex:1; padding:24px 26px; border-bottom:1px solid var(--line); background:var(--panel); counter-increment:bfcount; }
.bf-item:last-child{ border-bottom:none; }
.bf-item:hover{ background:#1c2129; }
.bf-item .kicker{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-bottom:8px; }
.bf-item .kicker::before{ content:"Auto-pulled #" counter(bfcount, decimal-leading-zero) " · first 50 words"; }
.bf-item .wp-block-post-title{ font-size:15px; margin:0 0 8px; color:#fff; font-family:'Inter',sans-serif; font-weight:600; }
.bf-item .wp-block-post-title a{ color:inherit; text-decoration:none; }
.bf-item .wp-block-post-title a::before{ content:""; position:absolute; inset:0; }
.bf-item .wp-block-post-excerpt{ font-size:12.5px; color:#9aa1ad; margin:0; line-height:1.6; font-family:'Inter',sans-serif; }

.bf-side{ background:#12151a; padding:24px 24px; display:flex; flex-direction:column; }
.bf-side .kicker{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px; }
.bf-side .tw-note{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#5c6270; margin-bottom:16px; line-height:1.5; }
.bf-side .wp-block-post-excerpt{ font-size:11px; color:#9aa1ad; line-height:1.6; font-family:'Inter',sans-serif; border-top:1px dashed var(--line); padding-top:14px; margin:0; }

/* ---------- subscribe (template part, all templates) ---------- */
.subscribe{ border-top:1px solid var(--line); background:var(--panel); padding:44px 36px; }
.sub-inner{ display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; max-width:1300px; margin:0 auto; }
.sub-kicker{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px; }
.sub-copy h3{ font-family:'Space Grotesk',sans-serif; font-size:22px; color:#fff; margin:0 0 6px; }
.sub-copy p{ font-size:13px; color:#9aa1ad; margin:0; }
.sub-form{ display:flex; gap:0; flex-shrink:0; }
.sub-form input{ font-family:'Inter',sans-serif; font-size:13px; padding:12px 16px; border:1px solid var(--line); background:var(--bg); color:#fff; width:240px; border-radius:2px 0 0 2px; outline:none; }
.sub-form input:focus{ border-color:var(--cyan); }
.sub-form button{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:0 20px; background:var(--cyan); color:#0E1116; border:none; border-radius:0 2px 2px 0; cursor:pointer; font-weight:700; }

/* ---------- footer ---------- */
.tower-footer{ padding:22px 36px !important; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#666; }
.tower-footer p{ margin:0; font-size:10.5px; }

/* ==========================================================================
   Single article template
   ========================================================================== */
.art-head{ padding:44px 36px 0; border-bottom:1px solid var(--line); }
.art-head .headline{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:46px; line-height:1.12; margin:0 0 20px; max-width:22ch; }
.byline{ align-items:center; gap:16px; padding-bottom:28px !important; }
.byline .wp-block-avatar{ margin:0; }
.byline .wp-block-avatar img{ border-radius:50%; }
.byline .wp-block-post-author-name{ font-size:13px; color:#fff; font-family:'Inter',sans-serif; }
.byline .wp-block-post-date{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#7d8494; }

.hero-band{ position:relative; height:280px; overflow:hidden; border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(90deg,#12161c,#12161c 2px,#0E1116 2px,#0E1116 26px) !important; margin:0 !important; }
.hero-band img{ height:100%; width:100%; object-fit:cover; }

.body-grid{ padding:52px 36px 0; gap:56px !important; align-items:flex-start !important; }
.article-body{ max-width:66ch; font-family:'Source Serif 4',serif; font-size:18px; line-height:1.75; color:#dfe3ea; }
.article-body p{ margin:0 0 24px; }
.article-body > .wp-block-post-content > p:first-of-type:first-letter{ font-family:'Space Grotesk',sans-serif; font-size:64px; font-weight:700; float:left; line-height:.8; margin:6px 12px 0 0; color:var(--cyan); }
.article-body h2{ font-family:'Space Grotesk',sans-serif; font-size:26px; color:#fff; margin:44px 0 18px; line-height:1.25; }
.article-body blockquote{ border-left:3px solid var(--amber); margin:36px 0; padding:4px 0 4px 26px; }
.article-body blockquote p{ font-family:'Space Grotesk',sans-serif; font-style:italic; font-size:23px; line-height:1.45; color:#fff; }
.article-body blockquote cite{ font-family:'JetBrains Mono',monospace; font-style:normal; font-size:11px; color:#7d8494; text-transform:uppercase; letter-spacing:.06em; }
.article-body a{ color:var(--cyan); }

.post-pagination{ display:flex; align-items:center; gap:10px; margin:36px 0 0; font-family:'JetBrains Mono',monospace; font-size:12px; }
.post-pagination .pg-label{ color:#5c6270; text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; margin-right:4px; }
.post-pagination a,.post-pagination .pg-num{ text-decoration:none; color:#8a90a0; }
.post-pagination .pg-num{ border:1px solid var(--line); width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; }
.post-pagination .pg-num:hover{ border-color:#3a4150; }

.sidebar{ position:sticky; top:80px; }
.sidebar .keycol{ border-radius:2px; overflow:hidden; }
.sidebar .keycol .keysec{ padding:16px 14px; }
.sidebar .keycol .kcode{ font-size:9px; margin-bottom:6px; }
.sidebar .keycol h4{ font-size:13px; margin:0 0 8px; line-height:1.25; }
.sidebar .keycol ul{ padding-left:14px; }
.sidebar .keycol li{ font-size:11px; line-height:1.5; }

/* related articles (Query Loop, single.html) */
.related-wrap{ border-top:1px solid var(--line); padding:50px 36px; }
.related-wrap h3{ font-family:'Space Grotesk',sans-serif; font-size:19px; margin:0 0 26px; color:#fff; }

/* ==========================================================================
   Generic page template (Privacy, Terms, About, Contact…)
   ========================================================================== */
.page-head{ padding:56px 36px 30px; border-bottom:1px solid var(--line); }
.page-head .kicker{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.page-head h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px; margin:0; }

.page-body{ max-width:70ch; margin:0 auto; padding:48px 36px 60px; font-size:16px; line-height:1.75; color:#c3cad4; }
.page-body h2{ font-family:'Space Grotesk',sans-serif; font-size:22px; color:#fff; margin:40px 0 14px; }
.page-body h2:first-child{ margin-top:0; }
.page-body a{ color:var(--cyan); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .herogrid,.body-grid,.bf-grid{ grid-template-columns:1fr; }
  .heromain{ border-right:none; border-bottom:1px solid var(--line); }
  .bf-main{ border-right:none; border-bottom:1px solid var(--line); }
  .sidebar{ position:static; }
  .art-head .headline{ font-size:32px; }
  .strip{ grid-template-columns:1fr; }
}
