/* Strommer design round 3 "Weingarten und Keller": fonts and tokens.
   Dark ground = the vault and the evening; daylight comes in through the photographs.
   Literata for display and reading, Sofia Sans Semi Condensed for the small print (navigation, prices, hours, forms). */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 380 620;
  font-display: swap;
  src: url(../fonts/Literata-opsz12-72-wght380-620.woff2) format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 380 620;
  font-display: swap;
  src: url(../fonts/Literata-Italic-opsz12-72-wght380-620.woff2) format("woff2");
}
@font-face {
  font-family: "Sofia Sans Semi Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/SofiaSansSemiCondensed-wght400-700.woff2) format("woff2");
}

:root {
  /* Grounds and inks */
  --st-label: #13100D;        /* page ground */
  --st-label-2: #1C1814;      /* only for form fields and the menu panel */
  --st-label-3: #0C0A08;      /* footer */
  --st-cream: #ECE4D6;        /* text, 15:1 on the ground */
  --st-cream-soft: #ABA090;   /* secondary text, 7.4:1 */
  --st-cream-faint: #928777;  /* credits and small print: 5.4:1 */
  --st-gold: #C3A063;         /* interaction only: hover underline, current page, focus */
  --st-gold-text: #D3B37E;    /* gold as text, 9.5:1 */
  --st-plate: #E7DFD3;        /* limestone behind white-background packshots */
  --st-line: rgba(236, 228, 214, .14);

  /* Families */
  --st-serif: "Literata", "Iowan Old Style", Georgia, serif;
  --st-sans: "Sofia Sans Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  /* Type scale, 390 -> 1920 px */
  --st-fs-display: clamp(3rem, 1.25rem + 6.4vw, 8.25rem);
  --st-fs-h2: clamp(2rem, 1.2rem + 2.9vw, 4.25rem);
  --st-fs-h3: clamp(1.4rem, 1.2rem + .8vw, 1.95rem);
  --st-fs-lede: clamp(1.3rem, 1.12rem + .7vw, 1.75rem);
  --st-fs-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --st-fs-ui: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --st-fs-meta: .875rem;
  --st-fs-price: 1.25rem;

  /* Space */
  --st-section: clamp(88px, 2.5rem + 7vw, 184px);       /* between chapters */
  --st-space-l: clamp(56px, 2rem + 4.5vw, 128px);       /* inside a chapter */
  --st-space-m: clamp(28px, 1rem + 2vw, 56px);
  --st-gap: clamp(16px, 2.2vw, 40px);
  --st-measure: 62ch;
  --st-measure-lede: 40ch;

  /* Motion: one enter curve, one exit curve; expo-out reaches 90 % in under a third of its duration */
  --st-ease: cubic-bezier(.19, 1, .22, 1);              /* enter: reveals, panels, header return, hover-in, draw-in */
  --st-ease-settle: cubic-bezier(.33, 1, .68, 1);       /* back to rest: hover-out, release (decelerates, no thud) */
  --st-ease-exit: cubic-bezier(.4, 0, 1, 1);            /* only what leaves the screen: close, hide */
  --st-ease-inout: cubic-bezier(.65, 0, .35, 1);        /* long draws (shelf, emblem), retracting lines, header compact */
  --st-instant: 100ms;                                  /* press */
  --st-quick: 200ms;                                    /* colour, field states, release */
  --st-draw: 320ms;                                     /* an underline drawing in (with --st-ease: half drawn in 30 ms) */
  --st-exit: 240ms;                                     /* every close and hide */
  --st-standard: 450ms;                                 /* panels and the header's return */
  --st-reveal: 900ms;                                   /* headlines */
  --st-reveal-photo: 1100ms;                            /* photographs open */
  --st-dissolve: 1200ms;                                /* poster → film, linear */

  --st-header-h: 98px;                                  /* Uncode's header; pins its spacer */
}
@media (max-width: 959px) {
  :root { --st-header-h: 88px; }
}