:root{
    --bg:#0b0e14; --bg2:#11161f; --panel:#161d29; --panel2:#1c2533;
    --line:#2a3445; --text:#e7ecf3; --muted:#9aa7bd; --gold:#d9b25a; --gold2:#f0cf85;
    --accent:#5aa9e6;
    --link:#e8913c; --link-hover:#f5c542;
  }
  a{color:var(--link);text-decoration:none}
  a:hover{color:var(--link-hover);text-decoration:underline}
  a:visited{color:var(--link)}
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%}
  body{
    font-family:"Segoe UI",Inter,system-ui,Arial,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1200px 600px at 50% -10%, #1a2840 0%, rgba(26,40,64,0) 60%),
      radial-gradient(900px 500px at 110% 10%, #2a2140 0%, rgba(42,33,64,0) 55%),
      linear-gradient(180deg,#0b0e14 0%, #0a0c11 100%);
    background-attachment:fixed;
    min-height:100%;
    display:flex;flex-direction:column;
  }
  header{padding:44px 24px 6px;text-align:center}
  .crest{
    width:60px;height:60px;margin:0 auto 14px;border-radius:50%;
    background:radial-gradient(circle at 50% 35%, var(--gold2), var(--gold) 60%, #8a6d2c 100%);
    box-shadow:0 0 28px rgba(217,178,90,.35), inset 0 -6px 14px rgba(0,0,0,.3);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;color:#2a2208;font-size:26px;
  }
  h1{margin:6px 0 4px;font-size:28px;letter-spacing:.5px}
  h1 .accent{color:var(--gold2)}
  .sub{color:var(--muted);font-size:15px;margin:0 0 2px}
  .online-pill{
    display:inline-block;margin:8px 0 0;font-size:12.5px;color:var(--gold2);
    background:rgba(217,178,90,.08);border:1px solid rgba(217,178,90,.35);
    border-radius:20px;padding:3px 14px;
  }
  .online-pill[hidden]{display:none}
  .back{display:inline-block;margin-top:10px;color:var(--link);text-decoration:none;font-size:13px}
  .back:hover{color:var(--link-hover);text-decoration:underline}
  .back + .back{margin-left:14px}
  main{flex:1;display:flex;flex-direction:column;align-items:center;padding:22px 16px 36px}
  .wrap{width:100%;max-width:920px}
  .lead{color:var(--muted);font-size:13px;text-align:center;margin:4px 0 22px}

  details.day{
    background:linear-gradient(180deg,var(--panel),var(--panel2));
    border:1px solid var(--line);border-radius:14px;
    margin:0 0 18px;overflow:hidden;
  }
  details.day[open]{border-color:#33405a}
  summary{
    cursor:pointer;list-style:none;
    padding:16px 20px;font-size:19px;letter-spacing:.3px;
    display:flex;align-items:baseline;gap:10px;
    transition:background .12s ease;
  }
  summary::-webkit-details-marker{display:none}
  summary::before{content:"▸";color:var(--gold);font-size:14px;transform:translateY(-1px)}
  details[open] > summary::before{content:"▾"}
  summary:hover{background:rgba(255,255,255,.02)}
  summary b{color:var(--gold2);font-weight:600}
  summary .count{color:var(--muted);font-size:13px;font-weight:400}

  .day-body{padding:6px 22px 20px}
  section.area{margin:18px 0 0}
  section.area:first-child{margin-top:6px}
  .area h3{
    margin:0 0 8px;font-size:12.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:1px;color:var(--gold);
    border-bottom:1px solid var(--line);padding-bottom:6px;
  }
  .area ul{margin:0 0 4px;padding-left:20px}
  .area li{
    color:var(--text);font-size:13.5px;line-height:1.55;margin:5px 0;
  }
  .area li::marker{color:#56627a}
  .headline{
    margin:6px 0 2px;
    background:linear-gradient(180deg, rgba(217,178,90,.10), rgba(217,178,90,.035));
    border:1px solid rgba(217,178,90,.35);
    border-radius:10px;
    padding:12px 16px 10px;
  }
  .headline h3{
    margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;
    letter-spacing:1.4px;color:var(--gold2);border:none;padding:0;
  }
  .headline ul{margin:0;padding-left:0;list-style:none}
  .headline li{
    color:var(--text);font-size:14px;line-height:1.5;margin:7px 0;
    position:relative;padding-left:20px;
  }
  .headline li::before{content:"\2605";color:var(--gold);position:absolute;left:0;top:1px;font-size:12px}
  code{
    font-family:"Cascadia Code",Consolas,"SF Mono",monospace;
    font-size:12px;color:var(--accent);
    background:rgba(90,169,230,.08);border:1px solid rgba(90,169,230,.14);
    border-radius:4px;padding:0 4px;
  }
  footer{padding:22px;text-align:center;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);background:rgba(0,0,0,.2)}
  footer code{color:var(--accent);background:none;border:none;padding:0}

  /* Image thumbnails + click-to-expand lightbox (data-driven; add more .thumb to grow the carousel).
     The .gallery wrapper is OPTIONAL -- a bullet may hold bare .thumb buttons, which is what an Images
     bullet emits -- so .thumb carries its own inline spacing. Consecutive bare buttons come out of one
     entry string as </button><button with no whitespace between them and would otherwise touch. The
     margin is zeroed inside .gallery, which supplies gap:12px itself. */
  .gallery{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 4px}
  .thumb{
    display:inline-block;vertical-align:top;margin:2px 12px 6px 0;
    padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
    background:var(--panel2);cursor:zoom-in;line-height:0;text-align:left;
    transition:border-color .12s ease, transform .12s ease;
  }
  .gallery .thumb{margin:0}
  .thumb:hover{border-color:var(--gold);transform:translateY(-2px)}
  .thumb img{width:210px;height:135px;object-fit:cover;display:block}
  .thumb .cap{display:block;line-height:1.35;font-size:11.5px;color:var(--muted);padding:6px 9px}
  .lightbox{
    position:fixed;inset:0;z-index:50;display:none;
    align-items:center;justify-content:center;
    background:rgba(6,9,14,.9);padding:44px 60px;
  }
  .lightbox.open{display:flex}
  .lightbox img{
    max-width:100%;max-height:82vh;object-fit:contain;
    border:1px solid var(--line);border-radius:10px;
    box-shadow:0 18px 60px rgba(0,0,0,.6);
  }
  .lb-cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:var(--muted);font-size:13px;padding:0 24px}
  .lb-count{position:absolute;top:16px;left:20px;color:var(--muted);font-size:12.5px}
  .lb-btn{
    position:absolute;top:0;bottom:0;width:60px;border:none;cursor:pointer;
    background:none;color:var(--text);font-size:36px;opacity:.65;transition:opacity .12s ease;
  }
  .lb-btn:hover{opacity:1}
  .lb-prev{left:0}.lb-next{right:0}
  /* The close button sits inside the next arrow's 60px full-height strip. Both are positioned and
     .lb-next comes later in the markup, so without this it paints over the X and swallows every
     click and hover on it -- the X reads as dead and a click there pages the carousel instead. */
  .lb-close{top:12px;right:16px;bottom:auto;width:auto;font-size:30px;line-height:1;z-index:2}
  @media(max-width:560px){
    .thumb img{width:150px;height:98px}
    .lightbox{padding:20px}
    .lb-btn{width:42px;font-size:26px}
  }

  /* View toggle (front page only): category sections vs a per-day newest-first list */
  .viewbar{display:flex;justify-content:center;gap:8px;margin:-10px 0 22px}
  .viewbtn{
    font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;
    background:var(--panel2);border:1px solid var(--line);border-radius:20px;
    padding:4px 14px;transition:color .12s ease,border-color .12s ease;
  }
  .viewbtn:hover{color:var(--text);border-color:#33405a}
  .viewbtn[aria-pressed="true"]{color:var(--gold2);border-color:var(--gold);background:rgba(217,178,90,.08)}

  /* Time view: chrono lists replace the day's area sections, Images included, so a screenshot sits in
     the timeline at the time it was taken. Headlines are section.headline and stay. Scoped to DIRECT
     children of .day-body so a <section> inside a cloned bullet is never hidden (same rule in the JS). */
  .chrono-list{display:none;list-style:none;margin:6px 0 4px;padding:0}
  body.view-time .chrono-list{display:block}
  body.view-time .day-body > section.area{display:none}
  .chrono-list li .gallery{margin-top:4px}
  .chrono-list li{color:var(--text);font-size:13.5px;line-height:1.55;margin:7px 0}
  .chrono-time{color:var(--muted);font-size:12px;margin-right:8px;font-variant-numeric:tabular-nums}
  .chrono-chip{
    display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;
    color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:0 8px;margin-right:8px;
  }
  .new-badge{
    display:inline-block;font-size:10px;font-weight:700;letter-spacing:.8px;
    color:#0b0e14;background:var(--accent);border-radius:4px;padding:1px 5px;margin-right:6px;
  }

  /* Prev/next week navigation at the bottom of each page's day list */
  nav.weeknav{display:flex;justify-content:space-between;gap:14px;margin:26px 2px 4px;font-size:13.5px}
  .weeknav a{color:var(--link);text-decoration:none}
  .weeknav a:hover{color:var(--link-hover);text-decoration:underline}
  .weeknav .wn-next{margin-left:auto}