/* The scroll chapters introduce one fictional household. */
.meeting-ages {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0 8px;
}
.meeting-ages b {
  font: clamp(26px, 3.3vw, 54px)/1 var(--font-pixel);
  color: var(--lavender);
}
.meeting-ages b:last-child {
  color: var(--accent-highlight);
}
.meeting-ages span {
  font: var(--fs-label) var(--mono);
}
.transcript-pull figure {
  min-height: 100svh;
  align-content: center;
}
html:has(#meeting-quote:target) {
  scroll-padding-top: 0;
}
.transcript-pull .quote-context {
  max-width: 41ch;
  font-size: clamp(16px, 1.45vw, 23px);
  line-height: 1.44;
  color: var(--muted);
  margin: 0 0 22px;
}
/* Speaker excerpts lead into a custom form and the advisor's follow-up. */
.recap-section {
  padding: clamp(56px, 7vw, 116px) var(--spread-gutter);
  background: var(--bg);
}
.recap-intro,
.recap-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(36px, 7vw, 140px);
}
.recap-intro {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 64px);
  align-items: center;
  padding-bottom: clamp(30px, 4.4vw, 76px);
}
.recap-intro .eyebrow {
  color: var(--accent-highlight);
}
.recap-intro h2 {
  margin-top: 20px;
  font-size: clamp(39px, 5.45vw, 96px);
  line-height: .99;
  letter-spacing: var(--tr-display);
}
.recap-intro-copy > p:not(.eyebrow) {
  max-width: 47ch;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 24px);
  line-height: 1.48;
  margin: 18px 0;
}
.recap-dispatch {
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.68;
  background: radial-gradient(ellipse closest-side at 66% 52%, #49334e55, transparent 100%);
}
.recap-envelope {
  position: absolute;
  inset: 0 -13% 0 23%;
  perspective: 700px;
  pointer-events: none;
}
.recap-envelope img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-6deg);
}
.recap-traces {
  position: absolute;
  z-index: 1;
  top: 28%;
  bottom: 19%;
  left: 2%;
  width: 28%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.recap-traces a {
  position: relative;
  display: flex;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  text-decoration: none;
  color: var(--l-bg);
}
.recap-traces time {
  color: var(--trace-color);
  font: 400 clamp(14px, 1.15vw, 21px)/1.05 var(--mono);
}
.recap-traces span {
  color: #c5baca;
  font-size: clamp(12px, 1vw, 17px);
}
[data-recap-voice="alex"] { --trace-color: var(--lavender); }
[data-recap-voice="jordan"] { --trace-color: var(--accent-highlight); }
.recap-traces i {
  position: absolute;
  left: calc(100% + 10px);
  top: 49%;
  height: 1px;
  width: clamp(48px, 9vw, 148px);
  transform-origin: left center;
  transform: rotate(9deg);
  background: repeating-linear-gradient(to right, var(--trace-color) 0 2px, transparent 2px 6px);
}
.recap-traces a:nth-child(2) i { transform: rotate(-12deg); }
.recap-traces i::before,
.recap-traces i::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  top: -2px;
  background: var(--trace-color);
}
.recap-traces i::after { right: 0; }
.recap-traces a:is(:hover, :focus-visible) span {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recap-desk {
  align-items: center;
  border-top: 1px solid var(--l-ink-3);
  padding-top: clamp(26px, 3.3vw, 62px);
}
.recap-label {
  color: #715574;
  font: 400 var(--fs-label)/1.5 var(--mono);
  letter-spacing: 0.048em;
  text-transform: uppercase;
}
.recap-evidence h3 {
  color: var(--pale);
  font-size: clamp(23px, 2vw, 38px);
  letter-spacing: var(--tr-title);
  margin: 6px 0 18px;
}
.recap-evidence .recap-label { color: var(--accent-highlight); }
.recap-evidence {
  --recap-columns: minmax(0, 1fr) clamp(20px, 2.4vw, 40px) minmax(0, .91fr);
  min-width: 0;
}
.recap-sequence {
  margin: 0 0 18px;
  padding: 9px 14px 0;
  border: 1px solid #514455;
  border-radius: var(--r-xs);
  background: #211c24;
}
.recap-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 14px);
}
.recap-timeline button {
  position: relative;
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 7px;
  padding: 0 0 8px;
  color: #bdb1c5;
  font: 500 clamp(12px, 1vw, 16px)/1 var(--font-text);
}
.recap-step-number {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #807186;
  border-radius: 50%;
  font: var(--fs-label)/1 var(--mono);
}
.recap-timeline button[aria-current] {
  color: #ffdfa7;
}
.recap-timeline button[aria-current] .recap-step-number {
  background: #e6c693;
  border-color: #e6c693;
  color: var(--card);
}
.recap-step-track,
.recap-step-track i {
  display: block;
  height: 5px;
  border-radius: var(--r-xs);
}
.recap-step-track {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background: #524756;
}
.recap-step-track i {
  background: #e6c693;
  transform-origin: left center;
  transform: scaleX(var(--elapsed, 0));
}
.recap-timeline button[data-complete="true"] .recap-step-track i {
  background: #c5abcf;
  transform: scaleX(1);
}
.recap-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 53px;
  gap: 5px;
}
.recap-countdown {
  color: var(--l-bg);
  font: 400 clamp(12px, 1vw, 15px)/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}
.recap-sequence button:focus-visible {
  outline: 2px solid var(--accent-highlight);
  outline-offset: 3px;
}
.recap-playback {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding-inline: 8px;
  color: var(--mist);
  font: 500 var(--fs-s)/1 var(--font-text);
}
.recap-playback b { font-weight: 500; }
.recap-playback i {
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid currentColor;
}
.recap-playback[data-action="pause"] i {
  width: 8px;
  height: 10px;
  border: 0;
  border-inline: 2px solid currentColor;
}
.recap-playback[data-action="replay"] {
  color: #f7e6c6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recap-playback[data-action="replay"] i {
  width: auto;
  height: auto;
  border: 0;
  font: normal var(--fs-xl)/1 var(--font-text);
}
.recap-playback[data-action="replay"] i::after { content: '↺'; }
.recap-columns, .recap-pair {
  display: grid;
  grid-template-columns: var(--recap-columns);
}
.recap-columns {
  align-items: end;
  padding: 0 0 9px;
  color: #bdb1c5;
  font: 400 var(--fs-label)/1.45 var(--mono);
}
.recap-columns span:last-child { grid-column: 3; }
.recap-pair {
  position: relative;
  align-content: center;
  grid-template-rows: auto auto;
  padding-block: clamp(15px, 1.25vw, 22px);
  border-top: 1px solid var(--l-ink-3);
}
.recap-evidence figure:is(:target, :focus-visible) {
  outline: 1px solid var(--trace-color);
  outline-offset: 4px;
}
.recap-pair figcaption {
  grid-area: 1 / 1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  font: 400 var(--fs-xs)/1.5 var(--mono);
}
.recap-pair figcaption span { color: var(--trace-color); }
.recap-pair figcaption time, .recap-pair figcaption small { color: #c4baca; font-size: var(--fs-label); }
.recap-pair blockquote {
  grid-area: 2 / 1;
  margin: 5px 0 0;
  color: var(--l-bg);
  font-size: clamp(15px, 1.25vw, 22px);
  line-height: 1.45;
}
.recap-pair mark {
  color: inherit;
  background: linear-gradient(color-mix(in srgb, var(--trace-color) 36%, transparent) 0 0) left bottom / 100% .62em no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.recap-bridge {
  grid-area: 1 / 2 / 3;
  align-self: center;
  margin-inline: 3px;
  height: 1px;
  background: var(--l-ink-2);
}
.recap-bridge i {
  display: block;
  position: relative;
  height: 1px;
  background: var(--trace-color);
  transform-origin: left center;
}
.recap-bridge i::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border: solid var(--trace-color);
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}
.recap-field {
  grid-area: 1 / 3 / 3;
  align-self: center;
  margin: 0;
  padding: clamp(10px, 1vw, 15px);
  background: var(--card);
  border-left: 2px solid var(--trace-color);
}
.recap-field dt {
  color: #c6bacd;
  font: 400 var(--fs-label)/1.5 var(--mono);
}
.recap-field dd {
  display: grid;
  margin: 4px 0 0;
  color: #f4edf7;
  font: 500 clamp(14px, 1.1vw, 18px)/1.38 var(--font-text);
}
.recap-field dd span { grid-area: 1 / 1; }
.recap-field .recap-empty {
  align-self: start;
  color: #bdb1c5;
  font-weight: 400;
}
.recap-evidence[data-stage] .recap-pair[data-matched="false"] .recap-answer { visibility: hidden; }
.recap-evidence[data-stage="voices"] .recap-pair mark { background-size: 0 .62em; }
.recap-evidence[data-stage="voices"] .recap-bridge i { opacity: 0; }
.recap-evidence[data-stage="voices"] .recap-field { border-left-color: var(--l-ink-2); }
.recap-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.recap-evidence .text-link { margin-top: 9px; }
.recap-packet {
  display: none;
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 1;
  pointer-events: none;
  padding: 4px 6px;
  color: var(--plum-950);
  background: var(--trace-color);
  border-radius: 3px;
  box-shadow: 0 2px 8px #0a060b7a;
  font: 550 clamp(12px, 1vw, 15px)/1.24 var(--font-text);
}
@media (prefers-reduced-motion: no-preference) {
  .recap-packet[data-flying="true"] {
    display: block;
    transform: translate(
      calc(var(--from-x) + (var(--to-x) - var(--from-x)) * var(--flight)),
      calc(var(--from-y) + (var(--to-y) - var(--from-y)) * var(--flight))
    );
    opacity: clamp(0, min(var(--flight) * 9, (1 - var(--flight)) * 13), 1);
  }
  .recap-evidence:not([data-manual])[data-stage="match"] mark {
    animation: recap-mark-words 480ms ease backwards;
  }
  .recap-evidence:not([data-manual])[data-stage="match"] .recap-pair:nth-of-type(2) mark {
    animation-delay: 2150ms;
  }
  .recap-evidence:not([data-manual])[data-stage="match"] .recap-pair[data-matched="true"] .recap-answer {
    animation: recap-fill-field 380ms ease-out backwards;
  }
  .recap-evidence[data-stage][data-moving="false"] :is(mark, .recap-answer) {
    animation-play-state: paused;
  }
}
@keyframes recap-mark-words {
  from { background-size: 0 .62em; }
  to { background-size: 100% .62em; }
}
@keyframes recap-fill-field {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 720px) {
  .recap-intro,
  .recap-desk {
    grid-template-columns: 1fr;
    row-gap: 25px;
  }
  .recap-evidence {
    padding-top: 12px;
  }
  .recap-dispatch {
    width: min(100%, 490px);
    justify-self: center;
  }
  .recap-traces i { width: clamp(45px, 14vw, 92px); }
}
@media (prefers-reduced-motion: no-preference) {
  .recap-dispatch.art-in-view .recap-envelope img {
    animation: recap-envelope-arrival 950ms cubic-bezier(.2,.75,.25,1) both;
  }
  .recap-dispatch.art-in-view .recap-traces i::after {
    animation: recap-trace 950ms cubic-bezier(.3,.1,.6,1) both;
  }
  .recap-dispatch.art-in-view .recap-traces a:nth-child(2) i::after { animation-delay: 180ms; }
  .recap-envelope {
    transition: transform 360ms ease, filter 360ms ease;
  }
  .recap-dispatch:focus-within .recap-envelope {
    transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
    filter: brightness(1.08);
  }
  .recap-dispatch.art-in-view .recap-traces a:focus-visible i::after {
    animation: recap-trace-hover 800ms ease-out;
  }
  @media (hover: hover) {
    .recap-dispatch:hover .recap-envelope {
      transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
      filter: brightness(1.08);
    }
    .recap-dispatch.art-in-view:hover .recap-traces i::after {
      animation: recap-trace-hover 800ms ease-out;
    }
    .recap-dispatch.art-in-view:hover .recap-traces a:nth-child(2) i::after { animation-delay: 140ms; }
  }
}
@keyframes recap-envelope-arrival {
  from { transform: translate(10px, 14px) rotate(0deg); }
  to { transform: rotate(-6deg); }
}
@keyframes recap-trace {
  from { right: 100%; opacity: .2; }
  30% { opacity: 1; }
  to { right: 0; opacity: 1; }
}
@keyframes recap-trace-hover {
  from { right: 100%; }
  to { right: 0; }
}

.sheet-heading span,
.return-file figcaption span,
.return-slip > span,
.file-handoff figcaption span {
  display: block;
  font: var(--fs-label)/1.45 var(--mono);
  letter-spacing: 0.033em;
}

.template-recipe summary::-webkit-details-marker {
  display: none;
}

.template-recipe summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #684d78;
  font: var(--fs-xl)/1 var(--font-pixel);
}

.template-recipe[open] summary::after {
  content: '−';
}

/* Two sheets describe how a practice designs its own reusable template. */
.template-studio,
.return-visit,
.file-handoff,
.local-edition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5.5vw, 110px);
}
.template-studio,
.return-visit {
  padding: clamp(58px, 7vw, 135px) var(--spread-gutter);
  min-height: min(85svh, 940px);
}
.studio-copy h2,
.return-visit h2,
.menu-story h2 {
  font-size: clamp(46px, 5.5vw, 108px);
  max-width: 15ch;
  line-height: 0.97;
  letter-spacing: var(--tr-display);
  margin: 18px 0 23px;
}
.studio-copy > p:not(.eyebrow),
.return-visit header > p:not(.eyebrow),
.menu-story p:not(.eyebrow) {
  max-width: 43ch;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.5;
}
.studio-copy > .text-link,
.return-visit .text-link,
.menu-story .text-link {
  margin-top: 23px;
}
.studio-copy .eyebrow {
  color: var(--accent-ink);
}
.template-still {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: clamp(360px, 38vw, 660px);
  padding-block: 18px clamp(56px, 6vw, 92px);
  background-image: radial-gradient(circle, #c4baca 1px, transparent 1.3px);
  background-size: 15px 15px;
}
.template-sheet {
  width: 72%;
  position: relative;
  transform: rotate(-5deg);
  margin-right: 7%;
  padding: clamp(20px, 2.4vw, 44px);
  background: var(--ink-1);
  border: 1px solid #a799b2;
  box-shadow:
    5px 6px 0 #cdc1d8,
    6px 7px 0 #a799b2;
}
.sheet-heading span {
  color: #675770;
}
.sheet-heading strong {
  display: block;
  font-size: clamp(26px, 3.1vw, 57px);
  letter-spacing: var(--tr-display);
  line-height: 1.03;
  margin: 10px 0 25px;
}
.template-match {
  border-top: 1px solid #bdb1c7;
}
.template-match summary {
  position: relative;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  padding: 12px 24px 12px 0;
}
.template-match summary::-webkit-details-marker { display: none; }
.template-match summary::after {
  content: '+';
  position: absolute;
  top: 12px;
  right: 0;
  font: var(--fs-2xl)/1 var(--font-pixel);
  color: #5e4769;
}
.template-match[open] summary::after { content: '−'; }
.template-match summary:focus-visible { outline: 2px solid var(--lavender-700); outline-offset: 3px; }
.template-match summary:hover strong { color: var(--lavender-700); }
.template-match summary strong {
  font-weight: 550;
  font-size: clamp(15px, 1.25vw, 22px);
}
.template-hints {
  margin: 7px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.template-hints span {
  padding: 3px 8px;
  background: #e4dce9;
  color: #523e5e;
  font: var(--fs-label)/1.4 var(--mono);
  border-radius: 4px;
}
.template-answer {
  margin-bottom: 12px;
  border-left: 3px solid #77568a;
  padding: 7px 10px;
  background: var(--l-bg);
}
.template-answer small { display: block; color: #58435f; font: var(--fs-label)/1.5 var(--mono); }
.template-answer p { margin: 3px 0 0; font-size: clamp(15px, 1.2vw, 21px); line-height: 1.25; }
.template-sheet > p {
  margin: 0 0 8px;
  font: var(--fs-label)/1.4 var(--mono);
  color: #675770;
}
.template-still .template-object {
  position: absolute;
  bottom: -2%;
  right: -3%;
  width: 40%;
  transform: rotate(14deg);
  filter: var(--portrait-dye,) brightness(0.68) saturate(1.15);
  pointer-events: none;
}
.template-still:has(.template-match[open]) .template-sheet { transform: rotate(-2deg); }
.template-still:has(.template-match[open]) .template-object { transform: translate(2%, 5%) rotate(19deg); z-index: -1; }
@media (prefers-reduced-motion: no-preference) {
  .template-sheet, .template-still .template-object { transition: transform .35s ease-out; }
  .template-still.art-in-view .template-object { animation: studio-forms-arrive .85s cubic-bezier(.22,.61,.36,1); }
  @keyframes studio-forms-arrive { from { opacity: .6; translate: 10px -10px; } }
}
.template-recipe {
  margin-top: clamp(20px, 2.8vw, 44px);
  border-block: 1px solid #b3a8bf;
}
.template-recipe summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 16px 30px 16px 0;
  font-weight: 550;
}
.template-recipe > div {
  padding-bottom: 18px;
  max-width: 52ch;
}
.template-recipe p {
  color: var(--muted);
  font-size: var(--fs-m);
}
.template-recipe pre {
  margin: 12px 0 16px;
  padding: 14px;
  background: var(--mist);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: var(--fs-xs)/1.5 var(--mono);
}
.return-visit header > p:not(.eyebrow) {
  color: #c5bdcb;
}
.return-visit .eyebrow {
  color: var(--pale);
}
.return-file {
  position: relative;
  padding: clamp(20px, 3vw, 54px);
  border: 1px solid #514956;
  border-radius: 4px;
  background: linear-gradient(130deg, var(--card), var(--bg));
}
.return-art {
  position: absolute;
  right: 0;
  top: -12%;
  width: 45%;
  height: 58%;
}
.return-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.return-file figcaption {
  position: relative;
  max-width: 62%;
}
.return-file figcaption span {
  color: var(--lavender-300);
}
.return-file figcaption strong {
  display: block;
  margin-top: 16px;
  font-size: clamp(29px, 3.5vw, 64px);
  line-height: 1.02;
  letter-spacing: var(--tr-display);
}
.return-file figcaption p {
  margin-top: 6px;
  color: #d2c9d8;
}
.return-slip {
  position: relative;
  margin: clamp(28px, 4vw, 72px) 0 0 8%;
  padding: clamp(16px, 2.2vw, 40px);
  background: #e8e3cd;
  color: #2a2821;
  box-shadow: 4px 5px 0 #8d8875;
}
.return-slip blockquote {
  margin: 12px 0 16px;
  font-size: clamp(21px, 2.1vw, 38px);
  letter-spacing: var(--tr-title);
  line-height: 1.19;
}
.return-slip cite {
  font: var(--fs-xs)/1.3 var(--mono);
}

/* The main menu pages answer different questions about choosing and using the desk. */
.menu-story {
  padding-block: clamp(12px, 2vw, 40px);
}
.menu-story .eyebrow {
  color: var(--pale);
}
.tone-light .menu-story .eyebrow {
  color: var(--accent-ink);
}
.workflow-strip {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: clamp(30px, 4vw, 65px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid #857b8c;
}
.workflow-strip li {
  padding: clamp(15px, 2.5vw, 50px);
  border-inline-end: 1px solid #857b8c;
}
.workflow-strip li:last-child {
  border-inline-end: 0;
}
.workflow-strip li > div {
  height: clamp(140px, 18vw, 290px);
}
.workflow-strip img,
.practice-pair img,
.local-edition img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.workflow-strip h3,
.practice-pair h3 {
  font-size: clamp(23px, 2vw, 38px);
  letter-spacing: var(--tr-display);
  line-height: 1.12;
  margin: 16px 0 8px;
}
.workflow-strip a:hover,
.practice-stories a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.file-handoff figure {
  background: var(--plum-950);
  border: 1px solid #544b5b;
  padding: clamp(20px, 3vw, 46px);
  border-radius: var(--r-xs);
  color: var(--lavender-100);
}
.file-handoff figcaption {
  display: flex;
  align-items: center;
  gap: 15px;
}
.file-handoff figcaption img {
  width: 90px;
  height: 70px;
  object-fit: contain;
}
.file-handoff pre {
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--brand-accent) 65%, white);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: clamp(13px, 1.3vw, 22px)/1.55 var(--mono);
}
.practice-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 80px);
}
.practice-pair article {
  display: grid;
  grid-template-columns: minmax(70px, 0.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-top: 1px solid #9e94a8;
  padding-top: 22px;
}
.practice-pair img {
  max-height: 210px;
}
.local-edition figure {
  display: grid;
  place-items: center;
}
.local-edition figure img {
  height: clamp(220px, 30vw, 470px);
}
.local-edition figure figcaption {
  font: var(--fs-xs)/1.5 var(--mono);
  color: var(--muted);
}
.local-edition dl {
  margin: 0;
}
.local-edition dl div {
  border-top: 1px solid #938a9b;
  padding: 14px 0;
}
.local-edition dt {
  font-size: var(--fs-xl);
  font-weight: 550;
}
.local-edition dd {
  margin: 5px 0 0;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .template-studio,
  .return-visit,
  .file-handoff,
  .local-edition {
    grid-template-columns: 1fr;
  }
  .template-studio,
  .return-visit {
    min-height: 0;
  }
  .template-studio .studio-copy {
    grid-row: 1;
  }
  .template-still {
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }
  .practice-pair {
    grid-template-columns: 1fr;
  }
  .local-edition figure {
    grid-row: 2;
  }
  .return-file {
    margin-top: 20px;
  }
  .workflow-strip li {
    padding-inline: 12px;
  }
}
@media (max-width: 650px) {
  .hero-foot {
    isolation: isolate;
  }
  .hero-foot::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -12px calc(-1 * var(--edge)) -22px;
    pointer-events: none;
    background: linear-gradient(transparent, #09080bd9 30%, #09080bf5);
  }
  .hero-foot .scroll-cue {
    color: var(--pale);
  }
}
@media (max-width: 540px) {
  .meeting-ages {
    gap: 4px;
    margin: 6px 0;
  }
  .meeting-ages b {
    font-size: var(--fs-2xl);
  }
  .meeting-ages span {
    font-size: var(--fs-label);
  }
  .template-still {
    min-height: 300px;
  }
  .template-still .template-object {
    right: 0;
  }
  .template-sheet {
    padding: 17px;
    width: 78%;
  }
  .workflow-strip {
    grid-template-columns: 1fr;
  }
  .workflow-strip li {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 5px 13px;
    border: 0;
    border-bottom: 1px solid #857b8c;
    padding: 17px 0;
  }
  .workflow-strip li:last-child {
    border-bottom: 0;
  }
  .workflow-strip li > div {
    height: 88px;
    grid-row: 1 / 3;
  }
  .workflow-strip h3 {
    margin: 4px 0;
  }
  .practice-pair article {
    grid-template-columns: 68px 1fr;
  }
}

/* A pair of transcript slips settles into the matching grooves in a raised form. */
.form-sculpture {
  --travel-alex: 1;
  --travel-jordan: 1;
  container-type: inline-size;
  position: relative;
  margin: 0;
  width: 100%;
  align-self: center;
  color: var(--l-bg);
}
.form-theatre {
  position: relative;
  aspect-ratio: 1.35;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xs);
  background:
    radial-gradient(ellipse at 54% 55%, #493d5466, transparent 65%),
    radial-gradient(circle at 44% 40%, #68577422, transparent 65%);
}
.form-theatre::before {
  content: '';
  position: absolute;
  inset: 10% 5%;
  background: radial-gradient(circle, #a08ea8 0 .65px, transparent 1px) 0 0 / 9px 9px;
  opacity: .23;
  mask-image: radial-gradient(ellipse, black 10%, transparent 72%);
}
.form-theatre::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 13%;
  right: 14%;
  bottom: 3%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #08060dcc, transparent 72%);
}
.form-perspective {
  position: absolute;
  inset: 11% 16% 11% 22%;
  perspective: 1400px;
}
.form-stack {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(24deg) rotateY(-13deg) rotateZ(-9deg);
}
.form-face, .form-underlay {
  position: absolute;
  inset: 0;
  border-radius: 3cqw;
  border: 1px solid #c1a9cf85;
}
.form-underlay {
  background: linear-gradient(130deg,#614e72,#28202f 78%);
  box-shadow: 0 2px 0 var(--l-ink-1), 0 8px 10px #100b1455;
  transform: translate3d(1.5cqw,3.6cqw,-3cqw);
}
.form-underlay.middle {
  transform: translate3d(.6cqw,1.8cqw,-1.6cqw);
  background: linear-gradient(135deg,#948397,#413749 80%);
}
.form-face {
  padding: 3.7cqw 3.3cqw;
  color: #f4eef5;
  background:
    radial-gradient(ellipse at top left,#5f52666b,transparent 65%),
    linear-gradient(120deg,#39313f,var(--plum-950) 76%);
  box-shadow: inset 0 1px 1px #e0d6e864, inset 0 0 0 4px #ffffff05;
  display: flex;
  flex-direction: column;
}
.form-caption, .form-imprint { display: flex; align-items: center; gap: 1.1cqw; }
.form-caption { color:#cec3d4; font: 400 clamp(11px,1.85cqw,14px)/1.2 var(--mono); }
.form-caption i { width: 1.25cqw; height: 1.25cqw; background: var(--accent-highlight); box-shadow: 1.5cqw 0 #b39ac3; margin-right: 1.8cqw; }
.form-name { margin: 1cqw 0 auto; font: 500 clamp(16px,4.1cqw,38px)/1.1 var(--font-text); letter-spacing: var(--tr-title); }
.form-slot {
  --travel: var(--travel-alex);
  --slot-color: var(--lavender-300);
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 1.65cqw;
  margin-top: 1.3cqw;
  min-height: 10.1cqw;
  background: var(--plum-950);
  border: 1px solid #b5a1be58;
  border-left: 2px solid var(--slot-color);
  border-radius: 1.25cqw;
  box-shadow: inset 0 2px 5px #100c1455;
}
.slot-jordan { --travel: var(--travel-jordan); --slot-color: var(--accent-highlight); }
.form-slot i { font: 600 2.5cqw var(--mono); color: var(--slot-color); opacity: var(--travel); }
.form-slot small, .form-slot strong { display: block; }
.form-slot small { font: 400 clamp(11px,1.65cqw,13px)/1.1 var(--mono); color: #c6bbcd; }
.form-slot strong { margin-top:.6cqw; font: 500 clamp(11px,2.3cqw,20px)/1.2 var(--font-text); opacity: var(--travel); }
.form-imprint { justify-content: space-between; margin-top: auto; padding-top: 1.6cqw; }
.form-imprint b { font: 2cqw var(--font-pixel); color: #c6afcf; }
.form-imprint i { height: 1.05cqw; width: 6.5cqw; background: repeating-linear-gradient(90deg,#c1b0c9 0 1px,transparent 1px 3px); }
.voice-slip {
  --travel: var(--travel-alex);
  --slip-x: -73%;
  --slip-y: -78%;
  --tilt: -14deg;
  position: absolute;
  top: 39%;
  left: 12%;
  width: 42%; height: 21%;
  display: grid; align-content: center;
  grid-template-columns: 1fr auto;
  padding: 1.55cqw 2cqw;
  color: #2c1f39;
  background: linear-gradient(120deg,var(--lavender-100),#b69bd0);
  border: 1px solid var(--lavender-100);
  border-radius: 1.65cqw;
  box-shadow: 0 4px 0 #53405d, 0 8px 13px #100c1b45;
  transform: translate3d(calc(var(--slip-x) * (1 - var(--travel))),calc(var(--slip-y) * (1 - var(--travel))),calc(3px + 48px * (1 - var(--travel)))) rotateZ(calc(var(--tilt) * (1 - var(--travel)))) scale(calc(1 - .1 * var(--travel)));
  opacity: clamp(0,calc((1 - var(--travel)) * 5),1);
}
.slip-jordan {
  --travel: var(--travel-jordan); --slip-x: 168%; --slip-y: 48%; --tilt: 18deg;
  top: 65%; left: 7%; color: #392a1a;
  background: linear-gradient(120deg,#f0d6a5,var(--brand-saffron)); border-color:#f5d9ac; box-shadow: 0 4px 0 #715838, 0 8px 13px #100c1b45;
}
.voice-slip > span:not(.slip-wave) { font: 600 clamp(11px,2cqw,16px)/1.2 var(--font-text); }
.voice-slip small { font: 400 clamp(11px,1.5cqw,12px)/1.3 var(--mono); align-self:end; }
.slip-wave { grid-column: span 2; display: flex; gap:.42cqw; height:2.7cqw; align-items:center; }
.slip-wave i { width:.48cqw; height:calc(var(--bar) * .14cqw); background:currentColor; }
.form-sculpture figcaption {
  display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #514557;
  margin:0 5%; padding:.75em 0; min-height:45px; color:#cfbddb; font:500 var(--fs-s)/1.3 var(--font-text);
}
.form-sculpture figcaption > span { display:inline-flex;align-items:center;gap:8px; }
.form-sculpture figcaption i { width:6px;height:6px;background:var(--accent-highlight); }
.sculpture-play { font:inherit; background:transparent;color:var(--l-bg);cursor:pointer;border:0;min-height:36px; padding:4px; text-decoration:underline;text-underline-offset:4px; }
@media (max-width: 720px) {
  .form-sculpture { margin: 0 auto 20px; max-width: 520px; }
  .form-theatre { aspect-ratio:1.7; }
  .form-perspective { inset: 8% 19% 11% 25%; }
}

@media (min-width: 721px) {
  .recap-desk { display: block; }
  .recap-evidence {
    position: relative;
    padding-right: calc(clamp(36px, 7vw, 140px) + (100% - clamp(36px, 7vw, 140px)) * .524);
  }
  .form-sculpture {
    position: absolute;
    width: calc((100% - clamp(36px, 7vw, 140px)) * .524);
    right: 0; top: 50%; transform: translateY(-50%);
  }
}

/* Tiles share the shape scale: panels --r-l, inner tiles --r-m, strips --r-s. */
.recap-field,
.return-slip {
  border-radius: var(--r-m);
}
.template-sheet,
.return-file {
  border-radius: var(--r-l);
}
.template-answer {
  border-radius: var(--r-s);
}
.template-recipe pre,
.file-handoff pre {
  border-radius: var(--r-m);
}

/* Phones: the tilted form sculpture crops its own labels at this width. The
   transcript-to-form list beside it tells the same story legibly, so phones
   show the step controls and that list. */
@media (max-width: 650px) {
  .form-sculpture {
    display: none;
  }
}