:root{
    --void:#070b16; --midnight:#0c1322; --horizon:#111a30;
    --moonlight:#f5f1e4; --darkside:#1b2440;
    --silver:#c9d2e3; --slate:#7d89a4; --slate-dim:#525d78; --gold:#e8c88a;
    --hair:rgba(201,210,227,0.12); --card:rgba(255,255,255,0.028);
    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--mono); color:var(--silver);
    background:radial-gradient(120% 80% at 50% -10%, var(--horizon) 0%, var(--midnight) 45%, var(--void) 100%);
    background-attachment:fixed; min-height:100%;
    display:flex; justify-content:center; padding:clamp(20px,5vw,64px) 20px;
    -webkit-font-smoothing:antialiased;
  }
  .stars{position:fixed;inset:0;pointer-events:none;z-index:0}
  .star{position:absolute;border-radius:50%;background:var(--silver)}
  .panel{position:relative;z-index:1;width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center}

  /* ---- Hero: real moon photo ---- */
  .moon-wrap{
    position:relative; width:clamp(180px,52vw,268px); aspect-ratio:1;
    display:flex; align-items:center; justify-content:center;
    animation:rise 1.4s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes rise{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
  .moon-img{
    position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
  }

  .headline{text-align:center;margin-top:clamp(22px,4vw,34px)}
  .eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--slate);display:flex;align-items:center;justify-content:center;gap:8px}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--slate-dim);flex:none}
  .eyebrow.live .dot{background:var(--gold);box-shadow:0 0 10px 1px rgba(232,200,138,.8)}
  .phase{font-family:var(--serif);font-weight:300;font-size:clamp(38px,9vw,60px);line-height:1.02;letter-spacing:-.01em;color:var(--moonlight);margin:12px 0 0;font-variation-settings:"opsz" 144}
  .subhead{margin-top:12px;font-size:13px;color:var(--slate)}

  .grid{width:100%;margin-top:clamp(30px,5vw,44px);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
  .cell{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px 14px;background:var(--card)}
  .cell .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-dim)}
  .cell .v{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--silver);margin-top:8px;font-variant-numeric:tabular-nums}
  .cell .u{font-size:11px;color:var(--slate);margin-top:3px}
  @media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}

  .next{width:100%;margin-top:20px;padding:18px 20px;border:1px solid var(--hair);background:var(--card);display:flex;align-items:center;justify-content:space-between;gap:16px}
  .next .lead{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-dim)}
  .next .name{font-family:var(--serif);font-size:21px;color:var(--moonlight);margin-top:6px}
  .next .glyph{flex:none;width:34px;height:34px}
  .next .count{text-align:right}
  .next .count .big{font-family:var(--serif);font-size:26px;color:var(--gold);font-variant-numeric:tabular-nums}
  .next .count .lbl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-dim);margin-top:4px}

  .lunation{width:100%;margin-top:36px}
  .lun-title{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate-dim);text-align:center;margin-bottom:26px}
  .track{position:relative;height:96px;margin:0 6px}
  .rail{position:absolute;left:0;right:0;top:38px;height:1px;background:var(--hair)}
  .rail-fill{position:absolute;left:0;top:38px;height:1px;background:linear-gradient(90deg,var(--slate-dim),var(--gold))}
  .node{position:absolute;top:38px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
  .node svg{width:22px;height:22px;display:block}
  .node .nlabel{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);position:absolute;bottom:24px;white-space:nowrap}
  .node .ndate{font-size:9px;color:var(--slate-dim);position:absolute;top:24px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .now{position:absolute;top:38px;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center}
  .now .pin{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 2px rgba(232,200,138,.65);border:2px solid var(--void)}
  .now .nowlbl{position:absolute;top:20px;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
  @media(max-width:480px){.node .ndate{display:none}.node .nlabel{font-size:7.5px}}

  footer{width:100%;margin-top:40px;padding-top:18px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:10px;letter-spacing:.06em;color:var(--slate-dim)}
  footer a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--hair)}
  .note{width:100%;margin-top:10px;font-size:10.5px;line-height:1.5;color:var(--slate-dim)}
  .note:empty{display:none}
  @media(prefers-reduced-motion:reduce){.moon-wrap{animation:none}}