/* Herberge: fine hotels of Schwartzistan. An editorial booking site: ivory ground, near-black ink, a brass accent,
   Cormorant Garamond for display and Jost for everything a guest has to read quickly. White space is the luxury.
   Overrides the archive typography of base.css inside its own shell only. */

.shell-herberge {
  --hb-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --hb-sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --hb-ink: #1c1b19;
  --hb-muted: #6f6a62;
  --hb-line: #e6e1d8;
  --hb-bg: #fbf9f5;
  --hb-card: #ffffff;
  --hb-dark: #1e2420;
  --hb-brass: #9a7a4a;
  --hb-brass-soft: #efe6d6;
  --hb-link: #1c1b19;
  --hb-good: #3f6b4f;
  --hb-warn: #9b3f25;
}
.shell-herberge body { background: var(--hb-bg); color: var(--hb-ink); font: 300 16px/1.6 var(--hb-sans); font-variant-numeric: lining-nums; letter-spacing: .005em; }
.shell-herberge main { max-width: 1240px; padding: 1.5rem 1.5rem 4rem; }
.shell-herberge main p, .shell-herberge main li, .shell-herberge main dd, .shell-herberge main dt { max-width: none; }
.shell-herberge h1, .shell-herberge h2, .shell-herberge h3 { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); letter-spacing: 0; line-height: 1.1; }
.shell-herberge h1 { font-size: 2.9rem; }
.shell-herberge h2 { font-size: 2rem; margin-top: 0; }
.shell-herberge h3 { font-size: 1.4rem; margin: 0 0 .25rem; }
.shell-herberge a { color: var(--hb-link); text-decoration: underline; text-decoration-color: var(--hb-line); text-underline-offset: 3px; }
.shell-herberge a:hover { text-decoration-color: var(--hb-brass); }
.shell-herberge h3 a, .shell-herberge h1 a { text-decoration: none; }
.shell-herberge b { font-weight: 500; }

/* ---------- header ---------- */
.hb-top { background: var(--hb-bg); border-bottom: 1px solid var(--hb-line); padding: 0 1.5rem 1rem; }
.hb-bar { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 2.2rem; padding: 1.1rem 0 .9rem; }
.hb-logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-word { font: 500 1.9rem/1 var(--hb-serif); letter-spacing: .14em; text-transform: uppercase; }
.hb-mark { width: 22px; height: 28px; border: 1.5px solid var(--hb-brass); border-radius: 11px 11px 0 0; position: relative; flex: none; }
.hb-mark::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 11px; margin-left: -3px; border: 1.5px solid var(--hb-brass); border-bottom: 0; border-radius: 3px 3px 0 0; }
.hb-nav { display: flex; gap: 1.6rem; font: 400 .78rem var(--hb-sans); text-transform: uppercase; letter-spacing: .16em; }
.hb-nav a { color: var(--hb-ink); text-decoration: none; }
.hb-nav a:hover { color: var(--hb-brass); }
.hb-actions { margin-left: auto; display: flex; align-items: center; gap: 1.3rem; font: 400 .78rem var(--hb-sans); text-transform: uppercase; letter-spacing: .14em; }
.hb-actions a { color: var(--hb-ink); text-decoration: none; }
.hb-actions .hb-signin { border: 1px solid var(--hb-ink); padding: .5rem 1rem; }
.hb-actions .hb-signin:hover { background: var(--hb-ink); color: #fff; }
.hb-strip { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 2.4fr 1fr 1fr auto; border: 1px solid var(--hb-line); background: #fff; }
.hb-strip label { padding: .5rem 1rem .55rem; display: flex; flex-direction: column; border-right: 1px solid var(--hb-line); min-width: 0; }
.hb-strip span { font-size: .66rem; font-weight: 500; color: var(--hb-muted); text-transform: uppercase; letter-spacing: .16em; }
.hb-strip input, .hb-strip select { border: 0; padding: .15rem 0 0; font: 400 1rem var(--hb-sans); color: var(--hb-ink); background: transparent; width: 100%; outline: none; }
.hb-strip button { border: 0; background: var(--hb-dark); color: #fff; font: 400 .78rem var(--hb-sans); text-transform: uppercase; letter-spacing: .18em; padding: 0 2rem; cursor: pointer; }
.hb-strip button:hover { background: #000; }
body:has(.hb-home) .hb-strip, body:has(.hb-bookpage) .hb-strip, body:has(.hb-confirmpage) .hb-strip { display: none; }
body:has(.hb-home) .hb-top { border-bottom: 0; padding-bottom: 0; }

/* ---------- buttons, marks ---------- */
.hb-btn { display: inline-block; border: 1px solid var(--hb-dark); padding: .85rem 1.6rem; font: 400 .76rem var(--hb-sans); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; text-align: center; text-decoration: none !important; white-space: nowrap; border-radius: 0; }
.hb-btn-primary { background: var(--hb-dark); color: #fff !important; }
.hb-btn-primary:hover { background: #000; }
.hb-btn-ghost { background: transparent; color: var(--hb-ink) !important; }
.hb-btn-ghost:hover { background: var(--hb-ink); color: #fff !important; }
.hb-btn-block { display: block; width: 100%; margin-top: .6rem; }
.hb-btn-small { padding: .5rem .9rem; font-size: .68rem; }
.hb-btn-lg { padding: 1.05rem 2.2rem; }
.hb-textlink { font: 400 .76rem var(--hb-sans); text-transform: uppercase; letter-spacing: .16em; text-decoration: none !important; border-bottom: 1px solid var(--hb-brass); padding-bottom: 2px; }
.hb-score { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; border: 1px solid var(--hb-brass); color: var(--hb-ink); font: 500 1.15rem var(--hb-serif); border-radius: 50%; }
.hb-score-sm { min-width: 2rem; height: 2rem; font-size: .95rem; }
.hb-score-lg { min-width: 3.2rem; height: 3.2rem; font-size: 1.4rem; }
.hb-score-xl { min-width: 4.4rem; height: 4.4rem; font-size: 2rem; }
.hb-verdict { font: 500 1.15rem var(--hb-serif); color: var(--hb-ink); margin: 0; }
.hb-verdict-lg { font-size: 1.6rem; }
.hb-scoreline { display: flex; align-items: center; gap: .55rem; margin: 0; flex-wrap: wrap; }
.hb-stars { color: var(--hb-brass); letter-spacing: .18em; font-size: .72rem; white-space: nowrap; }
.hb-stars-lg { font-size: .9rem; margin: 0 0 .5rem; }
.hb-muted { color: var(--hb-muted); }
.hb-good { color: var(--hb-good); }
.hb-urgent { color: var(--hb-warn); font-size: .85rem; margin: .3rem 0 0; font-style: italic; font-family: var(--hb-serif); font-size: 1.05rem; }
.hb-tag { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; padding: .15rem .5rem; border: 1px solid var(--hb-line); color: var(--hb-muted); }
.hb-tag-full { color: var(--hb-warn); border-color: #e7c9bd; }
.hb-tag-warn { color: #7d5a1c; border-color: #e6d4b0; }
.hb-tag-ok { color: var(--hb-good); border-color: #c9dccf; }
.hb-chips { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.hb-chips li { font-size: .8rem; color: var(--hb-muted); margin: 0; }
.hb-chips li + li::before { content: "·"; margin-right: .9rem; color: var(--hb-brass); }
.hb-chips li::first-letter { text-transform: uppercase; }
.hb-chips-lg li { font-size: .95rem; color: var(--hb-ink); }
.hb-price { margin: .3rem 0 0; font: 500 1.6rem var(--hb-serif); }
.hb-price b { font-weight: 500; }
.hb-price-lg { font-size: 2.2rem; margin: 0; }
.hb-tax { margin: 0; font-size: .78rem; color: var(--hb-muted); }
.hb-from { margin: .3rem 0 0; }
.hb-fineprint { font-size: .8rem; color: var(--hb-muted); margin-top: 1.2rem; }
.hb-kicker { font: 400 .72rem var(--hb-sans); text-transform: uppercase; letter-spacing: .22em; color: var(--hb-brass); margin: 0 0 .7rem; }
.hb-eyebrow { font: 400 .74rem var(--hb-sans); text-transform: uppercase; letter-spacing: .22em; margin: 0 0 1rem; }
.hb-lede { font: 400 1.35rem/1.45 var(--hb-serif); color: var(--hb-muted); margin: .4rem 0 1.4rem; }
.hb-crumbs { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--hb-muted); margin: 0 0 1.4rem; }
.hb-crumbs a { text-decoration: none; color: var(--hb-muted); }
.hb-crumbs span { margin: 0 .5rem; color: var(--hb-brass); }
.hb-alert { border-left: 2px solid var(--hb-brass); padding: .4rem 0 .4rem 1rem; font-size: .92rem; margin: .8rem 0; }
.hb-alert-strong { border-left-color: var(--hb-warn); }
.hb-h-small { font: 400 .74rem var(--hb-sans) !important; text-transform: uppercase; letter-spacing: .2em; color: var(--hb-muted) !important; margin: 1.8rem 0 .8rem !important; }

/* ---------- search fields ---------- */
.hb-search { display: grid; grid-template-columns: 2fr 1fr 1fr auto; background: #fff; border: 1px solid var(--hb-line); margin: 0 0 1.6rem; }
.hb-field { display: flex; flex-direction: column; padding: .55rem 1rem .6rem; margin: 0; min-width: 0; border-right: 1px solid var(--hb-line); }
.hb-field span { font-size: .66rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--hb-muted); }
.hb-field input, .hb-field select, .hb-field textarea { border: 0; font: 400 1rem var(--hb-sans); color: var(--hb-ink); background: transparent; padding: .2rem 0 0; outline: none; width: 100%; }
.hb-field small { color: var(--hb-muted); font-size: .78rem; }
.hb-search .hb-btn { border: 0; }
.hb-search-inline { margin-bottom: 1.4rem; }

/* ---------- home ---------- */
.hb-hero-photo-bg { position: relative; margin: 0 calc(50% - 50vw) 0; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: var(--hb-dark); margin-top: -1.5rem; }
.hb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.hb-hero-photo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 22, 20, .78), rgba(20, 22, 20, .1) 65%); }
.hb-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 5rem 1.5rem 2.6rem; color: #fff; }
.hb-hero-inner h1 { color: #fff; font-size: 4.2rem; font-weight: 400; max-width: 14ch; margin: 0 0 .6rem; }
.hb-hero-inner .hb-lede { color: rgba(255, 255, 255, .86); max-width: 46ch; }
.hb-hero-inner .hb-eyebrow { color: #e9dcc3; }
.hb-hero-inner .hb-search { border: 0; margin: 1.4rem 0 0; }
.hb-trust { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 2.2rem 0; margin: 0 0 3rem; border-bottom: 1px solid var(--hb-line); }
.hb-trust li { margin: 0; color: var(--hb-muted); font-size: .92rem; }
.hb-trust b { display: block; font: 500 1.35rem var(--hb-serif); color: var(--hb-ink); margin-bottom: .2rem; }

.hb-collection { margin: 0 0 4.5rem; }
.hb-collection-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 2rem; margin-bottom: 1.6rem; }
.hb-collection-head .hb-kicker, .hb-collection-head h2, .hb-collection-head h1, .hb-collection-head > p { grid-column: 1; }
.hb-collection-head h2 { font-size: 2.6rem; margin: 0 0 .3rem; }
.hb-collection-head > p { color: var(--hb-muted); margin: 0; font: 400 1.2rem var(--hb-serif); }
.hb-collection-head .hb-textlink { grid-column: 2; grid-row: 1 / 5; align-self: end; }
.hb-collection-head-lg { display: block; text-align: center; max-width: 760px; margin: 1rem auto 3rem; }
.hb-collection-head-lg h1 { font-size: 3.6rem; margin-bottom: .4rem; }
.hb-colnav { display: flex; justify-content: center; gap: 1.6rem; margin-top: 1.4rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; flex-wrap: wrap; }
.hb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2.2rem 1.6rem; }
.hb-cards-4 { grid-template-columns: repeat(4, 1fr); }
.hb-cards-3 { grid-template-columns: repeat(3, 1fr); }
.hb-card { background: transparent; display: flex; flex-direction: column; }
.hb-card-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e7e2d9; }
.hb-cards-3 .hb-card-photo { aspect-ratio: 3 / 2; }
.hb-card-photo img, .hb-row-photo img, .hb-mini-cards img, .hb-summary-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.hb-card:hover .hb-card-photo img { transform: scale(1.03); }
.hb-card-body { padding: .9rem 0 0; }
.hb-card-where { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--hb-muted); margin: 0 0 .35rem; }
.hb-card-body h3 { font-size: 1.5rem; }
.hb-card-foot { display: flex; justify-content: space-between; gap: .8rem; font-size: .85rem; color: var(--hb-muted); margin: .4rem 0 0; border-top: 1px solid var(--hb-line); padding-top: .5rem; }
.hb-more { margin-top: 1.4rem; }

.hb-parade { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; background: var(--hb-dark); color: #e8e4dc; padding: 3.2rem; margin: 0 0 4.5rem; }
.hb-parade h2 { color: #fff; font-size: 2.6rem; }
.hb-parade .hb-kicker { color: #d6bf92; }
.hb-parade p { color: #c9c3b8; }
.hb-parade .hb-btn-ghost { color: #fff !important; border-color: #fff; margin-top: .8rem; }
.hb-parade .hb-btn-ghost:hover { background: #fff; color: var(--hb-ink) !important; }
.hb-parade-list { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.hb-parade-list li { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); margin: 0; }
.hb-parade-list a { color: #fff; font: 500 1.3rem var(--hb-serif); text-decoration: none; }
.hb-parade-list .hb-muted { color: #a9a296; font-size: .85rem; grid-column: 1; }
.hb-parade-rate { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: .9rem; color: #e9dcc3; text-align: right; }
.hb-parade-list li.is-full .hb-parade-rate { color: #c98f7b; font-style: italic; }
.hb-parade-list .hb-stars { font-size: .65rem; }

.hb-dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--hb-line); border-left: 1px solid var(--hb-line); }
.hb-dest-tile { display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; align-items: center; padding: 1.1rem 1.2rem; border-right: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); color: var(--hb-ink) !important; text-decoration: none !important; background: #fff; }
.hb-dest-tile:hover { background: var(--hb-brass-soft); }
.hb-dest-tile img { grid-row: 1 / 4; opacity: .85; }
.hb-dest-name { font: 500 1.35rem var(--hb-serif); }
.hb-dest-meta { font-size: .78rem; color: var(--hb-muted); }
.hb-dest-price { font-size: .8rem; color: var(--hb-brass); }
.hb-townlist { columns: 4 11rem; list-style: none; padding: 0; font-size: .95rem; }
.hb-townlist li { margin: 0 0 .35rem; break-inside: avoid; }
.hb-found-towns { list-style: none; padding: 0; border-top: 1px solid var(--hb-line); }
.hb-found-towns li { padding: .8rem 0; border-bottom: 1px solid var(--hb-line); margin: 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.hb-found-towns a { display: inline-flex; gap: .6rem; align-items: center; text-decoration: none; }
.hb-found-towns .hb-dest-name { font-size: 1.4rem; }

.hb-notice { border-top: 1px solid var(--hb-ink); padding: 2rem 0 0; }
.hb-steps { padding-left: 1.2rem; margin: 0; }
.hb-steps li { margin-bottom: .7rem; }
.hb-steps-row { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; counter-reset: s; }
.hb-steps-row li { counter-increment: s; color: var(--hb-muted); font-size: .92rem; }
.hb-steps-row li::before { content: "0" counter(s); display: block; font: 400 2.4rem var(--hb-serif); color: var(--hb-brass); margin-bottom: .3rem; }
.hb-steps-row b { display: block; font: 500 1.35rem var(--hb-serif); color: var(--hb-ink); }

/* ---------- panels, results ---------- */
.hb-panel { background: #fff; border: 1px solid var(--hb-line); padding: 2.4rem; margin-bottom: 3rem; }
.hb-section { margin: 0 0 3rem; }
.hb-section-head { margin-bottom: 1.2rem; }
.hb-section-head h2 { font-size: 2.1rem; margin: 0 0 .2rem; }
.hb-section-head p { color: var(--hb-muted); margin: 0; }
.hb-layout { display: grid; grid-template-columns: 290px 1fr; gap: 2.6rem; align-items: start; }
.hb-layout-wide { grid-template-columns: 1fr 310px; }
.hb-layout-wide .hb-side { order: 2; }
.hb-layout-book { grid-template-columns: 1fr 340px; }
.hb-layout-info { grid-template-columns: 240px 1fr; }
.hb-side { display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: 1rem; }
.hb-facts-card { background: #fff; border: 1px solid var(--hb-line); padding: 1.3rem 1.4rem; }
.hb-facts-card h2 { font: 400 .72rem var(--hb-sans); text-transform: uppercase; letter-spacing: .2em; color: var(--hb-muted); margin: 0 0 .9rem; }
.hb-facts-card h2 + .hb-filters + h2 { margin-top: 1.4rem; }
.hb-dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: .9rem; }
.hb-dl dt { color: var(--hb-muted); }
.hb-dl dd { margin: 0; text-align: right; }
.hb-side-links { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0 0; font-size: .9rem; }
.hb-map { margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--hb-line); position: relative; }
.hb-map img { width: 100%; height: 200px; object-fit: cover; object-position: 50% 45%; display: block; transform: scale(1.4); transform-origin: 50% 45%; filter: grayscale(.35) sepia(.12) contrast(1.02); }
.hb-map figcaption { position: relative; background: #fff; font-size: .8rem; padding: .6rem .9rem; margin: 0; color: var(--hb-muted); border-top: 1px solid var(--hb-line); }
.hb-map-wide img { height: 340px; transform: scale(1.25); }
.hb-filters { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.hb-filters li { margin: 0; }
.hb-filters a { display: block; padding: .35rem 0; color: var(--hb-ink); font-size: .92rem; text-decoration: none; }
.hb-filters a:hover { color: var(--hb-brass); }
.hb-filters a.is-current { font-weight: 500; }
.hb-filters a::before { content: ""; display: inline-block; width: .75rem; height: .75rem; border: 1px solid var(--hb-muted); margin-right: .7rem; vertical-align: -1px; }
.hb-filters a.is-current::before { background: var(--hb-ink); border-color: var(--hb-ink); box-shadow: inset 0 0 0 2px #fff; }
.hb-note p { font-size: .92rem; }
.hb-results-head h1 { font-size: 2.6rem; margin-bottom: .4rem; }
.hb-count { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--hb-muted); margin: 0 0 .6rem; }
.hb-list { display: flex; flex-direction: column; }
.hb-row { display: grid; grid-template-columns: 300px 1fr 210px; gap: 1.6rem; padding: 1.6rem 0; border-bottom: 1px solid var(--hb-line); }
.hb-list .hb-row:first-child { border-top: 1px solid var(--hb-line); }
.hb-row.is-full { opacity: .6; }
.hb-row-compact { grid-template-columns: 180px 1fr 190px; }
.hb-row-photo { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #e7e2d9; }
.hb-row-main h3 { font-size: 1.75rem; }
.hb-row-where { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--hb-muted); margin: .1rem 0 .4rem; }
.hb-row-main p { margin: .25rem 0; font-size: .92rem; }
.hb-room { color: var(--hb-ink); }
.hb-row-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hb-row-side .hb-scoreline { justify-content: flex-end; }
.hb-row-side p { margin: 0; }
.hb-row-side .hb-btn { margin-top: auto; }
.hb-for { margin-top: 1rem !important; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.hb-soldout { color: var(--hb-warn); font: italic 500 1.2rem var(--hb-serif); margin: 1rem 0 .6rem !important; }
.hb-empty { border: 1px solid var(--hb-line); padding: 2rem; text-align: center; background: #fff; }

/* the date strip */
.hb-flex { display: flex; align-items: stretch; margin: 0 0 2rem; overflow-x: auto; border: 1px solid var(--hb-line); background: #fff; }
.hb-flex-step { display: flex; align-items: center; justify-content: center; min-width: 2.6rem; font: 400 1.6rem var(--hb-serif); color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-flex-day-tile { flex: 1 0 118px; display: flex; flex-direction: column; padding: .7rem .9rem; border-left: 1px solid var(--hb-line); color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-flex-day-tile:hover { background: var(--hb-brass-soft); }
.hb-flex-day-tile.is-current { background: var(--hb-dark); color: #fff !important; }
.hb-flex-day-tile.is-current .hb-flex-day, .hb-flex-day-tile.is-current .hb-flex-price { color: #e9dcc3; }
.hb-flex-day { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--hb-muted); }
.hb-flex-date { font: 500 1.05rem var(--hb-serif); }
.hb-flex-hol { font-size: .7rem; color: var(--hb-warn); font-style: italic; }
.hb-flex-price { font-size: .82rem; margin-top: auto; color: var(--hb-brass); }
.hb-flex-col { flex-direction: column; list-style: none; padding: 0; margin: 0; overflow: visible; border: 0; }
.hb-flex-col li { margin: 0; border-bottom: 1px solid var(--hb-line); }
.hb-flex-col li:last-child { border-bottom: 0; }
.hb-flex-col a { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .5rem 0; color: var(--hb-ink) !important; text-decoration: none !important; font-size: .88rem; }
.hb-flex-col .hb-flex-day { text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--hb-ink); }
.hb-flex-col .hb-flex-hol { grid-column: 1; }
.hb-flex-col .hb-flex-price { grid-column: 2; grid-row: 1; }

/* ---------- hotel page ---------- */
.hb-hotel-hero { position: relative; margin: 0 calc(50% - 50vw) 3rem; height: 62vh; min-height: 420px; max-height: 680px; overflow: hidden; background: var(--hb-dark); }
.hb-hotel-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .78; display: block; }
.hb-hotel-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 20, 18, .7), rgba(18, 20, 18, 0) 55%); }
.hb-hotel-hero-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem 2.4rem; color: #fff; }
.hb-hotel-hero-text h1 { color: #fff; font-size: 4rem; font-weight: 400; margin: 0 0 .4rem; }
.hb-hotel-hero-text .hb-stars { color: #e9dcc3; }
.hb-hotel-hero-text .hb-address, .hb-hotel-hero-text .hb-address a { color: rgba(255, 255, 255, .88); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; text-decoration: none; margin: 0; }
.hb-hotel-top { display: grid; grid-template-columns: 1fr 360px; gap: 4rem; margin-bottom: 3rem; align-items: start; }
.hb-standfirst { font: 400 1.7rem/1.4 var(--hb-serif); color: var(--hb-ink); margin: 0 0 1.6rem; }
.hb-head-score { display: flex; align-items: center; gap: .9rem; padding: 1rem 0; border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); }
.hb-head-score p { margin: 0; }
.hb-includes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem; }
.hb-includes li { margin: 0; padding-left: 1.6rem; position: relative; font-size: .95rem; }
.hb-includes li::before { content: ""; position: absolute; left: 0; top: .72em; width: .9rem; height: 1px; background: var(--hb-brass); }
.hb-book-box { background: #fff; border: 1px solid var(--hb-line); padding: 1.6rem; position: sticky; top: 1rem; }
.hb-book-box p { margin: 0; }
.hb-book-mini { margin: 1.2rem 0 0; border-top: 1px solid var(--hb-line); }
.hb-book-mini .hb-field { border: 1px solid var(--hb-line); border-top: 0; }
.hb-book-mini .hb-field:first-of-type { border-top: 1px solid var(--hb-line); margin-top: 1.2rem; }
.hb-ticks { list-style: none; padding: 0; margin: 1.2rem 0 0; font-size: .86rem; color: var(--hb-muted); }
.hb-ticks li { position: relative; padding-left: 1.4rem; margin-bottom: .35rem; }
.hb-ticks li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .55rem; height: .28rem; border-left: 1px solid var(--hb-good); border-bottom: 1px solid var(--hb-good); transform: rotate(-45deg); }
.hb-reg { font-size: .72rem; color: var(--hb-muted); margin-top: 1rem !important; border-top: 1px solid var(--hb-line); padding-top: .8rem; letter-spacing: .04em; }
.hb-tabs { display: flex; gap: 2rem; border-bottom: 1px solid var(--hb-line); margin: 0 0 2.2rem; overflow-x: auto; position: sticky; top: 0; background: var(--hb-bg); z-index: 5; }
.hb-tabs a { padding: .95rem 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--hb-ink); white-space: nowrap; border-bottom: 1px solid transparent; text-decoration: none; }
.hb-tabs a:hover { border-bottom-color: var(--hb-ink); }
.hb-block { padding: 0 0 2.6rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--hb-line); scroll-margin-top: 4rem; }
.hb-block h2 { font-size: 2.2rem; margin: 0 0 .8rem; }
.hb-block > h2:not(:first-child) { margin-top: 2.2rem; }
.hb-cal { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--hb-line); border-left: 1px solid var(--hb-line); }
.hb-cal li { margin: 0; }
.hb-cal a { display: flex; flex-direction: column; min-height: 5.8rem; padding: .55rem .6rem; border-right: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); color: var(--hb-ink) !important; text-decoration: none !important; font-size: .8rem; background: #fff; }
.hb-cal a:hover { background: var(--hb-brass-soft); }
.hb-cal .is-full a { background: #f4f1ec; color: var(--hb-muted) !important; }
.hb-cal-day { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: var(--hb-muted); }
.hb-cal-date { font-size: .78rem; }
.hb-cal-price { font: 500 1.2rem var(--hb-serif); margin-top: auto; }
.hb-cal .hb-urgent { font-size: .8rem; margin: 0; }
.hb-table-wrap { overflow-x: auto; }
.hb-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hb-table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--hb-muted); font-weight: 400; padding: .6rem .7rem; border-bottom: 1px solid var(--hb-ink); }
.hb-table td { padding: .9rem .7rem; border-bottom: 1px solid var(--hb-line); vertical-align: middle; }
.hb-table tr.is-full td { color: var(--hb-muted); }
.hb-table .num { text-align: right; }
.hb-rooms td b { font: 500 1.25rem var(--hb-serif); }
.hb-rules { display: grid; grid-template-columns: 180px 1fr; gap: .9rem 2rem; margin: 0; }
.hb-rules dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; padding-top: .2rem; }
.hb-rules dd { margin: 0; color: #3d3a35; }
.hb-review-summary { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; }
.hb-review-summary p { margin: 0; }
.hb-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.6rem; }
.hb-review { border-top: 1px solid var(--hb-line); padding-top: 1.1rem; }
.hb-review header { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.hb-review header p { margin: 0; font-size: .85rem; }
.hb-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--hb-brass-soft); color: var(--hb-brass); font: 500 .95rem var(--hb-serif); display: flex; align-items: center; justify-content: center; }
.hb-reviewer { font-weight: 500; }
.hb-review-meta { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--hb-muted); margin: 0 0 .5rem; }
.hb-review h3 { font-size: 1.45rem; font-style: italic; margin: 0 0 .5rem; }
.hb-liked, .hb-disliked { font-size: .92rem; margin: 0 0 .4rem; }
.hb-liked span, .hb-disliked span { font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; margin-right: .5rem; color: var(--hb-good); }
.hb-disliked span { color: var(--hb-warn); }
.hb-mini-list { list-style: none; padding: 0; margin: 0 0 .8rem; }
.hb-mini-list li { padding: .7rem 0; border-bottom: 1px solid var(--hb-line); margin: 0; font-size: .92rem; }
.hb-mini-list a { font: 500 1.2rem var(--hb-serif); text-decoration: none; margin-right: .5rem; }
.hb-mini-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.hb-mini-cards li { margin: 0; }
.hb-mini-cards a { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; column-gap: .8rem; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-mini-cards img { grid-row: 1 / 3; height: 60px; }
.hb-mini-name { font: 500 1.1rem var(--hb-serif); }
.hb-mini-meta { font-size: .78rem; color: var(--hb-muted); display: flex; align-items: center; gap: .4rem; }

/* ---------- booking form and confirmation ---------- */
.hb-progress { list-style: none; display: flex; gap: 0; padding: 0; margin: 0 0 2.4rem; counter-reset: step; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; border-bottom: 1px solid var(--hb-line); }
.hb-progress li { flex: 1; margin: 0; padding: .9rem 0; color: var(--hb-muted); counter-increment: step; border-bottom: 2px solid transparent; }
.hb-progress li::before { content: "0" counter(step) "  "; font-family: var(--hb-serif); font-size: 1rem; color: var(--hb-brass); margin-right: .5rem; }
.hb-progress .is-current { color: var(--hb-ink); border-bottom-color: var(--hb-ink); }
.hb-progress .is-done { color: var(--hb-ink); }
.hb-form fieldset { border: 0; border-top: 1px solid var(--hb-line); padding: 1.4rem 0 .6rem; margin: 0 0 1rem; }
.hb-form legend { font: 500 1.5rem var(--hb-serif); padding: 0; margin-bottom: .8rem; float: left; width: 100%; }
.hb-form .hb-field { border: 1px solid var(--hb-line); background: #fff; margin-bottom: .8rem; }
.hb-form .hb-field:focus-within { border-color: var(--hb-ink); }
.hb-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; clear: both; }
.hb-check { display: block; margin: .6rem 0 1.4rem; font-size: .92rem; }
.hb-summary-card img { height: 190px; margin-bottom: .9rem; }
.hb-summary-card h2 { font: 500 1.5rem var(--hb-serif) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--hb-ink) !important; margin: 0 !important; }
.hb-summary-card h2 a { text-decoration: none; }
.hb-summary-card p { margin: .2rem 0; }
.hb-summary-card .hb-dl { margin-top: 1rem; }
.hb-confirm { max-width: 880px; margin: 0 auto; text-align: center; border: 0; background: transparent; }
.hb-confirm h1 { font-size: 3.2rem; }
.hb-confirm-mark { display: block; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1px solid var(--hb-brass); position: relative; margin: 0 auto 1.4rem; }
.hb-confirm-mark::after { content: ""; position: absolute; left: 1.05rem; top: 1.05rem; width: 1.2rem; height: .6rem; border-left: 1.5px solid var(--hb-brass); border-bottom: 1.5px solid var(--hb-brass); transform: rotate(-45deg); }
.hb-confirm .hb-lede { color: var(--hb-ink); }
.hb-confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 2.4rem 0; text-align: left; border-top: 1px solid var(--hb-line); padding-top: 2rem; }
.hb-confirm-grid h2 { font-size: 1.6rem; }

/* ---------- company pages ---------- */
.hb-infonav { display: flex; flex-direction: column; gap: .1rem; }
.hb-infonav a { padding: .45rem 0; color: var(--hb-ink); font-size: .92rem; text-decoration: none; border-bottom: 1px solid var(--hb-line); }
.hb-infonav a:hover { color: var(--hb-brass); }
.hb-prose { max-width: 760px; }
.hb-prose h1 { font-size: 3rem; }
.hb-prose h2 { margin-top: 1.8rem; }
.hb-stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; border-top: 1px solid var(--hb-line); padding-top: 1rem; }
.hb-stats li { margin: 0; color: var(--hb-muted); font-size: .85rem; }
.hb-stats b { display: block; font: 500 2.2rem var(--hb-serif); color: var(--hb-ink); }
.hb-faq { border-bottom: 1px solid var(--hb-line); padding: 1rem 0; }
.hb-faq summary { font: 500 1.3rem var(--hb-serif); cursor: pointer; }
.hb-faq p { margin: .6rem 0 0; color: #3d3a35; }
.hb-legal li { margin-bottom: .8rem; }

/* ---------- footer ---------- */
.hb-foot { background: var(--hb-dark); color: #b8b2a7; padding: 3.6rem 1.5rem 1.8rem; margin-top: 3rem; font-size: .88rem; }
.hb-foot-cols { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; }
.hb-foot-cols section { display: flex; flex-direction: column; gap: .45rem; }
.hb-foot-cols h2 { font: 400 .7rem var(--hb-sans); text-transform: uppercase; letter-spacing: .2em; color: #d6bf92; margin: 0 0 .5rem; }
.hb-foot a { color: #d9d4ca; text-decoration: none; }
.hb-foot a:hover { color: #fff; }
.hb-foot-base { max-width: 1240px; margin: 2.8rem auto 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.2rem; }
.hb-foot-base p { margin: 0 0 .35rem; }
.hb-foot .vmt { color: #8d877c; font-family: var(--hb-sans); }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
  .hb-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .hb-cards-3 { grid-template-columns: repeat(2, 1fr); }
  .hb-parade { grid-template-columns: 1fr; padding: 2rem; }
  .hb-hotel-top { grid-template-columns: 1fr; gap: 2rem; }
  .hb-book-box { position: static; }
}
@media (max-width: 900px) {
  .hb-layout, .hb-layout-wide, .hb-layout-book, .hb-layout-info { grid-template-columns: 1fr; }
  .hb-side { position: static; order: 2; }
  .hb-row { grid-template-columns: 160px 1fr; }
  .hb-row-side { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
  .hb-row-side .hb-scoreline { justify-content: flex-start; }
  .hb-foot-cols { grid-template-columns: repeat(2, 1fr); }
  .hb-cal { grid-template-columns: repeat(4, 1fr); }
  .hb-nav { display: none; }
  .hb-reviews, .hb-includes { grid-template-columns: 1fr; }
  .hb-trust, .hb-steps-row { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
  .shell-herberge main { padding: 1rem 1rem 3rem; }
  .shell-herberge h1 { font-size: 2.2rem; }
  .hb-strip, .hb-search { grid-template-columns: 1fr 1fr; }
  .hb-strip-where, .hb-field-wide { grid-column: 1 / -1; }
  .hb-strip button, .hb-search .hb-btn { grid-column: 1 / -1; padding: .9rem; }
  .hb-hero-inner h1, .hb-hotel-hero-text h1 { font-size: 2.6rem; }
  .hb-cards-4, .hb-cards-3 { grid-template-columns: 1fr; }
  .hb-collection-head { display: block; }
  .hb-collection-head h2 { font-size: 2rem; }
  .hb-actions .hb-link { display: none; }
  .hb-rules { grid-template-columns: 1fr; }
  .hb-confirm-grid { grid-template-columns: 1fr; }
  .hb-cal { grid-template-columns: repeat(2, 1fr); }
  .hb-row { grid-template-columns: 1fr; }
  .hb-word { font-size: 1.4rem; }
}

/* ---------- confirmed bookings (herberge_booking) ---------- */
body:has(.hb-bookingpage) .hb-strip { display: none; }
.hb-confirmed { padding: 2rem 2.4rem; }
.hb-confirmed h1 { font-size: 2.6rem; margin: .3rem 0 .4rem; }
.hb-confirm-tag { display: inline-flex; align-items: center; gap: .6rem; font: 500 .72rem var(--hb-sans); text-transform: uppercase; letter-spacing: .18em; color: var(--hb-good); margin: 0; }
.hb-confirm-tag .hb-confirm-mark { width: 1.6rem; height: 1.6rem; margin: 0; border-color: var(--hb-good); }
.hb-confirm-tag .hb-confirm-mark::after { left: .42rem; top: .45rem; width: .6rem; height: .3rem; border-color: var(--hb-good); }
.hb-cancelled-tag { color: var(--hb-warn); }
.hb-refline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); }
.hb-refline dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--hb-muted); }
.hb-refline dd { margin: .2rem 0 0; font: 500 1.35rem var(--hb-serif); }
.hb-ref { font-family: ui-monospace, 'SF Mono', Menlo, monospace !important; letter-spacing: .06em; font-size: 1.05rem !important; }
.hb-actions-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.hb-btn-danger { background: transparent; color: var(--hb-warn) !important; border-color: var(--hb-warn); }
.hb-btn-danger:hover { background: var(--hb-warn); color: #fff !important; }
.hb-nights tfoot td { border-bottom: 0; padding: .5rem .7rem; }
.hb-nights tfoot tr:first-child td { padding-top: 1rem; }
.hb-nights .hb-total td { border-top: 1px solid var(--hb-ink); font-weight: 500; font-size: 1rem; padding-top: .8rem; }
.hb-letter blockquote { margin: 0; padding: 1.4rem 1.6rem; background: #fff; border: 1px solid var(--hb-line); border-left: 3px solid var(--hb-brass); font: italic 400 1.25rem/1.5 var(--hb-serif); }
.hb-letter blockquote p { margin: 0 0 .8rem; }
.hb-letter footer { font: 400 .85rem var(--hb-sans); font-style: normal; color: var(--hb-muted); }
.hb-voucher { background: #fff; border: 1px dashed var(--hb-brass); padding: 1.4rem; }
.hb-voucher h2 { font-size: 1.6rem; margin: .4rem 0 0; }
.hb-voucher-head { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--hb-muted); }
.hb-voucher-head .hb-mark { width: 14px; height: 18px; }
.hb-voucher-head .hb-mark::after { width: 4px; height: 7px; margin-left: -2px; }
.hb-barcode svg { display: block; width: 100%; height: 56px; margin: 1rem 0 .3rem; }
.hb-center { text-align: center; }
.hb-form-note { color: var(--hb-warn); font-size: .88rem; margin: -.2rem 0 .8rem; }
.hb-form button[disabled] { opacity: .45; cursor: not-allowed; }
.hb-manage { max-width: 820px; }
@media (max-width: 640px) {
  .hb-confirmed { padding: 1.4rem 1.1rem; }
  .hb-confirmed h1 { font-size: 2rem; }
  .hb-refline { grid-template-columns: 1fr; gap: .6rem; }
  .hb-actions-row .hb-btn { flex: 1 1 100%; }
}
@media print {
  .shell-herberge .hb-top, .shell-herberge .hb-foot, .hb-bookingpage .hb-main { display: none !important; }
  .hb-bookingpage .hb-layout { display: block; }
  .hb-voucher { max-width: 420px; margin: 0 auto; border: 1px solid #000; }
}
.hb-nights tfoot td { font-weight: 400; } .hb-nights .hb-total td { font-weight: 500; }