/* 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: #ec5458;
  --cream: #fbdcc8;
  --cream-2: #fbdcc8;
  --mint: #b1bdc3;
  --menu: #b8c4cc;  /* the menu type (the colour-scheme picker overrides it) */
  --signup-bg: #fdc45b;
  --signup-border: #fdc45b;
  --signup-shadow-colour: #000000;
  --signup-text: #3a2a1a;
  --logo: #fdc45b;      /* bottle, top left of every page */
  --logotype: #fdc45b;  /* wavy logotype top right, and the bottle top left */
  --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. White for contrast (3.51:1 on the red, up from 2.71:1). Was #fbdcc8, the cream (--fg,
     --blurb, --kannada, --cream, --cream-2): set this back to #fbdcc8 to revert. Menu, headings and the sign-up box
     keep their own colours. */
  --body-text: #ffffff;
  /* 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;
  --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;
  --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 (the local dev panel edits these and the colours above; see partials/dev-panel.hbs) */
  --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%; }
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: 112px; } /* --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 */

/* ---------- 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: clamp(96px, min(11vw, (100vh - 300px) * 0.262), 170px); /* scales with the screen's height too, so the menu under it clears the bottom-left splash on a short laptop screen */
  --menu-size: clamp(15px, min(1.6vw, (100vh - 300px) * 0.0383), 23px); /* 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);
}
.frame-ink { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.splash { position: absolute; display: block; fill: var(--mint); }
.splash-tr { top: 0; right: 0; width: var(--splash-tr); height: auto; }
.splash-bl { bottom: 0; left: 0; width: var(--splash-bl); height: auto; }
.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; }
/* TEMPORARY colour-scheme picker: a floating box bottom right (above the local Theme tokens panel) */
.frame-picker { position: fixed; right: 12px; bottom: 12px; z-index: 9998; width: 260px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--menu); border-radius: 6px; background: var(--bg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); font-family: var(--ui); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--menu); }
.frame-picker select { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 3px 6px; cursor: pointer; max-width: 170px; }
.frame-picker select option { color: #142a26; background: #fff; }
.frame-bottle { position: absolute; right: var(--gutter); bottom: 24px; display: block; height: clamp(110px, 12vw, 180px); 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(--frame-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(--frame-left) - var(--gutter)) calc(var(--frame-right) - var(--gutter)); padding-top: calc(var(--content-top) - 48px); } /* 48px: the .article-body margin above the text */

/* 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: 19.2px; line-height: 1.65; color: var(--body-text); text-wrap: pretty; }
.hero-mission p { max-width: 42em; margin: 0 0 0.8em; } /* the paragraphs keep a reading measure inside the block */
.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: 19.2px; }
.home-blurb .carousel-text { font-size: 16px; }
.hero-mission .intro { max-width: none; } /* the mission keeps .hero-mission's 900px */
/* The Mission page (page-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(900px + 2 * var(--gutter)); }
/* 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; }
.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 own arrows (.hcar-btn). */
@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; overscroll-behavior: contain; 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(--cream); border-radius: 10px; overflow: hidden; }
.signup-input {
  flex: 1 1 120px; padding: 18px 20px; border: 0; border-right: 1px solid var(--cream); /* short enough that the button stays beside it */ background: rgba(245, 236, 216, 0.06);
  color: var(--fg); min-width: 0; font-family: var(--ui); font-size: 15px;
}
.signup-input::placeholder { color: var(--signup-text); }
.signup-button { padding: 18px 26px; background: var(--cream); color: var(--night); border: 0; cursor: pointer; font-family: var(--ui); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.signup-note { flex-basis: 100%; font-size: 11px; padding: 10px 24px; display: none; font-family: var(--ui); color: #000; border-top: 1px solid var(--cream); } /* black on the yellow box: "Check your inbox to confirm." and the error line */
.signup-form.success [data-members-success] { display: block; }
.signup-form.error [data-members-error] { display: block; }
/* 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; }
}

/* ---------- 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: 12px; 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. */
.oven-books .person-text { max-width: 36em; }
.oven-books .person { max-width: var(--text-col); } /* each book's row (cover and text) as wide as the text column on other pages */
/* 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-bottom: 28px; padding-bottom: 24px; border-bottom: var(--hair); } /* a rule between the title and credits and the blurb */
.oven-books .book-head .person-name { color: var(--menu); } /* the book's title in the menu's colour */
.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) */
.book-credits { margin-top: 14px; }
.book-credit { margin: 0; color: var(--body-text); }
.book-by { font-size: calc(var(--body-size) * 1.235); line-height: 1.35; color: var(--body-text); margin-bottom: 22px; } /* air between the author and the lines under it */
.book-original { font-size: calc(var(--body-size) * 0.882); line-height: 1.55; }
.book-original-title { line-height: inherit; }
.book-translator { margin-top: 12px; }
.book-translator, .book-editor { font-size: calc(var(--body-size) * 0.882); line-height: 1.55; }
/* 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.6); line-height: 1.15; letter-spacing: normal; text-transform: none; margin: 0 0 14px; color: var(--menu); } /* 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, 1.4fr) minmax(0, 1fr); 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-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; }
.person-linkedin { display: inline-flex; vertical-align: -1px; margin-left: 10px; color: var(--logo); } /* 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.6); margin-top: 2em; }
.gh-content h3 { font-size: calc(var(--body-size) * 1.25); 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(--menu); } /* headings in any page's or post's body: the headings' sans, in the menu's 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.25); line-height: 1.15; color: var(--menu); } /* 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(--menu); } /* the chevron goes with its question (Ghost draws it in a faint grey that vanishes on our grounds) */
.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; }

/* 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(--frame-left); color: var(--body-text); /* starts 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; }
.site-footer-left a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer-sep { margin: 0 0.9em; opacity: 0.5; }

/* ---------- 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; --frame-right: 0px; --logotype-h: 96px; --splash-tr: clamp(150px, 24vw, 260px); --splash-bl: clamp(170px, 26vw, 280px); }
  /* 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: 60px; }
  .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; }
  .home-blurb .intro-text, .hero-mission { font-size: 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; }
}

/* ---------- 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: 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: 0; z-index: 1; overflow: auto; background: var(--bg); padding: calc(var(--header-h, 112px) + 20px) var(--gutter) 40px; }
  .frame-nav .nav { flex-direction: column; gap: 22px; padding: 22px 0 6px; border-top: var(--hair); }
  .frame-nav .nav a, .frame-nav .nav-group-btn { font-size: 24px; }
  .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: 16px 0 0 24px; gap: 16px; border: 0; background: none; text-align: left; }
  .frame-nav .nav-sub a { font-size: 20px; }
  .home-blurb .intro-text, .hero-mission { font-size: 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.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 with the browser's scroll snapping, or stepped with the splotch arrows either side of the
   language's name. The two columns and the vertical carousel stay for wider screens. */
.hcar { 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; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: var(--hair); }
  .hcar-label { flex: 1; text-align: center; min-height: 1.4em; } /* keeps its line when empty (the English) */
  /* A 34 × 30 splotch with a 44 × 44 tap area (Apple's and Google's minimum): the button is a transparent square and
     the splotch is drawn behind it (a clip-path on the button itself would also clip where it can be tapped). The
     negative margins keep the head's layout as it was with the 34 × 30 button. */
  .hcar-btn { width: 44px; height: 44px; margin: -7px -5px; flex: none; position: relative; isolation: isolate; background: none; clip-path: none; }
  .hcar-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 30px; margin: -15px 0 0 -17px; background: var(--logo); clip-path: var(--splotch); z-index: -1; }
  .hcar-btn svg { width: 14px; height: 14px; }
  .hcar-prev { transform: rotate(-100deg); } /* the up chevron turned to point left */
  .hcar-next { transform: rotate(80deg); }  /* and right */
  .hcar-track { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; transition: height 300ms ease; }
  .hcar-track::-webkit-scrollbar { display: none; }
  .hcar-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .hcar-slide .carousel-text { padding: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .hcar-track { transition: none; } }