/* Top things to do: the /top-things-to-do/ hub and the place pages. Card styles live in topthings-cards.css.
   Mobile first: 16px gutters under 768px, no element wider than the viewport. */
.tt-page { background: var(--ttd-cream); color: var(--ttd-body); overflow-x: clip; }
.tt-page a { color: var(--ttd-ocean); }
.tt-page a:focus-visible, .tt-page button:focus-visible { outline: 3px solid var(--ttd-sun); outline-offset: 2px; }
@media (max-width: 767.98px) { .tt-page .container { --bs-gutter-x: 2rem; } }

.tt-crumbs { margin: 0 0 1rem; font-size: .82rem; color: rgba(243, 248, 250, .78); }
.tt-crumbs a { color: var(--ttd-sun-soft); text-decoration: none; }
.tt-crumbs a:hover { text-decoration: underline; }
.tt-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ttd-sun); }
.tt-kicker::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; }
.tt-serif { font-family: var(--ttd-serif); }

/* ── Hub hero: text and a collage of place photos, each with its credit ── */
.tt-hero { position: relative; padding: 1.75rem 0 2.25rem; color: var(--ttd-cream);
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(243, 248, 250, .07) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    radial-gradient(80% 110% at 100% 0%, #17607f 0%, rgba(23, 96, 127, 0) 62%),
    linear-gradient(160deg, #0b3a50 0%, #06202c 100%); }
.tt-hero__grid { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 992px) { .tt-hero { padding: 2.5rem 0 3.5rem; } .tt-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; } }
.tt-title { margin: 0 0 .9rem; font-family: var(--ttd-serif); font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 700; line-height: .98; letter-spacing: -.025em; color: #fff; }
.tt-title em { font-style: italic; color: var(--ttd-sun-soft); }
.tt-lede { margin: 0; max-width: 46ch; font-size: 1.08rem; line-height: 1.6; color: rgba(243, 248, 250, .9); }
.tt-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.tt-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border: 1px solid rgba(243, 248, 250, .3); border-radius: 999px; color: var(--ttd-cream); font-size: .86rem; font-weight: 700; text-decoration: none; }
.tt-jump a:hover { border-color: var(--ttd-sun); color: var(--ttd-sun-soft); }
.tt-jump__count { margin-left: .35rem; color: var(--ttd-sun); font-variant-numeric: tabular-nums; }

.tt-collage { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); margin: 0; }
.tt-collage__item { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0c3447; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); }
.tt-collage__item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.tt-collage__item:first-child { grid-column: span 2; }
.tt-collage__item:nth-child(4) { display: none; }
.tt-collage--2 .tt-collage__item:first-child { grid-column: auto; }
.tt-collage--2 .tt-collage__item:first-child img { aspect-ratio: 1; }
.tt-collage__item:first-child img { aspect-ratio: 16 / 10; }
@media (min-width: 992px) {
  .tt-collage { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 30rem; }
  .tt-collage__item:first-child { grid-column: span 2; grid-row: span 2; }
  .tt-collage__item img, .tt-collage__item:first-child img { aspect-ratio: auto; height: 100%; }
  .tt-collage--1 .tt-collage__item:first-child { grid-column: span 3; }
}
.tt-collage__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .75rem .55rem; background: linear-gradient(180deg, rgba(4, 20, 28, 0), rgba(4, 20, 28, .88)); font-size: .66rem; line-height: 1.35; color: rgba(243, 248, 250, .82); }
.tt-collage__cap strong { display: block; margin-bottom: .1rem; font-family: var(--ttd-serif); font-size: 1.05rem; font-weight: 700; color: #fff; }
.tt-collage__cap strong a { color: #fff; text-decoration: none; }
.tt-collage__cap strong a:hover { color: var(--ttd-sun-soft); }
.tt-collage__cap a { color: rgba(243, 248, 250, .92); }
.tt-collage--empty { display: flex; align-items: flex-end; min-height: 14rem; padding: 1.25rem; border-radius: 16px; border: 1px solid rgba(243, 248, 250, .2);
  background: radial-gradient(circle at 1.5px 1.5px, rgba(255, 159, 107, .25) 1.2px, transparent 1.6px) 0 0 / 14px 14px; font-family: var(--ttd-serif); font-style: italic; font-size: 1.4rem; color: var(--ttd-sun-soft); }

/* ── Sections ── */
.tt-section { padding: 2.5rem 0; }
@media (min-width: 768px) { .tt-section { padding: 3.5rem 0; } }
.tt-section--now { background: linear-gradient(180deg, #e1eff4 0%, #d3e7ef 100%); border-bottom: 1px solid #b8d3df; }
.tt-section--paper { background: var(--ttd-paper); border-top: 1px solid var(--ttd-line); border-bottom: 1px solid var(--ttd-line); }
.tt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.tt-head > :first-child { min-width: 0; }
.tt-label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ttd-ocean); }
.tt-label::before { content: ""; width: 1.4rem; height: 2px; background: currentColor; }
.tt-h2 { margin: 0; font-family: var(--ttd-serif); font-size: clamp(1.7rem, 4.4vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; color: var(--ttd-ink); }
.tt-sub { margin: .45rem 0 0; max-width: 60ch; font-size: .98rem; line-height: 1.55; color: var(--ttd-body); }
.rail--tt { --rail-card-w: 280px; --rail-card-w-phone: 78vw; --rail-card-max: 300px; --rail-gap: 16px; --rail-line: rgba(6, 32, 44, .16); --rail-thumb: var(--ttd-ocean); --rail-arrow-ink: var(--ttd-ink); --rail-arrow-line: rgba(6, 32, 44, .2); }
.rail--tt .rail__track { padding-bottom: 1.4rem; }

/* Filter chips: plain links (?category=…#places), so they work without JavaScript. */
.tt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tt-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; border: 1px solid var(--ttd-line); border-radius: 999px; background: #fff; color: var(--ttd-ink) !important; font-size: .88rem; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(10, 31, 41, .06); }
.tt-chip:hover { border-color: var(--ttd-ocean); }
.tt-chip[aria-current="true"] { border-color: var(--ttd-ocean); background: var(--ttd-ocean); color: var(--ttd-cream) !important; }
.tt-chip__n { font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* Magazine grid: two columns on phones, four on desktop; every seventh card, starting with the first, is a feature twice the size. */
.tt-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .tt-grid { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tt-grid { gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tt-grid > li { display: flex; min-width: 0; }
.tt-grid > li > .ttd-card { flex: 1 1 auto; }
.tt-grid > li.is-feature { grid-column: span 2; }
@media (min-width: 768px) { .tt-grid > li.is-feature { grid-row: span 2; } }
.tt-grid .ttd-card__link, .tt-grid .ttd-card--plain .ttd-card__link { display: flex; flex-direction: column; flex: 1 1 auto; }
.tt-grid .is-feature .ttd-card__media, .tt-grid .is-feature .ttd-plain { flex: 1 1 auto; }
@media (min-width: 768px) { .tt-grid .is-feature .ttd-card__media, .tt-grid .is-feature .ttd-plain { aspect-ratio: auto; min-height: 100%; } }
.tt-grid .is-feature .ttd-card__name, .tt-grid .is-feature .ttd-plain__name { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.tt-grid .is-feature .ttd-card__summary { -webkit-line-clamp: 3; font-size: .95rem; }
@media (max-width: 767.98px) {
  .tt-grid li:not(.is-feature) .ttd-card__name { font-size: 1.15rem; }
  .tt-grid li:not(.is-feature) .ttd-plain__name { font-size: 1.35rem; }
  .tt-grid li:not(.is-feature) .ttd-card__summary, .tt-grid li:not(.is-feature) .ttd-card__more { display: none; }
  .tt-grid li:not(.is-feature) .ttd-card__scrim { padding: 3rem .75rem .75rem; }
  .tt-grid li:not(.is-feature) .ttd-plain { padding: .8rem; }
  .tt-grid li:not(.is-feature) .ttd-plain .ttd-pill { top: .7rem; left: .8rem; }
  .tt-grid li:not(.is-feature) .ttd-credit { padding: .4rem .75rem 0; margin-bottom: .55rem; }
  .tt-grid .ttd-pill { font-size: .6rem; padding: .2rem .5rem; }
}
.tt-empty { padding: 1.25rem; border: 1px dashed var(--ttd-line); border-radius: 14px; background: #fff; color: var(--ttd-muted); }

/* Stories and maps */
.tt-stories { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.tt-stories > li { display: flex; min-width: 0; }
.tt-stories > li > .ttd-card { flex: 1 1 auto; }
.tt-maps { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; list-style: none; }
.tt-map { display: flex; gap: .9rem; align-items: flex-start; height: 100%; padding: 1.1rem 1.15rem; border: 1px solid var(--ttd-line); border-radius: 16px; background: #fff; color: var(--ttd-ink) !important; text-decoration: none; }
.tt-map:hover { border-color: var(--ttd-ocean); box-shadow: 0 10px 24px -16px rgba(10, 31, 41, .5); }
.tt-map__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ttd-sun-soft); color: var(--ttd-ocean); font-size: 1.15rem; }
.tt-map__title { display: block; font-family: var(--ttd-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.tt-map__text { display: block; margin-top: .2rem; font-size: .88rem; line-height: 1.45; color: var(--ttd-muted); }
.tt-note { display: flex; gap: .75rem; align-items: flex-start; margin: 2rem 0 0; padding: 1rem 1.15rem; border-left: 3px solid var(--ttd-sun); background: #fff; font-size: .92rem; line-height: 1.55; color: var(--ttd-body); }

/* ── Dish page ── */
.tt-place-hero { position: relative; color: var(--ttd-cream); background: linear-gradient(160deg, #0b3a50 0%, #06202c 100%); }
.tt-place-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .tt-place-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 34rem; } }
.tt-place-hero__media { position: relative; margin: 0; background: #0c3447; }
.tt-place-hero__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 992px) { .tt-place-hero__media img { aspect-ratio: auto; position: absolute; inset: 0; } }
.tt-place-hero__media .ttd-plain { aspect-ratio: 4 / 3; height: 100%; justify-content: center; }
@media (min-width: 992px) { .tt-place-hero__media .ttd-plain { aspect-ratio: auto; position: absolute; inset: 0; } }
.tt-place-hero__media .ttd-plain__name { font-size: clamp(3rem, 9vw, 5.5rem); }
.tt-place-hero__text { display: flex; flex-direction: column; justify-content: center; padding: 1.75rem 1rem 2rem; }
@media (min-width: 768px) { .tt-place-hero__text { padding: 2.25rem 2.5rem; } }
@media (min-width: 992px) { .tt-place-hero__text { padding: 3rem 3.25rem; } }
.tt-place-title { margin: 0 0 .35rem; font-family: var(--ttd-serif); font-size: clamp(2.6rem, 8vw, 4.4rem); font-weight: 700; line-height: .98; letter-spacing: -.025em; color: #fff; overflow-wrap: anywhere; }
.tt-aka { margin: 0 0 1rem; font-family: var(--ttd-serif); font-style: italic; font-size: 1.1rem; color: var(--ttd-sun-soft); }
.tt-place-summary { margin: 0; font-size: 1.12rem; line-height: 1.6; color: rgba(243, 248, 250, .92); max-width: 44ch; }
.tt-place-hero__pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.tt-caption { margin: 0; padding: .55rem 1rem .7rem; background: #04141c; font-size: .74rem; line-height: 1.45; color: rgba(243, 248, 250, .8); }
.tt-caption a { color: rgba(243, 248, 250, .95); text-underline-offset: 2px; }
@media (min-width: 992px) { .tt-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(4, 20, 28, 0), rgba(4, 20, 28, .9) 45%); padding-top: 2.5rem; } }

.tt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--ttd-line); border-bottom: 1px solid var(--ttd-line); }
@media (min-width: 768px) { .tt-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tt-facts > li:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 768px) { .tt-facts > li:last-child:nth-child(odd) { grid-column: auto; } }
.tt-facts > li { padding: 1rem 1rem 1.05rem; background: var(--ttd-paper); min-width: 0; }
@media (min-width: 768px) { .tt-facts > li { padding: 1.2rem 1.5rem; } }
.tt-facts dt, .tt-facts__k { display: block; margin-bottom: .25rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ttd-ocean); }
.tt-facts__v { display: block; font-family: var(--ttd-serif); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--ttd-ink); overflow-wrap: anywhere; }
.tt-facts__note { display: block; margin-top: .2rem; font-size: .8rem; line-height: 1.4; color: var(--ttd-muted); }

.tt-article { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .tt-article { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; align-items: start; } }
.tt-story { max-width: 66ch; font-family: var(--ttd-serif); font-size: 1.16rem; line-height: 1.75; color: var(--ttd-ink); }
.tt-story p { margin: 0 0 1.2rem; }
.tt-story > p:first-child::first-letter { float: left; margin: .12rem .5rem 0 0; font-size: 3.6rem; line-height: .82; font-weight: 700; color: var(--ttd-ocean); }

.tt-plan { position: relative; padding: 1.4rem 1.25rem 1.25rem; border-radius: 20px; background: var(--ttd-deep); color: var(--ttd-cream); box-shadow: var(--ttd-shadow); }
@media (min-width: 992px) { .tt-plan { position: sticky; top: 5.5rem; } }
.tt-plan .tt-label { color: var(--ttd-sun); }
.tt-plan .tt-h2 { color: #fff; font-size: 1.7rem; }
.tt-plan__intro { margin: .45rem 0 1rem; font-size: .88rem; line-height: 1.5; color: rgba(243, 248, 250, .8); }
.tt-links { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.tt-link { display: flex; gap: .85rem; align-items: center; padding: .85rem .95rem; border: 1px solid rgba(243, 248, 250, .16); border-radius: 14px; background: rgba(243, 248, 250, .06); color: var(--ttd-cream) !important; text-decoration: none; }
.tt-link:hover, .tt-link:focus-visible { border-color: var(--ttd-sun); background: rgba(255, 159, 107, .12); }
.tt-link__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ttd-sun); color: var(--ttd-deep); font-family: var(--ttd-serif); font-size: 1.1rem; font-weight: 700; }
.tt-link__text { min-width: 0; flex: 1 1 auto; }
.tt-link__pub { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ttd-sun); }
.tt-link__title { display: block; margin-top: .1rem; font-size: .95rem; font-weight: 700; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.tt-link__ext { flex: none; color: rgba(243, 248, 250, .7); font-size: .95rem; }
.tt-plan__note { margin: .9rem 0 0; font-size: .74rem; line-height: 1.45; color: rgba(243, 248, 250, .68); }

.tt-sources { margin: 0; padding: 0; list-style: none; counter-reset: src; display: grid; gap: .55rem; }
.tt-sources li { position: relative; padding-left: 2rem; font-size: .92rem; line-height: 1.5; counter-increment: src; }
.tt-sources li::before { content: counter(src); position: absolute; left: 0; top: .05rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ttd-sun-soft); color: var(--ttd-ocean); font-size: .72rem; font-weight: 800; line-height: 1.4rem; text-align: center; }
.tt-sources__pub { color: var(--ttd-muted); }
.tt-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; text-decoration: none; }

/* ── Visiting facts and the safety panel ── */
.tt-safety { margin: 0 0 1.5rem; padding: 1.25rem 1.25rem 1.1rem; border-left: 4px solid var(--ttd-sun); border-radius: 0 16px 16px 0; background: #fff; box-shadow: 0 1px 2px rgba(10, 31, 41, .06); }
.tt-safety .tt-h2 { font-size: 1.4rem; }
.tt-safety__list { display: grid; gap: .55rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.tt-safety__list li { position: relative; padding-left: 1.4rem; font-size: .96rem; line-height: 1.55; color: var(--ttd-ink); }
.tt-safety__list li::before { content: ""; position: absolute; left: .15rem; top: .55rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ttd-green); }
.tt-safety__more { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--ttd-line); list-style: none; font-size: .9rem; font-weight: 700; }
.tt-note-small { margin: .9rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--ttd-muted); }

.tt-h2--small { margin: 2rem 0 .5rem; font-size: 1.5rem; }
.tt-body { max-width: 66ch; margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.65; color: var(--ttd-body); }