/* ─────────────────────────────────────────────────────────────────
   Sabal Marketing LLC — sabalmarketing.com
   A typeset register, not a webpage. See .impeccable.md for context.
   One material: paper, ink, terracotta. One motion: a single quiet
   fade after fonts are ready. Nothing announces itself.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Palette ──────────────────────────────────────────────────
     All tokens in OKLCH. Every neutral is tinted toward terracotta
     (hue 55) at low chroma so the page is one continuous material. */
  --paper:       oklch(96.4% 0.014 70);
  --ink:         oklch(22% 0.018 55);
  --ink-soft:    oklch(42% 0.016 55);
  --ink-quiet:   oklch(58% 0.014 55);
  --rule:        oklch(80% 0.018 58);
  --rule-soft:   oklch(88% 0.014 62);
  --accent:      oklch(54% 0.12 55);
  --accent-deep: oklch(46% 0.12 52);

  /* ── Spacing (4pt scale, semantic names) ────────────────────── */
  --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:       62ch;
  --doc-width:     min(64rem, calc(100vw - 3rem));
  --doc-pad-block: clamp(2rem, 4vw, 3.5rem);

  /* ── Type — Tenor Sans (display), EB Garamond (body) ───────── */
  --display: "Tenor Sans", "Optima", "Copperplate", Georgia, serif;
  --body:    "EB Garamond", "Adobe Garamond Pro", "Hoefler Text", Garamond, "Iowan Old Style", Georgia, serif;

  /* ── Motion — ease-out-quint, the only easing on the page ──── */
  --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(--body);
  font-size: clamp(1.0625rem, 0.97rem + 0.38vw, 1.1875rem);
  font-weight: 400;
  font-feature-settings: "kern", "liga", "onum";
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-synthesis: none;
  line-height: 1.62;
  hanging-punctuation: first last;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

::selection {
  background: oklch(54% 0.12 55 / 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(--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 reveal it as a single quiet fade — the page settling
   onto paper. Gated on .js-enh so non-JS visitors see it 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.76;
}

.masthead-mark img {
  width: clamp(140px, 16vw, 172px);
  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-family: var(--body);
  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 ────────────────────────────────────────────────── */

/* Two-column titleblock: the SABAL / MARKETING monument on the left,
   the Sabal palmetto device at hero scale on the right as a concentrated
   terracotta counterweight. Shoulders aligned at the top so the palm's
   frond crown shares a horizon with the title's cap-height. See the
   "one pictorial device" principle in .impeccable.md. */
.titleblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(3.5rem, 7.5vw, 5.75rem) clamp(2.75rem, 5.5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

/* Two-line titleblock: SABAL and MARKETING set as co-equal monuments,
   stacked at the same display scale. Tenor Sans earns its keep at cap
   height. The legal "LLC" suffix lives in the masthead mark, the
   ledger's Entity row, and the colophon — not inside the h1. */
.title {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 var(--space-xl);
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  font-feature-settings: "kern";
}

.title-main,
.title-sub {
  display: block;
  font-size: clamp(2.4rem, 1rem + 6vw, 6rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.title-sub {
  margin-top: 0;
}

.subtitle {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  max-width: 50ch;
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + 0.42vw, 1.3rem);
  line-height: 1.52;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Titleblock palm — the hero counterweight. Full-strength terracotta,
   sized to shoulder the type monument without crowding the bottom rule.
   The image carries its own fill color (the approved asset may not be
   recolored from CSS), so sizing, position, and the reveal are the only
   levers here. */
.titleblock-palm {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  width: clamp(180px, 24vw, 280px);
  height: auto;
}

/* One-time reveal on page settle: the palm takes root into the page.
   A feathered mask — opaque at the bottom, fading to transparent above —
   is oversized to 2.5× the palm's height and slid from fully-transparent
   coverage up to fully-opaque coverage, so the reveal rises from the
   trunk baseline up through the fronds with a soft ink-drawing-through-
   paper edge rather than a hard window-shade line. The mark descends
   the final few pixels onto its baseline on the same curve, so the
   last beat of the motion is a quiet settling into place. Shares
   ease-out-quint with the document fade and starts a beat after it,
   so the paper arrives first and the palm roots itself onto it.
   The whole block is gated on (prefers-reduced-motion: no-preference),
   so reduced-motion users get a plain, always-present palm with no
   mask, no transform, and no transition. */
@media (prefers-reduced-motion: no-preference) {
  .js-enh .titleblock-palm {
    /* Mask is 2.5× the palm's height with a narrow 40–60% feather band.
       At mask-position 0 100% the visible 40% window falls inside the
       fully-opaque 0–40% region (palm fully present); at 0 0 it falls
       inside the fully-transparent 60–100% region (palm fully hidden).
       Between the two, the feather sweeps cleanly from the trunk
       baseline up through the fronds. */
    --reveal-mask: linear-gradient(
      to top,
      #000 0%,
      #000 40%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: var(--reveal-mask);
    -webkit-mask-image: var(--reveal-mask);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 250%;
    -webkit-mask-size: 100% 250%;
    mask-position: 0 100%;
    -webkit-mask-position: 0 100%;
    transform: translateY(0);
    transition:
      mask-position 2200ms var(--ease) 140ms,
      -webkit-mask-position 2200ms var(--ease) 140ms,
      transform 2200ms var(--ease) 140ms;
  }

  .js-enh body:not(.fonts-ready) .titleblock-palm {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
    transform: translateY(5px);
  }
}

/* Reverse italic: when a 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(--body);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  font-feature-settings: "kern", "smcp", "c2sc";
  letter-spacing: 0.09em;
  color: var(--ink-quiet);
}

.ledger-row dd {
  margin: 0;
  font-family: var(--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 — classic editorial dinkus, set in the
   body serif for proper character support. One of the four planned
   always-visible terracotta moments in the document. */
.fleuron {
  all: unset;
  display: block;
  text-align: center;
  margin-block: var(--space-2xl);
  font-family: var(--body);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
}

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

.movement-title {
  margin: 0 0 var(--space-md);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  font-feature-settings: "kern", "smcp", "c2sc";
  letter-spacing: 0.09em;
  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 first of the
   four planned terracotta moments. Set as inked stone in the display
   face. One moment only; do not add a second drop cap later. */
.movement:first-of-type > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 400;
  font-size: 5.6em;
  line-height: 0.84;
  color: var(--accent);
  padding: 0.06em 0.12em 0 0;
  margin: 0.04em -0.01em -0.08em 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.2em;
  }
}

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

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

/* ── Inline prose 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(--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 the tap area on inline links without visually shifting
   layout — negative margin absorbs the added 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: 44px;
  height: auto;
  margin: 0 auto var(--space-lg);
  opacity: 0.92;
}

.colophon p {
  margin: 0 auto var(--space-sm);
  max-width: 52ch;
  font-style: italic;
  font-size: 0.95rem;
  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.07em;
  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 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: var(--space-xl);
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .titleblock-palm {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    width: clamp(140px, 34vw, 200px);
  }

  .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;
  }

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

/* ── 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 {
    background: white;
    color: black;
  }

  .ledger {
    position: static;
  }

  .skip-link {
    display: none;
  }
}