/* Layout: full-bleed hero, intro and highlight bands edge to edge; reading sections in one column */
  /* Hierarchy: coral = lead, gold = secondary, pink/mauve = details, purple = surfaces */
  :root {
    --bg: #160e1c;
    --surface: #21142a;
    --surface-2: #2c1a37;
    --fg: #f1e9e6;
    --fg-muted: #a593a8;
    --gold: #E8B464;
    --coral: #E88B6A;
    --pink: #D86B78;
    --mauve: #C47BA8;
    --purple: #5E2D6E;
    --on-coral: #1a0f1f;
    --border: rgba(196, 123, 168, 0.14);
    --font-display: 'Shrikhand', 'Cooper Black', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --gutter: clamp(16px, 5vw, 72px);
    --sx: 1;
    --sy: 1;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #faf3ee; --surface: #f3e6e2; --surface-2: #ead6d6;
      --fg: #22122a; --fg-muted: #6e5a72;
      --gold: #b9832f; --coral: #c9603d; --pink: #b84a5a; --mauve: #96507f; --purple: #5E2D6E;
      --on-coral: #ffffff; --border: rgba(94, 45, 110, 0.14);
      color-scheme: light;
    }
  }
  :root[data-theme="light"] {
    --bg: #faf3ee; --surface: #f3e6e2; --surface-2: #ead6d6;
    --fg: #22122a; --fg-muted: #6e5a72;
    --gold: #b9832f; --coral: #c9603d; --pink: #b84a5a; --mauve: #96507f; --purple: #5E2D6E;
    --on-coral: #ffffff; --border: rgba(94, 45, 110, 0.14);
    color-scheme: light;
  }

  * { margin: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: clip; }
  body { background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.7; }
  .w { max-width: 1032px; margin: 0 auto; padding-inline: 24px; }
  a:focus-visible, .tl-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* Text shadow that follows the cursor, shared by all display headings */
  .shadow-4 {
    --d: 0.055em;
    text-shadow:
      calc(var(--d) * 1 * var(--sx)) calc(var(--d) * 1 * var(--sy)) 0 var(--coral),
      calc(var(--d) * 2 * var(--sx)) calc(var(--d) * 2 * var(--sy)) 0 var(--pink),
      calc(var(--d) * 3 * var(--sx)) calc(var(--d) * 3 * var(--sy)) 0 var(--mauve),
      calc(var(--d) * 4 * var(--sx)) calc(var(--d) * 4 * var(--sy)) 0 var(--purple);
  }
  .shadow-1 { text-shadow: calc(0.06em * var(--sx)) calc(0.06em * var(--sy)) 0 var(--purple); }
  .shadow-2 { text-shadow: calc(0.045em * var(--sx)) calc(0.045em * var(--sy)) 0 var(--pink), calc(0.09em * var(--sx)) calc(0.09em * var(--sy)) 0 var(--purple); }

  /* ── NAV ── */
  nav {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 16px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--mauve) 18%, transparent);
  }
  .nav-name { font-family: var(--font-display); font-size: 1.15rem; color: #E88B6A; text-shadow: 2px 2px 0 #5E2D6E; text-decoration: none; }
  .nav-links { display: flex; gap: 24px; list-style: none; padding: 0; flex-wrap: wrap; }
  .nav-links a { color: rgba(241, 233, 230, 0.7); text-decoration: none; font-size: 0.84rem; font-weight: 500; transition: color .2s; }
  .nav-links a:hover { color: #E8B464; }

  /* ── HERO (photo background, always dark) ── */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(90vh, 920px);
    display: flex; align-items: center; justify-content: flex-end;
    padding: 96px var(--gutter) 88px;
    background: #160e1c;
  }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; z-index: -2;
    transform: scale(1.06) translate(calc(var(--sx) * -0.45%), calc(var(--sy) * -0.45%)); transition: transform .4s ease-out; will-change: transform; }
  .hero-shade {
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to left, rgba(22,14,28,.88) 0%, rgba(22,14,28,.7) 34%, rgba(22,14,28,.1) 62%, rgba(22,14,28,0) 100%),
      linear-gradient(to top, #160e1c 0%, rgba(22,14,28,0) 30%);
  }
  .hero-text { width: min(50%, 680px); min-width: 0; }
  .hero-kicker { font-family: var(--font-mono); font-size: 0.82rem; color: #E8B464; margin-bottom: 20px; }
  .hero h1 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.6rem, 5.6vw, 6rem);
    line-height: 1.04; color: #E8B464;
    padding-bottom: 0.25em;
  }
  .hero h1 em { font-style: normal; color: #fff4e6; }
  .stripes { display: flex; flex-direction: column; gap: 5px; margin-top: 20px; max-width: 520px; }
  .stripes span { display: block; height: 9px; border-radius: 1px; transform-origin: left; animation: grow .9s cubic-bezier(.2,.8,.2,1) both; transition: width 3s cubic-bezier(.25,.8,.25,1); }
  .stripes span:nth-child(1) { background: #E8B464; width: 100%; animation-delay: .05s; }
  .stripes span:nth-child(2) { background: #E88B6A; width: 88%;  animation-delay: .12s; }
  .stripes span:nth-child(3) { background: #D86B78; width: 76%;  animation-delay: .19s; }
  .stripes span:nth-child(4) { background: #C47BA8; width: 64%;  animation-delay: .26s; }
  .stripes span:nth-child(5) { background: #5E2D6E; width: 52%;  animation-delay: .33s; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ── INTRO (below hero) ── */
  .intro {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center;
    padding: 72px var(--gutter) 88px;
  }
  .intro p { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.55; max-width: 34em; color: var(--fg); }
  .intro p strong { color: var(--coral); font-weight: 600; }

  /* ── PHOTOS ── */
  .photo { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 3px; background: var(--surface);
    box-shadow: 7px 7px 0 var(--coral), 14px 14px 0 var(--pink), 21px 21px 0 var(--mauve), 28px 28px 0 var(--purple); }
  .photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
  .photo-head { width: clamp(180px, 22vw, 280px); transform: rotate(-2deg); margin: 0 28px 28px 0; }
  .photo-sport { width: calc(100% - 28px); aspect-ratio: auto; height: 100%; min-height: 320px; transform: rotate(1.6deg); }
  .photo-sport img { object-position: 52% 50%; }
  .photo-solar { width: min(calc(100% - 44px), 320px); margin: 22px 0 30px; transform: rotate(-1.8deg); }

  /* ── PANELS (coral bands) ── */
  .panel { background: var(--coral); color: var(--on-coral); position: relative; overflow: hidden; }
  .panel::after { content: ''; position: absolute; right: -70px; bottom: -70px; width: 260px; height: 260px; border-radius: 50%; background: var(--gold); opacity: .55; }
  .panel > * { position: relative; z-index: 1; }
  .panel h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; color: #fff4e6; }

  .highlights { padding: 64px var(--gutter) 72px; }
  .highlights h2 { margin-bottom: 32px; }
  .proj-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .proj { background: var(--purple); color: #f6e9ee; padding: 26px 20px 20px; border-radius: 3px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform .25s, background .25s; }
  .proj::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; }
  .proj:nth-child(1)::before { background: var(--gold); }
  .proj:nth-child(2)::before { background: var(--pink); }
  .proj:nth-child(3)::before { background: var(--mauve); }
  .proj:nth-child(4)::before { background: var(--coral); }
  .proj:nth-child(5)::before { background: var(--gold); }
  .proj:nth-child(5) { background: transparent; border: 2px dashed rgba(255, 244, 230, 0.55); }
  .proj:nth-child(5):hover { background: rgba(94, 45, 110, 0.35); }
  .proj:hover { transform: translateY(-3px); background: #6d3680; }
  .proj-title { font-family: var(--font-display); font-size: clamp(1.2rem, 1.55vw, 1.5rem); line-height: 1.2; color: #fff4e6; }
  .proj-desc { color: rgba(246, 233, 238, 0.8); font-size: 0.95rem; flex: 1; }
  .proj .tag { background: rgba(255, 255, 255, 0.12); color: #f6e9ee; }

  .contact { margin-block: 40px 72px; padding: 48px 40px; border-radius: 4px; }
  .contact h2 { margin-bottom: 14px; }
  .contact p { max-width: 440px; margin-bottom: 26px; opacity: .85; }
  .contact-links { display: flex; flex-wrap: wrap; gap: 10px; }
  .contact-links a { background: var(--purple); color: #f6e9ee; text-decoration: none; font-family: var(--font-mono); font-size: 0.82rem; padding: 10px 16px; border-radius: 3px; transition: transform .2s; overflow-wrap: anywhere; }
  .contact-links a:hover { transform: translateY(-2px); }

  /* ── SECTIONS ── */
  section.block { padding-block: 72px; }
  .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 40px; }
  .sec-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 2.7rem); color: var(--coral); line-height: 1.1; }
  .sec-head .line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--purple), transparent); min-width: 40px; }

  .rv { transition: opacity .6s ease, transform .6s ease; }
  .js .rv:not(.v) { opacity: .001; transform: translateY(18px); }

  /* About */
  .about-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
  .about-text { color: var(--fg-muted); min-width: 0; }
  .about-text p + p { margin-top: 14px; }
  .about-text strong { color: var(--fg); font-weight: 500; }
  .facts { background: var(--surface); border-top: 3px solid var(--gold); padding: 8px 20px; margin-top: 24px; }
  .fact { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
  .fact:last-child { border-bottom: none; }
  .fact-label { color: var(--fg-muted); }
  .fact-val { font-weight: 500; color: var(--gold); text-align: right; }

  /* Experience */
  .tl { display: flex; flex-direction: column; }
  .tl-item { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 24px 20px; border-left: 3px solid var(--surface-2); cursor: pointer; transition: background .2s, border-color .2s; }
  .tl-item + .tl-item { margin-top: 6px; }
  .tl-item:hover { background: var(--surface); }
  .tl-item.open { background: var(--surface); border-left-color: var(--coral); }
  .tl-period { font-family: var(--font-mono); font-size: 0.78rem; color: var(--mauve); padding-top: 3px; font-variant-numeric: tabular-nums; }
  .tl-content { min-width: 0; }
  .tl-role { font-weight: 600; font-size: 1.02rem; display: flex; justify-content: space-between; gap: 12px; }
  .tl-role::after { content: '+'; color: var(--fg-muted); font-weight: 400; transition: transform .25s; }
  .tl-item.open .tl-role::after { transform: rotate(45deg); color: var(--coral); }
  .tl-company { color: var(--gold); font-size: 0.9rem; }
  .tl-detail { max-height: 0; overflow: hidden; transition: max-height .4s ease, margin .3s ease; color: var(--fg-muted); font-size: 0.92rem; }
  .tl-item.open .tl-detail { max-height: 400px; margin-top: 12px; }
  .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
  .tag { font-family: var(--font-mono); font-size: 0.7rem; padding: 3px 9px; background: color-mix(in srgb, var(--mauve) 16%, transparent); color: var(--mauve); border-radius: 2px; }

  .tl-soon { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 20px; border: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 3px; margin-bottom: 6px; }
  .tl-soon .tl-period { color: var(--gold); }
  .tl-soon-text { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); line-height: 1.3; }

  /* Education */
  .edu-row { display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--border); }
  .edu-main { min-width: 0; }
  .edu-degree { font-weight: 600; }
  .edu-school { color: var(--fg-muted); font-size: 0.9rem; }

  /* ── SUNSET SCENE (illustration, always dark) ── */
  .sunset {
    position: relative;
    
    height: clamp(340px, 52vw, 560px);
    background: #140820;
    touch-action: pan-y;
  }
  .sunset canvas {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  }
  .sunset { background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 22%, #140820 22%); }
  .sunset-hint, .sunset-sign {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(255, 236, 222, 0.6);
    pointer-events: none;
  }
  .sunset-hint { left: var(--gutter); transition: opacity .6s; }
  .sunset-sign { right: var(--gutter); }

  
  /* ── CURSOR ── */
  #glow { position: fixed; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--coral) 18%, transparent), transparent 70%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); left: -200px; top: -200px; }

  @media (max-width: 900px) {
    .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proj:nth-child(5) { grid-column: 1 / -1; }
  }
  @media (max-width: 680px) {
    .proj-grid { grid-template-columns: 1fr; }
    .w { padding-inline: 16px; }
    .nav-links { display: none; }
    .hero { min-height: 88vh; align-items: flex-end; justify-content: flex-start; padding-bottom: 48px; }
    .hero-bg { object-position: 32% 30%; }
    .hero-shade { background: linear-gradient(to top, #160e1c 0%, rgba(22,14,28,.85) 38%, rgba(22,14,28,0) 70%); }
    .hero-text { width: 100%; }
    .intro { grid-template-columns: 1fr; padding-block: 56px 72px; }
    .photo-head { width: 200px; }
    .about-cols { grid-template-columns: 1fr; gap: 36px; }
    .photo-sport { width: min(calc(100% - 28px), 340px); height: auto; aspect-ratio: 1 / 1; min-height: 0; }
    .tl-item, .tl-soon { grid-template-columns: 1fr; gap: 4px; padding: 20px 16px; }
    .edu-row { grid-template-columns: 1fr; gap: 4px; }
    section.block { padding-block: 56px; }
    .contact { padding: 36px 22px; }
    .sunset-hint { left: 16px; right: 16px; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
    .sunset-sign { right: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .stripes span { animation: none; }
    .js .rv:not(.v) { opacity: 1; transform: none; }
  }


  /* ── ATMOSPHERE ── */
  body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  /* Nav underline grow */
  .nav-links a {
    position: relative;
  }
  .nav-links a::after {
    content: '';
    position: absolute; left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--coral));
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .nav-links a:hover::after { transform: scaleX(1); }

  /* Hero entrance */
  .hero-kicker, .hero h1, .hero .stripes {
    animation: rise-in .9s cubic-bezier(.2,.8,.2,1) both;
  }
  .hero-kicker { animation-delay: .15s; }
  .hero h1 { animation-delay: .28s; }
  .hero .stripes { animation-delay: .48s; }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(28px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  .hero-bg {
    animation: hero-drift 18s ease-in-out infinite alternate;
  }
  @keyframes hero-drift {
    from { filter: saturate(1.05) contrast(1.02); }
    to { filter: saturate(1.15) contrast(1.06) brightness(1.04); }
  }

  /* Photo float */
  .photo {
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  }
  .photo:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02);
  }
  .photo-head:hover { transform: rotate(-0.5deg) translateY(-6px) scale(1.02); }
  .photo-sport:hover { transform: rotate(0.4deg) translateY(-6px) scale(1.015); }
  .photo-solar:hover { transform: rotate(-0.4deg) translateY(-4px) scale(1.02); }

  /* Staggered project cards */
  .js .proj-grid .proj {
    opacity: 0; transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease, background .25s;
  }
  .js .highlights.v .proj-grid .proj { opacity: 1; transform: translateY(0); }
  .js .highlights.v .proj-grid .proj:nth-child(1) { transition-delay: .05s; }
  .js .highlights.v .proj-grid .proj:nth-child(2) { transition-delay: .12s; }
  .js .highlights.v .proj-grid .proj:nth-child(3) { transition-delay: .19s; }
  .js .highlights.v .proj-grid .proj:nth-child(4) { transition-delay: .26s; }
  .js .highlights.v .proj-grid .proj:nth-child(5) { transition-delay: .33s; }

  /* Panel orb drift */
  .panel::after {
    animation: orb-drift 12s ease-in-out infinite alternate;
  }
  @keyframes orb-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-40px, -30px) scale(1.15); }
  }

  /* Contact magnetic feel */
  .contact-links a {
    position: relative;
    box-shadow: 4px 4px 0 transparent;
  }
  .contact-links a:hover {
    transform: translateY(-3px);
    box-shadow: 4px 4px 0 var(--gold);
  }

  /* Section line draw */
  .js .sec-head .line {
    transform: scaleX(0); transform-origin: left;
    transition: transform .8s cubic-bezier(.2,.8,.2,1) .15s;
  }
  .js .block.v .sec-head .line { transform: scaleX(1); }

  /* Soft scroll progress bar */
  #progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    z-index: 200;
    background: linear-gradient(90deg, var(--gold), var(--coral), var(--pink), var(--mauve));
    pointer-events: none;
    box-shadow: 0 0 12px color-mix(in srgb, var(--coral) 50%, transparent);
  }

  /* Theme toggle */
  .theme-btn {
    appearance: none; border: 1px solid rgba(232, 180, 100, 0.35);
    background: transparent; color: #E8B464;
    font-family: var(--font-mono); font-size: 0.72rem;
    padding: 6px 10px; border-radius: 3px; cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
  }
  .theme-btn:hover { background: rgba(232, 180, 100, 0.12); transform: translateY(-1px); }
  :root[data-theme="light"] nav {
    background: color-mix(in srgb, #faf3ee 82%, transparent);
  }
  :root[data-theme="light"] .nav-name { color: var(--coral); text-shadow: 2px 2px 0 var(--purple); }
  :root[data-theme="light"] .nav-links a { color: rgba(34, 18, 42, 0.65); }
  :root[data-theme="light"] .nav-links a:hover { color: var(--coral); }
  :root[data-theme="light"] .theme-btn { color: var(--coral); border-color: rgba(94, 45, 110, 0.25); }

  .nav-right { display: flex; align-items: center; gap: 18px; }

  @media (prefers-reduced-motion: reduce) {
    .hero-kicker, .hero h1, .hero .stripes, .hero-bg, .panel::after { animation: none; }
    .js .proj-grid .proj { opacity: 1; transform: none; transition: none; }
    .js .sec-head .line { transform: none; }
    body::before { display: none; }
  }