/* =============================================================
   THE CHARTHAUS — charthaus-book.css
   The shop, re-set as a mathematics book.
   Inverts the brand "plate": white ink on black substrate.
   Imports the single source of truth and overrides COLOUR ONLY —
   the type, scale, spacing and rules are the brand system as-is.
   ============================================================= */

@import url("colors_and_type.css");

/* -------- Dark substrate ------------------------------------------
   The brand already defines an inverted plate (--plate-bg / -fg).
   Here that plate becomes the whole book. Hierarchy is still size
   and type only; the two-ink rule holds, the inks are just swapped. */
:root {
  /* Warm the two inks: a hot-metal near-black substrate and a bone
     "ink", instead of screen-white on screen-black. Still two inks,
     hierarchy still by size and type — the press is just inked warm. */
  --ink:           #16130D;   /* warm near-black — printed page, not screen */
  --paper:         #E9E1CF;   /* bone — the brand light ink */

  --bg:            var(--ink);
  --fg:            var(--paper);
  --text:          var(--paper);
  --text-invert:   var(--ink);
  /* mutes/hairlines are the bone ink at reduced strength, so they
     stay warm against the substrate rather than going cold grey */
  --text-mute:     rgba(233, 225, 207, 0.60);
  --text-caption:  rgba(233, 225, 207, 0.58);
  --text-runhead:  rgba(233, 225, 207, 0.55);
  --fg-mute:       rgba(233, 225, 207, 0.60);
  --fg-faint:      rgba(233, 225, 207, 0.30);
  --rule:          rgba(233, 225, 207, 0.22);
  --border:        var(--paper);
  --surface:       var(--ink);
  --hover-line:    var(--paper);
  --focus-ring:    2px solid var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--ink); }
body {
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { color: var(--paper); }
a { color: inherit; }
hr { border-top-color: var(--paper); }
::selection { background: var(--paper); color: var(--ink); }
::-moz-selection { background: var(--paper); color: var(--ink); }

/* The page block: capped width, generous outer margin on wide displays. */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--s-8);
}

/* =============================================================
   RUNNING-HEAD BAR — wordmark + the table-of-contents navigation
   ============================================================= */
.runbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: var(--rule-thin) solid var(--paper);
}
.runbar__in {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-5);
  height: 76px;
}
.runbar__right {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* The wordmark — CH logo only. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark a, a.wordmark { text-decoration: none; }
.wordmark__logo {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: brightness(0.82) sepia(0.35);
  mix-blend-mode: screen;
  position: relative;
  top: -2px;
  margin-left: -48px;
}

/* Left group: wordmark + nav together */
.runbar__left {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
}

/* Social icon links */
.social {
  display: flex;
  align-items: center;
  padding: 0 var(--s-2);
  color: var(--paper);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity var(--t-base) var(--ease);
}
.social:hover { opacity: 1; }
.social svg { display: block; }

.bb-C {
  height: 0.8em;
  width: auto;
  display: inline-block;
  vertical-align: -0.04em;
  filter: brightness(0.82) sepia(0.35);
}
.bb-H {
  height: 0.8em;
  width: auto;
  display: inline-block;
  vertical-align: -0.04em;
  filter: brightness(0.82) sepia(0.35);
}

/* blackboard-bold toggle — global, applies to wordmark and title alike */
.bb-off { display: none; }
body[data-letters="plain"] .bb-on  { display: none; }
body[data-letters="plain"] .bb-off { display: inline; }
/* the double-struck glyphs sit a touch large; nudge them to the cap line */
.bb-on {
  font-feature-settings: "kern" 1;
}

/* The navigation reads like a book's contents. */
.nav {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.nav__label {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-200);
  color: var(--text-runhead);
  display: flex;
  align-items: center;
  padding: 0 var(--s-3) 0 0;
  margin-right: var(--s-1);
  border-right: var(--rule-thin) solid var(--rule);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.nav__label:hover { color: var(--paper); }
.nav__item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-serif);
  font-size: var(--fs-300);
  text-decoration: none;
  padding: 0 var(--s-2);
  border-bottom: var(--rule-thick) solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: border-color var(--t-base) var(--ease);
}
.nav__item .rn {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.nav__item:hover { border-bottom-color: var(--rule); }
.nav__item.is-current {
  border-bottom-color: var(--paper);
}
.nav__item.is-current .rn { color: var(--paper); }

.cart {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.06em;
  color: var(--text-mute);
  white-space: nowrap;
  padding-left: var(--s-3);
  margin-left: var(--s-1);
  border-left: var(--rule-thin) solid var(--rule);
  display: flex;
  align-items: center;
}

/* numeral toggle — every numeral carries both glyphs; CSS shows one */
.ar { display: none; }
body[data-numbering="arabic"] .rm { display: none; }
body[data-numbering="arabic"] .ar { display: inline; }

/* =============================================================
   CHAPTER RUNHEAD + FOLIO
   ============================================================= */
.runhead-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0 var(--s-1);
  border-bottom: var(--rule-thin) solid var(--rule);
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-runhead);
}
.folio {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.2em;
  color: var(--text-mute);
  padding: var(--s-6) 0 var(--s-5);
}

/* =============================================================
   TITLE PAGE (homepage)
   ============================================================= */
.titlepage {
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
  text-align: center;
}
.titlepage__kicker {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-300);
  color: var(--text-mute);
  margin: 0 0 var(--s-5);
}
.titlepage__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: var(--lh-display);
  margin: 0;
}
.titlepage__tagline {
  font-family: var(--font-text);
  font-size: var(--fs-600);
  margin: var(--s-4) 0 0;
}
.titlepage__edition {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.16em;
  color: var(--text-mute);
  margin: var(--s-6) 0 0;
}
.titlepage__bar {
  width: 96px;
  height: var(--rule-thick);
  background: var(--paper);
  margin: var(--s-5) auto 0;
}

/* =============================================================
   TABLE OF CONTENTS — with dot leaders
   ============================================================= */
.section-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: var(--rule) solid var(--paper);
  padding-bottom: var(--s-2);
  margin: var(--s-9) 0 var(--s-5);
}
.section-rule h2 {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-600);
}
.section-rule .runhead {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-runhead);
  white-space: nowrap;
}

.toc { margin: 0; }
.toc-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  text-decoration: none;
  padding: var(--s-3) 0;
  border-bottom: var(--rule-thin) solid var(--rule);
}
.toc-row:first-child { border-top: var(--rule-thin) solid var(--rule); }
.toc-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  letter-spacing: 0.04em;
  color: var(--text-mute);
  flex: 0 0 3.5em;
}
.toc-row__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-500);
}
.toc-row__desc {
  font-family: var(--font-text);
  font-size: var(--fs-300);
  color: var(--text-mute);
  white-space: nowrap;
  flex: 0 0 auto;
}
.toc-row__lead {
  flex: 1 1 auto;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.45);
  transform: translateY(-0.28em);
  min-width: var(--s-3);
}
.toc-row__pg {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--text-mute);
}
.toc-row:hover .toc-row__title { text-decoration: underline; text-underline-offset: 0.2em; }

/* =============================================================
   NOTE TO THE READER
   ============================================================= */
.note {
  margin: var(--s-9) 0 var(--s-7);
}
.note__head {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-300);
  color: var(--paper);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: var(--rule) solid var(--paper);
}
.note__body {
  columns: 2;
  column-gap: var(--s-7);
}
.note__body p {
  font-family: var(--font-text);
  font-size: var(--fs-400);
  line-height: var(--lh-loose);
  max-width: 52ch;
  margin: 0 0 1em;
  break-inside: avoid-column;
}
.note__body p:first-child::first-letter {
  font-family: var(--font-serif);
  font-size: 4em;
  line-height: 0.8;
  float: left;
  padding: 0.06em 0.1em 0 0;
  font-weight: 400;
}
.note__sig {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-top: var(--s-4);
}

/* =============================================================
   CHAPTER OPENER — big part numeral
   ============================================================= */
.opener {
  padding-top: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: var(--rule) solid var(--paper);
  margin-bottom: var(--s-7);
}
.opener__num {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 0.82;
  letter-spacing: 0.02em;
  margin: 0;
}
.opener__chap {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-200);
  color: var(--text-runhead);
  margin: 0 0 var(--s-3);
}
.opener__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  margin: var(--s-3) 0 0;
}
.opener__epi {
  font-family: var(--font-text);
  font-size: var(--fs-500);
  color: var(--text-mute);
  max-width: 54ch;
  margin: var(--s-3) 0 0;
}

/* =============================================================
   CATALOGUE — flat list of objects, one per row (catalogue raisonné)
   ============================================================= */
.catalogue { padding-bottom: var(--s-6); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 7fr) 8fr;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-top: var(--rule) solid var(--paper);
}
.entry:first-of-type { border-top-width: var(--rule-thick); }

.entry__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--rule-thin) solid var(--paper);
  background: var(--ink);
}
.entry__figure image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.entry__figcap {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.entry__figcap em { font-family: var(--font-text); font-size: var(--fs-200); }

.entry__meta { display: flex; flex-direction: column; }
.entry__kicker {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-runhead);
  margin: 0 0 var(--s-2);
}
.entry__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: var(--tr-mark);
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  margin: 0;
}
.entry__sub {
  font-family: var(--font-text);
  font-size: var(--fs-500);
  color: var(--text-mute);
  margin: var(--s-1) 0 var(--s-3);
}
.entry__body {
  font-family: var(--font-text);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  max-width: 56ch;
  margin: 0 0 var(--s-3);
}

/* spec — hairline definition list */
.spec {
  margin: 0 0 var(--s-3);
  border-top: var(--rule-thin) solid var(--paper);
}
.spec div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px 0;
  border-bottom: var(--rule-thin) solid var(--rule);
}
.spec dt {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.spec dd {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-200);
  text-align: right;
}

/* variant chips */
.variants {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.variants > .runhead {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.variant-chips { display: flex; gap: 0; }
.vchip {
  appearance: none;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
  min-width: 36px;
  height: 32px;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule-thin) solid var(--paper);
  border-left-width: 0;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.vchip:first-child { border-left-width: var(--rule-thin); }
.vchip:hover { background: rgba(255, 255, 255, 0.12); }
.vchip.is-active { background: var(--paper); color: var(--ink); }
.vchip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; z-index: 1; }

.entry__foot {
  margin-top: auto;
  padding-top: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.lot {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.buy { display: flex; align-items: center; gap: var(--s-3); }
.price {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  font-variant-numeric: tabular-nums;
}

/* Button — outline that fills to paper on hover (plate inversion). */
.btn {
  appearance: none;
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-300);
  padding: 8px var(--s-3);
  background: var(--ink);
  color: var(--paper);
  border: var(--rule) solid var(--paper);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:active { transform: var(--press-shift); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.btn.is-added { background: var(--paper); color: var(--ink); }

/* =============================================================
   LIBRARY — shelf of book covers
   ============================================================= */
.library { padding-bottom: var(--s-6); }
.shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--s-6);
  row-gap: var(--s-7);
}
.book { display: flex; flex-direction: column; }
.book__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border: var(--rule-thin) solid var(--paper);
  background: var(--ink);
  margin-bottom: var(--s-3);
}
.book__cover image-slot,
.book__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.book__ref {
  display: flex;
  gap: var(--s-2);
  font-family: var(--font-text);
  font-size: var(--fs-300);
  line-height: var(--lh-snug);
  max-width: none;
}
.book__num {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--text-mute);
  flex: 0 0 auto;
}
.book__cite { margin: 0; }
.book__cite .t { font-style: italic; }
.book__cite .a { font-variant-numeric: oldstyle-nums; }
.book__links {
  margin: var(--s-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-mute);
}
.book__links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================
   COLLECTIONS — empty state
   ============================================================= */
.collections { padding-bottom: var(--s-6); }
.empty {
  border-top: var(--rule-thick) solid var(--paper);
  border-bottom: var(--rule-thin) solid var(--rule);
  padding: var(--s-9) var(--s-4);
  text-align: center;
}
.empty__head {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-300);
  color: var(--text-mute);
  margin: 0 0 var(--s-3);
}
.empty__stmt {
  font-family: var(--font-text);
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  margin: 0 auto;
  max-width: 30ch;
}
.empty__note {
  font-family: var(--font-text);
  font-size: var(--fs-300);
  color: var(--text-mute);
  margin: var(--s-4) auto 0;
  max-width: 46ch;
}
/* a forthcoming, unfilled collection slot — outline only */
.forthcoming {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.forthcoming__cell {
  border: var(--rule-thin) dashed var(--rule);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-200);
  color: var(--fg-faint);
}

/* =============================================================
   COLOPHON FOOTER
   ============================================================= */
.colophon {
  border-top: var(--rule-thin) solid var(--paper);
  padding-top: var(--s-5);
  padding-bottom: var(--s-7);
  margin-top: var(--s-7);
}
.colophon__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-6);
  align-items: start;
}
.colophon p {
  font-family: var(--font-text);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  max-width: 58ch;
  margin: 0;
  color: var(--text-mute);
}
.colophon dl { margin: 0; display: grid; gap: 6px; }
.colophon dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  border-bottom: var(--rule-thin) solid var(--rule);
  padding-bottom: 6px;
}
.colophon dt {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.colophon dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
}
.colophon__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--rule-thin) solid var(--rule);
}
.colophon__foot span {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--text-mute);
}

/* =============================================================
   IMAGE-SLOT — dark surface overrides (page styles beat :host)
   ============================================================= */
image-slot { color: rgba(255, 255, 255, 0.55); }
image-slot::part(frame) { background: rgba(255, 255, 255, 0.04); }
image-slot::part(ring)  { border-color: rgba(255, 255, 255, 0.32); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1200px) {
  .page { padding: 0 var(--s-6); }
  .shelf { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .nav__label { display: none; }
  .runbar__in { gap: var(--s-3); }
}
@media (max-width: 980px) {
  .entry { grid-template-columns: 1fr; gap: var(--s-4); }
  .entry__figure { max-width: 460px; }
  .note__body { columns: 1; }
  .colophon__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .shelf { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .runbar__in { height: 64px; gap: var(--s-3); }
  .nav__label { display: none; }
  .nav__item { padding: 0 var(--s-1); font-size: var(--fs-200); }
  .nav__item .rn { display: none; }
  .wordmark__logo { height: 34px; margin-left: 0; }
  .cart { font-size: var(--fs-100); padding-left: var(--s-1); margin-left: 0; }
  .opener__num { font-size: var(--fs-900); }
  .opener__title { font-size: var(--fs-600); }
  .toc-row__desc { display: none; }
}
@media (max-width: 420px) {
  .cart { display: none; }
}
@media (max-width: 520px) {
  .page { padding: 0 var(--s-3); }
  .shelf { grid-template-columns: 1fr 1fr; }
  .forthcoming { grid-template-columns: 1fr; }
  .entry__foot { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* =============================================================
   TWEAKS PANEL — brand-styled, dark, hidden until host activates
   ============================================================= */
.twk {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 2147483646;
  width: 252px;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule) solid var(--paper);
  display: none;
}
.twk.open { display: block; }
.twk__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--s-2);
  border-bottom: var(--rule-thin) solid var(--paper);
  cursor: move;
}
.twk__hd b {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-smcap);
  font-size: var(--fs-300);
}
.twk__x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.twk__body { padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-3); }
.twk__row { display: flex; flex-direction: column; gap: 6px; }
.twk__row > .runhead {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.twk__seg { display: flex; }
.twk__seg button {
  appearance: none;
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  padding: 6px 4px;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule-thin) solid var(--paper);
  border-left-width: 0;
  cursor: pointer;
}
.twk__seg button:first-child { border-left-width: var(--rule-thin); }
.twk__seg button.on { background: var(--paper); color: var(--ink); }

/* =============================================================
   CART LINK
   ============================================================= */
.cart { text-decoration: none; }
.cart:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* =============================================================
   CATALOGUE GRID — four objects per row, scrolling
   ============================================================= */
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-6);
}
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.card__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--rule-thin) solid var(--paper);
  background: var(--ink);
  transition: border-color var(--t-base) var(--ease);
}
.card__figure image-slot,
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  display: block;
  pointer-events: none;   /* display-only in the grid; upload on the item page */
}
.card__meta {
  padding-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card__kicker {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-100);
  color: var(--text-runhead);
}
.card__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  margin: 0;
}
.card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: 2px;
}
.card__price {
  font-family: var(--font-serif);
  font-size: var(--fs-400);
  font-variant-numeric: tabular-nums;
}
.card__sku {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.card:hover .card__title { text-decoration: underline; text-underline-offset: 0.2em; }
.card:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }

/* =============================================================
   ITEM PAGE
   ============================================================= */
.item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  padding: var(--s-6) 0 var(--s-7);
  border-top: var(--rule-thick) solid var(--paper);
}
.item__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--rule-thin) solid var(--paper);
  background: var(--ink);
}
.item__figure image-slot,
.item__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.item__figcap {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.item__figcap em { font-family: var(--font-text); font-size: var(--fs-200); }
.item__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-1);
  margin-top: var(--s-1);
}
.thumb {
  aspect-ratio: 4 / 5;
  background: #1e1e1e;
  border: var(--rule-thin) solid rgba(233, 225, 207, 0.20);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: block;
}
.thumb.is-active { border-color: var(--paper); }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item__meta { display: flex; flex-direction: column; }
.item__kicker {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-runhead);
  margin: 0 0 var(--s-2);
}
.item__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: var(--tr-mark);
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  margin: 0;
}
.item__sub {
  font-family: var(--font-text);
  font-size: var(--fs-500);
  color: var(--text-mute);
  margin: var(--s-1) 0 var(--s-3);
}
.item__body {
  font-family: var(--font-text);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  max-width: 56ch;
  margin: 0 0 var(--s-4);
}

/* pickers — size, rotation */
.picker {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.picker__label {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-mute);
  flex: 0 0 5.5em;
}
.chips { display: flex; gap: 0; flex-wrap: wrap; }
.chip {
  appearance: none;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule-thin) solid var(--paper);
  margin-left: -1px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.chips { margin-left: 1px; }
.chip:hover { background: rgba(255, 255, 255, 0.12); }
.chip.is-active { background: var(--paper); color: var(--ink); }
.chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; z-index: 1; }

.item__buyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--rule) solid var(--paper);
}
.item__price { font-size: var(--fs-700); }
.item__btns { display: flex; gap: var(--s-2); }
.item__note {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.03em;
  color: var(--text-mute);
  min-height: 1.4em;
  margin: var(--s-2) 0 0;
}

/* solid (primary) button — paper fill that hollows on hover */
.btn--solid {
  background: var(--paper);
  color: var(--ink);
}
.btn--solid:hover { background: var(--ink); color: var(--paper); }

/* =============================================================
   BAG
   ============================================================= */
.bag { padding-bottom: var(--s-6); }
.bag__list { margin-top: var(--s-2); }
.line {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: var(--rule-thin) solid var(--rule);
}
.line:first-child { border-top: var(--rule) solid var(--paper); }
.line__fig {
  position: relative;
  width: 84px;
  aspect-ratio: 4 / 5;
  border: var(--rule-thin) solid var(--paper);
  background: var(--ink);
}
.line__fig image-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.line__title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-400);
  margin: 0;
}
.line__attrs {
  font-family: var(--font-text);
  font-size: var(--fs-200);
  color: var(--text-mute);
  margin: 4px 0 6px;
}
.line__meta .lot { display: block; margin-bottom: 6px; }
.line__remove {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.line__remove:hover { color: var(--paper); }
.line__qty { display: flex; align-items: center; gap: 0; }
.qstep {
  appearance: none;
  width: 32px; height: 32px;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule-thin) solid var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  line-height: 1;
  cursor: pointer;
}
.qstep[data-dec] { border-right-width: 0; }
.qstep:hover { background: rgba(255, 255, 255, 0.12); }
.qval {
  min-width: 40px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-top: var(--rule-thin) solid var(--paper);
  border-bottom: var(--rule-thin) solid var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-variant-numeric: tabular-nums;
}
.line__pay {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  min-width: 120px;
}
.line__pay .price { font-size: var(--fs-500); }
.bag__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-6);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--rule-thick) solid var(--paper);
}
.bag__note {
  font-family: var(--font-text);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-mute);
  max-width: 48ch;
}
.bag__total { margin: 0; display: grid; gap: 6px; min-width: 240px; }
.bag__total div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: var(--rule-thin) solid var(--rule);
  padding-bottom: 6px;
}
.bag__total dt {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: var(--tr-runhead);
  font-size: var(--fs-200);
  color: var(--text-mute);
}
.bag__total dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-variant-numeric: tabular-nums;
}
.bag__total-sum dt, .bag__total-sum dd {
  font-size: var(--fs-500);
  color: var(--paper);
}
.bag__total-sum dt { font-variant: small-caps; }
.bag__total-sum { border-bottom: 0 !important; }

/* grid / item / bag responsive */
@media (max-width: 1100px) {
  .grid4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .item { grid-template-columns: 1fr; gap: var(--s-4); }
  .item__figure { max-width: 480px; }
}
@media (max-width: 760px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .line { grid-template-columns: 64px 1fr; gap: var(--s-3); }
  .line__fig { width: 64px; }
  .line__qty { grid-column: 2; justify-content: flex-start; }
  .line__pay { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
  .bag__foot { flex-direction: column; gap: var(--s-4); }
  .bag__total { min-width: 0; }
}
@media (max-width: 480px) {
  .grid4 { grid-template-columns: 1fr 1fr; }
}