/* Oct 8 · the one-minute portfolio (minute.html). Each project is one screen: number + title, one line, one row of cards. */

/* no sticky project nav on this page: sections land flush with the top */
html:has(body.minute){scroll-padding-top:0}
.minute .mn-sec,.minute .mn-foot{scroll-margin-top:0}

/* ---------- a project: one screen ---------- */
.mn-sec{--mh:clamp(240px,calc(100svh - 330px),520px);--pad:clamp(16px,4vw,58px);box-sizing:border-box;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:52px var(--pad) 48px;border-top:1px solid var(--line)}
.mn-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 30px;margin-bottom:22px}
.mn-head h2{display:flex;align-items:baseline;gap:.5em;margin:0;font-size:clamp(28px,3.2vw,44px);line-height:1.05;font-weight:400;letter-spacing:-.01em}
.mn-num{font-size:.36em;color:var(--muted);letter-spacing:0;transform:translateY(-.9em)}
.mn-q{margin:0 0 10px;max-width:none;font-size:12px;color:var(--muted)}
.mn-line{margin:10px 0 0;max-width:72ch;font-size:clamp(14px,1.2vw,16px);line-height:1.55;color:var(--muted)}
.mn-line a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}
.mn-head .bc-nav{margin:0}
.mn-head .bc-nav[hidden]{display:none}

/* ---------- the row: cards keep their own shape at one shared height; arrows step a screenful at a time ---------- */
.mn-row{position:relative;margin:0 calc(-1 * var(--pad))}
.mn-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px var(--pad) 6px;scroll-padding-inline:var(--pad)}
.mn-track::-webkit-scrollbar{display:none}
.mc{flex:none;width:min(calc(var(--mh) * var(--ar)),88vw);margin:0;scroll-snap-align:start;min-width:0}
.mc-media{position:relative;display:block;aspect-ratio:var(--ar);overflow:hidden;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.mc-media>img,.mc-media>video,.mc-media>picture>img{display:block;width:100%;height:100%;object-fit:cover}
.mc-media>picture{display:contents}
.mc-media video{cursor:pointer;background:#0f141f}
.mc-black .mc-media,.mc-black.mc-media{background:#000}
.mc-dark .mc-media{background:#11151f}
.mc-paper .mc-media,.mc-paper.mc-media{background:#fff}
.mc-paper.mc-media>img{object-fit:contain}
.mc figcaption{margin-top:10px;font-size:13px;line-height:1.45;color:var(--ink)}
.mc figcaption b{font-weight:inherit;margin-right:6px}
.mc figcaption b::after{content:" ·";color:var(--muted)}
.mc figcaption>span{color:var(--muted)}
.mc figcaption a{margin-left:6px;color:var(--ink);text-underline-offset:3px;white-space:nowrap}
.mc .say-tap{display:none}
@media (hover:none){.mc .say-click{display:none}.mc .say-tap{display:inline}}
.mc-phone .mc-media{border-radius:28px;box-shadow:inset 0 0 0 1px var(--line)}

/* two screenshots stacked, each labelled (Before / After) */
.mc-stack .mc-media{display:grid;grid-template-rows:1fr 1fr;gap:10px;padding:12px;box-sizing:border-box}
.mc-stack .mc-media>div{position:relative;min-height:0}
.mc-stack .mc-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:6px;border:1px solid var(--line);box-sizing:border-box;background:#fff}
.mc-stack .mc-media span{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;background:var(--ink);color:var(--paper,#f4f0e6)}
.mc-anim img{position:absolute;inset:0;opacity:0;transition:opacity .25s ease-out}
.mc-anim img.on{opacity:1}

/* scaled-to-fit content (Offscreen demo) */
.mc-fit{display:block}
.mc-fit-in{position:absolute;left:0;top:0;width:max-content;transform-origin:0 0}
.mc-os .offscreen-demo{margin:0}
.mc-os .os-hint{max-width:16ch;color:#c9cfc6}

/* notebook opener inside a card */
.mc-nb .mc-media{display:flex;align-items:center;padding:clamp(10px,1.6vw,22px);box-sizing:border-box;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.mc-nb .nb-opener{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.24fr);gap:clamp(10px,1.6vw,22px);align-items:end;margin:0;width:100%;cursor:pointer}
.mc-nb .nb-opener figure{position:relative;margin:0;overflow:hidden;border-radius:10px;box-shadow:0 10px 26px #19241933}
.mc-nb .nb-opener img{display:block;width:100%;height:auto}
.mc-nb .nb-opener .nb-b{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease-in-out}
.mc-nb .nb-opener .nb-phone .nb-b{transition-delay:.25s}
.mc-nb .nb-opener:is(:hover,.on) .nb-b{opacity:1}

/* JLab Mobile: the old app, with two bad reviews floating on the blue */
.mc-rv{position:absolute;width:27%;margin:0;padding:10px 12px;border-radius:10px;background:#fffffff2;color:#26302a;box-shadow:0 8px 24px #00405022;font-size:clamp(9.5px,.8vw,11.5px);line-height:1.45}
.mc-old .mc-media>picture>img{object-position:100% 50%}
.mc-rv{width:27%}
.mc-rv-l{left:3%;top:8%}
.mc-rv-l2{left:3%;bottom:8%}
.mc-rv p{margin:4px 0 6px}
.mc-rv cite{font-style:normal;font-size:.9em}
.mc-rv cite a{color:#5b665e;text-decoration:none}
.mc-rv cite a:hover{color:#26302a}
.mc-stars{letter-spacing:1px;color:#c08a1e}
.mc-stars i{font-style:normal;opacity:.25;color:#26302a}
.mc-trylink{margin-left:6px;padding:3px 11px;border:0;border-radius:999px;background:var(--ink);font:inherit;font-size:12px;color:var(--paper,#f4f0e6);cursor:pointer}
.mc-trylink[hidden]{display:none}

/* click-through phone screens (what shipped) */
.mc-rcar{cursor:pointer}
.mc-rcar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .2s ease-out}
.mc-rcar img.on{opacity:1}
.mc-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.mc-dots i{width:6px;height:6px;border-radius:50%;background:#000;opacity:.2}
.mc-dots i.on{opacity:.7}
.mc-rcar:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}

/* "Try it": a still until clicked (or, for the Lab App on a big screen, until the row is near), then the live page scaled to the card */
.mc-try .mc-media{cursor:pointer}
.mc-play{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:inherit;font-size:12.5px;padding:8px 16px;border-radius:999px;border:0;background:var(--ink);color:var(--paper,#f4f0e6);cursor:pointer;box-shadow:0 6px 18px #0003;white-space:nowrap}
.mc-media.live{background:#0a0a0a;cursor:auto}
.live>img,.live>.mc-play,.live>.mc-dots{display:none}
.mc-media iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}

/* ---------- 01 PTC: three treatments, ?ptc=a|b|c ---------- */
.ptc-opt{display:none}
html[data-ptc=a] .ptc-a,html[data-ptc=c] .ptc-c,html[data-ptc=d] .ptc-d{display:grid}
html[data-ptc=b] .ptc-b{display:block}
html:not([data-ptc=b]) .ptc-b-only{display:none}
/* D (default): the three experiments on the left (~60%), cropped tight; ArgOS dominant on the right, live on desktop */
.mn-ptc{--dh:clamp(300px,calc(100svh - 300px),560px);--oh:clamp(380px,calc(100svh - 290px),680px)}
.ptc-d{grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:clamp(20px,3vw,48px);align-items:center}
.ptc-d-left{min-width:0;container-type:inline-size}
.ptc-d .mn-row{margin:0;--ch:min(var(--dh),calc(100cqw / 1.35))}
.ptc-d .mn-track{padding:0;scroll-padding-inline:0;gap:14px}
.ptc-d .mn-track>.mc{width:100%}
.ptc-d .mn-track .mc-media{aspect-ratio:auto;height:var(--ch)}
/* one experiment at a time, each inside the same rounded box; the Scroll Lab sits inside it with room to breathe */
.ptc-d .mc-scroll .mc-media{display:grid;place-items:center}
.ptc-d .mc-scroll video{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:10px;object-fit:contain;background:#000}
.ptc-d .mc-pair2 .bot-screen-pair{margin:0;max-height:none}
.ptc-d .bc-nav{margin-top:14px}
.ptc-d-os{justify-self:center;display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.ptc-d-os>.mc{width:calc(var(--oh) * .462)}
.ptc-d-os .mc-media{aspect-ratio:auto;height:var(--oh);border-radius:44px}
.ptc-d-os figcaption{white-space:nowrap;text-align:center}
/* ArgOS screens: a line about the selected one, then the route buttons */
.ptc-d-side{width:clamp(150px,13vw,190px)}
.os-note{margin:0 0 14px;min-height:6.2em;font-size:12.5px;line-height:1.55;color:var(--ink)}
.os-routes{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.os-routes button{font:inherit;font-size:12px;color:var(--ink);background:transparent;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out}
.os-routes button:hover{border-color:currentColor}
.os-routes button[aria-pressed=true]{background:var(--ink);color:var(--paper,#f4f0e6);border-color:var(--ink)}
/* A: the exploded phone beside ArgOS */
.ptc-a{grid-template-columns:auto auto;justify-content:center;gap:clamp(24px,6vw,110px);align-items:center}
.ptc-a-ex{margin:0;width:min(calc(var(--mh) * 1.02 * 720 / 770),calc(100vw - 2 * var(--pad) - var(--mh) * .5 - 60px))}
.ptc-a-ex svg{display:block;width:100%;height:auto;overflow:visible;color:var(--ink);--ptc-body:#1c201d}
[data-theme=dark] .ptc-a-ex svg{--ptc-body:#0b0d0c}
.ptc-a-links{margin-top:12px;font-size:12px;color:var(--muted)}
.ptc-a-links a{color:var(--ink);text-underline-offset:3px}
.ptc-a-os{width:calc(var(--mh) * 1.05 * .462)}
/* B: ArgOS stands taller than the three before it */
.ptc-b .mn-track{align-items:end}
.ptc-b .mc:not(.mc-hero){width:min(calc(var(--mh) * .82 * var(--ar)),88vw)}
/* C: ArgOS, then its three parts as small tiles */
.ptc-c{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.ptc-c>.mc{width:calc(var(--mh) * 1.05 * .462)}
.ptc-c-label{margin:0 0 14px;font-size:12px;color:var(--muted)}
.ptc-c-parts{display:grid;gap:14px;max-width:560px}
.ptc-c-part{display:grid;grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr);gap:16px;align-items:center;color:var(--ink);text-decoration:none}
.ptc-c-part .mc-media{aspect-ratio:16/10;border-radius:8px}
.ptc-c-part .mc-media img{width:100%;height:100%;object-fit:cover;object-position:top}
.ptc-c-part b{display:block;font-weight:400;font-size:15px;margin-bottom:2px}
.ptc-c-part b::after{content:" →";color:var(--muted)}
.ptc-c-part>span:last-child>span{font-size:13px;color:var(--muted)}
.ptc-c-part:hover b::after{color:var(--ink)}

/* ---------- earlier work: seven tiles and a "+" ---------- */
.mn-past .mc{--ar:1.333;width:min(calc(var(--mh) * .62 * 1.333),72vw)}
.mn-past .ew-img img{aspect-ratio:4/3}
.mn-plus .ew-img{display:block}
.mn-plus-box{display:grid;place-content:center;justify-items:center;gap:6px;aspect-ratio:4/3;border-radius:6px;border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);color:var(--ink);font-size:12.5px;transition:background .15s ease-out}
.mn-plus-box b{font-weight:300;font-size:40px;line-height:1}
.mn-plus .ew-img:hover .mn-plus-box{background:color-mix(in srgb,var(--ink) 5%,transparent)}

/* ---------- footer: the ask, the email, two small links ---------- */
.mn-foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:48px clamp(16px,4vw,58px) 56px;border-top:1px solid var(--line)}
.mn-foot .closing-invitation{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.mn-email{font-size:clamp(22px,2.4vw,32px);line-height:1.2;color:var(--ink);text-underline-offset:5px;text-decoration-thickness:1px}
.mn-links{display:flex;gap:10px;margin:2px 0 0;font-size:13px;color:var(--muted)}
.mn-links a{color:var(--ink);text-underline-offset:3px}

/* opener: Brian's invitation under the deck */
.minute .mn-opener .mn-invite{margin:14px 0 0;max-width:44ch;font-size:13px;line-height:1.7;color:var(--muted)}

/* ---------- phone ---------- */
@media (max-width:700px){
  .mn-sec{--mh:min(60svh,430px);--pad:16px;min-height:0;padding:52px 16px 44px}
  .mn-track{gap:12px}
  .mn-head{flex-direction:column;align-items:stretch;gap:12px}
  .mc figcaption{font-size:12.5px}
  /* the reviews sit under the photo, still on the blue, so they don't cover the phone */
  .mc-old .mc-media{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 8px 8px;background:linear-gradient(90deg,#57dbf7,#30d4f1 50%,#00c6e5)}
  .mc-old .mc-media>picture>img{grid-column:1/-1;height:auto;aspect-ratio:1.15;object-position:50% 60%;margin:0 -8px;width:calc(100% + 16px)}
  .mc-rv{position:static;width:auto;font-size:9.5px;padding:7px 8px}
  .ptc-a,.ptc-c{grid-template-columns:minmax(0,1fr);justify-items:center}
  .mn-ptc{--dh:min(58svh,420px);--oh:min(72svh,560px)}
  .ptc-d{grid-template-columns:minmax(0,1fr);gap:34px}
  .ptc-d .mn-row{--ch:var(--dh)}
  .ptc-d-os{justify-self:center;flex-direction:column;align-items:center}
  .ptc-d-side{width:100%;max-width:340px;text-align:center}
  .os-note{min-height:4.7em}
  .os-routes{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .ptc-a-ex{width:100%}
  .ptc-c-parts{width:100%}
  .mn-foot{padding:40px 16px 48px}
}
@media (prefers-reduced-motion:reduce){.mc-rcar img,.mc-anim img,.mc-nb .nb-opener .nb-b{transition:none}}

/* D: each experiment is a card drawn like brief.html's .bc-ptc cards (soft ground, hairline, 14px corners), a little smaller:
   the media on the left, a label, title, one line and its link on the right */
.ptc-d .dcard{--cp:clamp(14px,1.8vw,22px);display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.4fr);gap:clamp(16px,2.2vw,30px);align-items:center;height:var(--ch);padding:var(--cp);box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.ptc-d .dcard>.mc-media{height:calc(var(--ch) - 2 * var(--cp) - 2px);background:none;border-radius:0}
.ptc-d .dcard-text .eyebrow{margin:0 0 6px}
.ptc-d .dcard-text h3{margin:0 0 10px;font-size:clamp(20px,1.9vw,27px);font-weight:400;line-height:1.1}
.ptc-d .dcard-text p:not(.eyebrow){margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--muted);max-width:26ch}
.ptc-d .dcard-cta{font-size:12px;padding:8px 13px}
.ptc-d .mc-os .os-hint{color:var(--muted)}
/* D · Argos the bot: the Telegram phone (flips through three pairs) with its settings screen, a little smaller, beside it */
.ptc-d .mc-pair2 .bot-screen-pair{display:flex;flex-direction:row;align-items:center;gap:26px;width:auto}
.ptc-d .mc-pair2 .bot-flip{order:-1;flex:none;width:250px;margin:0}
.ptc-d .mc-pair2 .bot-settings-phone{flex:none;width:200px;margin:0}
.ptc-d .mc-pair2 .bot-settings-phone img{display:block;width:100%;height:auto}
.ptc-d .mc-pair2 .bot-settings-phone figcaption{font-size:11px;color:var(--muted);margin-top:8px}

/* JLab Mobile: the clickable app gets a quiet accent so it reads as the one to try */


/* The Lab App: one image per comparison; click toggles before / after */
.mc-ab .mc-media{cursor:pointer;background:#fff;border:1px solid var(--line);box-sizing:border-box}
.ab-pane{position:absolute;inset:0;transition:opacity .25s ease-out}
.ab-pane img,.ab-pane .mc-anim{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.ab-pane .mc-anim{position:relative}
.ab-after{opacity:0}
.is-after .ab-after{opacity:1}
.is-after .ab-before{opacity:0}
.ab-a,.ab-next-b,.is-after .ab-b,.is-after .ab-next-a{display:none}
.is-after .ab-a,.is-after .ab-next-b{display:inline}
.mc-ab .mc-media:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ab-pane{transition:none}}

/* ur notebook: the pilot as a button under the line */
.mn-cta{margin:14px 0 0}

/* the opener's last line sits as far above the divider as the PTC question sits below it */

/* ArgOS on Ask: the scripted-example controls under the route buttons */
.os-ask{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px}
.os-ask[hidden]{display:none}
.os-ask .button{font-size:12px;padding:7px 14px}
.os-ask .text-link{font:inherit;font-size:12px;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:700px){.os-ask{align-items:center}}

/* rows show whole cards only (minute.js marks the cut-off ones) */
.mn-track>.mc{transition:opacity .2s ease-out}
.mn-track>.mc.mc-out{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mn-track>.mc{transition:none}}
/* the Argos settings screen is a plain image here (no enlarge dialog on this page) */
.mc-pair2 .bot-settings-screen{display:block;cursor:auto}

/* each project on its own ground, the same values as the main page and brief.html (light / dark) */
.minute #notebook{background:#edf1f2}
.minute #jlab-mobile{background:#eff3e9}
.minute #jlab-desktop{background:#ededf1}
.minute #past-work{background:#f2eee6}
html[data-theme=dark] .minute #notebook{background:#1c2333}
html[data-theme=dark] .minute #jlab-mobile{background:#26292e}
html[data-theme=dark] .minute #jlab-desktop{background:#222631}
html[data-theme=dark] .minute #past-work{background:#302e25}

@media (max-width:700px){
  .ptc-d .dcard{grid-template-columns:minmax(0,1fr);height:auto;gap:14px}
  .ptc-d .dcard>.mc-media{height:min(48svh,360px)}
  .ptc-d .dcard-text p:not(.eyebrow){max-width:none;margin-bottom:12px}
}

/* ArgOS phone: clip at the art's own outer radius (48 of 390 px, scaled to the card) so the baked 12px bezel stays
   concentric with the screen, then add a 3px ring of the same bezel colour all round so it reads a little thicker, evenly */
.ptc-d-os .mc-media{border-radius:calc(var(--oh) * 48 / 844);box-shadow:0 0 0 3px #18181a,0 22px 44px #19241926}
.ptc-d .dcard .os-phone{box-shadow:0 10px 24px #2a261f22}

/* JLab Mobile: the photo only widens to the left now; the two reviews sit in that blue, clear of the fingers */
@media (min-width:701px){
  .mc-old .mc-media>picture>img{object-position:50% 50%}
  .mc-rv{width:37%;padding:8px 10px;font-size:clamp(8.5px,.7vw,10.5px)}
  .mc-rv-l{left:3.5%;top:10%}
  .mc-rv-l2{left:3.5%;bottom:10%}
}
/* The Lab App toggles: no hairline edge around the screenshots */
.mc-ab .mc-media{border:0;background:none}
/* rows may show part of the next card, but a card the row cuts off keeps its caption hidden until it's fully in view */
.mn-track>.mc.mc-out{opacity:1;pointer-events:auto}
.mn-track>.mc>figcaption,.mn-track>.mc>.ew-cap{transition:opacity .2s ease-out}
.mn-track>.mc.mc-out>figcaption,.mn-track>.mc.mc-out .ew-cap,.mn-track>.mc.mc-out .ew-note{opacity:0}
.mn-foot .closing-invitation{max-width:52ch}

/* The Lab App demo: on a phone it's a still with a note (too small to use); on a computer it goes live, edge to edge */
.mc .on-small{display:none}
.mc-wide .mc-media.live{background:transparent}
.mc-wide .mc-media iframe{background:transparent}
@media (max-width:700px){

}

/* Oct 9 · ArgOS leads: a bigger phone with its label above, screen buttons below, the screen note to its right */
.mn-ptc{--oh:clamp(400px,calc(100svh - 250px),720px)}
.ptc-d-os{display:grid;grid-template-columns:auto auto;grid-template-areas:"label ." "phone side" "under .";column-gap:clamp(18px,2vw,28px);row-gap:12px;align-items:center;padding:8px 0}
.ptc-d-os>.os-label{grid-area:label;margin:0;font-size:13px;color:var(--muted);white-space:nowrap}
.ptc-d-os>.os-label b{font-weight:inherit;color:var(--ink)}
.ptc-d-os>.mc{grid-area:phone;margin:0}
.ptc-d-os>.ptc-d-side{grid-area:side;align-self:center}
.ptc-d-os>.os-under{grid-area:under;width:calc(var(--oh) * .462)}
.os-under .os-routes{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}
.os-under .os-ask{align-items:center;margin-top:12px}
.os-note{margin:0;min-height:0}
/* the Scroll Lab's button stays on one line */
.ptc-d .dcard-cta{white-space:nowrap;font-size:11.5px;padding:7px 11px}
@media (max-width:700px){
  .ptc-d-os{grid-template-columns:auto;grid-template-areas:"label" "phone" "side" "under";justify-items:center}
  .ptc-d-os>.os-under{width:auto;max-width:340px}
}
@media (min-width:701px){.ptc-d .dcard{grid-template-columns:minmax(0,1fr) minmax(190px,.4fr)}}

/* short rows: cards snap to the middle (dots bring each one there) */
.mn-track.mn-centred{scroll-snap-type:x proximity}
.mn-track.mn-centred>.mc{scroll-snap-align:center}

#jlab-desktop .mc-wide .on-big{color:var(--ink)}

/* dark grounds follow Brian's Oct 9 section palette on the other pages (mobile-fixes.css ?v=68) */
html[data-theme=dark] .minute #jlab-mobile{background:#222631}
html[data-theme=dark] .minute #jlab-desktop{background:#302e25}
html[data-theme=dark] .minute #past-work{background:#2d2433}

/* Before/after: the state and the switch live in the caption row, not on the screenshot */
.ab-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ab-ctl{flex:none;white-space:nowrap;color:var(--muted)}
.ab-state{font-weight:inherit;color:var(--ink)}
.ab-btn{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.ab-ctl{cursor:pointer}
.ab-ctl:hover,.ab-ctl:hover .ab-btn{color:var(--ink)}
.ab-cap .say-tap{display:none}
@media (hover:none){.ab-cap .say-click{display:none}.ab-cap .say-tap{display:inline}}
@media (max-width:700px){.ab-cap{flex-direction:column;gap:4px}}

/* Focus rows: the active card sits dead centre at full strength; its neighbours hang in from the edges, faint */
.mn-track[data-focus]{gap:clamp(30px,3vw,40px);scroll-snap-type:x mandatory}
.mn-track[data-focus]>.mc{scroll-snap-align:center;opacity:.3;transition:opacity .3s ease-out}
.mn-track[data-focus]>.mc.is-on{opacity:1}
.mn-track[data-focus]>.mc:not(.is-on)>figcaption{visibility:hidden}
.mn-track[data-focus]>.mc:not(.is-on){cursor:pointer}
.mn-track[data-focus]>.mc:not(.is-on) .mc-media{pointer-events:none}
@media (max-width:700px){.mn-track[data-focus]{gap:16px}}
@media (prefers-reduced-motion:reduce){.mn-track[data-focus]>.mc{transition:none}}
.mc figcaption .ab-state::after,.mc figcaption b.ab-state::after{content:none}

/* the demo's guidance note, mirrored from inside the app */
.mc-wide figcaption .demo-note{display:block;margin-top:3px;color:var(--muted)}
.mc-wide figcaption .demo-note[hidden]{display:none}


.mc-wide .demo-note .demo-do,.mc-wide .demo-note .demo-tip{display:block}
.mc-wide .demo-note .demo-tip{color:var(--ink)}

/* nav B everywhere: two small line chevrons, no dots. The glyph stays 14px; each button is a 44px hit area */
.bc-nav.nav-chev{gap:0;margin-right:-12px}
.bc-nav.nav-chev .bc-dots{display:none}
.bc-nav.nav-chev>button,.chev-pair>button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--ink);opacity:.45;cursor:pointer;transition:opacity .15s}
.bc-nav.nav-chev>button:hover,.chev-pair>button:hover{opacity:.9}
.bc-nav.nav-chev>button:disabled,.chev-pair>button:disabled{opacity:.12;cursor:default}
.bc-nav.nav-chev>button:focus-visible,.chev-pair>button:focus-visible{outline:1.5px solid var(--ink);outline-offset:-6px;opacity:.9}
.bc-nav.nav-chev svg,.chev-pair svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.ptc-d .bc-nav.nav-chev{margin:6px 0 0 -12px}
/* the click-through phone: chevrons sit in its caption; the Argos flip: chevrons replace its dots */
.mc-rcar .mc-dots{display:none}
.mc-shipped figcaption{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px}
.mc-shipped .chev-pair{display:flex;align-items:center;flex-basis:100%;margin:-4px 0 -12px -12px}
.flip-controls.chev-pair{display:flex;justify-content:center;gap:0}
.flip-controls.chev-pair .flip-dots{display:none}
.flip-controls.chev-pair>button{border:0!important;background:none!important}
/* mouse drag on rows */
.mn-track.is-dragging{scroll-snap-type:none!important;cursor:grabbing;user-select:none}
.mn-track.is-dragging *{pointer-events:none}
.mn-track[data-focus]:focus-visible{outline:none}

/* a fling moves one card at a time on card-by-card rows */
.mn-track.mn-centred>.mc,.mn-track[data-focus]>.mc{scroll-snap-stop:always}

/* step counts: quiet mono "2 / 7" beside the chevrons */
.nav-count,.chev-count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-count{margin-right:4px}
.nav-count[hidden]{display:none}
.chev-count{order:3;margin-left:2px}

/* Oct 9 · PTC with less text: no label above ArgOS (its room stays), no chevrons on the Argos bot's flip (tap or swipe the phone) */
.ptc-d-os{grid-template-areas:"phone side" "under .";padding-top:42px}
@media (max-width:700px){.ptc-d-os{grid-template-areas:"phone" "side" "under";padding-top:8px}}
.ptc-d .mc-pair2 .flip-controls{display:none}

/* less text in PTC: no caption under the Argos settings screen, no hint beside the Offscreen phone (the card's own line says it) */
.ptc-d .mc-pair2 .bot-settings-phone figcaption{display:none}
/* the settings screen hugs its screenshot (no pale block below a shorter shot) */
/* the settings screen keeps the phone's proportions; a shorter shot sits at the top on its own page colour, no stretching */
.ptc-d .mc-pair2 .bot-settings-phone .bot-settings-screen{aspect-ratio:390/844;overflow:hidden;cursor:auto;background:#f7f3ed}
.ptc-d .mc-pair2 .bot-settings-phone img{height:auto}
/* settings on the left, the larger Telegram phone on the right */
.ptc-d .mc-pair2 .bot-flip{order:1}
/* a quiet count under the Telegram phone says it flips (tap or swipe it) */
.ptc-d .mc-pair2 .flip-count{display:block;margin-top:10px;text-align:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ptc-d .mc-pair2 .flip-phone{cursor:pointer}
.ptc-d .mc-os .os-hint{display:none}

/* ===== Oct 9 · Brian's Pixel pass ===== */
/* PTC: the experiments are numbered 1–3, ArgOS is 4; the row's chevrons sit inside the card */
.dnum{font-size:.5em;color:var(--muted);margin-right:.55em;vertical-align:.45em;font-variant-numeric:tabular-nums}
.ptc-d-os{grid-template-areas:"label ." "phone side" "under .";padding-top:8px}
.ptc-d-os>.os-label{grid-area:label;margin:0;font-size:clamp(20px,1.9vw,27px);font-weight:400;line-height:1.1;color:var(--ink)}
.ptc-d-left{position:relative}
.ptc-d .bc-nav.nav-chev{position:absolute;right:6px;bottom:6px;margin:0;z-index:3}
@media (max-width:700px){
  .ptc-d-os{grid-template-areas:"label" "phone" "side" "under";padding-top:0}
  .ptc-d-os>.os-label{justify-self:start;width:calc(var(--oh) * .462)}
  .mn-ptc{--oh:min(80svh,640px)}
  .ptc-d .mc-pair2>.mc-media{height:min(62svh,480px)}
}
/* ur notebook opener: the phone sits on the desktop shot's empty right side, about 72% on it, the rest hanging below */
/* desktop: the desk and phone shots side by side, as on / ; phones: the phone overlaps the desk shot's empty right side */
.mc-nb{--ar:1.92}
@media (max-width:700px){
  .mc-nb{--ar:1.28!important}
  .mc-nb .nb-opener{display:block;position:relative;padding-bottom:12.7%}
  .mc-nb .nb-opener .nb-phone{position:absolute;right:7%;bottom:0;width:21%;border-radius:12% / 5.5%;border:3px solid #141820;box-shadow:0 14px 30px #0b101a55}
}
/* JLab Mobile, phones: the two reviews float over the bottom edge of the photo, where the hand runs out of frame */
@media (max-width:700px){
  .mc-old .mc-media{background:none;padding:0;gap:8px;overflow:visible}
  .mc-old .mc-media>picture>img{margin:0;width:100%;border-radius:12px}
  .mc-rv{position:relative;margin-top:-64px;box-shadow:0 10px 26px #00304033}
  .mc-rv-l2{margin-top:-40px}
}
/* the clickable app: real-phone corners, and bigger on phones so it's easy to use */
.mc-shipped .mc-media{border-radius:12% / 5.6%}
@media (max-width:700px){.mn-track>.mc.mc-shipped{width:min(calc(min(74svh,620px) * .462),88vw)}.mc-shipped .mc-media{height:auto;aspect-ratio:.462}}
/* The Lab App still (before it goes live, and on phones) shows the whole window, traffic lights and all */
.mc-wide .mc-media:not(.live)>img{object-fit:contain;background:transparent}
/* the poster window (transparent corners) sits on the section ground, not a white box, so its edge reads */
#jlab-desktop .mc-wide .mc-media:not(.live){background:transparent}
@media (max-width:700px){#jlab-desktop .mc-wide{--ar:1.546}}
/* the full-size image dialog (FigJam) */
[data-zoom]{cursor:zoom-in}
.mn-zoom{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff}
.mn-zoom::backdrop{background:#000b}
.mn-zoom-pan{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.mn-zoom-pan img{display:block;width:auto;height:auto;max-width:none;min-width:100%}
.mn-zoom-x{position:fixed;top:12px;right:12px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:#26302ae6;color:#fff;font:22px/1 inherit;cursor:pointer}

/* The Lab App demo on phones: live in place, with a sideways hint and a full-screen button */
.demo-tools{display:none}
@media (pointer:coarse) and (max-width:1000px){
  .mc-wide figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .mc-wide figcaption .demo-tools{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;flex-basis:100%;font-size:12px;color:var(--muted)}
  .demo-fs{font:inherit;color:var(--ink);background:none;border:0;padding:10px 0;margin:-10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  #jlab-desktop .mc-wide .mc-play{display:none}
}
@media (orientation:landscape){.demo-turn{display:none}}
/* sideways on a phone: the demo card takes the width it can */
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #jlab-desktop .mn-track>.mc.mc-wide{width:min(88vw,calc((100svh - 70px) * 1.82))}
}
/* full screen */
#jlab-desktop .mc-wide .mc-media:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;background:#fff}

/* Home screen caption follows the before/after state */
.ab-cap-b,.is-after .ab-cap-b{display:none}
.mc-ab:not(.is-after) .ab-cap-a{display:none}
.mc-ab:not(.is-after) .ab-cap-b{display:inline}
/* the JLab app modal */
html.modal-open,html.modal-open body{overflow:hidden;overscroll-behavior:none}
.app-modal{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible}
.app-modal::backdrop{background:color-mix(in srgb,var(--paper,#f4f0e6) 82%,transparent);backdrop-filter:blur(2px)}
html[data-theme=dark] .app-modal::backdrop{background:#0d110ecc}
.app-modal-frame{position:relative;overflow:hidden;border-radius:12% / 5.6%;box-shadow:0 0 0 6px #1b1f1c,0 30px 80px #0005;background:#fff}
.app-modal-frame iframe{display:block;border:0;transform-origin:0 0}
.app-modal-x{position:fixed;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:var(--paper,#f4f0e6);font:22px/1 Duo,monospace;cursor:pointer;z-index:2}
@media (max-width:700px){
  .app-modal{width:100vw;height:100dvh;margin:0}
  .app-modal-frame{border-radius:0;box-shadow:none}
  .app-modal-x{top:10px;right:10px;background:#000a;color:#fff}
}
/* footer: Brian's story above the invitation */
.mn-foot .mn-story{margin:0 0 4px;max-width:62ch;font-size:14px;line-height:1.7;color:var(--ink)}