/* The Godly Glow Up — production styles
   Mobile-first editorial link hub. No framework, no JavaScript. */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/bodoni-moda-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/bodoni-moda-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --black: #080808;
  --ivory: #f7f4ee;
  --pink: #ed168c;
  --stone: #c9c5c0;
  --ink-soft: #3d3a37;      /* body text on ivory, 10.6:1 */
  --stone-dim: #a7a29c;     /* fine print on black, 7.9:1 */
  --hairline: rgba(201, 197, 192, .28);

  --gold-shadow: #917018;
  --gold-base: #d6a10b;
  --gold-mid: #e6b119;
  --gold-light: #f5c73b;
  --gold-high: #fff0a3;
  /* Polished gold for the primary CTA only. Every stop keeps black text at 7:1 or better;
     the darkest logo gold (#917018) is held back for the hairline edge. */
  --gold-polish: linear-gradient(112deg,
    #c99512 0%, var(--gold-mid) 26%, var(--gold-light) 44%,
    #fbe08a 52%, var(--gold-light) 60%, var(--gold-mid) 78%, #c99512 100%);
  --gold-pressed: linear-gradient(112deg,
    #b98810 0%, #d9a514 40%, #e9b72a 52%, #d9a514 64%, #b98810 100%);

  /* Bodoni Moda at a small optical size: sturdier hairlines, clearer letterforms. */
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --serif-opsz: "opsz" 14;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5.5vw, 72px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left));
  --pad-r: max(var(--gutter), env(safe-area-inset-right));
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--black);
}
body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; -webkit-tap-highlight-color: rgba(237, 22, 140, .18); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}
::selection { background: var(--pink); color: var(--black); }

.arrow {
  width: 28px;
  height: 14px;
  flex: none;
  transition: transform .3s var(--ease);
}

/* Logo: the original 1024² artwork, cropped to its own margins with CSS only.
   `lighten` lets the logo's #000 field sit flush on the #080808 page. */
.logo-crop {
  position: relative;
  display: block;
  aspect-ratio: 560 / 728;
  overflow: hidden;
}
.logo-crop img {
  position: absolute;
  width: 182.857%;
  max-width: none;
  left: -44.286%;
  top: -18.132%;
  height: auto;
  mix-blend-mode: lighten;
}

/* ---------- Cover: brand, portrait, promise, actions ---------- */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: env(safe-area-inset-top);
  background: var(--black);
}

.masthead {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 20px;
  padding: 14px var(--pad-r) 14px var(--pad-l);
}
.logo { width: clamp(76px, 22vw, 112px); }
.strap {
  justify-self: end;
  display: grid;
  gap: .4em;
  text-align: right;
  font-size: clamp(.6875rem, 2.9vw, .8125rem);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.strap-gold { color: var(--gold-light); font-weight: 600; }

/* Portrait: height is budgeted so the Shop CTA lands on the first screen of a phone. */
.cover-photo {
  position: relative;
  height: clamp(190px, calc(100svh - 372px), 58svh);
  overflow: hidden;
}
.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}
.cover-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0), var(--black));
  pointer-events: none;
}

.cover-copy {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-r) calc(28px + env(safe-area-inset-bottom)) var(--pad-l);
}

.headline {
  margin-top: -.3em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 11.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0;
  font-variation-settings: var(--serif-opsz);
  color: var(--ivory);
}
.headline .line { display: block; white-space: nowrap; }

/* Primary CTA · polished gold, flat, rectangular */
.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "kicker arrow" "text arrow";
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  margin-top: 20px;
  min-height: 64px;
  padding: 12px 20px 13px 20px;
  background: var(--gold-polish);
  border: 1px solid var(--gold-shadow);
  border-radius: 2px;
  color: var(--black);
  text-decoration: none;
}
.cta-kicker {
  grid-area: kicker;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
}
.cta-text {
  grid-area: text;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 5.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  font-variation-settings: var(--serif-opsz);
  text-wrap: balance;
}
.cta .arrow { grid-area: arrow; width: 32px; height: 16px; }
.cta:focus-visible { outline-color: var(--ivory); outline-offset: 3px; }
.cta:active { background: var(--gold-pressed); }
.cta:active .arrow { transform: translateX(4px); }

.fine {
  margin-top: 10px;
  max-width: 30rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--stone-dim);
}

/* Founder product · Daughter of the King (an original book, distinct from affiliate links) */
.book {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas: "cover text" "cta cta";
  column-gap: 16px;
  row-gap: 16px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(214, 161, 11, .42);
  color: var(--ivory);
  text-decoration: none;
}
.book-cover { grid-area: cover; align-self: start; display: block; }
.book-cover img { width: 100%; height: auto; outline: 1px solid rgba(247, 244, 238, .12); }
.book-text { grid-area: text; display: grid; align-content: start; gap: 4px; }
.book-kicker {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gold-light);
}
.book-title {
  margin-top: 2px;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
  font-variation-settings: var(--serif-opsz);
}
.book-type { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--ivory); }
.book-desc { margin-top: 4px; font-size: .875rem; line-height: 1.45; color: var(--stone); text-wrap: pretty; }
.book-cta {
  grid-area: cta;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--ivory);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.book-where {
  margin-top: 6px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-light);
}
.book-cta .arrow { color: var(--pink); }
.book:focus-visible { outline-offset: 3px; }
.book:active .book-cta { background: rgba(247, 244, 238, .06); }
.book:active .arrow { transform: translateX(4px); }

/* Secondary destinations · editorial rows */
.links { margin-top: 24px; }
.links ul { border-top: 1px solid var(--hairline); }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arrow" "desc arrow";
  align-items: center;
  column-gap: 16px;
  min-height: 64px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ivory);
}
.row-label {
  grid-area: label;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  font-variation-settings: var(--serif-opsz);
}
.row-desc {
  grid-area: desc;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--stone);
}
.row .arrow { grid-area: arrow; color: var(--pink); }
.row:focus-visible { outline-offset: 2px; }
.row:active { background: rgba(247, 244, 238, .05); }
.row:active .arrow { transform: translateX(4px); }

/* ---------- Founder ---------- */
.founder {
  position: relative;
  background: var(--ivory);
  color: var(--black);
  padding: clamp(56px, 11vw, 120px) var(--pad-r) clamp(60px, 12vw, 128px) calc(var(--pad-l) + 16px);
}
/* Asset 04 · editorial stripes, as a narrow spine */
.founder::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: url("assets/svg/01_editorial_stripes.svg") left top / 56px auto repeat-y;
}
.founder-inner {
  display: grid;
  gap: 22px;
  max-width: 64rem;
  margin: 0 auto;
}
.founder-quote {
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 6.4vw, 2.75rem);
  line-height: 1.15;
  text-wrap: balance;
  font-variation-settings: var(--serif-opsz);
}
.founder-quote em { font-style: italic; }
.founder-body {
  display: grid;
  gap: 18px;
  max-width: 32rem;
  color: var(--ink-soft);
}
.founder-body p { text-wrap: pretty; }
.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--pink);
  font-variation-settings: var(--serif-opsz);
}
.signature::before { content: "— "; color: var(--black); }

/* ---------- Footer ---------- */
.colophon {
  background: var(--black);
  padding: 52px var(--pad-r) calc(36px + env(safe-area-inset-bottom)) var(--pad-l);
}
.colophon-inner {
  display: grid;
  gap: 24px;
  max-width: 64rem;
  margin: 0 auto;
}
.colophon-logo { display: block; width: 76px; }
.colophon-nav ul { display: grid; }
.colophon-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 5px;
  color: var(--ivory);
}
.disclosure {
  max-width: 34rem;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--stone);
}
.copyright {
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--stone-dim);
}

/* ---------- Hover (pointer devices only; never required) ---------- */
@media (hover: hover) and (pointer: fine) {
  .cta:hover { border-color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
  .cta:hover .arrow,
  .row:hover .arrow { transform: translateX(5px); }
  .row:hover .row-label { color: var(--gold-light); }
  .book:hover { border-color: var(--gold-base); }
  .book:hover .arrow { transform: translateX(5px); }
  .book:hover .book-cta { background: rgba(247, 244, 238, .06); }
  .colophon-nav a:hover { text-decoration-color: var(--gold-light); }
}

/* ---------- Load-in (CSS only, honours reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cta, .fine, .book, .links { animation: fade .6s .15s var(--ease) both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 359px) {
  .strap { letter-spacing: .1em; }
  .cta { padding-left: 16px; padding-right: 14px; column-gap: 10px; }
  .book { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
  .book-kicker { letter-spacing: .14em; }
  .book-desc { display: none; }
  .book-cta { padding: 10px 12px; gap: 10px; font-size: .6875rem; letter-spacing: .1em; }
  .book-cta .arrow { width: 24px; height: 12px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .cover-photo { height: clamp(420px, calc(100svh - 380px), 58svh); }
  .cover-copy { width: 100%; max-width: calc(34rem + var(--pad-l) + var(--pad-r)); margin: 0 auto; }
  .headline { font-size: clamp(3.25rem, 8vw, 4.25rem); }
  .founder::before { width: 24px; }
  .founder { padding-left: calc(var(--pad-l) + 24px); }
}

/* ---------- Desktop: editorial spread ---------- */
@media (min-width: 960px) {
  .cover {
    grid-template-columns: 46fr 54fr;
    grid-template-rows: auto 1fr;
    min-height: max(680px, 100svh);
    padding-top: 0;
  }
  .cover-photo {
    grid-column: 1;
    grid-row: 1 / 3;
    height: auto;
    min-height: 100%;
  }
  .cover-photo img { position: absolute; inset: 0; object-position: 50% 20%; }
  .cover-photo::after { display: none; }
  .masthead {
    grid-column: 2;
    grid-row: 1;
    padding: clamp(36px, 4vw, 64px) var(--pad-r) 0 clamp(48px, 6vw, 112px);
  }
  .logo { width: clamp(120px, 9vw, 150px); }
  .cover-copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    max-width: calc(32rem + clamp(48px, 6vw, 112px) + var(--pad-r));
    margin: 0;
    padding: 40px var(--pad-r) 56px clamp(48px, 6vw, 112px);
  }
  .headline { margin-top: 0; font-size: clamp(3.75rem, 5.2vw, 5.25rem); }
  .cta { margin-top: 36px; min-height: 72px; padding: 15px 24px 16px; }
  .cta-text { font-size: 1.625rem; }
  .book { grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "cover text" "cover cta"; column-gap: 24px; margin-top: 32px; padding: 20px; }
  .book-title { font-size: 1.75rem; }
  .book-cta { align-self: end; }
  .links { margin-top: 28px; }

  .founder-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: end;
  }
  .founder-quote { grid-column: 1 / 8; }
  .founder-body { grid-column: 8 / 13; }

  .colophon-inner {
    grid-template-columns: auto 1fr;
    column-gap: 64px;
    align-items: center;
  }
  .colophon-nav ul { grid-auto-flow: column; justify-content: end; gap: 36px; }
  .disclosure, .copyright { grid-column: 1 / -1; max-width: none; }
}