/* =========================================================================
   CURIO TALE — Scenes
   Components and page compositions built on the design system.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO — the opening frame
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--black);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__poster {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 1.6s var(--ease-film);
}
.hero__film {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-film);
}
.hero__film.is-playing { opacity: 1; }
.hero__film.is-playing ~ .hero__poster { opacity: 0; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.42) 100%);
}

.hero__body {
  position: relative;
  z-index: 2;
  padding: 0 var(--margin) clamp(1.75rem, 4vw, 3.25rem);
  width: 100%;
}

/* On short viewports the opening frame compresses rather than overflowing. */
@media (max-height: 680px) {
  .hero__title { font-size: clamp(2.25rem, 8vw, 5rem); }
  .hero__stack-line { font-size: clamp(1.1rem, 2.6vw, 1.75rem); }
  .hero__foot { margin-top: clamp(1rem, 2vw, 1.75rem); }
}

.hero__overline {
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

/* Sized to hold "CURIO TALE" on one line at desktop and to leave the frame
   room to breathe — the film is the subject, the wordmark is the caption. */
.hero__title {
  font-size: clamp(2.75rem, 11.5vw, 11.5rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 2.2vw, 2rem);
}

.hero__stack {
  display: grid;
  gap: 0;
}
.hero__stack-line {
  font-size: clamp(1.5rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fg);
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.hero__meta {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.hero__scroll i {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  animation: scroll-cue 2.6s var(--ease-inout) infinite;
}
@keyframes scroll-cue {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

@media (max-width: 700px) {
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* -------------------------------------------------------------------------
   EDITORIAL STATEMENT
   ------------------------------------------------------------------------- */
.statement { position: relative; }
.statement__marker { margin-bottom: clamp(3rem, 8vw, 7rem); }
.statement__title {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.statement__body {
  font-size: clamp(1.5rem, 3.6vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.statement__note {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  max-width: 34ch;
}

/* -------------------------------------------------------------------------
   PROJECT SHOWCASE — the home sequence
   Each project is a scene, not a card.
   ------------------------------------------------------------------------- */
.showcase { display: block; position: relative; }
.showcase + .showcase { margin-top: clamp(5rem, 12vw, 13rem); }

.showcase__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--margin);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.showcase__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
}
.showcase__media img,
.showcase__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-film), opacity 0.9s var(--ease-out);
}
.showcase:hover .showcase__media img,
.showcase:hover .showcase__media video { transform: scale(1.035); }

/* The silent loop sits over the still and fades up on hover. */
.showcase__loop {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.showcase:hover .showcase__loop { opacity: 1; }

/* Alignment variants break the grid on purpose. */
.showcase--full  .showcase__media { aspect-ratio: 21 / 9; margin-inline: var(--margin); }
.showcase--left  .showcase__media { aspect-ratio: 4 / 3;  margin-right: auto; margin-left: var(--margin); width: min(62%, 60rem); }
.showcase--right .showcase__media { aspect-ratio: 4 / 3;  margin-left: auto; margin-right: var(--margin); width: min(62%, 60rem); }
.showcase--center .showcase__media { aspect-ratio: 9 / 16; margin-inline: auto; width: min(34%, 30rem); }

.showcase__title {
  font-size: clamp(2.5rem, 8.4vw, 8.5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition: opacity 0.5s var(--ease-out), transform 0.8s var(--ease-out);
}
.showcase:hover .showcase__title { transform: translateX(0.4rem); }

.showcase__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--margin);
  margin-top: clamp(0.9rem, 1.8vw, 1.5rem);
}
.showcase__tags { display: flex; gap: 1.5rem; }
.showcase__cue {
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.showcase:hover .showcase__cue { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .showcase--left .showcase__media,
  .showcase--right .showcase__media {
    width: auto;
    margin-inline: var(--margin);
    aspect-ratio: 3 / 2;
  }
  .showcase--center .showcase__media { width: min(72%, 22rem); }
  .showcase--full .showcase__media { aspect-ratio: 16 / 10; }
  .showcase__cue { display: none; }
}

/* -------------------------------------------------------------------------
   PAGE TITLE — WORK / ABOUT / SERVICES
   ------------------------------------------------------------------------- */
.pagehead {
  min-height: 68svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--scene-sm)) var(--margin) var(--scene-sm);
}
.pagehead__marker { margin-bottom: clamp(2rem, 6vw, 5rem); }
.pagehead__title { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
/* Measured in rem, not ch: the wrapper inherits body type while the lede
   inside it is display-sized, so `ch` here would resolve far too narrow. */
.pagehead__lede { max-width: min(90%, 38rem); }
.pagehead__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 46ch;
}

/* -------------------------------------------------------------------------
   WORK — editorial filter
   ------------------------------------------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 2rem) var(--margin);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.filter__btn {
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
  position: relative;
  padding-block: 0.25rem;
  transition: color 0.45s var(--ease-out);
}
.filter__btn:hover { color: var(--fg-dim); }
.filter__btn.is-on { color: var(--fg); }
.filter__btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.filter__btn.is-on::after { transform: scaleX(1); }

/* The archive itself */
.archive { padding-top: clamp(3rem, 8vw, 8rem); }
.archive__item {
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.archive__item.is-filtered-out {
  display: none;
}

/* -------------------------------------------------------------------------
   PROJECT DETAIL
   ------------------------------------------------------------------------- */
.project__intro {
  padding: calc(var(--nav-h) + var(--scene-sm)) var(--margin) var(--scene-sm);
}
.project__marker { margin-bottom: clamp(2rem, 5vw, 4rem); }
.project__title { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.project__hero {
  position: relative;
  height: 88svh;
  min-height: 28rem;
  overflow: hidden;
  background: var(--ink-raised);
}
.project__hero img,
.project__hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Watch film */
.watch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(3rem, 7vw, 7rem);
}
.watch__btn {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font-size: clamp(1.25rem, 3.2vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  color: var(--fg);
  position: relative;
  padding-block: 0.5rem;
}
.watch__btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out);
}
.watch__btn:hover::after { transform: scaleX(1); }
.watch__mark {
  width: clamp(2.75rem, 5vw, 4.5rem);
  height: clamp(2.75rem, 5vw, 4.5rem);
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s;
}
.watch__btn:hover .watch__mark {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--black);
}
.watch__mark svg { width: 0.75rem; height: 0.9rem; }

/* Project information — reads like film notes */
.notes { row-gap: clamp(2.5rem, 5vw, 4rem); }
.notes__label { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.notes__body p + p { margin-top: 1.4em; }

.spec {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
}
.spec__row {
  display: grid;
  gap: 0.5rem;
  padding-bottom: clamp(1rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--rule-soft);
}
.spec__value {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Credits */
.credits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.credit__role { margin-bottom: 0.6rem; }
.credit__name {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: -0.015em;
  color: var(--fg);
}

/* Gallery — asymmetric sequencing */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(3rem, 8vw, 9rem);
  padding-inline: var(--margin);
}
.gallery__item { grid-column: span 12; }
.gallery__item--full     { grid-column: 1 / -1; }
.gallery__item--wide     { grid-column: 2 / 12; }
.gallery__item--left     { grid-column: 1 / 8; }
.gallery__item--right    { grid-column: 6 / -1; }
.gallery__item--center   { grid-column: 4 / 10; }
.gallery__item--duo-left { grid-column: 1 / 7; align-self: end; }
.gallery__item--duo-right{ grid-column: 8 / -1; margin-top: clamp(2rem, 8vw, 9rem); }
.gallery__item--tall     { grid-column: 3 / 8; }

/* Gallery frames vary in ratio so the sequence never falls into a grid. */
.gallery__item--full   .frame { aspect-ratio: 21 / 9; }
.gallery__item--wide   .frame { aspect-ratio: 16 / 9; }
.gallery__item--left   .frame,
.gallery__item--right  .frame { aspect-ratio: 3 / 2; }
.gallery__item--center .frame { aspect-ratio: 4 / 3; }
.gallery__item--duo-left  .frame { aspect-ratio: 4 / 5; }
.gallery__item--duo-right .frame { aspect-ratio: 3 / 4; }
.gallery__item--tall   .frame { aspect-ratio: 2 / 3; }

@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(2rem, 8vw, 4rem); }
  .gallery__item { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .gallery__item .frame { aspect-ratio: 4 / 3; }
  .gallery__item--duo-left .frame,
  .gallery__item--duo-right .frame { aspect-ratio: 4 / 5; }
}

/* Recognition and press — only rendered when the CMS has rows */
.recognition__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--rule-soft);
}
.recognition__title {
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  letter-spacing: -0.02em;
}

/* Next story */
.next {
  position: relative;
  display: block;
  min-height: 76svh;
  overflow: hidden;
  background: var(--ink-raised);
}
.next__media { position: absolute; inset: 0; }
.next__media img,
.next__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s var(--ease-film);
}
.next:hover .next__media img,
.next:hover .next__media video { transform: scale(1.075); }
.next__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.55));
}
.next__body {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--scene-sm) var(--margin);
}
.next__title {
  font-size: clamp(2.75rem, 10vw, 10rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-top: clamp(1rem, 2.5vw, 2rem);
}
.next__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

/* -------------------------------------------------------------------------
   CLIENT MARQUEE
   ------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  white-space: nowrap;
}
.marquee__name {
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg-ghost);
  transition: color 0.5s var(--ease-out);
}
.marquee__item:hover .marquee__name { color: var(--fg); }
.marquee__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fg-ghost);
  flex: none;
}
.marquee__logo { height: clamp(1.75rem, 3vw, 2.75rem); width: auto; opacity: 0.5; transition: opacity 0.5s; }
.marquee__item:hover .marquee__logo { opacity: 1; }

/* -------------------------------------------------------------------------
   STATISTICS — each figure owns its own space
   ------------------------------------------------------------------------- */
.stats { display: grid; }
.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--rule-soft);
}
.stat:last-child { border-bottom: 1px solid var(--rule-soft); }
.stat__value {
  font-size: clamp(3rem, 11vw, 11rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.stat__label { text-align: right; }

@media (max-width: 700px) {
  .stat { grid-template-columns: 1fr; gap: 1rem; }
  .stat__label { text-align: left; }
}

/* -------------------------------------------------------------------------
   CINEMATIC CTA — the closing scene
   ------------------------------------------------------------------------- */
.cta { position: relative; }
.cta__lines {
  font-size: clamp(2.5rem, 9.5vw, 9.5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.cta__lines em {
  font-style: normal;
  color: var(--fg-ghost);
}
.cta__action { margin-top: clamp(2.5rem, 6vw, 5rem); }

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.footer {
  background: var(--black);
  border-top: 1px solid var(--rule-soft);
  padding: var(--scene-sm) var(--margin) clamp(1.5rem, 3vw, 2.5rem);
}
.footer__statement {
  font-size: clamp(2rem, 7vw, 7rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.042em;
  text-transform: uppercase;
  margin-bottom: clamp(3rem, 8vw, 7rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule-soft);
}
.footer__col { grid-column: span 3; display: grid; gap: 0.8rem; align-content: start; }
.footer__col a { color: var(--fg-dim); transition: color 0.4s var(--ease-out); }
.footer__col a:hover { color: var(--fg); }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 860px) {
  .footer__col { grid-column: span 6; }
}

/* -------------------------------------------------------------------------
   FILM PLAYER
   ------------------------------------------------------------------------- */
.player {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(0, 0, 0, 0.96);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.player.is-open { opacity: 1; visibility: visible; }

.player__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) var(--margin);
}
.player__stage {
  display: grid;
  place-items: center;
  padding-inline: var(--margin);
  min-height: 0;
  background: var(--black);
}
.player__video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--black);
}
.player__controls {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2rem) var(--margin);
}
.player__bar {
  flex: 1;
  height: 2px;
  background: var(--fg-ghost);
  cursor: pointer;
  position: relative;
}
.player__fill {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.player__btn {
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 0.4s var(--ease-out);
  white-space: nowrap;
}
.player__btn:hover { color: var(--fg); }
.player__time {
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .player__controls { flex-wrap: wrap; row-gap: 0.9rem; }
  .player__bar { order: -1; flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
   CHAPTER SWITCHER — values / services
   ------------------------------------------------------------------------- */
.chapters { position: relative; }
.chapters__stage {
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
}
.chapters__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-film), transform 1.6s var(--ease-film);
  transform: scale(1.06);
}
.chapters__frame.is-on { opacity: 1; transform: scale(1); }
.chapters__frame img,
.chapters__frame video { width: 100%; height: 100%; object-fit: cover; }

.chapters__list { display: grid; }
.chapters__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--rule-soft);
  transition: opacity 0.45s var(--ease-out);
}
.chapters__list:hover .chapters__row { opacity: 0.34; }
.chapters__list .chapters__row.is-on,
.chapters__list .chapters__row:hover { opacity: 1; }
.chapters__title {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */
.lost {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: calc(var(--nav-h) + var(--scene-sm)) var(--margin) var(--scene-sm);
}

/* -------------------------------------------------------------------------
   Shared utilities
   ------------------------------------------------------------------------- */
.stack   { display: grid; gap: clamp(0.8rem, 1.6vw, 1.4rem); align-content: start; }
.stack-s { display: grid; gap: 0.55rem; align-content: start; }
.row     { display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 2.5rem); flex-wrap: wrap; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.end     { justify-self: end; }