/* Direction 1: shared site framing. Product demos keep their own design systems.
   Opt in with data-design-system="d1"; the saved D1 studio is independent. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
@font-face{font-family:Satoshi;src:url('/assets/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Satoshi;src:url('/assets/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:Doto;src:url('/assets/fonts/Doto-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}

body[data-design-system="d1"] {
  --d1-paper:#f3f2ee; --d1-ink:#22211f; --d1-muted:#63625d;
  --d1-blue:#1f3fd0; --d1-line:#d0cfc8; --d1-sage:#e8e9e2; --d1-radius:12px;
  --d1-sans:Satoshi,Arial,sans-serif; --d1-mono:'IBM Plex Mono',monospace;
  --direction-paper:var(--d1-paper); --direction-ink:var(--d1-ink);
  --direction-muted:var(--d1-muted); --direction-line:var(--d1-line);
  --direction-accent-blue:var(--d1-blue); --direction-pad:clamp(20px,4vw,64px);
  --bg:var(--d1-paper); --paper:var(--d1-paper); --canvas:var(--d1-paper);
  --text:var(--d1-ink); --ink:var(--d1-ink); --text-muted:var(--d1-muted);
  --text-dim:var(--d1-muted); --border:var(--d1-line); --line:var(--d1-line);
  --blue:var(--d1-blue); --accent-blue:var(--d1-blue); --accent-warm:var(--d1-blue);
  --font:var(--d1-sans); --font-body:var(--d1-sans); --font-serif:var(--d1-sans); --sans:var(--d1-sans);
  --serif:var(--d1-sans); --body:var(--d1-sans); --nature:var(--d1-sans); --mono:var(--d1-mono); --font-mono:var(--d1-mono);
  --aran-ink:var(--d1-ink); --aran-mist:var(--d1-muted); --aran-line:var(--d1-line);
  --aran-panel:var(--d1-sage); --aran-panel-solid:var(--d1-sage);
  background:var(--d1-paper); color:var(--d1-ink);
  font-family:var(--d1-sans); font-weight:500; -webkit-font-smoothing:antialiased;
}
body[data-design-system="d1"] ::selection { background:#c9d1ff; color:var(--d1-ink); }
body[data-design-system="d1"] :is(a,button,input,select,textarea,summary):focus-visible {
  outline:2px solid var(--d1-blue); outline-offset:5px;
}

/* Quiet navigation, with the same black wordmark and type as the studio. */
body[data-design-system="d1"] :is(.direction-nav,.personal-nav,.site-nav,.about-nav,.dc-nav,.library-nav) {
  background:linear-gradient(var(--d1-paper) 35%,#f3f2eeed 100%)!important;
  border-color:var(--d1-line)!important; border-inline:0; box-shadow:none!important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
body[data-design-system="d1"] :is(.direction-nav,.personal-nav,.site-nav,.about-nav,.dc-nav,.library-nav) a {
  font-family:var(--d1-sans)!important; font-weight:500; font-size:13px;
  letter-spacing:0; text-transform:none; text-shadow:none;
  text-underline-offset:5px; text-decoration-thickness:1px;
}
body[data-design-system="d1"] :is(.direction-nav,.personal-nav,.site-nav,.about-nav,.dc-nav,.library-nav) a:hover {
  color:var(--d1-blue); text-decoration:underline;
}
body[data-design-system="d1"] :is(.direction-brand__logo-base,.nav-logo img,.nav-logo-svg,.about-nav__brand img,.personal-nav>a>img,.dc-nav img) {
  filter:brightness(0)!important; opacity:1!important;
}
body[data-design-system="d1"] .direction-brand__logo-shine { display:none; }
body[data-design-system="d1"] .direction-brand { width:160px; }
body[data-design-system="d1"] :is(.personal-nav>a>img,.nav-logo img,.about-nav__brand img,.dc-nav img,.library-nav img,.site-name img) { width:160px!important; height:auto; }
body[data-design-system="d1"] > header:has(.site-name) nav a { font:500 13px/1.4 var(--d1-sans); text-transform:none; letter-spacing:0; color:var(--d1-ink); }
body[data-design-system="d1"] > header:has(.site-name) nav a:hover { color:var(--d1-blue); }
body[data-design-system="d1"] :is(.direction-nav__cta,.about-nav__cta) {
  background:transparent!important; box-shadow:none!important; border:0!important;
  color:var(--d1-ink)!important; transform:none!important;
}

/* Editorial typography, scoped away from interactive product interfaces. */
body[data-design-system="d1"][data-reading-system] :is(h1,h2,h3,h4),
body[data-design-system="d1"][data-reading-system] :is(h1,h2,h3,h4) :is(em,span,strong),
body[data-design-system="d1"] :is(.products-heading,.venture-copy,.library-header,.library-body,.library-next,.dc-hero,.dc-section-head,.dc-focus-copy,.dc-collection,.rec-case-title,.rec-case-caption,.rec-case-end,.te-heading,.te-section-head,.te-refine-copy,.dc-case-heading,.case-head,.case-section-head,.ps) :is(h1,h2,h3),
body[data-design-system="d1"] :is(.project__title,.close__title,.portfolio-hero-title,.profile-name,.section-title) {
  font-family:var(--d1-sans)!important; font-weight:700!important;
  font-style:normal!important; text-shadow:none!important;
}
body[data-design-system="d1"] :is(.ps,.header__intro,.ed-body,.hero-sub,.career-copy,.venture-pitch,.toc__name) {
  font-family:var(--d1-sans);
}
body.cv1-bio[data-design-system="d1"] :is(h1,.method-word,.contact-title,.pov-label strong) { font-family:var(--d1-sans); font-weight:700; }
body[data-design-system="d1"] .direction-proof { background:var(--d1-sage); border-color:var(--d1-line); }
body[data-design-system="d1"] .direction-proof strong { font-family:var(--d1-sans); font-weight:700; text-shadow:none; -webkit-text-stroke:0; color:var(--d1-ink); }
body[data-design-system="d1"] .direction-pass { border-radius:var(--d1-radius); border-color:var(--d1-line); box-shadow:0 12px 32px #22211f14; }
body[data-design-system="d1"] :is(.eyebrow,.products-eyebrow,.ps-kicker,.dc-kicker,.te-kicker,.rec-case-kicker,.case-eyebrow,.redo-kicker,.ed-label,.article-meta,.article-byline,.blog-list-meta,.note-meta,.post-meta,.byline,.toc__num,.toc__year,.project__eyebrow) {
  font-family:var(--d1-mono); font-weight:400; letter-spacing:.055em;
}
body[data-design-system="d1"] .d1-display.d1-display,
body[data-design-system="d1"][data-reading-system] .d1-display.d1-display {
  font-family:Doto,monospace!important; font-weight:800!important;
  font-variation-settings:'ROND' 100; font-size:clamp(48px,7vw,94px);
  line-height:1.13; letter-spacing:-.045em; text-wrap:balance;
}

/* Primary actions share one shape. Secondary actions read as links. */
body[data-design-system="d1"] :is(.venture-button--primary,.direction-button--dark,.contact-action,.close-ctas .btn--primary,.case-close a,.library-button,.header__contact,.close__cta,.redo-button--primary,.aran-button,.button-primary,.btn-primary,.wr-button,.download-button,.subscribe-form button,.newsletter-form button) {
  display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:48px; padding:16px 22px; border:1px solid var(--d1-blue)!important;
  border-radius:var(--d1-radius)!important; background:var(--d1-blue)!important;
  color:white!important; font:500 15px/1.3 var(--d1-sans)!important;
  letter-spacing:0; text-transform:none; text-decoration:none;
  box-shadow:0 6px 30px #7968b81a!important;
  transition:background .2s,transform .2s,box-shadow .2s;
}
body[data-design-system="d1"] :is(.venture-button--primary,.direction-button--dark,.contact-action,.close-ctas .btn--primary,.case-close a,.library-button,.header__contact,.close__cta,.redo-button--primary,.aran-button,.button-primary,.btn-primary,.wr-button,.download-button,.subscribe-form button,.newsletter-form button):hover {
  background:#1732b8!important; border-color:#1732b8!important;
  transform:translateY(-2px); box-shadow:0 10px 35px #7968b838!important;
}
body[data-design-system="d1"] .venture-button--primary::after { content:'↗'; font-size:20px; line-height:1; }
body[data-design-system="d1"] :is(.venture-button:not(.venture-button--primary),.direction-button--light,.close-ctas .btn--ghost,.redo-button--secondary,.action-link) {
  border:0!important; border-radius:0!important; background:transparent!important;
  color:var(--d1-ink)!important; padding:12px 0; box-shadow:none!important;
  font-family:var(--d1-sans); text-decoration:underline; text-underline-offset:5px;
}
body[data-design-system="d1"] :is(.venture-button:not(.venture-button--primary),.direction-button--light,.close-ctas .btn--ghost,.redo-button--secondary,.action-link):hover { color:var(--d1-blue)!important; transform:none; }
body[data-design-system="d1"] .venture-actions { align-items:center; flex-wrap:wrap; gap:12px 24px; }
body.cv1-bio[data-design-system="d1"] .hero-actions { gap:16px; }
body.cv1-bio[data-design-system="d1"] .hero-actions .action-link {
  display:inline-flex; align-items:center; justify-content:space-between; gap:35px;
  min-height:56px; padding:18px 23px; border:1px solid var(--d1-line)!important;
  border-radius:var(--d1-radius)!important; background:transparent!important;
  color:var(--d1-ink)!important; font:500 15px/1.3 var(--d1-sans);
  text-decoration:none; letter-spacing:0;
}
body.cv1-bio[data-design-system="d1"] .hero-actions .action-link--primary {
  background:var(--d1-blue)!important; color:#fff!important; border-color:var(--d1-blue)!important;
  box-shadow:0 6px 30px #7968b81a!important;
}
body.cv1-bio[data-design-system="d1"] .hero-actions .action-link:hover { border-color:var(--d1-blue)!important; color:var(--d1-blue)!important; }
body.cv1-bio[data-design-system="d1"] .hero-actions .action-link--primary:hover { background:#1732b8!important; color:#fff!important; }
body.cv1-bio[data-design-system="d1"] .hero-actions .action-link svg { width:22px; height:22px; flex:none; }

/* Rounded media belongs to the page framing, not to objects inside demos. */
body[data-design-system="d1"] :is(.venture-image,.about-work__image,.article-hero-inner,.blog-list-image,.library-body img,.case-cover,.te-hero,.portfolio-marquee-frame,.portfolio-wall__item,.project__media,.ps-capture,.wr-work-item) {
  border-radius:var(--d1-radius); overflow:hidden;
}
body[data-design-system="d1"] :is(.products-main,.dc-shell) { border-inline:0; }
body[data-design-system="d1"] :is(.venture,.products-footer,.dc-section,.dc-meta,.rec-case-summary,.case-section,.te-section) { border-color:var(--d1-line); }
body[data-design-system="d1"] :is(.library-next,.subscribe-section,.contact-panel) { background:var(--d1-sage); border-color:var(--d1-line); }
body[data-design-system="d1"] .products-heading { padding-block:clamp(60px,7vw,100px) clamp(48px,6vw,80px); }
body[data-design-system="d1"] .products-list .venture { padding-top:clamp(32px,4vw,56px); }
body[data-design-system="d1"] .products-list .venture + .venture { margin-top:clamp(56px,7vw,96px); }
body[data-design-system="d1"] .article-body { font-size:18px; line-height:1.7; }
body[data-design-system="d1"] .article-header h1 { font-size:clamp(38px,5vw,64px); line-height:1.08; }
body[data-design-system="d1"] main > .intro { font-size:18px; line-height:1.55; color:var(--d1-muted); }
body[data-design-system="d1"] :is(.article-hero>img,.post-image) { border-radius:var(--d1-radius); overflow:hidden; }
body[data-design-system="d1"] .article-meta { flex-wrap:wrap; }
body[data-design-system="d1"] .article-hero-inner { mask-image:none; -webkit-mask-image:none; }
body[data-design-system="d1"] #aran-consent-settings { border:1px solid #bcbcb5; border-radius:20px; background:var(--d1-paper); color:var(--d1-ink); font:500 11px/1.4 var(--d1-sans); }
body[data-design-system="d1"] .glossary-link::after { background:var(--d1-paper); color:var(--d1-ink); border:1px solid var(--d1-line); border-radius:var(--d1-radius); box-shadow:0 6px 24px #22211f18; }
body[data-design-system="d1"] .glossary-link:focus-visible::after { opacity:1; visibility:visible; }
body[data-design-system="d1"] :is(.article-body,.library-body) h2 { margin-top:2em; line-height:1.15; }
body[data-design-system="d1"] :is(.newsletter-form,.subscribe-form) :is(input[type=email],button) { border-radius:var(--d1-radius); }
body[data-design-system="d1"] .scene-close { background:var(--d1-sage); color:var(--d1-ink); border-color:var(--d1-line); }
body[data-design-system="d1"] :is(.close-name,.close-line) { color:var(--d1-ink); }
body[data-design-system="d1"] .close-name { font-family:var(--d1-sans); line-height:1; }
body[data-design-system="d1"] .close-name em { color:var(--d1-blue); }
body[data-design-system="d1"] .scene-close::after {
  box-shadow:none; mask-image:radial-gradient(circle,#000 2.5px,transparent 3px);
  mask-size:12px 12px; -webkit-mask-image:radial-gradient(circle,#000 2.5px,transparent 3px); -webkit-mask-size:12px 12px;
}
body[data-design-system="d1"] .dc-film-nav button { border-radius:var(--d1-radius); font-family:var(--d1-sans); }
body[data-design-system="d1"] .dc-film-nav button[aria-pressed=true] { background:var(--d1-blue); border-color:var(--d1-blue); }

@media(max-width:600px) {
  body[data-design-system="d1"] .direction-nav { flex-wrap:wrap; gap:8px 20px; }
  body[data-design-system="d1"] .direction-nav__links { width:100%; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; }
  body[data-design-system="d1"] .direction-nav__links > a { display:inline-flex!important; font-size:12px!important; min-height:36px; align-items:center; }
  body[data-design-system="d1"] .direction-nav__links .direction-nav__cta { padding:8px 0; }
  body[data-design-system="d1"] .direction-brand { width:120px; flex-shrink:0; }
  body[data-design-system="d1"] :is(.personal-nav>a>img,.nav-logo img,.about-nav__brand img,.dc-nav img,.library-nav img,.site-name img) { width:120px!important; }
  body[data-design-system="d1"] > header:has(.site-name) { flex-wrap:wrap; gap:16px; }
  body[data-design-system="d1"] > header:has(.site-name) nav { flex-wrap:wrap; gap:16px; }
  body[data-design-system="d1"] > header:has(.site-name) nav a { font-size:12px; }
  body[data-design-system="d1"] .d1-display { font-size:clamp(40px,10.5vw,62px); }
  body[data-design-system="d1"] .article-body { font-size:17px; }
  /* Keep glossary definitions inside the viewport, including links near an edge. */
  body[data-design-system="d1"] .glossary-link::after {
    position:fixed; top:auto; bottom:24px; left:24px; right:24px;
    width:auto; max-width:none; transform:none; white-space:normal; z-index:120;
  }
  body[data-design-system="d1"] .glossary-link::before { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  html:has(body[data-design-system="d1"]) { scroll-behavior:auto; }
  body[data-design-system="d1"] :is(a,button,img) { transition:none!important; }
}
