/* The shop's one look, for the public site and the app alike: Bootstrap
   5.3.3 underneath (vendor/), the type, the icons and the tokens here.
   Every colour, radius and shadow the pages use is a token below; change
   the look here, never in a page. Fonts and icons are self-hosted: the
   policy allows no other origin. */

@font-face {
  font-family: "Reddit Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("vendor/reddit-sans-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;
}
@font-face {
  font-family: "Reddit Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("vendor/reddit-sans-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;
}
/* Alegreya, the book's own face, for headings and cover titles: only its
   700–800 weights, the ones the pages set it in, split by script as Reddit
   Sans is, so a page loads only the letters it shows (scripts/heading_font.py
   cuts them from render/fonts/alegreya.ttf). */
@font-face {
  font-family: "Alegreya"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("vendor/alegreya-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;
}
@font-face {
  font-family: "Alegreya"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("vendor/alegreya-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;
}
@font-face {
  font-family: "Alegreya"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("vendor/alegreya-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF, U+1F00-1FFF;
}
@font-face {
  font-family: "Alegreya"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("vendor/alegreya-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF,
    U+A640-A69F, U+FE2E-FE2F;
}
/* Georgia Bold set to Alegreya ExtraBold's width and line (measured over
   the site's headings by scripts/heading_font.py), so a heading keeps its
   place and its line breaks while Alegreya arrives. */
@font-face {
  font-family: "Alegreya Fallback"; font-style: normal; font-weight: 700 800;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 80.9%; ascent-override: 125.59%; descent-override: 42.65%; line-gap-override: 0%;
}
/* Only the icons in use (scripts/icons.py writes the font and its list). */
@font-face {
  font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 100 700; font-display: block;
  src: url("vendor/material-symbols-outlined.woff2") format("woff2");
}
/* A symbol the site draws (site.drawnIcons) is an svg the glyph's size. */
svg.material-symbols-outlined { width: 1em; height: 1em; flex-shrink: 0; }
.material-symbols-outlined {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle; user-select: none;
}
.material-symbols-outlined.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

:root {
  /* Turkos: as saturated as the leader's orange and on the opposite side of
     the wheel, so the warm clay pictures stand out against it. It is the
     mark's and the pictures' colour (icons, rules, rings, tints): 3.3:1 on
     the cream, enough for graphics, too little for text either way. */
  --primary-color: #0097a7;
  --primary-color-rgb: 0, 151, 167;
  --primary-light: #33b6c3;
  /* Its ink, the same hue darker: turquoise text and every fill white text
     sits on (buttons, the top bar, badges). Ink is 5.4:1 on the cream and
     5.7:1 under white, the fill's light end 4.6:1 under white, so both pass
     WCAG AA for text of any size. */
  --primary-ink: #00717d;
  --primary-ink-rgb: 0, 113, 125;
  --primary-ink-light: #008290;
  --primary-hover: #00636d;
  --primary-gradient: linear-gradient(-180deg, var(--primary-ink-light), var(--primary-ink));
  /* The deep shade of the same hue: headings and the one dark band. White
     and cream on it pass 7:1, which the bright turquoise never does. */
  --primary-deep: #0b5c66;
  --light-primary-color: #f2fafb;
  --primary-tint: #e3f3f5;
  --soft-primary-color: #cbe8eb;
  --primary-rule: #b5dde2;
  --background-color: #faf8f0;
  --surface-color: #fff;
  /* The printed book's ink (render/book.css), so the site reads as its pages. */
  --text-color: #2b2620;
  /* Headings speak in the book's own face, the one its covers are set in;
     the interface stays in Reddit Sans. */
  --heading-font: "Alegreya", "Alegreya Fallback", Georgia, serif;
  --muted-color: #636b72; /* 5.1:1 on the cream: body-size text */
  --border-color: #e6dfd3;
  --success-color: #20a165;
  --danger-color: #dc3545;
  --border-radius: var(--radius);
  --box-shadow: var(--shadow-md);
  --transition-speed: 0.3s;

  --bs-body-font-family: "Reddit Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--background-color);
  --bs-body-color: var(--text-color);
  --bs-body-line-height: 1.6;
  --bs-primary: var(--primary-ink);
  --bs-primary-rgb: var(--primary-ink-rgb);
  --bs-link-color: var(--primary-ink);
  --bs-link-color-rgb: var(--primary-ink-rgb);
  --bs-link-hover-color: var(--primary-hover);
  --bs-border-color: var(--border-color);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: var(--border-radius);
  --bs-success: var(--success-color);
  --bs-danger: var(--danger-color);
  --bs-focus-ring-color: rgba(var(--primary-color-rgb), 0.25);
  --primary-press: #00707b;
  --ink-soft: #4a4239;
  --faint-color: #857b70;
  --border-strong: #d3c9ba;
  --placeholder-color: #ede8df;
  --shade: 60 40 20;
  --shadow-sm: 0 1px 2px rgb(var(--shade) / 7%), 0 2px 6px rgb(var(--shade) / 6%);
  --shadow-md: 0 2px 4px rgb(var(--shade) / 6%), 0 8px 22px -8px rgb(var(--shade) / 20%);
  --shadow-lg: 0 4px 10px rgb(var(--shade) / 6%), 0 22px 44px -14px rgb(var(--shade) / 30%);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fs-4xl: 40px;
  --fs-5xl: 52px;
  --fs-6xl: 62px;
  --tone-peach: #ffd7ba;
  --tone-peach-edge: #d6b18f;
  --tone-sage: #d8e2dc;
  --tone-sage-edge: #b4beb8;
  --tone-rose: #fcd5ce;
  --tone-rose-edge: #dbb0ad;
  --tone-sand: #ece4db;
  --tone-sand-edge: #c5b8aa;
  --bs-secondary-color: var(--muted-color);
  --bs-secondary-rgb: 107, 98, 87;
  --bs-tertiary-color: rgb(107 98 87 / 50%);
  --bs-emphasis-color: var(--text-color);
}

body { font-family: var(--bs-body-font-family); background-color: var(--background-color); color: var(--text-color); line-height: 1.6; background-image: url("img/paper.png"); background-size: 256px 256px; }
h1, h2, h3, h4, .fw-heavy { font-weight: 800; }
h1, h2 { font-family: var(--heading-font); }
/* Headings break into even lines and running text leaves no word alone
   on its last line, as a typeset page does. */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }
::selection { background: rgb(var(--primary-color-rgb) / 22%); color: var(--text-color); }
/* Amounts line up in their columns. */
[class*="price"], .summary, .cart { font-variant-numeric: tabular-nums; }

.btn-primary {
  --bs-btn-bg: var(--primary-ink); --bs-btn-border-color: var(--primary-ink);
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary-ink); --bs-btn-disabled-border-color: var(--primary-ink);
  --bs-btn-focus-shadow-rgb: var(--primary-color-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary-ink); --bs-btn-border-color: var(--primary-ink);
  --bs-btn-hover-bg: var(--primary-ink); --bs-btn-hover-border-color: var(--primary-ink);
  --bs-btn-active-bg: var(--primary-ink); --bs-btn-active-border-color: var(--primary-ink);
}
.text-primary { color: var(--primary-ink) !important; }
.bg-light-primary { background-color: var(--light-primary-color) !important; }
.card { --bs-card-border-radius: var(--border-radius); --bs-card-border-color: var(--border-color); }
.shadow-soft { box-shadow: var(--box-shadow); }
.rounded-soft { border-radius: var(--border-radius); }