/* Landing menu only. The experience pages use index.css instead; the two never load
   together. Kept deliberately close to index.css's intro-gate palette (black ground, white
   type, quiet attribution) so arriving at an experience feels like the same site.

   The layout here is a reproduction of the client's own landing page,
   https://www.isobelandvan.com/twcfi-storytellers-ar : black ground, white centred type, a
   narrow column, and the three houses stacked one above the other at a common height with no
   labels and no frames. Measured off that page at desktop width: content column 442px, h1
   65.5px/77.7px bold, instruction line 20.2px/34.3px bold, each image 287px tall with an
   11px gap. Those numbers are where the values below come from.

   It is a single column at every width, including desktop, which is what the original does.
   Three across would fit a laptop without scrolling, but it stops being the client's page. */

:root {
  --ink: #ffffff;
  --ink-quiet: rgba(255, 255, 255, 0.62);
  --ink-faint: rgba(255, 255, 255, 0.38);
  --ground: #000000;
  --transition-smooth: 0.2s ease;
}

* {
  font-family: 'Nunito', Arial, sans-serif;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  /* The menu scrolls, unlike the experience pages. -webkit-text-size-adjust stops iOS
     inflating the type when the phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
}

/* 442px is the client's column, measured. Everything on the page lives inside it, so the
   title wraps at the same place and the houses sit at the same size as on their site. */
#menu {
  min-height: 100svh;
  max-width: 442px;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

#menu-header {
  text-align: center;
}

/* Wraps to four lines in the 442px column, as it does on the client's page. Their face is
   Aktiv Grotesk (Adobe Fonts, not licensed to us); this falls back to Arial, the same
   genre. Their h1 is weight 400 wrapped in <strong>, i.e. bold, hence 700 here. */
#menu-title {
  margin: 0;
  font-size: clamp(38px, 11vw, 66px);
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: -0.01em;
}

/* Verbatim from the client's page, and the reason the cards below carry no names: it tells
   the visitor to choose by matching the printed marker in front of them, not by reading. */
#menu-instruction {
  margin: 24px 0 0;
  font-size: clamp(17px, 4.8vw, 20px);
  font-weight: 700;
  line-height: 1.7;
}

/* ---- Cards ----
   The art is a model house photographed and cut out on black (the reflection under each one
   is part of the photograph), so the images sit straight on the page background: no frame,
   no border, and no glow behind them. The client's page has none of those and the houses are
   lit brightly enough to hold themselves off the black without help. */

/* The client's measured gap between the stacked houses is 11px. It opens up here because a
   card is now a photograph AND its row of scan links: at 11px the numbers sat as close to
   the NEXT storyteller's photograph as to their own, which reads as the wrong grouping. The
   11px survives as the gap inside a card, between the photo and its numbers (.take-row). */
#cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-content: center;
}

/* A card is a photograph plus its row of three scan links. The photograph is NOT a link:
   each storyteller has three scans and no default, so there is nothing for the picture to
   point at. It identifies; the numbers below it are what you tap. */
.card {
  display: block;
  color: var(--ink);
}

/* A common height with object-fit: contain, which is what the original does: the three
   houses were photographed at different aspect ratios (999x807, 999x1056, 999x1022) and
   their page sets a height and lets each width fall where it lands. 287px is that height and
   it stays as the desktop value, because it is the client's measurement.

   The clamp only comes into play on a short phone. It floors lower than it used to because
   three rows of scan links add about 175px to the page: at the old 190px minimum a 667px
   phone gained most of another screen of scroll. */
.card-image {
  display: block;
  width: 100%;
  height: clamp(140px, 26svh, 287px);
  object-fit: contain;
}

/* ---- Scan picker ----
   Three scans per storyteller, and neither the photograph nor the printed marker can tell
   them apart (there is one of each per person), so these links carry it. They are the only
   tap targets on the page, which is why they are sized generously rather than set as small
   captions: 52px tall clears the 44px minimum comfortably, and three across the 442px column
   is roughly 140px each.

   Each holds a NUMBER over a WORD ("2" / "Dancing"), stacked rather than run together on one
   line. Stacked, the longest label in the set (3 / Sculpting) still fits a 110px cell on a
   360px phone with room to spare; on one line at this weight it would not. It also keeps the
   numeral reading as the numeral, which is how the client files the scans and how the two
   device-verified takes are known.

   The outline style is deliberate. The client's page is black ground and white type with no
   frames, borders or glows anywhere, so a filled button would be the loudest thing on it and
   would compete with the photographs. */
.take-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.take {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--transition-smooth), opacity var(--transition-smooth),
    border-color var(--transition-smooth), background-color var(--transition-smooth);
  -webkit-tap-highlight-color: transparent;
}

.take-number {
  font-size: 19px;
}

/* The activity, in the client's own word for it. Set smaller and slightly held back so the
   pair reads as one label rather than as two competing ones, and so nine of them down the
   page do not out-shout the three photographs. Not uppercased: the client's page uses none
   anywhere. */
.take-name {
  font-size: 13px;
  opacity: 0.8;
}

/* Hover is for the desktop harness; :active is the one that matters on a phone. */
@media (hover: hover) {
  .take:hover {
    border-color: var(--ink);
    background-color: rgba(255, 255, 255, 0.08);
  }
}

.take:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* The noscript fallback has no image, so give it enough of a box to be tappable. */
noscript .card {
  padding: 24px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

/* ---- Footer ----
   Neither of these is on the client's page: the headphone line is theirs but from inside
   Tom's experience, and the attribution is a licence obligation. Both are set quietly so the
   page still reads as the one they wrote. */

#menu-footer {
  text-align: center;
}

#menu-note {
  margin: 0 auto 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

/* Niantic Spatial attribution, required by the XR Engine License Agreement (see
   lib/xr/LICENSE). Deliberately quiet, but it must stay visible and legible: do not hide
   it, shrink it further, or drop the licence link. */
#attribution {
  margin: 0 auto;
  max-width: 420px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-faint);
}

#attribution a {
  color: var(--ink-quiet);
}