/* ==========================================================================
   onebrief-case.css · work/case-onebrief.html · v4.0 · 2 October 2026
   JasonWalker.design

   The Onebrief study in the system of the website it presents (Website Concept 2, v4.1, Precision in Motion):
   one variable face, Archivo (wdth 62 to 125, wght 100 to 900), at its narrowest width for statements, its normal
   width for reading and semi-condensed for labels and numerals; near-black ink and off-white paper with Onebrief blue
   only where to act; type lit by one fixed light; red and blue registration only while something moves.

   Scope: only this page loads this sheet. The portfolio shell (navigation, the case film block, the closing) keeps
   the Walker system; spec-campaign.css keeps the shared mechanics (tabs, viewer, emails, formats). The shared
   onebrief-type.css is unchanged (the emails, the ads' sources and the website concepts still read it); this sheet
   re-points its tokens for this page only.

   The work shown keeps its own type: the short cuts, the social executions, the emails and the guide were made in
   the first campaign system of 28 September (Big Shoulders Black, Command and Mineral) and are labelled as such.
   ========================================================================== */

@font-face{font-family:'Archivo OB';src:url('../fonts/onebrief/Archivo-wdth-wght.woff2') format('woff2-variations'),url('../fonts/onebrief/Archivo-wdth-wght.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

/* ------------------------------------------------------------ tokens */
body.cs.cs--ob[data-brand="onebrief"]{
  --o-ink:#0E0F10; --o-ink-2:#151618; --o-ink-3:#1D1F22; --o-paper:#F2F1EC; --o-paper-2:#E6E5DF;
  --o-blue:#019EFF; --o-blue-h:#3CB4FF; --o-link-paper:#0067A9;
  --o-reg-r:rgb(255,34,40); --o-reg-b:rgb(28,74,255); --o-reg-r-l:rgb(214,18,36); --o-reg-b-l:rgb(18,56,224);
  --o-face:'Archivo OB','Archivo Variable',Archivo,'Helvetica Neue',Arial,sans-serif;
  --bg:var(--o-ink); --fg:var(--o-paper); --muted:rgba(242,241,236,.74); --rule:rgba(242,241,236,.16);
  --alt-bg:var(--o-paper); --alt-fg:var(--o-ink); --alt-muted:rgba(14,15,16,.7); --alt-rule:rgba(14,15,16,.14);
  --alt2-bg:var(--o-ink-2); --alt2-fg:var(--o-paper); --alt2-muted:rgba(242,241,236,.74); --alt2-rule:rgba(242,241,236,.14); --alt2-mark:var(--o-blue);
  --accent:var(--o-blue); --signal:var(--o-blue); --mark:var(--o-blue); --alt-mark:var(--o-link-paper); --link:var(--o-paper);
  --btn-bg:var(--o-blue); --btn-fg:var(--o-ink); --alt-btn-bg:var(--o-ink); --alt-btn-fg:var(--o-paper); --alt2-btn-bg:var(--o-blue); --alt2-btn-fg:var(--o-ink);
  --display:var(--o-face); --d-weight:700; --d-case:none; --d-track:-.012em; --d-lead:.95;
  --body:var(--o-face); --label:var(--o-face); --l-weight:600; --l-track:.09em;
  /* the shared onebrief-type.css tokens, re-pointed for this page (the player and the embedded interface read them) */
  --ob-command:var(--o-ink); --ob-command-2:var(--o-ink-2); --ob-command-3:var(--o-ink-3); --ob-mineral:var(--o-paper); --ob-signal:var(--o-blue);
  --ob-link:var(--o-link-paper); --ob-slate:rgba(14,15,16,.7);
  --ob-display:var(--o-face); --ob-body:var(--o-face); --ob-mono:var(--o-face);
  --ob-edge:var(--cs-edge);
  background:var(--o-ink);
}
body.cs--ob main{ font-family:var(--o-face); font-stretch:100%; font-optical-sizing:auto; }
body.cs--ob .cs-alt{ --link:var(--o-ink); --mark:var(--o-link-paper); }

/* ------------------------------------------------------------ type roles (the website's) */
/* heading: 72% width, 700, sentence case */
.cs--ob .cs-h2{ font-family:var(--o-face); font-stretch:72%; font-weight:700; text-transform:none; letter-spacing:-.012em; line-height:.95;
  font-size:clamp(40px,5.2vw,84px); max-width:16ch; text-wrap:balance; }
/* label: 86% width, 600, capitals, tracked, tabular numerals */
.cs--ob .cs-kick, .cs--ob .cs-label, .cs--ob .cs-tabs__tab, .cs--ob .cs-mail__n, .cs--ob .cs-ads__grid figcaption b, .cs--ob .cs-details summary,
.ob-hero__kick, .ob-btn__t, .ob-views__tag, .ob-shape h3, .ob-short__cue i, .ob-sys__h, .ob-swatches code, .ob-tone b, .ob-marks span, .ob-get span,
.ob-role dt, .ob-pim__replay, .ob-hold, .cs--ob .aie-kick, .cs--ob .aie-modes button, body.cs--ob #ob-player .ob-t, body.cs--ob #ob-player .ob-player__close{
  font-family:var(--o-face); font-stretch:86%; font-weight:600; letter-spacing:.09em; font-variant-numeric:tabular-nums lining-nums; }
.cs--ob .cs-kick{ font-size:12px; color:var(--muted); }
.cs--ob .cs-kick b{ font-weight:600; color:var(--o-blue); }
.cs--ob .cs-alt .cs-kick b{ color:var(--o-link-paper); }
.cs--ob .cs-head{ gap:clamp(12px,1.3vw,18px); }
.cs--ob .cs-note{ font-size:14.5px; }
.cs--ob .cs-btn{ font-family:var(--o-face); font-stretch:96%; font-weight:600; letter-spacing:.005em; border-radius:2px; }
.cs--ob .cs-link{ font-family:var(--o-face); font-stretch:96%; font-weight:600; }
.cs--ob main :focus-visible{ outline:2px solid var(--o-blue); outline-offset:3px; }
.cs--ob .cs-alt :focus-visible{ outline-color:var(--o-link-paper); }
/* two paper sections in a row keep a hairline between them */
.cs--ob .cs-alt + .cs-alt{ border-top:1px solid var(--alt-rule); }

/* ------------------------------------------------------------ light: the website's fixed lamps (type moves through them) */
.cs--ob .ob-lit{ color:#E6EAEE; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cs--ob .ob-lit{ color:transparent; -webkit-text-fill-color:transparent; -webkit-background-clip:text; background-clip:text;
    background-color:#E2E4E0; background-repeat:no-repeat; background-attachment:fixed;
    background-image:radial-gradient(circle at 16% 16%,#FFFFFF 0,rgba(255,255,255,.72) 26%,rgba(255,255,255,0) 58%),
                     radial-gradient(circle at 88% 86%,rgba(196,226,255,.9) 0,rgba(196,226,255,0) 46%); }
}
/* the one shadow direction sits on a wrapper, so the light stays fixed to the window */
.cs--ob .ob-shadow{ filter:drop-shadow(8px 12px 16px rgba(0,0,0,.38)); }

/* the datum: a 1px rule type sits on; it draws in when its section arrives */
.ob-datum{ position:relative; height:1px; background:rgba(242,241,236,.5); transform-origin:0 50%; }
.cs-alt .ob-datum{ background:rgba(14,15,16,.4); }

/* ------------------------------------------------------------ registration (motion only; every rest state is zero) */
.ob-reg{ position:relative; --rx:0px; --ra:0; }
.ob-reg__c{ position:absolute; left:0; top:0; width:100%; pointer-events:none; user-select:none; opacity:var(--ra); mix-blend-mode:screen; }
.ob-reg__c--r{ color:var(--o-reg-r); -webkit-text-fill-color:var(--o-reg-r); transform:translate3d(calc(var(--rx) * -1),calc(var(--rx) * -.3),0); }
.ob-reg__c--b{ color:var(--o-reg-b); -webkit-text-fill-color:var(--o-reg-b); transform:translate3d(var(--rx),calc(var(--rx) * .3),0); }
.cs-alt .ob-reg__c{ mix-blend-mode:multiply; }
.cs-alt .ob-reg__c--r{ color:var(--o-reg-r-l); -webkit-text-fill-color:var(--o-reg-r-l); }
.cs-alt .ob-reg__c--b{ color:var(--o-reg-b-l); -webkit-text-fill-color:var(--o-reg-b-l); }
.ob-reg__k{ position:relative; z-index:1; }
/* a slide: a panel arrives from below with its red and blue edges apart and settles exactly */
.ob-slide{ position:relative; --rx:0px; --ra:0; }
.ob-slide::before, .ob-slide::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3; opacity:var(--ra); mix-blend-mode:screen; box-shadow:inset 0 0 0 2px var(--o-reg-r);
  transform:translate3d(calc(var(--rx) * -1),calc(var(--rx) * -.3),0); }
.ob-slide::after{ box-shadow:inset 0 0 0 2px var(--o-reg-b); transform:translate3d(var(--rx),calc(var(--rx) * .3),0); }
.cs-alt .ob-slide::before{ mix-blend-mode:multiply; box-shadow:inset 0 0 0 2px var(--o-reg-r-l); }
.cs-alt .ob-slide::after{ mix-blend-mode:multiply; box-shadow:inset 0 0 0 2px var(--o-reg-b-l); }
/* the decode: an aria-hidden duplicate performs over the real heading while its ink is held */
.ob-dec{ position:relative; }
.ob-dec > .ob-dec__k{ opacity:0; }
.ob-dec__d{ position:absolute; left:0; top:0; width:100%; pointer-events:none; user-select:none; }

/* ------------------------------------------------------------ 1. the opening */
.ob-hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--o-ink); color:var(--o-paper);
  height:calc(100vh - var(--cs-head)); height:calc(100svh - var(--cs-head)); min-height:600px; max-height:1180px; }
.ob-hero__media{ position:absolute; inset:0; z-index:-2; background:var(--o-ink); }
.ob-hero__media img, .ob-hero__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; }
.ob-hero__media video{ opacity:0; transition:opacity .9s ease; }
.ob-hero__media video.is-on{ opacity:1; }
.ob-hero__shade{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(14,15,16,.9) 0%, rgba(14,15,16,.6) 28%, rgba(14,15,16,.16) 52%, rgba(14,15,16,0) 64%),
    linear-gradient(90deg, rgba(14,15,16,.48) 0%, rgba(14,15,16,0) 46%),
    linear-gradient(180deg, rgba(14,15,16,.42) 0%, rgba(14,15,16,0) 16%); }
.ob-hero__inner{ position:absolute; left:0; right:0; bottom:0; padding:0 0 clamp(26px,5vh,60px); }
.ob-hero__inner .cs-wrap{ display:grid; gap:0; }
/* the eyebrow sits on its own row; the title's caps start inside their own line box (Archivo at .86), so the gap
   below is real space at every size and stays so while the title decodes and its copies settle */
.ob-hero__kick{ font-size:12px; line-height:1.3; text-transform:uppercase; color:rgba(242,241,236,.84); margin:0 0 clamp(16px,1.9vw,26px) !important; }
.ob-hero__kick .cs-dot{ padding:0 .55em; color:var(--o-blue); opacity:1; }
.ob-hero__title{ font-family:var(--o-face); font-stretch:62%; font-weight:820; text-transform:uppercase; letter-spacing:-.004em; line-height:.86;
  font-size:clamp(60px, min(12.6vw, 21svh), 236px); margin:0 0 0 -.035em; font-kerning:normal; }
.ob-hero__title .ob-l{ display:block; white-space:nowrap; }
.ob-hero__title .ob-reg__k, .ob-pim__spec .ob-reg__k, .ob-hero__title .ob-reg__c, .ob-pim__spec .ob-reg__c{ display:block; }
.ob-hero .ob-datum{ margin-top:clamp(18px,2.2vw,30px); }
.ob-hero__row{ display:grid; gap:clamp(18px,2vw,28px); margin-top:clamp(20px,2.4vw,34px); align-items:end; }
@media (min-width:900px){ .ob-hero__row{ grid-template-columns:minmax(0,1fr) auto; } }
.ob-hero__deck{ font:400 clamp(17px,1.32vw,21px)/1.5 var(--o-face); max-width:40ch; color:rgba(242,241,236,.92); text-wrap:pretty; }
.ob-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.ob-btn{ display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 22px 0 18px; background:var(--o-blue); color:var(--o-ink); border-radius:2px;
  font-family:var(--o-face); font-stretch:96%; font-weight:600; font-size:16px; line-height:1; letter-spacing:.005em; text-decoration:none; border:0; cursor:pointer; transition:background .2s; }
.ob-btn:hover{ background:var(--o-blue-h); }
.ob-btn svg{ width:14px; height:14px; flex:none; fill:currentColor; }
.ob-btn__t{ font-size:12.5px; padding-left:12px; border-left:1px solid rgba(14,15,16,.35); }
.cs--ob .ob-btn:focus-visible{ outline:2px solid var(--o-paper); outline-offset:3px; }
.ob-link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--o-paper); text-decoration:none;
  font-family:var(--o-face); font-stretch:96%; font-weight:600; font-size:16px; line-height:1.2; border-bottom:2px solid var(--o-blue); padding-top:2px; }
.ob-link:hover{ border-bottom-color:var(--o-paper); }
.ob-hold{ position:absolute; top:clamp(14px,2vw,24px); right:var(--cs-edge); display:inline-flex; align-items:center; gap:9px; min-height:44px; min-width:44px; padding:0 14px;
  background:rgba(14,15,16,.58); color:var(--o-paper); border:1px solid rgba(242,241,236,.28); border-radius:2px; cursor:pointer;
  font-size:12px; line-height:1; text-transform:uppercase; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ob-hold:hover{ border-color:var(--o-paper); }
.ob-hold svg{ width:12px; height:12px; fill:currentColor; }
.ob-hold .i-play{ display:block } .ob-hold .i-pause{ display:none }
.ob-hero.is-playing .ob-hold .i-play{ display:none } .ob-hero.is-playing .ob-hold .i-pause{ display:block }
@media (max-width:760px){
  .ob-hero{ min-height:560px; }
  .ob-hero__title{ font-size:min(19vw,148px); }    /* "ONE SHARED" is 4.55 em at this width: it holds the phone's measure on one line */
  .ob-hero__actions{ display:grid; grid-template-columns:1fr; gap:10px; }
  .ob-btn{ justify-content:center; }
  .ob-link{ justify-self:start; }
  .ob-hero__shade{ background:linear-gradient(0deg, rgba(14,15,16,.94) 0%, rgba(14,15,16,.74) 36%, rgba(14,15,16,.2) 60%, rgba(14,15,16,0) 70%),
    linear-gradient(180deg, rgba(14,15,16,.45) 0%, rgba(14,15,16,0) 14%); }
}
@media (max-height:640px) and (min-width:761px){ .ob-hero__title{ font-size:clamp(56px,min(9vw,19svh),150px); } .ob-hero__row{ margin-top:16px; } }

/* ------------------------------------------------------------ 2. the idea */
.ob-idea__lead{ font:400 clamp(18px,1.45vw,23px)/1.5 var(--o-face); max-width:46ch; color:var(--fg); text-wrap:pretty; margin-top:clamp(4px,1vw,12px)!important; }
.ob-views{ margin-top:clamp(40px,5vw,80px)!important; }
.ob-views ol{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(6px,.8vw,12px); }
.ob-views li{ min-width:0; }
.ob-views picture, .ob-views img{ display:block; width:100%; height:auto; background:var(--o-ink-2); }
.ob-views .ob-views__tag{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; font-size:12px; line-height:1.2; text-transform:uppercase; color:var(--fg); }
.ob-views .ob-views__tag span:last-child{ color:var(--muted); }
@media (max-width:700px){ .ob-views .ob-views__tag span:last-child{ display:none; } .ob-views .ob-views__tag{ font-size:11px; letter-spacing:.06em; } }
.ob-views .ob-datum{ margin-top:16px; }
.ob-views figcaption{ margin-top:14px; font-size:14px; line-height:1.5; color:var(--muted); max-width:60ch; }
.ob-shape{ margin-top:clamp(48px,6vw,96px)!important; display:grid; gap:0; border-top:1px solid var(--rule); }
.ob-shape li{ display:grid; gap:10px; padding:clamp(18px,1.8vw,26px) 0; border-bottom:1px solid var(--rule); min-width:0; }
.ob-shape h3{ margin:0; font-size:12.5px; line-height:1.2; text-transform:uppercase; color:var(--fg); }
.ob-shape h3 b{ font-weight:700; color:var(--mark); margin-right:10px; }
.ob-shape p{ margin:0; font-size:clamp(16px,1.1vw,17.5px); line-height:1.55; color:var(--fg); text-wrap:pretty; max-width:46ch; }
@media (min-width:760px){ .ob-shape li{ grid-template-columns:minmax(150px,.3fr) minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:baseline; } }
@media (min-width:1180px){
  .ob-shape{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 clamp(18px,2vw,32px); border-top:0; }
  .ob-shape li{ grid-template-columns:1fr; align-content:start; border-bottom:0; border-top:1px solid var(--fg); padding-top:18px; }
}

/* ------------------------------------------------------------ 3. precision in motion (type and motion) */
.ob-pim__stage{ position:relative; display:grid; gap:0; padding-bottom:clamp(18px,2vw,28px); }
.ob-pim__spec{ font-family:var(--o-face); font-stretch:62%; font-weight:820; text-transform:uppercase; letter-spacing:-.004em; line-height:.86;
  font-size:clamp(64px, min(15.4vw, 30svh), 300px); margin:0 0 0 -.03em; }
.ob-pim__spec .ob-l{ display:block; white-space:nowrap; }
.ob-dec__d .ob-l{ display:block; white-space:nowrap; }
.ob-pim__stage .ob-datum{ margin-top:clamp(16px,1.8vw,24px); }
.ob-pim__replay{ justify-self:end; margin-top:14px; display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 14px; background:transparent; color:var(--fg);
  border:1px solid var(--rule); border-radius:2px; font-size:12px; text-transform:uppercase; cursor:pointer; }
.ob-pim__replay:hover{ border-color:var(--fg); }
.ob-pim__replay svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; }
.ob-pim__body{ display:grid; gap:clamp(32px,4vw,64px); margin-top:clamp(32px,4vw,56px); }
@media (min-width:980px){ .ob-pim__body{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; } }
.ob-pim__copy{ display:grid; gap:1em; max-width:40ch; }
.ob-pim__copy p{ font-size:clamp(17px,1.25vw,19px); line-height:1.58; color:var(--fg); text-wrap:pretty; }
.ob-pim__copy p + p{ color:var(--muted); }
.ob-roles{ display:grid; margin:0; border-top:1px solid var(--rule); }
.ob-role{ display:grid; grid-template-columns:minmax(88px,.24fr) minmax(0,1fr); gap:8px clamp(16px,2vw,28px); padding:clamp(18px,1.8vw,24px) 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.ob-role dt{ font-size:12px; text-transform:uppercase; color:var(--muted); }
.ob-role dd{ margin:0; min-width:0; }
.ob-role__d{ font-family:var(--o-face); font-stretch:62%; font-weight:820; text-transform:uppercase; letter-spacing:-.004em; line-height:.9; font-size:clamp(38px,3.6vw,56px); }
.ob-role__b{ font-size:clamp(17px,1.25vw,19px); line-height:1.5; max-width:34ch; text-wrap:pretty; }
.ob-role__l{ font-family:var(--o-face); font-stretch:86%; font-weight:600; font-size:13px; letter-spacing:.09em; text-transform:uppercase; font-variant-numeric:tabular-nums lining-nums; }
.ob-role__l b{ font-weight:600; color:var(--o-blue); }
.ob-role__m{ grid-column:2; font-size:13px; line-height:1.4; color:var(--muted); }
/* the still version of the demonstration: three states, side by side, shown only where motion is reduced */
.ob-pim__still{ display:none; margin-top:clamp(18px,2vw,28px); }
.ob-pim__still ol{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.4vw,20px); }
.ob-pim__still li{ display:grid; gap:10px; min-width:0; }
.ob-pim__still .ob-pim__w{ position:relative; font-family:var(--o-face); font-stretch:62%; font-weight:820; text-transform:uppercase; line-height:.9; font-size:clamp(34px,6vw,72px); color:var(--o-paper); padding-left:10px; }
.ob-pim__still .ob-pim__w i{ padding-left:10px; }
.ob-pim__still .ob-pim__w > span{ position:relative; z-index:1; }
.ob-pim__still .ob-pim__w i{ position:absolute; left:0; top:0; font:inherit; font-style:normal; letter-spacing:inherit; mix-blend-mode:screen; }
.ob-pim__still .ob-pim__w i:nth-child(1){ color:var(--o-reg-r); }
.ob-pim__still .ob-pim__w i:nth-child(2){ color:var(--o-reg-b); }
.ob-pim__still li:nth-child(1) .ob-pim__w i:nth-child(1){ transform:translate(-9px,-3px); opacity:.9 } .ob-pim__still li:nth-child(1) .ob-pim__w i:nth-child(2){ transform:translate(9px,3px); opacity:.9 }
.ob-pim__still li:nth-child(2) .ob-pim__w i:nth-child(1){ transform:translate(-3px,-1px); opacity:.5 } .ob-pim__still li:nth-child(2) .ob-pim__w i:nth-child(2){ transform:translate(3px,1px); opacity:.5 }
.ob-pim__still li:nth-child(3) .ob-pim__w i{ display:none; }
.ob-pim__still li > span{ font-size:12px; color:var(--muted); }
@media (prefers-reduced-motion:reduce){ .ob-pim__still{ display:block; } .ob-pim__replay{ display:none !important; } }

/* ------------------------------------------------------------ 4. the website (spec-campaign mechanics) */
.cs--ob .cs-launch a{ background:var(--o-ink); }
.cs--ob .cs-tabs__tab{ font-size:12px; text-transform:uppercase; }
.cs--ob .cs-launch__cue{ font-family:var(--o-face); font-stretch:96%; font-weight:600; border-radius:2px; }
.ob-moves{ list-style:none; margin:clamp(18px,2vw,28px) 0 0; padding:0; display:grid; gap:10px; max-width:46em; }
.ob-moves li{ padding-top:10px; border-top:1px solid var(--rule); font-size:15px; line-height:1.5; }
.ob-moves b{ font-weight:600; margin-right:.35em; }

/* ------------------------------------------------------------ 5. the product view */
.ob-pv{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px); }
.ob-pv figure{ margin:0; }
.ob-pv img{ display:block; width:100%; height:auto; outline:1px solid var(--rule); outline-offset:-1px; background:#0B1015; cursor:zoom-in; }
.ob-pv figcaption{ margin-top:10px; font-size:14px; line-height:1.4; color:var(--muted); }
.ob-pv figcaption b{ color:var(--fg); font-weight:600; margin-right:.5em; }
.ob-why{ margin-top:clamp(28px,3.4vw,52px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:clamp(18px,3vw,48px); }
.ob-why__h{ margin:0; font-family:var(--o-face); font-stretch:72%; font-weight:700; font-size:clamp(22px,2vw,30px); line-height:1.05; letter-spacing:-.008em; }
.ob-why ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ob-why li{ padding-top:12px; border-top:1px solid var(--rule); line-height:1.5; }
.ob-why li b{ font-weight:600; margin-right:.35em; }
.ob-why .cs-note{ grid-column:2; }
@media (max-width:760px){ .ob-pv{ grid-template-columns:1fr; } .ob-why{ grid-template-columns:1fr; } .ob-why .cs-note{ grid-column:auto; } }

/* ------------------------------------------------------------ 6. the short cuts */
.ob-shorts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--cs-gap); }
.ob-idea__lead + .ob-shorts, .ob-idea__lead + .cs-tabs{ margin-top:clamp(28px,3.4vw,52px); }
.ob-short{ min-width:0; display:grid; gap:12px; align-content:start; }
.ob-short__play{ position:relative; display:block; line-height:0; outline:1px solid var(--rule); outline-offset:-1px; background:#000; cursor:pointer; text-decoration:none; color:var(--o-paper); }
.ob-short__play img{ width:100%; height:auto; display:block; }
.ob-short__cue{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:2px;
  background:var(--o-blue); color:var(--o-ink); font-family:var(--o-face); font-stretch:96%; font-weight:600; font-size:14.5px; line-height:1; }
.ob-short__cue svg{ width:12px; height:12px; fill:currentColor; }
.ob-short__cue i{ font-size:12px; line-height:1; font-style:normal; padding-left:10px; border-left:1px solid rgba(14,15,16,.35); }
.ob-short__play:hover .ob-short__cue{ background:var(--o-blue-h); }
.ob-short h3{ margin:0; font-family:var(--o-face); font-stretch:72%; font-weight:700; font-size:clamp(20px,1.6vw,24px); line-height:1.15; letter-spacing:-.006em; color:var(--fg); }
.ob-short p{ margin:0; font-size:15px; line-height:1.5; color:var(--muted); max-width:40ch; }
@media (max-width:900px){ .ob-shorts{ grid-template-columns:1fr; } .ob-short{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:16px; row-gap:8px; } .ob-short__play{ grid-row:1/3; } }
@media (max-width:560px){ .ob-short{ grid-template-columns:1fr; } .ob-short__play{ grid-row:auto; } }

/* ------------------------------------------------------------ 7. emails and social (spec-campaign mechanics) */
.cs--ob .cs-mail__subj{ font-family:var(--o-face); font-stretch:96%; font-weight:600; }
.cs--ob .cs-ads__grid figcaption{ font-family:var(--o-face); }

/* ------------------------------------------------------------ 8. the system */
.ob-sys{ display:grid; gap:clamp(56px,7vw,112px); }
.ob-sys__block{ display:grid; gap:clamp(18px,2vw,28px); min-width:0; }
.ob-sys__h{ margin:0; font-size:12.5px; line-height:1.2; text-transform:uppercase; color:var(--fg); display:flex; gap:12px; align-items:baseline; }
.ob-sys__h b{ font-weight:700; color:var(--mark); }
.ob-sys__intro{ font-size:15px; line-height:1.55; color:var(--muted); max-width:62ch; text-wrap:pretty; }
.ob-swatches{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--cs-gap); }
.ob-swatches li{ display:grid; gap:10px; min-width:0; align-content:start; }
.ob-swatches i{ display:block; aspect-ratio:4/5; background:var(--c); outline:1px solid var(--rule); outline-offset:-1px; }
.ob-swatches li.is-motion i{ background:linear-gradient(90deg, var(--c) 0 50%, transparent 50%), var(--o-ink); }
.ob-swatches b{ display:block; font-family:var(--o-face); font-stretch:96%; font-weight:600; font-size:15px; line-height:1.25; color:var(--fg); }
.ob-swatches span{ display:grid; gap:3px; font-size:13.5px; line-height:1.4; color:var(--muted); }
.ob-swatches code{ font-size:12px; line-height:1.2; color:var(--fg); }
@media (max-width:1000px){ .ob-swatches{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px){ .ob-swatches{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ob-swatches i{ aspect-ratio:16/10; } }
.ob-tone{ display:grid; gap:12px; max-width:62rem; }
.ob-tone__bar{ display:flex; height:clamp(56px,6vw,96px); outline:1px solid var(--rule); outline-offset:-1px; }
.ob-tone__bar i{ display:block; min-width:2px; }
.ob-tone p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--muted); max-width:62ch; }
.ob-board{ margin:0; display:grid; gap:12px; }
.ob-board__img{ display:block; width:100%; height:auto; outline:1px solid var(--rule); outline-offset:-1px; background:#F7F9FC; }
.ob-board figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:14px; line-height:1.5; color:var(--muted); }
.ob-board figcaption a{ color:var(--link); text-decoration:none; border-bottom:1px solid currentColor; }
.ob-marks{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:1px; background:var(--rule); outline:1px solid var(--rule); }
.ob-marks li{ display:grid; place-items:center; gap:8px; aspect-ratio:1; background:var(--bg); color:var(--fg); padding:10px; min-width:0; }
.ob-ico{ display:block; width:clamp(28px,3vw,40px); aspect-ratio:1; background:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.ob-marks span{ font-size:11px; line-height:1; letter-spacing:.06em; color:var(--muted); }
@media (max-width:760px){ .ob-marks{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ob-get{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding-top:clamp(20px,2vw,28px); border-top:1px solid var(--rule); }
.ob-get a{ font-family:var(--o-face); font-stretch:96%; font-weight:600; font-size:17px; line-height:1.3; color:var(--link); text-decoration:none; border-bottom:2px solid var(--o-blue); padding-bottom:2px; }
.ob-get span{ font-size:12px; line-height:1.2; text-transform:uppercase; color:var(--muted); }

/* ------------------------------------------------------------ the interface system (R5, aidbs-embed.css) in this page's type */
.cs--ob .aie{ font-family:var(--o-face); }
.cs--ob .aie-h2{ font-family:var(--o-face); font-stretch:72%; font-weight:700; text-transform:none; letter-spacing:-.012em; line-height:.95; font-size:clamp(40px,5.2vw,84px); max-width:14ch; }
.cs--ob .aie-kick{ font-size:12px; text-transform:uppercase; }
.cs--ob .aie-modes button{ font-size:12px; text-transform:uppercase; }
.cs--ob .aie-sample{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:759px){ .cs--ob .aie-sample{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ the notes, and the film player in this page's type */
.cs--ob .cs-details summary{ font-size:13px; text-transform:uppercase; }
body.cs--ob #ob-player{ background:var(--o-ink); color:var(--o-paper); }
body.cs--ob #ob-player .ob-player__title{ font-family:var(--o-face); font-stretch:62%; font-weight:820; letter-spacing:-.004em; }

@media (prefers-reduced-motion:reduce){
  .ob-hero__media video{ transition:none; }
  .ob-player__stage::after{ transition:none; }
}