/* Authoritative audited components. See DESIGN.md for ownership and tokens. */
:root {
  --surface-paper: #e4e1d6;
  --journey-surface: #d8d5c9;
  --journey-card: #e4e1d6;
  --surface-ink: #193b35;
  --surface-muted: #405a50;
  --surface-secondary: #34554a;
  --surface-border: #bdc8b9;
  --content-width: 1120px;
  --panel-radius: 16px;
  --space-small: 14px;
  --space-panel: 20px;
  --touch-size: 44px;
  --venn-tech: #2459a9;
  --venn-business: #a42a69;
  --venn-design: #166957;
}

/* Story content stays readable; only position responds to the scroll cue. */
.story { position:relative; height:135svh; background:var(--journey-surface); color:var(--journey-ink); }
.story-stage { position:sticky; top:68px; height:calc(100svh - 68px); min-height:0; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-content:center; align-items:center; gap:32px; padding:50px max(40px,calc((100vw - var(--content-width))/2)); overflow:visible; }
.story-stage>.section-index { position:static; grid-column:1/-1; margin:0 0 20px; }
.story-lines { max-width:none; }
.story-line { font-family:var(--sc-font-display); font-weight:650; font-size:clamp(2rem,3.5vw,3.5rem); line-height:1.12; letter-spacing:-.035em; margin:0 0 22px; color:var(--journey-ink); opacity:1; transform:translateY(calc((1 - var(--cue,1))*12px)); }
.story-line.accent { color:var(--journey-accent); }
.story-line.supporting { font-family:var(--sc-font-serif); font-weight:400; font-size:clamp(1rem,1.6vw,1.4rem); line-height:1.6; letter-spacing:0; max-width:45ch; color:var(--journey-muted); }
.claim-receipt { position:relative; inset:auto; align-self:center; width:auto; padding:24px; border:0; border-radius:var(--panel-radius); background:var(--journey-card); color:var(--journey-card-ink); opacity:1; transform:translateY(calc((1 - var(--cue,1))*12px)); box-shadow:none; }
.claim-receipt strong { display:block; color:inherit; }
.product-venn { display:block; width:100%; max-width:none; margin:16px auto 0; overflow:visible; color:var(--journey-card-ink); }
.product-venn .venn-tech { color:var(--venn-tech); }
.product-venn .venn-business { color:var(--venn-business); }
.product-venn .venn-design { color:var(--venn-design); }
.product-venn circle { stroke:currentColor; stroke-width:2; fill:currentColor; fill-opacity:.12; }
.product-venn text { fill:currentColor; font:700 18px var(--sc-font-text); }
.product-venn .venn-me { font-family:var(--sc-font-serif); font-size:23px; font-weight:400; font-style:italic; }
.product-venn path { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.product-venn .intersection { fill:currentColor; fill-opacity:1; stroke:none; }

.skill-mark>span { display:inline!important; font-size:13px!important; }
.wordmark small { font-size:12px; }
.achievement-row article { background:var(--surface-paper); color:var(--surface-ink); }
.achievement-row article.primary-win { background:var(--surface-ink); color:var(--surface-paper); }
.achievement-row strong,.achievement-row span,.achievement-row .primary-win span { color:inherit; }
.achievement-row strong i { opacity:1; }

/* Every website gets the entire content width and an explicit preview viewport. */
.build-disclosure .project-preview { grid-column:1/-1; width:100%; min-width:0; height:auto; border:1px solid var(--surface-border); border-radius:12px; background:var(--surface-paper); overflow:hidden; display:block; }
.project-preview-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 20px; padding:8px 16px; border-bottom:1px solid var(--surface-border); font-size:14px; }
.project-preview-toolbar>div { display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; }
.project-preview-toolbar a,.project-preview-toolbar button { display:inline-flex; align-items:center; gap:6px; min-height:var(--touch-size); color:var(--surface-ink); font-size:14px; font-weight:700; text-underline-offset:4px; }
.project-preview-toolbar button { padding:0; border:0; background:transparent; font-family:inherit; text-decoration:underline; cursor:pointer; }
.project-preview iframe { display:block; width:100%; height:620px; min-height:620px; border:0; background:#fff; }
.project-preview iframe[hidden] { display:none; }

/* Evidence uses one shared frame instead of independent border/spacing overrides. */
.evidence-panel { width:min(var(--content-width),calc(100% - 80px)); margin:0 auto 28px; border:1px solid var(--journey-line); border-radius:var(--panel-radius); background:transparent; box-shadow:none; overflow:hidden; color:var(--journey-ink); }
.endorsement.evidence-panel { display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; align-items:center; padding:14px; }
.endorsement-preview { display:block; line-height:0; }
.endorsement-preview img { display:block; width:100%; height:auto; aspect-ratio:640/1136; border-radius:8px; }
.endorsement-copy h3 { margin:0 0 14px; font-size:2.5rem; letter-spacing:-.03em; line-height:1.1; }
.endorsement-copy p { max-width:52ch; line-height:1.65; color:var(--journey-muted); }
.endorsement-copy a { margin-top:4px; color:inherit; }
.resume-section { padding:12px 0 24px; }
.resume-proof.evidence-panel { display:grid; grid-template-columns:minmax(0,1fr) 150px; min-height:0; align-items:center; padding:14px; gap:20px; }
.resume-proof h3 { margin:0; font-family:var(--sc-font-display); font-size:clamp(2.5rem,4vw,4rem); line-height:1.1; }
.resume-preview { display:block; line-height:0; }
.resume-preview img { display:block; width:100%; height:auto; aspect-ratio:1075/1521; border:1px solid var(--surface-border); border-radius:4px; }
.resume-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
.resume-actions a { color:inherit; }

/* Expanded projects share one reading order, spacing rhythm and action row. */
.build-disclosure .product-case { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:28px 32px; padding:28px; margin:0 0 20px; min-height:0; align-items:start; }
.build-disclosure .case-copy { min-width:0; max-width:none; order:0; }
.build-disclosure .case-copy h3 { margin:0 0 16px; font-size:1.75rem; line-height:1.2; letter-spacing:-.025em; }
.build-disclosure .case-copy>p { margin:0 0 16px; max-width:70ch; font:inherit; line-height:1.65; color:var(--surface-secondary); }
.build-disclosure .case-proof+p { margin-top:16px; }
.build-disclosure .case-proof { max-width:720px; margin:20px 0 0; padding-top:18px; gap:8px 12px; }
.build-disclosure .case-proof strong { font-size:1.8rem; line-height:1.15; }
.build-disclosure .case-proof span { font-size:13px; line-height:1.5; }
.project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; margin-top:18px; }
.project-actions .case-button,.project-actions>a { display:inline-flex; align-items:center; min-height:var(--touch-size); margin:0; gap:6px; color:var(--surface-ink); font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.website-project>.case-copy { grid-column:1/-1; }
.project-image { display:block; width:100%; min-width:0; padding:0; border:0; border-radius:8px; background:transparent; line-height:0; color:inherit; cursor:zoom-in; overflow:hidden; }
.project-image img { display:block; width:100%; height:auto; }
.project-image:hover { filter:brightness(.97); }
.build-disclosure .gym-media { min-width:0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:14px; padding:16px; min-height:0; align-items:start; border-radius:12px; box-shadow:none; }
.build-disclosure .gym-teaser-shell { width:100%; margin:0; border-radius:8px; box-shadow:none; align-self:start; }
.build-disclosure .gym-teaser { width:100%; height:auto; max-height:360px; object-fit:contain; }
.build-disclosure .gym-teaser-shell figcaption,.build-disclosure .gym-stills figcaption { padding:10px 12px; font-size:13px; }
.build-disclosure .gym-stills { grid-template-columns:minmax(0,1fr); align-content:start; gap:14px; }
.build-disclosure .gym-stills img { height:auto; aspect-ratio:16/9; object-fit:contain; }
.build-disclosure .satvik-stage.app-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; margin:0; padding:0; height:auto!important; min-height:0!important; order:0; background:transparent; overflow:visible; box-shadow:none; }
.build-disclosure .satvik-stage.app-gallery img { position:static!important; width:100%!important; height:auto!important; aspect-ratio:9/16; max-height:none!important; flex:none; transform:none!important; border-radius:8px; object-fit:contain; box-shadow:none; }
#campus-bus { scroll-margin-top:90px; }
.build-disclosure .bustrack { grid-template-columns:minmax(0,1fr) 280px; align-items:start; }
.bustrack-poster { width:280px; justify-self:end; }
.bustrack-poster img { aspect-ratio:4/5; }
.bustrack-proof { margin:24px 0 0; padding:16px 12px 20px; border:1px solid var(--surface-border); border-radius:12px; background:#fff; }
.bustrack-proof figcaption { padding:0 8px 8px; font-weight:700; color:var(--surface-ink); }
.project-image-dialog { width:min(1040px,94vw); max-height:92svh; padding:0; border:1px solid var(--surface-border); border-radius:12px; background:var(--surface-paper); color:var(--surface-ink); overflow:hidden; }
.project-image-dialog::backdrop { background:#000b; }
.project-image-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; border-bottom:1px solid var(--surface-border); }
.project-image-dialog>header strong { font-size:16px; }
.project-image-dialog>header>div { display:flex; gap:12px; }
.project-image-dialog button { min-height:var(--touch-size); min-width:var(--touch-size); padding:0 8px; border:0; background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.project-image-canvas { padding:16px; overflow:auto; max-height:calc(92svh - 80px); }
.project-image-canvas img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(92svh - 112px); margin:auto; object-fit:contain; }
.project-image-dialog[data-zoomed=true] .project-image-canvas img { max-width:none; max-height:none; margin:0; }
@media(max-width:1000px) {
  .build-disclosure .product-case,.build-disclosure .bustrack { grid-template-columns:minmax(0,1fr); }
  .bustrack-poster { justify-self:center; }
}
@media(max-width:760px) {
  .build-disclosure .product-case,.build-disclosure .bustrack { grid-template-columns:minmax(0,1fr); padding:18px; gap:24px; }
  .build-disclosure .case-copy h3 { font-size:1.5rem; }
  .build-disclosure .case-proof { grid-template-columns:auto minmax(0,1fr); }
  .build-disclosure .gym-media { grid-template-columns:minmax(0,1fr); padding:12px; gap:14px; }
  .build-disclosure .gym-teaser-shell { max-width:190px; justify-self:center; }
  .build-disclosure .gym-stills { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .build-disclosure .gym-teaser-shell figcaption,.build-disclosure .gym-stills figcaption { padding:8px; font-size:12px; }
  .build-disclosure .satvik-stage.app-gallery { gap:8px; }
  .bustrack-poster { width:min(280px,100%); justify-self:center; }
  .project-preview-toolbar { padding:8px 12px; }
  .project-preview iframe { height:600px; min-height:600px; }
  .project-image-dialog>header { align-items:start; gap:8px; padding:10px 12px; }
  .project-image-dialog>header strong { font-size:14px; }
  .project-image-canvas { padding:10px; }
}

/* Quiet text actions with real touch areas, including keyboard ribbon control. */
.product-case .case-button, .project-links a, .deck-card header a, .endorsement-copy a, .resume-actions a, .future>footer>a, .ribbon-toggle { display:inline-flex; align-items:center; min-height:var(--touch-size); min-width:var(--touch-size); font-weight:700; text-underline-offset:4px; }
.ribbon-controls { width:min(var(--content-width),calc(100% - 80px)); margin:0 auto 8px; display:flex; justify-content:flex-end; }
.ribbon-toggle { border:0; padding:0 8px; background:transparent; color:var(--journey-ink); font-size:13px; text-decoration:underline; cursor:pointer; }
.logo-marquee[data-paused=true] .logo-track { animation-play-state:paused; }
.achievement-row span, .deck-card header span, .deck-card header a, .footer-signature strong, .future>footer, .footer-social a span, .guest-profile-link { font-size:13px; }
.deck-card header { flex-wrap:wrap; gap:8px; }

@media(max-width:760px) {
  .story { height:auto; }
  .story-stage { position:relative; top:auto; height:auto; padding:36px 22px; grid-template-columns:minmax(0,1fr); gap:15px; }
  .story-stage>.section-index { margin:0 0 10px; }
  .story-line { font-size:clamp(1.8rem,7.6vw,2.5rem); margin-bottom:16px; }
  .story-line.supporting { font-size:1rem; }
  .claim-receipt { padding:18px; }
  .claim-receipt strong { font-size:1.15rem; }
  .product-venn { max-width:420px; margin-top:14px; }
  .evidence-panel,.ribbon-controls { width:calc(100% - 36px); }
  .endorsement.evidence-panel { grid-template-columns:90px minmax(0,1fr); gap:var(--space-small); padding:12px; }
  .endorsement-copy h3 { font-size:1.65rem; }
  .endorsement-copy p { font-size:14px; line-height:1.55; }
  .endorsement-copy a { font-size:13px; margin-top:4px; }
  .resume-proof.evidence-panel { grid-template-columns:minmax(0,1fr) 100px; padding:12px; gap:var(--space-small); }
  .resume-proof h3 { font-size:2rem; }
  .resume-section { padding-top:12px; }
  .deck-library { grid-template-columns:1fr; }
  .deck-card header span,.deck-card header a,.achievement-row span { font-size:13px; }
  .future>footer { gap:12px; flex-wrap:wrap; font-size:13px; }
}
/* Metadata shares a baseline even inside the hero footer's general span rules. */
.hero-footer .hero-meta { align-items:center; gap:18px; }
.hero-footer .hero-meta>span { display:inline-flex; align-items:center; gap:7px; line-height:1.4; letter-spacing:0; white-space:nowrap; }
.hero-meta svg { display:block; flex-shrink:0; }

/* One quiet experience list, with roles and dates grouped under each company. */
.experience { grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:56px; padding-inline:max(40px,calc((100vw - var(--content-width))/2)); }
.experience-copy h2 { font-size:clamp(2rem,3.5vw,3.25rem); line-height:1.12; letter-spacing:-.03em; margin:0 0 18px; text-wrap:balance; }
.experience-copy>p { max-width:34ch; margin:0; }
.experience-list { gap:0; padding:0; border:0; }
.experience-list:before,.experience-card:before { content:none; }
.experience-card { background:transparent; color:var(--journey-ink); border:0; border-bottom:1px solid var(--journey-line); border-radius:0; box-shadow:none; }
.experience-card:first-child { border-top:1px solid var(--journey-line); }
.experience-summary { padding:22px 0; gap:18px; grid-template-columns:52px minmax(0,1fr) 24px; }
.experience-summary header { display:block; }
.experience-summary h3 { font-size:1.1rem; line-height:1.4; color:inherit; }
.experience-summary h3 span { font-size:14px; font-weight:500; line-height:1.5; margin-top:4px; color:var(--journey-muted); }
.experience-summary time { color:var(--journey-muted); font-size:13px; margin-top:6px; line-height:1.5; }
.experience-summary .experience-logo { width:52px; height:52px; padding:7px; border:0; border-radius:12px; box-shadow:none; }
.experience-card ul { padding:0 40px 24px 88px; color:var(--journey-muted); font-size:15px; line-height:1.65; }
.experience-card li { color:inherit; }
.experience-summary:hover h3 { text-decoration:underline; text-underline-offset:4px; }
.experience-summary:focus-visible { outline:2px solid currentColor; outline-offset:5px; border-radius:4px; }
.experience-toggle { color:var(--journey-ink); }
.leadership-heading h2 { max-width:none; font-size:clamp(1rem,3.3vw,2.8rem); line-height:1.2; letter-spacing:-.025em; }
.leadership-heading h2>span { display:block; white-space:nowrap; }
.future-copy .email-feedback { min-height:1.5em; font-size:14px; line-height:1.5; margin:12px 0 0; overflow-wrap:anywhere; }
@media(max-width:760px) {
  .experience { grid-template-columns:minmax(0,1fr); gap:24px; padding-inline:22px; }
  .experience-copy h2 { max-width:20ch; font-size:clamp(2rem,7.5vw,2.8rem); }
  .experience-summary { grid-template-columns:44px minmax(0,1fr) 22px; gap:12px; padding:18px 0; }
  .experience-summary .experience-logo { width:44px; height:44px; border-radius:10px; }
  .experience-card ul { padding:0 10px 20px 20px; }
  .hero-footer .hero-meta { gap:14px; }
}
/* Compact chapter rhythm and a shared, readable heading scale. */
.topbar,.mobile-menu { background:var(--journey-surface); color:var(--journey-ink); border-color:var(--journey-line); }
.topbar .wordmark small,.topbar .chapter-nav a { color:inherit; }
.nav-toggle { color:inherit; }
.mobile-menu a:hover { background:var(--journey-card); }
.hero-skills { background:#d8d5c9; }
.chapter-heading h2,.turn-heading h2 { font-size:clamp(2rem,3.5vw,3.25rem); line-height:1.12; letter-spacing:-.03em; font-weight:650; }
.chapter-heading:not(.leadership-heading) { grid-template-columns:minmax(0,1fr); gap:14px; }
.chapter-heading:not(.leadership-heading) h2 { max-width:30ch; margin:0; }
.chapter-heading:not(.leadership-heading)>p:last-child { margin:0; line-height:1.65; }
.product-heading { padding-block:30px 24px; }
.product-heading h2 { max-width:none!important; }
.turn { width:100%; padding:28px max(40px,calc((100vw - var(--content-width))/2)); }
.turn-heading { max-width:760px; }
.turn-heading p { color:var(--journey-muted); font-size:1rem; line-height:1.65; margin:0 0 12px; }
.turn-heading h2 { color:var(--journey-ink); max-width:26ch; margin:0; text-wrap:balance; text-align:left; }
.chapter-heading,.experience-copy,.turn-heading,.resume-proof-copy { transform:translateY(calc((1 - var(--heading-cue,1))*18px)); }
.hero-copy .hero-meta { margin-block:16px 14px; line-height:1.4; }
.hero-copy .hero-meta>span { white-space:nowrap; }
.hero-copy .hero-actions { margin-top:0; gap:12px; }
.nav-toggle { display:grid; place-items:center; width:44px; height:44px; padding:10px; cursor:pointer; }
.nav-toggle svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.nav-toggle[aria-expanded=true] svg { transform:rotate(90deg); }
.nav-toggle svg { transition:transform .2s ease-out; }
.future-copy h2 { max-width:none; font-size:clamp(3rem,4.4vw,5rem); line-height:1.06; }
.future-copy h2>span { white-space:nowrap; }
.future-copy h2 em { display:inline; }
/* Black ribbon; hovering retains each logo's original brand colors. */
.logo-marquee { background:#000; border-color:#333; }
.logo-item { background:#000; border-color:#333; }
.logo-item img { filter:grayscale(1) invert(1); mix-blend-mode:screen; opacity:1; }
.logo-item:hover img { filter:none; mix-blend-mode:normal; opacity:1; }
.logo-marquee:focus-visible { outline:2px solid var(--journey-ink); outline-offset:4px; }
.build-platform.website-platform svg { width:24px!important; height:24px!important; fill:none; stroke:currentColor!important; stroke-width:1.5; }
/* The label and toggle preview the action without opening the disclosure. */
.build-disclosure>summary,.experience-summary { position:relative; }
.disclosure-hint { position:absolute; right:34px; bottom:3px; font:500 12px/1.4 var(--sc-font-text); color:inherit; opacity:0; transform:translateY(-3px); transition:opacity .18s ease-out,transform .18s ease-out; pointer-events:none; }
.hint-close { display:none; }
details[open]>summary .hint-open { display:none; }
details[open]>summary .hint-close { display:inline; }
.build-disclosure>summary:focus-visible .disclosure-hint,.experience-summary:focus-visible .disclosure-hint { opacity:1; transform:none; }
@media(hover:hover) {
  summary:hover>.disclosure-hint { opacity:1; transform:none; }
  .build-disclosure:not([open])>summary:hover>svg,.experience-card:not([open])>summary:hover>.experience-toggle { transform:rotate(15deg) translateY(2px); }
}
@media(max-width:760px) {
  .chapter-heading h2,.turn-heading h2 { font-size:clamp(2rem,7.5vw,2.8rem); }
  .chapter-heading:not(.leadership-heading) { gap:12px; }
  .turn { padding:24px 22px 12px; }
  .product-heading { padding-block:24px 18px; }
  .hero-copy .hero-meta { gap:12px; margin-block:12px 10px; }
  .future-copy h2 { font-size:clamp(2.5rem,10.5vw,4rem); }
  .disclosure-hint { right:30px; font-size:11px; }
}
/* Keep the explicitly requested investor-panel heading on its three lines. */
.leadership-heading h2 { font-size:clamp(1rem,3.3vw,2.8rem); line-height:1.2; }
@media(prefers-reduced-motion:reduce) {
  .chapter-heading,.experience-copy,.turn-heading,.resume-proof-copy { transform:none; }
  .disclosure-hint,.nav-toggle svg { transition:none; transform:none; }
  .build-disclosure:not([open])>summary:hover>svg,.experience-card:not([open])>summary:hover>.experience-toggle { transform:none; }
  .story { height:auto; }
  .story-stage { position:relative; top:auto; height:auto; padding-block:36px; }
  .story-line,.claim-receipt { transform:none; }
  .ribbon-controls { display:none; }
}