/* Homepage: door band, walk-in headline, floor plan, locator, register. */

/* ---------- Door band ---------- */
.band { background: var(--band); color: var(--onband); }
.band-in {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.band-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.band-stats strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.band-live { display: flex; align-items: center; gap: 8px; }
.band-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.band.is-offline .band-dot { background: var(--bandmuted); animation: none; }
.band-note { color: var(--bandmuted); }
.band-greet { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; }
.band-compact { display: none; }
.tick { animation: tick 0.6s ease; }
@keyframes tick { 0% { color: var(--accent); } 100% { color: inherit; } }

.pulse { animation: sflpulse 1.6s ease-in-out infinite; }
.breathe { animation: sflbreathe 7s ease-in-out infinite; }
@keyframes sflpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes sflbreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--line); }
.hero-in { padding-top: 56px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 56px; }
.hero-top { display: flex; flex-direction: column; gap: 14px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
/* Headline controls: back, one dot per line (filled = showing), next, pause. */
.hl-controls { display: flex; align-items: center; }
.hl-dots { display: flex; align-items: center; padding: 0 4px; }
.hl-dot {
  width: 26px; height: 44px;
  margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hl-dot::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink2);
  background: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hl-dot:hover::before { border-color: var(--ink); transform: scale(1.2); }
.hl-dot[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }
.hl-btn {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.hl-btn + .hl-btn { margin-left: -1px; }
.hl-btn:hover { color: var(--atext); }
.hl-wrap { min-height: 124px; display: flex; align-items: flex-end; }

/* The headline: the comma becomes a man, the period is a door. */
.hl {
  position: relative;
  margin: 0;
  font-size: min(112px, calc((100vw - 80px) / 11.2));
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.hl.is-fading { opacity: 0; }
.hl-comma { display: inline-block; position: relative; width: 0.22em; height: 0.72em; vertical-align: baseline; }
.comma-svg { position: absolute; left: 0.02em; bottom: -0.16em; width: 0.2em; height: 0.36em; overflow: visible; transition: opacity 0.25s ease; }
.hl:not(.p-rest) .comma-svg { opacity: 0; }
.walker {
  position: absolute;
  left: -0.07em;
  bottom: 0;
  width: 0.42em;
  height: 0.8em;
  opacity: 0;
  transform-origin: 50% 100%;
  transition-property: transform, opacity;
  transition-duration: 0ms, 0.35s;
  pointer-events: none;
}
.walker .man { width: 100%; height: 100%; overflow: visible; }
.hl.p-stand .walker, .hl.p-walk .walker, .hl.p-open .walker { opacity: 1; }
.hl.p-rest .walker { transition: none !important; }
.man .head { transform: translateY(58px); transition: transform 0.5s cubic-bezier(.3,1.45,.5,1); }
.hl.alive .man .head { transform: none; }
.man .limb { stroke-dasharray: 44; stroke-dashoffset: 44; transition: stroke-dashoffset 0.45s ease 0.12s; }
.hl.alive .man .limb { stroke-dashoffset: 0; }
.man .shoe, .man .shades { opacity: 0; transition: opacity 0.3s ease 0.35s; }
.hl.alive .man .shoe, .hl.alive .man .shades { opacity: 1; }
.man .leg, .man .arm, .man .bod { transform-box: view-box; }
.man .leg { transform-origin: 19px 46px; transition: transform 0.25s ease; }
.man .arm { transform-origin: 21px 24px; transition: transform 0.25s ease; }
.hl.alive .man .leg-a { transform: rotate(-7deg); }
.hl.alive .man .leg-b { transform: rotate(7deg); }
.hl.alive .man .arm-a { transform: rotate(10deg); }
.hl.alive .man .arm-b { transform: rotate(-10deg); }
.hl.p-walk .man .leg-a { animation: hlLeg 0.22s ease-in-out infinite alternate; }
.hl.p-walk .man .leg-b { animation: hlLeg 0.22s ease-in-out infinite alternate-reverse; }
.hl.p-walk .man .arm-a { animation: hlArm 0.22s ease-in-out infinite alternate-reverse; }
.hl.p-walk .man .arm-b { animation: hlArm 0.22s ease-in-out infinite alternate; }
.hl.p-walk .man .bod { animation: hlBob 0.11s ease-in-out infinite alternate; }
.hl.p-open .man .arm-b { transform: rotate(-72deg); }
@keyframes hlLeg { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } }
@keyframes hlArm { from { transform: rotate(26deg); } to { transform: rotate(-26deg); } }
@keyframes hlBob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

.hl-door { display: inline-block; position: relative; width: 0.26em; height: 0.74em; margin-left: 0.03em; vertical-align: baseline; }
.door {
  position: absolute; left: 0; bottom: 0;
  width: 0.36em; height: 0.72em;
  transform: scale(0.6, 0.3);
  transform-origin: 0 100%;
  transition: transform 0.42s cubic-bezier(.2,.9,.3,1.25);
}
.hl.door-up .door { transform: none; }
.door-frame { position: absolute; inset: 0; border: 0.035em solid currentColor; }
.door-glow { position: absolute; inset: 0.035em; background: var(--accent); box-shadow: 0 0 0.3em var(--accent); opacity: 0; transition: opacity 0.3s ease; }
.hl.p-open .door-glow, .hl.p-enter .door-glow { opacity: 1; }
.door-leaf {
  position: absolute; inset: 0;
  background: currentColor;
  transform-origin: 0 50%;
  transform: perspective(1.4em) rotateY(0deg);
  transition: transform 0.45s cubic-bezier(.3,.7,.3,1);
}
.hl.p-open .door-leaf, .hl.p-enter .door-leaf { transform: perspective(1.4em) rotateY(-78deg); }
.door-knob {
  position: absolute; right: 0.05em; top: 50%;
  width: 0.055em; height: 0.055em; margin-top: -0.03em;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hl.door-up .door-knob { opacity: 1; }
/* Phones: no walk. The man waits by the open door. */
.hl-greeter { display: none; }

.hero-body { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 48px 80px; }
.hero-left { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
/* One plain line under every headline: who I am and what I do. It never rotates. */
.hero-intro { margin: 0; max-width: 34ch; font-size: 24px; line-height: 1.42; color: var(--ink2); }
.hero-right { flex: 0 1 470px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.badge { display: flex; align-items: stretch; gap: 16px; padding: 14px; border: 1px solid var(--line); background: var(--surface); }
.badge img { width: 92px; height: 115px; flex: none; object-fit: cover; border: 1px solid var(--line); background: var(--hair); }
.badge-text { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.badge-head { display: flex; flex-direction: column; gap: 5px; }
.duty {
  align-self: flex-start;
  display: flex; align-items: center; gap: 7px;
  padding: 3px 8px;
  background: var(--ink); color: var(--onink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.duty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.badge-name { font-size: 21px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.badge-line { font-size: 14px; line-height: 1.45; color: var(--ink2); }

.creds { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.creds li { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.creds li span:first-child { width: 24px; flex: none; color: var(--muted); }

.fork { max-width: 600px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fork a { min-height: 84px; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 5px; text-decoration: none; }
.fork .fork-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 17px; font-weight: 700; }
.fork .fork-sub { font-size: 13.5px; line-height: 1.35; }
.fork-in { background: var(--ink); color: var(--onink); }
.fork-in:hover { color: var(--onink); background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
.fork-in .fork-sub { opacity: 0.8; }
.fork-express { border: 1px solid var(--line); color: var(--ink); }
.fork-express .fork-sub { color: var(--ink2); }
.grab { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; text-underline-offset: 4px; }

/* ---------- Section heads ---------- */
.section { border-bottom: 1px solid var(--line); scroll-margin-top: 0; }
.section-in { padding-top: 128px; padding-bottom: 128px; display: flex; flex-direction: column; gap: 48px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-title { margin: 0; font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.section-intro { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink2); }

/* ---------- Floor plan ---------- */
.floor-head-text { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.floor-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.heat-toggle {
  min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.heat-legend { width: 56px; height: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--accent)); transition: opacity 0.2s ease; }
.heat-toggle[aria-pressed="false"] .heat-legend { opacity: 0.3; }

.floor-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.elevator {
  flex: none; width: 72px;
  padding: 14px 0 16px;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.elevator-sign { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.floor-btn {
  width: 44px; height: 44px; margin: 0; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.floor-btn[aria-pressed="true"] { background: var(--ink); color: var(--onink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.floor-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.floor-label { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.floor-label .fl-name { font-weight: 600; }
.floor-label .fl-purpose { color: var(--muted); }
.floor-stage { transition: opacity 0.18s ease, transform 0.3s cubic-bezier(.2,.8,.2,1); }
.floor-stage.is-moving { opacity: 0; transform: translateY(8px); }
.plan-scroll { overflow-x: auto; padding: 12px 0 4px 10px; }
.plan { min-width: 760px; transform-origin: 50% 100%; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
/* Each project is its own room: its own walls, with corridors between rooms,
   inside the store's outer wall. */
.plan-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 112px;
  gap: 14px;
  padding: 14px;
  background: var(--ground);
  border: 3px solid var(--line);
}

.zone {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border: 1.5px solid var(--line);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface);
  color: var(--ink);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s cubic-bezier(.2,.8,.2,1);
}
.plan:not(.model) .zone:hover { z-index: 3; transform: translate(-7px, -7px); box-shadow: 1px 1px 0 var(--line), 2px 2px 0 var(--line), 3px 3px 0 var(--line), 4px 4px 0 var(--line), 5px 5px 0 var(--line), 6px 6px 0 var(--line), 7px 7px 0 var(--line); }
.plan:not(.model) .zone.is-sel { z-index: 2; transform: translate(-4px, -4px); box-shadow: 1px 1px 0 var(--accent), 2px 2px 0 var(--accent), 3px 3px 0 var(--accent), 4px 4px 0 var(--accent); }
.plan:not(.model) .zone.is-sel:hover { z-index: 3; transform: translate(-7px, -7px); box-shadow: 1px 1px 0 var(--accent), 2px 2px 0 var(--accent), 3px 3px 0 var(--accent), 4px 4px 0 var(--accent), 5px 5px 0 var(--accent), 6px 6px 0 var(--accent), 7px 7px 0 var(--accent); }
.plan.model { transform: perspective(1500px) rotateX(38deg); }
.plan.model .zone { transform: translateY(calc(var(--h) * -1)); box-shadow: 0 var(--h) 0 0 var(--wall); }
.plan.model .zone:hover { z-index: 3; transform: translateY(calc(var(--h) * -1 - 12px)); box-shadow: 0 calc(var(--h) + 12px) 0 0 var(--wall); }
.plan.model .zone.is-sel { box-shadow: 0 var(--h) 0 0 var(--accent); }
.plan.model .zone.is-sel:hover { box-shadow: 0 calc(var(--h) + 12px) 0 0 var(--accent); }
.zone-hatch { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, var(--hair) 0 1px, transparent 1px 9px); pointer-events: none; }
/* Live dwell colours: orange for a first stop, hard-court blue for a return. */
:root { --bloom-in: 62%; --bloom-mid: 26%; --bloom-line: 62%; }
:root[data-theme="after"] { --bloom-in: 80%; --bloom-mid: 36%; --bloom-line: 85%; }
[data-code], [data-you-for] { --dwell: var(--accent); --dtext: var(--atext); }
[data-code].is-return, [data-you-for].is-return { --dwell: var(--revisit); --dtext: var(--rtext); }

/* Store heat (forecast or real), warmed by your earlier stops this visit. */
.zone-heat {
  position: absolute; left: 12%; top: 6%; width: 76%; height: 88%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 52%, transparent), transparent);
  opacity: var(--heat, 0);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
/* The stop you're on: a bloom centred on the zone's preview that grows while
   you stay, beats, and sends out ripples. It settles when you step off. */
.zone-bloom { position: absolute; left: 0; right: 0; top: 0; bottom: 0; container-type: size; pointer-events: none; }
.zone-core, .zone-ring {
  --s: calc(0.16 + 0.84 * var(--grow, 0));
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * 80cqw); height: calc(var(--s) * 100cqh);
  translate: -50% -50%;
  border-radius: 50%;
}
.zone-core {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dwell) var(--bloom-in), transparent), color-mix(in srgb, var(--dwell) var(--bloom-mid), transparent) 55%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dwell) var(--bloom-line), transparent);
  opacity: 0;
  transition: width 0.9s cubic-bezier(.3,.7,.3,1), height 0.9s cubic-bezier(.3,.7,.3,1), opacity 0.9s ease;
}
.is-dwelling .zone-core {
  opacity: calc(0.65 + 0.35 * var(--grow, 0));
  transition: width 0.12s linear, height 0.12s linear, opacity 0.25s ease;
  animation: sflbeat 1.4s ease-in-out infinite;
}
/* While you're on a zone its ambient heat steps back, so your bloom reads on its own. */
.is-dwelling .zone-heat { opacity: calc(var(--heat, 0) * 0.35); }
.zone-ring { border: 1.5px solid var(--dwell); opacity: 0; }
.is-dwelling .zone-ring { animation: sflripple 1.4s cubic-bezier(.2,.6,.3,1) infinite; }
/* Coming back beats twice: a double ripple instead of one. */
.is-return.is-dwelling .zone-core { animation-name: sflbeat2; }
.is-return.is-dwelling .zone-ring.r2 { animation-delay: 0.24s; }
.is-dwelling:not(.is-return) .zone-ring.r2 { animation: none; }
@keyframes sflbeat { 0%, 100% { scale: 1; } 16% { scale: 1.07; } 36% { scale: 1; } }
@keyframes sflbeat2 { 0%, 100% { scale: 1; } 12% { scale: 1.07; } 24% { scale: 1; } 34% { scale: 1.05; } 50% { scale: 1; } }
@keyframes sflripple { 0% { opacity: 0.7; scale: 1; } 100% { opacity: 0; scale: 1.4; } }
.heat-off .zone-bloom { display: none; }
.reveal-on .floor-stage:not(.is-shown) .zone,
.reveal-on .floor-stage:not(.is-shown) .filler,
.reveal-on .floor-stage:not(.is-shown) .aisle > li,
.reveal-on .floor-stage:not(.is-shown) .mini-grid > span { opacity: 0; }
.floor-stage.zones-enter .zone,
.floor-stage.zones-enter .filler,
.floor-stage.zones-enter .aisle > li,
.floor-stage.zones-enter .mini-grid > span[data-code] { animation: zoneIn 0.6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes zoneIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.zone-hint { position: absolute; left: 16px; right: 16px; display: flex; align-items: center; pointer-events: none; }
/* A halo in the floor colour keeps small labels readable where the bloom or a ripple passes behind them. */
.zone-hint, .zone-top { text-shadow: 0 0 1px var(--surface), 0 0 2px var(--surface), 0 0 4px var(--surface); }
.zone-hint svg text { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.zone-top .tag { text-shadow: none; }
.zone-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.zone-top .tag { flex: none; padding: 1px 7px; letter-spacing: 0.1em; }
/* The zone's sign swaps to the stop's clock while you rest on it ("Dwell" on
   a first stop, "Back" on a return). Step off and the time stays up, dimmed,
   for a moment before the sign comes back. */
.zone-label { display: grid; min-width: 0; }
.zone-label > span { grid-area: 1 / 1; align-self: start; transition: opacity 0.2s ease; }
.zl-dwell { opacity: 0; color: var(--dtext); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.zl-dwell i { width: 6px; height: 6px; border-radius: 50%; background: var(--dwell); flex: none; }
.zl-dwell b { font-weight: 600; text-transform: none; font-variant-numeric: tabular-nums; }
.zl-back { display: none; }
.is-return .zl-first { display: none; }
.is-return .zl-back { display: inline; }
.zone.is-dwelling .zl-sign, .zone.is-settling .zl-sign { opacity: 0; }
.zone.is-dwelling .zl-dwell { opacity: 1; }
.zone.is-settling .zl-dwell { opacity: 0.6; }
.zone.is-dwelling .zl-dwell i { animation: sflpulse 1.4s ease-in-out infinite; }
.zl-code, .zl-word { white-space: pre; }
.zone.is-narrow .zl-code, .zone.is-narrow .zl-word { display: none; }
.zone-bottom { position: relative; display: flex; flex-direction: column; gap: 7px; }
.zone-kind, .zp-kind {
  align-self: flex-start;
  margin: 0;
  padding: 2px 7px;
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
}
.k-work { background: var(--ink); color: var(--onink); border-color: var(--ink); }
.k-later { border-style: dashed; border-color: var(--muted); color: var(--ink2); }
.zone.is-narrow .zone-meta, .zone.is-narrow .zl-place { display: none; }
.zone.is-narrow .zone-kind { font-size: 9.5px; letter-spacing: 0.04em; }
.zone-title { align-self: flex-start; padding: 0 2px; line-height: 1.08; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.zone-meta { align-self: flex-start; padding: 0 2px; font-family: var(--mono); font-size: 10.5px; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.zone.is-hatched .zone-title, .zone.is-hatched .zone-meta, .zone.is-hatched .zone-label > span { background: var(--surface); }

/* Zone previews */
.hint-regions { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.hint-cells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.hint-cells span { aspect-ratio: 1.5; border: 1px solid var(--hair); }
.hint-labels { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hint-labels .hot { color: var(--atext); }
.hint-curve { width: 100%; height: 100%; overflow: visible; }
.hint-sliders { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.hint-slider { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; }
.hint-slider > span:first-child, .hint-fit > span:first-child { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hint-rail { position: relative; height: 12px; }
.hint-rail .rail { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--hair); }
.wc-f { position: absolute; left: 0; top: 5px; height: 2px; background: var(--accent); transition: width 0.5s cubic-bezier(.2,.8,.2,1); }
.wc-k { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); transition: left 0.5s cubic-bezier(.2,.8,.2,1); }
.wc-k1 { left: 72%; } .wc-f1 { width: 72%; }
.wc-k2 { left: 44%; } .wc-f2 { width: 44%; }
.wc-k3 { left: 60%; } .wc-f3 { width: 60%; }
.zone:hover .wc-k1, .zone:focus-visible .wc-k1 { left: 88%; } .zone:hover .wc-f1, .zone:focus-visible .wc-f1 { width: 88%; }
.zone:hover .wc-k2, .zone:focus-visible .wc-k2 { left: 63%; } .zone:hover .wc-f2, .zone:focus-visible .wc-f2 { width: 63%; }
.zone:hover .wc-k3, .zone:focus-visible .wc-k3 { left: 38%; } .zone:hover .wc-f3, .zone:focus-visible .wc-f3 { width: 38%; }
.hint-fit { display: flex; align-items: center; gap: 8px; }
.hint-fit > span:first-child { width: 76px; }
.wc-star5 { fill: transparent; transition: fill 0.3s ease 0.25s; }
.zone:hover .wc-star5, .zone:focus-visible .wc-star5 { fill: var(--accent); }
.hint-dots { display: flex; align-items: flex-end; gap: 14px; }
.hint-dots .dots { width: 140px; height: 77px; flex: none; background-image: radial-gradient(circle, var(--muted) 1px, transparent 1.5px); background-size: 7px 7px; opacity: 0.9; }
.hint-dots .dots-text { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hint-dots .dots-text b { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.hint-dots .dots-text .hot { color: var(--atext); }
.hint-tiles { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.hint-tiles .tiles-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hint-tiles .tiles-row span { height: 14px; border: 1px dashed var(--muted); background: var(--surface); }
.hint-tiles .tiles-bars { height: 36px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--muted); }
.hint-tiles .tiles-bars span { flex: 1; border: 1px dashed var(--muted); border-bottom: 0; background: var(--surface); }
.hint-terminal { width: 100%; border: 1px solid var(--line); background: var(--ground); }
.hint-terminal .term-bar { display: flex; gap: 4px; padding: 5px 7px; border-bottom: 1px solid var(--hair); }
.hint-terminal .term-bar span { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--muted); }
.hint-terminal .term-lines { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; font-family: var(--mono); font-size: 10px; line-height: 1.3; color: var(--ink2); }
.hint-terminal .term-lines span { display: flex; align-items: center; gap: 4px; }
.hint-terminal .caret { width: 6px; height: 11px; background: var(--accent); }
.hint-film { width: 100%; padding: 5px 0; background: var(--ink); display: flex; flex-direction: column; gap: 5px; }
.hint-film .sprockets { display: flex; justify-content: space-between; padding: 0 6px; }
.hint-film .sprockets span { width: 6px; height: 4px; background: var(--surface); }
.hint-film .frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 0 6px; }
.hint-film .frames span { height: 32px; background: var(--surface); }
.hint-film .frames span.lit { background: var(--accent); }
.hint-notes { display: flex; align-items: flex-end; gap: 6px; }
.hint-notes span { position: relative; width: 26px; border: 1px solid var(--muted); background: var(--surface); }
.hint-notes span::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); }

.filler { position: relative; min-width: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 10px; }
.filler::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--muted); }
.filler span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.filler b { font-weight: 600; color: var(--ink2); }

.aisle { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--line); }
.aisle > li { border-bottom: 1px solid var(--line); }
.aisle-row {
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 14px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 56px 150px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 18px;
}
.aisle-row:hover { background: var(--surface); }
.aisle-row[aria-current="true"] { box-shadow: inset 4px 0 0 var(--accent); }
.aisle-code { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.aisle-sign { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.aisle-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aisle-name b { font-size: 20px; line-height: 1.15; font-weight: 750; }
.aisle-name span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); }
.aisle-row .tag { justify-self: start; }
.aisle-detail { padding: 4px 8px 22px; }

.view-note { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.view-note .vn { display: block; }
.view-note .key { white-space: nowrap; }
.view-note .key::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 3px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.view-note .key-back::before { background: var(--revisit); }
.zone-panel { flex: 1 1 290px; min-width: 0; padding: 24px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 18px; }
.zp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.zp-head { display: flex; flex-direction: column; gap: 10px; }
.zp-head .zp-kind { align-self: flex-start; }
.zp-title { margin: 0; font-size: 28px; line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; }
.zp-meta { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.zp-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink2); }
.zp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.zp-facts > div { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.zp-facts dd { order: 1; margin: 0; font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.zp-facts dt { order: 2; font-size: 13px; line-height: 1.4; color: var(--ink2); overflow-wrap: anywhere; }
.zp-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.zp-cta { min-height: 52px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ink); color: var(--onink); text-decoration: none; font-size: 15px; font-weight: 700; }
.zp-cta:hover { color: var(--onink); background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
.zp-soon { min-height: 52px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed var(--muted); color: var(--ink2); font-size: 15px; font-weight: 650; }
.zp-ask { font-size: 14px; font-weight: 650; text-underline-offset: 3px; align-self: flex-start; }
.zp-dwell { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.zp-you .zy-k { margin-right: 10px; }
.zp-you b { color: var(--ink); font-weight: 600; text-transform: none; font-variant-numeric: tabular-nums; }
.zp-you .zy-now { white-space: nowrap; }
.zp-you .zy-now::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--dwell); vertical-align: 1px; }
.zp-you .zy-now b { color: var(--dtext); }

.mini-plan { display: none; }

/* ---------- Store locator ---------- */
.locator-langs { display: flex; flex-direction: column; gap: 10px; }
.speak { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.speak li { padding: 8px 12px; border: 1px solid var(--line); font-size: 15px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; }
.speak small { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); }
.lon-strip { position: relative; height: 72px; }
.lon-strip .axis { position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--line); }
.lon-tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.lon-tick::after { content: ""; position: absolute; left: 50%; top: 19px; width: 1px; height: 7px; background: var(--muted); }
.lon-city { position: absolute; top: 21px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--accent); }
.lon-code { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
.cities { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 28px 16px; }
.cities li { flex: 1 1 170px; min-width: 0; padding: 18px 12px 0 0; border-top: 3px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.city-code { font-family: var(--mono); font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: 0.02em; }
.city-name { font-size: 18px; font-weight: 750; }
.city-time { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.city-time small { color: var(--muted); font-size: 13px; }
.city-what { font-size: 14px; line-height: 1.45; color: var(--ink2); }
.city-when { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Register ---------- */
.register-in { padding-top: 128px; padding-bottom: 136px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 72px; }
.register-left { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.register-title { margin: 0; font-size: 76px; line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; }
.register-intro { margin: 0; max-width: 40ch; font-size: 19px; line-height: 1.5; color: var(--ink2); }
.register-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.register-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.register-links a { color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; }
.receipt {
  flex: 0 1 420px;
  min-width: 0;
  padding: 28px 28px 24px;
  background: #FCFCFA;
  color: #121211;
  border: 1px solid var(--hair);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 48px -28px rgba(0,0,0,.4);
  transform: rotate(-1.2deg);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.receipt-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.receipt-head b { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; }
.receipt-head span { font-size: 11px; letter-spacing: 0.08em; color: #55554F; }
.receipt hr { margin: 16px 0; border: 0; border-top: 1px dashed #121211; }
.receipt dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.receipt dl.tight { gap: 8px; }
.receipt dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
.receipt dt { color: #55554F; }
.receipt dd { margin: 0; }
.receipt dd span { color: #55554F; }
.receipt-total { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; font-size: 14px; font-weight: 600; }
.receipt-total span:last-child { text-align: right; }
.receipt-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 11px; letter-spacing: 0.08em; }
.receipt-foot .sub { color: #55554F; }
.barcode { height: 40px; margin-top: 10px; display: flex; }
.barcode span { height: 40px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .zone-core, .zone-ring, .zl-dwell i { animation: none !important; }
  .zone-ring { display: none; }
  .zone-core, .zone-heat { transition: opacity 0.2s linear !important; }
  .pulse, .breathe, .man *, .tick { animation: none !important; }
  .plan, .zone, .wc-k, .wc-f, .floor-stage { transition: none !important; }
  .floor-stage .zone, .floor-stage .filler, .floor-stage .aisle > li, .floor-stage .mini-grid > span { animation: none !important; opacity: 1 !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .section-title { font-size: 48px; }
  .register-title { font-size: 64px; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .band-in { padding-top: 0; padding-bottom: 0; min-height: 36px; flex-wrap: nowrap; font-size: 11px; }
  .band-stats { display: none; }
  .band-compact { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
  .band-greet { font-size: 13px; white-space: nowrap; }

  .hero-in { padding-top: 24px; padding-bottom: 72px; gap: 32px; }
  .hero-top { gap: 10px; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-meta .eyebrow { font-size: 11px; }
  .hl-wrap { min-height: 0; }
  .hl { white-space: normal; font-size: 46px !important; line-height: 1.02; }
  .hl .walker, .hl .hl-door { display: none; }
  .hl .comma-svg { opacity: 1 !important; }
  .hl-greeter { display: inline-block; position: relative; width: 0.84em; height: 0.8em; margin-left: 0.04em; vertical-align: baseline; }
  .hl-greeter .man-still { position: absolute; left: 0; bottom: 0; width: 0.42em; height: 0.8em; overflow: visible; }
  .hl-greeter .door-still { position: absolute; left: 0.46em; bottom: 0; width: 0.36em; height: 0.72em; }
  .hl-greeter .door-still .door-glow { opacity: 1; }
  .hl-greeter .door-still .door-leaf { transform: perspective(1.4em) rotateY(-78deg); }
  .hero-body { gap: 32px; }
  .hero-left { gap: 22px; }
  .hero-intro { max-width: none; font-size: 18px; line-height: 1.5; }
  .hero-right { gap: 14px; }
  .badge { gap: 12px; padding: 10px; align-items: center; }
  .badge img { width: 56px; height: 70px; }
  .badge-name { font-size: 17px; }
  .badge-line, .badge .pins { display: none; }
  .creds li { gap: 12px; padding: 9px 0; font-size: 11px; }
  .fork { grid-template-columns: 1fr; gap: 10px; }
  .fork a { min-height: 66px; padding: 12px 16px; }
  .fork .fork-title { font-size: 16px; }
  .fork .fork-sub { font-size: 13px; }
  .grab { display: none; }

  .section-in { padding-top: 72px; padding-bottom: 72px; gap: 28px; }
  .section-title { font-size: 38px; }
  .section-intro { font-size: 16px; }
  .floor-controls { display: none; }
  .floor-body { flex-direction: column; gap: 14px; }
  .elevator { width: auto; flex-direction: row-reverse; justify-content: flex-end; padding: 0; border: 0; background: transparent; gap: 8px; }
  .elevator-sign { display: none; }
  .floor-btn { background: transparent; }
  .floor-main { flex: 1 1 auto; width: 100%; }
  .plan-scroll, .view-note, .zone-panel { display: none !important; }
  .mini-plan { display: block; }
  .mini-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 26px; gap: 5px; padding: 5px; background: var(--ground); border: 2px solid var(--line); }
  .mini-grid > span { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); padding: 3px 5px; font-family: var(--mono); font-size: 9px; color: var(--muted); }
  .mini-grid > span.is-sel { color: var(--atext); font-weight: 600; box-shadow: inset 0 0 0 2px var(--accent); }
  .mini-grid > span .zone-heat { left: 10%; top: 0; width: 80%; height: 100%; }
  .mini-grid > span .zone-core, .mini-grid > span .zone-ring { width: calc(var(--s) * 92cqw); height: calc(var(--s) * 120cqh); }
  .mini-grid > span .zone-hatch { background-image: repeating-linear-gradient(135deg, var(--hair) 0 1px, transparent 1px 6px); }
  .mini-grid > span b { position: relative; font-weight: inherit; }
  .mini-grid > .mini-filler { background: transparent; border: 0; }
  .mini-grid > .mini-filler::before { content: ""; position: absolute; inset: 0; border: 1px dashed var(--muted); }
  .aisle { border-top-width: 3px; }
  .aisle > li { border-bottom-color: var(--hair); }
  .aisle-row { min-height: 64px; padding: 10px 0; grid-template-columns: 34px minmax(0, 1fr) auto 14px; gap: 10px; }
  .aisle-row .aisle-sign { display: none; }
  .aisle-code { font-size: 12px; }
  .aisle-name b { font-size: 15px; line-height: 1.2; font-weight: 700; }
  .aisle-name span { font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
  .aisle-row .tag { font-size: 10px; padding: 1px 6px; }
  .aisle-row .chev { transition: transform 0.2s ease; }
  .aisle-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
  .aisle-detail { padding: 0 0 18px; display: flex; flex-direction: column; gap: 14px; }

  .lon-strip { display: none; }
  .cities { gap: 20px 12px; }
  .cities li { flex: 1 1 140px; padding-top: 12px; }
  .city-code { font-size: 22px; }
  .register-in { padding-top: 72px; padding-bottom: 72px; gap: 40px; }
  .register-title { font-size: 48px; }
  .register-intro { font-size: 17px; }
  .receipt { transform: none; padding: 22px 18px 20px; font-size: 12px; }
}