/* Self-hosted Pirata One — was Google Fonts CDN, now under our control.
   Two subsets matching Google's split: latin covers basic ASCII, latin-ext
   covers accented characters. Browser only fetches the subset it needs. */
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/fonts/PirataOne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/fonts/PirataOne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/fonts/Anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/fonts/Anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* SubGenius v2 — brutalist zine, mobile-first.
   Three colors. One font stack. No frameworks. */

:root {
  --ink: #000;
  --paper: #f4efe6;
  --bob: #e63946;
  --rule: 4px solid var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--bob); }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
  gap: 10px;
}
.brand {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
}
.topnav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.topnav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-cta {
  background: var(--bob);
  color: #fff !important;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.nav-cta:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: "Anton", "Anton", "Impact", "Haettenschweiler", sans-serif;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}
h1 { font-size: clamp(56px, 13vw, 160px); font-weight: 900; }
h1 em { font-style: normal; color: var(--bob); }
h2 { font-size: clamp(36px, 7vw, 72px); font-weight: 900; margin-top: 0.2em; }
h3 { font-size: clamp(24px, 4vw, 36px); font-weight: 900; }

p { margin: 0 0 1em; }
em { font-style: italic; }
strong { font-weight: 800; }

/* ---------- shared section ---------- */
section {
  padding: 60px 20px;
  border-bottom: var(--rule);
}
section > *:first-child { margin-top: 0; }
section > *:last-child  { margin-bottom: 0; }

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--ink);
}
.kicker.red { color: var(--bob); }

/* ---------- hero ---------- */
.hero {
  padding-top: 50px;
  padding-bottom: 80px;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 22px,
      rgba(0,0,0,0.04) 22px 23px
    ),
    var(--paper);
}
.hero h1 { margin-bottom: 24px; }
.dek {
  font-size: clamp(18px, 2.4vw, 24px);
  font-style: italic;
  max-width: 30ch;
  margin-bottom: 36px;
}

/* ---------- CTA ---------- */
.cta-primary {
  display: inline-block;
  background: var(--bob);
  color: #fff !important;
  text-decoration: none;
  font-family: "Anton", "Impact", "Haettenschweiler", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: 0.03em;
  padding: 18px 28px;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 60ms, box-shadow 60ms;
}
.cta-primary:hover, .cta-primary:focus {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--ink);
  color: #fff !important;
}
.cta-primary:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--ink);
}
.cta-primary.big { font-size: clamp(28px, 6vw, 48px); padding: 22px 36px; }
.subcta { margin-top: 18px; font-size: 14px; }
.subcta a { color: var(--ink); }

/* ---------- quiz ---------- */
.quiz {
  background: var(--ink);
  color: var(--paper);
}
.quiz .q {
  font-family: "Anton", "Impact", sans-serif;
  text-transform: uppercase;
  font-size: clamp(22px, 4.5vw, 40px);
  font-weight: 900;
  margin: 0 0 14px;
  line-height: 1.05;
}
.quiz .q.big {
  color: var(--bob);
  font-size: clamp(40px, 8vw, 80px);
}
.quiz .a {
  margin-top: 28px;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
}

/* ---------- pitch ---------- */
.pitch p {
  font-size: clamp(18px, 2.4vw, 22px);
  max-width: 60ch;
}
.pitch p:last-of-type {
  font-family: "Anton", "Impact", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 28px;
  color: var(--bob);
}

/* ---------- trinity ---------- */
.trinity-intro { max-width: 60ch; font-style: italic; margin-bottom: 36px; }
.grid3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.text {
  border: var(--rule);
  padding: 24px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
}
.text h3 { color: var(--bob); margin-bottom: 6px; }
.byline {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 14px;
  color: #555;
}
.textlink {
  display: inline-block;
  margin-top: 8px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  border-bottom: 3px solid var(--bob);
  text-decoration: none;
  padding-bottom: 2px;
}

/* ---------- ordain ---------- */
.ordain {
  background: var(--bob);
  color: #fff;
}
.ordain .kicker.red { color: #fff; }
.ordain h2 { color: #fff; line-height: 0.9; }
.ordain a { color: #fff; }
.ordain .get {
  list-style: none;
  padding: 0;
  margin: 32px 0 36px;
  font-size: clamp(16px, 2.2vw, 20px);
  max-width: 56ch;
}
.ordain .get li {
  padding: 12px 0 12px 30px;
  border-top: 2px solid #fff;
  position: relative;
}
.ordain .get li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  font-family: "Anton", "Impact", sans-serif;
}
.ordain .get li:last-child { border-bottom: 2px solid #fff; }
.ordain .cta-primary {
  background: var(--ink);
  color: #fff !important;
  border-color: #fff;
  box-shadow: 6px 6px 0 #fff;
}
.ordain .cta-primary:hover { box-shadow: 4px 4px 0 #fff; }
.paypal-form { margin-top: 8px; }
.finepay {
  font-size: 13px;
  margin-top: 14px;
  opacity: 0.9;
  font-style: italic;
  max-width: 50ch;
}
.postcta {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 2px solid #fff;
  font-size: 15px;
}
.postcta a { text-decoration: underline; }

/* ---------- final warning ---------- */
.warning {
  background: var(--ink);
  color: var(--paper);
}
.warning a { color: var(--bob); }
.warning p { font-size: clamp(18px, 2.4vw, 22px); max-width: 60ch; }
.tagline {
  font-family: "Anton", "Impact", sans-serif;
  text-transform: uppercase;
  font-size: clamp(48px, 10vw, 96px);
  color: var(--bob);
  line-height: 1;
  margin-top: 32px;
}

/* ---------- footer ---------- */
footer {
  padding: 40px 20px 100px;
  text-align: center;
  font-size: 13px;
  background: var(--paper);
}
.footnav { margin: 12px 0; }
.footnav a { margin: 0 6px; text-decoration: none; font-weight: 700; text-transform: uppercase; }
.finefoot { color: #777; font-style: italic; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px; right: 16px;
  background: var(--bob);
  color: #fff !important;
  text-align: center;
  padding: 16px;
  font-family: "Anton", "Impact", sans-serif;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  z-index: 60;
}

/* ---------- breakpoints ---------- */
@media (max-width: 720px) {
  .topnav a:not(.nav-cta) { display: none; }
  section { padding: 44px 18px; }
  .sticky-cta { display: block; }
}

@media (min-width: 900px) {
  section { padding: 100px 60px; }
  .grid3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  body { font-size: 19px; }
}

@media (min-width: 1280px) {
  main > section > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .hero h1 { max-width: 14ch; }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
:focus-visible {
  outline: 3px solid var(--bob);
  outline-offset: 3px;
}

/* ===== v2.1: clipart =================================================== */
/* Canonical art only — no fan-art, no 22XDay deviantArt galleries.
   Each image earns its spot. */

/* HERO — Dobbs sticker beside headline */
.hero-row {
  display: flex;
  flex-direction: column-reverse;   /* stack: Dobbs above headline on mobile */
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 24px;
}
.hero-dobbs {
  width: 140px;
  height: auto;
  border: 4px solid var(--ink);
  background: #fff;
  padding: 8px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-3deg);
  image-rendering: -webkit-optimize-contrast;
}

@media (min-width: 720px) {
  .hero-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .hero-dobbs {
    width: clamp(180px, 22vw, 280px);
    flex-shrink: 0;
  }
}

/* ORDAIN — membership packet photo */
.packet {
  margin: 0 0 36px;
  display: inline-block;
  background: #fff;
  padding: 14px 14px 6px;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-1.2deg);
  max-width: 100%;
}
.packet img {
  display: block;
  max-width: 100%;
  height: auto;
}
.packet figcaption {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}

/* WARNING — skull-Bob */
.warning-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 8px;
}
.bobskull {
  width: 120px;
  height: auto;
  transform: rotate(4deg);
  filter: invert(1);                /* GIF is black-on-white; we're on black */
  image-rendering: -webkit-optimize-contrast;
}

@media (min-width: 720px) {
  .warning-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .warning-head h2 { flex: 1; }
  .bobskull { width: 180px; flex-shrink: 0; }
}

/* ===== v2.2: socials floater =========================================== */
/* Vertical strip of icons pinned to right edge on desktop.
   Horizontal strip across bottom on mobile, sitting ABOVE the sticky CTA. */

.socials {
  position: fixed;
  z-index: 55;          /* above sticky-cta? no, BELOW it. cta is z-60. */
  display: flex;
  pointer-events: none; /* container is invisible to clicks; children are not */
}

.socials a {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: transform 80ms, box-shadow 80ms, background 80ms, color 80ms;
}
.socials a:hover, .socials a:focus-visible {
  background: var(--bob);
  color: #fff;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.socials a:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.socials svg {
  width: 22px; height: 22px;
  fill: currentColor;
  display: block;
}

/* Desktop: vertical strip, right edge, vertically centered */
@media (min-width: 721px) {
  .socials {
    flex-direction: column;
    gap: 10px;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }
}

/* Mobile: horizontal strip, bottom of viewport, ABOVE the ORDAIN sticky button.
   Sticky CTA sits at bottom: 16px and is ~58px tall + 16px above => ~90px clearance.
   We sit at bottom: 90px so we're a comfortable gap above it. */
@media (max-width: 720px) {
  .socials {
    flex-direction: row;
    gap: 10px;
    bottom: 90px;
    left: 16px;
    right: 16px;
    justify-content: center;
  }
  .socials a { width: 42px; height: 42px; }
  /* Pad the page footer so socials don't overlap text on short pages */
  footer { padding-bottom: 160px; }
}

@media (max-width: 360px) {
  /* On very narrow phones, shrink slightly so 4 icons + gaps fit comfortably */
  .socials a { width: 38px; height: 38px; }
  .socials svg { width: 19px; height: 19px; }
}

/* ===== v2.3: centering pass =========================================== */

/* Generic centering helper for any text element */
.centered { text-align: center; }

/* For block elements that are NOT 100% wide (like the dek <p> with max-width),
   we also need to center the box itself, not just its text. */
p.centered { margin-left: auto; margin-right: auto; }

/* Remove underline on the Pink-boy link */
.no-ul, .no-ul:hover, .no-ul:focus { text-decoration: none !important; }

/* HERO: stack everything centered, top-to-bottom */
.hero { text-align: center; }
.hero .kicker { text-align: center; }
.hero-row {
  flex-direction: column !important;   /* override the desktop side-by-side */
  align-items: center !important;
  gap: 24px;
}
.hero-row h1 { max-width: 18ch; }       /* keep one-line feeling on wide screens */
.hero .dek { max-width: 32ch; }         /* wider than before; centering math */
.hero .cta-primary { display: inline-block; }
.hero .subcta { margin-left: auto; margin-right: auto; }

/* Pitch and trinity: lift the centered text-block constraints */
.pitch h2.centered, .trinity h2.centered {
  margin-left: auto; margin-right: auto;
}

/* Pitch closing line "This is the telling." should sit centered in the column */
.pitch p.centered { margin-left: auto; margin-right: auto; max-width: 60ch; }

/* The new ordain headline. Need <em>NEVER</em> to be visually distinct
   on the bob-red background — flip it to black for stomp. */
.ordain h2.centered { max-width: 22ch; margin-left: auto; margin-right: auto; }
.ordain h2 em { font-style: normal; color: var(--ink); }

/* The ordain section's inner blocks (form, list) should also center on screen */
.ordain { text-align: center; }
.ordain .get { text-align: left; margin-left: auto; margin-right: auto; }
.ordain .paypal-form { text-align: center; }
.ordain .postcta { text-align: center; }

/* Warning section: center its headline and Bob-skull row */
.warning { text-align: center; }
.warning .warning-head { justify-content: center; }
.warning p { margin-left: auto; margin-right: auto; }
.warning .tagline { text-align: center; }

/* ===== v2.4: don't let CTA button arrow wrap to its own line ============= */

.cta-primary {
  white-space: nowrap;     /* keep "BECOME AN ORDAINED MINISTER — $44.99 →" together */
}

/* On very narrow phones the longer text would force horizontal scrolling.
   Allow it to wrap naturally on tiny screens, but keep the price+arrow glued
   together (the &nbsp; we added handles that part). */
@media (max-width: 480px) {
  .cta-primary {
    white-space: normal;            /* allow wrapping on phones */
    font-size: clamp(16px, 4.6vw, 24px);
    padding: 16px 20px;
    line-height: 1.05;
  }
  .cta-primary.big {
    font-size: clamp(20px, 5.4vw, 32px);
    padding: 18px 22px;
  }
}

/* ===== v2.5: footer two-line brand line =================================== */
.footer-brand {
  margin: 0 0 2px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-brand strong { font-weight: 900; }
.footer-tag {
  margin: 0 0 12px;
  font-style: italic;
  color: #555;
  font-size: 12px;
}

/* ===== v2.6: blackletter brand line ====================================== */
.footer-brand {
  font-family: "Pirata One", "UnifrakturMaguntia", "Old English Text MT", "Times New Roman", serif;
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 400;        /* the font has its own weight; bold is unnecessary */
  text-transform: none;    /* blackletter looks WRONG in all-caps */
  letter-spacing: 0;
  line-height: 1.05;
  margin-bottom: 6px;
  color: var(--ink);
}
.footer-brand strong { font-weight: 400; }   /* override the inline strong */

/* ===== v2.7: blackletter top brand ======================================= */
.brand {
  font-family: "Pirata One", "UnifrakturMaguntia", "Old English Text MT", "Times New Roman", serif;
  font-weight: 400;
  text-transform: none;        /* blackletter MUST be mixed-case */
  letter-spacing: 0;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1;
  /* leave color/text-decoration to the existing rule */
}

/* Slightly more breathing room on tighter screens so the longer mixed-case
   wordmark doesn't crowd the nav-cta button. */
.topbar { padding-top: 12px; padding-bottom: 12px; }

@media (max-width: 480px) {
  .brand { font-size: 22px; max-width: 60%; }
}

/* ===== v2.8: bigger top brand, no top CTA ================================ */
.brand {
  font-size: clamp(28px, 6vw, 56px);   /* up from clamp(20px, 3.4vw, 30px) */
  line-height: 1;
}
@media (max-width: 480px) {
  .brand { font-size: 32px; max-width: 100%; }   /* takes the whole bar */
}

/* ===== v2.9: center the brand in the topbar ============================= */
/* Stack: brand centered on its own line, nav links below, also centered. */
.topbar {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.brand {
  display: block;
  text-align: center;
  width: 100%;
  max-width: 100%;
}
.topnav {
  justify-content: center;
}
@media (max-width: 480px) {
  .brand { max-width: 100%; }
}

/* ===== v2.10: tighten gap between brand and nav links ==================== */
.topbar { gap: 0; padding-top: 10px; padding-bottom: 8px; }
.brand { margin-bottom: -2px; }    /* pull nav up slightly */
.topnav { margin-top: 2px; }

/* ===== v2.11: featured commercial video section ========================== */
.commercial {
  background: var(--paper);
  text-align: center;
}
.commercial .kicker { margin-bottom: 12px; }
.commercial h2 {
  font-size: clamp(40px, 8vw, 80px);
  margin-bottom: 18px;
}
.commercial-byline {
  max-width: 60ch;
  margin: 0 auto 32px;
  font-style: italic;
  font-size: clamp(15px, 2vw, 18px);
}

.video-frame {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16 / 9;     /* native YouTube ratio */
  border: 4px solid var(--ink);
  background: var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 720px) {
  .video-frame { box-shadow: 6px 6px 0 var(--ink); }
}

/* ===== v2.12: guarantee tagline above copyright ========================== */
.guarantee-tagline {
  font-family: "Anton", "Anton", "Impact", "Haettenschweiler", sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(20px, 3.5vw, 32px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 18px auto 14px;
  max-width: 24ch;
  color: var(--ink);
}
.guarantee-tagline em {
  font-style: normal;
  color: var(--bob);
}

/* ===== v2.13: fix guarantee-tagline centering ============================ */
/* Width was too narrow (24ch) which forced ugly wrap, AND the auto margins
   were getting outvoted somewhere in the cascade. Force it. */
footer .guarantee-tagline {
  display: block;
  max-width: 28ch;
  width: max-content;       /* shrink to content width */
  margin: 24px auto 16px !important;
  text-align: center;
}
@media (max-width: 480px) {
  footer .guarantee-tagline { max-width: 90%; width: auto; }
}

/* ===== v2.14: documentary section ======================================== */
/* Visually mirrors .commercial but with subtle styling differences so the two
   videos don't feel like the same section twice. */
.documentary {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.documentary .kicker.red { color: var(--bob); }
.documentary h2 {
  color: var(--paper);
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1;
  margin-bottom: 18px;
}
.documentary h2 em {
  font-style: italic;
  color: var(--bob);
}
.doc-byline {
  max-width: 60ch;
  margin: 0 auto 32px;
  font-style: italic;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--paper);
}
.documentary .video-frame {
  /* Invert shadow so it pops against the dark background */
  box-shadow: 10px 10px 0 var(--bob);
  border-color: var(--paper);
}
@media (max-width: 720px) {
  .documentary .video-frame { box-shadow: 6px 6px 0 var(--bob); }
}

/* ===== v2.15: tone-down palette =========================================
   Override the original :root variables so every component using them
   automatically updates. White paper, charcoal ink, deep navy accent. */
:root {
  --paper: #ffffff;          /* was #f4efe6 cream */
  --ink:   #1a1a1a;          /* was #000 pure black */
  --bob:   #1d3557;          /* was #e63946 pipe-red, now ink-navy */
}

/* The hero had a faint diagonal-line texture using the old paper color.
   It still works against pure white, just slightly more visible. Tone it down. */
.hero {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,0.025) 22px 23px),
    var(--paper);
}

/* The pitch closing line was bob-red Impact. Against navy, it still works
   but feels a little heavy — keep it bold but slightly smaller. */
.pitch p:last-of-type { color: var(--bob); }

/* "PRAISE BOB" tagline was bob-red against black. Navy on charcoal needs
   slightly more contrast to read — bump weight or use white instead. */
.tagline { color: var(--bob); }

/* The em-NEVER on the ordain section was rendered in black against red.
   Now it's against navy — black still works fine. No change needed. */

/* ===== v2.16: GET ORDAINED buttons in red ===============================
   Keep the rest of the palette (white/charcoal/navy) but bring red back
   specifically for the conversion buttons so they pop against everything. */
.cta-primary {
  background: #e63946;       /* original Bob-pipe-red */
}
.cta-primary:hover,
.cta-primary:focus {
  background: #c92a37;       /* slightly deeper on hover */
}

/* Inside the .ordain section the button was overridden to charcoal-on-navy.
   That override now wins over our red. Restore red there too. */
.ordain .cta-primary {
  background: #e63946;
  color: #fff !important;
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.ordain .cta-primary:hover {
  background: #c92a37;
  box-shadow: 4px 4px 0 var(--ink);
}

/* Sticky mobile bar — same treatment */
.sticky-cta {
  background: #e63946;
}

/* ===== v2.17: doctrine page ============================================== */
.doc-hero {
  background: var(--paper);
  text-align: center;
  padding: 80px 20px 50px;
}
.doc-hero h1 {
  font-size: clamp(48px, 10vw, 120px);
  margin: 12px auto 16px;
  max-width: 16ch;
}
.doc-hero h1 em { font-style: italic; color: var(--bob); }

.doc-questions {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 70px 20px;
}
.doc-questions .big-q {
  font-family: "Anton", "Impact", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(22px, 4vw, 38px);
  line-height: 1.05;
  margin: 0 auto 16px;
  max-width: 30ch;
}
.doc-questions .big-q.grand {
  color: #e63946;
  font-size: clamp(40px, 8vw, 80px);
  margin-top: 18px;
}
.doc-questions .answer {
  margin-top: 28px;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  max-width: 40ch;
  margin-left: auto; margin-right: auto;
}
.doc-questions .microcap {
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
  max-width: 50ch;
  margin-left: auto; margin-right: auto;
}

.doc-prose {
  background: var(--paper);
  padding: 70px 20px;
}
.doc-prose.dark {
  background: var(--ink);
  color: var(--paper);
}
.doc-prose h2 {
  font-size: clamp(36px, 6vw, 56px);
  margin: 0 auto 28px;
  max-width: 22ch;
  text-align: center;
}
.doc-prose .lead {
  text-align: center;
  font-family: "Anton", "Impact", sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(24px, 4vw, 38px);
  color: var(--bob);
  margin: 0 auto 32px;
}
.doc-prose p {
  max-width: 64ch;
  margin: 0 auto 1.1em;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
}
.doc-prose p.conclude {
  font-family: "Anton", "Impact", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 4.5vw, 44px);
  text-align: center;
  line-height: 1.05;
  margin: 36px auto;
  color: var(--bob);
  max-width: 26ch;
}
.doc-prose p.bold-claim {
  font-family: "Anton", "Impact", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(22px, 3.5vw, 32px);
  text-align: center;
  margin: 28px auto;
  color: var(--bob);
}
.doc-prose.dark p.bold-claim { color: #e63946; }
.doc-prose p.big-claim {
  font-family: "Anton", "Impact", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 4.5vw, 44px);
  text-align: center;
  margin: 40px auto 0;
  max-width: 24ch;
  line-height: 1;
}

.dobbsquote {
  border-left: 4px solid var(--bob);
  padding: 12px 0 12px 24px;
  margin: 32px auto;
  max-width: 50ch;
}
.doc-prose.dark .dobbsquote { border-left-color: #e63946; }
.dobbsquote p {
  font-family: "Anton", "Impact", sans-serif;
  font-style: italic;
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 8px;
  line-height: 1.05;
}
.dobbsquote cite {
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
}

.curriculum {
  list-style: none;
  padding: 0;
  margin: 24px auto;
  max-width: 50ch;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: clamp(17px, 2vw, 20px);
}
.curriculum li {
  padding: 10px 0 10px 28px;
  border-top: 2px solid currentColor;
  position: relative;
  opacity: 0.85;
}
.curriculum li:last-child { border-bottom: 2px solid currentColor; }
.curriculum li::before {
  content: "✦";
  position: absolute; left: 0;
  color: var(--bob);
  font-weight: 900;
}
.doc-prose.dark .curriculum li::before { color: #e63946; }

@media (min-width: 720px) {
  .curriculum.two-col { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

.microcite {
  font-size: 0.9em;
  font-style: italic;
  opacity: 0.8;
}

/* ===== v2.18: hamburger menu (top-left, fixed, offset from corner) ======= */
.hamburger {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 70;          /* above everything else (sticky topbar is 50, stickyCTA 60) */
  width: 44px;
  height: 44px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: transform 80ms, box-shadow 80ms, background 80ms;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--ink);
  border-radius: 0;
}
.hamburger:hover, .hamburger:focus-visible {
  background: #e63946;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.hamburger:hover span, .hamburger:focus-visible span {
  background: #fff;
}
.hamburger:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

/* Empty menu placeholder — keep hidden via [hidden] attribute, links go in later */
.hamburger-menu[hidden] { display: none; }

/* ===== v2.19: hamburger menu — open state + dobbshead bullets =========== */

/* When the menu is shown (JS removes [hidden] and adds .open to body),
   it slides down from the top-left under the hamburger button. */
.hamburger-menu {
  position: fixed;
  top: 68px;          /* 14 (hamburger top) + 44 (height) + 10 gap */
  left: 14px;
  z-index: 69;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 18px 22px;
  min-width: 220px;
  max-width: calc(100vw - 32px);
}
.hamburger-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hamburger-menu li {
  padding: 6px 0 6px 28px;
  position: relative;
}
.hamburger-menu li::before {
  /* Tiny Dobbshead bullet */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 22px;             /* dobbs.jpg is roughly 110x155 → ~1:1.4 */
  background-image: url('/v2/img/dobbs.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hamburger-menu a {
  display: inline-block;
  font-family: "Anton", "Impact", "Haettenschweiler", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 80ms, color 80ms;
}
.hamburger-menu a:hover, .hamburger-menu a:focus {
  color: #e63946;
  border-bottom-color: #e63946;
}

/* Hamburger -> X transformation when menu is open */
.hamburger[aria-expanded="true"] {
  background: #e63946;
}
.hamburger[aria-expanded="true"] span { background: #fff; }
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.hamburger span {
  transition: transform 120ms, opacity 80ms, background 80ms;
}

/* ===== v2.20: hamburger submenu (indented) ============================= */
.hamburger-menu .submenu {
  list-style: none;
  margin: 4px 0 4px 22px;
  padding: 0;
  border-left: 2px solid var(--ink);
  padding-left: 14px;
}
.hamburger-menu .submenu li {
  padding-left: 24px;       /* tighter indent for sub-items, dobbshead still fits */
}
.hamburger-menu .submenu li::before {
  width: 14px;              /* slightly smaller dobbshead bullet for sub-items */
  height: 18px;
}
.hamburger-menu .submenu a {
  font-size: 15px;          /* slightly smaller than top-level 18px */
}

/* External-link items get a discreet marker */
.hamburger-menu a[href^="http"]::after {
  content: " ↗";
  opacity: 0.5;
  font-size: 0.85em;
}
/* TODO links (no href yet) get a "soon" hint */
.hamburger-menu a[data-todo]::after {
  content: " — soon";
  opacity: 0.5;
  font-size: 0.7em;
  text-transform: lowercase;
  letter-spacing: 0;
  font-family: -apple-system, system-ui, sans-serif;
  font-style: italic;
}
.hamburger-menu a[data-todo] {
  pointer-events: none;
  color: #888;
}

/* ===== v2.21: kill accent color on heading emphasis ===================
   Bob asked for option A: emphasized words in headings stay pure black/ink,
   not the navy accent. Affects h1 em, h2 em throughout the site. */
h1 em, h2 em {
  color: var(--ink) !important;
}
.documentary h2 em { color: #fff !important; }   /* dark section, em flips to white */

/* ===== v2.22: keep hamburger out of the brand line =====================
   The hamburger sits at top:14px, left:14px and overlaps the centered
   blackletter brand. Push the topbar contents to the right of the hamburger
   on screens narrow enough for the collision. */
@media (max-width: 720px) {
  .topbar { padding-left: 70px; padding-right: 16px; }
  .brand { font-size: 26px; }      /* shrink slightly so it fits next to hamburger */
}
@media (max-width: 480px) {
  .topbar { padding-left: 66px; }
  .brand { font-size: 22px; }      /* tighter still on phones */
}
@media (max-width: 360px) {
  .brand { font-size: 19px; }
}

/* ===== v2.23: re-balance topbar — match left padding on right and grow brand back ==
   v2.22 added padding-left to clear the hamburger but left right side flush,
   so the brand was visually pushed off-center AND shrunk to fit. Mirror the
   padding so the brand is properly centered, and bump the font back up. */
@media (max-width: 720px) {
  .topbar { padding-left: 70px; padding-right: 70px; }
  .brand { font-size: 32px; }
}
@media (max-width: 480px) {
  .topbar { padding-left: 60px; padding-right: 60px; }
  .brand { font-size: 28px; }
}
@media (max-width: 360px) {
  .topbar { padding-left: 56px; padding-right: 56px; }
  .brand { font-size: 24px; }
}

/* ===== v2.24: hi-res hero Dobbshead (picture element) ==================
   The old <img> rule already styles .hero-dobbs.
   When .hero-dobbs becomes a <picture> wrapper, the styling shifts:
   the wrapper holds the box, the inner <img> holds the actual image.
   Mirror the original look: white frame, ink border, drop shadow, 3deg tilt. */
picture.hero-dobbs {
  display: inline-block;
  background: #fff;
  padding: 8px;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-3deg);
  width: 140px;
  line-height: 0;
  flex-shrink: 0;
}
picture.hero-dobbs img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
@media (min-width: 720px) {
  picture.hero-dobbs { width: clamp(180px, 22vw, 280px); }
}

/* ===== v2.25: brand as image (SVG with self-hosted webfont) ============
   Replaces text-with-line-break problem. SVG scales with no rasterization.
   The <img> takes up the available width; height auto-scales to maintain ratio.
   Topbar is centered, so the image centers within it. */
.brand img {
  display: block;
  width: 100%;
  max-width: 760px;       /* desktop cap — image won't blow out beyond this */
  height: auto;
  margin: 0 auto;
  /* Empty rendering during font-load — the SVG references our webfont
     which loads on first paint. */
}

/* The brand link itself becomes a flex container holding the image */
.brand {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* nuke prior text styling on .brand */
  font-size: 0;
  letter-spacing: 0;
  margin: 0;
  padding: 0 14px;        /* small inset so the image doesn't kiss the edges */
}

/* Re-mirror the existing topbar padding around the brand image */
.topbar { padding-left: 70px; padding-right: 70px; }

@media (min-width: 900px) {
  .brand img { max-width: 720px; }
}
@media (max-width: 720px) {
  .topbar { padding-left: 64px; padding-right: 64px; }
  .brand img { max-width: 100%; }
}
@media (max-width: 480px) {
  .topbar { padding-left: 56px; padding-right: 56px; }
}

/* Override v2.7's font-family rule — no longer applies since brand is now an image */

/* ===== v2.26: hamburger BELOW the topbar, brand fills the top row =======
   Bob's screenshots showed the brand SVG overflowing the viewport and the
   hamburger crashing into it. Two fixes:
   1) Move the hamburger below the topbar's bottom border (no more overlap)
   2) Constrain the brand image to never exceed its container width
   3) Drop the symmetric padding on the topbar — brand gets the full row */

/* Hamburger: pin BELOW the topbar instead of top-left of viewport */
.hamburger {
  top: auto;
  bottom: auto;
  /* Position will be set per-page based on topbar height; use safer offset */
  /* Actually simpler: use position: absolute on the topbar instead. But
     hamburger needs to stay on viewport scroll. Keep fixed; set top such
     that it's just below where the brand image bottom-edges out. */
  top: 78px;        /* below the ~70px topbar */
  left: 14px;
  z-index: 70;
}

/* Restore symmetric topbar padding — no longer needs to dodge hamburger */
.topbar { padding-left: 16px !important; padding-right: 16px !important; }

/* Brand image: constrain to container, scale down to fit */
.brand {
  display: block;
  width: 100%;
  padding: 0;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 760px;
  margin: 0 auto;
  /* Critical: prevent SVG from rendering at intrinsic width when its parent
     is narrower. width:100% forces it to scale down. */
}

/* The hamburger menu opens just below where the hamburger sits */
.hamburger-menu {
  top: 132px;   /* hamburger is at top:78 + 44 height + 10 gap */
}

/* On taller phones / sticky scrolls, ensure the hamburger remains visible
   by NOT being position:fixed inside the topbar but truly viewport-fixed. */

/* Account for the now-below-topbar hamburger eating ~58px of vertical space
   below the brand. Push the next section down so the hamburger doesn't
   visually crash into hero content on first scroll. */
.hero { padding-top: 70px; }

/* ===== v2.27: brand as a real rendered raster image =====================
   The SVG-with-webfont approach didn't work — many browsers won't load
   external fonts referenced inside an SVG file's @font-face. We're now
   shipping a server-side-rendered raster of the same blackletter text,
   so what you see is exactly what we authored. */
.brand picture {
  display: block;
  width: 100%;
  line-height: 0;
}
.brand picture img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .brand picture img { max-width: 100%; }
}

/* ===== v2.28: "Do YOU?" pops red against the dark quiz section ========= */
.quiz .q.big { color: #e63946; }

/* ===== v2.29: "This is the telling." in red ============================ */
.pitch p:last-of-type { color: #e63946; }

/* ===== v2.30: Trinity card titles in red ============================== */
.text h3 { color: #e63946; }

/* ===== v2.31: NEVER pops red on the ordain headline ====================
   The ordain section background is navy. <em>NEVER</em> was forced to ink
   charcoal by the v2.21 h1/h2 em rule. Override it back to red here so the
   word punches through. */
.ordain h2 em { color: #e63946 !important; }

/* ===== v2.32: finepay bigger + better wrap balance =====================
   Bob: the <br> created a "books, or Hour of Slack archives in the cart"
   line that wrapped to one orphan word on mobile. One paragraph + tighter
   max-width pushes the natural wrap to land balanced. Bump font size too. */
.finepay {
  font-size: clamp(14px, 1.8vw, 17px);
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;       /* modern browsers balance the line wrapping */
  line-height: 1.45;
}
.ordain .finepay {
  /* Inside the ordain section the prior rule set 13px; override with same bump */
  font-size: clamp(14px, 1.8vw, 17px);
  max-width: 32ch;
}

/* ===== v2.33: postcta — bigger overall, "Already ordained?" larger still */
.postcta {
  font-size: clamp(17px, 2.2vw, 22px);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}
.postcta-q {
  font-family: "Anton", "Impact", "Haettenschweiler", sans-serif;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -1px;          /* nudge baseline so it sits visually inline */
}

/* ===== v2.34: PRAISE "BOB." larger + white on the dark warning section == */
.tagline {
  color: #fff !important;
  font-size: clamp(64px, 14vw, 140px);
}

/* ===== v2.35: hero dek bigger ===========================================
   "Well, no, probably not...but whatever you do, just keep reading!" sat
   too small under the giant headline. Bump it up significantly so it
   carries weight as Stang's actual voice. */
.hero .dek {
  font-size: clamp(22px, 3.6vw, 34px);
  max-width: 26ch;
  line-height: 1.3;
}

/* ===== v2.36: Anton swap + DO YOU? ?-spacing fix =====================
   Anton has more generous default kerning than Impact, but for very large
   sizes (the .quiz .q.big "DO YOU?") add a touch of letter-spacing so the
   "?" sits comfortably away from the "U". */
.quiz .q.big {
  letter-spacing: 0.04em;
  word-spacing: 0.1em;
}
/* Same generosity on the giant warning tagline */
.tagline {
  letter-spacing: 0.03em;
}

/* ===== v2.37: dobbscoin.info bg tile on white sections =================
   Same tile that runs behind dobbscoin.info — repeating background, fixed,
   so it doesn't scroll with content. Only on the "paper" (white) sections;
   the dark ink-charcoal sections (quiz, documentary, warning) and the navy
   ordain section keep their solid fills as visual punctuation. */

body {
  background-image: url('/v2/img/bg.png');
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
}

/* Sections that use --paper (white) — give them a transparent fill so the
   body background shows through. */
.hero,
.pitch,
.trinity,
.commercial,
.scatalog-hero,
.cat-section,
.gift-note,
.buy-block,
.morestuff,
.membership-hero,
.pitch-block,
footer {
  background: transparent;
}

/* The hero originally had a faint diagonal-line stripe pattern on top of
   white. With the bg tile now showing through, the stripes would fight it.
   Drop the stripes on hero. */
.hero {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,0.03) 22px 23px),
    transparent;
}
.scatalog-hero {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,0.03) 22px 23px),
    transparent;
}
.membership-hero {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,0.03) 22px 23px),
    transparent;
}

/* Dark sections keep their solid fills — these stay as-is */
.quiz, .documentary, .warning, .ordain, .you-get, .shoutout, .viewcart {
  /* unchanged */
}

/* The Vault section has its own warm cream background — leave that alone too,
   that's a deliberate "archival" tone */
.cat-vault {
  background: #f0ece4;
}

/* Trinity card backgrounds inherit body bg by default; force white-tile-on-tile
   to be the white tile so cards have a slightly different texture from page */
.text {
  background: rgba(255,255,255,0.85);    /* let some bg bleed through */
}
.card {
  background: rgba(255,255,255,0.92);
}

/* topbar — keep readable, semi-translucent over bg */
.topbar {
  background: rgba(255,255,255,0.95);
}

/* ===== v2.38: bg scrolls with the page ============================== */
body { background-attachment: scroll; }

/* ===== v2.39: line-height fix for Anton ==============================
   Anton's glyphs sit taller in the line-box than Impact's, so the previous
   line-height: 0.9 / 0.95 caused stacked headline lines to clip into each
   other. Loosen line-heights to give Anton breathing room. */
h1, h2, h3 { line-height: 1.05 !important; }
.ordain h2 { line-height: 1.05 !important; }
.tagline { line-height: 1.0 !important; }
.quiz .q { line-height: 1.1 !important; }
.quiz .q.big { line-height: 1.05 !important; }

/* ===== v2.40: DO YOU? more breathing room ============================ */
.quiz .q.big { line-height: 1.15 !important; padding: 12px 0; }

/* ===== v2.41: socials with personality (option B) ===========================
   Brutalist-zine treatment: each icon gets a unique tilt (sticker-applied feel),
   subtle halftone-dot background, slightly varied border weight for hand-applied
   look. The shared rules in v2.21 still set base size/border/shadow. */

/* Halftone dot pattern background — subtle, doesn't fight the icon */
.socials a {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0,0,0,0.08) 1px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.08) 1px, transparent 1.5px);
  background-size: 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px;
}

/* Per-icon tilts — different angle each so they look hand-stuck */
.socials a:nth-child(1) { transform: rotate(-2.5deg); }    /* Facebook */
.socials a:nth-child(2) { transform: rotate(1.5deg); }     /* YouTube */
.socials a:nth-child(3) { transform: rotate(-1deg); }      /* Hour of Slack */
.socials a:nth-child(4) { transform: rotate(2deg); }       /* Reddit */
.socials a:nth-child(5) { transform: rotate(-1.5deg); }    /* Email */

/* On hover, the tilt straightens slightly + the halftone gets bolder */
.socials a:hover, .socials a:focus-visible {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.25) 1px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.25) 1px, transparent 1.5px);
  /* Override the rotation in the existing :hover (which only set translate)
     so the icon "uncurls" toward straight, mimicking a sticker being touched */
}
.socials a:nth-child(1):hover { transform: translate(1px, 1px) rotate(-1deg); }
.socials a:nth-child(2):hover { transform: translate(1px, 1px) rotate(0.5deg); }
.socials a:nth-child(3):hover { transform: translate(1px, 1px) rotate(-0.3deg); }
.socials a:nth-child(4):hover { transform: translate(1px, 1px) rotate(0.5deg); }
.socials a:nth-child(5):hover { transform: translate(1px, 1px) rotate(-0.5deg); }

/* Slightly varied border thickness for hand-applied feel */
.socials a:nth-child(2) { border-width: 4px; }   /* YouTube — slightly thicker */
.socials a:nth-child(3) { border-width: 2px; }   /* Hour of Slack — slightly thinner */

/* When mobile horizontal-strip stacks them, untilt slightly so they don't
   overlap each other and don't get cropped by the strip's left/right edges */
@media (max-width: 720px) {
  .socials a:nth-child(1) { transform: rotate(-1.5deg); }
  .socials a:nth-child(2) { transform: rotate(1deg); }
  .socials a:nth-child(3) { transform: rotate(-0.7deg); }
  .socials a:nth-child(4) { transform: rotate(1.3deg); }
  .socials a:nth-child(5) { transform: rotate(-1deg); }
}