*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 Inter,system-ui,sans-serif;color:#17211f;background:#f7f4ee}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,video:focus-visible{outline:3px solid #1f6b57;outline-offset:5px}.wrap{width:min(1220px,calc(100% - 64px));margin:auto}.site-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 0;border-bottom:1px solid #d9ded8}.wordmark{font-size:31px;font-weight:bold;text-decoration:none;letter-spacing:-1.6px}.wordmark span{font-weight:400}.wordmark i{color:#1f6b57;font-style:normal}.site-head nav{display:flex;gap:26px;font-size:13px}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:.14em;text-transform:uppercase;color:#1f6b57;margin:0 0 16px}h1,h2,h3{font-family:Lora,Georgia,serif;font-weight:500;line-height:1.13;letter-spacing:-.025em}h1{font-size:clamp(40px,5vw,69px);max-width:940px;margin:0 0 28px}h2{font-size:38px;margin:0 0 20px}h3{font-size:26px;margin:0 0 14px}.lede{font-size:20px;line-height:1.65;max-width:850px;color:#31413d}.hero{padding:72px 0 50px}.origin{font-size:12px;color:#5e6c68;margin-top:24px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:28px 0}.button{display:inline-block;background:#17211f;color:#ffffff;padding:14px 23px;text-decoration:none;font-size:14px;font-weight:600;border:1px solid #17211f}.button:hover{background:#104d40}.text-link{font-size:14px}.project-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-block:1px solid #d9ded8;padding:25px 0;font-size:13px}.project-meta small{display:block;text-transform:uppercase;letter-spacing:.12em;color:#104d40;margin-bottom:8px;font-size:10px}.overview{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;padding:64px 0}.overview p{margin-top:0;color:#5e6c68}.facts{margin:0;padding-left:20px}.facts li{padding-bottom:14px}.film{background:#17211f;color:#f7f4ee;padding:60px 0}.film .eyebrow{color:#c8982d}.film-intro{display:flex;gap:50px;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.film-intro p{max-width:460px;color:#c8d6d0;margin-top:0;font-size:15px}.film video{display:block;width:100%;aspect-ratio:16/9;background:#0f1917;box-shadow:0 20px 60px #0003}.film .caption{color:#c8d6d0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.caption{font-size:12px;margin:15px 0 0;color:#5e6c68}.section{padding:64px 0;border-bottom:1px solid #d9ded8}.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-bottom:36px}.section-intro p{margin-top:0;color:#5e6c68}.evidence{display:grid;grid-template-columns:1fr 1fr;gap:30px}.evidence figure{margin:0}.shot{display:block;border:1px solid #d9ded8;background:#f0f3f6;overflow:hidden}.shot img{display:block;width:100%;height:auto}.evidence figcaption{padding-top:20px;font-size:14px;color:#5e6c68}.evidence figcaption strong{display:block;font-size:18px;color:#17211f;margin-bottom:7px}.doc-feature{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px;margin-top:48px}.doc-feature p{color:#5e6c68}.capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.capabilities article{border-top:3px solid #1f6b57;padding-top:20px}.capabilities p{font-size:14px;color:#5e6c68}.capabilities a{font-size:13px}.deliverables{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.deliverables a{display:flex;justify-content:space-between;padding:17px 0;border-bottom:1px solid #d9ded8;text-decoration:none;font-size:14px}.deliverables a:hover{color:#1f6b57}.scope{background:#ece8df;padding:24px 30px;margin-top:36px;font-size:14px}.scope p{margin:8px 0}.closing{padding:65px 0}.closing h2{max-width:750px}.closing p{max-width:730px;color:#5e6c68}.site-foot{border-top:1px solid #d9ded8;padding:25px 0;font-size:12px;display:flex;justify-content:space-between;gap:24px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;background:white;padding:10px;z-index:9}
/* Documentation evidence on the project page */
.documentation-proof{display:grid;gap:44px}.proof-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:30px;border-top:1px solid #d9ded8}.proof-row>div>p:not(.eyebrow){font-size:15px;color:#5e6c68}.proof-row figure{margin:0}.proof-row figcaption{font-size:12px;color:#5e6c68;margin-top:10px}.doc-preview{max-height:390px;overflow:auto;scrollbar-width:thin;background:#fff}.doc-preview img{width:100%;height:auto}.excerpt{border-left:3px solid #1f6b57;background:#ece8df;padding:17px 20px;margin:22px 0}.excerpt-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#104d40;margin:0 0 9px}.excerpt blockquote{margin:0;font-size:16px;line-height:1.7}.excerpt code{font-size:13px;overflow-wrap:anywhere}.proof-note{font-size:12px!important}@media(max-width:850px){.proof-row{gap:26px}}@media(max-width:600px){.proof-row{grid-template-columns:1fr}.doc-preview{max-height:320px}.documentation-proof{gap:30px}}

/* A distinct player and an accessible, visible start control. */
.video-stage{position:relative;border:5px solid #f7f4ee;border-radius:12px;background:#f7f4ee;box-shadow:0 18px 50px #0a110f66;overflow:hidden}.film .video-stage video{box-shadow:none}.video-play[hidden]{display:none}.video-play{position:absolute;inset:0 0 54px;display:grid;place-items:center;width:100%;border:0;background:linear-gradient(180deg,#17211f08,#17211f26);cursor:pointer;color:#17211f;padding:16px}.play-badge{display:flex;align-items:center;gap:18px;padding:20px 26px;background:#ffffff;border:1px solid #17211f25;border-radius:10px;box-shadow:0 10px 45px #0005;transition:transform .15s ease,box-shadow .15s ease}.play-icon{display:grid;place-items:center;flex:none;width:60px;height:60px;border-radius:50%;color:#fff;background:#1f6b57}.play-copy{display:flex;flex-direction:column;text-align:left;gap:4px}.play-copy strong{font-size:19px;line-height:1.3}.play-copy>span{font-size:13px;color:#5e6c68}.video-play:hover .play-badge{transform:scale(1.03);box-shadow:0 12px 50px #0007}.video-play:focus-visible{outline:3px solid #1f6b57;outline-offset:-8px}.video-play:focus-visible .play-badge{outline:3px solid #1f6b57;outline-offset:4px}@media(max-width:600px){.video-stage{border-width:3px;border-radius:8px}.video-play{bottom:42px;padding:10px}.play-badge{gap:12px;padding:13px 16px}.play-icon{width:44px;height:44px}.play-copy strong{font-size:15px}.play-copy>span{font-size:11px}}@media(prefers-reduced-motion:reduce){.play-badge{transition:none}}

/* Mobile inline captions stay clear of the native control bar. Fullscreen retains native captions. */
.mobile-video-caption{min-height:70px;font-size:15px;line-height:1.5;white-space:pre-line;background:#f7f4ee;color:#17211f;margin:0;padding:12px 16px;text-align:center;border-top:1px solid #d9ded8}@media(max-width:600px){.video-stage video:not(:fullscreen)::cue{color:transparent;background:transparent;text-shadow:none}.video-stage video:fullscreen::cue{color:white;background:rgba(0,0,0,.8);text-shadow:none}}

@media(max-width:600px){.video-stage video::cue{color:transparent!important;background:transparent!important;text-shadow:none!important;opacity:0}.video-stage video::-webkit-media-text-track-container{visibility:hidden}.video-stage video:fullscreen::cue{color:white!important;background:rgba(0,0,0,.8)!important;opacity:1}.video-stage video:fullscreen::-webkit-media-text-track-container{visibility:visible}}

.project-b10 .hero {
  padding-bottom: 38px;
}

.project-b10 .hero .return-link {
  display: inline-block;
  margin-bottom: 45px;
}

.project-b10 .hero h1 {
  max-width: 850px;
}

.project-b10 .origin {
  max-width: 760px;
  padding-left: 15px;
  border-left: 3px solid #1f6b57;
}

.project-brief {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid #d9ded8;
}

.project-brief article {
  padding: 24px 24px 26px 0;
}

.project-brief article + article {
  padding-left: 24px;
  border-left: 1px solid #d9ded8;
}

.project-brief small {
  display: block;
  margin-bottom: 8px;
  color: #104d40;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.project-brief strong {
  display: block;
  font: 500 18px/1.45 Lora, Georgia, serif;
}

.project-b10 .proof-row {
  align-items: center;
}

.project-b10 .handoff-preview {
  max-height: none;
}

.project-screenshot-trigger {
  position: relative;
  width: 100%;
  padding: 0;
  color: #17211f;
  text-align: left;
  cursor: zoom-in;
  box-shadow: 8px 8px 0 #e4e2dc;
}

.project-screenshot-trigger:hover {
  border-color: #1f6b57;
}

.project-screenshot-crop {
  position: relative;
  display: block;
  height: clamp(280px, 31vw, 390px);
  overflow: hidden;
  background: #fff;
}

.project-screenshot-crop::after {
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(#ffffff00, #ffffffee);
  content: "";
  pointer-events: none;
}

.project-screenshot-crop-wide {
  height: clamp(250px, 25vw, 340px);
}

.project-screenshot-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.project-screenshot-action {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 14px;
  color: #fff;
  background: #17211f;
  font-size: 12px;
  font-weight: 600;
}

.evidence figcaption span {
  display: block;
}

.project-lightbox-open,
.project-lightbox-open body {
  overflow: hidden;
}

.project-screenshot-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #17211f;
  background: transparent;
}

.project-screenshot-dialog[open] {
  display: grid;
  place-items: center;
}

.project-screenshot-dialog::backdrop {
  background: rgb(10 17 15 / .84);
}

.project-lightbox-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 64px));
  height: min(92dvh, 920px);
  overflow: hidden;
  border: 1px solid #b8c3bd;
  background: #f7f4ee;
  box-shadow: 0 24px 70px rgb(0 0 0 / .38);
}

.project-lightbox-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 24px;
  border-bottom: 1px solid #d9ded8;
  background: #f7f4ee;
}

.project-lightbox-header .eyebrow {
  margin-bottom: 7px;
}

.project-lightbox-header h2 {
  margin: 0;
  font-size: 29px;
}

.project-lightbox-header p:last-child {
  max-width: 720px;
  margin: 7px 0 0;
  color: #5e6c68;
  font-size: 13px;
  line-height: 1.55;
}

.project-lightbox-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 10px;
}

.project-lightbox-actions button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #17211f;
  color: #17211f;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.project-lightbox-actions button:hover {
  color: #fff;
  background: #17211f;
}

.project-lightbox-close {
  color: #fff !important;
  background: #17211f !important;
}

.project-lightbox-viewport {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  background: #e4e2dc;
}

.project-lightbox-viewport:focus-visible {
  outline: 3px solid #1f6b57;
  outline-offset: -7px;
}

.project-lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid #c9cfc8;
  background: #fff;
  box-shadow: 8px 8px 0 rgb(23 33 31 / .12);
}

.project-lightbox-viewport.is-original-size .project-lightbox-image {
  width: auto;
  max-width: none;
  margin-inline: 0;
}

.workflow-section {
  width: 100%;
  max-width: none;
  background: #ece8df;
  border-bottom: 0;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 42px;
  padding: 0;
  list-style: none;
  border-block: 1px solid #c9cfc8;
}

.flow-steps li {
  position: relative;
  padding: 24px;
}

.flow-steps li + li {
  border-left: 1px solid #c9cfc8;
}

.flow-steps span {
  display: block;
  margin-bottom: 28px;
  color: #1f6b57;
  font-size: 11px;
  letter-spacing: .12em;
}

.flow-steps strong {
  display: block;
  margin-bottom: 9px;
  font: 500 20px/1.25 Lora, Georgia, serif;
}

.flow-steps p {
  margin: 0;
  color: #5e6c68;
  font-size: 13px;
}

.project-b10 .film {
  border-top: 0;
}

@media (max-width: 850px) {
  .project-brief,
  .flow-steps {
    grid-template-columns: 1fr 1fr;
  }

  .project-brief article:nth-child(3),
  .flow-steps li:nth-child(3) {
    border-left: 0;
  }

  .project-brief article:nth-child(n+3),
  .flow-steps li:nth-child(n+3) {
    border-top: 1px solid #d9ded8;
  }

  .project-lightbox-panel {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
  }

  .project-lightbox-header {
    display: block;
    padding: 18px 20px;
  }

  .project-lightbox-header h2 {
    font-size: 25px;
  }

  .project-lightbox-actions {
    margin-top: 15px;
  }

  .project-lightbox-viewport {
    padding: 14px;
  }
}

@media (max-width: 600px) {
  .project-b10 .hero .return-link {
    margin-bottom: 32px;
  }

  .project-lightbox-panel {
    width: 100vw;
    height: 100dvh;
    border: 0;
  }

  .project-lightbox-header {
    padding: 15px 16px;
  }

  .project-lightbox-actions {
    margin-top: 12px;
  }

  .project-lightbox-actions button {
    flex: 1 1 auto;
  }

  .project-lightbox-viewport {
    padding: 10px;
  }

  .project-screenshot-crop,
  .project-screenshot-crop-wide {
    height: 320px;
  }

  .project-b10 .site-head nav {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .project-b10 .site-head nav a {
    flex: none;
  }

  .project-brief,
  .flow-steps {
    grid-template-columns: 1fr;
  }

  .project-brief article,
  .project-brief article + article,
  .project-brief article:nth-child(3) {
    padding: 20px 0;
    border-left: 0;
  }

  .project-brief article + article,
  .project-brief article:nth-child(n+3),
  .flow-steps li + li,
  .flow-steps li:nth-child(3) {
    border-top: 1px solid #d9ded8;
    border-left: 0;
  }

  .flow-steps li {
    padding: 21px 0;
  }

  .flow-steps span {
    margin-bottom: 12px;
  }
}

/* Responsive rules shared by the project page (restored from the original stylesheet). */
@media(max-width:850px){.wrap{width:calc(100% - 36px)}.site-head nav{gap:14px}.hero{padding-top:45px}.overview,.section-intro{gap:30px}.capabilities{grid-template-columns:1fr}.doc-feature{grid-template-columns:1fr}.docs-layout{grid-template-columns:200px minmax(0,1fr);gap:30px}.film-intro{display:block}.docs-banner h1{font-size:40px}.film{padding-block:40px}}@media(max-width:600px){.site-head{flex-wrap:wrap;padding:20px 0;gap:18px}.site-head nav{width:100%;justify-content:space-between;font-size:12px}.wordmark{font-size:28px}.lede{font-size:18px}h1{font-size:43px}h2{font-size:32px}.project-meta{grid-template-columns:1fr;gap:18px}.overview,.section-intro,.evidence,.deliverables{grid-template-columns:1fr;gap:24px}.overview,.section,.closing{padding-block:42px}.evidence{gap:35px}.film-intro{display:block}.docs-layout{grid-template-columns:1fr;gap:24px}.docs-rail{position:static;max-height:none}.docs-rail nav{display:grid;grid-template-columns:1fr 1fr}.docs-rail .downloads{display:flex;gap:20px;flex-wrap:wrap}.doc-section h2{font-size:29px}.docs-banner h1{font-size:36px}.docs-banner{padding:35px 0}.doc-section pre{padding:18px}.site-foot{flex-direction:column;gap:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Interim prototype: Young Copy brand, green primary button, YC badge. */
.button{background:#1f6b57;border-color:#1f6b57;color:#fff}
.button:hover{background:#104d40;border-color:#104d40}
.brand{display:inline-flex;align-items:center;gap:10px;color:#17211f;font-weight:800;text-decoration:none;font-size:17px}
.brand-mark{width:38px;height:38px;display:inline-grid;place-items:center;border:2px solid #17211f;border-radius:50%;font-size:13px}
.note-bar{display:flex;flex-wrap:wrap;gap:6px 12px;padding:9px 32px;background:#17211f;color:#c8d6d0;font-size:13px}
.note-bar strong{color:#c8982d;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
h1,h2,h3{text-wrap:balance}

@media (max-width: 520px) {
  .site-head { align-items: flex-start; flex-wrap: wrap; }
  .site-head nav { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; }
  .site-head nav a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid #d9ded8; }
}

/* Young Copy logo: identical to the homepage (site.css .brand / .brand-mark). */
a.brand.brand.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: #17211f; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; font-weight: 800; line-height: 1.5; letter-spacing: normal; text-decoration: none; white-space: nowrap; }
a.brand.brand.brand span { font-weight: 800; letter-spacing: normal; }
a.brand.brand.brand .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; background: none; color: inherit; font-size: 13px; line-height: 1.5; letter-spacing: 0; }
footer a.brand.brand.brand { color: #fff; margin-bottom: 14px; }

/* 2026-09-23: main site menu on project pages, transcript spacing, focus rings, tap targets. */
.site-head nav{margin-left:auto;align-items:center;gap:22px;font-size:14px}
.site-head nav a{color:#17211f;font-weight:600;text-decoration:none}
.site-head nav a:hover{color:#1f6b57;text-decoration:underline;text-underline-offset:6px}
.head-cta{padding:11px 18px;border-radius:6px;font-size:14px;font-weight:800;white-space:nowrap}
.transcript .doc-section{margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid #d9ded8}
.transcript .doc-section:last-child{border-bottom:0}
.doc-section>a[href*="#t="]{display:inline-flex;margin-top:4px;font-weight:600;color:#1f6b57}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #1f6b57;outline-offset:4px}
@media(max-width:900px){.site-head{flex-wrap:wrap}.site-head nav{order:3;width:100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap;gap:6px 18px;padding-top:10px;border-top:1px solid #d9ded8;font-size:14px}}
@media(max-width:560px){.head-cta{order:4;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px}.button{min-height:48px}}
/* Same menu type as the homepage (15px, bold). */
.site-head nav a{font-size:15px;font-weight:700}
.site-head nav a:hover{text-decoration:none}
.head-cta{min-height:42px;display:inline-flex;align-items:center}
.return-link{display:inline-block;margin-bottom:22px}
@media(max-width:900px){.site-head nav a{font-size:14px}}
/* Phones: the menu is one wrapped row under the logo, as on the homepage. */
@media(max-width:900px){.site-head nav{display:flex;flex-direction:row}.site-head nav a{display:inline;padding:0;border:0;min-height:0}}

/* Align the Young Copy project and transcript shell with the V13 site. */
.project-b10 .wrap{width:min(1160px,100%);padding-inline:32px}
.site-head.wrap{position:sticky;top:0;z-index:50;width:100%;min-height:62px;margin:0;padding:12px max(32px,calc((100% - 1160px)/2 + 32px));background:rgba(247,244,238,.96);border-bottom:1px solid #d9ded8;backdrop-filter:blur(6px)}
@media(min-width:901px){.site-head .head-cta{height:42px;min-height:42px;padding:0 18px;line-height:21px}}
@media(max-width:900px){
  .project-b10 .wrap{width:100%;padding-inline:18px}
  .site-head.wrap{position:relative;min-height:0;padding:10px 18px;gap:10px 18px}
}
@media(max-width:560px){
  .site-head nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
  .site-head nav a{display:inline;min-height:0;padding:0}
}

/* Keep the wrapped mobile navigation links at least 24px tall without moving their text. */
@media(max-width:900px){.site-head nav a{padding-block:2px;margin-block:-2px}}

/* Link hover cues, without moving labels or altering project imagery. */
a.brand.brand.brand:hover{color:#1f6b57}
a.brand.brand.brand:hover .brand-mark{border-color:currentColor}
footer a.brand.brand.brand:hover{color:#c8982d}
.text-link:hover,.return-link:hover,.site-foot a:hover,.doc-section>a[href*="#t="]:hover{color:#104d40;text-decoration-thickness:2px}
.film .caption a:hover{color:#fff;text-decoration-thickness:2px}