/* src/css/styles.css */
@property --scrollbar-thumb {
  syntax: "<color>";
  inherits: true;
  initial-value: #0000;
}

@property --scrollbar-thumb-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #0000;
}

:root {
  --color-neutral: ghostwhite;
  --color-primary: darkseagreen;
  --color-secondary: olive;
  --color-tertiary: salmon;
  --color-accent: tomato;
  --color-accent-alt: orange;
  --color-featured: plum;
  --color-cta: chartreuse;
  --bg-primary: var(--buncss-light, oklch(from var(--color-primary) calc(l + .2) c h)) var(--buncss-dark, oklch(from var(--color-primary) calc(l - .2) c h));
  --bg-secondary: var(--buncss-light, oklch(from var(--color-secondary) calc(l + .15) c h)) var(--buncss-dark, oklch(from var(--color-secondary) calc(l - .15) c h));
  --bg-tertiary: var(--buncss-light, oklch(from var(--color-tertiary) calc(l + .16) c h)) var(--buncss-dark, oklch(from var(--color-tertiary) calc(l - .16) c h));
  --text-primary: var(--buncss-light, #000) var(--buncss-dark, #fff);
  --bg-surface: var(--buncss-light, oklch(from var(--color-neutral) calc(l + .31) c h)) var(--buncss-dark, oklch(from var(--color-neutral) calc(l - .31) c h));
  --bg-accent: var(--buncss-light, oklch(from var(--color-accent) l c h)) var(--buncss-dark, oklch(from var(--color-accent) calc(l - .2) c h));
  --bg-featured: var(--buncss-light, oklch(from var(--color-featured) calc(l + .2) c h)) var(--buncss-dark, oklch(from var(--color-featured) calc(l - .2) c h));
  --bg-monthly-vibe: var(--buncss-light, oklch(from var(--color-accent-alt) calc(l + .1) c h)) var(--buncss-dark, oklch(from var(--color-accent-alt) calc(l - .1) c h));
  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--buncss-light, oklch(from var(--color-primary) l .05 h)) var(--buncss-dark, oklch(from var(--color-primary) calc(l - .1) .05 h));
  --scrollbar-thumb-hover: var(--buncss-light, oklch(from var(--color-primary) calc(l - .1) .08 h)) var(--buncss-dark, oklch(from var(--color-primary) l .08 h));
  --gutter-outer: clamp(4%, 5vw, 10%);
  --gutter-inner: clamp(2%, 3vw, 5%);
  --gutter-block: clamp(2vh, 3vh, 5vh);
  --gutter-content: clamp(2rem, 5vw, 4rem);
  --section-height-extended: 150vh;
  --font-sans: "Syne", sans-serif;
  --font-serif: "IBM Plex Serif", serif;
  --text-xs: clamp(.75rem, 1.5vw, .875rem);
  --text-sm: clamp(.875rem, 1.5vw, 1rem);
  --text-base: clamp(1.25rem, 2.5vw, 2rem);
  --text-lg: clamp(1.5rem, 3vw, 2.5rem);
  --text-xl: clamp(2rem, 4vw, 3.5rem);
  --text-2xl: clamp(3rem, 8vw, 6rem);
  --text-3xl: clamp(4rem, 10vw, 8rem);
  --text-4xl: clamp(4rem, 12vw, 10rem);
  --text-5xl: clamp(4rem, 15vw, 12rem);
  --tracking-tight: -.02em;
  --tracking-wide: .05em;
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --buncss-light: ;
    --buncss-dark: initial;
  }
}

@layer reset {
  *, *:before, *:after {
    box-sizing: border-box;
  }

  :where(*) {
    margin: 0;
    padding: 0;
  }

  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

body:has([name="dark-mode"]:checked) {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark only;
}

@media (prefers-color-scheme: dark) {
  body {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark only;
  }
}

.section-full-viewport {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light dark;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-block-size: 100vh;
  inline-size: 100%;
}

@media (prefers-color-scheme: dark) {
  .section-full-viewport {
    --buncss-light: ;
    --buncss-dark: initial;
  }
}

.image-full {
  object-fit: cover;
  object-position: center;
  block-size: 100%;
  inline-size: 100%;
}

.text-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
}

.text-serif {
  font-family: var(--font-serif);
}

.text-italic {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  min-inline-size: 20rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
    transition: scrollbar-color .5s;
  }
}

.no-select {
  cursor: default;
  user-select: none;
}

:where(h1, h2, h3, h4, h5, h6, p, time, img) {
  cursor: default;
  user-select: none;
}

:where(img, picture) {
  pointer-events: none;
}

@layer hero {
  @property --hero-column-width {
    syntax: "<percentage>"; inherits: false; initial-value: 100%;
  }

  @property --hero-content-block-size {
    syntax: "<length-percentage>"; inherits: false; initial-value: 50vh;
  }

  @property --hero-translate {
    syntax: "<length>"; inherits: false; initial-value: 0;
  }

  @keyframes hero-columns-shift {
    0% {
      --hero-column-width: 40%;
      --hero-content-block-size: 50vh;
      --hero-translate: 0;
    }

    99.9% {
      --hero-column-width: 100%;
      --hero-content-block-size: 100vh;
      --hero-translate: 0;
    }

    100% {
      --hero-column-width: 100%;
      --hero-content-block-size: 100vh;
      --hero-translate: 50vh;
    }
  }

  .hero-scroll-track {
    min-block-size: 150vh;
    inline-size: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    background-color: var(--bg-tertiary);
    contain: paint;
  }

  .hero-header {
    display: grid;
    grid-template-rows: var(--hero-content-block-size, 50vh) calc(100vh - var(--hero-content-block-size, 50vh));
    grid-template-areas: "content" "image";
    block-size: 100vh;
    inline-size: 100%;
    color-scheme: light dark;
  }

  .hero-header__content {
    grid-area: content;
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    text-transform: uppercase;
    z-index: 2;
    container-type: size;
  }

  .hero-header__content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content:  center;
    block-size: 100%;
  }

  .hero-header__nav {
    position: fixed;
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr 1fr var(--gutter-outer);
    grid-template-areas: ". brand date .";
    align-items:  start;
    padding-inline: var(--gutter-outer);
    z-index: 3;
    inset-block-start: var(--gutter-block);
    inline-size: 100%;
  }

  .hero-header__brand {
    grid-area: brand;
    font-family: var(--font-sans);
    font-size: clamp(.875rem, 2vw, 1.125rem);
    font-weight: 700;
    color: var(--text-primary);
    text-align: start;
  }

  .hero-header__date {
    grid-area: date;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
    text-align: end;
  }

  .hero-header__title {
    display: grid;
    grid-template-rows: auto auto;
    justify-content: center;
    align-content:  center;
    gap: 0;
    transform: translateY(var(--hero-translate));
    filter: invert(progress(var(--hero-translate), 0vh, 50vh));
  }

  @media (prefers-color-scheme: dark) {
    .hero-header__title {
      filter: none;
    }
  }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero-header__title {
        animation: hero-columns-shift linear forwards;
        animation-timeline: scroll(root);
        animation-range: entry 0% exit 20%;
      }
    }
  }

  .hero-header__title-line {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 15vw, var(--text-5xl));
    font-weight: 900;
    line-height: .85;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: var(--tracking-tight);
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-header__title-line {
      transition: font-size .3s ease-out;
    }
  }

  @container (block-size < 40vh) {
    .hero-header__title-line {
      font-size: clamp(2.5rem, 10vw, var(--text-4xl));
    }
  }

  .hero-header__image-container {
    grid-area: image;
    display: grid;
    grid-template-columns: calc(100% - var(--hero-column-width)) var(--hero-column-width);
    grid-auto-rows: min-content;
    inline-size: 100%;
    block-size: 100%;
    position: relative;
    scroll-snap-type: y mandatory;
    align-content:  start;
  }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero-header__image-container {
        animation: hero-columns-shift linear forwards;
        animation-timeline: scroll(root);
        animation-range: entry 0% exit 20%;
      }
    }
  }

  .hero-header__picture {
    display: flex;
    align-self: stretch;
    overflow: hidden;
    z-index: 1;
    min-block-size: 100%;
    grid-row: 1 / -1;
  }

  .hero-header__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    grid-column: 2;
  }

  .hero-header__image-text {
    contain: strict;
    container: hero-image-text;
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr var(--gutter-outer);
    grid-template-areas: ". text .";
    align-items:  center;
    block-size: 50vh;
    background-color: var(--bg-tertiary);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .hero-header__image-text:nth-of-type(2) {
    background-color: var(--bg-surface);
    filter: invert(1);
  }

  @media (prefers-color-scheme: dark) {
    .hero-header__image-text:nth-of-type(2) {
      filter: none;
      opacity: 1;
    }
  }

  @container hero-image-text (inline-size < 50vw) {
    .hero-header__image-text:nth-of-type(2) {
      display: none;
    }
  }

  .hero-header__image-text:nth-of-type(2) p {
    font-size: var(--text-lg);
    min-inline-size: 20vw;
  }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero-header__image-text:nth-of-type(2) p {
        animation: hero-text-fadeout linear forwards;
        animation-timeline: scroll(root);
        animation-range: entry 8% exit 25%;
      }
    }
  }

  @keyframes hero-text-fadeout {
    from {
      opacity: 0;
    }

    20% {
      opacity: 1;
    }

    50% {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .hero-header__image-text p {
    grid-area: text;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--text-primary);
    text-wrap: pretty;
  }

  @media (max-inline-size: calc(48rem - .001px)) {
    .hero-scroll-track {
      min-block-size: 250vh;
    }

    .hero-header {
      grid-template-rows: 60vh 40vh;
    }

    .hero-header__content {
      block-size: 60vh;
    }

    .hero-header__title-line {
      font-size: clamp(3rem, 12vw, 6rem);
    }

    .hero-header__image-container {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto auto;
    }

    .hero-header__picture {
      grid-row: 1 / 2;
    }

    .hero-header__image-text {
      block-size: auto;
      min-block-size: 30vh;
    }
  }
}

@layer monthly-vibe {
  .monthly-vibe-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: 100vh;
    inline-size: 100%;
    color-scheme: light dark;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--bg-primary);
  }

  .monthly-vibe-section__content {
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr var(--gutter-inner);
    grid-template-rows: var(--gutter-content) auto 1fr auto var(--gutter-content);
    grid-template-areas: ". . ." ". label ." ". title ." ". footer ." ". . .";
    background-color: var(--bg-monthly-vibe);
    block-size: var(--section-height-extended);
  }

  .monthly-vibe-section__label {
    grid-area: label;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
  }

  .monthly-vibe-section__title {
    grid-area: title;
    font-family: var(--font-serif);
    font-size: clamp(3rem, 9vw, 10rem);
    font-weight: 700;
    line-height: .9;
    color: var(--text-primary);
    align-self:  start;
    position: sticky;
    inset: calc(50vh - var(--gutter-content));
    margin-block: calc(1.5rem + var(--gutter-content));
  }

  .monthly-vibe-section__footer {
    grid-area: footer;
    display: flex;
    align-items:  end;
  }

  .monthly-vibe-section__footer-item {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
  }

  .monthly-vibe-section__image-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items:  center;
    overflow: hidden;
    block-size: 100vh;
    position: sticky;
    inset: 0;
  }

  .monthly-vibe-section__image {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  .monthly-vibe-section__cta {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    place-items:  center;
    inline-size: clamp(10rem, 20vw, 15rem);
    block-size: clamp(10rem, 20vw, 15rem);
    background-color: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    text-decoration: none;
    z-index: 1;
    border-radius: 50%;
  }

  .monthly-vibe-section__date {
    position: absolute;
    inset-block-end: var(--gutter-content);
    inset-inline-end: var(--gutter-content);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    filter: invert(1);
    mix-blend-mode: difference;
  }

  @supports (color: contrast-color(white vs black, white)) {
    .monthly-vibe-section__date {
      filter: none;
      mix-blend-mode: normal;
      color: contrast-color(from var(--bg-primary) srgb vs white, black);
    }
  }

  @media (max-inline-size: calc(48rem - .001px)) {
    .monthly-vibe-section {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .monthly-vibe-section__title {
      font-size: clamp(3rem, 15vw, 6rem);
    }
  }
}

@layer featured {
  .featured-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: 100vh;
    inline-size: 100%;
    color-scheme: light dark;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--bg-featured);
    container-type: size;
  }

  .featured-section__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .featured-section__link:hover .featured-section__content {
    opacity: .95;
  }

  .featured-section__content {
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr var(--gutter-inner);
    grid-template-rows: var(--gutter-content) auto 1fr auto auto var(--gutter-content);
    grid-template-areas: ". . ." ". title ." ". . ." ". project-name ." ". prompt ." ". . .";
    align-self: stretch;
    min-block-size: 100vh;
    block-size: 100%;
    block-size: stretch;
    transition: opacity .2s;
  }

  .featured-section__title {
    grid-area: title;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    view-transition-name: featured-title;
  }

  .featured-section__project-name {
    grid-area: project-name;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--text-primary);
  }

  .featured-section__prompt {
    grid-area: prompt;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    margin-block-start: clamp(.5rem, 1vh, 1rem);
  }

  .featured-section__image-container {
    background-color: var(--bg-primary);
    position: relative;
    display: grid;
    place-items:  center;
    overflow: visible;
  }

  .featured-section__image {
    inline-size: min(100%, 100vh);
    block-size: min(100%, 100vh);
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    view-transition-name: featured-image;
    color-scheme: light dark;
  }

  @media (min-width: 80rem) {
    .featured-section__image {
      clip-path: circle(min(22cqi, 40%));
    }
  }

  .featured-section__author {
    position: absolute;
    inset-block-end: var(--gutter-content);
    inset-inline: 0;
    font-family: var(--font-sans);
    font-size: clamp(.875rem, 1.5vw, 1.125rem);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    text-transform: uppercase;
    text-align: center;
    padding-inline: var(--gutter-content);
    z-index: 1;
    view-transition-name: featured-author;
    filter: invert(1);
  }

  @media (min-width: 80rem) {
    .featured-section__author {
      filter: none;
    }
  }

  @media (max-width: 48rem) {
    .featured-section {
      grid-template-columns: 1fr;
      grid-template-rows: 50vh 50vh;
    }

    .featured-section__content {
      min-block-size: auto;
    }
  }
}

@layer agenda {
  .agenda-section {
    display: grid;
    grid-template-rows: auto 1fr 1fr 1fr auto;
    grid-template-areas: "header" "part-one" "part-two" "part-three" "footer";
    min-block-size: 100vh;
    max-block-size: 100vh;
    inline-size: 100%;
    color-scheme: light dark;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  @media (prefers-reduced-motion: no-preference) {
    .agenda-section {
      transition: grid-template-rows .3s;
    }
  }

  .agenda-section:has(.agenda-item:nth-child(2)[open]) {
    grid-template-rows: auto 2fr .5fr .5fr auto;
  }

  .agenda-section:has(.agenda-item:nth-child(2)[open]) .agenda-item:not([open]) .agenda-item__text {
    font-size: var(--text-lg);
  }

  .agenda-section:has(.agenda-item:nth-child(2)[open]) .agenda-item:not([open]) .agenda-item__number {
    font-size: var(--text-2xl);
  }

  .agenda-section:has(.agenda-item:nth-child(3)[open]) {
    grid-template-rows: auto .5fr 2fr .5fr auto;
  }

  .agenda-section:has(.agenda-item:nth-child(3)[open]) .agenda-item:not([open]) .agenda-item__text {
    font-size: var(--text-lg);
  }

  .agenda-section:has(.agenda-item:nth-child(3)[open]) .agenda-item:not([open]) .agenda-item__number {
    font-size: var(--text-2xl);
  }

  .agenda-section:has(.agenda-item:nth-child(4)[open]) {
    grid-template-rows: auto .5fr .5fr 2fr auto;
  }

  .agenda-section:has(.agenda-item:nth-child(4)[open]) .agenda-item:not([open]) .agenda-item__text {
    font-size: var(--text-lg);
  }

  .agenda-section:has(.agenda-item:nth-child(4)[open]) .agenda-item:not([open]) .agenda-item__number {
    font-size: var(--text-2xl);
  }

  .agenda-item {
    border: none;
    color: inherit;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
  }

  .agenda-item[open] {
    overflow: hidden;
  }

  .agenda-item summary {
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr auto var(--gutter-outer);
    grid-template-areas: ". text number .";
    align-items:  center;
    padding-block: calc(var(--gutter-block) * 1.5);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .agenda-item summary {
      transition: opacity .2s;
    }
  }

  .agenda-item summary::-webkit-details-marker {
    display: none;
  }

  .agenda-item summary:hover {
    opacity: .8;
  }

  .agenda-item[open] summary {
    padding-block-end: var(--gutter-block);
  }

  .agenda-item:has(.show-and-tell)[open] summary {
    padding-block-end: 0;
  }

  .agenda-item__content {
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr var(--gutter-outer);
    grid-template-areas: ". content .";
    padding-block-end: calc(var(--gutter-block) * 1.5);
  }

  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      .agenda-item__content {
        opacity: 1;
        transition: opacity .3s;
      }

      @starting-style {
        .agenda-item__content {
          opacity: 0;
        }
      }
    }
  }

  .agenda-item__content > * {
    grid-area: content;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-primary);
  }

  .agenda-item__content.show-and-tell {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: none;
    padding: 0;
    block-size: 100%;
  }

  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      .agenda-item__content.show-and-tell {
        opacity: 1;
        transition: opacity .3s;
      }

      @starting-style {
        .agenda-item__content.show-and-tell {
          opacity: 0;
        }
      }
    }
  }

  .agenda-item__content.show-and-tell > * {
    grid-area: auto;
  }

  .show-and-tell__card {
    display: grid;
    grid-template-columns: var(--gutter-inner) 1fr var(--gutter-inner);
    grid-template-rows: var(--gutter-block) auto auto 1fr var(--gutter-block);
    grid-template-areas: ". . ." ". number ." ". question ." ". description ." ". . .";
    row-gap: clamp(.75rem, 1.5vh, 1.5rem);
    container-type: inline-size;
    block-size: 100%;
  }

  .show-and-tell__card--one {
    background-color: var(--color-featured);
  }

  .show-and-tell__card--two {
    background-color: var(--color-secondary);
  }

  .show-and-tell__card--three {
    background-color: #ff0;
  }

  .show-and-tell__card-number {
    grid-area: number;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    color: #000;
  }

  .show-and-tell__card-question {
    grid-area: question;
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 3cqi, 2rem);
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    text-wrap: balance;
  }

  .show-and-tell__card-description {
    grid-area: description;
    font-family: var(--font-serif);
    font-size: clamp(.875rem, 2cqi, 1rem);
    font-weight: 300;
    line-height: 1.5;
    color: #000;
    text-wrap: pretty;
    align-self:  start;
  }

  @media (max-inline-size: calc(48rem - .001px)) {
    .agenda-item__content.show-and-tell {
      grid-template-columns: 1fr;
    }

    .show-and-tell__card {
      min-block-size: 20vh;
    }
  }

  .agenda-item:nth-child(2) {
    grid-area: part-one;
    background-color: var(--bg-primary);
  }

  .agenda-item:nth-child(3) {
    grid-area: part-two;
    background-color: var(--bg-secondary);
  }

  .agenda-item:nth-child(4) {
    grid-area: part-three;
    background-color: var(--bg-tertiary);
  }

  .agenda-section__header {
    grid-area: header;
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr var(--gutter-outer);
    grid-template-rows: var(--gutter-block) auto var(--gutter-block);
    grid-template-areas: ". . ." ". header-content ." ". . .";
    align-items:  center;
    background-color: var(--bg-primary);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    text-transform: uppercase;
  }

  .agenda-section__header-item {
    grid-area: header-content;
    text-align: center;
  }

  .agenda-item__text {
    grid-area: text;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--text-primary);
  }

  @media (prefers-reduced-motion: no-preference) {
    .agenda-item__text {
      transition: font-size .3s;
    }
  }

  .agenda-item__number {
    grid-area: number;
    font-family: var(--font-sans);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .agenda-item__number {
      transition: font-size .3s;
    }
  }

  .agenda-section__footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr 1fr 1fr var(--gutter-outer);
    grid-template-rows: var(--gutter-block) auto var(--gutter-block);
    grid-template-areas: ". . . . ." ". company-name agenda-title date ." ". . . . .";
    align-items:  center;
    background-color: var(--bg-tertiary);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
  }

  .agenda-section__footer-item {
    text-align: center;
  }

  .agenda-section__footer-item:first-child {
    grid-area: company-name;
    text-align: start;
  }

  .agenda-section__footer-item:nth-child(2) {
    grid-area: agenda-title;
  }

  .agenda-section__footer-item:last-child {
    grid-area: date;
    text-align: end;
  }

  @media (max-inline-size: calc(48rem - .001px)) {
    .agenda-section__footer {
      grid-template-columns: var(--gutter-outer) 1fr var(--gutter-outer);
      grid-template-rows: var(--gutter-block) auto auto auto var(--gutter-block);
      grid-template-areas: ". . ." ". company-name ." ". agenda-title ." ". date ." ". . .";
      gap: 1vh;
    }

    .agenda-section__footer-item:first-child, .agenda-section__footer-item:last-child {
      text-align: center;
    }
  }
}

@layer footer {
  .footer {
    display: grid;
    grid-template-rows: 1fr 2fr;
    grid-template-areas: "content" "image";
    block-size: 100vh;
    inline-size: 100%;
    color-scheme: light dark;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .footer__content {
    grid-area: content;
    display: grid;
    grid-template-columns: var(--gutter-outer) 1fr 1fr var(--gutter-outer);
    grid-template-rows: calc(var(--gutter-block) * 2) auto 1fr calc(var(--gutter-block) * 2);
    grid-template-areas: ". . . ." ". brand-left brand-right ." ". title title ." ". . . .";
    background-color: var(--bg-accent);
  }

  .footer__brand {
    font-family: var(--font-sans);
    font-size: clamp(.875rem, 2vw, 1.125rem);
    font-weight: 700;
    color: #000;
    align-self:  start;
  }

  .footer__brand--left {
    grid-area: brand-left;
    text-align: start;
  }

  .footer__brand--right {
    grid-area: brand-right;
    text-align: end;
  }

  .footer__title {
    grid-area: title;
    font-family: var(--font-sans);
    font-size: var(--text-5xl);
    font-weight: 900;
    line-height: .85;
    color: #000;
    text-align: center;
    letter-spacing: var(--tracking-tight);
    align-self:  center;
  }

  .footer__image-container {
    grid-area: image;
    display: grid;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
  }

  .footer__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  @media (max-inline-size: calc(48rem - .001px)) {
    .footer {
      grid-template-rows: 40vh 60vh;
    }

    .footer__title {
      font-size: clamp(3rem, 15vw, 8rem);
    }
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(featured-image) {
  animation-duration: .5s;
}

::view-transition-new(featured-image) {
  animation-duration: .5s;
}

::view-transition-old(featured-title) {
  animation-duration: .4s;
}

::view-transition-new(featured-title) {
  animation-duration: .4s;
}

::view-transition-old(featured-author) {
  animation-duration: .4s;
}

::view-transition-new(featured-author) {
  animation-duration: .4s;
}

@layer featured-page {
  .featured-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: 100vh;
    inline-size: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .featured-page:nth-child(2n) {
    direction: rtl;
  }

  .featured-page:nth-child(2n) > * {
    direction: ltr;
  }

  .featured-page__content {
    display: grid;
    grid-template-columns: var(--gutter-outer) minmax(min-content, 1fr) var(--gutter-outer);
    grid-template-rows: var(--gutter-block) auto 1fr auto var(--gutter-block);
    grid-template-areas: ". . ." ". header ." ". description ." ". footer ." ". . .";
    row-gap: clamp(1rem, 2vw, 2rem);
    background-color: var(--bg-surface);
  }

  .featured-page__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .featured-page__back {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .featured-page__back:hover {
    text-decoration: underline;
  }

  .featured-page__title {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    view-transition-name: featured-title;
  }

  .featured-page__description {
    grid-area: description;
    align-self:  start;
  }

  .featured-page__description p {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-primary);
    text-wrap: pretty;
  }

  .featured-page__footer {
    grid-area: footer;
    align-self:  end;
  }

  .featured-page__author {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    view-transition-name: featured-author;
  }

  .featured-page__media {
    display: grid;
    grid-template-rows: 1fr clamp(8rem, 30cqh, 16rem);
    block-size: 100vh;
    container-type: size;
  }

  .featured-page__image-section {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: auto;
  }

  .featured-page__image {
    background-color: var(--bg-primary);
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    view-transition-name: featured-image;
  }

  .featured-page__meta {
    display: flex;
    align-items:  center;
    justify-content: center;
    padding: clamp(1rem, var(--gutter-content), 3rem);
    background-color: var(--bg-primary);
    position: relative;
    z-index: 1;
  }

  .featured-page__date {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .featured-page__metrics {
    display: grid;
    grid-auto-flow: column;
    gap: clamp(2rem, 5vw, 4rem);
    inline-size: 100%;
  }

  .featured-page__metric {
    display: grid;
    grid-template-rows: auto auto;
    gap: clamp(.5rem, 1vh, 1rem);
    border-block-end: .125rem solid var(--text-primary);
    padding-block-end: clamp(.5rem, 1vh, 1rem);
  }

  .featured-page__metric-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    text-transform: uppercase;
  }

  .featured-page__metric-value {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 8cqw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .featured-page__metric-value a {
    font-size: clamp(.875rem, 2cqw, 1.25rem);
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .featured-page__metric-value a:hover {
    text-decoration: underline;
  }

  @media (max-width: 48rem) {
    .featured-page {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      min-block-size: 100vh;
    }

    .featured-page__media {
      grid-template-rows: auto clamp(6rem, 30cqh, 12rem);
      block-size: auto;
      min-block-size: 100cqw;
    }

    .featured-page__meta {
      min-block-size: 6rem;
    }
  }
}