/* ==========================================================================
   The Falls at Elk Prairie — design-a body — Last Light design system
   Scoped: [data-design="a"]. BODY ONLY. NO hero. NO #funnel.
   Motion gate: animate ONLY transform / opacity / clip-path / stroke-dashoffset / filter / color
   PERF-6 fix: sticky header uses solid/translucent bg — NO backdrop-filter:blur on sticky/fixed.
   Centering: every content wrapper has max-width + margin-inline:auto.
   ========================================================================== */

/* ── Last Light token contract — scoped to design-a ── */
[data-design="a"].dq-design,
[data-design="a"] {
  /* Default = LAST LIGHT (dusk): deep blue-hour sky, warm ember on the land */
  --ll-dusk:      #161C24;
  --ll-field:     #1E2731;
  --ll-field-2:   #27323E;
  --ll-light:     #F4ECDA;
  --ll-haze:      #9BA8B2;
  --ll-haze-soft: #6E7B86;

  /* Kelvin axis — the identity */
  --ll-ember:     #E89A3C;
  --ll-glow:      #D8693B;
  --ll-cool:      #6E9BB7;

  /* Natural semantics */
  --ll-moss:      #87A06A;
  --ll-moss-deep: #A8C18A;
  --ll-rust:      #C0492F;

  --ll-line:      #33404B;
  --ll-line-soft: #283139;

  /* Type */
  --ll-font-display: "Cormorant Garamond","Canela",Georgia,"Times New Roman",serif;
  --ll-font-body:    "Söhne","Aktiv Grotesk",-apple-system,"Helvetica Neue",system-ui,sans-serif;
  --ll-font-meta:    "IBM Plex Mono","Space Mono",ui-monospace,Menlo,monospace;

  /* Scale */
  --ll-t-hero:    clamp(2.75rem, 8vw, 6rem);
  --ll-t-display: clamp(2rem, 5vw, 3.25rem);
  --ll-t-head:    clamp(1.5rem, 3vw, 2.25rem);
  --ll-t-lead:    clamp(1.2rem, 2vw, 1.5rem);
  --ll-t-body:    clamp(1rem, 1.1vw, 1.0625rem);
  --ll-t-meta:    0.8125rem;
  --ll-lh-body:   1.66;
  --ll-lh-tight:  1.04;
  --ll-track-meta: 0.22em;

  /* Spacing — 4px base, hipcamp 72/96 floor */
  --ll-grain:   4px;
  --ll-step:    8px;
  --ll-margin:  16px;
  --ll-stop:    24px;
  --ll-frame:   32px;
  --ll-spread:  48px;
  --ll-horizon: 72px;
  --ll-vista:   96px;

  /* Content container */
  --ll-maxw:    1200px;
  --ll-pad:     clamp(20px, 5vw, 48px);

  /* Motion */
  --ll-quick:   200ms;
  --ll-settle:  420ms;
  --ll-expose:  900ms;
  --ll-ease-light:  cubic-bezier(.37,0,.2,1);
  --ll-ease-settle: cubic-bezier(.16,.84,.44,1);
  --ll-ease-bloom:  cubic-bezier(.4,0,.2,1);

  /* Radius */
  --ll-r-frame: 4px;
  --ll-r-panel: 10px;
  --ll-r-read:  9999px;

  /* Elevation — depth is LIGHT, not hard shadow */
  --ll-elev-flat:  none;
  --ll-elev-line:  0 0 0 1px var(--ll-line);
  --ll-elev-lift:  0 18px 48px -24px rgba(8,12,18,.72);
  --ll-glow-ember: 0 0 0 1px color-mix(in oklab, var(--ll-ember), transparent 70%),
                   0 10px 44px -10px color-mix(in oklab, var(--ll-ember), transparent 52%);
  --ll-focus:      0 0 0 3px color-mix(in oklab, var(--ll-ember), transparent 58%);
}

[data-design="a"].dq-design {
  background: var(--ll-dusk);
  color: var(--ll-light);
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-body);
  line-height: var(--ll-lh-body);
  -webkit-font-smoothing: antialiased;
}

[data-design="a"].dq-design *,
[data-design="a"].dq-design *::before,
[data-design="a"].dq-design *::after { box-sizing: border-box; }

[data-design="a"].dq-design img { display: block; max-width: 100%; height: auto; }
[data-design="a"].dq-design p { margin: 0 0 var(--ll-margin); }
[data-design="a"].dq-design p:last-child { margin-bottom: 0; }

/* ── Shared windowed-center wrapper — EVERY content wrapper: max-width + margin-inline:auto ── */
[data-design="a"] .ll-place__inner,
[data-design="a"] .ll-keyfacts__inner,
[data-design="a"] .ll-find__inner,
[data-design="a"] .ll-gallery__inner,
[data-design="a"] .ll-nearby__inner,
[data-design="a"] .ll-host__inner,
[data-design="a"] .ll-closing__inner,
[data-design="a"] .ll-footer__inner {
  max-width: var(--ll-maxw);
  margin-inline: auto;
  padding-inline: var(--ll-pad);
}

/* ── Reading chip / badge ── */
[data-design="a"] .ll-reading {
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  letter-spacing: var(--ll-track-meta);
  text-transform: uppercase;
  color: var(--ll-haze);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-r-read);
  padding: 6px 14px;
  white-space: nowrap;
  display: inline-block;
}

/* ==========================================================================
   E1 · HEADER — name mark + drifting light-horizon + hamburger
   PERF-6 FIX: position:sticky — solid translucent bg, NO backdrop-filter:blur
   ========================================================================== */
[data-design="a"] .ll-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* PERF-6: solid bg, no blur — blur on sticky re-blurs animating hero every frame */
  background: color-mix(in oklab, var(--ll-dusk), transparent 5%);
  border-bottom: 1px solid var(--ll-line);
}

[data-design="a"] .ll-header__bar {
  box-sizing: border-box;
  max-width: var(--ll-maxw);
  margin-inline: auto;
  padding-inline: var(--ll-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-margin);
  height: 60px;
}

[data-design="a"] .ll-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ll-step);
  text-decoration: none;
  color: var(--ll-light);
  opacity: 0;
  transform: translateY(7px);
  animation: ll-expose var(--ll-settle) var(--ll-ease-light) .1s forwards;
}

[data-design="a"] .ll-logo__sun {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 38% 34%,
    color-mix(in oklab, var(--ll-ember), white 30%), var(--ll-ember));
  box-shadow: 0 0 14px -2px color-mix(in oklab, var(--ll-ember), transparent 30%);
}

[data-design="a"] .ll-logo__mark {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: .01em;
  line-height: 1;
}

[data-design="a"] .ll-header__horizon {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

[data-design="a"] .ll-header__light {
  position: absolute;
  inset: 0 -50%;
  display: block;
  background: linear-gradient(90deg,
    transparent,
    var(--ll-cool) 22%,
    var(--ll-ember) 50%,
    var(--ll-glow) 64%,
    transparent);
  opacity: .8;
  animation: ll-drift 28s ease-in-out infinite;
}

[data-design="a"] .ll-burger {
  background: none;
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-r-frame);
  width: 44px;
  height: 44px;
  display: grid;
  gap: 4px;
  place-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color var(--ll-quick) var(--ll-ease-settle);
}

[data-design="a"] .ll-burger span {
  display: block;
  width: 20px;
  height: 1.6px;
  background: var(--ll-light);
  transition: transform var(--ll-quick) var(--ll-ease-settle),
              opacity var(--ll-quick) linear;
}

[data-design="a"] .ll-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg);
}
[data-design="a"] .ll-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-design="a"] .ll-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg);
}

[data-design="a"] .ll-burger:focus-visible { outline: none; box-shadow: var(--ll-focus); }

/* Waypoints overlay — hidden attr = display:none; only pointer-interactive when open */
[data-design="a"] .ll-waypoints[hidden] { display: none; }

[data-design="a"] .ll-waypoints {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ll-dusk);
  padding: clamp(72px, 14vh, 140px) var(--ll-margin) var(--ll-vista);
  display: grid;
  align-content: start;
  gap: var(--ll-step);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--ll-settle) var(--ll-ease-light),
              transform var(--ll-settle) var(--ll-ease-light);
}

[data-design="a"] .ll-waypoints[data-open] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

[data-design="a"] .ll-waypoints__cap {
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  letter-spacing: var(--ll-track-meta);
  text-transform: uppercase;
  color: var(--ll-haze);
  border-bottom: 1px solid var(--ll-line);
  padding-bottom: var(--ll-step);
  margin: 0;
}

[data-design="a"] .ll-waypoint {
  font-family: var(--ll-font-display);
  font-size: var(--ll-t-head);
  color: var(--ll-light);
  text-decoration: none;
  padding: var(--ll-step) 0;
  position: relative;
  width: max-content;
}

[data-design="a"] .ll-waypoint::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1.5px;
  background: var(--ll-ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ll-quick) var(--ll-ease-settle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ll-waypoint:hover::after { transform: scaleX(1); }
  [data-design="a"] .ll-burger:hover { border-color: var(--ll-ember); }
}

[data-design="a"] .ll-waypoint:focus-visible { outline: none; box-shadow: var(--ll-focus); }
[data-design="a"] .ll-waypoint--book {
  margin-top: var(--ll-margin);
  font-size: var(--ll-t-body);
  font-family: var(--ll-font-body);
  color: var(--ll-ember);
}

/* ==========================================================================
   CTA — Beacon (the one warm light you walk toward at dusk)
   ========================================================================== */
[data-design="a"] .ll-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ll-step);
  box-sizing: border-box;
  padding: 14px 26px;
  border: none;
  cursor: pointer;
  border-radius: var(--ll-r-read);
  text-decoration: none;
  color: #20180c;
  font-family: var(--ll-font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--ll-ember), white 8%),
    var(--ll-ember));
  box-shadow: var(--ll-glow-ember);
  transition: transform var(--ll-quick) var(--ll-ease-settle);
  will-change: transform;
  isolation: isolate;
  min-height: 48px;
}

[data-design="a"] .ll-cta__bloom {
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    120px 120px at var(--ll-bx, 50%) var(--ll-by, 50%),
    color-mix(in oklab, var(--ll-ember), transparent 35%),
    transparent 70%);
  opacity: .6;
  animation: ll-bloom 5s var(--ll-ease-bloom) infinite;
}

[data-design="a"] .ll-cta__ext {
  font-family: var(--ll-font-meta);
  font-size: .8rem;
  opacity: .75;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ll-cta:hover { transform: translateY(-2px); }
}

[data-design="a"] .ll-cta:active { transform: translateY(0) scale(.97); }

[data-design="a"] .ll-cta:focus-visible {
  outline: none;
  box-shadow: var(--ll-glow-ember), var(--ll-focus);
}

[data-design="a"] .ll-cta--lg {
  padding: 17px 32px;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  min-height: 56px;
}

/* ==========================================================================
   SECTION 1 · THE PLACE — told story + E4 day-arc light log
   ========================================================================== */
[data-design="a"] .ll-place {
  padding-block: var(--ll-horizon);
}

[data-design="a"] .ll-place__inner {
  display: grid;
  gap: var(--ll-spread);
}

[data-design="a"] .ll-place__story .ll-reading { margin-bottom: var(--ll-margin); }

[data-design="a"] .ll-place__title {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: var(--ll-t-display);
  line-height: var(--ll-lh-tight);
  color: var(--ll-light);
  margin: var(--ll-step) 0 var(--ll-margin);
}

[data-design="a"] .ll-place__body {
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-body);
  line-height: var(--ll-lh-body);
  color: color-mix(in oklab, var(--ll-light), transparent 8%);
  max-width: 60ch;
}

/* Day-arc light log — E4 */
[data-design="a"] .ll-arc { margin: 0; position: relative; }

[data-design="a"] .ll-arc__band {
  height: clamp(120px, 22vw, 180px);
  border-radius: var(--ll-r-panel);
  border: 1px solid var(--ll-line);
  overflow: hidden;
  background: linear-gradient(100deg,
    #2C3A4A 0%, var(--ll-cool) 14%,
    color-mix(in oklab, var(--ll-ember), white 8%) 42%,
    var(--ll-ember) 50%, var(--ll-glow) 60%,
    #5A4A52 78%, #243043 100%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--ll-expose) var(--ll-ease-light) .15s;
}

[data-design="a"] .ll-arc[data-drawn] .ll-arc__band { clip-path: inset(0 0 0 0); }

[data-design="a"] .ll-arc[data-live] .ll-arc__band {
  animation: ll-arc-shimmer 18s ease-in-out infinite;
}

[data-design="a"] .ll-arc__marks {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(120px, 22vw, 180px);
  pointer-events: none;
}

[data-design="a"] .ll-arc__marks span {
  position: absolute;
  bottom: 10px;
  left: var(--at);
  transform: translateX(-50%);
  font-family: var(--ll-font-meta);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: #F4ECDA;
  text-shadow: 0 1px 6px rgba(8,12,18,.7);
  opacity: 0;
  transition: opacity var(--ll-settle) var(--ll-ease-light);
}

[data-design="a"] .ll-arc[data-drawn] .ll-arc__marks span { opacity: .92; }
[data-design="a"] .ll-arc[data-drawn] .ll-arc__marks span:nth-child(1) { transition-delay: .45s; }
[data-design="a"] .ll-arc[data-drawn] .ll-arc__marks span:nth-child(2) { transition-delay: .6s; }
[data-design="a"] .ll-arc[data-drawn] .ll-arc__marks span:nth-child(3) { transition-delay: .75s; }
[data-design="a"] .ll-arc[data-drawn] .ll-arc__marks span:nth-child(4) { transition-delay: .9s; }

[data-design="a"] .ll-arc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ll-margin);
  margin-top: var(--ll-margin);
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  color: var(--ll-haze);
}

[data-design="a"] .ll-arc__facts b { color: var(--ll-light); }

@media (min-width: 768px) {
  [data-design="a"] .ll-place__inner {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    padding-block: var(--ll-vista);
  }
}

/* ==========================================================================
   Feature handoff — data-bl-feature (TRIAD-2: body-life.js hooks parallax here)
   ========================================================================== */
[data-design="a"] .ll-handoff {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: clamp(360px, 55vw, 620px);
}

[data-design="a"] .ll-handoff__img {
  width: 100%;
  height: clamp(360px, 55vw, 620px);
  object-fit: cover;
  display: block;
}

[data-design="a"] .ll-handoff__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 55%,
    color-mix(in oklab, var(--ll-dusk), transparent 35%) 85%,
    var(--ll-dusk));
}

[data-design="a"] .ll-handoff__cap {
  position: absolute;
  left: var(--ll-margin);
  bottom: var(--ll-margin);
}

/* ==========================================================================
   SECTION 2 · KEY FACTS GRID
   ========================================================================== */
[data-design="a"] .ll-keyfacts {
  padding-block: var(--ll-horizon);
  background: var(--ll-field);
}

[data-design="a"] .ll-keyfacts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ll-stop);
  margin: 0;
  padding: 0;
}

[data-design="a"] .ll-keyfact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--ll-frame);
  background: var(--ll-field-2);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-r-panel);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ll-settle) var(--ll-ease-light),
              transform var(--ll-settle) var(--ll-ease-light);
}

[data-design="a"] .ll-keyfact[data-seen] { opacity: 1; transform: translateY(0); }
[data-design="a"] .ll-keyfact:nth-child(2)[data-seen] { transition-delay: .07s; }
[data-design="a"] .ll-keyfact:nth-child(3)[data-seen] { transition-delay: .14s; }
[data-design="a"] .ll-keyfact:nth-child(4)[data-seen] { transition-delay: .21s; }
[data-design="a"] .ll-keyfact:nth-child(5)[data-seen] { transition-delay: .28s; }
[data-design="a"] .ll-keyfact:nth-child(6)[data-seen] { transition-delay: .35s; }

[data-design="a"] .ll-keyfact__label {
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ll-haze);
}

[data-design="a"] .ll-keyfact__value {
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-body);
  color: var(--ll-light);
  line-height: var(--ll-lh-body);
}

[data-design="a"] .ll-keyfact__value--quote {
  font-family: var(--ll-font-display);
  font-size: var(--ll-t-lead);
  font-style: italic;
  line-height: 1.4;
  color: var(--ll-light);
}

[data-design="a"] .ll-keyfact__attr {
  display: block;
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  font-style: normal;
  color: var(--ll-haze);
  margin-top: 6px;
}

@media (min-width: 640px) {
  [data-design="a"] .ll-keyfacts__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   E6 · POINTER — sinking light (place-rooted; centered, NOT a button)
   ========================================================================== */
[data-design="a"] .ll-pointer {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: var(--ll-spread) auto var(--ll-horizon);
  width: max-content;
  cursor: pointer;
}

[data-design="a"] .ll-pointer__glow {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--ll-ember), transparent 40%),
    transparent 68%);
  transform: translate(-50%, 0);
  animation: ll-sink 5s var(--ll-ease-light) infinite;
}

[data-design="a"] .ll-pointer__svg { display: block; position: relative; }

[data-design="a"] .ll-pointer__line {
  stroke: var(--ll-ember);
  stroke-width: 1.6;
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: ll-rake-down 5s var(--ll-ease-light) infinite;
}

[data-design="a"] .ll-pointer__tip {
  stroke: var(--ll-ember);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: ll-tip-in 5s var(--ll-ease-light) infinite;
}

[data-design="a"] .ll-pointer__label {
  font-family: var(--ll-font-meta);
  text-transform: uppercase;
  letter-spacing: var(--ll-track-meta);
  font-size: var(--ll-t-meta);
  color: var(--ll-haze);
}

/* ==========================================================================
   SECTION 3 · STAYS SELECTOR (INT-1) — Find your light
   ========================================================================== */
[data-design="a"] .ll-find { padding-block: var(--ll-horizon); }

[data-design="a"] .ll-find__title {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: var(--ll-t-display);
  line-height: var(--ll-lh-tight);
  color: var(--ll-light);
  margin: var(--ll-step) 0 var(--ll-spread);
}

[data-design="a"] .ll-find__grid {
  display: grid;
  gap: var(--ll-spread);
}

[data-design="a"] .ll-find__list {
  display: grid;
  gap: var(--ll-margin);
  align-content: start;
}

/* Site tab button */
[data-design="a"] .ll-site {
  box-sizing: border-box;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: var(--ll-field);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-r-panel);
  padding: var(--ll-margin) var(--ll-stop);
  display: grid;
  gap: 4px;
  color: var(--ll-light);
  min-height: 56px;
  transition: transform var(--ll-quick) var(--ll-ease-settle),
              border-color var(--ll-quick) linear,
              box-shadow var(--ll-quick) var(--ll-ease-settle);
}

[data-design="a"] .ll-site__name {
  font-family: var(--ll-font-display);
  font-size: var(--ll-t-lead);
  font-weight: 600;
}

[data-design="a"] .ll-site__light {
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  letter-spacing: .08em;
  color: var(--ll-haze);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ll-site:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--ll-ember), transparent 50%);
  }
}

[data-design="a"] .ll-site:focus-visible { outline: none; box-shadow: var(--ll-focus); }

[data-design="a"] .ll-site[aria-checked="true"] {
  border-color: var(--ll-ember);
  box-shadow: var(--ll-glow-ember);
}

[data-design="a"] .ll-site[aria-checked="true"] .ll-site__light { color: var(--ll-ember); }

/* Preview pane */
[data-design="a"] .ll-find__preview {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-r-panel);
  background: var(--ll-field-2);
  min-height: 360px;
  isolation: isolate;
}

[data-design="a"] .ll-find__warm,
[data-design="a"] .ll-find__cool {
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity var(--ll-settle) var(--ll-ease-light);
}

[data-design="a"] .ll-find__warm {
  background: radial-gradient(120% 90% at 50% 110%,
    color-mix(in oklab, var(--ll-glow), transparent 40%),
    color-mix(in oklab, var(--ll-ember), transparent 62%) 40%,
    transparent 72%);
  opacity: var(--ll-temp, .5);
}

[data-design="a"] .ll-find__cool {
  background: radial-gradient(120% 90% at 50% 110%,
    color-mix(in oklab, var(--ll-cool), transparent 42%),
    transparent 70%);
  opacity: calc(1 - var(--ll-temp, .5));
}

[data-design="a"] .ll-find__body {
  padding: var(--ll-frame);
  display: grid;
  gap: var(--ll-step);
  align-content: start;
}

[data-design="a"] .ll-find__body[data-swap] {
  animation: ll-frame-in var(--ll-settle) var(--ll-ease-light);
}

[data-design="a"] .ll-find__name {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: var(--ll-t-head);
  color: var(--ll-light);
  margin: 4px 0 0;
}

[data-design="a"] .ll-find__meta {
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ll-haze);
  margin: 0;
}

[data-design="a"] .ll-find__terrain {
  font-family: var(--ll-font-body);
  line-height: var(--ll-lh-body);
  color: color-mix(in oklab, var(--ll-light), transparent 6%);
  margin: 0;
}

[data-design="a"] .ll-find__incl {
  list-style: none;
  padding: 0;
  margin: 4px 0 var(--ll-margin);
  display: grid;
  gap: 6px;
}

[data-design="a"] .ll-find__incl li {
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-meta);
  color: var(--ll-light);
  padding-left: 20px;
  position: relative;
}

[data-design="a"] .ll-find__incl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ll-moss);
}

@media (min-width: 768px) {
  [data-design="a"] .ll-find__grid { grid-template-columns: .9fr 1.1fr; align-items: start; }
}

/* ==========================================================================
   SECTION 4 · GALLERY
   ========================================================================== */
[data-design="a"] .ll-gallery {
  padding-block: var(--ll-horizon);
  background: var(--ll-field);
}

[data-design="a"] .ll-gallery__kicker { margin-bottom: var(--ll-margin); }

[data-design="a"] .ll-gallery__title {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: var(--ll-t-display);
  line-height: var(--ll-lh-tight);
  color: var(--ll-light);
  margin: var(--ll-step) 0 var(--ll-spread);
}

[data-design="a"] .ll-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ll-step);
}

[data-design="a"] .ll-gallery__frame {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ll-r-panel);
  border: 1px solid var(--ll-line);
  background: var(--ll-field-2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--ll-expose) var(--ll-ease-light),
              transform var(--ll-expose) var(--ll-ease-light);
}

[data-design="a"] .ll-gallery__frame[data-seen] { opacity: 1; transform: translateY(0); }
[data-design="a"] .ll-gallery__frame:nth-child(2)[data-seen] { transition-delay: .1s; }
[data-design="a"] .ll-gallery__frame:nth-child(3)[data-seen] { transition-delay: .2s; }
[data-design="a"] .ll-gallery__frame:nth-child(4)[data-seen] { transition-delay: .3s; }
[data-design="a"] .ll-gallery__frame:nth-child(5)[data-seen] { transition-delay: .4s; }
[data-design="a"] .ll-gallery__frame:nth-child(6)[data-seen] { transition-delay: .5s; }

[data-design="a"] .ll-gallery__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--ll-expose) var(--ll-ease-settle);
}

[data-design="a"] .ll-gallery__frame--wide {
  grid-column: span 2;
}

[data-design="a"] .ll-gallery__frame--wide .ll-gallery__img {
  aspect-ratio: 16 / 7;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ll-gallery__frame:hover .ll-gallery__img {
    transform: scale(1.03);
  }
}

[data-design="a"] .ll-gallery__cta {
  margin-top: var(--ll-spread);
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  [data-design="a"] .ll-gallery__grid { grid-template-columns: repeat(3, 1fr); }
  [data-design="a"] .ll-gallery__frame--wide { grid-column: span 3; }
  [data-design="a"] .ll-gallery__frame--wide .ll-gallery__img { aspect-ratio: 21 / 8; }
}

/* ==========================================================================
   SECTION 5 · WHAT'S NEARBY
   ========================================================================== */
[data-design="a"] .ll-nearby { padding-block: var(--ll-horizon); }

[data-design="a"] .ll-nearby__title {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: var(--ll-t-display);
  line-height: var(--ll-lh-tight);
  color: var(--ll-light);
  margin: var(--ll-step) 0 var(--ll-spread);
}

[data-design="a"] .ll-nearby__grid {
  display: grid;
  gap: var(--ll-stop);
}

[data-design="a"] .ll-nearby__item {
  display: flex;
  gap: var(--ll-margin);
  align-items: flex-start;
  padding: var(--ll-frame);
  background: var(--ll-field);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-r-panel);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ll-settle) var(--ll-ease-light),
              transform var(--ll-settle) var(--ll-ease-light);
}

[data-design="a"] .ll-nearby__item[data-seen] { opacity: 1; transform: translateY(0); }
[data-design="a"] .ll-nearby__item:nth-child(2)[data-seen] { transition-delay: .1s; }
[data-design="a"] .ll-nearby__item:nth-child(3)[data-seen] { transition-delay: .2s; }

[data-design="a"] .ll-nearby__mark {
  font-size: 1.4rem;
  color: var(--ll-ember);
  flex-shrink: 0;
  line-height: 1.2;
}

[data-design="a"] .ll-nearby__name {
  font-family: var(--ll-font-display);
  font-size: var(--ll-t-head);
  font-weight: 600;
  color: var(--ll-light);
  margin: 0 0 var(--ll-step);
  line-height: 1.2;
}

[data-design="a"] .ll-nearby__desc {
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-body);
  color: color-mix(in oklab, var(--ll-light), transparent 10%);
  line-height: var(--ll-lh-body);
  margin: 0;
  max-width: 52ch;
}

@media (min-width: 768px) {
  [data-design="a"] .ll-nearby__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   SECTION 6 · HOST
   ========================================================================== */
[data-design="a"] .ll-host { padding-block: var(--ll-horizon); background: var(--ll-field); }

[data-design="a"] .ll-host__title {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: var(--ll-t-display);
  line-height: var(--ll-lh-tight);
  color: var(--ll-light);
  margin: var(--ll-step) 0 var(--ll-margin);
}

[data-design="a"] .ll-host__bio {
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-body);
  line-height: var(--ll-lh-body);
  color: color-mix(in oklab, var(--ll-light), transparent 8%);
  max-width: 62ch;
  margin: 0;
}

/* ==========================================================================
   SECTION 7 · CLOSING — visual climax → Book CTA
   ========================================================================== */
[data-design="a"] .ll-closing { padding-block: var(--ll-vista); }

[data-design="a"] .ll-closing__title {
  font-family: var(--ll-font-display);
  font-weight: 600;
  font-size: var(--ll-t-display);
  line-height: var(--ll-lh-tight);
  color: var(--ll-light);
  margin: var(--ll-step) 0 var(--ll-margin);
}

[data-design="a"] .ll-closing__body {
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-body);
  line-height: var(--ll-lh-body);
  color: color-mix(in oklab, var(--ll-light), transparent 8%);
  max-width: 52ch;
  margin: 0 0 var(--ll-spread);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
[data-design="a"] .ll-footer {
  border-top: 1px solid var(--ll-line);
  padding-block: var(--ll-spread);
}

[data-design="a"] .ll-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ll-spread);
  justify-content: space-between;
  align-items: center;
}

[data-design="a"] .ll-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--ll-step);
}

[data-design="a"] .ll-footer__name {
  font-family: var(--ll-font-display);
  font-size: var(--ll-t-lead);
  font-weight: 600;
  color: var(--ll-light);
}

[data-design="a"] .ll-footer__link {
  font-family: var(--ll-font-body);
  font-size: var(--ll-t-body);
  color: var(--ll-ember);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .ll-footer__link:hover { opacity: .8; }
}

[data-design="a"] .ll-footer__note {
  font-family: var(--ll-font-meta);
  font-size: var(--ll-t-meta);
  color: var(--ll-haze);
  letter-spacing: .06em;
}

/* ==========================================================================
   Keyframes — transform / opacity / clip-path / stroke-dashoffset / filter only
   NO layout-property animation.
   ========================================================================== */
@keyframes ll-expose {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ll-drift {
  0%, 100% { transform: translateX(-12%); }
  50%       { transform: translateX(12%); }
}
@keyframes ll-bloom {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%       { transform: scale(1.06); opacity: .22; }
}
@keyframes ll-sink {
  0%, 100% { transform: translate(-50%, 0); opacity: .7; }
  55%       { transform: translate(-50%, 16px); opacity: .25; }
}
@keyframes ll-rake-down {
  0%        { stroke-dashoffset: 64; }
  55%, 100% { stroke-dashoffset: 0; }
}
@keyframes ll-tip-in {
  0%, 45%   { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes ll-arc-shimmer {
  0%, 100% { filter: saturate(1) brightness(1); }
  50%       { filter: saturate(1.12) brightness(1.06); }
}
@keyframes ll-frame-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   prefers-reduced-motion fallbacks — every interaction
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ll-header__light { animation: none; }
  [data-design="a"] .ll-logo { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .ll-waypoints { transition: none; }
  [data-design="a"] .ll-cta__bloom { animation: none; opacity: .4; }
  [data-design="a"] .ll-cta { transition: none; }
  [data-design="a"] .ll-arc__band { transition: none; clip-path: inset(0 0 0 0); animation: none; }
  [data-design="a"] .ll-arc__marks span { transition: none; opacity: .92; }
  [data-design="a"] .ll-keyfact {
    opacity: 1; transform: translateY(0); transition: none;
  }
  [data-design="a"] .ll-site { transition: none; }
  [data-design="a"] .ll-find__warm,
  [data-design="a"] .ll-find__cool { transition: none; }
  [data-design="a"] .ll-find__body[data-swap] { animation: none; }
  [data-design="a"] .ll-gallery__frame {
    opacity: 1; transform: translateY(0); transition: none;
  }
  [data-design="a"] .ll-gallery__img { transition: none; }
  [data-design="a"] .ll-nearby__item {
    opacity: 1; transform: translateY(0); transition: none;
  }
  [data-design="a"] .ll-pointer__glow { animation: none; }
  [data-design="a"] .ll-pointer__line { animation: none; stroke-dashoffset: 0; }
  [data-design="a"] .ll-pointer__tip { animation: none; opacity: 1; }
  [data-design="a"] .ll-burger span { transition: none; }
}

/* ==========================================================================
   Responsive — no h-scroll at 320 / 390 / 768 / 1440
   ========================================================================== */
@media (max-width: 560px) {
  [data-design="a"] .ll-header__bar { height: 52px; }
  [data-design="a"] .ll-keyfacts__grid { grid-template-columns: 1fr; }
  [data-design="a"] .ll-gallery__grid { grid-template-columns: 1fr; }
  [data-design="a"] .ll-gallery__frame--wide { grid-column: auto; }
  [data-design="a"] .ll-gallery__frame--wide .ll-gallery__img { aspect-ratio: 4 / 3; }
  [data-design="a"] .ll-find__grid { grid-template-columns: 1fr; }
  [data-design="a"] .ll-nearby__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobile h-scroll floor (mandated contract tail)
   ========================================================================== */
[data-design="a"].dq-design,
[data-design="a"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img { max-width: 100%; height: auto; }

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }