/* Office of George Irwin. Site system: black on white, one 12-column grid,
   Libre Caslon Text for the big lines, Georgia italic for the quotes, Manrope for everything else. */

:root {
  --paper: #FFFFFF;
  --ink: #141416;
  --ink-soft: rgba(20, 20, 22, .72);   /* secondary text, 8.5:1 on white */
  --ink-label: rgba(20, 20, 22, .64);  /* labels, 5.2:1 on white, 5.0:1 on tone */
  --hair: rgba(20, 20, 22, .14);
  --hair-2: rgba(20, 20, 22, .32);
  --tone: #F4F2EE;
  --brass: #9F7427;                    /* focus ring only */
  --brass-text: #86611F;               /* prototype marks, 5.6:1 on white */

  --display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  /* quotes: George, 2026-09-20, found the Caslon Text italic hard to read and chose the look of a screenshot that measured out as
     Georgia italic (line widths within 1%). Libre Caslon Display has no italic. Georgia ships with macOS, iOS and Windows. */
  --quote: Georgia, "Times New Roman", serif;
  --sans: Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* type scale: each step reaches its size at the 80rem grid and stops */
  --t-label: .8125rem;
  --t-small: .9375rem;
  --t-body: 1.0625rem;
  --t-lede: clamp(1.125rem, .33vw + 1.05rem, 1.3125rem);
  --t-h3: clamp(1.125rem, .22vw + 1.075rem, 1.25rem);
  --t-h2: clamp(1.375rem, .44vw + 1.26875rem, 1.625rem);
  --t-figure: clamp(1.875rem, .66vw + 1.71875rem, 2.25rem);
  --t-h2-big: clamp(1.875rem, 1.33vw + 1.5625rem, 2.625rem);
  --t-quote: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);        /* 24px on a phone, 38px from 1280px */
  --t-quote-pair: clamp(1.25rem, .9vw + .9rem, 1.625rem);   /* two quotes side by side: about 25 to 31 characters a line */
  --t-quote-compact: clamp(1.25rem, .5vw + 1.1rem, 1.5rem);
  --t-display-long: clamp(2rem, 1.77vw + 1.5875rem, 3rem);
  --t-display: clamp(2.5rem, 2.2vw + 1.9875rem, 3.75rem);

  /* grid and space */
  --max: 80rem;
  --margin: clamp(1.25rem, 4vw, 3rem);
  --gutter: 1.5rem;
  --head: 4.75rem;
  --space-rule: 1.25rem;
  --space-section: clamp(4rem, 8vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* Every length in this file is in rem. The root is 100% up to 900px wide, which covers phones and tablets, and grows to 120%
   by 1080px, so the desktop layout is the same system a fifth larger. George, 2026-09-20: the site looked the right size to
   him at 120% browser zoom. At 1080px and up this matches that zoomed view exactly. Hairlines and the focus ring stay in px. */
html { font-size: clamp(100%, 1.7778vw, 120%); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (min-width: 900px) { html { scroll-padding-top: calc(var(--head) + 1.5rem); } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hair-2);
  text-underline-offset: .24em;
  transition: text-decoration-color .15s ease, color .15s ease, background-color .15s ease, border-color .15s ease;
}
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--margin); top: .5rem; z-index: 100; background: var(--paper); padding: .5rem .75rem; border: 1px solid var(--ink); }

/* ---------- grid ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.g12, .g9 { display: grid; column-gap: var(--gutter); }
.g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.g9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }

@media (min-width: 900px) {
  .rail { grid-column: 1 / 4; }
  .main { grid-column: 4 / 13; }
  .read { grid-column: 4 / 10; }
  .aside { grid-column: 10 / 13; }
  .full { grid-column: 1 / -1; }
  /* placements inside the 9-column main */
  .m-read { grid-column: 1 / 7; }
  .m-aside { grid-column: 7 / 10; }
  .m-1 { grid-column: 1 / 4; }
  .m-2 { grid-column: 4 / 7; }
  .m-3 { grid-column: 7 / 10; }
  .m-rest { grid-column: 4 / 10; }
  .m-k { grid-column: 1 / 3; }
  .m-v { grid-column: 3 / 10; }
  .m-mid { grid-column: 3 / 7; }
  .sticky { position: sticky; top: calc(var(--head) + 1.5rem); }
  /* measures that end on a column edge */
  .main > .measure, .main > .body.measure, .main > .quote p { max-width: calc((100% - 8 * var(--gutter)) * 6 / 9 + 5 * var(--gutter)); }
  .main > .pull { max-width: calc((100% - 8 * var(--gutter)) * 8 / 9 + 7 * var(--gutter)); }
}
@media (max-width: 899.98px) {
  .g12, .g9 { grid-template-columns: minmax(0, 1fr); }
  .g12 > *, .g9 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .measure { max-width: 62ch; }
}

/* ---------- type roles ---------- */
.display { font-family: var(--display); font-size: var(--t-display); line-height: 1.05; letter-spacing: -.018em; }
.display b, .display strong, .h2-big b, .h2-big strong { font-weight: 700; }
.display.long { font-size: var(--t-display-long); line-height: 1.1; letter-spacing: -.006em; }
.h2-big { font-family: var(--display); font-size: var(--t-h2-big); line-height: 1.08; letter-spacing: -.008em; }
.h2 { font-family: var(--sans); font-weight: 600; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.012em; }
.h3 { font-family: var(--sans); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.008em; }
.pull { font-family: var(--display); font-style: italic; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.004em; text-wrap: balance; }
.stat { font-family: var(--display); font-size: var(--t-figure); line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.lede { font-size: var(--t-lede); line-height: 1.5; }
.small { font-size: var(--t-small); line-height: 1.55; }
.quiet { color: var(--ink-soft); }
.tags .t { white-space: nowrap; }
.tags .t:not(:last-child)::after { content: " \00B7"; margin-right: .5em; }
.label { font-family: var(--sans); font-size: var(--t-label); font-weight: 600; line-height: 1.5; color: var(--ink-label); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rot { font-style: italic; transition: opacity .35s ease; }
.rot.fade { opacity: 0; }
.cite { display: block; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.body > * + * { margin-top: 1em; }

/* ---------- prototype bar and grid overlay ---------- */
.proto { background: var(--tone); border-bottom: 1px solid var(--hair); font-family: var(--sans); font-weight: 600; font-size: var(--t-label); color: var(--ink-soft); }
.proto .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .125rem 1.25rem; min-height: 2.25rem; }
.proto nav { display: flex; gap: 1.25rem; align-items: center; }
.proto a { text-decoration: none; color: var(--ink); padding-block: .5rem; }
.proto a:hover { text-decoration: underline; }
.proto button { font: inherit; color: var(--ink); background: none; border: 0; padding: .5rem 0; cursor: pointer; }
.proto button:hover { text-decoration: underline; }
.proto .note { color: var(--brass-text); flex-basis: 100%; order: 3; padding-bottom: .5rem; }
.proto .p-short { display: none; }
@media (max-width: 699.98px) { .proto .p-full, .proto .note { display: none; } .proto .p-short { display: inline; } }

.grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 90; display: none; }
.show-grid .grid-overlay { display: block; }
.grid-overlay .wrap, .grid-overlay .g12 { height: 100%; }
.grid-overlay span { background: rgba(159, 116, 39, .07); box-shadow: inset 1px 0 rgba(159, 116, 39, .22), inset -1px 0 rgba(159, 116, 39, .22); }
@media (max-width: 899.98px) { .grid-overlay .g12 > span:not(:first-child) { display: none; } }

/* ---------- header ---------- */
/* the header is solid paper (George 2026-10-05: no glass, no gradient) */
.site-head { background: var(--paper); z-index: 60; }
@media (max-width: 899.98px) { .site-head { position: relative; } }
@media (min-width: 900px) { .site-head { position: sticky; top: 0; } }
.site-head .g12 { align-items: center; min-height: var(--head); }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.brand { display: block; line-height: 0; text-decoration: none; min-width: 0; flex: 0 1 auto; }
.brand img { width: 100%; max-width: 16.375rem; height: auto; }
.nav { display: flex; align-items: center; column-gap: 1.5rem; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(1rem, 2vw, 2rem); }
/* wide screens: lockup at the left margin, the button at the right, the links centered in the space between */
@media (min-width: 900px) {
  .site-head .g12 { grid-template-columns: auto minmax(0, 1fr); }
  .brand-row { grid-column: 1; }
  .nav { grid-column: 2; }
  .nav-links { flex: 1; justify-content: center; flex-wrap: nowrap; }
  .nav .nl { white-space: nowrap; }
}
.nav .nl { font-size: var(--t-small); font-weight: 500; text-decoration: none; padding-block: .75rem .6875rem; border-bottom: 1px solid transparent; }
.nav .nl:hover { border-bottom-color: var(--hair-2); }
.nav .nl[aria-current] { border-bottom-color: var(--ink); }
.nav .book-d { white-space: nowrap; flex: none; }
.brand-row .book-m { display: none; white-space: nowrap; flex: none; }
/* between the phone header and the full grid, the lockup and the links tighten so the right side clears the lockup */
@media (min-width: 900px) and (max-width: 1367.98px) {
  .brand img { max-width: 12.5rem; }
  .nav-links { column-gap: .875rem; }
  .nav .nl { font-size: .875rem; }
  .nav .book-d { padding-inline: .75rem; }
}
@media (max-width: 899.98px) {
  .brand img { max-width: 12.25rem; }
  .brand-row .book-m { display: inline-flex; }
  .nav .book-d { display: none; }
  .nav { border-top: 1px solid var(--hair); padding-block: .25rem; }
  .nav-links { column-gap: 1.5rem; }
  .nav .nl { padding-block: .5rem .4375rem; }
}

@media (max-width: 359.98px) { .nav-links { column-gap: .875rem; } }

/* ---------- actions ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .75rem;
  min-height: 2.875rem; padding: .625rem 1.25rem;
  border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font: 600 var(--t-small)/1.2 var(--sans); text-decoration: none; text-align: left; cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--paper); color: var(--ink); }
.btn .amt { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; padding-left: .75rem; border-left: 1px solid currentColor; white-space: nowrap; }
.btn-sm { min-height: 2.5rem; padding: .5rem .875rem; font-size: .875rem; }
.btn.stack { flex-direction: column; align-items: flex-start; gap: .125rem; }
.btn.stack .amt { border-left: 0; padding-left: 0; }
.r-act .btn.stack, .option .btn.stack, .buybox .btn.stack { justify-content: center; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.tl { font-weight: 600; font-size: var(--t-small); }
.next .tl { font-weight: inherit; font-size: inherit; }
.next { margin-top: .625rem; font-family: var(--sans); font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }

/* ---------- page opener ---------- */
.opener { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 5vw, 5rem); }
.opener .g12 { align-items: start; }
.opener .eyebrow { margin-bottom: 1.25rem; }
@media (min-width: 900px) {
  .opener .eyebrow { grid-column: 1 / -1; }
  .opener h1 { grid-column: 1 / 11; }
  .opener .o-lede { grid-column: 4 / 10; }
  .opener .o-aside { grid-column: 10 / 13; }
  .opener .o-lede, .opener .o-aside { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
}
@media (max-width: 899.98px) { .opener .o-lede, .opener .o-aside { margin-top: 1.5rem; } .br-d { display: none; } }
/* on a phone the hero line scales with the screen so "clarity + connection" holds one line */
@media (max-width: 479.98px) { .hero .display { font-size: clamp(1.6875rem, 9vw, 2.5rem); } }
/* home hero: headline and lede share the left seven columns, the portrait holds the right four for the full height */
@media (min-width: 900px) {
  .hero h1 { grid-column: 1 / 9; grid-row: 1; }
  .hero .o-lede { grid-column: 1 / 8; grid-row: 2; margin-top: 2.75rem; }
  .hero .o-aside { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: 0; }
  /* the portrait takes the height of the text column, so its foot meets the foot of the actions */
  .hero .o-aside { align-self: stretch; position: relative; min-height: 20rem; }   /* low enough that the words set the height, so the photo's foot meets the buttons */
  .hero .portrait, .hero .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  /* the mirrored hero (class photo-left, from HOME_HERO in build.py): portrait in columns 1 to 4, column 5 left open as
     column 8 was before, headline and lede together in 6 to 12. The lede keeps its seven columns. */
  .hero.photo-left h1 { grid-column: 6 / 13; }
  .hero.photo-left .o-lede { grid-column: 6 / 13; }
  .hero.photo-left .o-aside { grid-column: 1 / 5; }
}
.o-lede .actions { margin-top: 1.75rem; }
.fits { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.fits a { font-weight: 500; font-size: var(--t-small); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--tone); }
.portrait figcaption { margin-top: .625rem; }
@media (max-width: 899.98px) { .portrait { max-width: 17.5rem; } .bio-open .portrait { margin-top: 2rem; } }

/* ---------- sections ---------- */
/* The home page is a run of separate chapters, so its sections stand further apart than the grouped lists on inner pages:
   about two and a half times the pitch of the rows inside them, which is what lets a section read as a unit. */
.home { --space-section: clamp(5.5rem, 11vw, 11rem); }
.home .opener { padding-bottom: clamp(4.5rem, 9vw, 9rem); }
.sec, .group, .case { padding-bottom: var(--space-section); }
.ruled { border-top: 1px solid var(--hair-2); padding-top: var(--space-rule); }
@media (min-width: 900px) { .ruled { align-items: first baseline; } }
.rail .h2 { margin-bottom: .75rem; }
@media (min-width: 900px) and (max-width: 1319.98px) { .rail .h2, .c-rail .h2 { font-size: 1.375rem; } }
.rail .note { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.55; max-width: 22em; }
@media (max-width: 899.98px) { .rail { margin-bottom: 1.5rem; } }
.main > * + * { margin-top: 2rem; }

.lines > li { border-top: 1px solid var(--hair); padding-block: 1.25rem; }
.lines > li:last-child { border-bottom: 1px solid var(--hair); }
.lines .g9 { row-gap: .375rem; align-items: baseline; }
@media (min-width: 900px) and (max-width: 1319.98px) { .ways .m-2 { grid-column: 4 / 10; } .ways .m-3 { grid-column: 4 / 10; grid-row: 2; margin-top: .5rem; } }
/* a list that opens a section hangs from the section rule, not a second one */
.ruled .main > ul:first-child > li:first-child { border-top: 0; padding-top: 0; }

/* ---------- Work with me: filter ---------- */
.filter .g12 { border-bottom: 1px solid var(--hair-2); align-items: center; }
/* the filter sits directly on the first group, which hangs from the filter's rule rather than drawing one of its own */
.filter + .group .ruled { border-top: 0; }
@media (min-width: 900px) {
  .filter .f-label { grid-column: 1 / 4; }
  .filter .chips { grid-column: 4 / 10; }
  .filter .f-count { grid-column: 10 / 13; text-align: right; }
}
.chips { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
@media (max-width: 899.98px) { .chips { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 1.5rem; } .chip { justify-self: start; padding-block: .625rem .5625rem; } }
.chip { display: inline-block; padding-block: 1rem .875rem; font-weight: 500; font-size: var(--t-small); text-decoration: none; color: var(--ink-soft); }
.chip:hover { color: var(--ink); }
.chip[aria-current] { color: var(--ink); font-weight: 700; }
.f-count .nw { white-space: nowrap; }
@media (max-width: 899.98px) {
  .filter .f-label { padding-top: .875rem; }
  .filter .f-count { padding-block: .25rem 1rem; }
}

/* ---------- Work with me: groups and rows ---------- */
.rows > .row { padding-block: 0 2.5rem; }
.rows > .row + .row { border-top: 1px solid var(--hair); padding-top: 2.25rem; }
.row-grid { row-gap: .875rem; }
@media (min-width: 1320px) {
  .row-grid { grid-template-rows: auto 1fr; }
  .r-name { grid-column: 1 / 7; grid-row: 1; }
  .r-body { grid-column: 1 / 7; grid-row: 2; }
  .r-buy { grid-column: 7 / 10; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 1.125rem; }
}
@media (max-width: 1319.98px) {
  .row .row-grid { display: flex; flex-direction: column; gap: .875rem; }
  .r-buy { display: flex; flex-direction: column; gap: .875rem; }
  .r-act .actions { max-width: 26.25rem; }
}
.r-name .h3 { margin-bottom: .25rem; }
.r-price { display: flex; flex-direction: column; gap: .25rem; }
.amount { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .625rem; font-family: var(--sans); font-weight: 600; font-size: var(--t-lede); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.amount .per { font-weight: 400; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); }
.amount.words { font-size: var(--t-body); }
.amount.lg { font-size: var(--t-h2); }
.r-body > p { max-width: 58ch; }
.r-act .actions { flex-direction: column; align-items: stretch; gap: .625rem; }
.r-act .actions.pair { flex-direction: row; }
.r-act .actions.pair { gap: .5rem; flex-wrap: nowrap; }
.r-act .actions.pair .btn { flex: 0 0 auto; width: auto; padding-inline: .875rem; white-space: nowrap; justify-content: center; }
.r-act .actions.pair .btn.solid { flex: 1 1 auto; }
@media (max-width: 420px) { .r-act .actions.pair { flex-direction: column; } .r-act .actions.pair .btn { width: 100%; } }
.r-act .btn { width: 100%; justify-content: space-between; }
.r-price .more { margin-top: .5rem; display: flex; flex-direction: column; gap: .375rem; }

/* key and value lists: the key column is two of the six reading columns */
.spec { display: grid; grid-template-columns: calc((100% - 5 * var(--gutter)) / 3) minmax(0, 1fr); column-gap: var(--gutter); margin-top: 1.125rem; font-size: var(--t-small); line-height: 1.5; }
.spec dt, .spec dd { border-top: 1px solid var(--hair); padding-block: .6875rem; }
.spec dt { font-family: var(--sans); font-weight: 600; font-size: var(--t-label); color: var(--ink-label); padding-top: .75rem; }
.spec dd { color: var(--ink-soft); }
@media (max-width: 520px) {
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec dd { border-top: 0; padding-top: 0; }
}

/* ---------- quotes ---------- */
/* no rule above a quote (George, 2026-09-20): the italic serif sets it apart. Where the rule and its padding used to make
   the gap, a margin does: between stacked quotes, and under the results list in a case study. */
.quote + .quote { margin-top: 2rem; }
.c-body .quote { margin-top: 1.5rem; }
.o-lede .quote { margin-top: 1.75rem; }
/* the opening mark hangs in the margin: Georgia's italic quote mark is .386em wide */
.quote p { font-family: var(--quote); font-style: italic; font-size: var(--t-quote); line-height: 1.4; text-indent: -.39em; }
.quote.compact p { font-size: var(--t-quote-compact); }
/* A section of its own for quotes (.quote-band): two side by side across the full twelve columns, six each, which is the
   same measure a single quote has, so they keep the full quote size. The left one gives up a gutter and a half on its right
   so the right one's hanging mark has room. First lines share a baseline. */
.quote-band .ruled { padding-top: 3rem; row-gap: 2.5rem; }
.quote-band .quote + .quote { margin-top: 0; }
@media (min-width: 900px) {
  .quote-band .quote:nth-child(odd) { grid-column: 1 / 7; padding-right: calc(var(--gutter) * 1.5); }
  .quote-band .quote:nth-child(even) { grid-column: 7 / 13; }
  /* one quote alone sits on the reading column, columns 4 to 9, so the band doesn't read as half empty */
  .quote-band.single .quote:nth-child(odd) { grid-column: 4 / 10; padding-right: 0; }
  .quote-band .quote { position: relative; }
  .quote-band .quote .flag { position: absolute; bottom: 100%; left: 0; margin-bottom: .375rem; }
}
/* Two quotes in a row from 900px up: columns 1 to 4 and 6 to 9 of the main, column 5 open. Each has under half the single
   quote's measure, so the type comes down a step to keep a comfortable line. Below 900px they stack at full size. */
.quote-row { row-gap: 2rem; }
.main > * + .quote-row { margin-top: 3rem; }   /* a little more air above a row of quotes than the usual 2rem */
.quote-row .quote + .quote { margin-top: 0; }
@media (min-width: 900px) {
  .quote-row { align-items: start; }
  .quote-row > .quote:nth-child(odd) { grid-column: 1 / 5; }
  .quote-row > .quote:nth-child(even) { grid-column: 6 / 10; }
  .quote-row .quote p { font-size: var(--t-quote-pair); }
  /* a prototype flag rides above its quote, so the first lines of the two quotes stay level */
  .quote-row .quote { position: relative; }
  .quote-row .quote .flag { position: absolute; bottom: 100%; left: 0; margin-bottom: .375rem; }
}
.quote .cite { margin-top: .75rem; }
.quote.slot p { color: var(--ink-label); }
.flag { display: inline-block; margin-bottom: .625rem; padding: .125rem .4375rem; border: 1px solid currentColor; font-family: var(--sans); font-weight: 600; font-size: .75rem; line-height: 1.5; color: var(--brass-text); }

/* home proof: one column per kind of client */
.proof-cols { row-gap: 2.5rem; align-items: start; }
.pc-head .h3 { padding-bottom: .625rem; border-bottom: 1px solid var(--hair-2); margin-bottom: .875rem; }
.pc-head .flag { margin-bottom: .5rem; }
.pstats { margin-top: 1rem; }
.pstats > li { border-top: 1px solid var(--hair); }
.pstats > li:last-child { border-bottom: 1px solid var(--hair); }
.pstat { display: block; padding-block: 1.125rem; text-decoration: none; }
.pstat > span { display: block; }
.pstat .stat { margin-bottom: .5rem; }
.pstat .who { font-weight: 600; font-size: var(--t-small); line-height: 1.4; }
a.pstat:hover .who { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.pstats .held .stat, .pstats .held .who { color: var(--ink-label); }
.pstats .held .flag { display: inline-block; }
/* Wide screens: the three columns share their rows, so the titles, the summaries and each stat line up across the columns
   however the text wraps. Each row is as tall as its tallest cell. build.py sets the row spans inline. Below 900px the
   columns stack and go back to their own heights. A browser without subgrid keeps independent columns. */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .proof-cols { row-gap: 0; align-items: stretch; }
    .pcol, .pstats { display: grid; grid-template-rows: subgrid; }
  }
}

/* ---------- three shapes ---------- */
.shapes > li { border-top: 1px solid var(--hair); }
.shapes > li:last-child { border-bottom: 1px solid var(--hair); }
.ruled .main > .shapes:first-child > li:first-child { border-top: 0; }
.ruled .main > .shapes:first-child > li:first-child .shape-link { padding-top: 0; }
.shape-link { text-decoration: none; padding-block: 1.625rem; row-gap: .375rem; align-items: baseline; }
.shape-link:hover .h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (min-width: 900px) {
  .s-name { grid-column: 1 / 4; }
  .s-line { grid-column: 4 / 8; }
  .s-go { grid-column: 8 / 10; text-align: right; }
}
.s-go { font-weight: 600; font-size: var(--t-small); white-space: nowrap; }
.arr { display: inline-block; width: 1.05em; height: .7em; margin-left: .2em; vertical-align: -.08em; overflow: visible; }

/* ---------- essays ---------- */
.essays > li { border-top: 1px solid var(--hair); }
.essays > li:last-child { border-bottom: 1px solid var(--hair); }
.ruled .main > .essays:first-child > li:first-child { border-top: 0; }
.ruled .main > .essays:first-child > li:first-child .essay-link { padding-top: 0; }
.essay-link { text-decoration: none; padding-block: 1.5rem; row-gap: .25rem; align-items: baseline; }
.essay-link:hover .h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (min-width: 900px) {
  .essays .e-title { grid-column: 1 / 7; }
  .essays .e-date, .essays .e-go { grid-column: 7 / 10; text-align: right; }
  .essays.index .essay-link { align-items: start; }
  .essays.index .e-text { grid-column: 1 / 7; }
  .essays.index .e-img { grid-column: 8 / 10; }
}
.essays.index .e-date { margin-top: .375rem; }
.e-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tone); }
@media (max-width: 899.98px) { .e-img { display: none; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.125rem; }
.field label { display: block; margin-bottom: .375rem; font-weight: 600; font-size: var(--t-small); line-height: 1.4; }
.field label .opt { font-weight: 400; color: var(--ink-label); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem; padding: .6875rem .875rem;
  font: 400 var(--t-body)/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
}
.field textarea { min-height: 9.375rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.form .btn { justify-self: start; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .625rem; }
.inline-form .field { flex: 1 1 16em; }
@media (min-width: 900px) { .main > .inline-form, .o-lede .inline-form, .c-copy .form { max-width: calc((100% - 8 * var(--gutter)) * 6 / 9 + 5 * var(--gutter)); } .o-lede .inline-form, .c-copy .form { max-width: 100%; } }

/* ---------- blocks used on single pages ---------- */
.buybox { border-top: 1px solid var(--hair-2); padding-top: 1rem; }
.buybox .amount + .amount { margin-top: .375rem; }
.buybox .status { margin-top: .875rem; font-size: var(--t-small); line-height: 1.5; }
.buybox .btn { width: 100%; justify-content: space-between; margin-top: 1rem; }
.twocol { columns: 2; column-gap: var(--gutter); }
@media (min-width: 900px) { .main > .twocol { max-width: calc((100% - 8 * var(--gutter)) * 8 / 9 + 7 * var(--gutter)); } }
.twocol li { break-inside: avoid; border-top: 1px solid var(--hair); padding-block: .8125rem; }
@media (max-width: 640px) { .twocol { columns: 1; } }
.bullets > li { border-top: 1px solid var(--hair); padding-block: .8125rem; }
.bullets > li:last-child { border-bottom: 1px solid var(--hair); }
.options { row-gap: 2.25rem; }
.option { display: flex; flex-direction: column; gap: .625rem; }
.option .btn { width: 100%; justify-content: space-between; margin-top: .375rem; }
@media (max-width: 899.98px) { .option { border-top: 1px solid var(--hair); padding-top: .875rem; } }
@media (min-width: 900px) and (max-width: 1319.98px) { .options > .option { grid-column: 1 / -1; } .options .option .btn { max-width: 26.25rem; } }
.placeholder-box { display: grid; place-items: center; min-height: 22.5rem; background: var(--tone); border: 1px dashed var(--hair-2); }
.facts { row-gap: 1.25rem; margin-top: 2.5rem; }
.fact { border-top: 1px solid var(--hair-2); padding-top: .75rem; }
.fact .h3 { margin-top: .375rem; }
@media (min-width: 900px) {
  .bio-open h1 { grid-column: 1 / 10; grid-row: 1; }
  .bio-open .facts { grid-column: 1 / 10; grid-row: 2; }
  .bio-open .portrait { grid-column: 10 / 13; grid-row: 1 / 3; }
}

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; min-width: 47.5rem; font-size: var(--t-small); line-height: 1.45; }
table.data thead th { text-align: left; vertical-align: bottom; font-family: var(--sans); font-weight: 600; font-size: var(--t-label); color: var(--ink-label); padding: 0 1.125rem .625rem 0; border-bottom: 1px solid var(--hair-2); }
table.data tbody th, table.data td { vertical-align: top; text-align: left; padding: .875rem 1.125rem .875rem 0; border-bottom: 1px solid var(--hair); }
table.data tbody th { font: 600 var(--t-small)/1.45 var(--sans); color: var(--ink); }
table.data td.nowrap { white-space: nowrap; }

/* ---------- case studies ---------- */
.case .g12 { row-gap: 1.25rem; }
@media (min-width: 900px) {
  .c-rail { grid-column: 1 / 4; }
  .c-body { grid-column: 4 / 10; }
  .c-aside { grid-column: 10 / 13; }
}
.c-rail .h2 { margin-bottom: .625rem; }
.c-body > * + * { margin-top: .875rem; }
.c-body .bullets { margin-top: 1.125rem; }
.c-aside img { width: 100%; aspect-ratio: 1200 / 832; object-fit: cover; object-position: top; border: 1px solid var(--hair); background: var(--tone); }
.c-aside .stat-block { margin-bottom: 1.125rem; }
.c-aside .stat-block .small { margin-top: .375rem; }
.c-aside .stat { font-size: var(--t-h2); }
.c-aside .placeholder-box { min-height: 0; aspect-ratio: 1200 / 832; }
/* an image with no figure above it has no text baseline, so it sits at the top of the row beside the title instead of dragging the title down to its bottom edge */
.c-aside.no-stat { align-self: start; }

/* ---------- article ---------- */
.prose { font-size: 1.1875rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--sans); font-weight: 600; font-size: var(--t-h3); line-height: 1.72; margin-top: 2em; }
.prose h2 + p { margin-top: .55em; }
.cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tone); }
.cover figcaption { margin-top: .5rem; }
@media (max-width: 899.98px) { .cover { margin-top: 2rem; max-width: 26.25rem; } }
.meta-list > li { border-top: 1px solid var(--hair); padding-block: .75rem; }
.meta-list > li:first-child { border-top: 0; padding-top: 0; }
.meta-list > li:last-child { border-bottom: 1px solid var(--hair); }
.meta-list .v { display: block; font-size: var(--t-small); margin-top: .125rem; }
@media (max-width: 899.98px) {
  .meta-list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .meta-list > li, .meta-list > li:last-child { border: 0; padding: 0; }
  .meta-list .v { display: inline; margin-left: .375rem; }
}
table.stamp { border-collapse: collapse; width: 100%; font-size: var(--t-small); font-variant-numeric: tabular-nums lining-nums; }
table.stamp th { text-align: left; font-family: var(--sans); font-weight: 600; font-size: var(--t-label); color: var(--ink-label); padding: 0 1rem .625rem 0; border-bottom: 1px solid var(--hair-2); }
table.stamp td { padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--hair); }
table.stamp th.r, table.stamp td.r { text-align: right; padding-right: 0; padding-left: 1rem; }
table.stamp tr.total td { font-weight: 600; border-bottom: 1px solid var(--hair-2); }

/* ---------- closing ---------- */
/* the last call on a page sits in a full-width band of the tone; the band's edge does the work the section rule did */
.closing { background: var(--tone); padding-block: clamp(3rem, 6vw, 5.5rem); }
.closing .g12 { row-gap: 1.5rem; }
@media (min-width: 900px) {
  .closing .h2-big { grid-column: 1 / 10; }
  .closing .c-copy { grid-column: 4 / 10; }
}

/* ---------- system page ---------- */
.cols-demo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 899.98px) { .cols-demo { gap: .375rem; } .cols-demo span { min-height: 2.5rem; } .bands { display: none; } }
.cols-demo span { display: grid; place-items: center; min-height: 4.5rem; background: var(--tone); font-family: var(--sans); font-weight: 500; font-size: var(--t-label); color: var(--ink-soft); }
.bands > div { padding: .625rem .75rem; margin-top: .5rem; font-family: var(--sans); font-weight: 600; font-size: var(--t-label); }
.band-rail { background: rgba(20, 20, 22, .08); }
.band-main { background: rgba(20, 20, 22, .05); }
.band-read { background: rgba(159, 116, 39, .12); }
@media (min-width: 900px) {
  .band-rail { grid-column: 1 / 4; }
  .band-main { grid-column: 4 / 13; }
  .band-read { grid-column: 4 / 10; }
  .band-act { grid-column: 10 / 13; }
}
.swatches { row-gap: 1.25rem; }
@media (min-width: 900px) { .swatch { grid-column: span 3; } }
.swatch .chip-box { height: 4.5rem; border: 1px solid var(--hair); margin-bottom: .625rem; }

/* ---------- footer ---------- */
/* ink ground, light text. White at 88% for text and 62% for labels, which is 7:1 on the ink */
.site-foot { background: var(--ink); color: rgba(255, 255, 255, .88); padding-block: clamp(2.5rem, 5vw, 4rem) 2.5rem; }
.site-foot .g12 { row-gap: 1.75rem; }
.site-foot .label { color: rgba(255, 255, 255, .62); }
.site-foot ::selection { background: var(--paper); color: var(--ink); }
@media (min-width: 900px) {
  .f-brand { grid-column: 1 / 4; }
  .f-c1 { grid-column: 4 / 7; }
  .f-c2 { grid-column: 7 / 10; }
  .f-c3 { grid-column: 10 / 13; }
  .f-fine { grid-column: 1 / -1; }
}
.site-foot img { width: 12.25rem; height: auto; }
.site-foot ul { margin-top: .5rem; }
.site-foot li { padding-block: .1875rem; font-size: var(--t-small); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.f-fine { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: .875rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .proto, .grid-overlay, .site-head .nav, .book-m { display: none !important; }
  .site-head { position: static; }
  /* paper does not print backgrounds, so the dark footer and the band go back to ink on white */
  .closing { background: none; }
  .site-foot { background: none; color: var(--ink); }
  .site-foot .label { color: var(--ink-label); }
  .site-foot img { filter: invert(1); }
  .f-fine { border-top-color: var(--hair); }
}

/* Articles: a YouTube link alone on a line becomes a 16:9 player; images span the column */
.prose figure { margin: 1.75rem 0; }
.prose figure img { width: 100%; height: auto; display: block; }
.prose figure.video { aspect-ratio: 16 / 9; }
.prose figure.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.prose hr { border: 0; border-top: 1px solid var(--hair-2); margin: 2.5rem 0; }

/* After checkout: the session booking calendar */
.booking iframe { width: 100%; height: 720px; border: 0; display: block; background: #fff; }

/* Contact: the Mailchimp contact form */
.note-form iframe { width: 100%; height: 600px; border: 0; display: block; }

/* Contact: the note form in the reading column, the direct details beside it, the quote under the form */
.note-grid { row-gap: 2.5rem; align-items: start; }
.direct dl { margin-top: .75rem; }
.direct dt { margin-top: 1rem; }
.direct dd { margin: .25rem 0 0; overflow-wrap: anywhere; }

/* Dropdowns match the text fields, with a drawn arrow */
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141416' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center;
}