/* Record homepage foundation: tokens, bands, shell and grid, type, the heading arrival, the gold thread, smooth-scroll
   and landing rules shared by every section. Linked from templates/index/index.html.twig only when the page uses the
   record presentations (.marketing-page--record). Section builders never edit this file; section styles live in
   home-record.css, home-weave.css, home-product.css and home-close.css.
   Ported from public/prototypes/homepage/weave/style.css (tokens, bands, type, thread) and cinematic/style.css. */

/* ---------- Tokens ---------- */

.marketing-page--record {
    --forest: #0E3B2A;
    --paper: #F7F5F0;
    --ink: #1C1F1D;
    --slate: #5C6660;
    --gold: #B8862B;
    --gold-text: #8A6318;
    --signal: #D9AE4E;
    --rule: #E3E0D8;
    --white: #FFFFFF;
    /* Forest mixed with Paper: atmospheric layers only. */
    --tint-1: #3E6353;
    --tint-2: #7D978B;
    --tint-3: #B9C6BE;
    --tint-4: #DDE3DD;
    --header: 76px;
    --gutter: clamp(16px, 4vw, 56px);
    --rail: 76px;
    --rail-x: 22px;
    --col-gap: clamp(16px, 2.2vw, 32px);
    --band-pad: clamp(104px, 11vw, 168px);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --display: 700 clamp(2.75rem, 1.1rem + 5.2vw, 6rem) / 0.98 var(--font-display);
    --heading: 700 clamp(2.25rem, 1.05rem + 3.5vw, 4.25rem) / 1.02 var(--font-display);
    font-feature-settings: "tnum" 0;
}

@media (max-width: 1023px) {
    .marketing-page--record { --rail: 40px; --rail-x: 11px; --band-pad: 96px; }
}

@media (max-width: 760px) {
    .marketing-page--record { --band-pad: 80px; }
}

/* ---------- Scrolling, anchors and focus landing (majors 7, ROB-10) ---------- */

/* Anchors and focus land under the header with a 16px breath; the site-wide [id] scroll margin would add 96px more. */
html:has(.marketing-page--record) { scroll-padding-top: calc(var(--header, 76px) + 16px); }
.marketing-page--record [id] { scroll-margin-top: 0; }

/* Lenis owns smooth scrolling on this page (assets/landing/base.js). */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: clip; }

.marketing-page--record ::selection { background: var(--signal); color: var(--forest); }
html:has(.marketing-page--record) { scrollbar-color: var(--gold) var(--paper); }
.marketing-page--record code { font-family: var(--font-mono); font-size: 0.86em; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Anchor targets take programmatic focus (base.js) so the next Tab continues from there; they draw no ring themselves. */
.marketing-page--record main:focus, .marketing-page--record main > [tabindex="-1"]:focus { outline: none; }

/* Panels kept laid out in one grid cell (base.js swapPanels hide: 'inert') are hidden visually as well. */
.marketing-page--record .is-hidden[inert] { visibility: hidden; }

/* Deferred images: without scripts the <noscript> twin shows instead of the 1×1 placeholder. */
html:not(.home-js) .marketing-page--record img[data-src] { display: none; }

/* Visually hidden, still read. */
.marketing-page--record .home-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Bands, shell, grid ----------
   Unscoped prototype rules keep their single-class weight through :where(), so section files that port prototype rules
   verbatim cascade exactly as they did in the prototype (base first, section files after). */

.marketing-page--record :where(.wv-band) :where(h2, h3, h4, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; }
.marketing-page--record :where(.wv-band) :where(ol, ul) { list-style: none; }
.marketing-page--record :where(.wv-band) dt { font-weight: 500; }
.marketing-page--record :where(.wv-band) button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.marketing-page--record :where(.wv-band) a { color: inherit; }
.marketing-page--record .wv-band :focus-visible { outline: 3px solid var(--gold-text); outline-offset: 4px; border-radius: 6px; }
.marketing-page--record .wv-band--forest :focus-visible { outline-color: var(--signal); }

:where(.marketing-page--record) .wv-band { position: relative; }
:where(.marketing-page--record) .wv-band--forest { background: var(--forest); color: var(--paper); }
:where(.marketing-page--record) .wv-band--paper { background: var(--paper); color: var(--ink); }
:where(.marketing-page--record) .wv-shell { position: relative; width: min(1360px, 100% - 2 * var(--gutter)); margin-inline: auto; }
:where(.marketing-page--record) .wv-host { padding-block: var(--band-pad); }
:where(.marketing-page--record) .wv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-left: var(--rail); }
:where(.marketing-page--record) .wv-in { position: absolute; top: 0; left: var(--rail-x); width: 0; height: 0; }
:where(.marketing-page--record) .wv-anchor { position: absolute; width: 0; height: 0; pointer-events: none; }

@media (max-width: 1023px) {
    :where(.marketing-page--record) .wv-grid > * { grid-column: 1 / -1 !important; }
}

/* ---------- The gold thread (assets/landing/thread.js) ---------- */

:where(.marketing-page--record) .wv-thread { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
:where(.marketing-page--record) .wv-thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
:where(.marketing-page--record) .wv-thread .t-ghost { stroke: rgb(184 134 43 / 0.34); stroke-width: 1.25; stroke-dasharray: 1.5 7; }
:where(.marketing-page--record) .wv-band--forest .wv-thread .t-ghost { stroke: rgb(217 174 78 / 0.3); }
:where(.marketing-page--record) .wv-thread .t-line { stroke: var(--gold); stroke-width: 2.5; }
:where(.marketing-page--record) .wv-band--forest .wv-thread .t-line { stroke: var(--signal); }
:where(.marketing-page--record) .wv-thread .t-keyline { stroke: var(--paper); stroke-width: 10; }
:where(.marketing-page--record) .wv-thread .t-node { fill: var(--paper); stroke: rgb(184 134 43 / 0.4); stroke-width: 1.5; transition: fill 0.35s var(--ease-out), stroke 0.35s var(--ease-out), r 0.45s var(--ease-out); }
:where(.marketing-page--record) .wv-band--forest .wv-thread .t-node { fill: var(--forest); stroke: rgb(217 174 78 / 0.38); }
:where(.marketing-page--record) .wv-thread .t-node.is-complete { stroke: var(--gold); stroke-width: 2.5; }
:where(.marketing-page--record) .wv-band--forest .wv-thread .t-node.is-complete { stroke: var(--signal); }
:where(.marketing-page--record) .wv-thread .t-node.is-active { fill: var(--gold); stroke: var(--gold); }
:where(.marketing-page--record) .wv-band--forest .wv-thread .t-node.is-active { fill: var(--signal); stroke: var(--signal); }
:where(.marketing-page--record) .wv-thread .t-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; }
:where(.marketing-page--record) .wv-band--forest .wv-thread .t-pulse { stroke: var(--signal); }
:where(.marketing-page--record) .wv-thread .t-tip { fill: var(--gold); }
:where(.marketing-page--record) .wv-band--forest .wv-thread .t-tip { fill: var(--signal); }

/* ---------- Type ---------- */

:where(.marketing-page--record) .wv-display { font: var(--display); letter-spacing: -0.04em; text-wrap: balance; }
:where(.marketing-page--record) .wv-display--md { font-size: clamp(2.6rem, 1.1rem + 4.4vw, 5.25rem); }
:where(.marketing-page--record) .wv-band--forest .wv-accent { color: var(--signal); }
:where(.marketing-page--record) .wv-band--paper .wv-accent { color: var(--slate); }
:where(.marketing-page--record) .wv-heading { font: var(--heading); letter-spacing: -0.035em; text-wrap: balance; color: var(--forest); }
:where(.marketing-page--record) .wv-band--forest .wv-heading { color: var(--paper); }
:where(.marketing-page--record) .wv-lead { max-width: 56ch; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.62; color: var(--slate); text-wrap: pretty; }
:where(.marketing-page--record) .wv-band--forest .wv-lead { color: rgb(247 245 240 / 0.78); }
:where(.marketing-page--record) .wv-split-head { align-items: end; row-gap: 28px; }
:where(.marketing-page--record) .wv-split-head h2 { grid-column: 1 / span 7; }
:where(.marketing-page--record) .wv-split-head .wv-lead { grid-column: 9 / span 4; padding-bottom: 0.4em; }

@media (max-width: 1100px) {
    :where(.marketing-page--record) .wv-split-head h2 { grid-column: 1 / span 12; }
    :where(.marketing-page--record) .wv-split-head .wv-lead { grid-column: 1 / span 10; }
}

/* The heading arrival (base.js splitWords): each word rises out of its own line box. */
:where(.marketing-page--record) .wv-w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
:where(.marketing-page--record) .wv-wi { display: inline-block; will-change: transform; }

/* ---------- Reduced motion ---------- */

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