/* 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 (TestStylesUseTokens holds the colours:
   no stylesheet types a token's value or Bootstrap's own status colours).
   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;
  /* The ink's own grey, warm as the ink is: 5.6:1 on the cream, 6:1 on
     white, so body-size text of any panel passes. */
  --muted-color: #6b6257;
  --border-color: #e6dfd3;
  /* The two creams a panel lies in on the page: the warm one sets a band or
     a note apart (a form's section, an order's header), the light one is the
     inside of a field's panel. The book's own paper is the cover board's. */
  --surface-warm: #f8f0e2;
  --surface-cream: #fcf7f1;
  --book-paper: #f3eae0;
  /* Status. Each colour is the graphics' (icons, edges, dots, rings) and its
     ink is for text and for the fills white text sits on, 5:1 or better on
     white, the cream and its own tint, as turquoise's ink is. */
  --success-color: #20a165;
  --success-ink: #1a7f43;
  --danger-color: #dc3545;
  --danger-ink: #c0392b;
  --danger-tint: #fdecea;
  --warn-color: #e65100;
  --warn-ink: #b54300;
  --warn-tint: #fff3e0;
  /* A price cut: the struck-through price's new price and the sale badge. */
  --sale-color: #d0300a;
  --border-radius: var(--radius);
  --box-shadow: var(--shadow-md);

  --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%);
  /* A sheet lying on the paper (a section's card): a contact line and a
     long low shade under it, so the grain stopping at its edge reads as
     the edge of a sheet, not a hole cut in the page. */
  --shadow-sheet: 0 1px 2px rgb(var(--shade) / 5%), 0 14px 34px -22px 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; /* --muted-color's */
  --bs-tertiary-color: rgb(107 98 87 / 50%);
  --bs-emphasis-color: var(--text-color);
  /* The paper's grain, a background layer to put over a surface's own
     colour: the page wears it, and so does every band and panel that
     stands for the page itself, so the grain runs on across them instead
     of stopping at their edge. Its address is absolute, so the app's own
     stylesheets may use it too. */
  --paper: url("/site/img/paper.png") 0 0 / 256px 256px;
}

body { font-family: var(--bs-body-font-family); background: var(--paper), var(--background-color); color: var(--text-color); line-height: 1.6; }
/* Japanese: the Latin faces for Latin letters, then the reader's own
   system fonts for kana and kanji, a gothic for the text and a mincho for
   the headings as Japanese books set them (a Japanese web font weighs
   megabytes, and every Japanese phone and computer has good ones). A line
   breaks by Japanese rules, a heading between phrases where the browser
   knows them. */
:root:lang(ja) {
  --bs-body-font-family: "Reddit Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --heading-font: "Alegreya", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
}
:lang(ja) body { line-break: strict; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
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); }