/*
 * Chandelle Park Welcome Guide
 *
 * Desktop and print styles are organised by page.
 * Mobile behaviour is consolidated into one screen-only media query.
 * Print/PDF behaviour is consolidated into one print media query.
 */

/* =========================================================
   01. FONTS, BRAND TOKENS AND GLOBAL RESET
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap");

:root {
  --cp-blue: #1F5E79;
  --cp-blue-dark: #17485d;
  --cp-cream: #F6F3EE;
  --cp-ink: #1F2F35;
  --cp-pale: #DCEAF0;
  --cp-soft: #EDF5F7;
  --cp-sand: #E9DDCD;
  --cp-white: #fff;
  --serif: "Playfair Display",Georgia,serif;
  --sans: "Inter",Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

figure {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  background: #e9eef0;
}

body {
  margin: 0;
  color: var(--cp-ink);
  font-family: var(--sans);
  background: #e9eef0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

a {
  color: inherit;
}

.screen-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem;
  background: rgba(23,72,93,.97);
  color: #fff;
  box-shadow: 0 3px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

.screen-toolbar .brand {
  font-family: var(--serif);
  font-size: 1.08rem;
  margin-right: auto;
  white-space: nowrap;
}

.screen-toolbar button,.screen-toolbar a {
  font: 600 .88rem var(--sans);
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: .52rem .8rem;
  text-decoration: none;
  cursor: pointer;
}

.screen-toolbar button:hover,.screen-toolbar a:hover {
  background: rgba(255,255,255,.13);
}

.page-status {
  font-size: .78rem;
  opacity: .85;
  min-width: 4.5rem;
  text-align: center;
}

.contents-panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px,88vw);
  z-index: 110;
  background: var(--cp-cream);
  transform: translateX(-102%);
  transition: .25s ease;
  box-shadow: 10px 0 30px rgba(0,0,0,.2);
  padding: 1.2rem;
  overflow: auto;
}

.contents-panel.open {
  transform: none;
}

.contents-panel h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--cp-blue);
  font-size: 2rem;
  margin: .2rem 0 1rem;
}

.contents-panel a {
  display: block;
  padding: .55rem .25rem;
  border-bottom: 1px solid rgba(31,94,121,.16);
  text-decoration: none;
}

.contents-panel button {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border: 0;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--cp-blue);
}

.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 30px 12px 70px;
}

.page-wrap {
  position: relative;
  flex: 0 0 auto;
}

.guide-page {
  position: relative;
  width: 210mm;
  height: 297mm;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(24,47,57,.18);
  isolation: isolate;
  transform-origin: top left;
}

.page-inner {
  position: absolute;
  inset: 0;
  padding: 14.7mm;
}

.fill-page {
  height: 100%;
  display: grid;
  align-content: stretch;
}

.page-cream {
  background: var(--cp-cream);
}

.page-blue {
  background: var(--cp-blue);
  color: #fff;
}

.page-pale {
  background: var(--cp-soft);
}

.eyebrow {
  font-size: 2.48mm;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cp-blue);
  margin: 0 0 2.8mm;
}

.page-blue .eyebrow,.on-photo .eyebrow {
  color: #fff;
}

h1,h2,h3 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  color: var(--cp-blue);
  text-wrap: balance;
}

.page-blue h1,.page-blue h2,.page-blue h3,.on-photo h1,.on-photo h2,.on-photo h3 {
  color: #fff;
}

h1 {
  font-size: 13.2mm;
  line-height: 1;
}

h2 {
  font-size: 9.5mm;
  line-height: 1.04;
}

h3 {
  font-size: 4.45mm;
  line-height: 1.16;
}

.lede {
  font-family: var(--serif);
  font-size: 4.45mm;
  line-height: 1.36;
  color: var(--cp-blue);
  margin: 3.7mm 0;
}

.page-blue .lede,.on-photo .lede {
  color: #fff;
}

p {
  font-size: 3.02mm;
  line-height: 1.5;
  margin: 0 0 2.7mm;
}

.small {
  font-size: 3.25mm;
  line-height: 1.46;
}

.tiny {
  font-size: 2.05mm;
  line-height: 1.4;
}

.caps {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}

.photo {
  position: relative;
  overflow: hidden;
  background: var(--cp-pale);
  border-radius: 3.55mm;
}

.photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo.contain img {
  object-fit: contain;
  background: #fff;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(31,94,121,.2);
  border-radius: inherit;
  pointer-events: none;
}

.photo-caption {
  font-size: 2.05mm;
  line-height: 1.35;
  color: #52636a;
  margin-top: 1.2mm;
}

.photo-credit {
  position: absolute;
  right: 2.1mm;
  bottom: 1.68mm;
  background: rgba(22,44,51,.7);
  color: #fff;
  font-size: 1.64mm;
  padding: .74mm 1.16mm;
  border-radius: 999px;
}

.logo {
  display: block;
  object-fit: contain;
}

.cover-logo {
  position: absolute;
  z-index: 3;
  top: 11.2mm;
  left: 14.7mm;
  width: 72mm;
  height: auto;
  filter: drop-shadow(0 1.5mm 2.2mm rgba(0,0,0,.2));
}

.cover-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.cover-photo::after {
  display: none;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,rgba(10,32,42,.08) 5%,rgba(10,32,42,.80) 100%);
}

.number {
  position: absolute;
  right: 11.5mm;
  bottom: 7.5mm;
  font-size: 2.1mm;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(31,94,121,.65);
}

.page-blue .number,.on-photo .number {
  color: rgba(255,255,255,.78);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.2mm;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3.4mm;
}

.split-40 {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 7mm;
}

.split-55 {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 7mm;
}

.stack {
  display: grid;
  gap: 3.7mm;
}

.card {
  background: #fff;
  border-radius: 3.7mm;
  padding: 4mm;
  border: 1px solid rgba(31,94,121,.13);
}

.page-cream .card {
  background: rgba(255,255,255,.8);
}

.page-blue .card {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.24);
}

.card h3 {
  margin-bottom: 1.7mm;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 1mm;
  background: var(--cp-blue);
  color: #fff;
  border-radius: 999px;
  padding: 1.35mm 2.1mm;
  font-size: 2.12mm;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.page-blue .badge {
  background: #fff;
  color: var(--cp-blue);
}

.link-button {
  display: inline-block;
  text-decoration: none;
  background: var(--cp-blue);
  color: #fff;
  border-radius: 999px;
  padding: 1.9mm 2.95mm;
  font-size: 3.25mm;
  font-weight: 700;
  letter-spacing: .04em;
}

.page-blue .link-button {
  background: #fff;
  color: var(--cp-blue);
}

.rule {
  height: 1px;
  background: rgba(31,94,121,.28);
  margin: 3.8mm 0;
}

.pullquote {
  font-family: var(--serif);
  font-size: 5.7mm;
  line-height: 1.2;
  color: var(--cp-blue);
  border-left: .88mm solid var(--cp-blue);
  padding-left: 3.7mm;
  margin: 3.5mm 0;
}

.callout {
  background: var(--cp-blue);
  color: #fff;
  border-radius: 4mm;
  padding: 4.5mm;
}

.callout h3,.callout p {
  color: #fff;
}

.callout a {
  color: #fff;
}

.icon-list {
  display: grid;
  gap: 2mm;
}

.icon-row {
  display: grid;
  grid-template-columns: 7mm 1fr;
  gap: 2.3mm;
  align-items: start;
  padding: 2.4mm 0;
  border-bottom: 1px solid rgba(31,94,121,.15);
}

.icon-row:last-child {
  border-bottom: 0;
}

.icon {
  width: 6.5mm;
  height: 6.5mm;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cp-pale);
  color: var(--cp-blue);
  font-weight: 800;
  font-size: 2.45mm;
}

.icon-row h3 {
  font-family: var(--sans);
  font-size: 2.65mm;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .075em;
  margin: .4mm 0 .6mm;
}

.icon-row p {
  font-size: 2.48mm;
  line-height: 1.42;
  margin: 0;
}

.source-note {
  font-size: 1.7mm;
  line-height: 1.38;
  color: #66767c;
}

/* =========================================================
   02. SHARED GUIDE NAVIGATION AND PDF CONTROLS
   ========================================================= */

.index-return {
  position: absolute;
  z-index: 20;
  right: 8.5mm;
  bottom: 5.9mm;
  width: 8.4mm;
  height: 8.4mm;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cp-blue);
  color: #fff;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1mm 2.4mm rgba(0,0,0,.16);
  font: 700 4.6mm/1 var(--sans);
  text-decoration: none;
}

.index-return:hover,.index-return:focus {
  background: var(--cp-blue-dark);
}

.on-photo .index-return,.page-blue .index-return {
  background: rgba(255,255,255,.94);
  color: var(--cp-blue);
  border-color: rgba(31,94,121,.24);
}

.number {
  right: 20.5mm;
}

/* =========================================================
   PAGE 01. FRONT COVER
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-1 {
  /* IMAGE */
  --p01-cover-image-width: 100%;
  --p01-cover-image-height: 100%;
  --p01-cover-image-position: center;
  /* INFORMATION CARD */
  --p01-card-left: 14.7mm;
  --p01-card-right: 14.7mm;
  --p01-card-bottom: 17.2mm;
  --p01-card-padding: 6.3mm;
  --p01-card-gap: 6mm;
  --p01-card-logo-column: 46mm;
  --p01-card-logo-width: 46mm;
  --p01-card-logo-max-height: 47mm;
  /* TEXT */
  --p01-kicker-size: 2.27mm;
  --p01-title-size: 13.5mm;
  --p01-subtitle-size: 2.5mm;
  --p01-page-number-size: 2.1mm;
}


.front-cover .cover-logo {
  top: 11.2mm;
  left: 14.7mm;
  transform: none;
  width: 79.8mm;
}

.front-cover .cover-copy {
  position: absolute;
  z-index: 3;
  left: 14.7mm;
  right: 14.7mm;
  bottom: 17.2mm;
  color: #fff;
  background: rgba(31,94,121,.96);
  padding: 6.3mm;
  border-radius: 4.2mm;
  box-shadow: 0 2.1mm 6.3mm rgba(0,0,0,.25);
}

.front-cover .cover-copy h1 {
  color: #fff;
  font-size: 15.3mm;
  max-width: 158mm;
}

.front-cover .cover-copy>p {
  font-size: 3.25mm;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 3.35mm 0 0;
}

.cover-kicker {
  display: inline-block;
  font-size: 2.27mm;
  letter-spacing: .15em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  padding: 1.47mm 2.31mm;
  margin-bottom: 3.15mm;
}

#page-1 .cover-copy-with-logo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46mm;
  align-items: center;
  gap: 6mm;
  text-align: left;
}

#page-1 .cover-copy-text {
  min-width: 0;
}

#page-1 .cover-copy-with-logo h1 {
  max-width: none;
  margin: 0;
  font-size: 13.5mm;
  line-height: 0.98;
}

#page-1 .cover-copy-with-logo > .cover-copy-text > p {
  margin: 3mm 0 0;
  font-size: 2.5mm;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-1 .cover-card-logo {
  display: block;
  width: 46mm;
  max-height: 47mm;
  object-fit: contain;
  justify-self: end;
  align-self: center;
  filter: drop-shadow(0 1.2mm 1.8mm rgba(0, 0, 0, 0.22));
}

#page-1 > .cover-logo {
  display: none;
}


#page-1 .cover-photo,
#page-1 .cover-photo img {
  width: var(--p01-cover-image-width);
  height: var(--p01-cover-image-height);
}

#page-1 .cover-photo img {
  object-position: var(--p01-cover-image-position);
}

#page-1 .cover-copy {
  left: var(--p01-card-left);
  right: var(--p01-card-right);
  bottom: var(--p01-card-bottom);
  padding: var(--p01-card-padding);
}

#page-1 .cover-copy-with-logo {
  grid-template-columns: minmax(0, 1fr) var(--p01-card-logo-column);
  gap: var(--p01-card-gap);
}

#page-1 .cover-card-logo {
  width: var(--p01-card-logo-width);
  max-height: var(--p01-card-logo-max-height);
}

#page-1 .cover-kicker {
  font-size: var(--p01-kicker-size);
}

#page-1 .cover-copy-with-logo h1 {
  font-size: var(--p01-title-size);
}

#page-1 .cover-copy-with-logo > .cover-copy-text > p {
  font-size: var(--p01-subtitle-size);
}

#page-1 .number {
  font-size: var(--p01-page-number-size);
}

/* =========================================================
   PAGE 02. ARRIVAL ESSENTIALS
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-2 {
  /* PAGE AND IMAGE */
  --p02-page-padding-top: 10.5mm;
  --p02-hero-height: 105mm;
  --p02-hero-position: center;
  --p02-page-gap: 3.5mm;
  /* CARDS */
  --p02-info-row-height: 36mm;
  --p02-card-gap: 3mm;
  --p02-arrival-card-padding: 3.5mm;
  --p02-bottom-height: 49mm;
  --p02-lock-column: 1.00fr;
  --p02-checkout-column: 1.00fr;
  --p02-lock-padding: 5mm;
  --p02-checkout-padding: 3.8mm;
  /* LOGO */
  --p02-logo-width: 30mm;
  --p02-logo-height: 13mm;
  /* TEXT */
  --p02-eyebrow-size: 2.48mm;
  --p02-title-size: 12mm;
  --p02-card-label-size: 3.25mm;
  --p02-card-body-size: 3.25mm;
  --p02-lock-label-size: 3.25mm;
  --p02-lock-code-size: 9mm;
  --p02-checkout-title-size: 4mm;
  --p02-checkout-list-size: 3.25mm;
  --p02-footer-size: 3.25mm;
  --p02-button-size: 3.25mm;
  --p02-page-number-size: 2.1mm;
}


.p1 .page-inner {
  padding-top: 10.5mm;
}

.arrival-layout {
  grid-template-rows: auto 66mm auto 1fr auto;
  gap: 4.3mm;
}

.arrival-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6mm;
}

.arrival-logo {
  width: 68mm;
  height: auto;
}

.arrival-heading {
  text-align: right;
  padding-top: 3mm;
}

.arrival-heading h1 {
  font-size: 12.2mm;
}

.arrival-hero {
  height: 66mm;
}

.arrival-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.6mm;
}

.arrival-card {
  min-height: 37mm;
}

.arrival-card strong {
  display: block;
  color: var(--cp-blue);
  font-size: 3.05mm;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1.2mm;
}

.lock-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4mm;
  background: var(--cp-blue);
  color: #fff;
  border-radius: 3.6mm;
  padding: 3.4mm 4mm;
}

.lock-code-label {
  font-size: 4.5mm;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

.lock-code {
  font: 600 7.4mm var(--serif);
  letter-spacing: .12em;
}

.arrival-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4mm;
  align-items: center;
}

.arrival-footer p {
  margin: 0;
}

.arrival-address {
  font-size: 2.45mm;
}

.warning-card {
  background: #fff8e8;
  border: 1px solid #ddc684;
  border-radius: 3.7mm;
  padding: 3.6mm;
}

.warning-card strong {
  color: #755a10;
}

#page-2 {
  /* * ADJUST THE ARRIVAL PAGE HERE */
  --arrival-hero-height: 110mm;
  /* Height of each row containing the four information cards */
  --arrival-info-row-height: 31mm;
  /* Shared height of the lock-code and checkout cards */
  --arrival-bottom-height: 49mm;
  /* * Width ratio of the two bottom cards.
   * Increase the first value to widen the lock-code card. */
  --arrival-lock-column: 0.72fr;
  --arrival-checkout-column: 1.28fr;
  --arrival-page-gap: 3.5mm;
  --arrival-card-gap: 3mm;
}

#page-2 .arrival-layout {
  display: grid;
  grid-template-rows: auto
    var(--arrival-hero-height)
    auto
    var(--arrival-bottom-height)
    auto;
  gap: var(--arrival-page-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#page-2 .arrival-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 5mm;
  min-height: 0;
}

#page-2 .arrival-logo {
  width: 30mm;
  height: 13mm;
  object-fit: contain;
}

#page-2 .arrival-heading {
  margin-left: auto;
  text-align: right;
}

#page-2 .arrival-heading .eyebrow {
  margin-bottom: 2mm;
}

#page-2 .arrival-heading h1 {
  font-size: 12mm;
  line-height: 1;
}

#page-2 .arrival-hero {
  width: 100%;
  height: 100%;
  margin: 0;
}

#page-2 .arrival-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#page-2 .arrival-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--arrival-info-row-height);
  gap: var(--arrival-card-gap);
  min-height: 0;
}

#page-2 .arrival-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 3.5mm;
  overflow: hidden;
}

#page-2 .arrival-card strong {
  display: block;
  margin-bottom: 1.5mm;
  color: var(--cp-blue);
  font-size: 2.45mm;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#page-2 .arrival-card p {
  margin: 0;
  font-size: 2.35mm;
  line-height: 1.42;
}

#page-2 .arrival-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--arrival-lock-column))
    minmax(0, var(--arrival-checkout-column));
  gap: var(--arrival-card-gap);
  width: 100%;
  height: var(--arrival-bottom-height);
  min-height: 0;
}

#page-2 .lock-code-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 5mm;
  color: white;
  background: var(--cp-blue);
  border-radius: 3.8mm;
  overflow: hidden;
}

#page-2 .lock-code-label {
  color: white;
  font-size: 2.7mm;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-2 .lock-code {
  display: block;
  color: white;
  font-family: var(--serif);
  font-size: 9mm;
  line-height: 1;
  text-align: right;
}

#page-2 .arrival-checkout-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 3.8mm;
  overflow: hidden;
}

#page-2 .arrival-checkout-card h3 {
  margin: 0 0 2mm;
  font-size: 4mm;
  line-height: 1.15;
}

#page-2 .arrival-checkout-list {
  display: block !important;
  grid-template-columns: none !important;
  columns: 1 !important;
  column-count: 1 !important;
  column-width: auto !important;
  margin: 0;
  padding-left: 4.5mm;
}

#page-2 .arrival-checkout-list li {
  display: list-item;
  break-inside: avoid;
  margin: 0 0 1.25mm;
  font-size: 2.35mm;
  line-height: 1.35;
}

#page-2 .arrival-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 5mm;
  min-height: 0;
}

#page-2 .arrival-address {
  margin: 0;
  font-size: 1.85mm;
  line-height: 1.4;
}

#page-2 .arrival-footer .link-button {
  flex: 0 0 auto;
}


#page-2 .page-inner {
  padding-top: var(--p02-page-padding-top);
}

#page-2 .arrival-layout {
  grid-template-rows: auto
    var(--p02-hero-height)
    auto
    var(--p02-bottom-height)
    auto;
  gap: var(--p02-page-gap);
}

#page-2 .arrival-logo {
  width: var(--p02-logo-width);
  height: var(--p02-logo-height);
}

#page-2 .arrival-heading .eyebrow {
  font-size: var(--p02-eyebrow-size);
}

#page-2 .arrival-heading h1 {
  font-size: var(--p02-title-size);
}

#page-2 .arrival-hero {
  height: var(--p02-hero-height);
}

#page-2 .arrival-hero img {
  object-position: var(--p02-hero-position);
}

#page-2 .arrival-grid {
  grid-auto-rows: var(--p02-info-row-height);
  gap: var(--p02-card-gap);
}

#page-2 .arrival-card {
  padding: var(--p02-arrival-card-padding);
}

#page-2 .arrival-card strong {
  font-size: var(--p02-card-label-size);
}

#page-2 .arrival-card p {
  font-size: var(--p02-card-body-size);
}

#page-2 .arrival-bottom-grid {
  grid-template-columns: minmax(0, var(--p02-lock-column))
    minmax(0, var(--p02-checkout-column));
  gap: var(--p02-card-gap);
  height: var(--p02-bottom-height);
}

#page-2 .lock-code-box {
  padding: var(--p02-lock-padding);
}

#page-2 .lock-code-label {
  font-size: var(--p02-lock-label-size);
}

#page-2 .lock-code {
  font-size: var(--p02-lock-code-size);
}

#page-2 .arrival-checkout-card {
  padding: var(--p02-checkout-padding);
}

#page-2 .arrival-checkout-card h3 {
  font-size: var(--p02-checkout-title-size);
}

#page-2 .arrival-checkout-list li {
  font-size: var(--p02-checkout-list-size);
}

#page-2 .arrival-address {
  font-size: var(--p02-footer-size);
}

#page-2 .arrival-footer .link-button {
  font-size: var(--p02-button-size);
}

#page-2 .number {
  font-size: var(--p02-page-number-size);
}

/* =========================================================
   PAGE 03. INDEX
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-3 {
  /* HEADER AND LOGO */
  --p03-header-top: 12mm;
  --p03-header-height: 58mm;
  --p03-header-width: 180.6mm;
  --p03-header-gap: 7mm;
  --p03-logo-panel-width: 55mm;
  --p03-logo-panel-height: 47mm;
  --p03-logo-width: 100%;
  --p03-logo-height: 100%;
  /* INDEX CARDS */
  --p03-groups-top: 75mm;
  --p03-groups-height: 196mm;
  --p03-group-width: 88.45mm;
  --p03-group-height: 95mm;
  --p03-group-padding-y: 3.7mm;
  --p03-group-padding-x: 4mm;
  --p03-link-height: 19.7mm;
  --p03-number-circle-size: 7mm;
  /* TEXT */
  --p03-eyebrow-size: 2.55mm;
  --p03-title-size: 9.5mm;
  --p03-header-body-size: 3.25mm;
  --p03-group-title-size: 3.25mm;
  --p03-link-title-size: 3.25mm;
  --p03-link-summary-size: 2.88mm;
  --p03-link-number-size: 2.1mm;
  --p03-cover-link-size: 2mm;
  --p03-page-number-size: 2.1mm;
}


.index-page .page-inner {
  padding: 12mm 14.7mm 14.7mm;
}

.index-layout {
  grid-template-rows: 61mm 1fr;
  gap: 5mm;
}

.index-hero {
  height: 61mm;
  border-radius: 4.2mm;
}

.index-hero::after {
  border-color: rgba(255,255,255,.18);
}

.index-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(15,48,62,.9),rgba(15,48,62,.28));
  z-index: 1;
}

.index-hero-copy {
  position: absolute;
  z-index: 2;
  left: 7mm;
  right: 7mm;
  bottom: 6mm;
  color: #fff;
  max-width: 132mm;
}

.index-hero-copy .eyebrow,.index-hero-copy h2,.index-hero-copy p {
  color: #fff;
}

.index-hero-copy h2 {
  font-size: 9.3mm;
}

.index-hero-copy p {
  font-size: 2.55mm;
  line-height: 1.42;
  margin: 2mm 0 0;
}

.index-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3.7mm;
  min-height: 0;
}

.index-group {
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(31,94,121,.15);
  border-radius: 3.8mm;
  padding: 3.4mm 3.8mm;
  display: grid;
  grid-template-rows: auto repeat(4,1fr);
  min-height: 0;
}

.index-group h3 {
  font-family: var(--sans);
  font-size: 2.55mm;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 1.5mm;
  padding-bottom: 1.6mm;
  border-bottom: 1px solid rgba(31,94,121,.22);
}

.index-link {
  display: grid;
  grid-template-columns: 8mm 1fr;
  grid-template-rows: auto auto;
  column-gap: 2mm;
  align-content: center;
  text-decoration: none;
  border-bottom: 1px solid rgba(31,94,121,.12);
  padding: 1.4mm 0;
  color: var(--cp-ink);
}

.index-link:last-child {
  border-bottom: 0;
}

.index-link>span {
  grid-row: 1/3;
  align-self: center;
  width: 7mm;
  height: 7mm;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cp-blue);
  color: #fff;
  font-size: 2.1mm;
  font-weight: 700;
  letter-spacing: .03em;
}

.index-link b {
  font-size: 2.45mm;
  line-height: 1.2;
  color: var(--cp-blue);
}

.index-link small {
  font-size: 1.9mm;
  line-height: 1.25;
  color: #52636a;
  margin-top: .35mm;
}

.index-link:hover b,.index-link:focus b {
  text-decoration: underline;
}

.index-layout {
  display: flex !important;
  flex-direction: column;
  gap: 5mm;
}

.index-header {
  width: 100%;
  height: 58mm;
  flex: 0 0 58mm;
  display: flex;
  align-items: center;
  gap: 7mm;
  background: var(--cp-blue);
  border-radius: 4.2mm;
  padding: 5.2mm 6mm;
  color: #fff;
  overflow: hidden;
}

.index-logo-panel {
  width: 55mm;
  height: 47mm;
  flex: 0 0 55mm;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.96);
  border-radius: 3.2mm;
  padding: 2.5mm;
}

.index-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.index-header-copy {
  min-width: 0;
}

.index-header-copy .eyebrow,.index-header-copy h2,.index-header-copy p {
  color: #fff;
}

.index-header-copy h2 {
  font-size: 9.5mm;
}

.index-header-copy p {
  font-size: 2.55mm;
  line-height: 1.42;
  margin: 2.2mm 0 0;
  max-width: 99mm;
}

.index-groups {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  width: 100%;
  flex: 1;
  gap: 3.7mm;
  min-height: 0;
}

.index-group {
  width: calc(50% - 1.85mm);
  flex: 0 0 calc(50% - 1.85mm);
  height: calc(50% - 1.85mm);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.index-link {
  position: relative;
  display: block;
  flex: 1;
  padding: 1.45mm 0 1.45mm 10mm;
  min-height: 0;
}

.index-link>span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7mm;
  height: 7mm;
}

.index-link b,.index-link small {
  display: block;
}

.index-page .page-inner {
  padding: 0;
}

.index-layout {
  display: block !important;
  position: absolute;
  inset: 0;
}

.index-header {
  position: absolute;
  left: 14.7mm;
  right: 14.7mm;
  top: 12mm;
  width: auto;
  height: 58mm;
  display: flex;
}

.index-groups {
  position: absolute;
  left: 14.7mm;
  right: 14.7mm;
  top: 75mm;
  height: 196mm;
  display: block;
  width: auto;
}

.index-group {
  position: absolute;
  width: 88.45mm;
  height: 95mm;
  display: block;
  padding: 3.7mm 4mm;
}

.index-group:nth-child(1) {
  left: 0;
  top: 0;
}

.index-group:nth-child(2) {
  right: 0;
  top: 0;
}

.index-group:nth-child(3) {
  left: 0;
  bottom: 0;
}

.index-group:nth-child(4) {
  right: 0;
  bottom: 0;
}

.index-group h3 {
  height: 8mm;
  margin: 0;
  padding: 0 0 1.6mm;
  display: flex;
  align-items: flex-start;
}

.index-link {
  position: relative;
  display: block;
  height: 19.7mm;
  padding: 1.7mm 1mm 1.2mm 10mm;
  border-bottom: 1px solid rgba(31,94,121,.12);
}

.index-link>span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7mm;
  height: 7mm;
}

.index-link b {
  font-size: 2.45mm;
  line-height: 1.18;
  white-space: normal;
}

.index-link small {
  font-size: 1.88mm;
  line-height: 1.22;
  margin-top: .45mm;
  white-space: normal;
}

.index-header {
  left: 14.7mm;
  right: auto;
  width: 180.6mm;
}

.index-groups {
  left: 14.7mm;
  right: auto;
  width: 180.6mm;
}

.index-group:nth-child(2) {
  left: 92.15mm;
  right: auto;
}

.index-group:nth-child(4) {
  left: 92.15mm;
  right: auto;
}

.index-cover-link {
  display: inline-block;
  margin-top: 2.6mm;
  padding: 1.25mm 2.2mm;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 2mm;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.index-cover-link:hover,.index-cover-link:focus {
  background: rgba(255,255,255,.12);
}


#page-3 .index-header {
  top: var(--p03-header-top);
  width: var(--p03-header-width);
  height: var(--p03-header-height);
  gap: var(--p03-header-gap);
}

#page-3 .index-logo-panel {
  width: var(--p03-logo-panel-width);
  height: var(--p03-logo-panel-height);
  flex-basis: var(--p03-logo-panel-width);
}

#page-3 .index-logo {
  width: var(--p03-logo-width);
  height: var(--p03-logo-height);
}

#page-3 .index-header-copy .eyebrow {
  font-size: var(--p03-eyebrow-size);
}

#page-3 .index-header-copy h2 {
  font-size: var(--p03-title-size);
}

#page-3 .index-header-copy p {
  font-size: var(--p03-header-body-size);
}

#page-3 .index-groups {
  top: var(--p03-groups-top);
  height: var(--p03-groups-height);
  width: var(--p03-header-width);
}

#page-3 .index-group {
  width: var(--p03-group-width);
  height: var(--p03-group-height);
  padding: var(--p03-group-padding-y) var(--p03-group-padding-x);
}

#page-3 .index-group h3 {
  font-size: var(--p03-group-title-size);
}

#page-3 .index-link {
  height: var(--p03-link-height);
}

#page-3 .index-link > span {
  width: var(--p03-number-circle-size);
  height: var(--p03-number-circle-size);
  font-size: var(--p03-link-number-size);
}

#page-3 .index-link b {
  font-size: var(--p03-link-title-size);
}

#page-3 .index-link small {
  font-size: var(--p03-link-summary-size);
}

#page-3 .index-cover-link {
  font-size: var(--p03-cover-link-size);
}

#page-3 .number {
  font-size: var(--p03-page-number-size);
}

/* =========================================================
   PAGE 04. WELCOME
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-4 {
  /* IMAGE AND LAYOUT */
  --p04-hero-height: 180mm;
  --p04-hero-position: center;
  --p04-layout-gap: 5mm;
  /* CARDS / STATISTICS */
  --p04-stat-gap: 2.8mm;
  --p04-stat-top-padding: 2.3mm;
  /* TEXT */
  --p04-eyebrow-size: 2.48mm;
  --p04-title-size: 9.5mm;
  --p04-lede-size: 4.45mm;
  --p04-body-size: 3.25mm;
  --p04-stat-value-size: 5mm;
  --p04-stat-label-size: 2.1mm;
  --p04-page-number-size: 2.1mm;
}


.p2-layout {
  grid-template-rows: auto 180mm 1fr;
  gap: 5mm;
}

.p2-hero {
  height: 180mm;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2.8mm;
}

.stat {
  border-top: 2px solid var(--cp-blue);
  padding-top: 2.3mm;
}

.stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 5mm;
  color: var(--cp-blue);
  font-weight: 500;
}

.stat span {
  font-size: 2.1mm;
  text-transform: uppercase;
  letter-spacing: .08em;
}


#page-4 .p2-layout {
  grid-template-rows: auto var(--p04-hero-height) 1fr;
  gap: var(--p04-layout-gap);
}

#page-4 .p2-hero {
  height: var(--p04-hero-height);
}

#page-4 .p2-hero img {
  object-position: var(--p04-hero-position);
}

#page-4 .eyebrow {
  font-size: var(--p04-eyebrow-size);
}

#page-4 h2 {
  font-size: var(--p04-title-size);
}

#page-4 .lede {
  font-size: var(--p04-lede-size);
}

#page-4 p {
  font-size: var(--p04-body-size);
}

#page-4 .stat-row {
  gap: var(--p04-stat-gap);
}

#page-4 .stat {
  padding-top: var(--p04-stat-top-padding);
}

#page-4 .stat strong {
  font-size: var(--p04-stat-value-size);
}

#page-4 .stat span {
  font-size: var(--p04-stat-label-size);
}

#page-4 .number {
  font-size: var(--p04-page-number-size);
}

/* =========================================================
   PAGE 05. THE GARDEN STUDIO
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-5 {
  /* IMAGE AND LAYOUT */
  --p05-hero-height: 145mm;
  --p05-hero-position: center;
  --p05-layout-gap: 5mm;
  --p05-card-gap: 3.5mm;
  --p05-card-padding: 4mm;
  /* TEXT */
  --p05-eyebrow-size: 2.48mm;
  --p05-title-size: 9.5mm;
  --p05-lede-size: 4.45mm;
  --p05-card-title-size: 4.45mm;
  --p05-card-body-size: 3.25mm;
  --p05-page-number-size: 2.1mm;
}


.p3-layout {
  grid-template-rows: auto 145mm 1fr;
  gap: 5mm;
}

.p3-photo {
  height: 145mm;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3.5mm;
}

.feature-grid .card p {
  font-size: 3.25mm;
}


#page-5 .p3-layout {
  grid-template-rows: auto var(--p05-hero-height) 1fr;
  gap: var(--p05-layout-gap);
}

#page-5 .p3-photo {
  height: var(--p05-hero-height);
}

#page-5 .p3-photo img {
  object-position: var(--p05-hero-position);
}

#page-5 .feature-grid {
  gap: var(--p05-card-gap);
}

#page-5 .feature-grid .card {
  padding: var(--p05-card-padding);
}

#page-5 .eyebrow {
  font-size: var(--p05-eyebrow-size);
}

#page-5 h2 {
  font-size: var(--p05-title-size);
}

#page-5 .lede {
  font-size: var(--p05-lede-size);
}

#page-5 .feature-grid h3 {
  font-size: var(--p05-card-title-size);
}

#page-5 .feature-grid .card p {
  font-size: var(--p05-card-body-size);
}

#page-5 .number {
  font-size: var(--p05-page-number-size);
}

/* =========================================================
   PAGE 06. BREAKFAST
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-6 {
  /* IMAGES AND LAYOUT */
  --p06-main-image-height: 125mm;
  --p06-mini-image-height: 70mm;
  --p06-main-image-position: center;
  --p06-mini-image-position: center;
  --p06-layout-gap: 4mm;
  --p06-mini-gap: 5.2mm;
  --p06-step-gap: 3mm;
  /* TEXT */
  --p06-eyebrow-size: 2.48mm;
  --p06-title-size: 9.5mm;
  --p06-lede-size: 4.45mm;
  --p06-step-title-size: 4.3mm;
  --p06-step-body-size: 3.25mm;
  --p06-page-number-size: 2.1mm;
}


.p4-layout {
  grid-template-rows: auto 125mm 70mm 1fr;
  gap: 4mm;
}

.p4-main {
  height: 125mm;
}

.p4-mini {
  height: 70mm;
}

.morning-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3mm;
}

.morning-step {
  border-top: 2px solid var(--cp-blue);
  padding-top: 2mm;
}

.morning-step strong {
  display: block;
  color: var(--cp-blue);
  font-family: var(--serif);
  font-size: 4.3mm;
  margin-bottom: 1mm;
}


#page-6 .p4-layout {
  grid-template-rows: auto
    var(--p06-main-image-height)
    var(--p06-mini-image-height)
    1fr;
  gap: var(--p06-layout-gap);
}

#page-6 .p4-main {
  height: var(--p06-main-image-height);
}

#page-6 .p4-mini {
  height: var(--p06-mini-image-height);
}

#page-6 .p4-main img {
  object-position: var(--p06-main-image-position);
}

#page-6 .p4-mini img {
  object-position: var(--p06-mini-image-position);
}

#page-6 .grid-2 {
  gap: var(--p06-mini-gap);
}

#page-6 .morning-row {
  gap: var(--p06-step-gap);
}

#page-6 .eyebrow {
  font-size: var(--p06-eyebrow-size);
}

#page-6 h2 {
  font-size: var(--p06-title-size);
}

#page-6 .lede {
  font-size: var(--p06-lede-size);
}

#page-6 .morning-step strong {
  font-size: var(--p06-step-title-size);
}

#page-6 .morning-step .small {
  font-size: var(--p06-step-body-size);
}

#page-6 .number {
  font-size: var(--p06-page-number-size);
}

/* =========================================================
   PAGE 07. MEET THE ANIMALS
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-7 {
  /* IMAGES AND CARDS */
  --p07-left-image-column: 1.2fr;
  --p07-right-image-column: 0.8fr;
  --p07-image-row-height: 1fr;
  --p07-large-image-height: 100%;
  --p07-small-image-height: 100%;
  --p07-image-gap: 3.5mm;
  --p07-note-gap: 3.5mm;
  --p07-card-padding: 4mm;
  --p07-callout-padding: 4.5mm;
  /* TEXT */
  --p07-eyebrow-size: 2.48mm;
  --p07-title-size: 9.5mm;
  --p07-lede-size: 4.45mm;
  --p07-card-title-size: 4.45mm;
  --p07-card-body-size: 3.25mm;
  --p07-page-number-size: 2.1mm;
}


.p5-layout {
  grid-template-rows: auto 1fr auto;
  gap: 5mm;
}

.animal-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 1fr 1fr;
  gap: 3.5mm;
  min-height: 0;
}

.animal-grid .large {
  grid-row: 1/3;
}

.animal-grid .photo {
  height: 100%;
}

.animal-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5mm;
}


#page-7 .animal-grid {
  grid-template-columns: var(--p07-left-image-column)
    var(--p07-right-image-column);
  grid-template-rows: var(--p07-image-row-height)
    var(--p07-image-row-height);
  gap: var(--p07-image-gap);
}

#page-7 .animal-grid .large {
  height: var(--p07-large-image-height);
}

#page-7 .animal-grid .photo:not(.large) {
  height: var(--p07-small-image-height);
}

#page-7 .animal-notes {
  gap: var(--p07-note-gap);
}

#page-7 .animal-notes .card {
  padding: var(--p07-card-padding);
}

#page-7 .animal-notes .callout {
  padding: var(--p07-callout-padding);
}

#page-7 .eyebrow {
  font-size: var(--p07-eyebrow-size);
}

#page-7 h2 {
  font-size: var(--p07-title-size);
}

#page-7 .lede {
  font-size: var(--p07-lede-size);
}

#page-7 .animal-notes h3 {
  font-size: var(--p07-card-title-size);
}

#page-7 .animal-notes .small {
  font-size: var(--p07-card-body-size);
}

#page-7 .number {
  font-size: var(--p07-page-number-size);
}

/* =========================================================
   PAGE 08. FARM EXPERIENCES
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-8 {
  /* IMAGES AND CARDS */
  --p08-experience-image-height: 148mm;
  --p08-image-position: center;
  --p08-card-gap: 4mm;
  --p08-card-padding: 4mm;
  --p08-card-internal-gap: 2.4mm;
  --p08-strip-gap: 2.5mm;
  --p08-strip-card-padding: 3mm;
  /* TEXT */
  --p08-eyebrow-size: 2.48mm;
  --p08-title-size: 9.5mm;
  --p08-lede-size: 4.45mm;
  --p08-card-title-size: 4.45mm;
  --p08-card-body-size: 3.25mm;
  --p08-badge-size: 2.12mm;
  --p08-strip-title-size: 3.25mm;
  --p08-strip-body-size: 3.25mm;
  --p08-page-number-size: 2.1mm;
}


.p6-layout {
  grid-template-rows: auto 1fr auto;
  gap: 5mm;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  min-height: 0;
}

.experience-card {
  display: grid;
  grid-template-rows: 148mm auto 1fr auto;
  gap: 2.4mm;
}

.experience-card .photo {
  height: 148mm;
}

.experience-card p {
  font-size: 3.25mm;
}

.experience-strip {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2.5mm;
}

.experience-strip .card {
  padding: 3mm;
  text-align: center;
}

.experience-strip strong {
  display: block;
  color: var(--cp-blue);
  font-size: 3.25mm;
  margin-bottom: .7mm;
}


#page-8 .experience-grid {
  gap: var(--p08-card-gap);
}

#page-8 .experience-card {
  grid-template-rows: var(--p08-experience-image-height)
    auto
    1fr
    auto;
  gap: var(--p08-card-internal-gap);
  padding: var(--p08-card-padding);
}

#page-8 .experience-card .photo {
  height: var(--p08-experience-image-height);
}

#page-8 .experience-card .photo img {
  object-position: var(--p08-image-position);
}

#page-8 .experience-strip {
  gap: var(--p08-strip-gap);
}

#page-8 .experience-strip .card {
  padding: var(--p08-strip-card-padding);
}

#page-8 .eyebrow {
  font-size: var(--p08-eyebrow-size);
}

#page-8 h2 {
  font-size: var(--p08-title-size);
}

#page-8 .lede {
  font-size: var(--p08-lede-size);
}

#page-8 .experience-card h3 {
  font-size: var(--p08-card-title-size);
}

#page-8 .experience-card p {
  font-size: var(--p08-card-body-size);
}

#page-8 .badge {
  font-size: var(--p08-badge-size);
}

#page-8 .experience-strip strong {
  font-size: var(--p08-strip-title-size);
}

#page-8 .experience-strip .small {
  font-size: var(--p08-strip-body-size);
}

#page-8 .number {
  font-size: var(--p08-page-number-size);
}

/* =========================================================
   PAGE 09. BUSHLAND WALKS AND MAP
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-9 {
  /* MAP AND CARDS */
  --p09-map-height: 127mm;
  --p09-map-position: center;
  --p09-layout-gap: 4.5mm;
  --p09-card-gap: 4mm;
  --p09-card-padding: 4mm;
  --p09-card-section-gap: 4mm;
  /* TEXT */
  --p09-eyebrow-size: 2.48mm;
  --p09-title-size: 9.5mm;
  --p09-lede-size: 4.45mm;
  --p09-card-title-size: 4.45mm;
  --p09-card-body-size: 3.25mm;
  --p09-list-size: 3.25mm;
  --p09-page-number-size: 2.1mm;
}


.p7-layout {
  grid-template-rows: auto 127mm 1fr;
  gap: 4.5mm;
}

.p7-map {
  height: 127mm;
}

.walk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
}

.walk-grid .card p {
  font-size: 3.25mm;
}

.walk-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4mm;
  align-items: start;
}

.walk-card {
  display: flex;
  flex-direction: column;
  gap: 4mm;
  height: auto;
  min-height: 0;
}

.walk-card p {
  margin: 0 0 2.5mm;
}

.walk-section {
  padding-top: 3.5mm;
  border-top: 1px solid rgba(31, 94, 121, 0.18);
}

.walk-section h3 {
  margin-bottom: 2mm;
}

.walk-list {
  margin: 0;
  padding-left: 5mm;
}

.walk-list li {
  margin-bottom: 1.8mm;
  font-size: 3.25mm;
  line-height: 1.45;
}


#page-9 .p7-layout {
  grid-template-rows: auto var(--p09-map-height) 1fr;
  gap: var(--p09-layout-gap);
}

#page-9 .p7-map {
  height: var(--p09-map-height);
}

#page-9 .p7-map img {
  object-position: var(--p09-map-position);
}

#page-9 .walk-grid {
  gap: var(--p09-card-gap);
}

#page-9 .walk-card {
  gap: var(--p09-card-section-gap);
  padding: var(--p09-card-padding);
}

#page-9 .eyebrow {
  font-size: var(--p09-eyebrow-size);
}

#page-9 h2 {
  font-size: var(--p09-title-size);
}

#page-9 .lede {
  font-size: var(--p09-lede-size);
}

#page-9 .walk-card h3 {
  font-size: var(--p09-card-title-size);
}

#page-9 .walk-grid .card p {
  font-size: var(--p09-card-body-size);
}

#page-9 .walk-list li {
  font-size: var(--p09-list-size);
}

#page-9 .number {
  font-size: var(--p09-page-number-size);
}

/* =========================================================
   PAGE 10. NATIVE WILDLIFE
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-10 {
  /* IMAGES AND CARD */
  --p10-hero-height: 88mm;
  --p10-hero-position: center;
  --p10-lower-image-height: 100%;
  --p10-lower-image-position: center;
  --p10-layout-gap: 4mm;
  --p10-card-gap: 3mm;
  --p10-card-padding: 4mm;
  /* TEXT */
  --p10-eyebrow-size: 2.48mm;
  --p10-title-size: 9.5mm;
  --p10-lede-size: 4.45mm;
  --p10-card-eyebrow-size: 3.25mm;
  --p10-card-title-size: 4.45mm;
  --p10-card-body-size: 3.25mm;
  --p10-button-size: 3.25mm;
  --p10-page-number-size: 2.1mm;
}


#page-10 .wildlife-one-page {
  display: grid;
  grid-template-rows: auto
    88mm
    minmax(0, 1fr);
  gap: 4mm;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#page-10 .wildlife-feature {
  width: 100%;
  height: 88mm;
  min-height: 0;
}

#page-10 .wildlife-hero {
  width: 100%;
  height: 100%;
  margin: 0;
}

#page-10 .wildlife-hero-photo {
  width: 100%;
  height: 100%;
}

#page-10 .wildlife-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#page-10 .wildlife-lower-grid {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

#page-10 .wildlife-video-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 3mm;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4mm;
  overflow: hidden;
}

#page-10 .wildlife-video-copy {
  display: block;
  width: 100%;
  min-width: 0;
}

#page-10 .wildlife-video-copy .eyebrow {
  margin: 0 0 1.2mm;
}

#page-10 .wildlife-video-copy h3 {
  margin: 0 0 1.8mm;
}

#page-10 .wildlife-video-copy p {
  margin: 0 0 1.8mm;
  font-size: 3.25mm;
  line-height: 1.4;
}

#page-10 .wildlife-video-copy .link-button {
  display: inline-block;
  width: max-content;
  margin-top: 1mm;
}

#page-10 .wildlife-camera-figure {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

#page-10 .wildlife-camera-photo {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#page-10 .wildlife-camera-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


#page-10 .wildlife-one-page {
  grid-template-rows: auto
    var(--p10-hero-height)
    minmax(0, 1fr);
  gap: var(--p10-layout-gap);
}

#page-10 .wildlife-feature {
  height: var(--p10-hero-height);
}

#page-10 .wildlife-hero-photo img {
  object-position: var(--p10-hero-position);
}

#page-10 .wildlife-video-card {
  gap: var(--p10-card-gap);
  padding: var(--p10-card-padding);
}

#page-10 .wildlife-camera-photo {
  height: var(--p10-lower-image-height);
}

#page-10 .wildlife-camera-photo img {
  object-position: var(--p10-lower-image-position);
}

#page-10 .wildlife-header .eyebrow {
  font-size: var(--p10-eyebrow-size);
}

#page-10 .wildlife-header h2 {
  font-size: var(--p10-title-size);
}

#page-10 .wildlife-header .lede {
  font-size: var(--p10-lede-size);
}

#page-10 .wildlife-video-copy .eyebrow {
  font-size: var(--p10-card-eyebrow-size);
}

#page-10 .wildlife-video-copy h3 {
  font-size: var(--p10-card-title-size);
}

#page-10 .wildlife-video-copy p {
  font-size: var(--p10-card-body-size);
}

#page-10 .wildlife-video-copy .link-button {
  font-size: var(--p10-button-size);
}

#page-10 .number {
  font-size: var(--p10-page-number-size);
}

/* =========================================================
   PAGE 11. NEARBY PLACES
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-11 {
  /* IMAGES AND CARDS */
  --p11-image-height: 65mm;
  --p11-image-position: center;
  --p11-layout-gap: 3mm;
  --p11-card-gap: 3mm;
  --p11-card-padding: 3mm;
  --p11-card-internal-gap: 1.5mm;
  /* TEXT */
  --p11-eyebrow-size: 2.48mm;
  --p11-title-size: 9.5mm;
  --p11-lede-size: 4.45mm;
  --p11-group-title-size: 4.3mm;
  --p11-card-title-size: 4mm;
  --p11-card-body-size: 3.15mm;
  --p11-card-link-size: 2.3mm;
  --p11-note-size: 3.25mm;
  --p11-page-number-size: 2.1mm;
}


.p9-layout {
  grid-template-rows: auto 1fr auto;
  gap: 4.5mm;
}

.place-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3.5mm;
  min-height: 0;
}

.place-card {
  display: grid;
  grid-template-rows: 86mm auto 1fr auto;
  gap: 2.2mm;
}

.place-card .photo {
  height: 86mm;
}

.place-card p {
  font-size: 2.32mm;
}

.place-card a {
  font-size: 2.1mm;
  color: var(--cp-blue);
  font-weight: 700;
}

#page-11 .p9-layout {
  display: grid;
  grid-template-rows: auto
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto;
  gap: 3mm;
  height: 100%;
  min-height: 0;
}

#page-11 .places-group-title {
  margin: 0;
  color: var(--cp-blue);
  font-family: var(--serif);
  font-size: 4.3mm;
  font-weight: 500;
  line-height: 1.15;
}

#page-11 .place-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3mm;
  min-height: 0;
}

#page-11 .place-card {
  display: grid;
  grid-template-rows: 69mm
    auto
    minmax(0, 1fr)
    auto;
  gap: 1.5mm;
  min-width: 0;
  min-height: 0;
  padding: 3mm;
}

#page-11 .place-card .photo {
  width: 100%;
  height: 69mm;
  margin: 0;
}

#page-11 .place-card .photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-11 .place-card h3 {
  margin: 0;
  font-size: 4.00mm;
  line-height: 1.15;
}

#page-11 .place-card p {
  margin: 0;
  font-size: 2.95mm;
  line-height: 1.38;
}

#page-11 .place-card a {
  align-self: end;
  color: var(--cp-blue);
  font-size: 1.9mm;
  font-weight: 600;
  line-height: 1.3;
}

#page-11 .places-page-note {
  margin: 0;
  padding-right: 12mm;
  line-height: 1.4;
}


#page-11 .p9-layout {
  gap: var(--p11-layout-gap);
}

#page-11 .place-grid {
  gap: var(--p11-card-gap);
}

#page-11 .place-card {
  grid-template-rows: var(--p11-image-height)
    auto
    minmax(0, 1fr)
    auto;
  gap: var(--p11-card-internal-gap);
  padding: var(--p11-card-padding);
}

#page-11 .place-card .photo {
  height: var(--p11-image-height);
}

#page-11 .place-card .photo img {
  object-position: var(--p11-image-position);
}

#page-11 .eyebrow {
  font-size: var(--p11-eyebrow-size);
}

#page-11 h2 {
  font-size: var(--p11-title-size);
}

#page-11 .lede {
  font-size: var(--p11-lede-size);
}

#page-11 .places-group-title {
  font-size: var(--p11-group-title-size);
}

#page-11 .place-card h3 {
  font-size: var(--p11-card-title-size);
}

#page-11 .place-card p {
  font-size: var(--p11-card-body-size);
}

#page-11 .place-card a {
  font-size: var(--p11-card-link-size);
}

#page-11 .places-page-note {
  font-size: var(--p11-note-size);
}

#page-11 .number {
  font-size: var(--p11-page-number-size);
}

/* =========================================================
   PAGE 12. BEACONSFIELD AND BEAUTY POINT
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-12 {
  /* IMAGES AND CARDS */
  --p12-image-height: 72mm;
  --p12-image-position: center;
  --p12-page-gap: 4.5mm;
  --p12-card-gap: 4mm;
  --p12-card-padding: 3.5mm;
  --p12-panel-padding-y: 4mm;
  --p12-panel-padding-x: 5mm;
  --p12-panel-gap: 7mm;
  /* TEXT */
  --p12-eyebrow-size: 2.48mm;
  --p12-title-size: 9.2mm;
  --p12-lede-size: 4.45mm;
  --p12-card-title-size: 4mm;
  --p12-card-body-size: 3.25mm;
  --p12-link-size: 2.3mm;
  --p12-panel-title-size: 4mm;
  --p12-panel-body-size: 3.25mm;
  --p12-page-number-size: 2.1mm;
}


#page-12 .northern-day-layout {
  display: grid;
  grid-template-rows: auto
    minmax(0, 1fr)
    auto;
  gap: 4.5mm;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#page-12 .northern-day-header {
  min-height: 0;
}

#page-12 .northern-day-header .eyebrow {
  margin-bottom: 2mm;
}

#page-12 .northern-day-header h2 {
  font-size: 9.2mm;
  line-height: 1;
}

#page-12 .northern-day-header .lede {
  max-width: 155mm;
  margin: 3mm 0 0;
  font-size: 3.6mm;
  line-height: 1.35;
}

#page-12 .northern-attraction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4mm;
  min-height: 0;
  align-items: stretch;
}

#page-12 .northern-attraction-card {
  display: grid;
  grid-template-rows: 73mm minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 3.5mm;
  overflow: hidden;
}

#page-12 .northern-attraction-figure {
  width: 100%;
  height: 73mm;
  margin: 0;
  min-height: 0;
}

#page-12 .northern-attraction-photo {
  width: 100%;
  height: 100%;
  border-radius: 2.8mm;
}

#page-12 .northern-attraction-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#page-12 .northern-attraction-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding-top: 3mm;
}

#page-12 .attraction-location {
  margin: 0 0 1.2mm;
  color: var(--cp-blue);
  font-size: 3.25mm;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

#page-12 .northern-attraction-copy h3 {
  min-height: 11mm;
  margin: 0 0 2.3mm;
  font-size: 4mm;
  line-height: 1.12;
}

#page-12 .northern-attraction-copy > p:not(.attraction-location) {
  margin: 0 0 2.5mm;
  font-size: 3.25mm;
  line-height: 1.43;
}

#page-12 .attraction-detail {
  margin-top: auto !important;
  padding-top: 2.7mm;
  border-top: 1px solid rgba(31, 94, 121, 0.18);
  color: #435860;
}

#page-12 .attraction-link {
  display: inline-block;
  width: max-content;
  margin-top: 2.5mm;
  color: var(--cp-blue);
  font-size: 2.25mm;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 94, 121, 0.55);
}

#page-12 .attraction-link:hover {
  border-bottom-color: var(--cp-blue);
}

#page-12 .northern-plan-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 7mm;
  align-items: center;
  padding: 4mm 5mm;
  color: white;
  background: var(--cp-blue);
  border-radius: 3.5mm;
}

#page-12 .northern-plan-panel h3 {
  margin: 0 0 1mm;
  color: white;
  font-size: 4mm;
}

#page-12 .northern-plan-panel p {
  margin: 0;
  color: white;
  font-size: 3.25mm;
  line-height: 1.4;
}

#page-12 .northern-plan-note {
  padding-left: 5mm;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}


#page-12 .northern-day-layout {
  gap: var(--p12-page-gap);
}

#page-12 .northern-attraction-grid {
  gap: var(--p12-card-gap);
}

#page-12 .northern-attraction-card {
  grid-template-rows: var(--p12-image-height) minmax(0, 1fr);
  padding: var(--p12-card-padding);
}

#page-12 .northern-attraction-figure {
  height: var(--p12-image-height);
}

#page-12 .northern-attraction-photo img {
  object-position: var(--p12-image-position);
}

#page-12 .northern-plan-panel {
  gap: var(--p12-panel-gap);
  padding: var(--p12-panel-padding-y) var(--p12-panel-padding-x);
}

#page-12 .northern-day-header .eyebrow {
  font-size: var(--p12-eyebrow-size);
}

#page-12 .northern-day-header h2 {
  font-size: var(--p12-title-size);
}

#page-12 .northern-day-header .lede {
  font-size: var(--p12-lede-size);
}

#page-12 .northern-attraction-copy h3 {
  font-size: var(--p12-card-title-size);
}

#page-12 .northern-attraction-copy > p:not(.attraction-location) {
  font-size: var(--p12-card-body-size);
}

#page-12 .attraction-link {
  font-size: var(--p12-link-size);
}

#page-12 .northern-plan-panel h3 {
  font-size: var(--p12-panel-title-size);
}

#page-12 .northern-plan-panel p {
  font-size: var(--p12-panel-body-size);
}

#page-12 .number {
  font-size: var(--p12-page-number-size);
}

/* =========================================================
   PAGE 13. DAY TRIPS FROM CHANDELLE PARK
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-13 {
  /* IMAGES */
  --cradle-image-height: 48mm;
  --mole-image-height: 48mm;
  --launceston-image-height: 48mm;
  --east-image-height: 48mm;
  --cradle-image-position: center 48%;
  --mole-image-position: center center;
  --launceston-image-position: center 48%;
  --east-image-position: center center;
  /* CARDS AND LAYOUT */
  --p13-page-gap: 4mm;
  --p13-card-gap: 4mm;
  --p13-card-padding: 3.2mm;
  --p13-panel-gap: 6mm;
  --p13-panel-padding-y: 3.5mm;
  --p13-panel-padding-x: 4.5mm;
  /* TEXT */
  --p13-eyebrow-size: 2.48mm;
  --p13-title-size: 9.5mm;
  --p13-lede-size: 4.45mm;
  --p13-direction-size: 1.75mm;
  --p13-card-title-size: 4.1mm;
  --p13-card-body-size: 3.25mm;
  --p13-note-size: 2.74mm;
  --p13-link-size: 2.3mm;
  --p13-panel-eyebrow-size: 2.65mm;
  --p13-panel-title-size: 3.8mm;
  --p13-panel-body-size: 2.75mm;
  --p13-page-number-size: 2.1mm;
}


#page-13 .daytrips-layout {
  display: grid;
  grid-template-rows: auto
    minmax(0, 1fr)
    auto;
  gap: 4mm;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#page-13 .daytrips-header {
  min-height: 0;
}

#page-13 .daytrips-header .eyebrow {
  margin-bottom: 1.7mm;
}

#page-13 .daytrips-header h2 {
  font-size: 9.5mm;
  line-height: 1;
}

#page-13 .daytrips-header .lede {
  max-width: 165mm;
  margin: 2.5mm 0 0;
  font-size: 3.35mm;
  line-height: 1.35;
}

#page-13 .daytrip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4mm;
  min-height: 0;
  align-items: stretch;
}

#page-13 .daytrip-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 3.2mm;
  overflow: hidden;
}

#page-13 .daytrip-figure {
  width: 100%;
  margin: 0;
  min-width: 0;
}

#page-13 .daytrip-photo {
  width: 100%;
  border-radius: 2.7mm;
  overflow: hidden;
}

#page-13 .daytrip-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-13 .daytrip-photo--cradle {
  height: var(--cradle-image-height);
}

#page-13 .daytrip-photo--cradle img {
  object-position: var(--cradle-image-position);
}

#page-13 .daytrip-photo--mole {
  height: var(--mole-image-height);
}

#page-13 .daytrip-photo--mole img {
  object-position: var(--mole-image-position);
}

#page-13 .daytrip-photo--launceston {
  height: var(--launceston-image-height);
}

#page-13 .daytrip-photo--launceston img {
  object-position: var(--launceston-image-position);
}

#page-13 .daytrip-photo--east {
  height: var(--east-image-height);
}

#page-13 .daytrip-photo--east img {
  object-position: var(--east-image-position);
}

#page-13 .daytrip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding-top: 2.3mm;
}

#page-13 .daytrip-direction {
  margin: 0 0 1mm;
  color: var(--cp-blue);
  font-size: 1.75mm;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-13 .daytrip-copy h3 {
  margin: 0 0 1.6mm;
  font-size: 4.1mm;
  line-height: 1.08;
}

#page-13 .daytrip-copy p {
  margin: 0 0 1.6mm;
  font-size: 3.25mm;
  line-height: 1.38;
}

#page-13 .daytrip-note {
  color: #506269;
  font-size: 2.74mm !important;
}

#page-13 .daytrip-link {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  margin-top: auto;
  padding-top: 1.2mm;
  color: var(--cp-blue);
  border-bottom: 1px solid rgba(31, 94, 121, 0.5);
  font-size: 2.05mm;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

#page-13 .daytrip-more {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6mm;
  padding: 3.5mm 4.5mm;
  color: white;
  background: var(--cp-blue);
  border-radius: 3.5mm;
  overflow: hidden;
}

#page-13 .daytrip-more-section {
  min-width: 0;
}

#page-13 .daytrip-more-section + .daytrip-more-section {
  padding-left: 5mm;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

#page-13 .daytrip-more .eyebrow {
  margin: 0 0 1mm;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.65mm;
}

#page-13 .daytrip-more h3 {
  margin: 0 0 1.3mm;
  color: white;
  font-size: 3.8mm;
  line-height: 1.1;
}

#page-13 .daytrip-more p {
  margin: 0;
  color: white;
  font-size: 2.15mm;
  line-height: 1.4;
}


#page-13 .daytrips-layout {
  gap: var(--p13-page-gap);
}

#page-13 .daytrip-grid {
  gap: var(--p13-card-gap);
}

#page-13 .daytrip-card {
  padding: var(--p13-card-padding);
}

#page-13 .daytrip-more {
  gap: var(--p13-panel-gap);
  padding: var(--p13-panel-padding-y) var(--p13-panel-padding-x);
}

#page-13 .daytrips-header .eyebrow {
  font-size: var(--p13-eyebrow-size);
}

#page-13 .daytrips-header h2 {
  font-size: var(--p13-title-size);
}

#page-13 .daytrips-header .lede {
  font-size: var(--p13-lede-size);
}

#page-13 .daytrip-direction {
  font-size: var(--p13-direction-size);
}

#page-13 .daytrip-copy h3 {
  font-size: var(--p13-card-title-size);
}

#page-13 .daytrip-copy p {
  font-size: var(--p13-card-body-size);
}

#page-13 .daytrip-note {
  font-size: var(--p13-note-size) !important;
}

#page-13 .daytrip-link {
  font-size: var(--p13-link-size);
}

#page-13 .daytrip-more .eyebrow {
  font-size: var(--p13-panel-eyebrow-size);
}

#page-13 .daytrip-more h3 {
  font-size: var(--p13-panel-title-size);
}

#page-13 .daytrip-more p {
  font-size: var(--p13-panel-body-size);
}

#page-13 .number {
  font-size: var(--p13-page-number-size);
}

/* =========================================================
   PAGE 14. Tamar Valley Wine Route
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-14 {
  /* FEATURE IMAGE */
  --p14-image-width: 100%;
  --p14-image-height: auto;
  --p14-image-aspect-ratio: 3 / 2;
  --p14-image-position: center;
  /* CARDS AND LAYOUT */
  --p14-layout-gap: 4mm;
  --p14-wine-grid-gap: 4mm;
  --p14-card-padding: 4mm;
  --p14-footer-card-padding: 3.2mm;
  --p14-footer-gap: 3mm;
  /* TEXT */
  --p14-eyebrow-size: 2.48mm;
  --p14-title-size: 9.5mm;
  --p14-lede-size: 4.45mm;
  --p14-body-size: 3.25mm;
  --p14-card-title-size: 4.45mm;
  --p14-card-body-size: 3.25mm;
  --p14-small-size: 3.25mm;
  --p14-button-size: 3.25mm;
  --p14-page-number-size: 2.1mm;
}


.p12-layout {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 4mm;
}

.p12-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.p12-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.wine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  align-items: start;
}

.wine-grid .card p {
  font-size: 3.25mm;
}

.route-steps {
  display: grid;
  gap: 2mm;
}

.route-step {
  display: grid;
  grid-template-columns: 8mm 1fr;
  gap: 2mm;
  align-items: start;
}

.route-step b {
  width: 7mm;
  height: 7mm;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cp-blue);
  color: #fff;
}

.wine-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3mm;
}

.wine-footer .card,.wine-footer .callout {
  padding: 3.2mm;
}

.wine-footer p {
  margin: 0;
}

.wine-feature-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  background: var(--cp-cream);
}

.wine-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


#page-14 .p12-layout {
  gap: var(--p14-layout-gap);
}

#page-14 .wine-feature-image {
  width: var(--p14-image-width);
  height: var(--p14-image-height);
  aspect-ratio: var(--p14-image-aspect-ratio);
}

#page-14 .wine-feature-image img {
  object-position: var(--p14-image-position);
}

#page-14 .wine-grid {
  gap: var(--p14-wine-grid-gap);
}

#page-14 .wine-grid .card {
  padding: var(--p14-card-padding);
}

#page-14 .wine-footer {
  gap: var(--p14-footer-gap);
}

#page-14 .wine-footer .card,
#page-14 .wine-footer .callout {
  padding: var(--p14-footer-card-padding);
}

#page-14 .eyebrow {
  font-size: var(--p14-eyebrow-size);
}

#page-14 h2 {
  font-size: var(--p14-title-size);
}

#page-14 .lede {
  font-size: var(--p14-lede-size);
}

#page-14 .wine-grid > div > p {
  font-size: var(--p14-body-size);
}

#page-14 h3 {
  font-size: var(--p14-card-title-size);
}

#page-14 .wine-grid .card p {
  font-size: var(--p14-card-body-size);
}

#page-14 .small {
  font-size: var(--p14-small-size);
}

#page-14 .link-button {
  font-size: var(--p14-button-size);
}

#page-14 .number {
  font-size: var(--p14-page-number-size);
}

/* =========================================================
   PAGE 15. LOCAL ESSENTIALS
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-15 {
  /* IMAGE AND CARDS */
  --p15-local-image-height: 100%;
  --p15-local-image-position: center;
  --p15-layout-gap: 4mm;
  --p15-location-row-height: auto;
  --p15-location-gap: 4mm;
  --p15-local-column-left: 1.25fr;
  --p15-local-column-right: 0.75fr;
  --p15-local-gap: 4mm;
  --p15-card-padding: 3.4mm;
  --p15-callout-padding: 4.5mm;
  /* TEXT */
  --p15-eyebrow-size: 2.48mm;
  --p15-title-size: 9.5mm;
  --p15-lede-size: 4.45mm;
  --p15-location-title-size: 4.2mm;
  --p15-location-body-size: 3.25mm;
  --p15-card-title-size: 4.45mm;
  --p15-card-body-size: 3.25mm;
  --p15-small-size: 3.25mm;
  --p15-page-number-size: 2.1mm;
}


.p13-layout {
  grid-template-rows: auto auto 1fr auto;
  gap: 4mm;
}

.location-row {
  display: grid;
  grid-template-columns: 39mm 1fr;
  gap: 4mm;
  padding: 4mm 0;
  border-bottom: 1px solid rgba(31,94,121,.2);
}

.location-row strong {
  font-family: var(--serif);
  font-size: 4.2mm;
  color: var(--cp-blue);
}

.location-row p {
  font-size: 3.25mm;
  margin: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
}

.contact-grid p {
  font-size: 3.25mm;
}

.local-bottom {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 4mm;
  min-height: 0;
}

.local-photo {
  height: 100%;
}

.local-bottom .stack {
  height: 100%;
  grid-template-rows: 1fr 1fr;
}

.local-bottom .card {
  padding: 3.4mm;
}

.local-bottom .card p {
  font-size: 3.25mm;
}


#page-15 .p13-layout {
  gap: var(--p15-layout-gap);
}

#page-15 .location-row {
  min-height: var(--p15-location-row-height);
  gap: var(--p15-location-gap);
}

#page-15 .local-bottom {
  grid-template-columns: var(--p15-local-column-left)
    var(--p15-local-column-right);
  gap: var(--p15-local-gap);
}

#page-15 .local-photo {
  height: var(--p15-local-image-height);
}

#page-15 .local-photo img {
  object-position: var(--p15-local-image-position);
}

#page-15 .local-bottom .card {
  padding: var(--p15-card-padding);
}

#page-15 .callout {
  padding: var(--p15-callout-padding);
}

#page-15 .eyebrow {
  font-size: var(--p15-eyebrow-size);
}

#page-15 h2 {
  font-size: var(--p15-title-size);
}

#page-15 .lede {
  font-size: var(--p15-lede-size);
}

#page-15 .location-row strong {
  font-size: var(--p15-location-title-size);
}

#page-15 .location-row p {
  font-size: var(--p15-location-body-size);
}

#page-15 .local-bottom h3,
#page-15 .callout h3 {
  font-size: var(--p15-card-title-size);
}

#page-15 .local-bottom .card p {
  font-size: var(--p15-card-body-size);
}

#page-15 .small {
  font-size: var(--p15-small-size);
}

#page-15 .number {
  font-size: var(--p15-page-number-size);
}

/* =========================================================
   PAGE 16. YOUR STAY AT A GLANCE
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-16 {
  /* IMAGE AND ROWS */
  --p16-image-height: 130mm;
  --p16-image-position: center;
  --p16-layout-gap: 4.5mm;
  --p16-column-gap: 6mm;
  --p16-row-min-height: 26mm;
  --p16-icon-size: 6.5mm;
  /* TEXT */
  --p16-eyebrow-size: 2.5mm;
  --p16-title-size: 9.5mm;
  --p16-lede-size: 4.45mm;
  --p16-label-size: 3.00mm;
  --p16-body-size: 3.25mm;
  --p16-icon-text-size: 2.45mm;
  --p16-page-number-size: 2.1mm;
}


.p14-layout {
  grid-template-rows: auto 130mm 1fr;
  gap: 4.5mm;
}

.p14-photo {
  height: 130mm;
}

.stay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6mm;
}

.stay-grid .icon-row {
  min-height: 26mm;
}

#page-16 {
  --details-eyebrow-size: 2.5mm;
  --details-heading-size: 9.5mm;
  --details-lede-size: 4mm;
  --details-label-size: 3.8mm;
  --details-body-size: 3.25mm;
  --details-icon-size: 3.7mm;
  --details-page-number-size: 2.1mm;
}

#page-16 .eyebrow {
  font-size: var(--details-eyebrow-size);
}

#page-16 h2 {
  font-size: var(--details-heading-size);
}

#page-16 .lede {
  font-size: var(--details-lede-size);
}

#page-16 .info-item h3 {
  font-size: var(--details-label-size);
  line-height: 1.2;
}

#page-16 .info-item p {
  font-size: var(--details-body-size);
  line-height: 1.45;
}

#page-16 .info-icon {
  font-size: var(--details-icon-size);
}

#page-16 .number {
  font-size: var(--details-page-number-size);
}


#page-16 .p14-layout {
  grid-template-rows: auto var(--p16-image-height) 1fr;
  gap: var(--p16-layout-gap);
}

#page-16 .p14-photo {
  height: var(--p16-image-height);
}

#page-16 .p14-photo img {
  object-position: var(--p16-image-position);
}

#page-16 .stay-grid {
  column-gap: var(--p16-column-gap);
}

#page-16 .stay-grid .icon-row {
  min-height: var(--p16-row-min-height);
}

#page-16 .icon {
  width: var(--p16-icon-size);
  height: var(--p16-icon-size);
}

#page-16 .eyebrow {
  font-size: var(--p16-eyebrow-size);
}

#page-16 h2 {
  font-size: var(--p16-title-size);
}

#page-16 .lede {
  font-size: var(--p16-lede-size);
}

#page-16 .icon-row h3 {
  font-size: var(--p16-label-size);
}

#page-16 .icon-row p {
  font-size: var(--p16-body-size);
}

#page-16 .icon {
  font-size: var(--p16-icon-text-size);
}

#page-16 .number {
  font-size: var(--p16-page-number-size);
}

/* =========================================================
   PAGE 17. SAFETY
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-17 {
  /* CARDS AND IMAGE */
  --p17-card-height: 107mm;
  --p17-image-height: 122mm;
  --p17-image-position: center;
  --p17-page-gap: 4mm;
  --p17-card-gap: 4mm;
  --p17-left-column: 1fr;
  --p17-right-column: 1fr;
  --p17-card-padding: 4mm;
  /* TEXT */
  --p17-eyebrow-size: 2.48mm;
  --p17-title-size: 9.5mm;
  --p17-lede-size: 4.45mm;
  --p17-card-title-size: 4.45mm;
  --p17-card-body-size: 3.25mm;
  --p17-button-size: 3.25mm;
  --p17-page-number-size: 2.1mm;
}


.p15-layout {
  grid-template-rows: auto 1fr 67mm;
  gap: 4mm;
}

.safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  min-height: 0;
}

.safety-grid .card p {
  font-size: 3.25mm;
}

#page-17 {
  /* * ADJUST THE SAFETY PAGE HERE */
  /* Shared height of both top cards */
  --safety-card-height: 107mm;
  /* Height of the full-width lower image */
  --safety-image-height: 122mm;
  --safety-page-gap: 4mm;
  --safety-card-gap: 4mm;
  /* * Width ratio of the two safety cards.
   * Keep both at 1fr for equal widths. */
  --safety-left-column: 1fr;
  --safety-right-column: 1fr;
}

#page-17 .p15-layout {
  display: grid;
  grid-template-rows: auto
    var(--safety-card-height)
    var(--safety-image-height);
  gap: var(--safety-page-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#page-17 .safety-header {
  min-height: 0;
}

#page-17 .safety-header .eyebrow {
  margin-bottom: 2mm;
}

#page-17 .safety-header h2 {
  margin-bottom: 2.5mm;
}

#page-17 .safety-header .lede {
  margin: 0;
}

#page-17 .safety-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--safety-left-column))
    minmax(0, var(--safety-right-column));
  gap: var(--safety-card-gap);
  width: 100%;
  height: var(--safety-card-height);
  min-height: 0;
  align-items: stretch;
}

#page-17 .safety-grid .card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4mm;
  overflow: hidden;
}

#page-17 .safety-grid h3 {
  margin: 0 0 2.5mm;
}

#page-17 .safety-grid p {
  margin: 0 0 3mm;
  font-size: 2.55mm;
  line-height: 1.42;
}

#page-17 .safety-grid .link-button {
  display: inline-block;
  width: max-content;
  margin-top: 1mm;
}

#page-17 .safety-full-image {
  width: 100%;
  height: var(--safety-image-height);
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

#page-17 .safety-full-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


#page-17 .p15-layout {
  grid-template-rows: auto
    var(--p17-card-height)
    var(--p17-image-height);
  gap: var(--p17-page-gap);
}

#page-17 .safety-grid {
  grid-template-columns: minmax(0, var(--p17-left-column))
    minmax(0, var(--p17-right-column));
  gap: var(--p17-card-gap);
  height: var(--p17-card-height);
}

#page-17 .safety-grid .card {
  padding: var(--p17-card-padding);
}

#page-17 .safety-full-image {
  height: var(--p17-image-height);
}

#page-17 .safety-full-image img {
  object-position: var(--p17-image-position);
}

#page-17 .safety-header .eyebrow {
  font-size: var(--p17-eyebrow-size);
}

#page-17 .safety-header h2 {
  font-size: var(--p17-title-size);
}

#page-17 .safety-header .lede {
  font-size: var(--p17-lede-size);
}

#page-17 .safety-grid h3 {
  font-size: var(--p17-card-title-size);
}

#page-17 .safety-grid p {
  font-size: var(--p17-card-body-size);
}

#page-17 .safety-grid .link-button {
  font-size: var(--p17-button-size);
}

#page-17 .number {
  font-size: var(--p17-page-number-size);
}

/* =========================================================
   PAGE 18. BACK COVER
   ========================================================= */

/* Adjustable controls: edit these values only */

#page-18 {
  /* BACKGROUND IMAGE */
  --p18-image-width: 100%;
  --p18-image-height: 100%;
  --p18-image-position: center;
  /* INFORMATION CARD */
  --p18-card-left: 14.7mm;
  --p18-card-right: 14.7mm;
  --p18-card-bottom: 17.22mm;
  --p18-card-padding: 6.3mm;
  --p18-card-gap: 6mm;
  --p18-logo-column: 34mm;
  --p18-logo-width: 34mm;
  --p18-logo-max-height: 39mm;
  /* TEXT */
  --p18-title-size: 9mm;
  --p18-body-size: 3.25mm;
  --p18-contact-size: 2.9mm;
  --p18-page-number-size: 2.1mm;
}


.contact-line {
  font-size: 2.2mm !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.back-cover {
  --back-logo-width: 34mm;
}

.back-cover .cover-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.back-cover .cover-photo::after {
  display: none;
}

.back-cover .cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-cover .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      180deg,
      rgba(10, 32, 42, 0.08) 10%,
      rgba(10, 32, 42, 0.48) 100%
    );
}

.back-cover .cover-copy.back-cover-card {
  position: absolute;
  z-index: 3;
  left: 14.7mm;
  right: 14.7mm;
  bottom: 17.22mm;
  display: grid;
  grid-template-columns: minmax(0, 1fr)
    var(--back-logo-width);
  gap: 6mm;
  align-items: center;
  padding: 6.3mm;
  color: white;
  text-align: left;
  background: var(--cp-blue);
  border-radius: 4.2mm;
  box-shadow: 0 2.1mm 6.3mm rgba(0, 0, 0, 0.25);
}

.back-cover .back-cover-text {
  min-width: 0;
}

.back-cover .back-cover-card h2 {
  margin: 0 0 1.8mm;
  color: white;
  font-size: 9mm;
  line-height: 1;
  text-align: left;
}

.back-cover .back-cover-card p {
  margin: 0 0 1.5mm;
  color: white;
  font-size: 3.25mm;
  line-height: 1.4;
  text-align: left;
}

.back-cover .back-cover-card .contact-line {
  margin-bottom: 0;
  font-size: 3.25mm;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.back-cover .back-cover-logo {
  display: block;
  width: var(--back-logo-width);
  height: auto;
  max-height: 39mm;
  object-fit: contain;
  justify-self: end;
  align-self: center;
  filter: drop-shadow(
    0 1mm 1.5mm rgba(0, 0, 0, 0.22)
  );
}

.back-cover > .cover-logo {
  display: none;
}


#page-18 .cover-photo,
#page-18 .cover-photo img {
  width: var(--p18-image-width);
  height: var(--p18-image-height);
}

#page-18 .cover-photo img {
  object-position: var(--p18-image-position);
}

#page-18 .cover-copy.back-cover-card {
  left: var(--p18-card-left);
  right: var(--p18-card-right);
  bottom: var(--p18-card-bottom);
  grid-template-columns: minmax(0, 1fr) var(--p18-logo-column);
  gap: var(--p18-card-gap);
  padding: var(--p18-card-padding);
}

#page-18 .back-cover-logo {
  width: var(--p18-logo-width);
  max-height: var(--p18-logo-max-height);
}

#page-18 .back-cover-card h2 {
  font-size: var(--p18-title-size);
}

#page-18 .back-cover-card p {
  font-size: var(--p18-body-size);
}

#page-18 .back-cover-card .contact-line {
  font-size: var(--p18-contact-size) !important;
}

#page-18 .number {
  font-size: var(--p18-page-number-size);
}

/* =========================================================
   19. MOBILE SCREEN LAYOUT
   Applies only to screens 760px wide or narrower.
   ========================================================= */

@media screen and (max-width: 760px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #e9eef0;
  }

  .book {
    display: block;
    width: 100%;
    padding: 12px 0 50px;
  }

  .page-wrap {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 14px;
  }

  .guide-page {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none !important;
    box-shadow: 0 6px 20px rgba(24, 47, 57, 0.15);
  }

  .page-inner {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 24px 16px 34px;
  }

  .fill-page {
    height: auto;
    min-height: 0;
  }

  .front-cover,
  .back-cover {
    min-height: 760px;
  }

  .front-cover .cover-photo,
  .back-cover .cover-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Mobile typography */

  .guide-page h1 {
    font-size: clamp(2.2rem, 10vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }

  .guide-page h2 {
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
    line-height: 1.08 !important;
  }

  .guide-page h3 {
    font-size: clamp(1.08rem, 4.8vw, 1.4rem) !important;
    line-height: 1.2 !important;
  }

  .guide-page .eyebrow {
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
  }

  .guide-page .lede {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
  }

  .guide-page p:not(.eyebrow):not(.tiny):not(.source-note):not(.daytrip-direction):not(.attraction-location),
  .guide-page .small,
  .guide-page li {
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
  }

  .guide-page .tiny,
  .guide-page .source-note,
  .guide-page .photo-caption,
  .guide-page .daytrip-direction,
  .guide-page .attraction-location {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }

  .guide-page .link-button,
  .guide-page .badge,
  .guide-page .daytrip-link,
  .guide-page .attraction-link,
  .guide-page .place-card a {
    font-size: 0.78rem !important;
  }

  /* Shared mobile components */

  .grid-2,
  .grid-3,
  .split-40,
  .split-55,
  .feature-grid,
  .experience-grid,
  .animal-notes,
  .walk-grid,
  .wine-grid,
  .contact-grid,
  .stay-grid,
  .safety-grid,
  .arrival-grid,
  .arrival-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  .card,
  .callout,
  .warning-card {
    padding: 16px;
    border-radius: 14px;
  }

  .photo {
    border-radius: 14px;
  }

  .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .p2-hero,
  .p3-photo,
  .p4-main,
  .p7-map,
  .p12-photo,
  .safety-full-image {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  /* Make fixed A4 page layouts content-driven on mobile. */

  #page-2 .arrival-layout,
  #page-4 .p2-layout,
  #page-5 .p3-layout,
  #page-6 .p4-layout,
  #page-7 .p5-layout,
  #page-8 .p6-layout,
  #page-9 .p7-layout,
  #page-10 .wildlife-one-page,
  #page-11 .p9-layout,
  #page-12 .northern-day-layout,
  #page-13 .daytrips-layout,
  #page-14 .p12-layout,
  #page-15 .p13-layout,
  #page-16 .p14-layout,
  #page-17 .p15-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Page 01: front cover */

  #page-1 {
    min-height: 760px !important;
  }

  #page-1 .cover-copy {
    left: 16px !important;
    right: 16px !important;
    bottom: 24px !important;
    padding: 18px !important;
  }

  #page-1 .cover-copy-with-logo {
    grid-template-columns: minmax(0, 1fr) minmax(90px, 112px) !important;
    gap: 12px !important;
  }

  #page-1 .cover-card-logo {
    width: 100% !important;
    max-height: 118px !important;
  }

  #page-1 .cover-copy h1 {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
  }

  #page-1 .cover-kicker {
    font-size: 0.62rem !important;
  }

  #page-1 .cover-copy-text > p {
    font-size: 0.72rem !important;
  }

  /* Page 02: arrival essentials */

  #page-2 .arrival-header {
    display: block !important;
    width: 100% !important;
  }

  #page-2 .arrival-logo {
    display: none !important;
  }

  #page-2 .arrival-heading,
  #page-2 .arrival-heading .eyebrow,
  #page-2 .arrival-heading h1 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  #page-2 .arrival-hero {
    height: 260px !important;
  }

  #page-2 .arrival-grid {
    grid-auto-rows: auto !important;
  }

  #page-2 .arrival-bottom-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #page-2 .arrival-card,
  #page-2 .arrival-checkout-card,
  #page-2 .arrival-bottom-grid > .card,
  #page-2 .lock-code-box {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #page-2 .arrival-checkout-list {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    columns: 1 !important;
    column-count: 1 !important;
    column-width: auto !important;
    margin: 0 !important;
    padding-left: 24px !important;
  }

  #page-2 .arrival-checkout-list li {
    display: list-item !important;
    height: auto !important;
    margin-bottom: 8px !important;
    break-inside: avoid !important;
  }

  #page-2 .arrival-checkout-list li:last-child {
    margin-bottom: 0 !important;
  }

  #page-2 .arrival-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Page 03: index */

  #page-3 .page-inner {
    position: relative !important;
    inset: auto !important;
    padding: 16px 16px 42px !important;
  }

  #page-3 .index-layout {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: auto !important;
  }

  #page-3 .index-header {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    padding: 16px !important;
  }

  #page-3 .index-logo-panel {
    width: 38% !important;
    min-width: 110px !important;
    height: 120px !important;
    flex: 0 0 auto !important;
  }

  #page-3 .index-groups {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    gap: 12px !important;
  }

  #page-3 .index-group,
  #page-3 .index-group:nth-child(1),
  #page-3 .index-group:nth-child(2),
  #page-3 .index-group:nth-child(3),
  #page-3 .index-group:nth-child(4) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 14px !important;
  }

  #page-3 .index-group h3 {
    height: auto !important;
  }

  #page-3 .index-link {
    height: auto !important;
    min-height: 64px !important;
    padding: 10px 8px 10px 42px !important;
  }

  #page-3 .index-link > span {
    width: 30px !important;
    height: 30px !important;
  }

  #page-3 .index-link b {
    font-size: 0.96rem !important;
  }

  #page-3 .index-link small {
    font-size: 0.78rem !important;
  }

  /* Page 07: animal gallery */

  #page-7 .animal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  #page-7 .animal-grid .large {
    grid-column: 1 / -1;
    grid-row: auto;
    height: 430px;
  }

  #page-7 .animal-grid > .photo:not(.large) {
    height: 250px;
  }

  /* Pages 08, 11, 12 and 13: content cards */

  #page-8 .experience-card,
  #page-11 .place-card,
  #page-12 .northern-attraction-card,
  #page-13 .daytrip-card {
    grid-template-rows: auto auto auto auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  #page-8 .experience-card .photo,
  #page-11 .place-card .photo,
  #page-12 .northern-attraction-photo,
  #page-13 .daytrip-photo {
    height: 220px !important;
  }

  #page-11 .place-grid,
  #page-12 .northern-attraction-grid,
  #page-13 .daytrip-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto;
  }

  #page-13 .daytrip-more {
    grid-template-columns: 1fr !important;
  }

  #page-13 .daytrip-more-section + .daytrip-more-section {
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 0;
  }

  /* Page 10: wildlife */

  #page-10 .wildlife-feature,
  #page-10 .wildlife-hero,
  #page-10 .wildlife-hero-photo {
    height: 260px !important;
  }

  #page-10 .wildlife-video-card {
    grid-template-rows: auto auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  #page-10 .wildlife-camera-figure,
  #page-10 .wildlife-camera-photo {
    height: 260px !important;
  }

  /* Page 17: safety */

  #page-17 .safety-grid,
  #page-17 .safety-grid .card {
    height: auto;
  }

  #page-17 .safety-full-image {
    height: 280px !important;
  }

  /* Page 18: back cover */

  #page-18 {
    min-height: 760px !important;
  }

  #page-18 .cover-copy.back-cover-card {
    left: 16px !important;
    right: 16px !important;
    bottom: 24px !important;
    grid-template-columns: minmax(0, 1fr) 100px !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  #page-18 .back-cover-logo {
    width: 100% !important;
    max-height: 110px !important;
  }

  /* Mobile toolbar */

  .screen-toolbar {
    position: sticky;
    top: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px;
    padding: 8px;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .screen-toolbar::-webkit-scrollbar {
    display: none;
  }

  .screen-toolbar .brand {
    display: none;
  }

  .screen-toolbar button,
  .screen-toolbar a {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .page-status {
    flex: 0 0 auto;
    min-width: 44px;
    font-size: 0.78rem;
  }

  /* Mobile page controls: 30% smaller than the previous 36px arrows. */

  .number {
    right: 44px !important;
    bottom: 12px;
    font-size: 0.65rem;
  }

  .index-return {
    right: 12px !important;
    bottom: 10px !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    border-width: 1px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16) !important;
  }
}

/* =========================================================
   20. PRINT / PDF
   ========================================================= */

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html,
  body {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .screen-toolbar,
  .contents-panel {
    display: none !important;
  }

  .book {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-wrap {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    break-after: page;
    page-break-after: always;
  }

  .guide-page {
    position: relative !important;
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .page-inner {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }

  .book > .guide-page {
    break-after: page;
    page-break-after: always;
  }

  .page-wrap:last-child,
  .book > .guide-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .page-wrap > .guide-page {
    break-after: auto;
    page-break-after: auto;
  }

  a {
    text-decoration: none;
  }

  .index-return {
    box-shadow: none;
  }

  .index-link,
  .index-return {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Preserve the two-by-two Explore Further layout in printed PDFs. */

  #page-13 .daytrips-layout {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: var(--p13-page-gap) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #page-13 .daytrip-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: unset !important;
    gap: var(--p13-card-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  #page-13 .daytrip-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: var(--p13-card-padding) !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #page-13 .daytrip-figure {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #page-13 .daytrip-photo {
    width: 100% !important;
    overflow: hidden !important;
  }

  #page-13 .daytrip-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #page-13 .daytrip-copy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  #page-13 .daytrip-more {
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr !important;
    gap: var(--p13-panel-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: var(--p13-panel-padding-y) var(--p13-panel-padding-x) !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #page-13 .daytrip-more-section {
    min-width: 0 !important;
  }

  #page-13 .daytrip-more-section + .daytrip-more-section {
    padding-top: 0 !important;
    padding-left: 5mm !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
}