/*
 * Healthier Essex — page styles: Start (landing), Mission, Explore.
 */

/* =========================================================================
 * START / LANDING
 * ========================================================================= */
.hero {
  position: relative;
  /* Figma's 1280×832 frame is a full laptop viewport → the hero is one screen */
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 1100px;
  overflow: hidden;
  background: var(--bg);
}
/* "Squares animation", pinned at 1:1 Figma scale on every screen.
   Measured from the exported video: cells 62.623 px wide × 67.116 px tall,
   lime lines 8 px (#cfdd8a over #d0d0d0 tiles), first vertical line centred
   at x = 49.4, first horizontal at y = 2. The video (1546 × 1004) sits
   centred; the box paints the same grid in CSS so the pattern continues on
   screens wider (or taller) than the video, and the video's edges fade into
   it so the seam is invisible. */
.hero__squares-box {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  background-color: #d0d0d0;
  /* one-cell tiles so background-position percentages anchor to the element
     centre (a plain gradient is element-sized and 50% would be a no-op) */
  background-image:
    linear-gradient(90deg, #cfdd8a 0 8px, transparent 8px),
    linear-gradient(180deg, #cfdd8a 0 8px, transparent 8px);
  background-size: 62.623px 100%, 100% 67.116px;
  /* video line k=0 starts at centre − 727.6 px ⇒ ≡ centre + 23.88 (mod pitch);
     a 50%-placed tile starts at centre − 31.31 ⇒ shift by 55.19 px */
  background-position: calc(50% + 55.19px) 0, 0 -2px;
}
.hero__squares {
  position: absolute;
  top: 0;
  left: calc(50% - 773px);
  width: 1546px;
  height: 1004px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%),
    linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%),
    linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%);
  mask-composite: intersect;
}
:root[data-theme="light"][data-simplified="false"] .hero__squares-box {
  display: block;
}
.hero__inner {
  position: absolute;
  inset: var(--margin) var(--margin) 40px;
  max-width: calc(var(--page-max) - var(--margin) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Title / subtitle clips (Figma: "Title Clip" / "Subtitle Clip") */
.hero__titles {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;               /* Figma: block centre at 352 / 832 */
  height: 0;
}
/* Title and subtitle share the same centre; each clip hugs its own text */
.clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  translate: 0 -50%;
  padding: 0.1em 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.clip > * {
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .clip > * {
    white-space: normal;
  }
}

/* Dark + light flows: title wipes in, out; subtitle wipes in (7.42s loop) */
:root[data-simplified="false"] .clip--title {
  animation: title-wipe var(--hero-loop) linear infinite;
}
:root[data-simplified="false"] .clip--sub {
  animation: sub-wipe var(--hero-loop) linear infinite;
}
:root[data-simplified="false"] .hero__info {
  animation: info-in var(--hero-loop) linear infinite;
}
/* Simplified / high-contrast flow: static title only */
:root[data-simplified="true"] .clip--sub,
:root[data-theme="contrast"] .clip--sub {
  display: none;
}
:root[data-theme="contrast"] .clip--title,
:root[data-theme="contrast"] .hero__info {
  animation: none;
}
:root[data-simplified="true"] .clip--title {
  clip-path: inset(0 0 0 0);
}

@keyframes title-wipe {
  0%      { clip-path: inset(0 100% 0 0); translate: 0 -3px; animation-timing-function: ease; }
  13.47%  { translate: 0 3px; animation-timing-function: ease-in-out; }
  16.17%  { clip-path: inset(0 0 0 0); }
  17.52%  { translate: 0 0; }
  36.38%  { clip-path: inset(0 0 0 0); animation-timing-function: ease; }
  48.5%   { clip-path: inset(0 0 0 100%); }
  100%    { clip-path: inset(0 0 0 100%); translate: 0 0; }
}
@keyframes sub-wipe {
  0%      { clip-path: inset(0 100% 0 0); translate: 0 0; }
  51.2%   { clip-path: inset(0 100% 0 0); translate: 0 -3px; animation-timing-function: ease; }
  70.06%  { translate: 0 3px; animation-timing-function: ease-in-out; }
  72.75%  { clip-path: inset(0 0 0 0); }
  74.1%   { translate: 0 0; }
  100%    { clip-path: inset(0 0 0 0); translate: 0 0; }
}
@keyframes info-in {
  0%      { opacity: 0; translate: 0 20px; }
  24.25%  { opacity: 0; translate: 0 20px; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  32.34%  { translate: 0 -6px; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  33.68%  { opacity: 1; }
  37.72%  { translate: 0 2px; }
  41.77%  { translate: 0 0; }
  100%    { opacity: 1; translate: 0 0; }
}

.hero__info {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.hero__info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.hero__cta {
  max-width: 412px;
}
.hero__credit a:hover {
  text-decoration: underline;
}

/* Insights piece */
.insights {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.insights__meta {
  flex: 0 0 auto;
}
.insights__col {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 12.5vw, 200px);
  width: 74.7%;              /* 893 / 1196 */
  max-width: 100%;
}
.insights__quote {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: var(--measure-quote);
}
.insights__quote p + p {
  margin-top: 16px;
}
@media (max-width: 900px) {
  .insights {
    flex-direction: column;
  }
  .insights__col {
    gap: 64px;
  }
}

/* Chapters (Risks / Behaviours) */
.chapter-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(120px, 25vw, 360px);
}
.chapter-block__group {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 12.5vw, 200px);
}
.chapter-head {
  text-align: center;
  align-self: center;
}
.chapter-head .t-h2 {
  color: var(--fg-muted);
}
.chapter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(44.6%, var(--measure-body)));
  gap: var(--gutter);
  align-items: start;
}
.chapter-row > .t-body {
  max-width: var(--measure-body);
}
.chapter-row__label {
  color: var(--fg-muted);
  font-weight: 500;
}
@media (max-width: 900px) {
  .chapter-block {
    gap: 120px;
  }
  .chapter-block__group {
    gap: 64px;
  }
  .chapter-row {
    grid-template-columns: 1fr;
  }
}

/* Lead dot under the chapter heading → flies into the first dot cluster */
.lead-dot {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--data-b);
  margin: -100px auto 0;
  --dx: 0px;
  --dy: 0px;
}
:root[data-simplified="false"] .lead-dot {
  animation: lead-pulse 0.7s ease-in-out infinite alternate;
}
:root[data-simplified="false"] .is-in .lead-dot {
  animation: lead-fly 0.9s ease-in 0.2s both;
}
:root[data-simplified="true"] .lead-dot {
  display: none;
}
@keyframes lead-pulse {
  from { scale: 0.5; }
  to   { scale: 1.5; }
}
@keyframes lead-fly {
  0%   { translate: 0 0; scale: 1; opacity: 1; }
  90%  { translate: var(--dx) var(--dy); scale: 1; opacity: 1; }
  100% { translate: var(--dx) var(--dy); scale: 1; opacity: 0; }
}

/* Childhood obesity dot chart */
.obesity {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 40px;
}
.obesity__titles {
  display: flex;
  justify-content: space-between;
  width: 718px;
  max-width: 100%;
  text-align: center;
}
.obesity__title {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.obesity__num {
  font-variant-numeric: tabular-nums;
}
.obesity__clusters {
  display: flex;
  gap: 243px;
  align-items: center;
}
.dots {
  position: relative;
  height: 214.8px;
  flex: 0 0 auto;
}
.dots--45 {
  width: 363px;
}
.dots--1011 {
  width: 395px;
}
.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--data-b);
  --from-x: 0px;
  --from-y: 0px;
  opacity: 0;
}
.dot--o {
  background: var(--data-a);
}
/* Data dots as counters on a table: a flat disc with a bevelled edge and a
   short, soft shadow from a light directly above — reads at 20 px without the
   shadows of neighbours overlapping. (Glass marbles via js/marble.js are
   opt-in with <html data-dots="marbles">.) High contrast keeps flat discs. */
.dot, .lead-dot, .legend i, .dot-shadow { --orb: var(--data-b); --marble: var(--marble-g); --marble-shadow: var(--marble-shadow-g); }
.dot--o, .legend i.is-o, .dot-shadow--o { --orb: var(--data-a); --marble: var(--marble-o); --marble-shadow: var(--marble-shadow-o); }
.dots, .legend span, .chapter-head { isolation: isolate; }
:root:not([data-theme="contrast"]) .dot,
:root:not([data-theme="contrast"]) .lead-dot,
:root:not([data-theme="contrast"]) .legend i {
  background-color: var(--orb);
  background-image:
    radial-gradient(circle at 50% 42%,
      color-mix(in oklab, var(--orb) 90%, white) 0%,
      var(--orb) 58%,
      color-mix(in oklab, var(--orb) 80%, black) 82%,
      color-mix(in oklab, var(--orb) 55%, black) 100%);
  box-shadow:
    0 1px 1px var(--counter-contact),
    0 2px 3px -1px var(--counter-shadow);
}
:root:not([data-theme="contrast"]) .has-marbles .dot,
:root:not([data-theme="contrast"]) .has-marbles .lead-dot,
:root:not([data-theme="contrast"]) .has-marbles .legend i {
  background: var(--marble) center / 100% 100% no-repeat;
  box-shadow: none;
}
/* Shadow sprites: siblings placed before the dots (see buildDots), 60 px box
   centred on a 20 px dot = ±3 radii. Fade in with their marble. */
.dot-shadow {
  display: none;
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--marble-shadow) center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
}
:root:not([data-theme="contrast"]) .has-marbles .dot-shadow {
  display: block;
}
:root[data-simplified="true"] .dot-shadow,
.is-in .dot-shadow {
  opacity: 1;
}
:root[data-simplified="false"] .is-in .dot-shadow {
  animation: shadow-in 0.5s ease-out calc(0.25s + var(--i) * 14ms) both;
}
@keyframes shadow-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* legend keys are static, so a ::before shadow is safe there */
.legend i { position: relative; }
:root:not([data-theme="contrast"]) .has-marbles .legend i::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: var(--marble-shadow) center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
:root:not([data-theme="contrast"]) .legend i {
  box-shadow:
    inset 0 -1px 1.5px var(--orb-bounce),
    0 0.5px 1px var(--orb-contact),
    0 3px 4px -1.5px var(--orb-shadow),
    0 6px 8px -4px var(--orb-penumbra);
}
:root:not([data-theme="contrast"]) .legend i {
  box-shadow: 0 3px 4px -1px var(--orb-shadow), 0 1px 1px var(--orb-contact);
}
:root[data-simplified="true"] .dot,
.is-in .dot {
  opacity: 1;
}
:root[data-simplified="false"] .is-in .dot {
  animation: dot-in 0.6s var(--ease-out) calc(var(--i) * 14ms) both,
             dot-pulse 0.7s ease-in-out calc(1.6s + var(--i) * 14ms) 4 alternate;
}
@keyframes dot-in {
  from { opacity: 0; translate: var(--from-x) var(--from-y); scale: 0; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes dot-pulse {
  from { scale: 1.05; }
  to   { scale: 0.95; }
}
.obesity__legends {
  display: flex;
  gap: 356px;
  width: 893px;
  max-width: 100%;
}
.legend {
  display: flex;
  gap: var(--gutter);
  align-items: center;
  height: 22px;
  font-weight: 500;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--data-b);
}
.legend i.is-o {
  background: var(--data-a);
}
@media (max-width: 1100px) {
  .obesity__clusters {
    gap: 40px;
    flex-wrap: wrap;
  }
  .obesity__legends {
    gap: 40px;
    flex-wrap: wrap;
  }
  .obesity__titles {
    width: 100%;
    max-width: 640px;
  }
}

/* Districts */
.districts-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.districts {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 122px;
  overflow: visible;
}
.district {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 56px;
  flex: 0 0 auto;
}
.district__circle {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--data-a);
  color: #ececec;             /* on #5e5d1f → 5.6:1 (Place+ grey is 4.4:1) */
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0;
  opacity: 0;
}
:root[data-theme="contrast"] .district__circle {
  color: var(--c-grey);
}
.district__name {
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0;
  text-align: center;
  opacity: 0;
}
:root[data-simplified="true"] .district__circle,
:root[data-simplified="true"] .district__name,
.is-in .district__circle,
.is-in .district__name {
  opacity: 1;
}
:root[data-simplified="false"] .is-in .district__circle {
  animation: circle-in 0.6s var(--ease-out) calc(var(--i) * 60ms) both,
             district-pulse 0.7s ease-in-out calc(1.4s + var(--i) * 60ms) 6 alternate;
}
:root[data-simplified="false"] .is-in .district__name {
  animation: rise-in 0.5s var(--ease-out) calc(0.4s + var(--i) * 60ms) both;
}
@keyframes circle-in {
  from { opacity: 0; scale: 0; }
  to   { opacity: 1; scale: 1; }
}
@keyframes district-pulse {
  from { scale: 1.013; }
  to   { scale: 0.987; }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (max-width: 1100px) {
  .districts {
    flex-wrap: wrap;
    height: auto;
    justify-content: flex-start;
    gap: 16px;
  }
}

/* Chapter navigation (A / B / C) — sticky in the right-hand chapter padding */
.chapter-nav {
  position: absolute;
  top: 80px;
  right: var(--margin);
  bottom: 0;
  width: 0;
  pointer-events: none;
}
.chapter-nav__list {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: auto;
  transform: translateX(-100%);
}
.chapter-nav .tag {
  gap: 10px;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.chapter-nav .tag:hover,
.chapter-nav .tag.is-current {
  opacity: 1;
}
@media (max-width: 900px) {
  .chapter-nav {
    display: none;
  }
}

/* Time-series chart */
.chart-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.chart-block__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chart {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0 24px;
  align-items: stretch;
}
.chart__ylabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  justify-self: center;
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 58px;
}
.chart__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart__svg text {
  font-family: var(--font);
  font-weight: 300;
  font-size: 12px;
  fill: var(--fg-muted);
  letter-spacing: 0;
}
.chart__svg .grid {
  stroke: var(--chart-line);
  stroke-width: 0.7;
}
.chart__svg .axis {
  stroke: var(--chart-line);
  stroke-width: 5;
}
.chart__svg .vline {
  stroke: var(--chart-line);
  stroke-width: 0.7;
  transition: opacity 0.4s var(--ease-soft);
}
.chart__svg .area-1 { fill: var(--chart-1); }
.chart__svg .area-2 { fill: var(--chart-2); }
.chart__svg .area-3 { fill: var(--chart-3); }
.chart__svg .area {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.chart__svg .nodata {
  fill: var(--fg-muted);
  opacity: 0.35;
}
.chart__svg .sq {
  stroke: var(--chart-line);
  stroke-width: 0.7;
  rx: 1;
}
.chart__svg .sq-1 { fill: var(--chart-1); }
.chart__svg .sq-2 { fill: var(--chart-2); }
.chart__svg .sq-3 { fill: var(--chart-3); }
.chart__svg .sq,
.chart__svg .area {
  opacity: 0;
}
:root[data-simplified="true"] .chart__svg .sq,
:root[data-simplified="true"] .chart__svg .area {
  opacity: 1;
}
:root[data-simplified="false"] .is-in .chart__svg .area {
  animation: area-rise 0.7s var(--ease-soft) calc(var(--i) * 0.12s) both;
}
:root[data-simplified="false"] .is-in .chart__svg .sq {
  animation: sq-in 0.5s var(--ease-soft) calc(0.3s + var(--i) * 0.03s) both;
}
:root[data-simplified="false"] .is-in .chart__svg .vline {
  animation: vline-dim 0.3s var(--ease-soft) 1.2s both;
}
:root[data-simplified="false"] .is-in .chart__svg .vline.is-hi-1 {
  animation: vline-hi-1 3.4s var(--ease-soft) 1.2s both;
}
:root[data-simplified="false"] .is-in .chart__svg .vline.is-hi-2 {
  animation: vline-hi-2 3.4s var(--ease-soft) 1.2s both;
}
@keyframes area-rise {
  from { opacity: 0; transform: translateY(250px) scaleY(0); }
  to   { opacity: 1; transform: none; }
}
@keyframes sq-in {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes vline-dim {
  to { opacity: 0.25; }
}
@keyframes vline-hi-1 {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0.25; }
}
@keyframes vline-hi-2 {
  0%   { opacity: 1; }
  15%  { opacity: 0.25; }
  70%  { opacity: 0.25; }
  100% { opacity: 1; }
}

/* Chart pop-ups */
.popup {
  position: absolute;
  padding: 8px;
  border-radius: 2px 2px 2px 0;
  background: var(--popup-bg);
  color: var(--c-grey);
  width: 173px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.popup__title {
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 16px;
}
.popup__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 10px;
  border-left: 0.7px solid var(--c-mid-grey);
  border-top: 0.7px solid var(--c-mid-grey);
  border-bottom: 0.7px solid var(--c-mid-grey);
  padding-block: 4px;
}
.popup__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 14px;
}
.popup__row em {
  font-style: normal;
  color: var(--c-mid-grey);
}
.popup__row strong {
  font-weight: 500;
}
.popup__row i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.popup__row i.c1 { background: var(--chart-1); }
.popup__row i.c2 { background: var(--chart-2); }
.popup__row i.c3 { background: var(--chart-3); }
:root[data-simplified="true"] .popup {
  opacity: 1;
}
:root[data-simplified="false"] .is-in .popup--1 {
  animation: popup-1 3.4s var(--ease-soft) 1.2s both;
}
:root[data-simplified="false"] .is-in .popup--2 {
  animation: popup-2 3.4s var(--ease-soft) 1.2s both;
}
@keyframes popup-1 {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes popup-2 {
  0%   { opacity: 0; }
  85%  { opacity: 0; }
  100% { opacity: 1; }
}
.chart__source {
  margin-top: 16px;
}
@media (max-width: 900px) {
  .popup {
    display: none;
  }
}

/* =========================================================================
 * MISSION
 * ========================================================================= */
.mission {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6.25vw, 100px);
  padding: var(--margin) var(--margin) 40px;
}
.mission__intro {
  width: 74.7%;
  max-width: var(--measure-quote);
  align-self: flex-end;
}
.mission__list {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.mission__row {
  display: grid;
  grid-template-columns: 28% 28% minmax(0, 1fr);
  gap: 0 21px;
  align-items: start;
}
.mission__row .t-body {
  max-width: var(--measure-body);
}
:root[data-simplified="false"] .mission__row {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
  transition-delay: calc(var(--i) * 120ms);
}
:root[data-simplified="false"] .mission__row.is-in {
  opacity: 1;
  translate: 0 0;
}
@media (max-width: 900px) {
  .mission {
    gap: 48px;
  }
  .mission__row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
  }
  .mission__row .t-body {
    grid-column: 2;
  }
}

/* =========================================================================
 * EXPLORE (Digital Place Portrait)
 * ========================================================================= */
.explore {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 30.7vw, 480px);
  padding-top: clamp(96px, 14.4vw, 220px);
}
.explore__title {
  position: relative;
  height: 70px;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.explore__title h1 {
  text-align: center;
}
:root[data-simplified="false"] .explore__title {
  animation: title-in 1.2s ease both;
}
@keyframes title-in {
  0%   { clip-path: inset(0 100% 0 0); translate: 0 -3px; animation-timing-function: ease-out; }
  83%  { translate: 0 3px; animation-timing-function: ease-in-out; }
  100% { clip-path: inset(0 0 0 0); translate: 0 0; }
}
.themes {
  display: flex;
  min-height: max(600px, min(100vh, 1100px));
}
.theme {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: var(--theme-bg);
  color: var(--theme-fg);
  padding: 28px var(--margin) var(--margin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--margin);
  transition: flex 0.6s var(--ease-soft);
  overflow: hidden;
}
.theme--01 { --theme-bg: var(--theme-01); }
.theme--02 { --theme-bg: var(--theme-02); }
.theme--03 { --theme-bg: var(--theme-03); }
.theme--04 { --theme-bg: var(--theme-04); }
.themes[data-open] .theme {
  flex: 0 0 17.5%;
}
.themes[data-open] .theme.is-open {
  flex: 0 0 47.5%;
  padding-right: 160px;
}
.theme__head {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  text-align: left;
  color: inherit;
  white-space: nowrap;
}
.theme__head:hover .theme__name {
  text-decoration: underline;
}
.theme__name {
  opacity: 0;
  transition: opacity 0.3s;
}
.theme.is-open .theme__name {
  opacity: 1;
}
.theme__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 40px;
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.4s var(--ease-soft), translate 0.4s var(--ease-soft);
  min-width: 308px;
  pointer-events: none;
}
.theme.is-open .theme__body {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.25s;
  pointer-events: auto;
}
.theme__text {
  margin-top: var(--margin);
  max-width: var(--measure-body);
}
.theme__sub {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}
.theme__sub .t-medium {
  max-width: 308px;
}
.cats {
  display: flex;
  flex-direction: column;
  width: 308px;
  max-width: 100%;
}
.cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: var(--btn-pad);
  border-radius: 2px;
  background: rgba(113, 113, 113, 0.3);
  transition: background 0.2s, translate 0.2s;
}
.cats li:nth-child(even) a {
  background: rgba(169, 169, 169, 0.25);
}
.cats a:hover {
  background: rgba(43, 36, 44, 0.18);
  translate: 4px 0;
}
.cats svg {
  width: 14px;
  height: 11px;
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .explore {
    gap: 80px;
    padding-top: 96px;
  }
  .themes {
    flex-direction: column;
    min-height: 0;
  }
  .themes[data-open] .theme,
  .themes[data-open] .theme.is-open,
  .theme {
    flex: 0 0 auto;
    padding-right: var(--margin);
    min-height: 96px;
  }
  .theme__body {
    display: none;
  }
  .theme.is-open .theme__body {
    display: flex;
  }
  .theme__name {
    opacity: 1;
  }
}