/* Entwurf 3 – „Sommer & Winter“. System: design/3.md (ref. Hotels We Love) */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-normal-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/familjen-grotesk-normal-400-700.woff2") format("woff2");
}

:root {
  /* colour: the Lungau seasons */
  --c-paper: #ffffff;
  --c-ink: #1f2a2e;
  --c-sommer: #cfe0b4;
  --c-winter: #d6e4ee;
  --c-butter: #f3e3a1;
  --c-ofen: #2e5a4c;

  /* type: ratio 1.333, base 17px */
  --font-display: "Bodoni Moda", "Didot", "Georgia", serif;
  --font-body: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --fs--1: 0.8rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.416rem;
  --fs-2: 1.888rem;
  --fs-3: 2.517rem;
  --fs-4: 3.355rem;
  --fs-chapter: clamp(3.355rem, 11vw, 5.96rem);
  --track-tight: -0.02em;
  --track-0: 0;

  /* space: 8-based */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;

  --radius-round: 50%;
  --radius-s: 4px;

  --rule: color-mix(in srgb, var(--c-ink) 22%, transparent);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-ofen); color: var(--c-paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); }
p { margin: 0 0 var(--space-3); }

.skip {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 20;
  padding: var(--space-2) var(--space-3);
  background: var(--c-ink); color: var(--c-paper);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- frame + rail ---------- */
.rail {
  position: sticky; top: 0; z-index: 10;
  background: var(--c-sommer);
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s;
}
.rail[data-tint="butter"] { background: var(--c-butter); }
.rail[data-tint="winter"] { background: var(--c-winter); }
.rail[data-tint="ofen"] { background: var(--c-ofen); color: var(--c-paper); }
.rail[data-tint="ofen"] :focus-visible { outline-color: var(--c-butter); }
.rail__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.rail__name {
  font-family: var(--font-display); font-size: var(--fs-1); line-height: 1;
  text-decoration: none;
}
.rail__name br { display: none; }
.rail__where { display: none; }
.rail nav { grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; }
.rail__nav {
  display: flex; gap: var(--space-4);
  margin: 0; padding: var(--space-2) 0 var(--space-1); list-style: none;
  white-space: nowrap;
}
.rail__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; border-bottom: 2px solid transparent; }
.rail__nav a:hover, .rail__nav a[aria-current] { border-bottom-color: currentColor; }
.rail__phone { display: inline-flex; align-items: center; min-height: 2.75rem; grid-column: 2; grid-row: 1; font-weight: 700; text-decoration: none; white-space: nowrap; font-size: var(--fs--1); }

@media (min-width: 1024px) {
  .frame { display: grid; grid-template-columns: 15rem 1fr; }
  .rail { position: static; }
  .rail__inner {
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    padding: var(--space-5) var(--space-4);
  }
  .rail__name { font-size: var(--fs-2); }
  .rail__name br { display: inline; }
  .rail__where { display: block; margin: var(--space-3) 0 0; font-size: var(--fs--1); }
  .rail nav { grid-column: auto; align-self: center; overflow: visible; }
  .rail__nav { flex-direction: column; gap: 0; font-size: var(--fs-1); font-family: var(--font-display); }
  .rail__phone { grid-column: auto; grid-row: auto; font-size: var(--fs-0); }
}

/* ---------- opener ---------- */
.opener {
  padding: var(--space-7) var(--space-3) var(--space-6);
  text-align: center;
  background: var(--c-paper);
}
.name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-chapter);
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.claim {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-1);
  text-wrap: balance;
}
.opener__lead { max-width: 34rem; margin: 0 auto var(--space-6); font-size: var(--fs-1); line-height: 1.4; }

.discs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
}
.disc {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 6.5rem; aspect-ratio: 1;
  border-radius: var(--radius-round);
  text-decoration: none; text-align: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.disc:hover { transform: scale(1.06); }
.disc__label { font-family: var(--font-display); font-size: var(--fs-0); line-height: 1.1; }
.disc__sub { display: none; font-size: var(--fs--1); margin-top: var(--space-1); }
.disc--ofen { background: var(--c-ofen); color: var(--c-paper); }
.disc--ofen:focus-visible { outline-color: var(--c-ofen); }
.disc--butter { background: var(--c-butter); color: var(--c-ink); }
.disc--winter { background: var(--c-winter); color: var(--c-ink); }

@media (min-width: 640px) {
  .disc { width: 10rem; }
  .disc__label { font-size: var(--fs-1); }
  .disc__sub { display: block; }
  .discs { gap: var(--space-5); }
  .claim { font-size: var(--fs-2); }
}
@media (min-width: 1024px) {
  .opener { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-inline: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .disc, .rail { transition: none; }
}

/* ---------- chapters ---------- */
.chapter { padding: var(--space-7) var(--space-3); }
.chapter--butter { background: var(--c-butter); }
.chapter--sommer { background: var(--c-sommer); }
.chapter--winter { background: var(--c-winter); }
.chapter--ofen { background: var(--c-ofen); color: var(--c-paper); }
.chapter--ofen :focus-visible { outline-color: var(--c-butter); }

.word {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-chapter);
  line-height: 1;
  letter-spacing: var(--track-tight);
  text-align: center;
  margin-bottom: var(--space-5);
  hyphens: manual;
}
.lead { font-size: var(--fs-1); line-height: 1.45; max-width: 38rem; }
.lead--center { margin: 0 auto var(--space-6); text-align: center; }

.chapter > *:not(.word):not(.lead) { max-width: 60rem; margin-inline: auto; }

@media (min-width: 1024px) {
  .chapter { padding: var(--space-7) var(--space-6); }
}

/* Ruhe: house photo + text */
.split { display: grid; gap: var(--space-5); align-items: start; }
.photo { margin: 0; justify-self: center; }
.photo img { border-radius: var(--radius-s); }
.photo figcaption { font-size: var(--fs--1); margin-top: var(--space-2); }
.quote { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.quote p { font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.35; }
.quote footer { font-size: var(--fs--1); }
@media (min-width: 768px) {
  .split { grid-template-columns: auto 1fr; gap: var(--space-6); }
}

/* panels */
.rooms, .contact { display: grid; gap: var(--space-4); }
.panel {
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--radius-s);
  padding: var(--space-5) var(--space-4);
}
.panel h3 { margin-bottom: var(--space-3); }
.panel address { font-style: normal; margin-bottom: var(--space-3); }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-block: var(--space-3); }
.thumbs img { border-radius: var(--radius-s); }
@media (min-width: 768px) {
  .rooms, .contact { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .panel { padding: var(--space-5); }
}

.facts { margin: var(--space-3) 0 0; border-top: 1px solid var(--rule); }
.facts div { display: grid; gap: 0 var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .facts div { grid-template-columns: 8rem 1fr; }
}

/* sommer: route along the Mur */
.word--left { text-align: left; }
.season { display: grid; gap: var(--space-6); }
.season__head .lead { max-width: 30rem; }
.season__photo { margin: var(--space-5) 0 0; max-width: 26rem; }
.season__photo img { border-radius: var(--radius-s); }
.season__photo figcaption { font-size: var(--fs--1); margin-top: var(--space-2); }
.season__sub { font-size: var(--fs-1); margin-bottom: var(--space-4); }

.route { margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.route li {
  position: relative;
  padding: 0 0 var(--space-3) var(--space-5);
  border-left: 2px solid var(--c-ink);
  margin-left: var(--space-2);
}
.route li:last-child { border-left-color: transparent; padding-bottom: 0; }
.route li::before {
  content: "";
  position: absolute; left: calc(var(--space-2) * -1.25); top: var(--space-1);
  width: 0.75rem; height: 0.75rem;
  border-radius: var(--radius-round);
  background: var(--c-sommer);
  border: 2px solid var(--c-ink);
  box-sizing: border-box;
}
.route__here strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); line-height: 1.1; }
.route__here span { display: block; margin-top: var(--space-1); }
.route li.route__here::before {
  width: 1.25rem; height: 1.25rem;
  left: calc(var(--space-3) * -0.66);
  top: var(--space-2);
  background: var(--c-ofen); border-color: var(--c-ofen);
}

.season__more { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.season__more h3 { font-size: var(--fs-1); margin-bottom: var(--space-1); }
.season__more p { margin: 0; }
.trips { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }

@media (min-width: 768px) {
  .season__more { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .season { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); align-items: start; }
  .season__head { position: sticky; top: var(--space-5); }
  .chapter.season > * { max-width: none; margin-inline: 0; }
}

/* winter: text on paper, the ski areas on a frost panel */
.winter { background: var(--c-paper); display: grid; gap: var(--space-5); }
.winter__text .lead { max-width: 30rem; }
.winter__text p:not(.lead) { max-width: 30rem; }
.slope {
  background: var(--c-winter);
  border-radius: var(--radius-s);
  padding: var(--space-5) var(--space-4);
}
.slope__title { font-size: var(--fs-1); margin-bottom: var(--space-4); }
.list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-ink); }
.list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}
.list--ski li { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); align-items: baseline; }
.list--ski span { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-0); }
@media (min-width: 1024px) {
  .winter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
  .chapter.winter > * { max-width: none; margin-inline: 0; }
  .slope { padding: var(--space-6); }
}

/* stüberl: the stove as a warm inset, not a wall */
.hearth {
  display: grid; gap: var(--space-5);
  background: var(--c-ofen); color: var(--c-paper);
  border-radius: var(--radius-s);
  padding: var(--space-5) var(--space-4);
}
.hearth :focus-visible { outline-color: var(--c-butter); }
.hearth__photo { margin: 0; max-width: 16rem; }
.hearth__photo img { border-radius: var(--radius-s); }
.hearth__photo figcaption { font-size: var(--fs--1); margin-top: var(--space-2); }
.hearth__text h3 { font-size: var(--fs-1); margin: var(--space-5) 0 var(--space-2); color: var(--c-butter); }
.hearth__text .lead { max-width: 34rem; }
.hearth__note { margin: var(--space-4) 0 0; font-size: var(--fs--1); }
@media (min-width: 768px) {
  .hearth { grid-template-columns: 16rem 1fr; gap: var(--space-6); padding: var(--space-6); align-items: center; }
}

/* footer */
.foot {
  padding: var(--space-6) var(--space-3);
  font-size: var(--fs--1);
  border-top: 1px solid var(--rule);
}
.foot h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); margin-bottom: var(--space-2); }
.foot .facts { max-width: 44rem; }
.foot__demo { margin-top: var(--space-4); max-width: 70ch; }
@media (min-width: 640px) {
  .foot .facts div { grid-template-columns: 12rem 1fr; }
}
@media (min-width: 1024px) {
  .foot { padding-inline: var(--space-6); }
}