/* Shared visual system. Loaded after page styles so every portfolio surface uses
   the same typography, with existing layouts and product screenshots retained. */
:root {
  --ink:#100f18; --plum:#2e0f38; --sage:#b9c6ac; --violet:#8351a8;
  --gold:#C5A253; --pink:#d2a6b8; --stone:#e8e3db;
  --bg:var(--ink); --text:var(--stone); --muted:#c9c3ce;
  --accent:var(--gold); --line:#b8a2d847; --case-body:var(--stone);
  --display:'Barlow Semi Condensed','Arial Narrow',sans-serif;
  --body:'Aleo',Georgia,serif; --hand:'Lobster',cursive;
}
body {font-family:var(--body);font-size:16px;line-height:1.1875;background:var(--ink)}
h1,h2,h3,h4,.serif,.wordmark,.proof strong,.proof strong span,.framework-index {
  font-family:var(--display);font-style:normal;letter-spacing:-.02em;
}
h1,h2 {font-weight:600}
.serif {font-weight:inherit}
header {background:var(--plum);border-bottom-color:var(--line)}
nav,.eyebrow,.section-kicker,.case-contents,.project-meta,.tags,.project-button,.back-link {font-family:var(--display)}
nav {font-size:16px}
p {line-height:1.45}
.case-section-body>p,.case-section-body li,.about-body p,.principles p,.framework-grid p,.credit-grid p,.connect-intro p,.connect-thanks p {
  font-size:16px;line-height:1.45;
}
.case-page {--case-body:var(--stone)}
.case-page h1 {letter-spacing:-.02em}
.case-page h2,.about h2,.contact h2 {letter-spacing:-.015em}
.case-page h1 .serif {color:var(--sage)}
.case-media:not(.media-diagram):not(.media-research),.connect-panel,.agents-card-art {background:var(--plum)}
.connect-panel input:not([type=hidden]),.connect-panel textarea {background:var(--ink)}
.project-ai,.small-project {background:#1e1028;box-shadow:none}
.ai-art,.platform-art,.zinnia-art,.agentic-card-art {background:var(--plum)}
.proof {background:transparent;border:1px solid #b8a2d87a;border-radius:38px;padding:36px 30px;margin-top:32px;margin-bottom:30px;box-shadow:none}
.proof strong,.proof strong span {font-family:'Lobster Two','Lobster',cursive;font-size:clamp(30px,3vw,44px);font-style:normal;font-weight:400;letter-spacing:0;color:var(--pink)}
.proof p {font-size:14px;line-height:19px;color:var(--stone)}
.hero {padding-top:54px;padding-bottom:8px}
.hero-intro {grid-template-columns:minmax(0,1fr) minmax(210px,29%);align-items:center;gap:7%;margin-top:18px;margin-bottom:26px}
.hero-copy {min-width:0}
.hero-copy #headline {font-family:var(--display);font-size:clamp(68px,8vw,120px);line-height:.95;letter-spacing:-.025em;margin:0 0 25px;animation:none}
.hero-greeting {display:block;font-family:var(--body);font-size:16px;line-height:19px;font-weight:400;letter-spacing:0;margin-bottom:18px}
.hero-action {display:block}
.hero-verb {display:block;font-family:'Lobster Two','Lobster',cursive;font-weight:400;letter-spacing:0;text-transform:lowercase;line-height:1.15;color:var(--gold);transition:opacity 180ms ease,transform 180ms ease;min-height:1em}
.hero-verb.is-changing {opacity:0;transform:translateY(-.08em)}
.hero-things {display:block;color:var(--stone)}
@supports (-webkit-text-stroke:1px white) {
  .hero-things {color:transparent;-webkit-text-stroke:1.2px #b8a2d8}
}
body:not(.agents-page) .hero-copy>.hero-support {font-family:var(--body);font-size:16px;line-height:19px;color:var(--stone);max-width:490px;margin:0}
body:not(.agents-page) .hero-copy>.hero-support::after {content:none}
.hero-motion-toggle {border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);padding:8px 0;font-family:var(--display);font-size:14px;margin-top:12px;cursor:pointer;min-height:44px}
.hero-motion-toggle[hidden] {display:none}
.hero-portrait {overflow:visible;isolation:isolate;max-width:320px}
.hero-portrait::after {content:'';position:absolute;inset:-7px;pointer-events:none;border:1px solid var(--gold);border-radius:48% 52% 45% 55% / 49% 44% 56% 51%;transform:rotate(-5deg)}
.hero-portrait::before {content:'';position:absolute;inset:-11px -4px;border:1px dashed var(--gold);border-radius:52% 48% 53% 47% / 47% 55% 45% 53%;transform:rotate(6deg);pointer-events:none}
.hero-portrait img {border-radius:50%;background:var(--plum)}
.hero-portrait .portrait-playful {border-radius:50%}
.fun-facts>h3,.about-facts .fun-facts>h3 {font-family:var(--hand);font-style:normal;font-size:25px;font-weight:400;letter-spacing:0;color:var(--pink)}
body:not(.agents-page) article.project .project-copy>p,body:not(.agents-page) article.project .small-copy>p {font-size:16px!important;line-height:1.45}
.project p {max-width:100%}
.project-button {font-size:16px;min-height:48px}
.contact {background:#21102a}
@media(max-width:1000px) {
  .hero-copy #headline {font-size:clamp(60px,8.5vw,88px)}
}
@media(max-width:700px) {
  .hero {padding-top:34px}
  .hero-intro {grid-template-columns:1fr;gap:26px}
  .hero-copy #headline {font-size:clamp(54px,13vw,90px)}
  .hero-portrait {max-width:210px;justify-self:center;margin:5px 0 10px}
  .proof {border-radius:26px;padding:25px 22px}
  .hero-greeting {font-size:16px}
  header {flex-wrap:wrap;gap:18px}
  header nav {flex-wrap:wrap;gap:12px 20px}
  .hero-location {display:none}
}
@media(forced-colors:active) {
 .hero-things {color:CanvasText;-webkit-text-stroke:0}
}
@media(prefers-reduced-motion:reduce) {
 .hero-verb {transition:none;transform:none}
}
/* The Figma header is a quiet plum band. */
header::before {content:none}
footer {background:var(--plum)}
footer::before {content:none}

/* Project card titles share the display face while outcomes retain body type. */
body:not(.agents-page) #work article.project p.project-summary {
  font-family:var(--display);
  font-size:20px!important;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--pink);
}

/* A loose double frame echoes the portrait without moving or cropping cards. */
#work .project::before,
#work .project::after {
  content:'';
  position:absolute;
  z-index:11;
  pointer-events:none;
  border:1px solid var(--gold);
  opacity:0;
  transition:opacity .2s ease;
}
#work .project::before {
  inset:5px 7px 7px 5px;
  border-radius:22px 30px 20px 27px / 27px 20px 29px 22px;
  transform:rotate(-.3deg);
}
#work .project::after {
  inset:10px 5px 5px 10px;
  border-style:dashed;
  border-radius:29px 20px 27px 21px / 20px 29px 21px 27px;
  transform:rotate(.3deg);
}
#work .project:focus-within {
  outline:none;
  border-color:var(--gold);
}
#work .project:focus-within::before,
#work .project:focus-within::after {opacity:1}
@media(hover:hover) {
  #work .project:hover {outline-color:transparent;border-color:var(--gold)}
  #work .project:hover::before,
  #work .project:hover::after {opacity:1}
}

.work>.section-heading>.eyebrow {
  font-family:var(--display);
  font-size:25px;
  font-weight:500;
  font-style:normal;
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--pink);
}

/* User-supplied presentation retains its complete composition and background. */
.hero-intro {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4%;align-items:center;margin-bottom:30px}
.hero-showcase {margin:0;min-width:0}
.hero-presentation {display:block}
.hero-presentation img {display:block;width:100%;height:auto;aspect-ratio:1920/1500;object-fit:contain}
@media(min-width:701px) and (max-width:1000px) {
 .hero-copy #headline {font-size:clamp(54px,7.2vw,76px)}
}
@media(max-width:700px) {
 .hero-intro {grid-template-columns:minmax(0,1fr);gap:28px}
 .hero-showcase {width:100%;max-width:620px;justify-self:center}
}