.route-planner {
  --plan-ink: #2e4837;
}

.planner-section-heading { align-items: end; }
.planner-section-heading > p { width: min(100%, 27rem); }
.planner-cover {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  overflow: hidden;
  border: 1px solid #9a9e7e;
  border-radius: 14px;
  background: #e4dcc3;
}

.planner-controls {
  position: relative;
  isolation: isolate;
  align-content: center;
  display: grid;
  padding: clamp(1.25rem, 3.1vw, 2.8rem);
  min-width: 0;
  background: var(--plan-ink);
  color: #fff2da;
}
.planner-controls::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(ellipse at -80% 132%, transparent 0 31px, #fff0cb13 32px 33px, transparent 34px 48px);
  pointer-events: none;
}
.planner-controls h3 { font-size: clamp(1.75rem, 2.8vw, 2.65rem); margin: 0 0 1rem; }
.planner-controls :focus-visible { outline-color: #f8ce8f; }
.planner-controls form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.6rem), 1fr)); gap: .72rem; }
.plan-field { display: grid; min-width: 0; gap: .34rem; align-content: start; }
.plan-field--origin { grid-column: 1 / -1; }
.plan-field > span:first-child {
  display: flex;
  align-items: center;
  gap: .38rem;
  color: #f4dfba;
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.21;
}
.plan-field select {
  appearance: none;
  width: 100%;
  min-height: 2.85rem;
  padding: .55rem 1.9rem .55rem .69rem;
  border: 1px solid #d5c5a3;
  border-radius: 6px;
  background: #fff4df;
  color: #283a2e;
  font-size: 1.02rem;
  font-weight: 650;
  cursor: pointer;
}
.plan-field .select-shell svg { color: #436247; }
.plan-field--month select { text-transform: capitalize; }
.plan-season {
  margin-top: 1.05rem;
  padding: .95rem 1rem 1.05rem;
  border: 1px solid #d7c69667;
  border-left: 3px solid #edbd78;
  border-radius: 6px;
  background: #233a2d;
}
.plan-season-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem .48rem;
  color: #edc78d;
  font: 500 var(--caption-size)/1.35 var(--mono);
  text-transform: uppercase;
  letter-spacing: .055em;
}
.plan-season-label span::before { content: "·"; margin-right: .43rem; }
.plan-season strong { display: block; margin: .34rem 0 .21rem; color: #fff2d9; font: 500 clamp(1.21rem, 1.7vw, 1.54rem)/1.16 var(--title); letter-spacing: -.025em; }
.plan-season > p[data-season-text] { color: #f1e4cd; font-size: .96rem; line-height: 1.39; }

.planner-map {
  display: flex;
  flex-direction: column;
  min-width: 0;
  container-type: inline-size;
  border-left: 1px solid #a9a88c;
  background: #e4dcc3;
}
.planner-map .map-art { display: block; width: 100%; aspect-ratio: auto; flex: 0 0 auto; margin-block: auto; }
.planner-map-image { position: relative; aspect-ratio: 640 / 386; }
.origin-controls { position: absolute; inset: 0; pointer-events: none; }
.planner-map .cartography { position: absolute; inset: 0; width: 100%; height: 100%; }
.planner-map .map-paths [data-route-for] { opacity: .29; }
.planner-map .map-paths .is-active { opacity: 1; stroke: #944722; stroke-width: 4.1; }
.planner-map.is-interactive .map-cities { visibility: hidden; }
.map-places { fill: #37452d; font: 650 16px var(--text); }
.map-places circle { fill: #805e37; }
.planner-map figcaption {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.7rem;
  padding: .55rem .9rem;
  border-top: 1px solid #bdb498;
  color: #494c38;
  background: #eee3ca;
  font: 650 var(--caption-size)/1.4 var(--text);
}
.origin-marker {
  position: absolute;
  left: var(--point-x);
  top: var(--point-y);
  transform: translate(-19px, -50%);
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  min-height: 44px;
  padding: .18rem .55rem .18rem .18rem;
  border: 1px solid #ac9470;
  border-radius: 2rem;
  color: #263e32;
  background: #fff3d9;
  box-shadow: 0 3px 12px #342b1e26;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  pointer-events: auto;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.origin-symbol {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #6a432a;
  background: #eadab8;
}
.origin-marker:hover { box-shadow: 0 0 0 3px #b3895477; }
.origin-marker:focus-visible { z-index: 2; }
.origin-marker[aria-pressed="true"] { color: #fff4de; background: #304b35; border-color: #304b35; }
.origin-marker[aria-pressed="true"] .origin-symbol { color: #fff4de; background: #63785a; }

.planner-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem 1.3rem;
  margin-block: 1.8rem .88rem;
}
.planner-result-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; }
.planner-result-head .plan-actions { gap: .45rem; }
.result-heading { color: #6b4a30; font: 500 var(--caption-size)/1.42 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.buffer { display: inline-flex; padding: .18rem .49rem; border-radius: 4px; background: #ece5ce; color: #374d33; font-weight: 650; font-size: .95rem; }
.plan-copy { gap: .45rem; font-size: .97rem; min-height: 44px; }
.copy-status { margin: 0 0 .6rem; color: var(--forest); font-size: .96rem; }
.copy-status:empty { margin: 0; }
.copy-fallback { display: grid; gap: .33rem; margin-bottom: .8rem; font-weight: 650; }
.copy-fallback textarea { width: 100%; padding: .7rem; border: 1px solid #8b816e; border-radius: 5px; background: var(--cream); color: var(--ink); font: 400 1rem var(--text); resize: vertical; }

.planner-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .38fr);
  align-items: start;
  gap: clamp(.85rem, 1.8vw, 1.6rem);
}

.route-card {
  --plate-paper: #fff8e9;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d0bea0;
  border-radius: 12px;
  background: var(--plate-paper);
}
.route-card.is-entering, [data-format-panel].is-entering { animation: rise .3s ease-out both; }
.route-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: clamp(.85rem, 2.4vw, 2.45rem);
  padding: clamp(1rem, 2.4vw, 2rem);
}
.route-card-title { min-width: 0; }
.route-card-title .eyebrow { margin-bottom: .5rem; }
.route-card-title h3 { font-size: clamp(1.95rem, 3.55vw, 3.45rem); line-height: 1.01; }
.route-card-title > p:last-child { margin-top: .56rem; max-width: 52ch; color: #5a4d3a; font-size: 1.02rem; }
.route-card-meta { margin-top: .6rem; color: #426048; font: 500 var(--caption-size)/1.44 var(--mono); }
.route-plate {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 5px solid #fff9ec;
  outline: 1px solid #cfb899;
  background: #e7d9bc;
  box-shadow: 0 8px 20px #38290f1e;
  transform: rotate(1.9deg);
}
.route-plate img, .route-checklist img, .coast-bridge img { width: 100%; height: 100%; object-fit: cover; }
.route-plate figcaption, .coast-bridge figcaption {
  position: absolute;
  bottom: .37rem;
  right: .37rem;
  padding: .2rem .4rem;
  border-radius: 3px;
  max-width: calc(100% - .74rem);
  background: #fff2db;
  color: #4a3b2c;
  font: 650 var(--caption-size)/1.35 var(--text);
}
.route-decisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 clamp(1rem, 2.4vw, 2rem) 1rem;
}
.route-decisions > div { padding: .85rem .92rem; border: 1px solid #d2d7bf; border-radius: 7px; background: #ecefdf; }
.route-decisions > div:last-child { border-color: #dec7a6; background: #f5e7cf; }
.route-decisions dt { display: flex; align-items: center; gap: .35rem; color: #3f5638; font-weight: 700; font-size: .99rem; line-height: 1.2; }
.route-decisions > div:last-child dt { color: #7b472c; }
.route-decisions dd { margin: .29rem 0 0; color: #4b4738; font-size: .96rem; line-height: 1.4; }
.route-detail { margin-inline: clamp(1rem, 2.4vw, 2rem); border-block: 1px solid #dfd0b7; }
.route-detail summary, .route-sources summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .55rem 0;
  color: var(--forest);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.route-detail summary::-webkit-details-marker, .route-sources summary::-webkit-details-marker { display: none; }
.route-detail summary span { flex: 1; }
.route-detail summary svg:last-child, .route-sources summary svg:last-child { transition: transform .2s ease; }
.route-detail[open] summary svg:last-child, .route-sources[open] summary svg:last-child { transform: rotate(180deg); }
.route-card-footer { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .35rem 1rem; padding: .42rem clamp(1rem, 2.4vw, 2rem) .7rem; }
.route-card-footer .button { min-height: 2.75rem; margin-block: .27rem .3rem; }
.route-sources { color: var(--muted); font-size: .95rem; }
.route-sources summary { width: fit-content; color: #67563c; font-size: .95rem; font-weight: 600; }
.route-sources ul { list-style: none; margin: 0 0 .45rem; padding: 0; }
.route-sources li + li { margin-top: .32rem; }
.route-sources a { display: inline-flex; align-items: center; gap: .3rem; text-underline-offset: .18em; }

.journey-track {
  display: grid;
  grid-template-columns: repeat(var(--stops), minmax(0, 1fr));
  gap: 0;
  margin: 1.25rem clamp(1rem, 2.4vw, 2rem) 1rem;
  padding: 0;
  list-style: none;
}
.journey-stop {
  position: relative;
  min-width: 0;
  padding: .15rem clamp(.55rem, 1.5vw, 1.3rem) 1rem 0;
}
.journey-stop:not(:last-child)::after {
  position: absolute;
  top: 1.18rem;
  left: 1.25rem;
  right: -.75rem;
  border-top: 1px dashed #aa8652;
  content: "";
}
.journey-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .37rem;
  padding: .34rem .55rem;
  border-radius: 40px;
  background: #e8d5ab;
  color: #594021;
  font: 500 var(--caption-size)/1.25 var(--mono);
  text-transform: uppercase;
}
.journey-marker--binoculars { color: #2c4b35; background: #dbe5cc; }
.journey-marker--plane, .journey-marker--foot { color: #284d50; background: #d5e7da; }
.journey-stop h4 { margin: .64rem 0 .62rem; font: 500 clamp(1.08rem, 1.8vw, 1.55rem)/1.1 var(--title); letter-spacing: -.033em; }
.journey-stop dl { display: grid; gap: .66rem; }
.journey-stop dt { display: flex; align-items: center; gap: .37rem; color: #644a2d; font-size: .88rem; font-weight: 700; }
.journey-stop dd { margin: .16rem 0 0; color: #554b3a; font-size: .94rem; line-height: 1.38; }
.route-detail .journey-track { margin: .65rem 0 0; }

.route-checklist {
  border: 1px solid #c7b28c;
  border-radius: 11px;
  background: #eee2c6;
  overflow: hidden;
}
.route-checklist header { padding: 0 1rem .8rem; }
.route-checklist header figure { aspect-ratio: 2.35 / 1; margin-inline: -1rem; overflow: hidden; border-bottom: 1px solid #d7c7a7; background: #e0d0ae; }
.route-checklist header img { object-position: center 43%; }
.route-checklist h3 { margin-top: .78rem; font-size: clamp(1.6rem, 2.3vw, 2.2rem); }
.route-checklist header p { margin-top: .32rem; color: #4e4637; font-size: .98rem; line-height: 1.4; }
.checklist-status { display: grid; gap: .17rem; margin-top: .54rem; }
.checklist-status progress { width: 100%; height: .48rem; border: 0; accent-color: #536747; }
.checklist-status progress::-webkit-progress-bar { background: #dfcfad; border-radius: .4rem; }
.checklist-status progress::-webkit-progress-value { background: #526744; border-radius: .4rem; }
.checklist-status progress::-moz-progress-bar { background: #526744; border-radius: .4rem; }
.checklist-status output { color: #544831; font: 500 var(--caption-size)/1.35 var(--mono); }
.route-checklist ul { margin: 0; padding: 0; list-style: none; }
.route-checklist li { border-top: 1px solid #d5c49f; }
.checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .46rem;
  padding: .73rem .85rem .8rem;
  cursor: pointer;
  min-height: 44px;
}
.checklist-item:focus-within { outline: 3px solid #80481e; outline-offset: -4px; }
.checklist-item:hover { background: #f4ead2; }
.checklist-item input { grid-area: 1 / 3; width: 1.12rem; height: 1.12rem; margin: .18rem 0 0; accent-color: #526744; cursor: pointer; }
.checklist-icon { grid-area: 1 / 1; color: #7a5435; }
.checklist-copy { grid-area: 1 / 2; color: #514635; font-size: .98rem; line-height: 1.4; }
.checklist-copy strong { display: block; margin-bottom: .22rem; color: #382c20; }
.checklist-item input:checked ~ .checklist-icon { color: #345741; }

.format-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.8rem), 1fr)); gap: .6rem; margin-bottom: .9rem; }
.format-controls button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: .05rem .58rem;
  min-width: 0;
  min-height: 4.35rem;
  padding: .65rem .85rem;
  border: 1px solid #c9b38c;
  border-radius: 7px;
  background: #f6ead0;
  color: #60462c;
  text-align: left;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.format-controls button:hover { background: #eddbb5; }
.format-controls button[aria-pressed="true"] { background: var(--forest); color: #fff0d7; border-color: var(--forest); }
.format-controls button strong { grid-area: 1 / 1; font: 500 clamp(1.35rem, 2.5vw, 2.06rem)/1 var(--title); letter-spacing: -.04em; }
.format-controls button span { grid-area: 2 / 1; margin-top: .23rem; font-size: .95rem; }
.format-controls button svg { grid-area: 1 / 2 / 3; align-self: center; }
.route-examples .route-plate { aspect-ratio: 1.88 / 1; }
.route-examples .route-card-head { padding-bottom: .7rem; }
[data-format-panel] + [data-format-panel] { margin-top: 1rem; }
[data-format-panel][hidden] + [data-format-panel] { margin-top: 0; }

.map-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: .55rem; }
.map-links .text-link { margin: 0; }
.season-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.season-rain { --status: #accbc5; --status-paper: #dce9e3; }
.season-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .52rem; }
.season-actions .button { min-height: 2.75rem; font-size: .92rem; }

.coast-bridge {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  background: #244f50;
  color: #fff3dc;
}
.coast-bridge::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: repeating-radial-gradient(ellipse at -25% 110%, transparent 0 19px, #c3e6d51d 20px 21px, transparent 22px 35px);
}
.coast-bridge :focus-visible { outline-color: #f8ce8f; }
.coast-bridge-main { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.coast-bridge-main figure { position: relative; min-height: 100%; background: #6c9591; overflow: hidden; }
.coast-bridge-main img { position: absolute; inset: 0; }
.coast-bridge-copy { align-content: center; padding: clamp(1.3rem, 3.8vw, 3.7rem); }
.coast-bridge-copy .eyebrow { color: #c7e4d7; margin-bottom: .6rem; }
.coast-bridge-copy h2 { color: #fff3dc; }
.coast-bridge-copy > p:not(.eyebrow) { margin-block: .8rem 1.3rem; color: #edf0da; max-width: 49ch; font-size: 1.09rem; }
.coast-bridge-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.coast-bridge-links li { min-width: 0; border-top: 1px solid #acc7ab73; }
.coast-bridge-links li + li { border-left: 1px solid #acc7ab73; }
.coast-bridge-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; min-height: 5rem; padding: .8rem clamp(.9rem, 2.6vw, 2.2rem); text-decoration: none; transition: background .2s ease; }
.coast-bridge-links a:hover { background: #376265; }
.coast-bridge-links a > span:nth-child(2) > span { display: block; color: #e5ebd4; font-size: .93rem; }
.coast-link-icon { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border: 1px solid #c1d5b286; border-radius: 50%; color: #d2e3c5; }

.article-planning-link .text-link { gap: .42rem; margin-top: .22rem; }
.reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.reading-grid article { min-width: 0; padding: 1rem 1rem 1.15rem; border: 1px solid var(--line); border-top: 2px solid #9c7651; border-radius: 8px; background: var(--cream); }
.reading-grid article > svg { color: var(--accent); }
.reading-grid h3 { margin: .56rem 0 .42rem; font-size: clamp(1.3rem, 2.05vw, 1.88rem); }
.reading-grid p { color: var(--muted); font-size: 1rem; line-height: 1.42; }

@media (max-width: 1000px) {
  .planner-cover { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .route-detail .journey-track { grid-template-columns: minmax(0, 1fr); }
  .route-detail .journey-stop { padding: .12rem 0 1rem 1.2rem; }
  .route-detail .journey-stop:not(:last-child)::after { inset: 1rem auto -.15rem .2rem; border-top: 0; border-left: 1px dashed #aa8652; }
  .route-detail .journey-stop:not(:last-child)::before { position: absolute; left: 0; top: .86rem; width: .45rem; height: .45rem; border-radius: 50%; background: #a98150; content: ""; }
}

@media (max-width: 800px) {
  .planner-cover, .planner-result-grid { grid-template-columns: minmax(0, 1fr); }
  .planner-map { border-left: 0; border-top: 1px solid #a9a88c; }
  .route-checklist header figure { aspect-ratio: 3.5 / 1; }
  .route-checklist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-checklist li:nth-child(even) { border-left: 1px solid #d5c49f; }
  .route-detail .journey-track { grid-template-columns: minmax(0, 1fr); }
  .season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-actions { justify-content: flex-start; }
  .coast-bridge-main { grid-template-columns: minmax(0, 1fr); }
  .coast-bridge-main figure { min-height: 0; aspect-ratio: 1.85 / 1; }
  .journey-track { grid-template-columns: minmax(0, 1fr); }
  .journey-stop { padding: .12rem 0 1rem 1.2rem; }
  .journey-stop:not(:last-child)::after { inset: 1rem auto -.15rem .2rem; border-top: 0; border-left: 1px dashed #aa8652; }
  .journey-stop:not(:last-child)::before { position: absolute; left: 0; top: .86rem; width: .45rem; height: .45rem; border-radius: 50%; background: #a98150; content: ""; }
  .reading-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 550px) {
  .planner-section-heading { align-items: flex-start; }
  .planner-controls { padding: clamp(12px, 4.25vw, 1.2rem); }
  .plan-field select { min-height: 44px; padding-left: 9px; padding-right: 28px; font-size: 1rem; }
  .plan-field .select-shell svg { margin-right: 8px; width: 15px; }
  .plan-season { padding: .62rem clamp(10px, 3vw, .85rem) .72rem; }
  .origin-symbol { width: 1.45rem; }
  .origin-symbol svg { width: .86rem; height: .86rem; }
  .map-places { font-size: 19px; }
  .planner-result-head { margin-top: 1.3rem; }
  .route-card-head { grid-template-columns: minmax(0, 1fr); }
  .route-plate { transform: none; aspect-ratio: 2 / 1; }
  .route-decisions, .route-checklist ul, .season-grid, .coast-bridge-links { grid-template-columns: minmax(0, 1fr); }
  .route-checklist li:nth-child(even), .coast-bridge-links li + li { border-left: 0; }
  .format-controls { gap: .35rem; }
  .format-controls button { grid-template-columns: minmax(0, 1fr); min-height: 3.75rem; padding: .48rem .43rem; }
  .format-controls button svg { display: none; }
  .format-controls button strong { font-size: clamp(1.2rem, 6vw, 1.55rem); }
  .coast-bridge-links a { min-height: 4.65rem; }
  .season-board, .season-note { padding-inline: clamp(12px, 4.3vw, 1.35rem); }
}

@container (max-width: 28rem) {
  .origin-controls {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .5rem .65rem .7rem;
  }
  .origin-marker {
    position: static;
    transform: none;
    padding: .28rem .58rem .28rem .32rem;
    font-size: .95rem;
  }
  .planner-map.is-interactive .map-cities { visibility: visible; }
}