/* ============================================================================
   bdl , "The Best Time to Visit Disneyland in 2027, Month by Month" (card 868)

   The idea is the 2027 ticket book. Disneyland's old A to E coupon books, re-issued
   as twelve cream paper coupons on the site's night sky, each month graded from the
   crowd forecast. The coupon letter follows the reader down the page as each
   month's stub, and the whole year is one punch card where Saturdays run as dark
   diagonals. Every coloured square on the page is a forecast figure.

   Namespace bdl-. Sits on _LayoutV1 and v1.css tokens, with local fallbacks.
   ========================================================================= */

:root:has(.bdl) { scroll-padding-top: 110px; }

.bdl {
  --bdl-bg:     var(--bg, oklch(21% 0.046 280));
  --bdl-panel:  var(--surface, oklch(27% 0.05 279));
  --bdl-line:   var(--line, oklch(40% 0.05 280));
  --bdl-line-2: var(--line-2, oklch(50% 0.046 281));
  --bdl-ink:    var(--ink, oklch(93% 0.03 84));
  --bdl-ink-2:  var(--ink-2, oklch(82% 0.03 84));
  --bdl-ink-3:  var(--ink-3, oklch(70% 0.032 84));
  --bdl-gold:   var(--brand, oklch(84% 0.13 86));

  /* Coupon paper. A warm card stock, with ink that clears 7:1 on it. */
  --bdl-paper:   oklch(95% 0.03 88);
  --bdl-paper-2: oklch(90% 0.04 86);
  --bdl-pink:    oklch(36% 0.04 60);

  /* One grade hue per letter, walked along the same calm-to-hot line as the crowd
     ramp (E sits at the mint end, A at the ember end), each darkened so white text
     clears 4.5:1. */
  --bdl-gE: color-mix(in oklch, var(--bdl-calm), var(--bdl-hot) 0%);
  --bdl-gD: color-mix(in oklch, var(--bdl-calm), var(--bdl-hot) 22%);
  --bdl-gC: color-mix(in oklch, var(--bdl-calm), var(--bdl-hot) 48%);
  --bdl-gB: color-mix(in oklch, var(--bdl-calm), var(--bdl-hot) 72%);
  --bdl-gA: color-mix(in oklch, var(--bdl-calm), var(--bdl-hot) 100%);
  /* Ink on each grade: dark on the pale end, white on the ember end. */
  --bdl-gink-dark: oklch(24% 0.03 60);

  /* The crowd ramp, calm mint to packed ember, the same scale as the Disney World guide. */
  --bdl-calm: oklch(89% 0.07 168);
  --bdl-hot:  oklch(62% 0.19 30);

  --bdl-serif: "Fraunces", "Libre Caslon Display", Georgia, serif;
  --bdl-sans: var(--ui, "Hanken Grotesk", system-ui, sans-serif);

  background: var(--bdl-bg);
  color: var(--bdl-ink);
  font-family: var(--bdl-sans);
  overflow-x: clip;
}

.bdl :where(h1, h2, h3) {
  font-family: var(--bdl-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
.bdl :where(p, li) { text-wrap: pretty; }
.bdl .wrap { --maxw: 1180px; }

/* Grades sit on the crowd ramp itself, so an E coupon is the colour of a light
   day and an A coupon the colour of a packed one. --bdl-gt is the letter ink on
   the fill, --bdl-gl the letter colour on cream paper (darker, for contrast). */
.bdl [data-grade="E"] { --bdl-g: var(--bdl-gE); --bdl-gt: var(--bdl-gink-dark); --bdl-gl: oklch(50% 0.09 168); }
.bdl [data-grade="D"] { --bdl-g: var(--bdl-gD); --bdl-gt: var(--bdl-gink-dark); --bdl-gl: oklch(50% 0.10 120); }
.bdl [data-grade="C"] { --bdl-g: var(--bdl-gC); --bdl-gt: var(--bdl-gink-dark); --bdl-gl: oklch(50% 0.11 80); }
.bdl [data-grade="B"] { --bdl-g: var(--bdl-gB); --bdl-gt: #fff; --bdl-gl: oklch(50% 0.15 50); }
.bdl [data-grade="A"] { --bdl-g: var(--bdl-gA); --bdl-gt: #fff; --bdl-gl: oklch(50% 0.18 30); }
/* A month the forecast has not reached yet. Blank stock, not a guessed colour. */
.bdl [data-grade="Soon"] { --bdl-g: var(--bdl-paper-2); --bdl-gt: var(--bdl-pink); --bdl-gl: var(--bdl-pink); }
.bdl [data-grade="Soon"] .bdl-coupon-letter,
.bdl [data-grade="Soon"] .bdl-month-letter {
  font-family: var(--bdl-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.bdl-strip [data-grade="Soon"] a { background: transparent; box-shadow: inset 0 0 0 1px var(--bdl-line-2); color: var(--bdl-ink-3); }

.bdl :where([data-s]) {
  --t: 0;
  --bdl-cell: color-mix(in oklch, var(--bdl-calm) calc(100% - var(--t) * 100%), var(--bdl-hot));
}
.bdl [data-s="2"] { --t: 0.1; }
.bdl [data-s="3"] { --t: 0.22; }
.bdl [data-s="4"] { --t: 0.36; }
.bdl [data-s="5"] { --t: 0.48; }
.bdl [data-s="6"] { --t: 0.6; }
.bdl [data-s="7"] { --t: 0.72; }
.bdl [data-s="8"] { --t: 0.83; }
.bdl [data-s="9"] { --t: 0.92; }
.bdl [data-s="10"] { --t: 1; }

.bdl-label {
  margin: 0;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--bdl-ink-3);
}

.bdl-section { padding-block: clamp(52px, 7.5vw, 96px); }
.bdl-section + .bdl-section { border-top: 1px solid var(--bdl-line); }

.bdl-head { margin-bottom: clamp(24px, 3.6vw, 40px); max-width: 44rem; }
.bdl-head h2 { margin-top: 10px; font-size: clamp(1.75rem, 3.2vw, 2.625rem); line-height: 1.08; }
.bdl-sub { margin: 14px 0 0; font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem); line-height: 1.55; color: var(--bdl-ink-2); }

.bdl-body p { margin: 0 0 1em; font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem); line-height: 1.62; color: var(--bdl-ink-2); }
.bdl-body p:last-child { margin-bottom: 0; }
.bdl-body :where(a), .bdl-cross :where(a), .bdl-links :where(a) {
  color: var(--bdl-ink);
  text-decoration: underline;
  text-decoration-color: var(--bdl-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.bdl-body :where(a):hover, .bdl-cross :where(a):hover, .bdl-links :where(a):hover { color: var(--bdl-gold); }

/* ============================================================== hero ==== */
.bdl-hero { padding-block: clamp(36px, 6vw, 80px) clamp(28px, 4vw, 52px); }
.bdl-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4.5vw, 64px);
  align-items: center;
}
.bdl-hero h1 {
  margin-top: 14px;
  font-size: clamp(2.125rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.bdl-hero h1 em { font-style: italic; font-weight: 500; color: var(--bdl-gold); }
.bdl-dek {
  margin: 20px 0 0;
  max-width: 36rem;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  line-height: 1.55;
  color: var(--bdl-ink);
}
.bdl-checked { margin-top: 20px; }

/* The ticket book in one line under the answer. */
.bdl-strip {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px;
  max-width: 36rem;
}
.bdl-strip a {
  display: grid; justify-items: center; gap: 2px;
  padding: 6px 0 5px;
  border-radius: 4px;
  background: var(--bdl-g);
  color: var(--bdl-gt);
  text-decoration: none;
}
.bdl-strip b { font-family: var(--bdl-serif); font-size: clamp(1rem, 2.4vw, 1.375rem); line-height: 1; }
.bdl-strip span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bdl-strip a:hover { outline: 2px solid var(--bdl-ink); outline-offset: 1px; }

/* The photo, cut like a ticket. Notches left and right where the perforation sits. */
.bdl-hero-photo {
  margin: 0;
  background: var(--bdl-paper);
  padding: 10px 10px 0;
  border-radius: 10px;
  -webkit-mask: radial-gradient(circle 11px at 0 78%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 78%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 78%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 78%, #0000 98%, #000) right / 51% 100% no-repeat;
  transform: rotate(1.5deg);
}
.bdl-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.bdl-hero-photo figcaption {
  margin-top: 10px;
  padding: 12px 6px 14px;
  border-top: 2px dashed var(--bdl-paper-2);
  font-family: var(--bdl-serif); font-style: italic; font-size: 1rem;
  color: var(--bdl-pink); text-align: center;
}

/* ========================================================= ticket book ==== */
.bdl-book {
  background: var(--bdl-panel);
  border: 1px solid var(--bdl-line);
  border-radius: 14px;
  padding: clamp(14px, 2.4vw, 26px);
}
.bdl-book-cover {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 clamp(12px, 2vw, 18px);
  padding: 0 4px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--bdl-ink-3);
}
.bdl-book-cover b { font-family: var(--bdl-serif); font-size: 1.375rem; letter-spacing: 0.02em; color: var(--bdl-gold); }

.bdl-coupons {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 1000px) { .bdl-coupons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* Three across on a phone, so the book stays one screen of coupons. */
  .bdl-book { padding: 12px 10px; }
  .bdl-coupons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bdl-coupon a { padding: 0 9px 10px; }
  .bdl-coupon .bdl-coupon-letter { height: 50px; margin: 0 -9px 8px; font-size: 2.25rem; }
  .bdl-coupon-month { font-size: 0.875rem; letter-spacing: -0.01em; }
  .bdl-coupon-facts { flex-direction: column; gap: 2px; font-size: 0.875rem; }
}

.bdl-coupon { background: var(--bdl-paper); position: relative; }
/* Perforations. A dotted rule on the right and bottom of each coupon. */
.bdl-coupon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-right: 2px dotted var(--bdl-paper-2);
  border-bottom: 2px dotted var(--bdl-paper-2);
}
.bdl-coupon a {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-height: 100%;
  padding: 0 14px 14px;
  color: var(--bdl-pink);
  text-decoration: none;
  transition: background-color 160ms ease;
}
.bdl-coupon a:hover { background: var(--bdl-paper-2); }
.bdl-coupon-letter {
  display: grid; place-items: center;
  margin: 0 -14px 10px;
  height: clamp(64px, 8vw, 84px);
  background: var(--bdl-g);
  color: var(--bdl-gt);
  font-family: var(--bdl-serif); font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.375rem); line-height: 1;
}
.bdl-coupon-month { font-family: var(--bdl-serif); font-weight: 600; font-size: 1.125rem; color: oklch(24% 0.03 60); }
.bdl-coupon-word {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bdl-pink); margin-top: 2px;
}
.bdl-coupon-facts {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-self: end;
  margin-top: 12px; padding-top: 8px;
  border-top: 1px solid var(--bdl-paper-2);
  font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums;
  color: oklch(24% 0.03 60);
}
.bdl-coupon-facts small { font-weight: 500; font-size: 0.75rem; color: var(--bdl-pink); }

/* ======================================================= weekday rule ==== */
.bdl-week {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.bdl-week .bdl-head { margin-bottom: 0; }
.bdl-week-bars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 12px);
  align-items: end;
  height: 240px;
}
/* Value, bar, day, stacked from the floor. The bar takes its share of 75% of the
   column so the tallest one leaves room for its value above it. */
.bdl-week-bars li {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; text-align: center;
}
.bdl-week-val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9375rem; color: var(--bdl-ink); margin-bottom: 6px; }
.bdl-week-bar {
  flex: none;
  height: calc(var(--h) * 0.75);
  min-height: 6px;
  border-radius: 5px 5px 0 0;
  background: var(--bdl-cell);
}
.bdl-week-day {
  padding-top: 8px; border-top: 1px solid var(--bdl-line-2);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdl-ink-3);
}

@media (max-width: 820px) {
  .bdl-week { grid-template-columns: 1fr; }
  .bdl-week-bars { height: 190px; }
}

/* ========================================================== punch card ==== */
.bdl-key {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: 0.8125rem; font-weight: 600; color: var(--bdl-ink-2);
}
.bdl-key li { display: inline-flex; align-items: center; gap: 8px; }
.bdl-key span { width: 14px; height: 14px; border-radius: 3px; background: var(--bdl-cell); }

.bdl-punch {
  background: var(--bdl-paper);
  border-radius: 10px;
  padding: clamp(10px, 2vw, 22px);
  display: grid; gap: clamp(2px, 0.4vw, 4px);
}
.bdl-punch-row {
  display: grid;
  grid-template-columns: clamp(26px, 4vw, 40px) repeat(31, minmax(0, 1fr));
  gap: clamp(1px, 0.3vw, 4px);
  align-items: center;
}
.bdl-punch-row > span {
  font-size: clamp(0.625rem, 1.1vw, 0.75rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bdl-pink);
}
.bdl-punch-row > i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--bdl-cell);
}
.bdl-punch-row > i[data-s="0"] { background: transparent; box-shadow: inset 0 0 0 1px var(--bdl-paper-2); }
.bdl-punch-row > i.is-void { background: transparent; }
.bdl-punch-axis > i {
  aspect-ratio: auto; background: none;
  font-style: normal; font-size: clamp(0.625rem, 1vw, 0.6875rem); font-weight: 700;
  overflow: visible; white-space: nowrap;
  color: var(--bdl-pink); text-align: center; font-variant-numeric: tabular-nums;
}
.bdl-punch-hint { display: none; margin: 0 0 8px; font-size: 0.8125rem; color: var(--bdl-ink-3); }
.bdl-note { margin: 14px 0 0; font-size: 0.875rem; color: var(--bdl-ink-3); max-width: 44rem; }

/* ============================================================ months ==== */
.bdl-month { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--bdl-line); }
.bdl-month-in {
  display: grid;
  grid-template-columns: clamp(92px, 12vw, 150px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: start;
}
.bdl-month-stub {
  position: sticky; top: 96px;
  display: grid; justify-items: center; gap: 8px;
  padding: 14px 8px 12px;
  background: var(--bdl-paper);
  border-radius: 8px;
  border-top: 8px solid var(--bdl-g);
}
.bdl-month-letter {
  font-family: var(--bdl-serif); font-weight: 700; line-height: 0.9;
  font-size: clamp(3rem, 7vw, 5.25rem);
  color: var(--bdl-gl);
}
.bdl-month-word {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bdl-pink); text-align: center;
}
.bdl-month-main { max-width: 44rem; }
.bdl-month h3 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.bdl-month-verdict {
  margin: 10px 0 22px;
  font-family: var(--bdl-serif); font-style: italic;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.4;
  color: var(--bdl-ink);
}

.bdl-figs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: clamp(16px, 2vw, 20px) 0;
  border-block: 1px solid var(--bdl-line);
}
@media (max-width: 640px) { .bdl-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bdl-figs dt { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bdl-ink-3); margin-bottom: 5px; }
.bdl-figs dd {
  margin: 0;
  font-family: var(--bdl-serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bdl-figs small { display: block; margin-top: 4px; font-family: var(--bdl-sans); font-size: 0.75rem; font-weight: 500; color: var(--bdl-ink-3); }

.bdl-bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: end; gap: 2px;
  height: 52px; margin: 18px 0 0; padding: 0; list-style: none;
}
.bdl-bars li { height: max(8%, var(--h)); border-radius: 2px 2px 0 0; background: var(--bdl-cell); }
.bdl-bars li.is-calm { outline: 1.5px solid var(--bdl-ink); outline-offset: 1px; }
.bdl-axis {
  display: flex; justify-content: space-between;
  margin: 6px 0 0;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bdl-ink-3); font-variant-numeric: tabular-nums;
}
.bdl-month-body { margin-top: clamp(22px, 3vw, 30px); }
.bdl-figs { margin-top: 0; }

.bdl-events {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.bdl-events li {
  padding: 6px 12px;
  border: 1px solid var(--bdl-line-2);
  border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; color: var(--bdl-ink-2);
}
.bdl-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 0.9375rem; font-weight: 600; }

/* =============================================================== faq ==== */
.bdl-faq { max-width: 46rem; border-top: 1px solid var(--bdl-line); }
.bdl-faq details { border-bottom: 1px solid var(--bdl-line); }
.bdl-faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 32px 18px 0; position: relative;
  font-family: var(--bdl-serif); font-weight: 600; font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
}
.bdl-faq summary::-webkit-details-marker { display: none; }
.bdl-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--bdl-sans); font-size: 1.5rem; color: var(--bdl-gold);
}
.bdl-faq details[open] summary::after { content: "\2212"; }
.bdl-faq .bdl-body { padding-bottom: 20px; }
.bdl-cross { margin: 28px 0 0; max-width: 46rem; font-size: 1.0625rem; line-height: 1.6; color: var(--bdl-ink-2); }

/* =========================================================== small ==== */
@media (max-width: 900px) {
  .bdl-hero-in { grid-template-columns: 1fr; }
  .bdl-hero-photo { max-width: 460px; transform: rotate(1deg); }
}
@media (max-width: 560px) {
  .bdl-hero-photo img { aspect-ratio: 3 / 1; }
  /* The punch card keeps readable 14px squares and swipes inside its own card. */
  .bdl-punch { overflow-x: auto; overscroll-behavior-x: contain; }
  .bdl-punch-row { min-width: 540px; }
  .bdl-punch-hint { display: block; }
  .bdl-hero-photo figcaption { padding: 8px 6px 10px; font-size: 0.9375rem; }
  .bdl-strip { gap: 2px; }
  .bdl-strip span { font-size: 0.625rem; letter-spacing: -0.02em; }
  .bdl-month-in { grid-template-columns: 1fr; }
  .bdl-month-stub {
    position: static;
    grid-auto-flow: column; justify-content: start; align-items: center;
    justify-self: start; padding: 8px 14px 8px 10px; border-top: 0; border-left: 6px solid var(--bdl-g);
  }
  .bdl-month-letter { font-size: 2.5rem; }
}

/* ============================================================ motion ==== */
@media (prefers-reduced-motion: reduce) {
  .bdl *, .bdl *::before, .bdl *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .bdl-hero-photo { transform: none; }
}

.bdl :where(a, summary):focus-visible {
  outline: 2px solid var(--bdl-gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.bdl-coupon a:focus-visible { outline-offset: -4px; }

@media print {
  .bdl { background: #fff; color: #111; }
  .bdl-punch-row > i, .bdl-bars li, .bdl-coupon-letter { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}