/* =============================================================================
   gallery.css: the templates gallery (2026-10-12)
   Composition: an index of worlds. A rail of the five fields stays in view on
   the left; each field is a chapter of rows on the right. 21 worlds are a typed
   list, never a wall of cards. Colours come from site.css tokens only.
   ========================================================================== */
.h2 em, .display em { color: var(--g, var(--color-rust)); }
.d1 { --d: 90ms; } .d2 { --d: 230ms; } .d3 { --d: 400ms; }

.gh { padding-block: clamp(3rem, 8vh, 6rem) 3rem; }
.gh__grid { row-gap: 2rem; align-items: end; }
.gh__kicker { grid-column: 1 / -1; }
.gh__title { grid-column: 1 / span 10; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 6rem); }
.gh__say { grid-column: 1 / span 6; display: grid; gap: 1rem; }
.gh__say code { font-family: var(--font-mono); font-size: 0.9em; color: var(--color-rust); }
.gh__meta { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.gh__meta > div { display: grid; gap: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--color-line-strong); }
.gh__meta dd { order: -1; font-family: var(--font-serif); font-weight: 300; font-size: var(--t-h3); line-height: 1; color: var(--color-ink); white-space: nowrap; text-shadow: var(--halo); }
.gh__meta dt { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-mute); text-shadow: var(--halo-small); }

.gb { align-items: start; row-gap: 2rem; padding-bottom: var(--section); }
.fieldnav { grid-column: 1 / span 3; position: sticky; top: calc(var(--topnav-h) + 1.5rem); padding: 1.5rem; }
.fieldnav h2 { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-mute); margin-bottom: 0.5rem; }
.fieldnav ol { list-style: none; }
.fieldnav a { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; min-height: 3rem; border-bottom: 1px solid var(--color-line); text-decoration: none; color: var(--color-ink); }
.fieldnav li:last-child a { border-bottom: 0; }
.fieldnav i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--g-mark); }
.fieldnav b { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-title); transition: color var(--duration-fast) ease; }
.fieldnav b em { font-style: italic; color: var(--g); }
.fieldnav span { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--color-ink-mute); }
.fieldnav a:hover b { color: var(--g); }

.fields { grid-column: 5 / -1; display: grid; gap: 5rem; min-width: 0; }
.field { display: grid; gap: 1.5rem; scroll-margin-top: calc(var(--topnav-h) + 1.5rem); }
.field__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1rem 2rem; align-items: end; padding-bottom: 1rem; border-bottom: 3px solid var(--g-mark); }
.field__head .kicker { grid-column: 1 / -1; }
.field__head .h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.field__brief { font-size: var(--t-small); color: var(--color-ink-soft); text-align: right; text-shadow: var(--halo-small); }
.worlds { list-style: none; padding: 0.5rem 2rem; }
.world a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--color-line); text-decoration: none; color: inherit; }
.world:last-child a { border-bottom: 0; }
.world__no { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: var(--t-h3); line-height: 1; color: var(--g); }
.world__name { font-family: var(--font-serif); font-weight: 300; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.02em; color: var(--color-ink); transition: color var(--duration-fast) ease; }
.world__go { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--g); white-space: nowrap; transition: transform var(--duration-normal) var(--ease-premium); }
.world__line { grid-column: 2 / -1; font-size: var(--t-body); line-height: 1.6; color: var(--color-ink-soft); max-inline-size: 68ch; }
.world__tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--color-ink-mute); }
.world__tags span + span::before { content: '/'; margin-right: 1rem; color: var(--color-line-strong); }
.world a:hover .world__name, .world a:focus-visible .world__name { color: var(--g); }
.world a:hover .world__go { transform: translateX(0.25rem); }
@media (max-width: 1100px) {
  .gh__title, .gh__say, .gh__meta { grid-column: 1 / -1; }
  .fieldnav { grid-column: 1 / -1; position: static; }
  .fieldnav ol { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .fieldnav a { border-bottom: 0; }
  .fields { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .field__head { grid-template-columns: minmax(0, 1fr); }
  .field__brief { text-align: left; }
  .worlds { padding: 0.25rem 1.25rem; }
  .world a { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .world__go { display: none; }
  .fieldnav ol { display: grid; }
  .fields { gap: 3.5rem; }
}