/* Rei, direction A ("Compile"): the page's own styles. Loaded after the
   site's sheets (tachyons, color, typography, extensions, styles), so the
   header, tags, tabs, next-project link and footer stay the site's.

   DM Sans (Rei's typeface) comes from Slant's copy, so the site ships one. */

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(/projects/slant/fonts/dmsans-latin.woff2) format("woff2");
}

:root {
    --rei-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ground: #fff3bf;        /* the stage: Rei's yellow, as on the persona and model screens (was #edf1f3, the lake grey) */
    --legend-off: rgba(233, 119, 0, 0.3);    /* the persona screen's orange, #e97700: upcoming */
    --legend-done: rgba(233, 119, 0, 0.6);   /* passed */
    --legend-on: #e97700;                    /* happening now */
    --ink: #212529;
    --muted: #495057;
    --line: #e9ecef;
    --lint-ink: #c2410c;
}

/* Skip link: first stop, visible only on focus. */
.skip {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    z-index: 100;
    padding: 0.5rem 0.75rem;
    background: #212529;
    color: #fff !important;
    text-decoration: none;
    translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; }

/* Header links answer with a short lift, the site's underline still thickens. */
header nav a,
.project-tab:not(.project-tab--active),
footer a {
    display: inline-block;
    transition: translate 0.35s var(--ease-out);
}
header nav a:hover,
.project-tab:not(.project-tab--active):hover { translate: 0 -2px; }

/* Next project: the title steps along, the underline thickens (site). */
.next-project .title {
    transition: translate 0.5s var(--ease-out);
}
.next-project:hover .title { translate: 0.25em 0; }

::selection { background: #fff3bf; }

/* Head: the site's, with a larger title set tight. */
.c-head { margin-top: clamp(2.5rem, 6vw, 5rem); }
.c-title {
    font-size: clamp(2.5rem, 1.2rem + 4.6vw, 6.25rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin-left: -0.04em;
    text-wrap: balance;
    max-width: 14ch;
}

/* ---------- The stage ---------- */

/* Rei's window, rebuilt from the design file (OpenPencil "04 Prompt" and
   "Dry", 1920 x 1024). On wide screens every size is that frame's pixel value
   as a share of the window's width (1cqi = 19.2px of the design), so the
   window is the design, scaled. Phones get their own sizes further down. */

.c-stage {
    position: relative;
    margin: clamp(2rem, 5vw, 4rem) -1rem 0;
    background: var(--ground);
}
@media screen and (min-width: 30em) { .c-stage { margin-left: -4rem; margin-right: -4rem; } }
.c-sticky { padding: clamp(1rem, 3vw, 3rem); }

.c-window {
    --ink-rei: #343a40;
    --out-ink: #495057;
    container-type: inline-size;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%; /* size containment: it can't take its width from content */
    max-width: 96rem;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 24px 60px -24px var(--window-shadow, rgba(120, 70, 0, 0.22));
    font-family: var(--rei-sans);
    font-weight: 500;
    color: var(--ink-rei);
}

.c-chrome { position: absolute; left: 8px; top: 8px; z-index: 4; display: flex; gap: 8px; }
.c-chrome i { width: 12px; height: 12px; border-radius: 50%; background: #ec6a5e; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.c-chrome i:nth-child(2) { background: #f5bf4f; }
.c-chrome i:nth-child(3) { background: #61c554; }

/* Left pane: the three fields. */
.c-fields {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.5rem 1.25rem 1.25rem;
    transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.c-field { position: relative; }
.c-label { margin: 0 0 0.3rem; font-size: 0.8125rem; font-weight: 600; }
.c-input {
    --lh: 1.5em;
    margin: 0;
    min-height: var(--lh);
    padding-right: 2rem;
    font-size: 1.0625rem;
    line-height: var(--lh);
    /* Rei's ruled lines under each line of input (#e9ecef). */
    background-image: linear-gradient(to bottom, transparent calc(100% - 1px), #e9ecef calc(100% - 1px));
    background-size: 100% var(--lh);
}
.c-field--task .c-input { --lh: 1.5625em; font-size: 1.1875rem; }
.c-caret { display: none; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: #4c6ef5; }
.c-field.is-active .c-caret { display: inline-block; animation: c-blink 1.05s steps(1) infinite; }
@keyframes c-blink { 50% { opacity: 0; } }

/* Persona: Rei's shuffle, and a marker while it deals. */
.c-shuffle { position: absolute; right: 0; top: 1.5rem; width: 1.25rem; height: 0.99rem; color: #495057; }
.c-field[data-field="persona"] [data-type] { transition: background-color 0.4s ease; border-radius: 3px; }
.c-field.is-dealing [data-type] { background: #fff3bf; box-shadow: 0 0 0 0.15em #fff3bf; }

.c-mark { display: none; width: 80px; height: 80px; margin-top: auto; color: #495057; }

/* Right pane: score, compiled prompt, lints. */
.c-out {
    position: relative;
    padding: 1.25rem;
    border-top: 1px solid #e9ecef;
    background: #fff;
    transition: translate 0.7s var(--ease-out);
}
.c-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; transition: max-width 0.7s var(--ease-out); }
.c-score { display: flex; align-items: center; gap: 0.5rem; margin: 0 auto 0 0; font-size: 1.125rem; letter-spacing: -0.0196em; color: #12b886; }
.c-dot { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #12b886; color: #fff; font-variant-numeric: tabular-nums; }
.c-dot b { position: relative; font-weight: 500; }
.c-dot svg { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); rotate: -90deg; }
.c-ring { fill: none; stroke: #12b886; stroke-width: 1.5; stroke-dasharray: 116.24; stroke-dashoffset: 116.24; opacity: 0; transform-origin: 50% 50%; } /* not in the design: shows only while compiling */
.c-run { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.35rem 0.85rem 0.35rem 0.55rem; border-radius: 48px; box-shadow: inset 0 0 0 1px #edf2ff; color: #4c6ef5; font-size: 1.0625rem; letter-spacing: -0.0196em; transition: background-color 0.4s ease; }
.c-run svg { width: 1.25rem; height: 1.25rem; fill: #4c6ef5; }
.c-copy { display: grid; place-items: center; width: 2.1rem; height: 2.2rem; border-radius: 32px; box-shadow: inset 0 0 0 1px #f1f3f5; }
.c-copy svg { width: 1.05rem; height: 1.05rem; color: #adb5bd; }   /* Copy.svg, 20.66 x 20.46 */

.c-compiled { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.5625; color: var(--out-ink); transition: max-width 0.7s var(--ease-out); }
.c-compiled span { transition: opacity 0.5s var(--ease-out); }

.c-lints { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.444; color: #fd7e14; }
.c-lints li { position: relative; padding: 0.5rem 0 0.5rem 1.35rem; }
.c-lints li + li { border-top: 1px solid #ffe8cc; }
.c-lints li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 0.95rem;
    height: 0.95rem;
    background: #fd7e14;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.02 19'%3E%3Cpath d='M9.51172 19.0039C9.32943 19.0039 9.17318 18.9421 9.04297 18.8184C8.91276 18.7012 8.83138 18.5449 8.79883 18.3496C8.64909 17.2689 8.48958 16.3346 8.32031 15.5469C8.15104 14.7591 7.94596 14.0918 7.70508 13.5449C7.46419 12.9915 7.1582 12.5326 6.78711 12.168C6.42253 11.7969 5.9668 11.4941 5.41992 11.2598C4.87305 11.0254 4.21224 10.8301 3.4375 10.6738C2.66276 10.5111 1.74479 10.3581 0.683594 10.2148C0.481771 10.1953 0.315755 10.1204 0.185547 9.99023C0.061849 9.85352 0 9.69076 0 9.50195C0 9.31315 0.061849 9.15365 0.185547 9.02344C0.315755 8.88672 0.481771 8.80534 0.683594 8.7793C1.95312 8.64258 3.02083 8.47982 3.88672 8.29102C4.75911 8.0957 5.47526 7.82878 6.03516 7.49023C6.60156 7.15169 7.05729 6.69922 7.40234 6.13281C7.7474 5.5599 8.02409 4.82747 8.23242 3.93555C8.44076 3.04362 8.62956 1.94661 8.79883 0.644531C8.83138 0.449219 8.91276 0.292969 9.04297 0.175781C9.17318 0.0585938 9.32943 0 9.51172 0C9.69401 0 9.85026 0.0585938 9.98047 0.175781C10.1107 0.292969 10.1921 0.449219 10.2246 0.644531C10.3939 1.94661 10.5827 3.04362 10.791 3.93555C10.9993 4.82747 11.2728 5.5599 11.6113 6.13281C11.9564 6.69922 12.4089 7.15169 12.9688 7.49023C13.5352 7.82878 14.2546 8.0957 15.127 8.29102C15.9993 8.47982 17.0703 8.64258 18.3398 8.7793C18.5352 8.80534 18.6979 8.88672 18.8281 9.02344C18.9583 9.15365 19.0234 9.31315 19.0234 9.50195C19.0234 9.69076 18.9583 9.85352 18.8281 9.99023C18.6979 10.1204 18.5352 10.1953 18.3398 10.2148C17.0703 10.3581 15.9993 10.5273 15.127 10.7227C14.2546 10.9115 13.5352 11.1751 12.9688 11.5137C12.4089 11.8522 11.9564 12.3079 11.6113 12.8809C11.2728 13.4473 10.9993 14.1764 10.791 15.0684C10.5827 15.9538 10.3939 17.0475 10.2246 18.3496C10.1921 18.5449 10.1107 18.7012 9.98047 18.8184C9.85026 18.9421 9.69401 19.0039 9.51172 19.0039Z'/%3E%3C/svg%3E") center / 79.2% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.02 19'%3E%3Cpath d='M9.51172 19.0039C9.32943 19.0039 9.17318 18.9421 9.04297 18.8184C8.91276 18.7012 8.83138 18.5449 8.79883 18.3496C8.64909 17.2689 8.48958 16.3346 8.32031 15.5469C8.15104 14.7591 7.94596 14.0918 7.70508 13.5449C7.46419 12.9915 7.1582 12.5326 6.78711 12.168C6.42253 11.7969 5.9668 11.4941 5.41992 11.2598C4.87305 11.0254 4.21224 10.8301 3.4375 10.6738C2.66276 10.5111 1.74479 10.3581 0.683594 10.2148C0.481771 10.1953 0.315755 10.1204 0.185547 9.99023C0.061849 9.85352 0 9.69076 0 9.50195C0 9.31315 0.061849 9.15365 0.185547 9.02344C0.315755 8.88672 0.481771 8.80534 0.683594 8.7793C1.95312 8.64258 3.02083 8.47982 3.88672 8.29102C4.75911 8.0957 5.47526 7.82878 6.03516 7.49023C6.60156 7.15169 7.05729 6.69922 7.40234 6.13281C7.7474 5.5599 8.02409 4.82747 8.23242 3.93555C8.44076 3.04362 8.62956 1.94661 8.79883 0.644531C8.83138 0.449219 8.91276 0.292969 9.04297 0.175781C9.17318 0.0585938 9.32943 0 9.51172 0C9.69401 0 9.85026 0.0585938 9.98047 0.175781C10.1107 0.292969 10.1921 0.449219 10.2246 0.644531C10.3939 1.94661 10.5827 3.04362 10.791 3.93555C10.9993 4.82747 11.2728 5.5599 11.6113 6.13281C11.9564 6.69922 12.4089 7.15169 12.9688 7.49023C13.5352 7.82878 14.2546 8.0957 15.127 8.29102C15.9993 8.47982 17.0703 8.64258 18.3398 8.7793C18.5352 8.80534 18.6979 8.88672 18.8281 9.02344C18.9583 9.15365 19.0234 9.31315 19.0234 9.50195C19.0234 9.69076 18.9583 9.85352 18.8281 9.99023C18.6979 10.1204 18.5352 10.1953 18.3398 10.2148C17.0703 10.3581 15.9993 10.5273 15.127 10.7227C14.2546 10.9115 13.5352 11.1751 12.9688 11.5137C12.4089 11.8522 11.9564 12.3079 11.6113 12.8809C11.2728 13.4473 10.9993 14.1764 10.791 15.0684C10.5827 15.9538 10.3939 17.0475 10.2246 18.3496C10.1921 18.5449 10.1107 18.7012 9.98047 18.8184C9.85026 18.9421 9.69401 19.0039 9.51172 19.0039Z'/%3E%3C/svg%3E") center / 79.2% no-repeat;
}

/* Dry Run: in the static page, a third pane under the output. */
.c-dry { position: relative; padding: 1.25rem; border-top: 1px solid #e6fcf5; background: #fff; }
.c-dry-title { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.333; font-weight: 500; color: #495057; }
.c-dry-close { display: none; }
.c-dry-body p { margin: 0 0 1em; font-size: 0.9375rem; line-height: 1.5; font-weight: 400; color: #343a40; }
.c-dry-body b { font-weight: 700; }

.c-legend { display: none; }

/* Wide screens: the design at 1920 = 100cqi. Every value is the frame's
   pixel value / 19.2 (e.g. 48px = 2.5cqi), measured against "04 Prompt". */
@media screen and (min-width: 60em) {
    .c-window { grid-template-columns: 40.57% minmax(0, 1fr); /* 779 of 1920; % because cqi on the window itself would read the page */ }

    /* Fields: groups at x48, 686 wide (right edge 734), 40 apart. */
    .c-fields { gap: 2.083cqi; padding: 2.5cqi 2.344cqi 2.5cqi 2.5cqi; }
    .c-label { margin: 0; font-size: 0.833cqi; line-height: 1.094cqi; }          /* 16 / 21 */
    .c-input { padding-right: 0; }                                                /* task and constraints run the full 686 */
    .c-field[data-field="persona"] .c-input { padding-right: 2.292cqi; }      /* 642 wide: room for shuffle */
    .c-field--task .c-input {                                                     /* 32 / 50, starts 8 below the label, rules at y+47 */
        margin-top: 0.417cqi; font-size: 1.667cqi; --lh: 2.604cqi;
        background-image: linear-gradient(to bottom, transparent calc(100% - 0.109em), #e9ecef calc(100% - 0.109em), #e9ecef calc(100% - 0.078em), transparent calc(100% - 0.078em));
    }
    .c-field[data-field="persona"] .c-input {                                     /* 24 / 36, 7 below the label, rules at y+35 */
        margin-top: 0.365cqi; font-size: 1.25cqi; --lh: 1.875cqi;
        background-image: linear-gradient(to bottom, transparent calc(100% - 0.0625em), #e9ecef calc(100% - 0.0625em), #e9ecef calc(100% - 0.0208em), transparent calc(100% - 0.0208em));
    }
    .c-field[data-field="constraints"] .c-input {                                 /* 24 / normal (31), 10 below the label, one rule 33 below */
        margin-top: 0.521cqi; font-size: 1.25cqi; --lh: 1.615cqi;
        padding-bottom: 0.078cqi; border-bottom: 1px solid #e9ecef; background: none;
    }
    .c-shuffle { right: 0; top: 1.875cqi; width: 1.25cqi; height: 0.99cqi; }      /* x710 y353 in the group: 24 x 19 */
    .c-mark { display: block; width: 4.167cqi; height: 4.167cqi; }               /* 80, at x48 y896 */

    /* Output pane ("Frame 42"): x779 y8, 1133 x 1008, radius 16/8/8/16, inset 40. */
    .c-out {
        margin: 0.417cqi 0.417cqi 0.417cqi 0;
        padding: 2.083cqi;
        border: 0;
        border-radius: 16px 8px 8px 16px;
        box-shadow: -1px 0 0 #e9ecef, 0 0 2.083cqi #f1f3f5;
    }
    .c-bar { max-width: 54.84cqi; height: 2.5cqi; gap: 0.833cqi; margin-bottom: 2.083cqi; }   /* 48 high, prompt at y136 */
    .c-score { gap: 0.417cqi; font-size: 1.25cqi; line-height: 1.667cqi; }        /* 24 / 32 */
    .c-dot { width: 2.5cqi; height: 2.5cqi; }
    .c-run {                                                                      /* 8 18 8 12, 28 icon, 8 gap, 24 / 32 */
        gap: 0.417cqi; padding: 0.417cqi 0.9375cqi 0.417cqi 0.625cqi;
        font-size: 1.25cqi; line-height: 1.667cqi;
    }
    .c-run svg { width: 1.458cqi; height: 1.458cqi; }
    .c-copy { width: 2.396cqi; height: 2.5cqi; }                                  /* 46 x 48 */
    .c-copy svg { width: 1.076cqi; height: 1.066cqi; }
    .c-compiled { max-width: 54.84cqi; font-size: 1.667cqi; line-height: 2.604cqi; margin-bottom: 1.25cqi; }   /* 1053 wide, 32 / 50, lints 24 below */
    .c-lints { max-width: 52.08cqi; font-size: 0.9375cqi; line-height: 1.354cqi; }  /* 1000 wide, 18 / 26 */
    .c-lints li { padding: 0 0 0 1.51cqi; }                                        /* 24 glyph + 5 gap */
    .c-lints li + li {                                                             /* 12, hairline, 12 */
        margin-top: 0.625cqi; padding-top: 0.625cqi; border-top: 0;
        background: linear-gradient(#ffe8cc, #ffe8cc) 0 -0.5px / 100% 1px no-repeat;
    }
    .c-lints li::before { left: 0; top: 0; width: 1.25cqi; height: 1.25cqi; }
    .c-lints li + li::before { top: 0.625cqi; }

    .c-dry { grid-column: 1 / -1; padding: 2.5cqi; }
    .c-dry-title { margin-bottom: 2.1875cqi; font-size: 1.875cqi; line-height: 2.5cqi; }   /* 36 / 48, body at y138 */
    .c-dry-body { columns: 2; column-gap: 3rem; }
    .c-dry-body p { margin-bottom: 1.5625cqi; font-size: 1.042cqi; line-height: 1.5625cqi; }   /* 20 / 30, blank line between */
}

/* ---------- Motion on: the stage pins, the Dry Run opens ---------- */

.rr-motion .c-stage { height: 420svh; }
.rr-motion .c-sticky { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; box-sizing: border-box; }   /* window and legend packed together, centred */
.rr-motion .c-window { height: min(calc(100svh - 5rem), 56rem); grid-template-rows: auto minmax(0, 1fr); }
.rr-motion .c-out { overflow: hidden; }
.rr-motion .c-dry {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border: 0;
    translate: 104% 0;
    transition: translate 0.7s var(--ease-out);
}
.rr-motion .c-dry-body { columns: auto; }
.c-window.is-dry .c-dry { translate: 0 0; }

/* While input is still arriving, the old output waits, dimmed. */
.c-window.is-typing .c-compiled span { opacity: 0.32; }
.c-window.is-typing .c-ring { animation: c-spin 0.9s linear infinite; stroke-dashoffset: 80; opacity: 1; }
@keyframes c-spin { to { rotate: 360deg; } }

/* The legend under the window: the intro's list, each phrase lit while its
   part happens. Text colour only, no movement: the window has enough. */
.rr-motion .c-legend {
    display: block;
    margin: 1.25rem auto 0;
    max-width: 96rem;
    font-size: 1.25rem;
    line-height: 1.4;
    text-align: center;
    color: var(--legend-off);
    transition: opacity 0.6s ease;
}
.c-legend span { transition: color 0.45s ease; }
.c-legend span.is-on { color: var(--legend-on); }
.c-legend span.is-done { color: var(--legend-done); }
.c-legend.is-quiet { opacity: 0.35; }

@media screen and (min-width: 60em) {
    /* The design's proportions, as large as the screen allows. */
    .rr-motion .c-window {
        height: auto;
        width: min(100%, calc((100svh - 7rem) * 1.875));   /* room for the legend */
        aspect-ratio: 1920 / 1024;
        grid-template-rows: minmax(0, 1fr);
    }
    /* The "Dry" frame: the fields blur back, the output moves left and
       narrows, the Dry Run takes the right side behind a hairline. */
    .rr-motion .c-dry {
        left: auto;
        width: 39.32cqi;
        padding: 2.5cqi 2.5cqi 2.5cqi 2.083cqi;
        box-shadow: -1px 0 0 #e6fcf5;
    }
    .rr-motion .c-dry-close { display: block; position: absolute; right: 2.5cqi; top: 2.5cqi; width: 2.083cqi; height: 2.083cqi; }
    .c-window.is-dry .c-fields { opacity: 0.3; filter: blur(20px); }   /* "Dry": group at 30%, background blur 40 */
    .c-window.is-dry .c-out { translate: -30.156cqi 0; }   /* score lands at x240 */
    .c-window.is-dry .c-compiled { max-width: 45.68cqi; }
    .c-window.is-dry .c-lints, .c-window.is-dry .c-bar { max-width: 45.68cqi; }
    .c-window.is-dry .c-run { background: #edf2ff; }
}

/* Phones: the window is a sheet; the fields shrink so the output still fits. */
@media screen and (max-width: 59.99em) {
    .rr-motion .c-stage { height: 360svh; }
    .rr-motion .c-sticky { padding: 0.75rem; }
    .rr-motion .c-fields { padding: 2.25rem 1rem 0.75rem; gap: 0.6rem; }
    .rr-motion .c-field--task .c-input { font-size: 1rem; }
    .rr-motion .c-input { font-size: 0.875rem; }
    .rr-motion .c-label { font-size: 0.75rem; margin-bottom: 0.15rem; }
    .rr-motion .c-shuffle { top: 1.1rem; }
    .rr-motion .c-out { padding: 1rem; }
    .rr-motion .c-compiled { font-size: 1rem; margin-bottom: 0.5rem; }
    .rr-motion .c-lints { font-size: 0.8125rem; }
    .rr-motion .c-lints li { padding: 0.35rem 0 0.35rem 1.35rem; }
    .rr-motion .c-lints li::before { top: 0.45rem; }
    .rr-motion .c-dry { padding: 2.25rem 1rem 1rem; }
    .rr-motion .c-dry-close { display: block; position: absolute; right: 1rem; top: 2.25rem; width: 1.75rem; height: 1.75rem; }
    .rr-motion .c-legend { margin-top: 0.75rem; font-size: 0.875rem; }
}

/* ---------- Personas ---------- */

/* Rei's persona screen, as in rei01 (1920 x 1080): ground #fff3bf, DM Sans
   400 in #e97700, 72px rows, text at x57, fading out toward the bottom.
   One persona is current (third row, full colour); the rest sit back a
   little. The shuffle button (option C) spins the list to a new one.
   1920 = 100cqi. */
.c-p-screen {
    container-type: inline-size;
    position: relative;
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
    border-radius: 6px;
    background: #fff3bf;
}
.c-p-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 2.8125cqi;
    font-family: var(--rei-sans);
    font-weight: 400;
    font-size: 2.667cqi;
    line-height: 3.75cqi;
    white-space: nowrap;
    color: #e97700;
    translate: 0 2.083cqi;
}
.c-p-list li { transition: opacity 0.4s ease; }
.rr-motion .c-p-list li { opacity: 0.5; }
.rr-motion .c-p-list li.is-current { opacity: 1; }
.rr-motion .c-p-list { position: absolute; inset: 2.083cqi 0 auto 0; translate: none; will-change: transform; }

/* The fades: rows leave softly at the top and toward the bottom. */
.c-p-screen::before,
.c-p-screen::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.c-p-screen::before { top: 0; height: 9%; background: linear-gradient(#fff3bf, rgba(255, 243, 191, 0)); }
.c-p-screen::after { bottom: 0; height: 40%; background: linear-gradient(rgba(255, 243, 191, 0), rgba(255, 243, 191, 0.85) 60%, #fff3bf); }

/* Shuffle: Rei's icon in an orange disc, bottom right over the faded rows
   (at rei01's size the longest personas run nearly the full width, so a
   spot level with the current row would cover them). */
.c-p-shuffle {
    position: absolute;
    right: 2.8125cqi;
    bottom: 2.8125cqi;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 4.583cqi;
    height: 4.583cqi;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e97700;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.25s ease, scale 0.25s var(--ease-out);
}
.c-p-shuffle svg { width: 1.875cqi; height: 1.875cqi; }
.c-p-shuffle:hover { background: #d9480f; scale: 1.06; }
.c-p-shuffle:active { scale: 0.94; }
.c-p-shuffle:focus-visible { outline: 2px solid #e97700; outline-offset: 4px; }
.c-p-now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
html:not(.rr-motion) .c-p-shuffle { display: none; }

/* Phones: a taller screen, rows that wrap, a thumb-sized button. */
@media screen and (max-width: 59.99em) {
    .c-p-screen { aspect-ratio: 4 / 5; }
    .c-p-list { padding: 0 21cqi 0 5cqi; font-size: 5.4cqi; line-height: 1.3; white-space: normal; }
    .c-p-list li { padding: 0.15em 0; }
    .rr-motion .c-p-list { inset: 5cqi 0 auto 0; }
    .c-p-shuffle { right: 4cqi; top: 50%; bottom: auto; width: 3rem; height: 3rem; translate: 0 -50%; }
    .c-p-shuffle svg { width: 1.25rem; height: 1.25rem; }
}

/* ---------- Screenshots ---------- */

.c-shots {
    display: grid;
    gap: clamp(3rem, 6vw, 6rem);
    margin-top: clamp(4rem, 8vw, 8rem);
}
.c-fig { margin: 0; }
.c-fig img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.c-fig figcaption {
    margin-top: 1rem;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--muted);
}
.c-pair { display: grid; gap: clamp(3rem, 6vw, 6rem); }

@media screen and (min-width: 60em) {
    .c-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
    .c-fig--wide { grid-column: 1 / span 8; }
        .c-fig--end { width: 66%; margin-left: auto; }
    .c-fig figcaption { font-size: 1.5rem; }   /* one line under each image: no measure cap */
}

/* Images arrive as on the rest of the site: a short fade with a little lift. */
.rr-motion .c-fig img, .rr-motion .c-p-screen { opacity: 0; translate: 0 24px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}