/* Shared site contract. Load after page styles; new projects use these classes. */
:root{
  --layout-max:70rem;
  --layout-gutter:6rem;
  --font-heading:'Bricolage Grotesque',Arial,Helvetica,sans-serif;
  --font-body:'Inter',Arial,Helvetica,sans-serif;
  --size-page-title:clamp(2.25rem,4.5vw,4rem);
  --size-section-title:clamp(2rem,3vw,2.75rem);
  --size-subtitle:1.75rem;
  --size-small-title:1.25rem;
  --size-card-title:1.5rem;
  --size-body:1rem;
  --size-caption:.875rem;
  --size-lead:1.25rem;
  --color-heading:#1b1b1b;
  --color-body:#595951;
  --color-accent:#144E45;
}
/* One content frame for landing and every case study, including page chrome. */
.container,.case-width,.case-page .header-inner,.case-page .footer-inner,
.about-page .header-inner,.about-page .footer-inner,.about-page .about-content{
  width:min(var(--layout-max),calc(100% - var(--layout-gutter)));
  margin-inline:auto;
}
.header-inner,.case-page .header-inner,.about-page .header-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:24px;padding-block:16px;min-height:88px;
  font-family:var(--font-body);font-size:var(--size-caption);
}
.header-inner .identity{justify-self:start}
.header-inner nav,.case-page .header-inner nav,.about-page .header-inner nav{justify-self:center}
.header-inner .talk,.case-page .header-inner .talk,.about-page .header-inner .talk{justify-self:end;margin:0}
body{font-family:var(--font-body);font-size:var(--size-body);line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-heading)}
h1,.case-hero h1,.page-title{font-size:var(--size-page-title);line-height:1.08;letter-spacing:-.045em;font-weight:750}
.section-title,.about h2,.intro-opening h1,.capabilities>h2,.contact-card h2,
.case-page h2,.case-page .impact h2,.case-page .section-heading h2{
  font-size:var(--size-section-title);line-height:1.15;letter-spacing:-.04em;font-weight:700;
}
h3,.case-page h3,.case-page .demo-row h3,.subsection-title{
  font-size:var(--size-subtitle);line-height:1.2;letter-spacing:-.035em;font-weight:700;
}
.case-page h4,.small-title{font-size:var(--size-small-title);line-height:1.4;letter-spacing:-.025em;font-weight:650}
.note h2,.capability-name h3{font-size:var(--size-card-title);line-height:1.2;letter-spacing:-.035em}
p,.case-page p,.case-page li,.intro-opening p,.intro-story p,.capability-list p,
.note p,.bio,.project-info p,.case-page .principle-card p,.case-page .overview dd,
.case-page .metric span{font-family:var(--font-body);font-size:var(--size-body);line-height:1.6;color:var(--color-body)}
.subtitle{font-size:var(--size-lead);line-height:1.6;color:var(--color-body)}
.eyebrow,.case-page .eyebrow,.case-page .pain-title,.case-page figcaption,
.tags span,.header-inner,footer,.button,.case-page .overview dt{
  font-size:var(--size-caption);line-height:1.5;
}
.case-page .section-number,.capability-number{color:var(--color-accent)}
.case-page .metric strong{font-size:var(--size-section-title);line-height:1.1}
/* Inverse surface uses the same text hierarchy, with accessible white text. */
.deliverables h2,.deliverables h3,.deliverables h4,.case-page .deliverables p,
.case-page .deliverables li,.case-page .deliverables figcaption,
.case-page .deliverables .eyebrow,.deliverables .section-number{color:#fff}
/* Keep semantic accent callouts and colored sticky notes legible. */
.note p{color:var(--color-heading)}
.principles li{font-size:var(--size-body);line-height:1.5}
@media(max-width:1000px){:root{--layout-gutter:64px}}
@media(max-width:740px){
  :root{--layout-gutter:40px;--size-subtitle:1.5rem;--size-lead:1.125rem}
  .header-inner,.case-page .header-inner,.about-page .header-inner{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
  .header-inner nav,.case-page .header-inner nav,.about-page .header-inner nav{grid-row:2;grid-column:1/-1;justify-self:start;flex-wrap:wrap}
  .header-inner .talk,.case-page .header-inner .talk,.about-page .header-inner .talk{grid-row:1;grid-column:2;margin:0}
}

.case-hero{padding-top:100px}@media(max-width:1000px){.case-hero{padding-top:70px}}@media(max-width:740px){.case-hero{padding-top:48px}}

/* Persistent navigation shared by every page. */
:root{--header-offset:112px}
html{scroll-padding-top:var(--header-offset)}
.header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid #deddd7}
#work,#about,#bingodays,#sgb,#contact,.case-section,.deliverables{scroll-margin-top:24px}
@media(max-width:740px){:root{--header-offset:168px}}

/* Quiet link feedback: no hover underlines or added dark frames. */
a:hover,.header a:hover,footer a:hover,.footer-inner nav button:hover,
.project-open:hover,.project-navigation a:hover{text-decoration:none}
.header [aria-current],.case-page .header [aria-current],
.about-page .header [aria-current],footer [aria-current]{text-decoration:none;color:var(--color-accent)}
.header nav a,footer nav a,footer nav button,.project-navigation a,.button{
  transition:transform 180ms ease,color 180ms ease,background-color 180ms ease;
}
.header nav a:hover,footer nav a:hover,footer nav button:hover{
  color:var(--color-accent);transform:translateY(-2px);
}
.button:hover,.project-navigation a:hover{transform:translateY(-2px)}
.project{transition:transform 220ms ease,box-shadow 220ms ease}
.project:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000000c}
.identity:hover{text-decoration:none}
@media(prefers-reduced-motion:reduce){
  .header nav a:hover,footer nav a:hover,footer nav button:hover,
  .button:hover,.project-navigation a:hover,.project:hover{transform:none}
}

/* Pointer clicks stay clean; keyboard navigation retains a visible focus ring. */
.project:focus-within{outline:none}
.project-open:focus:not(:focus-visible){outline:none}
.project:has(.project-open:focus-visible){outline:3px solid var(--focus);outline-offset:5px}
.project-open:focus-visible{outline:3px solid var(--focus);outline-offset:-5px}

.header .talk{gap:8px}.mail-icon{display:block;flex-shrink:0}

/* Landing title emphasis; entrance motion uses independent translate, not tilt. */
.hero-title-line{display:block}
.hero-title-line .builder-word{color:var(--color-accent)}