.ticket-hero {
  --scene-depth: clamp(210px, 22vw, 319px);
  overflow: hidden;
  border-radius: 17px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 11px 28px #14262b13;
}

.hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(16px, 3vw, 45px);
  padding: clamp(24px, 3.2vw, 45px);
  background: radial-gradient(ellipse at 90% 100%, #24454a, var(--ink) 65%);
}

.hero-intro h1 {
  font-size: clamp(2.8rem, 5.15vw, 4.85rem);
  line-height: .94;
  letter-spacing: -.075em;
  text-wrap: initial;
}

.hero-intro h1 span { display: block; color: var(--orange-light); }
.hero-intro-side p { color: #f0e8d8; font-size: clamp(.97rem, 1.44vw, 1.17rem); line-height: 1.43; }
.hero-intro-side .hero-actions { margin-top: 13px; gap: 7px 17px; }

.hero-panes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-panes::before {
  position: absolute;
  z-index: 2;
  inset: 9px auto 9px 50%;
  border-left: 1px dashed #fff6d5b9;
  pointer-events: none;
  content: "";
}

.hero-panes::after {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 calc(50% - 11px);
  width: 22px;
  background:
    radial-gradient(circle at 50% 0, var(--ink) 8px, transparent 8.6px),
    radial-gradient(circle at 50% 100%, var(--cream) 9px, transparent 9.6px);
  pointer-events: none;
  content: "";
}

.hero-pane {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}

.hero-pane:focus-within { z-index: 4; outline: 3px solid var(--paper); outline-offset: -4px; }
.hero-pane-link { text-decoration: none; }
.hero-pane-link::after { position: absolute; z-index: 1; inset: 0; content: ""; }
.hero-pane-link:hover { text-decoration: underline; text-underline-offset: .15em; }
.hero-scene { height: var(--scene-depth); }
.hero-scene img { position: absolute; inset: 0; object-position: 51% 56%; transition: transform 540ms ease; }
.hero-pane--studio img { object-position: 49% 57%; }
.hero-pane:hover img { transform: scale(1.035); }

.hero-stub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  flex: 1;
  align-items: center;
  gap: 13px;
  min-height: 90px;
  padding: 13px clamp(13px, 2.4vw, 29px);
  border-top: 1px dashed #997d58;
  background: #efe2ca;
  transition: background-color 180ms ease;
}

.hero-pane--studio .hero-stub { background: #f4d195; }
.hero-pane:hover .hero-stub { background: #fbecd2; }
.hero-pane--studio:hover .hero-stub { background: #f7dda9; }

.hero-pane::before {
  position: absolute;
  z-index: 1;
  top: calc(var(--scene-depth) - 8px);
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream);
  pointer-events: none;
  content: "";
}

.hero-pane--studio::before { right: -8px; left: auto; }

.hero-stub-icon, .hero-stub-arrow {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.1rem;
}

.hero-stub-arrow {
  width: 33px;
  height: 33px;
  border: 1px solid #a98e63;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: transform 180ms ease;
}

.hero-pane:hover .hero-stub-arrow { transform: translateX(3px); }
.hero-stub-icon .icon, .hero-stub-arrow .icon { max-width: 72%; max-height: 72%; }

.hero-stub h2 {
  font-size: clamp(1.36rem, 2.7vw, 2.36rem);
  line-height: 1.03;
  text-wrap: initial;
}

.hero-stub p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 5px;
  color: #473d30;
  font: 680 .9375rem/1.35 var(--heading);
}

.hero-stub p span { min-width: 0; }
.hero-intro :focus-visible { outline-color: var(--amber); }

.features { align-items: start; }

.visit-time {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px dashed #b69b6c;
  border-radius: 8px;
  background: #f6ead0;
}

.visit-time div > span { display: block; color: var(--muted); font: 700 .875rem/1.35 var(--heading); }
.visit-time strong { display: block; margin-top: 2px; color: var(--ink); font: 800 1.22rem/1.2 var(--heading); }
.visit-time p { color: var(--muted); font-size: .9375rem; line-height: 1.35; }

.walk-notes { margin-top: 13px; }
.walk-layers { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.walk-layer { padding: 11px 0; border-top: 1px dashed var(--line); }
.walk-layer:last-child { padding-bottom: 0; }
.walk-layer h4 { margin: 5px 0 3px; font: 790 clamp(1.03rem, 1.6vw, 1.2rem)/1.2 var(--heading); }
.walk-layer p { color: var(--muted); font-size: .94rem; line-height: 1.42; }
.walk-layer .walk-source { margin-top: 3px; }
.walk-source .text-link { display: inline-block; padding-block: 9px; }

.walk-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 5px;
  background: #dfebe8;
  color: #153b3d;
  font: 720 .875rem/1.25 var(--heading);
}

.walk-tag--independent { background: #f6e1c0; color: #7a391e; }
.walk-tag--extension { background: #ede5d0; color: #67431e; }
.walk-key { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: #215855; }
.walk-tag--independent .walk-key { border-radius: 1px; transform: rotate(45deg) scale(.8); background: #ac532b; }
.walk-tag--extension .walk-key { border: 2px dashed #98632d; background: transparent; }

.walk-map {
  overflow: hidden;
  border: 1px solid #d3bd96;
  border-radius: 8px;
  background: #f8edd6;
}

.walk-map svg { display: block; width: 100%; height: auto; max-height: 174px; }
.walk-map text { fill: var(--ink); font: 700 14px var(--heading); paint-order: stroke; stroke: #f8edd6; stroke-width: 3px; stroke-linejoin: round; }
.walk-map .map-water-name { fill: #355c63; font: 500 11px var(--mono); }
.map-river { fill: none; stroke: #a4c0bd; stroke-width: 12px; }
.map-dot { fill: #215855; stroke: #f8edd6; stroke-width: 1px; }
.map-diamond { fill: #ac532b; stroke: #f8edd6; stroke-width: 1px; }
.map-ring { fill: none; stroke: #98632d; stroke-width: 2.5px; stroke-dasharray: 3 2; }
.map-leader { fill: none; stroke: #98815e; stroke-width: 1px; }
.map-north { fill: none; stroke: #355c63; stroke-width: 1.5px; }

.walk-map figcaption { padding: 7px 9px 9px; border-top: 1px solid #e2cfa7; }
.walk-map figcaption strong { display: block; font: 780 .89rem/1.2 var(--heading); }
.walk-map figcaption small { display: block; margin-top: 3px; color: var(--muted); font-size: .875rem; line-height: 1.35; }
.map-keys { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 6px; }
.map-keys .walk-tag { padding: 3px 5px; }

.budget-summary { margin-top: 16px; }
.summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 7px;
}

.summary-head h4 { margin: 0; font: 800 clamp(1.24rem, 2.45vw, 1.8rem)/1.16 var(--heading); letter-spacing: -.035em; }
.summary-picker {
  display: flex;
  min-inline-size: 0;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid #84928a;
  border-radius: 8px;
  background: #22373b;
}

.summary-picker label { position: relative; display: flex; min-width: 0; cursor: pointer; }
.summary-picker input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.summary-picker label > span {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 5px;
  color: var(--paper);
  font: 760 .9375rem/1.25 var(--heading);
  pointer-events: none;
  transition: background-color 170ms ease;
}

.summary-picker input:checked + span { background: #f1ca84; color: var(--ink); box-shadow: inset 0 -3px #785227; }
.summary-picker input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 1px; }

.summary-sheet {
  display: grid;
  grid-template-columns: minmax(0, .59fr) minmax(0, 1.9fr);
  overflow: hidden;
  border: 1px solid #d4b989;
  border-radius: 11px;
  background: #fcf1da;
  color: var(--ink);
}

.summary-art { position: relative; min-width: 0; border-right: 1px dashed #d0b47d; background: #374e4c; }
.summary-art > div, .summary-illustration { height: 100%; }
.summary-illustration img { position: absolute; inset: 0; object-position: 51% 55%; }
.summary-illustration figcaption { max-width: calc(100% - 15px); }
.summary-art > div:not([hidden]) { animation: ticket-reveal 220ms ease-out; }
@keyframes ticket-reveal { from { opacity: .7; } to { opacity: 1; } }
.summary-body { min-width: 0; padding: clamp(11px, 1.6vw, 19px); }

.summary-party {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding-bottom: 9px;
  border-bottom: 1px dashed #cdb587;
}

.summary-party div { min-width: 0; padding: 6px 8px; border: 1px solid #dbc5a0; border-radius: 5px; background: #f5e5c7; }
.summary-party dt { color: #534631; font: 670 .875rem/1.25 var(--heading); }
.summary-party dd { margin-top: 4px; font: 800 1.15rem/1.1 var(--heading); }

.summary-plan {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.07fr);
  gap: 11px;
  margin-top: 10px;
}

.summary-route { display: grid; align-content: start; gap: 0; margin: 0; padding: 0; list-style: none; }
.summary-route li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; padding-bottom: 11px; }
.summary-route li:last-child { padding-bottom: 0; }

.summary-route li:not(:last-child)::after {
  position: absolute;
  inset: 29px auto 0 14px;
  border-left: 1px dashed #9d7751;
  content: "";
}

.summary-route-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #f2d198; font-size: .84rem; }
.summary-route strong { display: block; padding-top: 2px; font: 780 .9375rem/1.25 var(--heading); }
.summary-route small { display: block; margin-top: 3px; color: var(--muted); font-size: .9rem; line-height: 1.35; }

.summary-costs { min-width: 0; padding: 8px 9px; border: 1px solid #dbc5a0; border-radius: 7px; background: var(--paper); }
.summary-status { display: inline-block; padding: 4px 6px; border-radius: 4px; background: #f5dca7; color: #633717; font: 760 .875rem/1.25 var(--heading); }
.summary-status[data-state="entered"] { background: #dcebe2; color: #1b5144; }
.summary-status[data-state="reference"] { background: #f6e6c6; color: #6f3e18; }
.summary-costs dl { margin-top: 4px; }

.summary-costs dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed #e0cfad;
}

.summary-costs dt { font: 720 .9rem/1.25 var(--heading); }
.summary-costs dt small { color: var(--muted); font: 650 .875rem/1.25 var(--heading); }
.summary-costs dd { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.summary-costs .budget-value { font: 800 1rem/1.2 var(--heading); }
.summary-note, .summary-toddler { color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.summary-note { margin-top: 5px; }
.summary-edit { display: inline-flex; min-height: 44px; align-items: center; gap: 5px; }

.summary-toddler {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px dashed #cdb587;
}

.summary-toddler .icon { margin-top: 1px; color: #7f4920; }

@media (max-width: 820px) {
  .hero-intro { grid-template-columns: 1fr; gap: 11px; }
  .hero-intro h1 { font-size: clamp(2.5rem, 7.65vw, 4.1rem); }
  .hero-intro-side .hero-actions { margin-top: 10px; }
  .summary-sheet { grid-template-columns: minmax(0,.52fr) minmax(0,1.9fr); }
  .visit-time { grid-template-columns: auto minmax(0,1fr); }
  .visit-time p { grid-column: 2; }
}

@media (max-width: 700px) {
  .ticket-hero { --scene-depth: clamp(107px, 40vw, 212px); border-radius: 13px; }
  .hero-intro { padding: 17px 16px 15px; }
  .hero-intro h1 { font-size: clamp(1.92rem, 8.45vw, 3.2rem); }
  .hero-stub { gap: 6px; min-height: 85px; padding: 10px; }
  .hero-stub-icon { width: 29px; height: 29px; font-size: .85rem; }
  .hero-stub-arrow { width: 23px; height: 23px; font-size: .75rem; }
  .hero-stub h2 { font-size: clamp(1.09rem, 3.8vw, 1.61rem); }
  .hero-stub p { gap: 4px 7px; }
  .hero-scene figcaption { right: 7px; bottom: 7px; }
  .summary-sheet { grid-template-columns: 1fr; }
  .summary-art { height: clamp(100px, 32vw, 160px); border-right: 0; border-bottom: 1px dashed #d0b47d; }
  .summary-illustration img { object-position: 50% 62%; }
  .summary-picker { max-width: 100%; }
}

@media (max-width: 700px) {
  .ticket-hero { --scene-depth: clamp(134px, 44vw, 228px); }
  .hero-panes { grid-template-columns: minmax(0, 1fr); }
  .hero-panes::before, .hero-panes::after { display: none; }
  .hero-pane--studio { border-top: 2px dashed #a0845c; }
  .hero-stub { min-height: 79px; padding: 12px; gap: 10px; }
  .hero-stub h2 { font-size: 1.4rem; }
  .hero-stub p span:last-child { flex-basis: 100%; }
  .summary-party { grid-template-columns: repeat(auto-fit,minmax(min(100%,6.5rem),1fr)); }
}

@media (max-width: 520px) {
  .summary-head { align-items: stretch; }
  .summary-picker { width: 100%; }
  .summary-picker label { flex: 1; }
  .summary-picker label > span { width: 100%; padding-inline: 6px; }
  .summary-plan { grid-template-columns: 1fr; }
}