/* Oct 8 · the short portfolio (brief.html). Loaded last, so it only tightens and re-lays-out what the main page styles. */

/* ---------- rhythm: every project is two to three screens ---------- */
.brief .scene{padding-top:64px}
.brief .scene-title{margin-bottom:28px}
.brief .scene-deck{max-width:46ch}
.brief .scene-end{margin-top:40px}
.brief .brief-switch{grid-column:2;margin:0 0 22px;font-size:12.5px;color:var(--muted)}
.brief .brief-switch a{color:var(--ink);text-underline-offset:3px}
.brief .brief-hint{margin:22px 0 10px;font-size:12px;color:var(--muted)}
.brief .brief-cta{margin:14px 0 0}

/* ---------- shared carousel (.bc): one card at a time, the next one peeking ---------- */
.bc{position:relative;margin:36px 0 0}
.bc-track{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
.bc-track::-webkit-scrollbar{display:none}
.bc-card{scroll-snap-align:start;min-width:0}
.bc-nav{display:flex;align-items:center;gap:12px;margin-top:16px}
.bc-nav>button{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;width:34px;height:34px;cursor:pointer;transition:border-color .15s ease-out}
.bc-nav>button:hover{border-color:currentColor}
.bc-dots{display:flex;gap:7px}
.bc-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:currentColor;opacity:.22;cursor:pointer;transition:opacity .15s ease-out}
.bc-dots button[aria-current=true]{opacity:.85}

/* ---------- 01 PTC: three experiments as cards ---------- */
.brief .bc-ptc .bc-card{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,1fr);gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(18px,2.2vw,28px);border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.brief .bc-ptc .bc-media{min-width:0;display:flex;justify-content:center}
.brief .bc-ptc .bc-text h3{font-size:clamp(26px,2.6vw,36px);margin:6px 0 12px}
.brief .bc-ptc .bc-text p:not(.eyebrow){max-width:34ch;margin:0 0 18px}
.brief .bc-ptc .bc-text{transition:opacity .3s ease-out,transform .3s cubic-bezier(.2,.8,.3,1)}
.brief .bc-ptc .bc-card:not(.on) .bc-text{opacity:.25;transform:translateY(6px)}
.brief .bc-ptc .scroll-vid{width:100%;margin:0}
.brief .bc-ptc .scroll-vid video{max-height:480px;object-fit:contain}
/* Offscreen demo: phone + sun, scaled to the card */
.brief .bc-offscreen .offscreen-demo{margin:0;transform-origin:center}
/* Argos: the paired phones, smaller */
.brief .bc-argos .bot-screen-pair{margin:0}
.brief .bc-argos .argos-cta{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.brief .phone-intro .ptc-writing{margin-top:14px}

/* ArgOS: trimmed story */
.brief #argos-concept{padding-top:70px}
.brief #argos-concept .argos-story h4{margin-bottom:10px}

/* ---------- 02 ur notebook: opener + six clips with one-line titles ---------- */
.brief .nb2 .nb-opener{margin-bottom:10px}
.brief .brief-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;margin:0}
.brief .brief-clips figure{margin:0}
.brief .brief-clips video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#11151c;cursor:pointer}
.brief .brief-clips figcaption{margin-top:8px;font-size:12.5px;color:var(--ink)}

/* ---------- 03 JLab Mobile ---------- */
.brief .brief-jm-problem{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3vw,40px);align-items:start;margin:10px 0 0}
.brief .brief-jm-old figure{margin:0}
.brief .brief-jm-old img{display:block;width:100%;height:auto;border-radius:6px}
.brief .brief-jm-old figcaption{margin-top:8px;font-size:12px;color:var(--muted)}
.brief .brief-jm-problem .jm-copy h3{font-size:clamp(26px,2.4vw,34px);margin:6px 0 14px}
.brief .brief-jm-problem .jm-reviews{margin:0}
.brief .brief-jm-process{margin-top:56px}
.brief .brief-jm-process .r-row{margin-top:18px}
.brief .brief-jm-try{margin-top:56px}
.brief .brief-jm-try .jm-outcome{font-size:17px;margin:18px 0}

/* ---------- 04 The Lab App ---------- */
.brief .brief-jd-slice{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);gap:clamp(24px,3.5vw,52px);align-items:center}
.brief .brief-jd-copy h2{margin:6px 0 14px}
.brief .brief-jd-copy .scene-deck{margin-bottom:14px}
.brief .brief-jd-two{font-size:13.5px;line-height:1.7;max-width:40ch;margin:0 0 16px}
.brief .brief-jd-two b{font-weight:inherit;color:var(--ink);display:block}
.brief .brief-jd-copy .scope{display:block;margin:0}
.brief .brief-jd-copy .scope>div{margin-bottom:10px}
.brief .brief-jd-hero{margin:0}
.brief .brief-jd-compare{margin-top:56px}
.brief .brief-jd-pairs{margin-top:56px}
.brief .brief-jd-pairs .jd-shots-head h3{margin:6px 0 18px}
.brief .brief-jd-demo{display:block;margin-top:64px}
.brief .brief-jd-pairs .jd-shots-head{max-width:none;margin:0}
.brief .brief-demo-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 30px;margin-bottom:18px}
.brief .brief-demo-head h3{margin:6px 0 6px}
.brief .brief-demo-head .demo-tip{margin:0;font-size:12.5px}
.brief .brief-tabs{display:flex;flex-wrap:wrap;gap:8px}
.brief .brief-tabs button{font:inherit;font-size:12.5px;color:var(--ink);background:transparent;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;padding:6px 13px;cursor:pointer;transition:background .15s ease-out,border-color .15s ease-out}
.brief .brief-tabs button:hover{border-color:currentColor}
.brief .brief-tabs button[aria-selected=true]{background:var(--ink);color:var(--bg,#f4f0e6);border-color:var(--ink)}
.brief .brief-panel{display:none}
.brief .brief-panel.on{display:block}
.brief .bc-process .bc-track{grid-auto-columns:minmax(0,calc((100% - 22px) / 2))}
.brief .bc-process figure{margin:0}
.brief .bc-process img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}
.brief .bc-process figcaption{margin-top:8px;font-size:12px;color:var(--muted)}
.brief .bc-process .image-open{display:block;padding:0;border:0;background:none;width:100%}
.brief .brief-unicode{margin:30px 0 0;font-size:12.5px;color:var(--muted)}
.brief .brief-unicode a{color:var(--ink);text-underline-offset:3px}

/* ---------- 05 Earlier work: nine covers ---------- */
.brief .brief-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.brief .brief-covers figure{margin:0}
.brief .brief-covers .image-open{display:block;padding:0;border:0;background:none;width:100%;cursor:zoom-in}
.brief .brief-covers img{display:block;width:100%;height:auto;border-radius:4px;transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.brief .brief-covers .image-open:hover img{transform:translateY(-3px)}
.brief .brief-past .archive-download{margin-top:22px}

/* ---------- phone ---------- */
@media (max-width:900px){
  .brief .bc-ptc .bc-card{grid-template-columns:minmax(0,1fr);min-height:0;align-items:start}
  .bc-track{grid-auto-columns:92%;gap:12px}
  .brief .brief-clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .brief .brief-jm-problem{grid-template-columns:minmax(0,1fr)}
  .brief .brief-jm-old{max-width:260px}
  .brief .brief-jd-slice{grid-template-columns:minmax(0,1fr)}
  .brief .bc-process .bc-track{grid-auto-columns:92%}
  .brief .brief-covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){.brief .bc-ptc .bc-text{transition:none}}


/* card media share one height: scale the taller phone pieces down */
@media (max-width:900px){.brief .bc-argos .bc-media{zoom:.62}.brief .bc-offscreen .bc-media{zoom:.8}}

/* each card keeps its own height (no stretching to the tallest) */
.bc-track{align-items:start}
@media (max-width:900px){
  /* the four-question index repeats the cards below: names only */
  .brief .within-index em{display:none}
  /* JLab Mobile process: one swipeable row instead of a tall stack */
  .brief .brief-jm-process .r-row{flex-direction:row;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none}
  .brief .brief-jm-process .r-row::-webkit-scrollbar{display:none}
  .brief .brief-jm-process .r-cell{flex:0 0 70%;scroll-snap-align:start}
  .brief .brief-jm-process .r-cell.r-wide{flex-basis:88%}
  .brief .brief-jm-process .r-arrow{display:none}
}

/* ===== Oct 8 round 2 (Brian's notes on the short page) ===== */
/* PTC row: a title that says what the three are, nav on the same line; every card as tall as Offscreen (brief.js) */
.bc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 30px;margin-bottom:18px}
.bc-title{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.4;font-weight:400;max-width:52ch}
.bc-head .bc-nav{margin:0}
.bc-nav>button{display:inline-grid;place-items:center;padding:0;line-height:1;font-family:inherit;font-size:15px;width:36px;height:36px;flex:none}
.bc-dots{align-items:center}
.brief .bc-ptc .bc-card{height:var(--bc-h,auto);overflow:hidden;align-content:center}
.brief .bc-ptc .bc-track{align-items:stretch}
/* notebook: the demo-note clips keep their headroom and the note title (anchor to the top, not the middle) */
.brief .brief-clips video{background:#0f141f;object-position:50% 0}
/* JLab Mobile: the problem is one line, sized like a heading */
#jlab-mobile .jm-copy p.brief-jm-line{font-size:clamp(20px,1.8vw,25px);line-height:1.4;color:var(--ink);max-width:24ch;margin:8px 0 0}
/* process: first try and FigJam share one height; what shipped is the tallest */
@media (min-width:901px){
  .brief .brief-jm-process .r-a{--H:min(380px,27vw);justify-content:center}
  .brief .brief-jm-process .r-a>.r-cell:first-child{width:calc(var(--H) * .4621)}
  .brief .brief-jm-process .r-a>.r-wide{flex:none;width:calc(var(--H) * 1.7188)}
  .brief .brief-jm-process .r-a>.r-cell:last-child{width:calc(var(--H) * 1.24 * .4621)}
}
/* The Lab App: process strip, one comparison, then the demo as the finale */
.brief .brief-jd-process{margin-top:52px}
.brief .brief-proc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:12px;align-items:start}
.brief .brief-proc-row figure{margin:0}
.brief .brief-proc-row .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.brief .brief-proc-row img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px}
.brief .brief-proc-row figcaption{margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.brief .brief-proc-row [data-slot=jd-impl-caption]{color:var(--ink)}
.brief .brief-cmp{margin-top:56px}
.brief .brief-cmp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 30px;margin-bottom:18px}
.brief .brief-cmp-head h3{margin:6px 0 0}
.brief .brief-cmp-tabs{align-items:center}
.brief .brief-cmp-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.brief .brief-cmp-panel{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.brief .brief-cmp-panel.on{display:grid}
.brief .brief-cmp-panel figure{margin:0;min-width:0}
.brief .brief-cmp-lab{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}
.brief .brief-cmp-panel .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.brief .brief-cmp-panel img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}
.brief .brief-cmp-panel .jd-layer{display:block;position:static;opacity:1}
.brief .brief-cmp-panel figcaption{margin-top:10px;font-size:12px;line-height:1.6;color:var(--muted);max-width:52ch}
.brief .brief-cmp-panel figcaption b{display:block;font-weight:inherit;color:var(--ink)}
.brief .brief-demo-sub{margin:0;font-size:13px;color:var(--muted)}
.brief .brief-demo-tip{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
@media (max-width:900px){
  .brief .brief-proc-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brief .brief-cmp-panel{grid-template-columns:minmax(0,1fr)}
}

/* Earlier work: landscape tiles grouped by employer; only linked tiles are interactive (subtle ↗) */
.brief .brief-group{margin-top:34px}
.brief .brief-group-label{margin:0 0 12px;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.brief .brief-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
.brief .brief-tile{display:block;min-width:0;color:var(--ink);text-decoration:none}
.brief .brief-tile img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.brief a.brief-tile img{transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.brief a.brief-tile:hover img{transform:translateY(-3px)}
.brief .brief-tile-cap{display:block;margin-top:8px;font-size:12px}
.brief .brief-tile-cap i{font-style:normal;color:var(--muted);transition:color .15s ease-out}
.brief a.brief-tile:hover .brief-tile-cap i{color:var(--ink)}
.brief a.brief-tile:focus-visible{outline:1.5px solid currentColor;outline-offset:4px;border-radius:6px}
@media (max-width:900px){.brief .brief-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
@media (prefers-reduced-motion:reduce){.brief a.brief-tile img{transition:none}}

/* ---------- ?min: the one-minute tier, one strong visual and one line per project ---------- */
html[data-brief=min] .brief :is(
  .do-prose>p:first-child, .scene-title .scope, .phone-intro>p, .within-index, .ptc-writing, .bc-ptc, #argos-concept,
  .nb-opener~*:not(.scene-end), .brief-cta,
  .brief-jm-problem, .brief-jm-process, .brief-jm-try .jm-copy>:not(.jm-outcome),
  .brief-jd-two, .brief-jd-copy .scope, .brief-jd-process, .brief-cmp, .brief-jd-demo, .brief-unicode,
  .ew-group-note, .ew-jlab .ew-item:nth-child(n+7), .ew-di .ew-item:nth-child(n+4), .ew-note, .archive-download
){display:none!important}
html[data-brief=min] .brief .scene{padding-top:48px}
html[data-brief=min] .brief .brief-jm-try{margin-top:8px}

/* ===== Oct 8 round 3: calmer cards (Brian) ===== */
/* Offscreen: text and the sun on the left, the phone on the right; the screen stays inside its frame */
.brief .bc-ptc .bc-offscreen{grid-template-columns:minmax(220px,1fr) minmax(0,1.3fr)}
.brief .bc-offscreen .bc-text{order:-1}
.brief .bc-offscreen .bc-media{justify-content:flex-start}
.brief .bc-offscreen .os-demo{flex-direction:row;align-items:center;justify-content:flex-start;gap:28px;padding:0}
.brief .bc-offscreen .os-side{order:-1;margin-top:0;max-width:160px;flex:none}
.brief .bc-offscreen .os-phone-column{width:230px;flex:none}
.brief .bc-offscreen .os-phone{width:100%;height:auto;max-height:none}
/* Argos: a bit larger and centred; the settings screen gets a larger share so it stays readable */
.brief .bc-argos .bc-media{align-self:center}
.brief .bc-argos .bot-screen-pair{max-width:500px;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:18px;margin:0 auto}
@media (max-width:900px){
  .brief .bc-ptc .bc-offscreen{grid-template-columns:minmax(0,1fr)}
  .brief .bc-offscreen .os-demo{gap:16px}
  .brief .bc-offscreen .os-phone-column{width:190px}
}

/* ===== Oct 8 round 4: The Lab App top (Brian) ===== */
/* eyebrow left, scope right on one top line; title on one line; the "two people" line under the images */
.brief .brief-jd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px 40px;flex-wrap:wrap;margin-bottom:18px}
.brief .brief-jd-top .eyebrow{margin:0}
.brief .brief-jd-top .scope{display:flex;gap:28px;margin:0;text-align:left}
.brief .brief-jd-top .scope>div{margin:0;max-width:26ch}
.brief .brief-jd-slice{grid-template-columns:auto minmax(0,1fr);align-items:end}
.brief .brief-jd-copy h2{white-space:nowrap;margin:0 0 16px}
.brief .brief-jd-copy .scene-deck{max-width:30ch;margin:0}
.brief .brief-jd-hero{max-width:720px;justify-self:end}
.brief p.brief-jd-two{max-width:62ch;margin:26px 0 0;font-size:14px}
.brief p.brief-jd-two b{display:inline}
@media (max-width:900px){
  .brief .brief-jd-slice{grid-template-columns:minmax(0,1fr)}
  .brief .brief-jd-copy h2{white-space:normal}
  .brief .brief-jd-top .scope{flex-wrap:wrap;gap:12px 24px}
}

/* ===== Oct 8: a shorter About / contact ===== */
.brief .brief-about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 56px;align-items:end;padding-top:56px;padding-bottom:56px}
#about.brief-about h2.brief-about-ask-line{color:var(--ink);font-weight:400;font-size:clamp(16px,1.4vw,19px);line-height:1.45;margin:8px 0 14px;max-width:34ch}
.brief .brief-about-email{display:inline-block;font-size:clamp(26px,3vw,40px);line-height:1.2;color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.brief .brief-about-me p{margin:0;font-size:13px;line-height:1.7;max-width:46ch}
.brief .brief-about-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px!important}
.brief .brief-about-links a{color:var(--ink);text-underline-offset:3px}
@media (max-width:900px){.brief .brief-about{grid-template-columns:minmax(0,1fr);gap:28px}}

/* QA #9: every carousel stop shows whole cards (no cut-off peek) */
.bc-ptc .bc-track{grid-auto-columns:100%}
@media (max-width:900px){
  .bc-track{grid-auto-columns:100%}
  .brief .brief-jm-process .r-cell,.brief .brief-jm-process .r-cell.r-wide{flex-basis:100%}
}
@media (max-width:900px){
  .brief .brief-jm-process .r-row>.r-cell{flex:0 0 100%!important;width:100%!important;max-width:none!important;align-self:flex-start}
  .brief .brief-jm-process .r-row>.r-cell.r-phone .r-car{max-width:240px;margin:0 auto}
  .brief .brief-jm-process .r-row>.r-cell.r-phone figcaption{text-align:center}
}

/* PTC: the ArgOS divider sits clear of the card row, with the same room above as below */
.brief .bc-ptc+#argos-concept{margin-top:64px;padding-top:64px}

/* selected pills/tabs: dark text on the light ink fill in dark mode (was light-on-light) */
html[data-theme=dark] .brief .brief-tabs button[aria-selected=true]{color:#15181c}

/* design review #6: the Scroll Lab video fills its card (no dead band under it) */
@media (min-width:901px){
  .brief .bc-ptc .bc-scroll{grid-template-columns:minmax(0,1fr) minmax(220px,300px)}
  .brief .bc-ptc .scroll-vid video{max-height:none}
}
/* design review #10: process row top-aligned, both phones one height, arrows on the phones' midline */
@media (min-width:901px){
  .brief .brief-jm-process .r-a{align-items:flex-start;--PH:calc(var(--H) * 1.15)}
  .brief .brief-jm-process .r-a>.r-cell:first-child{width:calc(var(--PH) * .4621)}
  .brief .brief-jm-process .r-a>.r-cell:last-child{width:calc(var(--PH) * 1.15 * .4621)}   /* what shipped stays the hero, ~15% taller */
  .brief .brief-jm-process .r-a>.r-arrow{align-self:flex-start;margin-top:calc(var(--PH) / 2 - .6em)}
}

/* ===== Oct 9: Offscreen card (Brian) ===== */
/* the card itself never goes gray (only the phone screen does); text block inset from the card edge */
.brief #offscreen.bc-offscreen.os-gray{filter:none}
@media (min-width:901px){
  .brief .bc-ptc .bc-offscreen{grid-template-columns:minmax(240px,1fr) minmax(0,1.2fr);column-gap:clamp(32px,4vw,64px)}
  .brief .bc-offscreen .bc-text{padding-left:clamp(20px,3vw,48px)}
  .brief .bc-offscreen .bc-media{justify-content:center}
  .brief .bc-offscreen .os-phone-column{width:250px}
}
/* the sun sits on the phone's right side, level with its volume buttons */
.brief .bc-offscreen .os-demo{flex-direction:row;align-items:flex-start;gap:22px}
.brief .bc-offscreen .os-side{order:1;margin-top:calc(250px * 1280 / 576 * .2);max-width:130px}
.brief .bc-offscreen .os-sun{width:56px;height:56px}
.brief .bc-offscreen .os-sun img{width:100%;height:100%}
.brief .bc-offscreen .os-hint{font-size:11px;line-height:1.5}
@media (max-width:900px){
  .brief .bc-offscreen .os-phone-column{width:200px}
  .brief .bc-offscreen .os-side{margin-top:calc(200px * 1280 / 576 * .2)}
}

/* Oct 9: The Lab App header reads like the other sections (eyebrow, title, deck left; meta stacked right), images below */
.brief .brief-jd-head h2{white-space:nowrap}
.brief .brief-jd-head .scope{display:block}
.brief .brief-jd-hero{max-width:none;margin:8px 0 0}
.brief p.brief-jd-two{margin:22px 0 0}
.brief .brief-jd-head .scene-deck{max-width:46ch}
@media (max-width:900px){.brief .brief-jd-head h2{white-space:normal}}

/* ===== Oct 9 round 2 (Brian): calmer Offscreen and Argos compositions ===== */
@media (min-width:901px){
  /* Offscreen: phone a little further left and vertically centred; the quote hangs under it on one quiet line */
  .brief .bc-ptc .bc-offscreen{padding-block:60px}
  .brief .bc-offscreen .bc-media{justify-content:flex-start;align-self:center;padding-left:clamp(0px,2vw,32px)}
  .brief .bc-offscreen .os-demo{align-items:center}
  .brief .bc-offscreen .os-phone-column{position:relative}
  .brief .bc-offscreen .os-phone-column .human-quote{position:absolute;top:100%;left:-40px;right:-40px;margin:12px 0 0;font-size:12px;white-space:nowrap;text-align:center}
  /* the sun and its hint sit beside the phone at the volume buttons, as one small unit */
  .brief .bc-offscreen .os-side{align-self:flex-start;margin-top:calc(250px * 1280 / 576 * .2);flex-direction:row;align-items:center;gap:12px;max-width:190px}
  .brief .bc-offscreen .os-sun{width:48px;height:48px;flex:none}
  .brief .bc-offscreen .os-hint{margin:0;font-size:11px;line-height:1.45}
  /* Argos: main phone centred; the settings screen shares its midline (captions and dots hang below) */
  .brief .bc-argos .bot-screen-pair{align-items:center}
  .brief .bc-argos .bot-flip,.brief .bc-argos .bot-settings-phone{position:relative;align-self:center}
  .brief .bc-argos .flip-controls{position:absolute;top:100%;left:0;right:0;margin-top:10px}
  .brief .bc-argos .bot-settings-phone figcaption{position:absolute;top:100%;left:0;right:0;margin-top:8px}
  .brief .bc-ptc .bc-argos{padding-block:60px}
}
@media (min-width:901px){
  .brief .bc-ptc .bc-offscreen{grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);column-gap:24px}
  .brief .bc-offscreen .bc-media{padding-left:0}
}
/* nav B: phone-width cards use fixed zooms; keep the chevrons' 44px hit area */
@media (max-width:900px){.brief .bc-argos .bc-media{--nvb-z:.62}.brief .bc-offscreen .bc-media{--nvb-z:.8}}

/* Oct 9: ArgOS on / — one line above the route buttons that changes with the screen (Lock screen = the concept line).
   One step under a title: regular weight, ink, a fixed height so the buttons don't move as the text changes. */
.brief #argos-concept .brief-os-note{margin:0 0 18px;min-height:calc(4 * 1.45em);max-width:30ch;font-size:clamp(17px,1.35vw,19px);line-height:1.45;font-weight:400;color:var(--ink);letter-spacing:-.005em}
.brief #argos-concept .brief-os-note>span{display:block;animation:osNoteIn .14s ease-out}
.brief #argos-concept .brief-os-note>span[hidden]{display:none}
@keyframes osNoteIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.brief #argos-concept .brief-os-note>span{animation:none}}
.brief #argos-concept .argos-story .text-link{display:inline-block;margin-top:22px}
@media (max-width:900px){.brief #argos-concept .brief-os-note{max-width:none;min-height:calc(4 * 1.45em)}}