/*
Theme Name: Wide Angle
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: A bold editorial magazine theme for personal writing across topics — color-coded by category, with a numbered-issue masthead conceit. Built for writing on film, science, and art (or any three-topic mix).
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wide-angle
*/

:root{
  --paper:#ECE8DF;
  --paper-raised:#F6F3EC;
  --ink:#191814;
  --ink-soft:#4A473F;
  --line:#C9C3B4;
  --film:#C8352E;
  --science:#2A4B7C;
  --art:#B27912;
  --other:#5C594E;
  --film-tint:#F2DAD6;
  --science-tint:#D9E1EC;
  --art-tint:#EFE0C4;
  --other-tint:#E2E0D8;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink); color:var(--paper);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* ---------- MASTHEAD ---------- */
.masthead{ border-bottom:3px solid var(--ink); padding:28px 0 16px; }
.masthead-row{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.logo{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900; font-size:clamp(42px, 7vw, 72px);
  letter-spacing:0.5px; line-height:0.85; margin:0; text-transform:uppercase;
}
.logo span{color:var(--film);}
.tagline{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.06em;
  color:var(--ink-soft); text-transform:uppercase; margin:6px 0 0; max-width:260px;
}
nav.topics{ display:flex; gap:0; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; }
nav.topics button{
  background:none; border:1px solid var(--ink); border-left:none; color:var(--ink);
  padding:9px 16px; cursor:pointer; font-family:inherit; font-size:inherit;
  letter-spacing:inherit; text-transform:inherit; transition:background .15s ease, color .15s ease;
}
nav.topics button:first-child{border-left:1px solid var(--ink);}
nav.topics button:hover{background:var(--ink); color:var(--paper);}
nav.topics button.active{background:var(--ink); color:var(--paper);}
nav.topics button.active[data-topic="film"]{background:var(--film); border-color:var(--film); color:#fff;}
nav.topics button.active[data-topic="science"]{background:var(--science); border-color:var(--science); color:#fff;}
nav.topics button.active[data-topic="art"]{background:var(--art); border-color:var(--art); color:#fff;}

.issue-line{
  display:flex; justify-content:space-between; font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.06em; color:var(--ink-soft); padding-top:10px; text-transform:uppercase;
}

/* ---------- FEATURED ---------- */
.featured{ margin:36px 0 44px; display:grid; grid-template-columns:140px 1fr; gap:24px; align-items:start; }
.featured-index{
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:22px; color:var(--film);
  writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:0.1em;
  display:flex; align-items:center; justify-content:flex-end; height:100%; padding-bottom:4px;
}
.featured-body{ background:var(--film-tint); border:1px solid var(--film); padding:36px 40px; position:relative; }
.featured-body.topic-science{ background:var(--science-tint); border-color:var(--science); }
.featured-body.topic-art{ background:var(--art-tint); border-color:var(--art); }
.featured-body.topic-other{ background:var(--other-tint); border-color:var(--other); }
.kicker{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--film); font-weight:600; margin:0 0 10px; }
.topic-science .kicker{color:var(--science);}
.topic-art .kicker{color:var(--art);}
.topic-other .kicker{color:var(--other);}
.featured-title{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:clamp(30px, 4vw, 50px); line-height:0.98; margin:0 0 16px; max-width:16ch; }
.dek{ font-size:18px; line-height:1.55; color:var(--ink); max-width:60ch; margin:0 0 18px; }
.meta-row{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.04em; color:var(--ink-soft); text-transform:uppercase; display:flex; gap:18px; margin-bottom:18px; }
.read-link{
  display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:12.5px;
  letter-spacing:0.05em; text-transform:uppercase; font-weight:600; color:var(--ink);
  border-bottom:2px solid var(--ink); padding-bottom:2px; width:fit-content; transition:gap .15s ease;
}
.read-link:hover{gap:12px;}

/* ---------- SECTION LABEL ---------- */
.section-label{ display:flex; align-items:center; gap:14px; margin:44px 0 22px; }
.section-label h2{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:15px; letter-spacing:0.14em; text-transform:uppercase; margin:0; white-space:nowrap; }
.section-label .rule{ height:1px; background:var(--line); width:100%; }

/* ---------- GRID ---------- */
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--paper-raised); padding:26px 24px 24px; display:flex; flex-direction:column; min-height:280px; transition:background .15s ease; }
.card:hover{background:#fff;}
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.card-index{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:34px; color:var(--line); line-height:1; }
.card[data-topic="film"] .card-index{color:var(--film-tint);}
.card[data-topic="science"] .card-index{color:var(--science-tint);}
.card[data-topic="art"] .card-index{color:var(--art-tint);}
.card[data-topic="other"] .card-index{color:var(--other-tint);}

.chip{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:2px; font-weight:600; height:fit-content; }
.chip[data-topic="film"]{background:var(--film); color:#fff;}
.chip[data-topic="science"]{background:var(--science); color:#fff;}
.chip[data-topic="art"]{background:var(--art); color:#fff;}
.chip[data-topic="other"]{background:var(--other); color:#fff;}

.card-title{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:24px; line-height:1.05; margin:0 0 12px; }
.card-title a:hover{text-decoration:underline;}
.card-dek{ font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0 0 20px; flex-grow:1; }
.card-meta{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:12px; }

.empty-state{ grid-column:1/-1; background:var(--paper-raised); padding:60px 20px; text-align:center; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- SINGLE POST ---------- */
.single-post{ max-width:760px; margin:44px auto 80px; }
.single-post .kicker{margin-bottom:14px;}
.single-title{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:clamp(32px,5vw,52px); line-height:1.02; margin:0 0 18px; }
.single-meta{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); display:flex; gap:18px; margin-bottom:32px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.single-content{ font-size:19px; line-height:1.7; }
.single-content p{margin:0 0 1.4em;}
.single-content h2,.single-content h3{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; margin:1.6em 0 0.6em; }
.single-content blockquote{ border-left:3px solid var(--ink); margin:1.6em 0; padding:0.2em 0 0.2em 1.4em; font-style:italic; color:var(--ink-soft); }
.single-content img{margin:1.6em 0;}
.back-link{ display:inline-block; margin-top:40px; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:2px; }

/* ---------- PAGE ---------- */
.page-content{ max-width:720px; margin:50px auto 80px; font-size:18px; line-height:1.65; }
.page-title{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:clamp(30px,5vw,46px); margin:0 0 24px; }

/* ---------- FOOTER ---------- */
footer.site-footer{ margin-top:64px; border-top:3px solid var(--ink); padding:32px 0 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer-logo{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:20px; text-transform:uppercase; letter-spacing:0.03em; }
.footer-note{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--ink-soft); max-width:420px; line-height:1.6; }

@media (max-width:820px){
  .grid{grid-template-columns:repeat(2, 1fr);}
  .featured{grid-template-columns:1fr;}
  .featured-index{writing-mode:horizontal-tb; padding-bottom:0; justify-content:flex-start;}
  .featured-body{padding:26px;}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
  nav.topics{width:100%;}
  nav.topics button{flex:1;}
  .masthead-row{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}