/* Hallmark · shape: Long Document (inner pages: About, Contact, Help) · genre: atmospheric · theme: brand (dark edition, shared with home.css) · redesign: full
 * paper: oklch(14.5% 0.018 162) · accent: oklch(80% 0.16 155) · display: IBM Plex Sans 300 · body: IBM Plex Sans · hero: Banner (a big thin head and one line) · nav: floating pill · footer: index columns · signature: the home page’s light, carried as a soft bloom behind each page head
 * axes: dark/grotesk-sans/chromatic-green · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V3 · weakest: V, the inner pages share one skeleton on purpose (a head, then split sections) so the site reads as one system */

/* The page head: a big thin title over the bloom */
.page-hero { padding-block: var(--space-4xl) var(--space-2xl); }
.page-hero .container { display: grid; gap: var(--space-lg); }
.page-hero h1 { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.045em; max-width: 14ch; animation: settle 700ms var(--ease-out) 60ms both; }
.page-hero .lead { color: var(--color-ink-2); max-width: 60ch; animation: settle 600ms var(--ease-out) 200ms both; }
.contact-big { margin-top: var(--space-md); font-size: clamp(1.6rem, 4.4vw, 3.5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; animation: settle 600ms var(--ease-out) 300ms both; }
.contact-big a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Sections: the head on the left, the content across the rest */
.page-sec { padding-block: var(--space-2xl); }
.page-sec + .page-sec { border-top: 1px solid var(--color-rule); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.split h2 { font-size: var(--text-title); font-weight: 300; letter-spacing: -0.02em; max-width: 16ch; }
.statement { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-2); max-width: 62ch; }
.panel-rows { margin: 0; padding: var(--space-sm) var(--space-xl); border-radius: 24px; background: var(--color-paper-2); border: 1px solid var(--color-glass-edge); }
.panel-rows > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.panel-rows > div:last-child { border-bottom: 0; }
.panel-rows dt { color: var(--color-muted); font-weight: 400; }
.panel-rows dd { margin: 0; overflow-wrap: anywhere; }
.page .rows dd a, .panel-rows a { color: var(--color-ink); }
@media (max-width: 60rem) {
  .split, .panel-rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .panel-rows > div { gap: var(--space-2xs); }
  .panel-rows { padding-inline: var(--space-lg); }
  .page-hero { padding-block: var(--space-3xl) var(--space-xl); }
}

/* Help: the guide list beside the guides */
.help-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); align-items: start; }
.help-body img, .guide img, #guides img, .guide-step img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
#guides [id], .help-body [id], .guide [id], .page-prose [id] { scroll-margin-top: 5.5rem; }
.page-prose img { max-width: 100%; height: auto; }
.help-toc { position: sticky; top: calc(var(--banner-height) + var(--space-lg)); display: grid; gap: var(--space-lg); padding: var(--space-lg); border-radius: 20px; background: var(--color-paper-2); border: 1px solid var(--color-glass-edge); max-height: calc(100vh - var(--banner-height) - var(--space-2xl)); overflow: auto; }
.help-toc b { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-xs); }
.help-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.help-toc a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.help-toc a:hover { color: var(--color-accent); }
#helpGuides { display: grid; gap: var(--space-lg); }
.help-sec-title { font-size: var(--text-title); font-weight: 300; letter-spacing: -0.02em; margin-top: var(--space-xl); }
.help-sec-title:first-child { margin-top: 0; }
.guide-card { scroll-margin-top: calc(var(--banner-height) + var(--space-lg)); display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: 24px; background: linear-gradient(150deg, var(--color-paper-3), var(--color-paper-2) 60%); box-shadow: var(--shadow-lift); }
.guide-card h3 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); font-weight: 400; }
.guide-card .g-ico { flex: none; color: var(--color-accent); }
.guide-card .guide-sum { color: var(--color-muted); }
.guide-card ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.guide-card ol li::marker { color: var(--color-accent); }
.guide-card ol img { display: block; width: 100%; max-width: 300px; height: auto; margin-top: var(--space-sm); border-radius: 18px; border: 1px solid var(--color-glass-edge); }
.guide-card .guide-rules { padding: var(--space-md) var(--space-lg); border-radius: 14px; background: color-mix(in oklab, var(--color-accent) 9%, var(--color-paper-2)); }
.guide-card .guide-rules ul { margin: var(--space-xs) 0 0; padding-left: 1.2em; color: var(--color-ink-2); }
.guide-card a:not(.btn) { color: var(--color-ink); }
.guide-card .btn { justify-self: start; }
@media (max-width: 60rem) { .help-grid { grid-template-columns: minmax(0, 1fr); } .help-toc { position: static; max-height: none; } .guide-card { padding: var(--space-lg); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .page-sec .rows > div, .panel-rows, .guide-card { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
  }
}