/* The thermochromic bar: the top bar of a bathhouse's site on a white page, printed on a sheet of black liquid crystal
   film. The colours of the crystal are read by the script from here. */
:root {
  --page: #ffffff;          /* the page */
  --film: #0b0b0c;          /* the film when cold */
  --red: #a6231b;           /* the crystal just warm */
  --amber: #dc8a22;         /* warmer */
  --green: #2f9c58;         /* warm */
  --teal: #12958f;          /* hot */
  --blue: #2260cc;          /* hotter */
  --violet: #4a2a9c;        /* the hottest colour, before the film goes dark again */
  --text: #f5f1e9;          /* the current link and the brand */
  --muted: #a9a59d;         /* the other links */
  --cta: #f5f1e9;           /* the button */
  --cta-lit: #ffffff;       /* the button pointed at */
  --cta-down: #e4dfd5;      /* the button pressed, with less motion */
  --cta-ink: #0b0b0c;       /* the words on the button */
  --ring: #63d2c9;          /* the outline of the keyboard focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Familjen Grotesk Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

/* ---------------------------------------------------------------- the bar */
.bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(900px, 100%);
  height: 60px;
  padding: 0 10px 0 18px;
  border-radius: 18px;
  background: var(--film);
  box-shadow: 0 22px 44px -26px rgba(10, 10, 12, 0.6), 0 3px 8px -2px rgba(10, 10, 12, 0.22);
  overflow: hidden;
  isolation: isolate;
}

/* the film, drawn at half the size and stretched: the heat is soft anyway, and it costs a quarter */
.bar__film {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* with less motion, the old film fades away over the new one */
.bar__film--veil {
  opacity: 0;
}

/* the sheen of the laminate over the crystal, and its edge */
.bar__gloss {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.025) 46%, rgba(255, 255, 255, 0) 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* the words keep a little shade round them, so they read on the brightest colours of the film too */
.brand,
.bar__link {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 10px rgba(0, 0, 0, 0.45);
}

a:focus {
  outline: none;
}

/* ---------------------------------------------------------------- the brand */
.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 6px 0 2px;
  border-radius: 10px;
}

.brand__mark {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.brand__name {
  font-size: 18px;
  font-weight: 640;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- the links */
/* the links scroll sideways inside the bar when they do not fit; auto margins centre them without cutting the first */
.bar__strip {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}

.bar__strip::-webkit-scrollbar {
  display: none;
}

.bar__strip.is-after {
  --fade-l: 26px;
}

.bar__strip.is-before {
  --fade-r: 26px;
}

.bar__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 0 4px;
  list-style: none;
}

.bar__link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.bar__link span {
  display: block;
  transition: transform 0.16s ease-out;
}

.bar__link[aria-current='page'],
.bar__link.is-warm,
.bar__link:focus-visible {
  color: var(--text);
}

.bar__link:active span {
  transform: scale(0.95);
}

/* the keys: an outline inside the link, since the strip cuts anything outside it */
.bar__link:focus-visible,
.brand:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ring);
}

/* ---------------------------------------------------------------- the button */
.bar__cta {
  display: flex;
  flex: none;
  align-items: center;
  height: 40px;
  padding: 0 17px;
  border-radius: 10px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.16s ease-out, background-color 0.2s ease;
}

.bar__cta:active {
  transform: scale(0.96);
}

.bar__cta:focus-visible {
  box-shadow: 0 0 0 2px var(--film), 0 0 0 4px var(--ring);
}

@media (hover: hover) {
  .bar__cta:hover {
    background: var(--cta-lit);
  }
}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 560px) {
  .bar {
    gap: 6px;
    height: 56px;
    padding: 0 8px 0 12px;
    border-radius: 16px;
  }

  .brand__name,
  .bar__more {
    display: none;
  }

  .brand {
    padding: 0 4px;
  }

  .bar__link {
    padding: 0 11px;
  }

  .bar__cta {
    height: 40px;
    padding: 0 15px;
  }
}

/* with less motion, the presses do not shrink */
@media (prefers-reduced-motion: reduce) {
  .bar__link:active span,
  .bar__cta:active {
    transform: none;
  }

  .bar__cta:active {
    background: var(--cta-down);
  }
}