/* ============================================================
   The Disney World Packing List (pk-).
   A travel trunk. A deep lagoon hero crossed by two tan luggage straps with a
   kraft paper luggage tag for the month, then a cream page where each bag has
   its own color. Coral for the park bag, plum for the resort, sky for travel day.
   Every rule is scoped under .guide--pk so it stays out of the rest of the site,
   and wins over the site's .guide p cascade.
   ============================================================ */

.guide--pk {
  --pk-ink: oklch(23% 0.03 250);
  --pk-ink-2: oklch(37% 0.03 250);
  --pk-ink-3: oklch(52% 0.025 250);
  --pk-paper: oklch(97.6% 0.012 85);
  --pk-card: oklch(99.4% 0.005 85);
  --pk-line: oklch(88.5% 0.018 80);
  --pk-lagoon: oklch(27% 0.06 225);
  --pk-lagoon-2: oklch(34% 0.07 215);
  --pk-strap: oklch(58% 0.09 60);
  --pk-strap-dark: oklch(44% 0.08 55);
  --pk-brass: oklch(82% 0.12 85);
  --pk-kraft: oklch(86% 0.05 75);
  --pk-coral: oklch(65% 0.17 32);
  --pk-plum: oklch(52% 0.13 320);
  --pk-sky: oklch(60% 0.12 235);
  --pk-go: oklch(64% 0.14 158);
  --pk-serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --pk-sans: var(--ui, "Hanken Grotesk", system-ui, sans-serif);
  --pk-num: "Saira Condensed", var(--pk-sans);
  display: block;
  background: var(--pk-paper);
  color: var(--pk-ink);
  font-family: var(--pk-sans);
  padding-bottom: 64px;
}
.guide--pk a { color: var(--pk-coral); text-decoration: none; border-bottom: 1px solid oklch(65% 0.17 32 / 0.3); }
.guide--pk a:hover { border-bottom-color: var(--pk-coral); }
.guide--pk .pk-zone--bag { --z: var(--pk-coral); }
.guide--pk .pk-zone--resort { --z: var(--pk-plum); }
.guide--pk .pk-zone--travel { --z: var(--pk-sky); }

/* ---------------------------------------------------------------- hero */
.guide--pk .pk-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(56px, 9vw, 104px) clamp(18px, 5vw, 48px) clamp(72px, 9vw, 104px);
  color: oklch(96% 0.01 85);
  background:
    radial-gradient(55% 45% at 90% 0%, oklch(70% 0.12 200 / 0.35), transparent 70%),
    radial-gradient(60% 55% at 0% 100%, oklch(60% 0.15 30 / 0.28), transparent 70%),
    linear-gradient(165deg, var(--pk-lagoon-2), var(--pk-lagoon) 55%, oklch(21% 0.05 235));
}
/* the stitched canvas weave of a trunk lid */
.guide--pk .pk-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0.22; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, oklch(90% 0.02 200 / 0.18) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, oklch(10% 0.02 230 / 0.35) 0 1px, transparent 1px 7px);
}
.guide--pk .pk-hero-straps { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.guide--pk .pk-hero-straps i {
  position: absolute; top: -10%; bottom: -10%; width: 46px;
  background:
    linear-gradient(90deg, oklch(36% 0.07 55) 0 3px, transparent 3px calc(100% - 3px), oklch(36% 0.07 55) calc(100% - 3px)),
    repeating-linear-gradient(180deg, oklch(80% 0.06 70 / 0.55) 0 6px, transparent 6px 11px) 7px 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, oklch(80% 0.06 70 / 0.55) 0 6px, transparent 6px 11px) calc(100% - 7px) 0 / 2px 100% no-repeat,
    linear-gradient(90deg, var(--pk-strap-dark), var(--pk-strap) 40%, var(--pk-strap-dark));
  box-shadow: 0 0 24px oklch(10% 0.03 230 / 0.6);
  transform: rotate(8deg); opacity: 0.85;
}
.guide--pk .pk-hero-straps i:first-child { right: 18%; }
.guide--pk .pk-hero-straps i:last-child { right: 4%; transform: rotate(8deg) translateY(4%); }
/* brass buckle on each strap */
.guide--pk .pk-hero-straps i::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 58%; height: 40px; border-radius: 6px;
  border: 5px solid var(--pk-brass); box-shadow: inset 0 0 0 2px oklch(55% 0.1 80), 0 6px 14px oklch(10% 0.03 230 / 0.5);
}
.guide--pk .pk-hero-straps i:last-child::after { top: 30%; }

.guide--pk .pk-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.guide--pk .pk-kicker { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pk-brass); }
.guide--pk .pk-title {
  margin: 0; max-width: 11ch; font-family: var(--pk-serif); font-weight: 400;
  font-size: clamp(44px, 10vw, 84px); line-height: 0.96; letter-spacing: -0.01em; text-wrap: balance;
  color: oklch(98.5% 0.008 85); text-shadow: 0 4px 30px oklch(15% 0.04 230 / 0.6);
}
.guide--pk .pk-standfirst { margin: 18px 0 0; max-width: 52ch; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: oklch(89% 0.02 200); }

/* the luggage tag */
.guide--pk .pk-tag {
  position: relative; display: flex; margin: 30px 0 0; max-width: 470px;
  color: var(--pk-ink); filter: drop-shadow(0 20px 30px oklch(10% 0.04 230 / 0.55));
  transform: rotate(-2deg); transform-origin: 0 50%;
}
.guide--pk .pk-tag::before {
  /* the string looped through the eyelet */
  content: ""; position: absolute; left: -30px; top: 50%; width: 54px; height: 2px;
  background: oklch(92% 0.02 85); transform: rotate(-14deg);
}
.guide--pk .pk-tag-hole {
  position: relative; flex: none; width: 46px;
  background: var(--pk-kraft);
  clip-path: polygon(100% 0, 100% 100%, 45% 100%, 0 72%, 0 28%, 45% 0);
}
.guide--pk .pk-tag-hole::after {
  content: ""; position: absolute; left: 14px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%;
  background: var(--pk-lagoon); box-shadow: 0 0 0 4px var(--pk-brass);
}
.guide--pk .pk-tag-body {
  flex: 1; padding: 16px 18px 14px 6px; border-radius: 0 12px 12px 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, oklch(70% 0.04 70 / 0.25) 27px 28px),
    var(--pk-kraft);
}
.guide--pk .pk-tag-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pk-strap-dark); }
.guide--pk .pk-tag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px 10px; margin: 0; }
.guide--pk .pk-tag-stats dt { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(42% 0.05 60); }
.guide--pk .pk-tag-stats dd { margin: 2px 0 0; font: 700 clamp(28px, 6vw, 36px)/1 var(--pk-num); color: var(--pk-ink); }
.guide--pk .pk-tag-stats small { font: 700 12px var(--pk-sans); margin-left: 3px; color: oklch(42% 0.05 60); }
.guide--pk .pk-tag-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 2px dashed oklch(55% 0.06 60 / 0.4); }
.guide--pk .pk-tag-adds span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(42% 0.05 60); margin-right: 2px; }
.guide--pk .pk-tag-adds b { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: oklch(98% 0.01 85); background: var(--pk-lagoon); }

@media (prefers-reduced-motion: no-preference) {
  .guide--pk .pk-tag { animation: pk-swing 6s ease-in-out infinite; }
}
@keyframes pk-swing { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(-0.6deg); } }

/* ---------------------------------------------------------------- body */
.guide--pk .pk-body { max-width: 760px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }

.guide--pk .pk-answer {
  position: relative; margin: -40px 0 0; padding: 22px 22px 20px; border-radius: 18px;
  background: var(--pk-card); border: 1px solid var(--pk-line); box-shadow: 0 22px 50px oklch(25% 0.04 240 / 0.18);
}
.guide--pk .pk-answer::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--pk-coral) 0 33%, var(--pk-plum) 33% 66%, var(--pk-sky) 66%);
}
.guide--pk .pk-answer-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pk-go); }
.guide--pk .pk-answer-icon { width: 18px; height: 18px; }
.guide--pk .pk-answer-text { margin: 0; font-size: 18px; line-height: 1.6; color: var(--pk-ink); }

.guide--pk .pk-jump { display: flex; gap: 8px; margin: 18px -4px 0; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.guide--pk .pk-jump::-webkit-scrollbar { display: none; }
.guide--pk .pk-jump a { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--pk-ink); background: var(--pk-card); border: 1px solid var(--pk-line); }
.guide--pk .pk-jump a:hover { border-color: var(--pk-coral); }

.guide--pk .pk-section { margin: 60px 0 0; scroll-margin-top: 80px; }
.guide--pk .pk-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pk-coral); }
.guide--pk .pk-h2 { margin: 0 0 12px; font-family: var(--pk-serif); font-weight: 400; font-size: clamp(30px, 6vw, 44px); line-height: 1.04; color: var(--pk-ink); text-wrap: balance; }
.guide--pk .pk-copy { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--pk-ink-2); max-width: 62ch; }

/* ---------------------------------------------------------------- the three bags */
.guide--pk .pk-zones { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guide--pk .pk-zone-card a {
  position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 14px 12px; border-radius: 16px; overflow: hidden;
  background: var(--pk-card); border: 1px solid var(--pk-line); color: var(--pk-ink); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.guide--pk .pk-zone-card a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--z); }
.guide--pk .pk-zone-card a:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--z) 45%, transparent); box-shadow: 0 12px 26px oklch(25% 0.04 240 / 0.12); }
.guide--pk .pk-zone-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 8px; flex: none;
  color: var(--z); background: color-mix(in oklch, var(--z) 12%, white); border: 1px solid color-mix(in oklch, var(--z) 28%, transparent);
}
.guide--pk .pk-zone-svg { width: 24px; height: 24px; }
.guide--pk .pk-zone-kicker { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--z); }
.guide--pk .pk-zone-name { font-family: var(--pk-serif); font-size: 20px; line-height: 1.1; }
.guide--pk .pk-zone-count { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--pk-ink-3); }

/* ---------------------------------------------------------------- the checklist */
.guide--pk .pk-print-head { display: none; }
.guide--pk .pk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 14px; }
.guide--pk .pk-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: oklch(93% 0.015 80); border: 1px solid var(--pk-line); }
.guide--pk .pk-seg-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 13.5px/1 var(--pk-sans); color: var(--pk-ink-2); background: transparent; transition: background .18s, color .18s;
}
.guide--pk .pk-seg-btn.is-active { color: oklch(98% 0.01 85); background: var(--pk-lagoon); box-shadow: 0 4px 12px oklch(25% 0.06 225 / 0.3); }
.guide--pk .pk-seg-svg { width: 15px; height: 15px; }
.guide--pk .pk-seg-btn:focus-visible { outline: 2px solid var(--pk-coral); outline-offset: 2px; }
.guide--pk .pk-switches { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.guide--pk .pk-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--pk-ink-2); user-select: none; }
.guide--pk .pk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.guide--pk .pk-switch-track { position: relative; flex: none; width: 40px; height: 23px; border-radius: 999px; background: oklch(90% 0.015 80); border: 1px solid var(--pk-line); transition: background .18s; }
.guide--pk .pk-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: oklch(99% 0 0); box-shadow: 0 1px 3px oklch(20% 0.03 240 / 0.3); transition: transform .18s; }
.guide--pk .pk-switch input:checked + .pk-switch-track { background: var(--pk-go); border-color: var(--pk-go); }
.guide--pk .pk-switch input:checked + .pk-switch-track::after { transform: translateX(17px); }
.guide--pk .pk-switch input:focus-visible + .pk-switch-track { outline: 2px solid var(--pk-coral); outline-offset: 2px; }

.guide--pk .pk-progress {
  position: sticky; top: 8px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; color: oklch(96% 0.01 85);
  background: var(--pk-lagoon); box-shadow: 0 12px 30px oklch(25% 0.06 225 / 0.28);
}
.guide--pk .pk-progress-bar { flex: 1 1 140px; height: 8px; border-radius: 999px; overflow: hidden; background: oklch(96% 0.01 85 / 0.16); }
.guide--pk .pk-progress-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pk-go), var(--pk-brass)); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.guide--pk .pk-progress-text { font-size: 13.5px; font-weight: 700; white-space: nowrap; color: oklch(85% 0.02 200); }
.guide--pk .pk-progress-text strong { font: 700 18px/1 var(--pk-num); color: var(--pk-brass); }
.guide--pk .pk-actions { display: flex; gap: 8px; margin-left: auto; }
.guide--pk .pk-btn {
  appearance: none; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--pk-brass);
  font: 800 13.5px/1 var(--pk-sans); color: var(--pk-ink); background: var(--pk-brass);
}
.guide--pk .pk-btn:hover { filter: brightness(1.06); }
.guide--pk .pk-btn-ghost { color: oklch(92% 0.01 85); background: transparent; border-color: oklch(96% 0.01 85 / 0.3); }
.guide--pk .pk-btn-ghost.is-undo { color: var(--pk-brass); border-color: var(--pk-brass); }
.guide--pk .pk-btn:focus-visible { outline: 2px solid var(--pk-coral); outline-offset: 2px; }
.guide--pk .pk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.guide--pk .pk-lists { display: grid; gap: 16px; }

/* bag tabs, shown only once the script runs */
.guide--pk .pk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; scroll-margin-top: 90px; }
.guide--pk .pk-tabs[hidden] { display: none; }
.guide--pk .pk-tab {
  appearance: none; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 9px; border-radius: 14px; border: 1px solid var(--pk-line); background: var(--pk-card);
  font: 800 13.5px/1.1 var(--pk-sans); color: var(--pk-ink-2); transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.guide--pk .pk-tab-svg { width: 22px; height: 22px; color: var(--z); }
.guide--pk .pk-tab-tally { font: 700 12.5px/1 var(--pk-num); letter-spacing: 0.04em; color: var(--pk-ink-3); }
.guide--pk .pk-tab:hover { border-color: color-mix(in oklch, var(--z) 50%, transparent); }
.guide--pk .pk-tab.is-active {
  color: oklch(99% 0 0); background: var(--z); border-color: var(--z); transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in oklch, var(--z) 35%, transparent);
}
.guide--pk .pk-tab.is-active .pk-tab-svg, .guide--pk .pk-tab.is-active .pk-tab-tally { color: oklch(99% 0 0 / 0.92); }
.guide--pk .pk-tab.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--z); transform: rotate(45deg); border-radius: 2px;
}
.guide--pk .pk-tab.is-done:not(.is-active) .pk-tab-tally { color: var(--pk-go); }
.guide--pk .pk-tab:focus-visible { outline: 2px solid var(--pk-coral); outline-offset: 2px; }
.guide--pk .pk-lists.is-tabbed .pk-zone:not(.is-active) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .guide--pk .pk-lists.is-tabbed .pk-zone.is-active { animation: pk-flash .3s ease; }
}

/* hero call to action */
.guide--pk .pk-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 26px 0 0; }
.guide--pk a.pk-hero-go {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 0;
  font-size: 15.5px; font-weight: 800; color: var(--pk-ink); background: var(--pk-brass);
  box-shadow: 0 10px 26px oklch(10% 0.04 230 / 0.45);
}
.guide--pk a.pk-hero-go::after { content: "\2193"; font-size: 15px; }
.guide--pk a.pk-hero-go:hover { filter: brightness(1.06); }
.guide--pk .pk-hero-count { font-size: 13.5px; color: oklch(85% 0.02 200); }
.guide--pk .pk-hero-count b { font: 700 17px/1 var(--pk-num); color: oklch(98% 0.01 85); }
.guide--pk .pk-zone {
  position: relative; padding: 18px 18px 8px; border-radius: 18px; scroll-margin-top: 90px;
  background: var(--pk-card); border: 1px solid var(--pk-line); border-top: 5px solid var(--z);
}
.guide--pk .pk-zone[hidden] { display: none; }
.guide--pk .pk-zone-head { display: flex; align-items: center; gap: 12px; }
.guide--pk .pk-zone-head .pk-zone-icon { margin: 0; }
.guide--pk .pk-zone-title { margin: 0; font-family: var(--pk-serif); font-weight: 400; font-size: 25px; line-height: 1.05; color: var(--pk-ink); }
.guide--pk .pk-zone-tally {
  margin-left: auto; padding: 6px 11px; border-radius: 999px; font: 700 15px/1 var(--pk-num); letter-spacing: 0.04em;
  color: var(--z); background: color-mix(in oklch, var(--z) 10%, white);
}
.guide--pk .pk-zone-tally.is-done { color: oklch(99% 0 0); background: var(--pk-go); }
.guide--pk .pk-zone-blurb { margin: 10px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--pk-ink-3); }

.guide--pk .pk-sec { margin-top: 12px; }
.guide--pk .pk-sec[hidden] { display: none; }
.guide--pk .pk-sec-title { margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--z); }
.guide--pk .pk-items { list-style: none; margin: 0; padding: 0; }
.guide--pk .pk-item { border-top: 1px dashed var(--pk-line); }
.guide--pk .pk-item:first-child { border-top: 0; }
.guide--pk .pk-item[hidden] { display: none; }
.guide--pk .pk-check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 11px 0; cursor: pointer; }
.guide--pk .pk-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.guide--pk .pk-box {
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px;
  border: 2px solid oklch(70% 0.02 250); background: oklch(99.5% 0 0); transition: background .15s, border-color .15s, transform .15s;
}
.guide--pk .pk-box::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border-left: 2.5px solid white; border-bottom: 2.5px solid white; transform: rotate(-45deg) scale(.4); opacity: 0; transition: opacity .15s, transform .15s; }
.guide--pk .pk-check:hover .pk-box { border-color: var(--z); }
.guide--pk .pk-check input:checked + .pk-box { background: var(--pk-go); border-color: var(--pk-go); transform: scale(1.06); }
.guide--pk .pk-check input:checked + .pk-box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.guide--pk .pk-check input:focus-visible + .pk-box { outline: 2px solid var(--pk-coral); outline-offset: 2px; }
.guide--pk .pk-text { font-size: 15.5px; line-height: 1.45; }
.guide--pk .pk-name { font-weight: 700; color: var(--pk-ink); }
.guide--pk .pk-ess {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 4px; vertical-align: 2px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--z); background: color-mix(in oklch, var(--z) 11%, white);
}
.guide--pk .pk-why { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--pk-ink-3); }
.guide--pk .pk-item.is-checked .pk-name { color: var(--pk-ink-3); text-decoration: line-through; text-decoration-color: var(--pk-go); text-decoration-thickness: 2px; }
.guide--pk .pk-item.is-checked .pk-why { opacity: 0.6; }

/* ---------------------------------------------------------------- your month */
.guide--pk .pk-year { padding: 16px 12px 14px; border-radius: 18px; background: var(--pk-card); border: 1px solid var(--pk-line); }
.guide--pk .pk-year-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.guide--pk .pk-month {
  appearance: none; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; transition: background .15s;
}
.guide--pk .pk-month:hover { background: oklch(95% 0.015 80); }
.guide--pk .pk-month.is-rain { background: oklch(94% 0.03 230); }
.guide--pk .pk-month.is-cool { background: oklch(94.5% 0.025 300); }
.guide--pk .pk-month.is-on { background: var(--pk-lagoon); color: oklch(98% 0.01 85); box-shadow: 0 8px 18px oklch(25% 0.06 225 / 0.3); }
.guide--pk .pk-month:focus-visible { outline: 2px solid var(--pk-coral); outline-offset: 2px; }
.guide--pk .pk-month-high { font: 700 12.5px/1 var(--pk-num); color: var(--pk-coral); }
.guide--pk .pk-month-low { font: 700 12.5px/1 var(--pk-num); color: var(--pk-plum); }
.guide--pk .pk-month.is-on .pk-month-high, .guide--pk .pk-month.is-on .pk-month-low { color: var(--pk-brass); }
.guide--pk .pk-month-col { position: relative; width: 12px; height: 80px; border-radius: 6px; background: oklch(91% 0.012 80); overflow: hidden; }
.guide--pk .pk-month.is-on .pk-month-col { background: oklch(96% 0.01 85 / 0.18); }
.guide--pk .pk-month-col i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--r); border-radius: 6px; background: linear-gradient(0deg, oklch(50% 0.12 235), oklch(72% 0.1 220)); }
.guide--pk .pk-month-name { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .guide--pk .pk-month-col i { animation: pk-grow 1s cubic-bezier(.3,.7,.2,1) both; }
}
@keyframes pk-grow { from { height: 0; } }

.guide--pk .pk-month-card {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--pk-kraft);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, oklch(70% 0.04 70 / 0.22) 27px 28px);
}
.guide--pk .pk-month-card-name { margin: 0 0 8px; font-family: var(--pk-serif); font-size: 26px; line-height: 1; color: var(--pk-ink); }
.guide--pk .pk-month-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.guide--pk .pk-month-facts dt { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(42% 0.05 60); }
.guide--pk .pk-month-facts dd { margin: 2px 0 0; font: 700 26px/1 var(--pk-num); color: var(--pk-ink); }
.guide--pk .pk-month-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.guide--pk .pk-month-adds > span:first-child { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(42% 0.05 60); }
.guide--pk .pk-month-adds [data-y="adds"] { display: contents; }
.guide--pk .pk-month-adds b { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: oklch(98% 0.01 85); background: var(--pk-lagoon); }
.guide--pk .pk-month-more { margin: 0; font-size: 14px; font-weight: 700; }
.guide--pk .pk-year-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 4px 0; font-size: 12.5px; color: var(--pk-ink-2); }
.guide--pk .pk-year-key span { display: inline-flex; align-items: center; gap: 6px; }
.guide--pk .pk-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.guide--pk .pk-key--rain { background: oklch(62% 0.11 228); }
.guide--pk .pk-key--wet { background: oklch(94% 0.03 230); box-shadow: inset 0 0 0 1px oklch(62% 0.11 228); }
.guide--pk .pk-key--cool { background: oklch(94.5% 0.025 300); box-shadow: inset 0 0 0 1px var(--pk-plum); }

/* ---------------------------------------------------------------- the week ahead */
.guide--pk .pk-week {
  padding: 14px 12px 12px; border-radius: 18px; color: oklch(95% 0.01 85);
  background: linear-gradient(180deg, var(--pk-lagoon-2), var(--pk-lagoon)); box-shadow: 0 18px 40px oklch(25% 0.06 225 / 0.22);
}
.guide--pk .pk-week-row { display: grid; grid-template-columns: 96px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
.guide--pk .pk-week-row + .pk-week-row { margin-top: 4px; }
.guide--pk a.pk-week-park { font-size: 12.5px; font-weight: 800; line-height: 1.2; color: oklch(92% 0.015 85); border: 0; }
.guide--pk a.pk-week-park:hover { color: var(--pk-brass); }
.guide--pk .pk-week-date { display: flex; flex-direction: column; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: oklch(75% 0.03 210); }
.guide--pk .pk-week-date b { font: 600 14px/1.1 var(--pk-num); color: oklch(95% 0.01 85); }
.guide--pk .pk-week-date.is-weekend { color: var(--pk-brass); }
.guide--pk .pk-cell {
  appearance: none; cursor: pointer; height: 42px; padding: 0; border: 0; border-radius: 9px;
  font: 700 15px/1 var(--pk-num); color: var(--pk-ink); background: oklch(96% 0.01 85 / 0.12); transition: transform .15s, filter .15s;
}
.guide--pk .pk-cell:hover { filter: brightness(1.1); transform: translateY(-1px); }
.guide--pk .pk-cell:focus-visible { outline: 2px solid var(--pk-brass); outline-offset: 2px; }
.guide--pk .pk-cell.is-on { box-shadow: 0 0 0 2px var(--pk-brass), 0 0 0 4px var(--pk-lagoon); }
.guide--pk .pk-cell.pk-tone--light { background: oklch(76% 0.12 165); }
.guide--pk .pk-cell.pk-tone--moderate { background: oklch(86% 0.13 95); }
.guide--pk .pk-cell.pk-tone--busy { background: oklch(75% 0.15 55); }
.guide--pk .pk-cell.pk-tone--packed { background: oklch(66% 0.18 28); color: oklch(99% 0 0); }
.guide--pk .pk-cell.pk-tone--none { color: oklch(92% 0.01 85); }

.guide--pk .pk-day { margin-top: 12px; padding: 14px; border-radius: 14px; background: oklch(96% 0.01 85 / 0.07); border: 1px solid oklch(82% 0.12 85 / 0.3); }
.guide--pk .pk-day.is-flash { animation: pk-flash .35s ease; }
@keyframes pk-flash { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.guide--pk .pk-day-park { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pk-brass); }
.guide--pk .pk-day-date { margin: 2px 0 10px; font-family: var(--pk-serif); font-size: 22px; line-height: 1.1; color: oklch(98% 0.01 85); }
.guide--pk .pk-day-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.guide--pk .pk-day-facts > div { padding: 8px 10px; border-radius: 10px; background: oklch(12% 0.03 230 / 0.4); }
.guide--pk .pk-day-facts dt { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(75% 0.03 210); }
.guide--pk .pk-day-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 800; color: oklch(98% 0.01 85); }
.guide--pk .pk-day-call { margin: 0; font-size: 15.5px; line-height: 1.5; color: oklch(93% 0.01 85); }

.guide--pk .pk-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--pk-ink-2); }
.guide--pk .pk-legend li { display: inline-flex; align-items: center; gap: 7px; }
.guide--pk .pk-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.guide--pk .pk-swatch.pk-tone--light { background: oklch(76% 0.12 165); }
.guide--pk .pk-swatch.pk-tone--moderate { background: oklch(86% 0.13 95); }
.guide--pk .pk-swatch.pk-tone--busy { background: oklch(75% 0.15 55); }
.guide--pk .pk-swatch.pk-tone--packed { background: oklch(66% 0.18 28); }

.guide--pk .pk-parks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.guide--pk .pk-park { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--pk-card); border: 1px solid var(--pk-line); font-size: 13.5px; font-weight: 700; }
.guide--pk .pk-park-name { flex-basis: 100%; font-family: var(--pk-serif); font-size: 18px; font-weight: 400; color: var(--pk-ink); }

/* ---------------------------------------------------------------- picks */
.guide--pk .affiliate-note {
  margin: 0 0 16px; padding: 10px 14px; border: 0; border-left: 3px solid var(--pk-coral); border-radius: 0 10px 10px 0;
  background: oklch(95% 0.025 50); font-size: 13px; line-height: 1.5; color: var(--pk-ink-3);
}
.guide--pk .pk-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide--pk .pk-pick {
  --c: var(--pk-coral);
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; overflow: hidden;
  background: var(--pk-card); border: 1px solid var(--pk-line); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.guide--pk .pk-pick::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.guide--pk .pk-pick:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--c) 45%, transparent); box-shadow: 0 12px 28px oklch(25% 0.04 240 / 0.12); }
.guide--pk .pk-pick--battery { --c: oklch(60% 0.15 145); }
.guide--pk .pk-pick--poncho { --c: var(--pk-sky); }
.guide--pk .pk-pick--bottle { --c: oklch(58% 0.11 200); }
.guide--pk .pk-pick--towel { --c: var(--pk-coral); }
.guide--pk .pk-pick--blister { --c: var(--pk-plum); }
.guide--pk .pk-pick--pouch { --c: oklch(60% 0.13 270); }
.guide--pk .pk-pick-tile {
  display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 14px;
  color: var(--c); background: color-mix(in oklch, var(--c) 12%, white); border: 1px solid color-mix(in oklch, var(--c) 30%, transparent);
}
.guide--pk .pk-pick-icon { width: 30px; height: 30px; }
.guide--pk .pk-pick-body { display: flex; flex-direction: column; flex: 1; }
.guide--pk .pk-pick-kind { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.guide--pk .pk-pick-name { margin: 0 0 6px; font-size: 17.5px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--pk-ink); }
.guide--pk .pk-pick-why { margin: 0 0 14px; flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--pk-ink-2); }
.guide--pk a.pk-pick-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 0;
  font-size: 13.5px; font-weight: 800; color: oklch(99% 0.005 85); background: var(--pk-lagoon);
}
.guide--pk a.pk-pick-cta::after { content: "\2197"; font-size: 13px; color: var(--pk-brass); }
.guide--pk a.pk-pick-cta:hover { background: var(--pk-coral); }

/* ---------------------------------------------------------------- leave at home */
.guide--pk .pk-leave { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide--pk .pk-leave li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--pk-card); border: 1px solid var(--pk-line); }
.guide--pk .pk-leave-x { width: 32px; height: 32px; padding: 7px; border-radius: 50%; color: oklch(99% 0 0); background: oklch(62% 0.18 25); box-sizing: border-box; }
.guide--pk .pk-leave strong { display: block; font-size: 16px; color: var(--pk-ink); }
.guide--pk .pk-leave span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--pk-ink-2); }

/* ---------------------------------------------------------------- faq + more */
.guide--pk .pk-faq-item { border-top: 1px solid var(--pk-line); }
.guide--pk .pk-faq-item:last-of-type { border-bottom: 1px solid var(--pk-line); }
.guide--pk .pk-faq-q { cursor: pointer; list-style: none; position: relative; padding: 16px 32px 16px 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--pk-ink); }
.guide--pk .pk-faq-q::-webkit-details-marker { display: none; }
.guide--pk .pk-faq-q::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: var(--pk-coral); transition: transform .2s; }
.guide--pk .pk-faq-item[open] .pk-faq-q::after { transform: rotate(45deg); }
.guide--pk .pk-faq-a { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--pk-ink-2); }
.guide--pk .pk-more-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide--pk .pk-more-list a { display: block; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--pk-line); background: var(--pk-card); font-size: 15.5px; font-weight: 700; }
.guide--pk .pk-more-list a:hover { border-color: var(--pk-coral); }

@media (max-width: 560px) {
  .guide--pk .pk-hero-straps i { width: 34px; }
  .guide--pk .pk-hero-straps i:first-child { right: -2%; }
  .guide--pk .pk-hero-straps i:last-child { display: none; }
  .guide--pk .pk-tag { margin-left: 10px; }
  .guide--pk .pk-tag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide--pk .pk-zones { grid-template-columns: 1fr; gap: 8px; }
  .guide--pk .pk-zone-card a { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; gap: 0 12px; align-items: center; padding: 12px 14px; }
  .guide--pk .pk-zone-card .pk-zone-icon { grid-row: span 2; margin: 0; }
  .guide--pk .pk-zone-card .pk-zone-count { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .guide--pk .pk-zone-card .pk-zone-name { font-size: 19px; }
  .guide--pk .pk-zone { padding: 16px 14px 6px; }
  .guide--pk .pk-zone-title { font-size: 22px; }
  .guide--pk .pk-progress { top: 4px; padding: 10px 12px; }
  .guide--pk .pk-actions { width: 100%; margin-left: 0; }
  .guide--pk .pk-actions .pk-btn { flex: 1; }
  .guide--pk .pk-year { padding: 14px 6px 12px; }
  .guide--pk .pk-year-grid { gap: 2px; }
  .guide--pk .pk-month-col { width: 9px; height: 70px; }
  .guide--pk .pk-month-name { font-size: 8.5px; letter-spacing: 0; }
  .guide--pk .pk-month-high, .guide--pk .pk-month-low { font-size: 10.5px; }
  .guide--pk .pk-week { padding: 12px 8px 10px; }
  .guide--pk .pk-week-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .guide--pk .pk-week-row > :first-child { grid-column: 1 / -1; }
  .guide--pk .pk-week-row--dates > :first-child { display: none; }
  .guide--pk a.pk-week-park { margin-top: 6px; font-size: 11.5px; }
  .guide--pk .pk-cell { height: 36px; font-size: 14px; }
  .guide--pk .pk-picks, .guide--pk .pk-parks { grid-template-columns: 1fr; }
  .guide--pk .pk-pick { display: grid; grid-template-columns: 54px 1fr; gap: 14px; }
}
@media (pointer: coarse) {
  .guide--pk .pk-seg-btn, .guide--pk .pk-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide--pk .pk-tag { animation: none; }
  .guide--pk .pk-progress-fill, .guide--pk .pk-box, .guide--pk .pk-box::after, .guide--pk .pk-switch-track::after { transition: none; }
}

/* ---------------------------------------------------------------- print
   A clean checklist of whatever is on screen, three bags, boxes and names only.
   The pick list and every other paid link stay off the printed page. */
@media print {
  body { background: #fff !important; }
  header.app-bar, .app-bar, nav.app-bar, footer, .site-footer, .wire-ticker, .ad-slot { display: none !important; }
  .guide--pk { background: #fff; padding: 0; }
  .guide--pk .pk-hero, .guide--pk .pk-answer, .guide--pk .pk-jump, .guide--pk .pk-zones,
  .guide--pk .pk-eyebrow, .guide--pk .pk-copy, .guide--pk .pk-controls, .guide--pk .pk-progress,
  .guide--pk .pk-section:not(.pk-tool), .guide--pk .pk-why, .guide--pk .pk-zone-blurb,
  .guide--pk .pk-zone-tally, .guide--pk .pk-zone-icon, .guide--pk .affiliate-note { display: none !important; }
  .guide--pk .pk-body { max-width: none; padding: 0; }
  .guide--pk .pk-tabs { display: none !important; }
  .guide--pk .pk-lists.is-tabbed .pk-zone:not(.is-active) { display: block; }
  .guide--pk .pk-lists.is-tabbed .pk-zone { animation: none; }
  .guide--pk .pk-tool { margin: 0; }
  .guide--pk .pk-print-head { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #444; }
  .guide--pk .pk-h2 { font-size: 26px; margin: 0 0 10px; }
  .guide--pk .pk-lists { display: block; columns: 3; column-gap: 18px; }
  .guide--pk .pk-zone { break-inside: avoid-column; padding: 0; margin: 0 0 12px; border: 0; border-top: 3px solid #333; border-radius: 0; background: #fff; }
  .guide--pk .pk-zone-title { font-size: 17px; margin: 4px 0 0; color: #111; }
  .guide--pk .pk-zone-kicker { display: none; }
  .guide--pk .pk-sec { break-inside: avoid; margin-top: 6px; }
  .guide--pk .pk-sec-title { color: #333; font-size: 9.5px; }
  .guide--pk .pk-item { border: 0; }
  .guide--pk .pk-check { grid-template-columns: 14px 1fr; gap: 6px; padding: 2px 0; }
  .guide--pk .pk-box { width: 12px; height: 12px; border: 1.5px solid #333; border-radius: 3px; background: #fff; }
  .guide--pk .pk-check input:checked + .pk-box { background: #333; border-color: #333; }
  .guide--pk .pk-text { font-size: 11px; line-height: 1.3; }
  .guide--pk .pk-name { color: #111; font-weight: 600; }
  .guide--pk .pk-ess { padding: 0 3px; font-size: 7px; color: #333; background: none; border: 1px solid #999; }
  .guide--pk .pk-item.is-checked .pk-name { color: #666; }
}