/* ============================================================
   ON THE LISTS — story layout
   Loaded after app.css + v2.css, on index.en.story.html only.
   Tokens, type and colour all come from v2.css; this file only
   changes how the page is PACED.

   Why this exists: the main page explains the product by
   enumeration — 27 blocks, ~3,000 words, 13 feature blocks in a
   row, and the same taxonomy repeated in four registers. It reads
   as a spec sheet. The one screen on it that reads well is the
   closing CTA: a single statement, one photograph, air around it.

   So the page is rebuilt as a sequence of those. One night in
   order — before the doors, at the door, in the room, the morning
   after — one idea per screen, told in photographs of the night.

   DISCLOSURE RULE (2026-08-04) holds throughout: no operator
   screens. Every scene here is venue photography, a guest-facing
   screen, or the door counter. The story is the loop; the
   construction stays private.
   ============================================================ */

/* ---- The scene ---------------------------------------------------------
   A full viewport beat. 100svh, not 100vh: on mobile the dynamic toolbar
   makes vh taller than the visible area, which cuts the bottom line off. */
.scene{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:clamp(5rem,12vh,9rem) 0 clamp(4rem,10vh,7rem);
  overflow:hidden;
}
/* Proximity, never mandatory: mandatory snapping fights the reader on a
   trackpad and traps them on short viewports. Proximity just settles the
   scroll onto a beat when they stop near one. */
@media(min-height:640px) and (prefers-reduced-motion:no-preference){
  .story-main{scroll-snap-type:y proximity}
  .scene{scroll-snap-align:center}
}

.scene-photo{position:absolute;inset:0;z-index:0}
/* The first build dimmed every frame to .82 and then laid two broad scrims
   over it. Legible, but the photography drowned — seven screens of the same
   mid-brown murk, which is what made the page read as one gear.
   Now the picture is left nearly at full strength and only the pool the
   words actually sit in is darkened. */
.scene-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.09) saturate(1.06) brightness(.96);
}
/* Three layers with different jobs:
   1. a tight radial under the copy — the only heavy darkening on the page,
      and it moves with the copy rather than covering the frame;
   2. a bottom-weighted wash so each beat sinks into the next instead of
      ending on a hard seam;
   3. a short top wash so the fixed header always has ground under it. */
.scene-photo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(46% 40% at 50% 47%,rgba(6,6,5,.82),rgba(6,6,5,.45) 55%,transparent 78%),
    linear-gradient(180deg,transparent 42%,rgba(6,6,5,.5) 78%,rgba(6,6,5,.92)),
    linear-gradient(180deg,rgba(6,6,5,.8),transparent 22%);
}

.scene-copy{
  position:relative;z-index:1;
  width:100%;max-width:78ch;
  margin:0 auto;padding-inline:var(--pad);
}

/* ---- The clock ---------------------------------------------------------
   What makes this a story rather than a feature list: every beat is
   stamped with the hour it happens at, so the page is read as one night
   passing instead of as a set of capabilities. */
.scene-time{
  display:inline-flex;align-items:center;gap:.85rem;
  margin:0 0 clamp(1.5rem,3vh,2.25rem);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.scene-time b{
  font-weight:500;color:var(--money);font-variant-numeric:tabular-nums;
  letter-spacing:.12em;
}
.scene-time::before,
.scene-time::after{
  content:"";width:clamp(1.5rem,4vw,3rem);height:1px;background:var(--hairline-warm);
}

/* Archivo is loaded as a variable font with a width axis (wdth 62–125) that
   the page never used. Narrowing it lets the line run bigger at the same
   measure, and a slightly condensed grotesque is the register of a marquee
   or a poster rather than of a SaaS headline — which is the room this
   product is actually in. */
.scene h2,.scene h1{
  font-family:var(--display);
  font-variation-settings:"wdth" 90;
  font-size:clamp(2.35rem,6vw,4.9rem);
  font-weight:650;line-height:1.02;letter-spacing:-.028em;
  color:var(--text);margin:0 auto;max-width:19ch;
  text-wrap:balance;
  /* Not decoration: over a photograph, unshadowed type at this size picks up
     the highlights behind it and the edges go soft. */
  text-shadow:0 2px 28px rgba(6,6,5,.55);
}
.scene-lead{
  margin:clamp(1.25rem,2.5vh,1.9rem) auto 0;
  max-width:56ch;
  font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.7;
  color:var(--muted);text-wrap:pretty;
}
/* One phrase per beat may carry the point; it gets the page's only
   emphasis treatment so it reads as spoken, not as bolded copy. */
.scene-lead em{color:var(--text);font-style:normal}

.scene-actions{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;
  margin-top:clamp(1.75rem,4vh,2.75rem);
}

/* ---- The opening -------------------------------------------------------
   .scene-hero .scene-time was removed 2026-08-09 along with the hero's
   "Live every night · Ginza, Tokyo" line. The clock now starts at 20:00,
   where the night does. */
.scene-hero h1{max-width:18ch}

/* ---- Artifacts inside a scene ------------------------------------------
   Only two ever appear: the door counter and the guest's own pass. Both
   are allowed on a public page — a number going up says nothing about how
   it is produced, and the guest screen is seen by every guest anyway. */
.scene-art{
  margin:clamp(1rem,2.4vh,1.6rem) auto 0;
  width:min(400px,86vw);
}
/* The panel, its padding and its shadow are gone — see "THE COUNTER,
   STRIPPED" at the end of v2.css. What is left is type over the photograph,
   so it only needs centring and a size that clears the fold on a 768px
   laptop. Size by font size only — NEVER transform:scale(): .doorcount runs
   the dc-in keyframe, which ends on transform:none and would wipe it out. */
.scene-art .doorcount{margin:0;text-align:center}
.scene-art .dc-n{font-size:clamp(3.4rem,8vw,5rem);justify-content:center}
.scene-art .dc-sub{font-size:.85rem;margin-inline:auto}
/* Do not constrain .dc-tally's height: the bars are laid out against it and
   a shorter box drops them on top of the caption. Height comes off the
   number and the padding instead. */
/* Sized by HEIGHT, not width: a beat has to fit one viewport, and a fixed
   width pushed the copy off the top of short laptop screens. */
.scene-shot{
  margin:clamp(1.5rem,4vh,2.75rem) auto 0;
  /* fit-content, or the figure stretches to the copy column and the frame
     draws a wide box around a portrait photo. */
  width:fit-content;
  height:min(340px,38svh);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--elev-3);
  filter:brightness(1.06) saturate(1.04);
}
.scene-shot img{display:block;height:100%;width:auto}

/* ---- The turn ----------------------------------------------------------
   v2's whole art direction is "two worlds": the operator side is a warm dark
   room, the guest side is literally lit. The story page opened with four
   dark beats in a row and never used the second world, which is most of why
   it read as one gear no matter how good each individual beat was.

   So the guest's moment IS the light. No photograph — after four screens of
   nightclub dark, a page that simply turns on is the loudest thing that can
   happen, and it happens exactly where the product touches the guest.
   The door beat that follows drops straight back into the room. */
.scene-lit{
  background:
    radial-gradient(120% 82% at 50% 0%,var(--lit-panel),var(--lit) 62%,var(--lit-edge));
  color:var(--lit-ink);
}
.scene-lit h2{color:var(--lit-ink);text-shadow:none}
.scene-lit .scene-lead{color:var(--lit-muted)}
.scene-lit .scene-lead em{color:var(--lit-ink)}
.scene-lit .scene-time{color:var(--lit-muted)}
.scene-lit .scene-time b{color:var(--money-deep)}
.scene-lit .scene-time::before,
.scene-lit .scene-time::after{background:rgba(20,23,27,.22)}
/* The phone is a dark object now, so it needs the opposite treatment from
   the one it gets on the dark beats: a light-side border and a cast shadow
   rather than a hairline and a glow. */
.scene-lit .scene-shot{
  border-color:rgba(20,23,27,.14);
  box-shadow:0 32px 70px rgba(20,23,27,.28),0 4px 14px rgba(20,23,27,.14);
  filter:none;
}
/* Both edges of the light band get a seam so it reads as a band the page
   passes through, not as a section that lost its background. */
.scene-lit::before,
.scene-lit::after{
  content:"";position:absolute;left:0;right:0;height:clamp(40px,7vh,80px);
  pointer-events:none;
}
.scene-lit::before{top:0;background:linear-gradient(180deg,rgba(6,6,5,.32),transparent)}
.scene-lit::after{bottom:0;background:linear-gradient(0deg,rgba(6,6,5,.32),transparent)}

/* ---- The last beat -----------------------------------------------------
   No photograph, and that is the point: the room is empty by now. It also
   gives the page a third kind of screen — dark-with-picture, lit, and this,
   plain — so the sequence has a shape instead of a texture.

   SUPERSEDED: this beat is now `.scene-dawn`, styled in assets/store.css.
   The copy was always about the morning after, so it became the place the
   page turns light and stays light — see that file's header. The rules that
   used to live here painted it near-black and matched nothing once the
   markup changed, so they were removed rather than left to rot. */

/* ---- The summary -------------------------------------------------------
   After the night has been told once, the page finally names the products.
   Rows, not cards: cards invite comparison and this is a list of what the
   same system covers, read top to bottom. */
.summary{
  position:relative;
  padding:clamp(5rem,11vh,8rem) 0;
  background:var(--room-deep);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.summary .wrap{max-width:1080px}
.sum-head{text-align:center;margin-bottom:clamp(2.5rem,6vh,4rem)}
.sum-head h2{
  font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0;
  color:var(--text);text-wrap:balance;
}
.sum-head p{margin:1rem auto 0;max-width:52ch;color:var(--muted);line-height:1.7}

.sum-row{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vh,2.1rem) 0;
  border-top:1px solid var(--hairline);
  text-decoration:none;color:inherit;
}
.sum-row:last-of-type{border-bottom:1px solid var(--hairline)}
.sum-n{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--faint);font-variant-numeric:tabular-nums;
}
.sum-row h3{
  font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:600;letter-spacing:-.01em;margin:0 0 .4rem;color:var(--text);
}
.sum-row p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:52ch}
.sum-live{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.sum-live i{
  width:6px;height:6px;border-radius:50%;background:var(--st-open);
  box-shadow:0 0 0 3px rgba(110,199,142,.15);
}
.sum-more{
  display:block;text-align:center;margin-top:clamp(2rem,4vh,3rem);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
}
.sum-more:hover{color:var(--money)}

/* ---- Sections carried over from the main page --------------------------
   Proof, pricing, FAQ and the CTA keep their own markup, but they inherit
   the story page's air so they don't snap back to the dense rhythm. */
.story-main section:not(.scene):not(.summary){padding:clamp(4.5rem,10vh,7.5rem) 0}

@media(max-width:860px){
  .scene{padding:clamp(4.5rem,10vh,6rem) 0 clamp(3.5rem,8vh,5rem)}
  .scene h2,.scene h1{max-width:16ch}
  .sum-row{grid-template-columns:auto 1fr;row-gap:.75rem}
  /* The live marker drops under the copy rather than squeezing the title. */
  .sum-live{grid-column:2}
}
@media(max-width:480px){
  .scene-time{letter-spacing:.18em;font-size:.6rem}
  .scene-lead{font-size:.97rem}
}