/* Project heroes: a compact introduction above a large product showcase.
   The project name is the H1, a plain-language line and the role sit beside
   it, and the work itself follows on a colour field. Loaded last, after
   style.css, home-v2.css, sbdc-ai.css and the project's own sheet, and
   scoped to .project-page so the homepage and the case-study bodies keep
   their own type and ground. */

.project-page{
  --project-paper:#f5f4f0;
  --project-ink:#1b1d19;
  --project-muted:#666960;
  --project-poster-ink:#24251f;
  --project-brand-accent:#ef7a43;
  --project-ai-field:#ef7a43;
  --project-my-field:#c9bef0;
  --project-my-shape:#b4a4e5;
  --project-gc-field:#dcef64;
  --project-sans:proxima-nova,Arial,sans-serif;
  --project-serif:proxima-sera,Georgia,serif;
  --project-mono:'Space Mono','Courier New',monospace;
  background:var(--project-paper);
}
.project-page .case-body{background:var(--ground)}
.project-page .site-foot{background:var(--ground)}

/* ---------- the site header on paper ---------- */
.project-page .header{min-height:80px;color:var(--project-ink)}
.project-page .brand{color:var(--project-ink)}
.project-page .brand:is(:hover,:focus-visible){color:var(--project-brand-accent)}
.project-page .mark i{border-color:var(--project-ink)}
.project-page .mark i:last-child{background:var(--project-brand-accent);border-color:var(--project-brand-accent)}
.project-page .header nav a{color:var(--project-muted);white-space:nowrap}
.project-page .header nav a:hover,.project-page .header nav a[aria-current]{color:var(--project-ink)}
.project-page .header nav a[href="/connect/"]{--dots:rgba(27,29,25,.4);--meteor:#1b1d19}
.project-page .header a:focus-visible,.project-intro a:focus-visible,.project-showcase :is(a,button):focus-visible{outline-color:var(--project-ink)}

/* ---------- introduction ---------- */
.project-intro{
  display:grid;
  grid-template-columns:minmax(0,57fr) minmax(0,38fr);
  justify-content:space-between;
  column-gap:5%;
  align-items:end;
  padding-top:52px;
  padding-bottom:40px;
  color:var(--project-ink);
  font-family:var(--project-sans);
  -webkit-font-smoothing:antialiased;
}
.project-index{display:flex;align-items:center;gap:10px;margin:0 0 22px;font:400 12px/1.5 var(--project-mono);letter-spacing:.02em;color:var(--project-muted)}
.project-index a{display:inline-flex;align-items:center;min-height:32px;color:inherit;transition:color 160ms ease}
.project-index a:hover{color:var(--project-ink)}
.project-index>span{opacity:.75}
.project-page .project-intro h1{
  font:700 clamp(54px,8vw,112px)/.95 var(--project-sans);
  letter-spacing:-.055em;
  color:var(--project-ink);
  max-width:none;
  margin:0 0 0 -.04em;
}
.project-page .project-intro h1.is-long{font-size:clamp(44px,5.6vw,80px);line-height:.96;text-wrap:balance}
.project-summary{padding-bottom:6px}
.project-description{font:500 clamp(20px,1.75vw,24px)/1.22 var(--project-sans);letter-spacing:-.02em;color:var(--project-ink);max-width:22ch;margin:0 0 20px;text-wrap:balance}
.project-role{font:400 14px/1.5 var(--project-sans);color:var(--project-ink);margin:0;max-width:36ch}
.project-role>span{display:block;font:400 12px/1.5 var(--project-mono);letter-spacing:.02em;color:var(--project-muted);margin-bottom:3px}

/* ---------- showcase ---------- */
.project-showcase-wrap{padding-bottom:72px}
.project-showcase{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,24fr) minmax(0,73fr);
  column-gap:3%;
  align-items:center;
  padding:40px 32px 28px;
  min-height:440px;
  background:var(--field);
  color:var(--project-poster-ink);
  font-family:var(--project-sans);
  -webkit-font-smoothing:antialiased;
}
.showcase-ai{--field:var(--project-ai-field)}
.showcase-my{--field:var(--project-my-field)}
.showcase-gc{--field:var(--project-gc-field)}
.showcase-art{position:relative;z-index:2;padding-left:6px}
.showcase-mark{width:64px;height:64px;color:var(--project-poster-ink);margin-bottom:26px}
.showcase-mark svg{display:block;width:100%;height:100%}
.showcase-word{display:block;font:700 clamp(56px,7vw,92px)/.8 var(--project-sans);letter-spacing:-.09em;color:var(--project-poster-ink);margin:0 0 22px -3px}
.showcase-headline{font:400 clamp(28px,3.2vw,44px)/1 var(--project-serif);letter-spacing:-.03em;color:var(--project-poster-ink);margin:0 0 22px;text-wrap:balance}
.showcase-note{font:400 13px/1.4 var(--project-sans);letter-spacing:-.01em;color:var(--project-poster-ink);margin:0}
.showcase-media{position:relative;z-index:2;min-width:0;border-radius:6px;overflow:hidden;background:#2b2c29;box-shadow:0 24px 48px -16px rgba(20,16,12,.38)}
.showcase-media img{display:block;width:100%;height:auto;aspect-ratio:16/9}
@media(min-width:801px) and (prefers-reduced-motion:no-preference){.showcase-media{will-change:transform}}

/* the poster-first player: a still, a real control, and the frame it loads */
.project-showcase .film-screen{position:relative;aspect-ratio:16/9;background:#2b2c29;overflow:hidden;line-height:0}
.project-showcase .film-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.project-showcase .film-screen.is-live iframe{display:block}
.project-showcase .film-screen.is-live .film-poster,.project-showcase .film-screen.is-live .film-play{display:none}
.film-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:stretch;min-height:48px;
  border:1px solid rgba(245,244,240,.35);background:rgba(27,29,25,.92);color:#f5f4f0;
  font:500 15px/1 var(--project-sans);letter-spacing:-.01em;line-height:1;
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease;
}
.film-play-icon{display:grid;place-items:center;width:46px;border-right:1px solid rgba(245,244,240,.25)}
.film-play-icon svg{display:block;width:16px;height:16px}
.film-play-label{display:inline-flex;align-items:center;padding:0 20px 0 16px;white-space:nowrap}
.film-play:is(:hover,:focus-visible){background:var(--project-paper);color:var(--project-ink);border-color:var(--project-paper)}
.film-play:is(:hover,:focus-visible) .film-play-icon{border-right-color:rgba(27,29,25,.2)}
.film-play:focus-visible{outline:2px solid #f5f4f0;outline-offset:3px}

/* caption row along the bottom of the field */
.showcase-caption{grid-column:1/-1;position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-top:26px;padding-left:6px;font:400 13px/1.45 var(--project-sans);color:var(--project-poster-ink)}
.showcase-caption>div{min-width:0}
.showcase-caption .film-caption{font:400 12px/1.5 var(--project-mono);letter-spacing:.02em;color:var(--project-poster-ink);margin:0 0 3px}
.showcase-caption #film-description{font:400 13px/1.45 var(--project-sans);color:var(--project-poster-ink);opacity:.82;max-width:52ch}
.showcase-caption noscript p{margin:0;font-size:13px}
.showcase-caption noscript a{text-decoration:underline;text-underline-offset:3px}
.showcase-link{display:inline-flex;align-items:center;gap:12px;min-height:32px;color:var(--project-poster-ink);font-weight:500;white-space:nowrap;border-bottom:1px solid currentColor;transition:opacity 160ms ease}
.showcase-link:hover{color:var(--project-poster-ink);opacity:.7}

/* walkthrough tabs, restyled for the field */
.project-showcase .film-tabs{margin:0;gap:10px;flex-shrink:0}
.project-showcase .film-tab{min-height:38px;padding-right:14px;border-color:rgba(36,37,31,.45);background:transparent;color:var(--project-poster-ink);font:500 14px/1.3 var(--project-sans)}
.project-showcase .film-tab-icon{border-right-color:rgba(36,37,31,.35)}
.project-showcase .film-tab:is(:hover,:focus-visible){color:var(--project-poster-ink);border-color:var(--project-poster-ink);background:rgba(36,37,31,.07)}
.project-showcase .film-tab[aria-selected="true"]{background:var(--project-poster-ink);color:#f5f4f0;border-color:var(--project-poster-ink)}
.project-showcase .film-tab[aria-selected="true"] .film-tab-icon{border-right-color:rgba(245,244,240,.3)}
.project-showcase .film-tab:focus-visible{outline:2px solid var(--project-poster-ink);outline-offset:4px}

/* MySBDC: a broad curved form behind the screen */
.showcase-my::before{content:"";position:absolute;z-index:1;right:-9%;top:-12%;width:72%;height:135%;border-radius:60% 0 0 0;background:var(--project-my-shape);transform:rotate(-8deg);transform-origin:100% 50%;pointer-events:none}
.showcase-my .showcase-media{box-shadow:0 24px 48px -16px rgba(37,28,52,.38)}

/* Ground Control: a compact artwork header, then the wide workflow view */
.showcase-gc{display:block;padding:34px 32px 28px;min-height:0}
.showcase-gc-head{display:flex;align-items:center;gap:24px;padding:0 0 28px 6px}
.showcase-gc .showcase-word{margin:0}
.showcase-gc .showcase-headline{margin:0 auto 0 12px;font-size:clamp(26px,2.8vw,38px)}
.showcase-gc .showcase-note{white-space:nowrap}
.showcase-gc .showcase-media{box-shadow:0 24px 48px -16px rgba(25,35,17,.38)}

/* ---------- seam into the case-study body ---------- */
.ground-page .case-body>.gc-walkthrough{padding-top:72px}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .project-showcase{padding:32px 24px 24px;min-height:0}
  .showcase-gc{padding:28px 24px 24px}
  .showcase-caption{flex-wrap:wrap}
}
@media(max-width:900px){
  .project-page .header{min-height:72px}
}
@media(max-width:800px){
  .project-intro{display:block;padding-top:32px;padding-bottom:28px}
  .project-index{margin-bottom:16px}
  .project-page .project-intro h1{font-size:clamp(50px,13.5vw,70px);margin-left:-.03em}
  .project-page .project-intro h1.is-long{font-size:clamp(42px,11.5vw,60px);line-height:.94}
  .project-summary{margin-top:22px;padding-bottom:0}
  .project-description{font-size:20px;line-height:1.3;max-width:26ch;margin-bottom:14px}
  .project-role{font-size:13px;max-width:none}
  .project-role>span{display:inline;margin:0 10px 0 0}
  .project-showcase-wrap{padding-bottom:44px}
  .project-showcase{display:block;padding:24px 18px 22px}
  .showcase-art{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:center;padding:0;margin-bottom:20px}
  .showcase-mark{width:44px;height:44px;margin:0}
  .showcase-word{font-size:60px;margin:0}
  .showcase-headline{margin:0;font-size:28px}
  .showcase-headline br{display:none}
  .showcase-note{display:none}
  .showcase-media{border-radius:4px;box-shadow:0 14px 24px -8px rgba(20,20,18,.28)}
  .showcase-caption{flex-direction:column;align-items:flex-start;gap:14px;margin-top:18px;padding-left:0}
  .showcase-caption #film-description{max-width:none}
  .showcase-gc{padding:24px 18px 22px}
  .showcase-gc-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;row-gap:12px;align-items:center;padding:0 0 20px}
  .showcase-gc .showcase-word{font-size:60px}
  .showcase-gc .showcase-headline{margin:0;font-size:27px}
  .showcase-gc .showcase-note{display:block;grid-column:1/-1;white-space:normal}
  .showcase-my::before{right:-30%;top:-20%;width:90%;height:120%}
  .film-play{min-height:44px;font-size:14px}
  .film-play-icon{width:42px}
  .film-play-label{padding:0 16px 0 12px}
  .project-showcase .film-tab{min-height:44px}
  .project-showcase .film-tab-icon{min-height:42px}
}
@media(max-width:400px){
  .project-page .project-intro h1{font-size:clamp(44px,13.5vw,58px)}
  .project-page .project-intro h1.is-long{font-size:clamp(38px,11.5vw,50px)}
  .showcase-word{font-size:52px}
  .showcase-headline{font-size:24px}
  .showcase-gc .showcase-headline{font-size:23px}
  .project-showcase .film-tabs{width:100%}
  .project-showcase .film-tab{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .film-play,.showcase-link,.project-index a{transition:none}
}