:root{
  --font-micro:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --project-grid-gap:24px;
  --project-title-size:clamp(52px,8.2vw,132px);
  --project-title-top:16svh;
  --project-meta-width:calc((100% - (var(--pad) * 2) - (var(--project-grid-gap) * 11)) / 3 + (var(--project-grid-gap) * 3));
  --project-col-3:calc(var(--pad) + (((100% - (var(--pad) * 2) - (var(--project-grid-gap) * 11)) / 12 + var(--project-grid-gap)) * 2));
}

/* The DD.ca anatomy is the single geometry contract for every project hero. */
body[data-project] :is(.case-hero,.hero){
  min-height:100svh;
  padding:16svh var(--pad) 7svh;
  display:block;
  position:relative;
}
body[data-project] :is(.case-hero,.hero)>.folio{
  position:absolute;
  top:16svh;
  left:var(--pad);
  margin:0;
}
body[data-project] :is(.case-hero,.hero)>.hero-heading,
body[data-project="dpi"] .hero>.hero-title{
  position:absolute;
  z-index:3;
  top:var(--project-title-top);
  left:var(--project-col-3);
  width:calc(100% - var(--project-col-3) - var(--pad));
  margin:0;
}
body[data-project] :is(.case-hero,.hero) :is(.hero-heading,.hero-title)>h1{
  position:absolute;
  top:38.58px;
  left:0;
  width:100%;
  font-size:var(--project-title-size);
  line-height:.84;
  letter-spacing:-.072em;
  margin:0;
}
body[data-project] :is(.case-hero,.hero) :is(.hero-heading,.hero-title)>.eyebrow{
  font:12px/1.35 Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 1.4rem;
}
body[data-project] :is(.case-hero,.hero)>.hero-intro,
body[data-project="dpi"] .hero>.hero-dek{
  position:absolute;
  z-index:3;
  top:calc(var(--project-title-top) + 38.58px + (var(--project-title-size) * 1.68) + 24px);
  left:var(--project-col-3);
  width:calc(((100% - (var(--pad) * 2) - (var(--project-grid-gap) * 11)) / 12) * 5 + (var(--project-grid-gap) * 4));
  max-width:none;
  margin:0;
}
body[data-project] :is(.case-hero,.hero)>.hero-intro .hero-dek{
  max-width:29ch;
  margin:0;
}
body[data-project] :is(.case-hero,.hero)>.hero-scope,
body[data-project] .hero>.scope{
  position:absolute;
  z-index:3;
  right:var(--pad);
  top:82.7778svh;
  bottom:auto;
  left:auto;
  width:var(--project-meta-width);
  max-width:var(--project-meta-width);
  margin:0;
  align-self:auto;
  justify-self:auto;
  white-space:normal;
  text-align:left;
  font:500 12px/1.4 var(--font-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
}
body[data-project] :is(.case-hero,.hero)>.hero-rule,
body[data-project] .hero>.fact-line,
body[data-project] .hero>.snapshot{
  position:absolute;
  z-index:3;
  right:auto;
  top:82.7778svh;
  bottom:auto;
  left:var(--project-col-3);
  width:800px;
  max-width:calc(100% - var(--project-col-3) - var(--pad));
  min-height:16.8px;
  margin:0;
  padding:0;
  font:500 12px/1.4 var(--font-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
}
body[data-project] :is(.case-hero,.hero)>.hero-rule{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}
body[data-project] .hero>.snapshot{display:flex;align-items:center;flex-wrap:wrap;list-style:none}
body[data-project] .hero>.snapshot li{white-space:normal}

/* Preserve the original Films hero image field independently of the shared copy geometry. */
@media(min-width:801px){
  body[data-project="films"] .hero>.hero-frame{
    position:absolute;
    z-index:1;
    top:16svh;
    right:0;
    left:calc(var(--pad) + (((100% - (var(--pad) * 2) - (var(--project-grid-gap) * 11)) / 12 + var(--project-grid-gap)) * 6));
    width:auto;
    height:72svh;
    min-height:72svh;
    margin:0;
    aspect-ratio:auto;
  }
}

/* Shared final navigation index. Its hierarchy remains below the primary next-case action. */
.project-index{width:100%;margin:0;padding-top:22px;border-top:1px solid color-mix(in srgb,currentColor 24%,transparent);color:inherit}
.next-project>.project-index,
.final-navigation>.project-index{grid-column:1/-1;align-self:end}
.next-project,.final-navigation{position:relative}
@media(min-width:801px){
  .next-project>.project-index,
  .final-navigation>.project-index{position:absolute;left:0;right:0;bottom:50px;width:auto}
}
.project-index__label{margin:0 0 12px;font:500 12px/1.4 var(--font-micro);text-transform:uppercase;letter-spacing:.075em;opacity:.62}
.project-index ol{display:flex;align-items:flex-start;justify-content:space-between;gap:0;margin:0;padding:0;list-style:none}
.project-index li{min-width:0}
.project-index a{display:flex;align-items:flex-start;gap:.45rem;width:auto;min-width:0;min-height:44px;box-sizing:border-box;padding:10px 0;overflow-wrap:anywhere;font:500 12px/1.35 var(--font-micro);text-transform:uppercase;letter-spacing:.045em;opacity:.58;transition:opacity .2s ease}
.project-index a span{opacity:.65;flex-shrink:0;white-space:nowrap}
.project-index a:hover,.project-index a:focus-visible,.project-index a[aria-current="page"]{opacity:1}
.project-index a[aria-current="page"]{font-weight:700}
.project-index a[aria-current="page"]:after{content:"";width:6px;height:6px;margin:.25rem 0 0;border-radius:50%;background:var(--signal,#b8d900);flex:0 0 auto}
.project-index a:focus-visible,.footer-home-link:focus-visible{outline:3px solid #b8ff00;outline-offset:4px}
.footer-home-link{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}

/* DD.ca evidence continuity. */
body[data-project="ddca"] .hero-artifact{position:relative;z-index:2;margin-top:clamp(-72px,-5vw,-42px);transform:translateY(clamp(42px,5vw,72px));padding-bottom:clamp(112px,14vw,210px);overflow:visible}

/* Shared evidence overlap: DD.ca, DP&I and Integrated desktop hero artifacts. */
@media(min-width:801px){
  body[data-project="ddca"] .hero-artifact,
  body[data-project="dpi"] .hero-artifact,
  body[data-project="integrated"] .hero-artifact{position:relative;z-index:2;margin-top:-50px;transform:none}
}

@media(max-width:800px){
  :root{
    --project-title-size:clamp(46px,14vw,64px);
    --project-title-top:calc(29svh - 38.58px);
    --project-col-3:var(--pad);
    --project-meta-width:calc(100% - (var(--pad) * 2));
  }
  body[data-project] :is(.case-hero,.hero){min-height:calc(100svh + 64px);padding:18svh var(--pad) 7svh;display:block;overflow:hidden}
  body[data-project] :is(.case-hero,.hero)>.folio{top:18svh;left:var(--pad)}
  body[data-project] :is(.case-hero,.hero)>.hero-heading,
  body[data-project="dpi"] .hero>.hero-title{top:var(--project-title-top);left:var(--pad);width:calc(100% - (var(--pad) * 2));display:flex;flex-direction:column}
  body[data-project] :is(.case-hero,.hero) :is(.hero-heading,.hero-title)>h1{font-size:var(--project-title-size);line-height:.88}
  body[data-project] :is(.case-hero,.hero)>.hero-intro,
  body[data-project="dpi"] .hero>.hero-dek{top:calc(var(--project-title-top) + 38.58px + (var(--project-title-size) * 1.76) + 24px);left:var(--pad);width:calc(100% - (var(--pad) * 2));max-width:none;margin:0}
  body[data-project] :is(.case-hero,.hero)>.hero-intro .hero-dek{max-width:92%;margin:0}
  body[data-project] :is(.case-hero,.hero)>.hero-scope,
  body[data-project] .hero>.scope{top:calc(100svh - 144px);right:var(--pad);bottom:auto;left:var(--pad);width:auto;max-width:none;padding:0;margin:0;font-size:12px;line-height:1.4;letter-spacing:.1em}
  body[data-project] :is(.case-hero,.hero)>.hero-rule,
  body[data-project] .hero>.fact-line,
  body[data-project] .hero>.snapshot{top:calc(100svh - 41px);right:var(--pad);bottom:auto;left:var(--pad);width:auto;max-width:none;min-height:16.8px;padding:0;margin:0;font-size:12px;line-height:1.4;letter-spacing:.1em}
  .project-index{margin-top:42px}
  .next-project>.project-index,.final-navigation>.project-index{margin-bottom:50px}
  .project-index ol{display:grid;grid-template-columns:1fr 1fr}
  .project-index a{width:100%;padding-right:10px}
  body[data-project="ddca"] .hero-artifact{margin-top:0;transform:none;padding-bottom:70px;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.project-index a{transition:none}}

/* Global editorial microtype: precise sans hierarchy without terminal/code cues. */
body[data-project] :is(
  .site-header,.eyebrow,.folio,.scope,.hero-scope,.fact-line,.snapshot,
  .scope-line,.label,figcaption,.frame-index,.film-number,.process,
  .next-project__meta,.editorial-link,.back-link,.project-index,footer
){font-family:var(--font-micro)}
body[data-project] :is(.eyebrow,.folio,.scope,.hero-scope,.fact-line,.snapshot,.scope-line,.label,figcaption){font-weight:500;letter-spacing:.075em}
body[data-project] :is(.site-header,.next-project__meta,.editorial-link,.back-link,footer){font-weight:500;letter-spacing:.07em}

/* Pre-final P0: intrinsic title/deck rows; independent metadata columns. */
body[data-project] :is(.case-hero,.hero){
 display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
 grid-template-rows:auto auto minmax(24px,1fr) auto;column-gap:24px;row-gap:0;
 padding-bottom:max(7svh,calc(17.2222svh - 34px));
}
body[data-project] :is(.case-hero,.hero)>.hero-heading,
body[data-project="dpi"] .hero>.hero-title{
 position:relative;inset:auto;width:auto;grid-column:3/13;grid-row:1;
}
body[data-project] :is(.case-hero,.hero) :is(.hero-heading,.hero-title)>h1{
 position:relative;inset:auto;margin:22.38px 0 0;width:100%;
}
body[data-project] :is(.case-hero,.hero) :is(.hero-heading,.hero-title)>.eyebrow{margin:0}
body[data-project] :is(.case-hero,.hero)>.hero-intro,
body[data-project="dpi"] .hero>.hero-dek{
 position:relative;inset:auto;width:auto;grid-column:3/8;grid-row:2;margin:24px 0 0;
}
body[data-project] :is(.case-hero,.hero)>.hero-scope,
body[data-project] .hero>.scope{
 position:relative;inset:auto;width:auto;max-width:none;grid-column:9/13;grid-row:4;align-self:start;
}
body[data-project] :is(.case-hero,.hero)>.hero-rule,
body[data-project] .hero>:is(.fact-line,.snapshot){
 position:relative;inset:auto;width:auto;max-width:none;grid-column:3/9;grid-row:4;align-self:start;
 font-size:12px;line-height:1.4;
}
body[data-project] .hero>.snapshot{gap:8px 14px;flex-wrap:wrap}
body[data-project] .hero>.snapshot i{flex-shrink:0}
body[data-project="ddca"] .hero-rule{grid-template-columns:auto minmax(12px,1fr) auto}
.project-index a,.project-index__label,.project-index a span{opacity:1}
body[data-project="operating"] .model-label{color:#b6b6b6}
@media(max-width:800px){
 body[data-project] :is(.case-hero,.hero){display:flex;flex-direction:column;gap:0;padding-top:var(--project-title-top);padding-bottom:48px}
 body[data-project] :is(.case-hero,.hero)>.hero-heading,
 body[data-project="dpi"] .hero>.hero-title{order:1;flex:none;width:100%}
 body[data-project] :is(.case-hero,.hero)>.hero-intro,
 body[data-project="dpi"] .hero>.hero-dek{order:2;flex:none;width:100%;margin-top:24px}
 body[data-project] :is(.case-hero,.hero)>.hero-scope,
 body[data-project] .hero>.scope{order:4;flex:none;margin-top:auto;padding-top:48px}
 body[data-project] :is(.case-hero,.hero)>.hero-rule,
 body[data-project] .hero>:is(.fact-line,.snapshot){order:5;flex:none;margin-top:24px}
 body[data-project] .hero>:is(.hero-model,.hero-art,.hero-frame){position:relative;inset:auto;order:3;flex:none;margin-top:40px}
 body[data-project="album"] .hero>.hero-art{width:100%;height:44svh;margin-left:0;margin-right:0}
 body[data-project="operating"] .hero>.hero-model{width:100%;height:190px}
}

/* P1B.6: compact, persistent navigation with a consistent editorial surface. */
body[data-project] .site-header{position:fixed;inset:0 0 auto;z-index:40;height:64px;padding:10px var(--pad);background:#111;color:#f0ede5;mix-blend-mode:normal;backdrop-filter:none}
body[data-project] .site-header a{display:inline-flex;align-items:center;min-height:44px}
body[data-project] [id]{scroll-margin-top:84px}
body[data-project] .project-index ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
body[data-project] .project-index li{width:100%;min-width:0}
body[data-project] .project-index a{width:100%}
@media(max-width:800px){
 body[data-project] .site-header{height:64px;padding:10px var(--pad);font-size:10px}
 body[data-project] .site-header nav{gap:0}
 body[data-project] .site-header nav a,body[data-project] .site-header nav a:nth-child(2){display:inline-flex;justify-content:center;padding:0 6px;min-width:44px}
 body[data-project] .project-index ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
}

body[data-project] .project-index a .project-index__name{flex:1 1 0;min-width:0;white-space:normal;overflow-wrap:normal;opacity:1}

/* Project index follow-up: distribute the space between natural-width titles. */
@media(min-width:801px){
 body[data-project] .project-index ol{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
 body[data-project] .project-index li{flex:0 1 auto;width:auto;min-width:0}
 body[data-project] .project-index a{width:auto}
 body[data-project] .project-index a .project-index__name{flex:0 1 auto}
}

/* GLOBAL FACT-LINE NORMALIZATION: presentation only; hero placement stays above. */
:root{
 --fact-line-size:12px;
 --fact-line-leading:1.4;
 --fact-line-tracking:.1em;
 --fact-line-column-gap:16px;
 --fact-line-row-gap:8px;
 --fact-line-color:inherit;
}
body[data-project] :is(.case-hero,.hero)>.fact-line{
 display:flex;
 flex-wrap:wrap;
 align-items:baseline;
 align-content:flex-start;
 justify-content:flex-start;
 gap:var(--fact-line-row-gap) var(--fact-line-column-gap);
 font:500 var(--fact-line-size)/var(--fact-line-leading) var(--font-micro);
 letter-spacing:var(--fact-line-tracking);
 text-transform:uppercase;
 color:var(--fact-line-color);
 list-style:none;
 background:none;
 box-shadow:none;
}
body[data-project] :is(.case-hero,.hero)>.fact-line>.fact-line__item{
 display:block;
 flex:0 1 auto;
 min-width:0;
 max-width:100%;
 min-height:0;
 margin:0;
 padding:0;
 border:0;
 font:inherit;
 letter-spacing:inherit;
 color:inherit;
 white-space:normal;
 overflow-wrap:anywhere;
}
body[data-project] :is(.case-hero,.hero)>.fact-line>.fact-line__item::before,
body[data-project] :is(.case-hero,.hero)>.fact-line>.fact-line__item::after{content:none}

/* Preserve the pre-normalization metadata footprint where fewer wrapped lines
   would otherwise move the grid row, mobile auto-margin, or hero boundary.
   Instance values reserve geometry only; all visible items use the rule above. */
body[data-project] :is(.case-hero,.hero)>.fact-line{
 min-height:var(--fact-line-reserve,16.8px);
}
@media(min-width:801px) and (max-width:1284px){
 body[data-project] :is(.case-hero,.hero)>.fact-line{
  min-height:var(--fact-line-reserve-narrow,var(--fact-line-reserve,16.8px));
 }
}
@media(max-width:800px){
 body[data-project] :is(.case-hero,.hero)>.fact-line{
  min-height:var(--fact-line-reserve-mobile,16.8px);
 }
}
@media(max-width:381px){
 body[data-project] :is(.case-hero,.hero)>.fact-line{
  min-height:var(--fact-line-reserve-compact,var(--fact-line-reserve-mobile,16.8px));
 }
}

/* Shared green separators, contained in the existing gap to preserve geometry. */
:root{--fact-line-separator-color:#b8d900;--fact-line-separator-size:4px}
body[data-project] :is(.case-hero,.hero)>.fact-line>.fact-line__item{position:relative}
body[data-project] :is(.case-hero,.hero)>.fact-line>.fact-line__item:not(:last-child)::after{
 content:"";
 display:block;
 position:absolute;
 top:calc(var(--fact-line-size) * .7);
 right:calc((var(--fact-line-column-gap) + var(--fact-line-separator-size)) / -2);
 width:var(--fact-line-separator-size);
 height:var(--fact-line-separator-size);
 margin:0;
 border:0;
 border-radius:50%;
 background:var(--fact-line-separator-color);
 transform:translateY(-50%);
 pointer-events:none;
}

/* P1D: reuse the existing 44px mobile target across case footers. */
@media(max-width:800px){
 body[data-project] :is(body>footer,.site-footer){align-items:center}
 body[data-project] :is(body>footer,.site-footer) a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
}

/* THEMED PROJECT HEADER SYSTEM: color only; existing geometry remains authoritative.
   Explicit header opt-in keeps the homepage outside this system. */
.site-header[data-header-theme]{
 --header-surface:var(--dark,#111);
 --header-text:var(--light,#f0ede5);
 --header-accent:var(--signal,#b8d900);
 background-color:var(--header-contextual-surface,var(--header-surface));
 color:var(--header-text);
 transition:background-color 170ms var(--motion-ease,cubic-bezier(.2,.7,.2,1)),color 170ms var(--motion-ease,cubic-bezier(.2,.7,.2,1)),border-color 170ms var(--motion-ease,cubic-bezier(.2,.7,.2,1));
}
.site-header[data-header-theme="light"]{--header-surface:var(--paper,#e9e5db);--header-text:var(--ink,#121212)}
.site-header[data-header-theme="green"]{--header-surface:var(--signal,#b8d900);--header-text:var(--ink,#121212);--header-accent:var(--ink,#121212)}
/* Match the specificity of the existing fixed project header without changing its box. */
body[data-project] .site-header[data-header-theme]{background-color:var(--header-contextual-surface,var(--header-surface));color:var(--header-text)}
.site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a){
 color:var(--header-text);
 transition:color 170ms var(--motion-ease,cubic-bezier(.2,.7,.2,1)),border-color 170ms var(--motion-ease,cubic-bezier(.2,.7,.2,1)),outline-color 170ms var(--motion-ease,cubic-bezier(.2,.7,.2,1));
}
.site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a)::after{
 background-color:var(--header-accent);
 transition:transform var(--motion-fast,160ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)),background-color 170ms var(--motion-ease,cubic-bezier(.2,.7,.2,1));
}
.site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a):focus-visible{outline:2px solid var(--header-text);outline-offset:4px;box-shadow:none}
.site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a)[aria-current]:not([aria-current="false"])::after{transform:scaleX(1)}
/* Contextual light surfaces retain the existing signal accent for interaction. */
.site-header[data-header-theme="light"][data-header-surface="contextual"] :is(.wordmark,nav[aria-label="Primary navigation"] a):is(:hover,:focus-visible,[aria-current]:not([aria-current="false"])){color:var(--header-accent)}
@media(prefers-reduced-motion:reduce){
 .site-header[data-header-theme],.site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a),.site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a)::after,
 .site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a):is(:hover,:focus-visible)::after{transition:none}
}
@media(forced-colors:active){
 .site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a):focus-visible{outline-color:Highlight}
 .site-header[data-header-theme] :is(.wordmark,nav[aria-label="Primary navigation"] a)::after{background-color:Highlight}
}

/* Shared project credit typography: existing Films / Operating pattern. */
body:is([data-project="integrated"], [data-project="films"], [data-project="operating"]) .credits p { font:clamp(16px,1.05vw,18px)/1.55 Arial,sans-serif; padding:1.2rem 0; margin:0; }
body:is([data-project="integrated"], [data-project="films"], [data-project="operating"]) .credits b { display:block; margin-bottom:.35rem; }

/* Keep short final lines together after targeted copy updates. */
.copy-pretty { text-wrap:balance; }