/* ==========================================================================
   Open House Week — /open-house, /open-house/breakfast, /creators, /partners.

   Page-scoped, the way start-again.css is: these four pages go away or change
   shape after 18 October, and nothing here should outlive them inside the main
   stylesheet. Type, buttons, surfaces, fields and the hero all come from
   cassells.css; this file only adds what those pages have and no other page does.

   Same rules as the system it sits in: no radius, no shadow, rules not boxes.
   ========================================================================== */

/* `hidden` loses to any display rule below, so it is restated once for the lot. */
.oh [hidden] { display: none !important; }

.oh-head { display: flex; flex-direction: column; gap: 1.25rem; max-width: 46rem; }

/* ── The week, day by day ─────────────────────────────────────────────────── */

.oh-week { list-style: none; margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; border-top: 1px solid var(--cf-rule-light); }

.oh-day {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) minmax(11rem, auto);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.5rem, 2.4vw, 2.125rem) 0;
  border-bottom: 1px solid var(--cf-rule-light);
}

.oh-day__date { font-family: var(--cf-display); font-weight: 900; text-transform: uppercase; }
.oh-day__dow { display: block; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 0.9; }
.oh-day__num { display: block; margin-top: 0.625rem; font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--cf-body-light); }

.oh-day__title {
  font-family: var(--cf-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1; margin: 0;
}
.oh-day__meta {
  margin: 0.75rem 0 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cf-accent-text);
}
.oh-day__copy { margin: 0.75rem 0 0; max-width: 40rem; }
.oh-day__also {
  margin: 0.875rem 0 0; padding-left: 0.875rem; max-width: 40rem;
  border-left: 2px solid var(--cf-rule-oat);
  font-size: 0.9375rem; line-height: 1.5; color: var(--cf-body-light);
}

.oh-day__act { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; text-align: right; }
.oh-day__note { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-body-light); }
.oh-day__link { font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 0.2em; }
.oh-day__link:hover { color: var(--cf-accent-text); }

/* Today is marked with the one accent the system has; days gone by step back but stay
   readable, because "what did I miss" is a fair question during the week. */
.oh-day.is-today { box-shadow: inset 0.25rem 0 0 var(--cf-accent); padding-left: 1.5rem; background: var(--cf-oat); }
.oh-day.is-past .oh-day__date,
.oh-day.is-past .oh-day__title { color: var(--cf-dim); }
.oh-day.is-past .oh-day__meta { color: var(--cf-dim); }

/* ── What is new: three smaller rooms under the split ─────────────────────── */

.oh-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cf-rule-light); border: 1px solid var(--cf-rule-light); }
.oh-room { background: var(--cf-paper); padding: clamp(1.5rem, 2.6vw, 2.5rem); display: flex; flex-direction: column; gap: 0.875rem; }
.oh-room__name { font-family: var(--cf-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.125rem, 1.6vw, 1.375rem); letter-spacing: 0.01em; margin: 0; }

/* ── The founders' words ──────────────────────────────────────────────────── */

.oh-quote { max-width: 58rem; }
.oh-quote__by { margin: 2rem 0 0; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-dim); }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.oh-legend {
  display: block; float: none; padding: 0; margin: 0 0 0.5rem;
  font-family: var(--cf-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -0.02em; color: var(--cf-ink);
}
.oh-hint { margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--cf-body-light); }
.oh-form .cf-field { margin-bottom: clamp(2rem, 3.4vw, 2.75rem); }
.oh-form .cf-field + .cf-field { padding-top: clamp(2rem, 3.4vw, 2.75rem); border-top: 1px solid var(--cf-rule-light); }
.oh-form .cf-err { margin-bottom: 0.25rem; }

.oh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.oh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oh-grid + .oh-grid, .oh-grid + .oh-block, .oh-block + .oh-block, .oh-block + .oh-grid { margin-top: 1.5rem; }

/* Channel and child rows: a label column, then the things to fill in. */
.oh-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.oh-row__label { font-size: 0.9375rem; color: var(--cf-ink); }
.oh-row--child { grid-template-columns: minmax(0, 1.3fr) 5.5rem minmax(0, 1.5fr); }
.oh-row--child.is-short { grid-template-columns: minmax(0, 1.3fr) 5.5rem; }

.oh-add {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.9375rem; color: var(--cf-ink);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.oh-add:hover { color: var(--cf-accent-text); }

.oh-check { display: flex; gap: 0.875rem; align-items: flex-start; margin: 0 0 0.875rem; font-size: 1rem; line-height: 1.5; color: var(--cf-ink); cursor: pointer; }
.oh-check input { width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; flex-shrink: 0; accent-color: var(--cf-ink); }

.oh-small { font-size: 0.875rem; line-height: 1.55; color: var(--cf-body-light); margin: 0 0 1.5rem; }
.oh-small a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Sent, closed and failed. One block, three uses; the form body is swapped for it. */
.oh-state { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--cf-oat); border-left: 0.1875rem solid var(--cf-accent); color: var(--cf-ink); }
.oh-state__title { font-family: var(--cf-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.02em; line-height: 1; margin: 0.875rem 0 1rem; }
.oh-state__title:focus { outline: none; }
.oh-state .cf-body + .cf-body { margin-top: 0.875rem; }
.oh-fail { margin: 0 0 1.5rem; }

.oh-aside__list { list-style: none; margin: 0; padding: 0; }
.oh-aside__list li { padding: 0.75rem 0; border-top: 1px solid var(--cf-rule-oat); font-size: 0.9375rem; line-height: 1.5; color: var(--cf-body-light); }
.oh-aside__list li:first-child { border-top: 0; padding-top: 0; }

/* ── /creators: the sport or parents switch, and the run of the morning ───── */

.oh-switch { display: inline-flex; border: 1px solid var(--cf-ink); }
.oh-switch__btn {
  padding: 0.875rem 1.375rem;
  font-family: var(--cf-display); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cf-ink); transition: background 0.14s ease, color 0.14s ease;
}
.oh-switch__btn + .oh-switch__btn { border-left: 1px solid var(--cf-ink); }
.oh-switch__btn:hover { background: var(--cf-oat); color: var(--cf-ink); }
.oh-switch__btn[aria-current="true"] { background: var(--cf-ink); color: var(--cf-on-dark); }
.oh-switch__btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }

.oh-run { list-style: none; margin: 0; padding: 0; }
.oh-run li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.5rem;
  padding: 1.125rem 0; border-top: 1px solid var(--cf-rule-dark);
  font-size: 1.0625rem; line-height: 1.5; color: var(--cf-bright);
}
.oh-run li:last-child { border-bottom: 1px solid var(--cf-rule-dark); }
.oh-run__time { font-family: var(--cf-display); font-weight: 900; letter-spacing: 0.04em; color: var(--cf-accent); }

.oh-shot { width: 100%; overflow: hidden; }
.oh-shot img { width: 100%; height: clamp(15rem, 34vw, 30rem); object-fit: cover; display: block; }

/* ── /partners: three tiers ───────────────────────────────────────────────── */

.oh-tiers { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1px; background: var(--cf-rule-light); border: 1px solid var(--cf-rule-light); margin-top: clamp(2rem, 4vw, 3.5rem); }
.oh-tier { background: var(--cf-paper); padding: clamp(1.5rem, 2.6vw, 2.5rem); display: flex; flex-direction: column; gap: 1.5rem; }
.oh-tier--lead { background: var(--cf-ink); color: var(--cf-on-dark); }
.oh-tier__name { font-family: var(--cf-display); font-weight: 900; text-transform: uppercase; font-size: 1.125rem; letter-spacing: 0.02em; margin: 0; }
.oh-tier__places { margin: 0.5rem 0 0; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-body-light); }
.oh-tier--lead .oh-tier__places { color: var(--cf-accent); }
.oh-tier__price { font-family: var(--cf-display); font-weight: 900; font-size: clamp(2.25rem, 4vw, 3.5rem); letter-spacing: -0.035em; line-height: 0.9; margin: 0; }
.oh-tier .cf-ticks li { font-size: 0.9375rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.oh-tier .cf-ticks li::before { top: 1.375rem; }
.oh-tier--lead .cf-ticks li { border-color: var(--cf-rule-dark); color: var(--cf-bright); }

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .oh-tiers { grid-template-columns: minmax(0, 1fr); }
  .oh-rooms { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .oh-day { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .oh-day__act { grid-column: 2; align-items: flex-start; text-align: left; }
  .oh-day.is-today { padding-left: 1rem; }
  .oh-grid, .oh-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .oh-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .oh-row__label { grid-column: 1 / -1; margin-top: 0.5rem; }
  .oh-row--child, .oh-row--child.is-short { grid-template-columns: minmax(0, 1fr) 5rem; }
  .oh-row--child > :nth-child(3) { grid-column: 1 / -1; }
  .oh-run li { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1rem; }
  .oh-switch { display: flex; }
  .oh-switch__btn { flex: 1; text-align: center; }
}