/* =====================================================================
   RED HORIZON — Randy V. Daniels
   Design tokens + homepage. Written so each block maps onto an
   Elementor Section/Column/Widget. See README.md for the mapping.
   ===================================================================== */

:root{
  /* palette */
  --ink:        #09050D;
  --ink-soft:   #140C18;
  --coral:      #FF625C;
  --amber:      #FFAD55;
  --warm-white: #FFF8F3;
  --muted:      #F4DFD8;

  /* type */
  --display: "Anton", "Oswald", Impact, sans-serif;
  --body:    "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Share Tech Mono", ui-monospace, "Consolas", monospace;

  /* layout */
  --shell: 1360px;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --header-h: 92px;

  /* cover art is 5:8, not 2:3 — matches the real files */
  --cover-ratio: 1501 / 2401;
}

/* ------------------------------------------------------------- reset -- */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--muted);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------------------------------------------------- focus + a11y ---- */

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:50%; top:0;
  transform:translate(-50%,-120%);
  z-index:999;
  padding:.85rem 1.4rem;
  background:var(--amber); color:var(--ink);
  font-family:var(--mono); font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ transform:translate(-50%,0); }

/* ------------------------------------------------ shared type pieces -- */

.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--mono);
  font-size:clamp(.7rem,.66rem + .2vw,.82rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:1.25rem;
}
/* short rule — marks the start of the series label without decorating it */
.eyebrow::before{
  content:""; flex:0 0 auto;
  width:clamp(28px,4vw,52px); height:1px;
  background:var(--coral);
}

/* ==================================================== HEADER =========== */

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease;
}
/* The blur lives on a pseudo-element, never on .site-header itself:
   backdrop-filter on an ancestor becomes the containing block for any
   position:fixed descendant, which would trap the mobile menu panel
   inside the header's 76px box. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.site-header.is-stuck{
  background:rgba(9,5,13,.82);
  border-bottom-color:rgba(255,248,243,.10);
}
.site-header.is-stuck::before{ opacity:1; }

.site-header__inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}

/* padding, not min-height: baseline alignment would pin the text to the
   top of a 44px box instead of centring it */
.brand{
  text-decoration:none; line-height:1;
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  padding-block:.8rem;
}
.brand__name{
  font-family:var(--display);
  font-size:clamp(1.15rem,1rem + .75vw,1.6rem);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--warm-white);
}
.brand__role{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--amber);
}

.nav__list{ display:flex; align-items:center; gap:.35rem; }
.nav__link{
  display:flex; align-items:center;
  min-height:44px; padding:0 .95rem;
  font-family:var(--mono);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav__link:hover{ color:var(--warm-white); border-bottom-color:var(--coral); }
.nav__link.is-current{ color:var(--amber); border-bottom-color:var(--coral); }

/* burger — hidden on desktop */
.nav-toggle{
  display:none;
  align-items:center; gap:.6rem;
  min-height:44px; padding:0 .9rem;
  background:rgba(9,5,13,.55);
  border:1px solid rgba(255,248,243,.22);
  color:var(--warm-white);
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display:block; width:20px; height:2px;
  background:currentColor; transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle__bars{ position:relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after{ content:""; position:absolute; left:0; }
.nav-toggle__bars::before{ top:-6px; }
.nav-toggle__bars::after{ top:6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* ====================================================== HERO =========== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 2rem);
  padding-bottom:3.5rem;
  overflow:hidden;
  isolation:isolate;
}

/* the approved Red Horizon image — real responsive background */
/* Positions are tuned to the real Red Horizon frame: planet upper-right,
   towers right-of-centre, dark negative space left. As the viewport
   narrows the anchor moves right so the planet stays in shot. */
.hero__media{
  position:absolute; inset:0; z-index:-2;
  background-color:var(--ink);
  background-image:url("../img/red-horizon-hero-desktop.webp");
  background-size:cover;
  background-position:50% 32%;
  background-repeat:no-repeat;
}

/* controlled gradient — darkens behind text only, image stays readable */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(9,5,13,.94) 0%,
      rgba(9,5,13,.80) 30%,
      rgba(9,5,13,.40) 56%,
      rgba(9,5,13,.10) 100%),
    linear-gradient(180deg,
      rgba(9,5,13,.62) 0%,
      rgba(9,5,13,.05) 24%,
      rgba(9,5,13,.05) 64%,
      rgba(9,5,13,.86) 100%);
}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
}

/* No width cap here: the headline sets the column. The hook is capped
   on its own so the reading measure stays short. */
.hero__copy{ max-width:none; }

/* Sized so "ONLY THE BEGINNING." — the longest line — always fits the
   column on one line. The vw term tracks the column as it narrows, so
   the type shrinks instead of the line breaking. */
.hero__title{
  font-family:var(--display);
  font-size:clamp(2.75rem, calc(7.1vw - 9px), 5.5rem);
  line-height:.9;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--warm-white);
}
.hero__line{ display:block; }
.hero__line--accent{ color:var(--coral); }

.hero__hook{
  margin-top:1.75rem;
  max-width:46ch;
  font-size:clamp(1.02rem,.95rem + .35vw,1.28rem);
  line-height:1.55;
  color:var(--muted);
}

.hero__actions{
  margin-top:2.25rem;
  display:flex; flex-wrap:wrap; gap:.85rem;
}

.formats{
  margin-top:2rem;
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,223,216,.72);
}

/* ----- buttons ----- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 1.8rem;
  font-family:var(--mono);
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease,
             border-color .2s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-2px); }

/* amber face over a coral block, offset down-left. The one flourish on the
   page — it earns its place by making the primary action unmissable
   against a busy photograph. */
.btn--primary{
  background:var(--amber); color:var(--ink); border-color:var(--amber);
  box-shadow:-6px 6px 0 var(--coral);
}
.btn--primary:hover{
  background:var(--warm-white); border-color:var(--warm-white);
  box-shadow:-3px 3px 0 var(--coral);
}

.btn--ghost{
  background:rgba(9,5,13,.55);
  color:var(--warm-white);
  border-color:rgba(255,248,243,.42);
  backdrop-filter:blur(4px);
}
.btn--ghost:hover{ border-color:var(--warm-white); background:rgba(9,5,13,.78); }

/* ----- stacked covers ----- */

.hero__books{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
}
/* flex-shrink:0 — otherwise the column squeezes both covers below the
   sizes set here and the overlap stops being predictable */
.cover{ margin:0; position:relative; flex:0 0 auto; }
.cover img{
  width:100%;
  aspect-ratio:var(--cover-ratio);
  object-fit:cover;
  box-shadow:0 30px 64px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.55);
}
.cover--back{
  width:clamp(130px,15.5vw,215px);
  transform:rotate(-5deg) translateY(-7%);
  z-index:1;
}
.cover--front{
  width:clamp(150px,18vw,250px);
  margin-left:clamp(-64px,-4.5vw,-34px);
  transform:rotate(3deg);
  z-index:2;
}

/* ============================================== SERIES STRIP =========== */

.series{
  position:relative;
  background:rgba(20,12,24,.94);
  border-top:1px solid rgba(255,98,92,.30);
  padding-block:clamp(3rem,6vw,5.5rem);
}

/* Statement above the books by default. The side-by-side row only turns on
   at 1300px — below that, three book columns beside a display-size statement
   squeezes "The Harmony Project" onto three cramped lines. */
.series__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem,3vw,2.5rem);
}
@media (min-width:1300px){
  .series__inner{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr);
    align-items:center;
    gap:clamp(2rem,5vw,4.5rem);
  }
}

.series__label{
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(.72rem,.68rem + .2vw,.82rem);
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,223,216,.72);
}
.series__tag{
  margin-top:.6rem;
  font-family:var(--display);
  font-size:clamp(1.5rem,1.05rem + 1.8vw,2.5rem);
  line-height:1.05; letter-spacing:.02em;
  color:var(--warm-white);
}

.series__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2.5rem);
}

/* divider sits between the books, echoing a shelf rather than boxing them */
.book{ padding-left:clamp(1rem,2vw,2rem); border-left:1px solid rgba(255,98,92,.30); }
.book__index{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.6rem;
}
/* sized to hold "The Harmony Project" on one line in its column */
.book__title{
  font-family:var(--display);
  font-size:clamp(1.05rem,.92rem + .6vw,1.35rem);
  line-height:1.15; letter-spacing:.02em; text-transform:uppercase;
  color:var(--warm-white);
}
/* inline-block + padding brings the touch height to ~44px */
.book__link{
  display:inline-block;
  padding-block:.7rem;
  color:inherit; text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.book__link:hover{ color:var(--coral); border-bottom-color:var(--coral); }

.book__meta{
  margin-top:0;
  font-size:.9rem;
  color:rgba(244,223,216,.74);
}
.book--pending .book__title{ color:rgba(255,248,243,.55); }

/* ==================================================== MOTION =========== */

.reveal{
  opacity:0;
  transform:translateY(14px);
  animation:rise .7s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .btn:hover{ transform:none; }
}

/* ================================================ RESPONSIVE =========== */

/* --- laptop / tablet landscape --- */
@media (max-width:1100px){
  :root{ --header-h:84px; }
  .hero__media{
    background-image:url("../img/red-horizon-hero-tablet.webp");
    background-position:55% 18%;
  }
  .hero__inner{ gap:2.5rem; }
}

/* --- tablet portrait: stack text over covers --- */
@media (max-width:860px){
  .hero{
    min-height:auto;
    padding-top:calc(var(--header-h) + 3rem);
    padding-bottom:3rem;
  }
  .hero__media{ background-position:56% 14%; }
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(9,5,13,.60) 0%,
        rgba(9,5,13,.18) 22%,
        rgba(9,5,13,.72) 54%,
        rgba(9,5,13,.95) 100%);
  }

  .hero__inner{ grid-template-columns:minmax(0,1fr); gap:2.75rem; }

  /* full-width column now, so the headline can be re-sized against the
     whole shell rather than the two-column split */
  /* capped lower than the desktop rule: between 768 and 860 the column is
     at its narrowest relative to the cap, and 5.5rem cleared by only 14px */
  .hero__title{ font-size:clamp(2.2rem, calc(12.33vw - 3.9px), 5rem); }
  .hero__hook{ max-width:38ch; }

  .hero__books{
    justify-content:flex-start;
    padding-left:2%;
  }
  .cover--back{ width:min(30vw,200px); transform:rotate(-5deg) translateY(-5%); }
  .cover--front{ width:min(34vw,228px); margin-left:min(-5vw,-26px); transform:rotate(3deg); }


  /* --- mobile navigation --- */
  .nav-toggle{ display:inline-flex; }

  /* display toggle, not an opacity/visibility transition: a transition
     starting from a non-rendered box does not reliably run, which left
     the panel laid out and focusable but painted at opacity 0.
     A keyframe animation on the newly-displayed box does run. */
  .nav{
    position:fixed; inset:0;
    z-index:90;
    display:none; place-items:center;
    background:rgba(9,5,13,.97);
  }
  .nav.is-open{
    display:grid;
    animation:menuIn .22s ease both;
  }
  @keyframes menuIn{ from{ opacity:0; } to{ opacity:1; } }

  .nav__list{
    flex-direction:column; gap:.4rem;
    width:min(86vw,360px);
  }
  .nav__list li{ width:100%; }
  .nav__link{
    justify-content:center;
    min-height:56px;
    font-size:1rem; letter-spacing:.2em;
    border-bottom:1px solid rgba(255,248,243,.12);
  }
  .nav__link:hover,
  .nav__link.is-current{ border-bottom-color:var(--coral); }
}

/* --- phone --- */
@media (max-width:600px){
  :root{ --header-h:76px; }

  .hero__media{
    background-image:url("../img/red-horizon-hero-mobile.webp");
    background-position:64% 10%;
  }
  /* text sits low, under the planet and skyline, never over the buildings */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(9,5,13,.55) 0%,
        rgba(9,5,13,.10) 26%,
        rgba(9,5,13,.78) 52%,
        rgba(9,5,13,.97) 100%);
  }
  .hero{ padding-top:calc(var(--header-h) + 34vh); }

  .hero__hook{ margin-top:1.4rem; }
  .hero__actions{ margin-top:1.9rem; }
  .btn{ width:100%; }

  .hero__books{ padding-left:0; justify-content:center; }
  .cover--back{ width:33vw; }
  .cover--front{ width:37vw; margin-left:-5vw; }

  /* stacked, so the divider moves to the top edge of each book */
  .series__list{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  .book{
    padding-left:0; border-left:0;
    padding-top:1.1rem; border-top:1px solid rgba(255,98,92,.30);
  }
}

/* =====================================================================
   BOOKS PAGE
   ===================================================================== */

/* ---------------------------------------------------- page hero ------ */

/* Same photograph as the homepage, in a shorter band. The homepage hero
   is the thesis; inner pages only need to place you in the same world. */
.page-hero{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:clamp(320px,46vh,460px);
  padding-top:calc(var(--header-h) + 2.5rem);
  padding-bottom:clamp(2.25rem,4vw,3.5rem);
  overflow:hidden;
  isolation:isolate;
}
.page-hero__media{
  position:absolute; inset:0; z-index:-2;
  background-color:var(--ink);
  background-image:url("../img/red-horizon-hero-desktop.webp");
  background-size:cover;
  background-position:50% 30%;
  background-repeat:no-repeat;
}
.page-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(9,5,13,.92) 0%,
      rgba(9,5,13,.74) 38%,
      rgba(9,5,13,.34) 72%,
      rgba(9,5,13,.14) 100%),
    linear-gradient(180deg,
      rgba(9,5,13,.70) 0%,
      rgba(9,5,13,.10) 34%,
      rgba(9,5,13,.88) 100%);
}
.page-hero__title{
  font-family:var(--display);
  font-size:clamp(2.75rem,1.6rem + 4.2vw,5rem);
  line-height:.95; letter-spacing:.01em; text-transform:uppercase;
  color:var(--warm-white);
}
.page-hero__lead{
  margin-top:1.1rem;
  max-width:46ch;
  font-size:clamp(1rem,.95rem + .25vw,1.15rem);
  color:var(--muted);
}

/* -------------------------------------------------------- a work ----- */

.work{ padding-block:clamp(3rem,6vw,6rem); }
/* hairline between entries, not a boxed card */
.work + .work{ border-top:1px solid rgba(255,248,243,.12); }

.work__inner{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  align-items:start;
  gap:clamp(2rem,5vw,4.5rem);
}
/* Second book mirrors the first so the page alternates down the spine.
   NOT via `order`: that only changes which grid CELL each item falls into,
   so the cover landed in the wide 1.38fr column and blew up to 811px.
   Swap the track sizes and place both items explicitly instead. */
.work--flip .work__inner{
  grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr);
}
.work--flip .work__body { grid-column:1; grid-row:1; }
.work--flip .work__cover{ grid-column:2; grid-row:1; }

.work__cover{ margin:0; position:sticky; top:calc(var(--header-h) + 1.5rem); }
.work__cover img{
  width:100%;
  aspect-ratio:var(--cover-ratio);
  object-fit:cover;
  box-shadow:0 30px 64px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.55);
}

.work__index{
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.7rem;
}
.work__title{
  font-family:var(--display);
  font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);
  line-height:1; letter-spacing:.015em; text-transform:uppercase;
  color:var(--warm-white);
}
.work__standfirst{
  margin-top:1.1rem;
  max-width:52ch;
  font-style:italic;
  color:rgba(244,223,216,.80);
}
/* the sales line — the one thing a browsing reader actually reads */
.work__hook{
  margin-top:1.1rem;
  max-width:34ch;
  font-family:var(--display);
  font-size:clamp(1.2rem,1rem + .85vw,1.7rem);
  line-height:1.15; letter-spacing:.01em; text-transform:uppercase;
  color:var(--coral);
}
.work__text{
  margin-top:1.4rem;
  max-width:62ch;
  color:var(--muted);
}

.work__formats{
  margin-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.work__formats li{
  padding:.4rem .85rem;
  border:1px solid rgba(255,248,243,.26);
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,223,216,.86);
}
.work__note{
  margin-top:.9rem;
  font-size:.92rem;
  color:rgba(244,223,216,.72);
}
.work__actions{ margin-top:1.9rem; }

/* ------------------------------------------------------- upcoming ---- */

.upcoming{
  padding-block:clamp(2.5rem,5vw,4.5rem);
  border-top:1px solid rgba(255,98,92,.30);
  background:rgba(20,12,24,.94);
}
.upcoming__title{
  font-family:var(--display);
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  line-height:1.05; letter-spacing:.02em; text-transform:uppercase;
  color:rgba(255,248,243,.62);
}
.upcoming__text{
  margin-top:.7rem;
  max-width:46ch;
  color:rgba(244,223,216,.74);
}

/* ------------------------------------------------- books responsive -- */

@media (max-width:860px){
  /* stacked: one column, cover always leads, flip placement undone */
  .work__inner,
  .work--flip .work__inner{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .work--flip .work__cover{ grid-column:1; grid-row:1; }
  .work--flip .work__body { grid-column:1; grid-row:2; }
  /* sticky makes no sense once the cover is above the text */
  .work__cover{ position:static; width:min(62vw,260px); }
  .page-hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(9,5,13,.70) 0%,
        rgba(9,5,13,.18) 30%,
        rgba(9,5,13,.92) 100%);
  }
  .page-hero__media{ background-position:56% 22%; }
}

@media (max-width:600px){
  .work__cover{ width:min(74vw,240px); }
  .work__actions .btn{ width:100%; }
}

/* =====================================================================
   ABOUT
   ===================================================================== */

.bio{ padding-block:clamp(3rem,6vw,6rem); }
.bio__inner{
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);
  align-items:start;
  gap:clamp(2rem,5vw,4.5rem);
}

.bio__aside{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
.bio__portrait{ margin:0; }
.bio__portrait img{
  width:100%;
  aspect-ratio:648 / 993;
  object-fit:cover;
  box-shadow:0 30px 64px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.55);
}

/* labelled facts, pulled only from the bio itself — nothing invented */
.facts{ margin:1.75rem 0 0; }
.facts__row{
  padding-block:.8rem;
  border-top:1px solid rgba(255,248,243,.14);
}
.facts dt{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber);
}
.facts dd{
  margin:.3rem 0 0;
  font-size:.95rem;
  color:var(--muted);
}

.bio__lead{
  font-family:var(--display);
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.4rem);
  line-height:1.1; letter-spacing:.01em;
  color:var(--warm-white);
  max-width:24ch;
}
.bio__text{
  margin-top:1.3rem;
  max-width:62ch;
  color:var(--muted);
}
.bio__actions{ margin-top:2.25rem; }

/* =====================================================================
   BLOG ARCHIVE
   ===================================================================== */

.archive{ padding-block:clamp(2.5rem,5vw,5rem); }
.archive__list{
  display:grid;
  gap:0;
  max-width:70ch;
}

.post-card{
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid rgba(255,248,243,.14);
}
.post-card:last-child{ border-bottom:1px solid rgba(255,248,243,.14); }

.post-card__date{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.55rem;
}
.post-card__title{
  font-family:var(--display);
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.95rem);
  line-height:1.12; letter-spacing:.015em; text-transform:uppercase;
  color:var(--warm-white);
}
/* padding sized so a single-line title still clears 44px on a phone */
.post-card__link{
  display:inline-block;
  padding-block:.65rem;
  color:inherit; text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.post-card__link:hover{ color:var(--coral); border-bottom-color:var(--coral); }
.post-card__excerpt{
  margin-top:.5rem;
  color:rgba(244,223,216,.82);
}

/* =====================================================================
   SINGLE POST
   ===================================================================== */

.entry__head{
  padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,4.5rem));
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid rgba(255,98,92,.30);
  background:rgba(20,12,24,.94);
}
.entry__head-inner{ max-width:74ch; }
.entry__meta{
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.7rem;
}
.entry__title{
  font-family:var(--display);
  font-size:clamp(1.9rem,1.35rem + 2.2vw,3.2rem);
  line-height:1.05; letter-spacing:.015em; text-transform:uppercase;
  color:var(--warm-white);
}

.entry__body{
  max-width:68ch;
  padding-block:clamp(2.25rem,4vw,3.5rem);
}
.entry__body p{ margin-bottom:1.25rem; color:var(--muted); }
.entry__body strong{ color:var(--warm-white); font-weight:700; }

/* the affiliate disclosure is a legal requirement — set apart, not buried */
.entry__disclosure{
  margin-top:1.75rem;
  padding-left:1rem;
  border-left:2px solid rgba(255,173,85,.55);
  font-size:.88rem;
  color:rgba(244,223,216,.72);
}
.entry__actions{
  margin-top:2.25rem;
  display:flex; flex-wrap:wrap; gap:.85rem;
}

/* =====================================================================
   CONTACT
   ===================================================================== */

.contact{ padding-block:clamp(2.5rem,5vw,5rem); }
.contact__inner{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);
  align-items:start;
  gap:clamp(2rem,5vw,4.5rem);
}

.form{ max-width:56ch; }
.field{ margin-bottom:1.35rem; }
.field__label{
  display:block; margin-bottom:.45rem;
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.field__input{
  display:block; width:100%;
  min-height:52px; padding:.8rem 1rem;
  background:rgba(255,248,243,.05);
  border:1px solid rgba(255,248,243,.26);
  color:var(--warm-white);
  font-family:var(--body); font-size:1rem; line-height:1.5;
  transition:border-color .2s ease, background-color .2s ease;
}
.field__input::placeholder{ color:rgba(244,223,216,.45); }
.field__input:hover{ border-color:rgba(255,248,243,.45); }
.field__input:focus{
  border-color:var(--amber);
  background:rgba(255,248,243,.08);
}
.field__input--area{ resize:vertical; min-height:150px; }

.form__actions{ margin-top:1.75rem; }
.form__note{
  margin-top:1.1rem;
  font-size:.88rem;
  color:rgba(244,223,216,.66);
}

.contact__asideTitle{
  font-family:var(--mono);
  font-weight:400;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.9rem;
}
.contact__links li + li{ margin-top:.2rem; }
.contact__link{
  display:inline-block;
  min-height:44px; line-height:44px;
  color:var(--warm-white); text-decoration:none;
  border-bottom:1px solid rgba(255,248,243,.28);
  transition:color .2s ease, border-color .2s ease;
}
.contact__link:hover{ color:var(--coral); border-bottom-color:var(--coral); }
.contact__note{
  margin-top:1.5rem;
  font-size:.9rem;
  color:rgba(244,223,216,.70);
}

/* =====================================================================
   FOOTER
   ===================================================================== */

.site-footer{
  border-top:1px solid rgba(255,248,243,.14);
  background:rgba(20,12,24,.96);
}
.site-footer__inner{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.7fr)) minmax(0,.9fr);
  gap:clamp(1.75rem,3.5vw,3rem);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.site-footer__tag{
  margin-top:.9rem;
  max-width:30ch;
  font-size:.92rem;
  color:rgba(244,223,216,.70);
}
.site-footer__heading{
  font-family:var(--mono);
  font-weight:400;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.5rem;
}
.site-footer__nav a,
.site-footer__social a{
  display:inline-block;
  min-height:44px; line-height:44px;
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.site-footer__nav a:hover,
.site-footer__social a:hover{ color:var(--warm-white); border-bottom-color:var(--coral); }

.site-footer__publisher{ display:flex; align-items:flex-start; }
.site-footer__logo{
  width:clamp(120px,14vw,180px); height:auto;
  opacity:.85;
  transition:opacity .2s ease;
}
.site-footer__logo:hover{ opacity:1; }

.site-footer__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between;
  padding-block:1.4rem;
  border-top:1px solid rgba(255,248,243,.12);
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,223,216,.62);
}
/* inline-block + line-height so the legal link is a real 44px target */
.site-footer__legal a{
  display:inline-block;
  min-height:44px; line-height:44px;
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(255,248,243,.28);
}
.site-footer__legal a:hover{ color:var(--warm-white); border-bottom-color:var(--coral); }

/* ------------------------------------------- inner pages responsive -- */

@media (max-width:860px){
  .bio__inner,
  .contact__inner{ grid-template-columns:minmax(0,1fr); gap:2.25rem; }
  /* sticky is pointless once the column is stacked above the text */
  .bio__aside{ position:static; }
  .bio__portrait{ width:min(60vw,280px); }

  .site-footer__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer__brand{ grid-column:1 / -1; }
}

@media (max-width:600px){
  .bio__portrait{ width:min(74vw,260px); }
  .bio__actions .btn,
  .form__actions .btn,
  .entry__actions .btn{ width:100%; }

  .site-footer__inner{ grid-template-columns:minmax(0,1fr); }
  .site-footer__legal{ flex-direction:column; }
}