/*
Theme Name: SaaSarazzi
Theme URI: https://saasarazzi.com
Description: Elevated-tabloid news theme for SaaSarazzi.com — satire, scoops, revenue and founder interviews. Child theme of Hello Elementor. Designed code-first (no page builder required for the blog).
Author: Brainy Bees
Author URI: https://brainybe.es
Template: hello-elementor
Version: 1.0.0
Text Domain: saasarazzi
*/

/* =====================================================================
   SaaSarazzi — Design System
   "Off the record. On the money."
   Aesthetic: elevated tabloid / paparazzi gossip-desk x serious tech press
   Type:  Fraunces (display) · Newsreader (body serif) · Archivo (labels)
   ===================================================================== */

:root{
  /* force light rendering — stops iOS/Safari auto-dark from darkening the paper */
  color-scheme: light;

  /* palette */
  --paper:   #F4EEE3;   /* warm newsprint */
  --paper-2: #FBF7EE;   /* card / raised surface */
  --ink:     #17140F;   /* warm near-black */
  --ink-2:   #4B453B;   /* muted body */
  --ink-3:   #8A8270;   /* faint / captions */
  --flash:   #E23A1E;   /* signature accent — camera flash red */
  --flash-d: #B12C12;   /* red text on light */
  --hi:      #FFE45E;   /* highlighter marker */
  --rule:    #DAD1BE;   /* hairlines */
  --rule-d:  #C4BAA3;
  --up:      #1C7A4D;
  --down:    #C23A1E;

  /* fonts */
  --display: "Fraunces", "Times New Roman", serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    "Archivo", -apple-system, "Segoe UI", sans-serif;

  /* metrics */
  --maxw: 1200px;
  --gut: clamp(1.1rem, 3vw, 2.5rem);
  --radius: 4px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; background-color:var(--paper); }

body{
  margin:0;
  background-color:var(--paper);
  /* faint newsprint grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  font-feature-settings:"liga" 1, "kern" 1;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.rule{ border:0; border-top:1px solid var(--rule); margin:0; }
.rule--thick{ border-top:3px solid var(--ink); }
.rule--dbl{ border:0; border-top:3px double var(--ink); }

/* ---- labels / kickers ----------------------------------------------- */
.kicker{
  font-family:var(--sans);
  font-weight:800;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.4em;
  line-height:1;
}
.tag{
  font-family:var(--sans); font-weight:800;
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.34em .6em; border-radius:2px; line-height:1; white-space:nowrap;
}
.tag--satire   { color:var(--flash-d); border:1.5px solid var(--flash); background:transparent; }
.tag--exclusive{ color:var(--paper);   background:var(--ink); }
.tag--leaked   { color:var(--paper);   background:var(--ink);
                 background-image:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.14) 7px 9px); }
.tag--revenue  { color:var(--ink);     background:var(--hi); }
.tag--interview{ color:var(--flash-d); border:1.5px solid var(--ink); }
.tag--pod      { color:var(--paper);   background:var(--flash); }

.flashmark{ color:var(--flash); font-style:normal; }
mark, .hl{ background:linear-gradient(180deg,transparent 56%, var(--hi) 56% 92%, transparent 92%);
  padding:0 .05em; color:inherit; }

/* =====================================================================
   MASTHEAD
   ===================================================================== */
.topbar{ background:var(--ink); color:var(--paper); font-family:var(--sans);
  font-size:.7rem; letter-spacing:.06em; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:38px; }
.topbar .ticker{ color:#C9C0AE; text-transform:uppercase; letter-spacing:.13em;
  font-weight:700; font-size:.62rem; overflow:hidden; white-space:nowrap; flex:1; }
.topbar .ticker b{ color:var(--hi); }
.topbar a{ text-decoration:none; }
.topbar .sub{ font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink); background:var(--hi); padding:.34em .7em; border-radius:2px; }
.topbar .sub:hover{ background:var(--paper); }

.masthead{ text-align:center; padding:clamp(1.1rem,3vw,2rem) 0 .7rem; }
.masthead .eyebrow{ font-family:var(--sans); font-weight:700; font-size:.64rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; gap:1.1rem; }
.masthead .eyebrow span{ flex:0 0 auto; }
.masthead .eyebrow .ln{ flex:1 1 auto; height:1px; background:var(--rule-d); max-width:120px; }

.wordmark{ display:inline-flex; align-items:baseline; gap:.16em;
  font-family:var(--display); font-weight:900; font-optical-sizing:auto;
  font-size:clamp(2.8rem,9vw,6.4rem); line-height:.86; letter-spacing:-.02em;
  margin:.32rem 0 .2rem; text-decoration:none; color:var(--ink); }
.wordmark .sa{ font-style:italic; }
.wordmark .star{ font-size:.42em; color:var(--flash); transform:translateY(-.55em);
  font-style:normal; }
.masthead .slogan{ font-family:var(--serif); font-style:italic; color:var(--ink-2);
  font-size:1.02rem; margin:.1rem 0 0; }

/* nav */
.mainnav{ border-top:3px double var(--ink); border-bottom:1px solid var(--ink);
  position:sticky; top:0; z-index:50; background:var(--paper); }
.mainnav .wrap{ display:flex; align-items:center; justify-content:center;
  gap:clamp(.6rem,2.2vw,2rem); min-height:48px; flex-wrap:wrap; }
.mainnav a, .mainnav .menu-item a{ font-family:var(--sans); font-weight:800;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); padding:.3em 0; position:relative; }
.mainnav a:hover{ color:var(--flash-d); }
.mainnav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:var(--flash); transition:right .25s ease; }
.mainnav a:hover::after{ right:0; }
.mainnav .menu{ list-style:none; display:flex; gap:clamp(.6rem,2.2vw,2rem);
  margin:0; padding:0; flex-wrap:wrap; justify-content:center; }
.navtoggle{ display:none; }

@media(max-width:760px){
  .mainnav .wrap{ justify-content:space-between; }
  .navtoggle{ display:inline-flex; align-items:center; gap:.5em; background:none;
    border:1.5px solid var(--ink); border-radius:2px; padding:.4em .7em; cursor:pointer;
    font-family:var(--sans); font-weight:800; font-size:.7rem; letter-spacing:.12em;
    text-transform:uppercase; }
  .mainnav .menu{ flex-basis:100%; flex-direction:column; align-items:flex-start;
    gap:0; max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .mainnav .menu li{ width:100%; border-top:1px solid var(--rule); }
  .mainnav .menu a{ display:block; padding:.8em 0; }
  .mainnav.open .menu{ max-height:78vh; overflow-y:auto; }
}

/* ---- dropdown submenu (desktop base) ---- */
.mainnav .menu li{ position:relative; }
.mainnav .menu-item-has-children::after{ content:"▾"; font-size:.6em; margin-left:.35em;
  color:var(--flash-d); vertical-align:middle; }
.mainnav .sub-menu{ list-style:none; margin:0; padding:.4rem 0; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); min-width:230px; background:var(--paper); border:1px solid var(--ink);
  border-top:3px solid var(--flash); box-shadow:0 16px 34px rgba(0,0,0,.14); opacity:0; visibility:hidden;
  transition:opacity .16s ease; z-index:60; }
.mainnav .menu-item-has-children:hover > .sub-menu,
.mainnav .menu-item-has-children:focus-within > .sub-menu{ opacity:1; visibility:visible; }
.mainnav .sub-menu li{ display:block; width:100%; }
.mainnav .sub-menu a{ display:block; padding:.55em 1.1rem; font-size:.72rem; letter-spacing:.08em;
  white-space:nowrap; }
.mainnav .sub-menu a::after{ display:none; }
.mainnav .sub-menu a:hover{ background:var(--paper-2); color:var(--flash-d); }

/* ---- dropdown on mobile: render inline, indented (must come AFTER desktop base) ---- */
@media(max-width:760px){
  .mainnav .sub-menu{ position:static; transform:none; opacity:1; visibility:visible;
    border:0; box-shadow:none; padding:0 0 .5rem 1rem; min-width:0; }
  .mainnav .sub-menu a{ padding:.55em 0; }
}

/* =====================================================================
   FRONT PAGE
   ===================================================================== */
.lede{ display:grid; grid-template-columns:1.6fr 1fr; gap:0; align-items:start;
  border-bottom:3px double var(--ink); }
.lede__main{ padding:1.6rem var(--gut) 2rem 0; }
@media(max-width:900px){ .lede{ grid-template-columns:1fr; } .lede__main{ padding-right:0; } }

.lede__main{ min-width:0; }   /* prevent grid blowout from big headline */
.lede__media{ display:block; position:relative; width:100%; aspect-ratio:16/10;
  overflow:hidden; border:1px solid var(--rule-d); background:var(--ink);
  margin-bottom:1.1rem; }
.lede__media img, .lede__media .ph{ position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; }
.headline{ font-family:var(--display); font-optical-sizing:auto;
  font-weight:900; line-height:.96; letter-spacing:-.018em; color:var(--ink);
  margin:.5rem 0 .55rem; }
.lede .headline{ font-size:clamp(2.1rem,5.4vw,4rem); overflow-wrap:break-word; }
.headline{ overflow-wrap:break-word; }
.dek{ font-family:var(--serif); font-size:1.16rem; color:var(--ink-2);
  line-height:1.45; margin:.4rem 0 .8rem; }
.byline{ font-family:var(--sans); font-size:.72rem; letter-spacing:.05em;
  color:var(--ink-3); text-transform:uppercase; }
.byline b{ color:var(--ink); }

/* sidebar rail */
.rail{ border-left:1px solid var(--rule-d); padding:1.6rem 0 2rem var(--gut); }
@media(max-width:900px){ .rail{ border-left:0; border-top:1px solid var(--rule-d);
  padding-left:0; padding-top:1.4rem; } }
.rail h3{ font-family:var(--sans); font-weight:900; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 1rem;
  display:flex; align-items:center; gap:.6rem; }
.rail h3::after{ content:""; flex:1; height:2px; background:var(--ink); }
.brief{ display:grid; gap:.9rem; }
.brief li{ list-style:none; display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--rule); }
.brief li:last-child{ border-bottom:0; }
.brief .n{ font-family:var(--display); font-weight:900; font-size:1.5rem;
  color:var(--flash); line-height:1; }
.brief a{ text-decoration:none; font-weight:600; line-height:1.28; font-size:1.02rem; }
.brief a:hover{ color:var(--flash-d); }

/* story grid */
.section-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin:2.4rem 0 1.2rem; border-bottom:3px solid var(--ink);
  padding-bottom:.5rem; }
.section-head h2{ font-family:var(--display); font-weight:900; font-size:1.7rem;
  margin:0; letter-spacing:-.01em; }
.section-head .more{ font-family:var(--sans); font-weight:800; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--flash-d); white-space:nowrap; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.grid > *{ padding:1.4rem; border-right:1px solid var(--rule); min-width:0; }
.grid > *:nth-child(3n){ border-right:0; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-2 > *:nth-child(3n){ border-right:1px solid var(--rule); }
.grid.cols-2 > *:nth-child(2n){ border-right:0; }
@media(max-width:820px){ .grid, .grid.cols-2{ grid-template-columns:1fr; }
  .grid > *{ border-right:0 !important; border-bottom:1px solid var(--rule); }
  .grid > *:last-child{ border-bottom:0; } }

.story{ display:flex; flex-direction:column; }
.story__media{ display:block; position:relative; width:100%; aspect-ratio:3/2;
  overflow:hidden; border:1px solid var(--rule-d); margin-bottom:.9rem; background:var(--ink); }
.story__media img, .story__media .ph{ position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; }
.story h3{ overflow-wrap:break-word; }
.story .kicker{ margin-bottom:.5rem; color:var(--flash-d); }
.story h3{ font-family:var(--display); font-weight:800; font-size:1.34rem;
  line-height:1.04; letter-spacing:-.01em; margin:0 0 .45rem; }
.story h3 a{ text-decoration:none; }
.story h3 a:hover{ color:var(--flash-d); }
.story p{ margin:0 0 .7rem; color:var(--ink-2); font-size:1rem; line-height:1.45; }
.story .byline{ margin-top:auto; }

/* halftone / duotone print treatment */
.halftone{ position:relative; }
.halftone img{ filter:grayscale(1) contrast(1.08); }
.halftone::after{ content:""; position:absolute; inset:0; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(226,58,30,.0) 60%, rgba(226,58,30,.0)),
  repeating-radial-gradient(circle at 0 0, #000 0 1.1px, transparent 1.1px 3px);
  opacity:.22; pointer-events:none; }
.duotone img{ filter:grayscale(1) contrast(1.15) sepia(.3) hue-rotate(-20deg) saturate(2.2); }

/* =====================================================================
   THE LEDGER — revenue / ARR strip
   ===================================================================== */
.ledger{ background:var(--ink); color:var(--paper); margin:2.6rem 0;
  border-radius:var(--radius); overflow:hidden; }
.ledger__head{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.1rem var(--gut); border-bottom:1px solid rgba(255,255,255,.14); }
.ledger__head h2{ font-family:var(--display); font-weight:900; margin:0;
  font-size:1.55rem; }
.ledger__head .tag{ background:var(--hi); color:var(--ink); }
.ledger__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media(max-width:820px){ .ledger__grid{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding:1.3rem var(--gut); border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12); }
.stat .co{ font-family:var(--sans); font-weight:800; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:#C9C0AE; }
.stat .v{ font-family:var(--display); font-weight:900; font-size:2.05rem;
  line-height:1; margin:.35rem 0 .25rem; }
.stat .d{ font-family:var(--sans); font-weight:800; font-size:.78rem;
  letter-spacing:.03em; display:inline-flex; align-items:center; gap:.3em; }
.stat .d.up{ color:#74E0A8; } .stat .d.down{ color:#F4866E; }
.stat .bar{ height:5px; background:rgba(255,255,255,.14); border-radius:99px;
  margin-top:.7rem; overflow:hidden; }
.stat .bar i{ display:block; height:100%; background:var(--hi); border-radius:99px; }
.ledger__foot{ padding:.7rem var(--gut); font-family:var(--sans); font-size:.66rem;
  letter-spacing:.04em; color:#9A917F; text-align:center; }

/* =====================================================================
   THE POD — podcast player
   ===================================================================== */
.pod{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:center;
  background:var(--paper-2); border:1px solid var(--rule-d); border-radius:var(--radius);
  padding:1.4rem; margin:2.2rem 0; }
@media(max-width:640px){ .pod{ grid-template-columns:1fr; text-align:left; } }
.pod__art{ width:120px; height:120px; border-radius:var(--radius); background:var(--ink);
  color:var(--paper); display:grid; place-items:center; font-family:var(--display);
  font-weight:900; font-size:1rem; text-align:center; line-height:1.05; padding:.6rem;
  position:relative; overflow:hidden; }
.pod__art .star{ color:var(--flash); }
.pod .kicker{ color:var(--flash-d); }
.pod h3{ font-family:var(--display); font-weight:900; font-size:1.5rem; margin:.4rem 0 .2rem;
  line-height:1.02; }
.pod .meta{ font-family:var(--sans); font-size:.72rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.9rem; }
.player{ display:flex; align-items:center; gap:.9rem; }
.player .play{ flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  background:var(--flash); color:#fff; border:0; cursor:pointer; display:grid;
  place-items:center; transition:transform .15s ease; }
.player .play:hover{ transform:scale(1.07); }
.player .play svg{ width:18px; height:18px; }
.wavebar{ flex:1; display:flex; align-items:center; gap:2px; height:34px; cursor:pointer; }
.wavebar span{ flex:1; background:var(--rule-d); border-radius:2px; transition:background .2s; }
.wavebar span.on{ background:var(--ink); }
.player .time{ font-family:var(--sans); font-weight:700; font-size:.74rem;
  color:var(--ink-2); min-width:42px; text-align:right; }

/* =====================================================================
   NEWSLETTER — "The 9 a.m. Flash"
   ===================================================================== */
.signup{ background:var(--flash); color:#fff; border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.8rem); margin:2.6rem 0; position:relative; overflow:hidden; }
.signup::before{ content:"✸"; position:absolute; right:-1.4rem; top:-2rem;
  font-size:11rem; color:rgba(255,255,255,.13); }
.signup .kicker{ color:#FFD9CF; }
.signup h2{ font-family:var(--display); font-weight:900; font-size:clamp(1.6rem,4vw,2.4rem);
  margin:.4rem 0 .3rem; line-height:1; max-width:18ch; }
.signup p{ margin:0 0 1.1rem; max-width:46ch; color:#FFE6E0; }
.signup form{ display:flex; gap:.6rem; max-width:480px; flex-wrap:wrap; }
.signup input{ flex:1; min-width:200px; border:0; border-radius:3px; padding:.85em 1em;
  font-family:var(--serif); font-size:1rem; }
.signup button{ border:0; border-radius:3px; background:var(--ink); color:#fff;
  font-family:var(--sans); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.78rem; padding:.85em 1.4em; cursor:pointer; }
.signup button:hover{ background:#000; }
.signup .cta{ display:inline-block; border:0; border-radius:3px; background:var(--ink); color:#fff;
  font-family:var(--sans); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.82rem; padding:.95em 1.6em; text-decoration:none; transition:background .2s; }
.signup .cta:hover{ background:#000; }

/* =====================================================================
   ARTICLE (single)
   ===================================================================== */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--flash);
  z-index:99; transition:width .08s linear; }
.article{ max-width:720px; margin-inline:auto; padding:2.2rem 0 1rem; }
.article .crumbs{ font-family:var(--sans); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; }
.article .crumbs a{ color:var(--flash-d); text-decoration:none; }
.article h1{ font-family:var(--display); font-weight:900; font-optical-sizing:auto;
  font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.0; letter-spacing:-.02em; margin:.4rem 0 .7rem; }
.article .standfirst{ font-family:var(--serif); font-style:italic; font-size:1.28rem;
  color:var(--ink-2); line-height:1.4; margin:0 0 1.2rem; }
.article .meta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.8rem 0; font-family:var(--sans); font-size:.74rem; letter-spacing:.04em;
  color:var(--ink-2); margin-bottom:1.6rem; }
.article .meta b{ color:var(--ink); }
.article .meta .share{ margin-left:auto; display:flex; gap:.5rem; }
.article .meta .share a{ width:30px; height:30px; border:1px solid var(--rule-d);
  border-radius:50%; display:grid; place-items:center; text-decoration:none; color:var(--ink); }
.article .meta .share a:hover{ background:var(--ink); color:var(--paper); }

.article figure{ margin:1.6rem 0; }
.article figure img{ border:1px solid var(--rule-d); width:100%; }
.article figcaption{ font-family:var(--sans); font-size:.72rem; color:var(--ink-3);
  margin-top:.5rem; letter-spacing:.02em; }

.prose{ font-size:1.18rem; line-height:1.72; }
.prose > p:first-of-type::first-letter{ font-family:var(--display); font-weight:900;
  float:left; font-size:4.4rem; line-height:.72; padding:.06em .12em 0 0; color:var(--flash); }
.prose p{ margin:0 0 1.2rem; }
.prose h2{ font-family:var(--display); font-weight:900; font-size:1.7rem; line-height:1.05;
  margin:2.2rem 0 .7rem; scroll-margin-top:80px; }
.prose h3{ font-family:var(--display); font-weight:800; font-size:1.3rem; margin:1.8rem 0 .5rem; }
.prose a{ color:var(--flash-d); text-underline-offset:3px; }
.prose blockquote{ margin:1.8rem 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:4px solid var(--flash); font-family:var(--display); font-weight:600;
  font-style:italic; font-size:1.5rem; line-height:1.2; color:var(--ink); }
.prose blockquote cite{ display:block; font-family:var(--sans); font-style:normal;
  font-weight:800; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.7rem; }
.redact{ background:var(--ink); color:transparent; border-radius:2px; padding:0 .12em;
  cursor:help; user-select:none; transition:color .2s, background .2s; }
.redact:hover{ background:var(--hi); color:var(--ink); }

/* table of contents */
.toc{ float:right; width:230px; margin:0 0 1.2rem 1.6rem; padding:1rem 1.1rem;
  border:1px solid var(--rule-d); border-radius:var(--radius); background:var(--paper-2);
  font-family:var(--sans); }
@media(max-width:780px){ .toc{ float:none; width:auto; margin:0 0 1.4rem; } }
.toc strong{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:.7rem; }
.toc a{ display:block; font-size:.84rem; line-height:1.3; padding:.32em 0;
  color:var(--ink-2); text-decoration:none; border-left:2px solid transparent;
  padding-left:.6rem; }
.toc a:hover, .toc a.active{ color:var(--ink); border-left-color:var(--flash); }

/* interview layout cue */
.is-interview .article h1{ color:var(--flash-d); }
.qa-q{ font-family:var(--sans); font-weight:800; font-size:1.05rem; letter-spacing:.01em;
  margin:1.6rem 0 .3rem; }
.qa-q::before{ content:"SAA — "; color:var(--flash-d); }
.qa-a::before{ content:""; }

/* disclaimer band for satire posts */
.satire-band{ background:var(--paper-2); border:1.5px dashed var(--flash);
  border-radius:var(--radius); padding:1rem 1.2rem; margin:1.8rem 0; font-size:.96rem;
  color:var(--ink-2); }
.satire-band b{ color:var(--flash-d); font-family:var(--sans); letter-spacing:.04em; }

/* reactions */
.reactions{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin:2.2rem 0; padding:1.3rem 0; text-align:center; }
.reactions p{ font-family:var(--sans); font-weight:800; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .9rem; }
.reactions .opts{ display:inline-flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
.react{ font-family:var(--sans); font-weight:800; font-size:.82rem; cursor:pointer;
  background:var(--paper-2); border:1.5px solid var(--rule-d); border-radius:99px;
  padding:.55em 1.1em; display:inline-flex; gap:.5em; align-items:center;
  transition:transform .12s, border-color .2s, background .2s; }
.react:hover{ transform:translateY(-2px); border-color:var(--ink); }
.react.voted{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.react .c{ font-variant-numeric:tabular-nums; opacity:.7; }

/* related */
.related{ margin:2.4rem 0; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--ink); color:var(--paper); margin-top:3rem;
  padding:3rem 0 2rem; }
.site-footer .top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.14); }
@media(max-width:760px){ .site-footer .top{ grid-template-columns:1fr; gap:1.6rem; } }
.site-footer .wordmark{ color:var(--paper); font-size:2.4rem; margin:0 0 .6rem; }
.site-footer p{ color:#C9C0AE; font-size:.98rem; max-width:42ch; }
.site-footer h4{ font-family:var(--sans); font-weight:900; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hi); margin:0 0 1rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.site-footer a{ color:#D8CFBC; text-decoration:none; font-size:.96rem; }
.site-footer a:hover{ color:#fff; }
.site-footer .legal{ display:flex; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding-top:1.4rem; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.04em; color:#9A917F; }
.disclaimer{ font-style:italic; font-family:var(--serif); color:#C9C0AE;
  border-left:3px solid var(--flash); padding-left:1rem; margin:1.4rem 0 0; max-width:60ch; }

/* utility */
.center{ text-align:center; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.screen-reader-text{ position:absolute; clip:rect(1px,1px,1px,1px); width:1px;
  height:1px; overflow:hidden; }

/* pagination */
.pager{ display:flex; justify-content:center; gap:.6rem; margin:2.6rem 0; }
.pager a, .pager span{ font-family:var(--sans); font-weight:800; font-size:.78rem;
  padding:.6em .95em; border:1.5px solid var(--rule-d); border-radius:3px;
  text-decoration:none; }
.pager .current{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pager a:hover{ border-color:var(--ink); }