/* ───────────────────────────────────────────────────────────
   andrewbishop.com — shared stylesheet
   Palette lives in custom properties so the dark theme is a
   value swap, not a second set of rules. Inline styles in the
   page HTML reference these vars, which is what lets a media
   query override them.
   ─────────────────────────────────────────────────────────── */

@font-face { font-family:'Charter'; src:url('fonts/charter_regular.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:optional; }
@font-face { font-family:'Charter'; src:url('fonts/charter_italic.woff2') format('woff2'); font-weight:normal; font-style:italic; font-display:optional; }
@font-face { font-family:'Charter'; src:url('fonts/charter_bold.woff2') format('woff2'); font-weight:bold; font-style:normal; font-display:optional; }
@font-face { font-family:'Commit Mono'; src:url('fonts/CommitMono-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:optional; }
@font-face { font-family:'Young Serif'; src:url('fonts/YoungSerif-Regular.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:optional; }

:root {
  --paper:        #EFEDE6;
  --card:         #FBFAF6;
  --card-border:  #DCD8CE;
  --card-shadow:  #E4E0D6;
  --ink:          #26242B;
  --ink-soft:     #5A5762;
  --ink-faint:    #98959E;
  --ink-quiet:    #75727E;
  --rule:         #EDEAE2;
  --rule-strong:  #E4E0D6;
  --rule-dashed:  #C9C3B6;
  --accent:       #6E28A8;
  --accent-deep:  #5E1E96;
  --accent-tint:  rgba(110,40,168,0.045);
  --accent-wash:  rgba(110,40,168,0.10);
  --accent-glow:  rgba(110,40,168,0.28);
  --field:        #FFFEF9;
  --field-border: #C6BEDA;
  --on-accent:    #FBFAF6;
  --free:         #1B6B58;
  --paid:         #8A2433;
  --door-hover:   rgba(110,40,168,0.30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #14131A;
    --card:         #1C1B21;
    --card-border:  #302E38;
    --card-shadow:  #26242D;
    --ink:          #E8E6E0;
    --ink-soft:     #A8A5B0;
    --ink-faint:    #75727E;
    --ink-quiet:    #8B8894;
    --rule:         #302E38;
    --rule-strong:  #302E38;
    --rule-dashed:  #4A4653;
    --accent:       #B287E6;
    --accent-deep:  #C7A3F0;
    --accent-tint:  rgba(178,135,230,0.09);
    --accent-wash:  rgba(178,135,230,0.18);
    --accent-glow:  rgba(178,135,230,0.30);
    --field:        #232128;
    --field-border: #4A4653;
    --on-accent:    #1C1B21;
    --free:         #6FCBAE;
    --paid:         #E6899A;
    --door-hover:   rgba(178,135,230,0.28);
  }

  /* Light type on a dark ground renders heavier than intended.
     Greyscale antialiasing takes the bloom off — all three faces
     inherit this from body. Light mode deliberately keeps the
     platform default, which is beefier and better on cream. */
  body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
}

* { box-sizing:border-box; }

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

body {
  margin:0;
  background:var(--card);
  color:var(--ink);
  font-family:Charter, Georgia, serif;
}

a { color:var(--accent-deep); }
a:hover { color:var(--ink); }

/* The page card: one 700px column, centred, with breathing room. */
.page {
  display:block;
  width:100%;
  max-width:740px; /* 700px card + 20px breathing room each side */
  margin:0 auto;
  padding:40px 20px 72px;
}

/* No frame — the page background runs edge to edge and this is just the
   centred content column. */
.card {
  padding:44px 62px 38px;
}

.card--home { padding:56px 62px 38px; }

/* The pulsing doorway links on the homepage. */
@keyframes doorPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(110,40,168,0); }
  50%      { box-shadow:0 0 14px 4px var(--accent-glow); }
}
@media (prefers-reduced-motion: reduce) {
  a { animation:none !important; }
}

/* Focus visibility — keyboard users need to see where they are. */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Phones: the card loses its side padding and the grids collapse. */
@media (max-width: 620px) {
  .page { padding:20px 14px 48px; }
  .card, .card--home { padding:32px 22px 28px; }
  .grid-2, .grid-3 { grid-template-columns:1fr !important; }
  /* Single column means each card image would render at full column width —
     440px source in a ~330px slot, upscaled and soft. Cap them. */
  .grid-3 img, .grid-2 img { max-width:260px; margin-left:auto; margin-right:auto; }
  .grid-3 > a { align-items:center; text-align:center; }
  /* Email field and button can't share a row at phone widths. */
  .bm-form { grid-template-columns:1fr !important; }
  /* text-wrap:pretty reflows whole paragraphs to avoid short last lines.
     In a narrow column that buys a ragged right edge — not worth it. */
  p, li { text-wrap:auto !important; }
  .float-drawing { float:none !important; width:100% !important; margin:0 0 20px !important; }
  .float-portrait { float:none !important; display:block; width:62% !important; margin:0 auto 22px !important; }

  /* Header and footer can't hold one row at phone widths — the nav
     alone overruns the column. Stack the header, let both wrap. */
  .site-header { flex-direction:column; align-items:flex-start !important; gap:14px !important; margin-bottom:34px !important; }
  .site-nav { flex-wrap:wrap; row-gap:2px; margin-right:0 !important; margin-left:-8px; }
  .site-footer { flex-wrap:wrap; row-gap:6px; }
  .footer-spacer { display:none; }
  .footer-copy { flex-basis:100%; padding:4px 8px; }
  iframe.letterbird-embed { min-height:620px !important; }
}

/* ── Interactive states ───────────────────────────────────
   The mockup carried these inline; on the real site they have
   to be classes, since hover can't be expressed inline.
   ─────────────────────────────────────────────────────── */

/* Header, footer and nav links. */
.navlink { transition:background 0.14s, color 0.14s; }
.navlink:hover { background:var(--accent-wash); color:var(--accent-deep); }

/* The pulsing doorway links on the homepage. */
.door { transition:background 0.15s, color 0.15s; }
.door:hover { background:var(--door-hover); animation-play-state:paused; box-shadow:none; }

/* Filled button — newsletter signup. */
.btn { transition:background 0.14s; }
.btn:hover { background:var(--accent-deep); }

/* Outlined button — course and coaching purchase links.
   Colours live here rather than inline so hover can override them. */
.btn-outline {
  border:1px solid var(--accent);
  color:var(--accent);
  background:transparent;
  transition:background 0.14s, color 0.14s;
}
.btn-outline:hover { background:var(--accent); color:var(--on-accent); }

/* Email field. */
.bm-email:focus { border-color:var(--accent); }
.bm-email::placeholder { color:var(--ink-faint); }

/* Letterbird's embed never posts a height back, so its iframe sits at the
   138px minimum its own stylesheet sets and the form scrolls inside.
   Give it room to show the whole form as part of the page. */
iframe.letterbird-embed { min-height:560px !important; }