@charset "utf-8";
/* WebLondonHotels.com - site stylesheet
   Mobile-first. Tokens follow the huisstijl (section 72 and 90).
   No framework, no build step. */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/newsreader-latin-ext.woff2") format("woff2");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
    --color-ink: #13202c;
    --color-parchment: #f5f0e8;
    --color-brick: #b34132;
    --color-brick-hover: #96372b;
    --color-teal: #247a78;
    --color-slate: #586774;
    --color-mist: #e7ecef;
    --color-amber: #c5862c;
    --color-white: #fff;
    --color-near-black: #0b1117;
    --color-soft-grey: #f7f8f8;
    --color-border: #d6dde1;
    --color-border-strong: #aeb9c0;
    --color-muted: #78858f;
    --color-error: #a52a2a;
    --color-teal-tint: #edf7f6;
    --color-amber-tint: #fbf4e8;

    --font-ui: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --font-editorial: "Newsreader", Georgia, "Times New Roman", serif;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    --container: 1180px;
    --content-column: 760px;
    --shadow-card: 0 4px 18px rgba(19, 32, 44, 0.08);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-ink);
    background: var(--color-white);
    overflow-wrap: break-word;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* Basismaat voor inline iconen. Zonder deze regel groeit een SVG zonder eigen
   class door max-width:100% mee tot de volle containerbreedte: een icon("info")
   in een alinea werd zo een teken van 1.400 pixels hoog.

   :where() en niet :not() los: een attribuutselector telt mee, dus
   `svg:not([width]):not([height])` is (0,2,1) en versloeg elke componentregel
   met een enkele class. Het 404-tafereel kwam daardoor op 20 px uit in plaats
   van de volle breedte, het logo op 24 in plaats van 30. :where() telt als nul,
   dus dit is nu werkelijk een vangnet: alles met een eigen class wint. */
svg:where(:not([width]):not([height])) {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.18em;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 {
    font-family: var(--font-editorial);
    font-weight: 600;
    font-size: clamp(30px, 6vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* De merkgids zet Newsreader neer voor "headlines and editorial moments".
   Die stond alleen op de h1, waardoor elke sectiekop daaronder terugviel op de
   UI-sans en de pagina eruitzag als een interface in plaats van als een
   redactioneel stuk. h3 en h4 blijven sans: dat zijn labels boven kaarten en
   tabellen, geen koppen. */
h2 {
    font-family: var(--font-editorial);
    font-weight: 600;
    font-size: clamp(25px, 4vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.018em;
    margin-top: var(--space-12);
}

h3 {
    font-weight: 700;
    font-size: clamp(18px, 2.4vw, 21px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-top: var(--space-8);
}

h4 {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
}

p,
ul,
ol {
    margin: 0 0 var(--space-4);
}

ul,
ol {
    padding-left: 1.25em;
}

li {
    margin-bottom: var(--space-2);
}

a {
    color: var(--color-brick);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-brick-hover);
}

:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
    border-radius: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-10) 0;
}

/* ---------- layout ---------- */
.container {
    width: min(100% - 40px, var(--container));
    margin-inline: auto;
}

.prose {
    max-width: var(--content-column);
}

.prose p,
.prose li {
    font-size: 16px;
}

.section {
    padding-block: var(--space-12);
}

.section--tight {
    padding-block: var(--space-10);
}

.section--parchment {
    background: var(--color-parchment);
}

.section--grey {
    background: var(--color-soft-grey);
}

.section--ink {
    background: var(--color-ink);
    color: var(--color-white);
}

.section--ink h2,
.section--ink h3 {
    color: var(--color-white);
}

.section--ink a {
    color: #f0c4bd;
}

/* Clip in plaats van left:-9999px, zodat de link geen scrollgebied opspant. */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--color-ink);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    z-index: 100;
}

.skip-link:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    left: var(--space-4);
    top: var(--space-2);
}

/* ---------- header ---------- */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-mist);
    position: sticky;
    top: 0;
    z-index: 40;
}

/* wrap is nodig zodat de nav op mobiel op een eigen regel onder het logo valt.
   Zonder wrap blijft hij op dezelfde rij staan en loopt hij, met een basis van
   100%, ver buiten het venster. */
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-height: 64px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 700;
    letter-spacing: -0.025em;
    font-size: 19px;
    white-space: nowrap;
}

.logo svg {
    width: 26px;
    height: 26px;
    flex: none;
}

.logo__brick {
    color: var(--color-brick);
}

.nav-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-ink);
    cursor: pointer;
}

.nav-toggle svg {
    width: 22px;
    height: 22px;
}

/* flex: 0 0 100% is nodig omdat .site-nav een flex-item is in de headerrij.
   Zonder die basis krimpt hij naar de breedte van zijn inhoud -- met de
   submenu's en de CTA erin werd dat 108px, uitgelijnd rechts, en liep de
   pagina 9px horizontaal over. */
.site-nav {
    display: none;
    flex: 0 0 100%;
    padding-bottom: var(--space-4);
}

.site-nav.is-open {
    display: block;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list > li {
    margin: 0;
}

.site-nav__list a {
    display: block;
    min-height: 48px;
    line-height: 48px;
    color: var(--color-ink);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--color-mist);
}

.site-nav__list a[aria-current="true"] {
    color: var(--color-brick);
}

/* ---------- submenu ----------
   De ouder is zelf een link naar de hub; het openen zit in een aparte knop met
   aria-expanded. Een gesloten submenu staat op display:none en valt dus buiten
   de tabvolgorde: zonder dat loopt iemand die tabt eerst door 28 submenu-links
   voordat hij bij de inhoud is. Zonder JavaScript blijft elke hub bereikbaar
   via de ouderlink zelf, en daar staan dezelfde items nog een keer. */
.has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.has-sub > a {
    flex: 1 1 auto;
}

.sub-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    border: 0;
    background: none;
    color: var(--color-slate);
    cursor: pointer;
    border-bottom: 1px solid var(--color-mist);
}

.sub-toggle__chevron {
    width: 18px;
    height: 18px;
    transition: transform 0.18s ease;
}

.sub-toggle[aria-expanded="true"] .sub-toggle__chevron {
    transform: rotate(180deg);
}

.submenu {
    flex: 0 0 100%;
    display: none;
    list-style: none;
    margin: 0 0 var(--space-2);
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-mist);
}

.submenu.is-open {
    display: block;
}

.site-nav__list .submenu a {
    font-weight: 500;
    font-size: 15px;
    min-height: 44px;
    line-height: 44px;
    border-bottom: 0;
    color: var(--color-slate);
}

.site-nav__list .submenu a:hover,
.site-nav__list .submenu a[aria-current="true"] {
    color: var(--color-brick);
}

.nav-cta {
    margin-top: var(--space-3);
}

/* De knop erft button-primary, maar 48px is te zwaar voor een kopregel van
   76px. Compacter, en op mobiel over de volle breedte. */
.site-nav__list .nav-cta a {
    border-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    font-size: 15px;
    line-height: 1.2;
    color: var(--color-white);
}

/* ---------- footer ---------- */
.site-footer {
    background: var(--color-ink);
    color: #c8d2da;
    padding-block: var(--space-12) var(--space-8);
    margin-top: var(--space-16);
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer h2 {
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    color: #fff;
    margin: 0 0 var(--space-3);
    letter-spacing: 0;
}

.footer-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-grid li {
    margin-bottom: var(--space-2);
}

.footer-brand .logo {
    color: #fff;
}

.footer-brand p {
    max-width: 34em;
    font-size: 15px;
}

.footer-bottom {
    border-top: 1px solid #24313d;
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
}

/* ---------- breadcrumb ---------- */
/* Onder het kruimelpad stond niets, boven 16 px. Daardoor plakte het pad aan
   de hero eronder en hing het scheef onder de headerrand. */
.breadcrumb {
    font-size: 14px;
    color: var(--color-slate);
    padding-block: var(--space-4) var(--space-4);
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumb li + li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--color-muted);
    border-right: 1.5px solid var(--color-muted);
    transform: rotate(45deg);
    flex: none;
}

.breadcrumb a {
    color: var(--color-slate);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-brick);
}

.breadcrumb [aria-current="page"] {
    color: var(--color-ink);
}

/* ---------- buttons ---------- */
.button-primary,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button-primary {
    border: 1px solid var(--color-brick);
    background: var(--color-brick);
    color: var(--color-white);
}

.button-primary:hover {
    background: var(--color-brick-hover);
    border-color: var(--color-brick-hover);
    color: var(--color-white);
}

.button-secondary {
    border: 1px solid var(--color-ink);
    background: var(--color-white);
    color: var(--color-ink);
}

.button-secondary:hover {
    background: var(--color-parchment);
    color: var(--color-ink);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
}

.text-link:hover {
    color: var(--color-brick);
    text-decoration: underline;
}

.text-link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    flex: none;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    background: var(--color-parchment);
}

/* Beeld en tekst delen een grid-cel. De hoogte volgt de hoogste van de twee,
   zodat een lange H1 op smalle schermen niet buiten het beeldkader valt. */
.hero__media {
    display: grid;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-ink);
}

.hero__media > img,
.hero__media > .hero__overlay {
    grid-area: 1 / 1;
    min-width: 0;
}

.hero__media > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Een hero van 2:1 op volle breedte werd op een breed scherm ruim 700 pixels
   hoog: de bezoeker ziet dan alleen een plaatje en moet scrollen voor de eerste
   regel inhoud. Breder scherm betekent hier dus een vlakker beeld, met een
   harde bovengrens zodat de hoogte niet met de vensterbreedte blijft meegroeien. */
@media (min-width: 48rem) {
    .hero__media > img {
        aspect-ratio: 21 / 9;
    }

    .hero__media {
        max-height: 24rem;
    }
}

@media (min-width: 64rem) {
    .hero__media {
        max-height: 27rem;
    }
}

/* De perkamenten band droeg 24 px boven het beeld en niets eronder, waardoor
   hij aan de onderkant strak tegen de foto aan sloot. */
.hero--image {
    padding-block: var(--space-6);
}

/* De sluier is doorgemeten, niet geschat. Witte tekst op de lichtste hero
   (Hyde Park, Covent Garden) haalt met deze waarden 4.5:1 of meer over de hele
   tekstzone. Op mobiel loopt de tekst tot de rechterrand, dus daar blijft de
   overlay vlak. Pas vanaf 64rem staat de tekst in de linkerkolom en mag de
   rechterkant van het beeld openen. */
.hero--image .hero__overlay {
    background: linear-gradient(
        100deg,
        rgba(19, 32, 44, 0.94) 0%,
        rgba(19, 32, 44, 0.86) 50%,
        rgba(19, 32, 44, 0.74) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: var(--space-8) var(--space-6);
}

.hero--image .hero__overlay > div {
    max-width: 44rem;
    min-width: 0;
}

.hero--image h1 {
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.hero__lead {
    font-size: 17px;
    line-height: 1.55;
    color: #e4eaee;
    margin: 0;
}

.hero__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f2c9c2;
    margin-bottom: var(--space-3);
}

.hero--plain {
    padding-block: var(--space-10);
    background: var(--color-parchment);
}

.hero--plain .hero__lead {
    color: var(--color-slate);
    font-size: 18px;
}

/* ---------- home search / entry points ---------- */
.entry-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.entry-card {
    display: block;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color 180ms ease;
    min-width: 0;
}

.entry-card:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
}

.entry-card h3 {
    margin: 0 0 var(--space-2);
    font-size: 19px;
}

.entry-card p {
    margin: 0;
    color: var(--color-slate);
    font-size: 15px;
}

/* ---------- cards ---------- */
.card-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

.hotel-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    overflow: hidden;
    min-width: 0;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.hotel-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card);
}

/* Thumbnail bovenaan een kaart die naar een pagina met hero verwijst. */
.card-media {
    display: block;
    background: var(--color-ink);
    line-height: 0;
}

.card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    transition: transform 200ms ease;
}

@media (min-width: 64rem) and (hover: hover) {
    .hotel-card:hover .card-media img {
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-media img {
        transition: none;
    }
    .hotel-card:hover .card-media img {
        transform: none;
    }
}

.hotel-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.hotel-card__name {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.hotel-card__name a {
    color: var(--color-ink);
    text-decoration: none;
}

.hotel-card__name a:hover {
    color: var(--color-brick);
}

.hotel-card__micro {
    font-size: 14px;
    color: var(--color-slate);
    margin: 0;
}

.hotel-card__reason {
    margin: 0;
    font-size: 15px;
}

.hotel-card__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
}

.hotel-card__facts li {
    margin: 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    min-width: 0;
}

.hotel-card__facts svg {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 3px;
    color: var(--color-slate);
}

.hotel-card__foot {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.decision-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-teal);
}

/* ---------- badges and chips ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}

.badge--verified {
    background: var(--color-teal-tint);
    color: #1a5b59;
    border-color: #bfdedd;
}

.badge--price {
    background: var(--color-mist);
    color: var(--color-ink);
    border-color: var(--color-border);
}

.badge--event {
    background: var(--color-parchment);
    color: var(--color-brick);
    border-color: #e4d8c6;
}

.badge--tradeoff {
    background: var(--color-amber-tint);
    color: #7a5215;
    border-color: #ecdcbe;
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ---------- panels ---------- */
.panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    background: var(--color-white);
    margin-bottom: var(--space-6);
    min-width: 0;
}

.panel--parchment {
    background: var(--color-parchment);
    border-color: #e6dccb;
}

.panel > :last-child {
    margin-bottom: 0;
}

.panel__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 var(--space-4);
    font-family: var(--font-ui);
    letter-spacing: -0.01em;
}

.staylogic {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

.staylogic > li {
    margin: 0;
    display: grid;
    gap: 2px;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #e6dccb;
}

.staylogic > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.staylogic__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}

.staylogic__label {
    font-weight: 700;
    font-size: 15px;
}

.staylogic__status {
    font-size: 13px;
    font-weight: 600;
}

.staylogic__status[data-state="strong"],
.staylogic__status[data-state="good"] {
    color: #1a5b59;
}

.staylogic__status[data-state="mixed"] {
    color: #7a5215;
}

.staylogic__status[data-state="neutral"] {
    color: var(--color-slate);
}

.staylogic p {
    margin: 0;
    font-size: 15px;
}

.route-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.route-list li {
    margin: 0;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    min-width: 0;
}

.route-list svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--color-slate);
}

.route-list b {
    font-weight: 700;
}

.route-list span {
    color: var(--color-slate);
    font-size: 14px;
    display: block;
}

.fit-panel {
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border-left: 3px solid;
}

.fit-panel > :last-child {
    margin-bottom: 0;
}

.fit-panel h3 {
    margin-top: 0;
    font-size: 19px;
}

.fit-panel--best {
    background: var(--color-teal-tint);
    border-left-color: var(--color-teal);
}

.fit-panel--skip {
    background: var(--color-amber-tint);
    border-left-color: var(--color-amber);
}

.callout {
    border-left: 3px solid var(--color-ink);
    background: var(--color-soft-grey);
    padding: var(--space-4) var(--space-6);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: var(--space-6);
    font-size: 15px;
}

.callout > :last-child {
    margin-bottom: 0;
}

.callout--tip {
    border-left-color: var(--color-teal);
    background: var(--color-teal-tint);
}

.callout--check {
    border-left-color: var(--color-amber);
    background: var(--color-amber-tint);
}

.price-context {
    display: grid;
    gap: 2px;
}

.price-context__value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.price-context__meta {
    font-size: 14px;
    color: var(--color-slate);
}

.editorial-quote {
    font-family: var(--font-editorial);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(21px, 3.4vw, 28px);
    line-height: 1.35;
    color: var(--color-ink);
    border-left: 3px solid var(--color-brick);
    padding-left: var(--space-6);
    margin: var(--space-10) 0;
    max-width: var(--content-column);
}

/* ---------- tables ---------- */
.table-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: var(--color-white);
    min-width: 640px;
}

table.data caption {
    text-align: left;
    font-size: 14px;
    color: var(--color-slate);
    padding: var(--space-3) var(--space-4);
}

table.data th,
table.data td {
    padding: 11px var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

table.data thead th {
    background: var(--color-mist);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

table.data tbody tr:last-child td {
    border-bottom: 0;
}

table.data td.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.data tr.is-top td {
    border-top: 2px solid var(--color-brick);
}

table.data a {
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
}

table.data a:hover {
    color: var(--color-brick);
    text-decoration: underline;
}

th.sortable {
    padding: 0;
}

th.sortable button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-4);
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

th.sortable button::after {
    content: "\2195";
    font-size: 12px;
    opacity: 0.45;
}

th.sortable[aria-sort="ascending"] button::after {
    content: "\2191";
    opacity: 1;
}

th.sortable[aria-sort="descending"] button::after {
    content: "\2193";
    opacity: 1;
}

/* ---------- forms ---------- */
.field {
    display: grid;
    gap: 6px;
    margin-bottom: var(--space-4);
}

.field label {
    font-weight: 600;
    font-size: 14px;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 48px;
    padding: 10px var(--space-3);
    font: inherit;
    font-size: 16px;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.field textarea {
    min-height: 150px;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--color-muted);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--color-ink);
    outline: 2px solid var(--color-ink);
    outline-offset: 0;
}

.field small {
    color: var(--color-slate);
    font-size: 13px;
}

.filter-input {
    min-height: 48px;
    padding: 10px var(--space-3);
    font: inherit;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-ink);
    flex: 1 1 15rem;
    min-width: 0;
}

.filter-count {
    font-size: 14px;
    color: var(--color-slate);
}

.form-note {
    font-size: 14px;
    color: var(--color-slate);
}

/* ---------- FAQ ---------- */
.faq {
    border-top: 1px solid var(--color-border);
    max-width: var(--content-column);
}

.faq details {
    border-bottom: 1px solid var(--color-border);
}

.faq summary {
    cursor: pointer;
    padding: var(--space-4) 34px var(--space-4) 0;
    font-weight: 700;
    font-size: 17px;
    list-style: none;
    position: relative;
    min-height: 48px;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 26px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-slate);
    border-bottom: 2px solid var(--color-slate);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.faq details[open] summary::after {
    transform: rotate(-135deg);
}

.faq details > div {
    padding-bottom: var(--space-4);
}

.faq details > div > :last-child {
    margin-bottom: 0;
}

/* ---------- 404 ---------- */
.notfound__grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
    align-items: center;
}

.notfound__copy {
    min-width: 0;
}

.notfound__lead {
    font-size: 17px;
    color: var(--color-slate);
    max-width: 34em;
}

.notfound__links {
    margin-top: var(--space-6);
    font-size: 15px;
}

.notfound__art {
    min-width: 0;
    order: -1;
}

.notfound__scene {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 64rem) {
    .notfound__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--space-12);
    }

    .notfound__art {
        order: 0;
    }
}

/* ---------- misc ---------- */
.meta-line {
    font-size: 14px;
    color: var(--color-slate);
    margin-bottom: var(--space-6);
}

.disclosure {
    font-size: 14px;
    color: var(--color-slate);
    background: var(--color-soft-grey);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.disclosure > :last-child {
    margin-bottom: 0;
}

.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.link-list li {
    margin: 0;
}

/* minmax(0, 1fr) en niet 1fr: een 1fr-baan heeft min-content als ondergrens,
   en table.data draagt min-width: 640px. Op een telefoon duwde de facts-tabel
   de kolom daarmee naar 640 px en liep de hele hotelpagina horizontaal over.
   De tabel hoort te schuiven binnen .table-scroll, niet de pagina mee te
   nemen. Zie ook .table-scroll verderop. */
.columns {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
}

.columns > * {
    min-width: 0;
}

.answer-first {
    font-size: 18px;
    line-height: 1.6;
    max-width: var(--content-column);
}

.answer-first strong {
    font-weight: 700;
}

.empty-state {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-slate);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.author-block {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
    margin-top: var(--space-10);
    font-size: 15px;
    color: var(--color-slate);
}

.author-block svg {
    width: 40px;
    height: 40px;
    flex: none;
    color: var(--color-slate);
}

.author-block strong {
    color: var(--color-ink);
}

.nearby-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.nearby-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-white);
    min-width: 0;
}

.nearby-card h4 {
    margin: 0 0 4px;
    font-size: 17px;
}

.nearby-card h4 a {
    color: var(--color-ink);
    text-decoration: none;
}

.nearby-card h4 a:hover {
    color: var(--color-brick);
}

.nearby-card__reason {
    margin: 0 0 var(--space-3);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-teal);
}

.nearby-card p {
    font-size: 14px;
    color: var(--color-slate);
    margin: 0 0 var(--space-3);
}

.stat-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-8);
}

.stat {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    min-width: 0;
}

.stat dt {
    font-size: 13px;
    color: var(--color-slate);
    margin-bottom: 2px;
}

.stat dd {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* ---------- tablet ---------- */
@media (min-width: 48rem) {
    body {
        font-size: 17px;
        line-height: 1.7;
    }

    .container {
        width: min(100% - 64px, var(--container));
    }

    .prose p,
    .prose li {
        font-size: 17px;
    }

    .section {
        padding-block: var(--space-16);
    }

    .section--tight {
        padding-block: var(--space-12);
    }

    .hero--image .hero__overlay {
        padding: var(--space-10);
    }

    .hero__lead {
        font-size: 19px;
    }

    .entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nearby-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr;
    }

    .stat-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .columns--sidebar {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

/* ---------- desktop ---------- */
@media (min-width: 64rem) {
    .site-header__inner {
        min-height: 84px;
        padding-block: var(--space-4);
    }

    .nav-toggle {
        display: none;
    }

    /* De basisregel zet flex: 0 0 100% zodat de nav op mobiel een eigen regel
       krijgt. Op desktop moet die basis terug naar de inhoudsbreedte, anders
       eist de nav de hele rij op, valt hij onder het logo en doet
       margin-left: auto niets. */
    .site-nav {
        display: block;
        flex: 0 1 auto;
        margin-left: auto;
        padding-bottom: 0;
    }

    .site-nav__list {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: var(--space-6);
        align-items: center;
    }

    .site-nav__list a {
        border-bottom: 0;
        min-height: 0;
        line-height: 1.5;
        padding: 6px 0;
    }

    /* Op desktop hangt het submenu als paneel onder zijn ouder. De hele li is
       de hoverzone, inclusief de ruimte tussen link en paneel, anders klapt het
       dicht zodra de muis de gap oversteekt. */
    .site-nav__list > .has-sub {
        position: relative;
        flex-wrap: nowrap;
        gap: 2px;
    }

    .sub-toggle {
        width: 22px;
        min-height: 0;
        padding: 6px 0;
        border-bottom: 0;
    }

    .submenu {
        position: absolute;
        top: 100%;
        left: calc(var(--space-4) * -1);
        min-width: 15rem;
        margin: 0;
        padding: var(--space-2) 0;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: 0 14px 34px rgba(19, 32, 44, 0.14);
        z-index: 50;
    }

    .has-sub:hover > .submenu,
    .has-sub:focus-within > .submenu,
    .submenu.is-open {
        display: block;
    }

    .site-nav__list .submenu a {
        padding: 8px var(--space-4);
        min-height: 0;
        line-height: 1.45;
        white-space: nowrap;
    }

    .site-nav__list .submenu a:hover {
        background: var(--color-parchment);
    }

    .nav-cta {
        margin-top: 0;
        margin-left: var(--space-2);
    }

    .logo {
        font-size: 21px;
    }

    .logo svg {
        width: 30px;
        height: 30px;
    }

    .hero--image .hero__overlay {
        padding: var(--space-12);
        background: linear-gradient(
            100deg,
            rgba(19, 32, 44, 0.94) 0%,
            rgba(19, 32, 44, 0.88) 42%,
            rgba(19, 32, 44, 0.78) 66%,
            rgba(19, 32, 44, 0.4) 100%
        );
    }

    .card-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .entry-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .nearby-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .columns--split {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- print ---------- */
@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .table-tools {
        display: none;
    }
}


/* ---------- hotelbeeld: foto of kaart ---------- */

/* De kaartjes zijn licht getekend op perkament. De donkere achtergrond van
   .card-media is bedoeld voor fotografie en zou hier als een rand oplichten
   tijdens het laden. */
.card-media--map {
    background: var(--color-parchment);
    position: relative;
}

/* Een lezer moet niet hoeven raden of dit een foto van het pand is. Het is een
   kaart, en dat staat er. */
.card-media--map::after {
    content: "Map";
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(19, 32, 44, 0.78);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* ---------- hero met de kaart ernaast ---------- */

/* Achter de tekst kan deze kaart niet: hij is licht en fijn getekend, dus daar
   is hij zowel onleesbaar als te zwak van contrast. Ernaast wel. */
.hero--split {
    background: var(--color-parchment);
    padding-block: var(--space-10) var(--space-12);
}

/* .hero__eyebrow is #f2c9c2 en .hero__lead is #e4eaee: allebei bedoeld voor
   witte tekst op de donkere sluier van .hero--image. Op perkament halen ze
   ongeveer 1,2:1 en zijn ze onzichtbaar. Deze hero staat op perkament, dus de
   tekstkleuren gaan mee met .hero--plain. */
.hero--split .hero__eyebrow {
    color: #8a5a52;
}

.hero--split h1 {
    color: var(--color-ink);
}

.hero--split .hero__lead {
    color: var(--color-slate);
    font-size: 18px;
}

.hero--split__inner {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

.hero--split__map,
.map-figure {
    margin: 0;
    min-width: 0;
}

.hero--split__map img,
.map-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-white);
}

.hero--split__map figcaption,
.map-figure figcaption {
    margin-top: var(--space-2);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-slate);
}

/* De kaart staat op een pagina met een fotohero onder de kop "What is around
   the corner", boven de lijst met herkenningspunten die hem uitlegt. */
.map-figure {
    margin: var(--space-4) 0 var(--space-5);
    max-width: 640px;
}

/* ---------- herkenningspunten ---------- */
.landmark-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.landmark-list li {
    margin: 0;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
}

.landmark-list svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    color: var(--color-brick);
}

.landmark-list b {
    font-weight: 700;
}

.landmark-list span {
    display: block;
    font-size: 14px;
    color: var(--color-slate);
}

/* ---------- compacte CTA ---------- */
.button-primary--sm {
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
}

.cell-cta {
    white-space: nowrap;
}

.nearby-card__meta {
    margin-bottom: var(--space-4);
}

.nearby-card__foot {
    margin-top: auto;
}

.nearby-card {
    display: flex;
    flex-direction: column;
}

/* ---------- FAQ ---------- */

/* Elke vraag is een eigen kaartje met een ronde knop, in plaats van regels
   tekst met een streepje ertussen. Open staat op perkament, zodat te zien is
   welke vraag openstaat zonder de tekst te lezen. */
.faq {
    border-top: 0;
    display: grid;
    gap: var(--space-3);
}

.faq details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: border-color 180ms ease, background-color 180ms ease;
}

.faq details:hover {
    border-color: var(--color-border-strong);
}

.faq details[open] {
    background: var(--color-parchment);
    border-color: var(--color-border-strong);
}

.faq summary {
    padding: var(--space-4) 58px var(--space-4) var(--space-4);
}

.faq summary::after {
    right: var(--space-4);
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border: 0;
    border-radius: 999px;
    background: var(--color-teal-tint);
    transform: none;
    transition: background-color 180ms ease;
}

/* De chevron zelf, binnen die ronde knop. */
.faq summary::before {
    content: "";
    position: absolute;
    right: calc(var(--space-4) + 10px);
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid var(--color-teal);
    border-bottom: 2px solid var(--color-teal);
    transform: rotate(45deg);
    transition: transform 180ms ease;
    z-index: 1;
}

.faq details[open] summary::after {
    background: var(--color-teal);
    transform: none;
}

.faq details[open] summary::before {
    margin-top: -3px;
    transform: rotate(-135deg);
    border-color: var(--color-white);
}

.faq details > div {
    padding: 0 var(--space-4) var(--space-4);
}

@media (min-width: 48rem) {
    .hero--split__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: var(--space-10);
    }

    .landmark-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------- knopkleur wint van de context ---------- */

/* `.button-primary` is een enkele class en verliest van elke contextregel met
   een elementselector erin: `table.data a` (0,1,1) zette de boekknop in de
   vergelijkingstabel op inktkleur, op een rood vlak. `.section--ink a` doet
   hetzelfde met roze. Deze regel is even specifiek of specifieker en staat
   achteraan, dus hij wint zonder !important. */
a.button-primary,
a.button-primary:hover,
a.button-primary:visited,
a.button-primary:focus,
table.data a.button-primary,
.section--ink a.button-primary,
.prose a.button-primary {
    color: var(--color-white);
    text-decoration: none;
}

/* Een knop in een tabelcel mag niet over de volle celbreedte uitrekken. */
.cell-cta a.button-primary {
    display: inline-flex;
}


/* ---------- labels en subtekst in de vergelijkingstabel ---------- */

/* Het type stond als kale tekst tussen de cijfers en viel weg. Als label leest
   de kolom als een eigenschap in plaats van als nog een waarde. */
.type-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-teal-tint);
    color: var(--color-teal);
    border: 1px solid rgba(36, 122, 120, 0.22);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Een aparthotel of guest house is geen hotel; een eigen tint scheelt lezen. */
.type-tag--aparthotel {
    background: var(--color-amber-tint);
    color: #8a5d1c;
    border-color: rgba(197, 134, 44, 0.28);
}

.type-tag--guest-house,
.type-tag--hostel,
.type-tag--bed-and-breakfast {
    background: var(--color-parchment);
    color: #8a5a52;
    border-color: rgba(179, 65, 50, 0.2);
}

/* De afstand staat altijd op een eigen regel onder de stationsnaam. Inline
   liep hij bij een lange stationsnaam willekeurig mee terug, waardoor de kolom
   rafelig werd. */
.cell-sub {
    display: block;
    margin-top: 4px;
}

/* ---------- "This property appears in" ---------- */

/* Was een linklijst. Met het beeld van de doelpagina erbij herkent de lezer de
   pagina terug zodra hij er is. */
.appears-grid {
    display: grid;
    gap: var(--space-3);
}

.appears-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color 180ms ease, background-color 180ms ease;
}

.appears-card:hover {
    border-color: var(--color-border-strong);
    background: var(--color-parchment);
    color: var(--color-ink);
}

.appears-card .card-media {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.appears-card .card-media img {
    aspect-ratio: 4 / 3;
}

.appears-card > span {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
}


/* De naamkolom kreeg 117 px omdat de overige koppen breder waren dan hun
   waarden; hotelnamen braken daardoor af op een woord per regel. */
table.data td:first-child,
table.data th:first-child {
    min-width: 160px;
}


/* ---------- feitentabel op de hotelpagina ---------- */

/* Twee kolommen tekst lazen als een uitdraai. Een icoon per regel, labels waar
   de waarde categorisch is, en sterren waar een classificatie staat. */
.fact-key {
    width: 13rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fact-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--color-slate);
}

/* Sterclassificatie. De lege sterren staan er zodat "3-star" ook als drie van
   vijf leest, niet als drie op zichzelf. */
.stars {
    color: #c9971f;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 1;
}

.stars__empty {
    color: var(--color-border-strong);
}

.stars__label {
    margin-left: var(--space-2);
    font-size: 13px;
    color: var(--color-slate);
}

/* Het postcodedistrict als kaartlabel: strak vlakje, brede letterafstand. */
.postcode-tag {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-soft-grey);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--color-ink);
}

.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.status-tag svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.status-tag--yes {
    background: var(--color-teal-tint);
    color: var(--color-teal);
    border: 1px solid rgba(36, 122, 120, 0.22);
}

.status-tag--no {
    background: var(--color-soft-grey);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}


/* Dezelfde panelen, maar in de hoofdkolom: daar past een rij naast elkaar. */
@media (min-width: 48rem) {
    .appears-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

@media (min-width: 64rem) {
    .appears-grid--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.appears-card small {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: var(--color-slate);
    margin-top: 2px;
}


/* Icoon op de vier keuzekaarten van de homepage. Brick, want deze kaarten zijn
   de primaire ingang van de pagina; de teal iconen elders zijn context. */
.entry-card__icon {
    width: 26px;
    height: 26px;
    color: var(--color-brick);
    margin-bottom: var(--space-2);
    display: block;
}


/* ---------- afstandslabel ---------- */

/* De afstand is het getal waarop iemand scant. Als losse tekst achter een naam
   liep hij mee terug in de regel; als label staat hij altijd op dezelfde plek
   en is hij op een rij kaarten in een oogopslag te vergelijken. */
.dist-pill {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-parchment);
    border: 1px solid var(--color-border);
    color: var(--color-slate);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
    vertical-align: 1px;
}

/* In de tabel staat hij op een eigen regel, dus daar hoort links geen marge. */
.cell-sub .dist-pill,
td > .dist-pill {
    margin-left: 0;
}