/*
Theme Name: Sounds About White
Theme URI: https://soundsaboutwhite.com
Description: Newspaper-style satirical news theme for Sounds About White
Version: 1.1
Author: Sounds About White
*/

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --black: #0a0a0a;
  --white: #fafaf7;
  --gray-100: #f0f0ed;
  --gray-200: #ddddd8;
  --gray-400: #999990;
  --gray-600: #555550;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--white); color:var(--black); font-family:'Open Sans',sans-serif; font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ── TICKER ─────────────────────────────────────────────────────────────── */
.ticker { background:var(--black); color:var(--white); padding:8px 0; overflow:hidden; white-space:nowrap; }
.ticker-inner { display:inline-block; animation:tick 120s linear infinite; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding-left:100vw; }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.sep, .ticker-sep { margin:0 24px; opacity:0.3; }
.ticker-link { color:var(--white); text-decoration:none; }
.ticker-link:hover { text-decoration:underline; }

/* ── UTILITY NAV ─────────────────────────────────────────────────────────── */
.utility-nav { display:flex; padding:0 36px; gap:0; flex-wrap:wrap; border-bottom:1px solid var(--gray-200); }
.utility-nav a { font-size:11px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; padding:12px 18px 12px 0; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; }
.utility-nav a:hover { border-bottom-color:var(--black); }
.utility-nav .ns { width:1px; height:14px; background:var(--gray-200); margin:auto 14px auto 0; flex-shrink:0; }

/* ── MASTHEAD ────────────────────────────────────────────────────────────── */
.masthead { border-bottom:3px solid var(--black); }
.mast-top { display:flex; align-items:stretch; border-bottom:1px solid var(--gray-200); }
.mast-logo { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; border-right:1px solid var(--gray-200); }
.mast-logo img { width:100%; max-width:660px; display:block; }

/* ── NAV ─────────────────────────────────────────────────────────────────── */
nav { display:flex; padding:0 36px; gap:0; flex-wrap:wrap; }
nav a { font-size:11px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; padding:12px 18px 12px 0; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; }
nav a:hover, nav a.on { border-bottom-color:var(--black); }
nav .ns, nav .nav-sep { width:1px; height:14px; background:var(--gray-200); margin:auto 14px auto 0; flex-shrink:0; }

/* ── COUNTER BAR ─────────────────────────────────────────────────────────── */
.counter { background:var(--black); color:var(--white); padding:12px 36px; display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.ci { display:flex; flex-direction:column; padding-right:28px; margin-right:28px; border-right:1px solid #2a2a2a; }
.ci:last-of-type { border:none; }
.cl { font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:#555; margin-bottom:1px; }
.cn { font-family:'Open Sans Condensed',sans-serif; font-size:28px; font-weight:700; line-height:1; }
.cnote { margin-left:auto; font-family:'IM Fell English',serif; font-style:italic; font-size:13px; color:#444; }

/* ── PAGE WRAPPER ────────────────────────────────────────────────────────── */
.page { max-width:1180px; margin:0 auto; padding:0 36px; }

/* ── SECTION LABEL ───────────────────────────────────────────────────────── */
.slabel { display:flex; align-items:center; gap:14px; margin:32px 0 20px; }
.slabel span { font-family:'Open Sans Condensed',sans-serif; font-size:18px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; }
.slabel::after { content:''; flex:1; height:1px; background:var(--gray-200); }

/* ── MAIN GRID (hero + sidebar) ──────────────────────────────────────────── */
.main-grid { display:grid; grid-template-columns:1fr 290px; gap:0; border-bottom:1px solid var(--gray-200); margin-top:28px; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero { padding-right:32px; border-right:1px solid var(--gray-200); padding-bottom:28px; cursor:pointer; }
.hero:hover h1 { text-decoration:underline; }
.hero-img-link { display:block; text-decoration:none; }
.hero-img-box { width:100%; background:var(--gray-100); border:1px solid var(--gray-200); aspect-ratio:16/9; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.hero-img-box img { width:100%; height:100%; object-fit:cover; }
.hero-meta { display:flex; align-items:center; gap:10px; margin:14px 0 10px; flex-wrap:wrap; }
.tag-filled { font-size:10px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; background:var(--black); color:var(--white); padding:4px 10px; }
.tag-outline { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; border:1px solid var(--black); padding:3px 8px; }
.dateline { font-size:11px; color:var(--gray-400); font-style:italic; margin-left:auto; }
.hero h1 { font-family:'Open Sans Condensed',sans-serif; font-size:38px; font-weight:700; line-height:1.02; text-transform:uppercase; margin-bottom:12px; }
.hero h1 a { color:inherit; text-decoration:none; }
.hero h1 a:hover { text-decoration:underline; }
.hero-deck { font-size:15px; line-height:1.7; color:var(--gray-600); border-top:1px solid var(--gray-200); padding-top:14px; margin-bottom:10px; }
.hero-body { font-size:14px; line-height:1.75; color:var(--black); }
.hero-body p { margin-bottom:12px; }
.hero-body p:last-child { margin-bottom:0; }
.hero-read-more { display:inline-block; margin-top:12px; font-family:'Open Sans Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--black); text-decoration:none; border-bottom:2px solid var(--black); padding-bottom:2px; }
.hero-read-more:hover { opacity:0.6; }
.byline { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-400); margin:14px 0 10px; }

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar { padding-left:24px; padding-bottom:28px; }
.sh { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gray-400); padding-bottom:10px; border-bottom:2px solid var(--black); }
.ss { padding:16px 0; border-bottom:1px solid var(--gray-200); cursor:pointer; }
.ss:hover .sh2 { text-decoration:underline; }
.sc { font-size:9px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gray-400); margin-bottom:5px; }
.sh2 { font-family:'Open Sans Condensed',sans-serif; font-size:15px; font-weight:700; line-height:1.2; text-transform:uppercase; margin-bottom:5px; }
.sd { font-size:12px; color:var(--gray-600); line-height:1.5; }
.sm { font-size:11px; color:var(--gray-400); margin-top:5px; font-style:italic; }

/* ── STORY ROWS (3-up grid) ──────────────────────────────────────────────── */
.story-row { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--gray-200); border-top:1px solid var(--gray-200); }
.story-row + .story-row { border-top:none; }
.gs { padding:22px; border-right:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); cursor:pointer; }
.gs:hover { background:var(--gray-100); }
.gs:hover .gh { text-decoration:underline; }
.gc { font-size:9px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gray-400); margin-bottom:6px; }
.gs-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.gs-meta .tag-outline { font-size:9px; }
.gs-meta .dateline { font-size:10px; margin-left:auto; }
.gh { font-family:'Open Sans Condensed',sans-serif; font-size:18px; font-weight:700; line-height:1.15; text-transform:uppercase; margin-bottom:9px; }
.gd { font-size:13px; color:var(--black); line-height:1.65; }
.gd p { margin-bottom:8px; }
.gd p:last-child { margin-bottom:0; }
.gm { font-size:11px; color:var(--gray-400); margin-top:8px; font-style:italic; }

/* ── HALL OF SHAME BOX ───────────────────────────────────────────────────── */
.shame-box { border:2px solid var(--black); padding:24px; margin-bottom:40px; }
.shame-header { font-family:'Open Sans Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; text-align:center; border-bottom:1px solid var(--gray-200); padding-bottom:12px; margin-bottom:16px; }
.shame-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.shame-item { padding:14px; background:var(--gray-100); }
.shame-num { font-family:'Open Sans Condensed',sans-serif; font-size:36px; font-weight:700; line-height:1; margin-bottom:6px; }
.shame-label { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.shame-desc { font-size:12px; color:var(--gray-600); line-height:1.5; }

/* ── PAGINATION ──────────────────────────────────────────────────────────── */
.pager { display:flex; align-items:center; justify-content:center; gap:12px; padding:32px 0; border-top:1px solid var(--gray-200); }
.pager a, .pager span { font-family:'Open Sans Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--gray-200); }
.pager a:hover { background:var(--gray-100); }
.pager .current { background:var(--black); color:var(--white); border-color:var(--black); }

/* ── SINGLE POST ─────────────────────────────────────────────────────────── */
.single-wrap { max-width:1180px; margin:0 auto; padding:40px 36px; display:grid; grid-template-columns:1fr 280px; gap:0; }
.single-body { padding-right:48px; border-right:1px solid var(--gray-200); }
.single-meta { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.single-headline { font-family:'Open Sans Condensed',sans-serif; font-size:clamp(28px,4vw,48px); font-weight:700; line-height:1.02; text-transform:uppercase; margin-bottom:18px; }
.single-deck { font-size:16px; line-height:1.7; color:var(--gray-600); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); padding:16px 0; margin-bottom:20px; }
.single-byline { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-400); margin-bottom:24px; }
.single-featured { width:100%; aspect-ratio:16/9; background:var(--gray-100); overflow:hidden; margin-bottom:28px; }
.single-featured img { width:100%; height:100%; object-fit:cover; }
.single-content { font-size:16px; line-height:1.8; color:var(--black); }
.single-content p { margin-bottom:1.4em; }
.single-content p:last-child { margin-bottom:0; }
.single-sidebar { padding-left:24px; }
.single-sidebar .sh { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gray-400); padding-bottom:10px; border-bottom:2px solid var(--black); }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer { background:var(--black); color:var(--white); padding:22px 36px; display:flex; align-items:center; justify-content:space-between; border-top:3px solid var(--white); flex-wrap:wrap; gap:12px; }
.flogo { font-family:'Open Sans Condensed',sans-serif; font-size:20px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.ftag { font-family:'IM Fell English',serif; font-style:italic; font-size:13px; color:#555; }
.fcopy { font-size:11px; letter-spacing:0.06em; color:#444; }


/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .page { padding:0 18px; }
  .main-grid { grid-template-columns:1fr; }
  .hero { border-right:none; padding-right:0; border-bottom:1px solid var(--gray-200); }
  .sidebar { padding-left:0; }
  .story-row { grid-template-columns:1fr; }
  .shame-grid { grid-template-columns:1fr; }
  nav { padding:0 18px; }
  .counter { padding:12px 18px; }
  footer { padding:18px; }
  .single-wrap { grid-template-columns:1fr; padding:24px 18px; }
  .single-body { padding-right:0; border-right:none; }
  .single-sidebar { padding-left:0; padding-top:32px; border-top:1px solid var(--gray-200); }
}
@media (max-width:600px) {
  .hero h1 { font-size:26px; }
  .cn { font-size:22px; }
  .ci { padding-right:16px; margin-right:16px; }
  .shame-grid { grid-template-columns:1fr 1fr; }
  nav a { padding:10px 10px 10px 0; font-size:10px; }
}