:root{--bg:#0b0b0f;--panel:#111218;--panel-2:#151726;--text:#e8e8ef;--muted:#a7a7b3;--accent:#c5b38c;--accent-2:#e7dec7;--border:#232335;}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(11,11,15,.8);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700}
.brand .logo{width:28px;height:28px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}
.nav .btn{padding:8px 14px;border-radius:12px;background:var(--accent);color:#fff}
.page{padding:40px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:16px;padding:16px;color:var(--text);text-decoration:none}
.site-footer{border-top:1px solid var(--border);padding:20px 0;margin-top:40px}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-links{display:flex;gap:12px}


a{color:var(--text)} a:hover{color:var(--accent-2)}

/* Timeline */
.timeline-wrap{position:relative;margin:24px 0 40px}
.timeline-line{position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--border)}
.event{position:relative;padding-left:56px;margin-bottom:18px}
.event::before{content:"";position:absolute;left:16px;top:16px;width:14px;height:14px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px rgba(197,179,140,.25)}
.event summary{list-style:none;cursor:pointer;font-weight:700;display:flex;align-items:center;gap:10px}
.event summary .year{color:var(--accent-2);font-weight:700;font-variant-numeric:tabular-nums}
.event details{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.event details[open]{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.event .meta{color:var(--muted);font-size:14px;margin-bottom:8px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:900px){.media-grid{grid-template-columns:1fr 1fr}}
.media-grid img{width:100%;border-radius:12px;border:1px solid var(--border);cursor:zoom-in}

/* Lightbox */
dialog.lightbox{border:none;border-radius:12px;padding:0;background:transparent}
dialog.lightbox::backdrop{background:rgba(0,0,0,.7)}
.lightbox img{max-width:90vw;max-height:85vh;display:block}
/* --- Palette (neutral) --- */
:root{
    --accent:#c5b38c;        /* muted gold */
    --accent-2:#e7dec7;      /* soft sand */
  }
  
  /* kill default blue links everywhere */
  a, .site-footer a, .footer-links a, .email-link { color: var(--text); }
  a:hover, .site-footer a:hover, .footer-links a:hover, .email-link:hover { color: var(--accent-2); }
  
  /* HERO background (CSS-only starfield; optionally add hero-stars.webp for richer look) */
  .page--hero{
    position: relative;
    padding: 56px 0 8px;
    background:
      radial-gradient(1200px 500px at 15% -10%, rgba(197,179,140,.10), transparent 60%),
      radial-gradient(900px 500px at 85% -10%, rgba(231,222,199,.08), transparent 60%),
      linear-gradient(180deg, rgba(12,12,18,.95), rgba(12,12,18,.99));
  }
  .page--hero::before{
    content:"";
    position:absolute; inset:0;
    background-image: url("../img/hero-stars.webp");
    background-size: cover; background-position:center;
    opacity:.18; pointer-events:none;
  }
  .hero-inner h1{ margin-bottom:.25rem; }
  .hero-inner .lede{ opacity:.9; }
  
  /* TIMELINE — modern look */
  .timeline-wrap.modern { position: relative; margin: 24px 0 40px; }
  .timeline-line { position:absolute; left:26px; top:0; bottom:0; width:2px; background: linear-gradient(var(--accent-2), transparent); opacity:.35; }
  .event{ position:relative; padding-left:64px; margin:18px 0; }
  .event::before{ content:""; position:absolute; left:18px; top:14px; width:14px; height:14px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent)); box-shadow:0 0 0 4px rgba(197,179,140,.22) }
  .event details{
    border:1px solid var(--border);
    background: linear-gradient(180deg, rgba(24,25,36,.7), rgba(18,19,28,.7));
    backdrop-filter: blur(6px);
    border-radius:16px; padding:14px 16px;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .event details[open]{ box-shadow: 0 10px 28px rgba(0,0,0,.35); transform: translateY(-1px); }
  .event summary{ list-style:none; cursor:pointer; display:flex; gap:12px; align-items:center; font-weight:700; }
  .event summary::-webkit-details-marker{ display:none; }
  .chip.year{ display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px;
    font-variant-numeric: tabular-nums; color:#111; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
  
  /* MEDIA: NFTs (one-line, compact) */
  .nft-row{ display:flex; gap:10px; align-items:center; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; }
  .nft-row img{
    width:16.66vw; max-width:240px; height:auto;
    border-radius:12px; border:1px solid var(--border);
  }
  
  /* MEDIA: Tarot screenshots (3 over 2; two rows together ≈ 1/3 screen) */
  .screens-5{ display:grid; gap:10px; }
  .screens-5 .row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
  .screens-5 .row:last-child{ grid-template-columns: repeat(2, 1fr); }
  .screens-5 img{
    height:16vh;           /* two rows ~32vh total ≈ ~1/3 of laptop screen */
    width:100%; object-fit: cover;
    border-radius:14px; border:1px solid var(--border);
    box-shadow: 0 8px 14px rgba(0,0,0,.25);
  }
  
  /* Lightbox keeps working */
  .media-grid img, .nft-row img, .screens-5 img{ cursor: zoom-in; }