/* One opening sequence, then a shared canvas for the selected work. */
.hero h1 {
  font-size: clamp(46px, 5.4vw, 76px);
  letter-spacing: -.055em;
  line-height: 1.14;
}
.hero h1 .serif { letter-spacing: -.055em; }
.hero-description { max-width: 430px; line-height: 1.85; }
.hero .eyebrow { color: var(--muted); }
.hero-actions .button { border-radius: 100px; }
.hero-art.assembly {
  --assemble: 1;
  width: 440px;
  max-width: 100%;
  aspect-ratio: 1;
  opacity: 1;
  margin: 0;
  justify-self: end;
  position: relative;
  isolation: isolate;
}
.assembly-caption {
  position: absolute;
  top: 0;
  right: 4%;
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--muted);
}
.assembly-guides { width: 100%; height: 100%; opacity: .75; }
.assembly-connection { stroke-dashoffset: calc(280 * (1 - var(--assemble))); }
.assembly-frame {
  position: absolute;
  inset: 14% 9% 14%;
  border: 1px solid var(--green-line);
  border-radius: 15px;
  background: var(--green);
  opacity: calc(.08 + var(--assemble) * .92);
  transform: scale(calc(.93 + var(--assemble) * .07));
}
.frame-label, .frame-footer {
  position: absolute;
  left: 8%;
  right: 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--green-ink);
}
.frame-label { top: 6%; font-size: 7px; letter-spacing: .11em; }
.frame-label>span:last-child { font-size: 15px; }
.frame-footer { bottom: 6%; font-size: 8px; }
.assembly-fragment {
  position: absolute;
  border-radius: 8px;
  padding: 14px 17px;
  box-shadow: 0 8px 18px var(--shadow);
  will-change: transform;
}
.fragment-number { display: block; font-size: 6px; letter-spacing: .1em; margin-bottom: 9px; }
.assembly-fragment strong { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.035em; line-height: 1.25; }
.fragment-question {
  top: 26%; left: 15%; width: 43%; height: 26%;
  color: var(--ink); background: var(--hero-card); border: 1px solid var(--hero-card-line);
  transform: translate(calc(-34px * (1 - var(--assemble))), calc(-50px * (1 - var(--assemble)))) rotate(calc(-14deg * (1 - var(--assemble))));
}
.fragment-direction {
  top: 26%; right: 15%; width: 25%; height: 26%;
  color: var(--peach-ink); background: var(--peach); border: 1px solid var(--peach-line);
  transform: translate(calc(38px * (1 - var(--assemble))), calc(10px * (1 - var(--assemble)))) rotate(calc(17deg * (1 - var(--assemble))));
}
.fragment-direction strong { font-size: 14px; }
.fragment-product {
  top: 54%; left: 15%; width: 70%; height: 23%;
  color: var(--blue-ink); background: var(--blue); border: 1px solid var(--blue-line);
  transform: translate(calc(-28px * (1 - var(--assemble))), calc(43px * (1 - var(--assemble)))) rotate(calc(-8deg * (1 - var(--assemble))));
}
.fragment-rule { display: block; height: 3px; width: 85%; background: var(--hero-card-rule); border-radius: 3px; margin-top: 12px; }
.fragment-rule.short { width: 55%; margin-top: 5px; }
.direction-options { display: flex; gap: 5px; margin-top: 14px; }
.direction-options i { width: 12px; height: 12px; border: 1px solid var(--peach-line); border-radius: 50%; }
.direction-options i:nth-child(2) { background: var(--peach-solid); }
.fragment-product-mark { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 7px; }
.story-seed { display: grid; grid-template-columns: repeat(2, 6px); gap: 2px; width: fit-content; }
.story-seed i { width: 6px; height: 6px; background: currentColor; border-radius: 1px; }
.story-seed i:nth-child(2) { opacity: .4; }
.story-seed i:nth-child(3) { opacity: .65; }
.story-seed i:last-child { border-radius: 50%; opacity: .3; }
.assembly-stage { position: absolute; bottom: 1%; width: 100%; text-align: center; color: var(--muted); font-size: 10px; }
.stage-label { display: none; }
.stage-product, [data-stage="product"] .stage-product { display: inline; }
[data-stage="questions"] .stage-questions, [data-stage="direction"] .stage-direction { display: inline; }
[data-stage="questions"] .stage-product, [data-stage="direction"] .stage-product { display: none; }
.section-heading h2 { font-size: 44px; }
.section-heading .section-kicker { display: block; }
.connect-grid h2 { font-size: 48px; }
.connect-grid h2 span { color: var(--ink); }

/* Meet Kevin, gather the cards, then continue into the page. */
/* JS enhances only roomy desktop viewports; fallback markup stays in reading order. */
@media (min-width: 980px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  .opening-scene.is-motion {
    --hero-assembly-scroll:440px;
    --hero-overlap:120px;
    --hero-header:85px; /* 84px header content plus its bottom border. */
    /* Frame half-height: 36% of the 440px scene at its completed 1.12 scale. */
    --hero-close-space:max(0px, calc((100svh - var(--hero-header)) * .5 - 440px * .36 * 1.12 - 96px));
    --hero-close-inset:clamp(0px, calc(var(--hero-exit, 0px) * .5), var(--hero-close-space));
    /* The page enters during the last 120px of assembly, rather than waiting. */
    height:calc(100svh - var(--hero-header) + var(--hero-assembly-scroll) - var(--hero-overlap));
  }
  .opening-scene.is-motion:focus-within { --hero-close-inset:0px; }
  .opening-scene.is-motion .hero {
    grid-template-columns:1fr;
    position: sticky;
    top:var(--hero-header);
    height:calc(100svh - var(--hero-header));
    min-height: 0;
    padding-block: 40px 100px;
  }
  .opening-scene.is-motion .hero-copy {
    width:540px;
    max-width:100%;
    justify-self:center;
    text-align:center;
    opacity:calc(1 - var(--intro-recede, 0));
    transform:translateY(calc(-36px * var(--intro-recede, 0))) scale(calc(1 - .12 * var(--intro-recede, 0)));
    transform-origin:50% 45%;
  }
  .opening-scene.is-motion .hero-description { max-width:none; margin-inline:auto; }
  .opening-scene.is-motion .hero-actions { justify-content:center; }
  .opening-scene.is-motion .hero-art.assembly {
    position:absolute;
    left:50%;
    /* Offset half the native exit travel until the visible header/row gaps match. */
    top:calc(50% + var(--hero-close-inset));
    width:calc(440px + 80px * var(--cards-gather, 0));
    height:440px;
    aspect-ratio:auto;
    max-width:none;
    pointer-events:none;
    z-index:2;
    transform:translate(-50%, -50%) scale(calc(1 + .12 * var(--cards-gather, 0)));
  }
  .opening-scene.is-motion .assembly-guides { opacity:calc(.75 * var(--cards-gather, 0)); }
  .opening-scene.is-motion .assembly-frame { opacity:var(--cards-gather, 0); }
  /* Scatter the existing 440px scene around the copy; zero offsets restore its geometry. */
  .opening-scene.is-motion .fragment-question {
    --float-x:calc(var(--scene-width) * -.4 + 59.4px);
    --float-y:calc(var(--scene-height) * -.25 + 48.4px);
    --float-angle:-12deg;
  }
  .opening-scene.is-motion .fragment-direction {
    --float-x:calc(var(--scene-width) * .4 - 99px);
    --float-y:calc(var(--scene-height) * -.12 + 48.4px);
    --float-angle:14deg;
  }
  .opening-scene.is-motion .fragment-product {
    --float-x:0px;
    --float-y:calc(var(--scene-height) * .38 - 68.2px);
    --float-angle:-8deg;
  }
  .opening-scene.is-motion .assembly-fragment {
    transform:translate(calc(var(--float-x) * (1 - var(--cards-gather, 0))), calc(var(--float-y) * (1 - var(--cards-gather, 0)))) rotate(calc(var(--float-angle) * (1 - var(--cards-gather, 0)))) scale(calc(.85 + .15 * var(--cards-gather, 0)));
  }
  .opening-scene.is-motion .is-intro-away .hero-copy { pointer-events:none; }
  /* Keyboard navigation brings the introduction and its actions back into view. */
  .opening-scene.is-motion .hero-copy:focus-within { opacity:1; transform:none; pointer-events:auto; }
  .opening-scene.is-motion .hero-copy:focus-within + .hero-art.assembly { --cards-gather:0; transform:translate(-50%, -50%); }
  .work-story.has-canvas { display: grid; grid-template-columns: 1fr 1.28fr; gap: 70px; position: relative; }
  .has-canvas .project-scene, .has-canvas .project-scene:nth-child(2) {
    display: flex;
    align-items: center;
    min-height: clamp(490px, 65svh, 620px);
    margin-bottom: 0;
    padding-block: 45px;
    gap: 0;
  }
  .has-canvas .project-scene:last-child { border-bottom: 0; }
  .has-canvas .project-copy { width: 100%; order: 0; }
  .has-canvas .project-headline { font-size: 29px; }
  .is-current-project .project-index>span:first-child { border-color: var(--accent); color: var(--accent); transition: border-color .3s, color .3s; }
  .work-canvas {
    position: sticky;
    top: max(115px, calc(50svh - 225px));
    align-self: start;
    height: 450px;
    margin-top: max(20px, calc((clamp(490px, 65svh, 620px) - 450px) / 2));
    isolation: isolate;
  }
  .work-canvas .work-layer {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    opacity: 0;
    transform: translateY(20px) scale(.975);
    pointer-events: none;
    transition: opacity .5s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .work-canvas .work-layer.is-current { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
  .work-canvas .work-layer>div { width: 100%; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 979px) {
  .hero { grid-template-columns: 1.5fr 1fr; }
  .hero h1 { font-size: clamp(40px, 5.7vw, 58px); }
  .hero-art.assembly { width: 340px; }
  .assembly-fragment { padding: 10px 12px; }
  .assembly-fragment strong { font-size: 14px; }
  .fragment-direction strong { font-size: 11px; }
  .direction-options { margin-top: 6px; }
  .fragment-number { font-size: 5px; margin-bottom: 6px; }
  .fragment-product-mark { margin-top: 5px; font-size: 6px; }
}
@media (max-width: 600px) {
  .hero { display: block; padding-top: 45px; }
  .hero h1 { font-size: clamp(38px, 10.4vw, 58px); }
  .hero-art.assembly { width: 310px; height: auto; margin: 32px auto 15px; }
  .assembly-stage { font-size: 9px; }
  .assembly-caption { font-size: 6px; }
  .frame-label { font-size: 5px; }
  .frame-footer { font-size: 6px; }
  .section-heading h2 { font-size: 36px; }
  .connect-grid h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .assembly-fragment, .assembly-frame, .assembly-connection { transform: none; will-change: auto; }
  .assembly-frame { opacity: 1; }
  .assembly-connection { stroke-dashoffset: 0; }
}

/* Editorial pass: fewer labels, readable supporting text, unchanged choreography. */
.hero .eyebrow { font-size:13px; letter-spacing:.06em; }
.hero-description { font-size:16px; }
.assembly-fragment { display:flex; flex-direction:column; justify-content:center; }
.assembly-fragment strong { font-size:17px; }
.fragment-direction strong { font-size:14px; }
.background-item p { font-size:16px; line-height:1.75; }
.section-heading { margin-bottom:32px; }
.project-heading { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.project-heading h3 { margin:0; }
.project-heading .status { margin:0; font-size:13px; line-height:1.6; }
.project-headline { margin-top:20px; }
.project-summary { font-size:16px; line-height:1.75; }
.project-outcome { margin-top:12px; }
.secondary-project .secondary-summary { font-size:16px; line-height:1.75; max-width:62ch; }
.secondary-project .status { font-size:13px; }
.has-case-study .secondary-end { font-size:14px; }
.ac-heading { justify-content:flex-end; }
.concept-visual figcaption { font-size:13px; line-height:1.5; }
.about-copy>p { font-size:16px; }
.connect-grid p { font-size:16px; }
.email-link,.social-links a,.site-footer { font-size:14px; }
.back-link,.text-link,.quiet-link,.button { font-size:14px; }
.detail-bottom .text-link,.detail-bottom .quiet-link { font-size:14px; }
.detail-meta { display:block; font-size:14px; line-height:1.75; margin-top:16px; }
.detail-summary { font-size:18px; }
.case-study-context { margin-bottom:40px; }
.site-header nav,.nav-contact { font-size:14px; }
@media (max-width:600px) {
  .site-header nav,.nav-contact { font-size:13px; }
  .hero-description,.detail-summary { font-size:16px; }
  .background-section { gap:28px; }
  .assembly-fragment strong { font-size:15px; }
  .fragment-direction strong { font-size:14px; }
}

/* Keep the shorter copy grouped; reserve the large canvas only for desktop. */
.background-item h3 { margin-top:0; font-size:18px; }
@media (min-width:601px) {
  .background-section { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
  .background-item { min-width:0; padding-inline:clamp(20px,2.5vw,32px); }
  .background-item+.background-item { padding-left:clamp(20px,2.5vw,32px); }
  .background-item:first-of-type { padding-left:0; }
  .background-item:last-of-type { padding-right:0; }
  .background-item p { max-width:none; }
}
.work-section { padding-bottom:40px; }
.secondary-project h3 { font-size:18px; }
.about-section { display:block; padding-block:64px; }
.about-copy { max-width:720px; }
.about-copy>p { max-width:none; }
.about-copy a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.about-copy a:hover { text-decoration-color:currentColor; }
.site-footer>span { font-size:13px; }
.not-found .section-kicker { font-size:13px; letter-spacing:.06em; }
@media (max-width:979px) {
  .project-copy { display:block; }
  .project-summary { max-width:62ch; }
  .project-visual.concept-visual { display:flex; min-height:0; }
  .concept-visual>.project-concept { flex:initial; }
  .concept-visual .concept-scene { flex:none; }
}
@media (max-width:600px) {
  .hero { padding-block:32px; }
  .hero .eyebrow { margin-bottom:14px; }
  .hero-description { margin-top:20px; }
  .hero-actions { margin-top:22px; }
  .hero-art.assembly { margin:24px auto 0; }
  .background-section { gap:20px; padding-block:24px; }
  .background-item+.background-item { padding-top:16px; }
  .background-item h3 { font-size:17px; }
  .work-section { padding-top:40px; padding-bottom:24px; }
  .section-heading { margin-bottom:24px; }
  .project-scene,.project-scene:nth-child(2) { gap:20px; padding-bottom:24px; margin-bottom:28px; }
  .project-scene:last-child { margin-bottom:0; }
  .project-headline { margin-top:14px; }
  .project-copy .text-link { margin-top:16px; }
  .more-work { padding-top:24px; }
  .more-work-heading { margin-bottom:16px; }
  .secondary-project.has-case-study { padding-block:20px; gap:12px; }
  .about-section { padding-block:40px; }
  .about-copy>p { margin-top:16px; }
  .connect-section { padding-block:40px; }
  .connect-grid p { margin-top:16px; }
  .contact-actions { margin-top:24px; }
  .project-page { padding-top:16px; padding-bottom:32px; }
  .detail-heading { padding-block:24px; }
  .detail-meta { margin-top:12px; }
  .detail-summary { margin-top:16px; }
  .case-study-body { padding-top:32px; }
  .case-study-context { margin-bottom:32px; }
  .case-study-body section+section { margin-top:32px; }
  .case-study-body h2 { margin-bottom:14px; }
  .detail-bottom { margin-top:32px; padding-top:20px; }
}

/* A centered, wider opening leads into the narrower case-study reading column. */
.project-page { max-width:880px; }
.detail-heading h1,.detail-summary,.project-page>.project-visual { max-width:none; }
.case-study-body,.detail-bottom { max-width:720px; margin-inline:auto; }
.detail-heading h1 { font-size:48px; text-wrap:wrap; }
.project-page h2 { text-wrap:balance; }
.project-page p { text-wrap:pretty; }
@media (max-width:600px) {
  .detail-heading h1 { font-size:38px; }
}

/* Equal side tracks keep navigation centered regardless of the action widths. */
.header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.header-inner>.wordmark { justify-self:start; }
.header-inner>nav { justify-self:center; }
.header-actions { justify-self:end; }

/* Keep the controls easy to reach without enlarging the illustrations. */
.theme-toggle,.ac-motion-toggle { width:44px; height:44px; }
.project-copy .text-link { min-height:44px; }
.nav-contact[aria-current] { background:var(--surface); border-color:var(--accent); }
@media (max-width:360px) {
  .header-inner { grid-template-columns:auto auto auto; justify-content:space-between; gap:12px; }
}

/* A centered, ordinary reading flow carries the opening onto phones and tablets. */
@media (max-width:979px) {
  .hero { display:block; min-height:0; padding-block:32px; }
  .hero-copy { max-width:540px; margin-inline:auto; text-align:center; }
  .hero-description { margin-inline:auto; }
  .hero-actions { justify-content:center; flex-wrap:wrap; gap:8px 20px; }
  .hero-art.assembly { width:min(360px,100%); aspect-ratio:1.18; margin:24px auto 0; }
  .assembly-fragment { padding:8px 10px; }
  .assembly-fragment strong { font-size:15px; }
  .fragment-question,.fragment-direction { top:20%; height:32%; }
  .fragment-direction { padding-inline:7px; }
  .fragment-direction strong { font-size:14px; }
  .fragment-product { top:57%; height:27%; }
  .fragment-rule { height:2px; margin-top:7px; }
  .fragment-rule.short { margin-top:4px; }
}