/* case studies: a narrative column with figures that breathe wider */
body { background-image: none; background: #fbfaf8; }
.case { max-width: 680px; margin: 0 auto; padding: 96px var(--gutter) 140px; }
.crumb { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 56px; }
.crumb a { text-decoration: none; transition: color .2s; } .crumb a:hover { color: var(--ink); }
.crumb svg { width: 12px; height: 12px; } .crumb b { color: var(--ink); font-weight: 400; }

.case-head h1 { font: 500 clamp(28px, 4vw, 38px)/1.15 var(--sans); letter-spacing: -.025em; white-space: normal; max-width: 15em; }
.meta { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 28px; }
.meta dt { font-size: 13px; color: var(--muted); }
.meta dd { font-size: 14px; margin-top: 4px; line-height: 1.5; }

.case section { margin-top: 88px; }
.case h2 { font: 500 22px/1.3 var(--sans); letter-spacing: -.015em; padding: 0; border: 0; margin: 0; }
.case h2.cont { margin-top: 56px; }
.case p { font: 400 16px/1.7 var(--sans); color: #43423e; margin-top: 14px; }
.case h3 { font: 500 16px/1.4 var(--sans); }

/* figures: soft tinted frame, image rides inside */
.fig { margin: 32px 0 0; background: #f0eee9; border-radius: 16px; padding: clamp(14px, 3vw, 28px); }
.fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.fig figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }
.fig.dark { background: #0d0f14; padding: 0; overflow: hidden; }
.fig.dark img { border-radius: 0; }
.fig.dark figcaption { color: #8b8f99; margin: 0; padding: 0 16px 16px; }
.fig.bleed, .compare { margin-left: calc(50% - min(48vw, 480px)); margin-right: calc(50% - min(48vw, 480px)); }
.fig.narrow img { max-width: 520px; margin: 0 auto; }
.fig.pair { display: grid; grid-template-columns: 1fr 1.8fr; gap: 14px; align-items: center; }
.fig.pair figcaption { grid-column: 1 / -1; }

.chips { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.chips span { font: 500 13px/1 var(--sans); padding: 9px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.chips i { font-style: normal; color: var(--faint); }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.cards article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 20px; }
.cards b { font: 500 17px/1.2 var(--sans); letter-spacing: -.01em; }
.cards p { font-size: 14px; line-height: 1.55; margin-top: 8px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 28px; }
.stats div { background: #fff; padding: 22px 20px; }
.stats b { display: block; font: 500 34px/1 var(--sans); letter-spacing: -.03em; }
.stats span { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
blockquote { margin-top: 20px; padding-left: 16px; border-left: 2px solid #d9d5cc; font: 400 16px/1.6 var(--sans); color: var(--ink); }

/* before / after */
.compare { margin-top: 32px; text-align: center; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #ebe8e1; margin: 0 auto 14px; }
.seg button { border: 0; background: transparent; font: 500 13px/1 var(--sans); padding: 8px 16px; border-radius: 999px; color: #64615b; cursor: pointer; transition: background .2s, color .2s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.fig.stack { display: grid; margin-top: 0; text-align: left; }
.fig.stack img { grid-area: 1 / 1; opacity: 0; transition: opacity .45s var(--ease); align-self: center; }
.fig.stack img.on { opacity: 1; }

.reflect { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 1px solid var(--line); padding-top: 32px; }
.reflect .eyebrow { grid-column: 1 / -1; font: 400 13px/1 var(--mono); color: var(--muted); margin: 0; }
.reflect p { font-size: 15px; margin-top: 8px; }

.back { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.back a { color: var(--muted); text-underline-offset: 3px; text-decoration-color: #cfcbc2; } .back a:hover { color: var(--ink); }

/* figures and text rise in as you read */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

@media (max-width: 640px) {
  .case section { margin-top: 64px; }
  .cards, .stats, .reflect { grid-template-columns: 1fr; }
  .fig.pair { grid-template-columns: 1fr; }
  .fig.bleed, .compare { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; }
}
.compare .fig.bleed { margin-left: 0; margin-right: 0; }

.statement { font: 500 clamp(22px, 2.8vw, 28px)/1.35 var(--sans) !important; letter-spacing: -.02em; color: var(--ink) !important; padding-left: 20px; border-left: 3px solid #2f5bd3; }
.case code { font: 14px/1 var(--mono); background: #efede8; padding: 3px 7px; border-radius: 6px; color: var(--ink); }
.chips.mono span { font: 400 13px/1 var(--mono); }
.note { font-size: 13px !important; color: var(--muted) !important; text-align: center; }
.meta a, .case p a { color: var(--ink); text-decoration: underline; text-decoration-color: #cfcbc2; text-underline-offset: 3px; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; margin-top: 28px; }
.flow div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 16px; }
.flow div.hot { border-color: #b9c9f2; background: #f3f6fe; }
.flow b { display: block; font: 500 14px/1.3 var(--sans); }
.flow span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.flow i { font-style: normal; color: var(--faint); align-self: center; }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr; } .flow i { transform: rotate(90deg); justify-self: center; } }

.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.states div { background: #fff; border-radius: 10px; padding: 10px 10px 12px; text-align: center; }
.states img { border-radius: 6px; }
.states span { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
@media (max-width: 640px) { .states { grid-template-columns: repeat(2, 1fr); } }

/* narrative arc: question → problem → opportunity → reveal → how we got there → trade-off → impact */
.case-hero { margin-top: 48px; }
.case-hero .th { aspect-ratio: 16 / 9; border-radius: 4px; }
.case-hero .th .prompt { width: 54%; }
.case-hero .th-inagov img { width: 46%; }
.case-hero .th-az img { width: 18%; }
.ask h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.pillars b { font: 500 15px/1.3 var(--sans); }
.pillars p { font-size: 14px; line-height: 1.55; margin-top: 6px; }
.label { display: inline-block; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #2f5bd3; margin-bottom: 10px; }
.label.warn { color: #c2410c; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.reveal h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
.flows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.flows article { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.flows .pic { aspect-ratio: 4 / 3; background: #f0eee9; display: grid; place-items: center; overflow: hidden; }
.flows .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.flows .pic.fit img { object-fit: contain; object-position: center; padding: 14px; }
.flows .txt { padding: 14px 16px 18px; }
.flows .txt em { font: 400 12px/1 var(--mono); font-style: normal; color: var(--faint); }
.flows .txt b { display: block; font: 500 15px/1.3 var(--sans); margin-top: 6px; }
.flows .txt p { font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.options article { border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 18px; background: #faf9f6; }
.options article.pick { background: #fff; border-color: #b9c9f2; box-shadow: 0 0 0 3px #eef3fe; }
.options b { font: 500 15px/1.3 var(--sans); }
.options p { font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.options .tag { display: inline-block; margin-top: 10px; font: 500 11px/1 var(--mono); color: var(--muted); }
.options .pick .tag { color: #2f5bd3; }
.tradeoff { margin-top: 28px; background: #1c1c1a; color: #f3f1ec; border-radius: 16px; padding: 26px 26px 28px; }
.tradeoff p { color: #cfcbc2 !important; }
.tradeoff b { display: block; font: 500 20px/1.35 var(--sans); color: #fff; letter-spacing: -.01em; }
.qs { display: grid; gap: 10px; margin-top: 20px; }
.qs div { border-left: 2px solid #3a3936; padding-left: 14px; }
.qs div b { font-size: 15px; } .qs div p { font-size: 14px; margin-top: 4px; }
@media (max-width: 640px) { .pillars, .cards.three, .flows, .options { grid-template-columns: 1fr; } }
.case-hero { margin-left: calc(50% - min(48vw, 480px)); margin-right: calc(50% - min(48vw, 480px)); }
.flows .pic.code { background: #1f1e1c; place-items: start; }
.flows .pic.code pre { font: 400 12.5px/1.65 var(--mono); color: #e9e6df; padding: 18px 18px; white-space: pre-wrap; }
@media (max-width: 640px) { .case-hero { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); } .case-hero .th { border-radius: 0; } }

.case-hero .th-bnk .bk-bag { height: 60cqh !important; }
.case-hero .th-bnk .bk-logo { width: 22cqw !important; margin-top: 5cqh; }
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tri img { border-radius: 6px; aspect-ratio: 2 / 3; object-fit: cover; }

.case-hero .idds-demo { width: 66%; }
.case .idds-demo .vr code { background: none; padding: 0; border-radius: 0; font: inherit; color: #bdbdbd; } .case .idds-demo .vr .hex { color: #fff; }

/* ===== Rachel-style layout: fixed sidebar nav + wide column + serif headlines ===== */
.rc { --side: clamp(240px, 26vw, 420px); --serif-h: "Newsreader", "Instrument Serif", Georgia, serif; }
.rc .cs-side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side); padding: 40px clamp(20px, 2.4vw, 44px); z-index: 10; display: flex; flex-direction: column; }
.rc .cs-crumb { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--muted); }
.rc .cs-crumb a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color .2s; } .rc .cs-crumb a:hover { color: var(--ink); }
.rc .cs-crumb b { font-weight: 400; color: var(--ink); } .rc .cs-crumb i { font-style: normal; color: var(--faint); }
/* section nav: our own progress rail. A thin line fills as you read, a dot rides to the active
   section, numbers in mono, and the active section shows how far through it you are. */
/* section nav: plain labels on a thin rail; the rail fills blue up to the section you're in */
.rc .cs-nav { margin: auto 0; position: relative; display: grid; gap: 2px; padding-left: 20px; }
.rc .cs-nav::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: #e6e4df; }
.rc .cs-nav .fill { position: absolute; left: 0; top: 6px; width: 2px; border-radius: 1px; height: var(--fill, 0px); background: var(--link, #2f5bd3); transition: height .3s var(--ease); }
.rc .cs-nav a { display: block; padding: 6px 0; font-size: 15px; color: #a7a49c; text-decoration: none; transition: color .25s; width: fit-content; }
.rc .cs-nav a:hover { color: var(--ink); }
.rc .cs-nav a.on { color: var(--ink); }
.rc .case { max-width: none; width: min(960px, calc(100vw - var(--side) - 80px)); margin: 0 0 0 var(--side); padding: 120px 0 160px; }
.rc .case > .crumb { display: none; }
.rc .case-head h1 { font: 400 clamp(36px, 3.6vw, 54px)/1.12 var(--serif-h); letter-spacing: -.01em; color: #2e3640; max-width: 18em; }
/* project facts in a tidy 3-column grid (five facts sit as 3 + 2) */
.rc .meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; margin-top: 34px; max-width: 780px; }
@media (max-width: 640px) { .rc .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } }
.rc .meta dt { font-size: 15px; } .rc .meta dd { font-size: 16px; }
.rc .case-hero { margin: 56px 0 0; }
.rc .case-hero .th { aspect-ratio: 16 / 8.5; }
.rc .case section { margin-top: 0; padding: 72px 0; border-top: 1px solid var(--line); }
.rc .case section:first-of-type { margin-top: 72px; }
.rc .eyebrow-s { display: block; font: 400 19px/1 var(--sans); color: #8f8c85; margin-bottom: 26px; }
.rc .case h2 { font: 400 clamp(30px, 3vw, 44px)/1.15 var(--serif-h); letter-spacing: -.01em; color: #2e3640; max-width: 21em; }
.rc .case h2 .lbl { color: #8f8c85; margin-left: 0; }
.rc .case p { font-size: 19px; line-height: 1.65; color: #6e6b65; max-width: 46em; margin-top: 20px; }
.rc .case h3 { font: 500 19px/1.35 var(--sans); color: #2e3640; }
.rc .fig.bleed, .rc .compare { margin-left: 0; margin-right: 0; }
.rc .frame { margin-top: 36px; background: #e9eaec; border: 1px solid #dfe0e3; padding: 22px; position: relative; }
.rc .frame > .flabel { display: block; font: 500 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8b8d93; margin-bottom: 20px; }
.rc .pillars { margin-top: 40px; }
.rc .pillars b { font-size: 18px; } .rc .pillars p { font-size: 15.5px; }
.rc .cards article p, .rc .options p { font-size: 15px; }
.rc .cards b { font-size: 18px; }

/* core flows: big looping scene left, caption bottom-right */
.rc .flow-row { display: grid; grid-template-columns: 60% 1fr; gap: 44px; align-items: end; margin-top: 44px; }
.rc .flow-row + .flow-row { margin-top: 64px; }
.rc .flow-row .fcap h3 { font-size: 20px; }
.rc .flow-row .fcap p { font-size: 18px; margin-top: 10px; }
.scene { position: relative; aspect-ratio: 1; overflow: hidden; background-size: cover; background-position: center; container-type: inline-size; }
.scene::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.04); pointer-events: none; }

/* research collage */
.collage { position: relative; aspect-ratio: 16 / 10.4; }
.collage img { position: absolute; display: block; box-shadow: 0 10px 26px rgba(20,25,35,.18); border-radius: 3px; transition: transform .5s var(--ease); }
.collage img:hover { transform: scale(1.03) rotate(0deg) !important; z-index: 5; }

@media (max-width: 1100px) {
  .rc .cs-side { position: static; width: auto; padding: 24px var(--gutter) 0; }
  .rc .cs-nav { display: none; }
  .rc .case { width: auto; margin: 0; padding: 40px var(--gutter) 120px; }
  .rc .flow-row { grid-template-columns: 1fr; gap: 18px; }
  .rc .case section { padding: 56px 0; }
}

/* scene parts (sized in cqw so they scale with the tile) */
.scene .win { position: absolute; left: 11cqw; right: 11cqw; top: 12cqw; bottom: 12cqw; background: #fbfaf8; border-radius: 2.4cqw; overflow: hidden;
  box-shadow: 0 3cqw 7cqw -2cqw rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.4) inset; display: flex; flex-direction: column; }
.scene .wbar { flex: none; height: 6.4cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 0 2.6cqw; border-bottom: 1px solid #ebe8e1; font: 500 2.1cqw/1 var(--sans); color: #8a8780; }
.scene .wbar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #e0ddd6; }
.scene .wbar b { margin-left: 1.4cqw; font-weight: 500; color: #4a4944; }
.scene .wbody { flex: 1; padding: 3cqw; display: flex; flex-direction: column; gap: 1.8cqw; font: 400 2.5cqw/1.4 var(--sans); color: #2c2b28; overflow: hidden; }
.scene [data-t] { opacity: 0; transform: translateY(1cqw); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.scene [data-t].on { opacity: 1; transform: none; }
.scene .me { align-self: flex-end; background: #efece6; border-radius: 2cqw; padding: 1.4cqw 2.2cqw; max-width: 80%; }
.scene .me:empty::after, .scene .me[data-type]:not(.on) { min-height: 3.5cqw; }
.scene .ai { max-width: 92%; }
.scene .menu { display: grid; gap: 1cqw; }
.scene .menu span { display: flex; gap: 1.6cqw; align-items: center; padding: 1.1cqw 1.8cqw; border: 1px solid #e6e3db; border-radius: 1.4cqw; background: #fff; font-size: 2.3cqw; transition: border-color .3s, background .3s, opacity .35s, transform .45s; }
.scene .menu span em { font: 500 2cqw/1 var(--mono); font-style: normal; color: #a7a49c; }
.scene .menu span.pick.on { border-color: #ff2a12; background: #fff1ee; }
.scene .menu span.pick.on em { color: #ff2a12; }
.scene .think { display: flex; align-items: center; gap: 1.4cqw; color: #8a8780; font-size: 2.3cqw; }
.scene .think i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ff2a12; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.scene .phit { display: flex; align-items: center; gap: 1.6cqw; padding: 1.4cqw 1.8cqw; background: #fff; border: 1px solid #e6e3db; border-radius: 1.4cqw; font-size: 2.3cqw; }
.scene .phit b { font-weight: 500; } .scene .phit small { margin-left: auto; font: 1.9cqw/1 var(--mono); color: #8a8780; }
.scene .phit .pdot { width: 2.4cqw; height: 2.4cqw; border-radius: .7cqw; background: #e8eefc; display: grid; place-items: center; color: #2f5bd3; font-size: 1.6cqw; }
.scene .pok { color: #3f8f4f; }
/* Figma-ish canvas */
.scene .fig-ui { flex: 1; display: grid; grid-template-columns: 15cqw 1fr; }
.scene .layers { border-right: 1px solid #ebe8e1; padding: 2cqw 1.6cqw; display: grid; gap: 1.2cqw; align-content: start; }
.scene .layers i { display: block; height: 1.3cqw; border-radius: 1cqw; background: #e7e4dd; }
.scene .layers i:nth-child(odd) { width: 80%; }
.scene .canvas { position: relative; background: #f0eee9; display: grid; place-items: center; overflow: hidden; }
.scene .art { position: relative; width: 82%; aspect-ratio: 1440 / 900; background: #fff; border-radius: .8cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.12); overflow: hidden; }
.scene .wire { position: absolute; inset: 0; padding: 4%; display: grid; grid-template-columns: 22% 1fr; gap: 4%; }
.scene .wire i { background: #eceae4; border-radius: .6cqw; }
.scene .wire div { display: grid; gap: 6%; align-content: start; } .scene .wire div i { height: 1.6cqw; } .scene .wire div i:nth-child(2) { height: 8cqw; } .scene .wire div i:nth-child(n+3) { height: 2.4cqw; }
.scene .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.65,0,.35,1); opacity: 1; transform: none; }
.scene .art img.on { clip-path: inset(0 0 0 0); }
.scene .cursor { position: absolute; width: 3cqw; height: 3cqw; left: 70%; top: 70%; transition: left 1.4s var(--ease), top 1.4s var(--ease); z-index: 3; opacity: 1; transform: none; }
.scene .cursor.on { left: 30%; top: 34%; }
.scene .tag { position: absolute; left: 6%; bottom: 7%; font: 500 1.9cqw/1 var(--mono); background: #1c1c1a; color: #fff; padding: 1cqw 1.4cqw; border-radius: 1cqw; }
/* two sessions */
.scene .duo { position: absolute; inset: 9cqw; display: grid; gap: 4cqw; align-content: center; }
.scene .card-s { background: #fbfaf8; border-radius: 2.2cqw; padding: 2.6cqw 3cqw; box-shadow: 0 2.4cqw 6cqw -2cqw rgba(0,0,0,.45); font: 400 2.5cqw/1.5 var(--sans); color: #2c2b28; }
.scene .card-s .pwho { display: flex; align-items: center; gap: 1.4cqw; font: 500 2cqw/1 var(--mono); color: #8a8780; margin-bottom: 1.6cqw; }
.scene .card-s .pwho i { width: 3cqw; height: 3cqw; border-radius: 50%; background: #d9cbb8; } .scene .card-s.nx .pwho i { background: #b8c9d9; }
.scene .sync { justify-self: center; font: 500 2.1cqw/1 var(--mono); color: #fff; background: rgba(20,20,20,.55); padding: 1.2cqw 2cqw; border-radius: 3cqw; backdrop-filter: blur(6px); }

.rc .label { display: none; }   /* the grey section eyebrow replaces the small label in this layout */
.rc .reveal h2, .rc .ask h2 { font-size: clamp(30px, 3vw, 44px); }

.scene .wbar b { display: inline-flex; align-items: center; gap: 1cqw; }
.scene .wstar { width: 2.2cqw; height: 2.2cqw; fill: #ff2a12; }
.rc .reflect .eyebrow { font: 400 19px/1 var(--sans); color: #8f8c85; }
.fig video { display: block; width: 100%; height: auto; aspect-ratio: 848 / 480; border-radius: 8px; background: #111; }

/* Earth-style INAgov page: three outcome stats, a logo row, persona cards, and fill-in boxes for drafts */
.stats.three { grid-template-columns: repeat(3, 1fr); }
.serving { margin-top: 28px; font-size: 14px !important; color: var(--muted) !important; }
.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.todo { margin-top: 20px; padding: 16px 18px; border: 1.5px dashed #c9b98f; border-radius: 12px; background: #fdf9ee; }
.personas .todo { margin-top: 0; }
.todo b { display: block; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #8a6d1f; }
.todo ul { margin: 10px 0 0; padding-left: 18px; }
.todo li { font-size: 14px; line-height: 1.55; color: #6f5a22; }
@media (max-width: 640px) { .stats.three, .personas { grid-template-columns: 1fr; } }
.note.src { text-align: left; }
.personas.real article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 20px; display: flex; flex-direction: column; }
.personas.real em { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.personas.real b { font: 500 18px/1.25 var(--sans); margin-top: 10px; }
.personas.real p { font-size: 14.5px; line-height: 1.6; margin-top: 8px; flex: 1; }
.personas.real span { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* numbered principles: Designing for Government */
.principles { list-style: none; counter-reset: pr; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.principles li { counter-increment: pr; display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.principles li::before { content: counter(pr, decimal-leading-zero); grid-row: 1 / span 2; font: 400 13px/1.6 var(--mono); color: var(--faint); padding-top: 2px; }
.principles b { font: 500 18px/1.35 var(--sans); color: var(--ink); }
.principles p { font-size: 15.5px; line-height: 1.6; margin-top: 4px; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 44px; margin-top: 16px; }
.logos img { height: 40px; width: auto; filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s; }
.logos img:hover { filter: none; opacity: 1; }
@media (max-width: 640px) { .logos { gap: 20px 28px; } .logos img { height: 30px; } }
/* My Modules: five module cards */
.mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.mods article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 20px; }
.mods article:first-child { grid-column: 1 / -1; }
.mods em { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mods b { display: block; font: 500 18px/1.25 var(--sans); margin-top: 10px; }
.mods p { font-size: 14.5px; line-height: 1.6; margin-top: 6px; }
.sub-h { font: 500 20px/1.3 var(--sans); color: var(--ink); margin-top: 48px; }
@media (max-width: 640px) { .mods { grid-template-columns: 1fr; } }
.fig.pair.even { grid-template-columns: 1fr 1fr; } .fig.pair.even img { aspect-ratio: 4 / 3; object-fit: cover; }

/* a pair that shows each image whole, side by side (no crop) */
.fig.pair.even.whole { align-items: center; }
.fig.pair.even.whole img { aspect-ratio: auto; height: auto; object-fit: contain; }