main { position: relative; }
section { position: relative; min-height: 100vh; overflow: clip; }

/* backgrounds */
.scrub-bg { position: absolute; inset: 0; z-index: 0; }
.scrub-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,.42), rgba(8,8,10,.6)); }
/* screen-3's collage is bright — darken it a touch more for panel legibility */
#screen-3 .scrub-bg::after {
  background: linear-gradient(180deg, rgba(8,8,10,.5), rgba(8,8,10,.78)); }

/* content wrapper centers the islands */
.screen-content { position: relative; z-index: 1; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 8vh 6vw; }

/* ───────── islands: one in focus at a time ─────────
   Fallback (no JS / reduced-motion / mobile): all stacked, all visible.
   Scrub-active (.swap added by JS): stacked in one grid cell, only .is-active shows. */
.islands { width: 100%; max-width: 60rem;
  display: flex; flex-direction: column; gap: 1.5rem; align-items: stretch; }
.islands.swap { display: grid; place-items: center; }
.islands.swap .island { grid-area: 1 / 1; width: 100%;
  opacity: 0; transform: translateY(1.5rem) scale(.99); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease; }
.islands.swap .island.is-active { opacity: 1; transform: none; pointer-events: auto; }

.island { padding: 2.1rem 2.4rem; display: grid; gap: 1.15rem; align-content: start; }

/* ───────── SCREEN 1 ───────── */
.hero-head { display: flex; align-items: center; gap: 1.2rem; }
.headshot { border-radius: 50%; width: 104px; height: 104px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.25); flex: none; }
#screen-1 h1 { font-size: var(--step-4); }
.island-title { font-size: var(--step-3); color: var(--accent); }
.method { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; font-size: 1.18rem; line-height: 1.5; }
.method li { color: var(--fg); }
.method strong { color: var(--accent); font-weight: 650; }
.frameworks { color: var(--muted); margin: 0; }
.teaser { margin: 0; color: var(--fg); font-weight: 600; }

/* ───────── SCREEN 2 ───────── */
.tl-node h2 { font-size: var(--step-2); color: var(--fg); }
.tl-node h2 .yr { font-family: var(--mono); color: var(--accent); font-weight: 600;
  letter-spacing: .01em; }
.tl-node > p { margin: 0; color: var(--muted); font-size: 1.15rem; line-height: 1.5; }
.tl-node p strong { color: var(--fg); font-weight: 600; }
.tl-role { color: var(--accent) !important; font-weight: 650; font-size: 1.2rem; }
.tl-node.is-focus { border-color: rgba(110,231,255,.5);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 0 0 1px rgba(110,231,255,.22); }
.achievements { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .8rem; }
.achievements li { color: var(--muted); font-size: 1.08rem; line-height: 1.45;
  position: relative; padding-left: 1.3rem; }
.achievements li::before { content: "›"; position: absolute; left: .1rem; top: -.02em;
  color: var(--accent); font-weight: 700; }
.achievements b { color: var(--fg); font-weight: 650; }

/* ───────── SCREEN 3 ───────── */
.ask { font-size: var(--step-2); margin: 0; color: var(--fg); font-weight: 600; line-height: 1.3; }
.note { color: var(--muted); margin: 0; font-size: 1.15rem; line-height: 1.55; }
.frameworks, .teaser { font-size: 1.1rem; line-height: 1.5; }

#contact-form { display: grid; gap: .75rem; }
.form-title { margin: 0 0 .25rem; font-weight: 650; font-size: var(--step-1); }
#contact-form .field { display: grid; gap: .3rem; color: var(--muted); font-size: .95rem; }
#contact-form input, #contact-form textarea { font: inherit; color: var(--fg);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: .45rem; padding: .6rem .7rem; }
#contact-form input:focus, #contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.turnstile-widget:empty { display: none; }
#contact-form button { justify-self: start; font: inherit; font-weight: 650; cursor: pointer;
  padding: .65rem 1.3rem; border: 0; border-radius: .5rem; background: var(--accent); color: #00343d; }
#contact-form[data-state="loading"] button { opacity: .6; pointer-events: none; }
#contact-form .form-status { min-height: 1.1em; margin: 0; font-size: .9rem; }
#contact-form[data-state="success"] .form-status { color: var(--accent); }
#contact-form[data-state="error"] .form-status { color: #ff9b9b; }

/* persistent contact menu — fixed top-right on every screen */
.site-nav { position: fixed; top: 1rem; right: 1rem; z-index: 50;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100vw - 2rem);
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(11,11,13,.55); border: 1px solid var(--panel-border);
  -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%);
  font-weight: 600; font-size: .92rem; }
.site-nav a { color: var(--fg); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.cv-download { color: var(--accent); padding: .35rem .85rem; border: 1px solid var(--accent);
  border-radius: 999px; text-decoration: none; }
.cv-download:hover { background: rgba(110,231,255,.12); }
.credentials { color: var(--muted); font-size: .9rem; margin: 0; font-family: var(--mono);
  letter-spacing: .02em; }

/* ───────── responsive / motion ───────── */
@media (max-width: 700px) {
  #screen-1, #screen-2, #screen-3 { min-height: 100svh; }
  .screen-content { align-items: flex-start; padding: 9.5rem 6vw 3rem; }
  .island { padding: 1.6rem 1.6rem; }
  .hero-head { display: grid; justify-items: center; gap: 1rem; text-align: center; }
  #screen-1 .eyebrow { text-align: center; font-size: .74rem; }
  .headshot { width: 6rem; height: 6rem; }
  #screen-1 h1 { font-size: clamp(2.2rem, 10vw, 3.1rem); line-height: 1.08; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .site-nav { left: .75rem; right: .75rem; top: .75rem;
    justify-content: center; gap: .65rem; border-radius: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .islands.swap .island { transition: none; }
}