/* Portfolio stories: typography and space carry the editorial hierarchy.
   Product screens, drawings, and embedded applications keep their own design. */
body.work-story {
  --story-section-space: 72px;
  --story-prose-measure: 66ch;
  font-size: 17px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
.work-story :is(h1,h2,h3,h4) { text-wrap: balance; }
.work-story :is(p,figcaption) { text-wrap: pretty; }
.work-story :is(.hero,.pylon-hero,.n-hero) { padding-block: 56px 40px; }
.work-story :is(h1.t,.hero h1,.pylon-hero h1,.n-hero h1) {
  font-size: clamp(38px,5vw,56px);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-block: 0 20px;
}
.work-story .hero .mk { align-items: center; gap: 20px; margin-bottom: 28px; }
.work-story .hero .mk h1 { margin-bottom: 0; }
.work-story :is(.lede,.pylon-lede,.n-lede) {
  font-size: 20px;
  line-height: 1.6;
  max-width: 62ch;
  margin-block: 0 24px;
}
.work-story h2 {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -.022em;
  margin-block: var(--story-section-space) 20px;
}
.work-story :is(.p-prose,.n-prose,.prose-livna) h2 {
  font-size: 30px;
  line-height: 1.25;
  margin-block: var(--story-section-space) 20px;
}
.work-story :is(.product-section,.pipeline-band) h2 { margin-top: 0; }
.work-story :is(.product-section) { margin-top: var(--story-section-space); }
.work-story :is(h3,.feature-block h3,.p-prose h3,.n-prose h3) {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -.012em;
  margin-block: 0 12px;
}
.work-story :is(p.b,.body-copy,.p-prose p,.n-prose p,.prose-livna p,.feature-block p) {
  max-width: var(--story-prose-measure);
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0;
  margin-block: 0 18px;
}
.work-story :is(.cell p,.feat p,.p-step p,.ins-txt p) {
  font-size: 15px;
  line-height: 1.65;
  margin-block: 0;
}
.work-story :is(.cap,.shot-cap,.fig-cap,.pipe-cap,figcaption) {
  max-width: 76ch;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
  padding: 0;
  margin: 16px 0 0;
}
.work-story :is(.fine,.overview-note,.lad-note,.calc-note,.feature-fact) {
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
}
.work-story :is(.label,.p-label,.st .d,.p-stat .d,.n-stat .d,.rr,.base .k,.pack-hd .stamp,.pg-no,.ins-hd > span,.fig-hd .tag,.pipe-tag,.lg-hd,.led th,.tbl th,.eps .ep.hd,.ep .verb) {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .025em;
}
.work-story :is(.live-alt a,.pack-go,.ins-go,.preview-action) {
  font-size: 14px;
  line-height: 1.5;
}
.work-story :is(.shot,.hero-film,.fig,.pipe,.stage,.pack) { margin-top: 28px; }
.work-story :is(.grid3,.grid2,.grid.six,.grid:not([class*="grid-cols"]),.insets,.handoffs) { gap: 24px; }
.work-story :is(.cell,.inset,.feat,.p-step) { padding: 0; }
.work-story :is(.stats,.p-stats) { column-gap: 32px; row-gap: 24px; margin-top: 32px; }
.work-story :is(.st,.p-stat,.n-stat) { padding: 0 20px 0 0; }
.work-story :is(.bar,.bar-in) { background: transparent; }
.work-story .bar-in { padding-block: 20px; }
.work-story .close { margin-top: 80px; }
.work-story .close :is(h2,.h) { margin-top: 0; }
.work-story .source-flow { gap: 24px; padding-block: 12px; margin-block: 28px; }
.work-story .handoffs > div { padding-block: 20px; }
.work-story :is(.pipeline-band,.sig-stage) { background: var(--wash,#f7f9fa); }
.work-story .shot figcaption { padding: 0; }
.work-story .screenshot-frame { padding: 0; background: transparent; box-shadow: none; }
.work-story .screenshot-frame img { border-radius: 0; }
/* Remove editorial rules and frames. Control outlines and drawing geometry
   still communicate state within the work itself. */
.work-story :where(*):not(svg):not(svg *):not(input):not(button):not(select):not(textarea):not(.sig-phone):not(.sig-phone *):not(.dl-circ):not(.btn):not(.button):not(.p-btn):not(.n-cta):not(.app-action):not(.lad):not(.room-links a):not([role="button"]) {
  border: 0 !important;
}
.work-story hr { display: none; }
.work-story :is(.fig-hd,.pipe-hd,.pack-hd,.led-hd) { padding: 16px 0; background: transparent; }
.work-story :is(.fig-hd b,.pipe-hd b,.pack-hd b,.led-hd b) {
  color: var(--ink,#12181d);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.work-story :is(.fig-hd .rr,.pipe-hd .rr,.pack-hd .rr,.led-hd .rr) { color: var(--ink2,#3a464f); }
.work-story :is(.fig-hd .tag,.pipe-hd .pipe-tag) { color: var(--ink2,#3a464f); background: transparent; }
.work-story :is(.stage-head h3,.p-step h3) { font-size: 18px; margin: 0; }
.work-story :is(.sp-status,.sp-s,.sp-copy,.sp-check,.sp-hint,.sp-k,.sp-v,.sp-fine) {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}
.work-story .sig-phone { width: 300px; }
.work-story .sp-base { border-bottom: 0; }
.work-story .preview-action { padding-block: 14px; }
.work-story :is(table th,table td) { padding-block: 14px; }
.work-story :is(.rc,.mv) { padding-block: 8px; }
.work-story .integration-logos li { min-height: 96px; }
.work-story .integration-logos { gap: 24px; }
.work-story :is(.label,.p-label,.rr,.ins-hd > span,.pg-no,.fig-hd .tag,.pipe-tag) { text-transform: none; }
@media (max-width:700px) {
  body.work-story { --story-section-space:48px; font-size:16px; }
  .work-story :is(.hero,.pylon-hero,.n-hero) { padding-block:36px 28px; }
  .work-story :is(h1.t,.hero h1,.pylon-hero h1,.n-hero h1) { font-size:38px; line-height:1.15; }
  .work-story :is(h2,.p-prose h2,.n-prose h2,.prose-livna h2) { font-size:26px; }
  .work-story :is(.lede,.pylon-lede,.n-lede) { font-size:18px; line-height:1.6; }
  .work-story :is(p.b,.body-copy,.p-prose p,.n-prose p,.prose-livna p,.feature-block p) { font-size:16px; }
  .work-story :is(.grid3,.grid2,.grid.six,.grid:not([class*="grid-cols"]),.insets) { gap:28px; }
  .work-story .close { margin-top:56px; }
  .work-story .sig-phone { max-width:100%; }
}
@media (max-width:360px) {
  .work-story .hero .mk { gap:12px; }
  .work-story :is(h1.t,.hero h1,.pylon-hero h1,.n-hero h1) { font-size:34px; }
}
.work-story :is(.live-at,.quote-open > span,.api-k,.api-k em,.ep.hd > div,.ep .m,.rc.hd > div,.p-step .n,.p-pill,.sp-total > span) {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .025em;
  text-transform: none;
}
.work-story :is(.stage-hd b,.ins-hd b) { font-size: 16px; line-height: 1.4; }
.work-story .rc .d s { font-size: 12px; line-height: 1.6; }
.work-story .rc .n { font-size: 12px; line-height: 1.6; }
.work-story .rc .n::before { font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.pylon-page.work-story :is(.p-btn,.sp-cta) { background:#007a76; color:#fff; border-color:#007a76; }
.pylon-page.work-story .p-btn.ghost { background:#fff; color:#101413; border-color:#e2e6e5; }