/* Guide + legal pages. Same family as the Where to Stay hub (/heidelberg/):
   paper/ink palette, Cormorant headings, photo hero, gold kickers.
   Markup contract: .topbar, .hero (or .hero--plain), .crumbs, main.wrap > nav.toc + article.article. */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap; src:url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  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:'Cormorant Garamond'; font-style:italic; font-weight:300 700; font-display:swap; src:url(/assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  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; }

:root{
  --paper:#F6F1E8; --paper-2:#EEE6D8; --card:#FBF8F2; --ink:#1D1915; --ink-2:#2A241F; --body:#3d362f;
  --muted:#6B6258; --gold:#B8973F; --gold-soft:#E2C97A; --wine:#7E2A1F;
  --line:rgba(29,25,21,0.14); --line-2:rgba(29,25,21,0.08);
  --serif:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --expo:cubic-bezier(0.16,1,0.3,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.7; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; }
a{ color:var(--wine); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--ink); }
img{ max-width:100%; height:auto; display:block; }
strong{ font-weight:600; color:var(--ink-2); }

/* ---------- top bar ---------- */
.topbar{ background:var(--ink); color:#fff; padding:16px 20px; position:relative; z-index:3; }
.topbar__inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ font-size:18px; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.brand:hover{ color:#fff; }
.brand__mark{ width:30px; height:35px; display:block; flex-shrink:0; }
.topbar a.back{ color:var(--gold-soft); font-size:14px; white-space:nowrap; }

/* ---------- hero ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; background:#2b2118;
  min-height:min(78vh,760px); min-height:min(78svh,760px); display:flex; align-items:flex-end; }
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__media img{ width:100%; height:112%; object-fit:cover; object-position:var(--focus,50% 55%); position:absolute; top:-6%; left:0; will-change:transform; }
.hero__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(18,13,9,0.55) 0%,rgba(18,13,9,0.25) 45%,rgba(18,13,9,0) 70%),
    linear-gradient(180deg,rgba(18,13,9,0.4) 0%,rgba(18,13,9,0.12) 30%,rgba(18,13,9,0.35) 55%,rgba(18,13,9,0.88) 100%); }
.hero__inner{ position:relative; width:100%; max-width:1240px; margin:0 auto; padding:110px 20px 36px; }
.hero__eyebrow{ text-shadow:0 1px 10px rgba(0,0,0,0.5); display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; margin-bottom:18px; }
.hero__eyebrow::before{ content:""; width:40px; height:1px; background:currentColor; }
.hero h1{ text-shadow:0 2px 24px rgba(0,0,0,0.35); font-family:var(--serif); font-weight:400; font-size:clamp(40px,8.4vw,96px); line-height:0.98; letter-spacing:-0.012em; max-width:15ch; }
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.1em; }
.hero h1 .line > span{ display:block; }
.hero h1 em{ font-style:italic; font-weight:300; }
.hero__foot{ margin-top:28px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.28); display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline; justify-content:space-between; }
.hero__meta{ font-size:15px; color:rgba(255,255,255,0.86); max-width:60ch; }
.hero__date{ font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.hero__credit{ position:absolute; right:12px; top:10px; font-size:10.5px; letter-spacing:0.04em; color:rgba(255,255,255,0.6); z-index:1; }
.hero__credit a{ color:inherit; text-underline-offset:2px; }
/* Legal pages: no photo, a quiet framed panel */
.hero--plain{ min-height:0; background:var(--ink); }
.hero--plain::before{ content:""; position:absolute; inset:12px; border:1px solid rgba(226,201,122,0.24); pointer-events:none; }
.hero--plain .hero__inner{ padding-top:72px; padding-bottom:40px; }
.hero--plain h1{ font-size:clamp(40px,7vw,80px); }
.anim .hero h1 .line > span{ transform:translateY(105%); }
.anim .hero__eyebrow, .anim .hero__foot{ opacity:0; }
.anim .hero__media img{ transform:scale(1.1); }

.crumbs{ max-width:1240px; margin:0 auto; padding:18px 20px 0; font-size:13px; color:var(--muted); }
.crumbs a{ color:var(--muted); }

/* ---------- layout: contents rail + article ---------- */
.wrap{ max-width:1240px; margin:0 auto; padding:24px 20px 80px; }
.article{ min-width:0; max-width:760px; counter-reset:sec; }
.article > section, .article > .sec{ margin-top:clamp(56px,8vw,88px); scroll-margin-top:24px; position:relative; }
.article > section:first-of-type{ margin-top:clamp(40px,6vw,64px); }

.intro{ font-family:var(--serif); font-size:clamp(22px,3vw,28px); line-height:1.4; font-weight:400; color:var(--ink-2); margin:8px 0 28px; }
.intro strong{ font-weight:600; font-style:italic; }

/* section headings: numbered kicker line drawn above every h2 */
.article > section > h2, .article > .sec > h2{ counter-increment:sec; font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,4.6vw,48px); line-height:1.06; letter-spacing:-0.008em; color:var(--ink); margin-bottom:18px; }
.article > section > h2::before, .article > .sec > h2::before{ content:counter(sec,decimal-leading-zero); display:flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:12px; letter-spacing:0.26em; color:var(--gold); font-weight:600; margin-bottom:14px;
  background:linear-gradient(var(--line),var(--line)) right center / calc(100% - 3.4em) 1px no-repeat; }
.article h3{ font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.2; margin:30px 0 8px; color:var(--ink); }
.article p{ margin-bottom:14px; color:var(--body); }
.article ul, .article ol{ padding-left:22px; margin-bottom:14px; color:var(--body); }
.article li{ margin-bottom:8px; }
.article li::marker{ color:var(--gold); }
.mask{ display:block; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.1em; }
.mask__in{ display:block; }

/* ---------- contents ---------- */
.toc{ border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:14px 0 10px; margin:0 0 8px; }
.toc h2{ font-family:var(--sans); font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 8px; padding:0; border:0; }
.toc ol, .toc ul{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.toc li{ counter-increment:toc; margin:0; }
.toc a{ display:flex; gap:12px; padding:7px 0; color:var(--ink-2); text-decoration:none; font-size:15px; line-height:1.35; border-bottom:1px solid var(--line-2); transition:color .3s var(--expo); }
.toc li:last-child a{ border-bottom:0; }
.toc a::before{ content:""; flex-shrink:0; width:10px; height:1px; margin-top:0.7em; background:var(--gold); transition:width .5s var(--expo); }
.toc a.is-on::before{ width:22px; }
.toc a:hover, .toc a.is-on{ color:var(--wine); }
.toc details summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.toc details summary::-webkit-details-marker{ display:none; }
.toc details summary::after{ content:"+"; font-size:20px; font-weight:300; color:var(--gold); line-height:1; transition:transform .5s var(--expo); }
.toc details[open] summary::after{ transform:rotate(45deg); }
.toc details summary h2{ margin:0; }
.toc details[open] summary h2{ margin-bottom:8px; }

/* ---------- photos inside the article ---------- */
.article figure{ margin:28px 0 30px; }
.article figure img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--paper-2); }
.article figure.tall img{ aspect-ratio:4/5; }
.article figure.pano img{ aspect-ratio:21/9; }
.article figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; font-size:13px; color:var(--muted); padding-top:10px; border-bottom:1px solid var(--line-2); padding-bottom:10px; }
.article figcaption small{ font-size:11px; color:var(--muted); opacity:.85; }
.article figcaption small a{ color:inherit; }
.figpair{ display:grid; gap:18px; margin:28px 0 30px; }
.figpair figure{ margin:0; }

/* ---------- shared blocks ---------- */
.facts{ background:var(--card); border:1px solid var(--line); padding:22px 22px 18px; margin:0 0 28px; position:relative; }
.facts::before{ content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--gold); }
.facts h2{ font-family:var(--sans); font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 10px; }
.facts ul{ list-style:none; padding:0; margin:0; }
.facts li{ padding:10px 0; border-top:1px solid var(--line-2); margin:0; font-size:15.5px; }
.facts li:first-child{ border-top:0; }
.facts small{ display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.facts small a{ color:var(--muted); }

.callout, .note{ border-left:2px solid var(--gold); padding:4px 0 4px 18px; margin:22px 0; font-family:var(--serif); font-size:21px; line-height:1.45; color:var(--ink-2); }
.callout > strong:first-child, .note > strong:first-child, .note > p:first-child > strong:first-child{ font-family:var(--sans); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:2px; }
.note p{ color:inherit; margin-bottom:6px; }

.faq details{ border-top:1px solid var(--line); padding:0; margin:0; }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding:18px 0;
  font-family:var(--serif); font-size:22px; font-weight:500; line-height:1.25; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--sans); font-size:22px; font-weight:300; color:var(--gold); transition:transform .5s var(--expo); flex-shrink:0; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 18px; }

.table-scroll, .table-wrap{ overflow-x:auto; margin:18px 0 22px; -webkit-overflow-scrolling:touch; }
.article table{ width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
.article th, .article td{ text-align:left; vertical-align:top; padding:12px 14px 12px 0; border-bottom:1px solid var(--line); }
.article thead th{ font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1px solid var(--ink); }
.article tbody th{ font-weight:600; color:var(--ink-2); }

/* the one booking block a guide page may have (legal pages have none) */
.cta{ position:relative; background:var(--ink); color:#fff; margin:clamp(56px,8vw,88px) 0 0; padding:40px 26px 42px; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:12px; border:1px solid rgba(226,201,122,0.28); pointer-events:none; }
.cta h2{ position:relative; font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.4vw,44px); line-height:1.06; color:#fff; margin:0 0 12px; max-width:20ch; }
.cta h2::before{ content:none !important; }
.cta p{ position:relative; color:rgba(255,255,255,0.8); margin-bottom:22px; max-width:46ch; }
.btn{ position:relative; display:inline-flex; align-items:center; gap:12px; background:var(--gold-soft); color:var(--ink); font-weight:700; text-decoration:none; padding:14px 26px; border-radius:999px; transition:background-color .4s var(--expo); }
.btn:hover{ background:#fff; color:var(--ink); }
.btn::after{ content:"→"; }

.related, .guidebox{ margin-top:clamp(48px,7vw,72px); padding-top:18px; border-top:1px solid var(--ink); }
.related h2, .guidebox h2{ font-family:var(--sans); font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 12px; }
.related ul{ list-style:none; padding:0; display:grid; gap:0; }
.related li{ margin:0; border-bottom:1px solid var(--line-2); }
.related a{ display:block; padding:10px 0; font-family:var(--serif); font-size:21px; color:var(--ink); text-decoration:none; }
.related a:hover{ color:var(--wine); }
.guidebox p{ font-size:15px; }
.back-home{ margin-top:28px; font-size:14px; }

@media (hover:hover) and (pointer:fine){
  .related a{ transition:padding .5s var(--expo), color .3s; }
  .related a:hover{ padding-left:10px; }
}

@media (min-width:700px){
  .topbar, .crumbs, .wrap{ padding-left:28px; padding-right:28px; }
  .hero__inner{ padding:130px 28px 44px; }
  .hero--plain .hero__inner{ padding-top:96px; padding-bottom:52px; }
  .hero--plain::before{ inset:14px; }
  .facts{ padding:26px 28px 20px; }
  .cta{ padding:52px 48px 54px; }
  .cta::before{ inset:14px; }
  .related ul{ grid-template-columns:1fr 1fr; column-gap:32px; }
  .figpair{ grid-template-columns:1fr 1fr; }
  .figpair figure img{ aspect-ratio:4/5; }
}

/* Desktop: contents rail on the left (sticky), article on the right, both inside the 1240 grid. */
@media (min-width:1000px){
  .wrap{ display:grid; grid-template-columns:250px minmax(0,1fr); column-gap:72px; align-items:start; padding-top:40px; }
  .wrap > .toc{ position:sticky; top:28px; grid-column:1; grid-row:1 / span 2; margin:0; max-height:calc(100vh - 56px); overflow:auto; scrollbar-width:none; }
  .wrap > .toc::-webkit-scrollbar{ display:none; }
  .wrap > .toc details > summary{ pointer-events:none; }
  .wrap > .toc details > summary::after{ display:none; }
  .wrap > .article{ grid-column:2; }
  .wrap--solo{ display:block; }
  .article{ font-size:17px; max-width:780px; }
  .intro{ font-size:30px; margin-top:0; }
  .hero h1{ max-width:18ch; }
}