/* Layout: an old-world travel journal. Full-bleed photographs open each page; below, the reader turns parchment pages framed by double rules, antique sea charts with gold pins, timetable-style tables and luggage-tag facts. Romance up top, clarity underneath. */
:root {
  --parchment: #f5f3ee;
  --vellum: #fdfcf9;
  --ink: #2a1f16;
  --ink-2: #4e4439;
  --ink-3: #7d7368;
  --rule: #dcd6ca;
  --oxblood: #7b2230;
  --gold: #9a7a45;
  --sea: #23465f;
  --verdigris: #3d6b62;
  --ok: #3d6b4c; --ok-wash: #e7eee8;
  --warn: #8c4a14; --warn-wash: #f4e9e2;
  --chart: #e6e9e6;
  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --shadow: 0 1px 0 rgba(42,31,22,.05), 0 10px 30px -12px rgba(42,31,22,.28);
  --r: 3px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --parchment: #12161c; --vellum: #1a1f27; --ink: #efe5cf; --ink-2: #cdbd9f; --ink-3: #9d8d72; --rule: #3a3428;
  --oxblood: #d98a93; --gold: #d6b06a; --sea: #9cc0d8; --verdigris: #8fc0b4; --ok: #9ccaa8; --ok-wash: #1d2a22; --warn: #e8b07a; --warn-wash: #2e2216;
  --chart: #e6e9e6; --shadow: 0 10px 30px -12px rgba(0,0,0,.7); color-scheme: dark; } }
:root[data-theme="dark"] {
  --parchment: #12161c; --vellum: #1a1f27; --ink: #efe5cf; --ink-2: #cdbd9f; --ink-3: #9d8d72; --rule: #3a3428;
  --oxblood: #d98a93; --gold: #d6b06a; --sea: #9cc0d8; --verdigris: #8fc0b4; --ok: #9ccaa8; --ok-wash: #1d2a22; --warn: #e8b07a; --warn-wash: #2e2216;
  --chart: #e6e9e6; --shadow: 0 10px 30px -12px rgba(0,0,0,.7); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { margin: 0; background: var(--parchment); color: var(--ink); font-family: var(--f-body); font-size: 1.2rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--oxblood); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: 1.5rem; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; display: grid; gap: .45em; }
li::marker { color: var(--gold); }
.caps { font-family: var(--f-caps); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; }
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 48rem; }

/* header over the photo */
.top { position: absolute; inset: 0 0 auto; z-index: 5; color: #fbf6ea; padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.6rem; padding-block: 1.1rem; }
.brand { color: inherit; text-decoration: none; display: grid; line-height: 1; gap: .25rem; }
.brand b { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.75rem; }
.brand small { font-family: var(--f-caps); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; font-family: var(--f-caps); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; }
.nav a { color: inherit; text-decoration: none; padding-block: .3rem; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: #d6b06a; }

/* hero photograph */
.hero { position: relative; min-height: clamp(30rem, 72vh, 46rem); display: grid; align-items: end; color: #fbf6ea; overflow: hidden; background: #2a1f16; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,8,.55) 0%, rgba(20,14,8,.05) 30%, rgba(20,14,8,.15) 55%, rgba(20,14,8,.78) 100%); }
.hero .wrap { position: relative; z-index: 2; padding-block: 7rem 3.6rem; display: grid; gap: .9rem; }
.hero .crumbs { font-family: var(--f-caps); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: .5rem; opacity: .92; }
.hero .crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(251,246,234,.4); }
.hero h1 { max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero .sub { font-family: var(--f-display); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.9rem); max-width: 34ch; line-height: 1.3; }
.credit { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); bottom: 8px; z-index: 3; font-size: .72rem; color: rgba(251,246,234,.78); max-width: 60%; text-align: right; }
.credit a { color: inherit; }
.hero.short { min-height: clamp(22rem, 50vh, 30rem); }

/* answer block with drop cap */
.answer { background: var(--vellum); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px; padding: 1.6rem 1.8rem; margin-top: -2.4rem; position: relative; z-index: 3; box-shadow: var(--shadow); display: grid; gap: .5rem; max-width: 56rem; }
.answer .caps { color: var(--oxblood); }
.answer p { font-size: 1.32rem; line-height: 1.55; }
.answer p::first-letter { font-family: var(--f-display); font-weight: 600; float: left; font-size: 3.6em; line-height: .78; padding: .08em .1em 0 0; color: var(--oxblood); }

/* luggage-tag facts */
.tags { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.tag { position: relative; background: var(--vellum); border: 1px solid var(--rule); padding: 1rem 1.1rem 1rem 2.4rem; display: grid; gap: .2rem; align-content: start; min-width: 0; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--parchment); }
.tag .k { font-family: var(--f-caps); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.tag .v { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.tag .v.small { font-family: var(--f-body); font-size: 1.05rem; font-weight: 500; line-height: 1.35; }
.seal { display: inline-grid; place-items: center; font-family: var(--f-caps); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: .35rem .7rem; border-radius: 99px; color: #fbf6ea; background: var(--sea); width: fit-content; }
.seal.tender { background: #8c4a14; }
.seal.dock { background: #3d6b4c; }
.seal.river { background: var(--sea); }

/* jump bar */
.jump { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--parchment); border-bottom: 1px solid var(--rule); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--parchment); }
.jump .wrap { display: flex; gap: .4rem 1.6rem; overflow-x: auto; padding-block: .8rem; font-family: var(--f-caps); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 600; scrollbar-width: none; }
.jump a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.jump a:hover { color: var(--oxblood); }

main { display: grid; gap: 4rem; padding-block: 0 5rem; }
.sec { display: grid; gap: 1.3rem; }
.sec > header { display: grid; gap: .35rem; justify-items: start; }
.sec > header .caps { color: var(--gold); }
.sec > header::after { content: ""; width: 9rem; height: 14px; margin-top: .3rem; background: no-repeat left center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 14'%3E%3Cpath d='M0 7h70M110 7h70' stroke='%239a7a45' stroke-width='1'/%3E%3Cpath d='M90 1l6 6-6 6-6-6z' fill='none' stroke='%239a7a45'/%3E%3Ccircle cx='76' cy='7' r='1.6' fill='%239a7a45'/%3E%3Ccircle cx='104' cy='7' r='1.6' fill='%239a7a45'/%3E%3C/svg%3E"); }
.lead { color: var(--ink-2); max-width: 46rem; font-size: 1.22rem; }

/* antique chart with pins */
.chart { position: relative; width: 100%; overflow: hidden; border: 1px solid #5a432a; outline: 1px solid var(--rule); outline-offset: 5px; background: var(--chart); box-shadow: var(--shadow); }
.chart img { width: 100%; height: 100%; object-fit: cover; }
.pin { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; display: grid; place-items: center; text-decoration: none; z-index: 2; }
.pin::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #7b2230; border: 1.5px solid #fdfcf9; box-shadow: 0 0 0 1px #5a432a; }
.pin.home::before { width: 11px; height: 11px; border-radius: 1px; transform: rotate(45deg); background: #23465f; }
.pin.here::before { width: 15px; height: 15px; background: #9d7631; box-shadow: 0 0 0 2px #5a432a, 0 0 0 8px rgba(157,118,49,.25); }
.pin span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--f-caps); font-size: .62rem; letter-spacing: .08em; font-weight: 700; color: #3a2a1a; background: rgba(252,251,247,.92); padding: .05rem .3rem; border: 1px solid rgba(90,67,42,.35); opacity: 0; pointer-events: none; transition: opacity .15s; }
.pin span.l { left: auto; right: 15px; }
.pin.show span, .pin:hover span, .pin:focus span { opacity: 1; }
.pin:hover, .pin:focus { z-index: 5; }
.chart .cartouche { position: absolute; left: 3.5%; top: 4%; background: rgba(252,251,247,.95); border: 1px solid #5a432a; outline: 1px solid #5a432a; outline-offset: 3px; padding: .55rem .9rem; color: #3a2a1a; font-family: var(--f-display); font-style: italic; font-size: clamp(.95rem, 2vw, 1.35rem); line-height: 1.15; z-index: 3; }
.chart .cartouche small { display: block; font-family: var(--f-caps); font-style: normal; font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .2rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: 1rem; color: var(--ink-2); align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #7b2230; border: 1.5px solid #fdfcf9; box-shadow: 0 0 0 1px #5a432a; margin-right: .45rem; vertical-align: middle; }
.legend i.home { border-radius: 1px; transform: rotate(45deg); background: #23465f; }
.chartrow { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 900px) { .chartrow { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

/* timetable */
.tw { overflow-x: auto; background: var(--vellum); border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; font-size: 1.06rem; font-variant-numeric: oldstyle-nums tabular-nums; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px dotted var(--rule); vertical-align: top; }
thead th { font-family: var(--f-caps); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom: 2px solid var(--ink); white-space: nowrap; background: transparent; }
tbody tr:last-child td { border-bottom: 0; }
td.way { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; min-width: 10rem; }
td.way a { color: var(--ink); text-decoration-color: var(--gold); }

/* options */
.opts { display: grid; gap: .8rem; }
details.opt { background: var(--vellum); border: 1px solid var(--rule); }
details.opt > summary { list-style: none; cursor: pointer; padding: 1.05rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; }
details.opt > summary::-webkit-details-marker { display: none; }
details.opt > summary h3 { font-size: 1.4rem; }
details.opt > summary .meta { grid-column: 1; font-size: 1rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
details.opt > summary .meta b { color: var(--ink); font-weight: 600; }
details.opt > summary::after { content: "+"; grid-row: 1 / span 2; grid-column: 2; font-family: var(--f-display); font-size: 2rem; color: var(--gold); line-height: 1; }
details.opt[open] > summary::after { content: "−"; }
details.opt .body { padding: 0 1.25rem 1.25rem; display: grid; gap: .8rem; }
.steps { list-style: none; padding: 0; counter-reset: s; gap: .65rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; }
.steps li::before { content: counter(s, upper-roman); font-family: var(--f-caps); font-size: .78rem; font-weight: 700; color: var(--oxblood); border: 1px solid var(--rule); border-radius: 50%; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--parchment); }
.note { font-size: 1rem; color: var(--ink-3); font-style: italic; }

/* journey ticket */
.ticket { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--vellum); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.ticket > div { padding: 1.1rem 1.2rem; border-right: 1px dashed var(--rule); display: grid; gap: .25rem; align-content: start; min-width: 0; }
.ticket > div:last-child { border-right: 0; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(120,120,120,.06) 8px 9px); }
.ticket .k { font-family: var(--f-caps); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ticket .v { font-family: var(--f-display); font-size: 1.55rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.ticket .s { font-size: .98rem; color: var(--ink-3); }
@media (max-width: 700px) { .ticket { grid-template-columns: 1fr 1fr; } .ticket > div:nth-child(2) { border-right: 0; } .ticket > div:nth-child(-n+2) { border-bottom: 1px dashed var(--rule); } .ticket .v { font-size: 1.25rem; } }

/* cards, sights */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.1rem; }
.card { background: var(--vellum); border: 1px solid var(--rule); padding: 1.3rem 1.35rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.card h3 { font-size: 1.55rem; }
.card p { color: var(--ink-2); }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: 1rem; border-top: 1px dotted var(--rule); padding-top: .7rem; }
.facts dt { font-family: var(--f-caps); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: .25rem; }
.facts dd { margin: 0; min-width: 0; }

/* day plan */
.day { list-style: none; padding: 0; gap: 0; }
.day li { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; padding-bottom: 1.1rem; position: relative; }
.day li::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); border: 1.5px solid var(--gold); background: var(--parchment); margin-top: .5rem; justify-self: center; position: relative; z-index: 1; }
.day li::after { content: ""; position: absolute; left: calc(1rem - .5px); top: 1.1rem; bottom: -.2rem; border-left: 1px dashed var(--gold); }
.day li:last-child::after { display: none; }
.day li:last-child::before { background: var(--oxblood); border-color: var(--oxblood); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.1rem; }
.panel { padding: 1.3rem 1.4rem; display: grid; gap: .7rem; align-content: start; min-width: 0; border: 1px solid var(--rule); background: var(--vellum); }
.panel h3 { font-family: var(--f-caps); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.panel.bad { background: var(--warn-wash); border-color: transparent; } .panel.bad h3 { color: var(--warn); }
.panel.good { background: var(--ok-wash); border-color: transparent; } .panel.good h3 { color: var(--ok); }
.flag { border: 1px solid var(--warn); background: var(--warn-wash); padding: 1rem 1.2rem; display: grid; gap: .3rem; font-size: 1.05rem; max-width: 56rem; }
.flag b { font-family: var(--f-caps); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); }

details.src { border-top: 1px solid var(--rule); padding-top: 1.1rem; font-size: 1rem; color: var(--ink-3); }
details.src summary { cursor: pointer; font-family: var(--f-caps); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
details.src .in { display: grid; gap: .8rem; margin-top: .8rem; }

/* postage-stamp photo cards */
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem; }
.stamp { background: var(--vellum); padding: 10px 10px 14px; border: 1px solid var(--rule); outline: 1px dashed var(--rule); outline-offset: -5px; text-decoration: none; color: var(--ink); display: grid; gap: .55rem; align-content: start; box-shadow: var(--shadow); transition: transform .2s; }
.stamp:hover { transform: translateY(-3px) rotate(-.4deg); }
.stamp img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.stamp .n { font-family: var(--f-display); font-size: 1.45rem; font-weight: 600; line-height: 1.1; padding-inline: .2rem; }
.stamp .s { font-family: var(--f-caps); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-inline: .2rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.stamp:hover .n { color: var(--oxblood); }
.stamp[hidden] { display: none; }

/* listing tools */
.tools { display: grid; gap: .9rem; }
.find { width: 100%; max-width: 32rem; font: inherit; font-size: 1.15rem; padding: .85rem 1.1rem; border: 1px solid var(--rule); background: var(--vellum); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-family: var(--f-caps); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: .5rem .95rem; border: 1px solid var(--rule); background: var(--vellum); color: var(--ink-2); cursor: pointer; text-decoration: none; border-radius: 99px; }
.chip:hover { border-color: var(--gold); color: var(--oxblood); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }

/* home */
.home .hero { min-height: clamp(34rem, 88vh, 54rem); }
.home .hero .wrap { padding-bottom: 6.5rem; }
.home .hero h1 { font-size: clamp(3.2rem, 9vw, 7rem); max-width: 12ch; }
.searchcard { background: var(--vellum); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px; box-shadow: var(--shadow); padding: 1.5rem; display: grid; gap: .9rem; margin-top: -4rem; position: relative; z-index: 4; max-width: 54rem; }
.searchcard label { font-family: var(--f-display); font-size: 1.6rem; font-weight: 600; font-style: italic; }
.searchcard input { width: 100%; font: inherit; font-size: 1.25rem; padding: 1rem 1.15rem; border: 1px solid var(--ink-3); background: var(--parchment); color: var(--ink); }
.searchcard input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.results { list-style: none; padding: 0; display: grid; gap: 0; border: 1px solid var(--rule); }
.results:empty { display: none; }
.results a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .7rem 1rem; text-decoration: none; color: var(--ink); border-bottom: 1px dotted var(--rule); background: var(--vellum); }
.results li:last-child a { border-bottom: 0; }
.results a:hover, .results a:focus { background: var(--parchment); }
.results small { font-family: var(--f-caps); color: var(--ink-3); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; align-self: center; }
.popular { display: grid; gap: .55rem; }
.popular .caps { color: var(--ink-3); }
.chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; counter-reset: ch; }
.chapters a { text-decoration: none; color: var(--ink); display: grid; gap: .55rem; align-content: start; counter-increment: ch; background: var(--vellum); border: 1px solid var(--rule); overflow: hidden; }
.chapters img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.chapters .in { padding: 0 1.3rem 1.3rem; display: grid; gap: .5rem; }
.chapters .in::before { content: "Chapter " counter(ch, upper-roman); font-family: var(--f-caps); font-size: .7rem; letter-spacing: .18em; color: var(--gold); }
.chapters h3 { font-size: 1.9rem; }
.chapters p { color: var(--ink-2); }
.chapters .go { color: var(--oxblood); font-style: italic; }
.notices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; }
.notice { text-decoration: none; color: var(--ink); background: var(--vellum); border: 1px solid var(--rule); padding: 1.2rem 1.3rem; display: grid; gap: .45rem; align-content: start; position: relative; }
.notice::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule); pointer-events: none; }
.notice .when { font-family: var(--f-caps); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood); }
.notice b { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.15; }
.notice span { color: var(--ink-2); font-size: 1.05rem; }
.quote { text-align: center; font-family: var(--f-display); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.3; max-width: 40ch; margin: 0 auto; color: var(--ink-2); }
.quote small { display: block; font-family: var(--f-caps); font-style: normal; font-size: .7rem; letter-spacing: .18em; margin-top: .8rem; color: var(--gold); }

/* planner */
.planner { display: grid; gap: 1rem; background: var(--vellum); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px; padding: 1.4rem; box-shadow: var(--shadow); margin-top: -2.6rem; position: relative; z-index: 3; }
.planner .row { display: flex; flex-wrap: wrap; gap: 1rem; }
.planner label { display: grid; gap: .3rem; font-family: var(--f-caps); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.planner select, .planner input { font: inherit; font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 1.1rem; padding: .65rem .8rem; border: 1px solid var(--ink-3); background: var(--parchment); color: var(--ink); min-width: 14rem; max-width: 100%; }
.countdown { display: grid; gap: 2rem; }
.stage { display: grid; gap: .6rem; }
.stage h3 { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; font-size: 1.75rem; }
.stage .when { font-family: var(--f-caps); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.stage.past .when { color: var(--warn); }
.task { display: flex; gap: .7rem; align-items: flex-start; }
.task input { width: 1.2rem; height: 1.2rem; margin-top: .35rem; accent-color: var(--oxblood); flex: none; }
.task.done span { text-decoration: line-through; color: var(--ink-3); }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
@media (min-width: 960px) { .guide-layout { grid-template-columns: 15rem minmax(0, 1fr); } .toc { position: sticky; top: 1.5rem; align-self: start; } }
.toc { display: grid; gap: .5rem; font-size: 1.02rem; border-left: 1px solid var(--rule); padding-left: 1rem; }
.toc .caps { color: var(--gold); }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--oxblood); }
.prose { display: grid; gap: 2.4rem; max-width: 46rem; }

footer { border-top: 1px solid var(--rule); padding-block: 3rem; font-size: 1.02rem; color: var(--ink-3); background: var(--vellum); }
footer .wrap { display: grid; gap: .8rem; justify-items: center; text-align: center; }
footer b { font-family: var(--f-display); font-style: italic; font-size: 1.8rem; color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; font-family: var(--f-caps); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
footer nav a { color: var(--ink-2); text-decoration: none; }
@media (max-width: 640px) {
  body { font-size: 1.12rem; }
  .hero .wrap { padding-block: 6.5rem 3.2rem; }
  .answer { padding: 1.2rem 1.25rem; } .answer p { font-size: 1.16rem; }
  .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .tag { padding-left: 2rem; } .tag .v { font-size: 1.2rem; } .tag .v.small { font-size: .95rem; }
  .pin span { font-size: .55rem; }
  .nav { gap: .2rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media (max-width: 700px) { .pin.show:not(.here) span { opacity: 0; } .pin:hover span, .pin:focus span { opacity: 1; } .chart .cartouche { font-size: .8rem; padding: .35rem .55rem; } .chart .cartouche small { display: none; } }
.jump + main .answer { margin-top: 2.4rem; }

/* v6: lines, ships, arrivals */
.lines { display: grid; gap: 1.2rem; }
.line .linehead { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.line .linehead .caps { color: var(--gold); }
.price { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .08em; color: var(--oxblood); white-space: nowrap; }
.price i { font-style: normal; color: var(--rule); }
.board { display: grid; gap: 1rem; }
.boardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
.boardhead .caps { color: var(--gold); }
.boardsub { font-family: var(--f-caps); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: .6rem; }
#portchips .chip[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.cols { columns: 3 13rem; display: block; }
.cols li { break-inside: avoid; margin-bottom: .35rem; }
.pin.ship-pin::before { width: 14px; height: 14px; background: #9a7a45; }
#shiptable td small { font-size: .85rem; }

/* ---------- ship pages (v7) ---------- */
:root { --hull: #2a3a4a; --band: #f1ede4; --sea-wash: #dfe7ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hull: #0e1720; --band: #222832; --sea-wash: #18222c; } }
:root[data-theme="dark"] { --hull: #0e1720; --band: #222832; --sea-wash: #18222c; }
.shiphero .wrap h1 { max-width: 22ch; }
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2rem 3rem; align-items: start; }
.twocol > div { display: grid; gap: .8rem; min-width: 0; }
.facts.big { font-size: 1.08rem; }
.deckplan { background: var(--vellum); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px; padding: 1rem; overflow-x: auto; box-shadow: var(--shadow); }
.deckplan svg { width: 100%; min-width: 640px; height: auto; display: block; }
.deckplan a:hover rect:first-child, .deckplan a:focus rect:first-child { fill: var(--gold); fill-opacity: .25; }
.decklist { margin: 1.4rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; columns: 2 22rem; }
.decklist li { break-inside: avoid; scroll-margin-top: 6rem; }
.decklist li:target { background: var(--ok-wash); }
.decklist b { font-family: var(--f-caps); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.cost { font-family: var(--f-caps); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: .2rem .55rem; border-radius: 99px; border: 1px solid var(--rule); color: var(--ink-3); white-space: nowrap; display: inline-block; }
.cost.ok { color: #fbf6ea; background: #3d6b4c; border-color: transparent; }
.cost.extra { color: #fbf6ea; background: var(--oxblood); border-color: transparent; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; display: grid; gap: .35rem; }
.gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border: 1px solid var(--rule); }
.gallery figcaption { font-size: .82rem; color: var(--ink-3); }
.btn { display: inline-block; font-family: var(--f-caps); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: .7rem 1.1rem; border: 1px solid var(--oxblood); color: var(--oxblood); text-decoration: none; margin-top: 1rem; }
.btn:hover { background: var(--oxblood); color: #fbf6ea; }
.small { font-size: 1.02rem !important; }
.answer p.small::first-letter { float: none; font: inherit; color: inherit; padding: 0; }

.facts details.more { display: inline; } .facts details.more summary { display: inline; cursor: pointer; color: var(--oxblood); text-decoration: underline dotted; }
/* interactive deck explorer */
.deckx { display: grid; gap: 1rem; }
.dx-find { display: grid; gap: .5rem; }
.dx-find .caps { color: var(--oxblood); }
.dx-grid { display: grid; gap: 1.2rem; }
.deckx.live .dx-grid { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); align-items: start; }
.deckx.live .decklist { display: none; }
.deckx .band { cursor: pointer; outline: none; }
.deckx .band rect { transition: fill .15s, opacity .15s; }
.deckx .band:hover rect, .deckx .band:focus-visible rect { fill: var(--ok-wash); }
.deckx .band.on rect { fill: var(--gold); fill-opacity: .35; stroke-width: 2.2; }
.deckx .band.hit rect { fill: #e7d3a1; }
.deckx .band.hit.on rect { fill: var(--gold); fill-opacity: .55; }
.deckx .band.dim { opacity: .35; }
.dx-panel { position: sticky; top: 5rem; background: var(--vellum); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px; padding: 1.1rem 1.2rem; display: grid; gap: .8rem; box-shadow: var(--shadow); max-height: 80vh; overflow: auto; }
.dx-head { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; border-bottom: 1px dotted var(--rule); padding-bottom: .6rem; }
.dx-head h3 { font-size: 1.45rem; text-align: center; }
.dx-nav { border: 1px solid var(--rule); background: transparent; color: var(--ink); width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer; font-size: .8rem; }
.dx-nav:disabled { opacity: .3; cursor: default; }
.dx-group { display: grid; gap: .25rem; }
.dx-group .caps { font-size: .64rem; color: var(--ink-3); }
.dx-group ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.dx-group li.hit { font-weight: 600; color: var(--oxblood); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deckx .band.hit rect { fill: #5a4a26; } }
:root[data-theme="dark"] .deckx .band.hit rect { fill: #5a4a26; }
@media (max-width: 760px) { .deckx.live .dx-grid { grid-template-columns: 1fr; } .dx-panel { position: static; max-height: none; } .deckplan svg { min-width: 0; } }
.dx-pick { display: none; }
@media (max-width: 760px) {
  .dx-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
  .dx-pick .band { font-family: var(--f-caps); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: .45rem .7rem; border: 1px solid var(--rule); background: var(--vellum); color: var(--ink); border-radius: 4px; }
  .dx-pick .band.on { background: var(--ink); color: var(--parchment); }
  .dx-pick .band.hit { border-color: var(--gold); background: #f3e6c4; }
  .dx-pick .band.dim { opacity: .4; }
}
@media (max-width: 760px) { .dx-pick .band.on, .dx-pick .band.on.hit { background: var(--ink); color: var(--parchment); border-color: var(--ink); opacity: 1; } .dx-pick .band.dim { opacity: .55; } }

/* top-down deck view (our own schematic) */
.td { display: grid; gap: .6rem; }
.tdship { display: grid; grid-template-columns: 1fr 1fr 1.15fr; min-height: 9rem; background: var(--band); border: 1.5px solid var(--ink); clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%); border-radius: 6px 0 0 6px; }
.tdz { padding: .55rem .5rem; display: flex; flex-wrap: wrap; gap: .25rem; align-content: flex-start; border-right: 1px dashed var(--rule); }
.tdz.bow { padding-right: 18%; border-right: 0; }
.tdz small, .tdfull small { flex-basis: 100%; font-family: var(--f-caps); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tdi { font-size: .82rem; line-height: 1.2; padding: .15rem .4rem; background: var(--vellum); border: 1px solid var(--rule); border-radius: 3px; }
.tdi.hit { background: var(--oxblood); color: #fbf6ea; border-color: transparent; }
.tdi.k-dining { border-left: 3px solid #a0522d; } .tdi.k-bars { border-left: 3px solid #6b4c8a; } .tdi.k-pools { border-left: 3px solid #2f7fa8; } .tdi.k-spa { border-left: 3px solid #3d6b4c; } .tdi.k-shows { border-left: 3px solid #b8860b; } .tdi.k-kids { border-left: 3px solid #c2577a; } .tdi.k-cabins { border-left: 3px solid #7d7368; }
.tdfull { display: flex; flex-wrap: wrap; gap: .25rem; }
.tdcab { font-size: .95rem; margin: 0; }
.deckx.live .dx-grid { grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 1fr); }
.tiles6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.tiles6 .tile { background: var(--vellum); border: 1px solid var(--rule); padding: 1rem 1.1rem; display: grid; gap: .3rem; align-content: start; }
.tiles6 .tile .caps { font-size: .64rem; color: var(--oxblood); }
.tiles6 .tile b { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; }
.tiles6 .tile b i { opacity: .25; font-style: normal; }
.tiles6 .tile p { margin: 0; color: var(--ink-2); font-size: 1rem; }
table th[scope=row] { font-family: var(--f-caps); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.jump .wrap { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.jump .wrap a { white-space: nowrap; flex: none; }
@media (max-width: 760px) { table th[scope=row] { white-space: normal; } #costs td, #cabins td { overflow-wrap: anywhere; } }
@media (max-width: 760px) { .deckx.live .dx-grid { grid-template-columns: 1fr; } .tdship { min-height: 7rem; } .tdi { font-size: .74rem; } }
@media (min-width: 761px) { .dx-grid > .deckplan { grid-column: 1; grid-row: 1; } .dx-grid > .dx-panel { grid-column: 2; grid-row: 1; } }