/* ───────────────────────────────────────────────────────────────
   Tuck marketing — shared layer for the four direction concepts.
   Loads AFTER _ds/colors_and_type.css (tokens win there).
   Components here: page ground, header, footer, answer-tag,
   glance row, monogram chip, store badge, sunburst, pricing
   prose, reveal + pin utilities, accessibility responses.
   ─────────────────────────────────────────────────────────────── */

/* Increase Contrast — tiers bump to the ≥7:1 variants */
@media (prefers-contrast: more) {
    :root {
        --fresh:  var(--fresh-contrast);
        --dusk:   var(--dusk-contrast);
        --urgent: var(--urgent-contrast);
        --ink-soft: #54462F;
    }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root { --ink-soft: #C2B9A6; }
}

/* ── Ground ────────────────────────────────────────────────── */
html { scroll-behavior: auto; }
body {
    margin: 0;
    background-color: var(--paper);
    background-image: var(--grain);
    background-size: 220px 220px;
    color: var(--ink);
    font: var(--t-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
* { box-sizing: border-box; }
a { color: inherit; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
::selection { background: var(--accent-soft); }

/* ── Type roles for the marketing layer ────────────────────── */
.eyebrow {
    font: var(--t-eyebrow);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
}
.display-xl {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: calc(clamp(42px, 6.6vw, 92px) * var(--type-scale));
    line-height: 1.04;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}
.display-lg {
    font-family: var(--sf-display);
    font-weight: 700;
    font-size: calc(clamp(32px, 4.4vw, 60px) * var(--type-scale));
    line-height: 1.08;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}
.display-md {
    font-family: var(--sf-display);
    font-weight: 600;
    font-size: calc(clamp(24px, 2.9vw, 38px) * var(--type-scale));
    line-height: 1.16;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}
.lede {
    font: 400 calc(clamp(18px, 1.6vw, 21px) * var(--type-scale))/1.5 var(--sf-text);
    color: var(--ink-soft);
    margin: 0;
    max-width: 44ch;
    text-wrap: pretty;
}
.quiet {
    font: var(--t-caption);
    color: var(--ink-soft);
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px clamp(20px, 4.5vw, 56px) 0;
}
.app-icon {
    width: 36px; height: 36px;
    border-radius: 22.37%;
    display: block;
    flex: none;
}
.wordmark {
    font: 700 calc(21px * var(--type-scale))/1 var(--sf-display);
    letter-spacing: -0.4px;
    color: var(--ink);
    text-decoration: none;
}
.header-cta {
    margin-left: auto;
    font: 500 calc(14px * var(--type-scale))/1 var(--sf-text);
    color: var(--ink);
    text-decoration: none;
    padding: 12px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid var(--divider);
    background: var(--paper-elevated);
}

/* ── App Store badge (auto-flips with mode: ink fill, paper text) ── */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 12px;
    padding: 10px 20px 11px 16px;
    min-height: 52px;
    text-decoration: none;
    transition: transform 160ms var(--ease-spring);
}
.store-badge:hover { transform: scale(1.02); }
.store-badge:active { transform: scale(0.97); }
.store-badge svg { width: 24px; height: 28px; fill: currentColor; flex: none; }
.store-badge .badge-text { display: flex; flex-direction: column; line-height: 1; }
.store-badge .badge-text small {
    font: 400 calc(11px * var(--type-scale))/1.25 var(--sf-text);
    color: inherit;
    opacity: 0.85;
}
.store-badge .badge-text strong {
    font: 600 calc(19px * var(--type-scale))/1.2 var(--sf-display);
    letter-spacing: -0.2px;
}
.cta-cluster {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* ── The answer-tag (locked construction · corner rev 2026-06-10) ─
   Elevated paper, baked grain, dog-eared top-right fold:
   42px corner clipped on the diagonal, folded-back flap in
   recessed paper with its own grain, one crease hairline.
   Corners now SCALE with the rendition via --tag-radius
   (default 10px, never above 12px) - revised by the system owner
   from the fixed 4px of the original lock. The fold crease stays
   sharp; flap geometry unchanged.
   NO border, NO drop shadow. Dark mode: inset edge-light. */
.answer-tag {
    position: relative;
    display: block;
    width: var(--tag-w, 360px);
    max-width: 100%;
    margin: 0;
}
.tag-face {
    position: relative;
    display: block;
    background-color: var(--paper-elevated);
    background-image: var(--grain);
    background-size: 220px 220px;
    border-radius: var(--tag-radius, 10px);
    clip-path: polygon(
        0 0,
        calc(100% - var(--fold-notch)) 0,
        100% var(--fold-notch),
        100% 100%,
        0 100%
    );
    padding: var(--tag-pad, 28px 30px 26px);
    box-shadow:
        inset 0 1px 0 var(--tag-edge-light),
        inset 0 -1px 0 var(--tag-edge-shade);
}
.tag-flap {
    position: absolute;
    top: 0; right: 0;
    z-index: 2;
    width: var(--fold-notch);
    height: var(--fold-notch);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    background-image:
        linear-gradient(135deg,
            var(--fold-crease) 0,
            var(--fold-crease) 1.5px,
            transparent 1.5px),
        var(--grain);
    background-color: var(--fold-flap);
    background-size: auto, 220px 220px;
    transform-origin: 0% 100%;
}
.tag-dish {
    display: block;
    font: 500 calc(var(--tag-dish-fs, 33px) * var(--type-scale))/1.13 var(--serif-display);
    letter-spacing: -0.35px;
    color: var(--ink);
    text-wrap: balance;
    padding-right: calc(var(--fold-notch) * 0.5);
}
.tag-phrase {
    display: block;
    margin-top: 12px;
    font: 600 calc(18px * var(--type-scale))/calc(22px * var(--type-scale)) var(--sf-text);
}
.tag-caption {
    display: block;
    margin-top: 7px;
    font: italic 400 calc(var(--tag-cap-fs, 14.5px) * var(--type-scale))/1.35 var(--serif-display);
    color: var(--ink-soft);
}
.tier-fresh  { color: var(--fresh); }
.tier-dusk   { color: var(--dusk); }
.tier-urgent { color: var(--urgent); }

/* ── Glance row (the numeral lives HERE, never on the tag) ──── */
.glance-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 4px;
}
.glance-row + .glance-row { border-top: 1px solid var(--row-divider); }
.row-num {
    flex: none;
    width: 54px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.row-num .n {
    font: 700 calc(28px * var(--type-scale))/calc(30px * var(--type-scale)) var(--sf-rounded);
}
.row-num .lbl {
    font: 400 calc(11px * var(--type-scale))/calc(14px * var(--type-scale)) var(--sf-text);
    color: var(--ink-soft);
}
.row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.row-name {
    font: 600 calc(19px * var(--type-scale))/calc(24px * var(--type-scale)) var(--sf-display);
    letter-spacing: -0.2px;
    color: var(--ink);
}
.row-word {
    font: 400 calc(13px * var(--type-scale))/calc(18px * var(--type-scale)) var(--sf-text);
    color: var(--ink-soft);
}

/* ── Monogram chip (identity is neutral, never coloured) ────── */
.chip {
    flex: none;
    width: 28px; height: 28px;
    border-radius: var(--radius-pill);
    background: var(--paper-recessed);
    border: 1px solid var(--divider);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 calc(12px * var(--type-scale))/1 var(--sf-text);
    color: var(--ink-soft);
    letter-spacing: 0.2px;
}
.only-you {
    font: 500 calc(12px * var(--type-scale))/1 var(--sf-text);
    color: var(--ink-soft);
    border: 1px solid var(--divider);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    white-space: nowrap;
}

/* ── The woodcut sun — the capture mark (flat sienna ink) ──── */
.capture-sun {
    display: block;
    color: var(--accent);
    width: var(--sun-w, 170px);
    height: auto;
    overflow: visible;
}
html.anim .capture-sun.sun-settle {
    animation: tuckBloom 840ms var(--ease-spring) both;
}
@keyframes tuckBloom {
    0%   { transform: scale(0.90); }
    55%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ── Pricing prose (stated once, quietly) ───────────────────── */
.pricing-note {
    font: 400 calc(17px * var(--type-scale))/1.6 var(--sf-text);
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0;
    text-wrap: pretty;
}
.pricing-note strong {
    font-weight: 600;
    color: var(--ink);
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--divider);
    margin-top: clamp(64px, 10vh, 120px);
    padding: 40px clamp(20px, 4.5vw, 56px) 56px;
    display: flex;
    align-items: baseline;
    gap: 10px 28px;
    flex-wrap: wrap;
}
.site-footer .foot-brand {
    font: 600 calc(15px * var(--type-scale))/1 var(--sf-display);
    color: var(--ink);
}
.site-footer span, .site-footer a {
    font: var(--t-caption);
    color: var(--ink-soft);
}
.site-footer a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    padding: 8px 0;
}
.site-footer .foot-right { margin-left: auto; display: flex; gap: 22px; }

/* Motion off (reduced-motion or frozen environment): kill every
   transition/animation so final states apply instantly. */
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
    transition: none !important;
    animation: none !important;
}

/* ── Reveal utility (motion enhances; static is finished) ───── */
html.anim [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 700ms var(--ease-spring),
        transform 950ms var(--ease-spring);
    transition-delay: var(--reveal-delay, 0ms);
}
html.anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ── Pin scaffolding ────────────────────────────────────────── */
.pin-track { position: relative; }
.pin-stage { display: grid; }
html.anim .pin-track { height: var(--pin-len, 300vh); }
html.anim .pin-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: clip;
}
/* pins-off (≤880px): tracks collapse, stages sit back in flow */
html.anim.pins-off .pin-track { height: auto; }
html.anim.pins-off .pin-stage {
    position: static;
    height: auto;
    overflow: visible;
}

/* Keyboard users can always reach content */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 12px;
    z-index: 100;
    background: var(--paper-elevated);
    padding: 12px 18px;
    border-radius: 12px;
    font: 500 14px/1 var(--sf-text);
}
.skip-link:focus-visible { left: 12px; }