html, body { margin: 0; padding: 0; background: #0A0C0F; overflow-x: clip; }
body { font-family: 'Instrument Sans', system-ui, sans-serif; color: #E8E4DC; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #E8B25C; text-decoration: none; transition: color 160ms ease; }
a:hover { color: #F5CA85; }
::selection { background: #E8B25C; color: #0A0C0F; }
:focus-visible { outline: 2px solid #E8B25C; outline-offset: 3px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 500; background: #E8B25C; color: #0A0C0F; padding: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.split-line { padding-bottom: 0.08em; margin-bottom: -0.08em; }

#curtain { animation: curtain-fallback 0.8s ease 3s forwards; }
@keyframes curtain-fallback { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes scan-sweep { 0% { transform: translateY(-20%); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(2000%); opacity: 0; } }
@keyframes pulse-dot { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

.nav-link { position: relative; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #A8AEB6; text-transform: uppercase; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: #E8B25C; transition: width 240ms cubic-bezier(0.16,1,0.3,1); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: #F5F1E8; }

.btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all 200ms ease; border-radius: 0; white-space: nowrap; }
legend { width: 100%; white-space: nowrap; }
.mono-row { gap: 12px; }
.mono-row > span:last-child { white-space: nowrap; flex-shrink: 0; }
.btn-primary { border: 1px solid #E8B25C; background: #E8B25C; color: #0A0C0F; }
.btn-primary:hover { background: #F5CA85; border-color: #F5CA85; color: #0A0C0F; transform: translateY(-1px); }
.btn-ghost { border: 1px solid #3A414B; background: transparent; color: #E8E4DC; }
.btn-ghost:hover { border-color: #E8B25C; color: #E8B25C; }

.form-field { width: 100%; background: transparent; border: none; border-bottom: 1px solid #3A414B; color: #F5F1E8; font-family: 'Instrument Sans', sans-serif; font-size: 17px; padding: 10px 0 12px; outline: none; transition: border-color 200ms ease; border-radius: 0; }
.form-field:focus { border-color: #E8B25C; }
textarea.form-field { resize: vertical; min-height: 110px; }
select.form-field { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #8A9099 50%), linear-gradient(135deg, #8A9099 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
select.form-field option { background: #0D0F13; color: #F5F1E8; }
.choice:has(input:checked) { border-color: #E8B25C !important; background: #E8B25C10 !important; color: #F5F1E8 !important; }

.case-open img { transition: transform 900ms cubic-bezier(0.16,1,0.3,1), opacity 300ms ease; }
.case-open:hover img, .case-open:focus-visible img { transform: scale(1.035); }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
  .hero-grid figure { max-width: 560px; }
  .kbd-hint { display: none !important; }
  .g-side.cases-head { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  #hero-scrub, #zoom-scrub { height: auto !important; }
  #hero-sticky, #zoom-scrub > div { position: relative !important; top: auto !important; }
}
@media (max-height: 600px) and (min-width: 1101px) {
  #hero-scrub, #zoom-scrub { height: auto !important; }
  #hero-sticky, #zoom-scrub > div { position: relative !important; top: auto !important; }
}
@media (max-width: 1140px) {
  .nav-links { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
}
@media (max-width: 900px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .g-2, .g-3, .g-4, .g-side, .g-row { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  .g-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .sec { padding-top: 96px !important; padding-bottom: 80px !important; }
  .d-only { display: none !important; }
  .sticky-col { position: relative !important; top: auto !important; }
  #hero-scrub { height: auto !important; }
  #hero-sticky { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; padding-top: 32px !important; }
  #zoom-scrub { height: auto !important; }
  #zoom-scrub > div { position: relative !important; top: auto !important; min-height: 0 !important; }
  .hero-strip { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .span-2 { grid-column: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  #curtain { display: none !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Clinical images: no drag, no long-press save menu on iOS */
#cases img, #hero-stack img, #lightbox img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.clinical, .clinical * { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* Crosshair cursor overlay on clinical imagery */
.clinical { position: relative; cursor: crosshair; }
.crosshair-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.crosshair-overlay::before, .crosshair-overlay::after { content: ''; position: absolute; background: #E8B25C; opacity: 0.5; }
.crosshair-overlay::before { left: var(--cx, 50%); top: 0; bottom: 0; width: 1px; }
.crosshair-overlay::after { top: var(--cy, 50%); left: 0; right: 0; height: 1px; }
.crosshair-readout { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); transform: translate(12px, -22px); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: #E8B25C; white-space: nowrap; }
@media (hover: none), (prefers-reduced-motion: reduce) { .crosshair-overlay { display: none !important; } .clinical { cursor: auto; } }

/* Text-roll nav / button hover (Lusion-style label swap, built via JS) */
.roll-wrap { display: inline-block; overflow: hidden; position: relative; vertical-align: top; line-height: 1.4; }
.roll-line { display: block; transition: transform 350ms cubic-bezier(.6,0,.2,1); }
.roll-dup { position: absolute; left: 0; top: 100%; }
.nav-link:hover .roll-line, .btn-primary:hover .roll-line, .btn-ghost:hover .roll-line { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .roll-line { transition: none !important; transform: none !important; } }

/* Decorative glyphs: pseudo-element so they are not read or contrast-checked as text */
.deco-glyph::before { content: attr(data-glyph); }

/* Print (also used to generate files/Dr-Shraddha-Supnekar-CV.pdf): light page, content only */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; }
  * { color: #1a1a1a !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; border-color: #d0d0d0 !important; }
  #site-nav, footer, #curtain, #gl-wrap, .skip, .btn-primary, .btn-ghost, #lightbox { display: none !important; }
  .clinical, canvas, #cases img { display: none !important; }
  [data-reveal], [data-stagger] > *, [data-split], [data-split] * { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  main section { padding-top: 18px !important; padding-bottom: 18px !important; break-inside: auto; }
  h1, h2, h3 { break-after: avoid; }
  li, .g-row { break-inside: avoid; }
  a { text-decoration: none !important; }
  img { filter: none !important; }
}

/* Case types: sticky scan only in the two-column layout */
@media (max-width: 900px) { .ct-fig { position: relative !important; top: auto !important; } }
@media (max-width: 900px) { .ct-list { padding-bottom: 0 !important; } }