/* Home page: the poster (art + tagline + door stamps) and the section bands.
   All styling lives here — the CSP is `style-src 'self'`.

   The page is a screenprint poster. Five flat inks, each meaning one thing:

     marigold    Today stamp; the "Worth knowing this week" wash
     bluebonnet  This weekend stamp; the "Something to do" edge; the
                 "Free & cheap today" wash; the suggest band
     live oak    Weekday daytime stamp; the "Something to learn" wash
     clay        the "Somewhere to go" edge (clay already means "book ahead"
                 in the fact row — places are the record type that needs
                 booking, so section and fact agree)

   The stamps are the three "when" doors only (2026-09-18): Free and Field
   trips are facets, reached from their bands below.

   Sections alternate: a full-bleed wash, then paper with a thick ink edge,
   so two washes never meet and the paper sections still read as styled:
   picks (wash) · do (edge) · learn (wash) · go (edge) · free (wash) ·
   reads (edge) · suggest (solid). Picks and free are absent when empty;
   when free is missing, reads takes its wash so go and reads never sit as
   two edges.
   The card anatomy (gutter / title / facts) is untouched. No motion on
   load; the only transitions are hover and focus colour. */

/* ---------- the poster ---------- */

/* The hero block is toned to the picture's own paper so the art has no
   visible edge. It is the one place this colour appears. */
.poster {
  --poster-paper: #eae6d9;
  background: var(--poster-paper);
  border-bottom: 1px solid var(--rule);
}
.poster__art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 24rem;
  object-fit: cover;
  /* The figures and the sun sit in the centre third; keep them on a crop. */
  object-position: 50% 62%;
}

.doors-section { padding: 1.9rem 0 2.2rem; }
/* The tagline wraps only between its phrase units (.tag__unit is nowrap):
   two lines on a desktop — the three clauses, then who it is for — and one
   unit per line on a phone. `balance` is off here: it would trade the
   clean two-liner for three shorter lines. */
.doors-section h1 {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  max-width: 60ch;
  text-wrap: pretty;
}
.tag__unit { white-space: nowrap; }

/* The five doors as ink stamps: flat colour, a small radius, no shadow.
   The name is display type; the count sits under it in the same ink as
   the type, slightly quieter. */
.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.door {
  display: grid;
  gap: .15rem;
  align-content: end;
  min-height: 5.6rem;
  padding: .9rem 1rem 1rem;
  border-radius: 4px;
  background: var(--anchor);
  color: var(--paper);
  text-decoration: none;
}
.door__name {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  line-height: 1.12;
  color: inherit;
}
.door__count {
  font-family: var(--text);
  font-size: .92rem;
  opacity: .88;
  font-variant-numeric: tabular-nums;
}
.door--today    { background: var(--marigold); color: var(--ink); }
.door--weekend  { background: var(--anchor-deep); }
.door--weekdays { background: var(--live-oak); }

a.door:hover,
a.door:focus-visible { color: var(--paper); outline-offset: 3px; }
a.door:hover .door__name,
a.door:focus-visible .door__name { text-decoration: underline; text-underline-offset: .12em; }
a.door--today:hover,
a.door--today:focus-visible { color: var(--ink); }

/* A door with nothing to show: paper with a rule border, no link, the
   quiet tone. It keeps its slot so the row never reflows. */
.door--empty,
.door--empty.door--today,
.door--empty.door--weekend,
.door--empty.door--weekdays {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  cursor: default;
}

/* Under 40rem the three stamps go 2 + 1, the odd one full width, rather
   than three narrow tiles that wrap "Weekday daytime" inside. The art
   crops to roughly 2:1 so the figures survive. */
@media (max-width: 40rem) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .door { min-height: 4.6rem; padding: .7rem .8rem .8rem; }
  .door:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .poster__art { aspect-ratio: 2 / 1; }
}

/* ---------- the bands ---------- */

/* A band is full-bleed; the .wrap inside keeps the measure. Two kinds:
   a wash (solid tint edge to edge) and an edge (paper, with a thick ink
   rule down the left of the content). */
.band--picks { background: var(--wash-marigold); }
.band--learn { background: var(--wash-oak); }
.band--free  { background: var(--wash-bluebonnet); }
/* No free band today: reads follows go directly and takes the wash. */
.band--go + .band--reads { background: var(--wash-bluebonnet); }
.band--go + .band--reads .section { border-left: 0; padding-left: 0; }

.band--do .section,
.band--go .section,
.band--reads .section {
  border-left: 8px solid var(--anchor);
  padding-left: 1.4rem;
}
.band--go .section    { border-left-color: var(--poster-clay); }
.band--reads .section { border-left-color: var(--ink); }

/* Headings take the band's ink so the colour is legible as "which section
   am I in" even for someone who does not see the background. */
.band--picks h2 { color: #7a5108; }
.band--do h2    { color: var(--anchor); }
.band--learn h2 { color: #2e5d3e; }
.band--go h2    { color: var(--poster-clay); }
.band--free h2  { color: var(--anchor); }
.band--learn .card__gutter { color: #2e5d3e; }
.band--go .card__gutter    { color: var(--poster-clay); }
.band--picks .pick { border-bottom-color: #e0c98f; }
.band--picks .pick--lead { border-bottom-color: #7a5108; }
.band--learn .card { border-bottom-color: #bfd3c0; }
.band--free .card  { border-bottom-color: #c4cbe2; }

/* The one call to action on the page is a solid bluebonnet band; the
   button inverts to paper so it still reads as the thing to press. */
.band--submit {
  background: var(--anchor);
  color: var(--paper);
  margin-top: 1rem;
}
.band--submit h2 { color: var(--paper); }
.band--submit a { color: var(--paper); }
.band--submit .btn {
  background: var(--paper);
  color: var(--anchor-deep);
}
.band--submit .btn:hover { background: #fff; color: var(--anchor-deep); }
.band--submit .btn:focus-visible { outline-color: var(--paper); }
.band--submit + .site-footer { margin-top: 0; }

@media (max-width: 34rem) {
  .band--do .section,
  .band--go .section,
  .band--reads .section { border-left-width: 6px; padding-left: 1rem; }
}

/* --- Something to do: Today / This weekend, two columns ------------ */

.home-do {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 1.4rem;
}
.home-do__col h3 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--anchor);
}
.home-do__col .back { margin-top: 1.1rem; }
/* A weekend day with nothing beyond today: Today alone, full width. */
.home-do--single { grid-template-columns: 1fr; }

@media (max-width: 40rem) {
  .home-do { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* --- Worth knowing this week: the editor's picks -------------------
   Absent from the page entirely when there is no approved, in-window pick.
   The lead pick (rank 1) spans the full width; the rest sit in a two-column
   grid. */

.home-picks {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem 2.5rem;
}
.pick { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.pick--lead { grid-column: 1 / -1; border-bottom: 2px solid var(--anchor); }
.pick--lead .pick__headline { font-size: 1.35rem; }
.pick__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.pick__headline {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--anchor);
}
.pick__link:hover .pick__headline,
.pick__link:focus-visible .pick__headline { color: var(--anchor-deep); }
.pick__why {
  display: block;
  margin-top: .2rem;
  color: var(--ink-soft);
  font-size: .95rem;
}

@media (max-width: 40rem) {
  .home-picks { grid-template-columns: 1fr; }
}

/* --- Worth knowing, 2+ picks: a carousel -----------------------------
   A scroll-snap row that swipes without JS; carousel.js adds the buttons
   and the counter and hides them when every slide fits. Slides are paper
   panels under a rule (thick for the lead), no shadow: the band's own rule
   language. The left column is the share card's — a tear-off date for an
   event, the kind of thing otherwise. */

.picks-carousel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
}
/* The heading keeps its line; on a phone the controls drop beneath it
   rather than squeezing it onto three. */
.picks-carousel__head h2 { flex: 1 1 16rem; margin-bottom: 0; }
.picks-carousel__controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
}
.picks-carousel__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--anchor);
  background: var(--surface);
  color: var(--anchor);
  font: 1.5rem/1 var(--display);
  padding: 0 0 .15rem;
  cursor: pointer;
}
.picks-carousel__btn:hover { background: var(--anchor); color: var(--surface); }
.picks-carousel__btn:focus-visible { outline: 3px solid var(--anchor-deep); outline-offset: 2px; }
.picks-carousel__btn:disabled {
  border-color: #e0c98f;
  color: #c2a25c;
  background: transparent;
  cursor: default;
}
.picks-carousel__play {
  margin-left: .3rem;
  padding: .35rem .7rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: #7a5108;
  font: 600 .9rem/1 var(--text);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.picks-carousel__play:hover { color: var(--anchor-deep); }
.picks-carousel__play:focus-visible { outline: 3px solid var(--anchor-deep); outline-offset: 2px; }
.picks-carousel__count {
  min-width: 3.6rem;
  text-align: center;
  color: #7a5108;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.picks-carousel__track {
  position: relative;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0 0 .9rem;
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #e0c98f transparent;
}
.picks-carousel__track:focus-visible { outline: 3px solid var(--anchor); outline-offset: 4px; }

/* Two across on a wide screen with the third peeking in; one and a peek on
   a phone. The peek is the cue that the row moves. */
.pick-slide {
  flex: 0 0 calc((100% - 2.2rem) / 2.12);
  scroll-snap-align: start;
  background: var(--surface);
  border-top: 2px solid #e0c98f;
  border-radius: 0 0 var(--radius) var(--radius);
}
.pick-slide--lead { border-top: 5px solid #7a5108; }

.pick-slide__link {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 1rem;
  height: 100%;
  padding: 1.05rem 1.2rem 1.2rem 1rem;
  color: inherit;
  text-decoration: none;
}
.pick-slide__link:focus-visible { outline: 3px solid var(--anchor); outline-offset: -3px; }

.pick-slide__when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #7a5108;
  border-right: 1px solid #e0c98f;
  padding-right: .8rem;
}
.pick-slide__dow { font-weight: 700; font-size: .95rem; }
.pick-slide__day {
  font-family: var(--display);
  font-size: 2.7rem;
  line-height: .95;
  margin: .1rem 0 .15rem;
}
.pick-slide__month { font-size: .95rem; }
.pick-slide__time { margin-top: .45rem; font-size: .85rem; color: var(--ink-soft); }
.pick-slide__kind {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.2;
  margin-top: .15rem;
}

.pick-slide__body { display: flex; flex-direction: column; gap: .3rem; }
.pick-slide__headline {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--anchor);
}
.pick-slide--lead .pick-slide__headline { font-size: 1.35rem; }
.pick-slide__link:hover .pick-slide__headline { color: var(--anchor-deep); text-decoration: underline; text-underline-offset: .18em; }
.pick-slide__why { color: var(--ink); font-size: .98rem; line-height: 1.45; }
.pick-slide__where { color: var(--ink-soft); font-size: .9rem; margin-top: auto; padding-top: .35rem; }

@media (max-width: 40rem) {
  .pick-slide { flex-basis: 86%; }
  .pick-slide__link { grid-template-columns: 4.7rem minmax(0, 1fr); gap: .8rem; padding-right: 1rem; }
  .pick-slide__kind { font-size: .95rem; }
  .pick-slide__day { font-size: 2.3rem; }
  .picks-carousel__btn { width: 2.25rem; height: 2.25rem; }
  .picks-carousel__count { min-width: 3rem; }
}
/* The one-time "there's more" nudge (carousel.js adds .is-nudging when
   the carousel first comes into view). A transform, not a scroll: a partial
   scroll would fight scroll-snap: mandatory. */
@keyframes picks-nudge {
  0%   { transform: translateX(0); }
  38%  { transform: translateX(-72px); }
  70%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.picks-carousel__track.is-nudging > .pick-slide {
  animation: picks-nudge 900ms cubic-bezier(.45, 0, .25, 1) 1;
}
@media (prefers-reduced-motion: reduce) {
  .picks-carousel__track { scroll-behavior: auto; }
  .picks-carousel__track.is-nudging > .pick-slide { animation: none; }
}

/* --- Longer reads: one link + blurb per line, no cards ------------- */

.home-reads {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.home-reads li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}
.home-reads li:first-child { padding-top: 0; }
.home-reads a {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--anchor);
  text-decoration: none;
}
.home-reads a:hover,
.home-reads a:focus-visible { color: var(--anchor-deep); }
.home-reads__blurb {
  display: block;
  margin-top: .15rem;
  color: var(--ink-soft);
  font-size: .95rem;
}