/* Design 3 – Südhang. System: design/3.md */
@font-face { font-family: "Rethink Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/rethink-sans-normal-400-700.woff2") format("woff2"); }

:root {
  --c-paper: #ffffff;
  --c-ink: #1a1c17;
  --c-muted: #5e615a;
  --c-lime: #8cc63f;
  --c-red: #9b2a22;
  --c-stone: #edede8;
  --c-rule: color-mix(in srgb, var(--c-ink) 16%, transparent);

  --ff: "Rethink Sans", "Helvetica Neue", Arial, sans-serif;

  --fs--1: .8rem;
  --fs-0: 1rem;
  --fs-1: 1.25rem;
  --fs-2: 1.563rem;
  --fs-3: 1.953rem;
  --fs-4: 2.441rem;
  --fs-5: 3.052rem;
  --fs-6: 3.815rem;
  --fs-statement: clamp(1.953rem, 1rem + 3.4vw, 3.815rem);
  --fs-sub: clamp(1.563rem, .9rem + 2.4vw, 3.052rem);
  --fs-lead: clamp(1.25rem, 1rem + 1vw, 1.953rem);

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 10rem;
  --sp-margin: clamp(1.25rem, 4vw, 3rem);

  --radius: 0;
  --track-tight: -.02em;
}

*, *::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: 400 var(--fs-0)/1.55 var(--ff); -webkit-font-smoothing: antialiased; }
@media (min-width: 1000px) { body { font-size: var(--fs-1); } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 var(--sp-3); }
a { color: inherit; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--sp-3); top: calc(var(--sp-8) * -1); z-index: 10; padding: var(--sp-2) var(--sp-3); background: var(--c-paper); }
.skip:focus { top: var(--sp-3); }
.wrap { width: min(85rem, 100% - 2 * var(--sp-margin)); margin-inline: auto; }
.muted { color: var(--c-muted); }

/* Links */
.link, .head__nav a { text-decoration: underline; text-decoration-color: var(--c-lime); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.link:hover, .head__nav a:hover { text-decoration-color: var(--c-ink); }
.call { display: inline-block; white-space: nowrap; padding: var(--sp-3) var(--sp-4); background: var(--c-lime); color: var(--c-ink); font-weight: 600; text-decoration: none; border-radius: var(--radius); }
.call:hover { background: var(--c-ink); color: var(--c-paper); }

/* Header */
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); padding-block: var(--sp-4); }
.head__logo { display: block; color: var(--c-ink); }
.logo { display: block; width: 9rem; height: auto; }
.logo .ring { stroke: var(--c-lime); }
.head__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs--1); }
@media (min-width: 1000px) { .head__nav { font-size: var(--fs-0); } .logo { width: 11rem; } }

/* Intro statement */
.statement { font-size: var(--fs-statement); line-height: 1.08; letter-spacing: var(--track-tight); max-width: 22ch; text-wrap: balance; }
.statement--sub { font-size: var(--fs-sub); max-width: 24ch; }
.intro { display: grid; gap: var(--sp-5); padding-block: var(--sp-7) var(--sp-7); }
.lead { font-size: var(--fs-lead); line-height: 1.35; max-width: 30ch; }
.intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 1000px) {
  .intro { grid-template-columns: 8fr 4fr; align-items: end; padding-block: var(--sp-8) var(--sp-8); gap: var(--sp-4); }
  .intro .statement { font-size: var(--fs-statement); }
}

/* Mosaic */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding-bottom: var(--sp-8); }
.tile { position: relative; display: block; text-decoration: none; color: var(--c-ink); }
.tile img { width: 100%; }
.tile--a { grid-column: 1 / -1; }
.tile__cap { position: absolute; left: 0; bottom: 0; padding: var(--sp-1) var(--sp-2); background: var(--c-paper); font-size: var(--fs--1); font-weight: 600; }
.tile:hover .tile__cap { background: var(--c-lime); }
@media (min-width: 1000px) {
  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 2rem; gap: 0 var(--sp-4); }
  .tile { align-self: start; }
  .tile--a { grid-column: 1 / 7; grid-row: 1 / 16; }
  .tile--b { grid-column: 7 / 10; grid-row: 4 / 12; z-index: 1; margin-left: calc(var(--sp-6) * -1); }
  .tile--c { grid-column: 10 / 13; grid-row: 1 / 10; }
  .tile--d { grid-column: 10 / 13; grid-row: 12 / 19; max-width: 28rem; }
  .tile--e { grid-column: 3 / 9; grid-row: 17 / 30; z-index: 1; }
  .tile--f { grid-column: 9 / 12; grid-row: 21 / 28; margin-left: var(--sp-5); max-width: 28rem; }
  .tile--g { grid-column: 1 / 3; grid-row: 19 / 25; margin-top: var(--sp-5); }
  .tile__cap { font-size: var(--fs-0); padding: var(--sp-1) var(--sp-3); }
}

/* Chapters */
.chapter { padding-block: var(--sp-7); border-top: 1px solid var(--c-rule); }
.chapter > .statement { margin-bottom: var(--sp-6); }
.chapter__lead { max-width: 52ch; margin-bottom: var(--sp-6); }
.cols { display: grid; gap: var(--sp-5); align-items: start; }
.cols p { max-width: 52ch; }
@media (min-width: 760px) { .cols { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.cols--photo img { width: 100%; }
@media (min-width: 1000px) { .chapter { padding-block: var(--sp-8); } }

/* Photo pair: a large photo with a smaller one offset over its corner */
.pair { position: relative; padding-bottom: var(--sp-8); }
.pair .pair__big { width: 100%; }
.pair > .tile__cap { bottom: var(--sp-8); }
.pair__small { position: absolute; right: 0; bottom: 0; width: min(55%, 28rem); border: 8px solid var(--c-paper); border-right: 0; border-bottom: 0; }
.pair__small img { width: 100%; }
.pair--left { padding-bottom: 0; margin-bottom: var(--sp-5); }
.pair--left > .tile__cap { bottom: 0; }
@media (min-width: 1000px) {
  .pair__small { right: calc(var(--sp-4) * -1); width: min(50%, 28rem); }
}

/* Facts */
.facts { display: grid; gap: var(--sp-4) var(--sp-6); margin: 0; }
.facts > div { border-top: 2px solid var(--c-ink); padding-top: var(--sp-2); }
.facts dt { font-size: var(--fs--1); color: var(--c-muted); margin-bottom: var(--sp-1); }
.facts dd { margin: 0; font-size: var(--fs-1); line-height: 1.35; overflow-wrap: anywhere; }
.facts--small dd { font-size: var(--fs-0); }
@media (min-width: 600px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .facts:not(.facts--small) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .facts--small { margin-block: var(--sp-4); } }
#termine .facts { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { #termine .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Wine list */
.wines { border-top: 2px solid var(--c-ink); }
.wines__head, .wine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-rule); }
.wines__head { font-size: var(--fs--1); color: var(--c-muted); background: var(--c-stone); padding-inline: var(--sp-2); }
.wines__head > :nth-child(2), .wines__head > :nth-child(3) { display: none; }
.wine { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.wine > .wine__name { grid-column: 1 / 4; }
.wine > :nth-child(2), .wine > :nth-child(3) { grid-row: 2; font-size: var(--fs--1); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.wine > :nth-child(2) { grid-column: 1; }
.wine > :nth-child(3) { grid-column: 2; }
.wine > .wine__price { grid-column: 4; grid-row: 1; }
.wine > .wine__note { grid-row: 3; }
.wine__name { font-size: var(--fs-2); font-weight: 500; letter-spacing: var(--track-tight); line-height: 1.2; }
.wine--red .wine__name { color: var(--c-red); }
.wine__price { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.wines__head > :nth-child(4) { text-align: right; }
.wine__note { grid-column: 1 / -1; color: var(--c-muted); max-width: 64ch; font-size: var(--fs-0); }
@media (min-width: 760px) {
  .wines__head, .wine { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; }
  .wines__head > :nth-child(2), .wines__head > :nth-child(3) { display: block; }
  .wine > .wine__name { grid-column: 1; grid-row: 1; }
  .wine > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .wine > :nth-child(3) { grid-column: 3; grid-row: 1; }
  .wine > :nth-child(2), .wine > :nth-child(3) { font-size: inherit; color: inherit; }
  .wine > .wine__price { grid-column: 4; grid-row: 1; }
  .wine > .wine__note { grid-column: 1 / -1; grid-row: 2; }
}
.bottles { display: flex; align-items: flex-end; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }
.bottles img { width: 5.5rem; }
.bottles figcaption { flex-basis: 100%; color: var(--c-muted); font-size: var(--fs--1); }
@media (min-width: 1000px) { .bottles img { width: 8rem; } .bottles figcaption { flex-basis: auto; max-width: 20ch; margin-left: var(--sp-4); } }

/* Prices */
.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 2px solid var(--c-ink); }
.prices th, .prices td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-rule); text-align: right; font-weight: 400; }
.prices th:first-child { text-align: left; }
.prices thead th { font-size: var(--fs--1); color: var(--c-muted); }
.prices tbody th { font-weight: 500; }

/* Awards */
.awards { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.awards li { padding-block: var(--sp-2); border-bottom: 1px solid var(--c-rule); font-size: var(--fs-0); }
.links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }

/* Footer */
.foot { background: var(--c-ink); color: var(--c-paper); padding-block: var(--sp-7) var(--sp-6); font-size: var(--fs--1); margin-top: var(--sp-6); }
.foot .logo { color: var(--c-paper); width: 12rem; margin-bottom: var(--sp-6); }
.foot :focus-visible { outline-color: var(--c-lime); }
.impressum h2 { font-size: var(--fs-2); margin-bottom: var(--sp-3); }
.impressum dl { display: grid; gap: var(--sp-1) var(--sp-5); margin: 0 0 var(--sp-5); }
.impressum dt { font-weight: 600; }
.impressum dd { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
@media (min-width: 760px) { .impressum dl { grid-template-columns: 13rem 1fr; } .impressum dd { margin: 0; } }
.foot__note { max-width: 70ch; margin: 0; }