/* ==========================================================================
   ALANY / BOOM — PROGRAMS PAGE
   Loads on top of home.css and reuses its tokens, type scale, nav, buttons,
   reveal states and lightbox. Everything below is only what this page needs
   and the home page never had: the hero collage, the Two-by-Two diagram, the
   scroll-drawn match timeline, and the filterable photo mosaic.
   ========================================================================== */

/* ==========================================================================
   PAGE-WIDE OVERRIDES
   ========================================================================== */

/* Section headers stack instead of sitting side by side: the section name
   reads as a label ABOVE its heading, never in a column beside it. */
.shead {
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.shead__n {
  padding-top: 0;
  font-size: 0.8rem;
}
.shead__t { max-width: 26ch; }
.shead__p { max-width: 78ch; }

/* Body copy across this page runs one step larger than the home page — it is
   a long read, and the client asked for it to be comfortable at a glance. */
.lead { font-size: clamp(1.04rem, 0.3vw + 0.98rem, 1.16rem); line-height: 1.75; }
.small { font-size: 0.95rem; }
.label { font-size: 0.75rem; }

/* ==========================================================================
   PAGE HERO
   ========================================================================== */
.phero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 3.4vw, 2.8rem));
  padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(255, 107, 44, .1), transparent 62%),
    var(--sand);
}
.phero__grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
}
.phero h1 { max-width: 17ch; }
.phero__lead {
  max-width: 52ch;
  margin-top: clamp(.9rem, 1.6vw, 1.25rem);
}

/* dense fact strip — the counterweight that stops the hero feeling airy */
.pfacts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid rgba(22, 18, 15, .12);
}
.pfacts div b {
  display: block;
  font-family: var(--font-d);
  font-size: clamp(1.28rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.pfacts div span {
  display: block;
  margin-top: .34rem;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--txt-mute);
  max-width: 16ch;
  line-height: 1.4;
}

/* three-photo collage — nothing is left as dead space */
.phero__art {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.5rem, .9vw, .8rem);
}
.phero__art .shot { border-radius: 20px; aspect-ratio: 4/3; }
.phero__art .shot:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16/10;
  border-radius: 26px;
}

.pchip {
  position: absolute;
  left: clamp(-1.6rem, -1.4vw, -.6rem);
  bottom: clamp(2.6rem, 6vw, 4.4rem);
  z-index: 3;
  background: var(--ink);
  color: var(--cream);
  border-radius: 16px;
  padding: .85rem 1.15rem;
  box-shadow: 0 24px 46px -22px rgba(22, 18, 15, .6);
}
.pchip b {
  display: block;
  font-family: var(--font-d);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--orange-2);
}
.pchip span {
  display: block;
  margin-top: .28rem;
  font-size: .79rem;
  letter-spacing: .05em;
  color: #cdbfae;
}

@media (max-width: 940px) {
  .phero__grid { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.4rem); }
  .phero h1 { max-width: 20ch; }
  .pchip { left: auto; right: .8rem; bottom: .8rem; }
}
@media (max-width: 560px) {
  .pfacts { gap: 1rem 1.6rem; }
  .pfacts div span { font-size: .78rem; }
}

/* ==========================================================================
   NUMBERED FEATURE LIST
   ========================================================================== */
.ilist { list-style: none; padding: 0; margin: 0; }
.ilist li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  padding: clamp(.72rem, 1.2vw, .95rem) 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--txt-soft);
}
.ilist li + li { border-top: 1px solid rgba(22, 18, 15, .1); }
.ilist li > i {
  font-style: normal;
  font-family: var(--font-d);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--clay);
  padding-top: .34rem;
  min-width: 1.6rem;
}
.ilist strong { color: var(--ink); font-weight: 600; }
.ilist--tight li { padding: .55rem 0; font-size: .97rem; }

.sec--dark .ilist li,
.sec--ink .ilist li { color: #b9c8cc; }
.sec--dark .ilist li + li,
.sec--ink .ilist li + li { border-top-color: rgba(255, 255, 255, .13); }
.sec--dark .ilist li > i,
.sec--ink .ilist li > i { color: var(--orange-2); }
.sec--dark .ilist strong,
.sec--ink .ilist strong { color: var(--cream); }

/* ==========================================================================
   SPEC STRIP — dense inline numbers under a split
   ========================================================================== */
.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  background: rgba(22, 18, 15, .12);
  border-radius: 18px;
  overflow: hidden;
}
.spec > div {
  background: var(--cream);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  transition: background .45s var(--e);
}
.spec > div:hover { background: var(--sand); }
.spec b {
  display: block;
  font-family: var(--font-d);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--clay);
}
.spec span {
  display: block;
  margin-top: .42rem;
  font-size: .87rem;
  line-height: 1.45;
  color: var(--txt-soft);
}
.sec--cream .spec > div { background: var(--sand); }
.sec--cream .spec > div:hover { background: var(--sand-deep); }
@media (max-width: 860px) { .spec { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   SPLIT — text beside a photograph, alternating
   ========================================================================== */
.split2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.6vw, 3.4rem);
  align-items: center;
}
.split2--flip > *:first-child { order: 2; }
/* the copy carries the weight and the photograph only illustrates it, so the
   image column gives ground rather than dominating the section */
.split2--lean { grid-template-columns: 1.25fr 0.75fr; align-items: start; }
.split2--lean > *:last-child { padding-top: 2.6rem; }
.split2 h3 { margin-bottom: .8rem; }
@media (max-width: 900px) {
  .split2 { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2rem); }
  .split2--lean { grid-template-columns: 1fr; }
  .split2--lean > *:last-child { padding-top: 0; }
  .split2--flip > *:first-child { order: 0; }
}

/* ==========================================================================
   TWO-BY-TWO DIAGRAM
   ========================================================================== */
.twoby {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.9rem, 2vw, 1.6rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
/* cards always step one tone away from whatever band they sit on, or they
   vanish into it — --cream on sand, --sand on the cream sections */
.tbpair {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-radius: 22px;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  transition: transform .5s var(--e), box-shadow .5s var(--e);
}
.sec--cream .tbpair { background: var(--sand); }
.tbpair:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 48px -26px rgba(22, 18, 15, .4);
}
.tbpair__k {
  font-family: var(--font-d);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay);
}
.tbpair__row {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .9rem;
}
.tbdot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--sand-deep);
  font-family: var(--font-d);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
}
.tbdot--m { background: var(--orange); color: #fff; }
.tblink {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), rgba(255, 107, 44, .18));
  border-radius: 2px;
}
.tbpair p {
  margin-top: .85rem;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--txt-soft);
}
/* the bridge that says: these two pairs share their activities */
.twoby__bridge {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 999px;
  background: var(--ink);
  color: #d9cec1;
  font-size: .93rem;
}
.twoby__bridge b {
  font-family: var(--font-d);
  color: var(--orange-2);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .twoby { grid-template-columns: 1fr; }
  .twoby__bridge { flex-direction: column; align-items: flex-start; border-radius: 20px; }
}

/* ==========================================================================
   PILLAR CARDS
   ========================================================================== */
.pcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.2rem);
}
.pcard {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-radius: 22px;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  transition: transform .5s var(--e), box-shadow .5s var(--e), background .5s var(--e);
}
.sec--cream .pcard,
.sec--sand2 .pcard { background: var(--sand); }
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px -26px rgba(22, 18, 15, .42);
}
.pcard::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  /* height: 3px;
  background: var(--orange); */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--e);
}
.pcard:hover::after { transform: scaleX(1); }
.pcard__n {
  display: inline-block;
  font-family: var(--font-d);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--orange);
  margin-bottom: .7rem;
}
.pcard h3 { font-size: 1.06rem; letter-spacing: -.024em; margin-bottom: .55rem; }
.pcard > p { font-size: .95rem; line-height: 1.62; color: var(--txt-soft); }
.pcard ul {
  list-style: none;
  padding: 0;
  margin: .8rem 0 0;
}
.pcard ul li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--txt-soft);
}
.pcard ul li + li { margin-top: .48rem; }
.pcard ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  opacity: .55;
}
.pcard__cap {
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--txt-mute);
  margin-bottom: .1rem;
}
@media (max-width: 900px) { .pcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pcards { grid-template-columns: 1fr; } }

/* ==========================================================================
   FIVE C'S CHIP ROW  (dark section)
   ========================================================================== */
.cfive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.5rem, 1vw, .8rem);
  margin-top: clamp(1.3rem, 2.4vw, 1.9rem);
}
.cfive div {
  border-radius: 16px;
  padding: clamp(.85rem, 1.5vw, 1.15rem);
  background: rgba(255, 255, 255, .05);
  transition: background .45s var(--e), transform .45s var(--e);
}
.cfive div:hover { background: rgba(255, 107, 44, .14); transform: translateY(-4px); }
.cfive b {
  display: block;
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--orange-2);
}
.cfive strong {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-d);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--cream);
}
.cfive span {
  display: block;
  margin-top: .28rem;
  font-size: .86rem;
  line-height: 1.45;
  color: #a3b3b8;
}
@media (max-width: 900px) { .cfive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cfive { grid-template-columns: 1fr; } }

/* ==========================================================================
   MATCH TIMELINE — the vertical line draws itself as you scroll
   ========================================================================== */
.tline {
  position: relative;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  padding-left: clamp(2.6rem, 4vw, 3.4rem);
}
.tline::before {
  content: "";
  position: absolute;
  left: clamp(1.05rem, 1.7vw, 1.45rem);
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: rgba(255, 255, 255, .14);
}
.tline__prog {
  position: absolute;
  left: clamp(1.05rem, 1.7vw, 1.45rem);
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--orange), var(--amber));
  transform: scaleY(0);
  transform-origin: top;
}
.no-anim .tline__prog { transform: scaleY(1); }

.tstep {
  position: relative;
  padding: clamp(.9rem, 1.7vw, 1.25rem) 0;
}
.tstep + .tstep { border-top: 1px solid rgba(255, 255, 255, .1); }
.tstep__n {
  position: absolute;
  left: clamp(-3.4rem, -4vw, -2.6rem);
  top: clamp(.95rem, 1.8vw, 1.35rem);
  display: grid;
  place-items: center;
  width: clamp(2.1rem, 3.4vw, 2.9rem);
  height: clamp(2.1rem, 3.4vw, 2.9rem);
  border-radius: 50%;
  /* the timeline sits on the warm --ink band, so the dot has to be warm too */
  background: var(--ink-2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16);
  font-family: var(--font-d);
  font-size: .8rem;
  font-weight: 600;
  color: #9fb2b8;
  transition: color .45s var(--e), box-shadow .45s var(--e), background .45s var(--e);
}
.tstep.is-on .tstep__n {
  color: var(--ink);
  background: var(--orange);
  box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 6px rgba(255, 107, 44, .14);
}
.tstep h3 { font-size: 1.02rem; letter-spacing: -.022em; margin-bottom: .35rem; }
.tstep p { font-size: .96rem; line-height: 1.65; color: #a89b8e; max-width: 74ch; }

/* letter units ("hr", "mo") need a hair more air than the "+" they share with */
.band__n sup { margin-left: .1em; }
@media (max-width: 560px) {
  .tline { padding-left: 2.4rem; }
  .tstep__n { left: -2.4rem; width: 1.9rem; height: 1.9rem; font-size: .68rem; }
}

/* ==========================================================================
   ACTIVITY COLUMNS + FILLER PHOTO STRIP
   ========================================================================== */
.acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.6rem, 3.4vw, 3.2rem);
  align-items: start;
}
@media (max-width: 760px) { .acts { grid-template-columns: 1fr; } }

.strip3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, .9vw, .8rem);
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}
.strip3 .shot { aspect-ratio: 1/1; border-radius: 16px; }
/* in the narrow column a third square would be postage-stamp sized */
.split2--lean .strip3 { grid-template-columns: 1fr 1fr; }
.split2--lean .strip3 .shot { aspect-ratio: 4/3; }

/* ==========================================================================
   GALLERY — filter chips + gapless mosaic
   ========================================================================== */
.gfilter {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}
.gfilter button {
  font-family: var(--font-d);
  font-size: .87rem;
  font-weight: 500;
  color: var(--txt-soft);
  background: transparent;
  border: 1px solid rgba(22, 18, 15, .16);
  border-radius: 999px;
  padding: .44rem 1.05rem;
  cursor: pointer;
  transition: color .35s var(--e), background .35s var(--e),
              border-color .35s var(--e), transform .35s var(--e);
}
.gfilter button:hover { border-color: rgba(22, 18, 15, .4); transform: translateY(-2px); }
.gfilter button.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.gfilter button i {
  font-style: normal;
  opacity: .45;
  margin-left: .4rem;
  font-size: .8rem;
}

/* A grid, not CSS columns. Columns balance by height, so a short filter
   result left one row of three and a dead gap beside it; a grid always fills
   the full width left-to-right and simply ends its last row. */
.gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, .9vw, .85rem);
  align-items: start;
}
.gal__i {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--sand-deep);
  cursor: pointer;
  transition: opacity .45s var(--e), transform .45s var(--e);
}
.gal__i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e);
}
.gal__i figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .85rem .7rem;
  text-align: left;
  font-family: var(--font-d);
  font-size: .84rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(11, 9, 8, .82));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--e), transform .45s var(--e);
}
.gal__i:hover img { transform: scale(1.06); }
.gal__i:hover figcaption,
.gal__i:focus-visible figcaption { opacity: 1; transform: translateY(0); }
.gal__i:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.gal__i.is-off { display: none; }

@media (max-width: 1180px) { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px)  { .gal { grid-template-columns: 1fr; } }

.gcount {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-size: .87rem;
  letter-spacing: .04em;
  color: var(--txt-mute);
}

/* ==========================================================================
   CTA BOX
   ========================================================================== */
.cbox {
  background: rgba(255, 255, 255, .07);
  border-radius: 22px;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
}
.cbox h3 {
  font-size: 1rem;
  color: var(--cream);
  margin-bottom: .9rem;
}
.cbox ul { list-style: none; padding: 0; margin: 0; }
.cbox li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .96rem;
  line-height: 1.55;
  color: #d6cabc;
}
.cbox li + li { margin-top: .7rem; }
.cbox li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .34em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--orange-2);
  border-bottom: 2px solid var(--orange-2);
  transform: rotate(-45deg);
}

/* ==========================================================================
   STANDALONE PULL QUOTE
   ========================================================================== */
.qbox {
  position: relative;
  margin-top: clamp(1.8rem, 3.2vw, 2.8rem);
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem);
  border-radius: 26px;
  background: var(--ink);
  color: #e4dad0;
  overflow: hidden;
}
.qbox::before {
  content: "\201C";
  position: absolute;
  left: clamp(.6rem, 1.4vw, 1.1rem);
  top: clamp(-1.6rem, -2vw, -1rem);
  font-family: var(--font-d);
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 1;
  color: var(--orange);
  opacity: .16;
  pointer-events: none;
}
.qbox blockquote {
  position: relative;
  font-family: var(--font-d);
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--cream);
  max-width: 62ch;
}
.qbox cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange-2);
}

/* ==========================================================================
   PHOTO CAROUSEL  (section 09)
   Replaces the scroll-pinned rail. The strip does not move on scroll any
   more — it moves only when the reader presses an arrow. The viewport is
   still a native scroller underneath, so a phone can swipe it, but the page
   never hijacks the wheel.
   ========================================================================== */
.carou-sec {
  overflow: hidden;
}
.carou__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: end;
  margin-bottom: clamp(1.3rem, 2.4vw, 2rem);
}
.carou__nav {
  display: flex;
  gap: .5rem;
  padding-bottom: .3rem;
}
.carou__btn {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 3.4vw, 3.1rem);
  height: clamp(2.6rem, 3.4vw, 3.1rem);
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  transition: background .4s var(--e), transform .4s var(--e), opacity .4s var(--e);
}
.carou__btn svg {
  width: 46%;
  height: 46%;
}
.carou__btn:hover:not(:disabled) {
  background: var(--orange);
  transform: translateY(-3px);
}
.carou__btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.carou__btn:disabled {
  opacity: .28;
  cursor: default;
}

.carou {
  position: relative;
}
.carou__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* the arrows are the control */
  overscroll-behavior-x: contain;
}
.carou__viewport::-webkit-scrollbar { display: none; }

.carou__track {
  display: flex;
  gap: clamp(.6rem, 1.1vw, 1rem);
  width: max-content;
  padding-bottom: 2px;
}
.carou__fig {
  position: relative;
  flex: 0 0 auto;
  width: clamp(15rem, 25vw, 22rem);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sand-deep);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .5s var(--e), box-shadow .5s var(--e);
}
.carou__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--e);
}
.carou__fig figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem .95rem .8rem;
  text-align: left;
  font-family: var(--font-d);
  font-size: .84rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(11, 9, 8, .84));
}
.carou__fig:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -26px rgba(22, 18, 15, .5);
}
.carou__fig:hover img { transform: scale(1.05); }
.carou__fig:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.carou__bar {
  position: relative;
  height: 3px;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  border-radius: 3px;
  background: rgba(22, 18, 15, .12);
  overflow: hidden;
}
.carou__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 28%;
  border-radius: 3px;
  background: var(--orange);
  transition: transform .45s var(--e), width .45s var(--e);
}

@media (max-width: 720px) {
  .carou__head { grid-template-columns: 1fr; align-items: start; }
  .carou__nav { padding-bottom: 0; }
  .carou__fig { width: 78vw; }
}
.carou__viewport:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
  border-radius: 22px;
}