/* julesmarlowe.com — hand-built stylesheet
   PASS 2 — THE REINVENTION (Oct 16, 2026)
   The language, learned from a friend's modern site and translated whole
   into her own colours: a system of tokens, a strict section rhythm, big
   rounded cards on a dark stage — and one deliberate light break.

   THE STAGE is deep river-green ink: header, hero surround, footer, and
   the homepage live on it, gold as glow, maroon as signature.
   THE PAPER is the light break: every reading page (Ledger, Codex, About,
   Music, the logs) opens as a warm paper sheet laid on the stage, because
   reading comfort is her craft.
   Type: Cormorant Garamond her display voice, Spectral her prose,
   Inter for the UI — nav, kickers, cards, buttons, meta. */

:root {
  /* the stage — deep teal-ink */
  --void: #03120f;
  --stage: #06231e;
  --stage-2: #0a2e27;
  --surface: rgba(247, 241, 227, 0.045);
  --surface-2: rgba(247, 241, 227, 0.085);
  --hairline: rgba(247, 241, 227, 0.11);
  --hairline-strong: rgba(247, 241, 227, 0.2);
  --paper-soft: #c9bda1;

  /* the paper — her light break */
  --paper: #f7f1e3;
  --paper-deep: #efe4cd;
  --ink: #262019;
  --ink-soft: #4c4438;
  --line: #d8c9a8;

  /* her colours */
  --maroon: #5e2129;
  --maroon-deep: #40141b;
  --lake: #0e5049;
  --lake-deep: #07332f;
  --lake-bright: #8fd0c4;
  --gold: #a37e27;
  --gold-bright: #c9a44e;

  /* the system */
  --radius: 20px;
  --radius-sm: 14px;
  --pill: 999px;
  --header-h: 4.25rem;
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Spectral", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-ui: "Inter", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow-card: 0 20px 45px -22px rgba(0, 0, 0, 0.7);
  --shadow-sheet: 0 40px 90px -30px rgba(0, 0, 0, 0.65), 0 6px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 920px) {
  :root { --header-h: 6.6rem; }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* anchor targets must not land beneath the fixed header */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.stage-home { color: var(--paper); }

/* Ambient stage light: a gold whisper top-right, lake-green at the edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(163, 126, 39, 0.14), transparent 62%),
    radial-gradient(840px 580px at -12% 26%, rgba(20, 102, 90, 0.3), transparent 62%),
    linear-gradient(180deg, var(--stage) 0%, var(--void) 130%);
}

::selection { background: var(--maroon); color: var(--paper); }

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

img { max-width: 100%; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a { color: var(--lake); }
a:hover { color: var(--maroon); }
.stage-home main a { color: var(--lake-bright); }
.stage-home main a:hover { color: var(--gold-bright); }

/* ---------- Header: fixed, slim, dark teal with a soft blur ---------- */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(4, 24, 20, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid var(--hairline);
}
.site-head .wrap {
  max-width: 1140px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.25rem;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.brand::before {
  content: "⚓︎ ";
  color: var(--gold-bright);
  letter-spacing: 0;
}
.brand:hover { color: var(--gold-bright); }
/* The tagline stays in the markup (and flies on the homepage hero);
   the slim fixed header has no room to carry it. */
.site-head .tagline { display: none; }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}
.main-nav a {
  display: inline-block;
  margin: 0;
  padding: 0.42rem 0.78rem;
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: var(--pill);
  color: var(--paper-soft);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.main-nav a:hover {
  background: var(--surface-2);
  border-color: var(--hairline);
  color: #fff;
}
@media (max-width: 920px) {
  .site-head .wrap { flex-wrap: wrap; align-content: center; row-gap: 0.3rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .brand { font-size: 1.14rem; }
  .main-nav { justify-content: flex-start; }
  .main-nav a { font-size: 0.79rem; padding: 0.34rem 0.62rem; }
}

/* ---------- Main & the paper sheet ---------- */
main { padding: 0 0 3.5rem; }

/* Every reading page opens as a paper sheet laid on the dark stage. */
main .wrap {
  max-width: 920px;
  margin-top: clamp(1.25rem, 3.5vw, 2.75rem);
  padding: clamp(1.6rem, 4.5vw, 3.1rem) clamp(1.3rem, 4.5vw, 3.1rem);
  background: linear-gradient(180deg, #fbf6ea, var(--paper) 140px);
  border: 1px solid rgba(216, 201, 168, 0.55);
  border-radius: 24px;
  box-shadow: var(--shadow-sheet);
}
/* The homepage lives on the stage itself — no sheet. */
body.stage-home main .wrap {
  max-width: 880px;
  margin-top: 0;
  padding: 0 1.25rem;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Section rhythm: kicker → heading → lede ---------- */
.kicker {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
.stage-home .kicker { color: var(--gold-bright); }

h1, h2, h3 { font-family: var(--font-display); }
h1 {
  font-size: clamp(2.5rem, 5vw, 3.3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--maroon-deep);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.65rem, 3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--lake-deep);
  margin: 2.2rem 0 0.65rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}
h3 { font-size: 1.42rem; font-weight: 600; color: var(--maroon); margin: 1.4rem 0 0.4rem; }

.stage-home h1 { color: var(--paper); }
.stage-home h2 { color: var(--paper); border-bottom-color: var(--hairline); }
.stage-home h3 { color: var(--paper); }

.hero { text-align: center; padding: 0.4rem 0 0.6rem; }
.hero p.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0.6rem auto 0;
  line-height: 1.6;
}
.stage-home .hero p.lede { color: var(--paper-soft); }

/* ---------- Homepage hero: full-width band melting into the stage ---------- */
.hero-band {
  position: relative;
  width: 100vw;
  margin: 0 0 2.1rem;
  margin-left: calc(50% - 50vw);
}
.hero-band img {
  display: block;
  width: 100%;
  height: clamp(360px, 58vh, 580px);
  object-fit: cover;
  border: none;
  border-radius: 0;
}
/* the melt: painting dissolves into the dark stage at its bottom edge,
   deepening behind the name so the scrim keeps working */
.hero-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64%;
  background: linear-gradient(to top, var(--void) 4%, rgba(3, 18, 15, 0.55) 40%, rgba(3, 18, 15, 0) 80%);
  border-radius: 0;
  pointer-events: none;
}
.hero-caption {
  position: absolute;
  z-index: 1;
  left: max(1.25rem, calc(50vw - 440px));
  bottom: 2.1rem;
  text-align: left;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(7, 25, 23, 0.8), 0 0 3px rgba(7, 25, 23, 0.65);
}
.hero-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  letter-spacing: 0.04em;
  line-height: 1.02;
}
.hero-tag {
  display: block;
  font-style: italic;
  font-size: 1.05rem;
  margin-top: 0.3rem;
}
@media (max-width: 560px) {
  .hero-caption { left: 1rem; bottom: 1.3rem; }
  .hero-name { font-size: 2rem; }
  .hero-tag { font-size: 0.92rem; }
}

.meta {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.62rem 1.3rem;
  border-radius: var(--pill);
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color: #fdf6e3;
  text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(64, 20, 27, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(64, 20, 27, 0.6);
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  margin: 1.4rem 0;
}
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 0 1.15rem;
  text-decoration: none;
  color: var(--paper);
  display: block;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 164, 78, 0.55);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(201, 164, 78, 0.15);
  color: var(--paper);
}
.card-art {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-bottom: 1px solid var(--hairline);
}
.card-art.contain {
  object-fit: contain;
  background: var(--paper);
  padding: 0.8rem;
  box-sizing: border-box;
}
.card-body { padding: 0.95rem 1.15rem 0; }
.card h3 { margin-top: 0.25rem; color: #f6efdb; font-size: 1.5rem; }
.card p {
  margin: 0.3rem 0 0;
  color: var(--paper-soft);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.55;
}
.card p.kicker { color: var(--gold-bright); margin: 0; }

/* ---------- Index lists become cards ---------- */
ul.index-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
  display: grid;
  gap: 0.9rem;
}
ul.index-list li {
  background: #fffdf7;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.05rem 1.25rem;
  box-shadow: 0 10px 26px -18px rgba(38, 32, 25, 0.35);
}
ul.index-list .item-title {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--maroon-deep);
}
ul.index-list a.item-title { color: var(--maroon-deep); text-decoration: none; }
ul.index-list a.item-title:hover {
  color: var(--maroon);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
ul.index-list .item-sub {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* …and on the dark homepage, the same cards go over to the stage */
.stage-home ul.index-list li {
  background: var(--surface);
  border-color: var(--hairline);
  box-shadow: var(--shadow-card);
}
.stage-home ul.index-list .item-title,
.stage-home ul.index-list a.item-title { color: #f6efdb; }
.stage-home ul.index-list a.item-title:hover { color: var(--gold-bright); }
.stage-home ul.index-list .item-sub { color: var(--paper-soft); }

/* Cold Ledger installments: cards with a gold spine */
ul.installments li {
  border-left: 4px solid var(--gold);
  border-radius: 6px 16px 16px 6px;
  padding: 1.15rem 1.35rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
ul.installments li:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -18px rgba(38, 32, 25, 0.4);
}

/* Ship's Cats: a photo-card grid */
ul.cat-grid {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 1.1rem;
}
ul.cat-grid li {
  padding: 0 0 1.1rem;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
ul.cat-grid li:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -18px rgba(38, 32, 25, 0.45);
}
.cat-photo {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  margin: 0 0 0.6rem;
}
ul.cat-grid .cat-photo {
  max-width: none;
  height: 215px;
  object-fit: cover;
  border: none;
  border-radius: 0;
  margin: 0 0 0.9rem;
}
ul.cat-grid .item-title,
ul.cat-grid .item-sub { padding: 0 1.15rem; }

/* ---------- Article & prose furniture ---------- */
article.post { max-width: 700px; margin: 0 auto; }
article.post p { margin: 0 0 1.05rem; }

blockquote, .lyrics {
  margin: 1.4rem 0;
  padding: 1.05rem 1.3rem;
  background: #f3ead3;
  border-left: 4px solid var(--maroon);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  white-space: pre-line;
}
.lyrics { font-size: 1.12rem; line-height: 1.75; }

.note {
  background: var(--paper-deep);
  border: 1px solid rgba(163, 126, 39, 0.45);
  border-radius: 16px;
  padding: 1.05rem 1.25rem;
  margin: 1.4rem 0;
  font-size: 0.99rem;
  box-shadow: 0 10px 26px -20px rgba(38, 32, 25, 0.4);
}
.note strong { color: var(--maroon); }
.stage-home .note {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--paper-soft);
  box-shadow: var(--shadow-card);
}
.stage-home .note strong { color: var(--gold-bright); }

figure { margin: 1.6rem auto; }

.portrait { max-width: 500px; }
.portrait img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -22px rgba(38, 32, 25, 0.45);
}
.portrait figcaption {
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 0.92rem;
  margin-top: 0.6rem;
  text-align: center;
}

/* The colours hang on a dark panel — black and red fields deserve the stage */
.colours {
  max-width: 360px;
  text-align: center;
  background: linear-gradient(180deg, var(--stage-2), var(--stage));
  border: 1px solid rgba(201, 164, 78, 0.35);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 0.55rem;
  box-shadow: var(--shadow-card);
}
.colours img {
  display: block; width: 100%; height: auto;
  border: none;
  border-radius: 12px;
  padding: 0;
  background: none;
  box-sizing: border-box;
}
.colours figcaption {
  color: #d8cbae;
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 0.92rem;
  margin-top: 0.6rem;
}
.colours.flag { max-width: 600px; }
.colours.rouge { max-width: 520px; }

.emblem { margin: 1.4rem auto 1.8rem; max-width: 300px; text-align: center; }
.emblem img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 14px 28px rgba(38, 32, 25, 0.25));
}
.emblem figcaption {
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 0.92rem;
  margin-top: 0.55rem;
}

/* Bookish details: a drop cap to open a Ledger narrative… */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.35em;
  line-height: 0.82;
  float: left;
  padding: 0.07em 0.13em 0 0;
  color: var(--maroon);
}

/* …and an anchor ornament where a plain rule would be too plain */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 420px;
  margin: 2.1rem auto;
  color: var(--gold);
  font-size: 1.05rem;
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

/* ---------- Footer: the dark stage again, anchors for a finial ---------- */
.site-foot {
  margin-top: 3rem;
  padding: 2.1rem 0 2.5rem;
  background: rgba(3, 18, 15, 0.55);
  border-top: 1px solid var(--hairline);
  text-align: center;
  color: var(--paper-soft);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.site-foot p { margin: 0.35rem 0; }
.site-foot .finial { color: var(--gold-bright); letter-spacing: 0.5em; }

/* ---------- Motion: a gentle fade-up, and respect for those who opt out ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.card, ul.index-list li, .note {
  animation: rise 0.55s ease both;
}
.card-grid .card:nth-child(2) { animation-delay: 0.05s; }
.card-grid .card:nth-child(3) { animation-delay: 0.1s; }
.card-grid .card:nth-child(4) { animation-delay: 0.15s; }
.card-grid .card:nth-child(5) { animation-delay: 0.2s; }
.card-grid .card:nth-child(6) { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}