/* Front-page modules (home, section fronts, author pages).
   Rule of the house: columns end on the same line. Pictures stretch to fill
   (object-fit: cover), lists distribute, and nothing leaves a dead corner. */

/* ── Section front strip: lead · second story · latest ── */
.front { display: grid; gap: var(--sp-8) var(--gutter); }
.front__lead > .photo { aspect-ratio: 3 / 2; }
.front__lead .card__title { font-size: clamp(1.75rem, 1.25rem + 1.8cqi, 2.875rem); line-height: 1.04; letter-spacing: -.018em; }
.front__lead .card__dek { font-size: var(--t-dek); line-height: 1.42; max-width: 46ch; }
.front__mid { display: grid; row-gap: var(--sp-5); align-content: start; }
.front__mid > .card + .card { padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.front__mid .card__title { font-size: 1.25rem; line-height: 1.22; }
.front__latest { display: flex; flex-direction: column; }
.tl { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }
.tl li { position: relative; display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); column-gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--rule); }
.tl time { font: 700 var(--t-meta)/1.55 var(--sans); color: var(--meta); font-variant-numeric: tabular-nums; }
.tl li.is-now time { color: var(--now); }
.tl li.is-context time { color: var(--context); }
.tl a { font: 600 1rem/1.35 var(--serif); color: var(--text); text-decoration: none; text-wrap: pretty; }
.tl a::after { content: ""; position: absolute; inset: 0; }
.tl li:hover a { text-decoration: underline; text-decoration-color: var(--context); text-underline-offset: .15em; }
.front__latest > .link-more { margin-top: var(--sp-3); }

@container (min-width: 720px) {
  .front { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .front__lead { grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); }
  .front__lead > .photo { grid-column: 1 / 6; grid-row: 1 / span 5; margin: 0; }
  .front__lead > :not(.photo) { grid-column: 6 / 9; }
  .front__mid { grid-column: 1 / 5; }
  .front__latest { grid-column: 5 / 9; }
}
@container (min-width: 1100px) {
  .front { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .front__lead { grid-column: 1 / 7; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .front__lead > .photo { grid-column: auto; grid-row: auto; margin-bottom: var(--sp-1); }
  .front__lead > :not(.photo) { grid-column: auto; }
  .front__mid { grid-column: 7 / 10; display: flex; flex-direction: column; gap: var(--sp-5); }
  .front__mid > .card:first-child { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
  .front__mid > .card:first-child > .photo { flex: 1 1 auto; height: 0; min-height: 190px; aspect-ratio: auto; margin: 0 0 var(--sp-1); }
  .front__latest { grid-column: 10 / 13; }
  .tl { justify-content: space-between; }
}

/* ── In pictures: a gallery you can work through ── */
.band { container: band / inline-size; }
.band__in { padding-block: var(--sp-10); }
.gal { display: grid; gap: var(--sp-5) var(--gutter); }
.gal__stage { margin: 0 calc(-1 * var(--margin)); background: var(--stone-900); }
.gal__stage .photo { aspect-ratio: 3 / 2; }
.gal__info { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.gal__title { margin: 0; font: italic 700 clamp(2rem, 1.5rem + 1.8cqi, 3.125rem)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.gal__title a { text-decoration: none; }
.gal__title a:hover { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; text-decoration-color: var(--context); }
.gal__dek { margin: 0; font: 400 1.0625rem/1.5 var(--serif); color: var(--text-2); max-width: 44ch; }
.gal__cap { margin: 0; font: 500 var(--t-meta)/1.45 var(--sans); color: var(--text); }
.gal__index { display: none; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.gal__index button {
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); column-gap: var(--sp-3); align-items: baseline;
  width: 100%; min-height: 48px; padding: var(--sp-3) 0; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--meta); text-align: left; cursor: pointer; font: 500 var(--t-meta)/1.4 var(--sans);
}
.gal__index .n { font: italic 700 1.25rem/1 var(--serif); }
.gal__index button[aria-current="true"], .gal__index button:hover { color: var(--text); }
html:not(.js) .gal__ctrl, html:not(.js) .gal__strip { display: none; }
.gal__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: auto; }
.gal__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-strong);
  background: none; color: var(--text); cursor: pointer; font-size: 1rem; transition: border-color .2s, color .2s;
}
.gal__btn:hover { border-color: var(--context); color: var(--context); }
.gal__btn--prev .arrow { scale: -1 1; }
.gal__count { margin: 0 auto 0 var(--sp-2); font: 600 var(--t-meta)/1 var(--sans); color: var(--meta); font-variant-numeric: tabular-nums; }
.gal__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 30%; gap: var(--sp-2); margin: 0 calc(-1 * var(--margin));
  padding: 2px var(--margin); list-style: none; overflow-x: auto; scrollbar-width: none;
}
.gal__strip::-webkit-scrollbar { display: none; }
.gal__strip button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .2s; }
.gal__strip button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--stone-0); }
.gal__strip button:hover { opacity: 1; }
.gal__strip .photo { aspect-ratio: 3 / 2; }
@container (min-width: 720px) {
  .gal__stage { margin: 0; }
  .gal__strip { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 2px; overflow: visible; }
}
@container (min-width: 1100px) {
  .gal { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; row-gap: var(--sp-3); }
  .gal__stage { grid-column: 1 / 9; grid-row: 1; display: flex; }
  .gal__stage .photo { flex: 1 1 auto; min-height: 540px; height: auto; aspect-ratio: auto; }
  .gal__info { grid-column: 9 / 13; grid-row: 1 / 3; padding-left: var(--sp-3); }
  .gal__index { display: block; }
  .gal__cap { display: none; }
  .gal__strip { grid-column: 1 / 9; grid-row: 2; padding: 2px 0 0; }
}

/* ── The context desk: analysis and opinion on green ── */
.desk { container: desk / inline-size; background: var(--green-50); --rule: var(--green-200); }
.desk__in { padding-block: var(--sp-10); }
.desk .sec-head { border-top-color: var(--context); }
.desk .sec-head::before { background: var(--context); }
.desk__grid { display: grid; gap: var(--sp-7) var(--gutter); }
.voice { position: relative; display: grid; row-gap: var(--sp-3); align-content: start; min-width: 0; }
.voice + .voice { padding-top: var(--sp-6); border-top: 1px solid var(--rule); }
.voice__title { margin: 0; font: italic 600 1.625rem/1.15 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.voice__title a { text-decoration: none; }
.voice__title a::after { content: ""; position: absolute; inset: 0; }
.voice:hover .voice__title a { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; text-decoration-color: var(--context); }
.voice--lead .voice__title { font-size: clamp(2rem, 1.45rem + 1.9cqi, 3rem); line-height: 1.04; letter-spacing: -.018em; }
.voice__ex { margin: 0; max-width: 52ch; font: 400 1.0625rem/1.5 var(--serif); color: var(--text-2); text-wrap: pretty; }
.voice--lead .voice__ex { font-size: var(--t-dek); line-height: 1.42; }
.voice__by { margin: 0; font: 700 var(--t-meta)/1.3 var(--sans); }
.voice__by span { font-weight: 500; color: var(--meta); }
.voice__by a { position: relative; z-index: 1; text-decoration: none; }
.voice__by a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--context); }
.explain-row { display: grid; gap: var(--sp-5) var(--gutter); margin-top: var(--sp-9); padding-top: var(--sp-5); border-top: 1px solid var(--context); }
.explain-row .card--row { grid-template-columns: auto minmax(0, 1fr); padding: 0; border: 0; }
.explain-row .card--row > * { grid-column: 2; }
.explain-row .card--row > .thumb { grid-column: 1; grid-row: 1 / span 4; width: 96px; height: 96px; }
@container (min-width: 720px) {
  .desk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice--lead { grid-column: 1 / -1; }
  .voice + .voice:not(.voice--lead) { padding-top: var(--sp-6); }
  .explain-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 1100px) {
  .desk__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .voice + .voice, .voice + .voice:not(.voice--lead) { padding-top: 0; border-top: 0; }
  .voice--lead { grid-column: 1 / 7; padding-right: var(--sp-5); }
  .voice:nth-child(2) { grid-column: 7 / 10; }
  .voice:nth-child(3) { grid-column: 10 / 13; }
}

/* ── Culture: a magazine spread; the picture runs as tall as the words ── */
.spread { display: grid; gap: var(--sp-6) var(--gutter); }
.spread__pic { order: -1; display: block; margin: 0 calc(-1 * var(--margin)); }
.spread__pic .photo { aspect-ratio: 4 / 3; }
.spread__text { display: grid; gap: var(--sp-6); align-content: start; }
.spread__main { position: relative; display: grid; row-gap: var(--sp-4); align-content: start; }
.spread__title { margin: 0; font: italic 700 clamp(2.25rem, 1.55rem + 2.5cqi, 3.75rem)/.98 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.spread__title a { text-decoration: none; }
.spread__title a::after { content: ""; position: absolute; inset: 0; }
.spread__main:hover .spread__title a { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; text-decoration-color: var(--context); }
.spread__main .kicker a { position: relative; z-index: 1; }
.spread__dek { margin: 0; max-width: 40ch; font: 400 var(--t-dek)/1.42 var(--serif); color: var(--text-2); }
.spread__also { border-top: 1px solid var(--rule-strong); }
.spread__also .label { margin-top: var(--sp-4); }
.spread__also .card--row:first-of-type { border-top: 0; }
@container (min-width: 720px) {
  .spread { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .spread__pic { grid-column: 1 / -1; margin: 0; }
  .spread__pic .photo { aspect-ratio: 16 / 9; }
  .spread__text { grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); }
  .spread__main { grid-column: 1 / 6; }
  .spread__also { grid-column: 6 / 9; }
}
@container (min-width: 1100px) {
  .spread { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .spread__text { grid-column: 1 / 6; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .spread__main, .spread__also { grid-column: auto; }
  .spread__pic { order: 0; grid-column: 6 / 13; display: flex; }
  .spread__pic .photo { flex: 1 1 auto; min-height: 520px; height: auto; aspect-ratio: auto; }
}