/* jhana site v3. Black Helvetica on white. Desktop layout only for now.
   One type scale and one palette for every component: change them here, never inside a component. */

:root {
  --display: 108px;  /* page headline */
  --title: 84px;     /* section headline */
  --head: 60px;      /* panel headline, big numbers */
  --lead: 32px;      /* statements, sub-headings */
  --body: 20px;      /* running text, labels */
  --small: 16px;     /* navigation, card notes */
  --ink: #111;
  --grey: #555;
  --soft: #777;
  --line: #ddd;
  --on-dark: #b3b3b3;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Helvetica, Arial, sans-serif; font-size: var(--body); line-height: 1.35; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, dl, dd, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
/* links are never underlined; on hover they thicken, with no change in width */
a:hover { text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: 96px; padding-right: 96px; }

/* type */
h1 { font-size: var(--display); line-height: 1.02; letter-spacing: -4px; }
h2 { font-size: var(--title); line-height: 1.04; letter-spacing: -2.5px; margin-bottom: 60px; }
h3 { font-size: var(--lead); line-height: 1.2; letter-spacing: -0.5px; }
h4 { font-size: var(--body); line-height: 1.2; }
.mid { font-size: var(--head); line-height: 1.06; letter-spacing: -1.5px; font-weight: bold; }
h2.mid { margin-bottom: 40px; }
.lead { font-size: var(--lead); line-height: 1.25; color: var(--grey); max-width: 900px; }
.lead.ink { color: var(--ink); }
.lead + .lead { margin-top: 16px; }
.k { font-weight: bold; color: var(--soft); }  /* label: Scored, Priced, Start with, Then */
h1, h2, h3, .lead, .mid { text-wrap: balance; }

/* header and footer */
header, footer { display: flex; justify-content: space-between; align-items: center; }
header { padding-top: 48px; padding-bottom: 48px; }
footer { padding-top: 64px; padding-bottom: 64px; color: var(--grey); }
.mark img { display: block; height: 36px; width: auto; filter: brightness(0); }  /* the old jhana lockup, in black */
nav a, nav span { margin-left: 32px; font-size: var(--small); }
nav a.here { text-decoration: underline; }

/* sections */
section { padding: 120px 0; }
section.hero { padding: 160px 0 0; }
.hero h1 + .lead { margin-top: 40px; }
.case .hero .back { display: inline-block; margin-bottom: 32px; font-size: var(--small); color: var(--grey); }
.case .hero .back:hover { color: var(--ink); }
section.dark { background: var(--ink); color: #fff; }
section.dark .lead { color: var(--on-dark); }

.stats, .cols3, .cols2 { display: grid; gap: 48px; }
.stats { grid-template-columns: repeat(4, 1fr); }
.stats.three { grid-template-columns: repeat(3, 1fr); }  /* a row of three numbers fills the row evenly */
.cols3 { grid-template-columns: repeat(3, 1fr); }
.cols2 { grid-template-columns: repeat(2, 1fr); }
.cols2 > div > p, .cols3 > div > p { margin-top: 12px; font-size: var(--lead); line-height: 1.25; color: var(--grey); }

.stat b { display: block; font-size: var(--head); line-height: 1.1; letter-spacing: -1.5px; white-space: nowrap; }
.stat span { display: block; margin-top: 8px; color: var(--grey); max-width: 300px; }

/* text link: underlined at rest; on hover it turns ink and gets a hairline box, as links do in a LaTeX PDF */
.link, .prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link { color: var(--soft); }
.link:hover, .prose a:hover { color: var(--ink); text-shadow: none; outline: 1px solid currentColor; outline-offset: 4px; }

/* buttons */
.chip, .chips button { display: inline-block; border: 1px solid var(--ink); border-radius: 999px; padding: 10px 22px; }
.chip.solid, .chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.dark .chip { border-color: #fff; }

/* splash */
.cta { margin-top: 48px; }
.est { display: flex; justify-content: space-between; margin-top: 48px; color: var(--grey); }
.logos { overflow: hidden; margin-top: 96px; opacity: 0.3; filter: grayscale(1); }
.logos div { display: flex; align-items: center; gap: 72px; width: max-content; animation: scroll 90s linear infinite; }
.logos img { height: 44px; width: auto; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos div { animation: none; } }

/* carousel */
.tabs, .chips { display: flex; margin-bottom: 56px; }
.tabs { gap: 32px; }
.tabs button { padding-bottom: 4px; color: var(--grey); border-bottom: 2px solid transparent; }
.tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.chips { gap: 12px; }
/* every panel is the same three boxes: a title that sits on the bottom of a two-line row,
   a 16:9 asset on the left, and a box on the right that sits on the asset's bottom edge */
.marquee { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: end; }
.marquee h2 { grid-column: 1 / -1; display: flex; align-items: flex-end; min-height: calc(var(--head) * 2.12); }
.film, .shot, .chart { display: block; width: 100%; aspect-ratio: 16 / 9; }
/* film: a silent preview with one button and a hairline of progress; the browser's own controls take over once the sound is on */
.film { position: relative; overflow: hidden; background: var(--ink); }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.film button { position: absolute; left: 16px; bottom: 18px; padding: 8px 16px; border: 1px solid #fff; border-radius: 999px; background: #fff; color: var(--ink); font-size: var(--small); }
.film button svg { width: 10px; height: 12px; margin-right: 10px; fill: currentColor; }
.film button span { margin-left: 8px; color: var(--soft); }
.film button:hover { background: var(--ink); color: #fff; }
.film button:hover span { color: var(--on-dark); }
.film .played { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 0.3s linear; }
/* the panels share one cell, so the section keeps one height; the old panel fades out, then the new one eases in */
.stage { display: grid; }
.stage > .marquee { grid-area: 1 / 1; }
.stage > .marquee[hidden] { display: grid !important; visibility: hidden; }
.marquee.leave { animation: leave 0.35s ease-in both; }
.marquee.swipe { animation: swipe 0.8s ease-out 0.3s both; }
@keyframes leave { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes swipe { from { opacity: 0; transform: translateX(24px); } }
.marquee .stat + .stat { margin-top: 40px; }
.shot { object-fit: cover; object-position: left top; border: 1px solid var(--line); }
.chart svg { display: block; width: 100%; height: 100%; }
.chart .axis { stroke: var(--ink); }
.chart .grid { stroke: var(--line); }
.chart .trajectory { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.chart .solid { fill: var(--ink); }
.chart .tick, .chart .sub { font-size: var(--small); fill: var(--grey); }
.chart .sub { fill: var(--soft); }
.chart .number { font-size: var(--body); font-weight: bold; fill: var(--grey); }
.plogo { display: block; height: 44px; margin-bottom: 16px; filter: grayscale(1); }

/* why us: two cards whose rows line up */
.boxes { grid-template-rows: repeat(4, auto); row-gap: 0; }
.box { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 28px; align-items: start; padding: 48px; border: 1px solid var(--ink); }
.box.dark { background: var(--ink); color: #fff; }
.boxes .box p { margin-top: 0; font-size: var(--body); line-height: 1.35; color: var(--grey); }
.boxes .box.dark p, .box.dark .stat span { color: var(--on-dark); }
.box .stats { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.box .stat b { font-size: var(--lead); letter-spacing: -0.5px; }
.box .chip { justify-self: start; }
.box h4 { margin-top: 12px; line-height: 1.3; }
/* the one card figure: its greys are set in the drawing; only the label type is set here */
.box .fig { display: block; width: 100%; height: auto; margin-top: 24px; }
.fig text { font-size: var(--small); fill: var(--grey); }
.fig .name { font-weight: bold; fill: var(--ink); }
.box.dark .fig text { fill: var(--on-dark); }
.box.dark .fig .name { fill: #fff; }

/* accordions that open a dotted, segmented box (why now, science) */
details { border-top: 1px solid var(--ink); }
details:last-of-type { border-bottom: 1px solid var(--ink); }
summary { display: flex; justify-content: space-between; padding: 28px 0; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: normal; }
details[open] summary::after { content: "–"; }
details > .lead { margin: 4px 0 32px; }
details > :last-child { margin-bottom: 48px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 4px 0 24px; border: 1px dotted #999; }
.seg > * { padding: 28px; }
.seg > * + * { border-left: 1px dotted #999; }
.seg .stat b, .seg .stat span, .seg p { color: var(--soft); }
.seg math { font-size: var(--lead); color: var(--grey); }
.seg p { margin-top: 12px; }

/* solution: the terms that hold for every industry sit beside the title, on the board's third column */
.terms { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; align-items: end; margin-bottom: 60px; }
.terms h2 { grid-column: span 2; margin-bottom: 0; }
.terms dl { padding-bottom: 12px; }
.terms dl div + div { margin-top: 16px; }
/* what each industry hands over: three use cases on one line, slash-separated */
.between { display: flex; justify-content: space-between; align-items: baseline; }
.uses { display: flex; flex-wrap: wrap; margin-top: 12px; font-size: var(--lead); font-weight: bold; line-height: 1.2; letter-spacing: -0.5px; }
.uses li + li::before { content: "/"; margin: 0 20px; font-weight: normal; color: var(--soft); }
/* flow: three acts of three cards (science) */
.act { padding-bottom: 12px; font-weight: bold; }
.card { margin-top: -1px; padding: 18px 20px; border: 1px solid var(--ink); }
.card p { margin-top: 4px; font-size: var(--small); color: var(--grey); }
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 24px; }

/* band: edge to edge. Two rules across the page, the line hard left and the button hard right. */
section.band { padding: 40px 64px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.band > div { display: flex; justify-content: space-between; align-items: center; gap: 48px; }


/* science */
.flag { display: inline-block; vertical-align: middle; margin-left: 20px; padding: 6px 14px; border: 1px solid var(--ink); border-radius: 999px; font-size: var(--small); font-weight: normal; letter-spacing: 0; line-height: 1.35; }

/* about */
.about section { padding: 72px 0; }
.about section:first-child { padding-top: 120px; }
.about h3 { margin-bottom: 12px; }
.dict { max-width: 720px; }
.ipa { margin-top: 16px; font-size: var(--lead); color: var(--grey); }
.dict dl { margin-top: 40px; }
.dict dl div { display: flex; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.dict dt { width: 150px; color: var(--grey); line-height: 1.5; }
.dict dt span { display: block; }
.dict dd { font-size: var(--lead); line-height: 1.2; }
/* logo strips: white boxes, grey at rest, original colours on hover, a tooltip just below so it never covers the heading */
.alumni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.press { max-width: 900px; }  /* eleven outlets: two even rows */
.logo { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px; background: #fff; color: var(--ink); }
.logo img { height: 24px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); transition: filter 0.3s; }
.logo img.tall { height: 40px; }
.logo img.wide { height: auto; max-height: 24px; max-width: 132px; }
.logo:hover img, .logo:focus-visible img { filter: none; }
.logo b { font-size: var(--small); letter-spacing: 0.5px; }
.logo::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); width: max-content; max-width: 420px; padding: 8px 12px; line-height: 1.35; border: 1px solid #fff; background: var(--ink); color: #fff; font-size: var(--small); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 1; }
.logo:nth-last-child(-n+3)::after { left: auto; right: 0; }
.logo:hover::after, .logo:focus-visible::after { opacity: 1; }

/* about is dark, over a faint greyscale collage */
.night { position: relative; background: var(--ink); color: #fff; }
.collage { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(8, minmax(160px, 1fr)); align-content: start; overflow: hidden; filter: grayscale(1); opacity: 0.25; }
.collage img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.night .lead.ink { color: #fff; }
.night .mark img { filter: brightness(0) invert(1); }
.night .lead, .night .ipa, .night .dict dt, .night footer { color: var(--on-dark); }
.night .dict dl div { border-top-color: #444; }
/* the collage carries on behind the footer on this page */
.night footer.end { background: transparent; }
.night .end .k { color: var(--on-dark); }

/* lists: blog and case studies */
.rows li > * { display: flex; align-items: baseline; gap: 40px; padding: 20px 0; border-top: 1px solid var(--line); }
.rows li:last-child > * { border-bottom: 1px solid var(--line); }
.rows a:hover { text-shadow: none; }
.rows a:hover .t { text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor; }
.rows .a { flex: none; width: 150px; color: var(--grey); }
.rows .t { flex: 1; font-size: var(--lead); line-height: 1.2; }
.rows .b { flex: none; width: 280px; color: var(--grey); }
.cases .a { width: 300px; }
.cases .b { width: 320px; }

/* footer: the closing wish, the sitemap, the old jhana lockup as masthead, the imprint */
footer.end { display: block; padding: 120px 0 48px; background: var(--ink); color: #fff; }
.end h2 { margin-bottom: 72px; }
/* the tide: water under the words, with three boats of three sizes on it. The water drifts; the tide breathes. */
.end h2::after { content: ""; display: block; height: 96px; margin-top: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1248' height='96' viewBox='0 0 1248 96'%3E%3Cpath d='M-52 81 q26 -8 52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0' fill='none' stroke='%23fff' stroke-width='1.5' opacity='.35'/%3E%3Cpath d='M120.1 63.1 L139.9 63.1 L136.2 68.7 L123.8 68.7 Z' fill='%23fff'/%3E%3Cpath d='M130.0 63.1 L130.0 40.2' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M131.9 41.4 L131.9 60.0 L141.8 60.0 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M128.1 45.2 L128.1 60.0 L121.3 60.0 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M530.0 62.0 L562.0 62.0 L556.0 71.0 L536.0 71.0 Z' fill='%23fff'/%3E%3Cpath d='M546.0 62.0 L546.0 25.0' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M549.0 27.0 L549.0 57.0 L565.0 57.0 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M543.0 33.0 L543.0 57.0 L532.0 57.0 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M1044.9 61.0 L1087.1 61.0 L1079.2 72.9 L1052.8 72.9 Z' fill='%23fff'/%3E%3Cpath d='M1066.0 61.0 L1066.0 12.2' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M1070.0 14.8 L1070.0 54.4 L1091.1 54.4 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M1062.0 22.8 L1062.0 54.4 L1047.5 54.4 Z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M0 70 q26 -10 52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0 t52 0' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 1248px 96px repeat-x; animation: tide-drift 120s linear infinite, tide-rise 7s ease-in-out infinite alternate; }
@keyframes tide-drift { to { background-position-x: -1248px; } }
@keyframes tide-rise { from { transform: translateY(5px); } to { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .end h2::after { animation: none; } }
@media print { .end h2::after { display: none; } }
.sitemap { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
.sitemap a, .sitemap span { display: block; margin-left: 0; font-size: var(--body); line-height: 1.8; }
.sitemap span { color: var(--on-dark); }
.sitemap .k { margin-bottom: 12px; }
.masthead { display: block; width: 60%; height: auto; margin: 96px 0 64px; filter: brightness(0) invert(1); }
.imprint { display: flex; justify-content: space-between; align-items: baseline; gap: 48px; padding-top: 24px; border-top: 1px solid #333; font-size: var(--small); color: var(--on-dark); }
.imprint p { max-width: 900px; }
.imprint span { flex: none; }

/* policy pages: plain running text in one narrow column */
.prose { max-width: 820px; }
.prose h2 { font-size: var(--lead); line-height: 1.2; letter-spacing: -0.5px; margin: 56px 0 16px; }
.prose h3 { font-size: var(--body); margin: 32px 0 8px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 24px; list-style: revert; }
.prose li { margin-bottom: 6px; }

/* contact modal: one white box with an ink rule, labels above bottom-ruled inputs, a plain fade in */
dialog.contact { width: 760px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); overflow: auto; padding: 48px; border: 1px solid var(--ink); background: #fff; color: var(--ink); }
dialog.contact[open] { animation: cf-fade 0.2s ease-out; }
dialog.contact::backdrop { background: rgba(17, 17, 17, 0.6); }
@keyframes cf-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.contact[open] { animation: none; } }
html.contact-open { overflow: hidden; }
.contact .cf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.contact .cf-head .cf-close { width: 40px; height: 40px; margin: -8px -12px 0 0; font-size: var(--lead); line-height: 1; color: var(--grey); }
.contact .cf-head .cf-close:hover { color: var(--ink); text-shadow: none; }
.contact .cf-head .cf-close:focus-visible { outline: 1px solid var(--ink); }
.contact .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.contact .cf-field.wide { grid-column: 1 / -1; }
.contact label { display: block; font-size: var(--small); color: var(--grey); }
.contact input:not([type=checkbox]), .contact textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: inherit; resize: vertical; }
.contact input:focus, .contact textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: 7px; }
.contact input[type=checkbox]:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.contact .cf-error { margin-top: 4px; font-size: var(--small); font-weight: bold; color: var(--ink); }
.contact .cf-error:empty { display: none; }
.contact .cf-consent { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: start; margin-top: 28px; }
.contact .cf-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.contact .cf-consent label { color: var(--ink); }
.contact .cf-consent .cf-error { grid-column: 2; }
.contact .cf-consent a, .contact .cf-legal a, .contact .cf-status a { text-decoration: underline; }
.contact .cf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact .cf-foot { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.contact .cf-foot .chip { font-size: var(--body); }
.contact .cf-foot .chip:disabled { cursor: default; opacity: 0.6; }
.contact .cf-status { font-size: var(--small); color: var(--ink); }
.contact .cf-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--small); color: var(--soft); }
.contact .cf-done { outline: none; }
.contact .cf-done .chip { margin-top: 32px; }
.grecaptcha-badge { visibility: hidden; }

/* ==== case studies ==== */
/* one page per case, set as a blog post (blog.css): the claim and the client in the post's head, then one reading
   column with three numbers, a hero asset, a few paragraphs, the testimonials, and the press */
.case-asset > img, .case-asset > svg { display: block; width: 100%; height: auto; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shots img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); }
/* a scanned letter under the words quoted from it */
.scan { display: block; width: 100%; height: auto; border: 1px solid var(--line); filter: grayscale(1); }
/* a hero that is three steps: the flow's cards, three to a row, under one label line */
.case-asset ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin: 12px 0 0; padding: 0; list-style: none; }
/* the case's own blocks inside the blog column (.blog-content) */
.blog-content .stat b { font-size: var(--lead); line-height: 1.2; letter-spacing: -0.5px; white-space: normal; }
/* the hero asset is drawn for the full frame, so it runs past the column into both rails (200px + 44px a side, as .blog-layout) */
.blog-content .case-asset { width: auto; margin: 40px -244px; }
/* a drawn chart (figure.plot) keeps its own key and table: in the blog column they would otherwise take the blog's
   lists and tables. These restate the rules under "charts" below, one step more specific; keep the two in step. */
.blog-content .plot-key { margin: 0; padding: 0; list-style: none; }
.blog-content .plot-key li { margin-bottom: 0; font-size: var(--small); line-height: 1.3; }
.blog-content .plot th, .blog-content .plot td { padding: 10px 0 10px 24px; border-bottom-color: var(--line); font-weight: normal; }
.blog-content .plot th:first-child { padding-left: 0; }
.blog-content .plot thead th { border-bottom-color: var(--ink); color: var(--grey); }
.blog-content .plot tfoot th, .blog-content .plot tfoot td { border-bottom: 0; font-weight: bold; }
/* a quotation is the blog's: its name line is small, and two in a row share the rule between them (38px, as the blog's margin) */
.blog-content .quote cite { display: block; margin-top: 16px; font-size: var(--small); line-height: 1.5; letter-spacing: 0; font-style: normal; color: var(--grey); }
.blog-content .quote + .quote { margin-top: -38px; border-top: 0; }
/* eleven outlets: three even rows in the column, at either width */
.blog-content .press { max-width: 600px; }

/* ==== blog posts ==== */
/* A post is the policy-page pattern: a hero with the title, then one .prose column. Sizes and colours are the theme's.
   The title is an h1 with the theme's .mid size; labels are .k; numbers are .stats; drawings are .fig. */
.byline { display: flex; gap: 40px; color: var(--grey); }  /* date and author, as in the index row */
.hero .byline { margin-top: 40px; }
.prose h4 { margin: 24px 0 8px; color: var(--grey); }
.prose hr { margin: 56px 0; border: 0; border-top: 1px solid var(--line); }
.prose .k { margin-bottom: 4px; }
.prose * + .k { margin-top: 24px; }  /* a label after running text starts a new group */
.prose .k + .k, .prose h2 + .k, .prose h3 + .k { margin-top: 0; }
.prose .note, .prose figcaption { font-size: var(--small); color: var(--grey); }
/* quotations and set-off notes: one hairline on the left */
.prose blockquote, .prose aside { margin: 32px 0; padding-left: 24px; border-left: 1px solid var(--ink); }
.prose blockquote > :last-child, .prose aside > :last-child { margin-bottom: 0; }
/* figures: pictures and drawings */
.prose figure { margin: 40px 0; }
.prose img, .prose figure > svg { display: block; max-width: 100%; height: auto; }
.prose img { border: 1px solid var(--line); }
.prose img + img { margin-top: 16px; }
.prose figcaption { margin-top: 12px; }
.prose .anno { position: relative; }  /* a picture with marks drawn over it */
.prose .anno svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* tables scroll inside themselves, never the page */
.prose .scroll { margin: 24px 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.prose th, .prose td { min-width: 104px; padding: 10px 20px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { border-bottom-color: var(--ink); }
/* a term and what it means; numbered steps */
.prose dl { margin-bottom: 24px; }
.prose dt { margin-top: 16px; font-weight: bold; }
.prose dd { color: var(--grey); }
.prose .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 32px; margin: 32px 0; }
.prose .stat b { font-size: var(--lead); line-height: 1.2; letter-spacing: -0.5px; white-space: normal; }
/* lists whose marker is part of the writing: + for what shipped, [ ] for a checklist, none for references */
.prose ul.plus { list-style-type: "+  "; }
.prose ul.check { list-style-type: "[ ]  "; padding-left: 40px; }
.prose ul.refs { padding-left: 0; list-style: none; font-size: var(--small); }
/* changelog: one section per entry, its kind and date above its title */
.prose section { margin-top: 48px; padding: 0; }
.prose .byline { margin: 0; }
.prose .byline + h3 { margin-top: 4px; }

/* ==== science page: the three accordions ==== */

/* Science, first accordion: verification. Type sizes and text colours are the theme's (style.css); none are defined here.
   The charts stretch with their cell, but only the marks move: every label is set in pixels at a theme size. */

/* why the problem is hard: two premises, their key terms in ink */
#verifier .vf-why p, #verifier .vf-cert p { color: var(--grey); text-wrap: pretty; }
#verifier .vf-why .k { margin-top: 0; color: var(--soft); }
#verifier .vf-key { color: var(--ink); }
/* the formal statement, on hover or focus, for the technical reader */
#verifier .vf-tip { position: relative; color: var(--ink); border-bottom: 1px dotted var(--soft); cursor: help; }
#verifier .vf-tip > span { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; display: none; width: max-content; max-width: 560px; padding: 12px 16px; border: 1px solid var(--ink); background: #fff; color: var(--ink); font-size: var(--small); line-height: 1.6; }
#verifier .vf-tip math { font-size: var(--body); color: var(--ink); }
#verifier .vf-tip:hover > span, #verifier .vf-tip:focus > span { display: block; }

/* the certificate: a plain heading, one sentence, then the bound with its one definition beside it */
#verifier .vf-math { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; row-gap: 4px; margin-top: 20px; }
#verifier .vf-math math { font-size: var(--body); }
#verifier .vf-math [role="math"] math + math { margin-left: 12px; }
#verifier .vf-fine { font-size: var(--small); color: var(--soft); }
#verifier .vf-fine math { font-size: inherit; color: inherit; }

/* the evidence: two figures to a row; their headings, sentences, charts, and notes line up across the row */
#verifier .vf-evid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
#verifier .vf-fig { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
#verifier .vf-fig h4 { line-height: 1.35; text-wrap: balance; }
#verifier .vf-fig p { grid-row: 2; margin-top: 10px; text-wrap: pretty; }
#verifier .vf-plot { grid-row: 3; margin-top: 28px; }
#verifier .vf-fig .vf-fine { grid-row: 4; margin-top: 20px; }
#verifier .vf-plot svg { display: block; width: 100%; overflow: visible; }
#verifier .vf-plot text { font-size: var(--small); fill: var(--soft); }
#verifier .vf-plot .vf-name { fill: var(--grey); }
#verifier .vf-plot .vf-val { font-weight: bold; fill: var(--ink); }
#verifier .vf-plot .vf-num { font-size: var(--body); font-weight: bold; fill: var(--ink); }
#verifier .vf-plot .vf-sub { font-size: var(--small); }

/* marks: thin grey for axes and context, ink for the result */
#verifier .vf-axis line { stroke: #999; }
#verifier .vf-stop { stroke: #777; stroke-dasharray: 4 4; }
#verifier .vf-ink circle { fill: var(--ink); fill-opacity: 0.62; }
#verifier .vf-pale circle { fill: #8c8c8c; fill-opacity: 0.62; }
#verifier .vf-rule line { stroke: #777; stroke-width: 1.5; }
#verifier .vf-stem line { stroke: #999; stroke-width: 1.25; }
#verifier .vf-runs line { stroke: #a6a6a6; stroke-width: 1.25; stroke-linecap: round; }
#verifier .vf-mean line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
#verifier .vf-open circle { fill: #fff; stroke: #777; stroke-width: 1.5; }
#verifier .vf-solid circle { fill: var(--ink); }

/* room on the left of each chart for the labels that sit outside its axis */
#verifier .vf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; padding-left: 80px; }
#verifier .vf-repair { padding-left: 56px; }
#verifier .vf-lolli { padding-left: 148px; }

/* science: the data explorer inside #environments.
   Type sizes and colours come from the variables in style.css; the extra greys here are neutral. */

/* the map box: a label, the map, and the time control, in the same dotted frame as .seg */
#environments .ex-map { margin: 4px 0 24px; border: 1px dotted #999; }
#environments .ex-what { padding: 24px 28px; }
#environments .ex-n, #environments .stat b { font-variant-numeric: tabular-nums; }

#environments .ex-stage { position: relative; overflow: hidden; }
#environments .ex-stage:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
#environments .ex-stage.ex-zoomable { cursor: zoom-in; }
#environments .ex-svg { display: block; width: 100%; height: auto; }
.ex-world { fill: #efefef; stroke: #fff; stroke-width: 0.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ex-india { fill: #dedede; }
.ex-states { fill: none; stroke: #777; stroke-width: 1; stroke-dasharray: 0.1 3.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ex-dot { fill: var(--ink); fill-opacity: 0.86; stroke: #fff; }
.ex-speck { fill: var(--ink); fill-opacity: 0.5; }
.ex-ring { fill: none; stroke: var(--ink); stroke-width: 1.25; pointer-events: none; }

#environments .ex-views { position: absolute; top: 0; right: 28px; margin: 0; }
#environments .ex-views button[aria-pressed="false"] { background: #fff; }
#environments .ex-views button:focus-visible, #environments .ex-play:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* the site's tooltip: small, white on black, a 1px border */
#environments .ex-tip { position: absolute; left: 0; top: 0; z-index: 1; padding: 6px 10px; border: 1px solid #fff; background: var(--ink); color: #fff; font-size: var(--small); white-space: nowrap; pointer-events: none; }
#environments .ex-tip b { display: block; }
#environments .ex-also { display: flex; justify-content: space-between; gap: 24px; color: var(--on-dark); }
#environments .ex-also:first-of-type { margin-top: 6px; }

#environments .ex-time { display: flex; align-items: center; gap: 28px; padding: 24px 28px; border-top: 1px dotted #999; }
#environments .ex-play { flex: none; min-width: 104px; text-align: center; }
#environments .ex-range { flex: 1; -webkit-appearance: none; appearance: none; height: 28px; margin: 0; background: transparent; cursor: pointer; --at: 100%; }
#environments .ex-range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(to right, var(--ink) var(--at), #bbb var(--at)); }
#environments .ex-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7.5px; border: 0; border-radius: 50%; background: var(--ink); }
#environments .ex-range::-moz-range-track { height: 1px; background: #bbb; }
#environments .ex-range::-moz-range-progress { height: 1px; background: var(--ink); }
#environments .ex-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--ink); }
#environments .ex-range:focus-visible { outline: none; }
#environments .ex-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ink); }
#environments .ex-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ink); }
#environments .ex-when { flex: none; min-width: 256px; text-align: right; color: var(--grey); white-space: nowrap; }

/* two rows of three numbers, each over its own cumulative line */
#environments .seg .stat { display: flex; flex-direction: column; }
#environments .seg .stat > span { margin-bottom: 24px; }
#environments .ex-spark { position: relative; height: 64px; margin-top: auto; }
#environments .ex-spark svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.ex-line { fill: none; stroke: #bbb; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ex-line.ex-done { stroke: var(--ink); }
#environments .ex-hatch { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(135deg, #c4c4c4 0, #c4c4c4 1px, transparent 1px, transparent 5px); }
.ex-base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
#environments .ex-now { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); }

/* science: the two flows. Type sizes and colours come from style.css; nothing new is set here.
   The orchestration accordion draws the system; the flat section below the accordions draws one claim. */

/* three steps to a row, with an arrow into every step from the one before it */
.au-flow { --au-gap: 48px; --au-top: 0px; display: grid; row-gap: var(--au-gap); }
.au-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.au-row .card { position: relative; margin-top: 0; background: #fff; }
.au-row > li + li::before { content: ""; position: absolute; top: 50%; right: calc(100% + 1px); width: 40px; border-top: 1px solid var(--ink); }
.au-row > li + li::after { content: ""; position: absolute; top: calc(50% - 4px); right: calc(100% + 1px); border: solid transparent; border-width: 4.5px 0 4.5px 8px; border-left-color: var(--ink); }
/* the second row runs right to left, so the line never breaks */
.au-back > :nth-child(1) { grid-area: 1 / 3; }
.au-back > :nth-child(2) { grid-area: 1 / 2; }
.au-back > :nth-child(3) { grid-area: 1 / 1; }
.au-back > li + li::before { right: auto; left: calc(100% + 1px); }
.au-back > li + li::after { right: auto; left: calc(100% + 1px); border-width: 4.5px 8px 4.5px 0; border-left-color: transparent; border-right-color: var(--ink); }
/* and drops from the end of the first row into the start of the second */
.au-back > :first-child::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--au-top)); height: calc(var(--au-gap) - var(--au-top) + 1px); border-left: 1px solid var(--ink); }
.au-back > :first-child::after { content: ""; position: absolute; left: calc(50% - 4px); bottom: calc(100% + var(--au-top)); border: solid transparent; border-width: 8px 4.5px 0; border-top-color: var(--ink); }

/* orchestration: every step is a deck, not a single card, because many agents work it at once;
   --au-top is how far the deck stands above its card, so the arrows stop at the deck */
#automation .au-flow { --au-gap: 64px; --au-top: 13px; margin: 56px 0 72px; }
#automation .au-row .card { box-shadow: 0 -10px 0 -5px #ececec, 0 -10px 0 -4px #777, 0 -19px 0 -9px #f6f6f6, 0 -19px 0 -8px #aaa; }
/* what it runs on: three sockets above the line, not steps in it */
#automation .au-on { margin-top: 56px; }
#automation .au-plugs { margin-top: 12px; }
#automation .au-plugs .card { border-style: dashed; box-shadow: none; background: repeating-linear-gradient(135deg, #fff 0 7px, #ececec 7px 8px); }
#automation .au-plugs > li + li::before, #automation .au-plugs > li + li::after { content: none; }
/* the line closes: from the last step back up to the first, named in the gap between the rows */
#automation .au-back, #automation .au-loop { grid-area: 2 / 1; }
#automation .au-loop { --au-mid: calc((100% - 80px) / 6); position: relative; align-self: start; display: flex; align-items: center; column-gap: 12px; height: var(--au-gap); margin-top: calc(-1 * var(--au-gap)); padding: 0 0 var(--au-top) calc(var(--au-mid) + 16px); }
#automation .au-loop span { font-size: var(--small); color: var(--grey); }
#automation .au-loop::before { content: ""; position: absolute; left: var(--au-mid); top: 8px; bottom: var(--au-top); border-left: 1px solid var(--ink); }
#automation .au-loop::after { content: ""; position: absolute; left: calc(var(--au-mid) - 4px); top: 0; border: solid transparent; border-width: 0 4.5px 8px; border-bottom-color: var(--ink); }

/* audit and layers: a rule, then two boxes whose rows line up */
#automation .au-sep { margin: 0 0 64px; border: 0; border-top: 1px solid var(--ink); }
#automation #dispute + .au-sep { margin-top: 72px; }   /* the same gap above each rule */
#automation .au-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 48px; }
#automation .au-half { display: grid; grid-row: span 5; grid-template-rows: subgrid; padding: 16px 40px; border: 1px solid var(--ink); }
#automation .au-half > * { padding: 24px 0; }
#automation .au-half > * + * { border-top: 1px solid var(--line); }
#automation .au-line { display: grid; grid-template-columns: 42% minmax(0, 1fr); column-gap: 16px; align-items: start; }
#automation .au-line h4 { line-height: 1.35; }
#automation .au-line p { color: var(--grey); text-wrap: pretty; }
#automation .au-dark { background: var(--ink); color: #fff; }
#automation .au-dark > * + * { border-top-color: #444; }
#automation .au-dark .au-line { grid-template-columns: 32px 118px minmax(0, 1fr); }
#automation .au-dark .k, #automation .au-dark .au-line p { color: var(--on-dark); }

/* the three points read as even lines */
#automation .seg .stat span { text-wrap: balance; }

/* dispute: one consumer claim, stage by stage, flat below the accordions; then a sample portfolio board */
#dispute .au-flow { margin: 56px 0 96px; }
#dispute .card .n { margin-right: 10px; font-weight: normal; color: var(--soft); }

/* the sample board, set into the page as a screen grab of the product: a tinted backdrop, a window with chrome,
   and the product's own colours (the chart palette, deepened so white text reads on the fills) */
#dispute .dc-shot { padding: 48px; background: #eef0f5; }
#dispute .dc-board { border: 1px solid #d5d9e2; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 18px 40px rgba(17, 17, 17, 0.12); overflow: hidden; }
#dispute .dc-chrome { display: flex; gap: 8px; padding: 12px 16px; background: #f6f7f9; border-bottom: 1px solid #e4e7ee; }
#dispute .dc-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #cfd4dd; }
#dispute .dc-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 24px; border-bottom: 1px solid #e4e7ee; }
#dispute .dc-board .chip { padding: 4px 14px; border-color: #cfd4dd; font-size: var(--small); white-space: nowrap; color: var(--grey); }
#dispute .dc-board .chip.solid { border-color: #3355e0; background: #3355e0; color: #fff; }
#dispute .dc-head .chip + .chip { margin-left: 8px; }
#dispute .dc-bar { display: flex; gap: 4px; margin: 24px 24px 12px; }
#dispute .dc-bar div { min-width: 0; padding: 16px 20px; border-radius: 8px; background: #0f766e; color: #d5f2ee; font-size: var(--small); }
#dispute .dc-bar b { display: block; font-size: var(--lead); line-height: 1.2; letter-spacing: -0.5px; color: #fff; }
#dispute .dc-bar span { display: block; margin-top: 12px; color: #fff; }
#dispute .dc-bar div:nth-child(2) { background: #c2410c; color: #ffe6d8; }
#dispute .dc-bar div:nth-child(3) { background: #3355e0; color: #dfe5ff; }
#dispute .dc-table { width: calc(100% - 48px); margin: 0 24px 16px; border-collapse: collapse; font-size: var(--small); }
#dispute .dc-table th { padding: 10px 16px 10px 0; text-align: left; font-weight: normal; color: var(--soft); border-bottom: 1px solid #e4e7ee; }
#dispute .dc-table td { padding: 12px 16px 12px 0; border-top: 1px solid #eef0f4; }
#dispute .dc-table td:nth-child(2) { color: var(--grey); }
#dispute .dc-table td:not(:nth-child(2)) { white-space: nowrap; }
#dispute .dc-table td:nth-child(3) .chip { border-color: transparent; background: #eef0f5; color: var(--ink); }

/* ==== charts ==== */
/* A chart is a figure.plot holding its data as JSON and a plain table of the same figures; assets/charts.js draws it.
   Type sizes and greys are the theme's. The series colours are the charts' own: used in this order, and checked
   together for colour-blind separation and for contrast on the white page and on the ink tooltip. */
.plot { position: relative; --series-1: #3355e0; --series-2: #e8590c; --series-3: #0d9488; }

/* the table: the figure itself without JavaScript, and what a screen reader gets once the chart is drawn */
.plot table { width: 100%; border-collapse: collapse; font-size: var(--small); font-variant-numeric: tabular-nums; }
.plot th, .plot td { padding: 10px 0 10px 24px; border-bottom: 1px solid var(--line); font-weight: normal; text-align: right; }
.plot th:first-child { padding-left: 0; text-align: left; }
.plot thead th { border-bottom-color: var(--ink); color: var(--grey); }
.plot tfoot th, .plot tfoot td { border-bottom: 0; font-weight: bold; }
.plot caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* out of sight, still a table: taken out of the flow at the figure's own width and clipped to nothing */
.plot.is-drawn table { position: absolute; table-layout: fixed; overflow-wrap: anywhere; clip-path: inset(50%); pointer-events: none; }
/* while the scripts load, hold the chart's place and keep the table from flashing; .is-off is a chart that could
   not be drawn, which leaves the table showing */
@media (scripting: enabled) {
  .plot:not(.is-off) { min-height: 300px; aspect-ratio: 2 / 1; }
  .plot.is-keyed { aspect-ratio: auto; }
  .plot:not(.is-off) table { position: absolute; table-layout: fixed; overflow-wrap: anywhere; clip-path: inset(50%); pointer-events: none; }
}

/* the drawing: hairline gridlines, axis and month labels in grey, 2.5px lines, a ringed dot where each line ends */
.plot-frame { position: relative; touch-action: pan-y; }
.plot-frame:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.plot-frame svg { display: block; overflow: visible; font: inherit; font-size: var(--small); color: var(--grey); }
.plot-line path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plot-end circle, .plot-hover circle { stroke: #fff; stroke-width: 2; }
.plot-hover line { stroke: var(--ink); }
.plot.is-off .plot-key, .plot.is-off .plot-frame { display: none; }

/* labels: each line's final total in its colour, then its name, set at the end of the line */
.plot-key { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
.plot-key li { position: absolute; margin-top: calc(var(--body) * -0.6); font-size: var(--small); line-height: 1.3; color: var(--grey); white-space: nowrap; }
.plot-key b { display: block; font-size: var(--body); line-height: 1.2; color: var(--series); }
/* where they would crowd, or on a narrow page, the labels become a row above the drawing */
.plot.is-keyed .plot-key { position: static; display: flex; flex-wrap: wrap; gap: 16px 48px; margin-bottom: 28px; }
.plot.is-keyed .plot-key li { position: static; margin-top: 0; padding-left: 12px; border-left: 2.5px solid var(--series); }

/* the site's tooltip: white on ink, a 1px border; the day, then every series' total on that day */
.plot-tip { position: absolute; left: 0; top: 0; z-index: 2; padding: 10px 14px; border: 1px solid #fff; background: var(--ink); color: #fff; font-size: var(--small); line-height: 1.5; white-space: nowrap; pointer-events: none; }
.plot-tip > b { display: block; margin-bottom: 2px; }
.plot-tip > span { display: flex; align-items: center; gap: 10px; color: var(--on-dark); }
.plot-tip i { flex: none; width: 14px; height: 2.5px; background: var(--series); }
.plot-tip span b { margin-left: auto; padding-left: 28px; color: #fff; font-variant-numeric: tabular-nums; }

/* the lines draw in once, then the dots and labels arrive; no motion for visitors who ask for less, or in print */
@media screen and (prefers-reduced-motion: no-preference) {
  .plot.is-waiting .plot-line, .plot.is-waiting .plot-end, .plot.is-waiting .plot-key li { visibility: hidden; }
  .plot.is-drawing .plot-line path { stroke-dasharray: 1; animation: plot-draw 1.8s cubic-bezier(0.45, 0, 0.15, 1) both; }
  .plot.is-drawing .plot-end, .plot.is-drawing .plot-key li { animation: plot-arrive 0.5s ease-out 1.7s both; }
}
@keyframes plot-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes plot-arrive { from { opacity: 0; } }

/* ==== flipbook ====
   A booklet whose pages turn (flipbook.js). The book lies on a tinted desk; a cover sits in the middle and
   slides over as it opens. Before the script runs, and without it, the figure is its cover. */
.flipbook { position: relative; margin: 0 0 24px; padding: 56px 96px 20px; background: #f1f1ef; outline: none; }
.flipbook > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 700px; margin: 0 auto 36px; box-shadow: 0 14px 34px rgba(17, 17, 17, 0.16); }
.flipbook .fb-stage { max-width: 986px; margin: 0 auto; touch-action: pan-y; }
.flipbook .fb-book { position: relative; aspect-ratio: 2000 / 1420; perspective: 2600px; transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); }
.flipbook .fb-half, .flipbook .fb-leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.flipbook .fb-l { left: 0; }
.flipbook .fb-r, .flipbook .fb-leaf { left: 50%; }
.flipbook .fb-half, .flipbook .fb-face { background: #fff; box-shadow: 0 14px 34px rgba(17, 17, 17, 0.16); cursor: pointer; }
.flipbook .fb-none { visibility: hidden; }
.flipbook .fb-leaf { transform-origin: left center; transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); }
.flipbook .fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipbook .fb-back { transform: rotateY(180deg); }
.flipbook .fb-book img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* the gutter: each page darkens a little toward the spine */
.flipbook .fb-half::after, .flipbook .fb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.flipbook .fb-l::after, .flipbook .fb-back::after { background: linear-gradient(to left, rgba(17, 17, 17, 0.09), rgba(17, 17, 17, 0) 6%); }
.flipbook .fb-r::after, .flipbook .fb-front::after { background: linear-gradient(to right, rgba(17, 17, 17, 0.09), rgba(17, 17, 17, 0) 6%); }
.flipbook .fb-prev, .flipbook .fb-next { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.flipbook .fb-prev { left: 24px; }
.flipbook .fb-next { right: 24px; }
.flipbook .fb-prev svg, .flipbook .fb-next svg { display: block; width: 16px; height: 16px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.flipbook .fb-prev:hover, .flipbook .fb-next:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.flipbook .fb-prev:disabled, .flipbook .fb-next:disabled { visibility: hidden; }
.flipbook:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.flipbook .fb-count { margin: 20px 0 0; text-align: center; font-size: var(--small); color: var(--soft); font-variant-numeric: tabular-nums; }
/* one page at a time on a narrow column: the right-hand page fills the stage and its leaf turns off the edge */
.flipbook.fb-single { padding: 24px 16px 12px; }
.flipbook.fb-single .fb-stage { max-width: 420px; overflow: hidden; }
.flipbook.fb-single .fb-book { width: 200%; margin-left: -100%; }
.flipbook.fb-single .fb-prev, .flipbook.fb-single .fb-next { top: auto; bottom: 6px; width: 36px; height: 36px; margin: 0; }
.flipbook.fb-single .fb-prev { left: 16px; }
.flipbook.fb-single .fb-next { right: 16px; }
.blog-content figure.flipbook { margin-block: 34px; padding: 40px 72px 16px; }
.blog-content figure.flipbook.fb-single { padding: 24px 16px 12px; }
@media (prefers-reduced-motion: reduce) { .flipbook .fb-book, .flipbook .fb-leaf { transition: none; } }
@media print { .flipbook .fb-prev, .flipbook .fb-next, .flipbook .fb-count { display: none; } }