:root{
  --gap:16px;--radius:18px;--container-max:1100px;
  --ink:#e7e8ef;--ink-soft:#b9bfd4;--accent:#d8b169;--accent-2:#86a7ff;
  --panel-alpha:.70;--shadow:0 14px 40px rgba(0,0,0,.45);
  --gold:#e2c068;--gold-deep:#a67c00;--forest:#10261c;
  --lemon:#fffde6;--lemon-soft:#fff8d1;
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:#000}
body{
  margin:0;color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  position:relative;min-height:100vh;isolation:isolate;
}
/* Background */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url('activity-imgs/midsummer-bg-desktop.jpg') center/cover no-repeat;}
@media(max-width:820px){body::before{background-image:url('activity-imgs/midsummer-bg-mobile.jpg')}}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.04),transparent 60%);
  mix-blend-mode:screen;opacity:.55}

/* Header with gold Playfair title */
.banner{position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.15)}
.banner .header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:8px;
  background:linear-gradient(180deg,rgba(16,38,28,.55),rgba(16,38,28,.35))}
.title {
  padding-left: 20px; /* Adjust value to taste */
}

.title h1 {
  margin: 0;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
  color: var(--accent);
  font-size: clamp(1.4rem, 1.1rem + 2.2vw, 2.8rem);
}

.title .byline {
  color: var(--ink-soft);
  margin-top: 4px;
}

.logo{display:block;height:auto}
.logo--center{width:145px;height:145px}

/* Orbs (60% size) */
.excerpt-switch{max-width:var(--container-max);margin-inline:auto;display:flex;justify-content:center;gap:10.8px;padding:10px 0 6px}
.orb{
  width:33.6px;height:33.6px;border-radius:50%;border:1.2px solid #b48b3a;
  background:
    radial-gradient(circle at 25% 25%, var(--lemon) 0%, var(--lemon-soft) 15%, transparent 16%),
    radial-gradient(60% 60% at 50% 65%, #0003 0%, transparent 60%),
    radial-gradient(circle at 25% 25%, var(--lemon) 0%, var(--lemon-soft) 15%, #ffd966 40%, var(--gold-deep) 85%,
      rgba(255,253,230,0.10) 95%, transparent 100%),
    linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow:0 3.6px 10.8px rgba(0,0,0,.35), inset 0 0.6px 1.2px rgba(255,255,255,.65);
  color:#1b1300;font-weight:800;font-size:.7rem;letter-spacing:.5px;display:grid;place-items:center;cursor:pointer;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.orb:hover{
  transform:translateY(-1.2px);filter:saturate(1.06);
  background:
    radial-gradient(circle at 22% 22%, #ffffef 0%, var(--lemon) 12%, transparent 16%),
    radial-gradient(60% 60% at 50% 65%, #0004 0%, transparent 62%),
    radial-gradient(circle at 25% 25%, var(--lemon) 0%, var(--lemon-soft) 15%, #ffd966 42%, var(--gold-deep) 86%,
      rgba(255,253,230,0.12) 96%, transparent 100%),
    linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow:0 4.8px 13.2px rgba(0,0,0,.4), 0 0 0 1.8px rgba(255,255,255,.15), inset 0 0.6px 1.8px rgba(255,255,255,.75);
}
.orb.is-active{
  box-shadow:0 6px 16.8px rgba(226,192,104,.45), 0 0 0 2.4px rgba(255,255,255,.18), inset 0 0.6px 1.8px rgba(255,255,255,.85);
  background:
    radial-gradient(circle at 22% 22%, #ffffef 0%, var(--lemon) 14%, transparent 18%),
    radial-gradient(60% 60% at 50% 65%, #0005 0%, transparent 64%),
    radial-gradient(circle at 25% 25%, var(--lemon) 0%, var(--lemon-soft) 15%, #ffd966 42%, var(--gold-deep) 86%,
      rgba(255,253,230,0.14) 96%, transparent 100%),
    linear-gradient(135deg, var(--gold), var(--gold-deep));
}
.orb:focus-visible{outline:1.8px solid rgba(255,255,255,.85);outline-offset:1.2px}

/* Left column + Lilbit */
.left{position:relative;display:grid;align-content:start;gap:12px}
.float{position:sticky;top:18vh;display:grid;gap:10px;padding:12px;background:rgba(20,26,46,var(--panel-alpha));
  border:1px solid rgba(255,255,255,.15);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(6px) saturate(1.05)}
.tab{appearance:none;background:rgba(20,26,46,.8);color:var(--ink);border:1px solid rgba(255,255,255,.15);
  padding:10px 14px;border-radius:12px;font-weight:700;text-align:left;cursor:pointer;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.tab:hover{transform:translateY(-1px)}
.tab.is-active{border-color:color-mix(in oklab, var(--accent) 55%, transparent);box-shadow:0 6px 18px rgba(216,177,105,.25)}

.lilbit-wrapper{display:grid;place-items:center;margin-top:6px}
.lilbit-wrapper img{height:145px;width:auto}

/* Layout & panel */
.wrap{width:70vw;max-width:var(--container-max);margin:0 auto;padding:calc(var(--gap)*1.0) calc(var(--gap)*1.25) calc(var(--gap)*1.5)}
@media(max-width:768px){.wrap{width:90vw}}
.middle{display:grid;grid-template-columns:280px 1fr;gap:calc(var(--gap)*1.0);min-height:0;align-items:start}

.panel{background:rgba(20,26,46,var(--panel-alpha));border-radius:18px;box-shadow:var(--shadow);outline:1px solid rgba(255,255,255,.15);
  display:grid;grid-template-rows:auto 1fr auto;min-height:0;height:min(76vh,900px)}
.panel__head{position:sticky;top:0;padding:12px 18px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg, rgba(20,26,46,.85), rgba(20,26,46,0));border-bottom:1px dashed rgba(255,255,255,.15);z-index:1;backdrop-filter:blur(4px)}
.panel__head h2{margin:0;color:var(--accent);font-size:clamp(1rem, .9rem + 1.2vw, 1.6rem)}
.meta{color:var(--ink-soft);font-size:.95rem}
.panel__scroll{overflow:auto;overscroll-behavior:contain;padding:16px 18px;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.5) rgba(255,255,255,.1)}
.panel__scroll::-webkit-scrollbar{width:10px}
.panel__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45);border-radius:8px}
.panel__scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:8px}
.panel__foot{position:sticky;bottom:0;padding:12px 18px;border-top:1px dashed rgba(255,255,255,.15);display:flex;justify-content:flex-end;background:linear-gradient(0deg, rgba(20,26,46,.85), rgba(20,26,46,0));backdrop-filter:blur(4px)}
.glow{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);filter:blur(10px);opacity:.6}

.view{display:none}.view.is-active{display:block}
.poem{white-space:pre-wrap;font-family:"Georgia",ui-serif,serif;font-size:clamp(1rem,.95rem + .4vw,1.2rem);line-height:1.85;margin:0;color:var(--ink)}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.15);padding-block:20px}
.footer-centered{display:grid;justify-items:center;gap:8px}
.footer-logo{height:48px;width:auto}
.footer-line{color:var(--ink-soft)}

/* Twinkle */
@keyframes twinkle { 0%,100%{opacity:.15} 50%{opacity:.65} }
.twinkle{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background: radial-gradient(2px 2px at 20% 30%, rgba(255,255,200,.8), transparent 60%),
              radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,220,.7), transparent 60%),
              radial-gradient(1.8px 1.8px at 45% 60%, rgba(255,255,210,.75), transparent 60%),
              radial-gradient(1.6px 1.6px at 85% 45%, rgba(255,255,210,.7), transparent 60%),
              radial-gradient(1.2px 1.2px at 30% 80%, rgba(255,255,230,.75), transparent 60%);
  animation: twinkle 3.6s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* Mobile adjustments */
@media(max-width:820px){
  .middle{grid-template-columns:1fr}
  .float{position:static;top:auto}
  .panel{height:72vh}
  .lilbit-wrapper img{height:110px}
}