/* ===========================================================================
   Lucero Canteen — one navy screen, then the facts.
   Two families, one colour, no build step.
   =========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --navy: #1b3b61; /* the logo's own navy — the entire opening screen */
  --ink: #12233b;
  --paper: #ffffff;

  --muted: #55637a; /* on paper — 6.1:1 */
  --brass: #8a5c24; /* on paper — 4.7:1 */
  --hairline: rgb(18 35 59 / 0.16);
  --on-navy: rgb(255 255 255 / 0.66); /* on navy — 6.1:1 */

  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-text: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-address: clamp(2rem, 1.2rem + 4.2vw, 4.75rem);
  --fs-wordmark: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);

  --lh-tight: 1.04;
  --lh-body: 1.6;
  --tracking-label: 0.16em;
  --tracking-tight: -0.018em;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --gutter: clamp(var(--sp-5), 5vw, var(--sp-7));
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* how much scrolling the star transition occupies */
  --stage-height: 280svh;
}

@media (max-width: 40rem) {
  :root {
    --stage-height: 220svh;
  }
}

/* ------------------------------------------------------------------- base */

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

* {
  margin: 0;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 160ms ease, color 160ms ease;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background-color: var(--navy);
  color: var(--paper);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: translate 320ms var(--ease-out-expo);
}

.skip-link:focus-visible {
  translate: -50% var(--sp-3);
}

.eyebrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.2;
}

.eyebrow__rule {
  width: 2rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.55;
  flex: none;
}

/* an underline that retracts on hover */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 1.5rem;
  text-decoration: none;
  padding-bottom: 0.1em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 320ms var(--ease-out-expo);
}

.link-underline:hover,
.link-underline:focus-visible {
  background-size: 0% 1px;
  background-position: 100% 100%;
}

.link-underline .arrow {
  transition: translate 320ms var(--ease-out-expo);
}

.link-underline:hover .arrow,
.link-underline:focus-visible .arrow {
  translate: 0.18em -0.18em;
}

/* --------------------------------------------------- opened from the disk */

.file-notice {
  display: none;
}

.is-file-protocol .file-notice {
  display: block;
  padding: var(--sp-4) var(--gutter);
  background: #f7f1e6;
  color: var(--ink);
  border-bottom: 3px solid var(--brass);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.file-notice strong {
  font-weight: 600;
}

.file-notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background: rgb(18 35 59 / 0.08);
  border-radius: 3px;
  white-space: nowrap;
}

/* Without a server there is no animation, so do not leave a 3-screen void. */
.is-file-protocol .stage {
  height: 100svh;
}

.is-file-protocol .stage__pin {
  position: relative;
  height: 100svh;
}

/* ============================================================== the stage */

.stage {
  position: relative;
  height: var(--stage-height);
  background-color: var(--navy);
}

.stage__pin {
  position: sticky;
  top: 0;
  /* lvh, not dvh: the largest viewport height never changes while an iOS
     toolbar collapses mid-scroll, and it is always >= the visible area, so the
     pin covers the screen without ever resizing. */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background-color: var(--navy);
  isolation: isolate;
}

/* No JavaScript, or a visitor who asked for less motion: one screen, no scroll. */
.stage.is-static,
.no-js .stage {
  height: 100svh;
}

.stage.is-static .stage__pin,
.no-js .stage__pin {
  position: relative;
  height: 100svh;
}

.stage__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* A zero-width ruler exactly as tall as the sticky travel. Motion measures
   scroll progress against this element instead of the viewport, so the mapping
   contains no viewport height and cannot shift when a mobile toolbar moves. */
.stage__ruler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  /* vh first for older Safari (where 100vh already means the large viewport),
     lvh where supported — either way it is stable while you scroll. */
  height: max(1px, calc(var(--stage-height) - 100vh));
  height: max(1px, calc(var(--stage-height) - 100lvh));
  visibility: hidden;
  pointer-events: none;
}

/* Rotate and scale the star about its own bounding-box centre, so it grows
   from the middle of the mark wherever its path coordinates happen to sit. */
#star {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.stage__hud {
  --hud-pad: clamp(var(--sp-4), 3.2vw, var(--sp-6));
  /* the pin is lvh tall, so lift the bottom row back onto the visible edge */
  --toolbar-gap: calc(100lvh - 100svh);

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--hud-pad) var(--gutter);
  padding-bottom: calc(var(--hud-pad) + var(--toolbar-gap));
  color: var(--paper);
  pointer-events: none;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  letter-spacing: 0.01em;
  line-height: 1;
}

.wordmark span {
  color: var(--on-navy);
}

.wordmark a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  text-decoration: none;
  pointer-events: auto;
}

.cue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.cue__line {
  display: block;
  width: 1px;
  height: clamp(2rem, 5vh, 3.5rem);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.8));
  transform-origin: bottom;
}

.cue__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-navy);
}

/* ================================================================ the facts */

.facts {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(var(--sp-7), 9vw, 7rem) var(--gutter);
  background-color: var(--paper);
}

.facts__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: 42rem;
}

.facts__star {
  color: var(--navy);
}

.facts__title {
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-address);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--ink);
}

.facts__title span:last-child {
  color: var(--muted);
}

.facts__intro {
  max-width: 28ch;
  color: var(--muted);
  text-wrap: pretty;
}

.facts__hours {
  width: min(100%, 24rem);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--hairline);
}

.facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}

.facts__row dt {
  color: var(--ink);
}

.facts__row dd {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.facts__row.is-closed dd {
  color: var(--brass);
}

.facts__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-base);
}

.facts__links a {
  color: var(--ink);
}

.facts__note {
  margin-top: var(--sp-5);
  max-width: 30ch;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------- reveal pre-state */

/* Armed by the inline script, disarmed again if the module never boots. */
.reveal-armed [data-reveal] {
  opacity: 0;
}

/* ============================================================ less motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-armed [data-reveal] {
    opacity: 1;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}