/* Apply the sweater dye before each illustration's existing light treatment. */
:root[data-accent="saffron"] {
  --portrait-dye: url("#portrait-saffron");
}
:where(img[src^="/assets/portrait/"]) {
  filter: var(--portrait-dye, none);
}

/* The work surface keeps a reading width. Editorial bands can use the entire viewport. */
:root {
  --footer-ground: #0b0a0c;
}
.tone-dark {
  color-scheme: dark;
  color: var(--ink-1);
  background-color: #000;
}
.tone-light {
  color-scheme: light;
  --title-accent: var(--title-accent-on-light);
  --muted: #514c5b;
  --accent-ink: var(--lavender-700);
  /* The semantic roles flip with the band, so components never branch on tone. */
  --surface-page: var(--l-bg);
  --surface-raised: var(--l-surface);
  --surface-card: var(--l-surface-2);
  --surface-sunken: var(--l-fill-1);
  --text-strong: var(--l-ink-1);
  --text: var(--l-ink-2);
  --text-muted: var(--l-ink-2);
  --text-subtle: var(--l-ink-3);
  --text-accent: var(--lavender-700);
  --border: var(--l-rule);
  --border-strong: rgba(23, 22, 27, .22);
  --action-secondary: var(--l-fill-2);
  --action-secondary-hover: rgba(23, 22, 27, .14);
  --spotlight: #8a5a12;
  --focus-ring: var(--lavender-700);
  --paper-rule: var(--ink-3);
  --paper-card: #f4f1f7;
  color: var(--l-ink-1);
  background-color: var(--l-bg);
}
.page-band {
  padding: clamp(44px, 5.6vw, 88px) var(--edge);
}
.page-band:first-child {
  padding-top: clamp(112px, 9vw, 152px);
}
.band-inner {
  max-width: calc(1520px - 2 * var(--edge));
  margin-inline: auto;
}
.band-inner
  > :is(
    .art-lead,
    .desk-layout,
    .calendar-section,
    .story-grid,
    .next-meeting
  ) {
  margin-block: 0;
}
.page-band:has(.next-meeting) {
  padding-block: clamp(36px, 4vw, 68px);
}
.tone-light
  :is(
    .intro,
    .reading-step p,
    .story-copy p,
    .capability-index p,
    .comparison article p,
    .format-grid p,
    .price-grid p:not(.eyebrow),
    .price-grid ul,
    .price-grid h2 small
  ) {
  color: var(--muted);
}
.tone-light
  :is(
    .page-hero .eyebrow,
    .desk-heading .eyebrow,
    .story-copy small,
    .capability-index small,
    .text-link,
    .tile-arrow,
    .capability-index .arrow-up,
    .comparison-head
  ),
.tone-light .price-grid li::before {
  color: var(--accent-ink);
}
.tone-light .signal-dot {
  background: var(--accent-ink);
}
.tone-light
  :is(
    .reading-step,
    .story-tile,
    .capability-index a,
    .lead-cover,
    .comparison article
  ) {
  border-color: var(--paper-rule);
}
.tone-light .btn.primary {
  background: var(--card);
  color: #fff;
}
.tone-light .btn.primary:hover {
  background: #493950;
}
.tone-light :focus-visible {
  outline-color: var(--accent-ink);
}
.tone-light
  :is(
    .reading-step .point-art,
    .desk-signal,
    .capability-index a > img,
    .comparison article img
  ) {
  background: #000;
  border-radius: var(--r-xs);
}
.tone-light .desk-signal {
  overflow: hidden;
}
.tone-light :is(.price-grid article, .format-grid article, .tour-card) {
  background: var(--paper-card);
  box-shadow: inset 0 0 0 1px var(--paper-rule);
}
.tone-light .format {
  background: #dfd1ed;
  color: #382841;
}
.tone-light .tour-rail {
  background: var(--l-bg);
}
.tone-light .tour-rail button {
  color: #514c5b;
}
.tone-light .tour-rail button[aria-pressed='true'] {
  background: var(--l-ink-2);
  color: white;
}

/* Six square-pixel rows settle into the footer. */

.footer-divider {
  --pixel: var(--footer-ground);
  height: 24px;
  background:
    repeating-linear-gradient(
        90deg,
        transparent 0 28px,
        var(--pixel) 28px 32px,
        transparent 32px 64px
      )
      0 0,
    repeating-linear-gradient(
        90deg,
        var(--pixel) 0 4px,
        transparent 4px 20px,
        var(--pixel) 20px 24px,
        transparent 24px 40px
      )
      0 4px,
    repeating-linear-gradient(
        90deg,
        transparent 0 8px,
        var(--pixel) 8px 12px,
        transparent 12px 20px,
        var(--pixel) 20px 24px
      )
      0 8px,
    repeating-linear-gradient(
        90deg,
        var(--pixel) 0 8px,
        transparent 8px 12px,
        var(--pixel) 12px 16px,
        transparent 16px 24px
      )
      0 12px,
    repeating-linear-gradient(
        90deg,
        var(--pixel) 0 20px,
        transparent 20px 24px,
        var(--pixel) 24px 32px,
        transparent 32px 36px
      )
      0 16px,
    repeating-linear-gradient(
        90deg,
        var(--pixel) 0 44px,
        transparent 44px 48px,
        var(--pixel) 48px 64px
      )
      0 20px;
  background-size: 100% 4px;
  background-repeat: no-repeat;
}
/* A lavender seam between two dark chapters, in the footer's square-pixel
   rows: the chapter above dissolves into lavender, which dissolves into the
   chapter below. It is one crisp SVG, so no zoom level leaves hairlines
   between rows, and its lower half is transparent, so the band's own colour
   shows through. */
.recap-desk::before,
.cw-band::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--seam-height);
  pointer-events: none;
  background: url('/assets/brand/seam.svg') 0 0 / 2880px 100% repeat-x;
}
footer {
  background: var(--footer-ground);
}
@media (max-width: 700px) {
  .page-band:first-child {
    padding-top: 102px;
  }
}

/* Hero images meet the viewport edges while headings and controls retain a gutter. */
:root {
  --spread-gutter: clamp(22px, 4.6vw, 88px);
  --spread-height: clamp(610px, 89svh, 1040px);
}
.art-page .band-inner,
.desk-page .page-band:first-child .band-inner {
  max-width: none;
}
.art-page .page-band:has(.art-lead) {
  padding: 0;
}
.art-lead {
  --lead-rule: var(--l-ink-3);
  --lead-ink: var(--pale);
  display: grid;
  position: relative;
  isolation: isolate;
  min-height: var(--spread-height);
  align-items: stretch;
}
.tone-light .art-lead {
  --lead-rule: var(--ink-2);
  --lead-ink: var(--lavender-700);
}
.art-lead .page-hero {
  align-self: center;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: max(110px, 13svh) var(--spread-gutter) clamp(48px, 7vh, 96px);
}
.art-lead .page-hero h1 {
  max-width: 14ch;
  font-size: clamp(48px, 5.65vw, 110px);
  line-height: 0.97;
  letter-spacing: var(--tr-display);
}
.art-lead .intro {
  max-width: 42ch;
  font-size: clamp(16px, 1.35vw, 23px);
}
.lead-scene {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.lead-scene .point-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.lead-spread {
  grid-template-columns: 0.85fr 1.15fr;
}
.lead-reverse {
  grid-template-columns: 1.14fr 0.86fr;
}
.lead-reverse .page-hero {
  grid-column: 2;
  grid-row: 1;
}
.lead-reverse .lead-scene {
  grid-column: 1;
  grid-row: 1;
}
:is(.lead-spread, .lead-reverse) .lead-portrait {
  position: absolute;
  inset: 0;
  object-position: 50% 42%;
}

/* A poster uses the whole screen as its image plane. */
.lead-poster {
  min-height: max(670px, 100svh);
}
.lead-poster .page-hero {
  position: relative;
  z-index: 1;
  align-self: end;
  width: 53%;
}
.lead-poster .page-hero h1 {
  font-size: clamp(54px, 6.6vw, 126px);
  max-width: 12ch;
}
.lead-poster .lead-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
}
.lead-poster :is(.lead-portrait, .lead-scene > .particle-portrait) {
  position: absolute;
  inset: 0 0 0 auto;
  width: 77%;
  object-position: 50% 36%;
}
.lead-poster .lead-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #000 9%,
    #000e 28%,
    #000a 42%,
    transparent 70%
  );
}
.tone-light .lead-poster .lead-scene {
  background: var(--l-bg);
}
.tone-light .lead-poster :is(.lead-portrait, .lead-scene > .particle-portrait) {
  width: 55%;
}
.tone-light .lead-poster .lead-scene::after {
  background: none;
}

/* A horizontal contact sheet pairs the portrait with two related object studies. */
.lead-cover {
  grid-template-rows: auto minmax(285px, 47svh);
}
.lead-cover .page-hero {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(200px, 0.6fr);
  align-items: end;
  column-gap: var(--spread-gutter);
  padding-bottom: clamp(32px, 4vw, 70px);
}
.lead-cover .eyebrow {
  grid-column: 1 / -1;
}
.lead-cover h1 {
  grid-row: 2 / span 2;
}
.lead-cover .intro,
.lead-cover .actions {
  grid-column: 2;
}
.lead-cover .intro {
  margin-top: 0;
}
.lead-cover .lead-scene {
  display: grid;
  grid-template-columns: 1.55fr 0.83fr 0.62fr;;
}
.lead-cover .point-art {
  min-width: 0;
  min-height: 0;
}
.lead-cover .lead-portrait {
  object-position: 50% 32%;
}
.lead-cover .lead-scene > .particle-portrait {
  position: relative;
  inset: auto;
  min-width: 0;
  height: 100%;
}
.lead-cover .lead-study,
.lead-cover .lead-detail {
  object-fit: contain;
}

/* Circular studies change scale around a single portrait, with fine arcs on the paper. */
.lead-folio {
  grid-template-columns: 1.04fr 0.96fr;
  padding-inline: var(--spread-gutter);
  align-items: center;
  gap: clamp(24px, 4vw, 84px);
}
.lead-folio .page-hero {
  padding-inline: 0;
}
.lead-folio .lead-scene {
  width: 100%;
  aspect-ratio: 1.05;
  overflow: visible;
  margin-block: 90px 28px;
  background-image: radial-gradient(
    circle,
    var(--lead-rule) 0.8px,
    transparent 1px
  );
  background-size: 14px 14px;
}
.lead-folio .point-art {
  border-radius: 50%;
  border: 1px solid var(--lead-rule);
  position: absolute;
  height: auto;
  aspect-ratio: 1;
}
.lead-folio :is(.lead-portrait, .particle-portrait) {
  width: 72%;
  top: 0;
  right: 0;
}
.lead-folio .particle-portrait {
  inset: 0 0 auto auto;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}
.lead-folio .lead-study {
  width: 41%;
  bottom: 4%;
  left: 0;
}
.lead-folio .lead-detail {
  width: 25%;
  right: 11%;
  bottom: 0;
}

/* Four gaps in a circular study reveal the section ground. */
.lead-band {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.lead-band .lead-scene {
  width: 88%;
  aspect-ratio: 1;
  justify-self: center;
  margin-block: 96px 34px;
  border-radius: 50%;
  border: 1px solid var(--lead-rule);
}
.lead-band .lead-scene::before {
  content: '';
  position: absolute;
  inset: 5%;
  border: 1px dashed var(--lead-rule);
  border-radius: 50%;
}
.lead-band .lead-portrait {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center top;
}
.particle-portrait {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: inherit;
  touch-action: pan-y;
}
.particle-portrait:enabled {
  cursor: crosshair;
}
.particle-portrait:disabled {
  opacity: 1;
  cursor: default;
}
.particle-portrait:focus-visible {
  outline: 2px solid var(--lead-ink, var(--lavender-700));
  outline-offset: -4px;
}
.particle-portrait canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.household-portraits {
  position: absolute;
  inset: 0 0 0 auto;
  width: 57%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
}
.household-portraits .particle-portrait {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.lead-poster .household-portraits .point-art {
  object-position: center top;
}

/* Full-size product imagery follows the text, with comfortable measures for reading. */
.workflow-section.workflow-path > figure {
  max-width: min(100%, 1320px);
}
.art-page .page-band:has(.stories-cases) {
  padding-inline: 0;
}
.stories-cases {
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(16px, 3vw, 54px);
}
.stories-cases .story-copy {
  margin-inline: var(--spread-gutter);
}
.stories-cases .story-visual img {
  aspect-ratio: 1.55;
}
.stories-cases .story-tile:last-child {
  margin-top: clamp(36px, 7vw, 130px);
}
.entry-spread {
  width: 100%;
  max-width: none;
  min-height: var(--spread-height);
  padding: 0;
  gap: 0;
  grid-template-columns: 1fr 1fr;
}
.entry-copy {
  padding: 112px var(--spread-gutter) 60px;
}
.entry-portrait {
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
.entry-portrait img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.desk-page .page-band:first-child {
  padding: 0;
}
/* The workspace hero: copy on the left, the bust seated on the band floor. */
.illustrated-desk {
  display: grid;
  grid-template-columns: 1fr minmax(0, 46%);
  gap: 0;
  align-items: end;
}
.illustrated-desk > div:first-child {
  align-self: center;
  padding: 105px var(--spread-gutter) 48px;
}
.illustrated-desk .desk-signal {
  border-radius: 0;
  padding-top: calc(var(--header-height) + 18px);
}
.desk-signal img {
  width: 100%;
  height: clamp(280px, 44svh, 480px);
  max-height: none;
  object-fit: contain;
  object-position: 50% 100%;
}

/* A listening portrait and a waveform sit alongside the client's own words. */
.transcript-pull {
  position: relative;
  padding: 0;
}
.transcript-pull figure {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  min-height: clamp(460px, 77svh, 930px);
  padding: clamp(42px, 6vw, 110px) var(--spread-gutter);
  gap: clamp(32px, 6vw, 120px);
}
.transcript-voice {
  position: relative;
  aspect-ratio: 1.25;
}
.transcript-voice img {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #000;
}
.transcript-voice :is(.quote-portrait, .particle-portrait) {
  width: 78%;
  height: auto;
  left: 0;
  top: 0;
}
.transcript-voice .particle-portrait {
  inset: 0 auto auto 0;
  aspect-ratio: 1;
  border-radius: 50%;
}
.transcript-voice .quote-wave {
  width: 43%;
  height: auto;
  bottom: -2%;
  right: 0;
}
.transcript-pull figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 16px;
  font: var(--fs-s)/1.5 var(--mono);
}
.transcript-pull figcaption span {
  color: var(--muted);
}
.transcript-pull h2 {
  max-width: 16ch;
  font-size: clamp(33px, 4.65vw, 92px);
  line-height: 1.01;
  letter-spacing: var(--tr-display);
  margin: 22px 0 32px;
}

.cap-section {
  display: grid;
  grid-template-columns: minmax(215px, 0.68fr) minmax(0, 1.45fr);
  align-items: start;
  gap: clamp(30px, 5vw, 94px);
  padding: clamp(54px, 6vw, 105px) var(--spread-gutter);
  background: var(--l-bg);
  isolation: isolate;
}
.cap-intro {
  border-top: 3px solid var(--brand-accent);
  padding-top: clamp(20px, 2.5vw, 38px);
}
.cap-intro > p {
  max-width: 31ch;
  margin: 20px 0 26px;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--muted);
}
.cap-intro h2 {
  font-size: clamp(42px, 4.5vw, 86px);
  max-width: 15ch;
  line-height: 1;
  letter-spacing: var(--tr-display);
}
.cap-gallery {
  min-width: 0;
  border: 1px solid var(--paper-rule);
  background: var(--paper-card);
}
.cap-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--paper-rule);
}
.cap-tabs button {
  position: relative;
  padding: clamp(12px, 1.3vw, 23px) 6px;
  color: var(--muted);
  background: transparent;
  font-size: clamp(13px, 1.15vw, 19px);
  font-weight: 500;
  border-inline-end: 1px solid var(--paper-rule);
}
.cap-tabs button:last-child {
  border: 0;
}
.cap-tabs button[aria-selected='true'] {
  background: #d3bedf;
  color: #2b2133;
  box-shadow: inset 0 -3px var(--lavender-700);
}
.cap-tabs button:hover {
  background: var(--mist);
}
.cap-tabs button:focus-visible {
  outline-offset: -5px;
}
.cap-panel {
  display: block;
}
.cap-plate {
  position: relative;
  overflow: hidden;
  background: #000;
}
.cap-plate img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cap-copy {
  border-top: 1px solid var(--paper-rule);
  padding: clamp(18px, 2.1vw, 34px) clamp(20px, 3.1vw, 50px);
}
.cap-copy h3 {
  font-size: clamp(23px, 2.3vw, 39px);
  line-height: 1.08;
  letter-spacing: var(--tr-title);
}
.cap-copy p {
  max-width: 56ch;
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 19px);
}
.illustrated-closing {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(610px, 93svh);
  padding: clamp(66px, 9svh, 126px) var(--spread-gutter);
}
.illustrated-closing > div:first-child {
  position: relative;
  z-index: 1;
  max-width: 54%;
}
.illustrated-closing h2 {
  font-size: clamp(56px, 7.3vw, 140px);
  line-height: 0.95;
}
.illustrated-closing .eyebrow {
  color: var(--lavender);
}
.illustrated-closing div > p:not(.eyebrow) {
  color: var(--ink-3);
  max-width: 38ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.35vw, 22px);
}
.illustrated-closing .primary,
.illustrated-closing .signal-dot {
  background: var(--pale);
}
.illustrated-closing .primary {
  color: var(--plum-950);
}
.illustrated-closing .subtle {
  color: var(--l-bg);
  background: var(--card);
}
.illustrated-closing .btn:hover {
  filter: brightness(1.13);
}
.closing-portrait {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: black;
}
.closing-portrait img {
  height: 100%;
  width: 100%;;
}
.closing-portrait::after {
  pointer-events: none;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #000 8%,
    #000e 25%,
    #0009 43%,
    transparent 68%
  );
}

/* The pre-footer chapter on every page: at least one screen tall, the guide
   grid stretching to fill it, and the pixel rows flush with the footer. */
.field-guides {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.field-guides > .field-guide-inner {
  flex: 1;
}
.field-guides > .footer-divider {
  flex: none;
}
/* The illustration and guide index meet the two edges of the viewport. */
.field-guide-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas: 'art title' 'art links';
  grid-template-rows: 1.15fr 1fr;
}
.field-guide-art {
  grid-area: art;
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 65svh, 800px);
  border-inline-end: 1px solid var(--paper-rule);
}
.field-guide-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.16);
}
.guide-tablet-plate {
  display: grid;
  place-items: center;
  container-type: inline-size;
}
.guide-tablet {
  position: relative;
  width: 66%;
  aspect-ratio: 1.53;
  padding: 2.3% 3.2%;
  border: 1px solid #9887a4;
  border-radius: 4cqw;
  background: linear-gradient(125deg, #766581 0%, #38303e 10%, var(--card) 76%, #66546e);
  box-shadow: -.6cqw .85cqw .1cqw #76677f, -.7cqw 1.05cqw .1cqw #3e3443,
    -1.8cqw 3.2cqw 3.5cqw -2cqw #44344977;
  transform: perspective(950px) rotateY(-13deg) rotateX(12deg) rotateZ(-7deg);
}
.guide-tablet::before {
  content: '';
  position: absolute;
  left: 2%;
  top: 48%;
  width: .8cqw;
  height: .8cqw;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 1px 1px 1px #a58db4;
}
.guide-tablet-screen {
  height: 100%;
  border: 1px solid var(--plum-950);
  border-radius: 1.7cqw;
  overflow: hidden;
  color: #34273d;
  background-color: var(--lavender-100);
  background-image: radial-gradient(#51415315 .65px, transparent 1px);
  background-size: 3px 3px;
}
.guide-app-heading {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.1cqw 2.8cqw;
  background: #3a2f43;
  color: #e5d7ed;
  font: 400 3.1cqw/1.2 var(--font-pixel);
}
.guide-app-heading i {
  width: 3.6cqw;
  height: 3.6cqw;
  mask: url('/assets/brand/atomiq-atom-saffron.svg') center / contain no-repeat;
  background: var(--brand-accent);
}
.guide-app-heading span {
  margin-left: auto;
  color: var(--accent-highlight);
  font: 500 1.7cqw/1 var(--mono);
}
.guide-app-body {
  padding: 2.5cqw 3.2cqw;
}
.guide-app-body strong {
  display: block;
  font-size: 4.2cqw;
  letter-spacing: var(--tr-display);
  line-height: 1.05;
}
.guide-app-body > div {
  margin-top: 1.8cqw;
  border-top: 1px solid #c5b7cc;
  padding-top: 1cqw;
}
.guide-app-body small,
.guide-app-body span {
  display: block;
}
.guide-app-body small {
  color: #6b526e;
  font: 500 1.65cqw/1.4 var(--mono);
}
.guide-app-body span {
  font-size: 2.6cqw;
  line-height: 1.35;
}
.guide-stylus {
  position: absolute;
  right: 9%;
  top: 110%;
  width: 48%;
  height: 3%;
  border-radius: 2cqw;
  clip-path: polygon(0 55%, 7% 0, 100% 0, 100% 100%, 7% 100%);
  background: linear-gradient(0deg, var(--l-ink-3), var(--brand-accent) 60%, #ede1d4);
  transform: rotate(-4deg);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .guide-tablet {
    transition: transform 260ms ease;
  }
  .guide-tablet-plate:hover .guide-tablet {
    transform: perspective(950px) rotateY(-5deg) rotateX(5deg) rotateZ(-4deg);
  }
}
.field-guide-inner h2 {
  grid-area: title;
  align-self: end;
  padding: clamp(42px, 5vw, 88px) var(--spread-gutter) clamp(24px, 3vw, 52px);
  font-size: clamp(52px, 6.45vw, 126px);
  line-height: 0.96;
  letter-spacing: var(--tr-display);
}
.field-guide-links {
  grid-area: links;
  align-self: start;
  padding-bottom: clamp(32px, 4vw, 72px);
}
.field-guide-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: clamp(16px, 1.7vw, 30px) var(--spread-gutter);
  border-top: 1px solid #b9b2c2;
  font-size: clamp(16px, 1.45vw, 24px);
  font-weight: 500;
}
.field-guide-links a:last-child {
  border-bottom: 1px solid #b9b2c2;
}
.field-guide-links .arrow-up {
  color: var(--accent-ink);
}
.field-guide-links a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  :root {
    --spread-gutter: clamp(19px, 4.2vw, 32px);
  }
  .art-lead {
    min-height: 0;
  }
  .art-lead .page-hero h1 {
    font-size: clamp(44px, 8vw, 66px);
  }
  .art-lead .page-hero {
    padding-block: 112px 35px;
  }
  .art-lead .intro {
    font-size: var(--fs-l);
  }
  .lead-spread,
  .lead-reverse,
  .lead-cover,
  .lead-poster {
    grid-template-columns: 1fr;
  }
  .lead-spread,
  .lead-reverse {
    grid-template-rows: auto clamp(280px, 48svh, 570px);
  }
  .lead-reverse .page-hero,
  .lead-reverse .lead-scene {
    grid-column: auto;
    grid-row: auto;
  }
  .lead-poster {
    min-height: max(690px, 100svh);
  }
  .lead-poster .page-hero {
    width: 100%;
    padding-top: 60px;
  }
  .lead-poster :is(.lead-portrait, .lead-scene > .particle-portrait) {
    width: 100%;
    height: 76%;
    object-position: 55% 30%;
  }
  .lead-poster .lead-scene::after {
    background: linear-gradient(
      0deg,
      #000 12%,
      #000e 32%,
      #0009 49%,
      transparent 72%
    );
  }
  .tone-light .lead-poster {
    min-height: 0;
    grid-template-rows: auto clamp(260px, 44svh, 430px);
  }
  .tone-light .lead-poster .page-hero {
    padding-top: 112px;
  }
  .tone-light .lead-poster .lead-scene {
    position: relative;
    inset: auto;
    z-index: 0;
  }
  .tone-light .lead-poster :is(.lead-portrait, .lead-scene > .particle-portrait) {
    width: 100%;
    height: 100%;
  }
  .lead-cover {
    grid-template-rows: auto clamp(185px, 34vw, 280px);
  }
  .lead-cover .page-hero {
    display: block;
  }
  .lead-cover .intro {
    margin-top: 18px;
  }
  .lead-cover .lead-scene {
    grid-template-columns: 1.3fr 0.8fr 0.65fr;
  }
  .lead-folio {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lead-folio .lead-scene {
    width: min(72%, 370px);
    margin: 0 var(--spread-gutter) 38px auto;
  }
  .lead-band {
    grid-template-columns: 1.3fr 0.7fr;
  }
  .lead-band .page-hero {
    padding-right: 0;
  }
  .lead-band .lead-scene {
    width: 96%;
  }
  .lead-band .page-hero h1 {
    font-size: clamp(38px, 7vw, 55px);
  }
  .transcript-pull figure {
    min-height: 0;
    gap: 24px;
  }
  .transcript-pull h2 {
    font-size: clamp(28px, 4.8vw, 39px);
  }
  .cap-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }
  .cap-copy {
    padding: 26px var(--spread-gutter);
  }
  .field-guide-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'art' 'links';
    grid-template-rows: auto;
  }
  .field-guide-inner h2 {
    padding-bottom: 0;
    font-size: clamp(48px, 9vw, 72px);
  }
  .field-guide-art {
    min-height: clamp(215px, 60vw, 395px);
    border-inline-end: 0;
  }
  .field-guide-links {
    padding-bottom: 30px;
  }
  .entry-spread {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .entry-copy {
    padding: 108px var(--spread-gutter) 40px;
  }
  .entry-spread .entry-copy,
  .entry-spread .entry-portrait {
    grid-column: auto;
    grid-row: auto;
  }
  .entry-portrait {
    height: clamp(190px, 38svh, 410px);
  }
  .entry-portrait img {
    max-height: none;
    object-fit: cover;
    object-position: 50% 34%;
  }
}
@media (max-width: 540px) {
  .lead-band {
    grid-template-columns: 1fr;
  }
  .lead-band .page-hero {
    padding-right: var(--spread-gutter);
  }
  .lead-band .lead-scene {
    width: min(68%, 310px);
    margin: 0 8% 30px auto;
  }
  .transcript-pull figure {
    grid-template-columns: 1fr;
    padding-block: 32px 42px;
  }
  .transcript-voice {
    width: 72%;
  }
  .transcript-pull h2 {
    max-width: 19ch;
    margin-block: 15px 20px;
  }
  .cap-tabs button {
    font-size: var(--fs-s);
    padding: 14px 3px;
  }
  .cap-copy h3 {
    max-width: 16ch;
  }
  .cap-copy p {
    margin-block: 12px 16px;
  }
  .illustrated-closing {
    min-height: max(600px, 88svh);
    padding-block: 36px;
  }
  .illustrated-closing > div:first-child {
    max-width: 100%;
  }
  .illustrated-closing h2 {
    font-size: clamp(46px, 11vw, 64px);
    margin-top: 15px;
  }
  .closing-portrait .particle-portrait {
    height: 74%;
  }
  .closing-portrait::after {
    background: linear-gradient(
      0deg,
      #000 15%,
      #000e 33%,
      #0009 48%,
      transparent 70%
    );
  }
  .stories-cases {
    grid-template-columns: 1fr;
  }
  .stories-cases .story-tile:last-child {
    margin-top: 0;
    padding-inline-end: var(--spread-gutter);
  }
  .stories-cases .story-tile:last-child .story-copy {
    margin: 0;
  }
  .illustrated-desk {
    grid-template-columns: 1fr;
  }
  .illustrated-desk > div:first-child {
    padding-block: 96px 22px;
  }
  .illustrated-desk .desk-signal {
    padding-top: 0;
  }
  .desk-signal img {
    height: 220px;
    object-position: 50% 100%;
  }
}

/* Images are transparent point renders; section paper shows through the grains. */
.lead-scene .particle-portrait > img.point-art:is(.lead-portrait, .lead-partner),
.transcript-voice .particle-portrait > .point-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lead-scene .point-art,
.transcript-voice img,
.cap-plate,
.field-guide-art,
.reading-step .point-art,
.story-visual,
.guide-example > div,
.format-art,
.price-art,
.tour-plate img,
.tone-light
  :is(
    .reading-step .point-art,
    .desk-signal,
    .capability-index a > img,
    .comparison article img
  ) {
  background: transparent;
}
.lead-cover .lead-scene {
  background: transparent;
  gap: 0;
}
.lead-cover :is(.point-art, .particle-portrait) + .point-art {
  border-inline-start: 1px solid var(--lead-rule);
}
.tone-light
  :is(
    .lead-scene img,
    .desk-signal img,
    .reading-step img,
    .story-visual img,
    .cap-plate img,
    .field-guide-art img,
    .transcript-voice img,
    .price-art img,
    .format-art img,
    .capability-index img,
    .comparison article img
  ) {
  filter: var(--portrait-dye,) brightness(0.74) saturate(1.12);
}
.transcript-voice .quote-wave {
  border: 0;
}
.tone-light .lead-poster .page-hero {
  width: 45%;
}
.closing-portrait .particle-portrait {
  inset: 0 0 auto auto;
  width: 76%;
}
.closing-portrait img {
  object-fit: cover;
  object-position: 50% 36%;
}

.trust-section,
.mcp-connect {
  padding: clamp(52px, 7vw, 135px) var(--spread-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 130px);
  align-items: center;
}

.home .trust-section {
  min-height: min(88svh, 940px);
}

.trust-copy h2,
.mcp-connect h2 {
  font-size: clamp(43px, 5.45vw, 106px);
  line-height: 0.98;
  letter-spacing: var(--tr-display);
  max-width: 13ch;
  margin: 20px 0;
}

.trust-copy > p:not(.eyebrow),
.mcp-connect p:not(.eyebrow) {
  max-width: 45ch;
  font-size: clamp(16px, 1.35vw, 23px);
  line-height: 1.45;
}

.trust-copy .text-link {
  margin: 24px 22px 0 0;
}
.trust-copy .eyebrow {
  color: var(--lavender-700);
}
.security-email {
  text-decoration: underline;
  text-underline-offset: .18em;
}
.security-email:hover {
  text-decoration-thickness: 2px;
}
.trust-copy .trust-roadmap {
  padding-block-start: 16px;
  border-block-start: 1px solid var(--paper-rule, #b8acc5);
  font-size: 1rem;
}
.trust-roadmap strong {
  margin-inline-end: 0.35em;
}
.trust-copy > p:not(.eyebrow),
.mcp-connect p:not(.eyebrow) {
  color: var(--muted);
}
.trust-orbit {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 1.2;
  justify-self: center;
  isolation: isolate;
}
.trust-orbit::before {
  position: absolute;
  content: '';
  inset: 12% 13% 16%;
  border: 2px dotted #a499ad;
  border-radius: 50%;
  z-index: -1;
}
.trust-core {
  position: absolute;
  width: 45%;
  height: 54%;
  left: 27.5%;
  top: 26%;
  display: grid;
  place-items: center;
}
.trust-core img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  filter: var(--portrait-dye,) brightness(0.73) saturate(1.14);
}
.trust-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 29%;
  aspect-ratio: 1;
  border: 1px solid #998ca7;
  outline: 1px dashed #aa9cb8;
  outline-offset: -6px;
  border-radius: 50%;
  color: #3d2c4d;
  background: var(--l-bg);
}
.trust-node strong {
  font: 400 clamp(15px, 2.2vw, 37px)/1.02 var(--font-pixel);
  text-align: center;
}
.trust-node span {
  font: clamp(11px, 0.77vw, 13px)/1.5 var(--mono);
}
.trust-node-0 {
  top: 0;
  left: 35.5%;
}
.trust-node-1 {
  bottom: 9%;
  left: 0;
}
.trust-node-2 {
  bottom: 9%;
  right: 0;
}
.band-inner > .trust-section,
.band-inner > .mcp-connect {
  padding: 0;
}
.mcp-connect {
  grid-template-columns: 1.2fr 1fr;
}
.mcp-address {
  display: block;
  margin: 24px 0 18px;
  overflow-wrap: anywhere;
  font: clamp(14px, 1.5vw, 25px)/1.5 var(--mono);
}
.mcp-connect dl {
  margin: 0;
}
.mcp-connect dl div {
  padding: 22px 0;
  border-top: 1px solid var(--paper-rule);
}
.mcp-connect dt {
  font: clamp(17px, 1.75vw, 30px)/1.2 var(--mono);
}
.mcp-connect dd {
  margin: 10px 0 0;
  color: var(--muted);
}
.form-desk,
.template-builder,
#template-fields,
#form-answers {
  display: grid;
  gap: 16px;
}
.form-desk-head {
  display: grid;
  grid-template-columns: 1fr 96px;
  align-items: center;
  gap: 12px;
}
.form-desk-head h2,
.template-builder h3 {
  font-size: var(--fs-3xl);
  letter-spacing: var(--tr-title);
}
.form-desk-head p,
.answer-source {
  color: var(--muted);
  font-size: var(--fs-ui);
}
.form-desk-head img {
  height: 80px;
  object-fit: contain;
}
.form-picker {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}
.form-picker .field {
  flex: 1 1 210px;
}
.form-desk > .text-link {
  justify-self: start;
}
.template-builder {
  background: var(--card);
  border: 1px solid var(--l-ink-3);
  border-radius: var(--r-s);
  padding: 18px;
}
.template-field {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 9px;
}
.template-field input {
  width: 100%;
  min-width: 0;
}
.candidate-sources {
  padding-block: 8px;
  font-size: var(--fs-ui);
}
.candidate-sources summary { cursor: pointer; }
.candidate-sources ul { padding-inline-start: 1.5em; }
.candidate-sources li { margin-block: 6px; }
#form-answers > div {
  padding: 14px 0 0;
  border-top: 1px solid var(--l-ink-3);
}
.answer-source {
  margin-top: 7px;
  font-size: var(--fs-xs);
  line-height: 1.45;
}
#form-status:empty {
  display: none;
}
@media (max-width: 760px) {
  .tone-light .lead-poster .page-hero {
    width: 100%;
  }
  .household-portraits {
    inset: 0;
    width: 100%;
  }
  
  .trust-section,
  .mcp-connect {
    grid-template-columns: 1fr;
  }
  .trust-orbit {
    max-width: 490px;
  }
  .trust-node strong {
    font-size: clamp(14px, 4.7vw, 24px);
  }
}
@media (max-width: 540px) {
  .closing-portrait .particle-portrait {
    width: 100%;
  }
  .cap-plate {
    border-inline-end: 0;
    border-bottom: 1px solid var(--paper-rule);
  }
  .template-field {
    grid-template-columns: 1fr;
  }
  .template-field button {
    justify-self: start;
  }
  .editor-tabs {
    flex-wrap: wrap;
  }
}

/* Tiles share the shape scale: panels --r-l, inner tiles --r-m, strips --r-s. */
.cap-gallery {
  border-radius: var(--r-l);
}
.cap-plate {
  border-radius: var(--r-m);
}