@import url('/fx/site-chrome.css?v=5');

/* Figma Site 8776:5649 — destination pages share homepage paper + type ramp.
   Tokens: paper #f6f6f6, ink #201e1b, column 1080, inset 180.
   H1 Source Serif 4 Regular 40/48 (alt Instrument Serif 40).
   Eyebrow TAY Makawao 24. Body Instrument Sans 16/24. Radius 0.
   Specificity beats styles.css .page-legal / .page-article / .page-journal. */

body:is(.page-legal, .page-article, .page-journal, .page-tools) {
  --sans: 'Instrument Sans', sans-serif;
  --serif: 'Source Serif 4', 'Instrument Serif', serif;
  --serif-alt: 'Instrument Serif', serif;
  --display: 'TAY Makawao', serif;
  --hangul: 'Grandiflora One', 'Hahmlet', sans-serif;
  --ink: #201e1b;
  --mute: #201e1b;
  --paper: #f6f6f6;
  --line: rgb(32 30 27 / 18%);
  --container: 1080px;
  --gutter: clamp(20px, 12.5vw, 180px);
  /* Figma chrome in site-chrome.css: .nav top 40px, height 72px. Sticky
     rails must clear that occupied band; --nav-h (88) still describes the
     old full-width bar and leaves only 8px under the pill. */
  --nav-clearance: 152px;
  background-color: #f6f6f6;
  background-image: url('/assets/site/paper-light.webp');
  background-position: left top;
  background-size: 3276.8px 1843.2px;
  color: #201e1b;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools)::before {
  display: none;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .shell {
  width: min(1080px, calc(100% - (2 * var(--gutter))));
  max-width: 1080px;
  margin-inline: auto;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) :is(h1, h2, h3) {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  color: #201e1b;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) h2 {
  font-family: var(--serif-alt);
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .eyebrow {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #201e1b;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) :is(.hero, .hero-panel, .section) {
  background: transparent;
  box-shadow: none;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero {
  text-align: left;
  padding: calc(var(--nav-h, 88px) + 120px) 0 80px;
  min-height: 0;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero .shell,
body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero-panel,
body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero .shell.hero-panel {
  max-width: 1080px;
  width: min(1080px, calc(100% - (2 * var(--gutter))));
  margin-inline: auto;
  padding: 0;
  text-align: left;
  align-items: flex-start;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero h1,
body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero-panel h1 {
  max-width: 22ch;
  margin: 0 0 24px;
  margin-inline: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0;
  text-wrap: balance;
  color: #201e1b;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero-copy {
  margin-inline: 0;
  max-width: 58ch;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: #201e1b;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools)
  :is(.card, .article-card, .timeline-step, .prose section, .tag-row span) {
  border-color: var(--line);
  border-radius: 0;
  background-color: rgb(246 246 246 / 48%);
  box-shadow: none;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .section {
  padding: 80px 0 120px;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .shell.article-layout {
  width: min(1080px, calc(100% - (2 * var(--gutter))));
  max-width: 1080px;
  padding: 0;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .prose {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: #201e1b;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .prose p,
body:is(.page-legal, .page-article, .page-journal, .page-tools) .prose li,
body:is(.page-legal, .page-article, .page-journal, .page-tools) .card p,
body:is(.page-legal, .page-article, .page-journal, .page-tools) .article-card p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: #201e1b;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) .prose h2,
body:is(.page-legal, .page-article, .page-journal, .page-tools) .card h2 {
  font-family: var(--serif-alt);
  font-weight: 400;
  letter-spacing: 0;
}

body:is(.page-legal, .page-article, .page-journal, .page-tools) a:focus-visible {
  outline: 2px solid #201e1b;
  outline-offset: 4px;
}

/* Gift success stays a transactional spinner — paper/ink + chrome only. */
body.page-gift-success .gs {
  padding-top: calc(var(--nav-h, 88px) + 48px);
}

/* KO legal: Hangul via Grandiflora (display) / Hahmlet (body). Copy stays Korean. */
html[lang='ko'] body:is(.page-legal, .page-article, .page-journal, .page-tools) {
  font-family: 'Instrument Sans', 'Hahmlet', sans-serif;
}

html[lang='ko'] body:is(.page-legal, .page-article, .page-journal, .page-tools) :is(h1, h2, h3) {
  font-family: 'Source Serif 4', 'Grandiflora One', 'Hahmlet', serif;
}

html[lang='ko'] body:is(.page-legal, .page-article, .page-journal, .page-tools) h2 {
  font-family: 'Instrument Serif', 'Grandiflora One', 'Hahmlet', serif;
}

html[lang='ko'] body:is(.page-legal, .page-article, .page-journal, .page-tools) .eyebrow {
  font-family: 'TAY Makawao', 'Grandiflora One', 'Hahmlet', serif;
}

html[lang='ko']
  body:is(.page-legal, .page-article, .page-journal, .page-tools)
  :is(.prose, .hero-copy, p, li) {
  font-family: 'Instrument Sans', 'Hahmlet', sans-serif;
}

/* Sticky header vs right rail: the 577px pill is viewport-centered, so it
   hangs 69px into the sidebar column on a 1080 shell (measured 1440: horiz
   -68.5, vert 8). Left-align the pill to the content column, and drop the
   sticky rail below the occupied nav band. */
@media (min-width: 901px) {
  body.site-figma:has(.meta-panel) .nav:not(.is-hero-logo) .nav__pill {
    left: max(var(--gutter), calc((100% - var(--container, 1080px)) / 2));
    margin-left: 0;
  }
}

body.site-figma:has(.meta-panel) .meta-panel {
  top: var(--nav-clearance, 152px);
}

@media (max-width: 640px) {
  body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero {
    padding-top: calc(var(--nav-h, 76px) + 48px);
    padding-bottom: 48px;
  }

  body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero h1,
  body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero-panel h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  body:is(.page-legal, .page-article, .page-journal, .page-tools) .hero-copy,
  body:is(.page-legal, .page-article, .page-journal, .page-tools) .prose,
  body:is(.page-legal, .page-article, .page-journal, .page-tools) .prose p {
    font-size: 14px;
    line-height: 20px;
  }
}