/*
Theme Name: Reaboi Paper
Author: David Reaboi
Description: Lean theme for davereaboi.com. The Paper look: Adobe Jenson, lowercase small caps, warm paper grain. No page builder, no script libraries.
Version: 1.3.224
Requires at least: 6.5
Requires PHP: 8.0
License: All rights reserved
Text Domain: reaboi
*/
/* ---------- Tokens (locked 4 Oct 2026; red changed 6 Oct 2026) ---------- */
:root{
--paper:#F8F5EE;
--ink:#1C1C1C;
--stone:#5A5A58;
--accent-on-ink:#F0522B; /* the same red, brightened so it reads on the dark band (David, 6 Oct 2026) */
--accent:#C6300D; /* the site's one red (David, 6 Oct 2026): the red of the home band, rgb(198,48,13). Was #C73A26. */
--on-accent:#FFFFFF;
--on-ink:#F8F5EE;
--on-ink-muted:#C4C0B6;
--rule:rgba(28,28,28,.16);
--rule-strong:rgba(28,28,28,.28);
--gutter:56px;
--measure:660px;
/* Typeface rule (David, 5 Oct 2026): everything is Adobe Jenson Caption.
The one exception is the Epstein Conspiracy title, set in Jenson Display. */
--serif:"adobe-jenson-pro-caption",Georgia,"Times New Roman",serif;
--serif-title:"adobe-jenson-pro-caption",Georgia,"Times New Roman",serif; /* Jenson Display retired site-wide; Caption everywhere (David, 10 Oct 2026) */
--shadow-book:0 30px 60px -24px rgba(28,28,28,.55),0 10px 18px -10px rgba(28,28,28,.35),0 1px 3px rgba(28,28,28,.25);
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
background-color:var(--paper);
background-image:url(assets/img/paper-grain.jpg);
background-size:450px 450px;
color:var(--ink);
font-family:var(--serif);
font-size:21px;
line-height:1.55;
font-variant-numeric:oldstyle-nums;
text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3,h4{font-weight:400}
button{font-family:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-ink);padding:10px 16px;z-index:10}
.skip:focus{left:8px;top:8px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[id]{scroll-margin-top:24px}
/* ---------- Shared pieces ---------- */
.label{margin:0;font-weight:400;font-size:22px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}
.btn{display:inline-block;font-family:inherit;font-size:21px;line-height:1.2;letter-spacing:.08em;font-variant-caps:all-small-caps;padding:12px 30px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);padding-left:29px;padding-right:29px}
.btn--primary:hover{color:var(--on-accent)}
.btn--card{padding:11px 26px}
.btn--primary.btn--card{padding-left:25px;padding-right:25px}
.link{display:inline-block;font-size:20px;line-height:normal;padding:10px 0 1px;border-bottom:1px solid var(--ink)} /* the underline sits close under the words, everywhere (David, 6 Oct 2026) */
.book{position:relative;display:block;box-shadow:var(--shadow-book)}
.book img{display:block;width:100%;height:auto}
.book::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.30) 0,rgba(0,0,0,.10) 1%,rgba(255,255,255,.16) 2.1%,rgba(0,0,0,.12) 3.4%,rgba(0,0,0,0) 6.5%,rgba(0,0,0,0) 97%,rgba(0,0,0,.08) 100%)}
.title{margin:0;font-family:var(--serif-title);font-weight:400;font-size:clamp(52px,5.6vw,82px);line-height:.84;letter-spacing:-.01em;color:var(--accent)}
.title small{font-size:.62em}
.sub{margin:0;max-width:500px;font-style:italic;font-size:25px;line-height:1.36}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;padding-top:10px}
/* ---------- Header and footer ---------- */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 40px;padding:24px var(--gutter);border-bottom:1px solid var(--rule)}
.wordmark{font-size:24px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps;padding:8px 0}
.nav ul{display:flex;flex-wrap:wrap;gap:4px 36px;list-style:none;margin:0;padding:0;font-size:19px;line-height:normal}
.nav a{display:block;padding:10px 0}
/* The main menu's underline sits closer under the word and is a shade heavier (David, 6 Oct 2026). */
.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-parent>a,.nav .current-page-ancestor>a,.nav a[aria-current]{padding-bottom:5px;margin-bottom:3px;border-bottom:2px solid var(--ink)}
.nav .util a{color:var(--stone)}
.nav .util a:hover{color:var(--accent)}
.menubtn{display:none;align-items:center;gap:10px;min-height:44px;background:transparent;border:0;padding:0;color:var(--ink);font-size:22px;letter-spacing:.1em;font-variant-caps:all-small-caps;cursor:pointer}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding:28px var(--gutter);border-top:1px solid var(--rule);font-size:17px;line-height:normal;color:var(--stone)}
.site-footer .wordmark{font-size:21px;padding:0;color:var(--stone)}
.site-footer a{padding:12px 0;color:var(--stone)}
.site-footer a:hover{color:var(--ink)}
.footnav{display:flex;flex-wrap:wrap;gap:0 26px}
/* ---------- Hero (book page and home slides) ---------- */
.hero{width:100%;max-width:1180px;margin:0 auto;padding:80px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:56px 88px}
.covercol{flex:0 1 400px;min-width:0}
.hero__text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:26px}
.jump{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:10px;padding-top:12px;border-top:1px solid var(--rule-strong);font-size:21px;line-height:normal;letter-spacing:.12em;font-variant-caps:all-small-caps}
.jump a{padding:10px 0}
.jump i{font-style:normal;color:var(--accent)}
/* ---------- Home slider ---------- */
.slider{flex:1 1 auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.slider::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center}
.slide .hero{padding:40px var(--gutter) 76px}
.slide .covercol{order:-1}
.slide .btnrow{align-items:center;gap:16px 32px}
.slide .link{padding:12px 0 1px}
.slider-ui{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter) 32px}
.bars{display:flex;gap:10px}
.bars span{width:56px;height:2px;background:rgba(28,28,28,.22)}
.bars .on{background:var(--ink)}
.arrows{display:flex;gap:10px}
.arrows button{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(28,28,28,.4);color:var(--ink);cursor:pointer;padding:0}
/* ---------- Ink band ---------- */
.band{width:100%;margin:0;background-color:var(--ink);background-image:url(assets/img/ink-grain.jpg);background-size:450px 450px;color:var(--on-ink);padding:92px var(--gutter)}
.band figure{margin:0 auto;max-width:860px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.band blockquote{margin:0;font-style:italic;font-size:38px;line-height:1.3}
.band figcaption{font-size:22px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--on-ink-muted)}
.band figcaption b{font-weight:400;color:var(--accent-on-ink)} /* the blurb name is always red (David, 6 Oct 2026) */
.band--plain blockquote{font-style:normal;font-size:30px;line-height:1.35}
.band .link{color:var(--on-ink);border-bottom-color:var(--on-ink)}
.band .link:hover{color:var(--on-ink-muted)}
/* ---------- Section rows ---------- */
.sec{width:100%;max-width:1180px;margin:0 auto;padding:64px var(--gutter);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:24px 64px}
.sec>.label{flex:0 0 240px;padding-top:4px}
.sec__body{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:22px}
.sec__body p{margin:0}
.measure{max-width:var(--measure)}
/* Opening text on every page (David, 6 Oct 2026: too big; slightly smaller, still larger than the 21px body). */
.lede{font-size:27px;line-height:1.34}
.headnote{font-style:italic;line-height:1.5;color:var(--stone)}
.dropcap{font-size:23px}
.dropcap::first-letter{-webkit-initial-letter:3;initial-letter:3;color:var(--accent);margin-right:12px}
@supports not ((initial-letter:3) or (-webkit-initial-letter:3)){
.dropcap::first-letter{float:left;font-size:104px;line-height:.8;padding:16px 12px 0 0}
}
.strip{width:100%;height:260px;overflow:hidden;background:var(--ink)}
.strip img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Praise, video, press (switched on per book when there is content) */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px 48px}
.quote{margin:0;display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--accent);padding-top:20px}
.quotes .quote:first-child{border-top:0;padding-top:0} /* no red line above the first blurb, only above the ones after it (David, 6 Oct 2026) */
.quote blockquote{margin:0;font-style:italic;font-size:23px;line-height:1.42}
.quote blockquote i{font-style:normal} /* a book or magazine title inside an italic blurb is set roman */
.quote figcaption{font-size:20px;line-height:1.3;color:var(--stone)}
/* The name under a blurb is always the site's red (David, 6 Oct 2026). */
.quote figcaption b{display:block;font-weight:400;font-size:22px;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--accent)}
.rows{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 32px;padding:18px 0;border-bottom:1px solid var(--rule)}
.row__title{font-size:25px;line-height:1.25;overflow-wrap:break-word;min-width:0}
.row__meta{font-size:21px;line-height:1.3;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}
.row__desc{flex:1 1 100%;max-width:var(--measure);font-size:19px;line-height:1.45;color:var(--stone)}
/* Press Kit (David, 6 Oct 2026): each row keeps its hairline and carries one italic sentence under the title;
the full-width lines between the sections are the ones removed ("so many lines"). */
.rows--desc .row{gap:3px 32px;padding:16px 0 18px}
/* Lines only between entries, never after the last, and no wider than the text (David, 6 Oct 2026: keep the lines, less horizontal action). */
.rows--desc{max-width:var(--measure)}
.rows--desc .row:first-child{padding-top:0}
.rows--desc .row:last-child{border-bottom:0;padding-bottom:0}
.rows--desc .row__desc{font-style:italic;font-size:20px;line-height:1.4}
.sec--bare{border-top:0;padding-top:30px;padding-bottom:30px}
.sec--bare:last-child{padding-bottom:88px}
a.row:hover .row__desc{color:var(--stone)}
a.row:hover .row__meta{color:var(--stone)}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.video{display:flex;flex-direction:column;gap:12px}
.video__frame{aspect-ratio:16/9;width:100%;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.video__frame img{width:100%;height:100%;object-fit:cover}
.video__title{font-size:23px;line-height:1.25}
/* Buy cards, details, author, also-by */
.details{flex:1 1 480px;min-width:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px 40px;font-size:22px;line-height:1.3}
.details div{display:flex;flex-direction:column;gap:2px}
.details dt{font-size:21px;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}
.details dd{margin:0}
.details dd a{border-bottom:1px solid var(--ink)}
.nowrap{white-space:nowrap}
.sec__body.split{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:28px 40px}
.sec__body.split--center{align-items:center}
.split__media{flex:0 0 auto;width:240px}
.split__media img{display:block;width:240px;height:240px;object-fit:cover}
.split__media.book img,.split__media .book img{width:100%;height:auto}
.split__text{flex:1 1 320px;min-width:0;max-width:560px;display:flex;flex-direction:column;gap:18px}
.split__text h3{margin:0;font-size:32px;line-height:1.15}
.split__text .sub{font-size:22px;line-height:1.4;max-width:none}
.split--center .split__text{gap:14px}
/* ---------- Designed pages (home sections, About, Book Design, Contact) ---------- */
.title--caption{font-family:var(--serif)}
.intro{width:100%;max-width:1180px;margin:0 auto;padding:64px var(--gutter) 48px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.intro__statement{margin:0;max-width:1000px;font-weight:400;font-size:clamp(27px,2.7vw,37px);line-height:1.24;letter-spacing:-.005em}
.pagehead .intro__statement{text-align:left}
.areas{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter) 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px}
.area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:20px;border-top:1px solid var(--rule-strong)}
.area p{margin:0;font-size:20px;line-height:1.5}
.area .link{margin-top:auto;font-size:19px}
.pagehead{width:100%;max-width:1180px;margin:0 auto;padding:64px var(--gutter) 52px;display:flex;flex-direction:column;gap:18px}
.pagehead p{margin:0;max-width:860px}
.portrait{display:block;flex:0 0 auto;width:240px;height:240px;object-fit:cover}
.links{display:flex;flex-wrap:wrap;gap:4px 34px}
.h2{margin:0;font-size:32px;line-height:1.12}
/* The small heading inside a section ("An interview at length"): Italic Caption, sitting close over the text it heads
(David, 6 Oct 2026). */
.h3{margin:0;font-size:25px;line-height:1.2;font-style:italic}
/* The Viral Libels page (David, 7 Oct 2026): each chapter's title stands in the left column in small caps, with its summary
or its claims at the right, as the labels do on the Press Kit page. One rule opens each part; no rules between chapters. */
.bookpart .h2{margin-bottom:0}
.bookpart+.bookch{padding-top:14px}
/* The claims are ruled rows without bullets, like the reading lists on Areas of Expertise; the first one starts level with the chapter title. */
.bookch .rows .row:first-child{padding-top:0}
@media (max-width:900px){.bookpart>.label{display:none}}
.sec__body>.h3{margin-bottom:-12px}
.note{margin:0;font-size:18px;line-height:1.5;color:var(--stone)}
.price{margin:0;font-size:22px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--accent)}
.list{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:10px}
.list li::marker{color:var(--accent)}
.sec__body a:not(.btn):not(.link):not(.row):not(.book){border-bottom:1px solid var(--ink)}
.sec__body a:not(.btn):not(.link):not(.row):not(.book):hover{border-bottom-color:var(--accent)}
.offer{display:flex;flex-direction:column;gap:14px;padding-top:30px;border-top:1px solid var(--rule)}
.offer:first-child{padding-top:0;border-top:0}
/* A priced option on the Book Design detail pages, with its line drawing (David, 6 Oct 2026: the other Book Design pages
have the drawings too). The heading and price keep the page's left edge; the drawing stands at the right of them. */
.offer__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px 40px}
.offer__words{display:flex;flex-direction:column;gap:14px;min-width:0;padding-top:6px}
.sec__body>.offer__head .offer__words{gap:22px}
.offer__head .drawing{flex:none;color:var(--ink)}
@media (max-width:700px){
.offer__head{flex-direction:column-reverse;align-items:flex-start;gap:16px}
.offer__words{padding-top:0}
}
.gallery-block{width:100%;max-width:1180px;margin:0 auto;padding:8px var(--gutter) 60px;display:flex;flex-direction:column;gap:30px}
/* Section menus */
/* No line under the sub-menu (David, 6 Oct 2026: too many horizontal lines; the second one is not needed). */
.subnav{display:flex;flex-wrap:wrap;gap:0 34px;padding:0 var(--gutter);padding-top:16px;font-size:20px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps}
.subnav a{padding:15px 0;color:var(--stone)}
.subnav a:hover{color:var(--accent)}
/* The book's name is italic in the EDUT sub-menu, on desktop and in the phone list (David, 7 Oct 2026). The menu says only "Viral Libels"; the page title carries the subtitle. */
.subnav a[href$="/edut/viral-libels/"]{font-style:italic}
/* The line under the current page sits close under its word, on every screen (David, 6 Oct 2026: less space between
underline and text; then "computers too"). It used to rest on the bar's bottom edge. */
.subnav a[aria-current]{color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) left calc(100% - 10px) / 100% 1px no-repeat}
/* Section sub-menus on phones: one line always naming the section's main page, with a small arrow; tap it for the
section's pages (David chose this of four mockups, 6 Oct 2026; the page being read is shown darker in the list). The row of links is for wider screens.
The section's name above the page title is hidden on phones, because this line already says where one is. */
.subnav__m{display:none}
@media (max-width:700px){
.subnav>a{display:none}
.subnav__m{display:block}
.subnav__m summary{display:inline-block;padding:15px 0;list-style:none;cursor:pointer;color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) left calc(100% - 10px) / 100% 1px no-repeat;-webkit-tap-highlight-color:transparent}
.subnav__m summary::-webkit-details-marker{display:none}
.subnav__m summary::marker{content:""}
.subnav__m summary svg{margin-left:10px;vertical-align:2px;transition:transform .15s}
.subnav__m[open] summary svg{transform:rotate(180deg)}
.subnav__m a{display:block;padding:9px 0;color:var(--stone)}
.subnav__m a:first-of-type{margin-top:8px}
.subnav__m a[aria-current]{color:var(--ink);background:none}
body:has(.subnav) .pagehead>.label{display:none}
}
/* Viral Libels: the top of the page is one of the site's book pages (the same hero, cover column,
title, subtitle and label sizes), with the section label above it and two paragraphs of ordinary
text under the subtitle (David, 7 Oct 2026). The red block stands in for the cover until he supplies one. */
.hero.bookhero{padding-top:var(--title-top);padding-bottom:92px} /* the same top and bottom space as the other EDUT pages' opening block (David, 7 Oct 2026: the spacing must match) */
.bookhero>.label{flex:0 0 100%;margin-bottom:-38px}
.bookhero .hero__text p:not(.sub){margin:0;max-width:var(--measure)}
.bookhero .sub+p{margin-top:6px}
.bookhero .hero__text p:not(.sub)+p{margin-top:-6px}
.book--blank{aspect-ratio:647 / 1000;background:var(--accent)}
@media (min-width:701px) and (max-width:1047px){
.hero.bookhero{flex-wrap:wrap}
.hero.bookhero .hero__text{min-width:300px}
}
@media (max-width:700px){
.hero.bookhero{padding-bottom:52px}
.bookhero>.label{display:none}
.bookhero .sub br{display:none}
}
.catnav{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.catnav a{padding:16px 0 18px;border-top:1px solid var(--rule-strong);font-size:22px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps}
.catnav a[aria-current]{border-top:2px solid var(--accent);padding-top:15px}
.catnav--end{margin-top:8px;margin-bottom:64px}
.project-cta{position:fixed;right:24px;bottom:24px;z-index:5;box-shadow:0 12px 26px -12px rgba(28,28,28,.6)}
/* Portfolio covers */
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:48px 44px;align-items:start}
.covers--row{grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 32px}
.covers--five{grid-template-columns:repeat(5,minmax(0,1fr));gap:44px 36px}
.covers--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 48px}
.cover{margin:0;display:flex;flex-direction:column;gap:16px;min-width:0}
.cover figcaption{display:flex;flex-direction:column;gap:3px;font-size:18px;line-height:1.3}
.cover figcaption b{font-weight:400;font-size:20px;line-height:1.25}
.cover figcaption span{color:var(--stone)}
/* Forms */
.form{display:flex;flex-direction:column;gap:24px;max-width:var(--measure)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:21px;line-height:1.3;letter-spacing:.1em;font-variant-caps:all-small-caps}
.field .optional{color:var(--stone)}
.field small{font-size:18px;line-height:1.45;color:var(--stone)}
.field input,.field textarea,.field select{width:100%;margin:0;font:inherit;font-size:20px;line-height:1.4;color:var(--ink);background-color:rgba(255,255,255,.5);border:1px solid rgba(28,28,28,.45);border-radius:0;padding:12px 14px}
.field textarea{resize:vertical;min-height:130px}
.field select{-webkit-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%231C1C1C' stroke-width='1.4'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form-group{margin:0;padding:26px 0 0;border:0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:24px;min-width:0}
.form-group legend{padding:0 14px 0 0;float:left;width:100%;margin-bottom:2px}
.form-note{margin:0;font-size:18px;color:var(--stone)}
.form-error{margin:0;font-size:20px;color:var(--accent)}
.form-done{margin:0;max-width:var(--measure);padding-top:20px;border-top:2px solid var(--accent);font-size:25px;line-height:1.35}
.form .btn{align-self:flex-start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}
/* ---------- Articles: list and single ---------- */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:64px var(--gutter)}
.page-head{display:flex;flex-direction:column;gap:14px;padding-bottom:36px}
.page-title{overflow-wrap:break-word;margin:0;font-size:clamp(40px,4.4vw,58px);line-height:1.02;letter-spacing:-.01em}
/* The EDUT mark (David, 6 Oct 2026): at the left of the EDUT page's title, as tall as the title's capitals, and
small beside EDUT in the main menu. It is red wherever it appears; the letter is cut out, so the paper shows through. */
.mark{display:inline-block;width:.74em;height:.74em;vertical-align:baseline;color:var(--accent)}
.page-title .mark{margin-right:.28em;transform:translateY(.03em)}
.nav a .mark{width:.8em;height:.8em;margin-right:.36em;transform:translateY(.05em)}
.nav a:hover .mark{color:var(--accent)}
/* ...and tiny ahead of the small-caps EDUT label above the sub-pages' titles (David, 6 Oct 2026). */
.label .mark{width:.52em;height:.52em;margin-right:.22em;transform:translateY(.01em)}
.rows--list .row{padding:22px 0}
.rows--list .row:first-child{border-top:1px solid var(--rule)}
.rows--list .row__title{flex:1 1 420px;max-width:760px;font-size:27px}
.pager{display:flex;justify-content:space-between;gap:24px;padding-top:36px}
.article{max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding:72px var(--gutter)}
.article__head{display:flex;flex-direction:column;gap:18px;padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--rule)}
.article__title{overflow-wrap:break-word;margin:0;font-size:clamp(38px,4.2vw,56px);line-height:1.04;letter-spacing:-.01em}
.article__foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
.entry{overflow-wrap:break-word}
.entry>*{margin:0 0 22px}
.entry>*:last-child{margin-bottom:0}
.entry h2{font-size:32px;line-height:1.15;margin-top:44px}
.entry h3{font-size:26px;line-height:1.2;margin-top:36px}
.entry h4{font-size:22px;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone);margin-top:32px}
.entry a{border-bottom:1px solid var(--ink)}
.entry a:hover{border-bottom-color:var(--accent)}
.entry a:has(img){border-bottom:0}
.entry pre{overflow-x:auto;font-size:17px;line-height:1.5}
.entry .page-links{font-size:20px;color:var(--stone)}
.entry blockquote{margin-left:0;margin-right:0;padding:4px 0 4px 24px;border-left:2px solid var(--accent);font-style:italic}
.entry blockquote p{margin:0 0 14px}
.entry blockquote p:last-child{margin-bottom:0}
.entry ul,.entry ol{padding-left:1.2em}
.entry li{margin-bottom:8px}
.entry hr{border:0;border-top:1px solid var(--rule);margin:44px 0}
.entry figure{margin-left:0;margin-right:0}
.entry img{display:block;max-width:100%;height:auto}
.entry figcaption,.entry .wp-caption-text{margin-top:10px;font-size:17px;line-height:1.4;color:var(--stone)}
.entry .wp-caption{max-width:100%}
.entry iframe,.entry video{max-width:100%}
.entry .wp-block-embed__wrapper iframe,.entry iframe[src*="youtube"],.entry iframe[src*="rumble"],.entry iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9}
.entry table{width:100%;border-collapse:collapse;font-size:19px}
.entry th,.entry td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
.entry th{font-weight:400;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}
.entry .alignleft{float:left;margin:6px 28px 14px 0;max-width:50%}
.entry .alignright{float:right;margin:6px 0 14px 28px;max-width:50%}
.entry .aligncenter{margin-left:auto;margin-right:auto}
.entry::after{content:"";display:block;clear:both}
.entry input[type=text],.entry input[type=email],.entry input[type=tel],.entry input[type=url],.entry textarea,.entry select{width:100%;font:inherit;color:var(--ink);background:rgba(255,255,255,.5);border:1px solid rgba(28,28,28,.45);border-radius:0;padding:12px 14px}
.entry label{display:block;font-size:21px;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}
.entry input[type=submit],.entry button[type=submit]{display:inline-block;font:inherit;font-size:21px;line-height:1.2;letter-spacing:.08em;font-variant-caps:all-small-caps;padding:12px 30px;border:1px solid var(--accent);border-radius:0;background:var(--accent);color:var(--on-accent);cursor:pointer}
.searchform{display:flex;flex-wrap:wrap;gap:12px;max-width:520px}
.searchform input[type=search]{flex:1 1 180px;min-width:0;font:inherit;border:1px solid rgba(28,28,28,.45);border-radius:0;background:rgba(255,255,255,.5);padding:11px 14px}
/* ---------- Narrow screens: the menu folds behind a button ---------- */
@media (max-width:900px){
.menubtn{display:inline-flex}
.nav{flex:1 1 100%}
.js .nav{display:none}
.js .nav.is-open{display:block}
.nav ul{flex-direction:column;gap:0;font-size:22px;padding:8px 0 4px}
.nav a{padding:12px 0;border-bottom:1px solid var(--rule)}
.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-parent>a,.nav a[aria-current]{border-bottom:1px solid var(--rule);color:var(--accent)}
}
html:not(.js) .menubtn{display:none}
/* ---------- Tablet: keep cover and text side by side ---------- */
@media (min-width:701px) and (max-width:1047px){
.hero{flex-wrap:nowrap;gap:40px}
.covercol{flex:0 1 280px}
.hero__text{flex:1 1 0}
}
/* ---------- Phone ---------- */
@media (max-width:700px){
:root{--gutter:22px}
.hero,.slide .hero{padding-top:32px;padding-bottom:40px;gap:30px}
.covercol,.slide .covercol{order:-1;flex:0 0 auto;width:62%;max-width:250px}
.title{font-size:54px}
.sub{font-size:22px}
.areas{grid-template-columns:1fr;gap:26px}
.intro{text-align:left;align-items:flex-start}
.btnrow{flex-direction:column;align-items:stretch}
.slide .btnrow{align-items:stretch}
.btn{text-align:center}
.btnrow .link{align-self:flex-start}
.home-main{min-height:0}
.sec{padding-top:44px;padding-bottom:44px}
.sec>.label{flex:1 1 100%}
.band{padding:56px var(--gutter)}
.band blockquote{font-size:27px}
.strip{height:150px}
.lede{font-size:23px}
.wrap{padding-top:44px;padding-bottom:44px}
.article{padding-top:44px;padding-bottom:44px}
.entry .alignleft,.entry .alignright{float:none;margin:0 0 22px;max-width:100%}
.rows--list .row__title{font-size:24px}
.intro{padding-top:36px;padding-bottom:28px}
.pagehead{padding-top:40px;padding-bottom:36px}
.band--plain blockquote{font-size:24px}
.covers,.covers--five,.covers--four{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 26px}
.covers--row{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
.covers--row .cover figcaption{font-size:15px}
.covers--row .cover figcaption b{font-size:16px}
.catnav{grid-template-columns:1fr;gap:0}
.catnav a{padding:13px 0}
.subnav{gap:0 24px;font-size:19px}
.project-cta{right:14px;bottom:14px;padding:11px 20px;font-size:19px}
.portrait{width:180px;height:180px}
.site-footer{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
@media print{
body{background:none}
.site-header .nav,.menubtn,.slider-ui,.site-footer{display:none}
}
/* ---------- Additions, 5 Oct 2026 (the look above is unchanged) ---------- */
/* Home page: the Book design & production block David approved. */
.block{width:100%;max-width:1180px;margin:0 auto;padding:72px var(--gutter) 88px;border-top:1px solid var(--rule)}
.block__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 32px;margin-bottom:36px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.block__head .label{font-size:21px;color:var(--ink)}
.block__head a{font-size:21px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--accent)}
.block__head a:hover{color:var(--ink)}
.block p{margin:0}
.block .covers--row{gap:36px 44px}
.block .credit{margin-top:22px;color:var(--stone)}
.block .pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 72px;margin-top:44px;align-items:start}
.block .pair>*{min-width:0}
.block .pair>div{display:flex;flex-direction:column;gap:18px}
.block .lede{font-size:26px;line-height:1.38}
/* Home page: one small block per area. Label on the left, a few lines and a link, a small photograph. */
.sec__body.mini{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px 64px;align-items:start}
.mini__text{max-width:440px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mini img{display:block;width:220px;height:220px;object-fit:cover}
/* Book pages: the opening (cover, title, buttons) is exactly one screen tall, below the
site header (95px). On short screens the cover shrinks so nothing spills past the fold. */
.hero--full{--top:95px;--pad:clamp(28px,6vh,80px);min-height:calc(100vh - var(--top));min-height:calc(100svh - var(--top));padding-top:var(--pad);padding-bottom:var(--pad)}
.admin-bar .hero--full{--top:127px}
@media (min-width:701px){
.hero--full .covercol{flex:0 1 min(400px,calc((100vh - var(--top) - 2 * var(--pad)) * .647))}
}
/* Book Design covers open larger when clicked. */
a[data-zoom]{cursor:zoom-in}
dialog.zoom{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(28,28,28,.94);cursor:zoom-out}
dialog.zoom[open]{display:flex;align-items:center;justify-content:center}
dialog.zoom::backdrop{background:transparent}
dialog.zoom img{display:block;width:auto;height:auto;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);box-shadow:var(--shadow-book)}
dialog.zoom button{position:absolute;top:10px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--on-ink);cursor:pointer}
/* Get a copy on the book pages: the two buttons alone, level with the section label. */
.btnrow--flush{padding-top:0}
@media (max-width:900px){
.block .pair{grid-template-columns:1fr}
}
@media (max-width:700px){
.sec__body.mini{grid-template-columns:1fr}
.mini img{width:160px;height:160px}
.block{padding-top:52px;padding-bottom:60px}
.block__head{margin-bottom:26px}
.block .covers--row{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.block .pair{margin-top:32px}
.block .lede{font-size:24px}
}
/* No diamond at the end of a line of the book pages' section menu, on phones and tablets (assets/jump.js marks it):
it turns into a line break. On computers the menu is one line and every diamond shows. */
@media (max-width:1024px){
.jump i.is-break{flex-basis:100%;height:0;overflow:hidden;visibility:hidden}
}
/* Book pages and the home page slider on phones: the opening text is centered under the cover. */
@media (max-width:700px){
.hero--full .hero__text,.slide .hero__text{align-items:center;text-align:center}
.hero--full .btnrow,.hero--full .jump,.slide .btnrow{align-self:stretch}
.hero--full .jump{justify-content:center}
.slide .btnrow .link{align-self:center}
}
/* Book titles are set in Adobe Jenson Pro (the regular cut); everything else on the site is Caption. */
.title,.title--caption{font-family:"adobe-jenson-pro",var(--serif);font-weight:400}
/* Press and interviews on a book page: the headline, then outlet and date in italics.
No small caps here, so the section label never sits against more small caps. */
.press{gap:0}
.press__item{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:40px 0;border-top:1px solid var(--rule)}
.sec__body a.press__title:not(.btn):not(.link):not(.row):not(.book){border-bottom:0}
.press__item:first-child{padding-top:0;border-top:0}
.press__item:last-child{padding-bottom:0}
.press__title{max-width:720px;font-size:30px;line-height:1.3}
.press__by{font-style:italic;font-size:22px;line-height:1.4}
.press__by i{font-style:normal;color:var(--accent)}
.press__date{color:var(--stone)}
a.press__title:hover{color:var(--accent)}
@media (max-width:700px){
.press__item{padding:34px 0}
.press__title{font-size:25px;line-height:1.32}
.press__by i{display:none}
.press__outlet,.press__date{display:block}
}
/* Home page opening: a photograph filling half the screen with the short biography beside it,
exactly one screen tall below the header. On phones the photograph sits above the text. */
.opening{--top:95px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - var(--top));min-height:calc(100svh - var(--top));border-bottom:1px solid var(--rule)}
.admin-bar .opening{--top:127px}
.opening__photo{position:relative;overflow:hidden;background:var(--ink)}
.opening__photo img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 35%}
.opening__text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;padding:72px clamp(40px,7vw,112px)}
.opening__text h1,.opening__text p{margin:0;max-width:560px;font-weight:400}
.opening__lead{font-size:30px;line-height:1.3}
@media (max-width:700px){
.opening{grid-template-columns:1fr;min-height:0}
.opening__photo{aspect-ratio:1/1;max-height:58vh;max-height:58svh;width:100%}
.opening__text{gap:20px;padding:36px var(--gutter) 48px}
.opening__lead{font-size:25px}
}
/* Writing: the article archive. Year at the left, articles at the right; each row is the
title with where and when it appeared in italics beneath. */
.page-intro{margin:0;max-width:var(--measure);font-style:italic;font-size:22px;line-height:1.4;color:var(--stone)}
.page-intro a{border-bottom:1px solid var(--stone)}
.archive__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 48px;padding-bottom:36px}
.filters{display:flex;flex-wrap:wrap;gap:4px 30px;font-size:20px;line-height:normal}
.filters a{padding:8px 0;color:var(--stone);border-bottom:1px solid transparent}
.filters a:hover{color:var(--accent)}
.filters a.is-on{color:var(--ink);border-bottom-color:var(--ink)}
.archive__find{flex:0 1 260px;margin:0}
.archive__find input{width:100%;font:inherit;font-size:20px;line-height:1.4;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;padding:8px 0;-webkit-appearance:none;appearance:none}
.archive__find input::placeholder{font-style:italic;color:var(--stone);opacity:1}
.archive__find input:focus{outline:0;border-bottom-color:var(--ink)}
.archive__none{margin:0;padding:28px 0;font-style:italic;color:var(--stone)}
.archive__year{display:flex;flex-wrap:wrap;gap:20px 64px;padding:48px 0;border-top:1px solid var(--rule)}
.archive__year>.label{flex:0 0 240px;padding-top:3px}
.archive__rows{flex:1 1 480px;min-width:0;display:flex;flex-direction:column}
.arow{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 0;border-top:1px solid var(--rule)}
.arow.is-first{padding-top:0;border-top:0}
.arow.is-last{padding-bottom:0}
.arow__title{max-width:720px;font-size:25px;line-height:1.3;overflow-wrap:break-word}
.arow__by{font-style:italic;font-size:20px;line-height:1.4;color:var(--stone)}
a.arow:hover .arow__title{color:var(--accent)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.article__image{margin:0 0 36px}
.article__image img{display:block;width:100%;height:auto}
.article__subjects{margin:0 0 18px;font-style:italic;font-size:20px;line-height:1.5;color:var(--stone)}
.article__subjects a{border-bottom:1px solid var(--stone)}
.article__subjects i{font-style:normal;color:var(--accent)}
.entry h5,.entry h6{font-weight:400;font-style:italic;font-size:23px;line-height:1.3;margin-top:32px}
.entry audio{display:block;width:100%}
.entry iframe[src*="spotify"],.entry iframe[src*="soundcloud"],.entry iframe[src*="omny"]{width:100%}
@media (max-width:700px){
.archive__tools{padding-bottom:24px}
.filters{gap:2px 22px;font-size:19px}
.archive__find{flex:1 1 100%}
.archive__year{padding:36px 0;gap:14px}
.archive__year>.label{flex:1 1 100%}
.arow{padding:18px 0}
.arow__title{font-size:23px}
}
/* A video that plays in place on a book page. */
.video--embed{max-width:760px}
.video__frame iframe{display:block;width:100%;height:100%;border:0}
/* Press and interviews: videos sit on top, the articles follow. */
.press>.video,.press>.videos{margin-bottom:44px}
.press>.video:last-child,.press>.videos:last-child{margin-bottom:0}
/* Links inside a page's opening text are underlined like links in the body. */
.pagehead p a{border-bottom:1px solid var(--ink)}
.pagehead p a:hover{border-bottom-color:var(--accent)}
/* Home page, below the opening: the rest of the biography at the left, the three
areas of work as headings at the right. */
.work{width:100%;max-width:1180px;margin:0 auto;padding:96px var(--gutter);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 96px;align-items:start}
.work__text{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.work__text p{margin:0;max-width:var(--measure)}
.work__areas{display:flex;flex-direction:column}
.work__areas h2{margin:0;font-weight:400;font-size:30px;line-height:1.2;border-top:1px solid var(--rule)}
.work__areas h2:last-child{border-bottom:1px solid var(--rule)}
.work__areas a{display:block;padding:26px 0}
@media (max-width:900px){
.work{grid-template-columns:1fr;padding-top:64px;padding-bottom:64px}
}
@media (max-width:700px){
.work{padding-top:44px;padding-bottom:48px;gap:36px}
.work__areas h2{font-size:25px}
.work__areas a{padding:20px 0}
}
/* Home page opening, as David laid it out (5 Oct 2026): his name in red, two paragraphs,
then the areas of work, each a small-caps heading with a line in italics, between rules. */
.opening__text{gap:0;padding:clamp(28px,5vh,64px) clamp(40px,7vw,124px)}
.opening__text .opening__name{margin:0 0 clamp(18px,1.5vw,26px);max-width:none;font-weight:400;font-size:clamp(40px,3.45vw,60px);line-height:1;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--accent)}
.opening__bio{display:flex;flex-direction:column;gap:clamp(16px,1.3vw,22px);max-width:620px}
.opening__bio p{margin:0;max-width:none;font-size:clamp(24px,1.73vw,30px);line-height:1.3}
.opening__areas{position:relative;width:100%;max-width:540px;margin:clamp(34px,2.8vw,50px) 0 0 6px}
.oarea::before,.opening__areas::after{content:"";position:absolute;left:0;width:min(504px,100%);border-top:1px solid var(--rule)}
.oarea::before{top:0}
.opening__areas::after{bottom:0}
.oarea{position:relative;padding:clamp(30px,2.5vw,44px) 0 clamp(24px,2vw,34px) 6px}
.oarea h2{margin:0 0 9px;font-weight:400;font-size:22px;line-height:normal;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}
.oarea h2 a{color:inherit}
.oarea p{margin:0;max-width:none;font-style:italic;font-size:clamp(19px,1.33vw,23px);line-height:1.62;letter-spacing:.03em}
.oarea p a{font-style:normal}
.oarea a:hover{color:var(--accent)}
@media (max-width:700px){
.opening__text{padding:36px var(--gutter) 48px}
.opening__text .opening__name{font-size:38px;margin-bottom:18px}
.opening__bio p{font-size:23px}
.opening__areas{margin-left:0}
.oarea{padding-left:0}
.oarea p{font-size:20px}
}
/* Home page: the Book design & production block as David laid it out (5 Oct 2026):
no line under its heading, no credit line, the two buttons beside the lead sentence. */
.block--plain .block__head{border-bottom-color:transparent}
.block--plain .pair{margin-top:96px}
.block--plain .pair>.btnrow{gap:14px 24px;padding-top:4px}
@media (min-width:701px){
.block--plain .pair>.btnrow{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (min-width:901px){
.block--plain .pair{grid-template-columns:minmax(0,420px) minmax(0,1fr);column-gap:44px}
}
@media (max-width:900px){
.block--plain .pair{margin-top:48px}
}
/* Home page opening: the link under the areas of work. */
.opening__more{margin:clamp(22px,1.9vw,32px) 0 0 12px}
@media (max-width:700px){
.opening__more{margin-left:0}
}
/* Home page: links inside the italic lines of the opening. */
.oarea p a.in{font-style:italic;border-bottom:1px solid var(--rule-strong)}
.oarea p a.in:hover{border-bottom-color:var(--accent)}
/* Home page: latest content, three across, each a picture, a title, and where and when. */
.lcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.lcard{display:flex;flex-direction:column;min-width:0}
.lcard__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink);margin-bottom:22px}
.lcard__img img{display:block;width:100%;height:100%;object-fit:cover}
.lcard__title{font-size:25px;line-height:1.28;margin-bottom:8px;overflow-wrap:break-word}
.lcard__by{font-style:italic;font-size:20px;line-height:1.4;color:var(--stone)}
a.lcard:hover .lcard__title{color:var(--accent)}
@media (max-width:900px){
.lcards{grid-template-columns:1fr;gap:40px;max-width:560px}
}
/* Dates are set in small caps, never italics, wherever they sit beside italic text. */
.date,.press__date{font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.1em;white-space:nowrap}
/* In the latest-content cards the date sits on its own line under the outlet. */
.lcard__by .sep{display:none}
.lcard__by .date{display:block;margin-top:3px}
/* Home page: the Book design sentence is set like the opening paragraphs. */
.block--plain .lede{font-size:clamp(24px,1.73vw,30px);line-height:1.3;text-wrap:balance}
@media (max-width:700px){
.block--plain .lede{font-size:23px}
}
/* Books page: the page title, then each book set like the opening of its own page (cover left,
label, title, subtitle, a few lines, one button). On short screens the cover shrinks so the first
book fits above the fold. On phones the words are centered under the cover, as on the book pages. */
.pagehead--books{padding-bottom:0}
.shelf{--top:95px;padding-top:clamp(48px,7vh,72px);padding-bottom:72px}
.admin-bar .shelf{--top:127px}
.shelf+.shelf{padding-top:72px;border-top:1px solid var(--rule)}
.shelf .title a{color:inherit}
.shelf .title a:hover{color:var(--ink)}
.shelf__about{margin:0;max-width:500px}
@media (min-width:701px){
.shelf{flex-wrap:nowrap}
}
@media (min-width:1048px){
.shelf .covercol{flex:0 1 clamp(260px,calc((100vh - var(--top) - 155px - var(--title-top)) * .647),400px)}
}
@media (max-width:700px){
.pagehead--books{text-align:center}
.shelf,.shelf+.shelf{padding-top:36px;padding-bottom:48px}
.shelf .hero__text{align-items:center;text-align:center}
.shelf .btnrow{align-self:stretch}
.shelf .sub{text-wrap:balance}
}
/* Book pages on an upright tablet (701-900px wide): the full-screen opening kept the cover at its
desktop size, which squeezed the title into a narrow column and, at the narrowest widths, pushed
the page sideways. Here the cover takes the tablet size (280px). Desktop and phone are untouched. */
@media (min-width:701px) and (max-width:900px){
.hero--full .covercol{flex:0 1 min(280px,calc((100vh - var(--top) - 2 * var(--pad)) * .647))}
}
/* About page (the arrangement David chose from eight, 5 Oct 2026: "statement first"). The title, then
the first paragraph as a large statement across the page; beneath it the portrait at the left and
the rest of the biography at the right, ending with Design & Communications under a rule. Below
that, a descriptive menu of where to go next. On phones the portrait leads, edge to edge. */
/* About without the photograph (David, 6 Oct 2026: "maybe remove the photo"): the title, the opening at the larger
size, then the rest as one column of text on the page's left edge. The .about rules below are the earlier
photograph layout, kept in case the picture comes back. */
.aboutpage{width:100%;max-width:1180px;margin:0 auto;padding:var(--title-top) var(--gutter) 88px;display:flex;flex-direction:column;gap:22px}
.aboutpage .page-title{margin-bottom:10px}
.aboutpage p{margin:0}
.aboutpage .about__lead{max-width:880px;margin-bottom:14px;text-wrap:pretty}
.aboutpage__body{display:flex;flex-direction:column;gap:22px;max-width:var(--measure)}
.aboutpage p a{border-bottom:1px solid var(--ink)}
.aboutpage p a:hover{border-bottom-color:var(--accent)}
.aboutpage hr.dots{width:100%;margin:22px 0}
/* About David and Press Kit open like Areas of Expertise: the title in its own head, a rule, then the same space before the
text (David, 6 Oct 2026). */
.aboutpage--ruled{padding-top:64px;border-top:1px solid var(--rule)}
.sec--bare.sec--ruled{padding-top:64px;border-top:1px solid var(--rule)}
@media (max-width:700px){.aboutpage--ruled,.sec--bare.sec--ruled{padding-top:44px}}
/* About: all the text in one column at one width, with the portrait beside the opening
(David, 6 Oct 2026: the opening ran far past the text under it; Renee DiResta's About page is the model). */
.aboutpage__cols{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);column-gap:64px;align-items:start}
.aboutpage__text{display:flex;flex-direction:column;gap:22px;min-width:0}
.aboutpage .about__lead{max-width:none}
.aboutpage__photo{margin:9px 0 0}
.aboutpage__photo img{display:block;width:100%;height:auto}
/* About banner (waiting on David's wide photograph, 6 Oct 2026): a wide picture across the column, above the title,
as on Renee DiResta's About page. To switch it on, put
[reaboi_pic name="about-wide" alt="David Reaboi" eager="1" sizes="(max-width: 1180px) 100vw, 1068px"]
before in site/pages/about.html and take the portrait figure out of that page. */
.aboutbanner{width:100%;max-width:1180px;margin:0 auto;padding:36px var(--gutter) 0}
.aboutbanner img{display:block;width:100%;height:auto;aspect-ratio:1200/661;object-fit:cover;object-position:50% 30%}
.aboutbanner+.aboutpage{padding-top:60px}
.aboutbanner+.aboutpage .aboutpage__cols{grid-template-columns:minmax(0,var(--measure))}
@media (max-width:900px){
.aboutpage__cols{grid-template-columns:minmax(0,1fr);row-gap:28px}
.aboutpage__photo{order:-1;margin:0;max-width:420px}
}
/* For media page: the photograph shown at a modest size above its download link. */
.mediashot{display:block;width:100%;max-width:320px;height:auto}
.about{width:100%;max-width:1180px;margin:0 auto;padding:var(--title-top) var(--gutter) 80px;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:88px;row-gap:22px;align-items:start}
.about__text{display:flex;flex-direction:column;gap:22px;max-width:580px}
.about__text p{margin:0}
.about__text .page-title{margin-bottom:10px}
.about__lead{font-size:25px;line-height:1.34}
.about__text p a{border-bottom:1px solid var(--ink)}
.about__text p a:hover{border-bottom-color:var(--accent)}
.about__more{margin-top:42px;padding-top:64px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:18px}
.about__photo{order:-1}
.about__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:60% 30%}
@media (min-width:901px){
.about__text{display:contents}
.about .page-title{grid-column:1 / -1;grid-row:1}
.about__lead{grid-column:1 / -1;grid-row:2;max-width:880px;margin-bottom:40px;font-size:27px;line-height:1.34;text-wrap:pretty} /* was up to 40px; brought to the site's one opening-text size (David, 6 Oct 2026) */
.about__photo{grid-column:1;grid-row:3 / span 4;order:0}
.about__text>p:not(.about__lead),.about__text>hr.dots,.about__more{grid-column:2;max-width:580px}
.about__text>hr.dots{width:100%}
.about__more{margin-top:20px}
}
@media (min-width:701px) and (max-width:1047px){
.about{grid-template-columns:minmax(0,280px) minmax(0,1fr);column-gap:40px}
}
@media (max-width:700px){
.about{grid-template-columns:1fr;padding-top:0;padding-bottom:56px}
.about__text{max-width:none}
.about__photo{margin:0 calc(-1 * var(--gutter)) 30px}
.about__photo img{aspect-ratio:1/1;object-position:50% 30%}
.about__lead{font-size:23px}
}
/* The descriptive menu at the foot of the About page: each place on the site with a line about it,
three across, on the same left and right edges as the page above it. */
.mapsec{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter) 96px}
.mapsec .label{padding-top:56px;margin-bottom:34px;border-top:1px solid var(--rule)}
.map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px}
.map__item{display:flex;flex-direction:column;gap:5px;padding:22px 0 24px;border-bottom:1px solid var(--rule)}
.map__title{font-size:27px;line-height:1.2}
.map__desc{font-style:italic;font-size:21px;line-height:1.4;color:var(--stone)}
.map__desc i{font-style:normal}
a.map__item:hover .map__title{color:var(--accent)}
a.map__item:hover .map__desc{color:var(--stone)}
@media (min-width:901px){
.map__item:nth-child(-n+3){padding-top:0}
}
@media (min-width:701px) and (max-width:900px){
.map{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.map__item:nth-child(-n+2){padding-top:0}
}
@media (max-width:700px){
.mapsec{padding-bottom:64px}
.mapsec .label{padding-top:40px;margin-bottom:24px}
.map{grid-template-columns:1fr}
.map__item:first-child{padding-top:0}
.map__title{font-size:24px}
}
/* Portfolio covers are cut-outs with see-through corners: the shadow follows the book's own outline,
and the binding is left as it is in the mockup (no added spine shading). The same holds for the
enlarged view. */
.book--cut{box-shadow:none}
.book--cut::after{display:none}
.book--cut img{filter:drop-shadow(0 14px 16px rgba(28,28,28,.26)) drop-shadow(0 1px 2px rgba(28,28,28,.3))}
dialog.zoom img{box-shadow:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
/* Selected Work: logos, three to a row at every width. */
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px;align-items:start}
@media (max-width:700px){
.logos{gap:18px 14px}
}
/* Captions under portfolio covers: a smaller title, and the author line in small caps. */
.cover figcaption{gap:4px}
.cover figcaption b{font-size:18px;line-height:1.25}
.cover figcaption span{font-size:17px;line-height:1.3;letter-spacing:.1em;font-variant-caps:all-small-caps}
@media (max-width:700px){
.cover figcaption b{font-size:16px}
.cover figcaption span{font-size:15px}
.covers--row .cover figcaption b{font-size:15px}
.covers--row .cover figcaption span{font-size:14px}
}
/* Selected Work: a gallery under a paragraph is three to a row and exactly as wide as the paragraph,
so the pictures end where the text above them ends. */
.covers--measure{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px;max-width:var(--measure)}
.logos{max-width:var(--measure)}
@media (max-width:700px){
.covers--measure{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
}
/* Bullets: the Adobe Jenson Caption bullet (a small diamond), on the larger side, for every dot that
separates two things and for every list. */
.dot{font-family:"adobe-jenson-pro-caption",Georgia,serif;font-style:normal;font-weight:400;font-variant-caps:normal;letter-spacing:0;font-size:1.7em;line-height:0;position:relative;top:.06em}
.list,.entry ul{list-style:none;padding-left:0}
.list>li,.entry ul>li{position:relative;padding-left:1.35em}
.list>li::before,.entry ul>li::before{content:"\2022";position:absolute;left:0;top:-.04em;font-family:"adobe-jenson-pro-caption",Georgia,serif;font-size:2em;line-height:.8;color:var(--accent)}
/* Articles brought over from Late Republic Nonsense: picture galleries, quoted tweets, pull quotes,
and the closing line that says where the piece first appeared. */
.entry .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.entry .gallery img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.entry blockquote.tweet{font-style:normal}
.entry blockquote.tweet p:last-child{font-size:19px;color:var(--stone)}
.entry .origin{margin-top:44px;color:var(--stone)}
@media (max-width:700px){
.entry .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Home page, Book design & production: the sentence sits above the row of covers. */
.block--plain .lede--above{max-width:860px;margin:6px 0 56px}
@media (max-width:700px){
.block--plain .lede--above{margin-bottom:30px}
}
/* Home page opening: EDUT is a link, so it is underlined like the other links in those lines. */
.oarea p a{border-bottom:1px solid var(--rule-strong)}
.oarea p a:hover{border-bottom-color:var(--accent)}
/* Home page opening on phones only: all of the words are centered under the photograph. */
@media (max-width:700px){
.opening__text{align-items:center;text-align:center}
.opening__bio{align-items:center}
.opening__areas{max-width:none}
.oarea::before,.opening__areas::after{width:100%}
.opening__more{align-self:center}
}
/* Articles: the subhead, in italics just under the title (set like the subtitle of a book). */
.article__subhead{margin:0;max-width:600px;font-style:italic;font-size:25px;line-height:1.36}
@media (max-width:700px){
.article__subhead{font-size:22px}
}
/* Book Design (the services and pricing page), rebuilt 5 Oct 2026.
ONE SCALE OF SIZES on this page, each step clearly apart from the next:
58px the page title
40px each service's heading (never under 32px on a computer)
27px the opening statement (David, 6 Oct 2026: was up to 35px, too big; slightly smaller, still above body)
25px the name of each thing that has a price
21px all running text, lists and italic lines
22px small caps (labels and prices), as everywhere on the site
Opening: title, statement, a quiet italic line, then a row of covers without captions. Each service:
its heading, text, and its prices as a list between rules (name at the left, price at the right)
in place of boxes. Everything in a service is as wide as its text, so pictures and price lines
end where the text ends. */
.bdopen{width:100%;max-width:1180px;margin:0 auto;padding:var(--title-top) var(--gutter) 92px;display:flex;flex-direction:column;gap:22px}
.bdopen .page-title{margin-bottom:10px}
/* Every sub-page carries its section's name in small caps above its title (David, 6 Oct 2026); same gap as on .pagehead. */
.bdopen>.label{margin-bottom:-4px}
.statement{margin:0;max-width:880px;font-size:27px;line-height:1.34;text-wrap:pretty}
.bdopen .covers--row{max-width:940px;margin-top:44px;gap:36px 44px}
/* Book Design opening: six covers, three to a row, as wide as the statement above them. */
.covers--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 60px}
.bdopen .covers--three{max-width:880px;margin-top:48px}
.bdopen>div:last-child{margin-top:14px}
.sec--service{padding-top:84px;padding-bottom:92px;align-items:baseline}
.sec--service>.label{padding-top:0}
.sec--service .sec__body{gap:24px}
.sec--service .h2{font-size:clamp(32px,2.3vw,40px);line-height:1.1;margin-bottom:6px}
.sec--service .covers--measure{margin:10px 0 6px}
.sec--service .note{font-style:italic;font-size:21px;line-height:1.55}
.prices{display:flex;flex-direction:column;max-width:var(--measure);margin-top:10px;border-top:1px solid var(--rule-strong)}
.prices__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 36px;align-items:baseline;padding:24px 0 26px;border-bottom:1px solid var(--rule)}
.prices__row>*{grid-column:1 / -1;margin:0}
.prices__row h3{grid-column:1;font-size:25px;line-height:1.25}
.prices__row .price{grid-column:2;white-space:nowrap}
.prices__row .prices__desc{margin-top:-10px;font-style:italic;color:var(--stone)}
/* An option with a line drawing beside it (cover, interior, ebook): the drawing hangs at the left, the words keep their order. */
.prices__row--drawn{grid-template-columns:104px minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:32px}
.prices__row--drawn>*{grid-column:2 / -1}
.prices__row--drawn h3{grid-column:2}
.prices__row--drawn .price{grid-column:3}
.prices__row--drawn .drawing{grid-column:1;grid-row:1 / -1;align-self:start;margin-top:2px;color:var(--ink)}
.drawing{display:block}
.drawing svg{display:block;max-width:100%;height:auto}
.editions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;max-width:var(--measure);margin-top:6px}
.editions>div{display:flex;flex-direction:column;gap:6px}
.editions h3{margin:0;font-size:25px;line-height:1.25}
.editions p{margin:0}
.editions__kind{font-style:italic;color:var(--stone)}
@media (max-width:700px){
.bdopen{padding-bottom:52px;gap:18px}
.statement{font-size:23px;line-height:1.34}
.bdopen .covers--row{max-width:none}
.bdopen .covers--row{margin-top:24px;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.covers--three{gap:26px 16px}
.bdopen .covers--three{max-width:none;margin-top:26px}
.sec--service{padding-top:48px;padding-bottom:56px}
.sec--service .h2{font-size:30px}
.sec--service{align-items:flex-start}
.prices__row{padding:20px 0 22px;column-gap:18px}
.prices__row--drawn{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:none}
.prices__row--drawn>*{grid-column:1 / -1}
.prices__row--drawn h3{grid-column:1}
.prices__row--drawn .price{grid-column:2}
.prices__row--drawn .drawing{grid-column:1 / -1;grid-row:auto;margin:0 0 4px}
.editions{grid-template-columns:1fr}
}
/* Articles (David, 5 Oct 2026). A break in the text is three widely spaced bullets, not a line.
Emphasis text (a pull quote) is set a little larger, in italics, flush left, with open space above
and below and no lines; a break that only fences off a pull quote is dropped. */
.entry hr{height:auto;margin:40px 0;border:0;text-align:center;line-height:1}
/* The same three-bullet divider outside articles (About page, David, 6 Oct 2026):
. */
hr.dots{height:auto;margin:18px 0;border:0;text-align:center;line-height:1} /* bullets larger and closer together (David, 6 Oct 2026): one wide space between them, not two */
hr.dots::before{content:"\2022\2003\2022\2003\2022";font-family:"adobe-jenson-pro-caption",Georgia,serif;font-size:46px;line-height:1;color:var(--ink)}
.entry hr::before{content:"\2022\2003\2022\2003\2022";font-family:"adobe-jenson-pro-caption",Georgia,serif;font-size:46px;line-height:1;color:var(--ink)}
.entry blockquote.pullquote{margin:52px 0;padding:0;border:0;font-size:30px;line-height:1.3;text-align:left}
.entry blockquote.pullquote p{margin:0 0 14px;padding:0}
.entry hr:has(+ blockquote.pullquote),.entry blockquote.pullquote+hr{display:none}
@media (max-width:700px){
.entry hr{margin:32px 0}
.entry blockquote.pullquote{margin:40px 0;font-size:25px}
}
/* Writing: the two shelves, Essays and Notes & links. The one showing is in ink and underlined. */
.shelves{display:flex;flex-wrap:wrap;gap:6px 48px;margin:0 0 30px;border-bottom:1px solid var(--rule);font-size:clamp(30px,2.3vw,40px);line-height:1.2}
.shelves a{margin-bottom:-1px;padding:4px 0 14px;color:var(--stone);border-bottom:1px solid transparent}
.shelves a:hover{color:var(--accent)}
.shelves a.is-on{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:700px){
.shelves{gap:4px 30px;margin-bottom:22px;font-size:27px}
.shelves a{padding-bottom:10px}
}
/* One left edge and one right edge for the whole site (David, 5 Oct 2026): his name, the menu, the
sub-menu and the footer sit on the same column as the page's content (1180px wide, centered),
not out at the edges of the window. Their hairlines still run the full width. On windows
narrower than the column, everything keeps the usual side margin. */
.site-header,.subnav,.site-footer{padding-left:max(var(--gutter),calc((100% - 1180px) / 2 + var(--gutter)));padding-right:max(var(--gutter),calc((100% - 1180px) / 2 + var(--gutter)))}
/* Space above every page title (David, 5 Oct 2026: "far more spacing"). One measure for all pages
that open with a title: About, Interests, Books, Writing, EDUT, the Book Design pages, Contact,
and articles. The book pages and the home page open with a full-screen feature and are not
affected. */
:root{--title-top:clamp(84px,12vh,136px)}
.pagehead,.wrap,.article{padding-top:var(--title-top)}
@media (max-width:700px){
:root{--title-top:60px}
.about{padding-top:0}
}
/* Writing: the search box sits to the right of the subject links. */
.archive__tools .filters{flex:1 1 520px}
.archive__none a{font-style:normal;color:var(--ink);border-bottom:1px solid var(--ink)}
/* Signed copies: the panel that opens from "Buy a Signed Copy", and the "Your order" tab in the
corner while an order is open (inc/store.php, assets/order.js). */
dialog.order{width:min(540px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;margin:auto;padding:48px 48px 44px;border:1px solid var(--rule-strong);background-color:var(--paper);background-image:url(assets/img/paper-grain.jpg);background-size:450px 450px;color:var(--ink);box-shadow:0 30px 80px -20px rgba(28,28,28,.55)}
dialog.order[open]{display:flex;flex-direction:column;gap:18px}
dialog.order::backdrop{background:rgba(28,28,28,.55)}
.order p,.order h2{margin:0}
.order__x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--stone);cursor:pointer}
.order__x:hover{color:var(--ink)}
.order__form{display:flex;flex-direction:column;gap:18px}
.order__title{font-family:"adobe-jenson-pro",var(--serif);font-size:40px;line-height:1.08;font-weight:400}
.order__price{font-size:25px;line-height:1.2;margin-top:-8px}
.order__field{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.order__field span,.order__many>span:first-child,.order__kind,.order__note{font-style:italic;color:var(--stone)}
.order__field input{width:100%;font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;padding:8px 0;-webkit-appearance:none;appearance:none}
.order__field input::placeholder{font-style:italic;color:var(--stone);opacity:.75}
.order__field input:focus{outline:0;border-bottom-color:var(--ink)}
.order__many{display:flex;align-items:center;justify-content:space-between;gap:20px}
.order__qty{display:inline-flex;align-items:center;border:1px solid var(--rule-strong)}
.order__qty button{width:44px;height:42px;padding:0;border:0;background:transparent;font:inherit;font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
.order__qty button:hover{color:var(--accent)}
.order__qty span{min-width:34px;text-align:center}
.order .btnrow{padding-top:14px;gap:14px}
.order .btn{flex:1 1 auto;text-align:center}
.order .btn[disabled]{opacity:.55;cursor:default}
.order__lines{display:flex;flex-direction:column;border-top:1px solid var(--rule-strong)}
/* Each line of the order: the title (and its note) across the top; under it the quantity at the left, the price at the right. */
.order__line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule)}
.order__words{grid-column:1 / -1}
.order__words{display:flex;flex-direction:column;gap:2px;min-width:0}
.order__name{font-size:25px;line-height:1.2}
.order__kind{line-height:1.4;overflow-wrap:anywhere}
.order__total{min-width:64px;text-align:right}
.order__offers{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.order__offer{padding:4px 0;border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.order__offer:hover{color:var(--accent);border-bottom-color:var(--accent)}
.order__sum{display:flex;justify-content:space-between;gap:20px;padding-top:6px;font-size:25px;line-height:1.2}
.order__note{margin-top:-8px}
html:has(dialog.order[open]){overflow:hidden}
[data-buy][aria-busy]{opacity:.6;cursor:progress}
.order-change{margin:0 0 28px}
.order__err{color:var(--accent)}
.ordertab{position:fixed;left:24px;bottom:24px;z-index:6;font-family:inherit;font-size:21px;line-height:1.2;letter-spacing:.08em;font-variant-caps:all-small-caps;padding:12px 24px;border:1px solid var(--on-ink-muted);border-radius:0;background:var(--ink);color:var(--on-ink);cursor:pointer;box-shadow:0 12px 26px -12px rgba(28,28,28,.6)}
.ordertab:hover{background:var(--accent);border-color:var(--accent)}
.ordertab[hidden]{display:none}
@media (max-width:700px){
dialog.order{padding:44px 24px 28px}
.order__title{font-size:32px}
.order .btnrow{flex-direction:column}
.ordertab{left:14px;bottom:14px;padding:11px 18px;font-size:19px}
.project-cta~.ordertab{bottom:72px}
}
@media print{
.ordertab,dialog.order{display:none}
}
/* Home page: the Epstein feature sits on a red band with the paper's grain in it, to break up the
page (David, 5 Oct 2026). The title is white; everything else is black, the button included.
Generous room above and below. */
/* The band is the site's red, rgb(198,48,13) (see --accent). It is filled with #CC320E because the paper grain laid
over it darkens it to exactly that red; if --accent ever changes, change this fill with it. */
.slider{background-color:#CC320E;background-image:url(assets/img/paper-grain.jpg);background-size:450px 450px;background-blend-mode:multiply}
.slide .hero{padding-top:clamp(88px,12vh,136px);padding-bottom:clamp(88px,12vh,136px)}
.slide .title{color:var(--on-accent)}
.slide .label,.slide .sub{color:var(--ink)}
/* The subtitle on the red band is Bold Italic Caption so it holds against the red (David, 6 Oct 2026). Home page only. */
.slide .sub{font-weight:700}
/* The label on the home red band ("New book • Oct 2026") is Bold Caption too (David, 6 Oct 2026). Home band only; labels elsewhere stay regular. */
.slide .label{font-weight:700}
.slide .btn--primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.slide .btn--primary:hover{color:var(--on-accent)}
.slide .book{box-shadow:0 30px 60px -24px rgba(0,0,0,.6),0 10px 18px -10px rgba(0,0,0,.4)}
@media (max-width:700px){
.slide .hero{padding-top:56px;padding-bottom:64px}
}
/* EDUT page: opening sentence and headings never end on one stray word; the smaller opening paragraph keeps the text measure; a bare section number sits close to its heading when it stacks above it. */
.pagehead .lede{text-wrap:pretty}
.pagehead p.measure{max-width:var(--measure)}
.sec--service .h2{text-wrap:balance}
.sec--num{row-gap:10px}
/* ---------- EDUT diagrams (6 Oct 2026) ----------
Two explanatory figures built as real text, in the site's own type and colours.
.recur: an allegation appears three times; each appearance leads to one maintained reference.
.uses: one research foundation with four applications standing on it. */
.figsec{width:100%;max-width:1180px;margin:0 auto;padding:84px var(--gutter) 92px;border-top:1px solid var(--rule)}
.fig{margin:0;display:flex;flex-direction:column}
.fig__title{margin:0 0 52px;font-weight:400;font-size:clamp(32px,2.8vw,40px);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.fig figcaption{margin-top:40px;max-width:var(--measure);font-style:italic;font-size:22px;line-height:1.45;text-wrap:pretty}
.fig__note{margin:14px 0 0;max-width:var(--measure);font-size:18px;line-height:1.4;color:var(--stone)}
.recur__grid{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);grid-template-rows:auto 1fr;row-gap:22px}
.recur__l1{grid-column:1;grid-row:1}
.recur__l2{grid-column:3;grid-row:1}
.recur__events{grid-column:1;grid-row:2;list-style:none;margin:0;padding:0 0 0 38px;position:relative;display:grid;grid-auto-rows:1fr;gap:16px}
.recur__events::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--rule-strong)}
.recur__event{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:18px 24px 20px;border:1px solid var(--rule-strong)}
.recur__event b{font-weight:400;font-size:25px;line-height:1.2}
.recur__event i{font-size:19px;line-height:1.35;color:var(--stone)}
.recur__event--buried{border-style:dashed;border-color:var(--rule-strong)}
.recur__event--buried b,.recur__event--buried i{color:var(--stone);opacity:.8}
.recur__dot{position:absolute;left:-48px;top:50%;width:19px;height:0}
.recur__dot::before{content:"\2022";position:absolute;left:0;top:0;width:19px;text-align:center;font-family:"adobe-jenson-pro-caption",Georgia,serif;font-style:normal;font-size:40px;line-height:0;color:var(--accent);transform:translateY(.07em)}
/* connectors: each appearance runs a line to a shared vertical, which feeds one arrow into the reference */
.recur__event::before,.recur__event::after{content:"";position:absolute;left:calc(100% + 1px);width:48px;border:0 solid var(--ink);pointer-events:none}
.recur__event::before{top:-1px;bottom:50%;border-right-width:1px;border-bottom-width:1px}
.recur__event::after{top:50%;bottom:-17px;border-right-width:1px}
.recur__event:first-child::before{content:none}
.recur__event:first-child::after{border-top-width:1px;border-top-right-radius:14px}
.recur__event:last-child::after{content:none}
.recur__event:last-child::before{border-bottom-right-radius:14px}
.recur__event--buried::before{border-bottom-width:0;top:-1px;bottom:0}
.recur__event--buried::after{top:0}
.recur__arrow{grid-column:2;grid-row:2;align-self:center;position:relative;margin:0 9px 0 48px;height:1px;background:var(--ink)}
.recur__arrow::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left:10px solid var(--ink);border-right:0}
.recur__ref{grid-column:3;grid-row:2;display:flex;flex-direction:column;padding:34px 38px 32px;border:1px solid var(--ink);container-type:inline-size}
.recur__reftitle{margin:0;font-weight:400;font-size:32px;line-height:1.12}
.recur__addr{margin:10px 0 0;font-style:italic;font-size:19px;line-height:1.35;color:var(--stone)}
.recur__parts{list-style:none;margin:26px 0 0;padding:0;flex:1;display:flex;flex-direction:column}
.recur__parts li{flex:1;display:flex;align-items:center;padding:13px 0;border-top:1px solid var(--rule);font-size:25px;line-height:1.25}
.recur__parts li:last-child{border-bottom:1px solid var(--rule)}
.recur__foot{margin:22px 0 0;font-style:italic;font-size:19px;line-height:1.35;color:var(--stone)}
.recur__verbs{margin-top:12px;white-space:nowrap;letter-spacing:.06em;font-size:min(20px,5.2cqi)}
.recur__verbs .dot{color:var(--accent);margin:0 -.04em}
.uses__grid{display:flex;flex-direction:column}
.uses__base{display:flex;flex-direction:column;align-items:center;gap:12px;padding:46px 27px 48px;text-align:center;background-color:var(--ink);background-image:url(assets/img/ink-grain.jpg);background-size:450px 450px;color:var(--on-ink)}
.uses__base .label{color:var(--on-ink-muted)}
.uses__base .dot{color:var(--accent);margin:0 .2em}
.uses__phrase{margin:0;font-size:clamp(30px,3vw,40px);line-height:1.12;text-wrap:balance}
.uses__apps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.uses__apps li{position:relative;display:flex;flex-direction:column;gap:10px;padding:54px 28px 6px 26px;border-left:1px solid var(--ink)}
.uses__apps li::before{content:"\2022";position:absolute;left:-.5px;top:68px;transform:translate(-50%,.07em);font-family:"adobe-jenson-pro-caption",Georgia,serif;font-size:42px;line-height:0;color:var(--accent)}
.uses__apps b{font-weight:400;font-size:27px;line-height:1.15}
.uses__apps span{font-size:20px;line-height:1.42;text-wrap:pretty}
.uses__apps i{font-size:19px;line-height:1.38;color:var(--stone);text-wrap:pretty}
@media (max-width:900px){
.recur__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0}
.recur__l1,.recur__l2,.recur__events,.recur__arrow,.recur__ref{grid-column:1;grid-row:auto}
.recur__l1,.recur__l2{margin-bottom:16px}
.recur__l2{padding-left:0}
.recur__event::before,.recur__event::after{content:none !important}
.recur__arrow{justify-self:start;margin:10px 0 14px 38px;width:1px;height:44px}
.recur__arrow::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%);border:6px solid transparent;border-top:10px solid var(--ink);border-bottom:0}
.uses__apps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
.uses__apps li:nth-child(n+3){padding-top:44px}
.uses__apps li:nth-child(n+3)::before{top:58px}
}
@media (max-width:700px){
.figsec{padding-top:48px;padding-bottom:56px}
.fig__title{margin-bottom:34px;font-size:32px}
.fig figcaption{margin-top:30px;font-size:20px}
.recur__events{padding-left:30px}
.recur__dot{left:-40px}
.recur__event{padding:15px 18px 17px}
.recur__event b{font-size:23px}
.recur__ref{padding:26px 22px 24px}
.recur__reftitle{font-size:28px}
.recur__parts li{font-size:22px}
.recur__arrow{margin-left:30px}
.uses__apps{grid-template-columns:minmax(0,1fr)}
.uses__apps li,.uses__apps li:nth-child(n+3){padding:36px 8px 0 24px}
.uses__apps li::before,.uses__apps li:nth-child(n+3)::before{top:49px}
.uses__apps b{font-size:25px}
.uses__base{padding:34px 20px 36px}
.uses__base .label{display:flex;flex-direction:column;gap:2px;font-size:20px}
.uses__base .dot{display:none}
}
/* EDUT infographics (David's own images, 8 Oct 2026) */
.infog{margin:40px 0 4px;max-width:100%}
.infog img{display:block;width:100%;height:auto}
@media (max-width:700px){.infog{margin-top:28px}}
/* ---------- EDUT Overview, deck layout (David, 9 Oct 2026) ----------
One idea per screen: a heading, one paragraph, one visual. Motion is in assets/edut-overview.js. */
.ov{color:var(--ink)}
.ov *{box-sizing:border-box}
.ov-w{width:100%;max-width:1320px;margin:0 auto}
.ov-s{padding:clamp(90px,14vh,170px) var(--gutter)}
.ov-s--tint{background:#EFEADF}
.ov-s--ink{background-color:var(--ink);background-image:url(assets/img/ink-grain.jpg);background-size:450px;color:var(--paper)}
.ov-k{margin:0 0 22px;font-size:21px;letter-spacing:.14em;font-variant-caps:all-small-caps;color:var(--accent)}
.ov-h{margin:0 0 34px;font-family:var(--serif-title);font-weight:400;font-size:clamp(40px,4.2vw,66px);line-height:1.04;max-width:14em}
.ov-h--wide{max-width:18em}
.ov-p{margin:0;font-size:21px;line-height:1.52;max-width:33em}
.ov-lead{margin:0;font-size:27px;line-height:1.4;max-width:30em}
.ov-lead--solo{font-size:clamp(27px,2.3vw,34px);line-height:1.38;max-width:32em}
.ov-big{margin:0;font-family:var(--serif-title);font-size:clamp(36px,3.8vw,60px);line-height:1.12;max-width:22em;padding-left:clamp(24px,3vw,44px);border-left:2px solid var(--accent-on-ink)}
.ov-a{display:inline-block;margin-top:24px;font-size:20px;letter-spacing:.14em;font-variant-caps:all-small-caps;color:var(--accent);text-decoration:none}
.ov-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(48px,6vw,110px);align-items:center}
.ov-two--flip > :first-child{order:2}
.ov-fig{margin:0}.ov-fig img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* opening */
.ov-open{position:relative;display:flex;align-items:flex-end;min-height:max(560px,calc(100vh - 200px));min-height:max(560px,calc(100svh - 200px));background-color:var(--ink);background-image:url(assets/img/ink-grain.jpg);background-size:450px;color:var(--paper);overflow:hidden}
.ov-open canvas{position:absolute;inset:0;width:100%;height:100%}
.ov-open__in{position:relative;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter) clamp(70px,11vh,130px)}
.ov-open__k{margin:0 0 22px;font-size:19px;letter-spacing:.16em;font-variant-caps:all-small-caps;color:var(--on-ink-muted)}
.ov-open__t{margin:0;font-family:var(--serif-title);font-weight:400;font-size:clamp(96px,12vw,210px);line-height:.88;color:var(--paper)}
.ov-open__lede{margin:22px 0 0;font-style:italic;font-size:clamp(28px,2.8vw,44px);line-height:1.15}
/* photograph */
.ov-photo{position:relative;height:88vh;height:88svh;overflow:hidden;background:#222}
.ov-photo img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:70% 50%}
/* statement */
.ov-say{position:relative;height:200vh;background:var(--paper)}
.ov-say__st{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:0 var(--gutter)}
.ov-say__p{width:100%;max-width:1320px;margin:0 auto;font-family:var(--serif-title);font-size:clamp(52px,7vw,118px);line-height:1.03}
.ov-say__p em{font-style:normal;color:var(--accent)}
.ov--js .ov-w8{display:inline-block;color:rgba(28,28,28,.1);transform:translateY(.25em) scale(.92);transition:color .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.ov--js .ov-w8.on{color:var(--ink);transform:none}
.ov--js .ov-w8--red.on{color:var(--accent)}
/* chart */
.ov-chart{margin:0}.ov-chart svg{display:block;width:100%;height:auto}
.ov-c-lab{font-family:var(--serif);font-variant-caps:all-small-caps}
.ov--js .ov-c-rec{stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 3.4s ease .3s}
.ov--js .ov-chart.in .ov-c-rec{stroke-dashoffset:0}
.ov--js .ov-c-clm{opacity:0;transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ov--js .ov-chart.in .ov-c-clm{opacity:1;transform:none}
.ov--js .ov-c-rep{opacity:0}
.ov--js .ov-chart.in .ov-c-rep{animation:ov-rf 3.4s ease forwards}
@keyframes ov-rf{0%{opacity:0}25%{opacity:1}100%{opacity:.06}}
/* fade-ups */
.ov--js .ov-fade{opacity:0;transform:translateY(48px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.ov--js .ov-fade.in{opacity:1;transform:none}
/* the four uses */
.ov-uses{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.ov-u{padding:34px 40px 36px 0}
.ov-u:nth-child(even){padding-left:40px;border-left:1px solid var(--rule)}
.ov-u:nth-child(n+3){border-top:1px solid var(--rule)}
.ov-u h3{margin:0 0 12px;font-family:var(--serif-title);font-weight:400;font-size:34px;line-height:1.1}
.ov-u p{margin:0;font-size:21px;line-height:1.5}
.ov-u .ov-a{margin-top:16px}
/* closing */
.ov-close{padding:clamp(70px,10vh,110px) var(--gutter)}
.ov-close__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.ov-cta{display:block;padding:clamp(36px,4vw,56px);background-color:#CC320E;background-image:url(assets/img/paper-grain.jpg);background-size:450px;background-blend-mode:multiply;color:var(--paper);text-decoration:none;transition:transform .3s}
.ov-cta:hover{color:var(--paper);transform:translateY(-4px)}
.ov-cta small{display:block;font-size:20px;letter-spacing:.14em;font-variant-caps:all-small-caps;opacity:.85}
.ov-cta b{display:block;margin-top:10px;font-weight:400;font-family:var(--serif-title);font-size:clamp(40px,4vw,58px);line-height:1}
@media (max-width:900px){
.ov-two,.ov-uses,.ov-close__in{grid-template-columns:1fr}
.ov-two--flip > :first-child{order:0}
.ov-u,.ov-u:nth-child(even){padding:28px 0;border-left:0}
.ov-u:nth-child(n+2){border-top:1px solid var(--rule)}
.ov-say{height:160vh}
.ov-photo{height:60vh}
.ov-open{min-height:max(480px,calc(100svh - 160px))}
}
@media (prefers-reduced-motion:reduce){.ov--js .ov-fade,.ov--js .ov-w8{transition:none}}
/* 9 Oct, second pass: one screen per section (heading, two paragraphs, one visual). */
.ov .ov-p + .ov-p{margin-top:20px}
.ov-photo--in{height:auto;aspect-ratio:4/3;margin:0;background:#222}
.ov-photo--in img{top:-8%;height:116%}
.ov-two .ov-uses{border-top:0}
.ov-two .ov-u{padding:24px 26px 26px 0}
.ov-two .ov-u:nth-child(even){padding-left:26px}
.ov-two .ov-u:nth-child(n+3){border-top:1px solid var(--rule)}
.ov-two .ov-u h3{font-size:28px}
.ov-two .ov-u p{font-size:19px}
@media (max-width:900px){.ov-photo--in{aspect-ratio:16/10}}
/* the train photograph as the background of the problem section */
.ov-s--photo{position:relative;height:auto;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#1C1C1C;color:var(--paper)}
.ov-s--photo > img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:75% 50%}
.ov-s--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,20,20,.94) 0%,rgba(20,20,20,.86) 34%,rgba(20,20,20,.35) 62%,rgba(20,20,20,.1) 100%)}
.ov-s--photo .ov-w{position:relative;z-index:2}
.ov-s--photo .ov-h,.ov-s--photo .ov-p{max-width:30rem;color:var(--paper)}
.ov-s--photo .ov-h{max-width:14em}
.ov-s--photo .ov-p{max-width:31em;color:#E9E5DC}
.ov-s--photo .ov-k{color:var(--accent-on-ink)}
@media (max-width:900px){.ov-s--photo::before{background:linear-gradient(0deg,rgba(20,20,20,.95) 0%,rgba(20,20,20,.85) 60%,rgba(20,20,20,.45) 100%)}}
.ov-open__def{margin:30px 0 0;max-width:30em;font-size:clamp(21px,1.7vw,25px);line-height:1.45;color:#E9E5DC}
.ov-two--text{align-items:start}
.ov-two--text .ov-h{margin-bottom:0}
/* the problem: heading across the top, the two paragraphs side by side beneath it (David's layout, 9 Oct) */
.ov-two--text{display:block}
.ov-two--text .ov-h{max-width:20em;margin-bottom:clamp(40px,5vh,64px)}
.ov-two--text > div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
.ov-two--text > div:last-child .ov-p{margin:0;max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:760px){.ov-two--text > div:last-child{grid-template-columns:1fr;gap:20px}}
.ov-two--text .ov-h{max-width:16.5em}
/* EDUT Products: proposal screens, the top of each shown, the whole screen in the site's zoom (9 Oct 2026) */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px;margin-top:18px}
.shots--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{margin:0;display:flex;flex-direction:column;gap:10px}
.sec__body .shots a.shot:not(.btn):not(.link):not(.row):not(.book){display:block;border:1px solid var(--rule);aspect-ratio:8/5;overflow:hidden;background:#fff}
.sec__body .shots a.shot:not(.btn):not(.link):not(.row):not(.book):hover{border-color:var(--accent)}
.shots img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
.shots a.shot:hover img{transform:scale(1.02)}
.shots figcaption{font-size:20px;line-height:1.3;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--ink)}
.shots figcaption span{display:block;margin-top:4px;font-size:18px;line-height:1.4;letter-spacing:0;font-variant-caps:normal;color:var(--stone)}
@media (max-width:900px){.shots--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.shots,.shots--3{grid-template-columns:1fr}}
/* A tall screen opens at reading size and scrolls, instead of shrinking to the window */
dialog.zoom:has(img[src*="/edut/products/"])[open]{align-items:flex-start;overflow:auto;padding:56px 24px}
dialog.zoom img[src*="/edut/products/"]{max-height:none;max-width:min(1400px,100%)}
dialog.zoom:has(img[src*="/edut/products/"]) button{position:fixed;background:rgba(28,28,28,.75)}
/* EDUT Institutional Integration: the scholar's-task table (9 Oct 2026) */
.ii-table{width:100%;max-width:900px;border-collapse:collapse;font-size:21px;line-height:1.4}
.ii-table thead th{padding:0 28px 12px 0;text-align:left;font-weight:400;font-size:22px;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone);border-bottom:1px solid var(--rule-strong)}
.ii-table tbody th{width:34%;padding:18px 28px 18px 0;text-align:left;vertical-align:top;font-weight:400;font-style:italic}
.ii-table td{padding:18px 0;vertical-align:top}
.ii-table tbody tr+tr th,.ii-table tbody tr+tr td{border-top:1px solid var(--rule)}
@media (max-width:700px){.ii-table thead{display:none}.ii-table,.ii-table tbody,.ii-table tr,.ii-table th,.ii-table td{display:block;width:auto}.ii-table tbody th{width:auto;padding:16px 0 4px}.ii-table td{padding:0 0 16px}.ii-table tbody tr+tr th{border-top:1px solid var(--rule)}.ii-table tbody tr+tr td{border-top:0}}
/* EDUT inner pages in the Overview's language (David, 9 Oct 2026: "make all the internal pages feel like the Overview page") */
.ov-head{display:flex;align-items:flex-end;min-height:max(420px,58vh);background-color:var(--ink);background-image:url(assets/img/ink-grain.jpg);background-size:450px;color:var(--paper)}
.ov-head__in{width:100%;max-width:1320px;margin:0 auto;padding:clamp(90px,12vh,140px) var(--gutter) clamp(60px,9vh,110px)}
.ov-head__k{margin:0 0 22px;font-size:21px;letter-spacing:.14em;font-variant-caps:all-small-caps;color:var(--on-ink-muted)}
.ov-head__k .mark{color:var(--accent-on-ink)}
.ov-head__t{margin:0;font-family:var(--serif-title);font-weight:400;font-size:clamp(64px,8vw,132px);line-height:.92;color:var(--paper)}
.ov-head__lede{margin:28px 0 0;max-width:24em;font-style:italic;font-size:clamp(26px,2.4vw,38px);line-height:1.2;color:#E9E5DC}
.ov-s--ink .ov-k{color:var(--accent-on-ink)}
.ov-s--ink .ov-p,.ov-s--ink .ov-lead{color:#E9E5DC}
.ov-s--ink .ov-h{color:var(--paper)}
.ov-list{margin:20px 0;font-size:21px;line-height:1.5;max-width:33em}
.ov .ov-list + .ov-p{margin-top:20px}
.ov-two--text > div:last-child > div > .ov-p + .ov-p{margin-top:20px}
.ov-two--text > div:last-child > div > .ov-p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* proposal screens beside the text */
.ov-shots{display:grid;gap:26px}
.ov-shots figure{margin:0;display:flex;flex-direction:column;gap:10px}
.ov a.shot{display:block;aspect-ratio:8/5;overflow:hidden;background:#fff;border:1px solid var(--rule);box-shadow:0 24px 50px -28px rgba(28,28,28,.45);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.ov a.shot:hover{transform:translateY(-4px);box-shadow:0 34px 60px -28px rgba(28,28,28,.55)}
.ov a.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.ov-shots figcaption{font-size:19px;line-height:1.3;letter-spacing:.12em;font-variant-caps:all-small-caps;color:var(--ink)}
.ov-shots figcaption span{display:block;margin-top:4px;font-size:17px;line-height:1.4;letter-spacing:0;font-variant-caps:normal;color:var(--stone)}
.ov-shots--stack figure:nth-child(2){width:82%;margin:6px 0 0 auto}
.ov-shots--lead{grid-template-columns:1fr 1fr}
.ov-shots--lead figure:first-child{grid-column:1/-1}
.ov-shots--grid{grid-template-columns:1fr 1fr;gap:30px 24px}
.ov-two:has(.ov-shots){align-items:start}
/* the compounding curve on Support */
.ov-curve{margin:0}.ov-curve svg{display:block;width:100%;height:auto}
.ov--js .ov-c-grow{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.8s ease .3s}
.ov--js .ov-fade.in .ov-c-grow{stroke-dashoffset:0}
/* the scholar's-task table in a screen */
.ov-table{max-width:1100px;margin-top:8px}
.ov-after{margin-top:34px}
@media (max-width:900px){
.ov-shots--stack figure:nth-child(2){width:100%;margin:0}
.ov-head{min-height:0}
}
/* EDUT Products: its six-item menu can wrap on computers; a diamond at a line end is hidden there too (9 Oct 2026) */
.pagehead .jump i.is-break{flex-basis:100%;height:0;overflow:hidden;visibility:hidden}
/* EDUT Products: the Chatbot section, text beside a phone on dark (David approved 9 Oct 2026) */
.cb{background:radial-gradient(ellipse 55% 75% at 66% 55%,#5a1608 0%,#2a0d07 42%,#160b08 75%,#110a08 100%);color:var(--paper)}
.cb__in{max-width:1320px;margin:0 auto;padding:70px var(--gutter) 0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);align-items:center}
.cb__t{padding-bottom:70px}
.cb__t .label{margin:0 0 20px;color:var(--accent-on-ink)}
.cb__t .h2{margin:0 0 14px;font-family:var(--serif-title);font-size:clamp(40px,3.6vw,58px);line-height:1.05;color:var(--paper)}
.cb__sub{margin:0 0 22px;font-style:italic;font-size:25px;line-height:1.3;color:#F2EDE3}
.cb__t p:not(.cb__sub){margin:0 0 16px;font-size:21px;line-height:1.5;color:#E2DDD3}
.cb__img{align-self:end}
.cb__img img{display:block;width:112%;max-width:none;height:auto;margin-left:-6%}
@media (max-width:900px){.cb__in{grid-template-columns:1fr;padding-top:56px}.cb__t{padding-bottom:10px}.cb__img img{width:100%;margin-left:0}}
/* Viral Libels on phones: opens like the other book pages, cover with space above, then the byline,
title and subtitle centered under it (David, 9 Oct 2026); the description below reads left-aligned. */
@media (max-width:700px){
.hero.bookhero{padding-top:clamp(28px,6vh,80px)}
.bookhero .hero__text{align-items:center;text-align:center}
.bookhero .hero__text>.label{font-size:18px;white-space:nowrap}
.bookhero .hero__text p:not(.sub){align-self:stretch;text-align:left;margin-top:14px}
}
/* The byline diamond under a book cover is the same size as on the Epstein page (David, 9 Oct 2026: "way too big") */
.bookhero .hero__text>.label .dot{font-size:1.25em;top:.03em}
/* EDUT Products: six matching sections, text beside one large picture, dark and paper in turn (David, GO 9 Oct 2026) */
.pr{background:radial-gradient(ellipse 55% 75% at 66% 55%,#5a1608 0%,#2a0d07 42%,#160b08 75%,#110a08 100%);color:var(--paper)}
.pr--paper{background:none;color:var(--ink);border-top:1px solid var(--rule)}
.pr--paper+.pr{border-top:0}
.pr__in{max-width:1320px;margin:0 auto;padding:96px var(--gutter);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:64px;align-items:center}
.pr--phone .pr__in{padding-bottom:0;gap:0}
.pr--phone .pr__t{padding-bottom:70px}
.pr--phone .pr__img{align-self:end}
.pr--phone .pr__img img{width:112%;max-width:none;margin-left:-6%}
.pr__t .label{margin:0 0 20px;color:var(--accent-on-ink)}
.pr--paper .pr__t .label{color:var(--accent)}
.pr__t .h2{margin:0 0 14px;font-family:var(--serif-title);font-size:clamp(40px,3.6vw,58px);line-height:1.05;color:inherit}
.pr__sub{margin:0 0 22px;font-style:italic;font-size:25px;line-height:1.3}
.pr__t p:not(.pr__sub),.pr__t .list{margin:0 0 16px;font-size:21px;line-height:1.5;color:#E2DDD3}
.pr--paper .pr__t p:not(.pr__sub),.pr--paper .pr__t .list{color:var(--ink)}
.pr .list li::before{color:var(--accent-on-ink)}
.pr--paper .list li::before{color:var(--accent)}
.pr__img img{display:block;width:100%;height:auto}
a.pr__screen{display:block;border-radius:6px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border:1px solid var(--rule);cursor:zoom-in;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
a.pr__screen:hover{transform:translateY(-4px)}
.pr__more{margin:18px 0 0;font-size:19px;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}
.pr:not(.pr--paper) .pr__more{color:var(--on-ink-muted)}
.pr__more a{color:inherit;border-bottom:1px solid currentColor;cursor:zoom-in}
.pr__more a:hover{color:var(--accent)}
.pr:not(.pr--paper) .pr__more a:hover{color:var(--accent-on-ink)}
/* Only the Chatbot is dark; the rest are paper and a light tint in turn (David: "we cannot have all of them black") */
.pr--tint{background:#EFEADF}
.pr--paper+.pr--paper{border-top:0}
/* The site's three colours in turn: black, red, white (David: "we have white, black, red. we should use them") */
.pr--red{background-color:#CC320E;background-image:url(assets/img/paper-grain.jpg);background-size:450px;background-blend-mode:multiply;color:var(--paper)}
.pr--red .pr__t .label{color:var(--paper);opacity:.8}
.pr--red .pr__t p:not(.pr__sub),.pr--red .pr__t .list{color:#FBEDE6}
.pr--red .list li::before{color:var(--paper)}
.pr--red .pr__more{color:#F6D9CE}
.pr--red .pr__more a:hover{color:var(--paper)}
.pr--red a.pr__screen{border-color:rgba(0,0,0,.2)}
/* more room (David: "they look very cramped") */
.pr__in{max-width:1400px;padding:150px var(--gutter);gap:120px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.pr--phone .pr__in{padding-top:120px;gap:60px}
.pr--phone .pr__t{padding-bottom:120px}
.pr__t .label{margin-bottom:28px}
.pr__t .h2{margin-bottom:20px}
.pr__sub{margin-bottom:34px}
.pr__t p:not(.pr__sub),.pr__t .list{margin-bottom:24px;line-height:1.58}
.pr__t .list{gap:14px}
.pr__more{margin-top:26px}
@media (max-width:900px){
.pr__in{grid-template-columns:1fr;gap:36px;padding:72px var(--gutter)}
.pr--phone .pr__in{padding-top:72px;gap:20px}
.pr--phone .pr__img img{width:100%;margin-left:0}
.pr--phone .pr__t{padding-bottom:0}
}
/* EDUT Products: the screen list swaps the large screen in place (David: "more screens should swap them out, not zoom in") */
.pr__more a{margin-right:.2em}
.pr__more a+a::before{content:"\00B7";display:inline-block;margin:0 .55em 0 .2em;color:currentColor;border:0}
.pr__more a[aria-current]{border-bottom-color:transparent;color:var(--accent);cursor:default}
.pr:not(.pr--paper) .pr__more a[aria-current]{color:var(--paper)}
.pr__more a:not([aria-current]){cursor:pointer}
a.pr__screen img{transition:opacity .25s}
/* How it works: the Ordinary AI / EDUT comparison, three columns (9 Oct 2026) */
.cmp-table{max-width:1000px}
.cmp-table tbody th{width:24%}
.cmp-table thead td{border-bottom:1px solid var(--rule-strong)}
.cmp-table td{padding-right:28px}
.cmp-table td:last-child{padding-right:0}
@media (max-width:700px){.cmp-table td{padding-right:0}.cmp-table td::before{content:attr(data-label);display:block;margin:6px 0 2px;font-size:18px;letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--stone)}}
/* EDUT infographics in the Overview's screens and opening (9 Oct 2026) */
.ov-infog{margin:0 auto;max-width:1180px}.ov-infog img{display:block;width:100%;height:auto}
.ov-w .ov-fade>.ov-infog{margin-top:56px}
.ov-s--fig{padding-top:clamp(50px,8vh,90px);padding-bottom:clamp(50px,8vh,90px)}
.pagehead .infog{margin:34px 0 10px;max-width:1000px}
/* How it works in the Products layout: text beside its graphic, colours never adjacent (David, 9 Oct 2026) */
.pr__in--top{align-items:start}
.pr__img--sticky{position:sticky;top:40px}
.pr__fig{margin:0}.pr__fig img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 40px 80px -36px rgba(0,0,0,.55)}
.pr--paper .pr__fig img{box-shadow:0 30px 60px -36px rgba(28,28,28,.35);border:1px solid var(--rule)}
.pr__h3{margin:34px 0 14px;font-family:var(--serif-title);font-weight:400;font-style:italic;font-size:28px;line-height:1.2}
.pr__in--one{grid-template-columns:1fr;gap:40px}
.pr__in--one .pr__t{max-width:760px}
.pr .cmp-table{max-width:none;font-size:20px}
@media (max-width:900px){.pr__img--sticky{position:static}}
/* Infographics on black or red sections are drawn in that section's colours, with no frame (David, 9 Oct 2026) */
.pr .pr__fig--bare img,.pr--paper .pr__fig--bare img{box-shadow:none;border:0;border-radius:0}
/* Infographics always take the full width of the section, never a side column (David, 9 Oct 2026) */
.pr__fig--full{margin:16px 0}
.pr__fig--full img{width:100%}
/* How it works: long text set in structured blocks (David, 9 Oct 2026) */
.hw__in{max-width:1320px;margin:0 auto;padding:130px var(--gutter) 140px}
.hw .h2{margin:10px 0 0}
.hw__open{font-family:var(--serif-title);font-size:clamp(34px,3.6vw,52px);line-height:1.12;max-width:1000px;margin:36px 0 64px}
.pr--red .hw__open,.pr:not(.pr--paper) .hw__open{color:var(--paper)}
.hw__fig{margin:0 0 72px}.hw__fig img{display:block;width:100%;height:auto}
.pr--paper .hw__fig img{border:1px solid var(--rule)}
.hw__cols{display:grid;gap:44px 56px;margin:0 0 72px}
.hw__cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hw__cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hw__cols>div{border-top:2px solid currentColor;padding-top:22px}
.hw__cols p{font-size:19px;line-height:1.55;margin:0 0 16px}
.hw__n{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:22px;color:#E2481F;margin-bottom:8px}
.pr--paper .hw__n{color:#C6300D}
.hw__ch{font-family:var(--serif-title);font-style:italic;font-weight:400;font-size:26px;line-height:1.2;margin:0 0 14px}
.hw__h3{font-family:var(--serif-title);font-style:italic;font-weight:400;font-size:34px;margin:0 0 26px}
.hw__lead{font-size:21px;line-height:1.55;max-width:820px;margin:0 0 56px}
.hw__cols:last-child,.hw__fig:last-child{margin-bottom:0}
.hw__vs{border-top:2px solid var(--ink)}
.hw__vshead,.hw__row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:48px}
.hw__vshead{padding:18px 0;font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hw__vshead span:last-child{color:#C6300D}
.hw__row{padding:26px 0;border-top:1px solid var(--rule)}
.hw__row h3{font-family:var(--serif-title);font-style:italic;font-weight:400;font-size:24px;line-height:1.2;margin:0}
.hw__row p{margin:0;font-size:18px;line-height:1.5}
.hw__ai{opacity:.62}
.hw__ed{border-left:3px solid #C6300D;padding-left:20px}
@media (max-width:900px){.hw__cols--3,.hw__cols--2{grid-template-columns:1fr}.hw__vshead{display:none}.hw__row{grid-template-columns:1fr;gap:12px}.hw__in{padding:80px var(--gutter)}}
.hw .h2+.hw__lead{margin-top:30px}
@media (max-width:900px){.hw__ai::before,.hw__ed::before{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.hw__ai::before{content:"Ordinary AI"}.hw__ed::before{content:"EDUT";color:#C6300D}}
.hw__fig picture{display:block}
/* EDUT pages stripped to plain content while the content is settled (David, 10 Oct 2026) */
.basic{max-width:760px;margin:0 auto;padding:56px var(--gutter) 110px}
.basic h1{font-family:var(--serif-title);font-weight:400;font-size:48px;line-height:1.1;margin:0 0 28px}
.basic h2{font-family:var(--serif-title);font-weight:400;font-size:32px;line-height:1.2;margin:64px 0 18px}
.basic h3{font-family:var(--serif-title);font-weight:400;font-style:italic;font-size:24px;line-height:1.25;margin:34px 0 10px}
.basic p,.basic li{font-size:20px;line-height:1.6;margin:0 0 18px}
.basic ul,.basic ol{padding-left:1.2em;margin:0 0 18px}
.basic figure{margin:30px 0 34px}
.basic img{display:block;max-width:100%;max-height:85vh;width:auto;height:auto}
.basic table{width:100%;border-collapse:collapse;margin:20px 0}
.basic th,.basic td{text-align:left;vertical-align:top;font-size:17px;line-height:1.45;padding:12px 14px 12px 0;border-top:1px solid var(--rule);font-weight:400}
.basic thead th,.basic thead td{font-style:italic}
@media (max-width:700px){.basic h1{font-size:36px}.basic h2{font-size:27px;margin-top:48px}.basic p,.basic li{font-size:18px}
.basic .wp-block-table{overflow-x:auto}.basic .wp-block-table table{min-width:640px}}
.basic .wp-block-table{margin:20px 0}.basic .wp-block-table table{table-layout:auto}
/* Plain pages: a rule between sections, for now (David, 10 Oct 2026) */
.basic h2{border-top:1px solid var(--ink);padding-top:44px;margin-top:72px}
/* Overview top: the train photo behind the title, window side darkened (David chose B, 10 Oct 2026). On phones the photo sits above the text, cropped from the right. */
.basic .edut-hero{position:relative;width:100vw;max-width:none;margin:-40px 0 0 calc(50% - 50vw);min-height:0;height:min(56.25vw,860px);padding:0;display:block;overflow:hidden;color:var(--paper,#F8F5EE)}
.basic .edut-hero .wp-block-cover__image-background{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.basic .edut-hero .wp-block-cover__background{position:absolute;inset:0;opacity:1!important;background:linear-gradient(90deg,rgba(28,28,28,.82) 0%,rgba(28,28,28,.6) 38%,rgba(28,28,28,0) 58%)!important}
.basic .edut-hero .wp-block-cover__inner-container{position:absolute;left:max(var(--gutter),calc(50vw - 640px));top:50%;transform:translateY(-50%);width:min(560px,42vw);color:#F8F5EE}
.basic .edut-hero h1{font-size:clamp(72px,8.3vw,120px);line-height:1;margin:0 0 28px;color:#F8F5EE;border:0;padding:0}
.basic .edut-hero p{color:#F8F5EE}
.basic .edut-hero p.edut-hero__sub{font-family:var(--serif-title);font-style:italic;font-size:clamp(26px,2.5vw,36px);line-height:1.15;margin:0 0 26px}
.basic .edut-hero p.edut-hero__lede{font-size:22px;line-height:1.45;margin:0}
.basic .edut-hero+*{margin-top:72px}
@media (max-width:700px){
.basic .edut-hero{height:auto;overflow:visible;color:var(--ink)}
.basic .edut-hero .wp-block-cover__image-background{position:relative;display:block;width:100vw;height:420px;object-position:100% center}
.basic .edut-hero .wp-block-cover__background{display:none}
.basic .edut-hero .wp-block-cover__inner-container{position:static;transform:none;width:auto;padding:28px var(--gutter) 0}
.basic .edut-hero h1,.basic .edut-hero p{color:var(--ink)}
.basic .edut-hero h1{font-size:64px;margin-bottom:16px}
.basic .edut-hero p.edut-hero__sub{font-size:24px;line-height:1.2;margin-bottom:16px}
.basic .edut-hero p.edut-hero__lede{font-size:18px}
.basic .edut-hero+*{margin-top:48px}}
/* The red EDUT mark at the left of the Overview title, as the page title had it before the pages went plain (David, 10 Oct 2026). Drawn from assets/img/edut-mark.svg; the cut-out letter shows what is behind it. */
.basic .edut-hero h1::before{content:"";display:inline-block;width:.74em;height:.74em;margin-right:.28em;vertical-align:baseline;transform:translateY(.03em);background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 203.52 203.28%22%3E%3Cpath fill=%22%23000%22 d=%22M203.28.24v203.04H.24V.24s203.04,0,203.04,0ZM172.51,36.89l-38.93-.06-5.79-.03-7.67,49.33c-.78,4.99-1.61,9.65-2.79,14.5-2.66,10.91-6.76,19.2-18.48,21.95l-14.77-85.79-23.57-.03-16.63-.03,14.67,88.44-27.34.05,9.16,39.5,16.64.05,31.16.03c31.52-.94,56.22-9.38,67.76-40.71,2.37-6.42,4.11-12.89,5.25-19.7l11.34-67.49Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 203.52 203.28%22%3E%3Cpath fill=%22%23000%22 d=%22M203.28.24v203.04H.24V.24s203.04,0,203.04,0ZM172.51,36.89l-38.93-.06-5.79-.03-7.67,49.33c-.78,4.99-1.61,9.65-2.79,14.5-2.66,10.91-6.76,19.2-18.48,21.95l-14.77-85.79-23.57-.03-16.63-.03,14.67,88.44-27.34.05,9.16,39.5,16.64.05,31.16.03c31.52-.94,56.22-9.38,67.76-40.71,2.37-6.42,4.11-12.89,5.25-19.7l11.34-67.49Z%22/%3E%3C/svg%3E") center/contain no-repeat}
/* Hebrew words set in a heavy sans beside Jenson: Assistant ExtraBold, Hebrew letters only, served from the theme (David chose A, 10 Oct 2026). Mark a Hebrew word with lang="he". */
@font-face{font-family:"Assistant Hebrew";src:url("assets/fonts/assistant-hebrew-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
:lang(he),.heb{font-family:"Assistant Hebrew",var(--serif);font-weight:800;font-style:normal}
/* Praise, layout B (David, 11 Oct 2026): one lead quote set large under a red rule, the rest in two columns that run on without gaps, each under a thin rule. One column on phones. */
.praise .quote{border-top:1px solid var(--ink);padding:26px 0 46px;gap:0}
.praise .quote blockquote{font-size:22px;line-height:1.5}
.praise .quote figcaption{margin-top:18px;font-size:17px;line-height:1.4}
.praise .quote figcaption b{font-size:18px;margin-bottom:4px}
.praise .quote--lead{border-top:0;padding:0 0 56px} /* no rule above the lead blurb (David, 11 Oct 2026) */
.praise .quote--lead blockquote{font-size:34px;line-height:1.35}
.praise__cols{columns:2;column-gap:64px}
.praise__cols .quote{break-inside:avoid;display:block}
@media (max-width:800px){.praise__cols{columns:1}.praise .quote--lead blockquote{font-size:26px}}
/* A blurb can run to two paragraphs (David, 11 Oct 2026) */
.quote blockquote p,.band blockquote p{margin:0}.quote blockquote p+p,.band blockquote p+p{margin-top:.7em}
/* Epstein excerpt (David, 11 Oct 2026): two paragraphs show, the second fading out; "Continue reading" opens the rest of the section in place. No full-chapter link: the chapter is not offered. */
.excerpt__fade{position:relative}
.excerpt:not(.is-open) .excerpt__fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.2em;background:linear-gradient(rgba(248,245,238,0),var(--paper,#F8F5EE));pointer-events:none}
.excerpt__more>p+p{margin-top:22px} /* same paragraph spacing as the visible part (David, 11 Oct 2026) */
/* Epstein book press kit page (David, 11 Oct 2026) */
.kit-sub{margin:0}.kit-sub+p{margin-top:0}
.kit-cover{display:block;width:220px;height:auto;margin:0 0 28px;box-shadow:0 18px 40px -22px rgba(28,28,28,.45)}
.kit-list{margin:0;padding-left:1.4em}.kit-list li{font-size:20px;line-height:1.55;margin:0 0 14px;padding-left:.2em}
/* EDUT in the menu, not clickable for now (David, 12 Oct 2026) */
.nav a.nolink{cursor:default;pointer-events:none;text-decoration:none}