/* Soda Buddhi Books — Ghost theme
   One colour at a time, two scripts at once, nothing else on the page. */

/* ---------- Fonts ----------
   Text and headings: Source Serif 4 (Google Fonts, loaded in default.hbs). Navigation and
   labels: Space Grotesk. Kannada: Noto Sans Kannada. A licensed face (e.g. Tiempos Text)
   can be added with @font-face here and put first in --latin; see assets/fonts/README.md. */

/* ---------- Tokens ---------- */
:root {
  --ink: #1a1412;
  --night: #c44459;   /* 7a (was #ec5458, 6c edit v3) */
  --cream: #fbdcc8;
  --cream-2: #fbdcc8;
  --mint: #8bb8cb;    /* 7a: the splashes (was #b1bdc3) */
  --menu: #ade7ff;  /* the menu type, 7a (was #b8c4cc) */
  --heading: #e4c486; /* every title in a page: H2–H4 in a body, the FAQ's questions, list headings, book titles (was #ede2cc; before that the menu's colour) */
  --body-heading: var(--heading); /* H2–H4 in a page's or post's body: the same as the other titles */
  /* The sign-up box, as in the 7b mock: no box of its own (the page shows through), the heading in the body text's
     off-white, and one outlined field with "Email address" and SIGN UP inside it (was a yellow box, #fdc45b, with dark
     type and a cream button) */
  --signup-bg: transparent;
  --signup-border: transparent;
  --signup-shadow-colour: #000000;
  --signup-text: var(--heading);          /* "Read your next unclassic.": the H2–H4 colour (was var(--body-text)) */
  --signup-stroke: #d69aa4;               /* the email field's outline */
  --signup-field: rgba(255, 255, 255, 0.06); /* the field's fill, a shade lighter than the page */
  --signup-button-text: #dcb45f;          /* SIGN UP */
  --signup-placeholder: #e7adb7;          /* "Email address" */
  --signup-typed: var(--body-text);       /* what the reader types */
  --logo: #fcc559;      /* bottle, top left of every page; 7a (was #fdc45b) */
  --logotype: #fcc559;  /* wavy logotype top right, and the bottle top left; 7a (was #fdc45b) */
  --blurb: #fbdcc8;     /* English blurb on the homepage */
  --kannada: #fbdcc8;   /* translations in the carousel */
  /* Body text: every page's text, the blurbs and their translations, the language labels, the footer, people's names
     and roles, book credits. #f3f0ea, an off-white, so it is not plain white (3.09:1 on the red; white was 3.51:1,
     and #fbdcc8, the cream, 2.71:1). Menu, headings and the sign-up box keep their own colours. */
  --body-text: #f3f0ea;
  /* Body text size, one for every page's text: page and post bodies, FAQ answers, the Founders & Advisors intros,
     In the Oven's entries, the Catalogue and Publisher's Desk ledes. Was 17px (page bodies), 16.15px (FAQ answers),
     16px (ledes), 15px (Founders & Advisors, In the Oven). Headings in the body scale with it: H2 and the Founders/Advisors
     headings 1.6×, H3 and FAQ questions 1.25×, H4 and people's names 1×; on book entries "by <author>" 1.235× and
     the credits 0.882× (the ratios they had at 17px). The homepage and Mission
     blurbs and the translations keep their own sizes (fitted to their boxes). */
  --body-size: 20px;
  --text-col: 748px;  /* the text column's width on desktop, every page (was 44em of the text, which only came to 748px at 17px;
                        Publisher's Desk ran 830px wide). Narrower screens take what room there is. */
  --body-leading: 1.65;  /* its line height, 33px at 20px (28px at 17px). Was 1.65 on page bodies, 1.6 on In the Oven, 1.5 on the FAQ answers,
                          the Founders & Advisors intros and the Catalogue and Publisher's Desk ledes */
  --lime: #F5EFE3;
  --paper: #fbf8f1;
  --letter-paper: #fdc45b;  /* the letter's paper (#letter): the yellow behind the Tally form under it (was #fdf4cc, a light yellow) */
  --kumkum: #ca3b1f;
  --turmeric: #e9a825;
  --peacock: #0f6e63;
  --silk: #a8215f;
  --laterite: #9e4a2b;

  --bg: var(--night);
  --fg: var(--cream);

  --latin: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ui: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --hand: "Dancing Script", "Snell Roundhand", "Segoe Script", cursive;  /* a letter's salutation and sign-off (#letter): a free cursive from Google Fonts (was Caveat, a handwritten print) */
  --kn: "Noto Sans Kannada", "Tiro Kannada", "Kannada MN", Tunga, sans-serif;
  --mr: "Tiro Devanagari Marathi", "Noto Serif Devanagari", serif;
  --ta: "Tiro Tamil", "Noto Serif Tamil", serif;
  --te: "Noto Serif Telugu", "Telugu MN", serif;
  --ml: "Noto Serif Malayalam", "Malayalam MN", serif;
  --or: "Noto Sans Oriya", "Oriya MN", sans-serif;
  --gu: "Noto Serif Gujarati", "Gujarati MN", serif;
  --bn: "Noto Serif Bengali", "Bangla MN", serif;

  --gutter: clamp(16px, 4vw, 56px);
  --hair: 1px solid var(--fg);

  /* Dials */
  --blurb-size: 18px;
  --kn-size: 16px;
  --cta-scale: 0.8;
  --circle-opacity: 1;
  --signup-radius: 18px;
  --signup-shadow: 0.35;
  --splotch: polygon(50.00% 4.00%, 51.36% 3.68%, 52.71% 3.47%, 54.03% 3.36%, 55.34% 3.35%, 56.62% 3.42%, 57.89% 3.58%, 59.14% 3.81%, 60.37% 4.11%, 61.58% 4.47%, 62.78% 4.89%, 63.96% 5.36%, 65.12% 5.88%, 66.27% 6.42%, 67.41% 7.00%, 68.53% 7.60%, 69.63% 8.22%, 70.72% 8.85%, 71.80% 9.48%, 72.86% 10.11%, 73.91% 10.74%, 74.95% 11.34%, 75.98% 11.93%, 76.99% 12.48%, 78.00% 13.00%, 79.24% 13.64%, 80.47% 14.29%, 81.68% 14.97%, 82.87% 15.68%, 84.03% 16.41%, 85.16% 17.17%, 86.25% 17.96%, 87.30% 18.78%, 88.30% 19.63%, 89.26% 20.51%, 90.16% 21.42%, 91.00% 22.38%, 91.78% 23.36%, 92.49% 24.39%, 93.14% 25.45%, 93.70% 26.56%, 94.19% 27.70%, 94.59% 28.89%, 94.91% 30.12%, 95.13% 31.40%, 95.25% 32.73%, 95.28% 34.10%, 95.19% 35.53%, 95.00% 37.00%, 94.79% 38.24%, 94.65% 39.48%, 94.58% 40.71%, 94.57% 41.92%, 94.60% 43.13%, 94.67% 44.33%, 94.77% 45.52%, 94.89% 46.70%, 95.02% 47.88%, 95.15% 49.05%, 95.27% 50.22%, 95.38% 51.38%, 95.45% 52.53%, 95.50% 53.68%, 95.50% 54.82%, 95.44% 55.96%, 95.33% 57.10%, 95.14% 58.23%, 94.87% 59.37%, 94.51% 60.50%, 94.06% 61.62%, 93.49% 62.75%, 92.81% 63.87%, 92.00% 65.00%, 91.37% 65.88%, 90.73% 66.79%, 90.07% 67.71%, 89.40% 68.64%, 88.71% 69.58%, 88.00% 70.53%, 87.27% 71.49%, 86.52% 72.44%, 85.74% 73.40%, 84.94% 74.36%, 84.11% 75.31%, 83.25% 76.25%, 82.36% 77.18%, 81.44% 78.10%, 80.48% 79.00%, 79.48% 79.89%, 78.45% 80.75%, 77.38% 81.59%, 76.26% 82.41%, 75.10% 83.19%, 73.90% 83.95%, 72.65% 84.67%, 71.35% 85.35%, 70.00% 86.00%, 68.87% 86.52%, 67.75% 87.07%, 66.62% 87.66%, 65.50% 88.26%, 64.37% 88.88%, 63.23% 89.50%, 62.10% 90.12%, 60.96% 90.74%, 59.82% 91.34%, 58.68% 91.93%, 57.53% 92.48%, 56.38% 93.00%, 55.22% 93.48%, 54.05% 93.91%, 52.88% 94.28%, 51.70% 94.59%, 50.52% 94.83%, 49.33% 95.00%, 48.13% 95.08%, 46.92% 95.07%, 45.71% 94.97%, 44.48% 94.76%, 43.24% 94.44%, 42.00% 94.00%, 40.90% 93.59%, 39.85% 93.11%, 38.84% 92.57%, 37.87% 91.98%, 36.93% 91.34%, 36.02% 90.66%, 35.13% 89.94%, 34.26% 89.19%, 33.40% 88.41%, 32.56% 87.62%, 31.72% 86.81%, 30.88% 86.00%, 30.03% 85.19%, 29.17% 84.38%, 28.30% 83.59%, 27.41% 82.81%, 26.49% 82.06%, 25.55% 81.34%, 24.57% 80.66%, 23.55% 80.02%, 22.49% 79.43%, 21.38% 78.89%, 20.22% 78.41%, 19.00% 78.00%, 17.77% 77.60%, 16.57% 77.15%, 15.40% 76.64%, 14.28% 76.09%, 13.19% 75.49%, 12.16% 74.84%, 11.16% 74.15%, 10.22% 73.41%, 9.33% 72.62%, 8.50% 71.79%, 7.72% 70.92%, 7.00% 70.00%, 6.34% 69.04%, 5.75% 68.04%, 5.23% 67.00%, 4.78% 65.93%, 4.40% 64.81%, 4.09% 63.66%, 3.87% 62.47%, 3.72% 61.24%, 3.66% 59.98%, 3.68% 58.69%, 3.80% 57.36%, 4.00% 56.00%, 4.26% 54.89%, 4.56% 53.81%, 4.87% 52.75%, 5.20% 51.72%, 5.54% 50.70%, 5.89% 49.70%, 6.24% 48.72%, 6.59% 47.74%, 6.94% 46.77%, 7.27% 45.81%, 7.58% 44.84%, 7.88% 43.88%, 8.14% 42.90%, 8.38% 41.92%, 8.58% 40.93%, 8.74% 39.93%, 8.86% 38.90%, 8.92% 37.86%, 8.93% 36.79%, 8.88% 35.70%, 8.77% 34.58%, 8.59% 33.42%, 8.33% 32.23%, 8.00% 31.00%, 7.81% 29.76%, 7.72% 28.52%, 7.75% 27.31%, 7.87% 26.11%, 8.09% 24.93%, 8.41% 23.78%, 8.81% 22.65%, 9.30% 21.56%, 9.86% 20.49%, 10.51% 19.45%, 11.22% 18.46%, 12.00% 17.50%, 12.84% 16.58%, 13.74% 15.71%, 14.70% 14.89%, 15.70% 14.11%, 16.75% 13.39%, 17.84% 12.72%, 18.97% 12.11%, 20.13% 11.56%, 21.32% 11.07%, 22.53% 10.64%, 23.76% 10.29%, 25.00% 10.00%, 26.11% 9.75%, 27.21% 9.50%, 28.29% 9.25%, 29.35% 9.00%, 30.40% 8.75%, 31.44% 8.50%, 32.46% 8.25%, 33.48% 8.00%, 34.49% 7.75%, 35.50% 7.50%, 36.50% 7.25%, 37.50% 7.00%, 38.50% 6.75%, 39.50% 6.50%, 40.51% 6.25%, 41.52% 6.00%, 42.54% 5.75%, 43.56% 5.50%, 44.60% 5.25%, 45.65% 5.00%, 46.71% 4.75%, 47.79% 4.50%, 48.89% 4.25%);  /* the spill outline, shared by the site decor and the people photos */
}

/* Each page wears one colour. Night is the house ground; light grounds take ink; colours take lime. */
body.colour-night    { --bg: var(--night);    --fg: var(--cream); --hair: 1px solid color-mix(in srgb, var(--cream) 34%, transparent); }
body.colour-paper    { --bg: var(--paper);    --fg: var(--ink); }
body.colour-turmeric { --bg: var(--turmeric); --fg: var(--ink); }
body.colour-kumkum   { --bg: var(--kumkum);   --fg: var(--lime); }
body.colour-peacock  { --bg: var(--peacock);  --fg: var(--lime); }
body.colour-silk     { --bg: var(--silk);     --fg: var(--lime); }
body.colour-laterite { --bg: var(--laterite); --fg: var(--lime); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* no grey or blue box flashed over a link or button when it is tapped on a phone (it filled the whole 44px tap area); hover and the keyboard focus rings still show */
body {
  margin: 0;
  background: var(--bg);
  color: var(--body-text);
  font-family: var(--latin);
  font-size: 15px;
  line-height: 1.5;
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
}
.site { flex: 1; display: flex; flex-direction: column; }
.home { flex: 1; display: flex; flex-direction: column; }
.ui { font-family: var(--ui); }
a { color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
/* Email addresses (any mailto: link in the text) stand apart from the prose: the sans of the menu and headings, a
   touch smaller, dark grey on the yellow of the logo and the sign-up box, as a small tag, never underlined */
a[href^="mailto:"] { font-family: var(--ui); font-size: 0.92em; font-weight: 500; letter-spacing: 0.02em; color: #4d4d4d; background: var(--logo); padding: 1px 6px; border-radius: 4px; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: anywhere; }
a[href^="mailto:"]:hover { text-decoration: none; filter: brightness(1.06); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Scripts: Kannada runs ~15–20% larger with looser leading to look equal to the Latin. */
.kn { font-family: var(--kn); line-height: 1.76; }
.mr { font-family: var(--mr); line-height: 1.7; }
.ta { font-family: var(--ta); line-height: 1.7; }
.te { font-family: var(--te); line-height: 1.75; }
.ml { font-family: var(--ml); line-height: 1.75; }
.or { font-family: var(--or); line-height: 1.75; }
.gu { font-family: var(--gu); line-height: 1.7; }
.bn { font-family: var(--bn); line-height: 1.75; }
:lang(kn) { font-family: var(--kn); }
:lang(mr) { font-family: var(--mr); }
:lang(ta) { font-family: var(--ta); }
/* The native name in a language label ("Kannada · ಕನ್ನಡ") carries a lang for screen readers (main.js) but keeps the
   label's font, so the label is the same height in every language and doesn't jump as the carousel turns. */
.carousel-lang [lang] { font-family: inherit; }

/* Grain: an inline SVG turbulence over the whole page, multiplied into the colour. */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: multiply; opacity: 0.5; pointer-events: none; z-index: 0;
}
body.colour-paper .grain { opacity: 0.18; }
body.colour-night .grain { display: none; }
.site { position: relative; z-index: 1; overflow-x: clip; }
.site > main { position: relative; z-index: 1; }

/* Site decor on every page: a mint spill off the top-right corner, the logotype on its visible centre */
body { --footer-h: 96px; --header-h: 0px; --band-h: 0px; --content-top: 160px; } /* --content-top: from the top of the screen (under the header, where there is one) to the first line of a page's text; every page and both homepage screens start there */ /* the footer as rendered; the homepage screens are sized from these */
/* Every page starts its content at --content-top: the homepage's and Mission's text, and on every other page its first block (the text, a letter's paper, the FAQ's first question box, In the Oven's top rule, the About Us heading). Was 160px for the homepage and Mission, 112px for the rest. */

/* ---------- Menu list (used by the frame) ---------- */
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; list-style: none; margin: 0; padding: 0; }
.nav a { font-weight: 500; font-size: 16.5px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav-current a { text-decoration: underline; text-underline-offset: 5px; }
/* Dropdown: the primary item named by the "Dropdown label" setting; its entries are the Secondary navigation */
.nav-group { position: relative; }
.nav-group-btn { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; font-weight: 500; font-size: 16.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.nav-group-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.nav-group-btn:hover, .nav-group.has-current > .nav-group-btn { text-decoration: underline; text-underline-offset: 5px; }
.nav-group:hover > .nav-group-btn::after, .nav-group.open > .nav-group-btn::after { transform: translateY(1px) rotate(225deg); }
.nav-sub { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); flex-direction: column; gap: 12px; margin: 0; padding: 16px 24px 18px; list-style: none; background: var(--mint); border: var(--hair); z-index: 6; text-align: center; }
.nav-group:hover > .nav-sub, .nav-group.open > .nav-sub { display: flex; }

/* ---------- Pairs: the two-script grid used everywhere ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-inline: var(--gutter); }
.pair-left { text-align: right; padding-right: 36px; border-right: var(--hair); }
.pair-right { padding-left: 36px; }

/* ---------- Home ---------- */
/* ---------- The page frame: logotype top left, menu under it, bottle bottom right, ink splashes ----------
   Three layouts by width (the tablet and phone ones are in the media blocks at the end of the file):
   - wide (over 1100px): the frame is fixed and the content sits in the column between the menu and the splashes;
     the left column is sized from the menu type so the longest label never runs under the content;
   - tablet (761–1100px): logotype and a horizontal menu at the top, content full width, splashes at the
     top right and bottom left of the page rather than of the screen;
   - phone (up to 760px): the same, with the menu behind a Menu button. */
body {
  --logotype: var(--logo); --logotype-h: calc(clamp(96px, min(11vw, (100vh - 300px) * 0.262), 170px) + 2px); /* +2px (was the clamp alone) */ /* scales with the screen's height too, so the menu under it clears the bottom-left splash on a short laptop screen */
  --menu-size: max(15px, calc(clamp(15px, min(1.6vw, (100vh - 300px) * 0.0383), 23px) - 2px)); /* 2px under its old size on laptops and desktops, never under 15px (15–21px; tablets and phones set their own menu sizes); was the menu type, from the screen's width or, on a screen under about 900px tall, its height (full size at 900px, 16px at 720px), so the seven items clear the bottom-left splash; the left column and the splash follow it */
  --frame-left: calc(var(--gutter) + var(--menu-size) * 13 + 24px); /* gutter + the longest label (Publisher's Desk and its chevron) + a gap */
  --frame-right: clamp(140px, 16vw, 300px);
  --splash-tr: var(--frame-right); --splash-bl: var(--frame-left);
  /* The content column on laptops and desktops (2026-11-12, from the advisor's notes): each page's content centred in
     the screen at its own width (748px, the text column; Home 900px, its English and Tamil block, below), moving left as the screen narrows but never closer than 40px to the menu's longest label; and starting
     30px under the logotype on every page. Was the column right of the menu (--frame-left) from 160px down. */
  --col-w: var(--text-col);
  --col-left: max(calc(var(--gutter) + var(--menu-size) * 13 + 40px), calc(50vw - var(--col-w) / 2));
  --content-top: calc(28px + var(--logotype-h) * 595 / 600 + 30px); /* the logotype's top, its height, then 30px */
}
body.home-template { --col-w: 900px; } /* Home's English and Tamil block, centred as a whole */
.frame-ink { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* The splashes: the 7a mock's two (assets/images/splotches/7a-*.svg), each drawn with its own corner at the centre of
   its box, so the box is centred on the page's corner and only the quarter inside the page shows. Coloured --mint
   through a mask. 500px and 490px wide on wide screens (matched to the 2026-11-10 screenshot; were 780px and 860px); smaller below. */
.splash { position: absolute; display: block; background: var(--mint); -webkit-mask: var(--splash-img) center / contain no-repeat; mask: var(--splash-img) center / contain no-repeat; }
.splash-tr { --splash-img: url(../images/splotches/7a-tr.svg); top: 0; right: 0; width: var(--splash-tr-size, 500px); aspect-ratio: 3104 / 3152; transform: translate(50%, -50%); }
.splash-bl { --splash-img: url(../images/splotches/7a-bl.svg); bottom: 0; left: 0; width: var(--splash-bl-size, 490px); aspect-ratio: 3480 / 2680; transform: translate(-50%, 50%); }
.frame { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.frame > * { pointer-events: auto; }
.frame-logotype { position: absolute; left: calc(var(--gutter) - var(--logotype-h) * 0.1); top: 28px; /* nudged left a tenth of its width so its letters line up with the menu */ display: block; width: var(--logotype-h); aspect-ratio: 600 / 595; background: var(--logotype); -webkit-mask: url(../images/logotype.png) center / contain no-repeat; mask: url(../images/logotype.png) center / contain no-repeat; }
.frame-menu-btn { display: none; } /* phones only */
.frame-nav { position: absolute; left: var(--gutter); top: calc(28px + var(--logotype-h) + 44px); /* just under the logotype */ font-family: var(--ui); color: var(--menu); }
.frame-nav .nav { flex-direction: column; align-items: flex-start; gap: calc(var(--menu-size) * 0.96); } /* 22px at the full 23px size */
.frame-nav .nav a, .frame-nav .nav-group-btn { color: var(--menu); font-size: var(--menu-size); font-weight: 700; letter-spacing: 0.1em; }
.frame-nav .nav-group-btn::after { width: 9px; height: 9px; border-width: 2px; }
.frame-nav .nav-sub a { font-size: 18px; }
.frame-nav .nav-sub { left: 100%; top: -16px; transform: none; margin-left: 16px; align-items: flex-start; text-align: left; background: var(--bg); border-color: var(--mint); }
/* The pointer has to cross the gap between the label and the flyout without leaving the group: an invisible
   strip the height of the flyout covers it, and a little of the air above and below the label */
.frame-nav .nav-sub::before { content: ""; position: absolute; right: 100%; top: -8px; bottom: -8px; width: 18px; }
.frame-bottle { position: absolute; right: var(--gutter); bottom: 24px; display: block; height: clamp(83px, 9vw, 165px); /* grows past 135px on screens over 1,500px wide, to 165px from about 1,830px (was capped at 135px, about 78% of the logotype on a 1,850px screen; now about its height, as in the advisor's mock of 2026-11-11); laptops unchanged; before that, 75% of what it was (clamp(110px, 12vw, 180px)): about the logotype's height on a laptop */ aspect-ratio: 613 / 900; background: var(--logo); -webkit-mask: url(../images/icon-mark-900.png) center / contain no-repeat; mask: url(../images/icon-mark-900.png) center / contain no-repeat; }
/* The content column: from the right edge of the menu to the left edge of the top splash. The homepage sections
   start at the column edges; every other page's blocks carry their own gutter, which the padding here absorbs. */
.home-template .home-section { padding-inline: var(--col-left) var(--frame-right); }
.home-template .signup { padding-inline: 0; }
.home-template .signup-box { width: 100%; max-width: 900px; margin-inline: 0; } /* fills the column up to 900px, from its left edge, as on the Mission page */
.site > main:not(.home) { padding-inline: calc(var(--col-left) - var(--gutter)) calc(var(--frame-right) - var(--gutter)); padding-top: calc(var(--content-top) - 48px); } /* 48px: the .article-body margin above the text */
.site > main.page { padding-top: var(--content-top); }
.site > main.page > section:first-of-type { margin-top: 0; } /* a page's first block starts right at --content-top, whatever its own top margin (the body's 48px, In the Oven's 56px, About Us's 40px) */
.site > main.page > section:first-of-type > :first-child, .site > main.page > section:first-of-type > p:empty:first-child + * { margin-top: 0; } /* and so does its first block inside, even after an empty paragraph from the editor (the live FAQ and Jobs & Internships pages start with one), whose own top margin would push it down */

/* The homepage is one screen, the blurb, filling the space under the sticky menu and decor band; the page scrolls
   normally (no snapping) where the blurb is taller than the screen, as on phones. */
.home-section { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(100svh - var(--header-h) - var(--band-h)); padding: var(--content-top) var(--gutter) 24px; }
.home-blurb { padding-bottom: 0; }
/* The last section runs on under the footer (padding pulled back by a negative margin), so the footer shares the
   screen when the content fits. */
.home-section:last-child, .home .cream { padding-bottom: calc(24px + var(--footer-h)); margin-bottom: calc(-1 * var(--footer-h)); }
.home-template .site-footer { position: relative; z-index: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero-mission { width: 100%; max-width: 900px; margin: 0 auto 48px; text-align: left; font-size: var(--body-size); /* the body size, as on every page (was 20.5px) */ line-height: 1.65; color: var(--body-text); text-wrap: pretty; }
.hero-mission p { max-width: var(--text-col); margin: 0 0 0.8em; } /* the paragraphs on the text column every page uses, 748px (was 42em, 840px at 20px) */
.hero-mission p:last-child { margin-bottom: 0; }
.intro { margin-top: 0; align-items: start; position: relative; max-width: 62rem; margin-inline: auto; }
.intro-text { font-size: var(--blurb-size); line-height: 1.65; max-width: 38em; text-wrap: pretty; color: var(--body-text); }
.intro .pair-right { padding-top: 0; } /* the English starts level with the translation text */
/* The homepage blurb and mission statement are set at a fixed 24px; side-by-side pages keep the base sizes */
.home-blurb .intro { width: 100%; max-width: 900px; margin-inline: 0; } /* the Mission page's width and left edge, so the sign-up box under it sits in the same place on both */
.home-blurb .signup { margin-top: 48px; } /* as far under the blurb as the Mission page's box is under the mission */
/* The homepage screen holds the blurb, the sign-up box and the footer, as the Mission page does: the section is as
   tall as its content (main.js sizes the blurb to leave room for the box and the footer) and main stretches, so
   the footer sits at the bottom of the screen */
.home-template .home-section.home-blurb { padding-bottom: 0; margin-bottom: 0; min-height: 0; }
.site > main.page-mission { flex: 1; padding-bottom: 0; } /* no .article bottom padding: the footer comes straight after the sign-up box, as on the homepage */
.home-blurb .intro-text { font-size: var(--body-size); } /* the body size, as on every page: 20px, 18px on phones (was up to 24px, stepped down by main.js to fit above the sign-up box) */
.home-blurb .carousel-text { font-size: 16px; }
.hero-mission .intro { max-width: none; } /* the mission keeps .hero-mission's 900px */
/* The Mission page (partials/pages/mission.hbs): the block starts where every page's text starts (.article-body's 48px) and
   carries the gutter the page padding absorbs */
.page-mission .hero-mission { margin: 48px 0; padding-inline: var(--gutter); max-width: calc(var(--text-col) + 2 * var(--gutter)); } /* the text column, as on every page (was 900px) */
/* the sign-up box under it, at the same width and left edge, 48px below (main.js keeps both on screen) */
.mission-signup { max-width: calc(900px + 2 * var(--gutter)); padding-inline: var(--gutter); }
.mission-signup .signup { padding-inline: 0; }
.mission-signup .signup-box { width: 100%; }
.hero-mission .intro-text { font-size: inherit; }
/* The Mission page shows only the English: everything from the first Divider on (the translations) is hidden */
.mission-english > hr, .mission-english > hr ~ * { display: none; }
.mission-english > :has(+ hr) { margin-bottom: 0; } /* the last English paragraph */
.hero-mission .carousel-text { font-size: 14px; } /* a size under the blurb's, so the longest translation stays about as tall as the English */
.intro-text p { margin: 0 0 0.8em; }
.intro-text p:last-child { margin-bottom: 0; }

/* Side-by-side (pages tagged #side-by-side): before main.js runs, the paragraphs
   sit in a grid, English on the right; main.js turns the rest into the carousel. */
.side-by-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: var(--gutter); }
.side-by-side > p:first-child { grid-column: 2; grid-row: 1; padding-left: 36px; font-size: clamp(10px, 0.9vw, 13px); line-height: 1.45; margin: 0; }
.side-by-side > p:not(:first-child) { grid-column: 1; text-align: right; padding-right: 36px; margin: 0 0 1em; }
.side-by-side.pair { display: grid; padding-inline: 0; }

/* Carousel: one translation at a time, slid vertically by main.js every 4s.
   --slide-h is set by main.js to the tallest translation. */
.carousel-viewport { height: var(--view-h, var(--slide-h, 150px)); overflow: hidden; } /* --view-h: the slide on screen, on narrow layouts (main.js) */
.intro.live .carousel-viewport { transition: height 900ms cubic-bezier(.45, 0, .25, 1); } /* animates once the carousel moves, not while fonts load */
.carousel { display: flex; flex-direction: column; transition: transform 900ms cubic-bezier(.45, 0, .25, 1); }
/* The arrows sit on the language label's line, just after it (main.js sets --nav-left and --nav-top from
   the label on screen), and show only while the pointer is over the translation column. */
.intro .pair-left { position: relative; }
/* The arrows: two small splotches stacked (up, then down), centred on the bar and just left of it. They live
   in the English column (main.js puts them there; on phones, under the carousel) since the bar is drawn on it. */
.carousel-nav { position: absolute; top: 50%; left: -46px; transform: translate(-100%, -50%); display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity 150ms; }
.intro:hover .carousel-nav, .intro:focus-within .carousel-nav { opacity: 1; }
@media (hover: none) { .carousel-nav { opacity: 1; } }
.carousel-viewport { cursor: pointer; }
.carousel-btn { width: 22px; height: 20px; padding: 0; border: 0; background: var(--logo); color: var(--bg); cursor: pointer; line-height: 0; display: inline-flex; align-items: center; justify-content: center; clip-path: var(--splotch); }
.carousel-btn:hover { filter: brightness(1.08); }
.carousel-btn svg { display: block; }
.carousel-btn-up { transform: rotate(-10deg); }
.carousel-btn-down { transform: rotate(170deg); } /* turning the whole splotch over flips its chevron to point down */
.carousel-btn:hover { opacity: 1; }
/* Tap areas of 44 × 44 (Apple's and Google's minimum) for the up and down arrows beside the side-by-side text, with
   the 22 × 20 splotches drawn as before: each button is a transparent square, the splotch behind it, and the square
   reaches away from the other arrow (up above the up arrow, down below the down one) so the two never overlap. The
   negative margins keep the arrows' layout as it was. Phones use the carousel's dots (.hcar-dot) instead. */
@media (min-width: 761px) {
  .carousel-nav .carousel-btn { position: relative; isolation: isolate; display: block; width: 44px; height: 44px; margin-inline: -11px; background: none; clip-path: none; transform: none; }
  .carousel-nav .carousel-btn::before { content: ""; position: absolute; left: 11px; width: 22px; height: 20px; background: var(--logo); clip-path: var(--splotch); z-index: -1; }
  .carousel-nav .carousel-btn svg { position: absolute; left: 17px; }
  .carousel-nav .carousel-btn-up { margin-top: -20px; margin-bottom: -4px; }   /* the square runs 20px above the splotch, 4px into the gap */
  .carousel-nav .carousel-btn-up::before { top: 20px; transform: rotate(-10deg); }
  .carousel-nav .carousel-btn-up svg { top: 25px; transform: rotate(-10deg); }
  .carousel-nav .carousel-btn-down { margin-top: -4px; margin-bottom: -20px; } /* and this one 4px into the gap, 20px below */
  .carousel-nav .carousel-btn-down::before { top: 4px; transform: rotate(170deg); }
  .carousel-nav .carousel-btn-down svg { top: 9px; transform: rotate(170deg); }
  /* The menu links and the Publisher's Desk button: 44px tall to tap (the text is 22-26px), the padding taken back
     by negative margins so the menu doesn't move. Narrow labels such as "FAQ" get 4px more each side. */
  .frame-nav .nav > li > a, .frame-nav .nav-group-btn { padding: 11px 4px; margin: -11px -4px; }
  .frame-nav .nav > li > a { display: inline-block; } /* the button keeps its inline-flex, which lays out its chevron */
}
.carousel.no-transition { transition: none; }
.carousel-item { height: var(--slide-h, 150px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 8px; } /* the text, then the language label under it */
/* The divider between the translations and the English sits on the column seam, 80% of the
   English blurb's height and centred on it, in the blurb text colour, faded to a quarter. */
.intro .pair-left { text-align: left; border-right: 0; padding-right: 60px; } /* room for the arrows between the text and the bar */
.intro .intro-text { position: relative; }
.intro .intro-text::before { content: ""; position: absolute; left: -36px; top: 10%; height: 80%; width: 1px; background: var(--blurb); opacity: 0.25; }
/* English on the left (english="left" in partials/side-by-side.hbs, the homepage mission): the columns swap, so the
   bar sits on the English text's right edge and the arrows just right of it. Phones stack both layouts the same way. */
@media (min-width: 761px) {
  .intro-flip .pair-right { order: -1; padding-left: 0; padding-right: 36px; }
  .intro-flip .pair-left { padding-right: 0; padding-left: 60px; }
  .intro-flip .intro-text::before { left: auto; right: -36px; }
  .intro-flip .carousel-nav { left: auto; right: -46px; transform: translate(100%, -50%); z-index: 1; } /* the columns paint in their visual order, so the translations would cover the arrows */
  .side-by-side[data-english="left"] > p:first-child { grid-column: 1; padding: 0 36px 0 0; }
  .side-by-side[data-english="left"] > p:not(:first-child) { grid-column: 2; text-align: left; padding: 0 0 0 36px; }
}
/* A fixed-height block (data-fit, set by main.js from the screen; not on phones): both columns are --box-h tall and
   scroll when their text is longer. A translation's language label sits right under its text; when the text is
   longer than the box, the text scrolls and the label rests at the bottom of the box. */
.intro.boxed { height: var(--box-h); }
.intro.boxed .intro-text { height: var(--box-h); }
.intro.boxed .intro-scroll, .intro.boxed .carousel-text { height: 100%; overflow-y: auto; /* no overscroll-behavior: contain, so once the text reaches its end the page carries on scrolling */ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent; }
.intro.boxed .carousel-item { height: var(--slide-h); }
.intro.boxed .carousel-text { flex: 0 1 auto; height: auto; min-height: 0; width: 100%; padding-right: 10px; }
.intro.boxed .intro-scroll { padding-right: 10px; }
.intro.boxed .carousel-lang { flex: none; }
.carousel-text { font-size: var(--kn-size); line-height: 1.76; color: var(--body-text); }
.carousel-text p { margin: 0 0 0.8em; }
.carousel-text p:last-child { margin-bottom: 0; }
.carousel-lang { font-family: var(--ui); font-weight: 500; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; }

/* Cream section: the second colour on the page, for reading */
.cream {
  background: var(--paper); color: var(--ink);
  --fg: var(--ink); --hair: 1px solid var(--ink);
  padding: 56px var(--gutter) 64px;
  display: flex; flex-direction: column; gap: 56px;
}
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 18px; }
.section-title { font-size: clamp(19px, 1.8vw, 26px); }
.section-title .kn { margin-left: 10px; font-size: 0.95em; }
.section-link { font-size: 13px; }

/* Lists: hairline rows */
.list { border-top: var(--hair); }
.list-row {
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 32px; align-items: baseline;
  padding: 22px 0; border-bottom: var(--hair); text-decoration: none;
}
.list-row:hover .list-title { text-decoration: underline; text-underline-offset: 5px; }
.list-title { font-size: clamp(16px, 1.4vw, 21px); }
.list-meta { font-size: 14px; line-height: 1.5; color: var(--body-text); }
.list-plus, .list-date { font-family: var(--ui); font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
.list-plus { font-size: 21px; line-height: 1; }

/* Sign-up (Ghost members form): fills the bottom half of the homepage */
.signup { padding-inline: calc(20px + 40px); }
.signup-box { container-type: inline-size; width: 80%; margin-inline: auto; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 36px; padding: 36px 40px; background: var(--signup-bg); border: 1px solid var(--signup-border); border-radius: var(--signup-radius); box-shadow: 0 12px 32px color-mix(in srgb, var(--signup-shadow-colour) calc(var(--signup-shadow) * 100%), transparent); }
.signup .pair-left { border: 0; padding-left: 0; }
.signup-heading { text-align: left; color: var(--signup-text); font-weight: 600; font-size: calc(clamp(42px, 9.5cqw, 90px) * var(--cta-scale)); /* sized from the box so "Read your next" fits its column: two lines */ line-height: 0.98; letter-spacing: -0.02em; max-width: 9em; }
.signup .pair-right { padding: 0 0 8px; }
.signup-form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; border: 1px solid var(--signup-stroke); border-radius: 10px; overflow: hidden; }
.signup-input {
  flex: 1 1 120px; padding: 18px 20px; border: 0; border-right: 1px solid var(--signup-stroke); /* short enough that the button stays beside it */ background: rgba(245, 236, 216, 0.06);
  color: #000; min-width: 0; font-family: var(--ui); font-size: 15px; /* what the reader types: black on the yellow box (was the page text, cream) */
}
.signup-input::placeholder { color: var(--signup-placeholder); }
.signup-button { padding: 18px 26px; background: var(--cream); color: var(--signup-button-text); border: 0; cursor: pointer; font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
/* The sign-up dialog (partials/signup-dialog.hbs): the page dims, and a small box in the page's own colours says what
   happened. Each line shows only in the states its data-show names. */
.signup-dialog { box-sizing: border-box; width: min(340px, calc(100vw - 32px)); padding: 26px 24px 22px; background: var(--bg); color: var(--body-text); border: 2px solid var(--signup-stroke); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); text-align: center; }
.signup-dialog::backdrop { background: rgba(26, 20, 18, 0.55); }
.signup-dialog [data-show] { display: none; }
.signup-dialog[data-state="waiting"] [data-show~="waiting"],
.signup-dialog[data-state="already"] [data-show~="already"],
.signup-dialog[data-state="signed_up"] [data-show~="signed_up"],
.signup-dialog[data-state="welcome_back"] [data-show~="welcome_back"],
.signup-dialog[data-state="error"] [data-show~="error"] { display: revert; }
.signup-dialog[data-checking] [data-show~="checking"] { display: revert; }
.signup-dialog-title:focus { outline: none; } /* focused only to keep the reader's place while waiting */
.signup-dialog .signup-dialog-spinner[data-show], .signup-dialog .signup-dialog-check[data-show] { margin-inline: auto; }
.signup-dialog[data-state="waiting"] .signup-dialog-spinner { display: block; }
.signup-dialog-spinner { width: 28px; height: 28px; margin-bottom: 12px; border: 3px solid color-mix(in srgb, var(--signup-button-text) 35%, transparent); border-top-color: var(--signup-button-text); border-radius: 50%; animation: signup-spin 0.8s linear infinite; }
@keyframes signup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .signup-dialog-spinner { animation-duration: 2.4s; } }
.signup-dialog-title { margin: 0 0 8px; font-family: var(--ui); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--heading); text-wrap: balance; }
.signup-dialog-body { margin: 0 0 16px; font-family: var(--latin); font-size: 16px; line-height: 1.5; }
.signup-dialog-body:empty, .signup-dialog[data-state="waiting"] .signup-dialog-body, .signup-dialog[data-state="welcome_back"] .signup-dialog-body { display: none; }
.signup-dialog-email { overflow-wrap: anywhere; } /* a long address wraps instead of widening the box */
.signup-dialog-check:empty { display: none !important; }
.signup-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.signup-dialog-button { min-height: 44px; padding: 8px 18px; background: none; border: 2px solid var(--signup-stroke); border-radius: 4px; color: var(--signup-button-text); cursor: pointer; font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.signup-dialog-button-quiet { opacity: 0.8; }
.signup-dialog-button:focus-visible { outline: 2px solid var(--body-text); outline-offset: 2px; }
/* The 7b look (see the tokens): the field is one outlined, lightly filled bar with SIGN UP as gold type at its right end,
   no line between them and no button fill; the box adds no padding, so the heading lines up with the field. A colour
   scheme that sets a box colour (--signup-bg) still gets its box. */
.signup-box { box-shadow: none; }
.signup-form { border: 2px solid var(--signup-stroke); border-radius: 4px; background: var(--signup-field); }
.signup-input { border-right: 0; background: none; color: var(--signup-typed); }
.signup-button { background: none; font-weight: 700; letter-spacing: 0.06em; font-size: 15px; }
/* Short screens (a laptop such as the MacBook Air): the sign-up box and the space above it tighten, on the homepage
   and the Mission page alike, so the text above keeps more of the screen and the box stays in the same place on both */
@media (min-width: 761px) and (max-height: 820px) {
  .signup-box { padding: 20px 32px; gap: 28px; }
  .signup-heading { font-size: calc(clamp(30px, 5.6cqw, 46px) * var(--cta-scale)); }
  .signup-input { padding: 14px 18px; }
  .signup-button { padding: 14px 22px; }
  .home-blurb .signup { margin-top: 32px; }
  .page-mission .hero-mission { margin-bottom: 32px; }
}
/* The sign-up box on tablets and up (phones keep their docked box): the desktop's size everywhere, as in the 7b mock.
   On the homepage and the Mission page it sits right under the text, from its left edge, 412px wide (the homepage's
   English column on a wide screen: half the 900px block, less the 36px before the translations), with the form under
   the heading; the heading is on one line, sized from the box (cqw) so it fits its width (30px). In the Oven's field
   is as wide, under its own heading (36px). Tablets used to get a 700px box centred under the text, its heading 52px
   and the field's type 15px. */
@media (min-width: 761px) {
  .home-template .signup-box, .mission-signup .signup-box { width: 414px; max-width: 100%; margin-inline: 0; grid-template-columns: 1fr; gap: 12px; padding: 0; /* no padding: there is no box to see (7b), and the heading lines up with the field */ border-radius: calc(var(--signup-radius) / 2); }
  .home-blurb .signup { max-width: 900px; } /* as wide as the blurb above */
  .home-template .signup-heading, .mission-signup .signup-heading { max-width: none; white-space: nowrap; font-size: 7.4cqw; }
  .home-template .signup-form, .mission-signup .signup-form { justify-content: flex-start; }
  .home-template .signup-input, .mission-signup .signup-input, .site .page-signup .signup-input { font-size: 18px; padding: 11px 14px; }
  .home-template .signup-button, .mission-signup .signup-button, .site .page-signup .signup-button { font-size: 17px; padding: 11px 14px; }
  .site .page-signup .signup-form { max-width: 412px; } /* as wide as Home's and Mission's box */
  .home-template .signup .pair-right, .mission-signup .signup .pair-right { padding-bottom: 0; }
}

/* ---------- Archives (Posts, Catalogue, In the oven) ---------- */
.archive { padding-block: 24px 72px; }
.archive-head { align-items: baseline; margin-bottom: 40px; }
.archive-head:not(.pair) { padding-inline: var(--gutter); }
.archive-title-kn { font-size: clamp(32px, 4vw, 58px); line-height: 1.3; }
.archive-title { font-size: clamp(30px, 3.7vw, 53px); line-height: 1.05; }
.archive-lede { font-size: var(--body-size); line-height: var(--body-leading); margin-top: 12px; color: var(--body-text); }
.archive .list { margin-inline: var(--gutter); max-width: var(--text-col); }
.archive-head:not(.pair) > * { max-width: var(--text-col); }

.books {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 28px;
  padding-inline: var(--gutter);
}
.book { text-decoration: none; display: flex; flex-direction: column; gap: 12px; }
.book-cover { aspect-ratio: 2 / 3; border: var(--hair); overflow: hidden; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover-blank { height: 100%; display: flex; align-items: flex-end; padding: 18px; font-size: 18px; line-height: 1.2; }
.book-title { font-size: 18px; line-height: 1.2; }
.book:hover .book-title { text-decoration: underline; text-underline-offset: 5px; }
.book-meta { font-size: 12px; line-height: 1.45; }

.pagination {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 40px var(--gutter) 0; padding-top: 18px; border-top: var(--hair); font-size: 13px;
}

/* ---------- Article (post / page) ---------- */
.article { padding-block: 24px 80px; }
.article-head { max-width: 62rem; margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: 18px; }
.article-meta { font-family: var(--ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.article-title { font-size: 30px; line-height: 1.05; } /* the H1 at one size everywhere (it was clamp(30px, 3.8vw, 53px)); page H1s are visually hidden */
.article-lede { font-size: clamp(16px, 1.4vw, 21px); line-height: 1.4; max-width: 36em; }
.article-byline { font-family: var(--ui); font-size: 13px; }
.article-figure { max-width: 62rem; margin: 40px auto 0; padding-inline: var(--gutter); }
.article-figure figcaption { font-size: 11px; margin-top: 10px; }
.article-body { max-width: 40rem; margin: 48px auto 0; padding-inline: var(--gutter); font-size: var(--body-size); line-height: var(--body-leading); }
/* A list beneath a page body (In the Oven) */
.page-list { max-width: 62rem; margin: 48px auto 0; padding-inline: var(--gutter); }

/* People (Mission, Advisors): photo left, blurb right */
.people { max-width: 62rem; margin: 56px auto 0; padding-inline: var(--gutter); }

/* Pages (not posts) run the full width, like the homepage: everything starts at the gutter.
   Prose keeps a readable measure but sits left, on the title's edge. */
.page .article-head, .page .article-figure, .page .article-body, .page .people, .page .page-list { max-width: none; margin-inline: 0; }
.page .article-body > * { max-width: var(--text-col); }
.page .article-body > .kg-width-wide, .page .article-body > .kg-width-full { max-width: none; }
/* Posts (post.hbs): the same left-aligned column as pages, var(--text-col) wide (was a centred 40rem column). */
.post-article :is(.article-head, .article-figure, .article-body, .article-foot) { margin-inline: 0; }
.post-article :is(.article-head, .article-figure) { max-width: calc(var(--text-col) + 2 * var(--gutter)); } /* each pads by the gutter */
.post-article .article-foot { margin-inline: var(--gutter); padding-inline: 0; max-width: var(--text-col); } /* its rule as wide as the column */
.post-article .article-body { max-width: none; }
.post-article .article-body > * { max-width: var(--text-col); }
.post-article .article-body > .kg-width-wide, .post-article .article-body > .kg-width-full { max-width: none; }
.person:first-child { border-top: var(--hair); }
.person {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 36px; align-items: start;
  padding: 36px 0; border-bottom: var(--hair);
}
.person-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.people-columns .person-photo img { clip-path: var(--splotch); }
.person-name { font-size: clamp(19px, 1.8vw, 26px); }
.person-role { font-family: var(--ui); font-size: 14px; /* a role or a place ("Co-founder and Publisher", "Film Editor, Los Angeles, CA"), 14px on every screen (was 12px off phones) */ letter-spacing: 0.08em; text-transform: uppercase; margin: 6px 0 0; color: var(--body-text); }
.person-blurb { margin-top: 16px; font-size: var(--body-size); line-height: var(--body-leading); }
.person-blurb p { margin: 0 0 0.8em; }
.person-blurb p:last-child { margin-bottom: 0; }
.person-blurb h3 { font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 1.6em 0 0.6em; color: var(--cream-2); }
.person-blurb h3:first-child { margin-top: 0; }
.person-blurb ul { margin: 0 0 0.8em; padding-left: 1.2em; }
.person-blurb li { margin: 0 0 0.3em; }
/* Columns variant (Mission): side-by-side cards, photo above the text */
/* Profile layout (Mission founders): large name and role, then photo + "Currently reading" | the bio. */
.people-profile .person { display: block; padding: 48px 0; border: 0; border-top: var(--hair); }
.people-profile .person:first-child { border-top: var(--hair); }
.people-profile .person-head { margin-bottom: 28px; }
.people-profile .person-name { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; margin: 0; }
.people-profile .person-role { font-size: 18px; letter-spacing: 0.14em; margin-top: 10px; }
.person-cols { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.people-profile .person-photo { max-width: 280px; margin-bottom: 24px; }
.people-profile .person-photo img { clip-path: var(--splotch); }
/* The blurb keeps a reading measure and stays clear of the spill in the top right corner. */
/* In the Oven: the cover beside the title and credits, then a rule right across the page under both, then the blurb
   under the rule from the left edge (under the cover), left-aligned. .person-text steps aside (display: contents)
   so the head and the blurb are rows of the book's grid. */
.oven-books .person-text { display: contents; }
.oven-books .person { max-width: var(--text-col); } /* each book, the cover and credits, the rules and the blurb, on the 748px text column, as wide as the sign-up under it (was the full width, 1,160px on a 1,850px screen) */
.page .article-body:not(:has(*)) + .oven-books { margin-top: 0; } /* In the Oven with no intro text: the first book starts at the top of the content, where every other page's content starts (was 56px lower) */
.oven-books .person, .oven-books .person:first-child { border-top: 0; padding-block: 0; } /* no rule above a book (was a rule and 48px above and below it) */
.oven-books .person + .person { margin-top: 96px; } /* the space between books, as between the Founders and Advisors lists */
.site > main.page-books .page-signup .signup { border-top: 0; padding-top: 96px; } /* no rule under the books either: the sign-up 96px under the last one, as far as on Jobs & Internships (was a rule, 48px above and below it) */
.oven-books .person-cols { row-gap: 0; }
.oven-books .person-photo { margin-bottom: 0; }
.oven-books .person-blurb { grid-column: 1 / -1; margin-top: 36px; padding-top: 32px; border-top: var(--hair); }
.oven-books .person-blurb > * { max-width: var(--text-col); } /* a reading measure; the rule above runs the full width */
.oven-books .person-blurb h3 { font-family: var(--gh-font-heading, var(--ui)); font-weight: 500; font-size: calc(var(--body-size) * 1.1); line-height: 1.15; letter-spacing: normal; text-transform: none; margin: 1.6em 0 0.6em; color: var(--body-heading); } /* a heading in a book's text ("Historical Setting") set like an H3 in any page's body (.gh-content h3), not as the small grey capitals of a person's bio (.person-blurb h3) */
.oven-books .person-blurb h3:first-child { margin-top: 0; } /* first in the blurb: straight under the rule's 32px, like the blurb's text when it starts with a paragraph */
@media (max-width: 760px) { .oven-books .person-photo { margin: 0 auto 24px; } .oven-books .book-head { text-align: center; } } /* phones: the cover centred, with room under it, and the title and credits centred under it (the blurb stays left-aligned) */
@media (min-width: 761px) {
  .oven-books .person-side { grid-column: 1; grid-row: 1; }
  .oven-books .book-head { grid-column: 2; grid-row: 1; align-self: center; } /* the title and credits centred on the cover's height */
}
/* In the Oven: the title heads the text column, the credits under it (main.js builds them from the body's labelled
   lines), in steps down from the title: "by <author>", then "Original Title: …" and "Original language: …", then
   "Translated by" and "Edited by" */
.oven-books .book-head { margin: 0; } /* the rule under it is the blurb's, right across the page */
.oven-books .book-head .person-name { color: var(--heading); font-size: calc(var(--body-size) * 1.1); line-height: 1.15; } /* the book's title, an H3: the headings' colour, and the size of an H3 in a page's body (was clamp(30px, 3.2vw, 44px)) */
.oven-books .person-photo img { clip-path: none; aspect-ratio: auto; height: auto; object-fit: initial; } /* a book's feature image as it is: no splotch, no square crop (the splotch stays for the label when there is no image) */
/* The stamp: a callout in a book's body (e.g. "Coming Fall 2027"), moved by main.js onto the cover's top right corner,
   as a round, tilted stamp in the logo's yellow with the text in the page's red, a thin ring inside its edge. */
.oven-books .person-photo { position: relative; }
.book-stamp { position: absolute; top: -22px; right: -28px; z-index: 1; margin: 0; width: 100px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 13px; background: var(--letter-paper); color: var(--night); transform: rotate(-12deg); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); text-align: center; font-family: var(--ui); font-weight: 700; font-size: 13px; line-height: 1.15; letter-spacing: 0.1em; text-transform: uppercase; } /* 13px text (was 12px) */
.book-stamp::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed currentColor; opacity: 0.7; }
@media (max-width: 760px) { .book-stamp { width: 92px; padding: 11px; font-size: 13px; top: -18px; right: -22px; } } /* phones: 13px text as on desktop (was 10.5px), the stamp 92px wide (was 86px) to hold it */
/* Without JavaScript the callout stays at the end of the blurb: the same yellow and red, not Ghost's white box. */
.oven-books .person-blurb .kg-callout-card { background: var(--letter-paper); color: var(--night); border-radius: 0; font-family: var(--ui); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* The sign-up box at the end of a page (.page-signup: In the Oven, under the books; Jobs & Internships, under the text), after a rule, from the left edge and as wide as the blurb's measure;
   its heading on two lines or so, in the headings' gold. On phones it stays in the page (class signup-inline): not
   docked to the bottom of the screen as on Home and Mission. */
.site .page-signup { margin: 0; padding-inline: var(--gutter); } /* the books' column (.page .people); no margin: the 48px under the last book is the space above the rule, as much as under it (was 56px more, 104px in all) */
.site .page-signup .signup { position: static; padding: 48px 0 0; margin: 0; background: none; border-top: var(--hair); }
.site .page-signup .signup { max-width: var(--text-col); } /* the rule over the sign-up on the 748px text column, like the text above it, on In the Oven and Jobs & Internships (was the full width) */
.site .page-signup .signup-box { width: 100%; max-width: var(--text-col); margin-inline: 0; grid-template-columns: 1fr; gap: 18px; padding: 0; }
.site .page-signup .signup-heading { max-width: none; white-space: normal; font-size: 36px; line-height: 1.1; } /* 36px on tablets as on desktops (was clamp(26px, 2.4vw, 36px), 26px on tablets); phones 26px, below */
.site .page-signup .signup-form { justify-content: flex-start; }
.site .article-body + .page-signup { margin-top: 48px; } /* after a page's text (Jobs & Internships), the same 48px above the rule as under In the Oven's last book */
@media (max-width: 760px) { .site .page-signup .signup { padding-top: 32px; } .site .page-signup .signup-heading { font-size: 26px; } }
.book-credits { margin-top: 14px; }
.book-credit { margin: 0; color: var(--body-text); }
.book-by { font-size: var(--body-size); line-height: 1.35; color: var(--body-text); margin-bottom: 22px; } /* the author: the text size, 20px, under the 22px title (was 22px, the title's size) */
.book-original { font-size: calc(var(--body-size) * 0.882); line-height: 1.55; }
.book-awards { font-size: calc(var(--body-size) * 0.882); line-height: 1.55; margin-top: 14px; } /* "Awards and Recognitions: …", moved from the blurb (main.js) to the end of the credits */
.book-awards a { color: inherit; }
.book-original-title { line-height: inherit; }
.book-original-lang, .book-translator { margin-top: 12px; } /* the same 12px gap between "Original Title", "Original Language" and "Translated by" */
.book-translator, .book-editor { font-size: calc(var(--body-size) * 0.882); line-height: 1.55; }
/* The formats a book is planned in, as small badges under the names: dashed and faded, in the page's text colour, so they
   read as not yet available whatever colour the page is. */
.book-formats ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.book-format { margin: 0; padding: 5px 11px 4px; border: 1px dashed currentColor; border-radius: 999px; font-family: var(--ui); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body-text); opacity: 0.75; cursor: default; } /* 75%: faded enough to read as not yet available, strong enough to read at 11px (was 50%, too faint on the red page) */
@media (max-width: 760px) { .book-formats ul { justify-content: center; row-gap: 0; } .book-format:first-child { order: 0; } .book-formats ul::after { content: ""; order: 1; flex-basis: 100%; height: 0; } .book-format + .book-format { order: 2; margin-top: 8px; } } /* phones: the hardcover on its own line, paperback and eBook centred under it, at every width (was as many as fitted, which left eBook alone on the second line on most phones); the empty ::after breaks the line; the 8px between the lines is the second line's margin, as the row gap would count twice around the break */
/* A book with no cover yet: its label (the excerpt) sits inside the splotch. */
.cover-text { aspect-ratio: 1; clip-path: var(--splotch); background: var(--mint); display: grid; place-items: center; text-align: center; padding: 18%; font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bg); }
.person-reading { font-size: var(--body-size); line-height: var(--body-leading); }
.person-reading h3 { font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.6em; color: var(--cream-2); }
.person-reading p { margin: 0 0 0.8em; }
.person-reading p:last-child { margin-bottom: 0; }
.person-reading ul { margin: 0 0 0.8em; padding-left: 1.2em; }
/* People as a compact list (layout="list"): a heading, then one row per person. Name on the left, role and
   the LinkedIn link on the right; on phones the row stacks, the link last. */
.people-list { margin-top: 40px; }
.people-list + .people-list { margin-top: 96px; }
.people-heading { font-family: var(--gh-font-heading, var(--ui)); font-weight: 500; font-size: calc(var(--body-size) * 1.4); line-height: 1.15; letter-spacing: normal; text-transform: none; margin: 0 0 14px; color: var(--heading); } /* set like an H2 in the page body (.gh-content h2: 1.6 × the 17px text), in the menu's colour */
.people-intro { max-width: var(--text-col); margin: 0 0 28px; font-size: var(--body-size); line-height: var(--body-leading); } /* the page body's text for this list (page-about-us.hbs), between the heading and the rows */
.people-intro > :first-child { margin-top: 0; }
.people-intro > :last-child { margin-bottom: 0; }
.people-list .person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* halves (were 1.4 : 1): at 14px the longest role, "Book Editor & Musician, Cambridge, MA", needs 322px, and the names at most about 180px */ gap: 8px 32px; align-items: baseline; padding: 18px 0; border: 0; border-bottom: var(--hair); }
.people-list .person:first-of-type { border-top: var(--hair); }
.people-list .person { max-width: var(--text-col); } /* the rows and their rules on the 748px text column, as wide as the intro above them (were the full width, about 990px on a 1,850px screen) */
.people-list .person-name { font-size: var(--body-size); font-weight: 500; margin: 0; } /* the size of an H4 in the page body (the body text size), in the headings' sans */
.people-list .person-role { margin: 0; text-wrap: balance; } /* where a role must wrap, its lines come out even, not a lone "MA" */
.person-linkedin { display: inline-flex; vertical-align: -1px; margin-left: 10px; color: var(--logo); padding: 14.5px; margin: -14.5px -14.5px -14.5px -4.5px; } /* a 44 × 44 tap area round the 15px icon; the margins keep it 10px after the name, where it was */ /* the LinkedIn icon after a name (main.js), in the logo's colour */
.person-linkedin:hover { opacity: 0.8; }
.people-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.people-columns::before { content: ""; grid-column: 1 / -1; border-top: var(--hair); }
.people-columns .person { display: block; padding: 0; border: 0; }
.people-columns .person-photo { margin-bottom: 20px; max-width: 280px; }

.article-foot { max-width: 40rem; margin: 56px auto 0; padding-inline: var(--gutter); display: flex; justify-content: space-between; gap: 24px; font-family: var(--ui); font-size: 12px; border-top: var(--hair); padding-top: 18px; }

/* Ghost editor content */
.gh-content > * + * { margin-top: 1.2em; }
.gh-content h2 { font-size: calc(var(--body-size) * 1.4); margin-top: 2em; } /* H2 28px and H3 22px with 20px text (were 32px and 25px); H4 stays at the text size, 20px */
main.page-jobs .gh-content h2 ~ h2 { margin-top: 48px; padding-top: 40px; border-top: var(--hair); } /* Jobs & Internships: a rule between its sections (full-time, project-based, internships), under each one's text; 48px above it, as above the sign-up's rule */
.heading-badge { display: inline-block; vertical-align: 0.2em; margin-left: 0.5em; padding: 7px 15px 6px; border-radius: 999px; background: var(--letter-paper); color: var(--night); font-family: var(--ui); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transform: rotate(-3deg); } /* "Opening 2027" after a heading (main.js), in the cover stamp's colours and type, tilted a little like it */
.heading-badge-muted { background: none; color: var(--body-text); box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.75; transform: none; } /* "No open positions": an outline in the text's colour, upright, so the open ones stand out */
.heading-badge-soon { background: none; color: var(--letter-paper); box-shadow: inset 0 0 0 1.5px currentColor; transform: none; } /* "Opening 2027": upcoming, a yellow outline, not filled in yet (filled = open, faint = none), level with the heading (was a tilted, dashed outline) */
.heading-badge-open { transform: none; } /* "Currently open": upright, level with the heading, as "No open positions" */
.heading-badge-open::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.45em; vertical-align: 0.08em; border-radius: 50%; background: currentColor; } /* "Currently open": solid, with a dot like a "live" light */
@media (max-width: 760px) { .heading-badge { display: table; margin: 10px 0 0; font-size: 14px; } } /* phones: the badge on its own line under the heading, so a heading never breaks around it */
.gh-content h3 { font-size: calc(var(--body-size) * 1.1); margin-top: 1.6em; }
.gh-content h4 { font-size: var(--body-size); }
.gh-content .kg-toggle-card .kg-toggle-content :is(p, ol, ul) { font-size: 1em; line-height: var(--body-leading); } /* FAQ answers at the body size (Ghost's card styles set them a little smaller) */
.article-body :is(h2, h3, h4) { font-family: var(--gh-font-heading, var(--ui)); font-weight: 500; color: var(--body-heading); } /* headings in any page's or post's body: the headings' sans, in the headings' colour (whatever the page's URL) */
.gh-content blockquote { margin: 1.6em 0; padding-left: 1.2em; border-left: var(--hair); font-style: italic; }
.gh-content hr { border: 0; border-top: var(--hair); margin: 2.4em 0; }
.gh-content figure { margin: 2em 0; }
.gh-content figcaption { font-size: 0.8em; margin-top: 0.6em; }
.gh-content pre { overflow-x: auto; padding: 1em; border: var(--hair); font-size: 0.85em; }
.gh-content .kg-toggle-card .kg-toggle-heading-text { font-family: var(--gh-font-heading, var(--ui)); font-weight: 500; font-size: calc(var(--body-size) * 1.1); line-height: 1.15; color: var(--heading); } /* the FAQ's questions set like an H3 in the page body (.gh-content h3), in the menu's colour; the answers keep the page text colour */
.gh-content .kg-toggle-card-icon svg path { stroke: var(--heading); } /* the chevron goes with its question (Ghost draws it in a faint grey that vanishes on our grounds) */
.gh-content .toggle-all-bar { position: relative; height: 0; margin: 0; } /* the FAQ's "Expand all / Collapse all" (main.js): above the first question's top-right corner, in the space over it, so the first question stays at --content-top */
.gh-content .toggle-all-bar + .kg-toggle-card { margin-top: 0; }
.gh-content > .kg-toggle-card:first-child, .gh-content .toggle-all-bar + .kg-toggle-card { padding-top: 0; } /* with no border round it, the first question's text starts at --content-top like every other page's first line (was 1.2em lower, the inside of its old box) */
.gh-content .kg-toggle-card { box-shadow: none; border-radius: 0; padding-inline: 0; } /* no border round each question, on every screen (Ghost draws a faint 1px outline), and so no inset: the questions and answers start at the column's left edge like the rest of the text, the chevron at its right */
.toggle-all { position: absolute; right: 0; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 6px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--heading); font-family: var(--ui); font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; } /* an outline pill in the questions' colour, set like the status badges */
.toggle-all::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); } /* a chevron: down to expand */
.toggle-all.is-open::after { transform: translateY(2px) rotate(-135deg); } /* up to collapse */
.toggle-all::before { content: ""; position: absolute; inset: -7px 0; } /* a 44px tall tap area round the 30px pill */
.gh-content .kg-toggle-card .kg-toggle-heading { padding-block: 10px; margin-block: -10px; } /* the question row (Ghost's click target) at least 44px tall, without moving it */
.toggle-all:hover, .toggle-all:focus-visible { background: var(--heading); color: var(--bg); box-shadow: none; }
@media (max-width: 760px) { .gh-content .toggle-all-bar { display: none; } } /* phones: no button; the questions are a short list to tap through */
.gh-content .kg-width-wide { margin-inline: calc(-1 * var(--gutter)); }
.gh-content table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
.gh-content th, .gh-content td { text-align: left; padding: 0.5em 0.6em; border-bottom: var(--hair); }
/* The Tally form on the Submissions page: its light theme's dark text needs a light ground, so the sign-up box's yellow
   is fixed here rather than taken from --signup-bg, which some colour schemes set dark */
.gh-content .submission-form { margin-top: 48px; padding: 24px; background: #fdc45b; }
.submission-form iframe { display: block; border: 0; }

/* A letter (pages and posts tagged #letter or letter; partials/body.hbs): the text on a sheet of light yellow paper, in ink,
   with the salutation and the sign-off (the last two paragraphs: the closing line and the signature) handwritten */
.gh-content .letter {
  background: var(--letter-paper); color: var(--ink);
  --hair: 1px solid var(--ink);
  padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 64px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 18px 40px rgba(0, 0, 0, 0.22);
}
.letter > * + * { margin-top: 1.2em; }
.letter > :is(.letter-salutation, p:nth-last-child(2), p:last-child) { color: inherit; text-transform: none; letter-spacing: normal; font-family: var(--hand); font-weight: 500; font-size: 1.45em; line-height: 1.25; } /* 1.45× sits Dancing Script with the 20px text */
.letter > :first-child { margin-top: 0; }
.letter > .letter-salutation { margin-bottom: 1em; } /* the salutation: the first block, paragraph or heading (an H2 on the live CrowdSlush page), when it ends in a comma (main.js) */
.letter :is(h2, h3, h4) { color: var(--ink); } /* a letter's headings in its ink: the gold of the other pages' headings (--heading) all but vanishes on the yellow paper */
.letter > p:nth-last-child(2) { margin-top: 1.8em; } /* the closing line */
.letter > p:last-child { margin-top: 0.15em; font-weight: 600; } /* the signature */
.letter a { color: inherit; }

/* Facing-page passages: put two paragraphs inside an HTML card with this class */
.facing { display: grid; grid-template-columns: 56px 1fr 1fr; border: var(--hair); margin: 2em 0; }
.facing > * { padding: 18px 22px; border-bottom: var(--hair); }
.facing .n { text-align: center; font-size: 0.8em; padding-inline: 0; }
.facing .src { font-family: var(--kn); line-height: 1.85; font-size: 1.05em; background: color-mix(in srgb, var(--peacock) 18%, var(--paper)); }
.facing .src, .facing .tgt, .facing .n { }
.facing > :nth-last-child(-n+3) { border-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding: 24px var(--gutter) 44px var(--col-left); color: var(--body-text); /* starts at the content column's left edge, right of the bottom-left splash */
  font-family: var(--ui); font-weight: 500; font-size: 16.5px; letter-spacing: 0.12em; text-transform: uppercase; /* as the header links */
}
.site-footer-left { line-height: 1.7; }
.site-footer-left a { color: inherit; text-decoration: none; display: inline-block; padding: 14px 6px; margin: -14px -6px; } /* a tap area over 44px tall at every size (was the text's height, 17px on tablets); the negative margins keep the line where it was */
.site-footer-left a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer-sep { margin: 0 0.9em; opacity: 0.5; }
/* The social icons (partials/social-links.hbs), in the colour of the text around them: 22px glyphs, each a 44px tap
   area with the extra taken back by negative margins so the line keeps its height. In the footer after Privacy
   Policy; on phones at the bottom of the open menu instead. */
.social-links { display: inline-flex; align-items: center; gap: 14px; vertical-align: middle; }
.social-links:empty { display: none; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -11px; color: inherit; }
.social-links a:hover { color: var(--heading); text-decoration: none; }
.social-links svg { width: 22px; height: 22px; display: block; }
.site-footer-social::before { content: "|"; content: "|" / ""; margin: 0 calc(0.9em - 14px) 0 0.9em; opacity: 0.5; } /* a separator after Privacy Policy, like the one before it; part of the group, so it goes when there are no icons (the / "" keeps screen readers from reading it) */
.frame-social { display: none; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .carousel, .carousel-viewport { transition: none; }
  .hero-name { animation: none; }
}

/* ---------- Tablet and below: the frame becomes a header ---------- */
@media (max-width: 1300px) {
  .person-cols { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 24px 40px; }
}
@media (max-width: 1100px) {
  body { --frame-left: 0px; --col-left: 0px; --frame-right: 0px; --logotype-h: 98px; /* was 96px */ --splash-tr: clamp(150px, 24vw, 260px); --splash-bl: clamp(170px, 26vw, 280px); }
  body { --splash-tr-size: calc(var(--splash-tr) * 2.6); --splash-bl-size: calc(var(--splash-bl) * 2.6); } /* the 7a splashes in proportion to the old ones */
  /* The splashes sit at the top right and bottom left of the page, not the screen, so the text never scrolls over them */
  .frame-ink { position: absolute; }
  .frame { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 20px calc(var(--splash-tr) * 0.9) 12px var(--gutter); /* the right padding keeps the menu off the splash */ }
  .frame-logotype { position: static; flex: none; width: var(--logotype-h); }
  .frame-nav { position: static; flex: 1; }
  .frame-nav .nav { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; }
  .frame-nav .nav a, .frame-nav .nav-group-btn { font-size: 17px; }
  .frame-nav .nav-sub { left: 0; top: 100%; margin: 8px 0 0; } /* the dropdown opens downward from its label */
  .frame-bottle { display: none; }
  body { --content-top: 108px; } /* every page, as the homepage and Mission (was 60px for the rest) */
  .site > main:not(.home) { padding-inline: 0; }
  .site-footer { padding-left: calc(var(--splash-bl) * 0.9); font-size: 13px; } /* clear of the bottom-left splash */
  /* The header sticks; the homepage's screen fills the space under it (main.js measures it into --header-h) and
     the blurb and mission type step down a size */
  .frame { position: sticky; top: 0; z-index: 3; background: var(--bg); }
  .frame-ink { z-index: 4; } /* the splashes over the header, which keeps clear of them */
  .home-section { padding-bottom: 24px; }
  .home-template .home-section { padding-inline: var(--gutter); }
  /* The blurb screen hangs from the top, not the centre, so the English and the hairline stay put while the
     translation under them changes height from slide to slide (its viewport fits each slide on narrow layouts) */
  .home-template .home-blurb { justify-content: flex-start; }
  /* the homepage English and Mission keep the body size here too (were 17px) */
  .home-blurb .carousel-text { font-size: 15px; }
  .hero-mission .carousel-text { font-size: 13.5px; }
  .hero-mission { margin-bottom: 36px; }
  .carousel-item { height: auto; } /* each translation its own height; main.js sums them to place the stack */
  .signup { padding-inline: 0; }
}
/* Tablets held upright (portrait): the top-right splash stays in its corner with the sticky header as the page
   scrolls (fixed to the screen, not the page), and there is no bottom-left splash, which landed oddly at the page's
   end; the footer starts at the gutter, with nothing to clear. Landscape tablets keep the rules above. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .frame-ink { position: fixed; }
  .splash-bl { display: none; }
  .site-footer { padding-left: var(--gutter); }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  html.menu-open { overflow: hidden; } /* the page stays put behind the open menu */
  .pair { grid-template-columns: 1fr; }
  .pair-left { text-align: left; padding-right: 0; border-right: 0; padding-bottom: 14px; border-bottom: var(--hair); margin-bottom: 14px; }
  .pair-right { padding-left: 0; }
  .carousel-item { align-items: flex-start; }
  /* The blurb stacks: the English first, the cycling translations under it */
  .intro .pair-right { order: -1; margin-bottom: 20px; }
  .intro .pair-left { border-bottom: 0; padding-top: 20px; padding-right: 0; border-top: var(--hair); }
  .intro .intro-text::before { display: none; }
  .intro .pair-right { padding-top: 0; }
  .signup-box { width: 100%; grid-template-columns: 1fr; gap: 24px; padding: 20px 16px; }
  .signup-form { justify-content: flex-start; }
  .signup-input { padding: 16px 18px; }
  .signup-button { padding: 16px 24px; }
  .side-by-side > p:first-child, .side-by-side > p:not(:first-child) { grid-column: 1; grid-row: auto; padding: 0; text-align: left; }
  .person { grid-template-columns: 1fr; gap: 18px; }
  .person-photo { max-width: 200px; }
  .people-columns { grid-template-columns: 1fr; gap: 40px; }
  .people-list .person { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .person-cols { grid-template-columns: 1fr; gap: 24px; }
  .people-profile .person-photo { max-width: 220px; }
  .people-columns .person-photo { max-width: 280px; }
  .list-row { grid-template-columns: 1fr auto; }
  .list-meta { grid-column: 1 / -1; }
  .facing { grid-template-columns: 40px 1fr; }
  .facing .tgt { grid-column: 2; border-top: 0; padding-top: 0; }
  .facing .n { grid-row: span 2; }
  /* The logotype stays top left; top right, the bottle mark over a two-bar hamburger opens the menu, which
     takes over the whole viewport with the logotype and the button (now a cross) still showing */
  body { --logotype-h: 86px; } /* was 84px */
  .frame-ink { display: none; } /* no splashes on phones: the top-right corner belongs to the menu button, and the
                                   bottom-left splash would sit behind the text */
  .site-footer { padding-left: var(--gutter); } /* nothing to clear at the bottom left */
  .frame { flex-wrap: wrap; gap: 12px 16px; padding: 16px var(--gutter) 12px; }
  .frame-menu-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-left: auto; min-width: 44px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--logo); }
  .frame-mark { display: block; height: 42px; aspect-ratio: 613 / 900; background: var(--logo); -webkit-mask: url(../images/icon-mark-900.png) center / contain no-repeat; mask: url(../images/icon-mark-900.png) center / contain no-repeat; }
  .burger { display: block; position: relative; width: 26px; height: 12px; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform 250ms ease; }
  .burger::before { top: 0; }
  .burger::after { bottom: 0; }
  .menu-open .burger::before { transform: translateY(5px) rotate(45deg); }
  .menu-open .burger::after { transform: translateY(-5px) rotate(-45deg); }
  .frame-nav { display: none; }
  .frame.menu-open { z-index: 6; } /* above the splashes while the menu is open */
  .frame.menu-open .frame-logotype, .frame.menu-open .frame-menu-btn { position: relative; inset: auto; z-index: 2; }
  .frame.menu-open .frame-nav { display: block; position: fixed; inset: var(--header-h, 112px) 0 0; z-index: 1; overflow: auto; overscroll-behavior: contain; background: var(--bg); padding: 20px var(--gutter) 40px; } /* starts under the header (was the whole screen, padded down by the header's height), so a menu taller than the screen scrolls in its own box and never passes behind the logotype and the close button (iPhone SE, 2026-11-12) */
  .frame-nav .nav { flex-direction: column; gap: 3px; padding: 15px 0 0; border-top: var(--hair); } /* gap 3px and padding 15px 0 0 (were 22px and 22px 0 6px): with each link's 7px above and below, the links sit 53px apart as before */
  .frame-nav .nav a, .frame-nav .nav-group-btn { font-size: 24px; display: inline-block; padding-block: 7px; } /* 44px tap areas (were 31px), Apple's and Google's minimum */
  .nav-group-btn::after { display: none; }
  .frame-nav .nav-sub, .nav-group:hover > .nav-sub, .nav-group.open > .nav-sub { display: flex; position: static; transform: none; margin: 0; padding: 7px 0 0 24px; gap: 0; border: 0; background: none; text-align: left; }
  .frame-nav .nav-sub a { font-size: 20px; padding-block: 9px; } /* 44px tap areas */
  .site-footer-social { display: none; } /* phones: no room on the docked footer line; the icons are in the menu */
  .frame-social:not(:empty) { display: flex; gap: 28px; padding: 22px 0 0 11px; margin-top: 22px; border-top: var(--hair); color: var(--menu); }
  .frame-social svg { width: 26px; height: 26px; }
  @media (max-height: 700px) { /* short phone screens (an iPhone SE in Safari shows about 550px; an iPhone mini about 630px): the menu packed tighter so it fits without scrolling, each link still a 44px tap area */
    .frame.menu-open .frame-nav { padding: 12px var(--gutter) 12px; } /* (were 20px and 40px) */
    .frame-nav .nav { padding-top: 12px; gap: 0; } /* (were 15px and 3px) */
    .frame-nav .nav a, .frame-nav .nav-group-btn { font-size: 20px; line-height: 1.2; padding-block: 10px; } /* 44px apart (were 24px type, 53px apart) */
    .frame-social:not(:empty) { padding-top: 12px; margin-top: 12px; } /* (were 22px and 22px) */
  }
  /* the homepage English and Mission: the body size, 18px on phones (were 16px) */
  .home-blurb .carousel-text { font-size: 14px; }
  .hero-mission .carousel-text { font-size: 13px; }
  .hero-mission { margin-bottom: 20px; }
}

/* Ghost card widths */
.gh-content .kg-width-full { margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.gh-content .kg-width-full img { width: 100%; }

/* Ghost design-settings fonts, if an editor picks them (otherwise the theme's own pair) */
body { font-family: var(--gh-font-body, var(--latin)); }
h1, h2, h3, .archive-title, .article-title { font-family: var(--gh-font-heading, var(--ui)); font-weight: 500; } /* titles in the sans, like the menu */

/* Phones: on the homepage and the Mission page (body.has-dock, from main.js) the footer is docked to the bottom of the
   screen and the sign-up box on top of it, so both stay put while the translations above change height; the box is
   compact, the heading on one line over the form. main.js measures them into --foot-h and --dock-h, and the page is
   padded by --dock-h so its end scrolls clear of them. */
@media (max-width: 760px) {
  .site .signup { position: fixed; left: 0; right: 0; bottom: var(--foot-h, 0px); z-index: 5; margin: 0; padding: 0 10px; background: var(--bg); } /* the strip under and beside the box in the page colour: the page's text stops at the top of the box */
  .site .signup-box { width: 100%; max-width: none; gap: 10px; padding: 12px 14px 14px; box-shadow: none; }
  .site .signup-heading { font-size: 24px; line-height: 1.05; max-width: none; }
  .site .signup .pair-left, .site .signup .pair-right { padding: 0; margin: 0; border: 0; }
  .site .signup-input { padding: 12px 14px; font-size: 16px; } /* 16px: iOS does not zoom into the field */
  .site .signup-button { padding: 12px 18px; }
  body { padding-bottom: var(--dock-h, 0px); }
  body { --content-top: 24px; } /* phones: every page starts close under the header (108px on tablets) */
  :root { --body-size: 18px; } /* phones: one body size on every page, the homepage and Mission included (was 20px, and 16px on those two); the headings, sized from it, follow (H2 25px, H3 20px) */
  body.has-dock .site .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; flex-wrap: nowrap; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); font-size: 12px; letter-spacing: 0.06em; } /* 12px (was 11px), the spacing a little tighter so the line still fits a 360px screen */
  body.has-dock .site-footer-left { white-space: nowrap; }
  /* The Privacy Policy link: 44px tall to tap (Apple's and Google's minimum), the padding taken back by negative
     margins so the docked footer stays the same height. */
  body.has-dock .site-footer-left a { display: inline-block; padding: 14px 6px; margin: -14px -6px; }

}

/* Phones: a side-by-side block is one horizontal carousel (main.js builds it): the English, then each translation,
   swiped left and right one slide at a time (main.js moves the rail), with a row of dots pinned above the docked sign-up box marking the
   slide on screen (a dot taps to its slide). The two columns and the vertical carousel stay for wider screens. */
.hcar, .hcar-dots { display: none; }
@media (max-width: 760px) {
  .intro.pair { display: block; }
  .intro .pair-left, .intro .pair-right { display: none; }
  .hcar { display: block; }
  .hcar-head { display: flex; justify-content: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: var(--hair); }
  .hcar-label { text-align: center; min-height: 1.5em; } /* keeps its line when empty (the English): one 24px line, as tall as a language name, so the row doesn't shift between slides */
  /* The dots: 9px, the slide on screen filled in the logo's yellow, the others outlined. Each is a 44 × 44 tap area (was 32 × 44)
     (44 tall, Apple's and Google's minimum) with the dot drawn in its middle. The row is pinned to the screen just above
     the docked sign-up box, on a strip of the page colour, so the text scrolls out of sight above the dots. */
  .hcar-dots { display: flex; justify-content: center; position: fixed; left: 0; right: 0; bottom: var(--dock-h, 0px); z-index: 5; background: var(--bg); }
  body.has-dots { padding-bottom: calc(var(--dock-h, 0px) + 44px + 12px); } /* the page's end scrolls clear of the dots too, with a little air */
  html.menu-open .hcar-dots { display: none; } /* not over the open menu, whose last items and social icons they covered */
  .hcar-dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
  .hcar-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1.5px solid var(--logo); box-sizing: border-box; transition: background-color 200ms ease, transform 200ms ease; }
  .hcar-dot[aria-current="true"]::before { background: var(--logo); transform: scale(1.25); }
  .hcar-dot:focus-visible { outline: 2px solid var(--logo); outline-offset: -8px; border-radius: 8px; }
  /* The track is a window one slide wide; the rail inside it holds the slides side by side and main.js slides it
     (translateX by whole slide widths, as percentages), one slide per swipe. pan-y leaves up-and-down to the page. */
  .hcar-track { overflow: hidden; touch-action: pan-y; transition: height 300ms ease; }
  .hcar-rail { display: flex; align-items: flex-start; transition: transform 320ms cubic-bezier(.2, .7, .2, 1); will-change: transform; }
  .hcar-rail.is-dragging { transition: none; } /* follows the finger */
  .hcar-slide { flex: 0 0 100%; min-width: 0; }
  .hcar-slide .carousel-text { padding: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .hcar-track, .hcar-rail, .hcar-dot::before { transition: none; } }