/* ── The stelvio look for the static pages ───────────────────────────
 * 404, privacy, legal and the nonstop page are plain HTML files that the
 * server never renders, so they cannot use the shell in lib/stelvio.js.
 * This sheet carries the same tokens under the same names and styles plain
 * semantic HTML with them: the inner pages' blue ground, warm off-white
 * type in Instrument Sans, the Pinyon Script wordmark, quiet uppercase labels
 * and the glass pill. No JavaScript, no cursor, no grain, no motion; these
 * are pages to read. The off-white reaches 13.15:1 on the blue, and nothing
 * is quieted with opacity. Fonts come from /assets/stelvio-fonts.css; this
 * sheet only names the families. */
:root {
  --sv-bg: #00008B;               /* ground: the inner pages' blue */
  --sv-white: #F4EDE2;            /* text, rules and the solid pill: warm off-white, 13.15:1 */
  --sv-glass: color-mix(in srgb, var(--sv-white) 10%, transparent);
  --sv-glass-border: color-mix(in srgb, var(--sv-white) 20%, transparent);
  --sv-rule: color-mix(in srgb, var(--sv-white) 45%, transparent);
  --sv-margin: 58px;
  --sv-space-high: 160px;
  --sv-space-medium: 80px;
  --sv-space-min: 60px;
  --sv-t35: 2.188rem; --sv-t28: 1.75rem; --sv-t25: 1.563rem; --sv-t20: 1.25rem; --sv-t18: 1.125rem; --sv-t16: 1rem; --sv-t14: .875rem;
  --sv-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sv-mark: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --st-measure: 40rem;
  color-scheme: dark;
}
@media (max-width: 767px) { :root { --sv-margin: 30px; --sv-space-high: 96px; --sv-space-medium: 56px; --sv-space-min: 40px; } }
@media (min-width: 768px) and (max-width: 1023px) { :root { --sv-margin: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--sv-bg); }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--sv-bg);
  color: var(--sv-white);
  font-family: var(--sv-font);
  font-size: var(--sv-t18);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .2px;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sv-white); color: var(--sv-bg); }
:focus-visible { outline: 2px solid var(--sv-white); outline-offset: 4px; }
a { color: var(--sv-white); }

/* The label: short, uppercase, the size of the look's nav. Never a sentence. */
.sv-label { margin: 0; font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); font-weight: 400; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; }

/* ── Skip link: hidden until it takes focus, then a glass pill. ── */
.st-skip {
  position: absolute;
  top: 12px;
  left: var(--sv-margin);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--sv-glass-border);
  border-radius: 999px;
  background: var(--sv-bg);
  font-size: var(--sv-t14);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.st-skip:focus { transform: none; }

/* ── Header: the wordmark and three plain links, as in the look's nav, but in
 * the flow of the page rather than fixed over it. ── */
.sv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 30px var(--sv-margin) 0;
}
.sv-head-home { display: inline-flex; align-items: center; min-height: 72px; color: var(--sv-white); text-decoration: none; }
/* The mark: a tall flourished F and a smaller "in" in one script face. */
.sv-mark { display: inline-flex; align-items: baseline; font: 400 34px/1 var(--sv-mark); letter-spacing: 0; white-space: nowrap; }
.sv-mark-f { font-size: 62px; line-height: 1; margin-right: -.04em; }
.sv-head nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.sv-head nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--sv-t14);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.sv-head nav a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
@media (max-width: 767px) {
  .sv-head { padding-top: 20px; }
  .sv-head nav ul { gap: 0 24px; }
}

/* ── The reading column. ── */
main { flex: 1 0 auto; width: 100%; padding: var(--sv-space-min) var(--sv-margin) var(--sv-space-medium); }
main:focus { outline: none; }
.st-page { max-width: var(--st-measure); margin: 0 auto; }
.st-page h1, .st-page h2, .st-page h3 { font-family: inherit; font-weight: 500; text-wrap: balance; }
.st-page h1 { margin: 0 0 .5em; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; }
.st-page h2 { margin: 2.25em 0 .6em; font-size: var(--sv-t25); line-height: 1.2; letter-spacing: 0; }
.st-page h3 { margin: 0 0 .4em; font-size: var(--sv-t20); line-height: 1.25; letter-spacing: 0; }
.st-page p { margin: 0 0 1em; }
.st-page ul { margin: 0 0 1.25em; padding-left: 1.2em; }
.st-page li { margin: 0 0 .4em; padding-left: .2em; }
.st-page li::marker { color: var(--sv-white); }
.st-page strong { font-weight: 600; }
.st-page :is(p, li) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.st-page :is(p, li) a:hover { text-decoration-thickness: 2px; }
.st-meta { margin: 0 0 2.5rem; }

/* ── The glass pill and the white pill, for the ways forward. ── */
.st-pills, .st-page .st-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.st-page .st-pills li { margin: 0; padding: 0; }
.st-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--sv-glass-border);
  border-radius: 999px;
  background: var(--sv-glass);
  font-size: var(--sv-t14);
  letter-spacing: .5px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}
.st-page .st-pill { text-decoration: none; }
.st-pill:hover { border-color: var(--sv-white); }
.st-pill--solid { border-color: var(--sv-white); background: var(--sv-white); color: var(--sv-bg); }
.st-pill--solid:hover { background: var(--sv-white); color: var(--sv-bg); }

/* ── 404: the note and the ways forward in both languages. ── */
.st-lost main { display: flex; align-items: center; }
.st-lost .st-page { width: 100%; }
.st-lost-block + .st-lost-block { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--sv-rule); }
.st-lost .st-page p { margin-bottom: 1.25rem; }

/* ── The nonstop page: an intro, sections with a label, three features,
 * the cinemas as glass pills, the questions, and the App Store badge. ── */
.st-intro { padding-bottom: var(--sv-space-min); }
.st-intro .sv-label { margin-bottom: 1.25rem; }
.st-lead { font-size: var(--sv-t20); line-height: 1.5; }
.st-badge { display: inline-flex; align-items: center; min-height: 48px; margin-top: .5rem; }
.st-badge svg { display: block; width: auto; height: 50px; }
.st-section { padding: var(--sv-space-min) 0; border-top: 1px solid var(--sv-rule); }
.st-section .sv-label { margin-bottom: 1rem; }
.st-section h2 { margin-top: 0; font-size: clamp(var(--sv-t25), 1.2rem + 1.5vw, var(--sv-t35)); line-height: 1.15; }
.st-features { display: grid; gap: 0; margin: 2rem 0 0; }
.st-feature { padding: 1.5rem 0; border-top: 1px solid var(--sv-rule); }
.st-feature p { margin: 0; }
.st-page .st-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 2rem 0; padding: 0; list-style: none; }
.st-page .st-tag {
  display: inline-flex;
  margin: 0;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--sv-glass-border);
  border-radius: 999px;
  background: var(--sv-glass);
  font-size: var(--sv-t16);
  line-height: 1.3;
}
.st-faq { margin-top: 2rem; }
.st-faq-item { padding: 1.5rem 0; border-top: 1px solid var(--sv-rule); }
.st-faq-item p { margin: 0; }
.st-section--cta .st-badge { margin-top: 1rem; }

/* ── Footer: the look's foot, with room for a thumb on every link. ── */
.sv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 24px var(--sv-margin) 20px;
  border-top: 1px solid var(--sv-rule);
  font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16));
  line-height: 1.4;
  letter-spacing: .5px;
}
.sv-foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.sv-foot a { display: inline-flex; align-items: center; min-height: 44px; text-transform: uppercase; text-decoration: none; }
.sv-foot a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.sv-foot a[href^="mailto:"] { text-transform: none; }