/* ============================================================
   Publications - public storefront.

   Scoped under .pubs so nothing collides with the Crafto theme.
   Palette is keyed to the same NIStructE maroon the events module
   uses, but the tokens are declared here so this stylesheet stands
   on its own and can be loaded without general-events.css.
   ============================================================ */

:root {
  --pub-maroon: #892559;
  --pub-maroon-deep: #6e1c47;
  --pub-wash: #f8eaf1;
  --pub-ink: #1f171b;
  --pub-ink-2: #5c4e55;
  --pub-muted: #6e6675;          /* 5.5:1 on white */
  --pub-line: #e7e1e5;
  --pub-paper: #faf8f9;
  --pub-good: #2f6b4f;
  --pub-warn: #8a5a12;
  --pub-bad: #a32a2a;
  --pub-radius: 12px;
  --pub-navclear: 104px;         /* the theme navbar overlays the page */
  --pub-shadow: 0 1px 2px rgba(31,23,27,.04), 0 10px 30px -16px rgba(31,23,27,.22);
}

.pubs { color: var(--pub-ink); }
.pubs *, .pubs *::before, .pubs *::after { box-sizing: border-box; }

/* ── Shared ──────────────────────────────────────────────── */
.pubs-section { padding: 56px 0; }
.pubs-section--afterhead { padding-top: 8px; }
.pubs-section--closed { padding: calc(var(--pub-navclear) + 40px) 0 56px; }

.pubs-pagehead {
  padding: calc(var(--pub-navclear) + 30px) 0 28px;
  border-bottom: 1px solid var(--pub-line);
  background: linear-gradient(180deg, var(--pub-paper) 0%, #fff 100%);
  margin-bottom: 34px;
}
@media (max-width: 767px) { .pubs-pagehead { padding-bottom: 20px; margin-bottom: 22px; } }

.pubs-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pub-maroon); font-weight: 700;
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.pubs-eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--pub-line); }

.pubs-h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.1; font-weight: 700;
           letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.pubs-h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; margin: 0 0 14px;
           letter-spacing: -.01em; text-wrap: balance; }
.pubs-h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.pubs-lead { font-size: 1.03rem; line-height: 1.65; color: var(--pub-ink-2); max-width: 62ch; }

.pubs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pub-maroon); color: #fff; border: 1px solid var(--pub-maroon);
  padding: 13px 26px; border-radius: 8px;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color .18s, box-shadow .18s;
  /* A button is only ever as wide as its label; without these the text wraps
     mid-word when the button is squeezed by a flex row. */
  white-space: nowrap; flex: 0 0 auto; min-width: max-content;
}
.pubs-btn:hover { background: var(--pub-maroon-deep); color: #fff;
                  box-shadow: 0 8px 20px -10px rgba(137,37,89,.7); }
.pubs-btn:disabled, .pubs-btn[aria-disabled="true"] {
  background: #cdc4cc; border-color: #cdc4cc; color: #fff; cursor: not-allowed; box-shadow: none;
}
.pubs-btn--ghost { background: transparent; color: var(--pub-maroon); }
.pubs-btn--ghost:hover { background: var(--pub-wash); color: var(--pub-maroon-deep); }
.pubs-btn--block { width: 100%; }

.pubs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
             border-radius: 999px; font-size: 12px; font-weight: 700;
             letter-spacing: .02em; white-space: nowrap; }
.pubs-pill--good { background: #e7f2ec; color: var(--pub-good); }
.pubs-pill--warn { background: #fdf2e2; color: var(--pub-warn); }
.pubs-pill--bad  { background: #fbe9e9; color: var(--pub-bad); }
.pubs-pill--muted{ background: #f0edf1; color: #655d6b; }

/* ── Catalogue ───────────────────────────────────────────── */
.pubs-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.pubs-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--pub-line); border-radius: var(--pub-radius);
  overflow: hidden; box-shadow: var(--pub-shadow);
  transition: transform .2s, box-shadow .2s;
}
.pubs-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px -14px rgba(31,23,27,.3); }
.pubs-card-media { aspect-ratio: 3/4; background: var(--pub-paper); overflow: hidden; position: relative; }
.pubs-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pubs-card-media--empty { display: grid; place-items: center; padding: 26px; text-align: center; }
.pubs-card-media--empty .t { font-size: .95rem; font-weight: 700; color: var(--pub-maroon);
                             line-height: 1.35; text-wrap: balance; }
.pubs-card-media--empty .e { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
                             color: var(--pub-muted); margin-top: 8px; }
.pubs-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pubs-card-ed { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
                color: var(--pub-muted); font-weight: 700; }
.pubs-card-title { font-size: 1.06rem; font-weight: 700; line-height: 1.3; margin: 0; }
.pubs-card-title a { color: var(--pub-ink); text-decoration: none; }
.pubs-card-title a:hover { color: var(--pub-maroon); }
.pubs-card-sum { font-size: 13.8px; line-height: 1.55; color: var(--pub-ink-2); margin: 0; }
.pubs-card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center;
                  justify-content: space-between; gap: 10px; border-top: 1px solid var(--pub-line); }
.pubs-price { font-size: 1.05rem; font-weight: 800; color: var(--pub-maroon); }
.pubs-price small { display: block; font-size: 11.5px; font-weight: 600; color: var(--pub-muted); }

.pubs-empty { text-align: center; padding: 60px 20px; color: var(--pub-muted); }
.pubs-notfound { padding: calc(var(--pub-navclear) + 60px) 0 80px; text-align: center; }

/* ── Product page ────────────────────────────────────────── */
.pubs-hero { padding: calc(var(--pub-navclear) + 34px) 0 34px;
             background: linear-gradient(180deg, var(--pub-paper) 0%, #fff 100%);
             border-bottom: 1px solid var(--pub-line); }
.pubs-hero-grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; }
@media (max-width: 767px) { .pubs-hero-grid { grid-template-columns: 1fr; gap: 22px; } }

.pubs-cover { border-radius: 10px; overflow: hidden; border: 1px solid var(--pub-line);
              box-shadow: var(--pub-shadow); background: #fff; aspect-ratio: 3/4; }
.pubs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pubs-cover--empty { display: grid; place-items: center; padding: 24px; text-align: center; }

.pubs-body-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
                  align-items: start; }
@media (max-width: 991px) { .pubs-body-grid { grid-template-columns: 1fr; gap: 28px; } }

.pubs-prose { font-size: 15.4px; line-height: 1.72; color: var(--pub-ink-2); max-width: 68ch; }
.pubs-prose h2, .pubs-prose h3, .pubs-prose h4 { color: var(--pub-ink); margin: 26px 0 10px;
                                                  font-weight: 700; line-height: 1.3; }
.pubs-prose h2 { font-size: 1.3rem; } .pubs-prose h3 { font-size: 1.1rem; } .pubs-prose h4 { font-size: 1rem; }
.pubs-prose p { margin: 0 0 14px; }
.pubs-prose ul, .pubs-prose ol { margin: 0 0 16px; padding-left: 22px; }
.pubs-prose li { margin-bottom: 7px; }
.pubs-prose a { color: var(--pub-maroon); text-decoration: underline; }
.pubs-prose blockquote { margin: 0 0 16px; padding: 10px 0 10px 18px;
                         border-left: 3px solid var(--pub-wash); color: var(--pub-ink-2); }
.pubs-prose strong { color: var(--pub-ink); }

/* Buy panel */
.pubs-buy { position: sticky; top: 96px; background: #fff; border: 1px solid var(--pub-line);
            border-radius: var(--pub-radius); box-shadow: var(--pub-shadow); padding: 24px; }
@media (max-width: 991px) { .pubs-buy { position: static; } }
.pubs-buy-price { font-size: 2rem; font-weight: 800; color: var(--pub-maroon); line-height: 1.1; }
.pubs-buy-price small { display: block; font-size: 12.5px; font-weight: 600;
                        color: var(--pub-muted); margin-top: 6px; letter-spacing: 0; }
.pubs-buy hr { border: 0; border-top: 1px solid var(--pub-line); margin: 18px 0; }
.pubs-facts { list-style: none; margin: 0; padding: 0; font-size: 13.4px; color: var(--pub-ink-2); }
.pubs-facts li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 9px; line-height: 1.5; }
.pubs-facts li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px;
                         border-radius: 50%; background: var(--pub-maroon); }

/* The trace notice. Deliberately plain and unmissable rather than a scare box:
   buyers should know before paying, not discover it in the file. */
.pubs-trace { border: 1px solid var(--pub-maroon); background: var(--pub-wash);
              padding: 15px 17px; border-radius: 8px; font-size: 13.4px;
              line-height: 1.6; color: var(--pub-maroon-deep); }
.pubs-trace strong { display: block; margin-bottom: 4px; color: var(--pub-maroon-deep); }

/* ── Checkout ────────────────────────────────────────────── */
.pubs-form-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
                  align-items: start; }
@media (max-width: 991px) { .pubs-form-grid { grid-template-columns: 1fr; gap: 26px; } }

.pubs-panel { background: #fff; border: 1px solid var(--pub-line);
              border-radius: var(--pub-radius); padding: 26px 28px; margin-bottom: 22px; }
@media (max-width: 575px) { .pubs-panel { padding: 20px 17px; } }
.pubs-panel-h { font-size: 1.06rem; font-weight: 700; margin: 0 0 4px; }
.pubs-panel-sub { font-size: 13.2px; color: var(--pub-muted); margin: 0 0 18px; line-height: 1.55; }

.pubs-field { margin-bottom: 17px; }
.pubs-label { display: block; font-size: 13px; font-weight: 600; color: var(--pub-ink);
              margin-bottom: 6px; }
.pubs-label .req { color: var(--pub-bad); }
.pubs-input, .pubs-select {
  width: 100%; padding: 11px 13px; border: 1px solid #d9d2d7; border-radius: 8px;
  font-size: 14.6px; color: var(--pub-ink); background: #fff; font-family: inherit;
}
.pubs-input:focus, .pubs-select:focus {
  outline: none; border-color: var(--pub-maroon); box-shadow: 0 0 0 3px rgba(137,37,89,.12);
}
.pubs-input[aria-invalid="true"] { border-color: var(--pub-bad); }
.pubs-help { font-size: 12.4px; color: var(--pub-muted); margin-top: 5px; line-height: 1.5; }
.pubs-err { font-size: 12.6px; color: var(--pub-bad); margin-top: 5px; }
.pubs-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 575px) { .pubs-row { grid-template-columns: 1fr; gap: 0; } }

/* The three consent boxes. Each one is a separate statement because they are
   separate agreements; a single "I agree to everything" would not be one. */
.pubs-gate { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px;
             border: 1px solid var(--pub-line); border-radius: 9px; margin-bottom: 12px;
             background: var(--pub-paper); transition: border-color .18s, background-color .18s; }
.pubs-gate:has(input:checked) { border-color: #bcd9c8; background: #f4faf6; }
.pubs-gate input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pub-maroon); }
.pubs-gate label { font-size: 13.6px; line-height: 1.6; color: var(--pub-ink-2); cursor: pointer; }
.pubs-gate label strong { color: var(--pub-ink); }
.pubs-gate--bad { border-color: #eec9c9; background: #fdf4f4; }

.pubs-terms { max-height: 260px; overflow-y: auto; padding: 16px 18px; border: 1px solid var(--pub-line);
              border-radius: 9px; background: var(--pub-paper); font-size: 13.4px; line-height: 1.65;
              color: var(--pub-ink-2); margin-bottom: 18px; }
.pubs-terms h2, .pubs-terms h3, .pubs-terms h4 { font-size: .95rem; color: var(--pub-ink);
                                                  margin: 14px 0 6px; font-weight: 700; }
.pubs-terms p { margin: 0 0 10px; }
.pubs-terms ol, .pubs-terms ul { margin: 0 0 10px; padding-left: 20px; }

/* Order summary rail */
.pubs-summary { position: sticky; top: 96px; background: #fff; border: 1px solid var(--pub-line);
                border-radius: var(--pub-radius); padding: 22px 24px; box-shadow: var(--pub-shadow); }
@media (max-width: 991px) { .pubs-summary { position: static; } }
.pubs-summary-row { display: flex; justify-content: space-between; gap: 14px;
                    font-size: 13.8px; padding: 8px 0; color: var(--pub-ink-2); }
.pubs-summary-row.total { border-top: 1px solid var(--pub-line); margin-top: 6px; padding-top: 13px;
                          font-size: 1.08rem; font-weight: 800; color: var(--pub-ink); }
.pubs-summary-row.total .v { color: var(--pub-maroon); }

/* ── Receipt / download page ─────────────────────────────── */
.pubs-receipt-head { text-align: center; padding: calc(var(--pub-navclear) + 44px) 0 10px; }
.pubs-tick { width: 62px; height: 62px; border-radius: 50%; background: #e7f2ec; color: var(--pub-good);
             display: grid; place-items: center; margin: 0 auto 18px; font-size: 30px; font-weight: 700; }
.pubs-tick--wait { background: #fdf2e2; color: var(--pub-warn); }
.pubs-tick--bad  { background: #fbe9e9; color: var(--pub-bad); }

.pubs-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
            letter-spacing: .05em; background: var(--pub-wash); color: var(--pub-maroon-deep);
            padding: 5px 11px; border-radius: 5px; display: inline-block; }

/* The password. Big, selectable, and impossible to mistake for body copy,
   because the buyer has to retype it into a PDF reader. */
.pubs-password { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                 font-size: clamp(1.2rem, 3.4vw, 1.7rem); font-weight: 700; letter-spacing: .12em;
                 background: #fff; border: 2px dashed var(--pub-maroon); color: var(--pub-maroon-deep);
                 padding: 15px 20px; border-radius: 10px; display: inline-block;
                 user-select: all; word-break: break-all; }
.pubs-copy { border: 1px solid var(--pub-line); background: #fff; color: var(--pub-ink-2);
             border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pubs-copy:hover { border-color: var(--pub-maroon); color: var(--pub-maroon); }
.pubs-copy.done { border-color: #bcd9c8; background: #f4faf6; color: var(--pub-good); }

.pubs-dl-meta { font-size: 13px; color: var(--pub-muted); margin-top: 10px; }
.pubs-serial-line { font-size: 13.2px; color: var(--pub-ink-2); }
.pubs-serial-line code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                         background: var(--pub-wash); color: var(--pub-maroon-deep);
                         padding: 2px 7px; border-radius: 4px; }

.pubs-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.pubs-steps li { counter-increment: s; position: relative; padding-left: 38px; margin-bottom: 14px;
                 font-size: 14px; line-height: 1.6; color: var(--pub-ink-2); }
.pubs-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--pub-wash);
  color: var(--pub-maroon); font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center;
}

.pubs-alert { padding: 15px 17px; border-radius: 9px; font-size: 13.8px; line-height: 1.6;
              margin-bottom: 20px; }
.pubs-alert--good { background: #e7f2ec; color: #24543e; }
.pubs-alert--warn { background: #fdf2e2; color: #6d470e; }
.pubs-alert--bad  { background: #fbe9e9; color: #832121; }

@media (prefers-reduced-motion: reduce) {
  .pubs-card, .pubs-btn { transition: none; }
  .pubs-card:hover { transform: none; }
}