/* ============================================================
   50 — Discipline pages (Painting & Drawing, Pottery,
   Needlework, Performing Arts).

   Ported from the approved comp painting.built.html: ink hero
   with a 3:2 image, a narrow reading paragraph, ruled session
   rows with Fraunces dates, the contact-sheet gallery, and a
   quiet teacher roster. Loads after phase1.css, so everything
   here is allowed to win.
   ============================================================ */

/* ---------- hero ---------- */
.rh-disc-hero{background:var(--ink);color:var(--on-ink);display:grid;gap:0}
@media(min-width:900px){
  .rh-disc-hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:stretch}
}
.rh-disc-hero__text{padding:clamp(32px,4vw,48px) 40px;padding-inline-start:max(32px, calc((100vw - 1200px) / 2 + 32px));
  display:flex;flex-direction:column;justify-content:center;width:100%}
@media(max-width:899px){.rh-disc-hero__text{padding:44px 22px 40px;margin-left:0}}

.rh-disc-crumb{font-size:13px;color:var(--on-ink-2);margin:0 0 22px;max-width:none}
.rh-disc-crumb a{color:var(--on-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1.5px;text-underline-offset:4px}
.rh-disc-crumb a:hover,.rh-disc-crumb a:focus-visible{text-decoration-color:currentColor}

.rh-disc-hero h1{font-family:var(--d);font-size:clamp(38px,5vw,58px);line-height:1.06;
  letter-spacing:-.02em;color:var(--on-ink);margin:0 0 20px}
.rh-disc-lede{font-size:19px;line-height:1.55;color:var(--on-ink-2);max-width:42ch;margin:0 0 30px}

.rh-disc-act{margin:0;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.rh-disc-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:14px 28px;background:var(--rust);color:#fff;font-weight:600;font-size:1.02rem;
  border:1.5px solid var(--rust)}
.rh-disc-cta:hover{background:#96411F;border-color:#96411F}
.rh-disc-hero .rh-disc-quiet{color:var(--on-ink);font-size:15.5px;font-weight:600;
  border-bottom:0;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1.5px;text-underline-offset:4px}
.rh-disc-hero .rh-disc-quiet:hover,.rh-disc-hero .rh-disc-quiet:focus-visible{text-decoration-color:currentColor}

.rh-disc-hero__media{position:relative;background:var(--river);overflow:hidden}
.rh-disc-hero__media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media(min-width:900px){.rh-disc-hero__media img{height:100%;min-height:380px}}
/* A commissioned watercolor is artwork. On desktop it fills the hero media
   column the way the home page watercolor does — full-bleed, object-fit:cover,
   the ink ground showing only as the section's own background. On mobile there
   is no column height to fill, so the whole painting shows instead, uncropped. */
.rh-disc-hero__media--art{background:var(--ink)}
.rh-disc-hero__media--art picture{display:block;width:100%;height:100%}
@media(min-width:900px){
  .rh-disc-hero__media--art img{aspect-ratio:auto;width:100%;height:100%;min-height:380px;
    max-width:none;object-fit:cover;object-position:center}
  /* Needlework's watercolor is a portrait crop; keep the hoop and hands in frame. */
  .rh-discipline-page-needlework .rh-disc-hero__media--art img{object-position:center 30%}
  /* Painting: the painter's head sits in the top third; hold the top so it is never cut. */
  .rh-discipline-page-painting .rh-disc-hero__media--art img{object-position:center 12%}
}
@media(max-width:899px){
  .rh-disc-hero__media--art{padding:0}
  .rh-disc-hero__media--art img{aspect-ratio:auto;width:100%;height:auto;max-width:none;
    object-fit:contain;min-height:0}
}

/* ---------- the reading paragraph ---------- */
.rh-disc-read{background:var(--paper);padding:70px 32px}
@media(max-width:899px){.rh-disc-read{padding:52px 22px}}
.rh-disc-read__inner{max-width:62ch;margin:0 auto}
.rh-disc-read h2{font-size:clamp(25px,3vw,31px);margin:0 0 18px}
.rh-disc-read p{color:var(--tx-2);font-size:17.5px;max-width:none}
.rh-disc-read p + p{margin-top:1.05em}
.rh-disc-read a{color:var(--river);font-weight:600;border-bottom:0;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1.5px;text-underline-offset:4px}
.rh-disc-read a:hover,.rh-disc-read a:focus-visible{text-decoration-color:currentColor}

/* ---------- "Next times you can come" ---------- */
.rh-next-times{background:var(--surface);padding:76px 32px 72px}
@media(max-width:899px){.rh-next-times{padding:54px 22px 52px}}
.rh-next-times__in{max-width:1136px;margin:0 auto}
.rh-next-times__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;margin-bottom:10px}
.rh-next-times__head h2{font-size:clamp(26px,3.2vw,34px);margin:0}
.rh-next-times__count{font-size:15px;color:var(--tx-3)}
.rh-next-times__note{font-size:16px;color:var(--tx-2);max-width:60ch;margin:0 0 8px}

.rh-nt-row{display:grid;gap:6px 26px;padding:24px 0;border-top:1px solid var(--rule);align-items:center;
  color:inherit}
@media(min-width:820px){.rh-nt-row{grid-template-columns:100px minmax(0,1fr) auto auto}}
a.rh-nt-row:hover .rh-nt-title{text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--clay)}
a.rh-nt-row:hover .rh-nt-go{color:#96411F}

.rh-nt-date{font-family:var(--d);line-height:1.12}
.rh-nt-date .d{font-size:29px;font-weight:700;display:block;color:var(--tx)}
.rh-nt-date .m{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay-tx);
  font-family:var(--b);font-weight:600;display:block;margin-top:2px}

.rh-nt-body{min-width:0}
.rh-nt-title{display:block;font-size:21px;font-family:var(--d);font-weight:400;color:var(--tx);margin:0 0 5px;line-height:1.24}
.rh-nt-meta{font-size:14.5px;color:var(--tx-3);display:block;max-width:none}

.rh-nt-state{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--rule);color:var(--tx-2);white-space:nowrap;justify-self:start}
.rh-nt-state--few{border-color:var(--rust);color:var(--rust)}
.rh-nt-state--full{background:var(--rule);color:var(--tx-3)}
.rh-nt-go{font-size:15.5px;font-weight:600;color:var(--rust-tx);white-space:nowrap}

.rh-next-times__foot{border-top:1px solid var(--rule);padding:22px 0 0;font-size:15px;color:var(--tx-3);
  margin:0;max-width:none}
.rh-next-times__foot a{color:var(--river);font-weight:600;border-bottom:0;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1.5px;text-underline-offset:4px}
.rh-next-times__foot a:hover,.rh-next-times__foot a:focus-visible{text-decoration-color:currentColor}

/* Needlework: no rows, an appointment instead. */
.rh-appt{border-top:1px solid var(--rule);padding:28px 0 0;display:grid;gap:26px}
@media(min-width:820px){.rh-appt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}}
.rh-appt h3{font-size:19px;margin:0 0 10px}
.rh-appt p{color:var(--tx-2);font-size:16.5px;margin:0 0 .8em;max-width:52ch}
.rh-appt p:last-child{margin-bottom:0}
.rh-appt .rh-appt-hours{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.rh-appt .rh-appt-hours li{font-family:var(--d);font-size:19px;color:var(--tx)}
.rh-appt-phone{font-family:var(--d);font-size:24px;color:var(--rust);font-weight:600;display:inline-block}

/* ---------- teachers ---------- */
.rh-disc-teachers{background:var(--paper);border-top:1px solid var(--rule);padding:66px 32px 74px}
@media(max-width:899px){.rh-disc-teachers{padding:50px 22px 56px}}
.rh-disc-teachers__in{max-width:1136px;margin:0 auto}
.rh-disc-teachers h2{font-size:clamp(24px,3vw,30px);margin:0 0 8px}
.rh-disc-teachers__intro{color:var(--tx-2);margin:0 0 30px;font-size:16.5px;max-width:58ch}
.rh-disc-teacher-list{list-style:none;margin:0;padding:0;display:grid;gap:22px 34px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rh-disc-teacher{display:flex;align-items:center;gap:14px;padding:16px 0;
  border-top:1px solid var(--rule)}
.rh-disc-teacher picture{flex:none;display:block;line-height:0}
.rh-disc-teacher img{width:76px;height:95px;object-fit:cover;flex:none;display:block}
.rh-disc-teacher__name{display:block;font-family:var(--d);font-size:18px;font-weight:600;color:var(--tx);
  line-height:1.22;letter-spacing:-.01em}

/* ---------- gallery band, inside the discipline pages ----------
   The comp packs this as a contact sheet: every piece at its own proportions,
   no even cells, nothing cropped and nothing framed. Scoped to the discipline
   pages so the all-photos gallery page keeps whatever treatment it chooses. */
.rh-discipline-page .rh-discipline-mixed-gallery-section{padding:70px 0 66px;background:var(--surface);
  border-top:1px solid var(--rule)}
.rh-discipline-page .rh-discipline-mixed-gallery-section__intro{margin-bottom:30px}
.rh-discipline-page .rh-discipline-mixed-gallery-section__consent{color:var(--tx-3);font-size:13.5px;
  margin-top:12px}

.rh-discipline-page .rh-discipline-mixed-gallery{display:block;column-count:4;column-gap:14px;
  gap:normal;grid-template-columns:none}
@media(max-width:980px){.rh-discipline-page .rh-discipline-mixed-gallery{column-count:3}}
@media(max-width:620px){.rh-discipline-page .rh-discipline-mixed-gallery{column-count:2;column-gap:10px}}

.rh-discipline-page .rh-discipline-mixed-gallery__item{display:block;width:100%;inline-size:100%;
  block-size:auto;height:auto;margin:0 0 14px;padding:0;border:0;background:transparent;
  overflow:visible;break-inside:avoid}
.rh-discipline-page .rh-discipline-mixed-gallery__item picture{display:block;inline-size:100%;
  block-size:auto;padding:0;background:none}
.rh-discipline-page .rh-discipline-mixed-gallery__item img{display:block;width:100%;inline-size:100%;
  height:auto;block-size:auto;max-inline-size:100%;max-block-size:none;margin:0}

/* ---------- the Folktales mark, when the file exists ---------- */
.rh-folktales-mark{margin:0 0 18px}
.rh-folktales-mark img{width:auto;max-width:130px;height:auto;display:block}

/* ---------- retire the old page furniture ---------- */
.rh-discipline-page .wave{display:none}

/* Lead, 9 Sep: one hero composition for the whole site. Text and painting sit
   together as one block that starts at the page container's left edge; the
   painting shows whole at the shared hero height; the ink runs full width
   behind both on any screen. */
@media(min-width:900px){
  .rh-disc-hero{min-height:clamp(480px,36vw,540px);grid-template-columns:minmax(0,640px) auto;justify-content:start;align-items:center;
    padding-inline-start:max(32px, calc((100vw - 1200px) / 2 + 32px));column-gap:40px}
  .rh-disc-hero__text{padding-inline:0 8px;margin:0}
  .rh-disc-hero__media,.rh-disc-hero__media--art{background:transparent;display:flex;align-items:center;min-height:0;padding:0}
  .rh-disc-hero__media picture{display:block;height:auto}
  .rh-disc-hero__media img,.rh-disc-hero__media--art img{height:clamp(480px,36vw,540px);width:auto;max-width:min(56vw,900px);min-height:0;aspect-ratio:auto;object-fit:contain;object-position:center}
  .rh-discipline-page-drama-dance .rh-disc-hero h1{font-size:clamp(34px,3.6vw,46px)}
  .rh-folktales-mark{margin-bottom:14px}
}