@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--wrap-max, var(--container-base));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap--wide { --wrap-max: var(--container-wide); }
  .wrap--narrow { --wrap-max: var(--container-narrow); }
  .wrap--text { --wrap-max: var(--container-text); }
}

@layer components {


  .page-head { --section-y: var(--section-lg); }

  .page-head__grid { align-items: end; row-gap: var(--space-7); }

  .page-head__text { grid-column: 1 / -1; }

  .page-head__title {
    font-family: var(--font-display);
    font-size: var(--fs-display-2);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: var(--text-primary);
    max-width: var(--measure-display);
    margin-block-start: var(--space-5);
  }

  .page-head__lead {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    max-width: var(--measure-narrow);
    margin-block-start: var(--space-5);
  }

  .page-head__aside { grid-column: 1 / -1; }


  .contents { display: grid; gap: var(--space-2); }

  .contents__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-start: var(--border-hair) solid var(--line-hairline);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .contents__item:last-child { border-block-end: var(--border-hair) solid var(--line-hairline); }

  .contents__num { color: var(--signal-500); }


  .sec-head { max-width: var(--measure-base); }
  .sec-head h2 { margin-block-start: var(--space-4); }
  .sec-head p { margin-block-start: var(--space-4); color: var(--text-secondary); max-width: var(--measure-narrow); }


  .lede {
    margin-block-start: var(--space-4);
    color: var(--text-secondary);
    max-width: var(--measure-narrow);
  }


  .split__a,
  .split__b { grid-column: 1 / -1; }


  .row { --section-y: var(--section-md); }
  .row__grid { align-items: center; row-gap: var(--space-7); }
  .row__text { grid-column: 1 / -1; }
  .row__media { grid-column: 1 / -1; }
  .row__text h3 { margin-block-start: var(--space-3); }
  .row__text p { margin-block-start: var(--space-4); color: var(--text-secondary); max-width: var(--measure-narrow); }


  .ticks { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); }

  .ticks li,
  .ticks p {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-body);
  }

  .ticks li::before,
  .ticks p::before {
    content: "";
    inline-size: var(--space-3);
    block-size: var(--border-hair);
    background-color: var(--signal-500);
    flex-shrink: 0;
    transform: translateY(-0.3em);
  }


  .deliverables { display: grid; margin-block-start: var(--space-6); }

  .deliverables__row {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-block-start: var(--border-hair) solid var(--line-hairline);
  }

  .deliverables__row:last-child { border-block-end: var(--border-hair) solid var(--line-hairline); }

  .deliverables__term {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-body);
  }

  .deliverables__desc { color: var(--text-secondary); font-size: var(--fs-body-sm); max-width: var(--measure-base); }

  @media (min-width: 768px) {
    .deliverables__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: baseline; }
  }


  .gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .gallery__item { display: block; }

  @media (min-width: 768px) {
    .gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1024px) {
    .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }


  .page-note {
    margin-block-start: var(--space-4);
    font-size: var(--fs-caption);
    color: var(--text-muted);
    max-width: var(--measure-base);
  }

  .proof--block { margin-block-start: var(--space-8); }


  .group { --section-y: var(--section-md); }
  .group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); }
  .group__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-primary); }
  .group__note { color: var(--text-secondary); font-size: var(--fs-body-sm); max-width: var(--measure-narrow); }


  .schematic {
    position: relative;
    border: var(--border-hair) solid var(--line-hairline);
    border-radius: var(--radius-sm);
    background-color: var(--surface-card);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-4);
    isolation: isolate;
  }

  .schematic__bar { display: flex; align-items: center; gap: var(--space-2); }
  .schematic__dot { inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-round); background-color: var(--line-strong); }
  .schematic__dot--live { background-color: var(--signal-500); }

  .schematic__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .schematic__tile {
    border: var(--border-hair) solid var(--line-hairline);
    border-radius: var(--radius-xs);
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
    background-color: var(--bg-raised);
  }

  .schematic__k {
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .schematic__v { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-primary); line-height: var(--lh-flat); }

  .schematic__rows { display: grid; }
  .schematic__row {
    display: grid;
    grid-template-columns: var(--space-4) minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding-block: var(--space-3);
    border-block-start: var(--border-hair) solid var(--line-hairline);
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
  }

  .schematic__tag {
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--signal-300);
  }

  .schematic__meter { block-size: var(--space-1); background-color: var(--line-hairline); border-radius: var(--radius-pill); overflow: hidden; }
  .schematic__meter span {
    display: block;
    block-size: 100%;
    inline-size: 64%;
    background-color: var(--signal-500);
    opacity: var(--opacity-muted);
  }


  .flow { display: grid; gap: var(--space-5); }

  .flow__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .flow__source::before {
    content: "";
    inline-size: var(--space-3);
    block-size: var(--space-3);
    background-color: var(--signal-500);
    flex-shrink: 0;
  }

  .flow__outs {
    display: grid;
    gap: var(--space-1);
    border-inline-start: var(--border-hair) solid var(--line-hairline);
    padding-inline-start: var(--space-5);
    margin-inline-start: var(--space-1);
  }

  .flow__out {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-3);
    color: var(--text-secondary);
  }

  .flow__out::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--space-5) * -1);
    inset-block-start: 50%;
    inline-size: var(--space-4);
    block-size: var(--border-hair);
    background-color: var(--line-default);
  }

  .flow__label { font-family: var(--font-sans); font-weight: 600; color: var(--text-primary); }


  a.flow__out { transition: color var(--dur-1) var(--ease-standard); }
  a.flow__out:hover .flow__label,
  a.flow__out:focus-visible .flow__label { color: var(--signal-300); }
  a.flow__out:hover::before,
  a.flow__out:focus-visible::before { background-color: var(--signal-500); }

  @media (min-width: 1024px) {
    .flow__outs {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      border-inline-start: 0;
      border-block-start: var(--border-hair) solid var(--line-hairline);
      padding-inline-start: 0;
      padding-block-start: var(--space-6);
      margin-inline-start: 0;
      gap: var(--space-5);
    }
    .flow__out { display: grid; align-content: start; gap: var(--space-2); }
    .flow__out::before {
      inset-inline-start: 0;
      inset-block-start: calc(var(--space-6) * -1);
      inline-size: var(--border-hair);
      block-size: var(--space-5);
    }
  }


  .faq { margin-block-start: var(--space-6); border-block-start: var(--border-hair) solid var(--line-hairline); }

  .faq__item { border-block-end: var(--border-hair) solid var(--line-hairline); }

  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--target-min-hit);
    padding-block: var(--space-4);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--dur-1) var(--ease-standard);
  }

  .faq__q::-webkit-details-marker { display: none; }

  .faq__q::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-flat);
    color: var(--signal-500);
    flex-shrink: 0;
    transition: transform var(--dur-2) var(--ease-standard);
  }

  .faq__item[open] .faq__q::after { transform: rotate(45deg); }

  .faq__q:hover { color: var(--signal-300); }

  .faq__a {
    padding-block-end: var(--space-5);
    color: var(--text-secondary);
    max-width: var(--measure-base);
  }

  .faq__a p + p { margin-block-start: var(--space-4); }


  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-hair) solid var(--line-hairline);
  }

  .filters__btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min-hit);
    padding-inline: var(--space-4);
    border: var(--border-hair) solid var(--line-default);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    transition:
      border-color var(--dur-2) var(--ease-standard),
      color var(--dur-2) var(--ease-standard),
      background-color var(--dur-2) var(--ease-standard);
  }

  .filters__btn:hover,
  .filters__btn:focus-visible { border-color: var(--signal-500); color: var(--text-primary); }

  .filters__btn[aria-pressed="true"] {
    border-color: var(--signal-500);
    background-color: var(--signal-tint-14);
    color: var(--signal-200);
  }

  .is-filtered-out { display: none; }


  .form { display: grid; gap: var(--space-5); margin-block-start: var(--space-6); }

  .field { display: grid; gap: var(--space-2); }

  .field__label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .field__req { color: var(--signal-500); }

  .field__input,
  .field__select,
  .field__textarea {
    min-height: var(--target-min-hit);
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-card);
    border: var(--border-hair) solid var(--line-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
  }

  .field__textarea { min-height: var(--space-10); resize: vertical; line-height: var(--lh-base); }

  .field__input::placeholder,
  .field__textarea::placeholder { color: var(--text-faint); }

  .field__input:hover,
  .field__select:hover,
  .field__textarea:hover { border-color: var(--line-strong); }

  .field__input:focus-visible,
  .field__select:focus-visible,
  .field__textarea:focus-visible {
    border-color: var(--signal-500);
    background-color: var(--bg-raised);
  }

  .field__hint { font-size: var(--fs-caption); color: var(--text-muted); }

  .form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }

  .form__note {
    padding: var(--space-4);
    border: var(--border-hair) solid var(--line-hairline);
    border-inline-start: var(--border-thick) solid var(--signal-500);
    border-radius: var(--radius-sm);
    background-color: var(--bg-raised);
    color: var(--text-secondary);
    font-size: var(--fs-body-sm);
    max-width: var(--measure-base);
  }

  .form__status { font-size: var(--fs-body-sm); color: var(--text-primary); }
  .form__status:empty { display: none; }

  @media (min-width: 768px) {
    .form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  }


  .details-list { display: grid; gap: var(--space-5); margin-block-start: var(--space-6); }

  .details-list__item {
    display: grid;
    gap: var(--space-1);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hair) solid var(--line-hairline);
  }

  .details-list__k {
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .details-list__v { font-size: var(--fs-body-lg); color: var(--text-primary); }
  .details-list__v address { font-style: normal; }


  .places {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-hair) solid var(--line-hairline);
  }

  .places li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .places li::before {
    content: "";
    inline-size: var(--space-3);
    block-size: var(--border-hair);
    background-color: var(--signal-500);
    flex-shrink: 0;
  }


  .prose { color: var(--text-secondary); }
  .prose h2 { margin-block-start: var(--space-8); font-size: var(--fs-h3); font-family: var(--font-display); }
  .prose h2:first-child { margin-block-start: 0; }
  .prose p { margin-block-start: var(--space-4); max-width: var(--measure-base); }
  .prose ul { margin-block-start: var(--space-4); display: grid; gap: var(--space-2); }
  .prose li { display: flex; align-items: baseline; gap: var(--space-3); max-width: var(--measure-base); }
  .prose li::before {
    content: "";
    inline-size: var(--space-3);
    block-size: var(--border-hair);
    background-color: var(--line-strong);
    flex-shrink: 0;
    transform: translateY(-0.3em);
  }


  .end-cta { --section-y: var(--section-lg); background-color: var(--bg-deep); text-align: center; }
  .end-cta__inner { display: grid; justify-items: center; }
  .end-cta__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: var(--text-primary);
    max-width: var(--measure-display);
  }
  .end-cta__text { margin-block-start: var(--space-4); color: var(--text-secondary); max-width: var(--measure-narrow); }
  .end-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5); margin-block-start: var(--space-6); }


  .crosslinks { display: grid; gap: var(--space-4); margin-block-start: var(--space-6); }

  .crosslink {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-block-start: var(--border-hair) solid var(--line-hairline);
    transition: border-color var(--dur-2) var(--ease-standard);
  }

  .crosslink:last-child { border-block-end: var(--border-hair) solid var(--line-hairline); }
  .crosslink:hover { border-block-start-color: var(--signal-500); }
  .crosslink__title { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-primary); }
  .crosslink__text { color: var(--text-secondary); font-size: var(--fs-body-sm); max-width: var(--measure-narrow); }


  @media (min-width: 768px) {
    .crosslinks {
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: var(--space-6);
    }
  }


  @media (min-width: 768px) {
    .schematic__grid { gap: var(--space-4); }
  }

  @media (min-width: 1024px) {
    .page-head__text { grid-column: 1 / span 7; }
    .page-head__aside { grid-column: 9 / span 4; }

    .row__text { grid-column: 1 / span 5; }
    .row__media { grid-column: 7 / span 6; }
    .row--flip .row__text { grid-column: 8 / span 5; grid-row: 1; }
    .row--flip .row__media { grid-column: 1 / span 6; grid-row: 1; }

    .split__a { grid-column: 1 / span 6; }
    .split__b { grid-column: 8 / span 5; }
  }
}