/*
 * Team HOME (prefix 20) — homepage overhaul, September 2026.
 *
 * Everything here is scoped to .rhcx-home so it cannot reach another team's page,
 * and every rule carries that scope so it outranks the .rh-homepage bridge rules
 * still in phase1.css. Colors come from the phase1 :root tokens; nothing is
 * redefined here.
 *
 * Contract for Team EVENTS: the strip is injected into .rhcx-events__strip, which
 * is a full-bleed block with no padding of its own. Read var(--rhcx-gutter) for the
 * page gutter and var(--max) for the container width if the strip should line up
 * with the rest of the page; bleed past them if it should not.
 */

.rhcx-home {
  --rhcx-gutter: clamp(20px, 4vw, 34px);
  background: var(--surface);
  color: var(--tx);
  overflow-x: clip;
}

.rhcx-home img {
  max-width: 100%;
}

.rhcx-home .rhcx-wrap {
  max-inline-size: var(--max);
  margin-inline: auto;
  padding-inline: var(--rhcx-gutter);
}

.rhcx-home .rhcx-eyebrow {
  margin: 0 0 10px;
  color: var(--clay-tx);
  font-family: var(--b);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rhcx-home .rhcx-btn {
  display: inline-block;
  padding: 14px 27px;
  border: 0;
  background: var(--rust);
  color: #fff;
  font-family: var(--b);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.rhcx-home .rhcx-btn:hover,
.rhcx-home .rhcx-btn:focus-visible {
  background: #97401f;
  color: #fff;
}

.rhcx-home .rhcx-tlink {
  color: var(--on-ink);
  font-size: 15.5px;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.rhcx-home .rhcx-tlink--light {
  color: var(--rust);
  font-weight: 600;
  text-decoration-color: var(--rust);
}

.rhcx-home a:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- arrival */

/*
 * The hero must not fill a 1440x900 screen: the reader has to see the studio
 * grid start without scrolling. The art column, not the copy, used to set the
 * height (a square painting in a 691px column is a 691px tall row), so the art
 * is given an explicit, capped height on desktop and the copy is sized to sit
 * inside it.
 */
.rhcx-home .rhcx-hero {
  display: grid;
  background: var(--ink);
  color: var(--on-ink);
}

@media (min-width: 900px) {
  .rhcx-home .rhcx-hero {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: stretch;
  }
}

.rhcx-home .rhcx-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(34px, 4.2vw, 60px);
  padding-inline: max(var(--rhcx-gutter), calc((100vw - var(--max)) / 2 + var(--rhcx-gutter))) var(--rhcx-gutter);
}

.rhcx-home .rhcx-hero h1 {
  margin: 0 0 18px;
  max-inline-size: 18ch;
  color: var(--on-ink);
  font-family: var(--d);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.05;
  text-wrap: balance;
}

.rhcx-home .rhcx-hero__lede {
  margin: 0 0 26px;
  max-inline-size: 46ch;
  color: var(--on-ink-2);
  font-size: 18.5px;
  line-height: 1.55;
}

.rhcx-home .rhcx-hero__act {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 0;
}

.rhcx-home .rhcx-visit__art picture {
  display: block;
  block-size: 100%;
}

/*
 * Phone: the painting is square and it is the house. Show all of it, edge to
 * edge, with nothing cropped away. No fixed height, no object-fit.
 */
.rhcx-home .rhcx-hero__art img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/*
 * Under 600px the shared hygiene rule insets every section of this main by
 * max(1rem, safe-area). The copy should keep that inset so it lines up with
 * the studio grid below; the painting should not, so it is pulled back out to
 * the edges by the same amount.
 */
@media (max-width: 599px) {
  .rhcx-home .rhcx-hero__art {
    margin-inline: calc(-1 * max(1rem, env(safe-area-inset-left))) calc(-1 * max(1rem, env(safe-area-inset-right)));
  }
}

@media (min-width: 900px) {
  .rhcx-home .rhcx-hero__art {
    block-size: clamp(480px, 36vw, 540px);
  }

  .rhcx-home .rhcx-hero__art picture {
    display: block;
    block-size: 100%;
  }

  /*
   * Filling a landscape column from a square source has to crop somewhere.
   * The house sits between 30% and 86% of the painting's height; holding the
   * frame at 60% keeps the roof line and the grass in view at every width
   * this rule covers.
   */
  .rhcx-home .rhcx-hero__art img {
    block-size: 100%;
    object-fit: cover;
    object-position: center 60%;
  }
}

/* ---------------------------------------------------------- what we teach */

.rhcx-home .rhcx-studios {
  padding-block: clamp(50px, 7vw, 84px);
  background: var(--surface);
}

.rhcx-home .rhcx-studios__h {
  margin: 0 0 clamp(26px, 3.4vw, 42px);
  color: var(--ink);
  font-family: var(--d);
  font-size: clamp(26px, 3.1vw, 36px);
  font-weight: 700;
  letter-spacing: -.014em;
  line-height: 1.1;
}

/* Two across, two down, at every width down to the phone breakpoint. */
.rhcx-home .rhcx-tiles {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Under 600px a half-width tile is about 170px across, which is too small for
 * a name to sit on the photo and still read. One column, full width instead.
 */
@media (max-width: 600px) {
  .rhcx-home .rhcx-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rhcx-home .rhcx-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}

.rhcx-home .rhcx-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0E1714;
}

@media (max-width: 600px) {
  .rhcx-home .rhcx-tile__media {
    aspect-ratio: 4 / 3;
  }
}

.rhcx-home .rhcx-tile__media picture {
  display: block;
  block-size: 100%;
}

.rhcx-home .rhcx-tile__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
 * A 4:5 source in a landscape frame. 62% showed the hoop but sliced the
 * stitcher's head down to a strip of hair, so it broke the sitewide rule that
 * no crop takes a head off (Chris, 9 Sep). 40% keeps the hoop, the needle and
 * both hands fully in frame at 3:2 and at the 4:3 phone ratio below, and gives
 * back the ear and the glasses so the head still reads as a head. The crown is
 * already outside the source file -- this is an over-the-shoulder shot -- so no
 * focal point can show the whole head; replacing the photo is the real fix.
 */
.rhcx-home .rhcx-tile__media--high img {
  object-position: center 40%;
}

/*
 * The painting tile is another over-the-shoulder frame whose source already
 * cuts the painter's crown. Holding at 22% instead of the 50% default hands
 * back the ~50px of her hair the 3:2 box was taking, and costs only a sliver of
 * table at the bottom.
 */
.rhcx-home .rhcx-tile__media img[src*="painting-tile"] {
  object-position: center 22%;
}

/*
 * The name sits on the photo as a small ink tag, so the work in the picture is
 * never dimmed. (Chris, 9 Sep: the old bottom gradient greyed out the pieces.)
 */
.rhcx-home .rhcx-tile__name {
  position: absolute;
  z-index: 1;
  inset-block-end: clamp(12px, 1.6vw, 18px);
  inset-inline-start: clamp(12px, 1.6vw, 18px);
  inset-inline-end: auto;
  max-inline-size: calc(100% - 2 * clamp(12px, 1.6vw, 18px));
  padding: .3em .6em .34em;
  background: rgba(20, 32, 27, .82);
  color: #fff;
  font-family: var(--d);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.1;
}

.rhcx-home .rhcx-tile__line {
  display: block;
  margin-block-start: 12px;
  color: var(--tx-2);
  font-size: 14.5px;
  line-height: 1.45;
}

.rhcx-home .rhcx-tile:hover .rhcx-tile__name,
.rhcx-home .rhcx-tile:focus-visible .rhcx-tile__name {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .85);
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------- coming up */

.rhcx-home .rhcx-events {
  padding-block: clamp(44px, 6vw, 70px);
  border-block-start: 1px solid var(--rule);
  background: var(--surface);
}

.rhcx-home .rhcx-sechead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-block-end: clamp(20px, 2.6vw, 30px);
}

.rhcx-home .rhcx-sechead .rhcx-eyebrow {
  margin-block-end: 8px;
}

.rhcx-home .rhcx-events h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--d);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -.014em;
  line-height: 1.1;
}

.rhcx-home .rhcx-events__strip:empty {
  display: none;
}

/* ---------------------------------------------------------------- credits */

.rhcx-home .rhcx-credits {
  padding-block: clamp(50px, 7vw, 84px);
  background: var(--paper);
}

/* A chapter statement, not a column: hold it to a reading measure and center it. */
.rhcx-home .rhcx-credits__in {
  max-inline-size: min(var(--max), 66ch);
  text-align: center;
}

.rhcx-home .rhcx-credits h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--d);
  font-size: clamp(26px, 3.1vw, 36px);
  font-weight: 700;
  letter-spacing: -.014em;
  line-height: 1.1;
}

.rhcx-home .rhcx-credits p {
  margin: 0 0 20px;
  max-inline-size: 64ch;
  margin-inline: auto;
  color: var(--tx-2);
  font-size: 18px;
  line-height: 1.6;
}

.rhcx-home .rhcx-credits__more {
  margin: 0;
}

/* --------------------------------------------------------------- teachers */

.rhcx-home .rhcx-teachers {
  padding-block: clamp(46px, 6vw, 76px);
  background: var(--surface);
}

.rhcx-home .rhcx-people {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .rhcx-home .rhcx-people {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .rhcx-home .rhcx-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rhcx-home .rhcx-person {
  margin: 0;
}

.rhcx-home .rhcx-person img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  background: var(--ground);
  object-fit: cover;
}

.rhcx-home .rhcx-person span {
  display: block;
  margin-block-start: 10px;
  color: var(--ink);
  font-family: var(--d);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ visit */

.rhcx-home .rhcx-visit {
  padding-block: clamp(50px, 7vw, 84px);
  background: var(--ink);
  color: var(--on-ink);
}

.rhcx-home .rhcx-visit__in {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

@media (min-width: 880px) {
  .rhcx-home .rhcx-visit__in {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
}

.rhcx-home .rhcx-visit__art img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.rhcx-home .rhcx-visit h2 {
  margin: 0 0 14px;
  color: var(--on-ink);
  font-family: var(--d);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: -.014em;
  line-height: 1.2;
}

.rhcx-home .rhcx-visit h2 a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rhcx-home .rhcx-visit h2 a:hover,
.rhcx-home .rhcx-visit h2 a:focus-visible {
  text-decoration-color: currentColor;
}

.rhcx-home .rhcx-visit p {
  margin: 0 0 18px;
  max-inline-size: 46ch;
  color: var(--on-ink-2);
  font-size: 17px;
  line-height: 1.55;
}

.rhcx-home .rhcx-visit__more {
  margin: 0;
}

/* Lead, 9 Sep: one hero composition for the whole site (see 50-disciplines.css). */
@media (min-width: 900px) {
  .rhcx-home .rhcx-hero { min-height: clamp(480px, 36vw, 540px); grid-template-columns: minmax(0, 640px) auto; justify-content: start; align-items: center;
    padding-inline-start: max(var(--rhcx-gutter), calc((100vw - var(--max)) / 2)); column-gap: 40px; }
  .rhcx-home .rhcx-hero__text { padding-inline: 0 8px; }
  .rhcx-home .rhcx-hero__art { block-size: auto; display: flex; align-items: center; background: transparent; }
  .rhcx-home .rhcx-hero__art picture { display: block; block-size: auto; inline-size: auto; }
  .rhcx-home .rhcx-hero__art img { block-size: clamp(480px, 36vw, 540px); inline-size: auto; max-inline-size: min(56vw, 900px); min-block-size: 0; object-fit: contain; object-position: center; }
}