/* ============================================================
   Disneyland vs California Adventure (/guides/disneyland-vs-california-adventure), card 870.
   Signature: one park ticket torn in two halves, joined by a Park Hopper perforation, each
   half carrying that park's real numbers. Below it a chart recorder strip, graph paper with
   two ink traces of each park's posted waits by hour. Paper objects carry their own ink so
   they hold contrast in light and dark. Disneyland inks castle rose, California Adventure
   inks Pacific blue. No motion on type. Prose links use :where(a).
   ============================================================ */

.dlca {
  --dl: oklch(76% 0.14 10);
  --dca: oklch(78% 0.11 230);
  --c-gold: var(--gold, oklch(84% 0.13 86));
  --c-ink: var(--ink, oklch(93% 0.03 84));
  --c-ink-soft: var(--ink-soft, oklch(84% 0.025 84));
  --c-muted: var(--muted, oklch(72% 0.02 270));
  --c-hair: var(--hair, oklch(100% 0 0 / 0.12));
  --c-panel: var(--paper-2, oklch(26% 0.04 280));
  --tk-paper: oklch(96% 0.02 80);
  --tk-print: oklch(25% 0.03 260);
  --tk-print-soft: oklch(42% 0.03 260);
  --tk-dl: oklch(47% 0.16 8);
  --tk-dca: oklch(44% 0.12 240);
  --cond: 'Saira Condensed', var(--label, system-ui), sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-md, 16px) var(--space-3xl, 72px);
  color: var(--c-ink);
}
.dlca :where(a) { color: var(--c-gold); text-decoration: none; border-bottom: 1px solid oklch(84% 0.13 86 / 0.35); }
.dlca :where(a:hover) { border-bottom-color: var(--c-gold); }
.dlca :where(a, button, summary):focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 4px; }
.dlca p { line-height: 1.6; }
.dlca-section > p, .dlca-plan-more { max-width: 70ch; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.dlca-hero { padding: var(--space-xl, 32px) 0 var(--space-lg, 24px); max-width: 760px; }
.dlca-kicker { font-family: var(--cond); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin: 0; }
.dlca-title { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-sm, 12px) 0 var(--space-md, 16px); text-wrap: balance; }
.dlca-answer { font-size: clamp(1.08rem, 2.4vw, 1.25rem); line-height: 1.55; color: var(--c-ink-soft); margin: 0 0 var(--space-sm, 12px); max-width: 64ch; }
.dlca-answer strong { color: var(--c-ink); font-weight: 600; }
.dlca-byline { font-size: 0.92rem; color: var(--c-muted); margin: 0 0 var(--space-md, 16px); }
.dlca-jump { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--cond); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.dlca-jump :where(a) { border-bottom: 0; color: var(--c-ink-soft); padding: 6px 0; }
.dlca-jump :where(a:hover) { color: var(--c-gold); }

/* ── Signature, the torn ticket ───────────────────────────────────────── */
.tk { background: var(--tk-paper); color: var(--tk-print); border-radius: 16px; margin: var(--space-md, 16px) 0 var(--space-2xl, 48px); box-shadow: 0 14px 40px oklch(0% 0 0 / 0.35); overflow: hidden; }
.tk-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 10px 20px; background: var(--tk-print); color: var(--tk-paper); font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }
.tk-body { display: grid; grid-template-columns: 1fr 56px 1fr; }
.tk-half { --tk-c: var(--tk-dl); padding: 18px 22px 20px; display: grid; align-content: start; gap: 8px; }
.tk-half--dca { --tk-c: var(--tk-dca); }
.tk-park { font-family: var(--cond); font-weight: 700; font-size: clamp(1.7rem, 4.6vw, 2.3rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--tk-c); margin: 0 0 4px; }
.tk-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin: 0; }
.tk-field { padding: 9px 0 7px; border-top: 1px solid oklch(25% 0.03 260 / 0.14); }
.tk-field dt { font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tk-c); }
.tk-field dd { margin: 2px 0 0; font-family: var(--cond); font-weight: 700; font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tk-field dd small { display: block; font-family: var(--text, system-ui); font-weight: 500; font-size: 12px; line-height: 1.3; color: var(--tk-print-soft); margin-top: 2px; }
.tk .tk-live { justify-self: start; font-weight: 700; font-size: 0.9rem; color: var(--tk-c); border-bottom: 1px solid currentColor; margin-top: 6px; padding: 4px 0; }
.tk-perf { position: relative; display: grid; place-items: center; background:
  radial-gradient(circle 4px, oklch(25% 0.03 260 / 0.28) 98%, transparent) center top / 10px 14px repeat-y; }
.tk-punch { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tk-print-soft); background: var(--tk-paper); padding: 10px 2px; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.dlca-section { margin: var(--space-2xl, 48px) 0; }
.dlca-section h2, .dlca-plan h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.01em; margin: 0 0 var(--space-sm, 12px); text-wrap: balance; }
.dlca-subh { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: var(--space-xl, 32px) 0 var(--space-sm, 12px); }

.dlca-tip { border-left: 3px solid var(--c-gold); padding: 2px 0 2px 16px; color: var(--c-ink-soft); max-width: 70ch; }
.dlca-tip strong { color: var(--c-ink); }

/* ── Chart recorder strip ─────────────────────────────────────────────── */
.strip { max-width: 720px; margin: var(--space-md, 16px) 0 0; background: oklch(97% 0.012 150); color: var(--tk-print); border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 10px 30px oklch(0% 0 0 / 0.3); }
.strip svg { display: block; width: 100%; height: auto; aspect-ratio: 460 / 250; }
.strip .g-maj { stroke: oklch(62% 0.08 160 / 0.45); stroke-width: 1; }
.strip .g-min { stroke: oklch(62% 0.08 160 / 0.2); stroke-width: 1; }
.strip .g-y { font: 600 15px var(--cond); fill: var(--tk-print-soft); text-anchor: end; }
.strip .g-x { font: 600 15px var(--cond); fill: var(--tk-print-soft); text-anchor: middle; }
.strip .tr { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.strip .tr--dl { stroke: var(--tk-dl); }
.strip .tr--dca { stroke: var(--tk-dca); stroke-dasharray: 9 5; }
.strip figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 8px; font-size: 13px; }
.key { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.key::before { content: ""; width: 22px; height: 0; border-top: 3px solid var(--tk-dl); }
.key--dl { color: var(--tk-dl); }
.key--dca { color: var(--tk-dca); }
.key--dca::before { border-top: 3px dashed var(--tk-dca); }
.strip-note { color: var(--tk-print-soft); }
.strip-data { margin-top: 10px; }
.strip-data summary { cursor: pointer; color: var(--c-ink-soft); font-weight: 600; padding: 8px 0; }
.strip-data table { width: 100%; max-width: 480px; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.strip-data th, .strip-data td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--c-hair); }
.strip-data thead th { font-family: var(--cond); letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; color: var(--c-muted); }

/* ── Longest lines ────────────────────────────────────────────────────── */
.dlca-lines { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg, 24px); }
.ln { --c: var(--dl); }
.ln--dca { --c: var(--dca); }
.ln-h { font-family: var(--cond); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); margin: 0 0 8px; }
.ln-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ln-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ride v" "bar peak"; column-gap: 12px; row-gap: 4px; align-items: end; }
.ln-ride { grid-area: ride; font-weight: 600; line-height: 1.25; }
.ln-ride :where(a) { color: var(--c-ink); border-bottom-color: var(--c-hair); }
.ln-bar { grid-area: bar; height: 8px; border-radius: 4px; background: var(--c-hair); position: relative; overflow: hidden; }
.ln-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); border-radius: 4px; }
.ln-v { grid-area: v; font-family: var(--cond); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; text-align: right; }
.ln-v small { font-size: 0.8rem; color: var(--c-muted); }
.ln-peak { grid-area: peak; font-size: 12px; color: var(--c-muted); text-align: right; white-space: nowrap; }
.ln-foot { font-size: 0.9rem; color: var(--c-muted); margin: 10px 0 0; }

/* ── Who picks which ──────────────────────────────────────────────────── */
.dlca-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg, 24px); }
.pk { --c: var(--dl); border-left: 3px solid var(--c); padding: 4px 0 4px 18px; }
.pk--dca { --c: var(--dca); }
.pk h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--c); margin: 0 0 8px; }
.pk ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--c-ink-soft); line-height: 1.45; }

/* ── Headliners ───────────────────────────────────────────────────────── */
.dlca-rides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg, 24px); margin: var(--space-md, 16px) 0; }
.rc { --c: var(--dl); background: var(--c-panel); border: 1px solid var(--c-hair); border-top: 3px solid var(--c); border-radius: 12px; padding: 16px 20px 18px; }
.rc--dca { --c: var(--dca); }
.rc h3 { font-family: var(--cond); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); margin: 0 0 10px; }
.rc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rc li { display: grid; gap: 2px; }
.rc-name { font-weight: 700; }
.rc-land { font-family: var(--cond); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.rc-note { font-size: 0.93rem; color: var(--c-ink-soft); line-height: 1.45; }

/* ── Plan links ───────────────────────────────────────────────────────── */
.dlca-plan { margin: var(--space-2xl, 48px) 0; }
.dlca-plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg, 24px); }
.dlca-plan h3 { font-family: var(--cond); font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 6px; color: var(--dl); }
.dlca-plan-cols > div:last-child h3 { color: var(--dca); }
.dlca-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dlca-plan li :where(a) { display: inline-block; padding: 7px 0; }
.dlca-plan-more { color: var(--c-ink-soft); margin-top: var(--space-md, 16px); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.dlca-faq { display: grid; gap: 8px; }
.dlca-faq-item { border: 1px solid var(--c-hair); border-radius: 12px; background: var(--c-panel); }
.dlca-faq-item summary { cursor: pointer; padding: 14px 20px; font-family: var(--display); font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.dlca-faq-item summary::-webkit-details-marker { display: none; }
.dlca-faq-item summary::after { content: "+"; color: var(--c-gold); font-size: 1.4rem; line-height: 1; flex: none; }
.dlca-faq-item[open] summary::after { content: "\2212"; }
.dlca-faq-item p { margin: 0; padding: 0 20px 14px; color: var(--c-ink-soft); }

.dlca-foot { font-size: 0.82rem; color: var(--c-muted); text-align: center; margin-top: var(--space-2xl, 48px); padding-top: var(--space-md, 16px); border-top: 1px solid var(--c-hair); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .tk-body { grid-template-columns: 1fr; }
  .tk-perf { height: 40px; background: radial-gradient(circle 4px, oklch(25% 0.03 260 / 0.28) 98%, transparent) left center / 14px 10px repeat-x; }
  .tk-punch { writing-mode: horizontal-tb; transform: none; padding: 2px 10px; }
}
@media (max-width: 640px) {
  .dlca-lines, .dlca-pick, .dlca-rides, .dlca-plan-cols { grid-template-columns: 1fr; }
  .tk-half { padding: 16px 16px 18px; }
  .strip { padding: 10px 8px 10px; margin-left: -4px; margin-right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dlca * { transition: none !important; animation: none !important; }
}