/*
Theme Name: True Strength Warrior — Static Template
Theme URI: https://truestrengthwarrior.com/
Author: ChatGPT
Description: Static-first WordPress theme. Home is frozen; Writings lists posts. Content editing is for posts only.
Version: 1.0.26.30
License: GPLv2 or later
Text Domain: tsw
*/

:root{
  --bg: #0b0d10;
  --paper: #14171c;
  --paper-2:#0f1216;
  --ink: #e9e3d6;
  --muted: rgba(233,227,214,.72);
  --gold:#d9b35f;
  --crimson:#8b1e2d;
  --stone:#b7b0a2;
  --line: rgba(233,227,214,.14);
  --shadow: rgba(0,0,0,.45);
  --maxw: 980px;
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond, Georgia, serif;
  /* Background lives on a fixed pseudo-element.
     This avoids visible "stepping" on mobile when the browser UI collapses/expands during scroll. */
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  letter-spacing: .2px;
  overflow-x: hidden;
}

/* Ensure form controls inherit site typography (iOS/Safari defaults to a system UI font otherwise) */
button,
input,
select,
textarea{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Site background (static across scroll) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1200px 700px at 20% 0%, #151a22 0%, var(--bg) 55%, #06070a 100%);
  transform: translateZ(0);
  will-change: transform;
}

a{ color: var(--gold); text-decoration:none; }
a:hover{ text-decoration: underline; text-underline-offset: 4px; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(11,13,16,.92), rgba(11,13,16,.70));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
  min-width: 0;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width: 0;
}
.brand .name{
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 3.2px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  min-width: 0;
  white-space: nowrap;
  /* Default: show full title. Truncation is applied only on very small screens. */
  overflow: visible;
  text-overflow: clip;
}
.brand .mark{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(217,179,95,.10);
}
.nav-links{
  display:flex;
  justify-content:flex-end;
}
.nav-links-list{
  display:flex;
  gap:14px;
  flex-wrap: wrap;
  justify-content:flex-end;
  list-style:none;
  padding:0;
  margin:0;
}
.nav-links a{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
}
.nav-links a.active,
.nav-links a:hover{
  color: var(--ink);
  background: rgba(233,227,214,.06);
}

/* Hide mobile-only browse control on desktop */
.nav-browse{ display:none; }

.hero{
  position: relative;
  min-height: 88vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:-30px;
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* Writings (Posts Page) hero crop: desktop only */
@media (min-width: 901px){
  body.blog .hero-bg,
  body.page-template-page-writings .hero-bg,
  body.category .hero-bg,
  body.tag .hero-bg{
    background-position: center 70%;
  }
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(11,13,16,.35) 0%, rgba(11,13,16,.74) 55%, rgba(11,13,16,.95) 100%),
    radial-gradient(900px 560px at 50% 35%, rgba(217,179,95,.13) 0%, rgba(217,179,95,0) 60%),
    radial-gradient(900px 560px at 30% 55%, rgba(139,30,45,.12) 0%, rgba(139,30,45,0) 65%);
}
.hero-content{
  position:relative;
  padding: 96px 0 64px;
}

/* Main title style (used across templates) */
.axiom{
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.0 !important;
  letter-spacing: 1px;
  margin: 0 0 18px;
  text-align:center;
  text-transform: uppercase;
}

/* One definitive title shadow for titles over imagery (applies to WRITINGS and any hero titles that remain) */
.hero .axiom{
  text-shadow:
    0 18px 52px rgba(0,0,0,.72),
    0 6px 16px rgba(0,0,0,.62),
    0 2px 6px rgba(0,0,0,.55);
}

.axiom span{
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Optional sizing class used in some templates */
.axiom--hero{
  font-size: clamp(22px, 2.6vw, 40px);
}

/* Hide TRUE STRENGTH WARRIOR everywhere (desktop + mobile) without affecting WRITINGS */
.hero .axiom--hero{
  display: none;
}

.subaction{
  text-align:center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 22px;
}
.capture{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap: wrap;
  margin: 18px auto 0;
  max-width: 560px;
}

/* Subscribe CTA button (Substack) */
.capture--cta{
  display:flex;
  justify-content:center;
}

.btn--substack{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  /* Match the sizing rhythm of other site buttons */
  min-width: 0;
  text-align:center;
}

/* Substack embedded subscribe */
.capture--embed{
  display: block;
  max-width: 560px;
  margin: 18px auto 0;
  border-radius: 14px;
  border: 1px solid rgba(233,227,214,.18);
  background: rgba(15,18,22,.72);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  overflow: hidden;
}
.capture--embed iframe{
  display:block;
  width: 100%;
  height: 170px;
  border: 0;
  background: transparent;
}
.capture input{
  width: 100%;
  max-width: 520px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(233,227,214,.18);
  background: rgba(15,18,22,.72);
  color: var(--ink);
  outline: none;
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.capture input::placeholder{ color: rgba(233,227,214,.55); }
.capture button{
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(217,179,95,.55);
  background: linear-gradient(180deg, rgba(217,179,95,.22), rgba(217,179,95,.10));
  color: var(--ink);
  cursor:pointer;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 12px;
}
.capture button:hover{
  border-color: rgba(217,179,95,.85);
  background: linear-gradient(180deg, rgba(217,179,95,.30), rgba(217,179,95,.12));
}

.hero-down{
  margin-top: 40px;
  display:flex;
  justify-content:center;
  color: rgba(233,227,214,.50);
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.hero-down .line{
  width: 84px;
  height: 1px;
  background: rgba(233,227,214,.18);
  margin: 10px auto 0;
}

.section{
  padding: 70px 0;
  border-top: 1px solid var(--line);
}

/* Image-less subscription band (keeps rhythm after hero) */
.subscribe-band{
  position: relative;
  /* Equal spacing above/below subscribe section (match Writings rhythm) */
  padding: 48px 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 560px at 50% 10%, rgba(217,179,95,.12) 0%, rgba(217,179,95,0) 60%),
    radial-gradient(900px 560px at 30% 60%, rgba(139,30,45,.10) 0%, rgba(139,30,45,0) 65%),
    linear-gradient(180deg, rgba(12,14,17,.80), rgba(12,14,17,.96));
}

/* Sales page: keep the subscribe band on the site’s default background (match FAQ section) */
.subscribe-band--sales{
  background: none;
}
.subscribe-band .hero-content{ padding: 0; }

/* Home subscribe band: centered width without a card box */
.subscribe-band .subscribe-inner{
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 28px;
}

/* Normalize vertical rhythm inside subscribe bands so Home + Writings match
   (first/last child margins frequently create the illusion of uneven padding) */
.subscribe-band .subscribe-inner > :first-child,
.subscribe-band .subscribe-box > :first-child{ margin-top: 0; }
.subscribe-band .subscribe-inner > :last-child,
.subscribe-band .subscribe-box > :last-child{ margin-bottom: 0; }

/* Dedicated status line under the subscribe form (keeps bottom spacing consistent) */
.subscribe-band .capture-msg{
  margin: 14px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}

/* If there is no message, remove the element entirely so spacing matches Home */
.subscribe-band .capture-msg:empty{ display: none; }

/* Subscribe container box: consistent padding across Home and Writings */
.subscribe-band .subscribe-box{
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(233,227,214,.14);
  background: linear-gradient(180deg, rgba(20,23,28,.86), rgba(15,18,22,.88));
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

/* Subscribe headings: hard-center alignment on all devices */
.subscribe-band .axiom--motto,
.subscribe-band .axiom--subscribe{
  width: 100%;
  text-align: center;
}

/* Motto: force exactly two lines (no additional wrapping) */
.axiom--motto .motto-line{
  display:block;
  white-space: nowrap;
}

/* Subaction spacing (subtitle under the subscribe headline) */
.subscribe-band .subaction{
  margin: 0 0 20px;
}

/* Never allow subscribe components to exceed viewport width */
.subscribe-band,
.subscribe-band *{
  max-width: 100%;
}
.subscribe-band{
  overflow-x: clip;
}

/* Remove underlines for buttons only (keep normal link hover underlines elsewhere) */
.btn, .btn:hover, .btn:focus, .btn:active,
.capture button, .capture button:hover, .capture button:focus, .capture button:active{
  text-decoration: none !important;
}

/* Two-up section cards for Home (desktop), stacked on mobile */
.home-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.home-grid .span-6{ grid-column: span 6; }
.home-grid .span-12{ grid-column: span 12; }
@media (max-width: 900px){
  .home-grid .span-6,
  .home-grid .span-12{ grid-column: span 12; }
}
.card{
  background: linear-gradient(180deg, rgba(20,23,28,.88), rgba(15,18,22,.88));
  border: 1px solid rgba(233,227,214,.14);
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  overflow:hidden;
}
.card-inner{ padding: 34px 28px; }
.kicker{
  color: rgba(217,179,95,.88);
  text-transform: uppercase;
  letter-spacing: 2.6px;
  font-size: 12px;
  margin: 0 0 10px;
}
.h2{
  font-size: 30px;
  margin: 0 0 14px;
  letter-spacing: .5px;
}
.p{
  margin: 0 0 12px;
  color: rgba(233,227,214,.82);
  font-size: 17px;
}
.divider{
  margin: 22px 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(233,227,214,0), rgba(233,227,214,.22), rgba(233,227,214,0));
}
.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Writings: browse (auto categories + tags) */
.browse{
  /* Space below the subscribe button */
  /* Increased so it visibly drops below the button */
  margin-top: 34px;
  display:flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

/* Ensure the browse block centers even if parent flex rules change */
.hero .browse,
.hero-right .browse{
  align-items: center;
}
.browse-group{
  width: 100%;
  max-width: 760px;
  text-align: center;
  /* Force true centering regardless of parent/inherited alignment */
  display:flex;
  flex-direction: column;
  align-items: center;
}
.browse-label{
  color: rgba(233,227,214,.58);
  text-transform: uppercase;
  letter-spacing: 2.1px;
  font-size: 11px;
  margin: 0 0 10px;
}
.browse-links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}
.browse-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(233,227,214,.16);
  background: rgba(233,227,214,.03);
  color: var(--ink);
  text-decoration:none;
  font-size: 12px;
  letter-spacing: .3px;
}
.browse-pill:hover{
  background: rgba(233,227,214,.07);
  text-decoration:none;
}
.browse-pill:focus{
  outline: 2px solid rgba(217,179,95,.45);
  outline-offset: 2px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(233,227,214,.18);
  background: rgba(233,227,214,.04);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 12px;
}
.btn:hover{ background: rgba(233,227,214,.07); }
.btn.primary{
  border-color: rgba(217,179,95,.55);
  background: rgba(217,179,95,.10);
}
.btn.primary:hover{ background: rgba(217,179,95,.16); }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.col-7{ grid-column: span 7; }
.col-5{ grid-column: span 5; }
@media (max-width: 900px){
  .col-7,.col-5{ grid-column: span 12; }
}

.gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gallery img{
  width:100%;
  height: 260px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(233,227,214,.14);
  filter: saturate(1.05) contrast(1.02);
}
@media (max-width: 700px){
  .gallery{ grid-template-columns: 1fr; }
  .gallery img{ height: 220px; }
}

.reader{
  max-width: 760px;
  margin: 0 auto;
}
.reader h1{
  font-size: 40px;
  line-height: 1.12;
  margin: 26px 0 8px;
}
.meta{
  color: rgba(233,227,214,.60);
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.reader h2{
  font-size: 26px;
  margin: 30px 0 10px;
}
.reader p{
  font-size: 18px;
  color: rgba(233,227,214,.84);
  margin: 0 0 14px;
}
.reader blockquote,
.reader .entry-content blockquote,
.reader .entry-content .wp-block-quote{
  margin: 22px 0;
  padding: 16px 18px;
  border-left: 3px solid rgba(120,170,255,.65);
  background: rgba(80,120,200,.16);
  border-radius: 12px;
  color: rgba(233,227,214,.92);
}

.hr-art{
  margin: 34px 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(233,227,214,0), rgba(217,179,95,.35), rgba(233,227,214,0));
}

.footer{
  border-top: 1px solid var(--line);
  padding: 40px 0;
  color: rgba(233,227,214,.62);
  font-size: 13px;
}
.footer .foot-inner{
  display:flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap:wrap;
}
.smallcaps{
  text-transform: uppercase;
  letter-spacing: 2.6px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(233,227,214,.16);
  background: rgba(233,227,214,.04);
}
.badge i{
  width:8px; height:8px; border-radius:999px;
  background: var(--crimson);
  box-shadow: 0 0 0 6px rgba(139,30,45,.10);
}

/* Mobile nav button */
.burger{
  display:none;
  border: 1px solid rgba(233,227,214,.18);
  background: rgba(233,227,214,.04);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  cursor:pointer;
}
@media (max-width: 760px){
  /* Protocol: ensure CTA buttons render with identical type sizing on mobile */
  .actions .btn,
  .actions .btn.primary{
    font-size: 12px;
    letter-spacing: 2.2px;
  }

  .burger{ display:inline-flex; }
  .nav-links{
    display:none;
    width:100%;
    padding: 8px 0 4px;
  }
  .nav-links.open{ display:block; }
  .nav-links-list{
    width:100%;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 4px;
  }
  .nav-links a{ width:100%; }
}

@media (max-width: 420px){
  .brand .name{
    font-size: 13px;
    letter-spacing: 2.6px;
    max-width: none;
  }
}

/* Extra-small phones: prevent the header from overflowing (brand title can push MENU off-screen). */
@media (max-width: 360px){
  .nav-inner{ gap: 10px; }
  .brand{ flex: 1; min-width: 0; gap: 10px; }
  .brand .name{
    font-size: 13px;
    letter-spacing: 2.6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .burger{ flex: 0 0 auto; }
}

/* Mobile: move category/tag browsing into the Menu (keeps hero composition clean) */
@media (max-width: 760px){
  /* Hide the on-page browse pills on phone */
  .browse{ display:none; }

  .nav-browse{ display:block; margin-top: 8px; }
  .nav-browse-toggle{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(233,227,214,.14);
    background: rgba(233,227,214,.03);
    color: var(--ink);
    border-radius: 12px;
    padding: 12px 12px;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-size: 12px;
    cursor: pointer;
  }
  .nav-browse-toggle::after{
    content: "▾";
    opacity: .8;
    transform: translateY(-1px);
  }
  .nav-browse-toggle[aria-expanded="true"]::after{ content: "▴"; }

  .nav-browse-panel{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(233,227,214,.10);
  }
  .nav-browse-section{ margin: 0 0 12px; }
  .nav-browse-title{
    color: rgba(233,227,214,.58);
    text-transform: uppercase;
    letter-spacing: 2.1px;
    font-size: 11px;
    margin: 0 0 8px;
  }
  .nav-browse-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .nav-browse-list a{
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(233,227,214,.14);
    background: rgba(233,227,214,.03);
    color: var(--ink);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .3px;
  }
  .nav-browse-list a:hover{ background: rgba(233,227,214,.06); }
}

/* Prevent underline on buttons */
.btn,
.btn:visited{
  text-decoration:none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ transform: none !important; }
}

/* WordPress adjustments */
.entry-content{ margin:0; }
.wp-block-image img{ border-radius: 16px; }

/* Buttons: remove underline in all states */
.btn, .btn:hover, .btn:focus, .btn:active, .btn:visited{
  text-decoration: none !important;
}
.nav-links a, .nav-links a:hover, .nav-links a:focus, .nav-links a:active{
  text-decoration: none !important;
}

/* Typography sizing tweaks */
.axiom--motto{
  font-size: clamp(24px, 3vw, 40px);
}
.axiom--subscribe{
  font-size: clamp(24px, 3vw, 40px);
}

@media (max-width: 760px){
  .capture{ flex-direction: column; align-items: stretch; gap: 14px; }
  .capture input{ max-width: none; margin-bottom: 0; width: 100%; }
  .capture button{ width: 100%; }
  /* Keep the Substack CTA sized like other buttons on mobile */
  .capture--cta{ align-items: center; }
  .btn--substack{ align-self: center; width: auto; }
  .axiom--motto,
  .axiom--subscribe{ font-size: clamp(17px, 4.8vw, 25px); }
  /* Reduce tracking on smaller screens to avoid visual "off-centering" from overflow */
  .subscribe-band .axiom{ letter-spacing: .35px; }
  .axiom--motto .motto-line{ white-space: nowrap; }
  .subscribe-band .subscribe-box,
  .subscribe-band .subscribe-inner{ padding: 28px 20px; }
}

@media (max-width: 760px){
  .nav-inner{ position: relative; }
  .brand .name{
    /* Keep the full title on typical phones/tablets.
       Ellipsis is reserved for extra-small screens (see 360px rule below). */
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
  .nav-links{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: linear-gradient(to bottom, rgba(11,13,16,.96), rgba(11,13,16,.88));
    border: 1px solid rgba(233,227,214,.10);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
  }
}

@media (max-width: 760px){
  .footer .badge{ display:none; }
}

.reader .entry-content .wp-block-quote cite{ color: rgba(233,227,214,.62); font-size: 13px; }

/* Ensure manual line breaks render in hero subtitles */
.hero .subaction{ white-space: normal; }
.hero .subaction br{ display:block; }

/* Protocol page: keep the mobile purchase CTA subtitle visually identical to the hero subtitle */
@media (max-width: 768px){
  body.page-template-page-protocol .purchase-cta--mobile .subaction{
    font-size: 15px;
    line-height: 1.45;
    color: var(--muted);
  }
}


/* Tighter multi-line spacing for post preview titles (mobile)
   Listings use <h2 class="h2"> inside .card/.card-inner on:
   - Writings page (page template)
   - Archives (category/tag/date/author)
*/
@media (max-width: 768px){
  body.page-template-page-writings .card .h2,
  body.archive .card .h2{
    line-height: 1.0 !important;
  }
}


/*────────────────────────────────────────*/
/* Mobile: unify 2-line post preview titles (tight line gap) */
/* Bulletproof selector: any headings inside .card */
/*────────────────────────────────────────*/
@media (max-width: 768px){
  .card h1,
  .card h2,
  .card h3{
    line-height: 1.02 !important;
  }
}


/*────────────────────────────────────────*/
/* Mobile: tighten heading line spacing on single posts */
/* Matches the tighter preview-title rhythm, keeps desktop unchanged */
/*────────────────────────────────────────*/
@media (max-width: 768px){
  /* Post title */
  body.single .reader > h1{
    line-height: 1.02 !important;
  }

  /* Headings inside post content */
  body.single .reader .entry-content h1,
  body.single .reader .entry-content h2,
  body.single .reader .entry-content h3,
  body.single .reader .entry-content h4,
  body.single .reader .entry-content h5,
  body.single .reader .entry-content h6{
    line-height: 1.10 !important;
  }
}

/* ─────────────────────────────────────────
   Sales Page (Book)
   ───────────────────────────────────────── */
.sales-what-title{
  font-size: var(--p-size);
  font-weight: 400;
  margin: 0;
  line-height: var(--p-line);
}

/* Mobile: match the tighter multi-line title rhythm used across the site */
@media (max-width: 768px){
  .sales-what-title{
  font-size: var(--p-size);
  font-weight: 400;
  margin: 0;
  line-height: var(--p-line);
}
}

.sales-subtitle{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Sales hero title: desktop includes “THE”, mobile removes it */
.title-desktop{ display: inline !important; }
.title-mobile{ display: none !important; }

@media (max-width: 768px){
  .title-desktop{ display: none !important; }
  .title-mobile{ display: inline !important; }
  .title-mobile .m-line{
    display: block;
    line-height: 1.0;
  }
}

/* Desktop-only line break in sales hero subtitle */
.subtitle-break{ display: none !important; }
@media (min-width: 901px){
  .subtitle-break{ display: inline !important; }
}

/* Hide small helper text only used on desktop */
.desktop-only{ display: inline; }
@media (max-width: 768px){
  .desktop-only{ display: none; }
}

/* Titles: keep the title block height consistent between Pricing and FAQ
   so the perceived title-to-card spacing matches on desktop and mobile. */
@media (max-width: 768px){
  .sales-pricing-section .h2,
  .sales #faq .h2{
    line-height: 1.08 !important;
  }
}

.sales-pricing-section .h2,
.sales #faq .h2{
  line-height: 1.08;
}

@media (max-width: 768px){
  .sales-pricing-section .sales-section-bg{
    /* Keep the hero image clearly present on phones */
    opacity: .30;
  }
}

/* Mobile: ensure the pricing section itself also carries the hero image (fallback for iOS/mobile rendering) */
@media (max-width: 768px){
  .sales-pricing-section{
    background-image: var(--pricingbg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Pricing section: keep the title-to-card spacing consistent with FAQ */
.sales-pricing-section .sales-pricing{
  margin-top: 18px !important;
}

/* Match the FAQ rhythm: keep the standard title bottom margin so the title-to-card gap matches FAQ */
.sales-pricing-section .h2,
.sales #faq .h2{
  margin-bottom: 14px !important;
}


/* Purchase CTA: reuse hero image background on both desktop and mobile */
.purchase-cta{ position: relative; overflow: hidden; }
.purchase-cta::before{
  content:"";
  position:absolute;
  inset:0;
  /* Force exact same overlay as the payment/pricing section */
  background: linear-gradient(180deg, rgba(10,12,16,.92), rgba(10,12,16,.82), rgba(10,12,16,.94)) !important;
  z-index: 0;
}
.purchase-cta .wrap,
.purchase-cta .container{ position: relative; z-index: 1; }

/* Purchase CTA background image handling
   Desktop: rely on the .sales-section-bg layer (matches the pricing/payment stack)
   Mobile: add a section-level fallback (iOS/mobile rendering) */
.purchase-cta{
  background-image: none !important;
}
@media (max-width: 768px){
  .purchase-cta{
    background-image: var(--purchasebg) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.purchase-cta .sales-section-bg{ opacity: .16 !important; }
@media (max-width: 768px){
  .purchase-cta .sales-section-bg{ opacity: .30 !important; }
}

/* Purchase CTA
   - Desktop: keep the subscribe-band styling
   - Mobile: render a dedicated section that reuses the FAQ card + typography scale */
.purchase-cta--mobile{ display: none; }

/* Substack subscribe bands
   - Desktop keeps the existing hero-style subscribe bands
   - Mobile reuses the Protocol purchase CTA card + typography scale (FAQ-consistent) */
.substack-mobile-card{ display: none; }

/* Mobile-only Subscribe button swaps
   - Desktop uses in-page subscribe section
   - Mobile jumps directly to Substack subscribe URL */
.btn-subscribe-mobile{ display: none; }

@media (max-width: 768px){
  /* Remove the Substack subscribe bands entirely on phone, per design */
  .subscribe-band--substack{ display: none; }

  .btn-subscribe-desktop{ display: none; }
  .btn-subscribe-mobile{ display: inline-flex; }
}

@media (max-width: 768px){
  .purchase-cta--desktop{ display: none; }
  .purchase-cta--mobile{ display: block; }

  /* Match the FAQ title rhythm on mobile */
  .purchase-cta--mobile .h2{
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }
}

/* Mobile: slightly lighter overlay so the reused hero image reads clearly */
@media (max-width: 768px){
  .sales-pricing-section::before{
    /* Lighter overlay on phones so the background image is unmistakable */
    background: linear-gradient(180deg, rgba(10,12,16,.74), rgba(10,12,16,.66), rgba(10,12,16,.78));
  }
}

/* Pricing section: reuse hero background for a subtle title band */
.sales-pricing-section{ position: relative; overflow: hidden; }
.sales-pricing-section .container{ position: relative; z-index: 1; }
.sales-section-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .16;
  filter: saturate(1.05) contrast(1.02);
}
.sales-pricing-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.92), rgba(10,12,16,.82), rgba(10,12,16,.94));
  z-index: 0;
}
.sales-proof{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sales-proof-item{
  border: 1px solid rgba(233,227,214,.14);
  background: rgba(20,23,28,.62);
  border-radius: 16px;
  padding: 14px 14px;
  text-align:center;
}
.sales-proof-strong{
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(233,227,214,.92);
  margin-bottom: 6px;
}
.sales-proof-muted{
  font-size: 14px;
  color: rgba(233,227,214,.70);
  line-height: 1.55;
}
@media (max-width: 900px){
  .sales-proof{ grid-template-columns: 1fr; }
}

.sales-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(233,227,214,.84);
  font-size: 16px;
}
.sales-list li{ margin: 10px 0; }

.sales-mini{
  margin: 0;
  padding-left: 18px;
  color: rgba(233,227,214,.78);
  font-size: 16px;
}
.sales-mini li{ margin: 10px 0; }

.sales-card-sticky{
  position: sticky;
  top: 96px;
}
@media (max-width: 900px){
  .sales-card-sticky{ position: static; }
}

.sales-feature-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.sales-feature{
  border: 1px solid rgba(233,227,214,.12);
  background: rgba(15,18,22,.62);
  border-radius: 16px;
  padding: 16px 16px;
}
.sales-feature-title{
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(217,179,95,.92);
  margin-bottom: 8px;
}
@media (max-width: 800px){
  .sales-feature-grid{ grid-template-columns: 1fr; }
}

.sales-pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1000px){
  .sales-pricing{ grid-template-columns: 1fr; }
}

.sales-price-card{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(233,227,214,.14);
  background: linear-gradient(180deg, rgba(20,23,28,.88), rgba(15,18,22,.88));
  box-shadow: 0 30px 90px rgba(0,0,0,.26);
  padding: 22px 20px;
}
.sales-price-card.featured{
  border-color: rgba(217,179,95,.42);
  background: linear-gradient(180deg, rgba(20,23,28,.92), rgba(15,18,22,.92));
}
.sales-badge{
  position:absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(11,13,16,.95);
  background: rgba(217,179,95,.92);
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.sales-price-top{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(233,227,214,.12);
  margin-bottom: 14px;
}
.sales-price-name{
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(233,227,214,.78);
}
.sales-price{
  font-size: 44px;
  line-height: 1.05;
  margin-top: 6px;
  color: rgba(233,227,214,.96);
}
.sales-price-note{
  margin-top: 8px;
  font-size: 14px;
  color: rgba(233,227,214,.70);
}

.sales-faq details{
  border: 1px solid rgba(233,227,214,.12);
  border-radius: 16px;
  padding: 14px 14px;
  margin: 10px 0;
  background: rgba(15,18,22,.50);
}
.sales-faq summary{
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(233,227,214,.90);
  list-style: none;
}
.sales-faq summary::-webkit-details-marker{ display:none; }
.sales-faq details[open] summary{ color: rgba(217,179,95,.92); }
.sales-faq details p{ margin-top: 10px; }




/* Protocol page desktop-only title sizing */
@media (min-width: 901px){
  .sales #pricing .h2,
  .sales #faq .h2,
  .sales .cta-title{
    font-size: 38px;
  }
}

/* Desktop CTA button color matched to mobile */

.btn--substack{
  border-color: rgba(217,179,95,.55);
  background: rgba(217,179,95,.10);
}

/* Mobile-only: make Substack subscribe titles match the mobile CTA title sizing */
@media (max-width: 720px){
  .axiom--motto{
    font-size: 38px; /* match .cta-title */
    line-height: 1.08;
    letter-spacing: .06em;
  }
}



/* Mobile-only: Substack subscription titles match FAQ title size */
@media (max-width: 768px){
  h2.axiom.axiom--motto,
  h2.axiom.axiom--subscribe{
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
}



/* Mobile-only: hide Substack subscribe bands on Home + Writings (phone) */
@media (max-width: 768px){
  .subscribe-band{
    display: none !important;
  }
}


/* Price card spacing: add a single line gap between price and edition label */
.sales-price-gap{ height: 12px; }

/* Protocol pricing: launch note */
.sales-price-note-sub{
  display:block;
  margin-top:6px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.78;
}


/* Protocol page hero: match homepage full-screen feel on desktop */
.sales .sales-hero { min-height: 78vh; }
.sales .sales-hero .hero-content { padding: 96px 0 54px; }

@media (min-width: 900px){
  .sales .sales-hero { min-height: 92vh; }
  .sales .sales-hero .hero-content { padding: 96px 0 56px; }
}