@font-face { font-family: 'Wedding Serif'; src: url('assets/fonts/stationery-serif.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Wedding Serif'; src: url('assets/fonts/stationery-serif-italic.otf') format('opentype'); font-style: italic; font-weight: 400; font-display: swap; }
:root {
  --paper: #faf4e7;
  --paper-deep: #efe5cd;
  --ink: #272822;
  --muted: #756d5c;
  --burgundy: #802c3c;
  --red: #a9473f;
  --green: #3c5948;
  --gold: #a78348;
  --line: #9c79534a;
  --serif: 'Wedding Serif', Georgia, 'Times New Roman', serif;
  --shadow: 0 12px 35px #5143340a;
}
body { display: flow-root; position: relative; background-color: var(--paper); background-image: url('assets/paper-grain.svg'); color: var(--ink); font-family: var(--serif); }
body::before { content: ''; position: absolute; inset: 12px; border: 1px solid #98734e91; outline: 1px solid #98734e50; outline-offset: -5px; pointer-events: none; z-index: 0; }
.design-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.topbar { position: relative; z-index: 1; border: 0; padding: 27px 70px 0; color: var(--ink); background: transparent; }
.topbar h1.signature { width: clamp(270px, 32vw, 375px); margin: 0; font-size: 1rem; line-height: 1; }
.signature > svg { display: block; width: 100%; height: auto; overflow: hidden; }
.signature:focus { outline: none; }
.header-art { fill: none; stroke: #282621; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; position: absolute; width: 83px; height: 83px; top: 82px; pointer-events: none; }
.header-art-left { left: calc(50% - 306px); transform: rotate(-7deg); }
.header-art-right { right: calc(50% - 306px); transform: rotate(5deg); }
main { position: relative; width: min(1440px, calc(100vw - 76px)); margin: 5px auto 45px; }
.hero { margin: 0 0 30px; padding-bottom: 0; }
.hero h2 { color: var(--ink); font-family: var(--serif); font-size: 1.2rem; line-height: 1.65; }
.hero h2 strong { color: var(--burgundy); }
.hero > p { margin-top: 3px; color: #5f614f; font-family: var(--serif); font-size: 1rem; font-style: italic; }
.hero-meta { flex-direction: row; justify-content: center; gap: 12px; margin-top: 15px; color: #655d4d; font-size: .75rem; letter-spacing: .17em; }
.hero-meta > span::after { content: '✧'; display: inline-block; margin-left: 12px; color: var(--gold); font-size: 1rem; }
.station-board { position: relative; grid-template-columns: 290px minmax(0,1fr); border: 1px solid #977650ad; border-radius: 1px; background: transparent; overflow: visible; box-shadow: none; }
.station-board::before { content: ''; position: absolute; inset: -5px; border: 1px solid #9776505c; pointer-events: none; }
.sidebar { padding: 24px 21px 14px; border-right: 3px double #9c795388; background: #fff5de30; }
.eyebrow { color: var(--burgundy); font-size: .75rem; letter-spacing: .18em; font-family: var(--serif); font-weight: 400; }
.sidebar h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin: 12px 0 9px; color: #2d2b25; }
.sidebar p { font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: #605b4f; }
.stop-list { padding-top: 18px; gap: 1px; }
.stop-button { grid-template-columns: 27px 37px minmax(0,1fr) 11px; gap: 9px; min-height: 80px; padding: 10px 3px; border-radius: 0; border: 1px solid transparent; color: var(--ink); font-family: var(--serif); }
.stop-button .badge { width: 25px; height: 25px; font-family: var(--serif); font-size: .9375rem; font-weight: 400; }
.stop-button .route-number { display: none; }
.stop-button .stop-number { display: inline; }
.stop-illustration { width: 37px; height: 48px; overflow: visible; fill: none; stroke: #282621; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stop-copy strong { font-size: 1.0625rem; line-height: 1.3; font-weight: 400; }
.stop-copy > span { margin-top: 4px; font-size: .8125rem; line-height: 1.35; color: #665d4e; font-style: italic; }
.stop-button .jump { color: var(--red); font-size: 1rem; }
.stop-button.active { background: #e8ddc653; border-color: #a1855b66; }
.stop-button:hover, .stop-button:focus-visible { background: #ebe1cdb3; border-color: #9c79537a; transform: none; }
.sidebar-footer { display: flex; align-items: center; gap: 14px; border-top: 1px solid #9c79536b; margin-top: 17px; padding-top: 19px; }
.sidebar-footer svg { width: 22px; height: 22px; flex: none; }
.sidebar-footer span { color: #6f604a; font: italic .9375rem/1.5 var(--serif); }
.map-top { min-height: 45px; padding: 9px 16px; border-bottom: 1px solid #9c79534f; color: #605741; font-size: .75rem; background: #fff7e240; letter-spacing: .13em; }
.map-tools { font-family: var(--serif); }
.line-toggle { font-family: var(--serif); font-size: .875rem; color: var(--burgundy); text-underline-offset: 3px; }
.map-scroll { background: #557783; }
/* Preserve the exact colors of the supplied city and subway artwork. */
.map-svg > image { filter: none; }
.map-wrap { background: #557783; }
.marker-pin { border-color: #fff8e8; box-shadow: 0 2px 4px #29261f66; }
.marker-pin span { font-family: var(--serif); font-size: 1.0625rem; font-weight: 400; }
.marker.active .marker-pin { outline-color: #f5eacba8; }
.marker-label { top: 37px; border: 1px solid #9e7851; background: #fff4de; box-shadow: 1px 2px 0 #78533233; border-radius: 0; padding: 7px 12px; font: italic 1rem/1.2 var(--serif); color: #30291e; transform: translateX(-50%) rotate(-3deg); }
.marker:nth-of-type(even) .marker-label { transform: translateX(-50%) rotate(2deg); }
.train { filter: drop-shadow(0 3px 3px #28221f55); }
.legend { background: #f5eddc; border-color: #9c795347; padding: 11px 12px 9px; }
.route-key { font-family: var(--sans); }
.legend > span:last-child { font-family: var(--serif); font-size: .6875rem; letter-spacing: .07em; color: #6e624d; text-transform: uppercase; }
.map-status { background: #fff7e340; color: #625b4c; border-color: #9c795347; font-size: .875rem; padding-block: 10px; min-height: 46px; height: auto; line-height: 1.45; }
#stopCounter { color: #756a55; font-size: .75rem; }
footer { margin-top: 30px; padding-inline: 5px; color: #81745e; font-family: var(--serif); }
footer .love { color: var(--burgundy); font-size: 1.25rem; font-style: italic; }
footer .review-link { color: inherit; text-decoration: none; padding-block: 12px; }
footer .review-link:hover { text-decoration: underline; text-underline-offset: 4px; }
footer .review-link:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 5px; }
/* All panels share the same stationery, while retaining their existing controls. */
.stop-dialog { border: 1px solid #9a7855; border-radius: 2px; background-color: #fbf4e5; background-image: url('assets/paper-grain.svg'); box-shadow: 0 20px 80px #26231f55; }
.stop-dialog::backdrop, .welcome-dialog::backdrop { background: #252e2b70; backdrop-filter: blur(4px); }
.dialog-top { background: #f7eedc; border-bottom: 3px double #9c795377; padding: 12px 24px; }
.dialog-top span { font-family: var(--serif); color: var(--burgundy); font-size: .75rem; letter-spacing: .13em; }
.close-panel { border-color: #a08460; color: #743541; background: transparent; border-radius: 0; font-family: var(--serif); }
.stop-dialog .panel h3 { font-family: var(--serif); color: #323429; font-size: clamp(1.75rem,4vw,2.2rem); line-height: 1.2; letter-spacing: -.035em; }
.stop-dialog .panel p { color: #615c4e; font-family: var(--serif); line-height: 1.65; }
.primary, .secondary { font-family: var(--serif); border-radius: 2px; min-height: 44px; }
.primary { background: var(--burgundy); border-color: var(--burgundy); color: #fff8e8; font-weight: 400; }
.secondary { border-color: #a88b64; color: #704934; background: #fff7e5; font-weight: 400; }
button:focus-visible, input:focus-visible + .outfit-tile { outline: 2px solid var(--burgundy); outline-offset: 4px; }
.text-button { font-family: var(--serif); color: var(--burgundy); text-underline-offset: 3px; }
.welcome-dialog { width: min(525px,calc(100vw - 32px)); background-color: #faf1df; background-image: url('assets/paper-grain.svg'); border: 1px solid #997952; border-radius: 1px; outline: 1px solid #aa89556b; outline-offset: -7px; padding: 49px 38px 35px; }
.welcome-dialog::after { content: '✧'; display: block; color: var(--gold); font-size: 1.4rem; margin: 19px auto 0; }
.welcome-dialog .signature { width: min(290px,100%); margin: 7px auto 6px; }
.welcome-dialog p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; color: #5c584a; }
.welcome-dialog .eyebrow { color: #786548; font-size: .75rem; letter-spacing: .15em; }
.welcome-dialog .primary { padding-inline: 25px; }
.welcome-close { color: var(--burgundy); }
.hotel-card { border-color: #a7906666; border-radius: 1px; background: #fff8e750; }
.hotel-card:hover { background: #eee5cc; border-color: #9b7453; }
.hotel-card h4 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; color: #663341; }
.hotel-area { font-family: var(--serif); font-size: .75rem; letter-spacing: .12em; color: #71674f; }
.hotel-description { font-family: var(--serif); font-size: 1rem; color: #615c4e; }
.hotel-visit { font-family: var(--serif); font-style: italic; font-size: .9375rem; }
.photo-figure figcaption, .album-caption { font-family: var(--serif); color: #635c4d; }
.photo-upload { border-color: #b09b7680; background: #eee4cd70; border-radius: 1px; }
.photo-upload h4, .shared-album h4 { font-family: var(--serif); color: #663341; font-size: 1.5rem; }
.album-photo { border: 1px solid #b9a27b; background: #fff8e8; border-radius: 1px; padding: 10px 10px 2px; }
.album-photo img, .couple-photo { border-radius: 0; }
.photo-field { font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.photo-field textarea, .player-field input { background: #fffaf0; }
#photos .photo-status, #photos .photo-hint { font-family: var(--serif); color: #706956; font-size: .875rem; }
.leaderboard { border-color: #b29a7388; }
.leaderboard h4 { font-family: var(--serif); color: #663341; }
.leaderboard-list li:first-child:not(.leader-empty) { background: #eee4ce; }
.stop-dialog .prize-note { background: #eee4cd; color: var(--burgundy); }
.stop-dialog .move-button { font-family: var(--serif); border-color: #a98f69; color: #51382f; background: #fff6e4; }
@media (max-width:1100px) and (min-width:981px) {
  .station-board { grid-template-columns: 258px minmax(0,1fr); }
  .sidebar { padding-inline: 14px; }
  .stop-button { grid-template-columns: 25px 30px minmax(0,1fr) 9px; gap: 7px; }
  .stop-illustration { width: 30px; }
  .stop-copy strong { font-size: 1rem; }
}
@media (max-width:980px) {
  main { width: calc(100vw - 48px); }
  .sidebar { border-right: 0; border-top: 3px double #9c795388; padding: 22px; }
  .stop-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-top: 14px; }
  .stop-button { grid-template-columns: 27px 37px minmax(0,1fr); padding: 10px; min-height: 76px; gap: 10px; border-color: #a790664a; background: #fff7e533; }
  .stop-button .badge { background: var(--burgundy) !important; }
  .stop-illustration { width: 36px; height: 43px; }
  .stop-copy strong { font-size: 1.0625rem; }
  .stop-copy > span, .stop-button .jump { display: none; }
  .sidebar-footer { display: none; }
  .map-top { min-height: 46px; padding: 7px 12px; flex-wrap: nowrap; }
  .map-top > span { width: auto; margin: 0; flex: 1; }
  .map-tools { width: auto; flex-shrink: 0; }
  .map-tools > * { font-size: .875rem; }
  .map-mobile-toolbar { background: #f4ebd8; border-color: #9c79534a; }
  .map-mobile-toolbar button { background: #fff7e7; border-color: #a98a62; border-radius: 1px; font-family: var(--serif); }
  .map-hint { background: #faf2e1; color: #655e4c; font-family: var(--serif); }
  .marker-label { display: none; }
  .legend { padding: 10px; }
  .map-status { font-size: .875rem; }
}
@media (max-width:640px) {
  body::before { inset: 7px; outline-offset: -3px; border-color: #98734e70; }
  .topbar { padding: 27px 30px 0; }
  .topbar h1.signature { width: 255px; max-width: calc(100vw - 88px); }
  .header-art { width: 38px; height: 52px; top: 72px; }
  .header-art-left { left: 16px; }
  .header-art-right { right: 16px; }
  main { width: calc(100vw - 34px); margin-top: 7px; margin-bottom: 26px; }
  .hero { margin-bottom: 24px; padding-inline: 8px; }
  .hero h2 { font-size: 1.0625rem; line-height: 1.5; }
  .hero > p { font-size: .9375rem; margin-top: 6px; }
  .hero-meta { font-size: .6875rem; gap: 10px; margin-top: 15px; letter-spacing: .13em; }
  .hero-meta > span::after { margin-left: 10px; font-size: .8125rem; }
  .station-board::before { inset: -3px; }
  .map-top { gap: 7px; }
  .map-top > span { font-size: .6875rem; letter-spacing: .09em; line-height: 1.35; }
  .map-tools > * { font-size: .8125rem; }
  .sidebar { padding: 19px 12px 13px; }
  .sidebar h2 { font-size: 1.375rem; margin-top: 0; }
  .sidebar p { font-size: .9375rem; }
  .stop-list { gap: 6px; }
  .stop-list > li:first-child { grid-column: 1/-1; }
  .stop-button { grid-template-columns: 22px 30px minmax(0,1fr); gap: 7px; padding: 9px 6px; min-height: 80px; }
  .stop-button .badge { width: 22px; height: 22px; font-size: .875rem; }
  .stop-illustration { width: 30px; height: 40px; }
  .stop-copy strong { font-size: .9375rem; line-height: 1.35; overflow-wrap: normal; }
  .stop-list > li:first-child .stop-button { min-height: 62px; }
  .map-status { font-size: .8125rem; gap: 8px; }
  #stopCounter { font-size: .6875rem; }
  .dialog-top { padding: 10px 13px; gap: 10px; }
  .dialog-top span { font-size: .6875rem; }
  .close-panel { padding: 8px 10px; font-size: .8125rem; }
  .welcome-dialog { padding: 45px 27px 25px; }
  .welcome-dialog .eyebrow { font-size: .6875rem; letter-spacing: .1em; }
  .welcome-dialog p { font-size: 1rem; }
  footer { margin-top: 27px; font-size: .6875rem; }
}
@media (max-width:370px) {
  .stop-button { grid-template-columns: 23px minmax(0,1fr); gap: 8px; }
  .stop-illustration { display: none; }
  .stop-list > li:first-child .stop-illustration { display: block; }
  .stop-list > li:first-child .stop-button { grid-template-columns: 23px 30px minmax(0,1fr); }
}

/* The user-supplied map is displayed directly, without repainting or recoloring. */
.map-scroll, .map-wrap { aspect-ratio: 1183 / 921; }
.map-scroll, .map-wrap { background: #faf1df; }
.map-svg > image { filter: none; }
.marker.art-marker { transform: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 4px; background: transparent; padding: 0; box-shadow: none; }
.marker.art-marker:hover { box-shadow: inset 0 0 0 2px #802c3c80; background: #fff7e415; }
.marker.art-marker:focus-visible { outline: 3px solid #802c3c; outline-offset: 1px; background: #fff7e425; }
.marker.art-marker.active { background: transparent; }
.map-status { border-top: 1px solid #9c795347; }
/* Keep the wheels on the route, including the smaller phone sprite. */
.train { transform: translate(-50%, -94%); }

/* Weekend itinerary and answers share the site's stationery typography. */
.weekend-day {padding:22px 0;border-top:3px double #a68b646b;}
.weekend-day h4 {font:1.5rem/1.4 var(--serif);color:var(--burgundy);margin:0 0 12px;}
.weekend-day time {display:block;font-size:1rem;color:#72654e;margin-top:6px;}
.weekend-venue {font-style:italic;font-size:1.3rem;}
.faq-list {margin:24px 0 0;}
.faq-list dt {border-top:3px double #a68b646b;padding-top:22px;font:1.35rem/1.4 var(--serif);color:var(--burgundy);}
.faq-list dd {margin:10px 0 24px;line-height:1.7;}
.faq-list a {color:var(--burgundy);text-underline-offset:3px;overflow-wrap:anywhere;}
.updated-map-label polygon {fill:#fff0d3;stroke:#b29466;stroke-width:2;}
.updated-map-label text {font:italic 21px var(--serif);fill:#29291f;text-anchor:middle;}