/*
 * Stetworth overview (/) — "the triptych".
 *
 * Loaded AFTER site/css/style.css, which owns every token, the type
 * scale, buttons, nav, footer, the review-record component and the
 * modal.  Nothing here redefines a custom property; every value is
 * consumed from the base sheet.
 *
 * Thesis: one full-width diagram carries the page.  Assign → get the
 * proof → sign off, told as three editorial panels built from the
 * product's own objects — the quoted ask, the review record with its
 * correction beat, the held send — joined by hairline rules and
 * burnished arrows, like a process plate in a printed volume.  Hero
 * above, closing CTA below, nothing else.
 */

/* ============================================================
   Hero — centered, two sentences, nothing beside it
   ============================================================ */

.home-hero { padding-bottom: var(--s-7); }

.home-hero-inner {
    max-width: 54rem;
    margin: 0 auto;
    text-align: center;
}

.home-hero .hero-title {
    font-size: clamp(3rem, 7.5vw, 5.25rem);
    margin-bottom: var(--s-6);
}

.home-hero .hero-lede {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.home-hero .hero-sub {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.home-hero .hero-note {
    margin: 0 auto;
}

/* ============================================================
   The triptych
   ============================================================ */

.home-trip {
    padding-top: var(--s-7);
    border-top: 1px solid var(--c-rule);
}

.home-trip-eyebrow {
    text-align: center;
    margin-bottom: var(--s-7);
}

.trip {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 4.5rem minmax(0, 1.08fr) 4.5rem minmax(0, 1fr);
    align-items: start;
}

.trip-panel { min-width: 0; }

/* Panel heads: a burnished numeral over a small-caps label — the
   figure annotations of the plate.  Fixed height keeps the three card
   tops on one line. */
.trip-head {
    height: 5.5rem;
    text-align: center;
}
.trip-num {
    display: block;
    font-family: var(--font-accent);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--c-burnished);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-2);
}
.trip-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink);
}

/* Connectors: a hairline with a burnished arrowhead, aligned with the
   numeral band.

   The whole connector — both rules and the arrow — is ONE drawing, with
   every stroke on the viewBox's centre line (y=6).  It used to be a
   U+2192 glyph flanked by two `border-top` pseudo-elements, and that
   cannot be made to line up: a glyph is painted where the font's
   baseline puts it rather than at its box's centre, which hung the
   shaft ~1.6px low in EB Garamond and somewhere else again whenever the
   webfont had not loaded and Georgia stood in.  Centring the arrow's
   box instead still leaves ~0.5px, because a CSS border is snapped to
   the device pixel grid while an SVG stroke is antialiased — the two
   drift apart by up to half a pixel, in whichever direction the row's
   subpixel position happens to fall.  Sharing one coordinate system is
   what actually fixes it: the strokes now round together or not at all.

   The grid gives this column a fixed 4.5rem, and 72:12 is that column
   against the svg's 0.75rem height, so here the viewBox maps 1:1 to CSS
   px.  Keep that ratio if you resize either, or the drawing letterboxes
   inside its own box.  (The folded layout below scales it uniformly,
   which is why the head keeps its shape there.) */
.trip-link {
    display: flex;
    align-items: center;
    height: 1.2rem;
    margin-top: 1rem;
    min-width: 0;
}
.trip-connector {
    display: block;
    width: 100%;
    height: 0.75rem;
    /* Decorative, and on the folded layout the rotated box is far taller
       than its ink — it must never sit in front of the cards. */
    pointer-events: none;
}
.trip-connector-rule {
    stroke: var(--c-rule-strong);
    stroke-width: 1;
}
.trip-connector-arrow {
    stroke: var(--c-burnished);
    stroke-width: 1.25;
}

.card-pager { margin-top: var(--s-7); }
.card-pager .trip-caption { margin-top: 0; }

.trip-caption {
    margin-top: var(--s-7);
    text-align: center;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--c-ink-muted);
}

/* ============================================================
   Panel 1 — the ask
   ============================================================ */

.ask {
    background: var(--c-paper);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px -28px rgba(20, 17, 15, 0.4);
    overflow: hidden;
}
/* The volume's oxblood spine, same as the record card. */
.ask::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--c-oxblood);
}

.ask-body { padding: var(--s-5); }

.ask-quote {
    margin-top: var(--s-3);
    font-family: var(--font-accent);
    font-size: 1.22rem;
    line-height: 1.45;
    color: var(--c-ink-soft);
}

.ask-foot {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--c-rule);
    background: rgba(231, 222, 203, 0.4);
    font-size: 0.82rem;
    color: var(--c-ink-muted);
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

/* ============================================================
   Panel 3 — the held send (the sign-off card, as the vertical
   pages set it; rebuilt here because vertical.css is not loaded)
   ============================================================ */

.signoff {
    background: var(--c-paper);
    border: 1px solid var(--c-rule-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px -28px rgba(20, 17, 15, 0.4);
    overflow: hidden;
}

.signoff-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: rgba(149, 115, 64, 0.1);
    border-bottom: 1px solid var(--c-rule);
}
.signoff-status {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-burnished-text);
}
/* A slow pulse: the task is holding, not working. */
.signoff-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-burnished);
    flex: none;
    animation: home-signoff-pulse 2.4s ease-in-out infinite;
}
@keyframes home-signoff-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(149, 115, 64, 0.5); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 6px rgba(149, 115, 64, 0); }
}

.signoff-body { padding: var(--s-5); }

.signoff-fields {
    display: grid;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px dotted var(--c-rule);
}
.signoff-fields > div {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--s-3);
    align-items: start;
}
.signoff-fields dt {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    padding-top: 0.15rem;
}
.signoff-fields dd {
    font-size: 0.92rem;
    color: var(--c-ink-soft);
    word-break: break-word;
}

.signoff-excerpt {
    margin-top: var(--s-4);
    font-family: var(--font-accent);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--c-ink-muted);
}

.signoff-actions {
    display: flex;
    gap: var(--s-3);
    padding: 0 var(--s-5) var(--s-4);
    flex-wrap: wrap;
}
/* Non-interactive: an illustration of the gate, not the gate. */
.signoff-btn { cursor: default; pointer-events: none; }
.signoff-btn:hover { transform: none; }

.signoff-foot {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--c-rule);
    background: rgba(231, 222, 203, 0.4);
    font-size: 0.82rem;
    color: var(--c-ink-muted);
}

/* ============================================================
   The wall — one drifting row of assignments
   ============================================================ */

.home-wall {
    position: relative;
    z-index: 2;
    padding: var(--s-7) 0;
    border-top: 1px solid var(--c-rule);
    overflow: hidden;
}

.wall-head {
    margin-bottom: var(--s-6);
    text-align: center;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

/* The drifting row wears the edge fades; the heading must not. */
.wall-track-clip {
    overflow: hidden;
    /* Edge fades so the row enters and leaves like type slipping past
       a page edge. */
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.wall-track {
    display: flex;
    width: max-content;
    animation: home-wall-drift 80s linear infinite;
}
.home-wall:hover .wall-track { animation-play-state: paused; }

.wall-row {
    display: flex;
    gap: var(--s-4);
    padding-right: var(--s-4);
}

.wall-card {
    flex: none;
    width: 21rem;
    padding: var(--s-4) var(--s-5);
    background: var(--c-paper);
    border: 1px solid var(--c-rule);
    border-radius: var(--radius);
    font-family: var(--font-accent);
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--c-ink-soft);
}
.wall-tag {
    display: block;
    margin-bottom: var(--s-2);
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

/* The track holds two identical rows; drifting one full row's width
   then snapping to 0 reads as an endless loop. */
@keyframes home-wall-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Story swaps: home.js rotates complete stories through the plate —
   all three cards fade together, swap, fade back. */
.home-trip .ask,
.home-trip .record,
.home-trip .signoff { transition: opacity 0.28s ease; }
.home-trip.trip-swapping .ask,
.home-trip.trip-swapping .record,
.home-trip.trip-swapping .signoff { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .home-trip .ask,
    .home-trip .record,
    .home-trip .signoff { transition: none; }
}

/* ============================================================
   Triptych enters with the reader.  The inline script ADDS
   .trip-hold (only when IntersectionObserver can later remove
   it) and strips it on viewport entry — so no-JS renders the
   normal load animation, never a blank plate.  Reduced motion
   is unaffected: style.css forces animation: none + end-states,
   and a play-state on a none-animation is inert.
   ============================================================ */

.home-trip.trip-hold .trip-panel,
.home-trip.trip-hold .trip-link,
.home-trip.trip-hold .trip-caption,
.home-trip.trip-hold .record-row,
.home-trip.trip-hold .record-foot,
.home-trip.trip-hold .mark-failed,
.home-trip.trip-hold .mark-fixing,
.home-trip.trip-hold .mark-resolved,
.home-trip.trip-hold .record-correction {
    animation-play-state: paused;
}

/* ============================================================
   Motion and access
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .signoff-dot { animation: none; }
    .wall-track { animation: none; }
}

/* ============================================================
   Responsive — the plate folds to a single column
   ============================================================ */

@media (max-width: 980px) {
    .trip { grid-template-columns: minmax(0, 1fr); }

    .trip-panel {
        width: 100%;
        max-width: 27rem;
        margin: 0 auto;
    }
    .trip-head { height: auto; margin-bottom: var(--s-4); }

    /* The connector turns vertical: arrow only, rotated.  The svg keeps
       its 4.5rem box (so the viewBox still maps 1:1 and the head keeps
       its shape); with the rules hidden only the middle 18px carries
       ink, so the rotated drawing overflows that box by a few px, not
       by half its width. */
    .trip-link {
        width: 4.5rem;
        height: auto;
        margin: var(--s-5) auto;
        justify-content: center;
    }
    .trip-connector-rule { display: none; }
    .trip-connector { transform: rotate(90deg) scale(1.4); }
}

@media (max-width: 720px) {
    .home-hero .hero-cta { justify-content: center; }
}