/* The person look's home: the boards Main.dc.html (1440) and Phone.dc.html (390),
   one template (templates/tenants/roberto-val/home.html). Linked from the designed
   base after its sheet, so a rule here beats a base rule of equal weight; every rule
   sits under `.rv-home`.

   The parts (grounds, buttons, chips, cards, the ink table, addresses, the road, the
   call band, the focus ring and the gated lift) are the base sheet's shared
   components. This file adds only the home's own layout: the two-column bands and
   their phone order, the doors' grid and whole-card links, the
   board's sizes where the home draws bigger than the shared parts, the headline
   measures and (the 2026-10-07 port) the next-event ticket. Colour is tokens only.

   Nothing here moves. The board's motion is the base sheet's, behind both gates; this
   sheet only feeds it, at the foot: the order a band's pieces rise in (`--i`) and each
   portrait's tilt (`--rv-tilt`). */

/* ------------------------------------------------------------ page primitives */
.rv-home .rv-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.rv-home .rv-head-text {
  min-width: 0;
}
.rv-home .rv-h2 {
  line-height: 0.9;
}
.rv-home .rv-split-head .rv-h2 {
  margin-top: 0.5rem;
}
.rv-home .rv-body {
  max-width: 52ch;
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}
/* The boards' buttons stand 58 px: 16 px of padding round a 22 px Bebas line. */
.rv-home .rv-btn {
  min-height: 3.625rem;
}
.rv-home .rv-chip .rv-dot {
  width: 0.5rem;
  height: 0.5rem;
}
.rv-home .rv-dot-ink {
  background: var(--rv-ink);
}
/* Two cream bands meet only when the edition is absent. */
.rv-home .rv-ways + .rv-road-sec {
  border-top: 3px solid var(--rv-ink);
}

/* ------------------------------------------------------------------- the hero */
.rv-home .rv-hero-grid {
  display: grid;
  align-items: end;
}
.rv-home .rv-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  min-width: 0;
}
.rv-home .rv-h1 {
  line-height: 0.88;
}
/* Keep the final word one transformable box for the load-time beat. */
.rv-home .rv-h1-last {
  display: inline-block;
}

/* ------------------------------------------------------------- the next event */
/* The Main board's ticket on the ink: the date stub, the details behind a dashed
   perforation, the two ways on; under them, «coming up». A phone (the Phone board)
   stacks the three: the stub a dateline (the day large, the weekday over the month
   beside it), the perforation along the details' top. The stub's ground, ink and
   faces are the base sheet's (`.rv-stub`); the map link is the shared address's. */
.rv-home .rv-ticket {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.rv-home .rv-ticket-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.rv-home .rv-ticket-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
}
.rv-home .rv-ticket-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}
.rv-home .rv-ticket-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.rv-home :is(.rv-ticket-chip, .rv-ticket-count) {
  padding: 0.25rem 0.625rem;
  border: 2px solid var(--rv-cream);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
/* The kind in its own tone: a series night the orange (the ink on it, 5.73:1), a
   one-off event the green (the cream on it, 4.54:1). */
.rv-home .rv-ticket-chip {
  border-color: var(--rv-orange);
  background: var(--rv-orange);
  color: var(--rv-ink);
}
.rv-home .rv-ticket-chip-g {
  border-color: var(--rv-green-ground);
  background: var(--rv-green-ground);
  color: var(--rv-cream);
}
.rv-home .rv-ticket-count {
  white-space: nowrap;
}
.rv-home .rv-ticket-title {
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  line-height: 0.9;
}
.rv-home .rv-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.625rem;
  font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
}
.rv-home .rv-ticket-addr {
  font-size: 1rem;
  line-height: 1.45;
  opacity: 0.8;
}
.rv-home .rv-ticket-price {
  color: var(--rv-yellow);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}
.rv-home .rv-ticket-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.rv-home .rv-ticket-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-transform: uppercase;
  text-underline-offset: 0.25rem;
  white-space: nowrap;
}
.rv-home :is(.rv-ticket-all, .rv-ticket-later a):hover {
  color: var(--rv-yellow);
}
.rv-home .rv-ticket-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rv-cream-hair);
}
.rv-home .rv-ticket-after-label {
  color: var(--rv-cream-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rv-home .rv-ticket-later {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-home .rv-ticket-later a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 51.24rem) {
  .rv-home .rv-ticket-stub {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "day wd"
      "day mon";
    justify-content: center;
    align-items: center;
    gap: 0.375rem 1rem;
    padding: 0.875rem 1.25rem;
    text-align: left;
  }
  .rv-home .rv-ticket-stub .rv-stub-day {
    grid-area: day;
    font-size: 5.5rem;
  }
  .rv-home .rv-ticket-stub .rv-stub-wd {
    grid-area: wd;
    align-self: end;
  }
  .rv-home .rv-ticket-stub .rv-stub-mon {
    grid-area: mon;
    align-self: start;
  }
  .rv-home .rv-ticket-body {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 3px dashed var(--rv-cream-rule);
  }
  .rv-home .rv-ticket-actions {
    margin-top: 1.5rem;
  }
}
@media (min-width: 51.25rem) {
  .rv-home .rv-ticket-grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  /* The board's inset ink rule round the stub's yellow. */
  .rv-home .rv-ticket-stub {
    min-width: 11.25rem;
    outline: 3px solid var(--rv-ink);
    outline-offset: -0.625rem;
  }
  .rv-home .rv-ticket-stub .rv-stub-day {
    font-size: clamp(5.5rem, 9vw, 8.25rem);
  }
  .rv-home .rv-ticket-stub .rv-stub-mon {
    font-size: 1.75rem;
  }
  .rv-home .rv-ticket-body {
    gap: 0.875rem;
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    border-left: 3px dashed var(--rv-cream-rule);
  }
  .rv-home .rv-ticket-actions {
    align-items: flex-end;
    gap: 1.125rem;
  }
}

/* ------------------------------------------------------------------- the room */
/* The source order is the phone's: the words, the portrait, the community button. */
.rv-home .rv-room-grid {
  display: grid;
  gap: 1.375rem;
  align-items: center;
}
.rv-home .rv-room-text {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  min-width: 0;
}
.rv-home #room .rv-h2 {
  max-width: 8ch;
}

/* ------------------------------------------------------------------ the doors */
.rv-home .rv-ways .rv-h2 {
  max-width: 10ch;
}
.rv-home .rv-ways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 1.25rem;
}
/* A door sits in its list item (the item rises in; the door lifts), and fills it. */
.rv-home .rv-way-slot {
  display: grid;
  min-width: 0;
}
.rv-home .rv-way {
  position: relative;
  min-height: 18.75rem;
}
.rv-home .rv-way .rv-card-title {
  font-size: 2.5rem;
  letter-spacing: 0.04em;
}
/* The title's link covers the card, as the board's whole card is the link; the ring
   is drawn round the card, in the tone of the band it sits on. */
.rv-home .rv-way-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.rv-home .rv-way-link:focus-visible {
  outline: none;
}
.rv-home .rv-way:has(.rv-way-link:focus-visible) {
  outline: 3px solid var(--rv-ring, var(--rv-ink));
  outline-offset: 3px;
}
.rv-home .rv-way-data {
  display: block;
}
.rv-home .rv-way-cta {
  color: var(--rv-yellow);
}
.rv-home .rv-way-cta:hover {
  color: var(--rv-cream);
}

/* ------------------------------------------------------------ the next edition */
.rv-home .rv-alc-grid {
  display: grid;
  gap: 1.375rem;
  align-items: center;
}
/* The source order is the phone's: the words, the card, then the later dates and the
   buttons, so keyboard focus meets the card where a phone shows it. */
.rv-home :is(.rv-alc-text, .rv-alc-more) {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  min-width: 0;
}
.rv-home .rv-alc-wm {
  display: block;
  width: 100%;
  max-width: 35rem;
  height: auto;
}
.rv-home .rv-alc-name {
  font-size: clamp(3.5rem, 6vw, 5.25rem);
  letter-spacing: 0.02em;
  line-height: 0.9;
}
.rv-home .rv-alc .rv-h2 {
  max-width: 9ch;
}
.rv-home .rv-alc-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 48ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.rv-home .rv-alc-body a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.rv-home .rv-alc-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.rv-home .rv-alc-dates:not(:has(.rv-alc-date)) {
  display: none;
}
.rv-home .rv-alc-date:hover {
  color: var(--rv-yellow);
}
/* The edition card keeps its own words' colour (the band's kicker tone is for the
   band); without the series' artwork it is the board's orange card, rimmed in orange
   on the ink. */
.rv-home .rv-ed .rv-kicker {
  color: inherit;
}
.rv-home .rv-alc .rv-ed:not(:has(.rv-series-art)) {
  border-color: var(--rv-orange);
}
.rv-home .rv-ed-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.rv-home .rv-ed-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

/* ------------------------------------------------------------------- the road */
.rv-home .rv-road-head {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
.rv-home .rv-road-sec .rv-h2 {
  max-width: 10ch;
}
.rv-home .rv-stage-n {
  font-size: clamp(4rem, 7vw, 6.5rem);
}
.rv-home .rv-stage .rv-chip {
  align-self: flex-start;
}
.rv-home .rv-stage-title {
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  text-wrap: balance;
}
.rv-home .rv-stage-foot a:hover {
  text-decoration: underline 2px;
  text-underline-offset: 0.25em;
}

/* ------------------------------------------------------------------- the call */
.rv-home .rv-cta-title {
  max-width: 12ch;
}

/* ------------------------------------------------------------ the two columns */
/* The room from 45rem: the words over the community button on the left, the portrait
   beside both on the right; whichever is taller, the left pair stays one block,
   centred against the portrait (with no button, the words alone sit centred). */
@media (min-width: 45rem) {
  .rv-home .rv-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.375rem clamp(2rem, 5vw, 4.5rem);
  }
  .rv-home .rv-room-text {
    grid-column: 1;
    grid-row: 1;
  }
  .rv-home #room .rv-frame {
    grid-column: 2;
    grid-row: 1;
  }
  .rv-home .rv-room-grid:has(> .rv-room-cta) > .rv-room-text {
    align-self: end;
  }
  .rv-home .rv-room-grid:has(> .rv-room-cta) > .rv-frame {
    grid-row: 1 / span 2;
  }
  .rv-home .rv-room-cta {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
}
/* The edition band splits later than the room: below 60rem the card's half column
   squeezes its foot (the date and place) to a word a line. From 60rem, the words over
   the later dates on the left, the card beside both on the right; whichever is
   taller, the left column stays one block, centred against the card. The card's
   place is its wrapper's (`.rv-alc-card`, which carries its entrance: the card itself
   lifts under the pointer, so it takes none). */
@media (min-width: 60rem) {
  .rv-home .rv-alc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.375rem clamp(1.75rem, 4vw, 3.5rem);
  }
  .rv-home .rv-alc-text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .rv-home .rv-alc-more {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .rv-home .rv-alc-card {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* A phone stacks each band in the Phone board's order: the room already is (its
   words, its portrait, its button), the series' wordmark first; the edition band is
   already in its source order, and stacks so up to 60rem, its card no wider than the
   words' measure. The wordmark moves to the head of its own column, which stays a
   box, so the words, the card and the dates each rise as they scroll in here too. */
@media (max-width: 59.99rem) {
  .rv-home .rv-alc-wm {
    order: -1;
  }
  .rv-home .rv-alc .rv-ed {
    max-width: 36rem;
  }
}

@media (max-width: 39.99rem) {
  .rv-home .rv-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .rv-home .rv-actions > .rv-btn {
    width: 100%;
  }
  .rv-home .rv-cta-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .rv-home .rv-way {
    min-height: 0;
  }
  .rv-home .rv-stage {
    padding: 1.5rem;
  }
  /* The Phone board's feet that hold links (the fourth door, the stages): side by
     side from the left, each link a 44 px target. */
  .rv-home :is(.rv-card-foot:has(> a), .rv-stage-foot) {
    justify-content: flex-start;
    gap: 0 1.125rem;
  }
  .rv-home :is(.rv-card-foot, .rv-stage-foot) > a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    min-height: 2.75rem;
  }
}

/* ------------------------------------------------------------ the motion's hooks */
/* What the base sheet moves reads its order and its tilt from here, as the board sets
   them (never inline). The order is a stagger index, `--i`, counted from 0 within a
   group: on the first screen the tag, the last word, the lede and the buttons; on
   the ticket the details, the ways on, «coming up»; in the room the heading, each
   paragraph and the chips take separate beats; the doors and stages follow their
   place, so a missing door closes the count up. A plain property, not a motion
   rule: it does nothing until the gated entrances read it. */
.rv-home .rv-hero .rv-lede,
.rv-home .rv-ticket-actions,
.rv-home .rv-alc-card,
.rv-home .rv-alc-more,
.rv-home .rv-ways-grid > :nth-child(2),
.rv-home .rv-road > :nth-child(2) {
  --i: 1;
}
.rv-home .rv-hero-text > .rv-actions,
.rv-home .rv-ticket-after,
.rv-home .rv-ways-grid > :nth-child(3),
.rv-home .rv-road > :nth-child(3) {
  --i: 2;
}
.rv-home .rv-ways-grid > :nth-child(4) {
  --i: 3;
}
/* The room's words stay readable while each piece gets its own entrance. The
   button is observed separately, after the column, rather than inheriting its wait. */
.rv-home .rv-room-text > .rv-h2,
.rv-home .rv-h1-last {
  --i: 1;
}
.rv-home .rv-room-text > .rv-h2 + .rv-body {
  --i: 2;
}
.rv-home .rv-room-text > .rv-body:last-of-type {
  --i: 3;
}
.rv-home .rv-room-text > .rv-chips {
  --i: 4;
}
/* Keep the production portraits' resting tilt while their shared entrance is quieter. */
.rv-home .rv-hero .rv-poster {
  --rv-tilt: -1.4deg;
}
.rv-home #room .rv-poster {
  --rv-tilt: 1.2deg;
}