/* ==========================================================================
   SIGNAL — Sections: hero, bento, experience, work, skills, contact, footer
   ========================================================================== */

@layer sections {

  /* ======================================================================
     BACKDROP (WebGL + fallback mesh)
     ====================================================================== */
  .backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .backdrop__gl {
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    transition: opacity 1.2s var(--ease-out-quint);
  }

  .backdrop__gl.is-live { opacity: var(--mesh-opacity); }

  /* CSS mesh fallback (also visible under the shader for depth) */
  .backdrop__mesh {
    position: absolute;
    inset: -25%;
    filter: blur(90px) saturate(140%);
    opacity: 0.5;
  }

  .blob {
    position: absolute;
    inline-size: 46vmax;
    block-size: 46vmax;
    border-radius: 50%;
    mix-blend-mode: screen;
    animation: blob-drift var(--d, 26s) var(--ease-in-out) infinite alternate;
  }

  :root[data-theme="light"] .blob { mix-blend-mode: multiply; opacity: 0.5; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .blob { mix-blend-mode: multiply; opacity: 0.5; }
  }

  .blob--1 { background: radial-gradient(circle, var(--accent), transparent 65%); inset-block-start: -12%; inset-inline-start: -8%; --d: 24s; }
  .blob--2 { background: radial-gradient(circle, var(--iris), transparent 65%); inset-block-start: 30%; inset-inline-end: -14%; --d: 31s; animation-delay: -6s; }
  .blob--3 { background: radial-gradient(circle, var(--flare), transparent 65%); inset-block-end: -18%; inset-inline-start: 22%; --d: 28s; animation-delay: -12s; }
  .blob--4 { background: radial-gradient(circle, var(--aqua), transparent 65%); inset-block-start: 8%; inset-inline-start: 46%; --d: 35s; animation-delay: -18s; }

  @keyframes blob-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(8vw, 10vh, 0) scale(1.22); }
  }

  /* Faint engineering grid */
  .backdrop__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 90px 90px;
    opacity: 0.35;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%);
  }

  /* ======================================================================
     HERO
     ====================================================================== */
  .hero {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    align-content: center;
    padding-block: clamp(7rem, 14vh, 10rem) clamp(3rem, 8vh, 6rem);
    z-index: var(--z-content);
  }

  .hero__inner { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

  .hero__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
  }

  .hero__title {
    font-size: var(--step-7);
    line-height: 0.84;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    text-wrap: nowrap;
    font-variation-settings: "wdth" 92, "opsz" 96;
  }

  .hero__line {
    display: block;
    position: relative;
    overflow: hidden;
    padding-block-end: 0.06em;
  }

  /* Last line shares its row with the role chip, so it can't clip. */
  .hero__line--last {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.6vw, 1.5rem);
    flex-wrap: wrap;
    overflow: visible;
  }

  .hero__word--outline {
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.14vw, 2.4px) var(--ink);
  }

  /* Per-character kinetic entrance + pointer-reactive weight */
  .char {
    display: inline-block;
    translate: 0 110%;
    opacity: 0;
    animation: char-rise 1s var(--ease-out-expo) forwards;
    animation-delay: calc(var(--i) * 26ms + 120ms);
    transition: font-variation-settings 500ms var(--ease-out-quint),
                color 500ms var(--ease-out-quint);
    will-change: transform;
  }

  .char--space { inline-size: 0.28em; }

  @keyframes char-rise {
    to { translate: 0 0; opacity: 1; }
  }

  /* Role chip that slot-machines through titles */
  .role-chip {
    --row: clamp(2.4rem, 5.6vw, 4.6rem);
    display: inline-flex;
    /* The reel is taller than the chip; anchor it to the top or row 0 sits
       halfway out of frame. */
    align-items: flex-start;
    block-size: var(--row);
    padding-inline: clamp(0.6rem, 1.4vw, 1.2rem);
    border-radius: clamp(10px, 1.4vw, 18px);
    background: var(--brand);
    color: var(--on-brand);
    overflow: hidden;
    rotate: -2.2deg;
    box-shadow: 0 10px 40px -14px var(--brand);
    animation: chip-pop 0.9s var(--ease-spring) 0.75s both;
  }

  @keyframes chip-pop {
    from { opacity: 0; scale: 0.4; rotate: 8deg; }
    to { opacity: 1; scale: 1; rotate: -2.2deg; }
  }

  .role-chip__reel {
    display: grid;
    text-align: start;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.5vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1;
    transition: translate 620ms var(--ease-out-expo);
    /* One row per step — percentages would resolve against the whole reel. */
    translate: 0 calc(var(--reel, 0) * var(--row) * -1);
  }

  .role-chip__reel span {
    display: grid;
    place-items: center;
    block-size: var(--row);
    white-space: nowrap;
  }

  .hero__lede {
    max-width: 54ch;
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--ink-2);
    animation: fade-up 1s var(--ease-out-expo) 0.85s both;
  }

  .hero__lede b { color: var(--ink); font-weight: 600; }

  @keyframes fade-up {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    animation: fade-up 1s var(--ease-out-expo) 0.95s both;
  }

  /* .stat is shared with the certifications page — keep it here. */
  .stat { display: grid; gap: 0.2rem; align-content: start; }

  .stat__value {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .stat__value em {
    font-family: var(--font-display);
    font-style: normal;
    color: var(--accent);
  }

  .stat__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* Closes the hero column, left-aligned with everything above it. The rail
     is clipped so the dropping line stops at the cue's own box. */
  .hero__cue {
    --rail: 34px;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    /* Sets it apart from the buttons without opening a hole at the bottom
       of the hero. */
    margin-block-start: clamp(0.5rem, 1.8vw, 1.5rem);
    block-size: var(--rail);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    animation: fade-up 1s var(--ease-out-expo) 1.4s both;
  }

  .hero__cue i {
    display: block;
    flex: 0 0 auto;
    inline-size: 1px;
    block-size: var(--rail);
    background: linear-gradient(var(--accent), transparent);
    animation: cue-drop 1.9s var(--ease-in-out) infinite;
    transform-origin: top;
  }

  @keyframes cue-drop {
    0%   { transform: scaleY(0); opacity: 0; }
    45%  { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1) translateY(var(--rail)); opacity: 0; }
  }

  /* On laptop-height screens the hero was taller than the screen it sits on,
     so its own scroll-settle could never show it whole. Compressing the
     padding, the column gap and the display size (capped against height, not
     just width) brings it inside one viewport. Taller screens are untouched. */
  @media (max-height: 1000px) {
    /* Top padding stays clear of the fixed nav — trimming past ~5.5rem puts
       the header straight through the status pills. */
    .hero { padding-block: clamp(5.5rem, 11vh, 7rem) clamp(2rem, 4.5vh, 3rem); }
    .hero__inner { gap: clamp(1rem, 2.2vh, 1.75rem); }
    .hero__title { font-size: min(var(--step-7), 15svh); }
    .hero__cue { margin-block-start: clamp(0.4rem, 1vh, 0.9rem); }
  }

  @media (max-width: 720px) {
    .hero__title { text-wrap: wrap; }
    /* No keyboard, no point advertising a keyboard shortcut. */
    .hero__cta [data-palette-open] { display: none; }
  }

  /* ======================================================================
     BENTO / ABOUT
     ====================================================================== */
  .bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(0.75rem, 1.4vw, 1.15rem);
  }

  .bento > * { grid-column: span 12; }

  @media (min-width: 760px) {
    .bento .b-intro  { grid-column: span 8; grid-row: span 2; }
    .bento .b-clock  { grid-column: span 4; }
    .bento .b-role   { grid-column: span 4; }
    .bento .b-metric { grid-column: span 4; }
    .bento .b-edu    { grid-column: span 6; }
    .bento .b-stack  { grid-column: span 6; }
  }

  @media (min-width: 1100px) {
    .bento .b-intro  { grid-column: span 6; grid-row: span 2; }
    .bento .b-clock  { grid-column: span 3; }
    .bento .b-role   { grid-column: span 3; }
    .bento .b-edu    { grid-column: span 6; }
    .bento .b-metric { grid-column: span 2; }
    .bento .b-stack  { grid-column: span 6; }
  }

  .b-intro { display: grid; align-content: space-between; gap: 1.5rem; }

  .b-intro__body { display: grid; gap: 1rem; }

  .b-intro__body p {
    font-size: var(--step-1);
    line-height: 1.45;
  }

  .b-intro__sig {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* Live clock */
  .clock {
    display: grid;
    gap: 0.35rem;
    font-family: var(--font-mono);
  }

  .clock__time {
    font-size: var(--step-3);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .clock__time .sep { color: var(--accent); animation: blink 1s steps(2) infinite; }

  @keyframes blink { 50% { opacity: 0.2; } }

  .clock__zone { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

  .map-dot {
    position: relative;
    margin-block-start: 0.75rem;
    block-size: 54px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
    background-size: 9px 9px;
    overflow: hidden;
  }

  .map-dot::after {
    content: "";
    position: absolute;
    inset-block-start: 58%;
    inset-inline-start: 68%;
    inline-size: 8px;
    block-size: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--flare);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--flare) 60%, transparent);
    animation: live-ping 2.4s var(--ease-out-quint) infinite;
  }

  /* Metric tiles */
  .b-metric { display: grid; align-content: center; gap: 0.3rem; text-align: start; }

  .b-metric__value {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.9;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .b-metric__value sup {
    font-size: 0.42em;
    vertical-align: super;
    color: var(--accent);
    letter-spacing: 0;
  }

  .b-metric__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* GPA ring */
  .b-edu { display: grid; gap: 1.25rem; grid-template-columns: auto 1fr; align-items: center; }

  @media (max-width: 480px) { .b-edu { grid-template-columns: 1fr; } }

  .ring { position: relative; inline-size: 92px; block-size: 92px; flex: none; }
  .ring svg { rotate: -90deg; overflow: visible; }
  .ring__track { fill: none; stroke: var(--line); stroke-width: 6; }
  .ring__fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 55%, transparent));
    transition: stroke-dashoffset 1.6s var(--ease-out-expo);
  }
  .is-revealed .ring__fill { stroke-dashoffset: calc(226 - (226 * var(--ratio, 0.9))); }

  .ring__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: -0.04em;
    color: var(--ink);
  }
  .ring__label small { font-family: var(--font-mono); font-size: 0.5em; font-weight: 400; letter-spacing: 0.1em; color: var(--ink-3); }

  .b-edu__body h4 { margin-block-end: 0.35rem; }
  .b-edu__body p { font-size: var(--step--1); }

  /* Stack strip */
  .b-stack__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-block-start: 0.35rem;
  }

  .tool {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-3);
    font-size: var(--step--1);
    color: var(--ink-2);
    transition: transform var(--t-fast) var(--ease-spring),
                border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  }

  .tool:hover {
    transform: translateY(-3px) rotate(-1.5deg);
    border-color: var(--accent);
    color: var(--ink);
  }

  .tool i {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 2px;
    background: var(--dot, var(--accent));
    flex: none;
  }

  /* ======================================================================
     EXPERIENCE — pinned horizontal scroll
     ====================================================================== */
  .xp { position: relative; }

  .xp__pin {
    position: sticky;
    inset-block-start: 0;
    block-size: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding-block: clamp(5.5rem, 12vh, 8rem) clamp(1.5rem, 4vh, 3rem);
    overflow: hidden;
  }

  /* min-block-size:0 stops the 1fr row from growing past the pinned viewport */
  .xp__viewport {
    overflow: hidden;
    display: flex;
    align-items: center;
    min-block-size: 0;
  }

  .xp__track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding-inline: var(--gutter);
    will-change: transform;
    transform: translate3d(calc(var(--x, 0) * -1px), 0, 0);
  }

  .xp-card {
    flex: 0 0 auto;
    inline-size: min(86vw, 560px);
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: color-mix(in oklab, var(--surface-solid) 66%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-mid), transform var(--t-mid) var(--ease-out-expo);
  }

  .xp-card::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
  }

  .xp-card:hover { border-color: var(--line-strong); }

  .xp-card__no {
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--line-strong);
  }

  .xp-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .xp-card__meta .dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--ink-3); }
  .xp-card__meta .now { color: var(--on-brand); background: var(--brand); padding: 0.15rem 0.5rem; border-radius: 4px; }

  .xp-card h3 { font-size: var(--step-2); }
  .xp-card__org { font-size: var(--step-0); color: var(--accent); font-weight: 500; }

  .xp-card ul { display: grid; gap: 0.7rem; }

  .xp-card li {
    position: relative;
    padding-inline-start: 1.35rem;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--ink-2);
  }

  .xp-card li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.62em;
    inset-inline-start: 0;
    inline-size: 0.5rem;
    block-size: 1px;
    background: var(--accent);
  }

  .xp-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.25rem; }

  .xp-card__tags span {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-3);
  }

  .xp__rail {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: var(--gutter);
  }

  .xp__rail-track {
    flex: 1;
    block-size: 2px;
    background: var(--line);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }

  .xp__rail-fill {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
  }

  .xp__rail-label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
  }

  /* Short viewports: the pinned card has to fit in one screen, so tighten it. */
  @media (max-height: 880px) and (min-width: 860px) {
    .xp__pin { padding-block: clamp(5rem, 9vh, 6rem) clamp(0.75rem, 2vh, 1.5rem); gap: 0.75rem; }
    /* The strapline is decorative — the cards need the vertical room more. */
    .xp .sec-head__note { display: none; }
    .xp-card { padding: clamp(1.1rem, 2vw, 1.6rem); gap: 0.55rem; }
    .xp-card__no { font-size: var(--step-3); }
    .xp-card h3 { font-size: var(--step-1); }
    .xp-card__org { font-size: var(--step--1); }
    .xp-card ul { gap: 0.5rem; }
    .xp-card li { font-size: var(--step--2); line-height: 1.5; }
  }

  /* Vertical fallback when pinning is off */
  .xp.is-static .xp__pin { position: static; block-size: auto; padding-block-end: 0; }
  .xp.is-static .xp__viewport { overflow: visible; }
  .xp.is-static .xp__track {
    transform: none;
    flex-direction: column;
    padding-inline: 0;
  }
  .xp.is-static .xp-card { inline-size: 100%; }
  .xp.is-static .xp__rail { display: none; }

  /* ======================================================================
     WORK — editorial hover list
     ====================================================================== */
  .work { position: relative; }

  .work__list { border-block-start: 1px solid var(--line); }

  .work__row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    padding-block: clamp(1.25rem, 2.6vw, 2.1rem);
    border-block-end: 1px solid var(--line);
    isolation: isolate;
    transition: padding-inline var(--t-mid) var(--ease-out-expo);
  }

  .work__row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--surface-2);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 480ms var(--ease-out-expo);
  }

  @media (hover: hover) {
    .work__row:hover { padding-inline: clamp(0.5rem, 1.5vw, 1.5rem); }
    .work__row:hover::before { transform: scaleY(1); transform-origin: 50% 0%; }
  }

  .work__no {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-3);
    align-self: start;
    padding-block-start: 0.5em;
  }

  .work__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4.4vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--ink);
    transition: color var(--t-mid) var(--ease-out-quint),
                font-variation-settings var(--t-mid) var(--ease-out-quint);
  }

  .work__row:hover .work__title { color: var(--accent); font-variation-settings: "wdth" 92; }

  .work__sub {
    display: block;
    margin-block-start: 0.45rem;
    max-width: 48ch;
    font-size: var(--step--1);
    color: var(--ink-2);
  }

  .work__role {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-brand);
    background: var(--brand);
    padding: 0.3rem 0.65rem;
    border-radius: var(--r-xs);
    white-space: nowrap;
  }

  .work__role--alt { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }

  .work__arrow {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-3);
    transition: transform 420ms var(--ease-spring), background var(--t-fast),
                color var(--t-fast), border-color var(--t-fast);
  }

  .work__row:hover .work__arrow {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    transform: rotate(-45deg) scale(1.06);
  }

  @media (max-width: 720px) {
    .work__row { grid-template-columns: auto 1fr auto; }
    .work__role { display: none; }
  }

  /* Floating preview card that follows the cursor */
  .work__peek {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 40;
    inline-size: 300px;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    scale: 0.85;
    translate: -50% -50%;
    transition: opacity 320ms var(--ease-out-quint), scale 420ms var(--ease-spring);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line-strong);
    will-change: transform;
  }

  .work__peek.is-live { opacity: 1; scale: 1; }

  .work__peek-face {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: space-between;
    padding: 1.1rem;
    opacity: 0;
    transition: opacity 260ms var(--ease-out-quint);
    background: var(--peek-bg, linear-gradient(140deg, #222, #111));
    color: #fff;
  }

  .work__peek-face.is-active { opacity: 1; }

  .work__peek-face h5 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .work__peek-face .k {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .work__peek-face .big {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
  }

  @media (hover: none), (pointer: coarse), (max-width: 900px) {
    .work__peek { display: none; }
  }

  /* ======================================================================
     SKILLS — physics playground
     ====================================================================== */
  .skills__layout {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: 1fr;
  }

  @media (min-width: 1000px) {
    .skills__layout { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
  }

  .play {
    position: relative;
    min-block-size: clamp(360px, 52vh, 540px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background:
      radial-gradient(ellipse 70% 60% at 50% 110%, var(--accent-soft), transparent 70%),
      var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
  }

  .play:active { cursor: grabbing; }

  .play__hint {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    pointer-events: none;
  }

  .play__tools {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    /* Above the chips so the controls stay clickable once they pile up. */
    z-index: 6;
    display: flex;
    gap: 0.4rem;
  }

  .play__tools .icon-btn {
    background: color-mix(in oklab, var(--bg-3) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .chip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--bg-3);
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: grab;
  }

  .chip.is-held { cursor: grabbing; z-index: 5; }

  .chip[data-tone="1"] { background: var(--brand); color: var(--on-brand); border-color: transparent; font-weight: 600; }
  .chip[data-tone="2"] { border-color: var(--accent); color: var(--accent); }
  .chip[data-tone="3"] { background: var(--ink); color: var(--bg); border-color: transparent; }

  /* Static grid fallback when physics is disabled */
  .play.is-static {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-block-size: auto;
    cursor: default;
  }
  .play.is-static .chip { position: static; }
  .play.is-static .play__hint,
  .play.is-static .play__tools { display: none; }

  /* Proficiency meters */
  .meters { display: grid; align-content: start; gap: 1.15rem; }

  .meter { display: grid; gap: 0.45rem; }

  .meter__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--step--1);
  }

  .meter__top b { font-weight: 600; color: var(--ink); }
  .meter__top span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

  .meter__track {
    block-size: 6px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
  }

  .meter__fill {
    block-size: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--brand));
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 1.3s var(--ease-out-expo) var(--d, 0s);
  }

  .is-revealed .meter__fill { transform: scaleX(var(--v, 0.8)); }

  /* Languages */
  .langs { display: grid; gap: 0.15rem; margin-block-start: 0.5rem; }

  .lang {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6rem;
    border-block-end: 1px dashed var(--line);
    font-size: var(--step--1);
  }
  .lang:last-child { border-block-end: 0; }
  .lang b { font-weight: 500; color: var(--ink); }
  .lang span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

  /* ======================================================================
     CREDENTIALS STRIP
     ====================================================================== */
  .creds {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .creds__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .cred-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-3);
    white-space: nowrap;
    transition: transform var(--t-mid) var(--ease-spring), border-color var(--t-fast), box-shadow var(--t-mid);
  }

  .cred-chip:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }

  .cred-chip__mark {
    display: grid;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: 50%;
    background: var(--c, var(--accent));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex: none;
  }

  .cred-chip__body { display: grid; line-height: 1.25; }
  .cred-chip__body b { font-size: var(--step--1); font-weight: 500; color: var(--ink); }
  .cred-chip__body span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

  /* ======================================================================
     CONTACT
     ====================================================================== */
  .contact { position: relative; }

  .contact__big {
    font-size: var(--step-7);
    line-height: 0.86;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    margin-block-end: clamp(1.5rem, 4vw, 3rem);
    font-variation-settings: "wdth" 92, "opsz" 96;
  }

  .contact__big .out { color: transparent; -webkit-text-stroke: clamp(1px, 0.13vw, 2.2px) var(--ink); }

  .contact__grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .contact-link {
    display: grid;
    gap: 0.5rem;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--t-fast), transform 460ms var(--ease-out-expo);
  }

  .contact-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--brand);
    transform: translateY(101%);
    transition: transform 520ms var(--ease-out-expo);
  }

  .contact-link:hover { transform: translateY(-5px); border-color: transparent; }
  .contact-link:hover::before { transform: translateY(0); }
  .contact-link:hover,
  .contact-link:hover .contact-link__k,
  .contact-link:hover .contact-link__v { color: var(--on-brand); }

  .contact-link__k {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    transition: color var(--t-fast);
  }

  .contact-link__v {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--step-1);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    word-break: break-word;
    transition: color var(--t-fast);
  }

  .contact-link__v svg { flex: none; inline-size: 1rem; block-size: 1rem; transition: transform var(--t-mid) var(--ease-spring); }
  .contact-link:hover .contact-link__v svg { transform: translate(3px, -3px); }

  /* ======================================================================
     FOOTER
     ====================================================================== */
  .footer {
    position: relative;
    z-index: var(--z-content);
    padding-block: clamp(3rem, 6vw, 5rem) 0;
    border-block-start: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg-2) 90%, transparent);
  }

  .footer__top {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding-block-end: clamp(2rem, 4vw, 3rem);
  }

  .footer__col { display: grid; align-content: start; gap: 0.6rem; }

  .footer__col h5 {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-block-end: 0.35rem;
  }

  .footer__col a,
  .footer__col p {
    font-size: var(--step--1);
    color: var(--ink-2);
    transition: color var(--t-fast), translate var(--t-fast) var(--ease-out-quint);
  }

  .footer__col a:hover { color: var(--accent); translate: 4px 0; }

  .footer__wordmark {
    display: block;
    inline-size: 100%;
    font-family: var(--font-display);
    /* Tuned so the six caps run nearly edge-to-edge of the shell at any width. */
    font-size: clamp(2.5rem, 28vw, 26rem);
    font-weight: 800;
    line-height: 0.78;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
    user-select: none;
    white-space: nowrap;
    transition: color 600ms var(--ease-out-quint);
  }

  .footer__wordmark:hover { color: var(--accent-soft); }

  .footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    border-block-start: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-3);
  }

  .footer__bar a { color: var(--ink-2); }
  .footer__bar a:hover { color: var(--accent); }

  /* ======================================================================
     FUNKY MODE (unlocked by the Konami code)
     ====================================================================== */
  html.is-funky .backdrop {
    filter: saturate(2.1) contrast(1.15);
    animation: funky-hue 7s linear infinite;
  }

  @keyframes funky-hue {
    to { filter: saturate(2.1) contrast(1.15) hue-rotate(360deg); }
  }

  html.is-funky .card,
  html.is-funky .xp-card { animation: funky-wobble 4.2s var(--ease-in-out) infinite; }
  html.is-funky .card:nth-child(even) { animation-delay: -1.4s; }

  @keyframes funky-wobble {
    0%, 100% { rotate: -0.55deg; }
    50% { rotate: 0.55deg; }
  }

  html.is-funky .work__title { animation: funky-squish 3.1s var(--ease-in-out) infinite; }

  @keyframes funky-squish {
    0%, 100% { font-variation-settings: "wdth" 100; }
    50% { font-variation-settings: "wdth" 78; }
  }

  html.is-funky .ticker { --dur: 12s; }

  /* ======================================================================
     CONSOLE EASTER EGG
     ====================================================================== */
  .konami-flash {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
    background: var(--brand);
    mix-blend-mode: difference;
    animation: konami 700ms var(--ease-out-quint) forwards;
  }

  @keyframes konami {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
  }

  /* Confetti particles used by easter eggs */
  .confetti {
    position: fixed;
    z-index: var(--z-overlay);
    inline-size: 8px;
    block-size: 14px;
    pointer-events: none;
    will-change: transform, opacity;
  }
}