/* ==========================================================================
   photobook.studio — design system
   --------------------------------------------------------------------------
   An editorial, gallery-ish system: warm paper ground, near-black ink, one
   terracotta accent and one foil gold. Photography is the loudest thing on
   every page, so the chrome stays quiet — hairline rules instead of shadows,
   generous whitespace instead of boxes, and no gradient anywhere near a photo.

   Bootstrap 5 is loaded for grid/utilities/modal/dropdown only; every component
   it styles visually is overridden below.

   Contents
     1. Tokens
     2. Reset & base type
     3. Layout primitives
     4. Buttons & links
     5. Nav & footer
     6. Cards & surfaces
     7. BOOK MOCKUPS  (the signature component)
     8. Forms
     9. Pricing & calculator
    10. Builder / uploader
    11. Badges, notes, tables, misc
    12. Motion
    13. Print
   ========================================================================== */

/* 1. Tokens ============================================================== */
:root {
  /* ink */
  --ink:        #17130f;
  --ink-2:      #3b342d;
  --ink-3:      #6d6259;
  --muted:      #756b63;

  /* ground */
  --paper:      #fbf9f5;
  --paper-2:    #f4efe7;
  --paper-3:    #ebe4d9;
  --card:       #ffffff;

  /* accents */
  --accent:     #a8492a;
  --accent-2:   #8b3a1f;
  --accent-wash:#fdf1ec;
  --gold:       #a9834b;
  --deep:       #1c3a35;
  --deep-2:     #142825;

  /* semantic */
  --ok:         #2c6b4f;
  --ok-wash:    #edf6f1;
  --warn:       #8a5a12;
  --warn-wash:  #fdf4e3;
  --bad:        #973024;
  --bad-wash:   #fbeeec;

  --line:       rgba(23, 19, 15, .11);
  --line-2:     rgba(23, 19, 15, .18);

  /* type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* spacing scale */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;
  --s9: 6.5rem;

  --r-sm: 3px;
  --r:    5px;
  --r-lg: 10px;

  --shadow-1: 0 1px 2px rgba(23, 19, 15, .05);
  --shadow-2: 0 6px 22px -12px rgba(23, 19, 15, .22);
  --shadow-3: 0 22px 60px -28px rgba(23, 19, 15, .38);

  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 2. Reset & base type =================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0125rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, .display, .serif {
  font-family: var(--serif);
  font-weight: 550;
  letter-spacing: -.014em;
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 var(--s4);
}

h1, .h1 { font-size: clamp(2.1rem, 1.35rem + 2.8vw, 3.5rem); }
h2, .h2 { font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.02rem + .7vw, 1.5rem); line-height: 1.24; }
h4, .h4 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.006em; }

.display-hero {
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.026em;
  font-weight: 500;
}

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.075rem, 1rem + .35vw, 1.28rem);
  line-height: 1.58;
  color: var(--ink-2);
}

.small   { font-size: .8125rem; line-height: 1.5; }
.tiny    { font-size: .75rem;   line-height: 1.45; }
.muted   { color: var(--ink-3); }
.muted-2 { color: var(--muted); }

/* Section eyebrow — small-caps label above a heading. */
.eyebrow {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s3);
}
.eyebrow--muted { color: var(--muted); }

.num { font-variant-numeric: tabular-nums; }

em.q { font-family: var(--serif); font-style: italic; }

hr, .rule { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: var(--s3) var(--s4); z-index: 999;
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

/* 3. Layout primitives =================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}
.wrap--wide   { max-width: 1420px; }
.wrap--narrow { max-width: 760px; }
.wrap--prose  { max-width: 680px; }

.section        { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.section--tall  { padding-block: var(--s9); }
.section--paper { background: var(--paper-2); }
.section--card  { background: var(--card); }

.section--dark { background: var(--deep); color: #e8e4dc; }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark .h4 { color: #fdfbf7; }
.section--dark .muted, .section--dark .lede { color: #b9c4bf; }
.section--dark .eyebrow { color: #cfa96f; }
.section--dark hr { border-color: rgba(255, 255, 255, .14); }
/* :not(.btn) is load-bearing. `.section--dark a` is (0,1,1) and `.btn` is
   (0,1,0), so without the exclusion this rule wins over every button's own
   colour — which is how a cream button on a cream background ends up with
   cream text and disappears. */
.section--dark a:not(.btn) { color: #f0d8b8; }
.section--dark .btn-text { color: #f0d8b8; }
.section--dark .btn-text:hover { color: #fff; }
.section--dark .link-quiet { color: #cfd8d5; border-color: rgba(255, 255, 255, .28); }
.section--dark .link-quiet:hover { color: #fff; border-color: #fff; }

.section--ink { background: var(--ink); color: #eae5df; }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5, .section--ink .h4 { color: #fff; }
.section--ink .muted, .section--ink .lede { color: #b3aaa1; }
.section--ink .eyebrow { color: #cfa96f; }
.section--ink a:not(.btn) { color: #f0d8b8; }   /* see the .section--dark note */
.section--ink .btn-text { color: #f0d8b8; }
.section--ink .btn-text:hover { color: #fff; }
.section--ink .link-quiet { color: #cfc5bc; border-color: rgba(255, 255, 255, .28); }
.section--ink .link-quiet:hover { color: #fff; border-color: #fff; }

/* Home hero. Laid out by grid-area so the books can sit BESIDE the copy on a
   desktop but BETWEEN the headline and the buttons on a phone — a photo book
   above the fold is the whole point of the page, and stacking the two columns
   in source order pushes them off a 660px-tall screen. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas:
    "intro   art"
    "actions art";
  column-gap: clamp(var(--s5), 4vw, var(--s8));
  row-gap: var(--s6);
  align-items: center;
}
.hero__intro   { grid-area: intro; }
.hero__art     { grid-area: art; display: grid; place-items: center; }
.hero__actions { grid-area: actions; }

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "art" "actions";
    row-gap: var(--s5);
  }
  /* Tighter above the fold: less padding, smaller headline and a compact fan, so
     the headline, the books and both buttons clear a short phone viewport.
     `.section.hero` (0,2,0) is deliberate — it has to outrank the plain
     `.section` padding override in the 560px query further down the file. */
  .section.hero { padding-block: var(--s4) var(--s7); }
  .hero__grid { row-gap: var(--s4); }
  .hero .display-hero { font-size: clamp(1.95rem, 1.4rem + 3vw, 2.6rem); }
  .hero .eyebrow { margin-bottom: var(--s2); }
  .hero .lede { margin-top: var(--s3) !important; }
  .hero__art .book-fan { padding-block: 0; }
}

.sec-head { max-width: 640px; margin-bottom: var(--s6); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--tight { gap: var(--s4); }
.grid--loose { gap: var(--s6); }

.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(var(--s5), 4vw, var(--s8));
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stack > * + *    { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s6); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.cluster--between { justify-content: space-between; }
.cluster--center  { justify-content: center; }
.cluster--gap5    { gap: var(--s5); }

.sticky-side { position: sticky; top: 88px; }

/* Every collapsed column below is `minmax(0, 1fr)`, never a bare `1fr`.
   A grid item defaults to min-width:auto, so a bare 1fr column refuses to
   shrink below its widest fixed-width child — which on a phone means the book
   mockups (fixed px) push the whole page 260px wider than the viewport. */
@media (max-width: 1040px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--even { grid-template-columns: minmax(0, 1fr); }
  .split--reverse > :first-child { order: 0; }
  .sticky-side { position: static; }
  .calc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }
  .grid--auto { grid-template-columns: minmax(0, 1fr); }
  .section, .section--tall { padding-block: var(--s7); }
  .wrap { padding-inline: var(--s4); }
  .field-row, .field-row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Nothing may push the document wider than the viewport. Individually wide
   things (tables, spreads) scroll inside their own container instead. */
html, body { max-width: 100%; overflow-x: clip; }

/* 4. Buttons & links ===================================================== */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--accent-2); }

.link-quiet {
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.link-quiet:hover { color: var(--ink); border-color: var(--ink); }

.btn,
.btn-primary, .btn-secondary, .btn-outline-secondary, .btn-light, .btn-dark {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: .78rem 1.35rem;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 550;
  line-height: 1.2;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { background: #000; border-color: #000; color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; }

.btn--accent, .btn-primary { --btn-bg: var(--accent); --btn-bd: var(--accent); }
.btn--accent:hover, .btn-primary:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: #fff;
}

.btn--ghost, .btn-outline-secondary, .btn-secondary {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2);
}
.btn--ghost:hover, .btn-outline-secondary:hover, .btn-secondary:hover {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--light:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }

.btn--on-dark { --btn-bg: #fdfbf7; --btn-fg: var(--deep-2); --btn-bd: #fdfbf7; }
.btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--deep-2); }

.btn--outline-on-dark {
  --btn-bg: transparent; --btn-fg: #eee9e0; --btn-bd: rgba(255, 255, 255, .32);
}
.btn--outline-on-dark:hover {
  background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff;
}

.btn--lg { padding: .98rem 1.85rem; font-size: 1.0125rem; }
.btn--sm { padding: .5rem .85rem; font-size: .8125rem; }
.btn--block { width: 100%; }
.btn--danger { --btn-bg: var(--bad); --btn-bd: var(--bad); }

.btn-text {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: none; border: 0; padding: .78rem 0;
  font: inherit; font-weight: 550; color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.btn-text::after { content: "→"; transition: transform .18s var(--ease); }
.btn-text:hover { color: var(--accent); }
.btn-text:hover::after { transform: translateX(3px); }

/* 5. Nav & footer ======================================================== */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 249, 245, .94);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head__bar { display: flex; align-items: center; gap: var(--s5); min-height: 68px; }

.brand {
  display: inline-flex; align-items: baseline;
  font-family: var(--serif);
  font-size: 1.26rem; font-weight: 600; letter-spacing: -.028em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__dot { color: var(--accent); }
/* The terracotta accent is only 3.2:1 on the ink footer; lighten it there. */
.site-foot .brand__dot, .section--ink .brand__dot { color: #d98f6a; }

.nav-links { display: flex; align-items: center; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: .5rem .7rem;
  font-size: .9125rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none; border-radius: var(--r-sm);
}
.nav-links a:hover { color: var(--ink); background: var(--paper-3); }
.nav-links a.is-active { color: var(--ink); font-weight: 600; }

/* On desktop the menu is the flex row that holds the links, the spacer and the
   actions. Without this it is a block element and the actions drop to a second
   line under the nav links. */
.site-head__menu {
  display: flex; align-items: center; gap: var(--s5); flex: 1 1 auto; min-width: 0;
}
.nav-spacer { flex: 1 1 auto; }
.site-head__actions { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }

.nav-icon-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem; border: 0; background: none;
  color: var(--ink-2); text-decoration: none; font-size: .9125rem;
  font-weight: 500; border-radius: var(--r-sm); cursor: pointer;
}
.nav-icon-btn:hover { color: var(--ink); background: var(--paper-3); }

.cart-pip {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: .6875rem; font-weight: 700; line-height: 1;
  background: var(--accent); color: #fff; border-radius: 9px;
}

.nav-toggle {
  display: none; border: 1px solid var(--line-2); background: none;
  border-radius: var(--r-sm); padding: .45rem .6rem; cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); }
.nav-toggle span + span { margin-top: 4px; }

/* Announcement strip — the seasonal order-by deadline lives here. */
.strip {
  background: var(--deep); color: #dfe7e4;
  font-size: .8125rem; text-align: center; padding: .55rem var(--s4);
}
.strip a { color: #f0d8b8; }
.strip strong { color: #fff; }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .site-head__menu { display: none; width: 100%; padding-bottom: var(--s4); }
  .site-head__menu.is-open { display: block; }
  .site-head__bar { flex-wrap: wrap; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: .65rem .25rem; border-bottom: 1px solid var(--line); }
  .nav-spacer { display: none; }
  .site-head__actions { margin-top: var(--s3); flex-wrap: wrap; }
}

.site-foot {
  background: var(--ink); color: #b3aaa1;
  padding-block: var(--s8) var(--s5);
  font-size: .875rem;
}
.site-foot h5 {
  font-family: var(--sans); font-size: .6875rem; font-weight: 650;
  letter-spacing: .13em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--s3);
}
.site-foot a { color: #b3aaa1; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li + li { margin-top: .45rem; }
.site-foot__grid { display: grid; gap: var(--s6); grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
.site-foot__bottom {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; align-items: center; font-size: .8125rem;
}
@media (max-width: 900px) { .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .site-foot__grid { grid-template-columns: 1fr; } }

/* 6. Cards & surfaces ==================================================== */
.card, .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.panel { padding: clamp(var(--s5), 3vw, var(--s6)); }
.panel--flush { padding: 0; overflow: hidden; }
.panel--paper { background: var(--paper-2); border-color: transparent; }
.panel--accent { background: var(--accent-wash); border-color: rgba(168, 73, 42, .18); }
.panel--dark { background: var(--deep); border-color: transparent; color: #e8e4dc; }
.panel--dark h3, .panel--dark h4 { color: #fff; }
.panel--tight { padding: var(--s4); }

.lift {
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }

.tile { display: block; text-decoration: none; color: inherit; }
.tile:hover { color: inherit; }
.tile__media {
  position: relative; overflow: hidden;
  border-radius: var(--r); background: var(--paper-3);
  aspect-ratio: 4 / 3;
}
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.035); }
.tile__media--square { aspect-ratio: 1; }
.tile__media--tall   { aspect-ratio: 3 / 4; }
.tile__media--wide   { aspect-ratio: 16 / 10; }
.tile__body { padding-top: var(--s3); }
.tile__title {
  font-family: var(--serif); font-size: 1.075rem; font-weight: 560;
  margin: 0 0 .2rem; letter-spacing: -.01em;
}
.tile:hover .tile__title { color: var(--accent); }
.tile__tag {
  position: absolute; left: var(--s3); top: var(--s3);
  background: rgba(23, 19, 15, .74); color: #fff;
  font-size: .625rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 3px; backdrop-filter: blur(4px);
}

/* The step numerals carry meaning (the order of the steps), so they cannot be
   a near-invisible tint — --paper-3 measured 1.2:1 against the page. This is
   large text, so 3:1 is the bar; #94835f clears it on all three grounds the
   numerals actually sit on (paper 3.5, paper-2 3.2, white 3.7). */
.step__n {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
  color: #94835f; font-weight: 600; display: block; margin-bottom: var(--s2);
}
.section--dark .step__n, .section--ink .step__n { color: rgba(255, 255, 255, .2); }

.feat-list { list-style: none; margin: 0; padding: 0; }
.feat-list li {
  position: relative; padding: .6rem 0 .6rem 1.6rem;
  border-bottom: 1px solid var(--line); font-size: .9375rem;
}
.feat-list li:last-child { border-bottom: 0; }
.feat-list li::before {
  content: ""; position: absolute; left: .1rem; top: 1.12rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.feat-list--check li::before {
  content: "✓"; background: none; color: var(--ok);
  width: auto; height: auto; top: .55rem; font-weight: 700; font-size: .875rem;
}
.feat-list--cross li { color: var(--ink-3); }
.feat-list--cross li::before {
  content: "✕"; background: none; color: var(--muted);
  width: auto; height: auto; top: .55rem; font-weight: 700; font-size: .8125rem;
}
.feat-list--plain li { border-bottom: 0; padding-block: .25rem; }
.section--dark .feat-list li, .section--ink .feat-list li { border-color: rgba(255,255,255,.13); }

.quote {
  font-family: var(--serif); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  line-height: 1.36; letter-spacing: -.014em; color: var(--ink); margin: 0;
}
.section--dark .quote, .section--ink .quote { color: #fdfbf7; }
.quote__by { display: block; margin-top: var(--s4); font: 500 .875rem/1.4 var(--sans); color: var(--ink-3); }
.section--dark .quote__by, .section--ink .quote__by { color: #a8b5b1; }

/* 7. BOOK MOCKUPS ======================================================== */
/* A closed book in three-quarter view. `--bk-w` drives everything, so the same
   markup scales from a 90px thumbnail to a 520px hero. Thickness reacts to page
   count through --bk-thick, which templates set inline. */
.book {
  --bk-w: 260px;
  --bk-ratio: 1;      /* trim width / height */
  --bk-thick: 16px;
  --bk-tilt: 13deg;
  position: relative;
  /* min() rather than a bare --bk-w: the mockups are sized in px by the
     templates, and on a phone a 340px cover in a 358px column is what tips the
     page into horizontal scroll. Capping against the viewport keeps every
     arrangement (single, fan, stack) inside the column at any width. */
  width: min(var(--bk-w), 64vw);
  max-width: 100%;
  aspect-ratio: var(--bk-ratio);
  transform-style: preserve-3d;
  perspective: 1500px;
  flex: 0 0 auto;
}
.book__body {
  position: absolute; inset: 0;
  transform: rotateY(var(--bk-tilt));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease);
  border-radius: 2px 4px 4px 2px;
  background: var(--paper-3);
  box-shadow: var(--shadow-3), inset -1px 0 0 rgba(255, 255, 255, .35);
}
.book:hover .book__body { transform: rotateY(calc(var(--bk-tilt) - 7deg)); }
.book--static .book__body { transition: none; }
.book--flat .book__body,
.book--flat:hover .book__body { transform: none; }

.book__cover { position: absolute; inset: 0; overflow: hidden; border-radius: 2px 4px 4px 2px; }
.book__cover img { width: 100%; height: 100%; object-fit: cover; }

/* Gutter shading plus the sheen a laminated cover picks up. */
.book__cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .30) 0, rgba(0, 0, 0, .10) 2.5%, rgba(0, 0, 0, 0) 7%,
      rgba(0, 0, 0, 0) 88%, rgba(255, 255, 255, .07) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 42%);
}

/* The two thickness faces, folded back into the depth plane.
   ---------------------------------------------------------------------------
   Which one you can see is decided by the SIGN of --bk-tilt, because that is
   which way the face normals turn:

     --bk-tilt POSITIVE  → spine face visible (left)   ← shelf-like, shows title
     --bk-tilt NEGATIVE  → page block visible (right)  ← shows the paper stack

   Both faces extend backwards from the cover plane (z: 0 → -thickness), so each
   is rotated 90° about the cover edge it is hinged to.
   --------------------------------------------------------------------------- */

/* Page block along the fore edge. The repeating 1px stripe is what makes it read
   as stacked leaves rather than a solid slab; the inset shadow darkens the
   crease where the block meets the cover. */
.book__pages {
  position: absolute; top: 1.2%; bottom: 1.2%; right: 0;
  width: var(--bk-thick);
  transform: rotateY(-90deg);
  transform-origin: right center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, 0) 22%,
                    rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .12) 100%),
    repeating-linear-gradient(90deg, #fdfbf6 0 1px, #e7dfd2 1px 2px);
  border-radius: 0 2px 2px 0;
  box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, .35);
}

/* Spine face. Visible at a POSITIVE --bk-tilt — the most book-like angle, and
   the one that shows the printed title. */
.book__spine {
  position: absolute; top: 1.2%; bottom: 1.2%; left: 0;
  width: var(--bk-thick);
  transform: rotateY(90deg);
  transform-origin: left center;
  background: var(--bk-spine, #2a2521);
  border-radius: 2px 0 0 2px;
  box-shadow: inset -2px 0 4px -1px rgba(0, 0, 0, .45),
              inset 0 0 0 1px rgba(255, 255, 255, .07);
  overflow: hidden;
}
/* Vertical title running up the spine. Clamped hard: at a 10px-wide spine there
   is room for a hairline of type and nothing else. */
.book__spine span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: min(calc(var(--bk-thick) * .46), calc(var(--bk-w) * .03));
  line-height: 1; letter-spacing: .04em; white-space: nowrap;
  color: rgba(255, 255, 255, .72);
  writing-mode: vertical-rl;
}
.book--linen .book__spine { background: var(--bk-spine, #6f6a5c); }
.book--natural  .book__spine { --bk-spine: #ab9a7f; }
.book--sand     .book__spine { --bk-spine: #a3937a; }
.book--ink      .book__spine { --bk-spine: #23282b; }
.book--olive    .book__spine { --bk-spine: #4e5645; }
.book--rose     .book__spine { --bk-spine: #94685f; }
.book--charcoal .book__spine { --bk-spine: #333335; }
.book--leather  .book__spine { --bk-spine: #31231a; }
.book--soft     .book__spine span { color: rgba(255, 255, 255, .6); }

/* Board overhang on a case-bound book. Drawn as a ring rather than by insetting
   the cover negatively — a negative inset lets the photo escape .book__body,
   which cannot use overflow:hidden without flattening the 3D page block. */
.book--hard .book__body {
  box-shadow: var(--shadow-3), inset -1px 0 0 rgba(255, 255, 255, .3),
              0 0 0 2px rgba(23, 19, 15, .10);
}
.book--soft { --bk-thick: 8px; }
.book--soft .book__cover::after {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .07) 3%, rgba(0, 0, 0, 0) 9%);
}

/* Linen: woven texture instead of a photo, plus a foil title. */
.book--linen .book__cover > img { display: none; }
.book--linen .book__cover {
  background-color: #6f6a5c;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .055) 0 1px, transparent 1px 3px);
}
.book--natural  .book__cover { background-color: #bfae91; }
.book--sand     .book__cover { background-color: #b6a58a; }
.book--ink      .book__cover { background-color: #2c3236; }
.book--olive    .book__cover { background-color: #5b6350; }
.book--rose     .book__cover { background-color: #a5766c; }
.book--charcoal .book__cover { background-color: #3b3b3d; }

/* Leather: grain and a deeper sheen. */
.book--leather .book__cover > img { display: none; }
.book--leather .book__cover {
  background-color: #3a2a20;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .10), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05) 0 2px, transparent 2px 5px);
}

/* Foil-stamped title block for linen / leather covers. */
.book__foil {
  position: absolute; left: 13%; right: 13%; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--serif); font-size: calc(var(--bk-w) * .058);
  line-height: 1.28; letter-spacing: .03em;
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .18);
  padding-block: .55em;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  pointer-events: none;
}
.book__foil--blind { color: rgba(255, 255, 255, .32); text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }

/* Inset cover window on a linen book. */
.book__window {
  position: absolute; left: 14%; right: 14%; top: 13%; height: 45%;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.book--linen .book__window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book--window .book__foil { top: auto; bottom: 12%; transform: none; }

/* Overlapping arrangement for hero / gallery groups. */
.book-stack { position: relative; display: flex; align-items: flex-end; }
.book-stack .book + .book { margin-left: -3.25rem; }
.book-stack .book:nth-child(2) { z-index: 2; }
.book-stack .book:nth-child(3) { z-index: 3; }

/* Fanned trio for the hero — centre book forward, outer two tilted away.
   The whole group opens up slightly on hover, which reads as "these are real
   objects" without animating anything on load. */
.book-fan {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  padding-block: var(--s5);
}
.book-fan .book { transition: transform .55s var(--ease); }
/* The fan is built out of DIFFERENT 3D tilts, not 2D rotations. A 2D rotate()
   fights the perspective and flattens the outer books into leaning photo cards
   with no visible page block; a bigger --bk-tilt widens the fore edge instead,
   which is what makes them read as solid objects. */
/* Left book turned spine-out (positive tilt), right book fore-edge-out
   (negative). Showing both faces in one group is what sells them as objects
   rather than as photo prints leaning on a wall. */
.book-fan .book:nth-child(1) {
  --bk-tilt: 30deg; z-index: 1; margin-right: -2rem; transform: translateY(12px);
}
.book-fan .book:nth-child(2) { --bk-tilt: 11deg; z-index: 3; }
.book-fan .book:nth-child(3) {
  --bk-tilt: -26deg; z-index: 2; margin-left: -2rem; transform: translateY(22px);
}
.book-fan .book:nth-child(3):hover .book__body { transform: rotateY(-19deg); }
.book-fan:hover .book:nth-child(1) { transform: translate(-16px, 8px); }
.book-fan:hover .book:nth-child(3) { transform: translate(16px, 18px); }
/* Three books side by side cannot each take 64vw. On a phone the fan tightens:
   smaller covers, deeper overlap, so the group still fits one column. */
@media (max-width: 700px) {
  .book-fan .book { width: min(var(--bk-w), 38vw); }
  .book-fan .book:nth-child(1) { margin-right: -13vw; }
  .book-fan .book:nth-child(3) { margin-left: -13vw; }
  .book-stack .book { width: min(var(--bk-w), 44vw); }
  .book-stack .book + .book { margin-left: -12vw; }
}
@media (prefers-reduced-motion: reduce) {
  .book-fan:hover .book:nth-child(1) { transform: translateY(12px); }
  .book-fan:hover .book:nth-child(3) { transform: translateY(22px); }
}

/* An OPEN book: two pages plus a centre hinge. Used for spread previews and to
   demonstrate the lay-flat difference. */
.spread {
  --sp-ratio: 2;      /* open width / height */
  position: relative;
  width: 100%;
  aspect-ratio: var(--sp-ratio);
  background: #fff;
  border-radius: 2px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.spread__inner { position: absolute; inset: 0; display: flex; }
.spread__page { position: relative; width: 50%; height: 100%; overflow: hidden; background: var(--paper-3); }
.spread__page img { width: 100%; height: 100%; object-fit: cover; }

/* The gutter. A conventionally bound book loses image in the middle;
   .spread--layflat does not — the visual argument for the lay-flat tier. */
.spread::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 46px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .28) 34%, rgba(0, 0, 0, .42) 50%,
    rgba(0, 0, 0, .28) 66%, rgba(0, 0, 0, 0) 100%);
}
.spread--layflat::after {
  width: 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .13), rgba(0, 0, 0, .05));
}
.spread--bleed .spread__inner { display: block; }
.spread--bleed .spread__page { width: 100%; }
.spread-caption { margin-top: var(--s3); font-size: .8125rem; color: var(--ink-3); }

/* Positioned photo cells inside a spread, driven by SpreadTemplate.cells. */
.spread__cell { position: absolute; overflow: hidden; background: var(--paper-3); }
.spread__cell img { width: 100%; height: 100%; object-fit: cover; }

/* Material swatches (linen colourways, foil finishes). */
.swatch {
  aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), var(--shadow-1);
}
.swatch--linen-natural  { background: #bfae91; }
.swatch--linen-sand     { background: #b6a58a; }
.swatch--linen-olive    { background: #5b6350; }
.swatch--linen-ink      { background: #2c3236; }
.swatch--linen-rose     { background: #a5766c; }
.swatch--linen-slate    { background: #6f7a80; }
.swatch--linen-cream    { background: #e7ddc8; }
.swatch--linen-charcoal { background: #3b3b3d; }
.swatch--foil-gold   { background: linear-gradient(135deg, #d9b878, #a9834b 55%, #e6cd9d); }
.swatch--foil-copper { background: linear-gradient(135deg, #d59d78, #a2603c 55%, #e3b492); }
.swatch--foil-white  { background: linear-gradient(135deg, #fff, #ddd6c8); }
.swatch--foil-blind  { background: linear-gradient(135deg, #cfc7b8, #b4ab9b); }

.swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: var(--s4); }
.swatch-row figure { margin: 0; }
.swatch-row figcaption { margin-top: .5rem; font-size: .6875rem; text-align: center; color: var(--ink-3); }

/* 8. Forms =============================================================== */
label, .label {
  display: block; font-size: .8125rem; font-weight: 600;
  letter-spacing: .01em; color: var(--ink-2); margin-bottom: .35rem;
}
.label-hint { font-weight: 400; color: var(--muted); }

.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"], input[type="search"],
select, textarea, .form-control, .form-select {
  width: 100%;
  padding: .68rem .85rem;
  font-family: var(--sans); font-size: .9375rem; line-height: 1.4;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  appearance: none;
}
select, .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236d6259' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.2rem;
}
textarea { min-height: 110px; resize: vertical; }
.input:focus, input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 73, 42, .13);
}
input::placeholder, textarea::placeholder { color: #b0a79e; }

.field + .field { margin-top: var(--s4); }
.field-row { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .field-row, .field-row--3 { grid-template-columns: 1fr; } }

.help { margin-top: .35rem; font-size: .75rem; color: var(--muted); }
.err  { margin-top: .35rem; font-size: .8125rem; color: var(--bad); }

/* Radio / checkbox rendered as a selectable card. */
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The box is a flex column, and its children are forced to `block`, because the
   markup uses <span>s (a <label> may not contain block-level flow content in
   older parsers). Left inline, they all run together on one line and the card
   collapses to a sliver with the text spilling out of it. */
.pick__box {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: var(--s4); background: #fff; height: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pick__box > * { display: block; }
.pick:hover .pick__box { border-color: var(--ink-3); }
.pick input:checked + .pick__box {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-2);
}
.pick input:focus-visible + .pick__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick input:disabled + .pick__box { opacity: .45; cursor: not-allowed; }
.pick__title { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .15rem; }
.pick__meta { display: block; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
.pick__price { display: inline; font-weight: 650; font-variant-numeric: tabular-nums; }
.pick__box .flag { display: inline-block; }

.check {
  display: flex; gap: var(--s3); align-items: flex-start;
  font-size: .9375rem; font-weight: 400; color: var(--ink-2);
  margin-bottom: 0; cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; margin: .18rem 0 0; flex: 0 0 auto;
  accent-color: var(--accent);
}

/* Range slider — the page-count control. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; background: none; padding: 0; border: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--paper-3);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; background: var(--ink);
  border: 3px solid #fff; box-shadow: var(--shadow-2); cursor: grab;
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--paper-3); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff; cursor: grab;
}

.captcha { border: 1px solid var(--line-2); border-radius: var(--r); }

/* 9. Pricing & calculator ================================================ */
.price {
  font-family: var(--serif); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
}
.price--xl { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); }
.price--lg { font-size: 2rem; }
.price--md { font-size: 1.4rem; }
.price__cur { font-size: .55em; vertical-align: .5em; margin-right: .06em; }
.price__unit { font: 400 .8125rem/1 var(--sans); color: var(--ink-3); margin-left: .35rem; }

.tier { display: flex; flex-direction: column; height: 100%; }
.tier__head { padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.tier__body { padding-top: var(--s4); flex: 1 1 auto; }
.tier__foot { padding-top: var(--s5); }
.tier--featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-2); }

.flag {
  display: inline-block; padding: .18rem .5rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; border-radius: 3px;
  background: var(--ink); color: #fff;
}
.flag--accent { background: var(--accent); }
.flag--ok    { background: var(--ok-wash);   color: var(--ok); }
.flag--warn  { background: var(--warn-wash); color: var(--warn); }
.flag--bad   { background: var(--bad-wash);  color: var(--bad); }
.flag--gold  { background: #f6ecd9; color: #7a5a22; }
.flag--quiet { background: var(--paper-3); color: var(--ink-2); }

.calc {
  display: grid; gap: clamp(var(--s5), 4vw, var(--s7));
  grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
  align-items: start;
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc__out { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: var(--s6); }
.calc__out h3, .calc__out h4 { color: #fff; }
.calc__row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: .55rem 0; font-size: .9375rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.calc__row:last-of-type { border-bottom: 0; }
.calc__row span:first-child { color: #b3aaa1; }
.calc__row--total {
  margin-top: var(--s3); padding-top: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, .28); border-bottom: 0;
  align-items: baseline;
}

/* Honest-pricing comparison table. */
.cmp { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.cmp th, .cmp td {
  padding: .8rem var(--s3); text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.cmp thead th {
  font-size: .6875rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
}
.cmp tbody th { font-weight: 550; }
.cmp td.yes { color: var(--ok); font-weight: 600; }
.cmp td.no  { color: var(--muted); }
.cmp .us { background: var(--accent-wash); }
.cmp thead th.us { color: var(--accent); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 10. Builder / uploader ================================================= */
.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--paper-2);
  padding: clamp(var(--s6), 6vw, var(--s8)) var(--s5);
  text-align: center;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.drop.is-over { border-color: var(--accent); background: var(--accent-wash); }
.drop__icon { font-size: 2rem; line-height: 1; color: var(--muted); margin-bottom: var(--s3); }

.thumbs { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.thumb {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-sm); background: var(--paper-3); cursor: grab;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__x {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem; line-height: 1;
  opacity: 0; transition: opacity .15s var(--ease);
}
.thumb:hover .thumb__x, .thumb:focus-within .thumb__x { opacity: 1; }
.thumb__dpi {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .2rem .35rem; font-size: .625rem; font-weight: 650;
  text-align: center; color: #fff;
}
.thumb__dpi--warn  { background: rgba(138, 90, 18, .92); }
.thumb__dpi--block { background: rgba(151, 48, 36, .94); }
.thumb.is-dragging { opacity: .4; }
.thumb.is-target { outline: 2px solid var(--accent); outline-offset: 1px; }
.thumb__cover {
  position: absolute; left: 4px; top: 4px;
  font-size: .5625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #fff; color: var(--ink); padding: .15rem .35rem; border-radius: 2px;
}

.progress-line { height: 3px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.progress-line > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s var(--ease); }

.summary { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.summary__head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.summary__body { padding: var(--s5); }
.summary__row { display: flex; justify-content: space-between; gap: var(--s4); padding: .4rem 0; font-size: .9375rem; }
.summary__row--total {
  margin-top: var(--s3); padding-top: var(--s4);
  border-top: 1px solid var(--line-2);
  font-size: 1.0625rem; font-weight: 650; align-items: baseline;
}
.summary__row .num { font-variant-numeric: tabular-nums; }

/* 11. Badges, notes, tables, misc ======================================== */
.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: var(--s4) var(--s5);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .9375rem;
}
.note--ok    { border-color: var(--ok);     background: var(--ok-wash); }
.note--warn  { border-color: var(--warn);   background: var(--warn-wash); }
.note--bad   { border-color: var(--bad);    background: var(--bad-wash); }
.note--quiet { border-color: var(--line-2); background: var(--paper-2); }
.note p:last-child { margin-bottom: 0; }

.trust { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: .8125rem; color: var(--ink-3); }
.trust > span { display: inline-flex; align-items: center; gap: .4rem; }
.trust b { color: var(--ink); font-weight: 600; }
.section--dark .trust, .section--ink .trust { color: #a8b5b1; }
.section--dark .trust b, .section--ink .trust b { color: #fff; }

.countdown { display: inline-flex; align-items: baseline; gap: .3rem; font-family: var(--serif); font-variant-numeric: tabular-nums; }
.countdown b { font-size: 1.6em; font-weight: 600; }

/* Order progress rail. */
.rail { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.rail li {
  flex: 1 1 0; position: relative; padding-top: 22px;
  font-size: .8125rem; color: var(--muted); text-align: center;
}
.rail li::before {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); z-index: 2;
}
.rail li::after {
  content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 1.5px;
  background: var(--line-2); z-index: 1;
}
.rail li:first-child::after { left: 50%; }
.rail li:last-child::after  { right: 50%; }
.rail li.is-done { color: var(--ink-2); }
.rail li.is-done::before { background: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok); }
.rail li.is-done::after  { background: var(--ok); }
.rail li.is-current { color: var(--ink); font-weight: 650; }
.rail li.is-current::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash), inset 0 0 0 1.5px var(--accent);
}

/* FAQ accordion on <details>. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--s4);
  align-items: baseline; cursor: pointer; list-style: none;
  padding: var(--s4) 0; font-family: var(--serif);
  font-size: 1.075rem; font-weight: 550; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto; font-family: var(--sans);
  font-size: 1.25rem; font-weight: 400; color: var(--muted); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--s5); max-width: 68ch; color: var(--ink-2); }

.masonry { column-gap: var(--s4); columns: 4; }
.masonry > * { margin-bottom: var(--s4); break-inside: avoid; }
@media (max-width: 1040px) { .masonry { columns: 3; } }
@media (max-width: 760px)  { .masonry { columns: 2; } }

.band { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.band img { aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (max-width: 760px) { .band { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); } }

.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.strike { text-decoration: line-through; color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ratio-sq { aspect-ratio: 1; object-fit: cover; width: 100%; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }

/* Bootstrap components we still lean on. */
.dropdown-menu {
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-2); padding: .35rem; font-size: .9125rem;
  max-height: min(70vh, 380px); overflow-y: auto;
}
.dropdown-item { border-radius: var(--r-sm); padding: .45rem .65rem; color: var(--ink-2); }
.dropdown-item:hover { background: var(--paper-2); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--ink); color: #fff; }
.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.modal-header, .modal-footer { border-color: var(--line); padding: var(--s5); }
.modal-body { padding: var(--s5); }
.alert { border: 0; border-radius: var(--r); padding: var(--s4) var(--s5); font-size: .9375rem; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert-danger  { background: var(--bad-wash);  color: var(--bad); }
.alert-success { background: var(--ok-wash);   color: var(--ok); }
.alert-warning { background: var(--warn-wash); color: var(--warn); }

/* Stripe Payment Element host. */
#payment-element, #card-element { min-height: 42px; }

/* 12. Motion ============================================================= */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .book:hover .book__body { transform: rotateY(var(--bk-tilt)); }
}

/* 13. Print ============================================================== */
@media print {
  .site-head, .site-foot, .strip, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .section { padding-block: var(--s4); }
}