:root {
    --sand:        #f3e1bd;
    --sand-bright: #fff2d4;
    --amber:       #e0a85a;
    --amber-deep:  #b07735;
    --rust:        #6b3a1c;
    --void:        #08070a;
    --bg-warm:     #14100c;
    --eye-blue:    #4ec5d4;

    --sand-soft:   color-mix(in oklab, var(--sand) 70%, transparent);
    --sand-faint:  color-mix(in oklab, var(--sand) 40%, transparent);
    --amber-glow:  color-mix(in oklab, var(--amber) 70%, transparent);
    --amber-faint: color-mix(in oklab, var(--amber) 35%, transparent);
    --amber-ghost: color-mix(in oklab, var(--amber) 18%, transparent);
  }

  * { box-sizing: border-box; }
  .sr-only-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
  html, body { margin: 0; padding: 0; }
  html {
    background: var(--void);
    overflow-x: clip;
  }
  body {
    min-height: 100vh;
    background:
      radial-gradient(ellipse 100% 80% at 50% 100%,
        color-mix(in oklab, var(--rust) 50%, var(--bg-warm)) 0%,
        color-mix(in oklab, var(--rust) 18%, var(--bg-warm)) 22%,
        var(--bg-warm) 50%,
        var(--void) 100%);
    color: var(--sand);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
    letter-spacing: 0.02em;
  }

  .layer { position: fixed; inset: 0; pointer-events: none; }

  #storm { z-index: 1; opacity: .9; }
  #storm.boost { opacity: 1; }

  .suns {
    position: fixed;
    bottom: 18vh;
    left: 0; right: 0;
    height: 60vh;
    z-index: 2;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .sun {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: sunRise 4s 600ms cubic-bezier(.2,.7,.2,1) forwards;
  }
  .sun.primary {
    width: 180px; height: 180px;
    background: radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--amber) 60%, var(--rust)) 0%,
      color-mix(in oklab, var(--amber) 40%, var(--rust)) 30%,
      color-mix(in oklab, var(--amber) 12%, transparent) 60%,
      transparent 78%);
    transform: translate(-280px, 60px);
    filter: blur(3px);
    mix-blend-mode: screen;
  }
  .sun.secondary {
    width: 90px; height: 90px;
    background: radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--amber) 50%, var(--rust)) 0%,
      color-mix(in oklab, var(--amber) 25%, var(--rust)) 40%,
      transparent 75%);
    transform: translate(320px, 110px);
    filter: blur(2.5px);
    mix-blend-mode: screen;
    animation-delay: 900ms;
  }
  @keyframes sunRise {
    0%   { opacity: 0; transform: var(--start, translate(0, 100px)); }
    100% { opacity: .35; }
  }

  .dunes { z-index: 3; bottom: 0; top: auto; height: 35vh; }
  .dune {
    position: absolute;
    left: -5%; right: -5%; bottom: 0;
    width: 110%;
    display: block;
  }
  .dune.back  { bottom: 18%; opacity: .55; filter: blur(0.6px); }
  .dune.mid   { bottom: 8%;  opacity: .75; }
  .dune.front { bottom: 0;   opacity: 1; }
  .dune-back-fill  { fill: color-mix(in oklab, var(--rust) 35%, var(--void)); }
  .dune-mid-fill   { fill: color-mix(in oklab, var(--rust) 50%, var(--void)); }
  .dune-front-fill { fill: color-mix(in oklab, var(--rust) 70%, var(--void)); }

  .dune.back  { animation: drift1 80s linear infinite; }
  .dune.mid   { animation: drift2 50s linear infinite; }
  @keyframes drift1 { from { transform: translateX(0); } to { transform: translateX(-3%); } }
  @keyframes drift2 { from { transform: translateX(0); } to { transform: translateX(-5%); } }

  .stars {
    z-index: 0;
    background-image:
      radial-gradient(1px 1px at 12% 18%, rgba(255,240,210,.6), transparent 60%),
      radial-gradient(1px 1px at 78% 9%,  rgba(255,240,210,.5), transparent 60%),
      radial-gradient(1.2px 1.2px at 33% 22%, rgba(255,240,210,.4), transparent 60%),
      radial-gradient(1px 1px at 88% 31%, rgba(255,240,210,.55), transparent 60%),
      radial-gradient(1px 1px at 60% 14%, rgba(255,240,210,.4), transparent 60%),
      radial-gradient(1px 1px at 8%  44%, rgba(255,240,210,.35), transparent 60%),
      radial-gradient(1px 1px at 92% 38%, rgba(255,240,210,.4), transparent 60%),
      radial-gradient(1.2px 1.2px at 48% 6%, rgba(255,240,210,.45), transparent 60%),
      radial-gradient(1px 1px at 22% 35%, rgba(255,240,210,.3), transparent 60%),
      radial-gradient(1px 1px at 70% 27%, rgba(255,240,210,.35), transparent 60%);
    background-size: 100% 100%;
    opacity: .55;
    animation: starBreathe 8s ease-in-out infinite;
  }
  @keyframes starBreathe { 0%,100% { opacity: .4; } 50% { opacity: .7; } }

  .haze {
    z-index: 4;
    bottom: 22vh; top: auto; height: 8vh;
    background: linear-gradient(0deg,
      color-mix(in oklab, var(--amber) 18%, transparent) 0%,
      transparent 100%);
    mix-blend-mode: screen;
    filter: blur(8px);
    animation: shimmer 6s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%, 100% { transform: scaleY(1) translateY(0); opacity: .6; }
    50%      { transform: scaleY(1.15) translateY(-4px); opacity: .9; }
  }

  .grain {
    z-index: 60;
    inset: -10%;
    opacity: 0.12;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.86 0 0 0 0 0.62 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    animation: grainShift 1.4s steps(6) infinite;
  }
  @keyframes grainShift {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-3%, 2%); }
    40%  { transform: translate(2%, -3%); }
    60%  { transform: translate(-2%, -2%); }
    80%  { transform: translate(3%, 2%); }
    100% { transform: translate(0,0); }
  }

  .vignette { z-index: 5; background: radial-gradient(ellipse at 50% 35%, transparent 45%, rgba(0,0,0,.78) 100%); }

  .hud { position: fixed; pointer-events: none; z-index: 40; width: 22px; height: 22px; border: 1px solid var(--amber-ghost); }
  .hud.tl { top: 14px; left: 14px;     border-right: 0; border-bottom: 0; }
  .hud.tr { top: 14px; right: 14px;    border-left: 0; border-bottom: 0; }
  .hud.bl { bottom: 14px; left: 14px;  border-right: 0; border-top: 0; }
  .hud.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

  .topbar {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 50;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }
  .topbar .right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    color: var(--sand);
  }
  .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 0 var(--amber-glow);
    animation: pulseRing 2.4s cubic-bezier(.4,0,.6,1) infinite;
  }
  @keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--amber) 70%, transparent); transform: scale(1); }
    70%  { box-shadow: 0 0 0 12px transparent; transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
  }

  main {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 130px 24px 180px;
    text-align: center;
  }

  .coords {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.42em;
    color: var(--amber);
    text-transform: uppercase;
    margin-bottom: 64px;
    display: flex;
    gap: 18px;
    align-items: center;
  }
  .coords .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--amber-deep); }
  .coords .label { color: var(--sand-soft); }
  .coords #pst-time { color: var(--amber); font-variant-numeric: tabular-nums; }

  .monogram {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 64px;
    --mglow: 0;
  }
  .monogram::before {
    content: "";
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--amber-glow) 0%, transparent 60%);
    opacity: calc(.12 + var(--mglow) * .28);
    filter: blur(28px);
    transition: opacity .8s ease;
    pointer-events: none;
  }
  .monogram .seal {
    position: relative;
    width: 144px;
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .monogram .seal:hover { transform: scale(1.04); }
  .monogram .seal .ring {
    position: absolute; inset: 0;
    border: 1px solid var(--sand-faint);
    border-radius: 50%;
  }
  .monogram .seal .dashed {
    position: absolute; inset: -14px;
    animation: spin 60s linear infinite;
  }
  .monogram .seal .dashed circle {
    fill: none;
    stroke: var(--sand-faint);
    stroke-width: 0.7;
    stroke-dasharray: 2 7;
  }
  .monogram .seal .ticks {
    position: absolute; inset: -26px;
    animation: spinReverse 120s linear infinite;
    opacity: .65;
  }
  .monogram .seal .ticks line { stroke: var(--amber); stroke-width: 0.5; }
  .monogram .seal .orbit {
    position: absolute; inset: -28px;
    animation: spin 28s linear infinite;
  }
  .monogram .seal .orbit circle.path {
    fill: none;
    stroke: color-mix(in oklab, var(--amber) 22%, transparent);
    stroke-width: 0.4;
    stroke-dasharray: 1 3;
  }
  .monogram .seal .orbit .planet {
    fill: var(--amber);
    filter: drop-shadow(0 0 4px var(--amber-glow));
  }
  .seal-art {
    position: relative;
    z-index: 1;
    width: 82px;
    height: 82px;
    display: block;
    overflow: visible;
    animation: spinReverse 80s linear infinite;
  }

  @keyframes spin        { to { transform: rotate(360deg); } }
  @keyframes spinReverse { to { transform: rotate(-360deg); } }

  .name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(96px, 22vw, 320px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--sand-bright);
    margin: 0 0 4px;
    text-shadow:
      0 0 80px color-mix(in oklab, var(--amber) 22%, transparent),
      0 2px 0 color-mix(in oklab, var(--amber-deep) 60%, transparent);
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .name .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) scale(.92) rotate(-2deg);
    filter: blur(18px);
  }
  .name:hover .ch.in {
    color: var(--sand-bright);
    text-shadow: 0 0 60px color-mix(in oklab, var(--amber) 70%, transparent);
    transition: color .4s ease, text-shadow .4s ease;
  }
  .name .ch.in {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
    filter: blur(0);
    transition:
      opacity 1.6s cubic-bezier(.2,.7,.2,1),
      transform 1.8s cubic-bezier(.2,.7,.2,1),
      filter 1.6s cubic-bezier(.2,.7,.2,1);
  }
  .name .ch:nth-child(1) { transition-delay: 0.55s; }
  .name .ch:nth-child(2) { transition-delay: 0.66s; }
  .name .ch:nth-child(3) { transition-delay: 0.77s; }
  .name .ch:nth-child(4) { transition-delay: 0.88s; }
  .name .ch:nth-child(5) { transition-delay: 0.99s; }
  .name .ch:nth-child(6) { transition-delay: 1.10s; }
  .name .ch:nth-child(7) { transition-delay: 1.21s; }

  .surname-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -16px;
  }
  .surname {
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(22px, 3.6vw, 48px);
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--sand-soft);
    cursor: default;
    position: relative;
    transition: color 0.6s ease, letter-spacing 0.8s cubic-bezier(.2,.7,.2,1), text-shadow 0.6s ease;
    text-shadow: none;
    white-space: nowrap;
  }
  .surname::after {
    content: '';
    position: absolute;
    inset: -40px -60px;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--amber-glow) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.3);
    transition: opacity .5s ease, transform .5s ease;
    z-index: -1;
  }
  .surname:hover { color: var(--sand); text-shadow: 0 0 20px color-mix(in oklab, var(--amber) 30%, transparent); }
  .surname:hover::after { opacity: 0.5; transform: scale(1); }
  .surname.bursting {
    animation: surnameBurst 1.5s cubic-bezier(.1,.7,.2,1) forwards;
  }
  @keyframes surnameBurst {
    0%   { color: var(--sand); letter-spacing: 0.45em; text-shadow: 0 0 20px color-mix(in oklab, var(--amber) 30%, transparent); filter: brightness(1); }
    30%  { color: var(--sand-bright); letter-spacing: 0.58em; text-shadow: 0 0 40px var(--amber-glow), 0 0 90px color-mix(in oklab, var(--amber) 50%, transparent); filter: brightness(1.5); }
    55%  { color: #ffffff; letter-spacing: 0.78em; text-shadow: 0 0 10px #fff, 0 0 60px var(--amber), 0 0 150px var(--amber-glow), 0 0 240px color-mix(in oklab, var(--amber) 30%, transparent); filter: brightness(2.5); }
    80%  { color: var(--sand-bright); letter-spacing: 0.52em; text-shadow: 0 0 30px var(--amber-glow); filter: brightness(1.1); }
    100% { color: var(--sand-soft); letter-spacing: 0.45em; text-shadow: none; filter: brightness(1); }
  }
  .surname.bursting::after { animation: burstHalo 1.5s ease-out forwards; }
  @keyframes burstHalo {
    0%   { opacity: .4; transform: scale(0.8); }
    45%  { opacity: 1;  transform: scale(2.8); }
    100% { opacity: 0;  transform: scale(4.2); }
  }

  .divider {
    margin: 40px 0 48px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(560px, 80%);
  }
  .divider .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sand-faint) 30%, var(--sand-faint) 70%, transparent);
  }
  .divider svg { width: 22px; height: 22px; }
  .divider svg path,
  .divider svg line { stroke: var(--amber); stroke-width: 1; fill: none; }
  .divider svg .draw {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: drawIn 2s 1.2s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .divider .draw:nth-child(2) { animation-delay: 1.35s; }
  .divider .draw:nth-child(3) { animation-delay: 1.50s; }
  .divider .draw:nth-child(4) { animation-delay: 1.65s; }
  .divider .draw:nth-child(5) { animation-delay: 1.80s; }
  @keyframes drawIn { to { stroke-dashoffset: 0; } }
  .divider .star {
    animation: starSpin 40s linear infinite;
    transform-origin: center;
  }
  @keyframes starSpin { to { transform: rotate(360deg); } }

  .transmission {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.6;
    color: var(--sand);
    max-width: 660px;
    margin: 0 auto;
    text-wrap: balance;
  }
  .transmission .em { color: var(--sand-bright); font-style: italic; }
  .transmission .resolve {
    display: block;
    margin-top: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--amber);
  }
  .transmission .resolve .blink {
    display: inline-block;
    animation: blink 1.6s steps(2) infinite;
    color: var(--amber);
  }
  @keyframes blink { 50% { opacity: 0; } }

  .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    max-width: 760px;
    margin: 72px auto 0;
  }
  .tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sand);
    padding: 8px 13px;
    border: 1px solid color-mix(in oklab, var(--sand) 20%, transparent);
    border-radius: 2px;
    background: color-mix(in oklab, var(--rust) 25%, transparent);
    backdrop-filter: blur(2px);
    transition: color .35s, border-color .35s, background .35s, box-shadow .35s, transform .35s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    opacity: 0;
    transform: translateY(20px) scale(.94);
    filter: blur(8px);
  }
  .tag.in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter 1s ease,
                color .35s, border-color .35s, background .35s, box-shadow .35s;
  }
  #tagcluster .tag:nth-child(1) { transition-delay: 1.20s; }
  #tagcluster .tag:nth-child(2) { transition-delay: 1.26s; }
  #tagcluster .tag:nth-child(3) { transition-delay: 1.32s; }
  #tagcluster .tag:nth-child(4) { transition-delay: 1.38s; }
  #tagcluster .tag:nth-child(5) { transition-delay: 1.44s; }
  #tagcluster .tag:nth-child(6) { transition-delay: 1.50s; }
  #tagcluster .tag:nth-child(7) { transition-delay: 1.56s; }
  #tagcluster .tag:nth-child(8) { transition-delay: 1.62s; }
  #tagcluster .tag:nth-child(9) { transition-delay: 1.68s; }
  .tag .glyph {
    color: var(--amber);
    font-size: 9px;
    transition: color .35s ease, transform .35s ease;
  }
  .tag:hover {
    color: var(--sand-bright);
    border-color: var(--amber);
    background: color-mix(in oklab, var(--amber) 12%, transparent);
    box-shadow:
      0 0 24px color-mix(in oklab, var(--amber) 30%, transparent),
      inset 0 0 0 1px color-mix(in oklab, var(--amber) 30%, transparent);
    transform: translateY(-2px) scale(1.02);
  }
  .tag:hover .glyph {
    color: var(--sand-bright);
    transform: rotate(180deg);
  }

  .scan-wrap { width: 100%; margin-top: 88px; }
  .scan {
    position: relative;
    width: min(460px, 70%);
    height: 1px;
    margin: 0 auto;
    background: color-mix(in oklab, var(--sand) 14%, transparent);
    overflow: visible;
  }
  .scan::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: 110px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in oklab, var(--amber) 30%, transparent) 25%,
      var(--sand-bright) 50%,
      color-mix(in oklab, var(--amber) 30%, transparent) 75%,
      transparent 100%);
    filter: blur(0.4px);
    box-shadow: 0 0 18px var(--amber-glow);
    animation: scan 5.5s cubic-bezier(.65,.05,.36,1) infinite;
  }
  @keyframes scan {
    0%   { transform: translateX(-110px); }
    100% { transform: translateX(500px); }
  }
  .scan-label {
    margin-top: 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--sand-soft);
    display: flex;
    justify-content: center;
    gap: 28px;
  }
  .scan-label .sep { color: var(--amber); }
  .scan-label .pct {
    color: var(--amber);
    min-width: 56px;
    display: inline-block;
    text-align: left;
  }

  .links {
    margin-top: 80px;
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }
  .links a, .links button {
    color: var(--sand);
    text-decoration: none;
    background: none;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    position: relative;
    padding: 6px 0;
    cursor: pointer;
    transition: color .35s ease;
  }
  .links a::after, .links button::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    height: 1px; width: 0;
    background: var(--amber);
    transition: width .35s ease, left .35s ease;
  }
  .links a:hover, .links button:hover { color: var(--sand-bright); }
  .links a:hover::after, .links button:hover::after { width: 100%; left: 0; }
  .links a:focus-visible, .links button:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 4px;
    border-radius: 2px;
  }
  .links .sep { color: var(--amber); opacity: .8; }

  .peets-wrap {
    margin-top: 32px;
    position: relative;
    display: inline-block;
    padding: 0;
  }
  .peets {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sand-bright);
    text-decoration: none;
    padding: 10px 22px 10px calc(22px + 0.28em);
    border: 1px solid color-mix(in oklab, var(--amber) 32%, transparent);
    border-radius: 2px;
    background: color-mix(in oklab, var(--bg-warm) 92%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: color .4s ease, border-color .4s ease, background .4s ease, box-shadow .4s ease, transform .35s ease;
    line-height: 1;
  }
  .peets:hover {
    color: var(--sand-bright);
    border-color: var(--amber);
    background: color-mix(in oklab, var(--bg-warm) 70%, transparent);
    box-shadow: 0 0 22px color-mix(in oklab, var(--amber) 28%, transparent);
    transform: translateY(-2px);
  }
  .peets:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 4px;
  }
  .bean {
    position: absolute;
    width: 32px;
    height: 28px;
    color: var(--amber-deep);
    pointer-events: none;
    transition: transform .8s cubic-bezier(.2,.7,.2,1), color .4s ease;
    z-index: 5;
  }
  .peets-wrap:hover .bean { color: var(--amber); }
  @keyframes bean-drift-a { 0%,100%{translate:0 0;}50%{translate:-4px -5px;} }
  @keyframes bean-drift-b { 0%,100%{translate:0 0;}50%{translate:5px -4px;} }
  @keyframes bean-drift-c { 0%,100%{translate:0 0;}50%{translate:-4px 5px;} }
  @keyframes bean-drift-d { 0%,100%{translate:0 0;}50%{translate:5px 4px;} }
  .bean.drift-a { animation: bean-drift-a 4.1s ease-in-out infinite; }
  .bean.drift-b { animation: bean-drift-b 3.7s ease-in-out infinite; animation-delay: -1.2s; }
  .bean.drift-c { animation: bean-drift-c 4.4s ease-in-out infinite; animation-delay: -0.6s; }
  .bean.drift-d { animation: bean-drift-d 3.9s ease-in-out infinite; animation-delay: -1.8s; }

  .reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition:
      opacity 1.6s cubic-bezier(.2,.7,.2,1),
      transform 1.6s cubic-bezier(.2,.7,.2,1),
      filter 1.6s cubic-bezier(.2,.7,.2,1);
  }

  @media (max-width: 640px) {
    .topbar { font-size: 9px; letter-spacing: 0.28em; }
    .topbar .right { padding: 6px 8px; }
    .topbar .right span:not(.pulse) { font-size: 9px; }
    main { padding: 110px 18px 140px; }
    .name { font-size: clamp(72px, 22vw, 200px); }
    .transmission { font-size: 17px; }
    .transmission br { display: none; }
    .links { gap: 18px; font-size: 10px; }
    .monogram { margin: 8px 0 52px; }
    .monogram .seal { width: 110px; height: 110px; }
    .coords { font-size: 9px; gap: 10px; letter-spacing: .3em; margin-bottom: 48px; }
  }
  @media (max-width: 380px) {
    .links { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
    .links .sep { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dune, .haze, .grain, .pulse,
    .monogram .seal .dashed, .monogram .seal .ticks, .monogram .seal .orbit, .seal-art,
    .divider .star, .transmission .resolve .blink,
    .sun, .stars, .bean { animation: none !important; }
    .divider svg .draw { animation: none !important; stroke-dashoffset: 0; }
    .reveal, .reveal.in {
      opacity: 1 !important; transform: none !important;
      filter: none !important; transition: none !important;
    }
    .name .ch, .name .ch.in {
      opacity: 1 !important; transform: none !important;
      filter: none !important; transition: none !important;
    }
    .tag, .tag.in {
      opacity: 1 !important; transform: none !important;
      filter: none !important;
    }
    .surname.bursting { animation: none !important; }
  }

  /* ── Dev Profile nav (top-left, mirrors the transmission widget) ───────────── */
  .devnav {
    position: fixed; top: 14px; left: 14px; z-index: 50;
    display: flex; align-items: center; gap: 5px;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--sand); text-decoration: none;
  }
  .devnav::before {
    content: ''; position: absolute; top: 0; left: 0; width: 22px; height: 22px;
    border-top: 1px solid var(--amber-ghost); border-left: 1px solid var(--amber-ghost);
    pointer-events: none;
  }
  .devnav-text { position: relative; }
  .devnav-text::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
    background: var(--amber); transform: scaleX(0); transform-origin: left;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .devnav-arrow { color: var(--amber); font-size: 16px; line-height: 1; transition: transform .35s ease; }
  .devnav:hover { color: var(--sand-bright); }
  .devnav:hover .devnav-text::after { transform: scaleX(1); }
  .devnav:hover .devnav-arrow { transform: translate(2px,-2px); }
  .devnav:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px; }

  @media (max-width: 640px) {
    .devnav { font-size: 9px; letter-spacing: 0.24em; gap: 7px; padding: 6px 9px; }
  }