/* ============================================================
   peterp22.github.io  —  Nocturne Blurple (light), lightly gamified
   ============================================================ */

/* ---- fonts (Bricolage Grotesque, bundled) ---- */
@font-face { font-family:"Bricolage Grotesque"; font-weight:400; src:url("/assets/fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; font-weight:500; src:url("/assets/fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; font-weight:700; src:url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; font-weight:800; src:url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-display:swap; }

/* ---- theme tokens ---- */
:root {
  --bg:#f7f6fb;
  --surface:#ffffff;
  --ink:#18161f;
  --muted:#565072;
  --dim:#8b86a1;
  --accent:#5b4be0;
  --accent2:#9b59ff;
  --line:rgba(91,75,224,0.16);
  --code-bg:#f0eef9;
  --glow:rgba(124,108,255,0.38);
  --reticle:#7c6cff;
  --panel:#f3f1fb;
}

/* ---- base ---- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Iowan Old Style","Charter","Georgia",serif;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap { max-width:640px; margin:0 auto; padding:40px 22px 80px; }
h1,h2,h3,.name { font-family:"Bricolage Grotesque",sans-serif; letter-spacing:-0.02em; line-height:1.1; color:var(--ink); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ---- hero / character sheet ---- */
.hero { margin-bottom:40px; }
.hero-top { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.avatar {
  width:84px; height:84px; flex:none; border-radius:50%;
  object-fit:cover; object-position:50% 42%;
  background:var(--accent);
  border:2px solid rgba(124,108,255,0.55);
  box-shadow:0 5px 16px rgba(124,108,255,0.28);
}
.name { font-size:34px; font-weight:800; margin:0; }
.hero-id { min-width:0; }
.slogan { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:18px; line-height:1.3; color:var(--accent); margin:5px 0 0; }
.bio { font-size:17px; line-height:1.6; color:var(--ink); margin:0 0 12px; }
.about-link { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:16px; margin:0 0 20px; }
.about-link a { text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--line); }

.charsheet {
  margin:0 0 18px; padding:14px 16px;
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(124,108,255,0.06), rgba(124,108,255,0.02)), var(--surface);
  display:grid; gap:9px;
}
.charsheet .stat { display:grid; grid-template-columns:118px 1fr; gap:14px; align-items:baseline; }
.charsheet dt {
  margin:0; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--accent);
}
.charsheet dd { margin:0; font-family:"Bricolage Grotesque",sans-serif; font-weight:500; font-size:15.5px; color:var(--ink); }

.inventory { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 20px; padding-top:2px; }
.inventory-label { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--dim); }
.inventory-items { display:inline-flex; flex-wrap:wrap; gap:10px; align-items:center; }
.icon-link { display:inline-flex; line-height:0; border-radius:12px; transition:transform .14s ease, filter .14s ease; }
.icon-link img { width:48px; height:48px; display:block; }
.icon-link:hover, .icon-link:focus-visible { transform:translateY(-2px); filter:drop-shadow(0 5px 12px rgba(124,108,255,0.5)); outline:none; }

/* ---- Skill Tree (cards) ---- */
.pillars { margin-bottom:48px; }
.tree-title {
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:27px;
  text-transform:uppercase; letter-spacing:0.01em; line-height:1; margin:0 0 20px; color:#6a57db;
  text-shadow:0 1px 0 #5b4be0, 0 2px 0 #5042cf, 0 3px 0 #463abd, 0 4px 0 #3d33a8, 0 5px 0 #342c93, 0 7px 11px rgba(45,33,99,0.30);
}
.pillar-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:12px; }
.pillar-card {
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  box-shadow:0 3px 10px rgba(91,75,224,0.10);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pillar-card:hover, .pillar-card:focus-visible {
  transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 10px 26px var(--glow); text-decoration:none; outline:none;
}
.pillar-card-img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; transition:transform .35s ease; }
.pillar-card:hover .pillar-card-img, .pillar-card:focus-visible .pillar-card-img { transform:scale(1.08); }

/* targeting reticle (corner brackets) on hover / keyboard focus */
.pillar-card::after {
  content:""; position:absolute; inset:6px; z-index:3; pointer-events:none;
  opacity:0; transition:opacity .12s ease;
  background:
    linear-gradient(var(--reticle),var(--reticle)) top left/14px 2px no-repeat,
    linear-gradient(var(--reticle),var(--reticle)) top left/2px 14px no-repeat,
    linear-gradient(var(--reticle),var(--reticle)) top right/14px 2px no-repeat,
    linear-gradient(var(--reticle),var(--reticle)) top right/2px 14px no-repeat,
    linear-gradient(var(--reticle),var(--reticle)) bottom left/14px 2px no-repeat,
    linear-gradient(var(--reticle),var(--reticle)) bottom left/2px 14px no-repeat,
    linear-gradient(var(--reticle),var(--reticle)) bottom right/14px 2px no-repeat,
    linear-gradient(var(--reticle),var(--reticle)) bottom right/2px 14px no-repeat;
}
.pillar-card:hover::after, .pillar-card:focus-visible::after { opacity:1; }

/* quest name label, revealed on hover / focus */
.quest-name {
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 6px 6px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:11px; line-height:1.2;
  text-align:center; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(18,12,38,0.86));
  opacity:0; transform:translateY(6px); transition:opacity .14s ease, transform .14s ease; pointer-events:none;
}
.pillar-card:hover .quest-name, .pillar-card:focus-visible .quest-name { opacity:1; transform:translateY(0); }

/* ---- Quest Log (notes) ---- */
.notes h2 { font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--dim); margin:0 0 16px; }
.note-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.note-list li {
  display:flex; gap:13px; align-items:baseline; padding:11px 14px;
  border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(180deg, rgba(124,108,255,0.045), transparent), var(--surface);
  transition:border-color .14s ease, transform .14s ease;
}
.note-list li:hover { border-color:var(--accent); transform:translateX(2px); }
.note-list li::before { content:"\25C6"; flex:none; color:var(--accent2); font-size:10px; }
.note-list time { flex:none; width:92px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px; color:var(--dim); }
.note-list a { font-family:"Bricolage Grotesque",sans-serif; font-weight:500; font-size:18px; color:var(--ink); }
.note-list a:hover { color:var(--accent); text-decoration:none; }
.empty { color:var(--dim); }

/* ---- single note / chapter page ---- */
.back { display:inline-block; margin-bottom:26px; font-family:"Bricolage Grotesque",sans-serif; font-weight:500; font-size:15px; color:var(--muted); }
.back:hover { color:var(--accent); text-decoration:none; }
.quest-kicker { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent); margin:0 0 6px; }
.note-title,.pillar-title { font-size:32px; font-weight:800; margin:0 0 8px; }
.note-date { display:block; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px; color:var(--dim); margin-bottom:34px; }
.pillar-summary { font-size:18px; color:var(--muted); margin:6px 0 30px; }
.pillar-notes { margin-top:42px; }
.note-body { font-size:19px; }
.note-body p { margin:0 0 22px; }
.note-body h2 { font-size:24px; font-weight:700; margin:40px 0 14px; }
.note-body h3 { font-size:20px; font-weight:700; margin:32px 0 12px; }
.note-body ul,.note-body ol { margin:0 0 22px; padding-left:24px; }
.note-body li { margin:6px 0; }
.note-body a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--line); }
.note-body blockquote { margin:0 0 22px; padding:2px 0 2px 20px; border-left:2px solid var(--accent); color:var(--muted); font-style:italic; }
.note-body code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:0.82em; background:var(--code-bg); padding:2px 6px; border-radius:5px; }
.note-body pre { background:var(--code-bg); padding:16px 18px; border-radius:10px; overflow:auto; margin:0 0 22px; border:1px solid var(--line); }
.note-body pre code { background:none; padding:0; font-size:14px; line-height:1.5; }
.note-body img { max-width:100%; height:auto; border-radius:10px; }
.note-body hr { border:none; border-top:1px solid var(--line); margin:34px 0; }

/* ---- footer ---- */
.site-footer { margin-top:64px; padding-top:20px; border-top:1px solid var(--line); font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; color:var(--dim); }

/* ---- responsive ---- */
@media (max-width:520px) {
  body { font-size:18px; }
  .name { font-size:28px; }
  .avatar { width:60px; height:60px; font-size:20px; }
  .charsheet .stat { grid-template-columns:96px 1fr; gap:10px; }
  .tree-title { font-size:22px; }
  .note-list time { width:84px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .pillar-card, .pillar-card-img, .quest-name, .note-list li { transition:opacity .12s ease; }
  .pillar-card:hover, .pillar-card:focus-visible,
  .pillar-card:hover .pillar-card-img, .pillar-card:focus-visible .pillar-card-img,
  .note-list li:hover { transform:none; }
}