/*
 * styles.css — Paisley Howell
 * Systemized against three DESIGN.md reads (see design-sources.md):
 *   - resend:  editorial type hierarchy + cinematic section spacing
 *   - ferrari: sparse-accent-as-authority + photography-carries-depth
 * Direction: BRIGHT & LIGHT — pure white canvas, denim/sky-blue accent, sunlit editorial.
 * (Pivot 2026-07-18: warm cinematic-dark rejected. She's a sunlit stage, not a dark room.)
 *
 * TOKEN RULE: color/font/spacing literals live ONLY in :root. hydrate.js overwrites these from
 * config.js at boot (config is the source of truth); the values below are the no-JS fallback and
 * must mirror config.theme. Everything below :root uses var() exclusively.
 */

/* --- Design tokens (mirror config.theme; hydrate.js syncs from config at boot) --- */
:root {
  /* Surfaces (pure white hierarchy) */
  --surface-base: #ffffff;
  --surface-raised: #f5f7fa;
  --surface-card: #eef2f7;
  --surface-elevated: #e3e9f1;
  /* Text (ink on white) */
  --text-primary: #14181f;
  --text-secondary: #4c5563;
  --text-muted: #64748b;
  /* Accent (one denim/sky blue) */
  --accent-gold: #2b6cb0;
  --accent-gold-strong: #3a80c8;
  --accent-gold-deep: #1c4d80;
  /* Cool structural depth */
  --border-warm: rgba(20, 50, 95, 0.12);
  --border-warm-strong: rgba(20, 50, 95, 0.22);
  /* Signature light bloom (soft sky wash) */
  --glow-warm: rgba(90, 155, 213, 0.22);
  --glow-warm-core: rgba(205, 228, 247, 0.55);
  /* Modal */
  --scrim: rgba(20, 32, 50, 0.45);
  --shadow-dialog: 0 24px 60px rgba(20, 45, 90, 0.16);
  /* Legibility halo for the ink nav sitting over the hero photo (pre-scroll).
     A white glow, not a dark shadow: the hero is a blown-out golden-hour frame, so ink
     text over it needs to be lifted off light pixels, not darkened further. */
  --nav-hero-text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.95);
  /* Semantic */
  --error: #c0392b;
  --success: #2e7d55;
  --on-accent: #ffffff;

  /* Fonts */
  --font-display: 'Bitter', Rockwell, Georgia, 'Times New Roman', serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Spacing (8px grid) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Motion */
  --dur-fast: 200ms;
  --dur-normal: 400ms;
  --dur-slow: 800ms;
  --dur-cinematic: 1200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-dramatic: cubic-bezier(0.7, 0, 0.3, 1);

  /* Layout */
  --maxw: 1200px;
  --maxw-narrow: 760px;

  /* Driven by JS (signature moments); safe defaults for no-JS */
  --light-radius: 140vmax;
  --light-x: 50%;
  --light-y: 42%;
  --vignette: 0.42;

  color-scheme: light;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'kern';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent-gold);
  border-radius: var(--radius-xs);
}

/* --- Accessibility: skip link --- */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 200;
  background: var(--accent-gold);
  color: var(--on-accent);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-md);
}

/* --- Typography --- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-gold);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.section-heading {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 46ch;
}

.muted {
  color: var(--text-muted);
}

/* --- Layout helpers --- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container-narrow {
  max-width: var(--maxw-narrow);
}

.section {
  padding-block: var(--space-5xl);
}

/* First section on an inner page clears the fixed header. */
.section-first {
  padding-top: var(--space-5xl);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-3xl);
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.btn-primary {
  background-color: var(--accent-gold);
  color: var(--on-accent);
}
.btn-primary:hover {
  background-color: var(--accent-gold-strong);
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-warm-strong);
}
.btn-ghost:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.btn-block {
  width: 100%;
}

/* --- Header / nav --- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  transition: background-color var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Pre-scroll scrim. The header floats over whatever photo config.images.hero points at, so
   contrast cannot depend on that photo staying bright. This white fade guarantees the ink
   wordmark and nav clear 4.5:1 for any hero, and is replaced by the solid bar on scroll. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface-base) 78%, transparent), transparent);
  transition: opacity var(--dur-normal) var(--ease-out);
}
.site-header.is-scrolled::before {
  opacity: 0;
}
.site-header.is-scrolled {
  background-color: color-mix(in srgb, var(--surface-base) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border-warm);
}
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-nav .nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  /* Ink over the hero photo, matching the wordmark. The halo carries legibility until the
     header picks up its white background on scroll, at which point the halo is dropped. */
  color: var(--text-primary);
  text-shadow: var(--nav-hero-text-shadow);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav .nav-link:hover {
  color: var(--accent-gold);
}
.site-header.is-scrolled .site-nav .nav-link {
  color: var(--text-secondary);
  text-shadow: none;
}
.site-header.is-scrolled .site-nav .nav-link:hover {
  color: var(--text-primary);
}
.site-nav .btn {
  padding: var(--space-xs) var(--space-lg);
  min-height: 40px;
}
@media (max-width: 768px) {
  .site-nav .nav-link {
    display: none;
  }
}

/* --- HERO + primary signature moment (sunlit photo feathering into white) --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: end center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Bottom white gradient: the photo dissolves into the white page, and gives the
   ink hero text a bright, legible base. Keeps the top of the frame (sky) open. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--surface-base) 4%,
    color-mix(in srgb, var(--surface-base) 82%, transparent) 26%,
    transparent 58%
  );
}

/* The warm light pool: a radial gradient whose radius/position are JS-driven on scroll + cursor. */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(
    circle var(--light-radius) at var(--light-x) var(--light-y),
    var(--glow-warm-core) 0%,
    var(--glow-warm) 22%,
    transparent 60%
  );
  pointer-events: none;
  transition: background var(--dur-fast) linear;
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(var(--hero-scale, 1.04));
  will-change: transform;
}

/* Vignette so she reads as the one lit thing in the room. */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--light-x) var(--light-y),
    transparent 30%,
    var(--surface-base) 78%
  );
  opacity: var(--vignette);
  transition: opacity var(--dur-fast) linear;
}

.hero-inner {
  max-width: 900px;
  padding: var(--space-3xl) var(--space-lg) var(--space-4xl);
}
.hero .display {
  margin-block: var(--space-md) var(--space-lg);
}
.hero .lead {
  margin-inline: auto;
  color: var(--text-secondary);
}
.hero-ctas {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

/* Word-by-word reveal (kinetic type). JS adds .is-in per word. */
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
}
.reveal-word.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

/* --- Scroll-reveal (section entrances) --- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

/* --- Intro statement band --- */
.intro .statement {
  max-width: 20ch;
}
.intro .teaser {
  margin-top: var(--space-lg);
  color: var(--accent-gold);
  font-weight: 500;
}

/* --- Route cards (home -> live/about) --- */
.route-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
@media (max-width: 768px) {
  .route-grid {
    grid-template-columns: 1fr;
  }
}
.route-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border-warm);
  isolation: isolate;
}
.route-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-cinematic) var(--ease-out);
}
.route-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--surface-base) 8%, transparent 70%);
}
.route-card:hover img {
  transform: scale(1.05);
}
.route-card-body {
  padding: var(--space-xl);
}
.route-card-body h2 {
  font-size: 1.6rem;
  margin-bottom: var(--space-2xs);
}

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}
.about-copy p + p {
  margin-top: var(--space-md);
  color: var(--text-secondary);
}
.about-copy .btn {
  margin-top: var(--space-xl);
}
.about-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-warm);
}
.about-origin {
  margin-top: var(--space-4xl);
  max-width: 520px;
}
.about-origin img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-warm);
}
.about-origin figcaption {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Shows: schedule --- */
.schedule {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--border-warm);
}
.show-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-warm);
}
.show-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.show-day {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent-gold);
}
.show-date {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}
.show-venue {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.show-city {
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .show-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .show-row .btn {
    justify-self: start;
  }
}

/* --- Merch: store grid --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}
@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-dialog);
}
.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--surface-card);
}
.product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-badge {
  position: absolute;
  z-index: 1;
  top: var(--space-md);
  left: var(--space-md);
  background: var(--accent-gold);
  color: var(--on-accent);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.product-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
}
.product-name {
  font-size: 1.15rem;
}
.product-price {
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.product-add {
  margin-top: auto;
}
.product-add.is-added {
  background: var(--success);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}
.gallery figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-warm);
  background: var(--surface-card);
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-cinematic) var(--ease-out);
}
.gallery figure:hover img {
  transform: scale(1.04);
}

/* --- Booking band (CTA) --- */
.book-band {
  text-align: center;
  background: var(--surface-raised);
  border-block: 1px solid var(--border-warm);
}
.book-band .section-heading {
  margin-bottom: var(--space-md);
}
.book-band .lead {
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

/* --- Footer --- */
.site-footer {
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--border-warm);
  text-align: center;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}
.footer-social {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  margin-block: var(--space-lg);
}
.footer-social a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-social a:hover {
  color: var(--accent-gold);
}
.footer-fine {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* --- Booking modal --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  background: var(--scrim);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-normal) var(--ease-out), visibility var(--dur-normal);
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal-panel {
  width: 100%;
  max-width: 480px;
  background: var(--surface-card);
  border: 1px solid var(--border-warm-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dialog);
  padding: var(--space-2xl);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-normal) var(--ease-out);
  max-height: 90svh;
  overflow-y: auto;
}
.modal.is-open .modal-panel {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--surface-elevated);
  border: 1px solid var(--border-warm);
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
}
.modal h2 {
  font-size: 1.75rem;
  margin-bottom: var(--space-xs);
}
.modal .modal-sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
}

/* --- Forms --- */
.field {
  margin-bottom: var(--space-md);
}
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xs);
}
.field input,
.field textarea {
  width: 100%;
  background: var(--surface-base);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--accent-gold);
  outline: none;
}
.form-status {
  margin-top: var(--space-md);
  font-size: 0.9rem;
  min-height: 1.2em;
}
.form-status.is-success {
  color: var(--success);
}
.form-status.is-error {
  color: var(--error);
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Links hub (/links) --- */
.links-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-3xl) var(--space-lg);
  position: relative;
  isolation: isolate;
}
.links-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle 60vmax at 50% 30%, var(--glow-warm) 0%, transparent 60%);
  pointer-events: none;
}
.links-inner {
  width: 100%;
  max-width: 440px;
  text-align: center;
}
.links-avatar {
  width: 128px;
  height: 128px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  margin: 0 auto var(--space-lg);
  border: 2px solid var(--border-warm-strong);
}
.links-inner h1 {
  font-size: 2rem;
  margin-bottom: var(--space-2xs);
}
.links-inner .sub {
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
}
.links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
}
.link-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-warm);
  color: var(--text-primary);
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.link-button:hover {
  transform: translateY(-2px);
  border-color: var(--accent-gold);
}
.link-button.is-primary {
  background: var(--accent-gold);
  color: var(--on-accent);
  border-color: transparent;
}

/* --- Reduced motion: kill scroll/cursor/kinetic, keep content visible --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal,
  .reveal-word {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-photo {
    transform: none;
  }
  :root {
    --light-radius: 150vmax;
    --vignette: 0.3;
  }
}

/* --- No-JS: ensure hero content and reveals are fully visible --- */
.no-js .reveal,
.no-js .reveal-word {
  opacity: 1;
  transform: none;
}
.no-js .hero-vignette {
  opacity: 0.3;
}