/* ==========================================================================
   Rhize — shared skeleton
   Fonts, reset and geometry only. Everything that makes a prototype look like
   itself lives in theme.css.
   ========================================================================== */

/* ---------- Brand fonts (from the client asset pack) ---------- */
@font-face { font-family: 'Sansation'; src: url('fonts/Sansation-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sansation'; src: url('fonts/Sansation-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sansation'; src: url('fonts/Sansation-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sansation'; src: url('fonts/Sansation-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-Thin.ttf') format('truetype'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-ExtraLight.ttf') format('truetype'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('fonts/Tomorrow-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

@font-face { font-family: 'Lacquer'; src: url('fonts/Lacquer-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rock Salt'; src: url('fonts/RockSalt-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }

/* Fallback header height — themes override it; anything sticky offsets by this
   so it never slides underneath the header. */
:root { --head-h: 68px; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
summary::-webkit-details-marker { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  padding: .85em 1.4em; background: #000; color: #fff; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; margin-inline: auto; padding-inline: var(--gutter, 1.5rem); max-width: var(--maxw, 1500px); }
.wrap--narrow { max-width: 1000px; }

/* ---------- Vector marks from the brand pack ---------- */
.mark { display: inline-block; width: 1em; height: 1em; color: inherit; vertical-align: middle; }
.mark svg { width: 100%; height: 100%; display: block; }
.mark--arrow { width: 1.5em; }

/* ---------- Scroll reveal (no JS: content is simply visible) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s ease, transform .85s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Portfolio filter ---------- */
.js-card[hidden] { display: none !important; }

/* ==========================================================================
   Structural layout — geometry only, no colour or type. Themes override freely.
   ========================================================================== */

.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.brand img { width: auto; height: clamp(26px, 3vw, 42px); }

/* ---------- Navigation ---------- */
.nav-toggle { display: none; }

@media (max-width: 1099px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
    position: relative; z-index: 201; /* Fix: must be above site-nav so it can be clicked to close! */
  }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; transition: .3s; }
  .site-nav {
    position: fixed; inset: 0; z-index: 200; display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    background: var(--paper); /* Clean matching background */
  }
  .nav-toggle.is-active span:nth-child(1), .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2), .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3), .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  
  .site-nav ul { flex-direction: column; align-items: center; gap: 1.25rem; font-size: 1.6rem; }
  .site-nav.is-open { display: flex !important; }
  body.nav-open { overflow: hidden !important; }
}


.sec { padding-block: var(--sec, clamp(4rem, 9vw, 8rem)); }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.page-head { padding-block: clamp(7rem, 13vw, 11rem) clamp(2rem, 4vw, 3.5rem); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-top: clamp(1.5rem, 3vw, 2.75rem); }

/* Cards ------------------------------------------------------------------ */
/* Cards size to their content — stretching them to match the tallest in the
   row leaves dead space under the short ones. */
.cards { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.cards-grid .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-tile .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-rows .cards { grid-template-columns: 1fr; }
.cards-overlap .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-overlap .card:nth-child(even) { margin-top: clamp(2rem, 7vw, 7rem); }

.card__media { position: relative; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__tag { position: absolute; left: 1rem; top: 1rem; }
.card__meta { display: flex; gap: 1rem; justify-content: space-between; }

.cards-rows .card > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }

/* Repeating blocks ------------------------------------------------------- */
.step { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.service__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.psteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }

/* Full-bleed image band -------------------------------------------------- */
.band { position: relative; display: flex; align-items: center; min-height: clamp(20rem, 55vh, 34rem); overflow: hidden; }
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__in { position: relative; z-index: 1; }

/* Filters ---------------------------------------------------------------- */
.filters ul { display: flex; flex-wrap: wrap; gap: .5rem clamp(.75rem, 2vw, 1.75rem); }
.filters button { background: none; border: 0; cursor: pointer; padding: .5em 0; }
.filters sup { font-size: .6em; }

/* Forms ------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.form { display: grid; gap: 1.6rem; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.field { display: grid; gap: .55rem; }
.field input, .field select, .field textarea { width: 100%; }
.field textarea { resize: vertical; min-height: 8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-block; cursor: pointer; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; cursor: pointer; list-style: none; }
.faq__i { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.faq__i::before, .faq__i::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: currentColor; }
.faq__i::after { transform: rotate(90deg); transition: opacity .3s ease; }
.faq[open] .faq__i::after { opacity: 0; }
.contact-aside { display: grid; gap: 2rem; }

/* Footer ----------------------------------------------------------------- */
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.foot-col ul { display: grid; gap: .6rem; }
.foot-col--brand img { width: auto; height: 38px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* Hero skeletons --------------------------------------------------------- */
.hero { position: relative; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__logo { width: min(56vw, 560px); height: auto; }

.hero-photo .hero { display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; }
.hero-photo .hero__in { position: relative; z-index: 1; }
.hero__cue { position: absolute; z-index: 1; right: var(--gutter, 1.5rem); bottom: clamp(2rem, 6vw, 5rem); display: grid; place-items: center; width: 54px; height: 54px; }

.hero-split .hero__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: 88svh; }
.hero-split .hero__art img { width: 100%; height: 100%; object-fit: cover; }

.hero-type .hero__in { padding-block: clamp(7rem, 16vw, 14rem) clamp(2rem, 5vw, 4rem); }
.hero-type .hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hero-type .hero__marks { display: flex; gap: 1.25rem; }
.hero-type .hero__strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-type .hero__strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.hero-stack .hero__in { padding-block: clamp(7rem, 15vw, 12rem) clamp(2rem, 5vw, 4rem); }
.hero-stack .hero__band img { width: 100%; height: clamp(18rem, 46vh, 30rem); object-fit: cover; }

.hero-collage .hero { display: flex; align-items: center; min-height: 100svh; overflow: hidden; }
.hero-collage .hero__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.hero-collage .hero__cell { margin: 0; overflow: hidden; }
.hero-collage .hero__cell img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage .hero__in { position: relative; z-index: 1; text-align: center; }
.hero-collage .hero__logo { margin-inline: auto; }

/* Side navigation variant ------------------------------------------------ */
@media (min-width: 1100px) {
  .nav-side .site-header__in { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3rem; }
  .nav-side .site-nav { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .nav-side .site-nav ul { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Centred navigation variant --------------------------------------------- */
@media (min-width: 861px) {
  .nav-center .site-header__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .nav-center .brand { grid-column: 2; justify-self: center; }
  .nav-center .site-nav { grid-row: 1; grid-column: 3; justify-self: end; }
}

/* Responsive collapses --------------------------------------------------- */
@media (max-width: 1000px) {
  .cards-grid .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .intro-grid, .services, .quotes, .principles, .split, .contact-grid,
  .cards-grid .cards, .cards-tile .cards, .cards-overlap .cards,
  .hero-split .hero__in, .row { grid-template-columns: 1fr; }
  .cards-overlap .card:nth-child(even) { margin-top: 0; }
  .cards-rows .card > a { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-col--brand { grid-column: 1 / -1; }
  .hero-type .hero__strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Shared components — stats, plans, journal, awards

   These are styled here rather than ten times over, but they are not neutral:
   they resolve --green / --lime / --pink from whichever theme is loaded, and
   inherit type and colour from it, so each prototype tints them its own way.
   ========================================================================== */

/* Numbers strip ---------------------------------------------------------- */
.sec--stats { padding-block: clamp(2rem, 4vw, 3.5rem); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); }
.stat { display: grid; gap: .35rem; padding-top: 1rem;  }
.stat__n { font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.03em; }
.stat__l { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* Planting plans --------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.plan { margin: 0; }
.plan__sheet {
  background: #fff; overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .7);
  transition: transform .5s ease;
}
.plan:hover .plan__sheet { transform: translateY(-5px); }
.plan__sheet img { width: 100%; height: auto; display: block; }
.plan figcaption { display: grid; gap: .2rem; margin-top: .9rem; }
.plan figcaption strong { font-weight: inherit; font-size: 1.05rem; }
.plan figcaption span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }

/* Journal ---------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.post { padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.post__date { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.post__title { font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin-top: .5rem; line-height: 1.15; }
.post__body { margin-top: .7rem; font-size: .92rem; opacity: .75; }
.post__more { display: inline-flex; align-items: center; gap: .5em; margin-top: .9rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }

/* Awards ----------------------------------------------------------------- */
.awards { margin-top: clamp(1.5rem, 3vw, 2.5rem);  }
.award {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding-block: 1.05rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.award__y { font-size: .78rem; letter-spacing: .14em; color: var(--green); }
.award__n { font-size: 1.05rem; }
.award__d { font-size: .88rem; opacity: .68; }

@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans, .posts { grid-template-columns: 1fr; }
  .award { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .award__d { grid-column: 2; }
}


/* ==========================================================================
   Editorial rhythm

   Equal boxes in an equal grid is what makes a page look templated. These rules
   give every layout an asymmetric beat — varied column spans, varied crops, and
   a stagger on the reveal — without touching any theme's colour or type.

   They sit in the shared layer on purpose: the selectors are more specific than
   a theme's plain .card__media, so they win on specificity rather than order,
   and a theme can still override deliberately with its own nth-child rule.
   ========================================================================== */

/* Three-up grids become a twelve-column score with a repeating 7/5, 4/4/4,
   5/7 pattern, so no two rows land the same way. */
@media (min-width: 900px) {
  .cards-grid .cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cards-grid .card { grid-column: span 4; }
  .cards-grid .card:nth-child(8n + 1) { grid-column: span 7; }
  .cards-grid .card:nth-child(8n + 2) { grid-column: span 5; }
  .cards-grid .card:nth-child(8n + 6) { grid-column: span 5; }
  .cards-grid .card:nth-child(8n + 7) { grid-column: span 7; }

  .cards-grid .card:nth-child(8n + 1) .card__media { aspect-ratio: 16 / 10; }
  .cards-grid .card:nth-child(8n + 2) .card__media { aspect-ratio: 4 / 5; }
  .cards-grid .card:nth-child(8n + 3) .card__media { aspect-ratio: 1; }
  .cards-grid .card:nth-child(8n + 4) .card__media { aspect-ratio: 4 / 5; }
  .cards-grid .card:nth-child(8n + 5) .card__media { aspect-ratio: 1; }
  .cards-grid .card:nth-child(8n + 6) .card__media { aspect-ratio: 3 / 2; }
  .cards-grid .card:nth-child(8n + 7) .card__media { aspect-ratio: 16 / 10; }
  .cards-grid .card:nth-child(8n + 8) .card__media { aspect-ratio: 4 / 5; }

  /* Drop alternate cards down the page so the row tops do not line up */
  .cards-grid .card:nth-child(8n + 3),
  .cards-grid .card:nth-child(8n + 5) { margin-top: clamp(1.5rem, 4vw, 4rem); }

  /* Two-up tiles alternate tall and wide */
  .cards-tile .card:nth-child(4n + 1) .card__media,
  .cards-tile .card:nth-child(4n + 4) .card__media { aspect-ratio: 4 / 5; }
  .cards-tile .card:nth-child(4n + 2) .card__media,
  .cards-tile .card:nth-child(4n + 3) .card__media { aspect-ratio: 3 / 2; }
  .cards-tile .card:nth-child(4n + 2) { margin-top: clamp(1.5rem, 5vw, 5rem); }

  /* Full-width rows flip which side the picture sits on */
  .cards-rows .card:nth-child(even) > a { direction: rtl; }
  .cards-rows .card:nth-child(even) > a > * { direction: ltr; }

  /* The story block sits off-axis rather than as two matched halves */
  .split__media { margin-top: clamp(1rem, 4vw, 4.5rem); }

  /* Drawings and journal entries step down the page */
  .plan:nth-child(2) { margin-top: clamp(1rem, 3vw, 3rem); }
  .plan:nth-child(3) { margin-top: clamp(2rem, 6vw, 6rem); }
  .post:nth-child(2) { margin-top: clamp(.75rem, 2vw, 2rem); }
  .post:nth-child(3) { margin-top: clamp(1.5rem, 4vw, 4rem); }
}

/* Stagger the reveal so a grid arrives as a sequence, not a single block */
.reveal { transition-delay: calc(var(--i, 0) * 70ms); }


/* ==========================================================================
   Editorial hero, marquee and index rows
   Structures taken from the supplied Rhize studio design: the headline leads and
   the photograph follows underneath; a scrolling strip of disciplines; and the
   project list as a numbered index rather than a grid of cards.
   ========================================================================== */

.hero-editorial .hero__in { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.hero-editorial .hero__foot {
  display: flex; flex-direction: column; gap: 2rem; margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.hero-editorial .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero-editorial .hero__frame img { width: 100%; height: clamp(20rem, 62vh, 44rem); object-fit: cover; }
@media (min-width: 861px) {
  .hero-editorial .hero__foot { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* Marquee -------------------------------------------------------------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee ul { display: flex; align-items: center; flex-shrink: 0; }
.marquee li { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-right: clamp(1.25rem, 3vw, 2.5rem); white-space: nowrap; }
.marquee i { display: block; width: .6em; height: .6em; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Numbered index rows --------------------------------------------------- */
.cards-index .cards { grid-template-columns: 1fr; gap: 0; counter-reset: row; }
.cards-index .card { counter-increment: row; }
.cards-index .card__media,
.cards-index .card__sum,
.cards-index .card__more { display: none; }
.cards-index .card > a {
  display: grid; grid-template-columns: 3.5rem minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  align-items: baseline; gap: 1rem; padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
}
.cards-index .card > a::before { content: counter(row, decimal-leading-zero); font-size: .74rem; }
.cards-index .card__body { display: contents; }
.cards-index .card__meta { display: contents; }
.cards-index .card__meta span:last-child { text-align: right; }
@media (max-width: 760px) {
  .cards-index .card > a { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: .35rem; }
  .cards-index .card__meta span:last-child { text-align: left; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}