/* ─────────────────────────────────────────────────────────────────
   Sabal Marketing LLC — sabalmarketing.com
   A typeset register, not a webpage.
   See .impeccable.md for design context. No gradients, glass, drop
   shadows, scroll reveals, staggered entrances, or icon-grid sections.
   The only sanctioned motion is a single quiet opacity fade of the
   document after fonts are ready — the page settling onto paper,
   once. Hover and focus transitions use --ease for refined easing.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Warm paper palette in OKLCH, all neutrals tinted toward Sabal orange. */
  --paper:        oklch(96.4% 0.014 70);
  --paper-deep:   oklch(94.0% 0.016 68);
  --ink:          oklch(22% 0.018 55);
  --ink-soft:     oklch(38% 0.014 55);
  --ink-quiet:    oklch(54% 0.012 55);
  --rule:         oklch(78% 0.018 60);
  --rule-soft:    oklch(86% 0.014 65);
  --accent:       oklch(63% 0.18 45);
  --accent-deep:  oklch(54% 0.18 38);

  /* Spacing (4pt base, named semantically) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-4xl: 8rem;

  /* Document grid */
  --measure:        60ch;
  --doc-width:      min(64rem, calc(100vw - 3rem));
  --doc-pad-block:  clamp(2rem, 4vw, 3.5rem);

  /* Type — Marcellus for display (Roman cap inspired), Spectral for body. */
  --serif-display: "Marcellus", "Trajan Pro", "Optima", Georgia, serif;
  --serif-body:    "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Motion — ease-out-quint, the only easing on the site. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ───────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: clamp(1.05rem, 0.96rem + 0.36vw, 1.1875rem);
  font-weight: 400;
  font-feature-settings: "kern", "liga", "onum";
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-synthesis: none;
  line-height: 1.6;
  hanging-punctuation: first last;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle warm-paper light source coming from the top of the page. */
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse 90% 60% at 50% 0%,
      oklch(98% 0.012 75) 0%,
      var(--paper) 55%,
      var(--paper-deep) 100%
    );
  content: "";
  pointer-events: none;
}

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

abbr {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp", "c2sc";
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
}

em {
  font-style: italic;
  font-feature-settings: "kern", "liga";
}

::selection {
  background: oklch(63% 0.18 45 / 0.18);
  color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif-body);
  text-decoration: none;
  z-index: 10;
  transition: top 200ms var(--ease);
}

.skip-link:focus {
  top: var(--space-md);
}

/* ── Document container ────────────────────────────────────────── */

.document {
  width: var(--doc-width);
  margin: 0 auto;
  padding-block: var(--doc-pad-block) var(--space-3xl);
  transition: opacity 720ms var(--ease);
}

/* One-time entrance: hold the document hidden until web fonts are
   ready, then fade it in as a single quiet moment. Gated on .js-enh
   so non-JS visitors (and failure modes) see the document instantly. */
.js-enh body:not(.fonts-ready) .document {
  opacity: 0;
}

/* ── Masthead ───────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}

.masthead-mark {
  display: inline-flex;
  color: var(--ink);
  outline: none;
  transition: opacity 200ms var(--ease);
}

.masthead-mark:hover {
  opacity: 0.78;
}

.masthead-mark img {
  width: clamp(140px, 16vw, 168px);
  height: auto;
}

.masthead-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 2px;
}

.masthead-meta {
  margin: 0 0 0.35rem;
  display: flex;
  gap: 0.55em;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.masthead-meta abbr {
  font-style: normal;
}

.masthead-bullet {
  color: var(--accent);
  font-style: normal;
}

/* ── Title block ────────────────────────────────────────────────── */

.titleblock {
  padding-block: clamp(3.5rem, 7.5vw, 5.75rem) clamp(2.75rem, 5.5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

.title {
  margin: 0 0 var(--space-lg);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.1rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.004em;
  color: var(--ink);
  max-width: 16ch;
  text-wrap: balance;
  font-feature-settings: "kern", "liga", "dlig";
}

.subtitle {
  margin: 0;
  max-width: 50ch;
  font-family: var(--serif-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.08rem, 0.99rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Reverse italic: when the run is already italic, emphasis becomes upright. */
.subtitle em,
.masthead-meta em,
.colophon p:not(.colophon-fine) em {
  font-style: normal;
}

/* ── Register (two-column body) ─────────────────────────────────── */

.register {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}

/* ── Ledger (left metadata column) ──────────────────────────────── */

.ledger {
  position: sticky;
  top: var(--space-xl);
  align-self: start;
  padding-right: clamp(1.5rem, 2.5vw, 2.5rem);
  border-right: 1px solid var(--rule-soft);
}

.ledger-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ledger-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule-soft);
}

.ledger-row:first-child {
  padding-top: 0;
}

.ledger-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ledger-row dt {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  font-feature-settings: "kern", "smcp", "c2sc";
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
}

.ledger-row dd {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}

.ledger-row dd em {
  font-style: italic;
}

/* ── Body (right prose column) ──────────────────────────────────── */

.body {
  display: block;
  max-width: var(--measure);
}

.movement {
  padding-bottom: var(--space-2xl);
}

.movement:first-child {
  padding-top: 0;
}

.movement:last-child {
  padding-bottom: 0;
}

.movement + .movement {
  padding-top: 0;
  border-top: 0;
}

/* Asterism between movements — the classic editorial "dinkus," set in the
   body serif so it has proper character support. Rendered via
   <hr class="fleuron"> so its decorative status is explicit. */
.fleuron {
  all: unset;
  display: block;
  text-align: center;
  margin-block: var(--space-2xl);
  font-family: var(--serif-body);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
  font-feature-settings: normal;
  font-variant-numeric: normal;
}

.fleuron::before {
  content: "\2042";
}

.movement-title {
  margin: 0 0 var(--space-md);
  font-family: var(--serif-body);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  font-feature-settings: "kern", "smcp", "c2sc";
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  line-height: 1.4;
}

.movement p {
  margin: 0 0 1.05em;
  color: var(--ink-soft);
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

.movement p + .prose-trail {
  margin-top: 1.3rem;
}

.movement p:last-child {
  margin-bottom: 0;
}

/* Letterpress drop cap on the opening paragraph — the single deliberate
   orange accent, set as inked stone in the display face. One moment only. */
.movement:first-of-type > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 6em;
  line-height: 0.82;
  color: var(--accent);
  padding: 0.06em 0.1em 0 0;
  margin: 0.04em -0.01em -0.06em 0;
  letter-spacing: normal;
  font-feature-settings: "kern";
}

@media (max-width: 540px) {
  .movement:first-of-type > p:first-of-type::first-letter {
    font-size: 4.4em;
  }
}

/* ── Product mark ───────────────────────────────────────────────── */

.product-mark {
  width: clamp(150px, 22vw, 200px);
  height: auto;
  margin: var(--space-2xs) 0 var(--space-lg);
}

/* ── Inline links ──────────────────────────────────────────────── */

.prose-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: auto;
  transition:
    text-decoration-thickness 200ms var(--ease),
    color 200ms var(--ease);
}

.prose-link:hover {
  color: var(--accent-deep);
  text-decoration-thickness: 2px;
}

.prose-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.prose-link .arrow {
  color: var(--accent);
  font-family: var(--serif-body);
  font-style: normal;
  display: inline-block;
  transition: transform 260ms var(--ease);
}

.prose-link:hover .arrow,
.prose-link:focus-visible .arrow {
  transform: translateX(3px);
}

/* Expand tap area on inline links without visually shifting layout.
   Negative margin absorbs the extra padding so the typeset rhythm holds. */
.ledger-row dd .prose-link {
  display: inline-block;
  padding-block: var(--space-xs);
  margin-block: calc(var(--space-xs) * -1);
}

.prose-trail .prose-link {
  display: inline-block;
  padding-block: var(--space-sm);
  margin-block: calc(var(--space-sm) * -1);
}

/* ── Colophon (footer) ─────────────────────────────────────────── */

.colophon {
  margin-top: var(--space-xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
  text-align: center;
}

.colophon-mark {
  display: block;
  width: 56px;
  height: auto;
  margin: 0 auto var(--space-lg);
}

.colophon p {
  margin: 0 auto var(--space-sm);
  max-width: 52ch;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-quiet);
  line-height: 1.6;
  text-wrap: balance;
}

.colophon p:last-child {
  margin-bottom: 0;
}

.colophon p.colophon-fine {
  margin-top: var(--space-md);
  max-width: none;
  font-style: normal;
  font-size: 0.78rem;
  font-variant-caps: all-small-caps;
  font-feature-settings: "kern", "smcp", "c2sc";
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  text-wrap: balance;
}

.colophon-fine abbr {
  font-variant-caps: inherit;
  font-feature-settings: inherit;
  letter-spacing: inherit;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 880px) {
  :root {
    --doc-pad-block: 1.5rem;
    --doc-width: min(40rem, calc(100vw - 2rem));
  }

  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
  }

  .masthead-meta {
    text-align: left;
    justify-content: flex-start;
  }

  .titleblock {
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .register {
    grid-template-columns: 1fr;
    row-gap: var(--space-2xl);
    padding-block: var(--space-2xl);
  }

  .ledger {
    position: static;
    padding-right: 0;
    padding-bottom: var(--space-xl);
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .ledger-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
  }

  .ledger-row {
    border-bottom: 1px solid var(--rule-soft);
  }
}

@media (max-width: 540px) {
  .ledger-list {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: clamp(1.7rem, 7.5vw, 2.15rem);
    max-width: none;
  }

  .subtitle {
    font-size: 1.05rem;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Do not hold the document hidden waiting for a fade we will not run. */
  .js-enh body:not(.fonts-ready) .document,
  .js-enh body.fonts-ready .document {
    opacity: 1;
  }
}

/* ── Print ──────────────────────────────────────────────────────── */

@media print {
  body::before {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  .ledger {
    position: static;
  }

  .skip-link {
    display: none;
  }
}