/* ==========================================================================
   SGM Hair Studio — styles
   Identity: blue-led "appointment sheet" derived from the client-supplied
   logo (navy #072145, cream #EAE1D2) — fine rules, editorial priced menu,
   precise alignment on a warm ivory reading surface. Mobile-first.
   ========================================================================== */

:root {
  /* Palette (navy + cream sampled from assets/sgm logo.png) */
  --color-navy: #072145;     /* primary brand: buttons, footer, strong rules */
  --color-blue: #2F5183;     /* secondary brand: links, labels, hovers */
  --color-powder: #E7EDF5;   /* restrained section / form surface */
  --color-ivory: #FAF8F2;    /* main reading surface */
  --color-charcoal: #232A35; /* body text */
  --color-white: #FFFFFF;
  --color-cream: #EAE1D2;    /* logo-derived warm accent (dark surfaces) */
  --color-muted: #53617A;    /* muted blue-gray text */
  --line: #DAE0E9;           /* hairline rules */
  --line-strong: #B9C3D2;    /* stronger rules */

  /* Type */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 68rem;
  --header-h: 4rem;
  --radius: 0.375rem;

  /* Motion (one shared system: fast hovers, calm reveals, small rises) */
  --dur-fast: 0.18s;
  --dur-reveal: 0.55s;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
  --rise: 12px;
}

/* ---------- Reset & base ---------- */

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

html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

a { color: var(--color-blue); text-underline-offset: 0.15em; }
a:hover { color: var(--color-navy); }

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

/* On the deep-navy bands the navy outline would vanish — use cream. */
.contact :focus-visible,
.site-footer :focus-visible,
.hero-brand :focus-visible {
  outline-color: var(--color-cream);
}

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

section { scroll-margin-top: calc(var(--header-h) + 0.5rem); }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 100;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; color: var(--color-white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary:hover { background: var(--color-blue); color: var(--color-white); }

.btn-ghost {
  background: transparent;
  color: var(--color-charcoal);
  border-color: var(--line-strong);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-ghost:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
  background: var(--color-white);
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover,
  .btn-ghost:hover { transform: translateY(-1px); }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 242, 0.96);
  border-bottom: 1px solid var(--line);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 12px rgba(7, 33, 69, 0.10);
}

.header-inner {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--color-charcoal);
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  color: var(--color-navy);
}
.brand-word {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem 1.4rem;
  flex-wrap: wrap;
}

.site-nav a:not(.btn) {
  display: inline-block;
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.6rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-bottom-color var(--dur-fast) var(--ease);
}
.site-nav a:not(.btn):hover {
  color: var(--color-navy);
  border-bottom-color: var(--color-blue);
}
.site-nav a.is-active:not(.btn) {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.nav-cta .btn { padding: 0.55rem 1.1rem; font-size: 0.95rem; min-height: 40px; }

/* Nav toggle: only functional (and visible) when JS is running, so the
   no-JS page always shows plain nav links. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--color-charcoal);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
}

.nav-toggle-bars {
  width: 16px;
  height: 2px;
  background: var(--color-navy);
  position: relative;
  flex-shrink: 0;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--color-navy);
}
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

@media (max-width: 47.9375em) {
  .js .nav-toggle { display: inline-flex; }

  .js .site-nav {
    display: none;
    width: 100%;
    padding-bottom: 0.75rem;
  }
  .js .site-nav.is-open { display: block; }

  .js .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
  }
  .js .site-nav a:not(.btn) {
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--line);
    width: 100%;
  }
  .js .nav-cta { padding-top: 0.75rem; }
  .js .nav-cta .btn { display: block; text-align: center; }

  /* Without JS the nav simply wraps under the brand as plain links. */
  .site-nav ul { gap: 0.25rem 1.1rem; }
}

/* ---------- Hero ---------- */

.hero {
  border-bottom: 1px solid var(--line);
  padding-block: 3rem 3rem;
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.3rem);
  font-weight: 500;
  margin-bottom: 1.1rem;
  max-width: 21ch;
}

.lede {
  font-size: 1.15rem;
  color: var(--color-muted);
  max-width: 52ch;
  margin-bottom: 1.75rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hero-facts {
  font-size: 0.9rem;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  max-width: 34rem;
  margin-bottom: 0;
}

/* Hero brand panel: the supplied logo on its own navy field with the
   appointment notes integrated beneath it. The logo file background is
   the same navy, so the image sits seamlessly in the panel. */
.hero-brand {
  background: var(--color-navy);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 24rem;
  border: 1px solid var(--color-navy);
}

.hero-logo {
  width: min(70%, 15rem);
  height: auto;
  margin: 1.5rem auto 0.75rem;
}

.hero-brand-info {
  padding: 0.5rem 1.6rem 1.4rem;
}

.card-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cream);
  margin-bottom: 0.6rem;
}

/* The heading's fine rule is an element (not a border) so the hero
   entrance can draw it with a transform. Static by default. */
.card-heading::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(234, 225, 210, 0.35);
  margin-bottom: 1rem;
  transform-origin: left;
}

.card-list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}
.card-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(234, 225, 210, 0.18);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-white);
}
.card-list li:last-child { border-bottom: 0; }

.card-foot { margin: 0; font-size: 0.92rem; }
.card-foot a { color: var(--color-cream); }
.card-foot a:hover { color: var(--color-white); }

@media (min-width: 56em) {
  .hero { padding-block: 4.5rem 4.5rem; }
  .hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
  }
  .hero-brand { justify-self: end; width: 100%; }
}

/* ---------- Hero entrance (enhancement only) ----------
   One coordinated, logo-led load sequence (~1.3s total). Base styles are
   the finished hero; the animations exist only when JS adds .hero-intro on
   a fresh top-of-page load AND the user allows motion, so no-JS,
   reduced-motion, and anchor-navigation visitors always get the stable
   hero immediately. Transforms/opacity/filter only — layout space is
   reserved by the logo's width/height attributes, so nothing shifts. */

@media (prefers-reduced-motion: no-preference) {
  .js.hero-intro .hero .hero-logo {
    animation: hero-logo 0.6s var(--ease) both;
  }
  .js.hero-intro .hero .card-heading::before {
    animation: hero-rule 0.35s var(--ease) 0.45s both;
  }
  .js.hero-intro .hero .eyebrow    { animation: hero-copy 0.4s var(--ease) 0.5s both; }
  .js.hero-intro .hero h1          { animation: hero-copy 0.4s var(--ease) 0.6s both; }
  .js.hero-intro .hero .lede       { animation: hero-copy 0.4s var(--ease) 0.7s both; }
  .js.hero-intro .hero .hero-facts { animation: hero-copy 0.4s var(--ease) 0.8s both; }
  .js.hero-intro .hero .cta-row    { animation: hero-copy 0.4s var(--ease) 0.9s both; }

  @keyframes hero-logo {
    from { opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  @keyframes hero-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes hero-copy {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Sections shared ---------- */

section { padding-block: 3.5rem; }

.section-head { margin-bottom: 2rem; max-width: 46rem; }

.section-head h2,
.studio h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 600;
}

.section-lede { color: var(--color-muted); font-size: 1.08rem; margin-bottom: 0; }

.section-cta { margin: 2.25rem 0 0; }

@media (min-width: 56em) {
  section { padding-block: 4.5rem; }
}

/* ---------- Service menu ---------- */

/* White surface between the ivory hero and powder appointment band keeps
   adjacent sections distinct across the full page rhythm. */
.services {
  background: var(--color-white);
  border-bottom: 1px solid var(--line);
}

.menu-group { margin-bottom: 2.25rem; }
.menu-group:last-of-type { margin-bottom: 0; }

.menu-category {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blue);
  border-bottom: 2px solid var(--color-navy);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.menu-main { display: block; max-width: 46rem; }

.menu-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.menu-desc {
  display: block;
  color: var(--color-muted);
  font-size: 0.98rem;
  margin-top: 0.15rem;
}

.menu-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.menu-duration {
  font-size: 0.9rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.menu-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.price-from {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-right: 0.3rem;
}

.menu-note {
  font-size: 0.95rem;
  color: var(--color-muted);
  border-left: 3px solid var(--color-navy);
  padding: 0.35rem 0 0.35rem 1rem;
  margin: 1.1rem 0 0;
  max-width: 44rem;
}

@media (min-width: 40em) {
  .menu-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
  }
  .menu-meta {
    justify-content: flex-end;
    gap: 1.75rem;
    flex-shrink: 0;
    min-width: 15rem;
  }
}

/* ---------- Appointment info ---------- */

.appointment-info {
  background: var(--color-powder);
  border-bottom: 1px solid var(--line);
}

/* Connected editorial sequence: large numerals over a shared navy rule —
   horizontal on desktop, vertical on mobile. */
.steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

.step {
  border-top: 2px solid var(--color-navy);
  padding-top: 1rem;
}

.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-blue);
  margin-bottom: 0.6rem;
}

.step h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.step p { margin: 0; color: var(--color-muted); font-size: 0.98rem; }

@media (min-width: 48em) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* Compact operational block beneath the steps: availability,
   non-confirmation, and the late policy in one calm place. */
.appt-before {
  background: var(--color-white);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  max-width: 46rem;
}
.appt-before h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.appt-before p { margin: 0; color: var(--color-muted); font-size: 0.98rem; }

/* ---------- Studio ---------- */

.studio { border-bottom: 1px solid var(--line); }

.studio-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.studio-copy p { color: var(--color-muted); max-width: 54ch; }
.studio-copy p:last-child { margin-bottom: 0; }

.studio-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--color-navy);
}
.studio-facts li {
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-navy);
}

@media (min-width: 56em) {
  .studio-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; }
}

/* ---------- Location & contact (deep-navy band) ---------- */

.contact {
  background: var(--color-navy);
  color: var(--color-white);
  border-bottom: 1px solid var(--color-navy);
}

.contact .section-head h2 { color: var(--color-white); }

.contact-split {
  display: grid;
  gap: 2.5rem;
}

.contact-col h3 {
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cream);
  border-top: 1px solid rgba(234, 225, 210, 0.35);
  padding-top: 1rem;
  margin-bottom: 0.9rem;
}

.contact-when { margin-top: 1.75rem; }

.address {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-white);
}

.contact-note {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
  max-width: 34rem;
}

.directions-link {
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--color-cream);
}
.directions-link:hover { color: var(--color-white); }

/* Two balanced contact cards: Call/Text and Email. Actions are separate,
   explicit links (never one ambiguous control). */
.contact-cards {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(234, 225, 210, 0.28);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.3rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.contact-card:hover { border-color: rgba(234, 225, 210, 0.55); }

.contact-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cream);
  margin-bottom: 0.5rem;
}

.contact-card-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-white);
  margin-bottom: 0.9rem;
}
.contact-card-email {
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.contact-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(234, 225, 210, 0.45);
  border-radius: var(--radius);
  color: var(--color-cream);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.contact-action:hover {
  border-color: var(--color-cream);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.06);
}

/* Side-by-side only where the email address fits on one line. */
@media (min-width: 72em) {
  .contact-cards { grid-template-columns: 1fr 1fr; }
}

.contact .contact-note + .contact-note { margin-top: 0.75rem; }

@media (min-width: 48em) {
  .contact-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

/* ---------- Booking (Square Appointments) ----------
   The widget's internal interface belongs to Square — only the SGM wrapper
   around it is styled here. The fallback link and phone alternatives are
   plain HTML, so the section works without JavaScript or the embed. */

.booking { padding-bottom: 5rem; }

.booking-panel {
  background: var(--color-powder);
  border: 1px solid var(--line);
  border-top: 3px solid var(--color-navy);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.6rem;
  max-width: 52rem;
}

.booking-note {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.booking-widget {
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Reserve calendar space only while the embed is still initializing (JS
   adds .is-ready once Square renders its calendar or mobile button, either
   of which then sets its own natural height). The no-JS page keeps a
   compact panel around the direct booking link. */
.js .booking-widget:not(.is-ready) { min-height: 30rem; }

.booking-widget iframe { max-width: 100%; }

.booking-loading {
  padding: 1rem 1.1rem;
  margin: 0;
  font-size: 0.98rem;
  color: var(--color-muted);
}

.booking-fallback {
  margin: 1rem 0 0;
  font-size: 0.95rem;
}

.booking-alt {
  margin: 1.5rem 0 0;
  color: var(--color-muted);
  max-width: 52rem;
}

.booking-privacy {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0.35rem 0 0;
}

/* ---------- Subpages (privacy) ---------- */

.privacy-page h1 { font-size: clamp(2rem, 5vw, 2.6rem); }

.privacy-page h2 {
  font-size: 1.35rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.privacy-page p { color: var(--color-muted); }

.privacy-updated {
  font-size: 0.88rem;
  margin-top: 2.5rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.85);
  padding-block: 2.75rem;
  font-size: 0.95rem;
  border-top: 3px solid var(--color-cream);
}

.site-footer a { color: var(--color-white); }
.site-footer a:hover { color: var(--color-cream); }

.footer-grid {
  display: grid;
  gap: 1.75rem;
}

.footer-id {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}

/* The logo's own navy background matches the footer, so the mark sits
   directly on the surface without a box. */
.footer-logo {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 0.6rem;
}

.site-footer p { margin-bottom: 0.5rem; }

.footer-meta p:last-child { color: rgba(234, 225, 210, 0.75); }

@media (min-width: 48em) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-meta { text-align: right; }
}

/* ---------- Reveal motion (enhancement only) ----------
   Base state is fully visible: JS adds .reveal-ready only when running AND
   the user allows motion, so no-JS and reduced-motion users always see the
   complete page. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal.reveal-ready {
    opacity: 0;
    transform: translateY(var(--rise));
    transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  }
  .js .reveal.reveal-ready.is-visible {
    opacity: 1;
    transform: none;
  }
}