/* ==========================================================================
   Front Door · homepage layer · assets/css/front-door.css
   Linked from index.html only (after styles.css). Not bundled by build.py, so /work, case pages and the other
   public pages never load it. Tokens: design-system/tokens.css (--pub-*), never forked here.
   Type: every face goes through --pub-font-display / --pub-font-ui so a font swap is a one-token change
   (Shah 7:58pm ET picked type option D: Inter Display 560 + Inter, Instrument Serif italic accents; see § Type · option D).
   Motion stays EB's (journey.js, motion CSS): this file changes materials only.
   ========================================================================== */

/* ── U1 · One material family (Shah 6:58pm build all six) ────────────────────────────────────────────────────
   Three materials: porcelain paper (page), porcelain glass (chat), cobalt glass (header,
   on the hero and scrolled). One top-left light (--pub-e1..e3, cobalt-tinted shadows). Radii --pub-r-chip/tile/card/panel. */

/* Nav skin (header glass, gold hover dot, clear-over-hero + scrolled states, nav type) moved verbatim to
   assets/css/nav-public.css so home and /work share one nav bar (Shah 3:20pm ET Oct 30). Linked right after this file. */


/* Chat · porcelain glass skin only. Same elements, same states, same JS (card open at load → pill → panel). */
html .chatbot-preview-card,
html .chatbot-collapsed-cta {
  --chat-glass-fill: linear-gradient(160deg, rgb(255 255 255 / .74), rgb(247 247 244 / .59));   /* porcelain glass .92/.74 -> .74/.59: Shah 7:29am, a little more colour let in */
  background: var(--chat-glass-fill);
  border: 0;
  box-shadow: var(--pub-e3), inset 0 0 0 1px rgb(255 255 255 / .7);
}
html .chatbot-preview-card { border-radius: var(--pub-r-card); }
html .chatbot-preview-card::before,
html .chatbot-collapsed-cta::before { background: var(--pub-sheen); opacity: .7; }
html .preview-label-small {
  font-family: var(--pub-font-ui); font-weight: 600; font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate-700);   /* was --pub-muted (slate-600): 4.2:1 over the hero once more colour shows through */
}
html .preview-label-large { color: var(--pub-text); }                       /* face unchanged (display type held) */
html .preview-footer {
  font-family: var(--pub-font-ui); font-weight: 500;
  background: var(--pub-text); color: var(--white);
  border-radius: var(--pub-r-chip);
}
/* Minimised pill: text only (no avatar, no dot), gap 0 so "Ai™" never splits */
html .chatbot-collapsed-cta {
  font-family: var(--pub-font-ui);
  font-weight: 500;
  color: var(--pub-text);
  gap: 0 !important;
  white-space: nowrap;
  border-radius: var(--pub-r-chip);
}
html .chatbot-collapsed-cta > :not(.tm-symbol) { display: none; }
html .chatbot-collapsed-cta .tm-symbol { margin: 0; }
@media (min-width: 601px) {
  html .chatbot-collapsed-cta { padding: 13px 20px; font-size: .875rem; line-height: 1; }
}
@media (hover: hover) and (pointer: fine) {
  html .chatbot-preview-card:hover,
  html .chatbot-collapsed-cta:hover {
    background: var(--chat-glass-fill); border: 0;
    box-shadow: var(--pub-hi-top-glass), 0 0 0 .5px rgb(3 32 90 / .22), 0 30px 64px -16px rgb(3 32 90 / .5),
                inset 0 0 0 1px rgb(255 255 255 / .8);
  }
}
html .chatbot-collapsed-cta:active { scale: var(--pub-press); transition-duration: var(--pub-dur-press); }
html .chatbot-collapsed-cta:focus-visible { outline: var(--pub-focus-ring); outline-offset: var(--pub-focus-offset); }

/* Open panel · porcelain glass, 32px radius, a gold hairline under the header */
html .chatbot-panel {
  border: 0;
  border-radius: var(--pub-r-panel);
  box-shadow: var(--pub-e3), inset 0 0 0 1px rgb(255 255 255 / .6);
}
html .chatbot-header {
  background: linear-gradient(180deg, rgb(255 255 255 / .74), rgb(247 247 244 / .58));   /* was .9/.72 */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold-400) 18%, var(--gold-400) 82%, transparent) 1;
}
html .chatbot-header-title { color: var(--pub-text); }                     /* face unchanged (display type held) */
html .chatbot-status-text { font-family: var(--pub-font-ui); color: var(--pub-muted); }
html.glass-lite .chatbot-collapsed-cta, html.glass-lite .chatbot-preview-card { background: var(--pub-surface); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html .chatbot-collapsed-cta, html .chatbot-preview-card { background: var(--pub-surface); }
}

/* One focus rule: 2px ring, 2px offset; cobalt on light surfaces, gold on dark (hero, navy sections, header on hero) */
html :focus-visible { outline: var(--pub-focus-ring); outline-offset: var(--pub-focus-offset); }
html :is(#hero-section, .dark-mode-profile, #main-footer, #main-navbar) :focus-visible {
  outline: var(--pub-focus-ring-inverse); outline-offset: var(--pub-focus-offset);
}

/* ── U6 · Rhythm and footer signature (Shah 6:58pm build all six) ────────────────────────────────────────────
   Section heads: a hairline with a 32×2 gold tick above the head (the head's face is untouched: display type held).
   Experience + Education read as one pair. Expertise takes the key light + grain. Footer skin lives in
   front-door-footer.css (all public pages except /work); the signature band below is homepage-only markup. */
html .dark-mode-profile .profile-role::before {
  content: ""; display: block; height: 2px; margin-bottom: 20px;
  background: linear-gradient(var(--pub-inverse-gold), var(--pub-inverse-gold)) 0 0 / 32px 2px no-repeat,
              linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / .16)) 0 1px / 100% 1px no-repeat;
}
/* Experience + Education: one card, two chapters (no 12px gap, Education's top padding × .45) */
html #experience { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html #education  { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
html #education .container { padding-top: calc(48px * .45) !important; }
@media (max-width: 992px) { html #education .container { padding-top: calc(32px * .45) !important; } }
/* Expertise: no longer a lit panel; it joins the Experience + Education ledger (U5 block below, Shah 9:36pm) */

/* Footer signature band: "Product design for the AI era." once, on the homepage, joined to the public footer.
   Face and size come from PR1 tokens only (--pub-font-display, --pub-t-h2); italic "AI era." held until fonts land. */
html .pub-sign-band {
  margin: 12px auto 0; width: calc(100% - 24px);
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  /* the light fades to flat cobalt-900 at the band's foot, where the footer's gradient starts: no seam */
  background: url("/assets/images/grain-soft.png") 0 0 / 64px 64px,
              linear-gradient(180deg, transparent 0 45%, var(--cobalt-900) 100%), var(--pub-light-key), var(--cobalt-900);
  color: var(--pub-inverse-text);
  padding-block: clamp(48px, 6vw, 88px) 0;
}
html .pub-sign {
  margin: 0;
  font-family: var(--pub-font-display); font-weight: 400;
  font-size: var(--pub-t-h2); line-height: var(--pub-t-h2-lh); letter-spacing: var(--pub-track-display);
  text-wrap: balance;
}
html .pub-sign em { font-style: normal; color: var(--pub-inverse-gold); }
html .pub-sign-band .container::after {
  content: ""; display: block; height: 2px; margin-top: clamp(28px, 3.5vw, 44px);
  background: linear-gradient(var(--pub-inverse-gold), var(--pub-inverse-gold)) 0 0 / 32px 2px no-repeat,
              linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / .16)) 0 1px / 100% 1px no-repeat;
}
html .pub-sign-band + #main-footer.footer {
  margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
  background: url("/assets/images/grain-soft.png") 0 0 / 64px 64px, var(--pub-light-bounce),
              linear-gradient(180deg, var(--cobalt-900), var(--cobalt-950));
}
html .pub-sign-band + #main-footer .footer-top-row { padding-top: 0; }

/* Micro: selection, caret, wrapping (text-wrap kept off typed lines: hero + rotating About role) */
html ::selection { background: var(--cobalt-100); color: var(--pub-text); }
html :is(#hero-section, .dark-mode-profile, .profile-section, #main-footer, .pub-sign-band) ::selection {
  background: var(--pub-inverse-gold); color: var(--cobalt-950);
}
html :is(input, textarea) { caret-color: var(--pub-accent); }
html :is(.dark-mode-profile .profile-role, .orgs-banner-heading, .pub-sign) { text-wrap: balance; }
html :is(.dark-mode-profile) p { text-wrap: pretty; }   /* #main-footer dropped: footer matches /work (footer match) */
html { hanging-punctuation: first; }

/* ── U2 · The Tide, static layer (Shah 6:58pm build all six; "wash away to the right", 6:59pm) ───────────────
   PPB owns markup, band art, colours and heights. EB's assets/css/tide.css + tide.js own ALL motion:
   never put transform, translate, scale, opacity, clip-path or will-change on .nl-tide or the bands here.
   Hooks: #about > .nl-tide[data-nl-tide] > .nl-tide__clip > .nl-tide__band--deep / --mid / --foam; .pub-horizon.
   No JS (no html.tide-on) = end state: the water is not drawn and My Journey sits at rest. */
html #about.profile-section { position: relative; overflow: clip; }
html #about > .container { position: relative; z-index: 1; }
html:not(.tide-on) #about .nl-tide { display: none; }                     /* end state until tide.js runs */
html #about .nl-tide {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: clamp(340px, 62vh, 620px);
  pointer-events: none; contain: strict;
}
html #about .nl-tide__clip { position: absolute; inset: 0; overflow: clip; }
/* every band: wave silhouette (SVG mask) intersected with a soft LEFT edge, so the trailing edge never shows
   as a hard line while the band sweeps out to the right */
html #about .nl-tide__band {
  position: absolute; inset: 0 -6%;
  -webkit-mask: var(--nl-wave) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 14%) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in;
          mask: var(--nl-wave) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 14%) 0 0 / 100% 100% no-repeat;
          mask-composite: intersect;
}
html #about .nl-tide__band--deep {
  --nl-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V250C1300 300 1180 210 1010 248 840 286 720 330 540 282 360 234 220 300 0 262Z'/%3E%3C/svg%3E");
  background: linear-gradient(180deg, var(--cobalt-900), var(--cobalt-800) 70%, var(--cobalt-700));
}
html #about .nl-tide__band--mid {
  --nl-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V318C1280 356 1150 292 980 330 800 370 660 384 470 344 300 308 160 366 0 330Z'/%3E%3C/svg%3E");
  background: linear-gradient(180deg, rgb(19 69 168 / .7), rgb(61 115 224 / .38));
}
/* foam: two hairlines (gold-300 + white) on the wave crest; soft left edge only, no silhouette */
html #about .nl-tide__band--foam {
  --nl-wave: linear-gradient(#000, #000);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 330C160 366 300 308 470 344 660 384 800 370 980 330 1150 292 1280 356 1440 318' fill='none' stroke='%23D6C1A0' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 346C170 380 320 324 490 360 670 396 820 384 990 346 1160 310 1290 368 1440 334' fill='none' stroke='white' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@media (max-width: 640px) { html #about .nl-tide { height: 46vh; } }   /* one band on phones: tide.css hides mid + foam */
/* foam on sand (EB-REQUEST 10:48pm ET): tide.css draws the two crest hairlines from these. Line 1 gold-700, 5.1:1 on
   sand-100; line 2 ink-cobalt at 50%, 3.5:1 (EB's default ink 32% is 2.1:1, under the 3:1 non-text floor). Crest fit
   (html.tide-on #about .nl-tide{max-height:100%}) is already in tide.css, so it is not repeated here. */
html #about { --nl-tide-foam: var(--gold-700); --nl-tide-foam-2: color-mix(in oklab, var(--ink-cobalt) 50%, transparent); }

/* the hero's foot becomes a 1px gold horizon (the shoreline). Positioned, never animated itself;
   tide.js appends a .tide-glint child and sets overflow:hidden on it */
html #hero-section .pub-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 1px;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-300) 18%, var(--gold-500) 50%, var(--gold-300) 82%, transparent);
  box-shadow: 0 0 24px 2px rgb(214 193 160 / .35);
}

/* ── Clickability (Shah 7:00pm: the redesign "makes a lot of things look clickable when they're not")
   Homepage org tiles are not links, so they drop the pointer cursor. Their hover scale is already neutralised by the
   inline --center-focus transform (!important), and the grey-to-colour reveal stays. Ticker chips, timeline rows,
   expertise and section heads already show no pointer, lift or shadow (QA pointer audit). The About slides and
   progress track have click handlers, so they keep the pointer. */
html .floating-orgs-banner .org-logo-wrapper,
html .floating-orgs-banner .org-logo { cursor: inherit; }

/* ── Type · option D (Shah 7:58pm ET "Go with D"; spec NEXT-LEVEL.md § Hero type v2 + § Type review) ───────────
   Faces come only from the tokens: --pub-font-display (Inter Display 560), --pub-font-ui (Inter 400–600),
   --pub-font-accent (Instrument Serif Italic, greeting + "AI era." only). No wording changes.
   One composed hero block: greeting, name, role, subline and CTAs share the hero's left edge, one face per line.
   Motion is untouched: the greeting rotation and the Shah ⇄ Shahriar typing stay in index.html's script. */
html #hero-section {
  --pub-t-name: clamp(2.365rem, 1.8643rem + 2.0952vw, 3.75rem);   /* 38px @390 → 60px cap @1440+ (Shah: too big; was 64px DM Serif, then 81px) */
}
html #hero-section .hero-title {
  font-size: var(--pub-t-name); line-height: 1;
  margin-bottom: clamp(20px, 1rem + .8vw, 30px);
}
html #hero-section .hero-title > br { display: none; }               /* greeting + name are blocks: no empty strut line */
/* the greeting: accent italic in gold, tied to the name's size (name × .46), .22em above it */
html #hero-section #greeting-word {
  display: block; width: fit-content; min-width: 0;
  font-family: var(--pub-font-accent); font-style: italic; font-weight: 400 !important;   /* beats the inline 500 */
  font-size: calc(var(--pub-t-name) * .46); line-height: 1; letter-spacing: 0;
  color: var(--pub-inverse-gold);
  margin: 0 0 .22em .04em;
  font-synthesis: none;
}
html #hero-section .hero-name {
  display: block;
  font-family: var(--pub-font-display); font-weight: 560;
  font-size: var(--pub-t-name); line-height: 1; letter-spacing: -.042em;
  font-feature-settings: "kern", "liga"; font-variation-settings: normal;
  color: var(--white);
  text-shadow: 0 18px 40px rgb(3 32 90 / .35);
}
/* the caret exists only while "Shah ⇄ Shahriar" is typing (.active-typing); at rest it is invisible and never blinks */
html #hero-section .typing-cursor {
  width: .045em; min-width: 1.5px; height: .7em; margin-left: .08em; vertical-align: baseline;
  background-color: var(--pub-inverse-gold); box-shadow: none;
  animation: none; opacity: 0;
  transition: opacity .4s var(--pub-ease);
}
html #hero-section .typing-cursor.active-typing { background-color: var(--pub-inverse-gold); opacity: .9; }
@media (prefers-reduced-motion: reduce) { html #hero-section .typing-cursor { display: none; } }
html #hero-section .hero-subtitle {
  font-family: var(--pub-font-ui); font-weight: 600; font-size: .6875rem; line-height: 1;   /* 11px floor */
  letter-spacing: .16em; color: var(--pub-inverse-gold);
  margin-bottom: 16px;
}
html #hero-section .hero-paragraph {
  font-family: var(--pub-font-ui); font-weight: 400;
  font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); line-height: 1.45; letter-spacing: -.005em;
  max-width: 32ch; color: rgb(238 244 255 / .86); opacity: 1;
  margin-bottom: clamp(28px, 1.4rem + 1vw, 40px);
  font-variant-numeric: lining-nums tabular-nums;
}
/* "Currently at" was a script face inside a sans sentence: now the UI face at .78 white */
html #hero-section .hero-paragraph .tagline-cursive {
  font-family: var(--pub-font-ui); font-style: normal; font-weight: 400; font-size: 1em;
  color: rgb(238 244 255 / .78);
}
html #hero-section .hero-paragraph .tagline-bold {
  font-family: var(--pub-font-ui); font-weight: 500; letter-spacing: 0; color: var(--white);
  background: linear-gradient(transparent 92%, rgb(214 193 160 / .7) 92%); padding-bottom: 2px;   /* gold underline */
}
/* buttons: the UI face (→ ↗ are in the font), 500, a hair of negative tracking for Windows 1× */
html :is(#hero-section, #expertise) .btn {   /* #main-footer dropped: footer type matches /work (footer match) */
  font-family: var(--pub-font-ui); font-weight: 500; letter-spacing: -.005em;
}
/* chat card: 11px label floor; the name takes the display face. The pill stays UI 500 (U1). */
html .chatbot-preview-card .preview-label-small { font-size: .6875rem; letter-spacing: .12em; }
html .chatbot-preview-card .preview-label-large,
html .chatbot-header-title { font-family: var(--pub-font-display); font-weight: 560; letter-spacing: -.01em; }
/* ledger dates: the UI face with tabular, lining figures so "May 2022 - Present · 4 yrs 5 mos" stops wobbling */
html .linkedin-timeline-meta { font-family: var(--pub-font-ui); font-variant-numeric: tabular-nums lining-nums; }
/* footer signature: display face with title tracking; "AI era." in the accent italic */
html .pub-sign { font-weight: 560; letter-spacing: -.035em; }
html .pub-sign em { font-family: var(--pub-font-accent); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-synthesis: none; }

/* ── Gold & sand (Shah 6:57pm ET; spec NEXT-LEVEL.md § Gold & sand) ──────────────────────────────────────────────
   Print-style accents, not fills. Gold-700 for text on light, gold-300 for text and edges on navy/cobalt,
   gold-500 never as text. Staging's About/Experience/Expertise are still navy cards (the porcelain reskin is U5),
   so "sand paper" lands as the journey mat inside About and the navy cards keep gold-300. No motion added. */
/* journey mat: sand spread + sand hairline; the scene sits inset on it. Child-only geometry, no transform. */
html #about .profile-journey-box {
  background: var(--nl-sand-mat);
  border: 1px solid var(--nl-sand-rule);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 20px 40px rgb(0 0 0 / .18);
}
html #about .profile-journey-box > .journey-viewport {
  inset: clamp(6px, .4rem + .3vw, 10px); width: auto; height: auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--nl-sand-rule);
}
/* eyebrows + dates: gold on every surface, at the tone that surface allows */
html body .floating-orgs-banner .orgs-banner-heading { color: var(--gold-700); }                      /* on the sand page: gold-700, never 500 */
html #about .journey-kicker { color: var(--pub-inverse-gold); }              /* over the navy scene */
html .linkedin-timeline-meta { color: var(--pub-inverse-gold); }
html .chatbot-preview-card,
html .chatbot-collapsed-cta {
  box-shadow: var(--pub-e3), inset 0 0 0 1px rgb(214 193 160 / .45);
}
@media (hover: hover) and (pointer: fine) {
  html .chatbot-preview-card:hover,
  html .chatbot-collapsed-cta:hover {
    box-shadow: var(--pub-hi-top-glass), 0 0 0 .5px rgb(3 32 90 / .22), 0 30px 64px -16px rgb(3 32 90 / .5),
                inset 0 0 0 1px rgb(214 193 160 / .55);
  }
}
/* primary button (hero "View Projects"; Expertise's button moved to the ink face in the ledger block): sand face, ink text, gold-700 arrow.
   The arrow is decorative (alt text ""), drawn from the UI font; the label text is unchanged. */
html #hero-section #hero-btn-work {
  background: var(--nl-sand-mat);
  border: 1px solid var(--nl-sand-rule);
  color: var(--pub-text);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px var(--nl-gold-edge), 0 6px 18px -6px rgb(3 32 90 / .45);
  text-shadow: none;
}
html #hero-section #hero-btn-work::after {
  content: "→"; content: "→" / "";
  position: static; inset: auto;
  margin-left: .5em; color: var(--gold-700); font-family: var(--pub-font-ui); font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  html #hero-section #hero-btn-work:hover {
    background: var(--white); border-color: rgb(194 164 140 / .7); color: var(--pub-text);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px var(--nl-gold-edge), 0 10px 24px -8px rgb(3 32 90 / .5);
  }
}
/* footer signature: sand ink, "AI era." in gold-300 */
html .pub-sign { color: var(--nl-sand-ink); }
html .pub-sign em { color: var(--gold-300); }

/* ── U3 · Hero redesign look (Shah 8:18pm "why doesn't it look like the redesign yet"; mock next.css § U3) ──────
   Cobalt field + key light + floor bounce + grain/vignette (overlay, z1) → faint silk video, screen-blended (z2;
   desktop plays it, phones show only the poster: index.html's one <source> is media="(min-width: 769px)", so no
   video download ≤768px, PM 6:21pm) → the company-cover wave (.pub-swell, z2, a still layer: homepage
   animation paused, Shah 8:28pm) → copy and ticker (z3) → gold horizon (.pub-horizon, z4).
   Nothing here animates. Name cap (809c3e2) unchanged. */
html #hero-section { background: var(--cobalt-800); isolation: isolate; }
html #hero-section .hero-overlay {
  z-index: 1; overflow: hidden;
  background: radial-gradient(120% 100% at 30% 30%, transparent 50%, rgb(3 32 90 / .6) 100%),
              linear-gradient(180deg, transparent 55%, rgb(3 32 90 / .35)),
              var(--pub-light-key), var(--pub-light-bounce),
              linear-gradient(162deg, var(--cobalt-500) 0%, var(--cobalt-700) 32%, var(--cobalt-800) 62%, var(--cobalt-900) 100%);
}
html #hero-section .hero-overlay::after {             /* grain: one static layer */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/images/grain-soft.png") 0 0 / 64px 64px repeat; opacity: .5; mix-blend-mode: overlay;
}
html #hero-section .hero-video-container { z-index: 2; background: transparent; opacity: .42; mix-blend-mode: screen; }
html #hero-section .pub-swell {
  position: absolute; left: -12%; right: -12%; bottom: -8%; height: 78%; z-index: 2; pointer-events: none;
  background: url("/assets/images/pub-wave.webp") 40% 60% / cover no-repeat;
  mix-blend-mode: screen; opacity: .72;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%); mask-image: linear-gradient(180deg, transparent 0, #000 38%);
}
html #hero-section .hero-content {
  z-index: 3; max-width: var(--pub-wide); width: 100%; margin-inline: auto; padding-inline: var(--pub-gutter);
}
/* the role line: a 40px gold rule before it (CH1) */
html #hero-section .hero-subtitle { display: flex; align-items: center; gap: 16px; }
html #hero-section .hero-subtitle::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--pub-inverse-gold); }
/* the ticker band: no slab, one hairline on top, edges fade */
html #hero-section .skills-banner-container {
  z-index: 3; background: transparent; border: 0; border-top: 1px solid rgb(238 244 255 / .14);
  padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
html #hero-section .hero-scroll-indicator .scroll-text { font-family: var(--pub-font-ui); }
@media (max-width: 640px) {
  html #hero-section .hero-overlay::after { opacity: .25; }
  html #hero-section .pub-swell { left: -60%; right: -20%; height: 62%; }
}

/* ── U4 · Controls (Shah 7:00pm "a lot of things look clickable when they're not"; SHOW.md CH1 flat ticker) ──────
   Only real buttons and links look pressable. The ticker is a line of flat labels: no chip, glass or shadow, no
   hover pause, default cursor; gold dots between. Buttons share one size: 48px tall, 24px side padding, UI 15px/500.
   Static: nothing added here transitions or animates. */
html #hero-section .skills-banner-container,
html #hero-section .skills-banner-container * { cursor: default; }
html #hero-section .skills-banner-track:hover { animation-play-state: running; }            /* no hover pause */
html #hero-section .banner-item {
  display: inline-block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-shadow: none;
  font-family: var(--pub-font-ui); font-weight: 500; font-size: .6875rem; line-height: 16px;   /* the 11px label */
  letter-spacing: .16em; text-transform: uppercase; color: rgb(238 244 255 / .78);
}
html #hero-section .banner-separator {
  display: inline-block; width: 4px; height: 4px; margin: 0 24px; border-radius: 50%;
  background: var(--pub-inverse-gold); font-size: 0; line-height: 0; color: transparent; vertical-align: middle;
}
/* buttons: one height and padding everywhere on the homepage */
html :is(#hero-section, #expertise) .btn {
  box-sizing: border-box; height: 48px; min-height: 48px; min-width: 0; width: auto;
  padding: 0 24px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--pub-t-ui); line-height: 1; white-space: nowrap;
  text-transform: none; letter-spacing: -.005em;
}
html #hero-section .hero-ctas { gap: 16px; }
@media (max-width: 600px) {
  html #hero-section .hero-ctas .btn { width: auto; height: 48px; min-height: 48px; padding: 0 24px; justify-content: center; }
}

/* ── U5 · Light About + ledger, one type scale, one rhythm (Shah 8:18pm redesign; 8:22pm "make sure sizing of all
   components and everything make sense"). Static: nothing here transitions or animates.
   Type scale (one ladder, every section the same): name 38→60 · H2 section head 28→40 · H3 statement / row title
   20→24 · lede 17→20 · body 16→18 · UI 15 · meta 13 · label 11 (floor). Signature 32→48 sits under the name.
   Rhythm: 8px base. Section padding 64→96, gaps 8/16/24/32/48, rows 32, tiles 16×24, buttons 48 (U4). */
html :is(#main-navbar, #hero-section, #about, .floating-orgs-banner, #experience, #education, #expertise, .pub-sign-band) {
  --pub-fd-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --pub-fd-h3: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
  --pub-fd-lede: clamp(1.0625rem, .95rem + .35vw, 1.25rem);
  --pub-fd-body: clamp(1rem, .95rem + .2vw, 1.125rem);
  --pub-fd-ui: .9375rem; --pub-fd-meta: .8125rem; --pub-fd-label: .6875rem;
  --pub-fd-sign: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --pub-fd-block: clamp(4rem, 3.2rem + 3.3vw, 6rem);
}
html #hero-section .hero-paragraph { font-size: var(--pub-fd-lede); }          /* same value as before, now the token */
html #hero-section .hero-subtitle { font-size: var(--pub-fd-label); }
/* one eyebrow style: UI 600 11px, .16em, uppercase */
html body :is(#about .profile-role, .floating-orgs-banner .orgs-banner-heading, #about .journey-kicker) {
  font-family: var(--pub-font-ui); font-weight: 600; font-style: normal; font-size: var(--pub-fd-label); line-height: 16px;
  letter-spacing: .16em; text-transform: uppercase;
}
/* one section-head style for Experience, Education, Expertise */
html body :is(#experience, #education, #expertise) .profile-role {
  font-family: var(--pub-font-display); font-weight: 560; font-style: normal;
  font-size: var(--pub-fd-h2); line-height: 1.1; letter-spacing: -.03em; text-transform: none;
  margin: 0 0 32px; color: var(--pub-text);
}

/* About: sand paper, ink text (no navy card) */
html body #about.profile-section {
  background: transparent; color: var(--pub-text); box-shadow: none; border-radius: 0;
  margin: 0 auto; max-width: none !important;
}
html body #about.profile-section > .container {
  max-width: var(--pub-wide) !important; margin-inline: auto;
  padding: var(--pub-fd-block) var(--pub-gutter) calc(var(--pub-fd-block) * .5) !important;
}
html body #about .profile-grid { gap: 48px; align-items: center; }
html body #about .profile-role { color: var(--gold-700); margin: 0 0 16px; }
html body #about .profile-description {
  font-family: var(--pub-font-display); font-weight: 560; font-size: var(--pub-fd-h3); line-height: 1.35;
  letter-spacing: -.015em; color: var(--pub-text); max-width: 34ch;
}
html body #about #typewriter-cursor { background-color: var(--pub-accent); }
html body #about .slider-progress-track { background: var(--pub-rule); height: 2px; }
html body #about .slider-progress-thumb { background: var(--pub-text); height: 2px; }
/* journey card: the navy scene on a white mat (reads as a print on sand); geometry and transforms untouched */
html body #about .profile-journey-box {
  background: var(--pub-surface); border-color: var(--pub-rule);
  box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 24px 48px -24px rgb(3 32 90 / .35);
}
html body #about #journey-box {
  font-family: var(--pub-font-ui); font-weight: 500; font-size: var(--pub-fd-ui); line-height: 1.4;
}

/* orgs band: label head, white tiles, all static (no lift; centre-focus colour kept) */
html body .floating-orgs-banner.orgs-banner--home { padding-block: 34px; }   /* batch AJ: was 48px; white space around the strip 117px -> 89px, ~25% tighter (Shah 3:27pm) */
html body .floating-orgs-banner .orgs-banner-heading { margin-bottom: 24px; }
html body .floating-orgs-banner .org-logo-wrapper:hover { transform: none; }

/* Experience + Education + Expertise: the ledger on sand. Title column + hairline rows at ≥1024px; static rows */
html body :is(#experience, #education, #expertise).dark-mode-profile {
  background: transparent; color: var(--pub-text); box-shadow: none; border-radius: 0;
  margin: 0 auto; max-width: none !important;
}
html body :is(#experience, #education, #expertise) > .container {
  max-width: var(--pub-wide) !important; margin-inline: auto;
  padding: var(--pub-fd-block) var(--pub-gutter) 0 !important;
}
html body #education > .container { padding-bottom: var(--pub-fd-block) !important; }
html body :is(#experience, #education, #expertise) .profile-content { max-width: none; margin: 0; }
html body :is(#experience, #education, #expertise) .profile-role::before {
  background: linear-gradient(var(--gold-500), var(--gold-500)) 0 0 / 32px 2px no-repeat,
              linear-gradient(var(--pub-rule), var(--pub-rule)) 0 1px / 100% 1px no-repeat;
  margin-bottom: 24px;
}
@media (min-width: 64em) {
  html body :is(#experience, #education, #expertise) .profile-content {
    display: grid; grid-template-columns: minmax(16rem, 1fr) 2fr; column-gap: 48px; align-items: start;
  }
}
html body :is(#experience, #education, #expertise) .linkedin-timeline { gap: 0; margin: 0; border-top: 1px solid var(--pub-text); }
html body :is(#experience, #education, #expertise) .linkedin-timeline-item {
  gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--pub-rule); cursor: inherit;
}
html body :is(#experience, #education) .linkedin-timeline-logo { box-shadow: 0 0 0 1px var(--pub-rule); border-radius: var(--pub-r-tile); }
html body .dark-mode-profile .linkedin-timeline-role {
  font-family: var(--pub-font-display); font-weight: 560; font-size: var(--pub-fd-h3); line-height: 1.25;
  letter-spacing: -.015em; margin: 0 0 8px;
}
html body :is(#experience, #education, #expertise) .linkedin-timeline-role { color: var(--pub-text); }
html body .dark-mode-profile .linkedin-timeline-company { font-family: var(--pub-font-ui); font-weight: 500; font-size: var(--pub-fd-ui); line-height: 1.4; }
html body :is(#experience, #education) .linkedin-timeline-company { color: var(--pub-accent); }
html body .dark-mode-profile .linkedin-timeline-meta { font-size: var(--pub-fd-meta); line-height: 1.5; margin: 4px 0 16px; }
html body :is(#experience, #education) .linkedin-timeline-meta { color: var(--pub-muted); }
html body .dark-mode-profile .linkedin-timeline-desc { font-family: var(--pub-font-ui); font-weight: 400; font-size: var(--pub-fd-body); line-height: 1.6; }
html body :is(#experience, #education, #expertise) .linkedin-timeline-desc { color: var(--pub-text); max-width: var(--pub-measure); }

/* Expertise: the third ledger chapter (Shah 9:36pm "Make area of expertise like education and experience").
   Same head, rule, row, type and rhythm as Education; no logo tile (no organisation). Top padding 0: Education's
   bottom block (64→96) is the gap, so the three heads sit on one rhythm. The CTA is the ledger's one button: ink face
   (sand-on-sand would vanish), gold-300 arrow, 48px / 24px like every homepage button. Static: no transitions. */
html body #expertise > .container { padding-top: 0 !important; padding-bottom: var(--pub-fd-block) !important; }
html body #expertise .btn {
  margin-top: 24px; width: auto; max-width: 100%; align-self: flex-start;
  background: var(--pub-text); border: 1px solid var(--pub-text); color: var(--white);
  -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px var(--nl-gold-edge);
}
html body #expertise .btn::after {
  content: "→"; content: "→" / "";
  position: static; inset: auto;
  margin-left: .5em; color: var(--gold-300); font-family: var(--pub-font-ui); font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  html body #expertise .btn:hover { background: var(--pub-accent); border-color: var(--pub-accent); color: var(--white); }
}

/* footer signature: one step under the hero name */
html .pub-sign { font-size: var(--pub-fd-sign); line-height: 1.05; }
/* scroll cue sits on the 13px meta step (was 13.3→14.4 fluid, off-scale) */
html #hero-section .hero-scroll-indicator .scroll-text { font-size: var(--pub-fd-meta); }
/* phone scroll cue (POLISH-REVIEW, PSB autopilot): it sat at a fixed 2rem + 75px, off the hero column's edge, in the
   anchor's inherited Mulish with legacy .5px tracking. Now its left edge lines up with the headline, tagline and My Work
   button (the same --pub-gutter as .hero-content), in the UI face at 0 tracking. Static: the base bounce keyframes keep
   translate3d(-50%) on transform; the separate translate: 50% only cancels that offset, it never animates. */
@media (max-width: 600px) {
  html #hero-section .hero-scroll-indicator { left: var(--pub-gutter); margin-left: 0; translate: 50% 0; font-family: var(--pub-font-ui); }
  html #hero-section .hero-scroll-indicator .scroll-text { letter-spacing: 0; }
}

/* ═══ My Journey phase labels (Shah 8:20pm) — static: CSS :has() off the existing dot aria-current, no transition, no JS ═══ */
html body #about #journey-box { font-family: var(--pub-font-ui); font-weight: 500; }
html body #about #journey-box .jy-phase { display: none; }
@supports selector(:has(*)) {
  html body #about #journey-box .jy-phase {
    display: grid; justify-items: center; margin: 0 0 4px;
    font-family: var(--pub-font-ui); font-weight: 600; font-size: var(--pub-fd-label, .6875rem);
    line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300);
  }
  html body #about #journey-box .jy-phase > span { grid-area: 1 / 1; visibility: hidden; }
  html body #about #journey:not(:has(.jy-dot[aria-current])) #journey-box .jy-phase > span[data-i="0"],
  html body #about #journey:has(.jy-dot[data-i="0"][aria-current]) #journey-box .jy-phase > span[data-i="0"],
  html body #about #journey:has(.jy-dot[data-i="1"][aria-current]) #journey-box .jy-phase > span[data-i="1"],
  html body #about #journey:has(.jy-dot[data-i="2"][aria-current]) #journey-box .jy-phase > span[data-i="2"],
  html body #about #journey:has(.jy-dot[data-i="3"][aria-current]) #journey-box .jy-phase > span[data-i="3"],
  html body #about #journey:has(.jy-dot[data-i="4"][aria-current]) #journey-box .jy-phase > span[data-i="4"] { visibility: visible; }
}

/* journey caption on phones: styles.css drops #journey-text to 12px + its own 6/12 padding inside the box (off-scale, double padding) → 13px meta step, box padding only */
@media (max-width: 480px) {
  html body #about #journey-box #journey-text { font-size: var(--pub-fd-meta, .8125rem); line-height: 1.4; padding: 0; border-radius: 0; }
}

/* ── Hero option C · "Split" (Shah 10:07–10:08pm ET: tight, tiny role, "luxury vibe")
   Stripe-confident: name + role read as one two-tone headline (role in the display face at .6 white, sentence case),
   then the facts and CTAs sit in a quiet column behind one hairline: right of the headline at ≥1024px, under it on
   phones. Name cap unchanged (38→60). Gold only on the greeting. Copy unchanged. Static: no motion or JS. */
html #hero-section .hero-title { margin-bottom: 8px; }                                         /* name → role 8: one headline */
html #hero-section .hero-subtitle {
  display: block; gap: 0;
  font-family: var(--pub-font-display); font-weight: 560;
  font-size: clamp(1.5rem, 1.3143rem + .7619vw, 2rem); line-height: 1.15;                     /* role 24 → 32 */
  letter-spacing: -.024em; text-transform: lowercase; color: rgb(238 244 255 / .6);
  margin-bottom: 32px;
}
html #hero-section .hero-subtitle::before { content: none; }
html #hero-section .hero-subtitle::first-letter { text-transform: uppercase; }
html #hero-section .hero-paragraph {
  padding-top: 32px; border-top: 1px solid rgb(238 244 255 / .16);                            /* the one hairline */
  font-size: var(--pub-fd-body); line-height: 1.6; letter-spacing: 0; max-width: 36ch;         /* 16 → 18 */
  color: rgb(238 244 255 / .72);
  margin-bottom: 32px;                                                                       /* subline → CTA 32 */
}
html #hero-section .hero-paragraph .tagline-cursive { color: rgb(238 244 255 / .72); }
@media (min-width: 1024px) {
  html #hero-section .hero-content {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    grid-template-areas: "title facts" "role cta"; column-gap: 96px; align-items: end;
  }
  html #hero-section .hero-title { grid-area: title; margin-bottom: 8px; }
  html #hero-section .hero-subtitle { grid-area: role; margin-bottom: 0; }
  html #hero-section .hero-paragraph {
    grid-area: facts; border-top: 0; padding: 0 0 32px 48px; margin: 0;
    border-left: 1px solid rgb(238 244 255 / .16);
  }
  html #hero-section .hero-ctas { grid-area: cta; padding-left: 48px; border-left: 1px solid rgb(238 244 255 / .16); align-self: stretch; align-items: end; }
}

/* ── Hero C2 · desktop tight split (Shah 10:17pm ET: "C makes sense but in web why is it so far apart"). Phone = C, untouched.
   ≥1024px: two columns kept, but the facts column sits right beside the headline: the headline column is its own
   width (max-content), a 64px gap, then one hairline and a 40px inset. The CTA row's bottom lines up with the role
   line's bottom, and the facts sit level with the name. Static. */
@media (min-width: 1024px) {
  html #hero-section .hero-content {
    grid-template-columns: max-content minmax(0, 24rem); column-gap: 64px; justify-content: start;
  }
  html #hero-section .hero-paragraph { padding: 0 0 32px 40px; }
  html #hero-section .hero-ctas { padding-left: 40px; }
}

/* ── Hero name in DM Serif Display, the production face (Shah 10:35pm ET: "the I'm shah maybe just for that use the
   font on byshah.com used for that"). Only the name line ("I'm Shah" ⇄ "Shahriar"); "Hi,", the role, subline, CTAs
   stay type D. Face: Google Fonts subset (&text= I'm Shahriar + ’, display=swap, linked non-blocking in index.html).
   Fallback is metric-matched to DM Serif Display (size-adjust from the advance widths of "I'm Shah"/"I'm Shahriar",
   ascent/descent from its hhea) so the swap does not move anything; line-height 1 keeps the line box at the cap
   (38 → 60px). The serif needs less negative tracking than Inter Display (-.042em → -.015em). -.015em, not -.01em:
   C2's title column is max-content, sized by the wider of the name and the role; at -.01em "I'm Shahriar" came out
   0.6px wider than the role at ≥1400px, so the typing loop nudged the facts + CTA column 0.6px sideways. At -.015em
   it stays ~3px narrower than the role at every width (1024–1920), so the loop moves nothing. Static. */
@font-face {
  font-family: "DM Serif Display Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Georgia");
  size-adjust: 109.5%; ascent-override: 94.6%; descent-override: 30.6%; line-gap-override: 0%;
}
html #hero-section .hero-name {
  font-family: "DM Serif Display", "DM Serif Display Fallback", serif;
  font-weight: 400; letter-spacing: -.015em; font-synthesis: none;
}
/* the greeting: production's face (Shah 11:19pm ET; byshah-deploy styles.css .font-cursive, read only): Playwrite DK
   Uloopet, replacing Instrument Serif italic. Covers the whole rotation (Hi, Hola, Bonjour, Ciao, Namaste,
   Konnichiwa,): every letter is in the index.html &text= subset, so no word falls back. Weight: production asks 500
   (inline style) but loads wght 100..400, so Chrome renders the 400 instance; we ask 400 directly, synthesis off, so
   the look matches with no faux bold. Fallback metric-matched to Playwrite (size-adjust 121% from the advance widths
   of all six words vs Times/Liberation Serif Italic; ascent/descent from its hhea). Size (name × .46), gold and the
   .22em gap unchanged; the block is line-height 1 and fit-content, so rotating words never move the name, role or
   CTAs. "AI era." (.pub-sign em) stays Instrument Serif italic. Static. */
@font-face {
  font-family: "Playwrite DK Uloopet Fallback";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Georgia Italic");
  size-adjust: 121%; ascent-override: 105.4%; descent-override: 31%; line-gap-override: 0%;
}
html #hero-section #greeting-word {
  font-family: "Playwrite DK Uloopet", "Playwrite DK Uloopet Fallback", cursive;
  font-style: normal; font-weight: 400 !important; font-synthesis: none;
}

/* ── Footer palette (Shah 11:10/11:12pm ET via PSB): both public footers end identical. /work's stamped markup, copy and
   layout; the homepage footer's colours. The same block sits in work-skin.css (/work) and front-door.css (home): change both together.
   Paint only (backgrounds, text, accents, rings). No size, spacing, font or motion here. ── */
html #main-footer.footer {
  background: url("/assets/images/grain-soft.png") 0 0 / 64px 64px, var(--pub-light-bounce),
              linear-gradient(180deg, var(--cobalt-900), var(--cobalt-950));
  box-shadow: none; color: var(--pub-inverse-muted);
}
html #main-footer.footer::before { display: none; }
html #main-footer .footer-top-row { border-bottom-color: rgb(255 255 255 / .14); }
html #main-footer .footer-link { color: var(--pub-inverse-text); }
html #main-footer .copyright-text { color: var(--pub-inverse-muted); }
html #main-footer .social-icon-btn {
  color: var(--pub-inverse-text); background: var(--pub-glass-cobalt);
  box-shadow: var(--pub-hi-top-glass), inset 0 0 0 1px rgb(255 255 255 / .2);
}
@media (hover: hover) and (pointer: fine) { html #main-footer .footer-link:hover { color: var(--pub-inverse-gold); } }
html #main-footer :is(a, button):focus-visible { outline: var(--pub-focus-ring-inverse); outline-offset: var(--pub-focus-offset); }
html #main-footer ::selection { background: var(--pub-inverse-gold); color: var(--cobalt-950); }
/* footer type D (PSB autopilot 6:35am ET): links, Contact Me and the copyright line leave Poppins for the home faces.
   Family/weight/tracking only; sizes, colours and copy unchanged. Contact Me = the hero buttons' UI 500. */
html #main-footer .footer-link { font-family: var(--pub-font-ui); font-weight: 500; letter-spacing: 0; }
html #main-footer .btn { font-family: var(--pub-font-ui); font-weight: 500; letter-spacing: -.005em; }
html #main-footer :is(.copyright-text, .footer-legal-link) { font-family: var(--pub-font-ui); font-weight: 400; letter-spacing: 0; }
/* phone: /work's page-wide 16px container gutter, scoped to the footer here so the layouts match */
@media (max-width: 768px) { html #main-footer > .container { padding: 0 16px !important; } }

/* Hero loops pause off screen or in a hidden tab (EB 12:18am ET via PSB). index.html's hero script sets html.hero-off from
   one IntersectionObserver + visibilitychange (it also parks the greeting and name timers). This pauses every CSS loop
   under #hero-section (the skills ticker, the scroll cue bounce, the typing cursor blink, anything added later); they
   continue from the same frame when it clears. .pub-swell is a still layer (no animation since Shah 8:28pm), covered anyway.
   Play state only: nothing moves, nothing reflows. (Only a pointer resting on the off-screen ticker could hold it running.) */
html.hero-off #hero-section,
html.hero-off #hero-section *,
html.hero-off #hero-section *::before,
html.hero-off #hero-section *::after { animation-play-state: paused; }

/* About cursor blink + logo strip scroll pause off screen or in a hidden tab (PSB batch w, EB perf pass). index.html's
   about typewriter script and setLogoLoop (the same IntersectionObserver + visibilitychange that gates the centre-focus
   loop) toggle .loop-off; this pauses play state only, so both continue from the same frame. Reduced motion unchanged. */
html body #about #typewriter-cursor.loop-off,
html body .org-marquee-container .org-marquee-track.loop-off { animation-play-state: paused; }

/* ── Midnight hero (Shah 6:48am ET Oct 30 via PSB: "too bright", wants the darker, more premium blue of the homepage
   footer; 6:53am: it read purple, he wants the rich blue of his LinkedIn banner, true deep blue at hue ~215–225, no violet).
   Paint only: the hero field, glow and wave colours. Type, nav, layout, copy, gold and sand unchanged.
   The cobalt tokens (sampled from the LinkedIn banner) sit at hue 231–235, which is what read violet, so the hero uses a
   local hue-220 ramp at the footer's darkness (flagged for PSB: local custom properties, not tokens; tokens.css untouched):
     --pub-mh-800 hsl(219 82% 25%)  --pub-mh-900 hsl(220 85% 17%)  --pub-mh-950 hsl(221 90% 11%)  --pub-mh-edge hsl(222 90% 6%)
   Key light: a dimmer, hue-218/220 local copy of --pub-light-key. The gold floor bounce (--pub-light-bounce) stays: it is
   the gold/sand accent. index.html's preloader curtain uses the same stack (no flash). Static: nothing animates; no blur. */
html {
  --pub-mh-800: hsl(219 82% 25%); --pub-mh-900: hsl(220 85% 17%); --pub-mh-950: hsl(221 90% 11%); --pub-mh-edge: hsl(222 90% 6%);
  --pub-mh-muted: #C8D3E9;   /* hero secondary text: --pub-inverse-muted #C8CCE9 (hue 233 lavender) at hue 220, same S/L; flagged for PSB */
  --pub-mh-key: radial-gradient(1100px 700px at 14% -6%, hsl(218 85% 55% / .26), transparent 60%),
                radial-gradient(700px 520px at 92% 12%, hsl(220 85% 40% / .24), transparent 70%);
  --pub-mh-stack: radial-gradient(120% 100% at 30% 30%, transparent 50%, hsl(222 90% 6% / .6) 100%),
                  linear-gradient(180deg, transparent 55%, hsl(221 90% 11% / .5)),
                  var(--pub-mh-key), var(--pub-light-bounce),
                  linear-gradient(162deg, var(--pub-mh-800) 0%, var(--pub-mh-900) 34%, var(--pub-mh-950) 64%, var(--pub-mh-950) 100%);
}
html #hero-section { background: var(--pub-mh-950); }
html #hero-section .hero-overlay { background: var(--pub-mh-stack); }
html #hero-section .hero-video-container { opacity: .2; }       /* desktop silk video (hue ~212), screen-blended: was .42 */
/* the wave art (pub-wave.webp) is cobalt, hue ~230: a static hue shift brings it to ~218 (no animation, no blur) */
html #hero-section .pub-swell { opacity: .42; filter: hue-rotate(-12deg); }   /* was .72, no filter */
html #hero-section .hero-name { text-shadow: 0 18px 40px hsl(221 90% 11% / .35); }   /* same shadow, blue not cobalt */
/* the water that lies over About continues the hero, so it steps down too (no seam at the gold horizon) */
html #about .nl-tide__band--deep { background: linear-gradient(180deg, var(--pub-mh-950), var(--pub-mh-900) 70%, var(--pub-mh-800)); }
html #about .nl-tide__band--mid { background: linear-gradient(180deg, hsl(219 82% 30% / .7), hsl(218 80% 45% / .38)); }

/* ── Hero size + legibility (Shah 6:48am / 6:49am ET Oct 30 via PSB: greeting, "I'm Shah" and the role ~10–15% bigger;
   the hero should read as easily as /work's headline, solid text, no faint or translucent lines).
   +12% on each step: name 38→60 becomes 42.6→67.2 (the greeting follows it at name × .46: 17.5→19.6, 27.6→30.9);
   role 24→32 becomes 26.9→35.8. Same faces, weights, tracking and line-heights; the name → role gap 8 → 9px.
   Colours match /work's headline (.stripe-header-copy): white for the name, solid lavender --pub-inverse-muted (#C8CCE9)
   for the role, the facts and the ticker, gold-300 for the greeting. No alpha, no opacity below 1 on hero text.
   The typing caret's states (.typing-cursor / .active-typing) and the scroll cue's hide-on-scroll are untouched. Static. */
html #hero-section { --pub-t-name: clamp(2.66rem, 2.088rem + 2.3467vw, 4.2rem); }                 /* 42.6px @390 → 67.2px @1440+ */
html #hero-section .hero-title { margin-bottom: 9px; }
html #hero-section .hero-subtitle { font-size: clamp(1.68rem, 1.472rem + .8533vw, 2.24rem); color: var(--pub-mh-muted); }   /* 26.9 → 35.8 */
html #hero-section .hero-paragraph,
html #hero-section .hero-paragraph .tagline-cursive { color: var(--pub-mh-muted); }           /* was rgb(238 242 255 / .72) */
html #hero-section .banner-item { color: var(--pub-mh-muted); }                                /* was rgb(238 242 255 / .78) */
/* the greeting (Hi, / Hola, / … / Konnichiwa,), bigger again (Shah 7:55am ET Oct 30 via PSB: "The hi hola needs to be bigger
   in home page"): name × .46 → × .60 (+30%): 19.6 → 25.5px @390, 23.7 → 30.9 @768, 26.4 → 34.5 @1024, 30.9 → 40.3 @1440.
   Same face, gold and place; gap .22em → .3em so the "j" of "Bonjour," keeps ≥3px clear of the name. Still 0.6 × the name. Line-height 1, fit-content block: the
   rotating words change only its own width, so nothing moves (no CLS). Static. */
html #hero-section #greeting-word { font-size: calc(var(--pub-t-name) * .60); margin-bottom: .3em; }
html #hero-section .hero-scroll-indicator .scroll-text { opacity: 1; }

/* ── Hero art: the LinkedIn banner (Shah 7:20–7:21am ET Oct 30 via PSB: use the banner itself, re-rendered
   bigger, not a recreated gradient). The hero field is now PSB's hero-size re-render of the company cover
   (same generator and params as byshah_company_cover_4200x700; source /workspace/byshah-logo/banner2/hero/), served as a
   <picture> in index.html: AVIF + WebP, 780w phone art ≤768px, 1440w/2880w desktop art above; preloaded as the LCP image.
   It replaces the hue-220 field, glow, silk video and wave for the HERO only (footer, About water, nav, text unchanged).
   No recolouring of any kind: no filter, no blend, no grain on the art. The only layer over it is a neutral black scrim on
   the text side (--pub-ha-scrim .36 → .25 at 72% → 0 at 92%; a .12 top band behind the nav; was .30 until the 7:55am greeting bump), the lowest that keeps every
   hero and nav text ≥ 4.5:1 against the lightest art pixel under it at 390/768/1024/1440 (worst 5.04 at .30; greeting ≥4.72 over every rotation word at .36). Static. */
html #hero-section { background: #0a1a8f; }   /* fallback while the art loads: the banner's deep field, sampled */
html #hero-section .pub-hero-art { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
html #hero-section .pub-hero-art img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none;
}
html #hero-section .hero-video-container,
html #hero-section .pub-swell { display: none; }
html #hero-section .hero-overlay {
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / var(--pub-ha-top)) 0, transparent 160px),
              linear-gradient(90deg, rgb(0 0 0 / var(--pub-ha-scrim)) 0%, rgb(0 0 0 / var(--pub-ha-scrim)) 50%, rgb(0 0 0 / calc(var(--pub-ha-scrim) * .6)) 72%, transparent 92%);
}
html #hero-section .hero-overlay::after { display: none; }
html #hero-section { --pub-ha-scrim: .36; --pub-ha-top: .12; }   /* .30 → .36 (7:55am greeting bump: the longer words at the bigger size sit over lighter ribbon pixels) */
@media (max-width: 768px) {
  html #hero-section .hero-overlay {
    background: linear-gradient(180deg, rgb(0 0 0 / var(--pub-ha-top)) 0, transparent 160px),
                linear-gradient(90deg, rgb(0 0 0 / var(--pub-ha-scrim)) 0%, rgb(0 0 0 / calc(var(--pub-ha-scrim) * .85)) 70%, rgb(0 0 0 / calc(var(--pub-ha-scrim) * .5)) 100%);
  }
}
/* the neutral top band (80b500d, .12) deepened to .28 so the nav reads with no fill: black only, fades out by 160px */
html #hero-section { --pub-ha-top: .28; }

/* ── Home intro skin · the original "/100% → /SHAH" roll in banner blue + gold (Shah 8:35am ET Oct 30: "reverting back
   to the old byshah design but speed up how we had it and in new colors"; 8:45am ET: "Replace where orange was with
   gold"; no gold hairline). SKIN ONLY: colours, faces, sizes and the fixed final geometry. Timing, keyframes, the
   roll and the curtain lift are Experience Bot's (index.html inline script/style). Active only while the curtain has
   .intro-roll, which EB's inline script sets on #sanvithi-preloader at t=0 (it runs right after the markup, before
   first paint); without it the curtain keeps today's look. Every old coral (#FF5A36 --primary) spot is gold here:
   "/" and "%" = --gold-300 (7.5:1+ on the curtain); SHAH is white (Shah 1:43pm). No orange tint, glow or shadow anywhere. Static: nothing
   here animates, no filter, no blur. Map: intro SPEC § Orange → gold map. */
html {
  --pub-banner-900: rgb(6 15 88);     /* darker navy to match the home hero field (Shah 3:18pm ET Oct 30); was rgb(11 21 97) */    /* deep banner blue, top (hue 233, read off the LinkedIn banner art under the clear nav) */
  --pub-banner-800: rgb(4 11 78);     /* was rgb(14 27 113) */   /* deep banner blue, bottom */
  --pub-intro-gold: #E4B863;          /* richer warm gold for / and % (Shah 8:59am ET "A little more gold"; was --gold-300 #D6C1A0); SHAH is white (Shah 1:43pm). 7.1:1+ on the curtain. Not coral. */
}
html body #sanvithi-preloader.intro-roll {
  background-color: var(--cobalt-950);                                              /* fallback */
  background-image: linear-gradient(180deg, var(--pub-banner-900), var(--pub-banner-800));
  color: var(--white);
}
html body #sanvithi-preloader.intro-roll .preloader-bg {
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgb(3 11 90 / .6) 100%),  /* --cobalt-950 vignette (old dark edge) */
    radial-gradient(circle at center, rgb(25 44 177 / .45) 0%, transparent 65%);     /* --cobalt-500 glow (old lighter centre) */
}
html body #sanvithi-preloader.intro-roll .preloader-counter-container {
  position: relative;
  margin-top: 50px;
  padding-bottom: 0;
}
html body #sanvithi-preloader.intro-roll .preloader-counter-container::after { content: none; }   /* no gold hairline */
html body #sanvithi-preloader.intro-roll .preloader-slash {
  display: inline-block;
  font-family: var(--pub-font-ui);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 1;
  margin-right: 12px;
  color: var(--pub-intro-gold);        /* was coral --primary; richer gold (Shah 8:59am) */
}
html body #sanvithi-preloader.intro-roll .preloader-counter-wrapper {
  font-family: var(--pub-font-display);
  font-weight: 560;
  font-size: 6.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  gap: 0;
  color: var(--white);
}
/* final /SHAH geometry from first paint (no width animation, CLS 0): all 4 slots at the letter width, slot 4 laid out
   from the start and empty during "100" */
html body #sanvithi-preloader.intro-roll .preloader-slot,
html body #sanvithi-preloader.intro-roll .preloader-slot.hidden-digit {
  display: inline-block;
  position: relative;
  width: 4.5rem;
  height: 6.5rem;
  margin-right: 0;
  overflow: hidden;
  text-align: center;
}
html body #sanvithi-preloader.intro-roll .slot-track {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
html body #sanvithi-preloader.intro-roll .slot-char {
  height: 6.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pub-font-ui);     /* in-between symbols: Inter 400 (system symbol fallback, as before) */
  font-weight: 400;
  opacity: .35;
  color: var(--cobalt-200);            /* cool tint on blue (was white/.5) */
}
html body #sanvithi-preloader.intro-roll .slot-char.final-char {
  font-family: var(--pub-font-display);
  font-weight: 560;
  opacity: 1;
  color: var(--white);                 /* 0 / 1 / 0 / 0 */
}
html body #sanvithi-preloader.intro-roll .slot-char.final-char.primary { color: var(--white); }   /* S H A H white like the digits; gold only on / and % (Shah 1:43pm ET Oct 30: "only / and % gold, SHAH white") */
html body #sanvithi-preloader.intro-roll .slot-char.final-char.primary {   /* S H A H only, in the old byshah.com face: production's family + weight; size/geometry unchanged (Shah 2:35pm ET Oct 30: "SHAH only in the old Poppins font") */
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
}
/* soft gold glow behind the counter (Shah picked B, 9:25am ET). STATIC: no animation, no filter, no blur. Lives on
   .preloader-content (the counter's parent, which EB's motion never animates), so it only fades/lifts with the curtain
   and is on at both the 100% moment and /SHAH. Absolutely positioned, pointer-events none: no layout shift. Box = the
   counter grown 60% of its height top/bottom and 35% of its width each side (counter height 6.5rem, 4.5rem <=768px;
   its margin-top is 50px/40px). A gold #E4B863 at .18 -> .06 -> 0. */
html body #sanvithi-preloader.intro-roll .preloader-content { isolation: isolate; }
html body #sanvithi-preloader.intro-roll .preloader-content::before {
  content: "";
  position: absolute;
  top: calc(50px - 3.9rem);
  bottom: -3.9rem;
  left: -35%;
  right: -35%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(228 184 99 / .18), rgb(228 184 99 / .06) 55%, transparent 100%);
}
/* "%" sits over slot 4's spot, so its fade-out needs no reflow */
html body #sanvithi-preloader.intro-roll .preloader-percent {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - 4.5rem);
  margin-left: 12px;
  font-family: var(--pub-font-ui);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--pub-intro-gold);        /* was coral --primary; richer gold (Shah 8:59am) */
}
@media (max-width: 768px) {
  html body #sanvithi-preloader.intro-roll .preloader-counter-container { margin-top: 40px; }
  html body #sanvithi-preloader.intro-roll .preloader-slash { font-size: 3.5rem; margin-right: 8px; }
  html body #sanvithi-preloader.intro-roll .preloader-counter-wrapper { font-size: 4.5rem; gap: 1px; }
  html body #sanvithi-preloader.intro-roll .preloader-slot,
  html body #sanvithi-preloader.intro-roll .preloader-slot.hidden-digit { width: 3.2rem; height: 4.5rem; }
  html body #sanvithi-preloader.intro-roll .slot-char { height: 4.5rem; }
  html body #sanvithi-preloader.intro-roll .preloader-percent { left: calc(100% - 3.2rem); margin-left: 8px; font-size: 1.8rem; }
  html body #sanvithi-preloader.intro-roll .preloader-content::before { top: calc(40px - 2.7rem); bottom: -2.7rem; }
}