/* Interactive cards: checklist, site previews, habit cards, Teams steps, rule flip cards.
   Loaded by index.html and first-week-checklist.html. Uses the tokens in site.css. */


/* Scroll reveal — only hides content once home.js has confirmed it can reveal it */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.hc-subhead { margin: 48px 0 10px; }
.hc-note { font-size: 16px; color: var(--muted); margin: 0 0 20px; }

/* ---------- Checklist ---------- */
.hc-progress { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.hc-progress-bar { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.hc-progress-fill { height: 100%; width: 0; background: var(--gold); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.hc-progress-label { font-size: 14px; color: var(--muted); white-space: nowrap; font-feature-settings: "tnum"; }

.hc-checklist { display: flex; flex-direction: column; gap: 12px; }
.hc-check {
  appearance: none;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.hc-check:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -14px rgba(45,43,43,.45); border-color: var(--gold); }
.hc-check:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hc-box {
  width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transform: scale(.9);
  transition: all .3s cubic-bezier(.3,1.6,.5,1);
}
.hc-box svg { width: 14px; height: 14px; }
.hc-check-title { display: block; font-weight: 600; font-size: 17px; line-height: 1.35; }
.hc-check-body { display: block; font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.hc-check.is-done { background: var(--accent-tint); border-color: var(--gold); }
.hc-check.is-done .hc-box { background: var(--gold); color: #fff; transform: scale(1); }
.hc-check.is-done .hc-check-title { text-decoration: line-through; text-decoration-color: var(--gold); color: var(--muted); }

/* ---------- Habit cards ---------- */
.hc-habits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 520px) { .hc-habits { grid-template-columns: 1fr; } }
.hc-habits + .pullquote { margin-top: 64px; }
.hc-habit {
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hc-habit:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -18px rgba(45,43,43,.5); border-color: var(--gold); }
.hc-habit-num { font-family: var(--display); font-size: 36px; line-height: 1; color: var(--gold); font-feature-settings: "tnum"; }
.hc-habit-title { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.15; }
.hc-habit-body { font-size: 15px; line-height: 1.5; color: var(--muted); }
.hc-habit-body a { color: var(--accent); }

/* ---------- Teams steps (accordion) ---------- */
.hc-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.hc-step {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.hc-step.is-open { border-color: var(--gold); box-shadow: 0 12px 28px -20px rgba(45,43,43,.55); }
.hc-step-head {
  appearance: none; background: none; border: 0; font: inherit; color: var(--ink);
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; text-align: left; cursor: pointer;
}
.hc-step-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 4px; }
.hc-step-num {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 20px;
  transition: all .3s ease;
}
.hc-step.is-open .hc-step-num { background: var(--gold); color: #fff; }
.hc-step-title { flex: 1; font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.2; }
.hc-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .3s ease; }
.hc-step.is-open .hc-chev { transform: rotate(180deg); }
.hc-step-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.hc-step.is-open .hc-step-body { grid-template-rows: 1fr; opacity: 1; }
.hc-step-body > div { overflow: hidden; }
.hc-step-inner { padding: 0 22px 22px 76px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hc-step-inner p { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.hc-step-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { .hc-step-inner { padding-left: 22px; } }

/* ---------- Rule flip cards ---------- */
.hc-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.hc-flip {
  appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit;
  perspective: 1000px; cursor: pointer; text-align: left;
}
.hc-flip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.hc-flip-inner {
  display: block;
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.3,1.3,.5,1);
}
.hc-flip:hover .hc-flip-inner { transform: translateY(-4px); }
.hc-flip.is-flipped .hc-flip-inner { transform: rotateY(180deg); }
/* Swap faces at the midpoint too, so the card reads correctly even where 3D backface hiding isn't supported */
.hc-front { opacity: 1; transition: opacity 0s linear .2s, border-color .25s ease, box-shadow .25s ease; }
.hc-back { opacity: 0; transition: opacity 0s linear .2s; }
.hc-flip.is-flipped .hc-front { opacity: 0; }
.hc-flip.is-flipped .hc-back { opacity: 1; }
.hc-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 4px; padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hc-front { background: var(--card); border: 1px solid var(--rule); }
.hc-flip:hover .hc-front { border-color: var(--gold); box-shadow: 0 12px 28px -18px rgba(45,43,43,.5); }
.hc-back { background: #2b2722; color: #f3f2f2; transform: rotateY(180deg); border: 1px solid var(--gold); }
.hc-face-label, .hc-face-title, .hc-face-body, .hc-face-hint { display: block; }
.hc-face-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hc-back .hc-face-label { color: #e1ad66; }
.hc-face-title { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.15; text-wrap: pretty; }
.hc-face-body { font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.hc-face-hint { font-size: 13px; color: var(--muted); }
.hc-back .hc-face-hint { color: #bab6b6; }
@media (prefers-reduced-motion: reduce) {
  .hc-flip-inner, .hc-step-body, .hc-check, .hc-habit { transition: none; }
}

/* ---------- Microsoft Teams book: one part at a time, pages flip ---------- */
.tbook { background: var(--paper-warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tbook-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 28px; padding-bottom: 0; }
.tbook-title { font-family: var(--display); font-size: 26px; font-weight: 600; }
.tbook-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tbook-tab {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; min-width: 150px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tbook-tab:hover { border-color: var(--gold); transform: translateY(-2px); }
.tbook-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tbook-tab.is-current { border-color: var(--gold); background: var(--accent-tint); }
.tbook-tab-num { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tbook-tab-name { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.2; }
.tbook-stage { perspective: 2200px; perspective-origin: 50% 30%; overflow: hidden; }
.tbook-page { display: none; background: var(--paper-warm); border-bottom: 0 !important; transform-origin: left center; backface-visibility: hidden; }
.tbook-page.is-current, .tbook-page.is-leaving { display: block; }
.tbook-page.is-leaving { animation: tbOut .4s cubic-bezier(.5,0,.75,0) forwards; }
.tbook-page.is-entering { animation: tbIn .55s cubic-bezier(.2,.7,.2,1) both; }
.tbook-stage.is-back .tbook-page.is-leaving { transform-origin: right center; animation-name: tbOutBack; }
.tbook-stage.is-back .tbook-page.is-entering { transform-origin: right center; animation-name: tbInBack; }
@keyframes tbOut { to { transform: rotateY(-75deg); opacity: 0; box-shadow: 40px 0 60px -30px rgba(45,43,43,.45); } }
@keyframes tbIn { from { transform: rotateY(60deg); opacity: 0; box-shadow: -40px 0 60px -30px rgba(45,43,43,.45); } to { transform: none; opacity: 1; box-shadow: none; } }
@keyframes tbOutBack { to { transform: rotateY(75deg); opacity: 0; } }
@keyframes tbInBack { from { transform: rotateY(-60deg); opacity: 0; } to { transform: none; opacity: 1; } }
.tbook-turn { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }
.tbook-page .wrap-narrow .tbook-turn, .tbook-page .wrap .tbook-turn { max-width: none; }
@media (prefers-reduced-motion: reduce) { .tbook-page.is-leaving { display: none; } .tbook-page.is-entering { animation: none; } }

/* ---------- Book treatment (v2) ---------- */
.tbook { background: var(--paper); padding: 0 0 72px; border: 0; }
.tbook-bar { justify-content: center; flex-direction: column; gap: 6px; padding-top: 56px; padding-bottom: 28px; text-align: center; }
.tbook-title { font-size: clamp(30px, 3.4vw, 42px); }
.tbook-folio { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.tbook-folio b { font-weight: 600; }
.tbook-stage {
  position: relative;
  max-width: 1080px; margin: 0 auto; width: calc(100% - 48px);
  overflow: visible;
  padding: 0 14px 0 0;
}
/* stacked page edges behind the open page */
.tbook-stage::before, .tbook-stage::after {
  content: ""; position: absolute; top: 8px; bottom: -8px; left: 6px; right: 6px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px 10px 10px 2px; z-index: 0;
}
.tbook-stage::after { top: 4px; bottom: -4px; left: 3px; right: 10px; }
.tbook-stage::before { box-shadow: 0 30px 50px -30px rgba(45,43,43,.35); }
.tbook-page {
  position: relative; z-index: 1;
  background: var(--card) !important;
  border: 1px solid var(--rule); border-radius: 2px 10px 10px 2px;
  padding: 56px 0 40px !important;
  box-shadow: inset 34px 0 34px -30px rgba(45,43,43,.28);
}
/* gold-trimmed spine on the binding edge */
.tbook-page::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 12px;
  background: linear-gradient(90deg, var(--accent-ink), var(--accent));
  border-right: 2px solid var(--gold); border-radius: 2px 0 0 2px;
}
/* page number at the foot of each page */
.tbook-page::after {
  content: attr(data-folio); display: block; text-align: center; margin-top: 28px;
  font-family: var(--display); font-style: italic; font-size: 15px; color: var(--muted);
}
.tbook-page .wrap, .tbook-page .wrap-narrow { padding-left: clamp(28px, 5vw, 64px); padding-right: clamp(24px, 4vw, 56px); }
.tbook-turn { margin-top: 40px; }
@media (max-width: 720px) {
  .tbook-stage { width: calc(100% - 20px); padding-right: 8px; }
  .tbook-page { padding-top: 36px !important; }
  .tbook-page::before { width: 7px; }
}

/* ---------- Page turn (v3): both directions hinge on the left spine ---------- */
.tbook-stage { display: grid; perspective: 2600px; perspective-origin: 0% 40%; }
.tbook-page { grid-area: 1 / 1; transform-origin: left center !important; transform-style: preserve-3d; }
.tbook-page.is-under { z-index: 1; }
.tbook-page.is-turning-fwd, .tbook-page.is-turning-back { z-index: 3; display: block; will-change: transform; }
.tbook-page.is-turning-fwd { animation: tbTurnFwd .9s cubic-bezier(.45,.05,.35,1) forwards !important; }
.tbook-page.is-turning-back { animation: tbTurnBack .9s cubic-bezier(.45,.05,.35,1) both !important; }
.tbook-page.is-under { animation: tbUnder .9s ease both; }
@keyframes tbTurnFwd {
  0%   { transform: rotateY(0deg); filter: brightness(1); box-shadow: inset 34px 0 34px -30px rgba(45,43,43,.28); }
  45%  { filter: brightness(.93); box-shadow: inset 34px 0 34px -30px rgba(45,43,43,.28), 30px 0 60px -20px rgba(45,43,43,.35); }
  100% { transform: rotateY(-100deg); filter: brightness(.8); opacity: 0; }
}
@keyframes tbTurnBack {
  0%   { transform: rotateY(-100deg); filter: brightness(.8); opacity: 0; }
  20%  { opacity: 1; }
  55%  { filter: brightness(.93); box-shadow: inset 34px 0 34px -30px rgba(45,43,43,.28), 30px 0 60px -20px rgba(45,43,43,.35); }
  100% { transform: rotateY(0deg); filter: brightness(1); opacity: 1; box-shadow: inset 34px 0 34px -30px rgba(45,43,43,.28); }
}
/* the page underneath darkens slightly where the turning page casts its shadow */
@keyframes tbUnder { 0%,100% { filter: brightness(1); } 50% { filter: brightness(.95); } }
.tbook-stage.is-back .tbook-page.is-under { animation-direction: normal; }
@media (prefers-reduced-motion: reduce) {
  .tbook-page.is-turning-fwd, .tbook-page.is-turning-back, .tbook-page.is-under { animation: none !important; }
}

/* Slideshow caption: college name in white, lower-left of the image */
.hero-showcase .slideshow-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal;
  padding: 120px 40px 28px;
  background: linear-gradient(to top, rgba(20,18,16,.62), rgba(20,18,16,0));
  color: #fff;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero-showcase .slideshow-slide figcaption { padding: 80px 20px 56px; font-size: 22px; }
}

/* Faces share one grid cell so each card grows to fit its longer face */
.hc-flip-inner { display: grid; min-height: 200px; height: 100%; }
.hc-face { position: relative; inset: auto; grid-area: 1 / 1; gap: 14px; }
.hc-rules { align-items: stretch; }

/* Habit flip cards: front states the habit, back gives a short how-to with links */
.hc-flip--habit { cursor: pointer; }
.hc-flip--habit .hc-flip-inner { min-height: 230px; }
.hc-flip--habit .hc-front { gap: 10px; justify-content: flex-start; }
.hc-flip--habit .hc-habit-front { font-size: 15px; color: var(--muted); flex: 1; }
.hc-flip-toggle {
  appearance: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  align-self: flex-start; font-size: 13px; color: var(--muted);
  border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.hc-flip-toggle:hover { color: var(--accent); border-bottom-color: var(--gold); }
.hc-back .hc-flip-toggle { color: #bab6b6; }
.hc-back .hc-flip-toggle:hover { color: #e1ad66; border-bottom-color: #e1ad66; }
.hc-flip-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hc-back-body { flex: 1; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; }
.hc-back-body p { margin: 0; max-width: none; }
.prose .hc-back-body ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.prose .hc-back-body ol > li { padding: 0; }
.prose .hc-back-body ol > li::before { content: none; }
.prose .hc-back-body a, .hc-back-body a { color: #e1ad66; text-decoration-color: rgba(225,173,102,.5); }
.prose .hc-back-body a:hover { color: #facb8d; }
.hc-back-body strong { color: #fff; font-weight: 600; }

/* ---------- The site at a glance (homepage previews) ---------- */
.ex { background: var(--paper-warm); }
.ex .ex-heading { margin: 0 0 6px; font-size: clamp(40px, 5vw, 60px); line-height: 1.05; }
/* "At a Glance" uses the site-wide .subhead style (site.css) */
.ex .ex-subhead { max-width: 420px; margin: 0 0 32px; }

/* Filters */
.ex-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.ex-filter {
  font: inherit; font-size: 15px; padding: 8px 16px; cursor: pointer;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule); border-radius: 999px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ex-filter:hover { border-color: var(--gold); color: var(--accent-ink); }
.ex-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ex-filter.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Preview cards */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.ex-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ex-card[hidden] { display: none; }
.ex .ex-card:hover, .ex .ex-card:focus-within { transform: translateY(-6px); box-shadow: 0 18px 36px -22px rgba(45,43,43,.55); border-color: var(--gold); }
.ex-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--rule-soft); }
.ex-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ex-card:hover .ex-media img { transform: scale(1.06); }
.ex-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.ex-kind { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ex-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.15; }
.ex-title a { color: var(--ink); text-decoration: none; }
.ex-title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.ex-title a:focus-visible { outline: none; }
.ex-card:has(.ex-title a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.ex-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ex-points li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.ex-points li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.ex-more { margin-top: auto; padding-top: 8px; font-size: 15px; color: var(--accent); }
.ex-more span { display: inline-block; transition: transform .25s ease; }
.ex-card:hover .ex-more span { transform: translateX(4px); }
.ex-progress { display: flex; align-items: center; gap: 12px; }
.ex-progress-bar { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.ex-progress-fill { height: 100%; width: 0; background: var(--gold); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.ex-progress-label { font-size: 13px; color: var(--muted); white-space: nowrap; font-feature-settings: "tnum"; }
@media (prefers-reduced-motion: reduce) {
  .ex-card, .ex-media img, .ex-more span { transition: none; }
  .ex .ex-card:hover, .ex .ex-card:focus-within { transform: none; }
  .ex-card:hover .ex-media img { transform: none; }
}

/* ---------- First week's checklist page ---------- */
.fw-next { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ---------- Book proportions (v4, Oct 2026): a portrait volume, not a panel ---------- */
.tbook-stage {
  max-width: 660px; width: calc(100% - 64px); margin: 8px auto 0; padding: 0;
  grid-template-columns: minmax(0, 1fr);
}
/* cloth-bound cover peeking out around the pages, with a darker spine */
.tbook-stage::before {
  content: ""; position: absolute; z-index: 0;
  top: -10px; bottom: -16px; left: -20px; right: -14px;
  background: linear-gradient(90deg, var(--accent-ink) 0 16px, rgba(255,255,255,.18) 16px 17px, var(--accent) 17px);
  border: 0; border-radius: 5px 12px 12px 5px;
  box-shadow: 0 34px 60px -28px rgba(20,32,52,.55), 0 2px 0 rgba(20,32,52,.25);
}
/* the block of pages: edges stacked toward the fore-edge and foot */
.tbook-stage::after {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px 6px 6px 2px;
  box-shadow:
    1px 1px 0 var(--card), 2px 2px 0 var(--rule),
    3px 3px 0 var(--card), 4px 4px 0 var(--rule),
    5px 5px 0 var(--card), 6px 6px 0 var(--rule),
    7px 7px 0 var(--card), 8px 8px 0 var(--rule);
}
.tbook-page {
  min-width: 0;
  aspect-ratio: 5 / 7;               /* a trade-book page; grows if the content is longer */
  border-radius: 2px 6px 6px 2px;
  padding: 52px 0 32px !important;
  box-shadow: inset 30px 0 28px -24px rgba(45,43,43,.30);
}
/* the gutter where the page curves into the binding */
.tbook-page::before {
  width: 20px; left: 0; top: 0; bottom: 0; border: 0; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(20,32,52,.20), rgba(20,32,52,0));
}
.tbook-page .wrap, .tbook-page .wrap-narrow { padding-left: clamp(24px, 6vw, 52px); padding-right: clamp(20px, 5vw, 44px); }
.tbook-page h2 { font-size: clamp(30px, 4vw, 40px); }
.tbook-page .videos { gap: 28px 24px; }
.tbook-page .hc-rules { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 720px) {
  .tbook-stage { width: calc(100% - 40px); }
  .tbook-stage::before { left: -12px; right: -9px; top: -7px; bottom: -11px;
    background: linear-gradient(90deg, var(--accent-ink) 0 10px, var(--accent) 10px); }
  .tbook-page { aspect-ratio: auto; padding-top: 36px !important; }
}