/* ==========================================================================
   Homepage, Autumn 2026 – the current issue
   --------------------------------------------------------------------------
   Autumn 2026 on the forest band, straight under the hero, with a switch to
   the Summer Edition (the August articles). Replaces the August Edition grid.
   The button opens the School Spotlight.
   Same palette, type and card language as the rest of style.css; gutters and
   touch targets in px, as everywhere else on the site.
   ========================================================================== */

/* ---- The current issue ------------------------------------------------- */
.edition-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.edition-button span { font-size: 22px; line-height: .5; }

@media (hover: hover) and (pointer: fine) {
  .edition-card:hover img { transform: scale(1.04); }
  .edition-cover:hover img { transform: scale(1.02); }
}

.edition-card:focus-visible,
.edition-cover:focus-visible,
.edition-button:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}


#featured { scroll-margin-top: 16px; }

.edition-band {
  padding: 46px 0 48px;
  background: var(--forest);
  color: var(--ivory);
}

.edition-intro {
  display: grid;
  grid-template-columns: minmax(300px, 40%) 1fr;
  gap: 48px;
  align-items: start;
}

.edition-kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
  font-family: var(--serif-display);
  font-size: 16px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.edition-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold);
}

.edition-band h2 {
  margin: 0 0 16px;
  font-variant-numeric: lining-nums;
  font-family: var(--serif-display);
  font-size: 68px;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* the line that sells the issue: the ten schools, big, then the invitation in gold */
.edition-lede { margin: 6px 0 34px; }
.edition-lede-main {
  display: block;
  color: var(--ivory);
  font-family: var(--serif-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: .005em;
  font-variant-numeric: lining-nums;
}
.edition-lede-sub {
  display: block;
  margin-top: 16px;
  color: var(--gold-soft);
  font-family: var(--serif-display);
  font-size: 25px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
}
.edition-button {
  padding: 18px 26px 17px;
  gap: 20px;
  background: #dcc89d;               /* lighter gold: 9.2:1 with the forest text (was 6.7:1) */
  border: 1px solid #dcc89d;
  color: var(--forest);
  font-size: 19px;                   /* 30 Sep: was 15px with wide tracking, hard to read */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  transition: background-color .2s ease, border-color .2s ease;
}
.edition-button span { font-size: 26px; }
.edition-button:hover { background: var(--ivory); border-color: var(--ivory); }

.edition-cover { display: block; overflow: hidden; border: 1px solid rgba(196, 170, 118, .5); }

/* the ten schools under the cover: gold names on the forest, each opening its own spread */
.edition-schools { margin-top: 38px; }
.edition-schools-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  color: #cfc6b3;
  font-family: var(--serif-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.edition-schools-label::after { content: ""; flex: 1; height: 1px; background: rgba(196, 170, 118, .45); }
.edition-schools-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--serif-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
}
.edition-schools-list li { white-space: nowrap; }
.edition-schools-list li:not(:last-child)::after {
  content: "\00b7";
  margin: 0 11px;
  color: var(--gold);
}
.edition-schools-list a {
  display: inline-block;             /* a 24px-tall target on a phone, not just the line of text */
  padding: 3px 0;
  line-height: 1.2;
  color: var(--gold-soft);
  border-bottom: 1px solid rgba(196, 170, 118, .35);
  transition: color .2s ease, border-color .2s ease;
}
.edition-schools-list a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }
.edition-schools-list a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.edition-cover img { aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }

/* the switch: two radio buttons drive the labels and the two panels, no JavaScript */
.edition-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.edition-tabs {
  display: flex;
  gap: 30px;
  margin: 38px 0 20px;
  border-bottom: 1px solid rgba(196, 170, 118, .35);
}

.edition-tabs label {
  margin-bottom: -1px;
  font-variant-numeric: lining-nums;
  padding: 0 0 10px;
  border-bottom: 2px solid transparent;
  color: #cfc6b3;
  font-family: var(--serif-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}
.edition-tabs label:hover { color: var(--ivory); }

#edition-autumn:checked ~ .edition-tabs label[for="edition-autumn"],
#edition-august:checked ~ .edition-tabs label[for="edition-august"] {
  color: var(--gold-soft);
  border-bottom-color: var(--gold-soft);
}
#edition-autumn:focus-visible ~ .edition-tabs label[for="edition-autumn"],
#edition-august:focus-visible ~ .edition-tabs label[for="edition-august"] {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}
/* Both panels share one grid cell, so the block is as tall as the taller set and
   every card in both sets has the same size: switching tabs never moves anything.
   The panel not chosen is hidden with visibility, which also takes it out of the
   tab order and away from screen readers. */
.edition-panels { display: grid; }
.edition-panel { grid-area: 1 / 1; display: flex; flex-direction: column; }
.edition-panel .edition-grid { flex: 1; grid-auto-rows: 1fr; }
#edition-autumn:checked ~ .edition-panels .edition-panel-august,
#edition-august:checked ~ .edition-panels .edition-panel-autumn { visibility: hidden; }

.edition-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.edition-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid rgba(196, 170, 118, .5);
  color: var(--forest);
}

.edition-card-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.edition-card-image img { height: 100%; object-fit: cover; transition: transform .4s ease; }

.edition-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 14px;
}

.edition-card-label {
  margin: 0 0 7px;
  font-variant-numeric: lining-nums;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(132, 104, 56, .3);
  color: var(--gold-label);
  font-family: var(--serif-display);
  font-size: max(13px, 12px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.edition-card-title {
  font-family: var(--serif-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.12;
  overflow-wrap: break-word;
}

/* ---- laptops below the full canvas: three cards to a row ---------------- */
@media (max-width: 1199px) {
  .edition-lede-main { font-size: 32px; }
  .edition-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .edition-card-title { font-size: 20px; }
}

/* ---- tablet portrait ------------------------------------------------------ */
@media (max-width: 900px) {
  .edition-intro { grid-template-columns: 1fr 1fr; gap: 32px; }
  .edition-band h2 { font-size: 56px; }
  .edition-lede-main { font-size: 28px; }
  .edition-lede-sub { font-size: 21px; }
}

/* ---- phone ---------------------------------------------------------------- */
@media (max-width: 700px) {

  .edition-band { padding: 34px 0 40px; }
  .edition-intro { grid-template-columns: 1fr; gap: 26px; }
  .edition-band h2 { font-size: 52px; }
  .edition-lede-main { font-size: 30px; }
  .edition-lede-sub { font-size: 22px; }
  .edition-button { gap: 14px; padding: 15px 18px 14px; font-size: 16px; letter-spacing: .06em; }
  .edition-schools-list { font-size: 15px; line-height: 1.55; row-gap: 4px; }
  .edition-schools-list li { white-space: normal; }
  .edition-tabs { gap: 22px; margin-top: 30px; }
  .edition-tabs label { font-size: 13.5px; letter-spacing: .16em; }
  .edition-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .edition-card-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .edition-card-image img, .edition-cover img { transition: none; }
}

/* ---- falling leaves inside the Autumn band -------------------------------
   From Sergey's "autumn website" sample (30 Sep 2026): leaf pictures falling and
   turning, CSS only, with a sideways drift. They start at the top edge of the
   green band and leave through its bottom edge (the band clips them; cqh is the
   band's own height). Twelve leaves, 5-7 KB each. Purely decorative: hidden from
   screen readers, never catches a click, switched off entirely for readers who
   ask their system for reduced motion. */
.edition-band { position: relative; overflow: hidden; }
.falling-leaves {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.falling-leaves .leaf {
  position: absolute;
  top: -60px;
  width: var(--size);
  height: var(--size);
  background: var(--img) no-repeat center / contain;
  opacity: .85;
  animation: leaf-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
@keyframes leaf-fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(var(--drift), 25cqh) rotate(90deg); }
  50%  { transform: translate(0, 50cqh) rotate(180deg); }
  75%  { transform: translate(calc(var(--drift) * -1), 75cqh) rotate(270deg); }
  100% { transform: translate(0, calc(100cqh + 80px)) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .falling-leaves { display: none; }
}