/* ==========================================================================
   v3 — MODULES
   ========================================================================== */

/* --------------------------------------------------------------------------
   PHOTOGRAPH FRAMES
   Every image on this site is one of the museum's own. There is no generated
   artwork and no stock: if a thing has no photograph on horrycountymuseum.org
   it is shown as text, which is what v3's content rule requires.
   -------------------------------------------------------------------------- */
.shot { position: relative; overflow: hidden; background: var(--compare); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.r16 { aspect-ratio: 16 / 9; }
.r43 { aspect-ratio: 4 / 3; }
.r11 { aspect-ratio: 1 / 1; }
.r32 { aspect-ratio: 3 / 2; }

figure { margin: 0; }
figcaption { font-size: .8rem; color: var(--muted); padding-top: .5rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   NEXT UP — the calendar's next few entries, on the home page.
   -------------------------------------------------------------------------- */
.nextup { display: grid; gap: 0; }
.nextup-row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1.1rem; align-items: center;
  padding: 1rem .25rem; border-top: 1px solid var(--hair-soft);
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit; text-align: left; width: 100%; cursor: pointer; color: inherit;
}
.nextup-row:first-child { border-top: 0; }
.nextup-row:hover { background: var(--wash); }
.nextup-date {
  display: grid; place-items: center; gap: 0;
  border: 1px solid var(--hair); border-radius: .35rem;
  padding: .35rem 0; background: var(--bg-color);
}
.nextup-date .m {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text);
}
.nextup-date .d { font-size: 1.35rem; font-weight: 700; line-height: 1.05; color: var(--color-9); }
.nextup-date .w { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nextup-body b { display: block; font-weight: 600; color: var(--color-9); line-height: 1.35; }
/* Classed, not `.nextup-body span`: that also matched the pill nested inside
   it and won on specificity, painting the pill's label --muted on its own
   color. The probe caught it at 2.44:1. */
.nextup-body .meta { font-size: .82rem; color: var(--muted); }
.nextup-row .icon { color: var(--muted); }
.nextup-row.closed .nextup-body b { color: var(--muted); }

.tagline-pill {
  display: inline-block; margin-right: .5rem; padding: .05rem .5rem;
  border-radius: var(--circle); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--c, var(--color-3)); color: var(--on-yellow);
}

/* --------------------------------------------------------------------------
   CALENDAR — month grid
   -------------------------------------------------------------------------- */
.cal-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between; margin-bottom: 1rem;
}
.cal-title { margin: 0; font-weight: 600; font-size: 1.1rem; color: var(--color-9); }
.cal-nav { display: flex; gap: .4rem; }
.cal-nav a {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--hair-ui); border-radius: var(--circle);
  background: var(--bg-color); color: var(--contrast); cursor: pointer;
}
.cal-nav a:hover { background: var(--wash); border-color: var(--color-6); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--hair); border-radius: .35rem; overflow: hidden;
  margin-top: 1rem;
}
.cal-dow {
  padding: .5rem .35rem; text-align: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--compare); color: var(--muted);
  border-bottom: 1px solid var(--hair);
}
.cal-cell {
  min-height: 5.5rem; padding: .35rem;
  border-top: 1px solid var(--hair-soft); border-left: 1px solid var(--hair-soft);
  background: var(--bg-color);
}
.cal-cell:nth-child(7n + 1) { border-left: 0; }
.cal-cell.pad { background: var(--compare); }
.cal-cell .num { font-size: .78rem; color: var(--muted); font-weight: 600; }
.cal-cell.today .num {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: var(--circle); background: var(--color-8); color: var(--lightest);
}
.cal-ev {
  display: block; width: 100%; margin-top: .25rem; padding: .28rem .4rem;
  border: 0; border-left: 3px solid var(--c, var(--color-5));
  background: var(--wash); border-radius: .18rem;
  font: inherit; font-size: .72rem; line-height: 1.3; text-align: left;
  color: var(--color-9); cursor: pointer;
}
.cal-ev:hover { background: var(--color-1); }
.cal-ev.closed { background: var(--compare); color: var(--muted); }
.cal-ev b { display: block; font-weight: 600; }

/* --------------------------------------------------------------------------
   EVENT DETAIL
   -------------------------------------------------------------------------- */
.event-meta {
  display: grid; gap: .75rem; align-content: start;
  background: var(--compare); border-radius: .4rem; padding: 1.25rem;
}
.event-meta div { display: flex; gap: .6rem; }
.event-meta .icon { color: var(--accent-text); margin-top: .2rem; }
/* The live event pages label none of these fields, so the labels are empty
   strings - and an empty <b> must not leave a gap where a label was. */
.event-meta b:empty { display: none; }
.event-meta b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.event-meta span { color: var(--contrast); font-size: .92rem; }
.series-note {
  margin-top: 1.5rem; padding: 1rem 1.15rem;
  background: var(--wash); border-left: 4px solid var(--color-6); border-radius: .2rem;
  font-size: .875rem; color: var(--contrast);
}
.series-note p { margin: 0; }

/* --------------------------------------------------------------------------
   GALLERY CARDS — the eight exhibits
   -------------------------------------------------------------------------- */
.ex-card {
  display: flex; flex-direction: column;
  background: var(--bg-color); border: 1px solid var(--hair-soft);
  border-radius: .4rem; overflow: hidden;
}
.ex-card .shot { border-bottom: 1px solid var(--hair-soft); }
.ex-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ex-card h3 { font-size: 1rem; color: var(--color-9); }
.ex-card p { margin: 0; font-size: .875rem; color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   THE EIGHT GALLERY CARDS - EDITORIAL ROWS
   One wide row per exhibit, the photograph changing sides down the page.
   The farm's six interpretive panels run the same way and are styled to
   match; the two blocks are meant to stay in step.
   -------------------------------------------------------------------------- */
.ex-rows { display: grid; gap: 2.25rem; }
.ex-row {
  display: grid; gap: 1.75rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.ex-row:nth-child(even) .ex-row-fig { order: 2; }
.ex-row-fig { border-radius: .4rem; }
.ex-row-body h3 { margin: 0 0 .55rem; font-size: 1.3rem; color: var(--color-9); }
.ex-row-body p { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.6; }

/* On the home page the galleries run as a wide strip of three. */
.ex-strip { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

/* --------------------------------------------------------------------------
   THE SIX INTERPRETIVE PANELS
   The artwork is dense illustration with fine print, so a panel is never
   cropped: it gets its own full-width figure and its own text alternative.
   Styled to match the exhibit editorial rows above - same row gap, same
   column gap, same vertical centering, same heading scale - with the two
   departures the artwork forces: the figure keeps its natural height
   rather than a cropped ratio, and it keeps the wider of the two columns
   so the numbered stages and labels stay legible. Those two are the
   reason .panel is not simply .ex-row.
   -------------------------------------------------------------------------- */
.panels { display: grid; gap: 2.25rem; }
.panel {
  display: grid; gap: 1.75rem; align-items: center;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.panel:nth-child(even) .panel-fig { order: 2; }
.panel-fig img { width: 100%; height: auto; border: 1px solid var(--hair); border-radius: .4rem; }
.panel-body h3 { margin: 0 0 .35rem; font-size: 1.3rem; color: var(--color-9); }
.panel-body .pt { margin: 0 0 .7rem; font-size: .78rem; color: var(--muted); }
.panel-body p { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   PHOTOGRAPH GALLERY — farm and gala
   -------------------------------------------------------------------------- */
.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }
.tile {
  padding: 0; border: 1px solid var(--hair-soft); border-radius: .3rem;
  overflow: hidden; background: var(--bg-color); cursor: zoom-in;
}
.tile:hover { border-color: var(--color-6); }
.tile .shot { aspect-ratio: 4 / 3; }

/* The lightbox. No <dialog>: it is not in every enterprise-pinned browser. */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: color-mix(in srgb, var(--blue-9) 92%, transparent);
  padding: clamp(1rem, 4vw, 3rem);
  /* Nothing scrolls in here: the figure is sized to fit instead. */
  overflow: hidden; overscroll-behavior: contain;
}
.lightbox.open { display: grid; place-items: center; }

/* A column that cannot outgrow the padded box. The caption keeps its height
   and the photograph takes what is left, so a tall image is scaled down to
   fit rather than running off the top of the screen. min-height: 0 is what
   lets a flex child shrink below its content size at all. */
.lightbox figure {
  margin: 0; max-width: 62rem; max-height: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
.lightbox img {
  flex: 1 1 auto; min-height: 0;
  width: 100%; height: 100%; object-fit: contain;
  border-radius: .3rem;
}
/* A video in the lightbox: as wide as the photographs, 16:9, and never taller
   than the screen less room for the caption. */
.lb-video {
  width: min(62rem, 92vw, calc((100vh - 9rem) * 16 / 9));
  aspect-ratio: 16 / 9; background: #000; border-radius: .3rem; overflow: hidden;
}
/* The hidden attribute alone loses to the display set on the nav buttons and image. */
.lightbox [hidden] { display: none; }
.lb-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox figcaption {
  flex: none;
  color: var(--gal-ink-2); padding-top: .75rem; font-size: .875rem;
}
.lightbox figcaption { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
/* The page behind does not scroll while the lightbox is up. --sbw is the
   scrollbar width, measured when it opens and paid back as padding, so the
   layout underneath does not jump sideways as the bar disappears. */
html.lb-open { overflow: hidden; }
html.lb-open body { padding-right: var(--sbw, 0px); }

/* The position in the set, so the arrows are not the only thing saying there
   is more than one. */
.lb-count { color: var(--gal-ink-3); flex: none; font-variant-numeric: tabular-nums; }

.lightbox-close, .lightbox-nav {
  position: fixed;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: var(--circle); border: 1px solid var(--gal-hair);
  background: color-mix(in srgb, var(--blue-9) 70%, transparent);
  color: var(--gal-ink); cursor: pointer;
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--gal-accent); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible {
  outline: 2px solid var(--gal-accent); outline-offset: 2px;
}
/* Clear of the arrows on a narrow screen, where 62rem of figure is the width
   of the viewport and the buttons would sit on the photograph. */
@media (max-width: 48rem) {
  /* The arrows move under the figure rather than onto the photograph, so the
     overlay owes them room: 1rem clear + their 2.6rem + 1rem again. Without
     the extra padding a tall image's caption runs behind them. */
  .lightbox { padding-bottom: 4.6rem; }
  .lightbox-nav { top: auto; bottom: 1rem; transform: none; }
}

/* --------------------------------------------------------------------------
   VIDEO TILES — /media/
   -------------------------------------------------------------------------- */
.vid-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.vid {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair-soft); border-radius: .4rem; overflow: hidden;
  background: var(--bg-color); text-decoration: none;
}
.vid:hover { border-color: var(--color-6); }
/* The card's face: a link to the video, which site.js swaps for the player. */
.vid-play { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
/* The card clips what overflows it, which cut off the link's own focus ring
   and left a keyboard user with no sign of where they were. The ring goes on
   the card, outside it, where nothing clips it; a browser without :has() gets
   the ring drawn inside the link instead. */
.vid-play:focus-visible { outline: 3px solid var(--color-9); outline-offset: -3px; }
@supports selector(:has(*)) {
  .vid-play:focus-visible { outline: 0; }
  .vid:has(.vid-play:focus-visible) { outline: 3px solid var(--color-9); outline-offset: 3px; border-color: var(--color-9); }
}
.vid .shot { display: block; aspect-ratio: 16 / 9; }
.vid .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--blue-9) 22%, transparent);
}
.vid .play span {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem;
  border-radius: var(--circle); background: var(--yellow-4); color: var(--on-yellow);
}
/* "Show more" under a playlist's first row of videos. */
.more { margin-top: 1.25rem; }
.more > summary { list-style: none; cursor: pointer; margin-bottom: 1.25rem; }
.more > summary::-webkit-details-marker { display: none; }
.more .when-open, .more[open] .when-closed { display: none; }
.more[open] .when-open { display: inline; }
.vid-body { padding: .95rem 1.05rem 1.1rem; display: grid; gap: .3rem; }
.vid-body b { font-weight: 600; color: var(--color-9); line-height: 1.35; font-size: .95rem; }
.vid-body span { font-size: .8rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hair-soft); }
.faq-q {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: 1rem .25rem; border: 0; background: none;
  font: inherit; font-weight: 600; font-size: .98rem; text-align: left;
  color: var(--color-9); cursor: pointer;
}
.faq-q:hover { color: var(--color-7); }
.faq-q .n {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: var(--circle); background: var(--wash);
  font-size: .78rem; color: var(--accent-text);
}
.faq-q .icon { margin-left: auto; color: var(--muted); }
.faq-q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq-a { padding: 0 .25rem 1.15rem 2.8rem; }
.faq-a p { margin: 0; max-width: 74ch; color: var(--contrast); font-size: .93rem; }
.faq-item { border-bottom: 1px solid var(--hair-soft); }

/* --------------------------------------------------------------------------
   LISTS AND TABLES
   -------------------------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .65rem; align-items: baseline; font-size: .95rem; }
.ticks .icon { color: var(--color-6); flex: none; transform: translateY(.15rem); }

.def { display: grid; gap: 1.1rem; }
.def h3 { font-size: 1rem; color: var(--color-9); }
.def p { margin: .2rem 0 0; font-size: .9rem; color: var(--muted); max-width: 74ch; }

/* `p.pull`, not `.pull`: `.def p` is also 0,1,1 and comes first in the sheet,
   so a bare class loses the font-size and color and the quote renders at
   caption size in --muted. The same specificity trap that painted the pill in
   .nextup-body the wrong color - both were caught by looking at the render,
   which is the only thing that catches this one. */
p.pull { font-size: 1.2rem; color: var(--contrast); max-width: 52ch; }


/* --------------------------------------------------------------------------
   ABOUT THE MUSEUM - the home page prose, two columns
   .def carries four other lists (farm, programs, the two accessibility
   blocks), so none of this touches the bare class.
   Every selector here is deliberately one step more specific than the rule
   it has to beat - see the p.pull note above, which is the same trap:
     .def-2 p:not(.pull)  0,2,1  beats  .def p        0,1,1
     .def-2 p.pull        0,2,1  beats  p.pull        0,1,1
     .def-2 h3.rule-h     0,2,1  beats  .def h3       0,1,1
   -------------------------------------------------------------------------- */
/* Columns, not a grid. A two-column grid ties the rows together, so the
   shorter block in a row pays for the taller one: History runs 378px against
   Get Tanked!'s 147px and left 231px of dead space under it, which is most of
   what made this section look unfinished. Flowed columns balance instead -
   the same four blocks come out 525px against 499px. */
.def-2 {
  display: block;
  column-count: 2; column-gap: 2.5rem;
}
.def-2 > div { break-inside: avoid; margin-bottom: 2rem; }
.def-2 > div:last-child { margin-bottom: 0; }

/* The mission statement leads across both columns; the remaining four
   blocks flow into the two beneath it. */
.def-2 > :first-child { column-span: all; }

/* The 2rem was doing the work of a gap in a single column. It has one here. */
.def-2 > div + div .rule-h { margin-top: 0; }

/* .rule-h is the subsection device and these are subsections now, so it
   keeps its size against .def h3's caption size. */
.def-2 h3.rule-h { font-size: 1.5rem; font-weight: 200; color: var(--contrast); }

/* .9rem set the museum's mission and history smaller than ordinary body
   copy. In its own section it reads at the same size as everything else, and
   in the body ink rather than .def p's --muted: this is the page's main prose,
   not caption text. --contrast on white is 12.6:1 against --muted's 5.19:1.
   The four other lists .def carries keep --muted. */
.def-2 p:not(.pull) { font-size: 1rem; line-height: 1.6; color: var(--contrast); }

/* Wider than the 52ch a pull quote gets inside a column, because this one
   spans the full card - but still a measure, not the whole width. */
.def-2 p.pull { max-width: 68ch; }

@media (max-width: 62rem) {
  .def-2 { column-count: 1; }
}

.table-wrap { overflow-x: auto; }
table.staff { border-collapse: collapse; width: 100%; min-width: 34rem; }
table.staff th, table.staff td {
  text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--hair-soft);
  font-size: .9rem;
}
table.staff th {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--compare);
}
table.staff td b { color: var(--color-9); }

/* Cards for the two sites, the shops, the topics. */
.info-card {
  background: var(--bg-color); border: 1px solid var(--hair-soft);
  border-radius: .4rem; padding: 1.35rem 1.4rem; display: grid; gap: .55rem;
  align-content: start;
}
.info-card h3 { font-size: 1rem; color: var(--color-9); }
.info-card p { margin: 0; font-size: .9rem; color: var(--muted); }
.info-card dl { margin: 0; display: grid; gap: .4rem; }
.info-card dt {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.info-card dd { margin: 0 0 .35rem; font-size: .92rem; color: var(--contrast); }
.info-card.on-compare { background: var(--compare); border-color: transparent; }
/* Beside a long prose column, a side card should end where its content ends
   rather than stretch to the row and leave a tall empty panel. */
.split > .info-card { align-self: start; }

/* --------------------------------------------------------------------------
   HOLIDAY CLOSURES
   Four tiles across a block, and a stacked rail inside the Upcoming card,
   where they sit beside what is on rather than in a block of their own. Both
   shapes come off one grid: across the page auto-fit finds four columns and
   the hairline between them is vertical; in the rail there is room for one,
   and the rule below turns that hairline on its side.
   -------------------------------------------------------------------------- */
.closures {
  margin: 0; display: grid; gap: 0 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.closures > div { padding-left: 1.5rem; border-left: 1px solid var(--hair); }
.closures > div:first-child { padding-left: 0; border-left: 0; }
.closures dt {
  font-weight: 600; color: var(--color-9);
  font-variant-numeric: tabular-nums;
}
.closures dd { margin: .1rem 0 0; font-size: .9rem; color: var(--muted); }

/* The closed panel: the inverse of the hero's HOURS OF OPERATION card, in the
   same navy and the same uppercase accent label, because it answers the same
   question from the other side. Solid --gal, not .visit-panel's rgba() - that
   one is translucent only because it sits on the hero photograph, and this
   sits on white. Every color here is a --gal-* token with a measured ratio
   (accent 10.7:1, ink 15.9:1, ink-2 15.0:1), so the panel can be this loud
   without going anywhere near warning red - NOTES records what happened the
   last time closures were painted as something going wrong. */
.closed-panel {
  align-self: start;
  background: var(--gal); color: var(--gal-ink);
  border-radius: .5rem; padding: 1.5rem 1.5rem 1.6rem;
}
.closed-panel h3 {
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gal-accent); margin: 0 0 .8rem;
}
.closed-panel p {
  margin: 0 0 1.15rem; font-size: .855rem;
  line-height: 1.5; color: var(--gal-ink-2);
}

/* In the panel the four stack, so the divider between them turns horizontal.
   .closed-panel .closures > div is 0,2,1 and beats the 0,1,1 rules above. */
.closed-panel .closures { grid-template-columns: 1fr; gap: 0; }
.closed-panel .closures > div {
  /* padding-left too, not just the border: the base rule indents every row
     but the first to clear the vertical hairline it draws across a block. */
  padding: .8rem 0 0; margin-top: .8rem;
  border-left: 0; border-top: 1px solid var(--gal-hair);
}
.closed-panel .closures > div:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.closed-panel .closures dt {
  font-size: 1rem; font-weight: 600; color: var(--gal-ink);
  letter-spacing: 0; text-transform: none;
}
.closed-panel .closures dd { font-size: .855rem; color: var(--gal-ink-2); }

/* A small note under a heading. */
.subnote { font-size: .82rem; color: var(--muted); margin: 0; }

/* Sponsor and link lists. */
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.linklist li { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .9rem; }
.linklist b { color: var(--color-9); font-weight: 600; }
/* WCAG 2.5.8: a 24px target, not the 23px a .9rem line gives. */
.linklist a { display: inline-block; min-height: 1.5rem; line-height: 1.5rem; }

/* Award photographs on /support/. */
.awards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.award .shot { aspect-ratio: 4 / 3; border: 1px solid var(--hair-soft); border-radius: .3rem; }
.award figcaption b { display: block; font-size: .92rem; color: var(--color-9); }
.award figcaption span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .ex-row, .panel { grid-template-columns: 1fr; }
  .ex-row:nth-child(even) .ex-row-fig { order: 0; }
  .panel:nth-child(even) .panel-fig { order: 0; }
}

@media (max-width: 44rem) {
  /* Wrapped, the closures stack - so the hairline moves to the top of each
     row and the first row loses it instead of the first column. */
  .closures { grid-template-columns: 1fr; }
  .closures > div {
    padding: .55rem 0 0; border-left: 0; border-top: 1px solid var(--hair-soft);
  }
  .closures > div:first-child { padding-top: 0; border-top: 0; }
}

@media (max-width: 48rem) {
  .cal-grid { display: block; border: 0; }
  .cal-dow { display: none; }
  .cal-cell {
    min-height: 0; border: 0; border-bottom: 1px solid var(--hair-soft);
    display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem;
    padding: .5rem .25rem;
  }
  .cal-cell.pad { display: none; }
  .cal-cell .num { grid-row: span 2; align-self: start; }
  .cal-ev { margin-top: 0; }
  .nextup-row { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .nextup-row .icon { display: none; }
}