/* Spellbound, PrintBound's theme: a storybook's dusk sky lit by moonlight
   gold, over warm parchment for reading. Light is the page: parchment under
   cream cards, written in a blue-black ink, with moonflower indigo for a link
   and what is lit. Night is the same roles turned for the dusk sky (the hero
   and its kin, site.css): moonlight for the words, gold for what is lit. spellbound.md
   has the design's reasons.

   A theme has more roles than this palette has paints, so roles share them:
   indigo is a link, what is lit, something to know and a moment; gold ink is
   a number, what is under way and who; coral a fault and what needs
   watching. */

/* Fraunces draws the headings and Newsreader the words. Both are variable,
   one file a subset, served beside this sheet. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/fraunces-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: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-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;
}

:root {
  color-scheme: light;
  --gap: 1.3rem;
  --radius: 16px;
  --measure: 68ch;
  --shadow: 0 2px 6px rgba(13, 19, 48, .08), 0 18px 40px rgba(13, 19, 48, .12);

  --font: 'Newsreader', Georgia, 'Times New Roman', serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --size: 1.075rem;
  --small: .94rem;
  --scale: 1.26;

  /* The paints, named for what they look like. */
  --night-900: #0d1330; /* deepest midnight */
  --night-800: #131a3c; /* a dusk panel */
  --night-600: #2b3768; /* a lifted edge on night */
  --parchment: #f6f0e4;
  --parchment-2: #ece2cf;
  --cream: #fdfaf2;
  --ink: #1c2033;
  --ink-soft: #54586b;
  --moon: #f5f1e7;
  --moon-soft: rgba(245, 241, 231, .74);
  --moon-faint: rgba(245, 241, 231, .55);
  --gold: #ecc079; /* moonlight gold */
  --gold-bright: #f6d79a; /* a firefly */
  --gold-ink: #8a5a16; /* gold that reads on parchment */
  --indigo: #3a3f8f; /* moonflower indigo */
  --indigo-lift: #565cc0;
  --moonflower: #8ea4ec;
  --coral-ink: #b5482a; /* the red boots, as ink */
  --rule: #ddd0b8;
  --rule-night: rgba(245, 241, 231, .16);

  --pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-sm: 0 1px 2px rgba(13, 19, 48, .06), 0 4px 12px rgba(13, 19, 48, .06);
  --shadow-lg: 0 8px 20px rgba(13, 19, 48, .12), 0 40px 80px rgba(13, 19, 48, .22);
  --glow: 0 0 0 1px rgba(236, 192, 121, .35), 0 8px 30px rgba(236, 192, 121, .28);

  /* The roles. */
  --bg: var(--parchment);
  --surface: var(--parchment-2);
  --card: var(--cream);
  --border: var(--rule);
  --border2: var(--rule);

  --text: var(--ink);
  --muted: var(--ink-soft);
  --dim: #8b8ea0;

  --accent: var(--indigo);
  --link: var(--indigo);
  --heading: var(--ink);

  --info: var(--indigo);
  --active: var(--gold-ink);
  --positive: #2f6b4f;
  --negative: var(--coral-ink);
  --caution: var(--coral-ink);
  --special: var(--indigo-lift);

  --number: var(--gold-ink);
  --literal: var(--coral-ink);
  --time: var(--indigo);
  --who: var(--gold-ink);

  --keyword: var(--coral-ink);
  --string: #2f6b4f;
  --fn: var(--indigo);
  --type: var(--gold-ink);
  --attr: var(--ink-soft);

  --hue-0: var(--indigo);
  --hue-1: var(--gold-ink);
  --hue-2: var(--coral-ink);
  --hue-3: #2f6b4f;
  --hue-4: var(--indigo-lift);
  --hue-5: var(--ink-soft);
}

/* What every theme derives the same way: half its gap, a faint wash of its
   text, and the touch-target floor, which grows under a coarse pointer (fat
   fingers get fat targets, and only there).

   And the type every part reads, which a theme may set: --size for what a
   thing says, --small for the line that describes it, and nothing smaller.
   Headings climb from --size by one ratio, --scale, a step each: --h3, --h2,
   --h1. Every heading reads them, prose or part, so a page's h1 is the same
   size wherever it is drawn.
   Text comes in three inks. --text is what a thing says; --muted is what
   describes it (a key, a heading over a column, a fact, a stamp, an id, a
   count), and reads on every floor; --dim is only for what is not there (a
   nil, a ghost, a placeholder, a disabled step). The mono face is for what a
   person would copy or type (an id, a sha, code, a raw stored value), never
   for a label, a moment said the human way, or a count. A part that steps
   back is muted, small or both; never mono to look quiet, and never dim.
   And the width of what sits beside a page (a chat, what an agent gets):
   --side, never narrower than --side-min. */
:where(:root) {
  --half-gap: calc(var(--gap) / 2);
  --soft: color-mix(in srgb, var(--text) 6%, transparent);
  --tap: 0px;
  --size: 14px;
  --small: 12px;
  --scale: 1.2;
  --h3: calc(var(--size) * var(--scale));
  --h2: calc(var(--h3) * var(--scale));
  --h1: calc(var(--h2) * var(--scale));
  --side: 26rem;
  --side-min: 18rem;
}
@media (pointer: coarse) {
  :where(:root) {
    --tap: 2.5rem;
  }
}

/* The shared surface paint; a skin supplies its own values. */
:where(:root) {
  --edge-width: 1px;
  --edge-color: var(--border2);
  --edge-filter: none;
  --raised-shadow: var(--shadow);
  --raised-hatch: none;
  --raised-lift: 0px;
  --press-wash: var(--soft);
  --press-wash-weight: 100%;
  --press-shift: none;
  --press-down: none;
  --hover: var(--soft);
  --well: var(--surface);
  --hollow: none;
}

/* The document's defaults: what an element looks like before any component
   says otherwise. Everything here is :where(), zero specificity, so any
   component rule wins. What every theme derives (the half gap, the type
   scale, the touch floor) is derived.css, dressed with the theme whatever
   the skin. */

/* Border-box everywhere: a width is the box you see. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(body) {
  margin: 0;
  font: var(--size)/1.5 var(--font);
  background: var(--bg);
  color: var(--text);
}

/* Anchors wear the theme's link colour, visited or not: one look for a
   link, whatever part it is in. */
:where(a) {
  color: var(--link);
}

/* A control is pressed, not read: clicking or tapping one never selects its
   words. */
:where(button, summary, label, select, [role='button'], [role='tab'], [role='menuitem'], .Button) {
  -webkit-user-select: none;
  user-select: none;
}

/* Where the keyboard is: vim's cursor (@yaks/ux/keys marks the item it
   stands on) and whatever a key gave the focus wear the theme's accent ring,
   plain to see in every theme. A part that rings its own focus says so and
   wins. */
:where([data-cursor], :focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Prose, wherever it lands: documents, comments and messages all speak the
   same HTML (marked, GFM). */
:where(p, ul, ol, pre, blockquote) {
  margin: 0 0 var(--gap);
}
:where(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
  max-width: var(--measure);
}
:where(h1, h2, h3, h4, h5, h6) {
  margin: var(--gap) 0 var(--half-gap);
  line-height: 1.25;
}
:where(h1) {
  font-size: var(--h1);
}
:where(h2) {
  font-size: var(--h2);
}
:where(h3) {
  font-size: var(--h3);
}
:where(h4, h5, h6) {
  font-size: var(--size);
}
:where(small) {
  font-size: var(--small);
}
:where(p, ul, ol, pre, blockquote, table, h1, h2, h3):first-child,
:where(h4, h5, h6):first-child {
  margin-top: 0;
}
:where(p, ul, ol, pre, blockquote, table, h1, h2, h3):last-child,
:where(h4, h5, h6):last-child {
  margin-bottom: 0;
}
:where(code, pre, kbd) {
  font-family: var(--mono);
}
:where(code) {
  background: var(--soft);
  padding: 0 3px;
  border-radius: calc(var(--radius) / 2);
}
:where(pre code) {
  display: block;
  padding: var(--half-gap);
  overflow: auto;
}
:where(table) {
  border-collapse: collapse;
  margin: 0.5em 0;
  font-size: inherit;
}
:where(th, td) {
  border: 1px solid var(--border2);
  padding: 2px 8px;
  text-align: left;
}
:where(th) {
  background: var(--soft);
}
:where(blockquote) {
  padding-left: var(--half-gap);
  border-left: 2px solid var(--border2);
  color: var(--muted);
}

/* Syntax, as highlight.js names it. */
:where(.hljs-keyword, .hljs-selector-tag) {
  color: var(--keyword);
}
:where(.hljs-number) {
  color: var(--number);
}
:where(.hljs-literal) {
  color: var(--literal);
}
:where(.hljs-string) {
  color: var(--string);
}
:where(.hljs-title) {
  color: var(--fn);
}
:where(.hljs-section) {
  color: var(--heading);
  font-weight: 700;
}
:where(.hljs-built_in, .hljs-type) {
  color: var(--type);
}
:where(.hljs-attr, .hljs-variable) {
  color: var(--attr);
}
:where(.hljs-addition) {
  color: var(--positive);
}
:where(.hljs-comment, .hljs-meta) {
  color: var(--muted);
}
:where(.hljs-comment) {
  font-style: italic;
}
:where(.hljs-deletion) {
  color: var(--negative);
}

/* A textarea is as tall as what is typed in it, up to most of the window,
   where it starts to scroll. */
:where(textarea) {
  field-sizing: content;
  max-block-size: 60vh;
}

/* In-place editing: the same node and the same look, plus a caret and a
   seam around the text. */
[contenteditable='plaintext-only'] {
  user-select: text;
  display: inline-block; /* one rectangle, so the outline hugs the edit */
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  caret-color: var(--accent);
  cursor: text;
  white-space: pre-wrap; /* a multiline source keeps its newlines */
}

/* Always-visible scrollbars: thin, square, two-tone. Setting
   scrollbar-width or scrollbar-color would make Chrome ignore these and draw
   its auto-hiding overlay bars instead. */
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: var(--surface);
}
*::-webkit-scrollbar-thumb {
  background: var(--border2);
  border: 1px solid var(--bg); /* a seam of floor around the thumb */
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Shared paint. Existing class names are aliases for string-rendered pages;
   new parts compose Surface. Skins change tokens, never this list of parts. */
:where(.Surface, .Surface_Raised, .Surface_Press, .Card, .Button, .Menu, .Menu_Summary, .Empty, .Drop_Zone, a.Chip) {
  --pencil: initial;
  --pencil-style: initial;
  position: relative;
}
:where(.Surface, .Surface_Raised, .Surface_Press, .Card, .Button, .Menu, .Menu_Summary, .Empty, .Drop_Zone, a.Chip)::after {
  content: var(--surface-outline, none);
  position: absolute;
  inset: -1px;
  border: var(--edge-width) var(--pencil-style, solid) var(--pencil,
    var(--edge-color));
  border-radius: inherit;
  filter: var(--edge-filter);
  pointer-events: none;
}
:is(.Surface, .Surface_Raised, .Surface_Press, .Card, .Button, .Menu)::after {
  content: '';
}
:is(.Surface, .Surface_Raised, .Surface_Press) {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font: inherit;
}
:is(.Surface_Raised, .Surface_Press, .Menu, .Menu_Summary, .Button, .Card-button) {
  --lift: var(--raised-lift);
}
:is(.Surface_Raised, .Surface_Press) {
  box-shadow: var(--raised-shadow);
}
:is(.Surface_Raised, .Surface_Press, .Menu, .Menu_Summary, .Button, .Card-button)::before {
  content: '';
  position: absolute;
  inset: calc(var(--lift) - 1px) calc(-1px - var(--lift))
    calc(-1px - var(--lift)) calc(var(--lift) - 1px);
  border-radius: inherit;
  background: var(--raised-hatch);
  clip-path: polygon(calc(100% - var(--lift)) 0, 100% 0, 100% 100%, 0 100%,
    0 calc(100% - var(--lift)), calc(100% - var(--lift)) calc(100% -
    var(--lift)));
  pointer-events: none;
}
:is(.Surface_Press) {
  cursor: pointer;
}
:where(.Surface_Press, .Button, .Card-button, .Menu_Summary):hover:not(:disabled, [aria-pressed='true']) {
  --lift: var(--raised-hover-lift, var(--raised-lift));
  transform: var(--press-shift);
  background: color-mix(in srgb, var(--button-fill, var(--card)),
    var(--press-wash) var(--press-wash-weight));
}
:where(.Surface_Press, .Button, .Card-button, .Menu_Summary):active:not(:disabled),
:is(.Surface_Press, .Button)[aria-pressed='true'],
:is(.Menu_Fold)[open] > :is(.Menu_Summary) {
  --lift: var(--raised-down-lift, var(--raised-lift));
  transform: var(--press-down);
}
:is(.Surface_Press, .Button):disabled {
  --lift: 0px;
  opacity: .55;
  cursor: not-allowed;
}
:where(.Surface_Well, .Field) {
  border: var(--edge-width) solid var(--edge-color);
  border-radius: var(--radius);
  background: var(--well);
  box-shadow: var(--hollow);
  color: var(--text);
  font: inherit;
  filter: var(--edge-filter);
}
:where(.Surface_Well, .Field):focus-visible {
  outline: 0;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), var(--hollow);
}

.Skip {
  position: absolute;
  top: -5rem;
  left: 1rem;
  padding: .6rem 1rem;
  background: var(--card);
  z-index: 1;
}
.Skip:focus {
  top: 1rem;
}

/* A press: a small bordered word in the accent. The variants re-point its
   colour and its border, never its size. */
.Button {
  --ink: var(--accent);
  --line: var(--border2);
  --pencil: var(--line);
  --raised-shadow: none;
  font: inherit;
  font-size: var(--small);
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2px var(--half-gap);
  cursor: pointer;
  min-height: var(--tap);
  white-space: nowrap;
}
/* an icon sits a little apart from its words */
.Button:has(> .Icon) {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.Button[hidden] {
  display: none;
}
.Button:hover {
  background: var(--soft);
}
.Button:disabled {
  opacity: 0.5;
  cursor: default;
}
/* offers what is not there yet */
.Button-add {
  --ink: var(--muted);
  --pencil-style: dashed;
}
.Button-add:hover {
  --ink: var(--text);
}
.Button-danger {
  --ink: var(--negative);
}
/* the one to press, where a sheet offers one */
.Button-go {
  --ink: var(--bg);
  --line: var(--accent);
  background: var(--accent);
}
.Button-go:hover {
  background: color-mix(in srgb, var(--accent) 85%, var(--text));
}
/* a glyph that waits for the pointer */
.Button-quiet {
  --ink: var(--muted);
  --pencil: transparent;
  padding: 0 4px;
}
.Button-quiet:hover {
  --ink: var(--text);
}
.Button-quiet.Button-danger:hover {
  --ink: var(--negative);
}

/* A field has a visible edge before focus, so an empty placeholder is still
   recognizably a control. Bare fields belong inside an already framed part. */
.Field {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: 0;
  padding: 4px var(--half-gap);
  resize: none;
  cursor: text;
  user-select: text;
}
/* A field picked in is pressed, not typed in. */
select.Field {
  cursor: pointer;
}
.Field::placeholder {
  color: var(--muted);
}
.Field:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.Field-bare,
.Field-bare:focus {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  outline: 0;
  padding: 0;
}

.Field {
  text-align: left;
}

/* A form: every field its label over its control over its hint, on one left
   edge and one width at most the measure, and what sends it at the end. One
   field and its button share a line while they fit. */
.Form {
  display: grid;
  gap: var(--gap);
  margin: 0;
}
.Form_Field {
  display: grid;
  gap: calc(var(--half-gap) / 2);
  min-width: 0;
  max-width: var(--measure);
}
.Form_Label {
  margin: 0;
  color: var(--text);
  font-size: var(--small);
  font-weight: 700;
}
.Form_Optional {
  color: var(--muted);
  font-weight: 400;
}
.Form_Field > .Field {
  box-sizing: border-box;
  width: 100%;
}
.Form_Hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--small);
}
/* A value shown where its control would be, which nobody changes here: its
   words as they are, every line and long word kept inside the field. */
.Form_Value {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.Form_Value-none {
  color: var(--dim);
}
/* A field people never see, which only a bot fills in: off the page and
   taking no room in it. */
.Form_Trap {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Form_Line,
.Form_Actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--half-gap);
  min-width: 0;
  margin: 0;
}
.Form_Line > .Field,
.Form_Line > .At {
  flex: 1 1 12rem;
}

.Form > .Button {
  justify-self: start;
}

/* A line said back, small and muted; a refusal in the negative. Empty, it
   takes no room. */
.Notice {
  margin: 0;
  color: var(--muted);
  font-size: var(--small);
}
.Notice:empty {
  display: none;
}
.Notice-negative {
  color: var(--negative);
}

.Notice-fine {
  margin: 0;
  color: var(--muted);
  font-size: var(--fine, var(--small));
}
.Notice-fine {
  font-size: var(--fine, var(--small));
}

/* A list of rows, close together. A nested list hangs off a rule. */
.Rows {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.Rows-nested {
  margin-left: var(--half-gap);
  padding-left: var(--half-gap);
  border-left: 1px solid var(--border2);
}
.Rows_Item {
  min-width: 0;
}
.Rows_More {
  font-size: var(--small);
  color: var(--muted);
}

/* What is kept but no longer live: every word in it muted, links too. */
.Rows-quiet {
  --text: var(--muted);
  --link: var(--muted);
}
.Rows-quiet,
.Rows-quiet :is(.Rows_Link, .Tile_Title, .Body) {
  color: var(--muted);
}

/* A feed of unlike things: each entry has its own edge and breathing room. */
.Rows-ruled > .Rows_Item {
  padding: var(--half-gap) 0;
  border-bottom: 1px solid var(--border2);
}
.Rows_Kind {
  font-size: var(--small);
  color: var(--muted);
}

/* An entry's whole surface opens it, including a renderer's secondary text. */
.Rows_Link {
  display: block;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  border-radius: var(--radius);
}
.Rows_Link:hover {
  background: var(--soft);
}
.Rows_Link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A list put in order by dragging its rows. A row that can be picked up says
   so under the pointer, and a line says where a dragged one would land. */
.Rows-ordered > .Rows_Item[draggable='true'] {
  cursor: grab;
}
.Rows_Item-before {
  box-shadow: 0 -2px 0 var(--accent);
}
.Rows_Item-after {
  box-shadow: 0 2px 0 var(--accent);
}

/* A row that opens in place: a glyph pressed beside what it says, and, while
   open, what it opens, beneath it, hung off a rule. */
.Rows_Line {
  display: flex;
  align-items: center;
  gap: var(--half-gap);
  min-width: 0;
}
.Rows_Line > :last-child {
  flex: 1;
  min-width: 0;
}
.Rows_Toggle {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0 4px;
  min-height: var(--tap);
  cursor: pointer;
}
.Rows_Toggle:hover {
  color: var(--text);
  background: var(--soft);
}
.Rows_Toggle:focus-visible {
  outline: 2px solid var(--accent);
}
.Rows_Toggle:disabled {
  visibility: hidden;
}
.Rows_Detail {
  display: grid;
  gap: var(--half-gap);
  margin: var(--half-gap) 0 var(--gap) var(--gap);
  padding-left: var(--gap);
  border-left: 1px solid var(--border2);
  min-width: 0;
}

/* A row of like things: a thing's name over what describes it, and what
   acts on it at the far side, under it where there is no room beside. */
.Rows_Item:where(:has(> .Rows_Main)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--half-gap) var(--gap);
}
.Rows_Main {
  display: grid;
  flex: 1 1 12rem;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.Rows_Name {
  color: var(--text);
  font-weight: 700;
}
/* A name or what describes it kept to one line, cut short where it runs
   past. */
.Rows_Name-line,
.Rows_Meta-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Rows_Meta {
  color: var(--muted);
  font-size: var(--small);
}
.Rows_Actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--half-gap);
  margin-left: auto;
}
.Rows_Form {
  display: contents;
}

/* A row with an action at the end and an optional full-width detail. */
.Rows_Item.Rows_Item-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}
.Rows_Detail-inset {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--gap);
  border: 0;
  background: var(--card);
}
.Rows_Note {
  color: var(--muted);
  margin: 0;
  padding-block: var(--half-gap);
  font-size: inherit;
  font-weight: normal;
}

/* A card: one surface holding related things, flat on the page on a
   hairline. What it holds stacks a gap apart, never by margins of its own,
   and its head, when it has one, runs edge to edge across the top, ruled
   off under it: what it is on the left, its actions on the right. */
.Card {
  --card-pad: var(--gap);
  display: grid;
  align-content: start;
  gap: var(--half-gap);
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--card);
  overflow-wrap: break-word;
}
.Card > * {
  min-width: 0;
  margin: 0;
}
.Card_Head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--half-gap);
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
  padding: var(--half-gap) var(--card-pad);
  border-bottom: 1px solid var(--border2);
}
.Card_Head:last-child {
  margin-bottom: calc(-1 * var(--card-pad));
  border-bottom: 0;
}
.Card_Title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--heading);
  font-size: var(--size);
  font-weight: 700;
  line-height: 1.3;
}
.Card_Link {
  color: inherit;
  text-decoration: none;
}
.Card_Link:hover {
  color: var(--link);
  text-decoration: underline;
}
.Card_Mark {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  object-fit: contain;
}
.Card_Actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--half-gap);
  margin-left: auto;
}
.Card_Form {
  display: contents;
}
.Card_Sub {
  color: var(--muted);
  font-size: var(--small);
}

/* Rows in a card run to its edges. */
.Card > .Rows {
  margin-inline: calc(-1 * var(--card-pad));
}
.Card > .Rows > .Rows_Item {
  padding-inline: var(--card-pad);
}

/* A whole card can be pressed: its mark above its name and summary. */
.Card-button {
  --card-pad: var(--half-gap);
  justify-items: center;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.Card-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.Card-button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.Card-button .Card_Sub {
  line-height: 1.35;
}
.Card-button .Card_Mark {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.Card-danger .Card_Title {
  color: var(--negative);
}
.Card-accent {
  border-color: var(--accent);
}

.Card[data-compact] {
  --pad-block: .5rem;
  --pad-inline: .5rem;
}

/* Like things in equal columns, as many as fit at a card's least width, each
   row as tall as its tallest cell; one column on a phone. A cell fills its
   column, so cards side by side line up. */
.Cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap);
  min-width: 0;
}
.Cards > * {
  min-width: 0;
}

.Cards-compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

/* Nothing here yet: a dashed edge around what will be and how to start, its
   heading in the text's ink and the rest muted, centred. */
.Empty {
  display: grid;
  justify-items: center;
  gap: var(--half-gap);
  padding: calc(2 * var(--gap)) var(--gap);
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
.Empty > * {
  max-width: var(--measure);
  margin: 0;
}
.Empty_Title {
  color: var(--text);
  font-size: var(--h3);
  font-weight: 700;
}

.Empty_Title-welcome {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
}

.Empty-welcome {
  border: 0;
  padding: 0;
  text-align: center;
}

/* The text of a thing: the ink at a reading measure, its paragraphs and
   quotes as the base sets prose. A short one is the gist: muted, smaller. */
.Body {
  min-width: 0;
  max-width: var(--measure);
  color: var(--text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.Body-short {
  color: var(--muted);
  font-size: var(--small);
}
/* A text a press types into: the pointer says so, a text cursor over a
   faint wash. */
.Body-typed {
  cursor: text;
  border-radius: var(--radius);
}
.Body-typed:hover {
  background: var(--soft);
}
/* A document's source: its lines kept and wrapped at the measure, every
   character where it stands, smaller, in the face of what is typed. */
.Body-source > .Body_Source {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--small);
  line-height: 1.5;
}

.Body_Source-detail {
  margin: .4rem 0 0;
  padding: .6rem .8rem;
  background: var(--card);
  font-size: var(--small);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.Body-flow :is(.Body_Paragraph, .Body_Unordered, .Body_Ordered, .Body_Heading) {
  margin: 0 0 .75rem;
  color: inherit;
}
.Body-flow > :last-child {
  margin-bottom: 0;
}
.Body-flow .Body_Source {
  padding: .6rem .8rem;
  background: var(--card);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.Body-flow .Body_Table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* PrintBound's skin: how the kit's parts (@yaks/ui) look in Spellbound, laid
   over each part's own sheet. Headings and what is pressed are set in the
   display face; a press is a pill, and the one to press glows moonlight gold
   on parchment and on night alike. */

:root {
  --edge-color: var(--border2);
  --raised-shadow: var(--shadow-sm);
  --well: var(--cream);
}

body {
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--heading);
}
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .14s var(--ease);
}
a:hover {
  color: var(--indigo-lift);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A press. */
.Button {
  --ink: var(--text);
  --line: color-mix(in srgb, var(--text) 28%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.5rem;
  border-radius: var(--pill);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .14s var(--ease), background-color .28s var(--ease),
    box-shadow .28s var(--ease);
}
.Button:focus-visible {
  border-radius: var(--pill);
}
.Button:hover:not(:disabled) {
  --ink: var(--text);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.Button:active:not(:disabled) {
  transform: none;
}
.Button-go,
.Button-go:hover:not(:disabled) {
  --ink: #211a08;
  --line: transparent;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: var(--shadow-sm);
}
.Button-go:hover:not(:disabled) {
  box-shadow: var(--glow);
}
.Button-quiet {
  padding: .3rem .6rem;
  font-family: inherit;
  font-size: var(--small);
  font-weight: 400;
}
.Button-danger,
.Button-danger:hover:not(:disabled) {
  --ink: var(--negative);
}

/* A card: cream on parchment, on a soft shadow. */
.Card {
  --card-pad: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.Card_Title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.24rem;
  font-weight: 600;
}
.Card > :where(p) {
  color: var(--muted);
}
a.Card,
.Card[role='link'] {
  color: var(--text);
  text-decoration: none;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
a.Card:hover,
.Card[role='link']:hover {
  color: var(--text);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* A field: a cream well with room to type in. */
.Field {
  padding: .65rem .9rem;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  background: var(--well);
  font-size: 1.02rem;
  line-height: 1.5;
}
.Field:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}
.Form_Label {
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.Notice {
  font-size: var(--small);
}

.Empty {
  border-color: color-mix(in srgb, var(--gold-ink) 40%, var(--border2));
  background: color-mix(in srgb, var(--cream) 60%, transparent);
}
.Empty_Title {
  font-family: var(--display);
}

/* Prose, read at its measure: a section's heading ruled off from the one
   before, the words a shade back from their headings. */
.Body {
  line-height: 1.65;
  overflow-wrap: break-word;
}
.Body :where(p, li, td) {
  color: var(--muted);
}
.Body :where(strong, th) {
  color: var(--text);
}
.Body h2 {
  margin: 2.6rem 0 .4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border2);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 1.2;
}
.Body h2:first-of-type {
  margin-top: .5rem;
  padding-top: 0;
  border-top: 0;
}
.Body h3 {
  margin: 1.7rem 0 .3rem;
  font-size: 1.1rem;
}
.Body p {
  margin: .75rem 0;
}
.Body :is(ul, ol) {
  margin: .75rem 0;
  padding-left: 1.3rem;
}
.Body li {
  margin: .4rem 0;
}
.Body li::marker {
  color: var(--gold-ink);
}
.Body code {
  padding: .08em .35em;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--surface);
  font-size: .86em;
  color: var(--text);
}
.Body blockquote {
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--gold-ink);
  border-radius: 0 9px 9px 0;
  background: var(--card);
  font-size: var(--small);
}
.Body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.2rem 0;
  font-size: var(--small);
}
.Body :is(th, td) {
  padding: .5rem .8rem;
  border-color: var(--border2);
  vertical-align: top;
}
.Body th {
  background: var(--surface);
  font-family: var(--display);
  font-weight: 600;
}
.Body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.Skip {
  top: -6rem;
  left: 0;
  z-index: 100;
  border-radius: 0 0 9px 0;
  background: var(--night-900);
  color: var(--moon);
}
.Skip:focus {
  top: 0;
}

/* PrintBound's own parts (site/parts.ts) and the layout of its pages, in the
   Spellbound theme's paints. */

:root {
  --wide: 1120px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --link-lift: var(--indigo-lift);
}
html {
  scroll-behavior: smooth;
}
/* The foot stands at the bottom of a short page. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main {
  flex: 1 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
img,
svg {
  display: block;
  max-width: 100%;
}
a:hover {
  color: var(--link-lift);
}

/* The dusk sky: every role turned for night, so a kit part inside reads on
   it as it stands. What the kit derives at the root from a role is derived
   again here. */
:is(.Hero, .Band-night, .Price, .Prompt, .Foot) {
  --bg: var(--night-900);
  --surface: var(--night-800);
  --card: rgba(245, 241, 231, .05);
  --border: var(--night-600);
  --border2: var(--night-600);
  --text: var(--moon);
  --muted: var(--moon-soft);
  --dim: var(--moon-faint);
  --accent: var(--gold-bright);
  --link: var(--gold-bright);
  --link-lift: #fff;
  --heading: var(--moon);
  --negative: #ff9e85;
  --edge-color: var(--border2);
  --soft: color-mix(in srgb, var(--text) 8%, transparent);
  --well: rgba(245, 241, 231, .07);
  --shadow-sm: 0 0 0 transparent;
  color: var(--text);
  background-color: var(--night-900);
}
:is(.Hero, .Band-night) {
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(142, 164, 236, .18),
    transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(236, 192, 121, .1),
    transparent 55%);
}
/* A quiet field of stars. */
:is(.Hero, .Band-night)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .9;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, .9), transparent
    60%),
    radial-gradient(1.2px 1.2px at 28% 64%, rgba(255, 255, 255, .7), transparent
    60%),
    radial-gradient(1.6px 1.6px at 44% 16%, rgba(246, 215, 154, .9), transparent
    60%),
    radial-gradient(1.1px 1.1px at 62% 48%, rgba(255, 255, 255, .65),
    transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 28%, rgba(255, 255, 255, .85),
    transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 70%, rgba(142, 164, 236, .9), transparent
    60%),
    radial-gradient(1px 1px at 36% 84%, rgba(255, 255, 255, .6), transparent
    60%),
    radial-gradient(1.3px 1.3px at 54% 76%, rgba(246, 215, 154, .7), transparent
    60%),
    radial-gradient(1px 1px at 8% 52%, rgba(255, 255, 255, .55), transparent
    60%),
    radial-gradient(1.2px 1.2px at 70% 88%, rgba(255, 255, 255, .6), transparent
    60%);
}
/* A card on night lights its edge in gold under the pointer. */
.Band-night .Card {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
    background-color .28s var(--ease);
}
.Band-night .Card:hover {
  background: rgba(245, 241, 231, .08);
  box-shadow: var(--glow);
}

/* The one width every band keeps. */
:is(.Mast_Inner, .Band_Inner, .Hero_Inner, .Strip_Inner, .Cover_Inner, .Foot_Inner) {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* The name. */
.Wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  text-decoration: none;
}
.Wordmark:hover {
  color: var(--text);
}
.Wordmark_Mark {
  display: inline-flex;
  color: var(--gold-ink);
}
.Wordmark_Text {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.Wordmark_Bound {
  color: var(--gold-ink);
}
.Foot :is(.Wordmark_Mark, .Wordmark_Bound) {
  color: var(--gold);
}

/* The bar across the top: it stays as the page scrolls under it. */
.Mast {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border2);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
}
.Mast_Inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
}
.Mast_Nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.Mast_Link {
  color: var(--text);
  font-size: .98rem;
  text-decoration: none;
  white-space: nowrap;
}
.Mast_Link:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.Mast_Link-quiet {
  color: var(--muted);
}
.Mast .Button {
  padding: .55rem 1.15rem;
  font-size: .94rem;
}
@media (max-width: 1080px) {
  .Mast_Nav {
    gap: 1.1rem;
  }
  .Mast_Link {
    font-size: .92rem;
  }
}
/* A narrow bar keeps the name and the one press. */
@media (max-width: 900px) {
  .Mast_Link:not(.Mast_Link-quiet) {
    display: none;
  }
}
@media (max-width: 560px) {
  .Mast_Link-quiet {
    display: none;
  }
  .Wordmark_Text {
    font-size: 1.25rem;
  }
  .Mast .Button {
    padding: .55rem .95rem;
    font-size: .9rem;
  }
}

/* A band of a page. */
.Band {
  padding: clamp(3.75rem, 8vw, 6.5rem) 0;
}
.Band-paper {
  border-block: 1px solid var(--border2);
  background: var(--surface);
}
.Band-narrow > .Band_Inner {
  max-width: 860px;
}
.Band_Eyebrow,
.Cover_Eyebrow,
.Hero_Copy > .Band_Eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  max-width: none;
  margin: 0 0 1rem;
  color: var(--link);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
:is(.Band_Eyebrow, .Cover_Eyebrow)::before {
  content: '✦' / '';
  color: var(--coral-ink);
  font-size: .72em;
  letter-spacing: 0;
}
:is(.Hero, .Band-night) .Band_Eyebrow {
  color: var(--gold);
}
:is(.Hero, .Band-night) .Band_Eyebrow::before {
  color: var(--gold-bright);
}
.Band_Title {
  max-width: none;
  margin: 0 0 1.4rem;
  font-size: clamp(1.85rem, 4.4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}
.Band_Lede {
  max-width: 60ch;
  margin: 0 auto 2.6rem;
  color: var(--muted);
  font-size: 1.15rem;
  text-align: center;
  text-wrap: pretty;
}
.Band_Lede-after {
  margin: 2.4rem auto 0;
}
.Band_Actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.4rem;
}
.Band_Note {
  max-width: 60ch;
  margin: 1.4rem auto 0;
  color: var(--muted);
  font-size: var(--small);
  text-align: center;
  text-wrap: pretty;
}
.Band_Note-faint {
  color: var(--dim);
}
/* Beside something, a band's words keep to the left. */
.Split :is(.Band_Eyebrow, .Cover_Eyebrow) {
  justify-content: flex-start;
}
.Split :is(.Band_Title, .Band_Lede, .Band_Note) {
  margin-inline: 0;
  text-align: left;
}
.Split .Band_Actions {
  justify-content: flex-start;
}

/* The home page's opening. */
.Hero {
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.Hero_Inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.Hero_Copy > .Band_Eyebrow {
  justify-content: flex-start;
}
.Hero_Title {
  max-width: none;
  margin: 0 0 1.2rem;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.Hero_Spark {
  color: var(--gold);
}
.Hero_Sub {
  max-width: 38ch;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1.2rem;
  text-wrap: pretty;
}
.Hero_Actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1rem;
}
.Hero_Aside {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: .95rem;
}
.Hero_Note {
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
}
.Hero_Note strong {
  color: var(--gold-bright);
  font-weight: 600;
}
@media (max-width: 860px) {
  .Hero_Inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .Hero_Copy > .Band_Eyebrow,
  .Hero_Actions {
    justify-content: center;
  }
  .Hero_Sub {
    max-width: none;
    margin-inline: auto;
  }
  .Hero .Bookshot {
    order: -1;
    margin-bottom: .5rem;
  }
}

/* A bound hardcover floating over a moonlit glow: square corners, fine cream
   leaves on the fore-edge, the cover board capping them. */
.Bookshot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  perspective: 1800px;
}
.Bookshot_Book {
  position: relative;
  width: min(380px, 92%);
  aspect-ratio: 1120 / 860;
  transform: rotateY(-16deg) rotateX(4deg) rotateZ(-.8deg);
  border-radius: 2px 3px 3px 2px;
  box-shadow: 1px 0 0 #efe4c9, 2px 0 0 #e2d3ad, 3px 0 0 #efe4c9,
    4px 1px 0 #d8c79f, 5px 1px 0 #e7d8b3, 6px 1px 0 #cdb98e,
    7px 1px 1px rgba(40, 30, 18, .45), 24px 30px 46px rgba(0, 0, 0, .5);
}
.Bookshot_Book::after {
  content: '';
  position: absolute;
  inset: -14% -10% -16% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(246, 215, 154, .42), rgba(236,
    192, 121, .12) 55%, transparent 72%);
  filter: blur(8px);
}
.Bookshot_Cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 3px 3px 2px;
}
.Bookshot_Spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .06) 55%,
    rgba(255, 255, 255, .16));
  pointer-events: none;
}
.Bookshot_Caption {
  max-width: 28ch;
  color: var(--muted);
  font-size: .92rem;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .Bookshot_Book {
    transition: transform .6s var(--ease);
  }
  .Bookshot_Book:hover {
    transform: rotateY(-9deg) rotateX(2deg) rotateZ(-.3deg);
  }
}
@media (max-width: 860px) {
  .Bookshot_Caption {
    display: none;
  }
  .Bookshot_Book {
    transform: rotateY(-11deg) rotateX(2deg);
  }
}

/* Facts at a glance. */
.Strip {
  border-block: 1px solid var(--border2);
  background: var(--card);
}
.Strip_Inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: 1.5rem;
  text-align: center;
}
.Strip_Item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-inline: .5rem;
}
.Strip_Item + .Strip_Item {
  border-left: 1px solid var(--border2);
}
.Strip_Name {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
}
.Strip_Note {
  color: var(--muted);
  font-size: .86rem;
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  .Strip_Inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.3rem .5rem;
  }
  .Strip_Item:nth-child(odd) {
    border-left: 0;
  }
}

/* Cards a set number abreast, fewer as the page narrows. */
.Abreast {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}
.Abreast-two {
  grid-template-columns: repeat(2, 1fr);
}
.Abreast-three {
  grid-template-columns: repeat(3, 1fr);
}
.Abreast-four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .Abreast-three,
  .Abreast-four {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .Abreast-two,
  .Abreast-three,
  .Abreast-four {
    grid-template-columns: 1fr;
  }
}
/* A card's title after a spark. */
.Abreast-sparked .Card_Title {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.Abreast-sparked .Card_Title::before {
  content: '✦' / '';
  color: var(--gold-ink);
  font-size: .8em;
}
.Band-night .Abreast-sparked .Card_Title::before {
  color: var(--gold);
}
.Abreast em {
  color: var(--coral-ink);
}

.Numeral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: .4rem;
  border: 1px solid color-mix(in srgb, var(--gold-ink) 30%, transparent);
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--gold) 22%, var(--cream));
  color: var(--gold-ink);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
}

.Sparks {
  max-width: none;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.Sparks_Item {
  position: relative;
  margin-bottom: .8rem;
  padding-left: 1.7rem;
  color: var(--muted);
}
.Sparks_Item::before {
  content: '✦' / '';
  position: absolute;
  top: .05em;
  left: 0;
  color: var(--gold-ink);
  font-size: .95rem;
}
:is(.Hero, .Band-night) .Sparks_Item::before {
  color: var(--gold);
}
.Sparks_Item strong {
  color: var(--text);
}
/* What is said aside, under the list. */
.Sparks_Item-aside {
  margin-top: 1.2rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--border2);
  font-size: .95rem;
  font-style: italic;
}
.Sparks_Item-aside::before {
  content: none;
}

.Split {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.Split-top {
  align-items: start;
}
@media (max-width: 760px) {
  .Split {
    grid-template-columns: 1fr;
  }
}

/* The price, on a dusk card. */
.Price {
  --card-pad: 2.4rem 2rem;
  gap: 0;
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--night-800);
  background-image: radial-gradient(120% 90% at 70% -10%, rgba(142, 164, 236,
    .22), transparent 60%);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.Price_Eyebrow {
  margin: 0 0 .7rem;
  color: var(--gold);
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.Price_Amount {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: 3.7rem;
  font-weight: 700;
  line-height: 1;
}
.Price_From {
  margin-right: .18em;
  color: var(--muted);
  font-family: var(--font);
  font-size: .29em;
  font-style: italic;
  font-weight: 400;
  vertical-align: .5em;
}
.Price_Cents {
  color: var(--gold);
  font-size: 1.6rem;
  vertical-align: super;
}
.Price_Unit {
  margin: .55rem 0 1.5rem;
  color: var(--muted);
  font-size: .93rem;
}
.Price > .Button {
  justify-self: stretch;
}
.Price_Fine {
  margin: 1rem 0 0;
  color: var(--dim);
  font-size: .84rem;
}

/* Pages of a printed book. */
.Pages {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.Pages_Spread {
  max-width: 780px;
  margin: 2.6rem auto 0;
}
.Pages_Spread img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.Pages_Caption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: .92rem;
}
.Pages_Grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  max-width: none;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.Pages_Page img {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 860;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .28s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .Pages_Page img:hover {
    transform: translateY(-4px) scale(1.01);
  }
}
@media (max-width: 680px) {
  .Pages_Grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 420px) {
  .Pages_Grid {
    grid-template-columns: 1fr;
  }
}

.Faq {
  max-width: 780px;
  margin: 0 auto;
}
.Faq_Item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--border2);
}
.Faq_Item:last-child {
  border-bottom: 1px solid var(--border2);
}
.Faq_Question {
  margin-bottom: .45rem;
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
}
.Faq_Answer {
  margin: 0;
  color: var(--muted);
}

/* The top of a guide or a policy, and the column it is read in. */
.Cover {
  padding: clamp(2.6rem, 6vw, 4rem) 0 clamp(1.9rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--border2);
  background: var(--surface);
}
.Cover_Inner,
.Reading {
  max-width: 860px;
}
.Cover_Eyebrow {
  justify-content: flex-start;
  margin-bottom: .8rem;
}
.Cover_Title {
  max-width: none;
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.Cover_Meta {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}
.Reading {
  width: 100%;
  margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 3.5rem) var(--pad) clamp(3rem, 7vw, 5rem);
}
.Reading > .Body {
  margin-inline: auto;
}
.Reading > .Body > p:first-of-type {
  color: var(--text);
  font-size: 1.14rem;
}

/* A short page's title over what it holds. */
.Reading > h1 {
  margin: 0 0 var(--gap);
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.Reading > :is(p, form) {
  margin: 0 0 var(--gap);
}

/* Words to take away. */
.Prompt {
  margin: 1.6rem 0 2rem;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: 24px;
  background-color: var(--night-800);
  background-image: radial-gradient(120% 90% at 70% -10%, rgba(142, 164, 236,
    .16), transparent 60%);
  box-shadow: var(--shadow);
}
.Prompt_Bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .9rem .75rem 1.4rem;
  border-bottom: 1px solid var(--border2);
}
.Prompt_Bar .Button {
  padding: .5rem 1.1rem;
  font-size: .94rem;
}
.Prompt_Label {
  margin: 0;
  color: var(--gold);
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.Body .Prompt_Text {
  margin: 0;
  padding: 1.3rem 1.4rem 1.5rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* The foot of every page. */
.Foot {
  padding: 3rem 0 2.6rem;
}
.Foot_Inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
}
.Foot_Tag {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .93rem;
}
.Foot_Nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.Foot_Nav a {
  color: var(--muted);
  font-size: .95rem;
  text-decoration: none;
}
.Foot_Nav a:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}
.Foot_Legal {
  flex-basis: 100%;
  max-width: none;
  margin: .8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-night);
  color: var(--dim);
  font-size: .84rem;
}
.Foot_Legal a {
  color: var(--muted);
}

@media print {
  .Mast,
  .Foot,
  .Skip,
  .Form_Actions,
  .Card_Actions {
    display: none;
  }
}

/* The studio's own parts (site/parts.ts), in the theme's paints. */

/* The desk: the page's column, as wide as the bar above it, its head and its
   sheets a gap apart. */
.Desk {
  display: grid;
  align-content: start;
  gap: var(--gap);
  width: 100%;
  max-width: var(--wide, 70rem);
  min-height: 60vh;
  margin-inline: auto;
  padding: calc(2 * var(--gap)) var(--pad, var(--gap)) calc(3 * var(--gap));
}
.Desk_Head {
  display: grid;
  justify-items: start;
  gap: var(--half-gap);
  min-width: 0;
}
.Desk_Back {
  color: var(--muted);
  font-size: var(--small);
  text-decoration: none;
}
.Desk_Back:hover {
  text-decoration: underline;
}
.Desk_Title {
  margin: 0;
  overflow-wrap: anywhere;
}
/* Two sheets side by side, each as tall as what it holds; one over the other
   on a phone. */
.Desk_Spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--gap);
}
.Desk_Column {
  display: grid;
  gap: var(--gap);
  min-width: 0;
}
@media (max-width: 760px) {
  .Desk_Spread {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A book's words are pasted in whole: the field is tall before any are. */
.Desk_Words {
  min-height: 18rem;
}
/* What the desk says back stays in sight at the foot of the window, however
   far down the sheet being typed in is. Nothing said, it is not there. */
.Desk_Said {
  position: sticky;
  bottom: var(--half-gap);
  justify-self: start;
  padding: calc(var(--half-gap) / 2) var(--gap);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.Desk_Said:has(.Notice:empty) {
  display: none;
}

/* A printer's proof: the composed pages one under another in a frame that
   scrolls, each lying on the desk over its caption, then its files. */
.Proof {
  display: grid;
  gap: var(--gap);
  min-width: 0;
}
.Proof_Pages {
  display: grid;
  gap: var(--gap);
  max-height: 56rem;
  padding: var(--gap);
  overflow: auto;
  border-radius: var(--radius);
  background: var(--surface);
}
.Proof_Page {
  display: grid;
  gap: var(--half-gap);
  margin: 0;
}
.Proof_Image {
  display: block;
  width: 100%;
  max-height: 40rem;
  object-fit: contain;
  border: 1px solid var(--border2);
  background: var(--card);
  box-shadow: var(--shadow);
}
.Proof_Caption {
  color: var(--muted);
  font-size: var(--small);
  text-align: center;
}
.Proof_Files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--half-gap);
}

/* What a quote or an order comes to: each line its name, small and muted,
   across from its value, ruled off from the next; the total in the heading's
   face. */
.Slip {
  display: grid;
  margin: 0;
}
.Slip_Line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--gap);
  padding: var(--half-gap) 0;
  border-bottom: 1px solid var(--border2);
}
.Slip_Line:last-child {
  border-bottom: 0;
}
.Slip_Name {
  color: var(--muted);
  font-size: var(--small);
}
.Slip_Value {
  margin: 0 0 0 auto;
  color: var(--text);
  text-align: right;
}
.Slip_Value-total {
  font-family: var(--display);
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.2;
}

/* On paper the proof is every page, each on a sheet of its own. */
@media print {
  .Desk_Said {
    display: none;
  }
  .Proof_Pages {
    max-height: none;
    overflow: visible;
  }
  .Proof_Page {
    break-after: page;
  }
}