/* A restrained extension of the approved Ledger system. */
html { scroll-padding-top: 113px; }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--ink); border-bottom: 1px solid var(--rule-on-ink); }
.site-header .wrap { padding-block: 14px; }
.site-header .home { flex: 0 0 auto; }
.site-header .home img { width: 48px; height: 68px; }
.site-header nav a:not(.button) { color: var(--paper); }
.site-header nav a:not(.button):hover { color: var(--rose); text-decoration-color: var(--rose); }
.site-header .button { background: var(--rose); color: var(--ink); }
.site-header .button:hover { background: var(--paper); color: var(--ink); }
.site-header :focus-visible { outline-color: var(--rose); }
.hero .wrap { padding-top: 44px; padding-bottom: 66px; }
/* Compensate for 9px left and 11.1px bottom canvas space in the 666px SVG. */
.hero h1,
.site-footer .identity img { margin-left: calc(var(--wordmark) * -0.013513514); margin-bottom: calc(var(--wordmark) * -0.016666667); }
.hero .descriptor { margin-top: 6px; }
.site-footer .footer-grid { padding-top: 16px; }
.site-footer .identity { --wordmark: 180px; gap: 6px; }
.site-footer .identity img { width: var(--wordmark); }
.hero .lines { margin-top: 44px; width: min(100%, 850px); }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 48px; align-items: center; width: 100%; margin-top: 22px; }
.hero .lede { margin-top: 0; max-width: 36ch; }
.hero .actions { gap: 16px 22px; margin-top: 24px; }
.hero .small { max-width: 53ch; font-size: 14px; }
.hero-art { margin: -22px 0 0; width: 100%; max-width: 320px; justify-self: end; }
.hero-art img { width: 100%; height: auto; }
.chapter-divider { padding-block: 8px; position: relative; }
.chapter-divider img { width: 100%; height: 64px; object-fit: fill; }
.section { padding-block: 66px; }
.section-head { margin-bottom: 38px; }
.illustrated-heading { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 36px; align-items: center; }
.heading-copy { display: grid; gap: 18px; }
.section-art { width: 100%; max-width: 280px; margin: 0; justify-self: end; }
#how .section-art { max-width: 260px; }
.section-art img { width: 100%; height: auto; }
.section-head .eyebrow { display: flex; align-items: baseline; gap: 15px; }
.section-head .chapter-number { font-family: var(--font-display); font-size: 16px; font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--raspberry); }
.arrivals .arrival + .arrival { background: rgba(251,251,248,.24); }
.arrival { padding-block: 28px 32px; }
.arrival blockquote { max-width: 28ch; }
.arrival blockquote::before { content: '“'; display: block; height: 34px; font: italic 50px/.9 var(--font-display); color: var(--raspberry); }
.starts { margin-top: 42px; }
.starts li { padding-block: 17px 22px; }
.steps.sheet { border-radius: 8px; box-shadow: 0 5px 0 -2px var(--paper),0 6px 0 -2px var(--rule); }
.step .num { font-size: 42px; }
.step { --thread-position: 0%; }
.step:nth-child(2) { --thread-position: 33.333%; }
.step:nth-child(3) { --thread-position: 66.667%; }
.step:nth-child(4) { --thread-position: 100%; }
.step .then { position: relative; padding-top: 24px; }
.step .then::before { content: ''; position: absolute; top: -9px; left: var(--thread-position); transform: translateX(calc(-1 * var(--thread-position))); width: 40px; height: 18px; background: var(--paper) url('assets/dividers/threaded-eyelet.svg') center / 40px 18px no-repeat; }
.register { background: transparent; border: 0; border-radius: 0; display: grid; gap: 28px; }
.register-head { display: none; }
.entry { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 32px; }
.entry + .entry { border-top: 1px solid var(--rule); }
.entry-feature { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); grid-template-rows: auto 1fr auto; grid-template-areas: 'name image' 'story image' 'status status'; gap: 20px 36px; }
.entry-feature > div:first-child { grid-area: name; }
.entry-feature .shows { grid-area: story; align-content: start; }
.entry-feature .stands { grid-area: status; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 14px 36px; border-top: 1px solid var(--rule); padding-top: 20px; }
.entry-feature .stands .status { grid-column: 1; }
.entry-feature .stands .limits { grid-column: 1; }
.entry-feature .stands .check { grid-column: 2; grid-row: 1 / 3; }
.entry .label-mobile { display: none; }
.entry .shows p { line-height: 1.6; }
.product-plate { grid-area: image; margin: 0; align-self: center; min-width: 0; }
.product-plate a { display: block; }
.product-plate .desktop-screen { width: 100%; border: 1px solid var(--rule); border-radius: 5px; box-shadow: 0 10px 22px -12px rgba(21,48,42,.30); }
.product-plate figcaption { font-size: 11px; line-height: 1.5; color: var(--moss); margin-top: 12px; letter-spacing: .055em; text-align: center; }
.phone-pair { display: flex; justify-content: center; align-items: start; gap: 20px; }
.phone-pair img { width: 39%; max-width: 155px; height: 312px; object-fit: cover; object-position: top; border: 5px solid var(--ink); border-radius: 20px; box-shadow: 0 10px 20px -13px rgba(21,48,42,.50); }
.phone-pair img + img { margin-top: 24px; }
.archive-entry { border-style: dashed; border-radius: 3px; }
.archive-entry .status { border-radius: 3px; }
/* Keep the personal introduction together when the viewport has room to spare, on the same left edge as the other sections. The photo and story center on each other, whichever is taller. */
.about .wrap { grid-template-columns: minmax(0, 360px) minmax(0, 600px); justify-content: start; grid-template-areas: 'heading .' 'portrait story' 'note note'; gap: 26px clamp(32px, 5vw, 64px); align-items: center; }
.about .section-head { grid-area: heading; margin-bottom: 0; }
.about h2 { font-size: clamp(30px, 3.9vw, 42px); }
.about-portrait { grid-area: portrait; width: 100%; max-width: 360px; margin: 0; }
.about-portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 16%; padding: 7px; background: var(--paper); border: 1px solid var(--rule); border-radius: 5px; }
.about .text { grid-area: story; }
.about .text p:first-child { font-size:21px; }
.about .boundary { grid-area: note; margin-top: clamp(16px, 2.5vw, 26px); border-top: 0; padding-top: 0; font-size: 14px; }
@media (max-width: 900px) {
  .about .wrap { grid-template-columns: minmax(0, 600px); grid-template-areas: 'heading' 'portrait' 'story' 'note'; gap: 32px; }
}
.faq .qa { padding-block:22px 26px; }
.closing { border-top: 5px double var(--ledger); }
.mockup-note { font:12px var(--font-body); color:var(--paper-muted); padding-top:20px; }
.studio-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 38px; }
.studio-story { display: grid; gap: 18px; align-content: start; }
.studio-lockup { width: 164px; height: auto; margin-bottom: 4px; }
.studio-story h3 { font-size: clamp(27px, 2.5vw, 34px); max-width: 20ch; }
.studio-links { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 6px; font-weight: 600; }
.studio-foundation { border-left: 1px solid var(--rule); padding-left: 36px; }
.studio-foundation dl { margin: 16px 0 0; }
.studio-foundation dl > div { padding: 20px 0; border-top: 1px solid var(--rule); }
.studio-foundation dt { display: flex; gap: 16px; font-weight: 600; }
.studio-foundation dt span { color: var(--raspberry); font: italic 17px var(--font-display); }
.studio-foundation dd { margin: 7px 0 0 35px; color: var(--moss); font-size: 15px; }
.work-invitation { display: flex; align-items: center; justify-content: space-between; gap: 24px 44px; margin-top: 32px; }
.work-invitation > div { max-width: 64ch; }
.work-invitation h3 { font-size: 27px; margin-bottom: 12px; }
.work-invitation > a { flex-shrink: 0; font-weight: 600; }
.work-intro { padding-top: 36px; padding-bottom: 44px; }
.work-intro .back-link { display: inline-block; margin-bottom: 36px; font-size: 15px; }
.work-intro h1 { margin: 12px 0 22px; font: 600 clamp(38px, 5vw, 58px)/1.15 var(--font-display); letter-spacing: -.02em; }
.work-intro .intro { max-width: 65ch; }
.project-jumps { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; font-weight: 600; }
.work-projects { padding-top: 44px; padding-bottom: 66px; }
.work-page .entry h2 { font-size: 24px; line-height: 1.25; letter-spacing: normal; }
.back-to-studio { margin-top: 28px; font-weight: 600; }
.proof-category { margin-bottom: 12px; }
.demo-prompt { position: relative; border-left: 1px solid var(--raspberry); padding-left: 18px; margin-top: 22px; color: var(--moss); }
.demo-prompt::before { content: ''; position: absolute; top: -18px; left: -12.5px; width: 40px; height: 18px; background: var(--paper) url('assets/dividers/threaded-eyelet.svg') center / 40px 18px no-repeat; }
.single-phone { width: 205px; height: auto; margin-inline: auto; border: 5px solid var(--ink); border-radius: 20px; box-shadow: 0 10px 20px -13px rgba(21,48,42,.5); }
/* With room to spare, every project keeps its status and links in the reading column, beside its image. */
@media (min-width: 1100px) {
  .entry-feature { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto auto 1fr; grid-template-areas: 'name image' 'story image' 'status image'; }
  .entry-feature .stands { grid-template-columns: 1fr; gap: 10px; align-self: start; }
  .entry-feature .stands .check { grid-column: 1; grid-row: auto; margin-top: 4px; }
}
@media (min-width: 1001px) {
  /* Keep the artwork anchored to the copy once the desktop row has enough room. */
  .hero-bottom { max-width: 940px; align-items: start; }
  .hero-art { margin-top: -32px; }
}
/* From 841px, the process and studio illustrations sit beside the whole heading, intro included. */
@media (min-width: 841px) {
  .illustrated-heading .section-art { justify-self: center; }
}
@media (max-width: 1000px) {
  .hero-bottom { gap: 24px; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
  .hero-art { max-width: 260px; }
  .entry-feature { gap: 20px; }
  .phone-pair img { height: 270px; }
}
@media (max-width: 760px) {
  .studio-proof { grid-template-columns: 1fr; padding: 24px; gap: 30px; }
  .studio-foundation { border-left: 0; border-top: 1px solid var(--rule); padding: 26px 0 0; }
  .work-invitation { align-items: flex-start; flex-direction: column; }
  .work-intro { padding-top: 26px; padding-bottom: 30px; }
  .work-intro .back-link { margin-bottom: 28px; }
  .work-projects { padding-top: 30px; padding-bottom: 44px; }
  .hero .wrap {
    padding-top: 32px;
    padding-bottom: 44px;
    grid-template-columns: fit-content(100%) minmax(0, 1fr);
    grid-template-areas: 'identity identity' 'descriptor descriptor' 'promise .' 'art art' 'message message';
  }
  .hero h1 { grid-area: identity; }
  .hero .descriptor { grid-area: descriptor; }
  .hero .desktop-promise, .hero .mobile-promise { grid-area: promise; }
  .hero .lines { margin-top: 34px; }
  .hero-bottom { display: contents; }
  .hero-message { grid-area: message; justify-self: stretch; }
  /* Share the lede’s 20px type size and 36ch measure while the image is stacked. */
  .hero-art { grid-area: art; justify-self: start; font-size: 20px; width: min(100%, 36ch); max-width: none; margin: 26px 0 22px; }
  .hero-art img { width: 210px; margin-inline: auto; }
  .hero .small { max-width: 45ch; }
  .section { padding-block: 44px; }
  .chapter-divider img { height: 46px; }
  .arrivals .arrival + .arrival { background: none; }
  .entry { padding: 24px; }
  .entry-feature { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: 'name' 'image' 'story' 'status'; gap: 24px; }
  .entry-feature .stands { grid-template-columns: 1fr; gap: 12px; }
  .entry-feature .stands .check { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .phone-pair img { height: 280px; max-width: 140px; }
  .product-plate figcaption { font-size: 11px; }
  .archive-entry { grid-template-columns: 1fr; }
}

/* Match the process cards: beside the title from 641px to 840px, stacked below it otherwise. */
@media (min-width: 641px) and (max-width: 840px) {
  .illustrated-heading {
    grid-template-columns: fit-content(calc(100% - 196px)) minmax(196px, 1fr);
    grid-template-areas: 'eyebrow art' 'title art' 'intro intro';
    gap: 18px 0;
  }
  .illustrated-heading .heading-copy { display: contents; }
  .illustrated-heading .heading-copy > .eyebrow { grid-area: eyebrow; align-self: end; }
  .illustrated-heading .heading-copy > h2 { grid-area: title; align-self: start; }
  /* Split the open space evenly between the title and the right margin. */
  .illustrated-heading .section-art { grid-area: art; width: 180px; justify-self: center; }
  .illustrated-heading .intro { grid-area: intro; }
  #built-title span { display: block; }
}
@media (max-width: 640px) {
  /* Keep each illustration between its heading and main text on narrow screens. */
  .illustrated-heading {
    grid-template-columns: fit-content(100%) minmax(0, 1fr);
    grid-template-areas: 'eyebrow eyebrow' 'title .' 'art .' 'intro intro';
    gap: 18px 0;
  }
  .illustrated-heading .heading-copy { display: contents; }
  .illustrated-heading .heading-copy > .eyebrow { grid-area: eyebrow; }
  .illustrated-heading .heading-copy > h2 { grid-area: title; }
  .illustrated-heading .section-art { grid-area: art; }
  .illustrated-heading .intro { grid-area: intro; }
  .section-art, #how .section-art { width: 180px; justify-self: center; }
  /* Size the shared track to the visible two-line title, not its balancing box. */
  #built-title span { display: block; }
}

.mobile-promise { display: none; }
@media(max-width:600px) {
 .hero .desktop-promise { display: none; }
 .mobile-promise { display: grid; gap: 8px; margin-top: 32px; max-width: 27ch; font-family: var(--font-display); font-size: 24px; font-weight:400; line-height:1.4; }
 .mobile-promise em { color: var(--raspberry); }
}