:root{
  --bg: #0b0e14;
  --text: #e6e9ef;
  --muted: #9aa4b2;
  --card: #121826;
  --link: #7aa2f7;
  --accent: #89b4fa;
  --border: #1e2a3a;
  --code: #e0def4;
  --shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --text:#0b1221; --muted:#586174; --card:#f6f8fb;
    --link:#1e66f5; --accent:#336dff; --border:#e8eef6; --code:#2b2f42;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:860px;margin:0 auto;padding:0 16px}

.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:100;backdrop-filter:saturate(180%) blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.brand{display:flex;align-items:center;font-weight:800;gap:.6rem;font-size:1.05rem;letter-spacing:.02em}
.brand .avatar{width:28px;height:28px;border-radius:50%;border:1px solid var(--border)}
.nav{display:flex;gap:1rem;align-items:center}
#theme-toggle{font:inherit;border:1px solid var(--border);background:var(--card);color:var(--text);padding:.35rem .6rem;border-radius:8px;cursor:pointer}
#theme-toggle:hover{box-shadow:var(--shadow)}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--card);color:var(--text);padding:.4rem .6rem;border-radius:8px;border:1px solid var(--border)}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:var(--shadow);margin:16px 0}
.card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem}
.meta{color:var(--muted);font-size:.9rem}
.post-title{margin:.25rem 0 0 0; font-size:1.15rem}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tag{font-size:.75rem;color:var(--muted);border:1px solid var(--border);padding:.05rem .45rem;border-radius:999px}
.post-body p{margin:.5rem 0}
.post-body pre{background:#0f1729;color:var(--code);padding:.75rem;border-radius:8px;overflow:auto}
.post-body code{background:#0f1729;color:var(--code);padding:.1rem .3rem;border-radius:6px}

.site-footer{color:var(--muted);font-size:.9rem;padding:24px 0 40px}

.searchbar{display:flex;gap:.5rem;margin:12px 0}
.searchbar input{flex:1;padding:.55rem .75rem;background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text)}
.empty{color:var(--muted);text-align:center;padding:2rem 0}

.about{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem}
.about h2{margin-top:0}
hr.sep{border:0;border-top:1px dashed var(--border);margin:24px 0}

.photo{margin:.5rem 0;border-radius:12px;border:1px solid var(--border)}

/* Edge tabs */
.edge-tab { position: fixed; z-index: 200; }
.edge-tab a.pill { display:inline-block; background: var(--card); border:1px solid var(--border);
  padding:.5rem .9rem; border-radius:999px; box-shadow:var(--shadow); color:var(--text); text-decoration:none }
.edge-tab a.pill:hover { text-decoration:none; filter:brightness(1.05) }
.edge-tab.top   { top: 12px; left: 50%; transform: translateX(-50%); }
.edge-tab.bottom{ bottom:12px; left: 50%; transform: translateX(-50%); }
.edge-tab.left  { left: 10px; top: 50%; transform: translateY(-50%); }
.edge-tab.left .label { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing:.03em }
.sr-only{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }
.edge-nav{ position:fixed; bottom:12px; left:50%; transform:translateX(-50%); display:none; gap:.5rem;
  background:transparent; z-index:210 }
.edge-nav .pill{ display:inline-block; background:var(--card); border:1px solid var(--border);
  padding:.5rem .9rem; border-radius:999px; box-shadow:var(--shadow); color:var(--text); text-decoration:none }
@media (max-width: 720px){ .edge-tab{ display:none } .edge-nav{ display:flex } }

/* Hero logo block (center tile) */
.hero { display:flex; align-items:center; justify-content:center; margin: 20px 0 8px; }
.hero-card {
  width: min(92vw, 720px);
  aspect-ratio: 5/3;
  border-radius: 28px;
  background: radial-gradient(120% 140% at 0% 0%, #5eead4 0%, #60a5fa 50%, #a78bfa 100%);
  position: relative; overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
/* Clickable 'recs' pill on the hero (top-center) */
.hero-recs{
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center;
  min-width: 110px; height: 38px; padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff; font-weight: 800; letter-spacing: .02em;
  text-decoration: none; backdrop-filter: blur(4px);
}
.hero-recs:hover{ text-decoration:none; filter:brightness(1.05) }

.hero-brand {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:900; letter-spacing:.02em; text-transform:lowercase;
  font-size: clamp(32px, 10vw, 72px); color: rgba(255,255,255,.95);
  text-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.hero-pill {
  position:absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: 40%; height: 14%; min-height: 18px; border-radius: 999px;
  background: rgba(255,255,255,.35);
}
/* --- Portal doors (big boxes) --- */
.door{
  position: fixed;
  display: grid; place-items: center;
  width: 148px; height: 64px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: saturate(140%) blur(4px);
}
.door.left   { left: 12px;  top: 50%; transform: translateY(-50%); }
.door.right  { right: 12px; top: 50%; transform: translateY(-50%); }
.door.bottom { left: 50%;   bottom: 12px; transform: translateX(-50%); }

/* Optional: gradient accents per door */
.door.left  { background: linear-gradient(135deg, rgba(110,231,249,.22), rgba(167,139,250,.22)); }
.door.right { background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(96,165,250,.22)); }
.door.bottom{ background: linear-gradient(135deg, rgba(96,165,250,.22), rgba(110,231,249,.22)); }

/* Keep your hero styles (logo in the center) */
.hero{ display:flex; align-items:center; justify-content:center; margin: 20px 0 8px; }
.hero-card{
  width: min(92vw, 720px); aspect-ratio: 5/3; border-radius: 28px;
  background: radial-gradient(120% 140% at 0% 0%, #5eead4 0%, #60a5fa 50%, #a78bfa 100%);
  position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.hero-brand{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:900; letter-spacing:.02em; text-transform:lowercase;
  font-size: clamp(32px, 10vw, 72px); color: rgba(255,255,255,.95); text-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.hero-pill{ position:absolute; top:8%; left:50%; transform:translateX(-50%); width:40%; height:14%;
  min-height:18px; border-radius:999px; background:rgba(255,255,255,.35); }

/* Hide the old edge pills/nav if they’re still in the HTML */
.edge-tab, .edge-nav { display: none !important; }

/* Mobile: arrange doors in a row at the bottom */
@media (max-width: 720px){
  .door{
    position: static; width: auto; min-width: 96px; height: 48px; padding: 0 .9rem;
    border-radius: 999px;
  }
  /* Use a fixed container to place them */
  #content::after{ content:''; display:block; height:76px; } /* spacer so doors don't overlay content */
  body { padding-bottom: 76px; }
  .door.left, .door.right, .door.bottom { transform: none; }
  /* Since they are fixed when desktop, we reflow them as a bottom bar: */
  .doors-row{
    position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 210;
  }
}
/* === Recommendations box === */
.recs-page{
  width: min(92vw, 820px);
  margin: 8px auto 24px;
}

.recs-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  margin: 12px 0 10px 0;
}
.recs-card header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.recs-card h2{ margin:0; font-size:1rem }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-block; padding:.4rem .7rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.05);
  color:var(--text); text-decoration:none; font-weight:600; font-size:.9rem; cursor:pointer;
}
.chip:hover{ text-decoration:none; filter:brightness(1.05) }
.chip.active{ background:rgba(255,255,255,.08); }
.recs-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin-top:10px; }
.rec-item{ border:1px solid var(--border); border-radius:12px; padding:10px; }
.rec-item a{ color:var(--text); font-weight:700; text-decoration:none; }
.rec-item a:hover{ text-decoration:underline; }
.rec-item p{ margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }

/* Optional: pin the box under the header as you scroll */
@media (min-width: 721px){
  .recs-card{ position: sticky; top: 64px; z-index: 5; }
}
/* Recs card: same width as the hero, centered, non‑sticky */
.recs-card{
  width: min(92vw, 820px);     /* ⬅ matches .hero-card width */
  margin: 12px auto 24px;      /* ⬅ space above hero */
  position: static;            /* ⬅ no sticky behavior */
}

/* Chips: nicer row + scrollable if they overflow */
.chips{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.chips::-webkit-scrollbar { display: none; }  /* optional: hide scrollbar */

/* Recs items: softer cards */
.recs-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.rec-item{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.rec-item a{ font-weight: 700; text-decoration: none; }
.rec-item a:hover{ text-decoration: underline; }
.rec-item p{ margin:.25rem 0 0; color: var(--muted); }
/* top-center 'recs' door, same style as other doors */
.door.in-hero { position:absolute; z-index: 90; width:148px; height:64px; }
.door.in-hero.top { left:50%; top:8%; transform:translate(-50%,-50%); }
/* Center brand in header (desktop), keep nav on the right */
.header-inner { position: relative; }
.brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Keep the nav flush-right */
.nav { margin-left: auto; }

/* On small screens, go back to normal left-aligned brand */
@media (max-width: 720px){
  .brand { position: static; transform: none; }
  .header-inner { justify-content: space-between; }
}
.hero { margin-top: clamp(16px, 6vh, 48px); }
/* === Site-wide background image === */
:root{
  --bg-img: url('assets/bg.png');         /* your file */
  --bg-overlay: rgba(11,14,20,.65);           /* dark overlay for readability */
}
[data-theme="light"] {                         /* if you use the theme toggle */
  --bg-overlay: rgba(255,255,255,.60);
}

:root{
  --bg-img: url('../img/bg.png');   /* path is relative to assets/css/ */
  --bg-overlay: rgba(11,14,20,.65);
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--bg-img) center / cover no-repeat fixed;
  background-color: var(--bg);   /* fallback color */
}
/* --- Background banner under the hero --- */
.bg-panel{
  position: relative;
  width: 100%;
  margin: 16px 0 72px;                 /* leaves space before the whoami door */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--bg-img) center / cover no-repeat;   /* uses the image you set earlier */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.bg-panel .inner{
  width: min(92vw, 820px);             /* match hero width */
  margin: 0 auto;
  padding: 28px 16px 80px;             /* bottom space so the whoami door doesn't overlap */
  text-align: center;
}

.logo-medium{
  font-weight: 900;
  text-transform: lowercase;
  font-size: clamp(24px, 6vw, 56px);   /* “medium” size */
  color: rgba(255,255,255,.95);
  text-shadow: 0 4px 16px rgba(0,0,0,.22);
  margin: 6px 0 10px;
}

.bg-panel .byline{
  color: rgba(255,255,255,.88);
  font-size: 1rem;
  letter-spacing: .01em;
}

/* Hide the default footer on the home page since we echo the byline in the banner */
body.is-home .site-footer { display: none; }
/* Boxes inside the bottom banner */
.panel-doors{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.panel-door{
  display: inline-grid;
  place-items: center;
  min-width: 140px;
  height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: saturate(140%) blur(4px);
}

[data-theme="light"] .panel-door{
  background: rgba(255,255,255,.70);
  color: var(--text);
}

.panel-door:hover{ text-decoration: none; filter: brightness(1.05); }
/* Make box/pill labels bright white on the banner/hero */
.hero-recs,
.bg-panel .panel-door,
.bg-panel .door-btn{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.35);
}

/* Override the previous light-theme rule so text stays white */
[data-theme="light"] .panel-door,
[data-theme="light"] .door-btn{
  color: #fff !important;
  background: rgba(255,255,255,.22);    /* light translucent fill */
  border-color: rgba(255,255,255,.35);
}

/* Optional: give the boxes a slightly brighter hover on any theme */
.panel-door:hover,
.door-btn:hover,
.hero-recs:hover{
  filter: brightness(1.08);
  text-decoration: none;
}

/* Ensure the byline/logo on the banner are also readable */
.bg-panel .byline{ color: rgba(255,255,255,.95); }
.logo-medium{ color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,.22); }
/* Make box/pill labels bright white on the banner/hero */
.hero-recs,
.bg-panel .panel-door,
.bg-panel .door-btn{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.35);
}

/* Override the previous light-theme rule so text stays white */
[data-theme="light"] .panel-door,
[data-theme="light"] .door-btn{
  color: #fff !important;
  background: rgba(255,255,255,.22);    /* light translucent fill */
  border-color: rgba(255,255,255,.35);
}

/* Optional: give the boxes a slightly brighter hover on any theme */
.panel-door:hover,
.door-btn:hover,
.hero-recs:hover{
  filter: brightness(1.08);
  text-decoration: none;
}

/* Ensure the byline/logo on the banner are also readable */
.bg-panel .byline{ color: rgba(255,255,255,.95); }
.logo-medium{ color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,.22); }
/* ===== Cosmic link boxes ===== */
:root{
  --cosmic-1:#7c3aed;  /* purple */
  --cosmic-2:#06b6d4;  /* cyan   */
  --cosmic-3:#60a5fa;  /* blue   */
  --cosmic-4:#a78bfa;  /* violet */
}

/* row container already exists; this just keeps it tidy */
.panel-doors{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:12px; margin-top:18px;
}

/* neon + glass + star twinkle */
.panel-door.cosmic{
  position:relative; isolation:isolate;
  display:inline-grid; place-items:center;
  min-width:160px; height:60px; padding:0 18px;
  border-radius:16px; text-decoration:none;
  font-weight:800; letter-spacing:.02em;
  color:#fff;                                      /* readable on dark banner */
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateZ(0); transition:transform .18s ease, filter .18s ease;
}

/* soft neon aura around the box */
.panel-door.cosmic::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit;
  background:conic-gradient(from 210deg,
             var(--cosmic-1), var(--cosmic-2), var(--cosmic-3),
             var(--cosmic-4), var(--cosmic-1));
  filter:blur(12px); opacity:.55; z-index:-1;
}

/* crisp gradient border (masked) */
.panel-door.cosmic::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(120deg,var(--cosmic-2),var(--cosmic-3),var(--cosmic-4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9; pointer-events:none;
}

/* tiny stars that twinkle */
.panel-door.cosmic .twinkle{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 18% 30%, #fff, transparent 60%),
    radial-gradient(1px   1px   at 72% 62%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 36% 82%, #fff, transparent 60%);
  opacity:.25; animation:twinkle 2.6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.15} to{opacity:.45} }

/* hover/focus */
.panel-door.cosmic:hover{ transform:translateY(-3px); filter:brightness(1.08); }
.panel-door.cosmic:focus-visible{ outline:2px solid #fff; outline-offset:3px; text-decoration:none }

/* keep labels bright in light theme as well */
[data-theme="light"] .panel-door.cosmic{ color:#111; background:rgba(255,255,255,.82) }
[data-theme="light"] .bg-panel .byline,
[data-theme="light"] .logo-medium{ color:#0b1221 }

/* mobile: 2 per row */
@media (max-width:720px){
  .panel-door.cosmic{ width:calc(50% - 8px); min-width:auto; }
  .panel-doors{ gap:8px }
}
/* Turn off the site‑wide background image */
body::before { content: none !important; }
/* Home uses only the banner image */
body.is-home::before{ background: none !important; }  /* or: content: none !important */
/* Tell CSS how tall your header is (approx.) */
:root{ --header-h: 64px; }  /* tweak if your header is taller/shorter */

/* Full-bleed, full-screen banner */
.bg-panel{
  width: 100%;
  margin: 0;                          /* remove side gutters */
  border: 0; border-radius: 0; box-shadow: none;
  min-height: calc(100vh - var(--header-h));   /* fill viewport under the header */
  background:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--bg-img) center / cover no-repeat fixed;  /* cover the whole screen */
}

/* Center the text and boxes vertically within the banner */
.bg-panel .inner{
  max-width: 1120px;       /* content width */
  min-height: calc(100vh - var(--header-h));
  margin: 0 auto;
  padding: 24px 16px;      /* horizontal padding stays */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* <- centers logo + boxes vertically */
  text-align: center;
}
/* Full‑bleed, full‑screen banner on Home */
:root { --header-h: 64px; }                 /* adjust to your header's height */

html, body { overflow-x: hidden; }          /* avoid side scroll from full‑bleed trick */
body.is-home #content { padding: 0; }       /* remove container padding on Home */

/* Make .bg-panel stretch edge-to-edge and fill the screen */
.bg-panel{
  /* break out of the centered .container */
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  border-radius: 0;                          /* square edges when full‑bleed */
  overflow: hidden;

  /* fill the viewport under the header (with modern + fallback units) */
  min-height: calc(100svh - var(--header-h));
  min-height: calc(100vh  - var(--header-h));

  /* center the logo + boxes vertically */
  display: grid;
  align-items: center;

  /* your image + overlay; 'cover' scales it to fill */
  background:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    var(--bg-img) center / cover no-repeat fixed;
}

/* keep content nicely constrained in the middle */
.bg-panel .inner{
  width: min(92vw, 1080px);
  margin: 0 auto;
  padding: clamp(16px, 4vh, 48px) 16px;
  text-align: center;
}

/* Use only the banner image on Home (avoid duplicates) */
body.is-home::before { content: none !important; }