/* Hallmark · shape: Deck, one idea per slide, scroll-snapped · genre: editorial · theme: brand (by request) · job: book, the action on the cover and the close
 * paper: #F5F1E8 · accent: #C6864F · display: Cormorant · body: Hanken Grotesk · hero: Split, photo right · nav: none (a deck) · footer: close slide · signature: the price ladder, five steps rising
 * axes: light/high-contrast-serif/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, no client logos or quotes yet, so proof rests on our own test count */
/* Hallmark · waive 65 · the stamp says the theme was asked for · the kept CE brand, read from the website redesign tokens */

@import url("tokens.css");
@import url("base.css");

html { scroll-snap-type: y mandatory; }
.slide {
  min-height: 100svh;
  scroll-snap-align: start;
  display: grid;
  align-items: center;
  padding-block: var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.slide--dark { background: var(--color-deepest); color: var(--color-on-dark); border-bottom-color: var(--color-rule-dark); }
.slide--alt { background: var(--color-paper-2); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; }
.split--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stack > * + * { margin-top: var(--space-lg); }

.photo { aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; border-radius: var(--radius-card); }
.photo--land { aspect-ratio: 3 / 2; max-height: 70svh; }
.photo img { object-position: center 30%; }

.brand { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--display-weight); color: var(--color-teal); }
.slide--dark .brand { color: var(--color-teal-light); }
.lead { color: var(--color-ink-2); }
.slide--dark .lead, .slide--dark .note { color: var(--color-on-dark-2); }
.note { font-size: var(--text-sm); color: var(--color-muted); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-teal); color: var(--color-on-dark);
  border: 1px solid var(--color-teal); border-radius: var(--radius-card);
  font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; transition: none; }
.slide--dark .btn { background: var(--color-paper); color: var(--color-deepest); border-color: var(--color-paper); }
.slide--dark .btn:hover { background: var(--color-paper-2); }
.link { font-weight: 600; color: inherit; }
.link:hover { color: var(--color-teal); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The signature: the ladder, rising left to right */
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); align-items: end; margin-top: var(--space-2xl); }
.step { border-top: 2px solid var(--color-teal); padding-top: var(--space-md); }
.step:nth-child(1) { min-height: 9rem; }
.step:nth-child(2) { min-height: 13rem; }
.step:nth-child(3) { min-height: 17rem; }
.step:nth-child(4) { min-height: 21rem; border-top-color: var(--color-accent); }
.step:nth-child(5) { min-height: 25rem; border-top-color: var(--color-deep); }
.step h3 { font-size: var(--text-xl); }
.step .price { font-family: var(--font-outlier); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; margin-top: var(--space-xs); color: var(--color-deep); }
.step p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }

/* Rate tables */
.rates { width: 100%; border-collapse: collapse; margin-top: var(--space-xl); }
.rates th, .rates td { text-align: left; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 400; }
.rates th { font-size: var(--text-sm); color: var(--color-muted); }
.rates td.num { font-variant-numeric: tabular-nums; font-family: var(--font-outlier); font-size: var(--text-xl); text-align: right; color: var(--color-deep); }
.rates th.num { text-align: right; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.slide--dark .list li { border-bottom-color: var(--color-rule-dark); }

.big { font-family: var(--font-outlier); font-size: var(--text-display); line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-teal); }
.slide--dark .big { color: var(--color-teal-light); }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.grid3 h3 { font-size: var(--text-xl); }
.grid3 p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.slide--dark .grid3 p { color: var(--color-on-dark-2); }

.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin-top: var(--space-xl); }
.extras > div { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.extras h3 { font-size: var(--text-xl); }
.extras p { margin-top: var(--space-2xs); color: var(--color-ink-2); }

@media (max-width: 60rem) {
  html { scroll-snap-type: none; }
  .split, .split--wide, .grid3, .extras { grid-template-columns: minmax(0, 1fr); }
  .ladder { grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(n) { min-height: 0; }
  .photo { max-height: 60svh; }
}

@media print {
  @page { size: 1280px 800px; margin: 0; }
  html { scroll-snap-type: none; }
  html, body { width: 1280px; }
  .slide { height: 800px; min-height: 0; overflow: hidden; break-after: page; break-inside: avoid; border-bottom: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .photo { max-height: 640px; }
  .photo--land { max-height: 560px; }
}

/* Slide legibility: lists and rate rows read from across a meeting table */
.list li, .rates td { font-size: var(--text-lg); }
.extras p, .grid3 p { font-size: var(--text-lg); }
html { scroll-padding-top: 0; }
.grid3 p.big { font-size: var(--text-display); color: var(--color-teal-light); }