/* The creator-facing takes page, and the lineage figure it shares with the landing page.
 *
 * Palette, type and component vocabulary are inherited from takes.css deliberately: the
 * figure on these pages is drawn in the same parts as the real take explorer, so what a
 * visitor sees here is what they get. Only the tokens are restated -- see .lineage. */

.story-page { padding-top: 112px; }
.story-page h1 { font-size: clamp(28px, 3.2vw, 46px); margin: 10px 0 0; max-width: 18ch; }
.story-page .take-summary { font-size: 15px; max-width: 62ch; margin: 18px 0 0; line-height: 1.6; }
/* A global rule centres h2 on this site, which reads as a mistake above left-aligned body
 * copy. Overridden here only; take-format.html has the same inherited rule and is not in
 * this change's scope. */
.story-page h2 { font-size: 20px; font-weight: 550; letter-spacing: -.02em; margin: 0 0 14px; text-align: left; }
.story-page h3 { text-align: left; }
.story-page p { max-width: 74ch; margin: 0 0 14px; }

/* ---------------------------------------------------------------------------
 * The lineage figure.
 *
 * Tokens are redeclared here rather than inherited from .take-page so the figure can be
 * dropped into the landing page, which has none of the take explorer's styling. Keep the
 * values identical to takes.css.
 * ------------------------------------------------------------------------ */
.lineage {
    --take-panel: #17181a; --take-line: #2b2d30;
    --take-text: #f0f0ec; --take-muted: #999c9e; --take-accent: #e5ef73;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--take-text);
    margin: 0;
}
.lineage * { box-sizing: border-box; }

.lineage-shot {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
    margin-bottom: 18px; font-size: 12px; color: var(--take-muted);
}
.lineage-shot strong { color: var(--take-text); font-weight: 500; }

.lineage-track {
    display: flex; align-items: stretch; gap: 0;
    overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: thin; scrollbar-color: #3d4042 transparent;
}

.lineage-node {
    flex: 1 1 0; min-width: 148px;
    display: flex; flex-direction: column; gap: 9px;
    padding: 14px;
    background: #1b1d1e; border: 1px solid var(--take-line); border-radius: 8px;
}
/* The three that were not kept read as present but spent. The one that was kept is the
 * only lit thing in the figure -- that contrast is the whole argument. */
.lineage-node--spent { opacity: .62; }
.lineage-node--kept { border-color: #879450; background: #1d2018; }

.lineage-take { font-size: 12px; font-weight: 500; letter-spacing: -.01em; }
.lineage-change { font-size: 11px; color: var(--take-muted); line-height: 1.45; }
.lineage-node--kept .lineage-change { color: #bec5a8; }

.lineage-verdict {
    display: inline-flex; width: fit-content; align-items: center; white-space: nowrap;
    margin-top: auto;
    font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
    border: 1px solid #414447; border-radius: 4px; padding: 3px 7px;
    color: #b7babc; line-height: 1.3;
}
.lineage-verdict--kept { background: #29301b; color: var(--take-accent); border-color: #41492b; }
.lineage-verdict--kept::before { content: '●'; font-size: 6px; margin-right: 5px; }
.lineage-verdict--cut { background: #302322; color: #e5b1a8; border-color: #503431; }

/* The connector carries the parent chain: each take was derived from the one before it. */
.lineage-link {
    flex: 0 0 26px; align-self: center;
    display: grid; place-items: center;
    color: #4a4d50; font-size: 11px; line-height: 1;
}
.lineage-link::before { content: '→'; }

.lineage-caption {
    margin: 14px 0 0; font-size: 11px; color: var(--take-muted);
    border-left: 2px solid var(--take-line); padding-left: 12px; max-width: 62ch;
}

@media (max-width: 760px) {
    .lineage-track { flex-direction: column; overflow-x: visible; }
    .lineage-node { min-width: 0; }
    .lineage-link { flex: 0 0 22px; }
    .lineage-link::before { content: '↓'; }
}

/* ---------------------------------------------------------------------------
 * Page sections
 * ------------------------------------------------------------------------ */
.story-figure { margin: 40px 0 0; padding: 26px; background: var(--take-panel); border: 1px solid var(--take-line); border-radius: 14px; }

.story-film { display: grid; gap: 14px; }
.story-film .format-actions { margin-top: 4px; }

/* ---------------------------------------------------------------------------
 * Below-hero section layout.
 *
 * A single 74ch column inside a 1360px container left 52% of the page empty at 1900px.
 * Sections below the hero split instead: the heading and a one-line claim hold a narrow
 * left column -- the spine of the page -- and the detail runs right. Where a section is
 * prose only, the body column carries a figure beside the prose, because the claim split
 * alone still leaves roughly 340px of slack at a 74ch measure.
 *
 * The hero is deliberately NOT part of this: it keeps its full-width single column.
 * ------------------------------------------------------------------------ */
.story-sec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
.story-claim h2 { margin-bottom: 10px; }
.story-lede { font-size: 12.5px; color: var(--take-muted); max-width: 34ch; margin: 0; line-height: 1.55; }
.story-body > p:last-child { margin-bottom: 0; }
.story-body--figured { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.story-prose p { max-width: 66ch; }
.story-prose > :last-child { margin-bottom: 0; }

.story-margin { margin: 0; background: var(--take-panel); border: 1px solid var(--take-line); border-radius: 12px; padding: 18px; }
.story-margin-cap { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--take-muted); margin: 0 0 14px; }
.story-legend { display: grid; gap: 11px; margin: 0; }
.story-legend-row { display: flex; align-items: flex-start; gap: 12px; font-size: 12px; color: var(--take-muted); line-height: 1.45; }
.story-legend-row .lineage-verdict { flex: 0 0 auto; margin-top: 0; }
.story-legend-row .lineage-verdict--superseded { background: #1f2226; }

.story-snippet { margin: 0; overflow-x: auto; }
.story-snippet code { font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.75; color: #bdc3b4; white-space: pre; }

@media (max-width: 1240px) {
    .story-body--figured { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .story-margin { max-width: 520px; }
}
@media (max-width: 980px) {
    .story-sec { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .story-lede { max-width: 60ch; }
}

.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 28px; max-width: 80ch; }
/* As a section's body column it has the whole width to use; the reading-measure cap that
   makes sense for a lone grid would re-create the empty right side it is here to fix.
   The track floor drops to 200px because at 230px the fourth column misses by ~2px and
   the row breaks to 3 + 1 orphan. */
.story-sec .story-grid { max-width: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.story-grid h3 { font-size: 13px; font-weight: 550; margin: 0 0 6px; color: var(--take-text); }
.story-grid p { font-size: 12px; color: var(--take-muted); margin: 0; max-width: none; line-height: 1.55; }

/* ---------------------------------------------------------------------------
 * The landing page section.
 *
 * Self-contained: the landing page shares none of the take explorer's styling, so this
 * block sets its own surface and restates nothing it can borrow.
 * ------------------------------------------------------------------------ */
.takes-strip { padding: 90px 20px; border-top: 1px solid rgba(255, 255, 255, .05); }
.takes-strip-inner { width: min(1100px, 100%); margin: 0 auto; }
.takes-strip-head { max-width: 60ch; margin-bottom: 34px; }
.takes-strip .take-eyebrow { color: #999c9e; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.takes-strip h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(26px, 3vw, 40px); font-weight: 550; letter-spacing: -.04em;
    line-height: 1.15; color: #f0f0ec; margin: 0;
}
.takes-strip-head p { color: #999c9e; font-size: 15px; line-height: 1.6; margin: 16px 0 0; }
.takes-strip .lineage { padding: 26px; background: #17181a; border: 1px solid #2b2d30; border-radius: 14px; }
.takes-strip-more {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
    color: #f0f0ec; text-decoration: none; font-size: 13px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border: 1px solid #2b2d30; border-radius: 8px; padding: 10px 16px;
}
.takes-strip-more span { color: #e5ef73; }
.takes-strip-more:hover, .takes-strip-more:focus-visible { background: #e5ef73; color: #151710; border-color: #e5ef73; }
.takes-strip-more:hover span, .takes-strip-more:focus-visible span { color: #151710; }

@media (max-width: 640px) {
    .takes-strip { padding: 64px 16px; }
    .takes-strip .lineage { padding: 18px; }
    .story-figure { padding: 18px; }
}