/* Generated by @quire/marketing from @quire/tokens. Do not edit. */

:root {
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-reading: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display: 3rem;
  --text-display--line-height: 3.5rem;
  --text-display--font-weight: 500;
  --text-h1: 2.125rem;
  --text-h1--line-height: 2.625rem;
  --text-h1--font-weight: 500;
  --text-h2: 1.625rem;
  --text-h2--line-height: 2.125rem;
  --text-h2--font-weight: 500;
  --text-h3: 1.25rem;
  --text-h3--line-height: 1.75rem;
  --text-h3--font-weight: 600;
  --text-reading: 1.125rem;
  --text-reading--line-height: 1.875rem;
  --text-reading--font-weight: 400;
  --text-ui: 0.9375rem;
  --text-ui--line-height: 1.375rem;
  --text-ui--font-weight: 400;
  --text-ui-sm: 0.8125rem;
  --text-ui-sm--line-height: 1.125rem;
  --text-ui-sm--font-weight: 400;
  --text-label: 0.75rem;
  --text-label--line-height: 1rem;
  --text-label--font-weight: 600;
  --text-mono: 0.8125rem;
  --text-mono--line-height: 1.25rem;
  --text-mono--font-weight: 400;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter-phone: 16px;
  --gutter-tablet: 32px;
  --gutter-desktop: 48px;
  --measure-reading: 720px;
  --measure-admin: 1440px;
  --duration-press: 120ms;
  --duration-menu: 180ms;
  --duration-dialog: 240ms;
  --duration-page: 320ms;
  --motion-distance: 0.5rem;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Self-hosted variable fonts, SIL Open Font License. Each face carries its
   unicode-range, so a page downloads only the scripts it uses. */
@font-face {
  font-family: 'Newsreader Opsz';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Newsreader Opsz';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader Opsz';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Newsreader Opsz';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

:root {
  --gutter: var(--gutter-phone);
  --serif: 'Newsreader Opsz', 'Newsreader', 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hair: 1px solid var(--text-primary);
  --header-h: 4.25rem;
  --rail-pad: 0px;
  --dir: 1;
  /* What a centred 1400px column leaves at each side of a wider screen, so the header lines up with the page. */
  --edge: max(0px, calc((100vw - 1400px) / 2));
  --clip-hide: inset(0 100% 0 0);
  --ease-page: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html[dir='rtl'] { --dir: -1; --clip-hide: inset(0 0 0 100%); }

@media (min-width: 640px) { :root { --gutter: var(--gutter-tablet); } }
@media (min-width: 1024px) { :root { --gutter: var(--gutter-desktop); } }
@media (min-width: 1200px) { :root { --rail-pad: 6rem; } }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.1875rem;
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
main { display: block; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* The focus ring is Ink at 2px with an offset, on every surface the site has. */
:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }

.visually-hidden, .hp {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; inset-inline-start: var(--gutter); z-index: 80;
  padding: 0.6rem 1rem; background: var(--bg-page); color: var(--text-primary);
  border: var(--hair); font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
}
.skip-link:focus-visible { top: 0.75rem; }

.wrap { max-width: 1400px; margin-inline: auto; padding-inline: max(var(--gutter), var(--rail-pad)) var(--gutter); }

/* ---- type ---------------------------------------------------------------- */

.display {
  font-family: var(--serif);
  font-weight: 340;
  font-variation-settings: normal;
  letter-spacing: -0.03em;
  line-height: 0.94;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 320; }
.ch { will-change: font-weight; }

.eyebrow, .label, .plate-cap b, .footer-note, .legal-group h2 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-feature-settings: 'smcp', 'c2sc';
  letter-spacing: 0.12em;
  font-weight: 500;
}
.eyebrow { font-size: 1.125rem; color: var(--text-secondary); margin-block-end: 1.1rem; }

/* ---- header -------------------------------------------------------------- */

.site-header {
  position: relative; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
  padding-inline: calc(var(--edge) + max(var(--gutter), var(--rail-pad))) calc(var(--edge) + var(--gutter));
  background: var(--bg-page);
  border-block-end: var(--hair);
}
@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; min-height: var(--header-h); padding-block: 0; }
}
/* The header may dock from script; it still occupies the space it did. */
.site-header[data-dock] { position: sticky; top: 0; }

.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--serif); font-style: italic; font-weight: 440;
  font-size: 1.875rem; letter-spacing: -0.02em; line-height: 1;
  color: var(--text-primary); text-decoration: none;
}
.wordmark img { flex: none; width: 1.75rem; height: 1.75rem; }

.site-header nav { margin-inline-start: auto; }
.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; }
.nav-list a, .nav-menu summary {
  display: inline-block; padding-block: 0.4rem;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-primary); text-decoration: none;
  background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat;
  transition: background-size 320ms var(--ease-out);
  cursor: pointer;
}
html[dir='rtl'] .nav-list a, html[dir='rtl'] .nav-menu summary { background-position: 100% 100%; }
.nav-list a:hover, .nav-menu summary:hover { background-size: 100% 1px; }
.nav-list a[aria-current='page'], .nav-menu summary.is-current { background-size: 100% 1px; }
.nav-list a.button {
  padding: 0.55rem 1.1rem; background: transparent; color: var(--text-primary);
  border: var(--hair); font-size: 0.8125rem;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.nav-list a.button:hover { background: var(--text-primary); color: var(--bg-page); }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after {
  content: ''; width: 5px; height: 5px; border: solid currentcolor; border-width: 0 1px 1px 0;
  transform: translateY(-2px) rotate(45deg);
}
.nav-menu[open] summary::after { transform: translateY(1px) rotate(225deg); }
.nav-menu ul {
  position: absolute; z-index: 45; top: calc(100% + 0.6rem); inset-inline-start: 0; min-width: 15rem;
  padding: 0.5rem 1rem; background: var(--surface-raised); border: var(--hair);
}
.nav-menu li a { display: block; padding-block: 0.45rem; }
@media (max-width: 760px) {
  .nav-menu { position: static; }
  .nav-menu ul { inset-inline: var(--gutter); }
  .site-header nav { margin-inline-start: 0; width: 100%; }
  .nav-list { gap: 0.1rem 1.1rem; }
}

/* ---- rail: the numbered sections of the home page, at the start edge ----- */

.rail { display: none; }
@media (min-width: 1200px) {
  .rail { display: block; position: fixed; z-index: 30; inset-inline-start: 1.5rem; inset-block-start: 50%; transform: translateY(-50%); }
  .rail ol { display: grid; gap: 1.1rem; }
  .rail a {
    position: relative; display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums; color: var(--text-secondary); text-decoration: none;
  }
  .rail-n { min-width: 1.5rem; }
  .rail a::before {
    content: ''; order: 2; width: 0.9rem; height: 1px; background: currentcolor;
    transition: width 420ms var(--ease-out), background-color 200ms;
  }
  .rail-l {
    order: 3; position: absolute; inset-inline-start: 100%; margin-inline-start: 0.5rem; white-space: nowrap;
    padding: 0.2rem 0.6rem; background: var(--bg-page); color: var(--text-primary); border: var(--hair);
    font-family: var(--serif); font-variant-caps: all-small-caps; font-size: 0.9375rem; letter-spacing: 0.1em;
    clip-path: var(--clip-hide); transition: clip-path 380ms var(--ease-out);
  }
  .rail a:hover .rail-l, .rail a:focus-visible .rail-l { clip-path: inset(0); }
  .rail[data-away] { visibility: hidden; }
  .rail a:hover, .rail a:focus-visible { color: var(--text-primary); }
  .rail a[aria-current='true'] { color: var(--accent); }
  .rail a[aria-current='true']::before { width: 1.8rem; }
}

/* ---- progress ------------------------------------------------------------ */

.progress {
  position: fixed; z-index: 60; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
html[dir='rtl'] .progress { transform-origin: 100% 50%; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root block); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* ---- controls ------------------------------------------------------------ */

.button {
  display: inline-block; padding: 1rem 1.9rem; border: 1px solid var(--accent);
  background: var(--accent); color: var(--bg-page);
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 160ms var(--ease-out);
}
.button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bg-page); }
.button:active { transform: translateY(1px); }

.textlink {
  display: inline-flex; align-items: center; gap: 0.7rem; color: var(--text-primary);
  font-family: var(--serif); font-size: 1.25rem; font-style: italic; text-decoration: none;
}
.textlink span {
  background: linear-gradient(currentcolor, currentcolor) 0 100% / 100% 1px no-repeat; padding-block-end: 0.2em;
}
html[dir='rtl'] .textlink span { background-position: 100% 100%; }
.textlink:hover span { animation: underline-draw 520ms var(--ease-out); }
@keyframes underline-draw { from { background-size: 0 1px; } to { background-size: 100% 1px; } }

.arrow { width: 1.4rem; height: 0.7rem; flex: none; overflow: visible; transition: translate 300ms var(--ease-out); }
html[dir='rtl'] .arrow { transform: scaleX(-1); }
.textlink:hover .arrow, .row-link:hover .arrow, .index-row a:hover .arrow { translate: calc(0.3rem * var(--dir)) 0; }

/* ---- forms --------------------------------------------------------------- */

.order-form {
  align-self: start; padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--surface-raised);
  border: var(--hair); outline: 1px solid var(--text-primary); outline-offset: 5px; margin: 5px;
}
.waitlist-form { display: grid; gap: 1.5rem; }
.waitlist-form .field, .waitlist-form .consent, .waitlist-form .form-actions { margin: 0; max-width: none; }
.waitlist-form label, .waitlist-form legend { font-variant-caps: all-small-caps; font-feature-settings: 'smcp', 'c2sc'; letter-spacing: 0.1em; font-size: 1.125rem; font-weight: 500; }
.waitlist-form .optional { font-variant-caps: normal; letter-spacing: 0; color: var(--text-secondary); font-style: italic; }
.waitlist-form input[type='email'], .waitlist-form select {
  display: block; width: 100%; margin-block-start: 0.35rem; padding: 0.6rem 0; border: 0; border-block-end: 1px solid var(--text-primary); border-radius: 0;
  background: transparent; color: var(--text-primary); font-family: var(--serif); font-size: 1.375rem;
}
.waitlist-form input[type='email']:focus-visible, .waitlist-form select:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }
.waitlist-form input[type='radio'], .waitlist-form input[type='checkbox'] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.waitlist-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.waitlist-form .choice { display: block; padding-block: 0.3rem; font-variant-caps: normal; letter-spacing: 0; font-size: 1.0625rem; font-weight: 400; }
.waitlist-form .consent { display: flex; gap: 0.75rem; align-items: flex-start; }
.waitlist-form .consent label { font-variant-caps: normal; letter-spacing: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.4; }
.waitlist-form .consent a { color: var(--accent); }
.waitlist-form .consent input { flex: none; margin-block-start: 0.2rem; }
.waitlist-form .button { width: 100%; padding-block: 1.1rem; font-size: 1rem; }
.form-status { font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; }
.form-status:empty { display: none; }
/* The word Problem opens every error, so colour is never the only signal. */
.form-status[data-tone] { padding: 0.75rem 1rem; border-inline-start: 3px solid var(--success); background: var(--bg-page); }
.form-status[data-tone='problem'] { border-inline-start-color: var(--error); }
.waitlist-form button[aria-disabled='true'] { cursor: progress; }

/* ---- footer -------------------------------------------------------------- */

.site-footer { position: relative; border-block-start: 4px double var(--text-primary); background: var(--bg-page); overflow-x: clip; padding-block: clamp(3rem, 6vw, 5rem) 0; }
.footer-inner { display: grid; gap: 3rem; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 5fr 7fr; } }
.footer-pitch { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 340; max-width: 14ch; margin-block-end: 1.25rem; text-wrap: balance; }
.footer-note, .footer-contact { font-size: 1rem; color: var(--text-secondary); margin-block-end: 0.75rem; }
.footer-note { font-size: 1.0625rem; }
.footer-contact { font-family: var(--sans); font-size: 0.8125rem; }
.footer-contact a { margin-inline-end: 1rem; color: var(--text-primary); }
.footer-contact a[href^='mailto:'] { unicode-bidi: isolate; direction: ltr; }
.legal-group h2 { font-size: 1rem; color: var(--text-secondary); margin-block-end: 0.6rem; }
.footer-legal { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); font-family: var(--sans); font-size: 0.8125rem; }
.legal-group li { margin-block-end: 0.4rem; }
.legal-group a { text-decoration: none; background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat; transition: background-size 300ms var(--ease-out); }
html[dir='rtl'] .legal-group a { background-position: 100% 100%; }
.legal-group a:hover { background-size: 100% 1px; }
.motion-toggle, .lang-menu summary {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: var(--hair); background: transparent; color: var(--text-primary);
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500; cursor: pointer; list-style: none;
}
.motion-toggle:hover, .lang-menu summary:hover { background: var(--text-primary); color: var(--bg-page); }
.lang-menu { margin-block-end: 0.75rem; font-family: var(--sans); font-size: 0.8125rem; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ''; width: 5px; height: 5px; border: solid currentcolor; border-width: 0 1px 1px 0; transform: translateY(-2px) rotate(45deg); }
.lang-menu[open] summary::after { transform: translateY(1px) rotate(225deg); }
.lang-menu ul { margin-block-start: 0.75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.1rem 1rem; max-width: 40rem; }
.lang-menu a { display: inline-block; padding-block: 0.3rem; text-decoration: none; }
.lang-menu a[aria-current] { font-weight: 700; text-decoration: underline; }
.lang-menu a:hover { text-decoration: underline; }
.lang-current { margin-inline-start: 0.5rem; }
.footer-wordmark { margin-block-start: clamp(2rem, 5vw, 4rem); text-align: center; font-size: clamp(7rem, 27vw, 24rem); line-height: 1; letter-spacing: -0.05em; font-weight: 300; color: var(--text-primary); padding-block-end: 0.04em; pointer-events: none; }
.footer-wordmark em { font-style: italic; display: block; }

/* ---- cursor: a small oxblood ring that takes a label over what it can open ----- */
/* The ring is placed by a physical translate from the pointer, so it is anchored to the top left on purpose, in both directions. */

.cursor {
  position: fixed; z-index: 100; inset: 0 auto auto 0; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; display: grid; place-items: center; background: transparent;
  transition: width 320ms var(--ease-out), height 320ms var(--ease-out), margin 320ms var(--ease-out), background-color 240ms var(--ease-out);
  will-change: transform;
}
.cursor-label { font-family: var(--serif); font-variant-caps: all-small-caps; font-size: 0.9375rem; letter-spacing: 0.12em; color: var(--accent); clip-path: var(--clip-hide); transition: clip-path 320ms var(--ease-out); white-space: nowrap; }
.cursor.has-label { width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; background: var(--bg-page); }
.cursor.has-label .cursor-label { clip-path: inset(0); }
.cursor.is-down { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; }
html[data-cursor='on'] a, html[data-cursor='on'] button, html[data-cursor='on'] summary, html[data-cursor='on'] [data-cursor] { cursor: none; }

/* ---- hero ---------------------------------------------------------------- */

.hero { position: relative; overflow-x: clip; }
.hero-stage { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); padding-inline: max(var(--gutter), var(--rail-pad)) var(--gutter); max-width: 1400px; margin-inline: auto; }
.hero-grid { display: grid; gap: 2.5rem; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

h1.display { font-size: clamp(3.4rem, 17vw, 5.5rem); }
.standfirst { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.4; max-width: 27ch; margin-block-start: 1.5rem; font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-block-start: 1.5rem; }
.note { margin-block-start: 1.1rem; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); max-width: 38ch; }

.leaf-notes { margin-block-start: 1.75rem; border-block-start: var(--hair); align-self: stretch; max-width: 34rem; }
.leaf-note { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding-block: 0.8rem; border-block-end: 1px solid var(--rule-control); font-size: 1rem; line-height: 1.45; }
.leaf-n { font-style: italic; color: var(--accent); font-size: 1.125rem; font-variant-numeric: lining-nums; }
.leaf-body b { font-weight: 600; font-variant-caps: all-small-caps; font-feature-settings: 'smcp', 'c2sc'; letter-spacing: 0.08em; font-size: 1.0625em; margin-inline-end: 0.25em; }

.hero-notes { position: relative; align-self: stretch; }
.cue { display: none; }
.hero-right { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.hero-book { position: relative; min-width: 0; }
.book-flat { display: grid; place-items: center; }
.book-flat .eng { width: min(100%, 36rem); }
/* The canvas bleeds past its host on every side, so the soft shadow under the book is never cut at an edge. */
.book-canvas {
  --bleed: clamp(1.5rem, 4.5vw, 4.5rem);
  display: none; position: absolute; inset-block-start: calc(-1 * var(--bleed)); inset-inline-start: calc(-1 * var(--bleed));
  width: calc(100% + 2 * var(--bleed)); height: calc(100% + 2 * var(--bleed)); pointer-events: none; touch-action: pan-y;
}
/* In a right-to-left language the whole book is mirrored: the spine sits at the other side and the leaves turn the other way. */
html[dir='rtl'] .book-canvas { transform: scaleX(-1); }
.hero-meter { display: none; }

@media (min-width: 900px) {
  .hero-stage { padding-block: 3.5rem 4rem; }
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: stretch; min-height: min(40rem, 70vh); }
  .hero-copy { grid-column: 1 / span 6; grid-row: 1; }
  .hero-right { grid-column: 7 / -1; grid-row: 1; margin-inline-end: calc(-1 * var(--gutter)); }
  .hero-book { flex: 1; min-height: 0; display: grid; align-items: center; }
  .hero-notes { padding-inline-end: var(--gutter); }
  h1.display { font-size: min(7.4vw, 11.6vh, 8.5rem); line-height: 0.9; }
}
@media (min-width: 1100px) {
  .hero-copy { grid-column: 1 / span 5; }
  .hero-right { grid-column: 6 / -1; }
}

/* The pinned reel: only when the booklet is live (WebGL2, a fine pointer, a wide screen, motion on). */
html[data-book='live'] .hero { height: 520vh; }
html[data-book='live'] .hero-stage {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); padding-block: 2rem 4.25rem;
  display: flex; flex-direction: column;
}
html[data-book='live'] .hero-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
html[data-book='live'] .book-flat { visibility: hidden; position: absolute; inset: 0; }
html[data-book='live'] .book-canvas { display: block; }
html[data-book='live'] .leaf-notes { display: grid; border-block-end: var(--hair); min-height: 3.4rem; }
html[data-book='live'] .cue {
  display: flex; align-items: center; gap: 0.9rem; position: absolute; inset: 0; padding-inline-start: 0.1rem;
  font-style: italic; font-size: 1.0625rem; color: var(--text-secondary); clip-path: inset(0 0 0 0); transition: clip-path 760ms var(--ease-page);
}
html[data-book='live'] .cue i { display: block; width: 1px; height: 1.6rem; background: var(--accent); transform-origin: 50% 0; animation: cue-drop 2.2s ease-in-out infinite; }
@keyframes cue-drop { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); transform-origin: 50% 100%; } }
html[data-book='live'] .hero-notes[data-spread]:not([data-spread='0']) .cue { clip-path: var(--clip-hide); }
html[data-book='live'] .leaf-note { grid-area: 1 / 1; border-block-end: 0; clip-path: var(--clip-hide); transition: clip-path 760ms var(--ease-page); }
html[data-book='live'] .leaf-note.is-on { clip-path: inset(0 0 0 0); }
html[data-book='live'] .leaf-note:not(.is-on) { visibility: hidden; transition: clip-path 760ms var(--ease-page), visibility 0s 760ms; }
html[data-book='live'] .hero-meter {
  display: flex; align-items: center; gap: 1rem; position: absolute; inset-block-end: 0.9rem; inset-inline: max(var(--gutter), var(--rail-pad)) var(--gutter);
  font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.1em; font-size: 0.9375rem; color: var(--text-secondary);
}
html[data-book='live'] .meter-line { position: relative; flex: 1; height: 1px; background: var(--rule-control); }
html[data-book='live'] .meter-fill { position: absolute; inset: -1px 0; background: var(--accent); height: 2px; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
html[dir='rtl'][data-book='live'] .meter-fill { transform-origin: 100% 50%; }
html[data-book='live'] .meter-ticks { display: flex; gap: 1.5rem; }
html[data-book='live'] .meter-ticks i { font-style: normal; }
html[data-book='live'] .meter-ticks i.is-on { color: var(--accent); }

/* A laptop that is short as well as wide: the type steps down so the pinned stage holds copy, notes and book. */
@media (min-width: 900px) and (max-height: 800px) {
  html[data-book='live'] .hero-stage { padding-block: 1.25rem 3.75rem; }
  html[data-book='live'] .standfirst { margin-block-start: 1rem; font-size: 1.25rem; }
  html[data-book='live'] .hero-actions { margin-block-start: 1rem; }
  html[data-book='live'] .note { margin-block-start: 0.75rem; }
  html[data-book='live'] .eyebrow { margin-block-end: 0.6rem; }
  html[data-book='live'] .leaf-notes { margin-block-start: 1rem; }
}

/* ---- sections: the frame every numbered section shares ------------------- */

.sec { position: relative; overflow-x: clip; padding-block: clamp(5rem, 11vw, 10rem); border-block-start: var(--hair); }
.sec[data-tone='linen'] { background: var(--surface-sunken); }
.sec-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.num { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; }
.rule { display: block; height: 1px; background: var(--accent); transform-origin: 0 50%; }
html[dir='rtl'] .rule { transform-origin: 100% 50%; }
.label { font-size: 1.125rem; color: var(--text-primary); }

.grid { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; }
}

.sec h2.display { font-size: clamp(2.75rem, 7.4vw, 6.75rem); }
.lede { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; max-width: 33rem; margin-block-start: 2rem; }
.lede-soft { color: var(--text-secondary); margin-block-start: 0.75rem; font-size: 1.0625rem; }

.dropcap::first-letter {
  float: inline-start; font-size: 5.1em; line-height: 0.78; padding-block-start: 0.05em; padding-inline-end: 0.09em;
  color: var(--accent); font-weight: 400; font-style: normal;
}

.margin-note {
  position: relative; max-width: 17rem; margin-block-start: 2.25rem; padding-inline-start: 1rem; border-inline-start: var(--hair);
  font-style: italic; font-size: 1rem; line-height: 1.4; color: var(--text-secondary);
}
.margin-note .mark { position: absolute; inset-inline-start: -0.45rem; inset-block-start: -0.55rem; padding: 0 0.15rem; background: var(--bg-page); color: var(--accent); font-style: normal; font-size: 1.1rem; }

/* A leaf at the top of each numbered section that lifts away. Only where the
   motion layer sets data-turns: a fine pointer, a wide screen, motion on. On
   touch and narrow screens there is no leaf, so no empty sheet can ever sit
   over the text mid scroll. */
.turn { display: none; }
html[data-turns] .sec .turn {
  display: grid; place-items: center; position: absolute; z-index: 5; inset-inline: 0; inset-block-start: -1px; height: min(46vh, 30rem);
  background: var(--bg-page); border-block-end: var(--hair); transform-origin: 50% 0;
  transform: perspective(1700px) rotateX(calc(var(--turn, 0) * 1deg)); backface-visibility: hidden; pointer-events: none; will-change: transform;
}
html[data-turns] .sec .turn::before {
  content: ''; position: absolute; inset-block: 1.5rem 2.5rem; inset-inline: var(--gutter) max(var(--gutter), var(--rail-pad));
  border: 1px solid var(--rule-control); outline: 1px solid var(--rule-control); outline-offset: 6px;
}
html[data-turns] .sec .turn-n { font-style: italic; font-weight: 300; font-size: clamp(5rem, 12vw, 10rem); line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
html[data-turns] .sec .turn::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 12px;
  background: repeating-linear-gradient(135deg, var(--text-primary) 0 1px, transparent 1px 5px);
}

/* 01 ledger */
@media (min-width: 900px) {
  .sec-built .col-head { grid-column: 1 / span 5; }
  .sec-built .rows { grid-column: 7 / -1; margin-block-start: 1.5rem; }
}
.rows { border-block-start: var(--hair); }
.row { border-block-end: var(--hair); }
.row-link {
  display: grid; grid-template-columns: 1fr; grid-template-areas: 'art' 'text' 'go'; gap: 0.75rem; padding-block: 1.5rem; text-decoration: none; position: relative;
}
@media (min-width: 560px) {
  .row-link { grid-template-columns: 2rem 6.25rem 1fr auto; grid-template-areas: 'n art text go'; align-items: center; gap: 1.25rem; }
  .row-n { grid-area: n; }
}
.row-n { display: none; font-family: var(--sans); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
@media (min-width: 560px) { .row-n { display: block; } }
.row .eng { grid-area: art; width: 6.25rem; color: var(--text-primary); }
.row-text { grid-area: text; display: grid; gap: 0.2rem; }
.row-term { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -0.012em; font-weight: 420; background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat; transition: background-size 400ms var(--ease-out); justify-self: start; padding-block-end: 0.1em; }
html[dir='rtl'] .row-term { background-position: 100% 100%; }
.row-desc { font-size: 1.0625rem; line-height: 1.4; color: var(--text-secondary); max-width: 30rem; }
.row-go { grid-area: go; display: inline-flex; align-items: center; gap: 0.6rem; font-variant-caps: all-small-caps; letter-spacing: 0.1em; font-size: 1.0625rem; color: var(--text-primary); }
.row-link:hover .row-term, .row-link:focus-visible .row-term { background-size: 100% 1px; }
.row-link:hover .row-n { color: var(--accent); }

/* 02 brand */
@media (min-width: 900px) {
  .sec-brand .col-head { grid-column: 1 / span 5; }
  .sec-brand .plates { grid-column: 6 / -1; }
}
.items { margin-block-start: 2.5rem; border-block-start: 1px solid var(--rule-control); max-width: 30rem; }
.item { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: 0.85rem; border-block-end: 1px solid var(--rule-control); align-items: baseline; }
.item dt { font-variant-caps: all-small-caps; letter-spacing: 0.1em; font-size: 1.0625rem; display: flex; gap: 0.6rem; }
.item-n { font-style: italic; color: var(--accent); font-variant-caps: normal; letter-spacing: 0; min-width: 1.4rem; }
.item dd { font-size: 1.0625rem; line-height: 1.4; color: var(--text-secondary); }
.more { margin-block-start: 2.25rem; }

.plates { position: relative; display: grid; gap: 2.5rem; align-content: start; }
.plate-cap { margin-block-start: 0.75rem; font-size: 0.9375rem; line-height: 1.35; color: var(--text-secondary); font-style: italic; max-width: 26rem; }
.plate-cap b { font-style: normal; color: var(--text-primary); font-size: 1.0625rem; margin-inline-end: 0.35rem; }

.window { position: relative; aspect-ratio: 5 / 4; background: var(--surface-raised); border: var(--hair); overflow: hidden; }
.lh { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--surface-raised); }
.lh:nth-child(1) { z-index: 3; }
.lh:nth-child(2) { z-index: 2; }
.lh:nth-child(3) { z-index: 1; }
.lh-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; border-block-end: var(--hair); }
.lh-bar i { width: 0.5rem; height: 0.5rem; border: 1px solid var(--text-primary); border-radius: 50%; }
.lh-url { margin-inline-start: 0.75rem; flex: 1; padding: 0.25rem 0.75rem; border: 1px solid var(--rule-control); font-family: var(--sans); font-size: 0.75rem; color: var(--text-secondary); direction: ltr; unicode-bidi: isolate; }
.lh-sheet { display: grid; align-content: center; justify-items: start; gap: 0.75rem; padding: clamp(1.25rem, 4vw, 3rem); }
.lh-head { display: flex; align-items: center; gap: 1rem; }
.crest { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--accent); border-radius: 50%; outline: 1px solid var(--accent); outline-offset: 3px; font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--accent); }
.lh-name { font-size: clamp(1.5rem, 3vw, 2.25rem); font-style: italic; letter-spacing: -0.015em; line-height: 1.05; }
.lh-rule { width: 100%; height: 5px; border-block: 1px solid var(--text-primary); }
.lh-line { font-size: 1.0625rem; color: var(--text-secondary); }
.lh-field { width: min(100%, 17rem); height: 2.1rem; border: 1px solid var(--rule-control); }
.lh-signin { padding: 0.5rem 1.1rem; border: 1px solid var(--text-primary); font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; }
.lh-from { font-family: var(--sans); font-size: 0.75rem; color: var(--text-secondary); padding-block-start: 0.5rem; border-block-start: 1px solid var(--rule-control); width: 100%; }

.plate-shot { max-width: 30rem; justify-self: end; width: 100%; }
.shot-frame { padding: 0.6rem; background: var(--surface-raised); border: var(--hair); }
.shot-frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--rule-control); }
.plate-art { display: none; }
@media (min-width: 900px) {
  .plates { display: block; position: relative; aspect-ratio: 100 / 118; }
  .plate-window { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: 0; width: 80%; }
  .plate-shot { position: absolute; z-index: 2; inset-block-start: 45%; inset-inline-end: 0; width: 54%; max-width: none; }
  .plate-shot .shot-frame { box-shadow: 0 0 0 6px var(--bg-page); }
  .plate-art { display: block; position: absolute; inset-block-start: 0; inset-inline-end: 1%; width: 17%; transform: rotate(5deg); }
  .plate-window .plate-cap { max-width: 55%; }
  .plate-art .eng { width: 100%; }
}

/* 03 place */
@media (min-width: 900px) {
  .sec-place .col-head { grid-column: 1 / span 5; }
  .sec-place .spread { grid-column: 6 / -1; }
}
.spread { position: relative; padding-block-start: 5rem; }
.spread-art { position: absolute; inset-block-start: 0; inset-inline: 0; display: flex; justify-content: space-between; padding-inline: 8%; pointer-events: none; }
.spread-art .eng { width: min(30%, 9rem); }
.spread-pages { display: grid; grid-template-columns: 1fr; border: var(--hair); background: var(--surface-raised); position: relative; }
@media (min-width: 640px) {
  .spread-pages { grid-template-columns: 1fr 1fr; }
  .spread-pages::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 50%; width: 14px; margin-inline-start: -7px; background: repeating-linear-gradient(135deg, var(--text-primary) 0 1px, transparent 1px 4px); border-inline: 1px solid var(--text-primary); }
}
.spread-page { padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 14rem; }
.spread-page + .spread-page { border-block-start: var(--hair); }
@media (min-width: 640px) { .spread-page + .spread-page { border-block-start: 0; } }
.spread-page h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-style: italic; font-weight: 380; letter-spacing: -0.015em; line-height: 1.1; margin-block-end: 1.25rem; }
.spread-page li { position: relative; padding-inline-start: 1.1rem; margin-block-end: 0.7rem; font-size: 1.0625rem; line-height: 1.4; }
.spread-page li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.65em; width: 0.5rem; height: 1px; background: var(--accent); }

.moving { display: grid; gap: 2.5rem; margin-block-start: clamp(4rem, 8vw, 7rem); padding-block-start: 2.5rem; border-block-start: var(--hair); }
@media (min-width: 900px) { .moving { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; } .moving-text { grid-column: 1 / span 4; } .index { grid-column: 6 / -1; } }
.moving-text h3 { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 380; font-style: italic; line-height: 1.1; letter-spacing: -0.015em; }
.moving-text p { margin-block-start: 1rem; font-size: 1.0625rem; color: var(--text-secondary); max-width: 24rem; }
.moving-art { margin-block-start: 1.5rem; }
.moving-art .eng { width: 7.5rem; }
.index { border-block-start: var(--hair); }
.index-row { border-block-end: var(--hair); }
.index-row a { display: grid; grid-template-columns: 2.25rem auto 1fr auto; align-items: baseline; gap: 0.75rem; padding-block: 1.05rem; text-decoration: none; transition: padding-inline-start 360ms var(--ease-out); }
.index-n { font-style: italic; color: var(--accent); }
.index-name { font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -0.012em; line-height: 1.1; }
.index-dots { align-self: end; margin-block-end: 0.45em; border-block-end: 1px dotted var(--text-secondary); min-width: 1rem; }
.index-row a:hover { padding-inline-start: 0.9rem; }
.index-row a:hover .index-name { font-style: italic; }
.index-row a .arrow { align-self: center; }

/* 04 waitlist */
@media (min-width: 900px) {
  .sec-waitlist .col-head { grid-column: 1 / span 5; }
  .sec-waitlist .order-form { grid-column: 7 / -1; }
}
.seal { display: flex; align-items: center; gap: 1.5rem; margin-block-start: 2.5rem; max-width: 28rem; }
.seal-art { flex: none; width: clamp(7rem, 14vw, 10rem); }
.seal figcaption { font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--text-secondary); }

/* ---- page head ----------------------------------------------------------- */

.page-head { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.page-head .wrap { display: grid; gap: 2.5rem; }
.head-copy { min-width: 0; }
.page-head h1.display { font-size: clamp(3rem, 12vw, 4.75rem); overflow-wrap: break-word; }
.page-head .standfirst { max-width: 36rem; font-size: clamp(1.25rem, 2.2vw, 1.625rem); }

/* The plate: the engraving of the page, set on a ruled plate mark (a hairline
   and a finer one inside it, as a printer's plate leaves on the sheet). On a
   phone it follows the words; on a wide screen it stands at the end edge, as
   tall as the headline and the index together. */
.head-art { position: relative; width: min(100%, 16rem); aspect-ratio: 4 / 5; justify-self: start; }
.head-art::before, .head-art::after { content: ''; position: absolute; pointer-events: none; }
.head-art::before { inset: 0; border: var(--hair); }
.head-art::after { inset: 0.45rem; border: 1px solid var(--rule-control); }
.head-art .eng { position: absolute; inset: clamp(1.25rem, 2.4vw, 2.25rem); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.head-art .art-svg { width: 100%; height: 100%; }
.head-art .eng { transition: transform 700ms var(--ease-out); }
.head-art:hover .eng { transform: rotate(-1.2deg) scale(1.025); }

@media (min-width: 900px) {
  .page-head .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 0; }
  .head-copy { grid-column: 1 / span 8; grid-row: 1; }
  .page-head h1.display { font-size: clamp(3.75rem, 8.2vw, 7.5rem); line-height: 0.92; }
  .head-art { grid-column: 9 / -1; grid-row: 1 / span 2; width: auto; aspect-ratio: auto; min-height: 27rem; align-self: stretch; justify-self: stretch; }
  .page-index { grid-column: 1 / span 8; grid-row: 2; margin-block-start: 3.5rem; }
}

/* The offer of the pricing page: the seal and the one fact, set large and plain beside it. */
.offer { display: flex; align-items: center; gap: 1.5rem; margin-block-start: 2.25rem; max-width: 36rem; padding-block-start: 1.25rem; border-block-start: var(--hair); }
.offer .seal-art { width: clamp(5.5rem, 9vw, 7.5rem); animation: none; transition: transform 600ms var(--ease-out); }
.offer:hover .seal-art { transform: rotate(-7deg) scale(1.06); }
.offer .offer-text { margin: 0; max-width: 18em; font-family: var(--serif); font-style: italic; font-weight: 360; font-size: clamp(1.375rem, 2.3vw, 2rem); line-height: 1.18; letter-spacing: -0.012em; color: var(--text-primary); }

/* The in-page index of a long page: a small caps list of numbered links, ruled. */
.page-index { margin-block-start: 0.5rem; padding-block-start: 1.25rem; border-block-start: var(--hair); }
.page-index ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.1rem 2rem; }
.page-index a { display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.55rem; text-decoration: none; border-block-end: 1px solid var(--rule-control); }
.page-index .index-n { font-style: italic; color: var(--accent); min-width: 1.6rem; }
.page-index .index-name {
  font-size: 1.1875rem; letter-spacing: -0.005em; line-height: 1.2;
  background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat; transition: background-size 380ms var(--ease-out); padding-block-end: 0.1em;
}
html[dir='rtl'] .page-index .index-name { background-position: 100% 100%; }
.page-index a:hover .index-name, .page-index a:focus-visible .index-name { background-size: 100% 1px; }

/* ---- sections ------------------------------------------------------------ */

.sec[data-archetype] { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sec[data-archetype] h2.display { font-size: clamp(2.25rem, 5.4vw, 4.75rem); line-height: 0.98; overflow-wrap: break-word; }
.sec[data-archetype] .sec-head { margin-block-end: clamp(1.75rem, 3.5vw, 3rem); }
.sec[data-archetype] .num { font-size: clamp(2rem, 3.6vw, 3rem); }
/* A small engraving closes the rule, as a printer's ornament closes a line. */
.sec-head .sec-art { height: clamp(4.5rem, 8vw, 8rem); display: flex; align-items: center; }
.sec-head .sec-art .eng { height: 100%; width: auto; transition: transform 600ms var(--ease-out); transform-origin: 50% 60%; }
.sec-head .sec-art .art-svg { width: auto; height: 100%; max-width: 8rem; }
.sec:hover .sec-art .eng { transform: rotate(-3deg) scale(1.04); }
.sec[data-tone='linen'] { --cell-bg: var(--surface-sunken); }
/* A plate that stands in the column of words (a ledger, a form) or in the empty margin of a statement. */
.col-plate, .statement-plate { height: clamp(8.5rem, 13vw, 12rem); margin-block-start: 2.5rem; display: flex; }
.statement-plate { height: clamp(9rem, 17vw, 15rem); }
.col-plate .eng, .statement-plate .eng { height: 100%; width: auto; transform-origin: 50% 60%; transition: transform 700ms var(--ease-out); }
.col-plate .art-svg, .statement-plate .art-svg { height: 100%; width: auto; }
.col-plate:hover .eng, .statement-plate:hover .eng { transform: rotate(-2.5deg) scale(1.03); }

.col-head { min-width: 0; }
/* One column that can shrink: a wide table scrolls inside its frame and never widens the page. */
@media (max-width: 899px) { .sec[data-archetype] .grid { grid-template-columns: minmax(0, 1fr); } }
.col-head p, .statement-body p { max-width: 38rem; margin-block-start: 1.25rem; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; }
.col-head h2 + p, .statement-body p:first-child { margin-block-start: 1.75rem; }
.sec-cta { margin-block-start: 2rem; }

.col-head ul, .statement-body ul, .steps-notes ul { margin-block-start: 1.5rem; max-width: 38rem; }
.col-head li, .statement-body li, .steps-notes li { position: relative; padding-inline-start: 1.25rem; margin-block-end: 0.7rem; font-size: 1.0625rem; line-height: 1.5; }
.col-head li::before, .statement-body li::before, .steps-notes li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.75em; width: 0.55rem; height: 1px; background: var(--accent);
}
.link-row { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-block-start: 1.75rem; }

/* Marginalia: the caveat or the source of a section, set in the margin in italic
   behind a short rule and an Oxblood dagger, where a book would print it. */
.marginalia { position: relative; max-width: 18rem; margin-block-start: 2.25rem; padding-inline-start: 1rem; border-inline-start: var(--hair); }
.sec .marginalia p { max-width: none; margin: 0; font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--text-secondary); }
.marginalia::before {
  content: '\2020'; position: absolute; inset-inline-start: -0.7rem; inset-block-start: -1.45rem; padding: 0 0.25rem;
  background: var(--bg-page); color: var(--accent); font-style: normal; font-size: 2.3rem; line-height: 1;
}
.sec[data-tone='linen'] .marginalia::before { background: var(--surface-sunken); }

/* A pull quote: a sentence of the section, set again large. A number at its start is the numeral. */
.pull { margin-block-start: 2.5rem; padding-block-start: 1.25rem; border-block-start: var(--hair); max-width: 22rem; }
.sec .pull p { margin: 0; max-width: none; font-style: italic; font-weight: 340; font-size: clamp(1.625rem, 2.3vw, 2.125rem); line-height: 1.16; letter-spacing: -0.012em; }
.pull-fig { display: block; margin-block-end: 0.35rem; font-style: normal; font-weight: 300; font-size: clamp(4.5rem, 8vw, 7.5rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }

/* statement: one idea at display size, the body offset toward the end edge, the margin beside it */
@media (min-width: 900px) {
  .sec-statement .col-head { grid-column: 1 / span 9; }
  .sec-statement .statement-body { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .statement-main { grid-column: 5 / span 8; min-width: 0; }
  .statement-body .marginalia { grid-column: 1 / span 3; grid-row: 1; margin-block-start: 1.9rem; }
  .statement-body .pull { grid-column: 1 / span 4; grid-row: 1; margin-block-start: 0.5rem; }
  .statement-body .statement-plate { grid-column: 1 / span 3; grid-row: 1; margin-block-start: 0.5rem; }
}

/* split: text at the start, the evidence at the end; the words hold still while a tall column of evidence passes */
@media (min-width: 900px) {
  .sec-split .col-head { grid-column: 1 / span 5; align-self: start; position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
  .sec-split .split-aside { grid-column: 6 / -1; min-width: 0; }
  .sec-split.sec-spread .col-head { grid-column: 1 / -1; position: static; }
  .sec-split.sec-spread .split-aside { grid-column: 1 / -1; }
}
.split-aside > * + * { margin-block-start: 2rem; }
.split-aside .pull { margin-block-start: 3rem; max-width: 28rem; }

.product-shot { margin: 0; }
.product-shot .shot-frame { padding: 0.6rem; background: var(--surface-raised); border: var(--hair); }
.product-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--rule-control); }
.product-shot figcaption { margin-block-start: 0.75rem; font-size: 0.9375rem; line-height: 1.35; color: var(--text-secondary); font-style: italic; max-width: 32rem; }

/* "Who should pick which": two facing pages with a hatched spine, one spread for all five comparisons. */
.spread2 { position: relative; }
.spread2-art { display: none; }
.spread2-pages { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface-raised); border: var(--hair); }
.spread2-page { padding: clamp(1.5rem, 3.4vw, 3rem); min-width: 0; }
.spread2-page + .spread2-page { border-block-start: var(--hair); }
.spread2-page h3 { padding-block-end: 1rem; border-block-end: var(--hair); font-size: clamp(1.875rem, 3vw, 2.75rem); font-style: italic; font-weight: 340; letter-spacing: -0.015em; line-height: 1.08; overflow-wrap: break-word; }
.spread2-page ol { counter-reset: pick; }
.spread2-page li { counter-increment: pick; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.5rem; padding-block: 1rem; border-block-end: 1px solid var(--rule-control); font-size: 1.0625rem; line-height: 1.5; }
.spread2-page li:last-child { border-block-end: 0; }
.spread2-page li::before { content: counter(pick, lower-roman); font-style: italic; font-size: 1.125rem; color: var(--accent); }
@media (min-width: 640px) {
  .spread2 { padding-block-start: 9.25rem; }
  .spread2-art { display: flex; justify-content: center; position: absolute; inset-block-start: 0; inset-inline: 0; height: 9.4rem; pointer-events: none; }
  .spread2-art .eng { height: 100%; width: auto; transform-origin: 50% 0; transition: transform 700ms var(--ease-out); }
  .spread2-art .art-svg { width: auto; height: 100%; }
  .spread2:hover .spread2-art .eng { transform: rotate(-3deg); }
  .spread2-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spread2-pages::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 50%; width: 14px; margin-inline-start: -7px; background: repeating-linear-gradient(135deg, var(--text-primary) 0 1px, transparent 1px 4px); border-inline: 1px solid var(--text-primary); }
  .spread2-page + .spread2-page { border-block-start: 0; }
  .spread2-page:first-child { padding-inline-end: calc(clamp(1.5rem, 3.4vw, 3rem) + 0.9rem); }
  .spread2-page:last-child { padding-inline-start: calc(clamp(1.5rem, 3.4vw, 3rem) + 0.9rem); }
}

/* ledger: a term and its plain description, in ruled rows */
@media (min-width: 900px) {
  .sec-ledger .col-head { grid-column: 1 / span 4; align-self: start; position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
  .sec-ledger .ledger-body { grid-column: 5 / -1; min-width: 0; }
}
.ledger-rows { border-block-start: var(--hair); }
.ledger-row { display: grid; gap: 0.3rem 2rem; padding-block: 1.25rem; border-block-end: 1px solid var(--text-primary); }
.ledger-row dt { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.012em; font-weight: 420; }
.ledger-row dt a { text-decoration: none; background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat; transition: background-size 400ms var(--ease-out); padding-block-end: 0.1em; }
html[dir='rtl'] .ledger-row dt a { background-position: 100% 100%; }
.ledger-row dt a:hover, .ledger-row dt a:focus-visible { background-size: 100% 1px; }
.ledger-row dd { font-size: 1.0625rem; line-height: 1.5; color: var(--text-secondary); max-width: 36rem; }
@media (min-width: 700px) { .ledger-row { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; } }
.ledger-body .product-shot { margin-block-start: 2.5rem; }

/* steps and compare-table: the words span the start, the evidence the full measure */
@media (min-width: 900px) {
  .sec-steps .col-head, .sec-compare-table .col-head { grid-column: 1 / span 8; }
}

/* steps: three numbered columns, each opened by an italic Oxblood numeral */
.steps-list { display: grid; gap: 2.5rem; margin-block-start: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; } }
.step { border-block-start: var(--hair); padding-block-start: 1rem; }
.step-number { display: block; font-style: italic; font-weight: 300; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; color: var(--accent); }
.step h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 420; letter-spacing: -0.015em; line-height: 1.1; margin-block: 0.75rem 0.6rem; }
.step p { font-size: 1.0625rem; line-height: 1.5; color: var(--text-secondary); max-width: 26rem; }
.steps-notes { margin-block-start: 2.5rem; }
@media (min-width: 900px) { .steps-notes { padding-inline-start: calc((100% - 5rem) / 3 + 2.5rem); } }

/* tables: ruled on Paper, the head in small caps, the first column held at the start edge as the table scrolls */
.table-wrap { overflow-x: auto; margin-block-start: 2rem; border-block: var(--hair); }
table { width: 100%; min-width: 36rem; border-collapse: separate; border-spacing: 0; font-family: var(--sans); font-size: 0.875rem; line-height: 1.45; }
th, td { text-align: start; vertical-align: top; padding: 0.85rem 1.1rem; border-block-end: 1px solid var(--rule-control); }
thead th { font-family: var(--serif); font-variant-caps: all-small-caps; font-feature-settings: 'smcp', 'c2sc'; letter-spacing: 0.1em; font-weight: 500; font-size: 1.0625rem; color: var(--text-primary); border-block-end: var(--hair); white-space: nowrap; }
tbody th { font-weight: 600; }
th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--cell-bg, var(--bg-page)); border-inline-end: 1px solid var(--rule-control); }
tbody tr:last-child > * { border-block-end: 0; }
td + td { border-inline-start: 1px solid var(--rule-control); }
.sec-compare-table .table-wrap { margin-block-start: 2.5rem; }
.sec-compare-table th:first-child { width: 11rem; }
.source { display: block; margin-block-start: 0.5rem; color: var(--text-secondary); font-size: 0.8125rem; }
.source a { color: var(--text-primary); }
.table-note { max-width: 40rem; margin-block-start: 1.25rem; padding-inline-start: 1rem; border-inline-start: var(--hair); font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--text-secondary); }
.table-wrap:focus-visible { outline-offset: 2px; }

/* The priced tables are ledgers: a double rule under the head, an ink rule under each line, the figures set large. */
.table-plans table, .table-matrix table { border-block-end: 0; }
.table-plans thead th, .table-matrix thead th { border-block-end: 4px double var(--text-primary); }
.table-plans tbody tr > *, .table-matrix tbody tr > * { border-block-end: 1px solid var(--text-primary); }
.table-plans tbody tr:last-child > *, .table-matrix tbody tr:last-child > * { border-block-end: 0; }
.table-plans table { min-width: 46rem; }
.table-plans td, .table-plans tbody th { vertical-align: baseline; padding-block: 1.1rem; padding-inline: 0.9rem; hyphens: manual; }
.table-plans tbody th { white-space: nowrap; }
.table-plans tbody th { font-family: var(--serif); font-weight: 420; font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.012em; line-height: 1.1; }
.table-plans .fig { font-family: var(--serif); font-weight: 380; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.table-plans .unit { color: var(--text-secondary); font-size: 0.8125rem; white-space: nowrap; }
.table-matrix tbody th { font-weight: 500; font-size: 0.9375rem; }
.table-matrix td { white-space: nowrap; }
.table-matrix td::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-inline-end: 0.6rem; border: 1px solid var(--rule-control); background: transparent; }
.table-matrix td.is-yes::before { border-color: var(--text-primary); background: var(--text-primary); }
.table-matrix td.is-no { color: var(--text-secondary); }
.table-matrix td:not(.is-yes):not(.is-no)::before { display: none; }

/* form: the words at the start, the order form at the end */
@media (min-width: 900px) {
  .sec-form .col-head { grid-column: 1 / span 5; }
  .sec-form .order-form { grid-column: 7 / -1; }
}

/* closing: the last word of an interior page */
.sec-closing { padding-block: clamp(4rem, 9vw, 8rem); }
.sec-closing h2.display { font-size: clamp(2.75rem, 7.4vw, 6.5rem); }
.closing-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .closing-grid { grid-template-columns: 7fr 5fr; column-gap: 2rem; align-items: end; } }
.closing-body p { max-width: 30rem; font-size: 1.1875rem; }
.closing-body .sec-cta { margin-block-start: 1.75rem; }

.eng { display: block; color: var(--text-primary); }
.art-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The engravings carry named parts (ids are scoped per page, so match the end of the id). */
[id$='-quill'] { transform-box: fill-box; transform-origin: 40% 100%; animation: quill-write 6s ease-in-out infinite; }
@keyframes quill-write {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  18% { transform: rotate(-2.6deg) translateY(3px); }
  36% { transform: rotate(1.8deg) translateY(0); }
  54% { transform: rotate(-1.4deg) translateY(2px); }
  72% { transform: rotate(0.8deg) translateY(0); }
}
.eng:hover [id$='-quill'] { animation-duration: 1.8s; }
[id$='-ribbon'] { transform-box: fill-box; transform-origin: 50% 0; animation: ribbon-sway 6.5s ease-in-out infinite; }
@keyframes ribbon-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
[id$='-crest'] { transform-box: fill-box; transform-origin: 50% 50%; animation: crest-glow 5s ease-in-out infinite; }
@keyframes crest-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
[id$='-lens'] { transform-box: fill-box; transform-origin: 50% 80%; animation: lens-sweep 8s ease-in-out infinite; }
@keyframes lens-sweep { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-2.5%, 1.5%) rotate(-3deg); } }
.eng:hover [id$='-lens'] { transform: translate(-6%, 4%) rotate(-8deg); animation: none; transition: transform 500ms var(--ease-out); }
[id$='-leaf-1'], [id$='-leaf-2'], [id$='-leaf-3'] { transform-box: fill-box; transform-origin: 0 100%; animation: leaf-lift 7s ease-in-out infinite; }
[id$='-leaf-2'] { animation-delay: -2.3s; }
[id$='-leaf-3'] { animation-delay: -4.6s; }
@keyframes leaf-lift { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-2.2deg); } }
.eng:hover [id$='-leaf-1'], .eng:hover [id$='-leaf-2'], .eng:hover [id$='-leaf-3'] { animation-duration: 2.4s; }
.row .eng, .art-hand, .art-compass, .art-magnifier, .art-seal, .art-letterhead, .art-hero { transition: transform 600ms var(--ease-out); transform-origin: 50% 60%; }
.row-link:hover .eng { transform: rotate(-4deg) scale(1.06); }
.art-magnifier:hover { transform: translate(0.4rem, -0.3rem) rotate(-8deg); }
.art-hero:hover { transform: rotate(-1.5deg) scale(1.02); }

/* The plates of the interior pages: loops by art, each from its own pivot. */
.head-art .eng[data-art='compass'] .art-svg, .sec-art .eng[data-art='compass'] .art-svg, .spread2-art .eng[data-art='compass'] .art-svg, .col-plate .eng[data-art='compass'] .art-svg, .statement-plate .eng[data-art='compass'] .art-svg { transform-origin: 50% 3%; animation: compass-swing 7s ease-in-out infinite; }
@keyframes compass-swing { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.head-art .eng[data-art='laurel'] .art-svg, .sec-art .eng[data-art='laurel'] .art-svg, .spread2-art .eng[data-art='laurel'] .art-svg, .col-plate .eng[data-art='laurel'] .art-svg, .statement-plate .eng[data-art='laurel'] .art-svg { transform-origin: 50% 100%; animation: laurel-sway 6.5s ease-in-out infinite; }
@keyframes laurel-sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
.head-art .eng[data-art='hand'] .art-svg, .sec-art .eng[data-art='hand'] .art-svg, .spread2-art .eng[data-art='hand'] .art-svg, .col-plate .eng[data-art='hand'] .art-svg, .statement-plate .eng[data-art='hand'] .art-svg { transform-origin: 70% 100%; animation: hand-write 5s ease-in-out infinite; }
@keyframes hand-write { 0%, 100% { transform: rotate(0deg) translate(0, 0); } 20% { transform: rotate(-1.2deg) translate(-0.8%, 0.6%); } 45% { transform: rotate(0.9deg) translate(0.5%, 0); } 70% { transform: rotate(-0.7deg) translate(-0.5%, 0.5%); } }
.head-art .eng[data-art='booklet'] .art-svg, .sec-art .eng[data-art='booklet'] .art-svg, .spread2-art .eng[data-art='booklet'] .art-svg, .col-plate .eng[data-art='booklet'] .art-svg, .statement-plate .eng[data-art='booklet'] .art-svg { transform-origin: 50% 100%; animation: book-breathe 7s ease-in-out infinite; }
.head-art .eng[data-art='mortarboard'] .art-svg, .sec-art .eng[data-art='mortarboard'] .art-svg, .spread2-art .eng[data-art='mortarboard'] .art-svg, .col-plate .eng[data-art='mortarboard'] .art-svg, .statement-plate .eng[data-art='mortarboard'] .art-svg { transform-origin: 50% 30%; animation: cap-tilt 8s ease-in-out infinite; }
@keyframes cap-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.head-art .eng[data-art='ledger'] .ox, .sec-art .eng[data-art='ledger'] .ox, .spread2-art .eng[data-art='ledger'] .ox, .col-plate .eng[data-art='ledger'] .ox, .statement-plate .eng[data-art='ledger'] .ox { transform-box: fill-box; transform-origin: 50% 0; animation: ribbon-sway 6.5s ease-in-out infinite; }

/* ---- loops: CSS only, so they run with no script ------------------------- */

.lh { animation: letterhead-cycle 15s infinite both; animation-delay: calc(var(--n) * 5s); }
@keyframes letterhead-cycle {
  0%   { z-index: 3; clip-path: inset(0 100% 0 0); }
  7%   { z-index: 3; clip-path: inset(0 0 0 0); }
  33.3% { z-index: 3; clip-path: inset(0 0 0 0); }
  33.4% { z-index: 2; clip-path: inset(0 0 0 0); }
  66.6% { z-index: 2; clip-path: inset(0 0 0 0); }
  66.7% { z-index: 1; clip-path: inset(0 0 0 0); }
  100% { z-index: 1; clip-path: inset(0 0 0 0); }
}
html[dir='rtl'] .lh { animation-name: letterhead-cycle-rtl; }
@keyframes letterhead-cycle-rtl {
  0%   { z-index: 3; clip-path: inset(0 0 0 100%); }
  7%   { z-index: 3; clip-path: inset(0 0 0 0); }
  33.3% { z-index: 3; clip-path: inset(0 0 0 0); }
  33.4% { z-index: 2; clip-path: inset(0 0 0 0); }
  66.6% { z-index: 2; clip-path: inset(0 0 0 0); }
  66.7% { z-index: 1; clip-path: inset(0 0 0 0); }
  100% { z-index: 1; clip-path: inset(0 0 0 0); }
}
.window:hover .lh { animation-play-state: paused; }
.seal-art { animation: seal-turn 26s linear infinite; transform-style: preserve-3d; }
@keyframes seal-turn { from { transform: perspective(900px) rotateY(0deg); } to { transform: perspective(900px) rotateY(360deg); } }
.seal:hover .seal-art { animation-duration: 9s; }
.seal-art .ox { animation: ox-pulse 4.5s ease-in-out infinite; }
@keyframes ox-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
.art-hero .art-svg { animation: book-breathe 7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes book-breathe { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-0.5rem) rotate(0.4deg); } }

/* ---- pending state: the wipes hold the first paint ----------------------- */

html[data-fx='pending'] :is(.wipe) {
  clip-path: inset(-0.2em 100% -0.3em -0.1em);
  animation: release 0.01s 3s forwards;
}
html[data-fx='pending'][dir='rtl'] :is(.wipe) { clip-path: inset(-0.2em -0.1em -0.3em 100%); }
@keyframes release { to { clip-path: none; } }
/* The plate of an interior page is printed down the sheet by the motion layer, so it holds the first paint too. */
html[data-fx='pending'] .head-art .art-svg { clip-path: inset(0 0 100% 0); animation: release 0.01s 3s forwards; }
/* Its plate mark is ruled in from the start edge as the plate prints. */
html[data-fx='on'] .head-art::before, html[data-fx='on'] .head-art::after { animation: plate-frame 1.6s var(--ease-page) both; }
@keyframes plate-frame { from { clip-path: var(--clip-hide); } to { clip-path: inset(0 0 0 0); } }

/* ---- still: reduced motion, by media query and by the switch -------------- */

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) :is(.lh, .seal-art, .seal-art .ox, .art-hero .art-svg, [id$='-quill'], [id$='-ribbon'], [id$='-crest'], [id$='-lens'], [id$='-leaf-1'], [id$='-leaf-2'], [id$='-leaf-3'], .head-art .eng[data-art='compass'] .art-svg, .head-art .eng[data-art='laurel'] .art-svg, .head-art .eng[data-art='hand'] .art-svg, .head-art .eng[data-art='booklet'] .art-svg, .head-art .eng[data-art='mortarboard'] .art-svg, .sec-art .eng[data-art='compass'] .art-svg, .sec-art .eng[data-art='laurel'] .art-svg, .sec-art .eng[data-art='hand'] .art-svg, .sec-art .eng[data-art='booklet'] .art-svg, .sec-art .eng[data-art='mortarboard'] .art-svg, .spread2-art .eng[data-art='compass'] .art-svg, .spread2-art .eng[data-art='laurel'] .art-svg, .spread2-art .eng[data-art='hand'] .art-svg, .spread2-art .eng[data-art='booklet'] .art-svg, .spread2-art .eng[data-art='mortarboard'] .art-svg, .col-plate .eng[data-art='compass'] .art-svg, .col-plate .eng[data-art='laurel'] .art-svg, .col-plate .eng[data-art='hand'] .art-svg, .col-plate .eng[data-art='booklet'] .art-svg, .col-plate .eng[data-art='mortarboard'] .art-svg, .statement-plate .eng[data-art='compass'] .art-svg, .statement-plate .eng[data-art='laurel'] .art-svg, .statement-plate .eng[data-art='hand'] .art-svg, .statement-plate .eng[data-art='booklet'] .art-svg, .statement-plate .eng[data-art='mortarboard'] .art-svg, .head-art .eng[data-art='ledger'] .ox, .sec-art .eng[data-art='ledger'] .ox, .spread2-art .eng[data-art='ledger'] .ox, .col-plate .eng[data-art='ledger'] .ox, .statement-plate .eng[data-art='ledger'] .ox) { animation: none !important; }
  html:not([data-motion]) .lh:not(:first-child) { display: none; }
  html:not([data-motion]) .head-art::before, html:not([data-motion]) .head-art::after { animation: none !important; }
  html:not([data-motion]) * { transition-duration: 0s !important; }
  html:not([data-motion]) .progress { animation: none !important; display: none; }
}
html[data-motion='off'] .cue i { animation: none !important; }
html[data-motion='off'] :is(.lh, .seal-art, .seal-art .ox, .art-hero .art-svg, [id$='-quill'], [id$='-ribbon'], [id$='-crest'], [id$='-lens'], [id$='-leaf-1'], [id$='-leaf-2'], [id$='-leaf-3'], .head-art .eng[data-art='compass'] .art-svg, .head-art .eng[data-art='laurel'] .art-svg, .head-art .eng[data-art='hand'] .art-svg, .head-art .eng[data-art='booklet'] .art-svg, .head-art .eng[data-art='mortarboard'] .art-svg, .sec-art .eng[data-art='compass'] .art-svg, .sec-art .eng[data-art='laurel'] .art-svg, .sec-art .eng[data-art='hand'] .art-svg, .sec-art .eng[data-art='booklet'] .art-svg, .sec-art .eng[data-art='mortarboard'] .art-svg, .spread2-art .eng[data-art='compass'] .art-svg, .spread2-art .eng[data-art='laurel'] .art-svg, .spread2-art .eng[data-art='hand'] .art-svg, .spread2-art .eng[data-art='booklet'] .art-svg, .spread2-art .eng[data-art='mortarboard'] .art-svg, .col-plate .eng[data-art='compass'] .art-svg, .col-plate .eng[data-art='laurel'] .art-svg, .col-plate .eng[data-art='hand'] .art-svg, .col-plate .eng[data-art='booklet'] .art-svg, .col-plate .eng[data-art='mortarboard'] .art-svg, .statement-plate .eng[data-art='compass'] .art-svg, .statement-plate .eng[data-art='laurel'] .art-svg, .statement-plate .eng[data-art='hand'] .art-svg, .statement-plate .eng[data-art='booklet'] .art-svg, .statement-plate .eng[data-art='mortarboard'] .art-svg, .head-art .eng[data-art='ledger'] .ox, .sec-art .eng[data-art='ledger'] .ox, .spread2-art .eng[data-art='ledger'] .ox, .col-plate .eng[data-art='ledger'] .ox, .statement-plate .eng[data-art='ledger'] .ox) { animation: none !important; }
html[data-motion='off'] .lh:not(:first-child) { display: none; }
html[data-motion='off'] .head-art::before, html[data-motion='off'] .head-art::after { animation: none !important; }
html[data-motion='off'] .head-art .art-svg { clip-path: none !important; animation: none !important; }
html[data-motion='off'] * { transition-duration: 0s !important; scroll-behavior: auto !important; }
html[data-motion='off'] .progress { animation: none !important; display: none; }
html[data-motion='off'] .wipe { clip-path: none !important; animation: none !important; }

/* Per-language type. See languageCss() in styles/language.ts. */
:lang(ar) {
  --serif: 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', 'Simplified Arabic', 'Times New Roman', serif;
  --sans: 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
}
:lang(fa) {
  --serif: 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', 'Simplified Arabic', 'Times New Roman', serif;
  --sans: 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
}
:lang(ur) {
  --serif: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Noto Naskh Arabic', 'Geeza Pro', 'Times New Roman', serif;
  --sans: 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
}
:lang(he) {
  --serif: 'Noto Serif Hebrew', David, 'Times New Roman', 'Arial Hebrew', serif;
  --sans: 'Segoe UI', 'Arial Hebrew', 'Noto Sans Hebrew', Arial, sans-serif;
}
:lang(hi) {
  --serif: 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', Mangal, serif;
  --sans: 'Nirmala UI', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Noto Sans Devanagari', Mangal, sans-serif;
}
:lang(ja) {
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'MS PMincho', serif;
  --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
}
:lang(ko) {
  --serif: 'Apple Myungjo', Batang, 'Noto Serif KR', 'Noto Serif CJK KR', serif;
  --sans: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
}
:lang(zh) {
  --serif: 'Songti SC', STSong, SimSun, 'Noto Serif SC', 'Source Han Serif SC', serif;
  --sans: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
}

/* These scripts join, stack or carry marks that tracking and capitals break.
   Letter-spacing pulls Arabic letters apart and ruins the joins. Uppercase and
   small caps do not exist in these scripts. Italics are a Latin habit: CJK and
   Arabic fonts synthesise a slant that smears them. Important, because the
   tracking is set by rules of higher specificity. */
html:is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) *,
:is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) {
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
}

/* A drop cap is a Latin habit too: the first letter of a joined or stacked
   script does not stand alone, so it is set as the rest of the line. */
html:is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) .dropcap::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; }

/* Taller lines: Arabic and Devanagari carry marks above and below the line, and
   Urdu's Nastaliq hangs further than either. The display sizes set a line
   height under 1 for Latin, which would clip them. */
html:is(:lang(ar), :lang(fa), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) body { line-height: 1.85; }
html:is(:lang(ar), :lang(fa), :lang(hi), :lang(ja), :lang(ko), :lang(zh), :lang(he)) :is(.display, h3, .step-number, .index-name, .row-term, .lh-name) { line-height: 1.3 !important; }
html:is(:lang(ar), :lang(fa), :lang(hi), :lang(ja), :lang(ko), :lang(zh), :lang(he)) .standfirst { line-height: 1.85; }
html:lang(ur) body { line-height: 2.5; }
html:lang(ur) :is(.display, h3, .step-number, .index-name, .row-term, .lh-name) { line-height: 1.9 !important; }
html:lang(ur) .standfirst { line-height: 2.2 !important; }
html:is(:lang(ar), :lang(fa), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh), :lang(ur)) :is(.note, .row-desc, .plate-cap, .lh-from, .footer-contact, .source) { line-height: 1.9; }
html:lang(ur) :is(.note, .row-desc, .plate-cap, .lh-from, .footer-contact, .source) { line-height: 2.4; }
:is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) .step-number, :is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) .num { font-variant-numeric: normal; }

/* Longer words fit. German, Finnish and Dutch compounds and long Russian words
   are wider than a phone, and a display headline of one such word would run past
   the screen edge. break-word breaks a word that cannot fit as a last resort,
   and hyphens: auto (which needs the lang attribute, which every page has)
   breaks at a syllable first. English stays unhyphenated: it reads as an
   editorial choice there and not as a fix. */
h1, h2, h3, p, li, dd, dt, th, td, summary, .button { overflow-wrap: break-word; }
html:not(:lang(en)) :is(h1, h2, h3, p, li, dd, dt, th, td) { hyphens: auto; }

/* Display sizes were drawn for English. The languages with the longest words
   take a smaller step on a phone so a compound still fits on a line or two. */
@media (max-width: 639px) {
  html:is(:lang(de), :lang(fi), :lang(nl), :lang(sv), :lang(ru), :lang(pl), :lang(tr), :lang(id)) :is(h1.display, .sec h2.display) { font-size: clamp(2rem, 9.5vw, 3.1rem); }
  html:is(:lang(de), :lang(fi), :lang(nl), :lang(sv), :lang(ru), :lang(pl), :lang(tr), :lang(id)) .step h3 { font-size: 1.5rem; }
}

/* Right-to-left. The layout is written in logical properties and grid columns
   (which follow the writing direction), so it mirrors by itself. Pictures with a
   direction of their own (arrows, the rule's growth edge, the booklet) are
   mirrored where they are defined. The e-mail address stays left to right, which
   is how it is read. */
.footer-contact a[href^='mailto:'] { unicode-bidi: isolate; direction: ltr; }