/* Brand pitch site — harvest ledger. Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 72 / 112 px */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6; text-rendering: optimizeLegibility; }
::selection { background: var(--paddy); color: var(--paper); }
:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 3px; border-radius: 2px; }
a { color: var(--paddy); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--persimmon-ink); }
a[aria-disabled="true"] { cursor: not-allowed; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { top: 12px; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.note { font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; }
.muted { color: var(--ink-2); }
.fig { font-variant-numeric: tabular-nums lining-nums; }
html { scrollbar-color: var(--rule-strong) var(--paper); }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 5; background: color-mix(in oklch, var(--paper) 94%, transparent); border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.wordmark { font-size: 1.25rem; font-weight: 620; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.topbar nav { display: flex; gap: 24px; font-size: 0.9375rem; font-weight: 500; }
.topbar nav a { color: var(--ink); text-decoration: none; }
.topbar nav a:hover { color: var(--paddy); text-decoration: underline; }
.topbar .nav-cta { color: var(--paddy); font-weight: 600; }

/* hero */
.hero { position: relative; padding: 72px 0 112px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; position: relative; z-index: 1; }
.byline { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paddy); }
.hero h1 { font-size: clamp(3.25rem, 7.6vw, 6rem); line-height: 0.95; font-weight: 640; letter-spacing: -0.035em; font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144; margin-top: 16px; }
.tagline { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-style: italic; font-weight: 420; color: var(--paddy); margin-top: 20px; line-height: 1.25; }
.descriptor { font-size: 1.1875rem; max-width: 46ch; margin-top: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out); }
.btn-primary { background: var(--paddy); color: var(--paper); }
.btn-primary:hover { background: var(--paddy-deep); color: var(--paper); }
.btn-quiet { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-quiet:hover { border-color: var(--paddy); color: var(--paddy); }
.hero-furrows { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; opacity: .9; }

/* ledger */
.ledger { background: var(--paper-2); border-top: 3px solid var(--ink); padding: 20px 24px 16px; box-shadow: 0 18px 40px -28px oklch(30% 0.04 60 / .45); }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); }
.ledger-head h2 { font-size: 1.375rem; font-weight: 580; }
.range { font-size: 0.875rem; font-weight: 600; color: var(--paddy); white-space: nowrap; }
.entries .entry { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding: 14px 0 12px; border-bottom: 1px solid var(--rule); position: relative; }
.entry dt { font-weight: 600; font-size: 0.9375rem; }
.entry dd { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; color: var(--paddy); line-height: 1.05; text-align: right; }
.entry .note { grid-column: 1 / -1; font-size: 0.8125rem; }
.ledger-foot { font-size: 0.8125rem; color: var(--ink-2); padding-top: 12px; max-width: 48ch; }

/* the one authored motion: ruled lines draw in under already-visible figures */
@media (prefers-reduced-motion: no-preference) {
  .entries .entry::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--paddy); transform-origin: left; transform: scaleX(0); animation: rule 700ms var(--ease-out) forwards; animation-delay: calc(200ms + var(--i) * 90ms); }
  @keyframes rule { to { transform: scaleX(1); opacity: .0; } 0% { opacity: 1; } 70% { opacity: 1; } }
}

/* bands */
.band { padding: 88px 0; border-top: 1px solid var(--rule); }
.band h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 580; letter-spacing: -0.02em; line-height: 1.08; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.sec-head .note { max-width: 44ch; text-align: right; }

/* where */
.where-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.lede { font-size: 1.1875rem; margin-top: 16px; max-width: 44ch; }
.where .note { margin-top: 12px; }
.bar { display: flex; height: 18px; gap: 2px; margin-bottom: 20px; }
.bar .seg { min-width: 3px; }
.seg-0 { background: var(--paddy); }
.seg-1 { background: oklch(52% 0.09 140); }
.seg-2 { background: oklch(62% 0.085 130); }
.seg-3 { background: oklch(70% 0.08 115); }
.seg-4 { background: oklch(76% 0.075 100); }
.seg-5 { background: oklch(80% 0.07 85); }
.seg-6 { background: var(--rule-strong); }
.where .note { margin-top: 16px; }
.countries { width: 100%; border-collapse: collapse; font-size: 1rem; }
.countries th, .countries td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 500; }
.countries thead th { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--rule-strong); padding-top: 0; }
.countries .num { text-align: right; padding-left: 24px; }
.countries .share { font-weight: 600; color: var(--paddy); }
.countries .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 12px; vertical-align: 0.05em; }

/* reels */
.reel-list { list-style: none; padding: 0; }
.reel { display: grid; grid-template-columns: 72px 1fr auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.rank { font-size: 3rem; line-height: 1; font-weight: 500; color: var(--persimmon-ink); font-variation-settings: "SOFT" 100, "opsz" 96; }
.reel h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.reel .one-liner { font-weight: 400; color: var(--ink-2); }
.offer .actions { margin-top: 24px; }
.reel-meta { margin-top: 4px; }
.reel-meta strong { color: var(--paddy); font-size: 1.125rem; }
.reel-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: 44px; white-space: nowrap; }
.reel-link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }

/* story */
.story-grid { display: grid; grid-template-columns: 7fr 4fr; gap: 72px; align-items: start; }
.story-main p { font-size: 1.1875rem; max-width: 62ch; margin-top: 16px; }
.story-main p.coda { font-size: clamp(1.5rem, 2.6vw, 2rem); font-style: italic; color: var(--paddy); margin-top: 24px; line-height: 1.25; }
.grow { border-top: 2px solid var(--ink); padding-top: 16px; }
.grow h2 { font-size: 1.5rem; }
.grow p { margin-top: 12px; }

/* press */
.press-intro { font-size: 1.25rem; max-width: 60ch; margin-top: 24px; }
.press-intro a { font-weight: 600; }
.press-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.press-card { background: var(--paper-2); padding: 24px 28px; border-top: 2px solid var(--paddy); display: flex; flex-direction: column; gap: 16px; }
.press-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.press-card .outlet { font-family: var(--font-text); font-weight: 700; font-size: 1rem; color: var(--paddy); }
.press-card .date { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.press-card figure { margin: 0; }
.press-card blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; font-weight: 420; line-height: 1.35; }
.press-card figcaption { font-size: 0.9375rem; color: var(--ink-2); margin-top: 8px; }
.press-card figcaption::before { content: "— "; }
.press-card .read { margin-top: auto; font-weight: 600; }

/* offer */
.offer-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.offer p { font-size: 1.25rem; max-width: 60ch; }

/* contact */
.contact { background: var(--paddy-deep); color: var(--on-deep); padding: 88px 0 96px; }
.contact h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 580; }
.contact-line { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.25; margin-top: 16px; max-width: 30ch; }
.contact-links { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; font-weight: 600; font-size: 1.125rem; }
.contact a { color: var(--on-deep); }
.contact a:hover { color: oklch(85% 0.1 60); }
.contact ::selection { background: var(--on-deep); color: var(--paddy-deep); }
.foot { padding: 32px 0 48px; font-size: 0.8125rem; color: var(--ink-2); }
.foot p + p { margin-top: 8px; }
.foot p { max-width: 110ch; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .where-grid, .offer-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .wrap { width: calc(100% - 40px); }
  .topbar nav a:not(.nav-cta) { display: none; }
  .hero { padding: 40px 0 96px; }
  .ledger { padding: 16px 16px 12px; }
  .band { padding: 64px 0; }
  .sec-head { flex-direction: column; align-items: start; gap: 8px; }
  .sec-head .note { text-align: left; }
  .reel { grid-template-columns: 44px 1fr; gap: 8px 16px; }
  .reel-link { grid-column: 2; }
  .rank { font-size: 2.25rem; }
  .press-grid { grid-template-columns: 1fr; }
  .press-card { padding: 20px; }
  .story-main p, .press-intro { font-size: 1.0625rem; }
}