/* Hierarchy: image-to-copy 16px; related images 150pt; separate projects 192px. */
.detail-view { padding-top: 52px; padding-bottom: 60px; }
.detail-title { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; font-weight: 700; margin: 0 0 6px; }
.detail-category { font-size: 15px; color: var(--color-muted); line-height: 1.4; margin: 0 0 24px; }
.detail-hero { overflow: hidden; }
.detail-intro--split { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 48px; align-items: center; padding: 0 32px; background: var(--color-inset); }
.detail-intro--split .detail-hero { display: grid; place-items: center; }
.detail-intro__copy .detail-description { margin: 0; }
.detail-description { margin: var(--detail-image-copy) 0 0; font-size: clamp(16px, calc(15.2px + 0.24vw), 18px); line-height: 1.65; max-width: none; }
.detail-gallery { display: grid; gap: var(--detail-inner-gap); margin-top: var(--detail-inner-gap); }
.detail-gallery__frame--narrow { width: 80%; margin: 0 auto; }
.detail-tools { font-size: 13px; color: var(--color-muted); margin: var(--detail-tools-gap) 0 0; line-height: 1.5; }
.detail-project + .detail-project { margin-top: var(--detail-project-gap); }
.poster-detail { background:transparent; padding:16px 12px; }
.poster-detail img { display:block; width:auto; height:auto; max-width:min(460px,100%); max-height:70svh; margin:auto; box-shadow:0 3px 14px rgb(0 0 0 / .08); }
.project-navigation { display: flex; justify-content: space-between; gap: 32px; margin-top: var(--detail-navigation-gap); padding-top: var(--detail-navigation-gap); border-top: 1px solid var(--color-line); }
.project-navigation__link { display: flex; align-items: center; gap: 12px; max-width: 48%; transform-origin: left center; transition: transform 280ms var(--ease-smooth); }
.project-navigation__link--next { flex-direction: row-reverse; text-align: right; transform-origin: right center; }
.project-navigation__link:is(:hover, :focus-visible) { transform: scale(1.035); }
.project-navigation img { width: 60px; height: 44px; object-fit: contain; background: var(--color-stage); }
.project-navigation small { display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 7px; }
.project-navigation strong { display: block; font-size: 16px; }
.close-project { border: 0; background: none; padding: 0; font-size: 32px; line-height: 1; transform-origin: center; transition: transform 220ms var(--ease-smooth); }
.close-project:is(:hover, :focus-visible) { transform: scale(1.3); }
@media (max-width: 700px) { .poster-detail { padding:12px 8px; } .poster-detail img { width:auto; max-width:100%; max-height:65svh; } .project-navigation { gap: 16px; } .project-navigation img { width: 44px; } .project-navigation strong { font-size: 14px; } }
@media (max-width: 700px) {
  .detail-intro--split { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 24px; }
}

/* Identity artwork keeps its original colors; explanatory text uses a clear semantic hierarchy. */
.identity-design { container-type:inline-size; display:grid; grid-template-columns:minmax(0,1.74fr) minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:start; }
.identity-design h2 { font-size:clamp(24px,2.65vw,32px); line-height:1.15; font-weight:700; margin:0 0 12px; }
.identity-design__main > p { font-size:clamp(16px,1.5vw,18px); line-height:1.45; margin:0 0 20px; }
.identity-design__logos { display:block; width:100%; height:auto; }
.identity-design__specifications { padding-top:40px; display:grid; gap:22px; }
.identity-design h3 { font-size:clamp(16px,1.65cqw,20px); font-weight:700; line-height:1.2; margin:0 0 6px; }
.identity-design__specifications p { font-size:clamp(12px,1.16cqw,15px); line-height:1.35; margin:0; }
.identity-design__swatches { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.identity-design__swatches > div { min-height:52px; padding:10px 6px; background:var(--swatch); color:#c5c1ba; display:grid; align-content:center; text-align:center; font-size:clamp(10px,1.1cqw,13px); line-height:1.4; }
.identity-design__swatches > .identity-design__swatch--light { color:white; }
.identity-design__specimen { display:block; width:100%; height:auto; margin-top:10px; }
@media (max-width:700px) {
  .identity-design { grid-template-columns:1fr; }
  .identity-design__specifications { padding-top:0; gap:28px; }
}

/* The left heading, paragraph and paired logos share one real layout container. */
@media (min-width:701px) {
  .identity-design { display:block; position:relative; aspect-ratio:1577.8909 / 793.8611; }
  .identity-design__main { display:block; position:absolute; inset:0 auto 0 0; width:58.11%; }
  .identity-design h2 { position:static; margin:0 0 12px; font-size:3.04cqw; line-height:1.15; }
  .identity-design__main > p { position:static; width:100%; margin:0; font-size:1.7cqw; line-height:1.24; }
  .identity-design__logos { position:absolute; left:0; bottom:0; top:auto; width:100%; height:auto; }
  .identity-design__specifications { display:contents; }
  .identity-design__specifications > section { position:absolute; left:65%; width:35%; }
  .identity-design__specifications > section:nth-child(1) { top:8.08%; height:29.82%; }
  .identity-design__specifications > section:nth-child(2) { top:42.96%; height:26.7%; }
  .identity-design__specifications > section:nth-child(3) { top:77%; height:23%; }
  .identity-design h3 { font-size:1.7cqw; line-height:1.2; margin:0 0 .6cqw; }
  .identity-design__specifications p { font-size:1.25cqw; line-height:1.25; }
  .identity-design__swatches { position:absolute; bottom:0; left:0; right:0; height:46.8%; margin:0; gap:.87cqw; }
  .identity-design__specifications > section:nth-child(1) .identity-design__swatches { height:41.3%; }
  .identity-design__swatches > div { min-height:0; padding:.5cqw; font-size:1.25cqw; line-height:1.25; }
  .identity-design__specimen { position:absolute; bottom:0; width:100%; height:auto; margin:0; }
}

/* A viewport-height sticky stage isolates the logo during its scroll-driven enlargement. */
.brand-story { --brand-stage-height:clamp(420px,64svh,640px); position:relative; height:calc(120svh + var(--brand-stage-height)); margin-top:clamp(24px,4vw,56px); }
.brand-story__stage { position:sticky; top:max(0px,calc((100svh - var(--brand-stage-height)) / 2)); height:var(--brand-stage-height); min-height:min-content; padding:24px 0; display:grid; place-items:center; background:var(--color-paper); z-index:1; }
.brand-story__group { width:100%; display:flex; flex-direction:column; align-items:center; gap:56px; }
.brand-story__logo-frame { position:relative; width:24%; aspect-ratio:598 / 550.88; display:grid; place-items:center; }
.brand-story__logo { position:absolute; display:block; width:100%; height:auto; transform-origin:center; }
@media(max-width:700px) { .brand-story__logo-frame { width:28%; } }
@media(prefers-reduced-motion:reduce) {
  .brand-story { height:auto; }
  .brand-story__stage { position:static; height:clamp(420px,75vh,680px); }
}

/* Center the complete logo-and-copy group while reserving the final logo height. */
.brand-story__description { width:min(560px,82%); margin:0; text-align:center; color:#543b32; font-family:var(--font-body); font-size:clamp(16px, calc(15.2px + 0.24vw), 18px); font-weight:400; letter-spacing:normal; word-spacing:normal; line-height:1.65; transform:translateY(0); }
@media(max-height:550px) { .brand-story__description { font-size:14px; line-height:1.35; width:75%; } }

/* Web case studies use gray breathing room without cropping source artwork. */
.detail-hero--web { padding:24px 0; background:var(--color-stage); }
.detail-gallery__frame--web { padding:32px 0; background:var(--color-stage); }
.routinely-gallery__figure { margin:0; min-width:0; }
.routinely-gallery__frame { padding:clamp(16px,3vw,40px); background:var(--color-stage); }
.routinely-gallery__frame img { display:block; width:100%; height:auto; }
.routinely-gallery figcaption { margin-top:14px; font-size:14px; line-height:1.5; color:var(--color-muted); }

/* One connected replay preserves original desktop text and video proportions. */
.routinely-gallery__canvas { position:relative; width:100%; aspect-ratio:1200 / 1476; overflow:hidden; background:#111; }
.routinely-gallery__canvas iframe { position:absolute; left:0; top:0; width:1200px; height:1476px; border:0; transform:scale(var(--preview-scale,1)); transform-origin:top left; }

/* Related screens stay close; separate project articles keep the shared outer gap. */
.detail-project--web .detail-gallery { margin-top:96px; gap:64px; }
.routinely-gallery__frame--motion { padding:clamp(24px,6vw,80px); }
.routinely-gallery__frame--motion .routinely-gallery__canvas { width:92%; margin:0 auto; }
.designarchiv-pages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px!important; padding:clamp(20px,3vw,40px); background:var(--color-stage); align-items:start; }
.designarchiv-pages__column { margin:0; min-width:0; background:var(--color-paper); }
.designarchiv-pages__crop { overflow:hidden; }
.designarchiv-pages__crop img { display:block; width:100%; height:auto; max-width:100%; }
@media(max-width:700px) { .detail-project--web .detail-gallery { margin-top:56px; gap:40px; } .designarchiv-pages { grid-template-columns:1fr; gap:24px!important; } }

/* All detail presentation cards share the main card's subtle corner token. */
.detail-hero, .detail-intro--split, .detail-gallery__frame,
.routinely-gallery__frame, .designarchiv-pages, .poster-detail,
.routinely-gallery__canvas { border-radius:var(--card-radius); overflow:hidden; }

.detail-description--poster { text-align:center; }

/* Poster-only dividers sit halfway through the existing inter-project space. */
.detail-project--poster + .detail-project--poster { position:relative; }
.detail-project--poster + .detail-project--poster::before { content:''; position:absolute; left:0; right:0; top:calc(var(--detail-project-gap) / -2); height:1px; background:var(--color-line); pointer-events:none; }

/* Character studies use aligned frames; original images never stretch or crop. */
.model-gallery { display:grid; gap:8px; }
.model-gallery__row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; aspect-ratio:4.3; }
.model-gallery__row:first-child { aspect-ratio:4.25; }
.model-gallery__item { position:relative; min-width:0; min-height:0; overflow:hidden; background:#383838; }
.model-gallery__row:first-child .model-gallery__item { background:#302d29; }
.model-gallery__row:first-child .model-gallery__item:first-child { grid-column:span 2; }
.model-gallery__row:first-child .model-gallery__item:last-child { grid-column:span 3; }
.model-gallery__item img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
@media(max-width:700px) {
  .model-gallery__row, .model-gallery__row:first-child { display:flex; flex-direction:column; gap:8px; aspect-ratio:auto; }
  .model-gallery__item { background:transparent; }
  .model-gallery__item img { position:static; width:100%; height:auto; }
  .model-gallery__row .model-gallery__duplicate { display:none; }
  .detail-hero .model-composition { aspect-ratio:2024 / 2060; }
  .detail-hero .model-composition img { left:50%; width:100%; height:100%; object-fit:contain; }
}

/* Programmatic route focus should not draw an interactive outline on headings. */
.detail-title[tabindex="-1"]:focus { outline:none; }

/* A larger mobile logo needs a shorter, more compact storytelling stage. */
@media(max-width:700px) {
  .brand-story { --brand-stage-height:clamp(400px,62svh,520px); height:calc(var(--brand-stage-height) + 25svh); margin-top:24px; }
  .brand-story__group { gap:28px; }
  .brand-story__logo-frame { width:44%; }
  .brand-story__stage { padding:20px 0; }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) {
  .brand-story { height:auto; }
  .brand-story__stage { height:auto; min-height:400px; }
}