/* Sahtu Press site styles. Values only from tokens.css; every component is shown on /design-system.
   1 Base  2 Layout  3 Components  4 Header  5 Footer  6 Blocks  7 Pages */

/* 1. Base ---------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: var(--space-5) 0 var(--space-3);
}
h1 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-display); margin-top: 0; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p, ul, ol { margin: 0 0 var(--space-3); }
/* Lists in text: bullets hang in the margin, items evenly spaced */
.prose ul, .prose ol, .product-info ul { padding-left: 1.25em; }
.prose li, .product-info li { padding-left: 0.25em; }
.prose li + li, .product-info li + li { margin-top: var(--space-1); }
.prose li::marker, .product-info li::marker { color: var(--color-text-muted); }

/* Headings balance their lines; reading text avoids one-word last lines (widows).
   Browsers without support just wrap normally. */
h1, h2, h3, h4, .card-title, .wordmark, .footer-mission, blockquote { text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
[id] { scroll-margin-top: calc(var(--size-logo) + var(--space-5)); } /* clear the sticky header */
hr { border: 0; border-top: var(--border); margin: var(--space-5) 0; }

/* Links read as text: same color, a thin underline set low. Orange arrives on hover. */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: var(--underline-offset); }
a:hover { color: var(--color-action); }
:focus-visible { outline: var(--focus); outline-offset: var(--space-1); }

/* 2. Layout -------------------------------------------------------------- */

.wrap { max-width: var(--width-page); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: calc(var(--width-text) + 2 * var(--gutter)); }
.section-alt { background: var(--color-bg-alt); }
main { padding-bottom: var(--space-7); }
main.landing { padding-bottom: 0; }
.section { padding-top: var(--space-6); }

/* Page head: white, editorial. Small spaced label, large light serif title, hairline below. */
.page-head { padding: var(--space-7) 0 0; }
.page-head .wrap { position: relative; padding-bottom: var(--space-5); }
.page-head .wrap::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; border-bottom: var(--border); }
.page-head h1 { margin: 0; font-size: var(--text-display); line-height: var(--leading-heading); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); max-width: 18ch; }
.page-head + .section, .page-head + .wrap.section { padding-top: var(--space-5); }
.page-head .lead { max-width: var(--width-text); margin: var(--space-4) 0 0; color: var(--color-text-muted); }
.page-head .chips { margin-top: var(--space-5); }
.crumb, .eyebrow { font-size: var(--text-meta); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--color-action); }

/* Layout field rows (Home, landing pages) */
.row { padding: var(--space-6) 0; }
.row-paper { background: var(--color-bg-alt); }
.row-grid { display: grid; gap: var(--space-5); }
.row-grid > .col > :first-child { margin-top: 0; }
.row-grid > .col > :last-child { margin-bottom: 0; }
@media (min-width: 48rem) {
  .row-grid { grid-template-columns: repeat(12, 1fr); }
  .row-grid > .col { grid-column: span var(--span); }
  .row-hero .row-grid { align-items: center; }
}
.row-hero { padding: var(--space-5) 0 var(--space-6); }
.row-hero p { font-size: var(--text-lead); line-height: var(--leading-lead); }
.row-hero figure { margin: 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-head h2 { margin: 0; }

/* 3. Components ---------------------------------------------------------- */

/* Button: the one orange thing on a screen */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control);
  padding: 0 var(--space-4);
  line-height: 1.2;
  background: var(--color-action);
  color: var(--color-on-action);
  border: 0;
  border-radius: var(--radius);
  font: var(--weight-bold) var(--text-body) var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--color-action-hover); color: var(--color-on-action); }
/* disabled (sold out) is neutral: orange only ever means "do this" */
.button:disabled, .button[aria-disabled="true"] { background: var(--color-bg-alt); color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-line); cursor: not-allowed; }
.button-sm { min-height: calc(var(--size-control) - var(--space-3)); padding: 0 var(--space-3); font-size: var(--text-sm); }
/* Secondary: next to an orange button, never alone */
.button-secondary { background: var(--color-bg); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-line); }
.button-secondary:hover { background: var(--color-bg-alt); color: var(--color-text); }
.button-block { display: flex; width: 100%; }

/* Chips: tags, categories, product options */
.chips { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-block; padding: var(--space-1) var(--space-3); border: var(--border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); font-size: var(--text-sm); text-decoration: none; }
a.chip:hover { border-color: var(--color-action); color: var(--color-action); }
.chip[aria-current] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }

/* Meta line: dates, tags */
/* Meta: dates, tags, notes, prices and counts set in mono, like a colophon */
.meta, .price, .cart-count, .cart-total, .cart-summary dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.meta { font-size: var(--text-meta); color: var(--color-text-muted); letter-spacing: -0.01em; }
/* A note under a button always gets the same room */
.button + .meta, form:has(> .button:last-child) + .meta, form:has(> .button-block) + .meta { margin-top: var(--space-3); }

/* Lead paragraph */
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); }

/* Titles of single articles and products: a step below other page titles (they run long), still above H2 */
.title { font-size: var(--text-h1); margin: var(--space-4) 0 var(--space-5); }

/* Card grid: shop, footer */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-card), 1fr));
  gap: var(--space-5) var(--space-4);
}
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(var(--size-card), 1fr)); }
.cards-shop { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3); }
@media (min-width: 48rem) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-shop { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); }
}
.card a { color: var(--color-text); text-decoration: none; display: block; }
.card a:hover .card-title { color: var(--color-action); }
.card > a > img, .card-placeholder { width: 100%; aspect-ratio: var(--ratio-card); object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-3); }
.card-placeholder { display: grid; place-items: center; background: var(--color-bg-alt); }
.card-placeholder img { height: var(--size-logo); width: auto; opacity: 0.35; }
.card-frame { display: block; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-3); }
.card-frame img { width: 100%; aspect-ratio: var(--ratio-product); object-fit: cover; transition: transform 0.3s; }
.card a:hover .card-frame img { transform: scale(1.03); }
.card .meta { margin: 0 0 var(--space-1); }
.card-title { font-size: var(--text-h4); margin: 0; }
/* Article listings read as titles, like the article page. Calistoga is heavy: a step up in size, looser lines. */
.article-card .card-title { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-lead); line-height: var(--leading-quote); }
.card .price { margin: var(--space-1) 0 0; }

/* Feature: the newest article, big */
.feature { display: grid; gap: var(--space-4); align-items: center; margin-bottom: var(--space-6); }
.feature-image img, .feature .card-placeholder { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.feature h2 { margin: var(--space-2) 0 var(--space-3); font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); } /* same face as the article cards below it */
.feature h2 a { color: var(--color-text); text-decoration: none; }
.feature h2 a:hover { color: var(--color-action); }
@media (min-width: 48rem) {
  .feature { grid-template-columns: 3fr 2fr; gap: var(--space-5); }
}

.pager { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-6); }

/* Product card: picture, title, price, Buy */
.product-card { display: grid; grid-template-columns: var(--size-thumb) 1fr; gap: var(--space-4); align-items: center; margin: var(--space-4) 0; }
.product-card img { border-radius: var(--radius); }
.product-card .card-title { margin: 0 0 var(--space-1); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4. Header -------------------------------------------------------------- */

.skip-link { position: absolute; left: var(--space-3); top: -10rem; background: var(--color-bg); padding: var(--space-2) var(--space-3); z-index: 20; }
.skip-link:focus { top: var(--space-3); }
/* Top banner (Site > Top banner): one line above the header for launches */
.top-banner { background: var(--color-bg-alt); font-size: var(--text-sm); }
.top-banner-inner { position: relative; padding-top: var(--space-2); padding-bottom: var(--space-2); padding-right: calc(var(--gutter) + var(--space-5)); padding-left: calc(var(--gutter) + var(--space-5)); text-align: center; }
.top-banner p { margin: 0; }
.top-banner a { color: var(--color-text); font-weight: var(--weight-bold); }
.top-banner a:hover { color: var(--color-action); }
.top-banner-close { position: absolute; top: 50%; right: var(--gutter); transform: translateY(-50%); background: none; border: 0; padding: 0 var(--space-1); font: inherit; font-size: var(--text-lead); line-height: 1; color: var(--color-text-muted); cursor: pointer; }
.top-banner-close:hover { color: var(--color-text); }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--color-bg); transition: box-shadow 0.2s; }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font-size: var(--text-lead); }
.brand:hover { color: var(--color-text); }
.brand img { height: 1.15em; width: auto; } /* the mark stands about as tall as the wordmark's letters */
.wordmark { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); white-space: nowrap; }
/* Calistoga's own ® blots at this size: a small sans mark, its top level with the capitals */
.wordmark .reg { font-family: var(--font-body); font-size: 0.38em; font-weight: var(--weight-heading); vertical-align: 1.2em; line-height: 0; margin-left: 0.1em; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.cart-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1); border-radius: var(--radius); color: var(--color-text); text-decoration: none; }
.cart-link:hover { color: var(--color-action); }
.cart-icon { width: 1.5rem; height: 1.5rem; display: block; }
/* something in the cart: icon and count together in an outlined pill, like a secondary button */
.cart-link.has-items { padding: var(--space-1) var(--space-3); box-shadow: inset 0 0 0 1px var(--color-line); }
.cart-link.has-items:hover { background: var(--color-bg-alt); }
.cart-count { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1; }
@media (max-width: 47.99rem) {
  .header-inner { gap: var(--space-2) var(--space-3); }
  .header-actions { gap: var(--space-3); }
  .brand { font-size: var(--text-h4); }
  .nav { order: 3; width: 100%; }
}
/* wide screens: the menu sits at the right beside the cart; Shop's menu opens leftward so it stays on screen */
@media (min-width: 48rem) {
  .nav { margin-left: auto; }
  .header-actions { margin-left: 0; }
  .nav .submenu { left: auto; right: calc(var(--space-3) * -1); }
}

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.nav li { position: relative; }
.nav a { color: var(--color-text); font-weight: var(--weight-heading); text-decoration: none; }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--underline-offset); }
.nav a:hover { color: var(--color-action); }
.nav .has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin: 0 0 0.2em 0.45em;
  border: solid currentColor;
  border-width: 0 0.1em 0.1em 0;
  transform: rotate(45deg);
}
.nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(var(--space-3) * -1);
  min-width: var(--size-card-sm);
  padding: var(--space-2);
  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 10;
}
/* each row is the link, so the whole row is clickable; its corners follow the box's, less the padding */
.nav .submenu a { display: block; padding: var(--space-2) var(--space-3); border-radius: calc(var(--radius) - var(--space-2)); font-weight: var(--weight-body); }
.nav .submenu a:hover { background: var(--color-bg-alt); }
.nav .has-submenu:hover .submenu,
.nav .has-submenu:focus-within .submenu { display: block; }

/* 5. Footer -------------------------------------------------------------- */

.site-footer { background: var(--color-bg-alt); padding: var(--space-6) 0 var(--space-4); font-size: var(--text-sm); }
.footer-grid { display: grid; gap: var(--space-5); }
/* The header lockup, set level with the column headings; the line under it reads like a link row */
.footer-brand .brand { margin: -0.35em 0 var(--space-2); }
.footer-mission { color: var(--color-text-muted); margin: 0; max-width: 16rem; }
/* The hero's ink art, faint behind the footer and cropped by its edges: in the text color
   (on Paper in both modes, the JPG's white would show as a box). Phones: at the right, middle of
   the footer, only just off the edge. Wider: on the left, under the brand. */
.site-footer { position: relative; overflow: hidden; }
.site-footer > :not(.footer-art) { position: relative; }
.footer-art { position: absolute; right: calc(-1 * var(--space-3)); top: 50%; transform: translateY(-50%); height: 26rem; aspect-ratio: 1667 / 2019; opacity: 0.1; background: var(--color-text); -webkit-mask: var(--ink-mask) center / contain no-repeat; mask: var(--ink-mask) center / contain no-repeat; pointer-events: none; }
.footer-col h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-bold); margin: 0 0 var(--space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-col a { color: var(--color-text); text-decoration: none; }
.footer-col a:hover { color: var(--color-action); }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-4); color: var(--color-text-muted); }
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: var(--border); } /* rule stays inside the gutters */
.signup { padding: var(--space-6) 0; }
/* Newsletter band: line on the left, email + Subscribe on the right */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius); background: var(--color-bg-alt); }
.newsletter h2 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); } /* It Is Well is a title, like the wordmark */
.newsletter p { margin: 0; color: var(--color-text-muted); }
.newsletter-form { display: flex; gap: var(--space-2); }
.newsletter-form input { flex: 1; min-width: 0; height: var(--size-control); padding: 0 var(--space-3); border: var(--border-control); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); font: inherit; }
@media (min-width: 48rem) { .newsletter { grid-template-columns: 1fr 1fr; } }
.footer-bottom p { margin: 0; }
@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  /* Just right of the logo, so no text covers either face (checked against the text at 800 to 1440px).
     Tablets sit it lower: the Read column is close and would cover Sita's face. */
  .footer-art { right: auto; left: calc(max(0px, (100% - var(--width-page)) / 2) + var(--gutter) + var(--space-5)); top: var(--space-7); transform: none; }
}
@media (min-width: 64rem) {
  .footer-art { top: var(--space-5); } /* cloud curls rise past the wordmark */
}

/* 6. Blocks (Kirby block snippets inside .prose) -------------------------- */

.prose .align-center { text-align: center; } /* kept from Squarespace, e.g. a poem's refrain */
.prose small, .prose .small { font-size: var(--text-sm); }
.prose figure { margin: var(--space-4) 0; }
.prose figure img { border-radius: var(--radius); }
.prose figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
/* Pull quote: breaks out of the reading column to the full content width, centered, name below */
.prose blockquote {
  position: relative; left: 50%; transform: translateX(-50%);
  width: calc(min(100vw, var(--width-page)) - 2 * var(--gutter));
  margin: var(--space-6) 0; padding: 0;
  text-align: center; font-family: var(--font-heading); font-weight: var(--weight-display);
  font-size: var(--text-h1); line-height: var(--leading-quote); letter-spacing: var(--tracking-display);
}
.prose blockquote p { margin: 0; }
.prose blockquote footer { margin-top: var(--space-4); font-family: var(--font-body); font-size: var(--text-meta); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }
.prose figure ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-card-sm), 1fr)); gap: var(--space-2); }
.prose iframe { max-width: 100%; border: 0; }
.video { aspect-ratio: 16 / 9; }
.video iframe { width: 100%; height: 100%; }
.prose .block-products { margin: var(--space-4) 0; grid-template-columns: repeat(auto-fill, minmax(var(--size-card-sm), 1fr)); }

/* 7. Pages --------------------------------------------------------------- */

/* Intro: H1 left, lead and actions right (About) */
.intro { display: grid; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.intro h1, .intro h2 { margin: 0; }
.intro .lead p:last-child { margin-bottom: 0; }
.intro-plain { padding-top: 0; padding-bottom: 0; }
/* About: the books fanned out like a hand of cards, each turned as on hover; hovering lifts one */
.book-fan { padding-top: var(--space-4); padding-bottom: var(--space-6); overflow-x: clip; position: relative; z-index: 1; } /* the outer books' tilt never widens the page; over Our story, under the sticky header */
.book-fan ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-end; }
.book-fan li { width: clamp(3.75rem, 14vw, 9rem); margin-inline: calc(clamp(3.75rem, 14vw, 9rem) * -0.18); transform: translateY(calc(var(--a) * var(--a) * 0.35rem)) rotate(calc(var(--o) * 5deg)); transform-origin: 50% 120%; transition: transform 0.3s; position: relative; z-index: calc(10 - var(--a)); }
.book-fan li:hover, .book-fan li:focus-within { z-index: 20; transform: translateY(calc(var(--a) * var(--a) * 0.35rem - var(--space-4))) rotate(calc(var(--o) * 5deg)); }
.book-fan .book3d-body { transform: rotateY(-28deg); --book-depth: 5%; } /* thin books: a share of the cover width, not the 2rem block */
.book-fan .book3d-body::after { border-left-width: 2px; }
.book-fan .book3d img { box-shadow: 1rem 1rem 2rem rgb(23 42 54 / 0.2); }
@media (prefers-reduced-motion: reduce) { .book-fan li { transition: none; } }

/* About, Our story: the musicians, faint behind the section like the footer art */
.story-row { position: relative; overflow: hidden; }
.story-row > .wrap { position: relative; }
/* phones: below the text, so no words sit on the faces */
@media (max-width: 47.99rem) { .story-row { padding-bottom: 12rem; } }
.story-art { position: absolute; right: calc(-1 * var(--space-3)); bottom: calc(-1 * var(--space-5)); height: 16rem; aspect-ratio: 750 / 993; opacity: 0.1; background: var(--color-text); -webkit-mask: var(--ink-mask) center / contain no-repeat; mask: var(--ink-mask) center / contain no-repeat; pointer-events: none; }
@media (min-width: 48rem) {
  .story-art { right: auto; left: calc(max(0px, (100% - var(--width-page)) / 2) + var(--gutter)); bottom: auto; top: var(--space-7); height: 24rem; } /* under the heading; the figures fit, the clouds run off the bottom */
}
.intro-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; }
@media (min-width: 48rem) {
  .intro { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

/* Meaning: why the press is called Sahtu */
.meaning { text-align: center; padding-top: var(--space-6); padding-bottom: var(--space-2); }
.meaning img { height: var(--size-logo); width: auto; margin: 0 auto var(--space-3); }
.meaning h2 { margin: 0 0 var(--space-3); }
.meaning-text { max-width: var(--width-text); margin: 0 auto; font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--leading-quote); }

/* People: portrait, role, name, bio */
.people-group { padding-top: var(--space-6); }
.people-group > h2 { margin: 0 0 var(--space-4); }
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-card), 1fr)); gap: var(--space-5) var(--space-4); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-3); }
.person .meta { margin: 0 0 var(--space-1); }
.person h3 { font-size: var(--text-h3); margin: 0 0 var(--space-2); }
.person > p:not(.meta), .person details { font-size: var(--text-sm); }
.person details { margin-top: var(--space-2); }
.person summary { cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--underline-offset); }
.person summary:hover { color: var(--color-action); }

/* Forms: buy box, cart */
.field { display: block; margin-bottom: var(--space-4); }
.field .option-name { display: block; margin-bottom: var(--space-2); }
.field select, .field input, .field textarea, .cart-qty input { font: inherit; min-height: var(--size-control); padding: 0 var(--space-3); border: var(--border-control); border-radius: var(--radius); background-color: var(--color-bg); color: var(--color-text); }
.field select { width: 100%; appearance: none; background: var(--color-bg) var(--chevron) no-repeat right var(--space-3) center; padding-right: calc(var(--space-3) * 2 + 0.75rem); cursor: pointer; }
.field select:hover, .field input:hover, .field textarea:hover, .cart-qty input:hover { border-color: var(--color-text-muted); }
.field-qty input, .cart-qty input { width: 5rem; }
.buy { margin-bottom: var(--space-5); }
.link-button { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-sm); color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--underline-offset); cursor: pointer; }
.link-button:hover { color: var(--color-action); }
.notice { padding: var(--space-3) var(--space-4); background: var(--color-bg-alt); border-radius: var(--radius); }

/* Cart: items left, summary right */
.cart { display: grid; gap: var(--space-5); align-items: start; }
.cart-group { margin-bottom: var(--space-5); }
.cart-group h2 { font-size: var(--text-h3); margin: 0; }
.cart-group ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 4rem 1fr auto auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: var(--border); }
.cart-line img { border-radius: var(--radius); width: 4rem; height: 4rem; object-fit: cover; }
.cart-line a { color: var(--color-text); font-weight: var(--weight-bold); text-decoration: none; }
.cart-line a:hover { color: var(--color-action); }
.cart-line .meta { margin: 0; }
.cart-total { margin: 0; font-weight: var(--weight-bold); }
.cart-line .link-button { grid-column: 2; justify-self: start; }
.cart-summary { background: var(--color-bg-alt); border-radius: var(--radius); padding: var(--space-4); }
.cart-summary h2 { font-size: var(--text-h3); margin: 0 0 var(--space-3); }
.cart-summary dl { margin: 0 0 var(--space-4); }
.cart-summary dl div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; }
.cart-summary dt .meta { display: block; }
.cart-summary dd { margin: 0; }
/* the parts of Shipping, small and indented under it */
.cart-summary dl .cart-part { padding: 0 0 var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-grand { border-top: var(--border); font-weight: var(--weight-bold); font-size: var(--text-h4); }
@media (min-width: 48rem) {
  .cart { grid-template-columns: 2fr 1fr; }
  .cart-summary { position: sticky; top: calc(var(--size-logo) + var(--space-6)); }
}

/* Books: covers stand on Paper like books on a table */
.books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); }
@media (min-width: 48rem) { .books { grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); } }
.book-card a { color: var(--color-text); text-decoration: none; display: block; }
.book-card a:hover .card-title { color: var(--color-action); }
.book-card .book3d { margin-bottom: var(--space-4); }
.book-card .card-title-lao { margin: var(--space-1) 0 0; font-size: var(--text-h4); } /* Lao editions: the Lao title under the English one */

/* Book object: a cover with a shaded spine. On hover it turns and shows its pages. */
.book3d { display: block; perspective: 75rem; }
.book3d-body { position: relative; display: block; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.book3d img, .book3d-blank { display: block; width: 100%; aspect-ratio: var(--ratio-book); object-fit: cover; border-radius: 2px var(--radius-sm) var(--radius-sm) 2px; box-shadow: var(--shadow); transition: box-shadow 0.5s; }
.book3d-blank { display: grid; place-items: center; background: var(--color-bg-alt); }
/* spine: a darker strip with a soft highlight, like the hinge of a hardcover */
.book3d-body::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6%; z-index: 1; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.22), rgb(255 255 255 / 0.18) 45%, rgb(0 0 0 / 0.12) 70%, transparent); }
/* page block: hidden flat against the back edge, seen once the book turns */
.book3d-body::after { content: ""; position: absolute; top: 1.5%; bottom: 1.5%; right: 0; width: var(--book-depth);
  transform-origin: right center; transform: rotateY(-90deg);
  background: repeating-linear-gradient(90deg, var(--color-paper) 0 2px, var(--color-line) 2px 3px); border-left: 4px solid var(--color-text); }
a:hover .book3d-body, .book3d-lg:hover .book3d-body { transform: rotateY(-28deg); }
a:hover .book3d img, .book3d-lg:hover img { box-shadow: 1.5rem 1.5rem 2.5rem rgb(23 42 54 / 0.2); }
@media (prefers-reduced-motion: reduce) { .book3d-body, .book3d img { transition: none; } }
.book3d-square img { aspect-ratio: auto; }
/* books stand on one baseline in the grid, whatever their shape */
.book-card .book3d { aspect-ratio: var(--ratio-book); display: flex; align-items: flex-end; }
.book-card .book3d-body { width: 100%; }
.book-soon { align-self: center; font-size: var(--text-meta); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }
.book-card .meta { margin: var(--space-1) 0 var(--space-2); }
.book-summary { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Ink art (file field "Ink art"): the drawing as is by day. At night its lines become a
   mask painted in the text color, so black ink reads as Paper. The img stays for size and alt. */
.ink { display: block; }
@media (prefers-color-scheme: dark) {
  .ink { background: var(--color-text); -webkit-mask: var(--ink-mask) center / contain no-repeat; mask: var(--ink-mask) center / contain no-repeat; }
  .ink img { opacity: 0; }
}

.books-art { padding-top: var(--space-6); }
.books-art img { max-width: min(100%, 32rem); margin: 0 auto; }

/* Book page: cover left, title and formats right */
.book { display: grid; gap: var(--space-5); padding-top: var(--space-6); padding-bottom: var(--space-6); align-items: start; }
.book-cover { max-width: 28rem; width: 100%; justify-self: center; }
.book-info h1 { font-size: var(--text-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-3); }
.book-author { font-family: var(--font-heading); font-size: var(--text-lead); font-style: italic; margin: 0 0 var(--space-4); }
.book-info .lead { color: var(--color-text-muted); }
.formats { list-style: none; margin: var(--space-5) 0 0; padding: 0; border-top: var(--border); }
.format { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: var(--border); }
.format a { color: var(--color-text); font-weight: var(--weight-bold); text-decoration: none; }
.format a:hover { color: var(--color-action); }
.format .meta, .format .price, .format form { margin: 0; }
.book-body { padding-bottom: var(--space-6); }
@media (min-width: 48rem) {
  .book { grid-template-columns: 5fr 6fr; gap: var(--space-6); }
  .book-info { position: sticky; top: calc(var(--size-logo) + var(--space-6)); }
}

/* Contact: words left, form right */
.contact { display: grid; gap: var(--space-6); align-items: start; }
.contact-form { background: var(--color-bg-alt); border-radius: var(--radius); padding: var(--space-5); }
.contact-form h2 { font-size: var(--text-h3); margin: 0 0 var(--space-4); }
.field input:not([type=number]), .field textarea { width: 100%; }
.field textarea { padding: var(--space-3); resize: vertical; }
.hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 48rem) { .contact { grid-template-columns: 1fr 1fr; } }

/* Policies: contents list beside the text */
.policy { display: grid; gap: var(--space-5); align-items: start; }
.toc ol { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
@media (min-width: 48rem) {
  .policy { grid-template-columns: 14rem 1fr; gap: var(--space-6); }
  .toc { position: sticky; top: calc(var(--size-logo) + var(--space-6)); }
}

/* 404 */
.error-page { display: grid; gap: var(--space-5); align-items: center; padding-top: var(--space-7); padding-bottom: var(--space-7); }
.error-page h1 { font-size: var(--text-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
.error-page img { border-radius: var(--radius); }
@media (min-width: 48rem) { .error-page { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

/* Thank-you receipt: what you bought left, summary right */
.mono { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.receipt { display: grid; gap: var(--space-6); align-items: start; }
.receipt-group + .receipt-group { margin-top: var(--space-6); }
.receipt-group h2 { font-size: var(--text-h3); margin: 0 0 var(--space-1); }
.receipt-group ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: var(--border); }
.receipt-line { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-bottom: var(--border); }
.receipt-line img, .receipt-thumb { width: 6rem; aspect-ratio: var(--ratio-product); object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--color-bg-alt); }
.receipt-line p { margin: 0 0 var(--space-1); }
.receipt-name { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-heading); }
.receipt-line .button { margin-top: var(--space-2); }
.receipt-summary h3 { font-size: var(--text-body); margin: var(--space-5) 0 var(--space-2); }
.receipt-summary address { font-style: normal; margin-bottom: var(--space-4); }
.thanks-next { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); }
@media (min-width: 48rem) {
  .receipt { grid-template-columns: 2fr 1fr; }
  .receipt-summary { position: sticky; top: calc(var(--size-logo) + var(--space-6)); }
}

/* Article */
.article-head { padding-top: var(--space-6); }
.article-head .title { margin: var(--space-2) 0 var(--space-4); }
.article-head .meta a { color: inherit; }
.article-cover { margin: 0 auto var(--space-5); max-width: calc(56rem + 2 * var(--gutter)); }
.article-cover img { width: auto; max-width: 100%; max-height: var(--size-cover); margin: 0 auto; border-radius: var(--radius); } /* never crop: tall photos stay whole */
.article-body { margin-bottom: var(--space-6); }
/* Articles read in Newsreader. Headings share the face, so they go a step bigger than the body. */
.article-body > :is(p, ul, ol):not([class]) { font-family: var(--font-heading); font-size: var(--text-lead); }
.article-body h4 { font-size: var(--text-h3); }
.article-body .chips { margin-top: var(--space-5); }

/* Product: pictures left, details right */
.product { display: grid; gap: var(--space-5); }
.gallery { display: grid; gap: var(--space-4); align-content: start; } /* every picture at full column width, one under another */
.gallery img { width: 100%; border-radius: var(--radius); background: var(--color-bg-alt); }
.price { font-size: var(--text-body); font-weight: var(--weight-body); }
.price-lg { font-size: var(--text-h4); margin-bottom: var(--space-4); }
.option-name { font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.product-info .title { margin-top: 0; font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
@media (min-width: 48rem) {
  .product { grid-template-columns: 7fr 5fr; align-items: start; }
  .product-info { position: sticky; top: calc(var(--size-logo) + var(--space-6)); }
}