/* The community page (the story row's page; the board is Comunidade.dc.html).

   Every rule sits under `.rv-community`, the wrapper core/flat.html draws only for the
   story row, so the sheet can ride every page of the site (the base links all four page
   sheets, so a boosted navigation stays styled) and still touch nothing else.

   The page is built from the base sheet's shared parts — the grounds (`.rv-g-*`), the
   band paddings, the ink table and its rows, the buttons, the frame and its flag, the
   chips, the split header and the yellow call's layout. What is here is only what this
   board draws and no other page does: the first screen's grid and headline size, the
   «is / is not» lines with their Bebas chips, the stage cells of the road, the people
   list, the doors' number column, the list's rule and the platform form drawn square.

   Colours are the base sheet's tokens and nothing else. Pairs on this page: ink on the
   cream (16.66:1), ink on the orange (5.73:1), ink on the yellow (11.19:1), cream on the
   green ground (4.54:1), cream and the yellow on the ink (16.66 and 11.19:1), the
   text-safe orange on the cream (4.56:1). A form error on the yellow is the ink: the
   platform's red is 3.3:1 there.

   Nothing here moves. A door changes ground on hover, at once, as the board draws it
   (a colour, no transition, no transform). 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`). */

/* ------------------------------------------------------------- the first screen */
.rv-community .rv-com-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
}
.rv-community .rv-com-col {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  min-width: 0;
}
.rv-community .rv-com-col > .rv-btn {
  align-self: flex-start;
}
/* The board's inner-page headline: smaller than the home's, its sentences on their
   own lines (the template breaks after each full stop but the last), balanced. */
.rv-community .rv-com-h1 {
  max-width: none;
  font-size: clamp(4rem, 9vw, 8.5rem);
  text-wrap: balance;
}
.rv-community .rv-com-lede {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ------------------------------------------------------------- headers */
.rv-community .rv-com-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.rv-community .rv-com-head {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
/* The boards set each band's headline on two or three short lines; a measure in the
   headline's own em, balanced, breaks the catalog's sentence that way in both
   languages without a break typed into it. «Entra / a dançar.» and «Entra / na
   lista.» hang their first word alone, which balancing would never choose: the
   template breaks those two after their first word. */
.rv-community .rv-com-h2 {
  max-width: 4.4em;
}
.rv-community .rv-split-head .rv-com-h2 {
  margin-top: 0.5rem;
}
.rv-community .rv-com-p {
  max-width: 52ch;
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ------------------------------------------------------------- the ink table */
/* The label cell's big word (Bebas, as the class week's day) and its line; the cell
   paddings the board gives these two bands. */
.rv-community .rv-com-label,
.rv-community .rv-com-stage {
  font-size: 2.25rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.rv-community .rv-g-ink .rv-com-stage {
  color: var(--rv-yellow);
}
.rv-community .rv-com-place {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rv-community .rv-com-lines {
  gap: 0.75rem;
  margin: 0;
  list-style: none;
}
.rv-community .rv-com-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.875rem;
}
/* The «is» words: the board's time chip — Bebas on the ink. */
.rv-community .rv-com-chip {
  padding: 0.125rem 0.625rem;
  background: var(--rv-ink);
  color: var(--rv-cream);
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: nowrap;
}
.rv-community .rv-com-text {
  font-size: 1rem;
  line-height: 1.5;
}
.rv-community .rv-com-line .rv-com-text {
  flex: 1 1 16.25rem;
  min-width: 0;
}
.rv-community .rv-com-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.rv-community .rv-com-link:hover {
  text-decoration-thickness: 3px;
}
.rv-community .rv-com-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
}
.rv-community .rv-com-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (min-width: 40rem) {
  .rv-community .rv-com-what .rv-ink-body {
    padding-block: 1.125rem;
  }
  .rv-community .rv-com-road .rv-ink-body {
    padding-block: 1.375rem;
  }
}

/* The road's foot: the sentence and the cream button, over the cream rule. */
.rv-community .rv-com-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--rv-cream-rule);
}
.rv-community .rv-com-bottom .rv-com-text {
  max-width: 52ch;
  text-wrap: pretty;
}
.rv-community .rv-com-btn-cream {
  border-color: var(--rv-cream);
  background: var(--rv-cream);
  color: var(--rv-ink);
}
.rv-community .rv-com-btn-cream:hover {
  border-color: var(--rv-yellow);
  background: var(--rv-yellow);
  color: var(--rv-ink);
}

/* ------------------------------------------------------------- who started it */
.rv-community .rv-com-who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.rv-community .rv-com-portrait > img {
  object-position: center top;
}
.rv-community .rv-com-people {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-community .rv-com-person {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.875rem;
  border-left: 3px solid var(--rv-rule, var(--rv-orange-text));
}
.rv-community .rv-com-person-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}
.rv-community .rv-com-person-line {
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------- the doors */
/* Agenda rows on the green: the number and its line, the door, the button word. The
   whole row is the link; its ring sits inside it (outside, it would fall on the
   table's own ink), and a focused door wears its hover ground. */
.rv-community .rv-com-join {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.rv-community .rv-com-num {
  font-size: 2.5rem;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
.rv-community .rv-com-sub,
.rv-community .rv-com-venue {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rv-community .rv-com-sum {
  font-size: 0.9375rem;
  line-height: 1.45;
}
/* From the tablet up, a door is the board's agenda row rather than the week's: a
   200 px number cell whose rule runs the height of its own words (not the row's),
   the door and the button word, on one centre line inside the row's padding. That
   keeps «Um sábado por mês» on one line, as drawn. */
@media (min-width: 40rem) {
  .rv-community .rv-com-doors .rv-ink-row:has(> .rv-ink-cta) {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1.375rem 1.5rem;
  }
  .rv-community .rv-com-doors .rv-ink-head {
    gap: 0.25rem;
    padding: 0 1rem 0 0;
  }
  .rv-community .rv-com-doors .rv-ink-body {
    gap: 0.375rem;
    padding: 0;
  }
  .rv-community .rv-com-doors .rv-ink-cta {
    padding: 0;
  }
}
/* The board's tablet rule: below 900px the button word's column would squeeze the
   door's own words, so there it moves under them, beside the number column. */
@media (min-width: 40rem) and (max-width: 56.24rem) {
  .rv-community .rv-com-doors .rv-ink-row:has(> .rv-ink-cta) {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
  }
  .rv-community .rv-com-doors .rv-ink-head {
    grid-row: span 2;
  }
  .rv-community .rv-com-doors .rv-ink-cta {
    grid-column: 2;
  }
}
.rv-community .rv-com-doors a.rv-ink-row:focus-visible {
  background: var(--rv-yellow);
  color: var(--rv-ink);
  outline: 3px solid var(--rv-ink);
  outline-offset: -8px;
}

/* ------------------------------------------------------------- the list */
/* The yellow call's layout under a 3 px rule, inside the doors' yellow: the owner's
   two sentences on the left, the platform's newsletter form on the right, drawn
   square. The form is the platform's, untouched, and so is its order: the submit
   stays beside the email field, before the consent, as the keyboard reaches them.
   (The board draws the submit under the consent; moving it there visually would
   put the button the eye reaches last first in the tab order.) */
.rv-community .rv-com-list {
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.rv-community .rv-com-list-grid {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 3px solid var(--rv-ink);
}
.rv-community .rv-com-list-text {
  flex: 1 1 22.5rem;
  min-width: 0;
}
.rv-community .rv-com-more {
  font-size: 0.9375rem;
  font-weight: 600;
}
.rv-community .rv-com-form {
  flex: 0 1 30rem;
  min-width: 0;
}
.rv-community .rv-com-form button[type="submit"] {
  align-self: flex-start;
  min-height: 3.5rem;
  margin: 0;
  padding: 1rem 1.75rem;
  font-size: 1.5rem;
}
/* From the platform's own row breakpoint the submit sits on the field's foot line. */
@media (min-width: 40rem) {
  .rv-community .rv-com-form button[type="submit"] {
    align-self: flex-end;
  }
}
.rv-community .rv-com-form .fieldset {
  padding-block: 0;
}
.rv-community .rv-com-form .fieldset-legend {
  padding-block: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-community .rv-com-form .input {
  width: 100%;
  height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 3px solid var(--rv-ink);
  background: var(--rv-cream);
  color: var(--rv-ink);
  font-size: 1.0625rem;
}
.rv-community .rv-com-form .checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--rv-ink);
  background-color: var(--rv-cream);
}
.rv-community .rv-com-form label.text-sm {
  font-size: 0.9375rem;
  line-height: 1.45;
}
.rv-community .rv-com-form .text-error {
  color: var(--rv-ink);
}
.rv-community .rv-com-form button:focus-visible {
  outline: 3px solid var(--rv-ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- 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 lede, the jumps; in a band its rows, then
   its doors, each by its place, so a missing row closes the count up. A plain property,
   not a motion rule: it does nothing until the gated entrances read it. */
.rv-community .rv-com-hero .rv-com-lede {
  --i: 1;
}
.rv-community .rv-com-hero .rv-actions {
  --i: 2;
}
.rv-community .rv-com-road .rv-com-stage {
  --rv-beat-turn: 1.8deg;
}
.rv-community .rv-com-road .rv-ink-row:nth-child(2) .rv-com-stage {
  --rv-beat-turn: -1.8deg;
}
.rv-community .rv-com-what .rv-ink-row:nth-child(2),
.rv-community .rv-com-road .rv-ink-row:nth-child(2),
.rv-community .rv-com-doors > li:nth-child(2) {
  --i: 1;
}
.rv-community .rv-com-road .rv-ink-row:nth-child(3),
.rv-community .rv-com-doors > li:nth-child(3) {
  --i: 2;
}
.rv-community .rv-com-doors > li:nth-child(4) {
  --i: 3;
}
.rv-community .rv-com-doors > li:nth-child(5) {
  --i: 4;
}
/* The two portraits hang as the board hangs them: the filming one a little to the
   left, the workshop one a little to the right. */
.rv-community .rv-com-hero .rv-frame {
  --rv-tilt: -1.4deg;
}
.rv-community .rv-com-portrait {
  --rv-tilt: 1.2deg;
}

/* The social's clips share its player, with the parent site's type and colours. */
.rv-community .rv-community-party {
  --havana-ink: var(--rv-cream);
  --havana-red: var(--rv-yellow);
}
.rv-community .rv-community-party .rv-havana-party {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border: 0;
}
.rv-community .rv-community-party .rv-havana-party-heading h2 {
  font-family: var(--rv-f-cond);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
}