/* Box sizing rules */

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

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
}

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/merriweather-v33-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-v56-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --color-bg: #ffffff;
  --color-orange: #dd3d1b;
  --color-light: #cccccc;
  --color-primary: #171406;
  --space-xs: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
  --space-s: clamp(0.875rem, 0.83rem + 0.20vw, 1rem);
  --space-m: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
  --space-l: clamp(2.1875rem, 2.09rem + 0.49vw, 2.5rem);
  --space-xl: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
  --space-2xl: clamp(3.5rem, 3.34rem + 0.78vw, 4rem);
  --space-3xl: clamp(4.375rem, 4.17rem + 0.98vw, 5rem);
  --space-4xl: clamp(6.5625rem, 6.26rem + 1.47vw, 7.5rem);
  --space-xs-l: clamp(0.4375rem, -0.23rem + 3.24vw, 2.5rem);
  --space-m-l: clamp(1.3125rem, 0.93rem + 1.86vw, 2.5rem);
  --space-2xl-4xl: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
  --size-step-000: clamp(0.740625rem, 0.73rem + 0.06vw, 0.78125rem);
  --size-step-00: clamp(0.833125rem, 0.80rem + 0.16vw, 0.9375rem);
  --size-step-0: clamp(0.9375rem, 0.88rem + 0.29vw, 1.125rem);
  --size-step-1: clamp(1.055rem, 0.96rem + 0.46vw, 1.35rem);
  --size-step-2: clamp(1.18625rem, 1.05rem + 0.68vw, 1.62rem);
  --size-step-3: clamp(1.335rem, 1.14rem + 0.95vw, 1.94375rem);
  --size-step-4: clamp(1.501875rem, 1.23rem + 1.30vw, 2.3325rem);
  --size-step-5: clamp(1.689375rem, 1.33rem + 1.74vw, 2.799375rem);
  --size-step-6: clamp(1.900625rem, 1.43rem + 2.29vw, 3.359375rem);
  --size-step-7: clamp(2.138125rem, 1.53rem + 2.97vw, 4.03125rem);
  --size-step-8: clamp(2.405625rem, 1.62rem + 3.81vw, 4.8375rem);
  --size-step-9: clamp(2.70625rem, 1.70rem + 4.86vw, 5.805rem);
  --size-step-10: clamp(3.03125rem, 1.76rem + 6.17vw, 6.965625rem);
  --size-step-11: clamp(3.78875rem, 1.63rem + 10.45vw, 10.448125rem);
  --size-step-12: clamp(3.78875rem, 0.36rem + 16.61vw, 14.375rem);
  --leading-micro: 0.85;
  --leading-flat: 1;
  --leading-fine: 1.2;
  --leading-standard: 1.6;
  --font-base: 'Merriweather',serif;
  --font-heading: 'Oswald',sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
  --gutter: var(--space-m-l);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --stroke-width: 1px;
  --stroke: var(--stroke-width) dashed var(--color-mid);
  --stroke-solid: var(--stroke-width) solid var(--color-mid);
  --indent-size: var(--space-xs-l);
  --radius-s: 0.2rem;
  --radius-m: 0.75rem;
  --radius-l: 2.5rem;
  --uppercase-kerning: 0.04ch;
  --blob: #DAD4DF;
  --scroll-peek: clamp(20px, 5vi, 48px);
  --card-min: 14rem;
  --card-ideal: calc(78vi - var(--scroll-peek));
  --card-max: 22rem;
  --progress-h: 6px;
  --accent: var(--color-orange);
  --accent-20: color-mix(in oklab, var(--accent) 20%, white 80%);
  --accent-alpha-20: color-mix(in oklab, transparent 80%, var(--accent) 20%);
  --h2-accent: var(--accent);
  --btn-accent: var(--accent);
  --rolodex-clip: var(--accent);
  --rolodex-card-bg: var(--accent-20);
  --rolodex-card-fg: var(--accent);  
  --footer-bg: var(--accent);
  --footer-fg: var(--color-bg);
}

:root[data-theme="pflaume"]      { --accent:#442862; --accent-alpha-20:#44286233; }
:root[data-theme="burgunder"]    { --accent:#64021B; --accent-alpha-20:#64021B33; }
:root[data-theme="nachtblau"]    { --accent:#08222F; --accent-alpha-20:#08222F33; }
:root[data-theme="dunkelrot"]    { --accent:#65011D; --accent-alpha-20:#65011D33; }
:root[data-theme="kastanienrot"] { --accent:#521620; --accent-alpha-20:#52162033; }
:root[data-theme="waldgruen"]    { --accent:#294127; --accent-alpha-20:#29412733; }
:root[data-theme="schiefer"]     { --accent:#577E85; --accent-alpha-20:#577E8533; }
:root[data-theme="orange"]       { --accent:#dd3d1b; --accent-alpha-20:#dd3d1b33; }


body {
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--size-step-2);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  font-size-adjust: from-font;
  margin: 0;
}

footer {
  background-color: var(--accent);
}

section, article {
margin-block-end: var(--space-3xl);
}

:is(h1, h2, h3, h4) {
  font-family: var(--font-heading);
  line-height: var(--leading-fine);
  font-weight: var(--font-bold);
  text-wrap: balance;
}

h1 {
  font-size: var(--size-step-6);
  margin-block-start: var(--space-2xl);
  max-width: 35ch;
}

h2 {
  font-size: var(--size-step-5);
  max-width: 35ch;
  position: relative;
}

h2::before{	
	content: "";
	position:absolute;
	height: 10px;
	width: 5ch;
  background: var(--h2-accent);
	bottom: -0.5em;
	left: 0;
}

h2 + p {
  padding-block-start: 0.75em;
}

h3 {
  font-size: var(--size-step-4);
  max-width: 35ch;
}

small {
  font-size: var(--size-step-0);
}

ul {
  padding-inline-start: 1.7ch;
  list-style-type: disc;
}

ul:not([class]) > li {
  padding-inline-start: var(--space-xs);
}

:is(ol, ul):not([class]) li + * {
  margin-block-start: var(--flow-space, var(--space-xs));
}

:is(ul, ol) ::marker { font-size: 1em; font-weight: normal; }

/* Lists with classes and roles will be out of standard flow, so remove the default spacing */

[role='list'][class],
[role='tablist'][class] {
  margin-block: 0;
  padding: 0;
}

dt {
  font-weight: var(--font-medium);
}

dt + dd {
  margin-block-start: var(--space-xs);
}

dd + dt {
  margin-block-start: var(--space-s);
}

dd {
  margin-inline-start: 1.5ch;
}

blockquote {
  margin-inline: 0;
  color: var(--color-primary);
}

:is(img, picture) {
  height: auto;
  max-width: 100%;
  display: block;
}

picture {
  width: max-content;
}

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step-1);
}

a:not([class]):hover {
  text-underline-offset: 0.2lh;
}

:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.3ex;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.2lh);
}

:target {
  scroll-margin-block: 5lh;
}

::selection {
  color: var(--color-primary);
  background: var(--color-light);
}

hr {
  border: none;
  border-block-start: var(--hr-stroke, var(--stroke));
  margin-block: var(--flow-space, var(--space-xl));
}

svg:not([class]) {
  width: auto;
  height: 1lh;
}

svg {
  flex-shrink: 0;
}

svg[role='img'][width][height] {
  /* Allow the width and height attributes to take over */
  width: revert;
  height: revert;

  background: var(--color-light);

  padding: var(--space-xs);
}

.button {
  --button-bg: var(--color-bg);
  --button-text: var(--color-primary);
  --button-x-padding: 2em;
  --button-y-padding: 1.1em;
  --button-gutter: 0.5ch;
  --focus-color: var(--color-primary);

  display: inline-flex;
  gap: var(--button-gutter);
  align-items: center;
  line-height: var(--leading-flat);
  position: relative;
  border: none;
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-text);
  padding: var(--button-y-padding) var(--button-x-padding);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  border: 1px solid var(--accent);
}

.button:hover {
  filter: brightness(105%);
}

.button:active {
  transform: scale(99%);
}

.button svg{
  transition: transform var(--transition-movement, 200ms ease);
  will-change: transform;
}

.button:hover svg,
.button:focus-visible svg{
  transform: translateY(2px);
}

.button:active svg{
  transform: translateY(2px);
  transition-duration: 80ms;
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
  .button svg{ transition: none; }
}

.button[data-button-variant="accent"] {
  background: var(--btn-accent);
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-l));
}

.grid-dl {
  display: grid;
  grid-template-columns: 1fr; 
  column-gap: 0;
  row-gap: 0;
  align-items: start;
}

.grid-dl dt,
.grid-dl dd {
  margin: 0;
  padding: .5rem 1rem;
  border: 0; 
}

.grid-dl dt {
  padding-top: .75rem;
  font-weight: var(--font-medium);
  border-top: 1px solid var(--color-light); 
}

.grid-dl dt:first-of-type { border-top: none; }

.grid-dl dd {
  padding-top: .25rem;
  padding-bottom: .75rem;
}

.grid-dl img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 800px) {
  .grid-dl {
    grid-template-columns: minmax(9ch, 1fr) 2fr;
  }

  .grid-dl dt,
  .grid-dl dd {
    padding: .75rem 1rem;
    border-top: 1px solid var(--color-light);
  }

  .grid-dl dt:first-of-type,
  .grid-dl dt:first-of-type + dd {
    border-top: none;
  }

  .grid-dl dt { padding-right: 1.25rem; }
  .grid-dl dd { padding-left: 1.25rem; }
}

.grid--flex {
  margin-bottom:var(--space-xs)
}

.grid--flex {
  display: flex;
  gap:var(--space-xs)
}

.grid--flex > * {
  flex:1 0 250px
}

.headline {
  --repel-vertical-alignment: baseline;
  --gutter: var(--space-s);

  padding-block-end: var(--space-2xl);
  border-block-end: var(--stroke);
}

.headline__heading {
  font-size: var(--size-step-10);
  line-height: var(--leading-flat);
}

.labelled-icon {
  display: flex;
  align-items: baseline;
  line-height: var(--leading-fine);
  gap: 0 var(--space-xs);
}

.labelled-icon svg {
  height: 1lh;
  transform: translateY(
    0.5ex
  ); /* Adjusts the position because icons have space around them */
}

.lede {
  font-size: var(--size-step-5);
  font-family: var(--font-heading);
  line-height: var(--leading-fine);
  font-weight: 700;
}

.lede + * {
  --flow-space: 2em;
}

.nav {
  --flow-space: var(--space-m);
  --gutter: var(--space-m) var(--space-l);

  line-height: var(--leading-flat);
}

.nav a:not(:hover):not([aria-current='page']) {
  text-decoration: none;
}

.prose {
  --flow-space: var(--space-l);
}

.prose :is(h1, h2, h3) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.prose :is(p, li, dl, figcaption, blockquote) {
  max-width: 65ch;
  text-wrap: pretty;
}

.prose :is(h1, h2, h3, h4) + *:not([class]) {
  --flow-space: var(--space-m);
}

.prose :is(figure, table),
.prose :is(figure, table) + * {
  --flow-space: var(--space-2xl);
}

.prose * + :is(h1, h2, h3, h4):not([class]) {
  --flow-space: var(--space-xl);
}

.prose :is(ul, ol):not([class]) li + li,
.prose :is(ul, ol):not([class]) li > :is(ol, ul) {
  --flow-space: var(--space-2xs);
}

.prose hr {
  --flow-space: var(--space-2xl);
}

.prose :is(img, picture, video) {
  border: var(--stroke-solid);
}

@media (min-width: 760px) {
  .prose :is(h1, h2, h3) {
    overflow-wrap: unset;
    hyphens: unset;
  }
}

.rolodex {
  --flow-space: var(--space-3xl);
  --gutter: var(--space-l);
  margin-block-start: var(--space-4xl);
  margin-block-end: var(--space-3xl);
}

.rolodex__item {
  --rolodex-text: var(--color-primary);
  --focus-color: var(--color-primary);
  --r-accent: #dd3d1b;
  --r-accent-20: color-mix(in oklab, var(--r-accent) 20%, white 80%);
  --rolodex-clip: var(--r-accent);
  --rolodex-bg: var(--r-accent-20);

  padding: var(--space-l);
  background: var(--rolodex-bg); 
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  line-height: var(--leading-fine);
}

.rolodex__item::before {
  content: '';
  width: clamp(2rem, 10vw, 7.5rem);
  aspect-ratio: 1/1;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: var(--rolodex-clip);
  position: absolute;
  top: 0;
  right: 0;
}

.rolodex__item:hover {
  filter: brightness(105%);
}

.rolodex__heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-l);
  margin: 0;
  font-weight: var(--font-bold);
  font-size: var(--size-step-6);
}

.rolodex__number {
  font-size: var(--size-step-10);
}

.rolodex img {
  aspect-ratio: 50/67;
  object-fit: cover;
}

.rolodex__item[data-rolodex-theme="pflaume"]   { --r-accent:#442862; }
.rolodex__item[data-rolodex-theme="burgunder"]   { --r-accent:#64021B; } 
.rolodex__item[data-rolodex-theme="schiefer"] { --r-accent:#577E85; } 
.rolodex__item[data-rolodex-theme="waldgruen"]  { --r-accent:#294127; } 
.rolodex__item[data-rolodex-theme="kastanienrot"]  { --r-accent:#521620; }
.rolodex__item[data-rolodex-theme="nachtblau"]  { --r-accent:#08222F; }
.rolodex__item[data-rolodex-theme="dunkelrot"]  { --r-accent:#65011D; }

.rolodex__sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.rolodex__sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 25rem);
  flex-grow: 1;
}

.rolodex__sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.rolodex__sidebar[data-reversed] {
  flex-direction: row-reverse;
}

@media (min-width: 940px) {
  .rolodex__list li {
    position: sticky;
    top: var(--gutter);
  }

  .rolodex__list:has(.rolodex__item:focus-visible) li {
    position: relative;
  }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 25rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
  flex-direction: row-reverse;
}

.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 25rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-direction='rtl'] { 
  flex-direction: row-reverse; 
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

.wrapper {
  margin-inline: auto;
  max-width: var(--wrapper-max-width, 1360px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.indent {
  border-inline-start: var(--indent-size, var(--space-xs-l)) solid
    var(--indent-color, currentColor);
}

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

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.mb-xl {
  margin-bottom: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
}

.mt-2xl-4xl {
  margin-top: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
}

.mt-xs {
  margin-top: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.max-w-\[25ch\] {
  max-width: 25ch;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.p-\[3px\] {
  padding: 3px;
}

.p-m {
  padding: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
}

.py-m {
  padding-top: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
  padding-bottom: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
}

.pt-2xl {
  padding-top: clamp(3.5rem, 3.34rem + 0.78vw, 4rem);
}

.text-step-10 {
  font-size: clamp(3.03125rem, 1.76rem + 6.17vw, 6.965625rem);
}

.text-step-2 {
  font-size: clamp(1.18625rem, 1.05rem + 0.68vw, 1.62rem);
}

.leading-\[0\.75\] {
  line-height: 0.75;
}

.leading-\[1\] {
  line-height: 1;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.flow-space-xl {
  --flow-space: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
}

.flow-space-3xl {
  --flow-space: clamp(4.375rem, 4.17rem + 0.98vw, 5rem);
}

.flow-space-2xl-4xl {
  --flow-space: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
}

.region-space-2xl-4xl {
  --region-space: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
}

.gutter-xs {
  --gutter: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
}

.gutter-s {
  --gutter: clamp(0.875rem, 0.83rem + 0.20vw, 1rem);
}

.blob-main {
  position: relative;                    
  background-repeat: no-repeat;
  background-position: top right;           
  background-size: min(1600px, 90vw);      
}

.pflaume      { background-image: url("../img/blob-main-44286233.svg"); }
.burgunder    { background-image: url("../img/blob-main-64021B33.svg"); }
.nachtblau    { background-image: url("../img/blob-main-08222F33.svg"); }
.dunkelrot    { background-image: url("../img/blob-main-65011D33.svg"); }
.kastanienrot { background-image: url("../img/blob-main-52162033.svg"); }
.waldgruen    { background-image: url("../img/blob-main-29412733.svg"); }
.schiefer     { background-image: url("../img/blob-main-577E8533.svg"); }
.orange       { background-image: url("../img/blob-main-dd3d1b33.svg"); }

.grid--flex > * {
  margin: 0 !important;
  flex: initial !important;
}

.grid--flex[data-behaviour="scroll-mobile"]{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(14rem, 28vw, 22rem);
  gap: var(--space-m);

  overflow-x: auto;
  overflow-y: hidden; 
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); 
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  padding: var(--space-s) var(--gutter);
  margin-block: var(--space-l) var(--space-xl);
}

.grid--flex[data-behaviour="scroll-mobile"] .cover{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.grid--flex[data-behaviour="scroll-mobile"] figure{
  margin: 0;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.grid--flex[data-behaviour="scroll-mobile"] picture,
.grid--flex[data-behaviour="scroll-mobile"] img{
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 467;
  object-fit: cover;
}

.grid--flex[data-behaviour="scroll-mobile"] figcaption{
  font-size: var(--size-step-1);
  line-height: var(--leading-flat);
}

.grid--flex[data-behaviour="scroll-mobile"]::after{ content: none; }

.grid--flex[data-behaviour="scroll-mobile"]::-webkit-scrollbar{
  height: 10px;
  background: var(--color-light);
}
.grid--flex[data-behaviour="scroll-mobile"]::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 999px;
}
.grid--flex[data-behaviour="scroll-mobile"]{
  scrollbar-color: var(--accent) var(--color-light);
  scrollbar-width: thin;
}
.grid--flex[data-behaviour="scroll-mobile"] figcaption p {
  line-height: var(--leading-standard); 
  margin: 0;                         
}

.site-foot { 
  background: var(--footer-bg);
  color: var(--footer-fg);
  line-height: var(--leading-flat);
  padding-block: var(--space-m);
  font-size: var(--size-step-0);
  font-family: var(--font-heading);
}

.site-foot__logo img {
  display: block;
  height: auto;
  max-height: 56px; 
  width: auto;
}

.site-foot__address a {
  color: inherit;
  text-decoration: none;
}
.site-foot__address a:hover { text-decoration: underline; }

.site-foot__copyright { 
  margin: 0; 
  opacity: .9;
}

.site-foot .wrapper > .repel {
  padding-block: var(--space-3xl) var(--space-m);
}

.footer-wave {
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
  margin-bottom: -2px;
}

.site-foot__wave { line-height: 0; }
.site-foot__wave .wave { display:block; width:100%; height:clamp(40px,8vw,100px); transform: translateY(1px);}