/* Shared interface: loaded after page styles. */
:root { --hero-display: clamp(36px, 5vw, 68px); --site-accent: #aaa5fa; --site-text: #f7f7f5; --site-muted: #a1a1aa; --site-line: #29292e; }
html { scroll-padding-top: 88px; }
body { background: #080808; font-family: Inter, sans-serif; }
.site-nav, .site-nav * { box-sizing: border-box; }
.site-nav { position: sticky; top: 0; z-index: 50; width: 100%; background: rgba(8,8,8,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--site-line); font-family: Inter, sans-serif; }
.site-nav .site-nav-inner { width: min(1232px, calc(100% - 48px)); height: 64px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-nav a { text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--site-muted); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--site-text); }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--site-accent); text-underline-offset: 8px; }
.site-brand { display: flex; flex-shrink: 0; }
.site-brand img { display: block; width: 100px; height: auto; max-width: none; }
.site-nav-links, .site-nav-actions { display: flex; align-items: center; gap: 28px; }
.site-nav-actions { gap: 20px; }
.site-button, .newsletter-cta { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: 10px; font-family: Inter,sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; text-decoration: none; box-shadow: none; transition: background .18s, border-color .18s; }
.site-button-primary, .newsletter-cta, .site-nav .site-button-primary { background: var(--site-accent); color: #11111a; }
.site-button-primary:hover, .newsletter-cta:hover, .site-nav .site-button-primary:hover { background: #c0baff; color: #11111a; transform: none; }
.site-button-secondary { background: transparent; border-color: #45454e; color: var(--site-text); }
.site-button-secondary:hover { background: #1b1b20; border-color: #7c778e; }
.site-nav .site-button { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.site-menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: var(--site-text); cursor: pointer; }
.site-menu-button svg { display: block; }
.site-mobile-menu[hidden] { display: none; }
.site-mobile-menu { border-top: 1px solid var(--site-line); padding: 12px 24px 20px; }
.site-mobile-menu a { display: block; padding: 12px 0; }
:where(a,button,input,select,textarea):focus-visible { outline: 3px solid var(--site-accent); outline-offset: 4px; }
.site-hero { padding-top: 48px; padding-bottom: 48px; }
.site-hero h1, .site-document h1, .site-article h1 { font-family: Inter,sans-serif; font-size: var(--hero-display); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; margin-top: 18px; margin-bottom: 20px; }
.site-hero p:not([class*="uppercase"]):not(.section-eyebrow) { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.site-hero p[class*="uppercase"] { font-size: 12px; margin-bottom: 18px; }
.site-document { width: min(1232px,calc(100% - 48px)); padding: 48px 0 64px; }
.site-document .lead { font-family: Inter,sans-serif; font-size: 18px; line-height: 1.65; max-width: 800px; margin-bottom: 32px; }
.site-document .section-copy, .site-document .item-copy, .site-article .article, .site-article .dek { font-family: Inter,sans-serif; font-size: 17px; line-height: 1.75; }
.site-document .section { padding-block: 36px; }
.site-article main { padding-top: 48px; }
.editorial-studio h2, .products-heading h2 { font-family: Inter,sans-serif; font-weight: 700; font-size: clamp(30px,3vw,40px); line-height: 1.12; letter-spacing: -.04em; }
@media (max-width: 900px) {
 .site-nav-links, .site-nav .site-contact { display: none; }
 .site-menu-button { display: inline-flex; align-items: center; justify-content: center; }
 .site-nav-actions { gap: 12px; }
}
@media (min-width: 901px) { .site-mobile-menu { display: none; } }
@media (max-width: 640px) {
 .site-nav .site-nav-inner { width: calc(100% - 40px); gap: 12px; }
 .site-nav .site-button { padding-inline: 14px; }
 .site-hero { padding: 32px 20px 36px; }
 .site-hero h1, .site-document h1, .site-article h1 { font-size: 36px; }
 .site-document { width: calc(100% - 40px); padding-block: 32px 48px; }
 .site-document .lead { font-size: 16px; }
 .site-document .section-copy, .site-article .article, .site-article .dek { font-size: 16px; }
 .site-article main { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .site-button { transition: none; } }

/* Align full-width content with the shared header; reading columns stay narrower. */
.max-w-7xl { max-width: 1232px; }
.site-article .subscribe-panel a.site-button { background: var(--site-accent); color: #11111a; border-radius: 10px; padding: 12px 24px; font-size: 15px; }
.site-article .subscribe-panel a.site-button:hover { background: #c0baff; }

.site-section { padding-block: 64px; }
section.max-w-6xl { max-width: 1280px; }
.site-document .section-copy, .site-document .item-copy { max-width: 800px; }
@media (max-width: 640px) { .site-section { padding-block: 48px; } }

.site-hero .consulting-details p { margin-bottom: 0; font-size: 14px; }
.site-hero .consulting-details p[class*="uppercase"] { font-size: 11px; margin-bottom: 4px; }

/* One heading treatment across the site: white with solid lavender emphasis. */
.text-gradient, .hero-gradient, .editorial-hero h1 em {
 background: none;
 background-clip: border-box;
 -webkit-background-clip: border-box;
 -webkit-text-fill-color: var(--site-accent);
 color: var(--site-accent);
}
.site-hero h1 { color: var(--site-text); }
.site-hero h1 > span:not(.text-gradient):not(.hero-gradient) { color: var(--site-text); }
.projects-page .filter-btn {
 min-height: 44px; padding: 10px 18px; border-radius: 10px;
 font-family: Inter,sans-serif; font-size: 14px; line-height: 1.5;
 border: 1px solid #45454e; color: var(--site-muted);
}
.projects-page .filter-btn.active { background: var(--site-accent); border-color: var(--site-accent); color: #11111a; }
.projects-page .filter-btn:hover:not(.active) { background: #1b1b20; color: var(--site-text); }
.projects-page .tag { border-radius: 6px; color: var(--site-accent); background: #aaa5fa12; border-color: #aaa5fa33; }
.projects-page .bento-card:hover .card-cta { color: var(--site-accent); }
.projects-page .bento-card:hover .card-icon { background: #aaa5fa12; border-color: #aaa5fa33; }
.projects-page .bento-card:hover .card-icon i { color: var(--site-accent); }
.projects-page .category-divider span { color: var(--site-muted); }
.projects-page .category-divider::after { background: var(--site-line); }
@media (max-width: 640px) { .projects-page .filter-btn { padding-inline: 14px; } }

/* Shared hero finish: restrained light, fine structure, consistent typography. */
:is(.editorial-hero, .site-hero, .about-hero, .methodology-hero) {
 position: relative;
 isolation: isolate;
}
:is(.editorial-hero, .site-hero, .about-hero, .methodology-hero)::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 background:
   radial-gradient(ellipse 44% 68% at 50% 34%, rgba(145,126,222,.10), transparent 80%),
   linear-gradient(rgba(176,162,220,.035) 1px, transparent 1px),
   linear-gradient(90deg, rgba(176,162,220,.035) 1px, transparent 1px);
 background-size: auto, 56px 56px, 56px 56px;
 mask-image: radial-gradient(ellipse 64% 85% at 50% 30%, #000 25%, transparent 90%);
}
:is(.editorial-hero, .site-hero, .about-hero, .methodology-hero)::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 25%;
 width: 50%;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(182,168,233,.20), transparent);
 pointer-events: none;
}
body :is(.site-hero, .about-hero, .methodology-hero) h1 {
 font-weight: 600;
 letter-spacing: -.045em;
 color: #f3f1f8;
 text-shadow: 0 2px 22px rgba(194,174,255,.055);
}
:is(.site-hero, .about-hero, .methodology-hero, .editorial-hero) h1 :is(.text-gradient, .hero-gradient, em),
.about-hero h1 span, .methodology-hero h1 span {
 background: linear-gradient(115deg, #e3ddfa 0%, #bcb0ef 48%, #9384d3 100%);
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 color: #bcb0ef;
 text-shadow: none;
}
:is(.about-hero, .methodology-hero) .eyebrow,
.editorial-hero .editorial-eyebrow,
.site-hero p[class*="uppercase"] {
 color: #b0a6cd;
 letter-spacing: .18em;
}
/* Avoid stacking older page-specific glows beneath the common treatment. */
.glow-bg { display: none; }
@media (max-width: 640px) {
 :is(.editorial-hero, .site-hero, .about-hero, .methodology-hero)::before {
  background-size: auto, 40px 40px, 40px 40px;
 }
}

/* Homepage uses the same display typography as the inner pages. */
body .editorial-hero h1 {
 font-family: Inter, sans-serif;
 font-size: var(--hero-display);
 font-weight: 600;
 line-height: 1.08;
 letter-spacing: -.045em;
}
body .editorial-hero h1 em { font-style: normal; font-weight: inherit; }
@media (max-width: 640px) { body .editorial-hero h1 { font-size: 36px; } }
/* Keep the gradient mapped to the words, not the full hero container. */
body .editorial-hero h1 em {
 width: fit-content;
 max-width: 100%;
 margin-inline: auto;
}

/* Repoint Tailwind's `accent` utilities at the site lavender (--site-accent).
   tailwind.css is a checked-in build with the old indigo (#818CF8) baked in as
   literal rgb(), and there is no build tooling in this folder. tailwind.config.js
   now carries the right value, so DELETE THIS BLOCK once tailwind.css is
   regenerated. Selectors mirror the compiled ones exactly; site.css loads after
   tailwind.css on every page, so equal specificity resolves here. */
.border-accent\/10 { border-color: rgba(170,165,250,.1); }
.border-accent\/20 { border-color: rgba(170,165,250,.2); }
.bg-accent { background-color: rgb(170 165 250/var(--tw-bg-opacity,1)); }
.bg-accent\/10 { background-color: rgba(170,165,250,.1); }
.bg-accent\/5 { background-color: rgba(170,165,250,.05); }
.bg-accent\/\[0\.02\] { background-color: rgba(170,165,250,.02); }
.bg-accent\/\[0\.03\] { background-color: rgba(170,165,250,.03); }
.text-accent { color: rgb(170 165 250/var(--tw-text-opacity,1)); }
.text-accent\/30 { color: rgba(170,165,250,.3); }
.text-accent\/60 { color: rgba(170,165,250,.6); }
.selection\:bg-accent ::-moz-selection,
.selection\:bg-accent::-moz-selection { background-color: rgb(170 165 250/var(--tw-bg-opacity,1)); }
.selection\:bg-accent ::selection,
.selection\:bg-accent::selection { background-color: rgb(170 165 250/var(--tw-bg-opacity,1)); }
.group:hover .group-hover\:border-accent\/30 { border-color: rgba(170,165,250,.3); }
.group:hover .group-hover\:bg-accent\/10 { background-color: rgba(170,165,250,.1); }
.group:hover .group-hover\:text-accent { color: rgb(170 165 250/var(--tw-text-opacity,1)); }
.group:hover .group-hover\:text-accent\/60 { color: rgba(170,165,250,.6); }

/* One eyebrow treatment sitewide (matches .editorial-eyebrow on the homepage). */
.section-eyebrow {
 margin: 0 0 14px;
 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 font-size: 13px; font-weight: 500; line-height: 1.5;
 letter-spacing: .2em; text-transform: uppercase;
 color: #b0a6cd;
}
:is(.about-hero, .methodology-hero) .eyebrow,
.editorial-hero .editorial-eyebrow,
.site-hero .section-eyebrow,
.site-hero p[class*="uppercase"] { font-size: 13px; letter-spacing: .2em; }

/* One card treatment: the editorial radius and hairline, on every bento card. */
.bento-card { border-radius: 14px; background: #0a0a0a; border-color: var(--site-line); }
.bento-card:hover { border-color: #7c778e; box-shadow: none; transform: none; }

/* Paper-style artwork lands around 18:1 against the page - brighter than the
   headline itself. Rest it under that, full strength on hover. Any element
   tagged data-art-tone gets this (featured cover, product showcase, project
   cards); the tone value comes from scripts/cover-tone.py. */
[data-art-tone] img { transition: filter .2s, transform .5s ease; } /* transform: projects cards zoom on hover */
[data-art-tone="light"] img { filter: brightness(.85); }
/* Hover lifts, it does not release: a flat white UI at full strength reads as a
   flash against the page, so the rest/hover gap stays small. */
[data-art-tone="light"]:hover img,
[data-art-tone="light"]:focus-visible img,
a:hover [data-art-tone="light"] img { filter: brightness(.92); }
@media (prefers-reduced-motion: reduce) { [data-art-tone] img { transition: none; } }