/* Generated by tools/fetch-fonts.mjs - do not edit by hand.
 * Source Serif 4 and Source Sans 3, (c) Adobe, SIL Open Font License 1.1.
 * The same families the printed products are typeset in.
 * Licence text ships alongside the fonts at /fonts/OFL.txt
 */

/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-greek-italic.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-italic.woff2") format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-italic.woff2") format('woff2');
  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;
}

/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext.woff2") format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin.woff2") format('woff2');
  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;
}

/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-greek-italic.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext-italic.woff2") format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-italic.woff2") format('woff2');
  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;
}

/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext.woff2") format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin.woff2") format('woff2');
  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;
}

/* =============================================================================
   Reveri Art Studio

   The site is set in the same ink, paper and type as the things it sells. Every
   value below that looks arbitrary is lifted from the product files themselves:
   #12161F is the plate ground, #8FA3C4 is the figure line, and Source Serif 4 /
   Source Sans 3 are the two faces the posters and binder pages are typeset in.
   That is the whole idea -- the website and the artwork should read as one object,
   not as a shop front bolted onto unrelated work.

   What it is deliberately not: no gold, no gradients, no glassmorphism, no pill
   buttons, no drop shadows under everything, no centred uppercase eyebrow labels
   above every section. That set of moves is what the previous version had, and it
   is the house style of every generated landing page on the internet.

   Contents
     1  Tokens
     2  Reset and base
     3  Typography
     4  Layout primitives
     5  Rules, plates and section headers
     6  Buttons and links
     7  Masthead and navigation
     8  Footer
     9  Home
    10  Product pages
    11  Constellation explorer
    12  Size diagram
    13  Gallery
    14  Prose and articles
    15  Utilities
    16  Motion, contrast and print
   ========================================================================== */

/* -- 1  Tokens ------------------------------------------------------------ */

:root {
  /* Paper and ink, straight from the plates. */
  --paper: #faf9f6;
  --paper-tint: #f1efe9;
  --paper-deep: #e7e4db;
  --ink: #12161f;
  --ink-soft: #3f4552;
  /* Not lighter than this. At #6a707d the muted text measured 4.32:1 against
     --paper-tint, which fails WCAG AA for body copy; this is 5.09:1 on the tint
     and 5.53:1 on plain paper. Secondary text still has to be readable. */
  --ink-mute: #5f6572;

  /* The figure-line blue. Light enough that it is decoration on ink and never
     body text on paper, so a darkened cut carries links and accents instead. */
  --slate: #8fa3c4;
  --slate-deep: #2f4a73;
  --slate-wash: #eef1f6;

  --rule: rgba(18, 22, 31, 0.14);
  --rule-strong: rgba(18, 22, 31, 0.28);
  --rule-light: rgba(255, 255, 255, 0.14);

  /* Two states with real meaning on the buyer-guide lists. Both are AA on paper. */
  --yes: #1f6b3f;
  --no: #97331f;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* A fifth-based scale. Fluid between a 360px phone and a 1400px desktop, so
     nothing needs a font-size media query. */
  --step--1: clamp(0.83rem, 0.81rem + 0.09vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.14rem + 0.28vw, 1.38rem);
  --step-2: clamp(1.44rem, 1.33rem + 0.5vw, 1.75rem);
  --step-3: clamp(1.73rem, 1.55rem + 0.83vw, 2.22rem);
  --step-4: clamp(2.07rem, 1.78rem + 1.32vw, 2.81rem);
  --step-5: clamp(2.49rem, 2.03rem + 2.05vw, 3.58rem);
  --step-6: clamp(2.99rem, 2.29rem + 3.1vw, 4.54rem);

  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(4rem, 3rem + 5vw, 7rem);

  --shell: 72rem;
  --measure: 34rem;

  /* Squared, not rounded. A 2px radius reads as a cut edge; 999px reads as a
     software button, which is not what a paper studio should look like. */
  --radius: 2px;
  --radius-plate: 3px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --fast: 140ms var(--ease);
  --slow: 320ms var(--ease);

  color-scheme: light;
}

/* -- 2  Reset and base ---------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* No scroll-behavior: smooth here -- it is set below only for users who have
     not asked for reduced motion. Declaring it globally overrides that request. */
  tab-size: 4;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  /* Product shots are photographed on near-white paper; a hairline keeps them
     from bleeding into the page background. */
  background: var(--paper-tint);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

:target {
  scroll-margin-top: 6rem;
}

/* One focus treatment everywhere, on a colour that survives both grounds. */
:focus-visible {
  outline: 2px solid var(--slate-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

.plate-ground :focus-visible,
.footer :focus-visible {
  outline-color: var(--slate);
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* -- 3  Typography -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-6);
  /* The posters use Source Serif's Display optical size for titles. The variable
     opsz axis gives the site the same cut rather than approximating it. */
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.021em;
}

h2 {
  font-size: var(--step-4);
  font-variation-settings: "opsz" 40;
}

h3 {
  font-size: var(--step-2);
  font-variation-settings: "opsz" 20;
}

h4 {
  font-size: var(--step-1);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

strong {
  font-weight: 600;
}

/* Small caps metadata: the label style the plates use under their titles. */
.meta {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* The global `* { margin: 0 }` reset means these three, which almost always appear
   as a group, would otherwise set solid against each other. Spacing them here keeps
   every page that opens with the pattern consistent without repeating the rule. */
.meta + h1,
.meta + h2,
.meta + h3 {
  margin-block-start: 0.5rem;
}

h1 + .lede,
h2 + .lede {
  margin-block-start: var(--space-s);
}

.lede + p,
.lede + .downloads {
  margin-block-start: var(--space-m);
}

.ui {
  font-family: var(--font-sans);
}

/* Tabular figures wherever numbers sit in a column and must line up. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -- 4  Layout primitives ------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--space-2xl);
}

.section--tint {
  background: var(--paper-tint);
}

.section--ink {
  background: var(--ink);
  color: var(--paper);
}

.stack > * + * {
  margin-block-start: var(--flow, var(--space-s));
}

.stack--l {
  --flow: var(--space-l);
}

.stack--m {
  --flow: var(--space-m);
}

/* -- 5  Rules, plates and section headers --------------------------------- */

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
}

/*
  Section headers are flush left with a plate number, not centred with an
  uppercase gold eyebrow. The number is generated, so sections cannot fall out of
  sequence when one is added or removed.
*/
.plates {
  counter-reset: plate;
}

.plate-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-s) var(--space-m);
  padding-block-end: var(--space-s);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--space-xl);
}

.plate-head::before {
  counter-increment: plate;
  content: "Plate " counter(plate, upper-roman);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

.plate-head__title {
  grid-column: 1 / -1;
  font-size: var(--step-4);
  max-width: 22ch;
}

.plate-head__note {
  grid-column: 1 / -1;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.section--ink .plate-head {
  border-block-end-color: var(--rule-light);
}

.section--ink .plate-head::before,
.section--ink .plate-head__note {
  color: var(--slate);
}

/* -- 6  Buttons and links ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn--ink:hover {
  background: var(--slate-deep);
  border-color: var(--slate-deep);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--large {
  min-height: 3.1rem;
  padding: 0.8rem 1.6rem;
  font-size: var(--step-0);
}

.btn--block {
  width: 100%;
}

.plate-ground .btn--outline,
.section--ink .btn--outline {
  color: var(--paper);
  border-color: var(--rule-light);
}

.plate-ground .btn--outline:hover,
.section--ink .btn--outline:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.plate-ground .btn--ink,
.section--ink .btn--ink {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.plate-ground .btn--ink:hover,
.section--ink .btn--ink:hover {
  background: var(--slate);
  border-color: var(--slate);
  color: var(--ink);
}

/* Prose links: underlined, because colour alone is not a signal everyone gets. */
.link {
  color: var(--slate-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--fast);
}

.link:hover {
  text-decoration-thickness: 2px;
}

/* -- 7  Masthead and navigation ------------------------------------------- */

.skip {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform var(--fast);
}

.skip:focus {
  transform: none;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque, not translucent-with-blur. backdrop-filter costs a compositor layer
     on every scroll frame and the effect is the single clearest tell of the
     template this site used to look like. */
  background: var(--paper);
  border-block-end: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 4.5rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  min-width: 0;
  margin-inline-end: auto;
}

.wordmark__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ink);
}

.wordmark__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wordmark__name {
  font-size: 1.16rem;
  font-weight: 600;
  font-variation-settings: "opsz" 20;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.wordmark__sub {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

.masthead__nav {
  display: none;
}

.navlist {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  list-style: none;
  padding: 0;
}

.navlist__link {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  border-block-end: 1.5px solid transparent;
  white-space: nowrap;
  transition: color var(--fast), border-color var(--fast);
}

.navlist__link:hover {
  color: var(--ink);
}

.navlist__link[aria-current="page"] {
  color: var(--ink);
  border-block-end-color: var(--ink);
}

/* The free sheet is the one link worth pulling forward, and it is marked with a
   dot rather than a different colour on every page's copy of the markup. */
.navlist__link--free::before,
.nav-sheet__link--free::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline-end: 0.45em;
  border-radius: 50%;
  background: var(--slate-deep);
  vertical-align: 0.12em;
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.masthead__shop {
  display: none;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: var(--radius);
}

/* --- Mobile sheet --- */

.nav-sheet {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}

.nav-sheet::backdrop {
  background: rgba(18, 22, 31, 0.5);
}

.nav-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  border-block-end: 1px solid var(--rule);
}

.nav-sheet__title {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.nav-sheet__list {
  list-style: none;
  padding: var(--space-s) 0 var(--space-l);
  margin: 0;
}

.nav-sheet__link {
  display: block;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--rule);
  font-size: var(--step-1);
  text-decoration: none;
}

.nav-sheet__link[aria-current="page"] {
  font-weight: 600;
}

.nav-sheet__link[aria-current="page"]::after {
  content: "Current";
  float: inline-end;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-block-start: 0.5em;
}

@media (min-width: 62rem) {
  .masthead__nav,
  .masthead__shop {
    display: block;
  }
  .menu-btn {
    display: none;
  }
  .nav-sheet {
    display: none;
  }
}

/* -- 8  Footer ------------------------------------------------------------ */

.footer {
  background: var(--ink);
  color: #b9bfcc;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding-block: var(--space-xl) var(--space-m);
  margin-block-start: var(--space-2xl);
}

.footer__inner {
  display: grid;
  gap: var(--space-l);
  padding-block-end: var(--space-l);
}

.footer__brand {
  max-width: 30ch;
}

.footer__name {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--paper);
  margin-block-end: 0.4rem;
}

.footer__blurb {
  color: #98a0b0;
  line-height: 1.55;
}

.footer__heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
  margin-block-end: 0.85rem;
}

.footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.footer__list a {
  color: #b9bfcc;
  text-decoration: none;
  transition: color var(--fast);
}

.footer__list a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  justify-content: space-between;
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--rule-light);
  font-size: 0.8rem;
  color: #7f8798;
}

@media (min-width: 46rem) {
  .footer__inner {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

/* -- 9  Home -------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-2xl);
  border-block-end: 1px solid var(--rule);
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero__title {
  margin-block: 0.4rem var(--space-m);
  max-width: 15ch;
}

/* The one italic in the design, on the one phrase that is the actual claim. */
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--slate-deep);
}

.hero__lede {
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-block-start: var(--space-l);
}

/* Facts, set as a specimen table rather than a row of icon badges. */
.facts {
  margin-block-start: var(--space-xl);
  border-block-start: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.facts__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-s);
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--rule);
}

.facts__key {
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.74rem;
  padding-block-start: 0.15em;
}

.facts__val {
  color: var(--ink-soft);
}

.hero__figure {
  margin: 0;
}

.hero__figure img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius-plate);
}

.hero__caption {
  margin-block-start: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* --- Catalogue ------------------------------------------------------------ */

.catalogue {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--rule);
}

/*
  Products are a catalogue listing, not three floating cards with shadows. Rows
  share hairlines so it reads as one table rather than three unrelated objects.
*/
.entry {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-l);
  border-block-end: 1px solid var(--rule);
  align-items: start;
}

.entry__index {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.entry__title {
  font-size: var(--step-3);
  margin-block: 0.15rem 0.5rem;
}

.entry__title a {
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--slow);
}

.entry__title a:hover {
  background-size: 100% 1px;
}

.entry__body {
  color: var(--ink-soft);
  max-width: 52ch;
}

.entry__aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.entry__price {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 600;
  font-variation-settings: "opsz" 20;
}

.entry__terms {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.entry__figure {
  margin: 0;
  order: -1;
}

.entry__figure img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius-plate);
}

@media (min-width: 50rem) {
  .entry {
    grid-template-columns: 15rem 1fr 11rem;
    gap: var(--space-l);
    align-items: center;
  }
  .entry__figure {
    order: 0;
  }
  .entry__aside {
    align-items: flex-end;
    text-align: end;
  }
}

/* -- 10  Product pages ---------------------------------------------------- */

.product {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  align-items: start;
}

.product__price {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 600;
  font-variation-settings: "opsz" 30;
  margin-block: var(--space-s) 0.35rem;
}

/* "single sign" next to "$14" is a qualifier, not part of the figure, so it drops
   to running-text size instead of being set at the same display weight. */
.product__qual {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink-mute);
}

.product__terms {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.product__actions {
  margin-block-start: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

@media (min-width: 58rem) {
  .product {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .product__media {
    position: sticky;
    top: 6rem;
  }
}

/* Contents list: what is actually in the file, as a specimen table. */
.contents {
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-m);
  border-block-start: 1px solid var(--rule);
}

.contents li {
  display: grid;
  gap: 0.15rem 1rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--rule);
}

.contents b {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.contents span {
  color: var(--ink-soft);
  font-size: 0.96rem;
}

@media (min-width: 40rem) {
  .contents li {
    grid-template-columns: 13rem 1fr;
    align-items: baseline;
  }
}

/*
  The buyer guide. Kept from the old site because being plain about what a digital
  download is not is genuinely good for a shop with no reviews yet -- but set as a
  two-column ledger instead of green ticks against red crosses.
*/
.ledger {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-plate);
  overflow: hidden;
}

.ledger__col {
  padding: var(--space-m);
}

.ledger__col + .ledger__col {
  border-block-start: 1px solid var(--rule);
}

.ledger__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-block-end: var(--space-s);
  padding-block-end: 0.6rem;
  border-block-end: 1px solid var(--rule);
}

.ledger__col--yes .ledger__head {
  color: var(--yes);
}

.ledger__col--no .ledger__head {
  color: var(--no);
}

.ledger ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  font-size: 0.96rem;
  color: var(--ink-soft);
}

.ledger li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.55rem;
}

.ledger li::before {
  content: "—";
  color: var(--ink-mute);
  line-height: 1.5;
}

.ledger__col--yes li::before {
  content: "+";
  color: var(--yes);
  font-weight: 700;
}

.ledger__col--no li::before {
  content: "×";
  color: var(--no);
  font-weight: 700;
}

@media (min-width: 48rem) {
  .ledger {
    grid-template-columns: 1fr 1fr;
  }
  .ledger__col + .ledger__col {
    border-block-start: 0;
    border-inline-start: 1px solid var(--rule);
  }
}

/* -- 11  Constellation explorer ------------------------------------------- */

.plate-ground {
  background: var(--ink);
  color: var(--paper);
}

/*
  `minmax(0, 1fr)` rather than the implicit `auto`.

  A grid track sized `auto` takes its minimum from the content, and a grid item's
  `min-width` also defaults to `auto` -- so the twelve-button sign bar, which is far
  wider than a phone, refuses to shrink and pushes the whole document sideways. That
  is where the horizontal scroll on mobile came from: the bar is meant to scroll
  inside itself, but it can only do that once its column is allowed to be narrower
  than its contents.
*/
.explorer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}

.signbar {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-block-end: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--slate) transparent;
  /* Snap so a swipe lands on a sign rather than halfway between two. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.signbar__btn {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  color: #c3cad8;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}

.signbar__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
}

.signbar__btn[aria-selected="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.explorer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

.explorer__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  background: #0d1119;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-plate);
  overflow: hidden;
}

.explorer__plate svg {
  width: 100%;
  height: 100%;
}

/* Field stars are context, not content; the figure is what is being sold. */
.star-field {
  fill: #fff;
  opacity: 0.55;
}

.star-figure {
  fill: #fff;
}

.figure-line {
  stroke: var(--slate);
  stroke-width: 0.9;
  stroke-opacity: 0.75;
  stroke-linecap: round;
  fill: none;
}

.star-hit {
  fill: transparent;
  cursor: pointer;
}

.star-hit:hover + .star-figure,
.star-hit:focus-visible + .star-figure {
  fill: var(--slate);
}

.plate-title {
  fill: #fff;
  font-family: var(--font-serif);
  font-size: 5.2px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-anchor: middle;
}

.plate-sub {
  fill: var(--slate);
  font-family: var(--font-sans);
  font-size: 2.1px;
  letter-spacing: 0.7px;
  text-anchor: middle;
}

/* The readout. This is the part that makes the astronomical claim checkable
   instead of merely asserted. */
.readout {
  font-family: var(--font-sans);
}

.readout__name {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--paper);
  margin-block-end: 0.15rem;
}

.readout__latin {
  font-style: italic;
  color: var(--slate);
  margin-block-end: var(--space-m);
  font-family: var(--font-serif);
}

.readout__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.readout__table th,
.readout__table td {
  text-align: start;
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--rule-light);
  vertical-align: baseline;
}

.readout__table th {
  font-weight: 500;
  color: #8b93a5;
  width: 9.5rem;
}

.readout__table td {
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.readout__source {
  margin-block-start: var(--space-m);
  font-size: 0.78rem;
  line-height: 1.55;
  color: #8b93a5;
}

.readout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-start: var(--space-m);
}

/* Live region for the selected star, announced without moving focus. */
.readout__star {
  min-height: 3.2rem;
  margin-block-start: var(--space-s);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: #c3cad8;
  font-variant-numeric: tabular-nums;
}

.readout__star b {
  color: var(--paper);
  font-weight: 600;
}

@media (min-width: 54rem) {
  .explorer__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
  }
}

/* -- 12  Size diagram ----------------------------------------------------- */

/*
  Replaces a CSS drawing of a sofa that was captioned "3-Seater Sofa Scale
  Reference (78in Wide)" while not being drawn to scale in any dimension: 5x7
  rendered at 25 px/inch and 16x20 at 17 px/inch, so the diagram understated how
  much bigger the large print is. Here the rectangles are nested and sized from
  the real inch measurements, so the comparison is arithmetic rather than art
  direction.
*/
.sizes {
  display: grid;
  gap: var(--space-l);
}

.sizes__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius-plate);
  container-type: inline-size;
  overflow: hidden;
}

.sizes__frame {
  position: absolute;
  bottom: 8%;
  left: 50%;
  translate: -50% 0;
  border: 1px solid var(--rule-strong);
  background: rgba(18, 22, 31, 0.04);
  transition: width var(--slow), height var(--slow);
}

.sizes__frame--active {
  background: var(--ink);
  border-color: var(--ink);
  z-index: 2;
}

.sizes__frame--ref {
  background: transparent;
  border-style: dashed;
  z-index: 1;
}

.sizes__tag {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

.sizes__frame--active .sizes__tag {
  color: var(--ink);
}

.sizes__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sizes__btn {
  min-height: 2.75rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}

.sizes__btn:hover {
  background: var(--paper-deep);
}

.sizes__btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.sizes__note {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.55;
  min-height: 3.2rem;
}

.sizes__note b {
  color: var(--ink);
}

/* -- 13  Gallery ---------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--space-s);
}

.gallery__main {
  margin: 0;
}

.gallery__main img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius-plate);
}

.gallery__caption {
  margin-block-start: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

.gallery__thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block-end: 0.35rem;
  scrollbar-width: thin;
}

.gallery__thumb {
  position: relative;
  flex: 0 0 auto;
  /* The listing images are product-on-white, so a small thumbnail of one is mostly
     empty paper. Wide enough that the subject is still legible at a glance. */
  width: 6rem;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-tint);
  transition: border-color var(--fast), opacity var(--fast);
  opacity: 0.62;
}

.gallery__thumb:hover {
  opacity: 1;
}

.gallery__thumb[aria-pressed="true"] {
  border-color: var(--ink);
  border-width: 2px;
  opacity: 1;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- 14  Prose and articles ----------------------------------------------- */

.prose {
  max-width: var(--measure);
  font-size: var(--step-0);
  line-height: 1.72;
}

.prose > * + * {
  margin-block-start: 1.1em;
}

.prose h2 {
  font-size: var(--step-3);
  margin-block-start: 2.2em;
  margin-block-end: 0.1em;
}

.prose h3 {
  font-size: var(--step-1);
  margin-block-start: 1.8em;
  margin-block-end: 0.1em;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.3em;
  display: grid;
  gap: 0.5em;
}

.prose li::marker {
  color: var(--ink-mute);
}

.prose blockquote {
  border-inline-start: 2px solid var(--rule-strong);
  padding-inline-start: 1.2em;
  font-style: italic;
  color: var(--ink-soft);
}

.prose a {
  color: var(--slate-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.prose hr {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin-block: 2.4em;
}

.article-head {
  padding-block: var(--space-xl) var(--space-l);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--space-xl);
}

.article-head h1 {
  font-size: var(--step-5);
  max-width: 20ch;
  margin-block: 0.5rem;
}

.article-list {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--rule);
}

.article-list__item {
  padding-block: var(--space-l);
  border-block-end: 1px solid var(--rule);
}

.article-list__item h2 {
  font-size: var(--step-2);
  margin-block: 0.35rem 0.5rem;
  max-width: 26ch;
}

.article-list__item h2 a {
  text-decoration: none;
}

.article-list__item h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.article-list__item p {
  color: var(--ink-soft);
  max-width: 58ch;
}

/*
  A short list set at reading measure leaves half the section empty on a wide
  screen. Two columns keeps the line length comfortable and the block balanced;
  `break-inside` stops an item being split across the gap.
*/
.list-split {
  max-width: 52rem;
}

@media (min-width: 46rem) {
  .list-split {
    columns: 2;
    column-gap: var(--space-xl);
  }
  .list-split li {
    break-inside: avoid;
  }
}

/* Callout for the free download and the honesty notes. */
.note {
  border-inline-start: 2px solid var(--ink);
  padding: var(--space-s) 0 var(--space-s) var(--space-m);
  background: var(--paper-tint);
  font-size: 0.96rem;
  color: var(--ink-soft);
}

.note--free {
  border-inline-start-color: var(--slate-deep);
}

.note h2,
.note h3 {
  font-size: var(--step-1);
  color: var(--ink);
  margin-block-end: 0.35rem;
}

/* Download pairs on the free sheet page. */
.downloads {
  display: grid;
  gap: var(--space-m);
  margin-block: var(--space-l);
}

.download {
  border: 1px solid var(--rule);
  border-radius: var(--radius-plate);
  padding: var(--space-m);
}

.download h3 {
  font-size: var(--step-1);
  margin-block-end: 0.3rem;
}

.download p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-block-end: var(--space-s);
}

.download__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 44rem) {
  .downloads {
    grid-template-columns: 1fr 1fr;
  }
}

/*
  On a narrow screen a wrapped row of buttons stacks at each button's natural
  width, so "See the plates" and "Free emergency sheet" sit left-aligned at two
  different lengths and read as a ragged edge. Below the width where two can share
  a line, stack them to a single column instead.
*/
@media (max-width: 30rem) {
  .hero__actions,
  .product__actions,
  .readout__actions,
  .download__row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* -- 15  Utilities -------------------------------------------------------- */

/*
  Visually hidden, still announced.

  `position: absolute` resolves against the nearest positioned ancestor, so one of
  these inside a horizontally-scrolling strip whose ancestors are all static lands
  against the initial containing block -- out past the right edge of the document,
  where it silently adds horizontal scroll to the whole page. Anything that both
  scrolls and contains one of these needs `position: relative`; prefer an
  `aria-label` on the control instead, which needs no element at all.
*/
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-measure {
  max-width: var(--measure);
}

.u-mute {
  color: var(--ink-mute);
}

/* Shown only when the browser cannot run the explorer. */
.no-js-note {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--slate);
}

/* -- 16  Motion, contrast and print --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows High Contrast: our hairlines and background-colour states vanish, so
   restore structure with system colours and real borders. */
@media (forced-colors: active) {
  .btn,
  .sizes__btn,
  .signbar__btn,
  .gallery__thumb {
    border: 1px solid ButtonBorder;
  }
  .signbar__btn[aria-selected="true"],
  .sizes__btn[aria-pressed="true"],
  .gallery__thumb[aria-pressed="true"] {
    border-width: 3px;
  }
  .navlist__link[aria-current="page"] {
    border-block-end-color: LinkText;
  }
  .sizes__frame {
    forced-color-adjust: none;
  }
}

@media print {
  .masthead,
  .footer,
  .skip,
  .nav-sheet,
  .signbar,
  .sizes__controls,
  .gallery__thumbs {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .section,
  .hero {
    padding-block: 1rem;
  }
  /* A printed page cannot be clicked, so spell the destination out. */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }
}