/* SEASONS Optical. The shared ground: the two faces, the fit-out palette, the running-text action. Loaded by every page. */
@font-face { font-family: "Zodiak"; src: url("../assets/fonts/Zodiak-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("../assets/fonts/Zodiak-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  --night: #0f0807; --night-2: #1a1110;
  --oxblood: #66251f; --oxblood-deep: #3f1916;
  --lacquer: #ba3800; --lacquer-deep: #a12f00; --lacquer-bright: #e36927;
  --walnut: #764834; --walnut-light: #ab826c;
  --forest: #15393a;
  --paper: #f2ece6; --paper-mute: #c9b9ae;
  --serif: "Zodiak", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --foot: clamp(2rem, 7vh, 5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

/* ---- the running-text action: an italic line with a drawn rule; lead carries a lacquer rule ---- */
.running { position: relative; display: inline-flex; align-items: baseline; gap: 0.35em; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.5rem; line-height: 1.15; color: var(--paper); text-decoration: none; padding-bottom: 0.16em; transition: color 180ms ease; }
.running--lead { font-size: 2.1rem; }
.running::before, .running::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.running::before { background: var(--paper); opacity: 0.32; }
.running--lead::before { background: var(--lacquer-bright); opacity: 1; height: 2px; }
.running::after { background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease-out); }
.running--lead::after { height: 2px; }
.running .arrow { font-style: normal; color: var(--paper-mute); display: inline-block; transition: transform 320ms var(--ease-out); }
.running--lead .arrow { color: var(--lacquer-bright); }
@media (hover: hover) and (pointer: fine) {
  .running:hover::after { transform: scaleX(1); }
  .running:hover .arrow { transform: translateX(0.3em); }
}
.running:active { transform: translateY(1px); }