.page {
  padding-top: clamp(96px, 11vh, 132px);
}

.band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.band > * {
  min-width: 0;
}

.band__major {
  grid-column: 1 / span 12;
}

.band__minor {
  grid-column: 1 / span 12;
}

@media (min-width: 900px) {
  .band__major {
    grid-column: 1 / span 7;
  }
  .band__minor {
    grid-column: 9 / span 4;
  }
  .band--flip .band__major {
    grid-column: 6 / span 7;
  }
  .band--flip .band__minor {
    grid-column: 1 / span 4;
  }
  .band--half .band__major {
    grid-column: 1 / span 6;
  }
  .band--half .band__minor {
    grid-column: 8 / span 5;
  }
}

.band--ruled {
  padding-top: var(--s4);
  border-top: var(--hair);
}

.section--ink .band--ruled {
  border-top: var(--hair-inverse);
}

.band-index {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  color: var(--signal);
  display: block;
  margin-bottom: var(--s2);
}

.section--ink .band-index {
  color: var(--signal-onink);
}

.hero {
  position: relative;
  padding-top: clamp(104px, 15vh, 168px);
  padding-bottom: clamp(48px, 6vw, 96px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
}

.hero-grid > * {
  min-width: 0;
}

.hero-head {
  grid-column: 1 / span 12;
}

.hero-title {
  font-size: var(--step-7);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.042em;
  text-wrap: initial;
  margin-bottom: var(--s4);
}

.hero-title .line {
  display: block;
}

.hero-title .accent {
  color: var(--signal);
}

.hero-sub {
  max-width: 34ch;
  font-size: var(--step-1);
  line-height: 1.44;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--s2);
  margin-top: var(--s4);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: var(--hair);
}

.hero-meta div {
  min-width: 0;
}

.hero-meta dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.hero-meta dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.hero-figure {
  grid-column: 1 / span 12;
  position: relative;
}

.hero-figure .wipe {
  aspect-ratio: 4 / 5;
}

.hero-stamp {
  position: absolute;
  left: -14px;
  bottom: -16px;
  width: clamp(76px, 9vw, 128px);
  z-index: 2;
  filter: drop-shadow(0 10px 24px rgba(20, 18, 15, 0.35));
}

@media (min-width: 900px) {
  .hero-head {
    grid-column: 1 / span 8;
    padding-bottom: clamp(8px, 2vw, 40px);
  }
  .hero-figure {
    grid-column: 9 / span 4;
    margin-right: calc(-1 * var(--gutter));
  }
  .hero-figure .wipe {
    aspect-ratio: 3 / 4.4;
  }
}

@media (min-width: 1200px) {
  .hero-head {
    grid-column: 1 / span 7;
  }
  .hero-figure {
    grid-column: 8 / span 5;
  }
}

.hero-rule {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: var(--hair);
  padding-top: var(--s2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px var(--s4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.page-head {
  padding-top: clamp(104px, 13vh, 156px);
  padding-bottom: clamp(32px, 4vw, 64px);
}

.page-head h1 {
  font-size: var(--step-6);
  max-width: 22ch;
}

.page-head .page-standfirst {
  margin-top: var(--s3);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.44;
  color: var(--ink-soft);
}

.page-head--split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
}

.page-head--split > * {
  min-width: 0;
}

.page-head--split .page-head-main {
  grid-column: 1 / span 12;
}

.page-head--split .page-head-aside {
  grid-column: 1 / span 12;
}

@media (min-width: 900px) {
  .page-head--split .page-head-main {
    grid-column: 1 / span 8;
  }
  .page-head--split .page-head-aside {
    grid-column: 9 / span 4;
    border-left: var(--hair);
    padding-left: var(--s3);
  }
}

.figure-stack .wipe {
  aspect-ratio: 3 / 2;
}

.figure-stack--tall .wipe {
  aspect-ratio: 4 / 5;
}

.figure-bleed {
  position: relative;
}

.figure-bleed .wipe {
  aspect-ratio: 16 / 9;
}

@media (max-width: 640px) {
  .figure-bleed .wipe {
    aspect-ratio: 4 / 3;
  }
}

.services-band .work-list {
  margin-top: var(--s3);
}

.selected-work {
  background: var(--paper-dim);
}

.selected-work .wipe {
  aspect-ratio: 16 / 10;
}

.process-copy p + p {
  margin-top: 1.1em;
}

.process-marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--s3) var(--grid-gap);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: var(--hair);
}

.process-marks > * {
  min-width: 0;
}

.tool-teaser {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}

.tool-teaser .stamp-opener {
  display: block;
  width: clamp(72px, 8vw, 112px);
  margin-bottom: var(--s3);
}

.tool-teaser h2 {
  font-size: var(--step-5);
}

.teaser-readout {
  border: var(--hair-inverse);
  border-left: 3px solid var(--signal);
  padding: clamp(18px, 2vw, 26px);
  display: grid;
  gap: 14px;
}

.teaser-readout dl {
  margin: 0;
  display: grid;
  gap: 12px;
}

.teaser-readout .readout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  border-bottom: var(--hair-inverse);
  padding-bottom: 10px;
}

.teaser-readout dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-light);
  min-width: 0;
}

.teaser-readout dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  min-width: 0;
}

.quote-scene {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.quote-scene blockquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.032em;
  max-width: 30ch;
}

.quote-scene blockquote .line {
  display: block;
}

.quote-scene figcaption {
  margin-top: var(--s4);
  padding-top: var(--s2);
  border-top: var(--hair-inverse);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.quote-stamp {
  width: clamp(84px, 10vw, 148px);
  margin-bottom: var(--s4);
}

.contact-banner {
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--signal);
}

.contact-banner h2 {
  font-size: var(--step-5);
}

.contact-facts {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
}

.contact-facts a,
.contact-facts p {
  color: var(--paper);
  margin: 0;
}

.contact-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-top: var(--s2);
  border-top: var(--hair-inverse);
}

.contact-fact .icon {
  color: var(--signal);
  width: 1.3em;
  height: 1.3em;
  margin-top: 3px;
}

.contact-fact dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-light);
  grid-column: 2;
}

.contact-fact dd {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: var(--step-0);
  overflow-wrap: break-word;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.contact-grid > * {
  min-width: 0;
}

.contact-grid .contact-form-col {
  grid-column: 1 / span 12;
}

.contact-grid .contact-aside {
  grid-column: 1 / span 12;
}

@media (min-width: 900px) {
  .contact-grid .contact-form-col {
    grid-column: 1 / span 7;
  }
  .contact-grid .contact-aside {
    grid-column: 9 / span 4;
  }
}

.hours-table {
  width: 100%;
  border-top: 2px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.hours-table th,
.hours-table td {
  text-align: left;
  padding: 11px 0;
  border-bottom: var(--hair);
  font-weight: 400;
}

.hours-table td {
  text-align: right;
  white-space: nowrap;
}

.section--ink .hours-table th,
.section--ink .hours-table td {
  border-bottom: var(--hair-inverse);
}

.builder {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.builder > * {
  min-width: 0;
}

.builder-controls {
  grid-column: 1 / span 12;
  display: grid;
  gap: var(--s5);
}

.builder-output {
  grid-column: 1 / span 12;
}

@media (min-width: 1000px) {
  .builder-controls {
    grid-column: 1 / span 7;
  }
  .builder-output {
    grid-column: 9 / span 4;
    position: sticky;
    top: 104px;
  }
}

.builder-group {
  border-top: 2px solid var(--ink);
  padding-top: var(--s2);
}

.builder-group > legend,
.builder-group .builder-legend {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  padding: 0;
  margin-bottom: 6px;
}

.builder-group {
  border-width: 0;
  border-top-width: 2px;
  margin: 0;
  padding-inline: 0;
}

.builder-group-note {
  font-size: var(--step--1);
  color: var(--stone);
  margin: 0 0 var(--s3);
  max-width: 46ch;
}

.option-set {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.option-set > * {
  min-width: 0;
}

.option {
  position: relative;
  display: block;
  min-width: 0;
}

.option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.option-face {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 84px;
  height: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--line);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.option-face:hover {
  border-color: var(--stone);
  transform: translateY(-1px);
}

.option-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.008em;
  overflow-wrap: break-word;
}

.option-note {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--stone);
  overflow-wrap: break-word;
}

.option input:checked + .option-face {
  background: var(--paper-dim);
  border-color: var(--ink);
  border-left-color: var(--signal);
}

.option input:checked + .option-face .option-name {
  color: var(--ink);
}

.option input:focus-visible + .option-face {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  width: max-content;
  max-width: 100%;
  background: var(--paper);
}

.stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 52px;
  color: var(--ink);
  background: var(--paper);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.stepper button:hover:not([disabled]) {
  background: var(--signal);
  color: #fff;
}

.stepper button[disabled] {
  color: var(--line);
  cursor: not-allowed;
}

.stepper output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 0 12px;
  border-inline: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 500;
}

.stepper-caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--stone);
}

.readout {
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--signal);
  padding: clamp(20px, 2.4vw, 30px);
}

.readout h2,
.readout h3 {
  font-size: var(--step-2);
  margin-bottom: var(--s3);
}

.readout-list {
  margin: 0;
  display: grid;
  gap: 14px;
}

.readout-list > div {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: var(--hair-inverse);
  min-width: 0;
}

.readout-list dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.readout-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.1;
  overflow-wrap: break-word;
}

.readout-list dd .unit {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--stone-light);
  margin-left: 6px;
}

.readout-implications {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.readout-implications li {
  position: relative;
  padding-left: 22px;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
}

.readout-implications li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--signal);
}

.readout-disclaimer {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: var(--hair-inverse);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--stone-light);
}

.readout-actions {
  margin-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.spec-preview {
  margin-top: var(--s3);
  padding: 14px;
  background: rgba(244, 241, 234, 0.07);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.portfolio-index {
  display: grid;
  gap: clamp(40px, 6vw, 88px);
}

.portfolio-entry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
  padding-top: var(--s4);
  border-top: var(--hair);
}

.portfolio-entry > * {
  min-width: 0;
}

.portfolio-entry .entry-copy {
  grid-column: 1 / span 12;
}

.portfolio-entry .entry-figure {
  grid-column: 1 / span 12;
}

.portfolio-entry .wipe {
  aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
  .portfolio-entry .entry-copy {
    grid-column: 1 / span 4;
  }
  .portfolio-entry .entry-figure {
    grid-column: 6 / span 7;
  }
  .portfolio-entry:nth-child(even) .entry-copy {
    grid-column: 9 / span 4;
    grid-row: 1;
  }
  .portfolio-entry:nth-child(even) .entry-figure {
    grid-column: 1 / span 7;
    grid-row: 1;
  }
}

.entry-num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  color: var(--signal);
  display: block;
  margin-bottom: var(--s2);
}

.case-article {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.case-article > * {
  min-width: 0;
}

.case-body {
  grid-column: 1 / span 12;
}

.case-rail {
  grid-column: 1 / span 12;
  border-top: 2px solid var(--ink);
  padding-top: var(--s2);
}

@media (min-width: 1000px) {
  .case-body {
    grid-column: 4 / span 9;
  }
  .case-rail {
    grid-column: 1 / span 3;
    position: sticky;
    top: 112px;
  }
}

.case-rail dl {
  margin: 0;
  display: grid;
  gap: 16px;
}

.case-rail dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.case-rail dd {
  margin: 4px 0 0;
  font-size: var(--step--1);
}

.case-stage {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s4);
  margin-top: var(--s5);
  border-top: var(--hair);
}

.case-stage-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
}

.case-stage h2 {
  font-size: var(--step-3);
  max-width: 26ch;
}

.case-stage .prose {
  max-width: 38em;
}

.tabs {
  display: grid;
  gap: var(--s4);
}

.tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--ink);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 18px;
  background: transparent;
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-bottom: 0;
  margin-bottom: -2px;
  text-align: left;
  max-width: 100%;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.tab .tab-num {
  color: var(--stone);
}

.tab:hover {
  color: var(--ink);
  background: var(--paper-dim);
}

.tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--paper-dim);
  border-color: var(--ink);
  border-bottom: 2px solid var(--paper-dim);
}

.tab[aria-selected="true"] .tab-num {
  color: var(--signal);
}

.tab-chevron {
  display: none;
}

.tabpanel {
  max-width: 40em;
}

.tabpanel[hidden] {
  display: none;
}

.tabpanel > h2 {
  font-size: var(--step-3);
  max-width: 24ch;
  margin-bottom: var(--s2);
}

.tabpanel .panel-standfirst {
  font-size: var(--step-1);
  line-height: 1.42;
  color: var(--ink-soft);
  margin-bottom: var(--s3);
  max-width: 38ch;
}

@media (max-width: 767px) {
  .tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: var(--hair);
  }
  .tabs-bar {
    display: contents;
  }
  .tab {
    width: 100%;
    justify-content: space-between;
    border: 0;
    border-bottom: var(--hair);
    margin-bottom: 0;
    padding: 16px 0;
    font-size: var(--step--1);
    background: transparent;
  }
  .tab[aria-selected="true"] {
    background: transparent;
    border-bottom-color: var(--signal);
    color: var(--signal);
  }
  .tab-chevron {
    display: inline-flex;
    transition: transform var(--dur-1) var(--ease-out);
  }
  .tab[aria-expanded="true"] .tab-chevron {
    transform: rotate(180deg);
  }
  .tabpanel {
    padding: var(--s3) 0 var(--s4);
    border-bottom: var(--hair);
    max-width: none;
  }
  .tab:nth-of-type(1) { order: 1; }
  .tabpanel:nth-of-type(1) { order: 2; }
  .tab:nth-of-type(2) { order: 3; }
  .tabpanel:nth-of-type(2) { order: 4; }
  .tab:nth-of-type(3) { order: 5; }
  .tabpanel:nth-of-type(3) { order: 6; }
  .tab:nth-of-type(4) { order: 7; }
  .tabpanel:nth-of-type(4) { order: 8; }
  .tab:nth-of-type(5) { order: 9; }
  .tabpanel:nth-of-type(5) { order: 10; }
  .tab:nth-of-type(6) { order: 11; }
  .tabpanel:nth-of-type(6) { order: 12; }
  .tab:nth-of-type(7) { order: 13; }
  .tabpanel:nth-of-type(7) { order: 14; }
}

.chip-bar {
  position: sticky;
  top: clamp(56px, 7.5vh, 84px);
  z-index: 40;
  background: var(--paper);
  border-top: var(--hair);
  border-bottom: 2px solid var(--ink);
}

.chip-scroll {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.chip:hover,
.chip:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.chip.is-current {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}

.chip-count {
  font-size: 10px;
  color: currentColor;
  opacity: 0.7;
}

.chip-sections {
  display: grid;
}

.chip-section {
  padding-block: clamp(40px, 6vw, 88px);
  border-bottom: var(--hair);
  scroll-margin-top: 104px;
}

.chip-section:last-child {
  border-bottom: 0;
}

.chip-section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: baseline;
  margin-bottom: var(--s4);
}

.chip-section-head > * {
  min-width: 0;
}

.chip-section-head h2 {
  grid-column: 1 / span 12;
  font-size: var(--step-4);
  max-width: 22ch;
}

.chip-section-head .standfirst {
  grid-column: 1 / span 12;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--stone);
  max-width: 46ch;
}

@media (min-width: 900px) {
  .chip-section-head h2 {
    grid-column: 1 / span 7;
  }
  .chip-section-head .standfirst {
    grid-column: 9 / span 4;
  }
}

.chip-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  max-width: 46em;
}

.chip-section-body > * {
  min-width: 0;
}

.chip-section-body .prose {
  grid-column: 1;
}

.chip-section-body .aside-note {
  grid-column: 1;
  max-width: none;
}

.aside-note {
  border-top: 2px solid var(--signal);
  padding-top: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.65;
  color: var(--stone);
}

.aside-note strong {
  color: var(--ink);
  font-weight: 500;
}

.glance {
  background: var(--paper-dim);
  border-top: 3px solid var(--signal);
  padding: clamp(24px, 3.4vw, 48px);
}

.glance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink);
}

.glance-head h2 {
  font-size: var(--step-3);
  min-width: 0;
}

.glance-head .meta {
  min-width: 0;
}

.glance-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 0;
}

.glance-list dt {
  grid-column: 1;
  padding: 18px var(--s3) 18px 0;
  border-bottom: var(--hair);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}

.glance-list dd {
  grid-column: 2;
  padding: 18px 0;
  border-bottom: var(--hair);
  margin: 0;
  font-size: var(--step-0);
  overflow-wrap: break-word;
}

.glance-list dd strong {
  font-weight: 600;
}

@media (max-width: 700px) {
  .glance-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .glance-list dt {
    grid-column: 1;
    padding: 16px 0 4px;
    border-bottom: 0;
  }
  .glance-list dd {
    grid-column: 1;
    padding: 0 0 16px;
  }
}

.glance-table {
  margin-top: 0;
}

.glance-table th,
.glance-table td {
  font-size: var(--step-0);
}

.glance-foot {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--stone);
  max-width: 60ch;
}

.terms-prose {
  max-width: 38em;
  margin-top: clamp(48px, 6vw, 88px);
}

.terms-prose section + section {
  margin-top: clamp(40px, 5vw, 72px);
}

.terms-prose h2 {
  font-size: var(--step-3);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
  margin-bottom: var(--s2);
}

.terms-prose h3 {
  font-size: var(--step-1);
  margin-top: var(--s4);
  margin-bottom: 8px;
}

.terms-prose .clause-num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  color: var(--signal);
  display: block;
  margin-bottom: 10px;
}

.faq {
  border-top: 2px solid var(--ink);
  max-width: 44em;
}

.faq-item {
  border-bottom: var(--hair);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: 60px;
  padding: 18px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color var(--dur-1) var(--ease-out);
}

.faq-q:hover {
  color: var(--signal);
}

.faq-q span {
  min-width: 0;
}

.faq-q .icon {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--signal);
}

.faq-q .faq-minus {
  display: none;
}

.faq-q[aria-expanded="true"] .faq-minus {
  display: inline-flex;
}

.faq-q[aria-expanded="true"] .faq-plus {
  display: none;
}

.faq-a {
  padding: 0 0 var(--s3);
  max-width: 38em;
}

.faq-a[hidden] {
  display: none;
}

.data-table {
  width: 100%;
  min-width: 560px;
  border-top: 2px solid var(--ink);
  font-size: var(--step--1);
}

@media (max-width: 560px) {
  .data-table {
    min-width: 0;
  }
  .data-table thead {
    display: none;
  }
  .data-table tbody tr {
    display: block;
    padding: 12px 0;
    border-bottom: var(--hair);
  }
  .data-table th,
  .data-table td {
    display: block;
    width: 100%;
    padding: 2px 0;
    border-bottom: 0;
  }
}

.data-table caption {
  text-align: left;
  padding-bottom: 12px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 20px 14px 0;
  border-bottom: var(--hair);
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
}

.data-table tbody th {
  font-weight: 600;
  width: 26%;
}

.data-table td code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--signal-deep);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--s3);
  padding-block: var(--s2);
  border-top: var(--hair);
  border-bottom: var(--hair);
  margin-bottom: var(--s5);
}

.filter-bar .filter-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.filter-btn:hover {
  border-color: var(--ink);
}

.filter-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(20, 18, 15, 0.94);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  background: none;
}

.lightbox figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--stone-light);
  max-width: 60ch;
}

.lightbox-close {
  position: absolute;
  top: clamp(10px, 2vw, 24px);
  right: clamp(10px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--paper);
  border: 1px solid rgba(244, 241, 234, 0.4);
}

.lightbox-close:hover {
  background: var(--signal);
  border-color: var(--signal);
}

.notfound {
  min-height: 62vh;
  display: grid;
  align-content: center;
  padding-block: clamp(64px, 10vw, 140px);
}

.notfound-code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 22vw, 14rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  color: var(--signal);
}

.notfound h1 {
  font-size: var(--step-5);
  margin-top: var(--s3);
  max-width: 24ch;
}

.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: var(--hair);
}

.cta-strip {
  border-top: 3px solid var(--signal);
  background: var(--paper-dim);
  padding-block: clamp(40px, 5vw, 80px);
}

.cta-strip .band__major h2 {
  font-size: var(--step-4);
  max-width: 24ch;
}

.legal-updated {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 40px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  max-width: 60ch;
  line-height: 1.5;
}

.legal-updated .icon {
  margin-top: 3px;
}

.legal-updated .icon {
  color: var(--signal);
}

.inline-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--grid-gap);
}

.inline-gallery > * {
  min-width: 0;
}

.inline-gallery .wipe {
  aspect-ratio: 3 / 2;
}

.mini-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: var(--hair);
  margin-top: clamp(48px, 6vw, 88px);
}

.mini-nav a {
  max-width: 100%;
}

/* Inline text links in body copy are laid out as atomic inline-block boxes.
   A plain inline link that wraps across two lines has a bounding box spanning
   both full lines, which physically covers the links and text beside it; an
   inline-block link occupies one rectangle in the flow instead, so nothing is
   ever painted over. Long link text still wraps inside its own box, so no
   label is pushed off the edge. */
.prose a:not([class]),
.aside-note a:not([class]),
.glance-list dd a:not([class]),
.glance-foot a:not([class]),
.kv-table td a:not([class]),
.data-table td a:not([class]),
.contact-facts a:not([class]),
.readout-disclaimer a:not([class]),
.terms-prose a:not([class]),
.faq-a a:not([class]),
p a:not([class]),
.prose li a:not([class]),
.terms-prose li a:not([class]),
.faq-a li a:not([class]),
.glance-list dd a:not([class]),
label a:not([class]) {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}

.nav-panel-foot a {
  white-space: nowrap;
}

/* The chip rail scrolls sideways on wide screens, but below the tablet
   breakpoint the last chips in the row end up sliced by the viewport edge
   with no visible affordance. Let the row wrap there instead, so every
   label is whole and reachable at 320px up. */
@media (max-width: 1023px) {
  .chip-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .chip {
    flex: 0 1 auto;
    max-width: 100%;
  }
}