/* =====================================================================================================
   A case-study page (15 Oct): the part between the website's nav and footer. Alight first, from the Paper
   board "Alight · case study · restyle (home skin)"; the other four take the same classes (his call: Alight is
   the standard). Words and layout as in Paper, at 1440 wide. Narrower, the column shrinks, then the side menu
   goes (under 1200), then the grids stack (phone).
   No motion on the page (his call): the side menu's flower moves to the section you are in without animating.
   The section 05 videos play while in view (Paper: "Each plays right here"); with reduced motion they wait for
   a press. Pictures are 2x source files shown at half their size.
   ===================================================================================================== */
:root { --body: #3D3B37; --butter: #FCF5D9; --butter-edge: #F2E5B6; --calm: cubic-bezier(0.42, 0, 0.32, 1); }
/* the picture view locks the page's scroll; with a classic scrollbar (Windows) the page would shift sideways and the
   picture would grow from the wrong place. Keeping the gutter holds the page still. No effect on Mac's overlay bars. */
html { scrollbar-gutter: stable; }

/* ---------- Type: the restyle's mapping, on the home scale ---------- */
.lab { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--step--1); font-weight: 400; line-height: 16px;
  letter-spacing: 0.06em; color: var(--muted); text-wrap: balance; }   /* typed in caps: never text-transform ("iOS") */
.h1 { font-size: var(--step-4); font-weight: 500; line-height: 56px; letter-spacing: -0.03em; }
.h2 { max-width: 760px; font-size: var(--step-3); font-weight: 500; line-height: 46px; letter-spacing: -0.03em; text-wrap: pretty; }
.h3 { max-width: 760px; font-size: var(--step-2); font-weight: 500; line-height: 36px; letter-spacing: -0.03em; text-wrap: pretty; }
.lede { max-width: 760px; font-size: var(--step-1); line-height: 32px; letter-spacing: -0.005em; color: var(--muted); text-wrap: balance; }
.txt { max-width: 720px; font-size: var(--step-0); line-height: 27px; letter-spacing: -0.005em; color: var(--body); text-wrap: pretty; }
.note { max-width: 720px; font-size: var(--step-0); line-height: 26px; letter-spacing: -0.005em; color: var(--muted); text-wrap: pretty; }
.keep { white-space: nowrap; }                                /* a block's last words, kept together by case-study.js */
.even { text-wrap: balance !important; }                      /* a short block whose last line ran short (case-study.js) */
.pb-fit { white-space: nowrap !important; }                              /* WebKit: a board line kept whole, under 2px over its box (case-study.js) */
@media (min-width: 390px) and (max-width: 640px) {
  main.cs-ph * { text-wrap-style: auto !important; }          /* phone boards wrap plainly, as Paper does: Safari's "pretty" breaks lines unlike Chrome's */
}
.ln { display: block; }                                       /* a line break from Paper; on a phone each line wraps on its own */
.ln.wide { display: inline; }                                /* a Paper break that holds only while its line fits */
@container col (min-width: 640px) { .ln.wide { display: block; } }
.h1 .ln, .h2 .ln, .h3 .ln, .lede .ln { text-wrap: balance; }
/* 06's lede: Paper fills its long line before it breaks; narrower, no word left alone */
.lede.fill .ln { text-wrap: pretty; }
@container col (min-width: 1000px) { .lede.fill .ln { text-wrap: wrap; } }
.w606 { max-width: 607px; } .w757 { max-width: 757px; } .w760 { max-width: 760px; } .w770 { max-width: 770px; }
.w795 { max-width: 796px; } .w833 { max-width: 834px; } .w839 { max-width: 839px; } .w860 { max-width: 860px; }
.w720 { max-width: 720px; } .w900 { max-width: 900px; } .wfull { max-width: none; }

/* the website's nav, as on the home page; here the logo is a way home, so it points */
.nav .logo { cursor: pointer; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: 999px; background: var(--ink);
  color: var(--butter); font-size: var(--step-0); font-weight: 500; line-height: 20px; white-space: nowrap; }
.pill.sm { padding: 10px 18px; letter-spacing: -0.005em; }
.pill:focus-visible { border-radius: 999px; outline-offset: 3px; }
.go { font-size: var(--step-0); font-weight: 500; line-height: 24px; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; }
.go:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Cover: 1440 x 640, the picture's own edge colour past 1440 ---------- */
.cs-cover { background: var(--cover, linear-gradient(#ECCF8D 0%, #EDD08F 10%, #EDD190 20%, #EDD18F 30%, #EDCF8E 40%, #ECCE8B 50%,
  #EBCC87 60%, #EAC983 70%, #E8C57D 80%, #E6C177 90%, #E6C075 100%)); }   /* --cover: a page's own flat edge colour */
.cs-cover img { display: block; width: 100%; max-width: 1440px; height: auto; aspect-ratio: 2880 / 1280; margin: 0 auto; object-fit: cover; }
/* a cover widened to 2560 x 640 (his ask, 16 Oct: "the same width as the webpage", widen-cover.py): its middle is the
   board's 1440 cover, so up to 1440 nothing changes; past 1440 it fills the window at 640 tall instead of stopping
   between flat bands. Text and logos laid over it go in .cs-cover-frame, the board's 1440, centred. */
.cs-cover.wide { position: relative; container-type: inline-size; }
.cs-cover.wide > img, .cs-cover.wide > picture > img { max-width: none; aspect-ratio: auto; height: min(640px, 44.4444cqi); }
.cs-cover-frame { position: absolute; inset: 0; max-width: 1440px; margin-inline: auto; }

/* ---------- The page: side menu (260) and the column (1020), as the 1440 board ---------- */
.cs { display: flex; }
.cs-menu { flex: 0 0 260px; padding-top: 80px; }
.cs-menu-in { position: sticky; top: 80px; display: flex; flex-direction: column; padding-left: 84px;
  margin-right: -4px;                                         /* a 180 lane (Paper's rows), so "Inside the magazine" stays on one line */
  overflow-x: clip; }                                         /* the stem cut at the page edge; at 07 the flower hangs below whole */
.cs-menu-in .lab { padding-bottom: 14px; }
.cs-row { display: flex; align-items: baseline; gap: 8px; width: 180px; padding-block: 8px; color: var(--muted); }
.cs-row .n { flex-shrink: 0; width: 18px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--step--1); line-height: 20px; }
.cs-row .t { font-size: var(--step-0); font-weight: 500; line-height: 20px; }
.cs-row:hover, .cs-row[aria-current="true"] { color: var(--ink); }
.cs-row:focus-visible { outline-offset: 2px; }
/* the four o'clock reaches in from the page edge, its bud at the section you are in (his idea, 15 Oct) */
.cs-pointer { position: absolute; left: -31px; top: 19px; width: 109px; height: 64px; pointer-events: none; }
/* each page's own card flower, the same height, cut the same way (side-menu/cut-pointers.py): the hoya's ball ends
   where the four o'clock's bud does, 8 px before the number, its middle on the row's middle */
.cs-pointer.hoya { left: -16px; top: 20px; width: 93px; }
.cs-pointer.pansy { left: -81px; top: 16px; width: 158px; }          /* the face's middle on the row */
.cs-pointer.snapdragon { left: -207px; top: 19px; width: 284px; }    /* the bud tip on the stem's line; the spike runs off the edge */
.cs-pointer.strawflower { left: -53px; top: 17px; width: 130px; }    /* the bloom's middle on the row */

.cs-main { flex: 1; min-width: 0; padding: 80px 80px 120px; }
.cs-col { container: col / inline-size; display: flex; flex-direction: column; gap: 56px; max-width: 1020px;
  margin-left: max(0px, calc(50vw - 850px)); }         /* past about 1700 the column centres in the window */
.cs-col > section { scroll-margin-top: 0; }

/* ---------- 01 · Overview: hero, meta, at a glance ---------- */
.cs-overview { display: flex; flex-direction: column; gap: 56px; }
.cs-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cs-hero .lede { max-width: 839px; }
.h1 .ph { display: inline-block; }                            /* one line in Paper; narrower, it breaks between the sentences */
.cs-hero .cta { padding-top: 16px; }
.award { position: absolute; left: calc(100% - 251.09px); top: 44px; display: flex; align-items: center; gap: 12px; }
.award .ll { display: block; flex-shrink: 0; width: 34.545px; height: 76px; }
.award .lr { position: relative; flex-shrink: 0; width: 34.545px; height: 76px; overflow: clip; }
.award .lr img { position: absolute; left: 0.96px; top: 3.07px; width: 37.12px; height: 61.91px; }
.award .words { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.award .lab { color: var(--ink); white-space: nowrap; }
.award .what { font-size: var(--step-0); line-height: 20px; white-space: nowrap; }
.award .sub { font-size: var(--step--1); line-height: 16px; color: var(--muted); }

.cs-meta { display: flex; gap: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-overview > .cs-meta:last-child { border-bottom: 0; }   /* the next section's line closes it, so no second line under it (his ask, 17 Oct) */
.cs-meta > div { flex: 0 0 180px; display: flex; flex-direction: column; gap: 10px; padding-block: 24px; }
.cs-meta > div:nth-child(4) { flex-basis: 200px; }
.cs-meta > div:nth-child(5) { flex-basis: 160px; }
.cs-meta dd { font-size: var(--step-0); line-height: 24px; }

.cs-glance { display: flex; flex-direction: column; gap: 24px; }
.cs-glance .row { display: flex; align-items: baseline; gap: 40px; }
.cs-glance .row .lab { flex: 0 0 150px; }
.cs-glance .row .txt { max-width: 620px; color: var(--ink); }
.cs-glance .row:first-of-type .txt { max-width: 636px; }

/* ---------- Sections 02 to 07 ---------- */
.cs-sec { display: flex; flex-direction: column; align-items: stretch; gap: 44px; padding-top: 80px; border-top: 1px solid var(--line); }
.cs-head { display: flex; flex-direction: column; gap: 20px; }
.cs-sub { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); }
.cs-sub.first { padding-top: 8px; border-top: 0; }
.cs-sub.open { border-top: 0; }                               /* "From principles to screens": a gap, no line */
.cs-sub.walk { padding-top: 40px; }
.cs-sub > .pill { align-self: flex-start; }                   /* the button hugs its words, as in Paper */
.stack { display: flex; flex-direction: column; gap: 12px; }

.cs-box { background: var(--butter); border: 1px solid var(--butter-edge); border-radius: 8px; }
.cs-statement { display: flex; flex-direction: column; gap: 16px; padding: 40px; }

.cs-stats { container: stats / inline-size; padding: 40px; }
.cs-stats .grid { display: grid; grid-template-columns: 1fr 1fr; }
.cs-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.cs-stat:nth-child(1) { padding: 0 40px 32px 0; }
.cs-stat:nth-child(2) { padding: 0 0 32px 40px; border-left: 1px solid var(--butter-edge); }
.cs-stat:nth-child(3) { padding: 32px 40px 0 0; border-top: 1px solid var(--butter-edge); }
.cs-stat:nth-child(4) { padding: 32px 0 0 40px; border-top: 1px solid var(--butter-edge); border-left: 1px solid var(--butter-edge); }
.cs-stat .big { font-size: var(--step-4); font-weight: 500; line-height: 56px; letter-spacing: -0.03em; white-space: nowrap; }
.cs-stat .note { max-width: 430px; }

.cs-quotes { display: flex; flex-direction: column; gap: 20px; }
.cs-quote { display: flex; gap: 16px; }
.cs-quote::before { content: ''; flex: 0 0 2px; background: var(--muted); }
.cs-quote > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cs-quote blockquote { margin: 0; }
.cs-quote figcaption { font-size: var(--step--1); font-weight: 500; line-height: 16px; color: var(--muted); }

.cs-fig { position: relative; overflow: hidden; border: 1px solid var(--butter-edge); border-radius: 2px; }
.cs-fig img, .cs-fig video { display: block; width: 100%; height: auto; aspect-ratio: 1018 / 572; object-fit: cover; border-radius: 1px; }
.cs-fig.tall img, .cs-fig.tall video { aspect-ratio: 1018 / 638; }
.cs-fig img[hidden] { display: none; }
.cs-fig video { background: #FFF3D6; cursor: pointer; }   /* the videos' own honey ground, under the poster */
.cs-fig video:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }
.cs-vbtn { display: none; }                                  /* a video's play and pause button: phone only (below) */

.cs-why { display: flex; align-items: baseline; gap: 24px; padding-top: 5px; }
.cs-why.p6 { padding-top: 6px; }
.cs-why .lab { flex: 0 0 80px; }
.cs-why .note { flex: 1; min-width: 0; max-width: none; }

.cs-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; list-style: none; }
.cs-card { display: flex; flex-direction: column; gap: 20px; padding: 28px; min-width: 0; }
.cs-card .g { display: flex; flex-direction: column; gap: 6px; }
.cs-card .t { font-size: var(--step-1); font-weight: 500; line-height: 28px; letter-spacing: -0.02em; text-wrap: pretty; }
.cs-card .txt, .cs-card .note { max-width: none; }
.cs-notes { display: grid; grid-template-columns: 506fr 494fr; gap: 16px; max-width: 1016px; }
.cs-notes .cs-box { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.cs-notes .note { max-width: none; }

.cs-toggle-row { display: flex; align-items: center; gap: 14px; }
.cs-toggle { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--ground); }
.cs-toggle button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--step--1); line-height: 16px; letter-spacing: 0.06em; color: var(--muted);
  -webkit-tap-highlight-color: transparent; }
.cs-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--butter); cursor: default; }
.cs-toggle button:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cs-toggle-row .cap { font-size: var(--step--1); font-weight: 500; line-height: 16px; color: var(--muted); }
/* Before / After, soft (his ask, 16 Oct: "smooth and elegant, which is our norm"): the ink pill glides to the pressed word
   and the new picture dissolves in over the old one, on the page's own slide curve. case-study.js adds .glide and .fade;
   without it the plain swap above stays. */
.cs-toggle.glide { position: relative; }
.cs-toggle.glide::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pill-w, 0);
  transform: translateX(var(--pill-x, 0)); border-radius: 999px; background: var(--ink);
  transition: transform 600ms cubic-bezier(0.42, 0, 0.32, 1), width 600ms cubic-bezier(0.42, 0, 0.32, 1); }
.cs-toggle.glide button { position: relative; transition: color 600ms cubic-bezier(0.42, 0, 0.32, 1); }
@media (max-width: 640px) {                                    /* a phone: each 28 px button takes a 46 px tap, same look */
  .cs-ph .cs-toggle button { position: relative; }
  .cs-ph .cs-toggle button::after { content: ''; position: absolute; inset: -9px -2px; }
}
.cs-toggle.glide button[aria-pressed="true"] { background: none; }
.cs-toggle.still::before, .cs-toggle.still button { transition: none; }
.cs-fig.fade { display: grid; }
.cs-fig.fade > img[data-v] { grid-area: 1 / 1; }
.cs-fig.fade > img[data-v] + img[data-v] { opacity: 0; transition: opacity 700ms cubic-bezier(0.42, 0, 0.32, 1); }
.cs-fig.fade > img[data-v] + img[data-v].on { opacity: 1; }
/* A picture opens on the page (his calls, 16 Oct: the white veil, fit then a click to zoom; Paper "OutForm · picture
   opens on the page · A white veil"). Built by case-study.js; the picture grows out of its place on the page. */
.cs-fig.lifted { visibility: hidden; }                       /* while its picture is open over the page */
.cs-lb { position: fixed; inset: 0; z-index: 50; }
.cs-lb[hidden] { display: none; }
.cs-lb-veil { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); opacity: 0; transition: opacity 500ms cubic-bezier(0.42, 0, 0.32, 1); }
.cs-lb-bar { position: absolute; z-index: 2; top: 32px; left: 48px; right: 48px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; opacity: 0; pointer-events: none; transition: opacity 500ms cubic-bezier(0.42, 0, 0.32, 1); }
.cs-lb-bar > * { pointer-events: auto; }
.cs-lb.open .cs-lb-veil, .cs-lb.open .cs-lb-bar { opacity: 1; }
.cs-lb-tools { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cs-lb-tools .cap { font-size: var(--step--1); font-weight: 500; line-height: 16px; color: var(--muted); }
.cs-lb-tools .cap, .cs-lb-tools .lab { transition: opacity 400ms cubic-bezier(0.42, 0, 0.32, 1); }
.cs-lb.zoomed .cs-lb-tools .cap, .cs-lb.zoomed .cs-lb-tools .lab { opacity: 0; }   /* a zoomed picture runs under the bar */
.cs-lb-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--ground); color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.cs-lb-close:hover { border-color: var(--ink); }
.cs-lb-close:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cs-lb-pic { position: absolute; z-index: 1; left: 0; top: 0; display: grid; overflow: hidden; transform-origin: 0 0;
  cursor: zoom-in; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cs-lb-pic.zoomed { cursor: grab; }
.cs-lb-pic.dragging { cursor: grabbing; }
.cs-lb-pic:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.cs-lb-pic.moving { transition: transform 600ms cubic-bezier(0.42, 0, 0.32, 1); }
.cs-lb-pic > img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.cs-lb-pic > img + img { opacity: 0; transition: opacity 700ms cubic-bezier(0.42, 0, 0.32, 1); }
.cs-lb-pic > img + img.on { opacity: 1; }
@media (max-width: 640px) {
  .cs-lb-bar { top: 16px; left: 16px; right: 16px; }
  .cs-lb-tools .cap, .cs-lb-tools .lab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-toggle.glide::before, .cs-toggle.glide button, .cs-fig.fade > img[data-v] + img[data-v] { transition: none; }
  .cs-lb-veil, .cs-lb-bar, .cs-lb-pic > img + img { transition: none; }
}

.cs-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cs-table th, .cs-table td { padding: 18px 24px 18px 0; text-align: left; vertical-align: top; font-weight: 400; }
.cs-table th { padding-block: 0 12px; }
.cs-table th:first-child, .cs-table td:first-child { width: 49.41%; }   /* 480 + the 24 gap, of 1020 */
.cs-table th:last-child, .cs-table td:last-child { padding-right: 0; }
.cs-table tbody tr { border-top: 1px solid var(--line); }
.cs-table td { font-size: var(--step-0); line-height: 27px; letter-spacing: -0.005em; text-wrap: pretty; }
.cs-table td:first-child { color: var(--muted); }

.cs-close { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 64px; border-top: 1px solid var(--line); }

/* ---------- Narrower ---------- */
/* the award leaves the headline's side once the column can't hold both (32 px clear of "easy.") */
@container col (max-width: 857px) {
  .award { position: static; margin-top: 16px; }
}
@container stats (max-width: 860px) {
  .cs-stat .big { font-size: var(--step-3); line-height: 46px; }
}
@container stats (max-width: 520px) {
  .cs-stats .grid { grid-template-columns: 1fr; }
  .cs-stat:nth-child(n) { padding: 24px 0; border-left: 0; border-top: 1px solid var(--butter-edge); }
  .cs-stat:first-child { padding-top: 0; border-top: 0; }
  .cs-stat:last-child { padding-bottom: 0; }
}
@container col (max-width: 640px) {
  .cs-principles { grid-template-columns: 1fr; }
}
/* the meta row: Paper's five fixed columns at 1020; narrower, five equal ones, then three, then two */
@container col (max-width: 1019px) {
  .cs-meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
}
@container col (max-width: 760px) {
  .cs-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container col (max-width: 480px) {
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a meta with a long line (OutForm's "Information architecture"): narrower, the columns take their words' width
   and share what is left, so no line breaks before its last word */
@container col (max-width: 1019px) { .cs-meta.fit { grid-template-columns: repeat(5, auto); } }
@container col (max-width: 760px) { .cs-meta.fit { grid-template-columns: repeat(3, auto); } }
@container col (max-width: 480px) { .cs-meta.fit { grid-template-columns: repeat(2, auto); } }
@container col (max-width: 330px) { .cs-meta.fit { grid-template-columns: 1fr; } }   /* the smallest phones: one column */
/* under 1200 the side menu goes; the column takes the nav's side padding */
@media (max-width: 1199px) {
  .cs-menu { display: none; }
  .cs-main { padding: 80px 48px 120px; }
  .cs-col { margin: 0 auto; }
}
@media (max-width: 900px) {
  .cs-main { padding: 72px 32px 96px; }
}
@media (max-width: 720px) {
  .h1 { font-size: var(--step-3); line-height: 46px; }
  .h2 { font-size: var(--step-2); line-height: 36px; }
  .h3 { font-size: var(--step-1); line-height: 28px; letter-spacing: -0.02em; }
  .cs-col, .cs-overview { gap: 40px; }
  .cs-sec { gap: 32px; padding-top: 56px; }
  .cs-sub { padding-top: 28px; }
  .cs-stats, .cs-statement { padding: 24px; }
  .cs-card { padding: 24px; }
  .cs-glance .row { flex-direction: column; gap: 8px; }
  .cs-glance .row .lab { flex-basis: auto; }
  .cs-notes { grid-template-columns: 1fr; }
  .cs-why { flex-wrap: wrap; row-gap: 4px; }
  .cs-why .lab { flex-basis: 100%; }
  .cs-why .note { flex-basis: 100%; }
  .cs-toggle-row { flex-wrap: wrap; }
  .cs-table th, .cs-table td { padding-right: 16px; }
  .cs-close { padding-top: 48px; }
}
@media (max-width: 640px) {
  .cs-main { padding: 48px 20px 80px; }
  .cs-cover img { aspect-ratio: 16 / 10; }                     /* the middle phone whole, the side ones cut */
  .cs-cover.whole img { aspect-ratio: 2880 / 1280; }            /* a cover with nothing to spare at the sides: all of it */
  .cs-cover.wide:not(.whole) > img, .cs-cover.wide:not(.whole) > picture > img { height: 62.5cqi; }   /* 16:10, as above */
}

/* ---------- Phone pages (17 Oct): a page with main.cs-ph follows its Paper phone board ("Alight · phone 390") ----------
   .ph-only parts exist only on a phone, .ph-hide parts only above it. br.pb is a Paper line break: it holds from 390 to
   640, where the board's lines fit; narrower (360), the lines wrap on their own. */
@media not all and (max-width: 640px) { .ph-only { display: none !important; } }   /* "not": no gap at 640.5 (zoom) */
@media (max-width: 389.98px), not all and (max-width: 640px) { br.pb { display: none; } }
@media (max-width: 640px) {
  .cs-ph .ph-hide { display: none !important; }
  .cs-ph .ph-flow .ln { display: inline; }                    /* a heading whose Paper lines cut across its .ln parts */
  .cs-ph .cs-cover img { aspect-ratio: 1 / 1; }               /* the phone cover: three phones, middle in front */
  .cs-ph .cs-main { padding: 48px 20px 24px; }
  .cs-ph .cs-col { gap: 56px; }
  .cs-ph .cs-col > section { scroll-margin-top: 51px; }       /* under the bar; its line covers the section's own */
  .cs-ph .cs-col > #overview { scroll-margin-top: 100px; }
  .cs-ph .cs-close { margin-top: -16px; }                     /* 07 ends 40 above the line, as the board */

  /* the section bar: under the nav, and up to the top when the nav tucks away */
  .cs-bar { position: sticky; top: 64px; z-index: 43; height: 52px; background: var(--ground); border-bottom: 1px solid var(--line);
    transition: translate 320ms var(--out); }
  .nav.tuck ~ main .cs-bar { translate: 0 -64px; transition: translate 260ms cubic-bezier(0.4, 0, 1, 1); }
  .cs-bar-btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    height: 100%; padding: 0 20px 0 68px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left;
    cursor: pointer; overflow: clip; -webkit-tap-highlight-color: transparent; }
  .cs-bar-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
  .cs-bar-ptr { position: absolute; left: -25px; top: 1px; width: 89px; height: 52px; pointer-events: none; }
  .cs-bar-now { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .cs-bar .n { flex-shrink: 0; width: 18px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--step--1); line-height: 20px; }
  .cs-bar .t { font-size: var(--step-0); font-weight: 500; line-height: 20px; white-space: nowrap; }
  .cs-bar-lab { display: none; }
  .cs-bar-chev { flex-shrink: 0; transition: rotate 200ms var(--out); }
  .cs-bar.open .cs-bar-btn { padding-left: 20px; }
  .cs-bar.open .cs-bar-now, .cs-bar.open .cs-bar-btn > .cs-bar-ptr { display: none; }
  .cs-bar.open .cs-bar-lab { display: block; }
  .cs-bar.open .cs-bar-chev { rotate: 180deg; }
  .cs-bar-veil { position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 100vh; background: rgba(20, 20, 20, 0.4);
    opacity: 0; transition: opacity 200ms var(--out); }
  .cs-bar-list { position: absolute; left: 0; right: 0; top: calc(100% + 1px); display: flex; flex-direction: column;
    padding: 8px 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); overflow: clip;
    opacity: 0; transition: opacity 200ms var(--out); }
  .cs-bar-veil[hidden], .cs-bar-list[hidden] { display: none; }
  .cs-bar.open .cs-bar-veil, .cs-bar.open .cs-bar-list { opacity: 1; }
  .cs-bar-row { display: flex; align-items: center; gap: 8px; height: 48px; padding-left: 68px; color: var(--muted);
    -webkit-tap-highlight-color: transparent; }
  .cs-bar-row[aria-current="true"] { color: var(--ink); }
  .cs-bar-row:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
  .cs-bar-list .cs-bar-ptr { top: 6px; }                      /* case-study.js moves it to the open section's row */

  /* 01: the meta as rows */
  .cs-ph .cs-meta { display: flex; flex-direction: column; gap: 0; border-bottom: 0; }
  .cs-ph .cs-meta > div:nth-child(n) { flex: none; flex-direction: row; align-items: baseline; gap: 16px; padding-block: 14px;
    border-bottom: 1px solid var(--line); }
  .cs-ph .cs-meta dt { flex: 0 0 96px; }

  /* 02: the break's timeline, top to bottom */
  .ph-tl { display: flex; flex-direction: column; }
  .ph-tl .st { display: flex; gap: 12px; }
  .ph-tl .rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 16px; }
  .ph-tl .st:first-child .rail { padding-top: 6px; }
  .ph-tl .dot { flex: none; width: 9px; height: 9px; border-radius: 5px; background: #1A1A1A; }
  .ph-tl .line { flex: 1; width: 1px; background: #9A9A9A; }
  .ph-tl .stub { flex: none; width: 1px; height: 8px; background: #9A9A9A; }
  .ph-tl .mark { flex: none; width: 14px; height: 3px; background: #F4BC41; }
  .ph-tl .dash { flex: 1; width: 0; border-left: 1px dashed #9A9A9A; }
  .ph-tl .rail svg { flex: none; }
  .ph-tl .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; }
  .ph-tl .st + .st .bd { padding-bottom: 20px; }
  .ph-tl .tt { display: flex; flex-direction: column; gap: 2px; }
  .ph-tl .tt b { font-size: 15px; font-weight: 600; line-height: 20px; color: #1A1A1A; }
  .ph-tl .tt span { font-size: 14px; line-height: 20px; color: var(--muted); }
  .ph-tl .pic { width: calc(100% - 2px); aspect-ratio: 320 / 324; border: 1px solid var(--butter-edge); border-radius: 2px; overflow: clip; }
  .ph-tl .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* 03: the 11 apps, two by two */
  .ph-apps { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 10px; background: #FDF3D9;
    border: 1px solid var(--butter-edge); border-radius: 2px; }
  .ph-apps figcaption { padding-left: 2px; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: 0.08em; color: #7A766C; }
  .ph-apps .row { display: flex; align-items: flex-start; gap: 8px; }
  .ph-apps img { display: block; flex: 1; min-width: 0; height: auto; }

  /* 03: the guilt loop, Paper's px scaled with the box (348 inside its border at 390) */
  .ph-loop { position: relative; aspect-ratio: 350 / 466; background: #FDF3D9; border: 1px solid var(--butter-edge); border-radius: 2px; overflow: clip; }
  .ph-loop .in { position: absolute; inset: 0; container-type: inline-size; }
  .ph-loop .in > * { --u: calc(100cqi / 348); }
  .ph-loop svg { position: absolute; left: 0; top: 0; width: calc(350 * var(--u)); height: auto; }
  .ph-loop .scene, .ph-loop .face, .ph-loop .lb { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
  .ph-loop .scene { width: calc(140 * var(--u)); height: calc(147 * var(--u)); }
  .ph-loop .face { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .ph-loop .lb { width: calc(var(--w) * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u));
    text-align: center; color: #1A1A1A; }

  /* a swipe row ([data-swipe], Alight's eight principles): one card at a time, the next one peeking at the screen's
     edge. Cards are the column less 36 (--card); the spacer after the last lets it snap to the start too. */
  .cs-ph [data-swipe] { --card: calc(100cqi - 36px); display: flex; gap: 12px; margin: 0 -20px -16px 0; padding: 0 0 16px; list-style: none;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cs-ph [data-swipe]::-webkit-scrollbar { display: none; }
  .cs-ph [data-swipe]::after { content: ''; flex: 0 0 calc(100cqi + 8px - var(--card)); }
  .cs-ph [data-swipe] > * { flex: 0 0 var(--card); min-width: 0; scroll-snap-align: start; }
  .cs-ph [data-swipe]:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
  .cs-ph [data-swipe] > .cs-card { padding: 20px; gap: 20px; }
  .ph-swipe { display: flex; align-items: center; justify-content: space-between; height: 44px; }
  .ph-swipe .cnt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--step--1); line-height: 16px;
    letter-spacing: 0.06em; color: var(--muted); }
  .ph-swipe .dots { display: flex; align-items: center; gap: 8px; }
  .ph-swipe i { width: 6px; height: 6px; border-radius: 3px; background: #D9D5CB;
    transition: width 200ms var(--out), background-color 200ms var(--out); }
  .ph-swipe i.on { width: 20px; background: var(--ink); }

  /* 04: principles to screens, before over after */
  .ph-screens { display: flex; flex-direction: column; gap: 32px; padding: 20px 16px; background: #FDF3D9;
    border: 1px solid var(--butter-edge); border-radius: 2px; }
  .ph-screens .pair { display: flex; flex-direction: column; gap: 16px; }
  .ph-screens .tx { display: flex; flex-direction: column; gap: 4px; }
  .ph-screens .t1 { font-size: 17px; font-weight: 600; line-height: 24px; color: #1A1A1A; }
  .ph-screens .t2 { font-size: 15px; line-height: 22px; color: var(--muted); }
  .ph-screens .t3 { padding-top: 6px; font-size: 15px; line-height: 22px; color: #6F6C64; }
  .ph-screens img { display: block; width: 100%; height: auto; }
  .ph-screens .dn { display: block; align-self: center; }

  /* 05: the videos show the phone, cropped from the 2040 frame */
  .cs-ph .cs-fig.tall { aspect-ratio: 350 / 532; background: #FDF3D9; }
  .cs-ph .cs-fig.tall video { position: absolute; left: 50%; top: 50%; width: 256.28%; max-width: none; height: auto;
    aspect-ratio: 2040 / 1280; translate: -50% -50%; border-radius: 0; }
  /* a round button in the corner, clear of the phone (his pick, 17 Oct: Paper "Alight 05 · play and pause · tries", A),
     so a still frame reads as a video you can stop. It shows what a tap does: pause while it plays, play while it waits */
  .cs-ph .cs-fig.tall .cs-vbtn { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center;
    justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: var(--ink);
    color: #FDF3D9; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cs-ph .cs-vbtn::after { content: ''; position: absolute; inset: -4px; }     /* a 44 px tap, same look */
  .cs-ph .cs-vbtn svg { display: block; width: 12px; height: 12px; }
  .cs-ph .cs-vbtn.on .i-play, .cs-ph .cs-vbtn:not(.on) .i-pause { display: none; }

  /* 06: Welcome before and after, stacked; the table as rows */
  .ph-welcome { display: flex; flex-direction: column; gap: 20px; }
  .ph-welcome .g { display: flex; flex-direction: column; gap: 8px; }
  .ph-welcome .lab.now { color: var(--ink); }
  .ph-welcome .pic { aspect-ratio: 350 / 260; background: #FDF3D9; border: 1px solid var(--butter-edge); border-radius: 2px; overflow: clip; }
  .ph-welcome .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ph-welcome .cap { font-size: var(--step--1); font-weight: 500; line-height: 16px; color: var(--muted); }
  .ph-did .row { display: flex; flex-direction: column; gap: 12px; padding-block: 18px; border-top: 1px solid var(--line); }
  .ph-did .g { display: flex; flex-direction: column; gap: 4px; }
  .ph-did .did, .ph-did .chg { font-size: var(--step-0); line-height: 27px; letter-spacing: -0.005em; color: var(--muted); }
  .ph-did .chg { color: var(--ink); }

  /* a fold (OutForm's "See N more notes", his pick): the rest opens in place under part 1, the row moves below it */
  .ph-fold-body { transition: height 280ms var(--out); }
  .ph-fold-body.closing { transition-duration: 200ms; }
  .ph-fold-body.opening > * { animation: ph-fold-in 280ms var(--out) calc(var(--i, 0) * 50ms) both; }
  .ph-fold { -webkit-tap-highlight-color: transparent; }
  .ph-fold[aria-expanded="true"] .ph-fold-more, .ph-fold[aria-expanded="false"] .ph-fold-less { display: none; }
}
@keyframes ph-fold-in { from { opacity: 0; translate: 0 8px; } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .cs-bar, .nav.tuck ~ main .cs-bar, .cs-bar-chev, .cs-bar-veil, .cs-bar-list, .ph-swipe i, .ph-fold-body { transition: none; }
  .ph-fold-body.opening > * { animation: none; }
  /* the videos wait with their own controls here, so the video's box is the frame (cover, not the wider crop) and
     the controls are not cut off at the sides */
  .cs-ph .cs-fig.tall video { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; translate: none; object-fit: cover; }
}

/* ---------- The soft rise (log 29: headings, text and pictures rise in once, 0.6 s, the calm ease) ---------- */
/* Every page: About as it opens, a case study as its arrival's flower leaves. [data-r] marks what rises; the head script
   adds .rise (never with reduced motion) and case-study.js adds .up. Translate and opacity only: no height changes. */
.rise [data-r] { opacity: 0; translate: 0 16px; filter: blur(6px);
  transition: opacity 600ms var(--calm) var(--d, 0ms), translate 600ms var(--calm) var(--d, 0ms), filter 600ms var(--calm) var(--d, 0ms); }
.rise [data-r].up { opacity: 1; translate: none; filter: none; }
.rise [data-r]:focus-within { opacity: 1; translate: none; filter: none; transition: none; }   /* a tabbed-to block shows at once */