/* ==========================================================================
   SteinTecDev — HOME
   Sections that exist only on the front page. Everything here builds on
   the tokens and primitives in core.css; no token is redefined, and
   nothing needs !important.
   ========================================================================== */

@layer components {
  /* ======================================================== SECTION RAIL =
     A hairline index down the right edge. It replaces the old dot
     column: numbers you can actually read, a label that appears on
     approach, and a single mark for where you are.
     ======================================================================= */
  .rail {
    position: fixed;
    inset-inline-end: clamp(0.75rem, 1.6vw, 1.5rem);
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 60;
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--hair);
  }

  @media (min-width: 82rem) {
    .rail {
      display: flex;
    }
  }

  .rail__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.34rem 0;
    font-family: var(--face-mono);
    font-size: var(--t-2xs);
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    transition: color var(--dur-2) var(--ease);
  }

  .rail__item::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-0.75rem - 1px);
    inset-block: 0.34rem;
    width: 1px;
    background: var(--accent);
    scale: 1 0;
    transform-origin: center;
    transition: scale var(--dur-3) var(--ease-out);
  }

  .rail__l {
    opacity: 0;
    translate: -0.25rem 0;
    transition: opacity var(--dur-2) var(--ease),
      translate var(--dur-2) var(--ease-out);
  }

  .rail__item:hover,
  .rail__item.is-active {
    color: var(--ink);
  }

  .rail__item:hover .rail__l,
  .rail__item.is-active .rail__l {
    opacity: 1;
    translate: 0 0;
  }

  .rail__item.is-active::before {
    scale: 1 1;
  }

  .rail__item.is-active .rail__n {
    color: var(--accent);
  }

  /* ============================================================== HERO = */
  .hero {
    position: relative;
    padding-block: clamp(8rem, 15vh, 11rem) clamp(2.5rem, 4.5vw, 4.5rem);
  }

  /* A single, very wide, very low-contrast warm field behind the hero.
     One gradient, no blur filter, no animation — it lifts the top of
     the page without costing a compositing layer or a frame budget. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      120% 80% at 12% 0%,
      color-mix(in oklab, var(--accent) 9%, transparent),
      transparent 62%
    );
  }

  .hero__inner {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    grid-template-areas: "hit" "lede" "index" "facts";
    align-items: start;
  }

  /* Opening shot, then the credits: the first screen is the headline and
     the 3D mark; the product index and the facts follow as a strip below.
     On narrow screens the mark sits above the headline instead. */
  @media (min-width: 68rem) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
      grid-template-areas:
        "lede hit"
        "index index"
        "facts facts";
      align-items: center;
      row-gap: clamp(2.5rem, 4vw, 3.5rem);
    }
  }

  .hero__lede { grid-area: lede; }
  .hero__hit {
    grid-area: hit;
    display: grid;
    place-items: center;
    min-block-size: clamp(15rem, 40svh, 22rem);
    /* room for the mark's reflection before the headline starts */
    margin-block-end: clamp(1rem, 4svh, 2.25rem);
  }
  .index { grid-area: index; }
  .hero__facts { grid-area: facts; }

  @media (min-width: 68rem) {
    .hero__hit {
      align-self: stretch;
      margin-block-end: 0;
      min-block-size: max(28rem, calc(100svh - 12rem));
    }
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: var(--sp-6);
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .hero__eyebrow .status {
    gap: 0;
  }

  .hero__title {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-display);
    font-weight: 300;
    font-size: var(--t-4xl);
    line-height: 1.03;
    letter-spacing: var(--track-display);
    margin-bottom: var(--sp-6);
  }

  .hero__title em {
    font-style: italic;
    font-weight: 300;
    color: var(--accent);
  }

  .hero__line {
    display: block;
    overflow: hidden;
    padding-block: 0.04em;
  }

  .hero__line > span {
    display: block;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__line > span {
      translate: 0 105%;
      animation: rise 0.95s var(--ease-out) forwards;
    }
    .hero__line:nth-child(1) > span { animation-delay: 0.06s; }
    .hero__line:nth-child(2) > span { animation-delay: 0.16s; }
    .hero__line:nth-child(3) > span { animation-delay: 0.26s; }

    .hero__lead,
    .hero__actions,
    .hero__facts,
    .index {
      opacity: 0;
      animation: settle 0.9s var(--ease-out) forwards;
    }
    .hero__lead { animation-delay: 0.42s; }
    .hero__actions { animation-delay: 0.52s; }
    .hero__facts { animation-delay: 0.62s; }
    .index { animation-delay: 0.5s; }
  }

  @keyframes rise {
    to {
      translate: 0 0;
    }
  }

  @keyframes settle {
    from {
      opacity: 0;
      translate: 0 0.6rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  .hero__lead {
    max-width: 46ch;
    margin-bottom: var(--sp-7);
  }

  .hero__lead b {
    color: var(--ink);
    font-weight: 600;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* ------------------------------------------------------------ facts */
  .hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--hair-strong);
  }

  @media (min-width: 34rem) {
    .hero__facts {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .fact {
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    border-inline-start: 1px solid var(--hair);
  }

  .fact:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  @media (max-width: 33.99rem) {
    .fact:nth-child(odd) {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
    .fact:nth-child(-n + 2) {
      border-bottom: 1px solid var(--hair);
    }
  }

  .fact__k {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .fact__v {
    margin-top: 0.4rem;
    font-family: var(--face-display);
    font-variation-settings: var(--fr-head);
    font-weight: 400;
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .fact__v--word {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    line-height: 1.2;
  }

  .fact__v--none {
    font-style: italic;
    color: var(--accent);
  }

  /* ==================================================== PRODUCT INDEX = */
  .index {
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
  }

  .index__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--hair-strong);
  }

  .index__title {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .index__count {
    color: var(--ink-faint);
    font-size: var(--t-xs);
  }

  .index__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .index__row + .index__row {
    border-top: 1px solid var(--hair);
  }

  .index__link {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0.25rem;
    transition: padding-inline-start var(--dur-2) var(--ease);
  }

  .index__link:hover {
    padding-inline-start: 0.6rem;
  }

  .index__mark img {
    width: 1.75rem;
    height: 1.75rem;
    opacity: 0.85;
    transition: opacity var(--dur-2) var(--ease);
  }

  .index__link:hover .index__mark img {
    opacity: 1;
  }

  .index__name {
    font-size: var(--t-ui);
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .index__ver {
    font-size: var(--t-xs);
    color: var(--ink-faint);
  }

  .index__state::before {
    margin: 0;
  }

  .index__foot {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hair-strong);
  }

  .index__last {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: 0.6rem;
  }

  /* Label and date do not both fit on one line in a phone-width card. */
  @media (max-width: 30rem) {
    .index__last {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.2rem;
    }
  }

  .index__last-k {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .index__last-v {
    font-size: var(--t-xs);
    color: var(--ink-2);
  }

  .index__note {
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--ink-faint);
    display: block;
    max-width: 34ch;
  }

  /* On wide screens the index is a strip: label · four products (two by two) ·
     latest release, divided by hairlines — the credit roll under the title card. */
  @media (min-width: 68rem) {
    .index {
      display: grid;
      grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr) minmax(13rem, 17rem);
      align-items: stretch;
      padding: 0;
    }

    .index__head {
      flex-direction: column;
      justify-content: space-between;
      padding: var(--sp-5);
      border-bottom: 0;
      border-inline-end: 1px solid var(--hair-strong);
    }

    .index__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .index__row + .index__row {
      border-top: 0;
    }

    .index__row:nth-child(even) {
      border-inline-start: 1px solid var(--hair);
    }

    .index__row:nth-child(n + 3) {
      border-top: 1px solid var(--hair);
    }

    /* mark · name over version · state — so the name never has to share
       its line with the version and gets ellipsised */
    .index__link {
      grid-template-columns: 1.75rem minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      column-gap: 0.9rem;
      row-gap: 0.15rem;
      block-size: 100%;
      padding: var(--sp-4) var(--sp-5);
    }

    .index__mark {
      grid-row: 1 / span 2;
    }

    .index__name {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
    }

    .index__ver {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
    }

    .index__state {
      grid-column: 3;
      grid-row: 1 / span 2;
    }

    .index__link:hover {
      padding-inline-start: var(--sp-5);
      background: color-mix(in oklab, var(--accent) 5%, transparent);
    }

    .index__foot {
      padding: var(--sp-5);
      border-top: 0;
      border-inline-start: 1px solid var(--hair-strong);
    }
  }

  /* ============================================================= CREDO =
     What used to be an infinite marquee. Four claims, held still, so
     they can actually be read — and so nothing on the page moves that
     does not have a reason to.
     ====================================================================== */
  .credo {
    border-block: 1px solid var(--hair);
    background: var(--surface-deep);
  }

  .credo__inner {
    display: grid;
    gap: var(--sp-4) var(--sp-6);
    grid-template-columns: 1fr;
    padding-block: var(--sp-5);
    align-items: baseline;
  }

  @media (min-width: 56rem) {
    .credo__inner {
      grid-template-columns: 9rem minmax(0, 1fr);
    }
  }

  .credo__label {
    color: var(--ink-faint);
  }

  .credo__list {
    display: grid;
    gap: var(--sp-3) var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .credo__list li {
    position: relative;
    padding-inline-start: 1rem;
    font-size: var(--t-ui);
    color: var(--ink-2);
  }

  .credo__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.62em;
    width: 5px;
    height: 1px;
    background: var(--accent);
  }

  /* ============================================================ STUDIO = */
  .studio {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: 1fr;
    align-items: start;
  }

  @media (min-width: 62rem) {
    .studio {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }
  }

  .studio__body p {
    font-size: var(--t-md);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    max-width: 58ch;
  }

  .studio__body p + p {
    margin-top: var(--sp-4);
  }

  .studio__body b {
    color: var(--ink);
    font-weight: 600;
  }

  .studio__body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
    transition: text-decoration-color var(--dur-2) var(--ease);
  }

  .studio__body a:hover {
    text-decoration-color: currentColor;
  }

  .studio__sig {
    margin-top: var(--sp-6) !important;
    font-family: var(--face-display);
    font-variation-settings: var(--fr-sub);
    font-style: italic;
    font-size: var(--t-lg) !important;
    color: var(--ink-3) !important;
  }

  /* --------------------------------------------------- studio plate */
  .plate {
    padding: var(--sp-5);
    position: sticky;
    top: 7rem;
  }

  @media (max-width: 61.99rem) {
    .plate {
      position: static;
    }
  }

  .plate__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--hair-strong);
  }

  .plate__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .plate__title {
    color: var(--ink-3);
  }

  .plate__rows {
    margin: 0;
  }

  .plate__row {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--hair);
    align-items: baseline;
  }

  .plate__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .plate__row dt {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .plate__row dd {
    margin: 0;
    font-size: var(--t-ui);
    color: var(--ink);
  }

  .plate__row dd a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
  }

  .plate__row dd a:hover {
    text-decoration-color: currentColor;
  }

  /* ============================================================== APPS = */
  .apps {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
  }

  @media (min-width: 48rem) {
    .apps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72rem) {
    .apps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .app {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .app__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 0.85rem var(--sp-5);
    border-bottom: 1px solid var(--hair);
  }

  .app__ref {
    font-size: var(--t-2xs);
    letter-spacing: 0.16em;
    color: var(--ink-faint);
  }

  /* The product mark sits in a recessed well — the one place on the
     page that reads as a physical aperture, which is why it is worth
     doing here and nowhere else. */
  .app__plate {
    display: grid;
    place-items: center;
    padding: clamp(2rem, 4vw, 2.75rem);
    background: var(--surface-inset);
    border-bottom: 1px solid var(--hair);
    box-shadow: inset 0 1px 4px oklch(0 0 0 / 0.45);
    position: relative;
  }

  /* A faint measured field, cropped to a soft ellipse — the technical
     drawing behind the specimen, not a glow around it. */
  .app__plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to right,
        oklch(1 0 0 / 0.035) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, oklch(1 0 0 / 0.035) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center;
    mask-image: radial-gradient(ellipse 62% 74% at 50% 50%, #000 20%, transparent 78%);
    pointer-events: none;
  }

  .app__mark {
    position: relative;
    width: clamp(3.5rem, 7vw, 4.5rem);
    height: auto;
    transition: scale var(--dur-3) var(--ease-out);
  }

  .app:hover .app__mark {
    scale: 1.05;
  }

  .app__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-5);
  }

  .app__cat {
    color: var(--ink-faint);
  }

  .app__title {
    margin-top: 0.6rem;
    font-family: var(--face-display);
    font-variation-settings: var(--fr-head);
    font-weight: 400;
    font-size: var(--t-xl);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .app__title em {
    font-style: italic;
    color: var(--accent);
  }

  .app__desc {
    margin-top: 0.7rem;
    font-size: var(--t-ui);
    line-height: 1.62;
    color: var(--ink-2);
  }

  .app__feats {
    list-style: none;
    padding: var(--sp-4) 0 0;
    margin: var(--sp-4) 0 0;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .app__feats li {
    display: grid;
    grid-template-columns: 0.9rem minmax(0, 1fr);
    gap: 0.4rem;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
  }

  .app__feats li::before {
    content: "";
    width: 5px;
    height: 1px;
    background: var(--accent);
    margin-top: 0.72em;
  }

  /* auto pushes the whole footer block down, so the CTAs of cards with
     four and five features still line up across the row. The slack is
     absorbed after the feature list, which is where it belongs. */
  .app__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: auto 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
  }

  .app__meta > div {
    padding: 0.7rem 0.6rem 0.7rem 0;
    border-inline-end: 1px solid var(--hair);
    min-width: 0;
  }

  .app__meta > div:last-child {
    border-inline-end: 0;
  }

  .app__meta dt {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .app__meta dd {
    margin: 0.25rem 0 0;
    font-size: var(--t-xs);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--sp-4);
    font-size: var(--t-xs);
    color: var(--ink-faint);
  }

  .app__legal a {
    color: var(--ink-3);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: color var(--dur-2) var(--ease),
      text-decoration-color var(--dur-2) var(--ease);
  }

  .app__legal a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
  }

  .app__legal a[hidden],
  .app__legal .sep[hidden] {
    display: none;
  }

  .app__cta {
    margin-top: var(--sp-5);
    width: 100%;
  }

  /* ============================================================ RULES = */
  .rules {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--hair-strong);
  }

  .rule-item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
    border-bottom: 1px solid var(--hair);
    position: relative;
  }

  @media (min-width: 62rem) {
    .rule-item {
      grid-template-columns: var(--col-aside) minmax(0, 1fr);
      gap: var(--col-gap);
    }
  }

  .rule-item__n {
    font-size: var(--t-sm);
    color: var(--accent);
    letter-spacing: 0.1em;
    padding-top: 0.35em;
  }

  .rule-item__body {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 1fr;
  }

  @media (min-width: 62rem) {
    .rule-item__body {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: start;
    }
  }

  .rule-item__t {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-head);
    font-weight: 400;
    font-size: var(--t-xl);
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: var(--ink);
  }

  .rule-item__t em {
    font-style: italic;
    color: var(--accent);
  }

  .rule-item__p {
    font-size: var(--t-base);
    line-height: var(--lh-loose);
    color: var(--ink-2);
  }

  /* ======================================================== WERKSTATT = */
  .cap {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
  }

  @media (min-width: 44rem) {
    .cap {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 70rem) {
    .cap {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .cap__cell {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
  }

  .cap__num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
  }

  .cap__num .label {
    color: var(--ink-faint);
  }

  /* A five-segment bar, not five glowing dots. Reads as a gauge. */
  .meter {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
  }

  .meter i {
    display: block;
    width: 9px;
    height: 3px;
    background: var(--hair-bright);
    border-radius: 1px;
  }

  .meter[data-level="3"] i:nth-child(-n + 3),
  .meter[data-level="4"] i:nth-child(-n + 4),
  .meter[data-level="5"] i:nth-child(-n + 5) {
    background: var(--accent);
  }

  .cap__name {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-head);
    font-weight: 400;
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: var(--ink);
  }

  .cap__name em {
    font-style: italic;
    color: var(--accent);
  }

  .cap__desc {
    margin-top: 0.6rem;
    font-size: var(--t-sm);
    line-height: 1.62;
    color: var(--ink-2);
  }

  /* auto keeps the chip row on the baseline of the card regardless of
     how long the description above it runs. */
  .cap__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hair);
  }

  /* The description reserves the gap above the footer rule so that the
     rule never collides with the text when `auto` collapses to zero. */
  .cap__desc {
    margin-bottom: var(--sp-5);
  }

  /* ============================================================== NOW = */
  .now {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
  }

  @media (min-width: 62rem) {
    .now {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-6);
    }
  }

  .now__card {
    padding: var(--sp-5);
  }

  .now__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--hair-strong);
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .now__head b {
    color: var(--accent);
    font-weight: 600;
  }

  .now__head .mono {
    font-size: var(--t-2xs);
    letter-spacing: 0.08em;
    text-transform: none;
    font-weight: 400;
  }

  .now__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .now__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: var(--sp-4);
    align-items: start;
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--hair);
  }

  .now__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .now__time {
    font-size: var(--t-xs);
    color: var(--ink-faint);
    padding-top: 0.2rem;
  }

  .now__item strong {
    display: block;
    font-size: var(--t-ui);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.15rem;
  }

  .now__item span:not(.tag):not(.now__time) {
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-3);
  }

  .tag {
    font-family: var(--face-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.45rem;
    border-radius: var(--r-xs);
    border: 1px solid currentColor;
    white-space: nowrap;
  }

  .tag--live { color: var(--sig-live); }
  .tag--work { color: var(--sig-work); }
  .tag--hold { color: var(--sig-hold); }

  /* --------------------------------------------------------- figures */
  .figures {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .figure {
    display: grid;
    grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--hair);
  }

  .figure:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .figure__n {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-title);
    font-weight: 300;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .figure__n small {
    font-size: 0.42em;
    letter-spacing: 0;
    color: var(--ink-faint);
  }

  .figure dd {
    margin: 0;
  }

  .figure__k {
    display: block;
    color: var(--ink-faint);
    margin-bottom: 0.4rem;
  }

  .figure__t {
    display: block;
    font-size: var(--t-sm);
    line-height: 1.62;
    color: var(--ink-2);
  }

  .figure__t em {
    font-style: italic;
    color: var(--ink);
  }

  /* ============================================================== LOG = */
  .log {
    border-top: 1px solid var(--hair-strong);
  }

  .log__entry {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 1fr;
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--hair);
  }

  @media (min-width: 62rem) {
    .log__entry {
      grid-template-columns: var(--col-aside) minmax(0, 1fr);
      gap: var(--col-gap);
      align-items: start;
    }
  }

  .log__date {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-family: var(--face-mono);
    font-variant-numeric: tabular-nums;
  }

  .log__date .d {
    font-size: var(--t-sm);
    color: var(--ink-2);
  }

  .log__date .v {
    font-size: var(--t-2xs);
    letter-spacing: 0.1em;
    color: var(--ink-faint);
  }

  .log__chip {
    display: inline-block;
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
  }

  .log__title {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-sub);
    font-weight: 450;
    font-size: var(--t-lg);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 0.45rem;
  }

  .log__sum {
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 64ch;
  }

  .log__empty {
    padding-block: var(--sp-7);
    text-align: center;
    font-family: var(--face-mono);
    font-size: var(--t-sm);
    color: var(--ink-faint);
  }

  /* ============================================================== CTA = */
  .cta {
    position: relative;
    padding-block: clamp(5rem, 12vw, 9rem);
    text-align: center;
    border-top: 1px solid var(--hair-strong);
    overflow: hidden;
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      90% 120% at 50% 118%,
      color-mix(in oklab, var(--accent) 16%, transparent),
      transparent 60%
    );
  }

  .cta__inner {
    position: relative;
    max-width: 46rem;
  }

  .cta__eyebrow {
    color: var(--accent);
    margin-bottom: var(--sp-5);
  }

  .cta__title {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-display);
    font-weight: 300;
    font-size: var(--t-4xl);
    line-height: 1.04;
    letter-spacing: var(--track-display);
    color: var(--ink);
    margin-bottom: var(--sp-5);
  }

  .cta__title em {
    font-style: italic;
    color: var(--accent);
  }

  .cta__lead {
    font-size: var(--t-md);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    max-width: 48ch;
    margin: 0 auto var(--sp-7);
  }

  .footer__soon {
    color: var(--ink-faint);
    font-size: 0.85em;
  }
}