/* CS42 Experiments (Version 2). Shared parts live in site.css; this is only what this page adds.
   Four experiments, each with its own composition:
   The Platform  the quiz screen opens out to the edges, then a four stage line that fills as you
                 scroll, with a phone rising on the Play stage, then a sideways gallery
   Stratum       on the dark band: a log plot that stands up, then three screens that fan out
   Draw AI       a sentence that lights up word by word, then the page's sticky story: the
                 screenshot stays while the four parts of a game pass beside it
   Split Lab     the screen slides in beside the headline, then the heading and its button
                 stay put while the four tools pass as rows */

/* ── Opening ────────────────────────────────────────────────────── */
.ex-hero { padding-top: clamp(64px, 9vw, 132px); padding-bottom: clamp(40px, 5vw, 72px); }
.ex-hero .t-hero { max-width: 11.5em; margin-top: 4px; }
.ex-nowrap { white-space: nowrap; }
.ex-lede { margin-top: 26px; max-width: 760px; }
.ex-in { animation: ex-rise 1.1s var(--ease-out) var(--d, 0s) both; }
@keyframes ex-rise { from { opacity: 0; transform: translateY(24px); } }

/* the four experiments as a chapter row: a real screen above each name */
.ex-chapters {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px;
    margin-top: clamp(56px, 7vw, 104px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .ex-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.ex-ch { display: block; color: var(--fg); }
.ex-ch:hover { text-decoration: none; }
.ex-ch-pic {
    display: block; overflow: hidden; aspect-ratio: 16 / 10;
    border-radius: 12px; background: var(--bg-3);
    box-shadow: 0 0 0 1px var(--line);
}
.ex-ch-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: transform .7s var(--ease-out); }
.ex-ch:hover .ex-ch-pic img, .ex-ch:focus-visible .ex-ch-pic img { transform: scale(1.05); }
.ex-ch-name {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    font-size: 17px; font-weight: 600; letter-spacing: -0.012em;
}
/* a small down chevron: these jump to the sections below */
.ex-ch-name::after {
    content: ""; width: 0.4em; height: 0.4em; margin-top: -0.2em;
    border: solid var(--fg-3); border-width: 0 0.09em 0.09em 0; transform: rotate(45deg);
    transition: transform .25s var(--ease), border-color .2s var(--ease);
}
.ex-ch:hover .ex-ch-name::after { border-color: var(--accent); transform: translateY(2px) rotate(45deg); }
.ex-ch:hover .ex-ch-name { color: var(--accent); }

/* a short line of facts under a headline: status first, then plain words */
.ex-meta { display: flex; flex-wrap: wrap; align-items: center; list-style: none; font-size: 14px; color: var(--fg-3); }
.ex-meta li { display: inline-flex; align-items: center; }
.ex-meta li + li::before { content: ""; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--fg-4); }
.ex-meta .st, .ex-meta .st--live { color: var(--fg); font-weight: 500; }
@media (max-width: 734px) {
    /* no separators on phones, where the line wraps: plain gaps instead */
    .ex-meta { gap: 6px 16px; }
    .ex-meta li + li::before { content: none; }
}

/* definitions on hairlines (Stratum) */
.ex-defs { display: grid; gap: 0 clamp(28px, 4vw, 48px); }
@media (min-width: 735px) { .ex-defs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-defs > div { padding: 20px 0 26px; border-top: 1px solid var(--line); }
.ex-defs dt { font-size: 19px; line-height: 1.26; font-weight: 600; letter-spacing: -0.01em; }
.ex-defs dd { margin: 6px 0 0; color: var(--fg-2); }

/* ── 01 The Platform ────────────────────────────────────────────── */
.ex-platform { padding-top: clamp(72px, 9vw, 136px); }
.ex-head { display: grid; gap: 24px 64px; align-items: end; }
@media (min-width: 900px) { .ex-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ex-head .t-display { max-width: 9.5em; }
.ex-head-side .ex-meta { margin-top: 22px; }

/* the quiz screen starts at the page width and opens out to the edges by the time it is centred */
.ex-grow { margin-top: clamp(56px, 7vw, 104px); }
.ex-grow-fig {
    --g: min(1, calc(var(--p, 1) * 2.1));
    --q: calc(1 - var(--g));
    max-width: 1600px; margin: 0 auto;
    aspect-ratio: 16 / 8; overflow: hidden;
    clip-path: inset(0 calc(var(--q) * max(var(--gutter), (100% - var(--w-wide)) / 2)) round calc(var(--q) * 22px));
}
/* the lower fifth of the screenshot is empty grid: crop it to 16:8 from the top */
.ex-grow-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* on the white theme the light screen needs an edge to stand on */
:root[data-palette="snowy-owl"] .ex-grow { filter: drop-shadow(0 0 1px rgba(29,29,31,0.34)); }

.ex-flow { margin-top: clamp(80px, 10vw, 144px); }
.ex-flow-list {
    --rail: var(--line-2);
    position: relative; list-style: none;
    display: grid; gap: 28px;
    margin-top: clamp(32px, 4vw, 48px);
}
.ex-flow-list li {
    --on: clamp(0, calc((var(--p, 1) - var(--k, 0)) * 5), 1);
    position: relative;
    display: grid; gap: 6px; align-content: start;
    opacity: calc(0.38 + 0.62 * var(--on));
}
.ex-flow-list li:nth-child(2) { --k: .2; }
.ex-flow-list li:nth-child(3) { --k: .4; }
.ex-flow-list li:nth-child(4) { --k: .6; }
.ex-flow-list strong { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.16; letter-spacing: -0.014em; }
.ex-flow-list span { color: var(--fg-2); max-width: 30ch; }
/* the line and the dots */
.ex-flow-list::before, .ex-flow-list::after { content: ""; position: absolute; background: var(--rail); }
.ex-flow-list::after { background: var(--accent); }
.ex-flow-list li::before {
    content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%;
    background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.ex-flow-list li::after {
    content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%;
    background: var(--accent); transform: scale(var(--on)); transition: transform .3s var(--ease-out);
}
/* the student's phone rises on the Play stage as its dot lights */
.ex-flow-phone {
    --phone-w: 120px; width: 120px; margin: 0; padding: 6px; border-radius: 24px;
    opacity: var(--on);
    transform: translate3d(0, calc((1 - var(--on)) * 56px), 0);
}
.ex-flow-phone img { border-radius: 19px; }
@media (min-width: 900px) {
    .ex-flow-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 44px; margin-top: 240px; }
    .ex-flow-list::before, .ex-flow-list::after { left: 0; right: 0; top: 5px; height: 1px; }
    .ex-flow-list::after { transform-origin: 0 50%; transform: scaleX(min(1, calc(var(--p, 1) * 1.15))); }
    .ex-flow-list li::before, .ex-flow-list li::after { left: 0; top: -44px; }
    .ex-flow-phone { position: absolute; left: 0; bottom: calc(100% + 58px); }
}
@media (max-width: 899px) {
    .ex-flow-list { padding-left: 34px; }
    .ex-flow-list::before, .ex-flow-list::after { left: 5px; top: 6px; bottom: 6px; width: 1px; }
    .ex-flow-list::after { transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
    .ex-flow-list li::before, .ex-flow-list li::after { left: -34px; top: 7px; }
    .ex-flow-phone { margin-top: 16px; }
}

.ex-access {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
    margin-top: clamp(48px, 6vw, 72px); padding-top: 28px;
    border-top: 1px solid var(--line);
}
.ex-access p { max-width: 680px; font-size: 17px; line-height: 1.5; color: var(--fg-2); }
.ex-access b { color: var(--fg); }

.ex-gallery { margin-top: clamp(72px, 9vw, 128px); }
.ex-gallery .gallery-item { --item-w: min(84vw, 760px); }
.ex-gallery figure { margin: 0; }
.ex-gallery .screen { box-shadow: 0 0 0 1px var(--line); }
.ex-gallery figcaption { margin-top: 18px; max-width: 46ch; font-size: 15px; line-height: 1.45; color: var(--fg-3); }
.ex-gallery figcaption b { color: var(--fg); }

/* ── 02 Stratum ─────────────────────────────────────────────────── */
.ex-plot { margin-top: clamp(56px, 7vw, 104px); }
.ex-plot-in {
    display: block; overflow: hidden;
    width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto;
    border-radius: clamp(10px, 1.2vw, 16px);
    background: #0B0F14;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 60px 120px -60px rgba(0,0,0,0.9);
    transform-origin: 50% 100%;
    transform: perspective(2400px) rotateX(calc((1 - var(--p, 1)) * 26deg)) scale(calc(0.9 + 0.1 * var(--p, 1)));
}
/* cropped past the file library and the tab row (edges fall on panel borders), so the curves and the parameters fill the frame */
.ex-plot-in img { width: 100%; transform: scale(1.2); transform-origin: 100% 27%; }

.ex-what { display: grid; gap: 32px 64px; margin-top: clamp(72px, 9vw, 128px); }
@media (min-width: 900px) { .ex-what { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.ex-what-head .ex-meta { margin-top: 18px; }

.ex-fan { margin-top: clamp(80px, 10vw, 144px); }
.ex-fan-list { list-style: none; display: grid; gap: 40px; }
.ex-fan figure { margin: 0; }
.ex-fan .screen { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0,0,0,0.9); }
.ex-fan figcaption { margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--fg-3); }
.ex-fan figcaption b { color: var(--fg); }
@media (min-width: 900px) {
    .ex-fan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    /* --q runs from 1 (stacked) to 0 (spread), finishing a little before the row reaches the middle */
    .ex-fan-item { --q: clamp(0, calc(1 - var(--p, 1) * 1.45), 1); }
    .ex-fan-item--a { transform: translate3d(calc(var(--q) * 76%), calc(var(--q) * 28px), 0) rotate(calc(var(--q) * -5deg)); }
    .ex-fan-item--b { position: relative; z-index: 1; transform: translate3d(0, calc(var(--q) * -14px), 0); }
    .ex-fan-item--c { transform: translate3d(calc(var(--q) * -76%), calc(var(--q) * 28px), 0) rotate(calc(var(--q) * 5deg)); }
    .ex-fan figcaption { opacity: clamp(0, calc(1 - var(--q) * 5), 1); }
}
@media (max-width: 899px) {
    /* on phones the three screens become a sideways row */
    .ex-fan.wrap-wide { width: 100%; }
    .ex-fan-list {
        display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scrollbar-width: none;
        padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
    }
    .ex-fan-list::-webkit-scrollbar { display: none; }
    .ex-fan-item { flex: 0 0 min(84%, 520px); scroll-snap-align: start; }
}

.ex-stratum-foot { margin-top: clamp(64px, 8vw, 104px); }
.ex-note { max-width: 600px; margin-inline: auto; font-size: 15px; line-height: 1.5; color: var(--fg-3); }
.ex-stratum-foot .btns { margin-top: 26px; }

/* ── 03 Draw AI ─────────────────────────────────────────────────── */
.ex-draw-lede { margin-top: clamp(28px, 3vw, 40px); }
.ex-big {
    max-width: 22em; margin-inline: auto; text-align: center;
    font-size: clamp(26px, 3.4vw, 44px); line-height: 1.16; font-weight: 600; letter-spacing: -0.022em;
}
.ex-draw-story { margin-top: clamp(64px, 8vw, 120px); }
.ex-draw-shot { margin: 0; }
.ex-draw-frames .screen { margin: 0; }
.ex-draw-intro .t-2 { margin-top: 14px; }
.ex-draw-steps { margin-top: 28px; }
.ex-draw-steps .story-step { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.ex-draw-steps dt { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.16; font-weight: 600; letter-spacing: -0.014em; }
.ex-draw-steps dd { margin: 8px 0 0; max-width: 30ch; font-size: clamp(17px, 1.4vw, 19px); color: var(--fg-2); }
.ex-draw-btns { margin-top: 32px; }
@media (min-width: 900px) {
    /* the screenshot stays near the top while the four parts pass the middle of the screen */
    .ex-draw-story .story-media { top: 120px; }
    .ex-draw-col { padding-bottom: 14vh; }
    .ex-draw-steps .story-step { min-height: 30vh; padding: 0; border-top: 0; justify-content: center; }
    .js .ex-draw-steps .story-step { opacity: 0.35; }
    .js .ex-draw-steps .story-step.is-on { opacity: 1; }
}
@media (max-width: 899px) {
    /* phones see one picture above the steps: the finished house with its guesses */
    .ex-draw-story .story-media { display: block; margin-bottom: 8px; }
    .ex-draw-frames > * { display: none !important; }
    .ex-draw-frames > [data-frame="guesses"] { display: block !important; opacity: 1; transform: none; }
}

/* three quieter notes under one hairline */
.ex-notes {
    list-style: none; display: grid; gap: 18px 40px;
    margin-top: clamp(72px, 9vw, 120px); padding-top: 28px;
    border-top: 1px solid var(--line);
}
@media (min-width: 735px) { .ex-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-notes h3 { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -0.006em; color: var(--fg-2); }
.ex-notes p { margin-top: 4px; max-width: 36ch; font-size: 14px; line-height: 1.45; color: var(--fg-3); }

/* ── 04 Split Lab ───────────────────────────────────────────────── */
.ex-split-top { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .ex-split-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 80px); } }
.ex-split-copy .t-lead { margin-top: 18px; }
.ex-split-copy .ex-meta { margin-top: 22px; }
.ex-split-shot { display: block; }

.ex-split-how { display: grid; gap: 28px 64px; margin-top: clamp(80px, 10vw, 144px); }
@media (min-width: 900px) {
    .ex-split-how { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    /* the heading and its button stay put while the rows pass */
    .ex-split-side { position: sticky; top: 96px; align-self: start; }
}
.ex-split-cta { margin-top: 28px; }
@media (max-width: 899px) {
    .ex-split-side { display: contents; }
    .ex-split-how > .ex-rows { order: 1; }
    .ex-split-cta { order: 2; margin-top: 4px; }
}
.ex-split-cta .t-fine { margin-top: 18px; max-width: 36ch; font-size: 13px; line-height: 1.45; }
.ex-rows > div { display: grid; gap: 6px 32px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
@media (min-width: 735px) { .ex-rows > div { grid-template-columns: 13rem minmax(0, 1fr); } }
.ex-rows dt { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.ex-rows dd { margin: 0; color: var(--fg-2); }

/* ── What comes next ────────────────────────────────────────────── */
.ex-next { padding-top: 0; }
.ex-next::before {
    content: ""; display: block; height: 1px; background: var(--line);
    width: min(100% - 2 * var(--gutter), var(--w-wide)); margin: 0 auto clamp(84px, 11vw, 160px);
}
.ex-next .t-lead { max-width: 620px; margin-inline: auto; }
.ex-next .btns { margin-top: 32px; }

/* ── Phone ──────────────────────────────────────────────────────── */
@media (max-width: 734px) {
    .ex-chapters { gap: 24px 14px; }
    .ex-ch-name { font-size: 15px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .ex-in { animation: none; }
    .ex-grow-fig { clip-path: none !important; }
    .ex-plot-in, .ex-fan-item, .ex-flow-phone { transform: none !important; }
    .ex-flow-phone { opacity: 1; }
    .ex-flow-list li { opacity: 1; }
    .js .ex-draw-steps .story-step { opacity: 1; }
    .ex-flow-list li::after { transform: none; }
    .ex-flow-list::after { transform: none !important; }
    .ex-fan figcaption { opacity: 1; }
    .ex-ch-pic img { transition: none; }
}