:root{
      --bg:#EAEAEA;
      --ink:#111;
      --panel:#222;
      --panelText:#fff;
      --accent:#444;
      --accentHover:#555;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--ink);
      background:var(--bg);
      display:flex;
      min-height:100%;
      flex-direction:column;
    }

    header{
      position:sticky; top:0; z-index:10;
      display:flex; align-items:center; justify-content:center;
      padding:16px 56px; /* leave room for fixed buttons */
      background:linear-gradient(#ffffffaa,#ffffffaa), var(--bg);
      backdrop-filter:saturate(1.2) blur(6px);
      border-bottom:1px solid #e6e6e6;
    }
    header h1{margin:0; font-size:clamp(1.25rem, 1rem + 1.2vw, 2rem)}

    /* Fixed open buttons */
    .open-left, .open-right{
      position:fixed; top:14px; z-index:20; 
      display:inline-flex; align-items:center; gap:8px;
      border:0; border-radius:999px; cursor:pointer;
      padding:10px 14px; background:var(--accent); color:white; font:inherit;
      transition:transform .2s ease, background .2s ease;
    }
    .open-left{ left:14px }
    .open-right{ right:14px }
    .open-left:hover, .open-right:hover{ background:var(--accentHover) }
    .open-left:active, .open-right:active{ transform:translateY(1px) }

    main{ flex:1; display:grid; place-items:center; padding:32px }
    .hero{ text-align:center }
    .hero img{ max-width:min(560px, 90vw); height:auto; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08) }

    /* Off-canvas panels */
    .panel{ position:fixed; top:0; bottom:0; width:min(86vw, 320px); background:var(--panel); color:var(--panelText);
            box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.45);
            transform:translateX(-100%); transition: transform .35s ease; z-index:30; display:flex; flex-direction:column }
    .panel.right{ right:0; left:auto; transform:translateX(100%) }
    .panel.open{ transform:translateX(0) }
    .panel header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#1a1a1a; border-bottom:1px solid #2a2a2a }
    .panel header h2{ margin:0; font-size:1.1rem; font-weight:600 }
    .panel .close{ border:0; background:#333; color:white; border-radius:8px; padding:8px 10px; cursor:pointer }
    .panel nav{ padding:10px 12px 18px; overflow:auto }
    .panel a{ display:block; color:white; text-decoration:none; padding:10px 12px; border-radius:10px }
    .panel a:hover{ background:#363636 }
    .panel .group{ margin:12px 8px }
    .panel .group h3{ margin:8px 8px 4px; font-size:.95rem; opacity:.8 }

    /* Dim background */
    .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:25 }
    .backdrop.show{ opacity:1; pointer-events:auto }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .panel{ transition:none }
      .backdrop{ transition:none }
      .open-left, .open-right{ transition:none }
    }

/* === Chester-specific styles === */
:root{
      --bg:#EAEAEA;
      --ink:#111;
      --panel:#222;
      --panelText:#fff;
      --accent:#444;
      --accentHover:#555;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--ink);
      background:var(--bg);
      display:flex;
      min-height:100%;
      flex-direction:column;
    }

    header.page{
      position:sticky; top:0; z-index:10;
      display:flex; align-items:center; justify-content:center;
      padding:16px 56px; /* leave room for fixed buttons */
      background:linear-gradient(#ffffffaa,#ffffffaa), var(--bg);
      backdrop-filter:saturate(1.2) blur(6px);
      border-bottom:1px solid #e6e6e6;
    }
    header.page h1{margin:0; font-size:clamp(1.1rem, 1rem + 1vw, 1.6rem)}

    /* Fixed open buttons */
    .open-left, .open-right{
      position:fixed; top:14px; z-index:20; 
      display:inline-flex; align-items:center; gap:8px;
      border:0; border-radius:999px; cursor:pointer;
      padding:10px 14px; background:var(--accent); color:white; font:inherit;
      transition:transform .2s ease, background .2s ease;
    }
    .open-left{ left:14px }
    .open-right{ right:14px }
    .open-left:hover, .open-right:hover{ background:var(--accentHover) }
    .open-left:active, .open-right:active{ transform:translateY(1px) }

    main{ flex:1; padding:20px }
    h2 { text-align: center; margin-top: 10px; }

    /* Gallery grid (kept from original) */
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
      margin-top: 20px;
    }

    .gallery-img {
      width: 200px;
      height: 150px;
      object-fit: cover;
      border-radius: 12px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .gallery-img:hover {
      transform: scale(1.12);
    }

    /* Fullscreen overlay (kept from original) */
    .fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.7s ease;
      z-index: 1000;
    }

    .fullscreen-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .fullscreen-overlay img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 10px;
    }

    .close-btn {
      position: absolute;
      top: 30px;
      right: 40px;
      font-size: 40px;
      color: white;
      cursor: pointer;
      z-index: 1001;
    }

    /* Off-canvas panels */
    .panel{ position:fixed; top:0; bottom:0; width:min(86vw, 320px); background:var(--panel); color:var(--panelText);
            box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.45);
            transform:translateX(-100%); transition: transform .35s ease; z-index:1200; display:flex; flex-direction:column }
    .panel.right{ right:0; left:auto; transform:translateX(100%) }
    .panel.open{ transform:translateX(0) }
    .panel header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#1a1a1a; border-bottom:1px solid #2a2a2a }
    .panel header h2{ margin:0; font-size:1.1rem; font-weight:600 }
    .panel .close{ border:0; background:#333; color:white; border-radius:8px; padding:8px 10px; cursor:pointer }
    .panel nav{ padding:10px 12px 18px; overflow:auto }
    .panel a{ display:block; color:white; text-decoration:none; padding:10px 12px; border-radius:10px }
    .panel a:hover{ background:#363636 }
    .panel .group{ margin:12px 8px }
    .panel .group h3{ margin:8px 8px 4px; font-size:.95rem; opacity:.8 }

    /* Dim background for panels */
    .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1150 }
    .backdrop.show{ opacity:1; pointer-events:auto }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .panel{ transition:none }
      .backdrop{ transition:none }
      .open-left, .open-right{ transition:none }
    }
  


/* --- Micro-notes panel (Idea #11) --- */
#fullscreen { position: fixed; } /* ensure positioning context */
.notes-toggle{
  position:absolute; right:24px; bottom:24px; z-index:1002;
  border:0; border-radius:999px; padding:10px 14px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; backdrop-filter:saturate(1.1) blur(6px);
  font:inherit; letter-spacing:.2px;
}
.notes-toggle:hover{ background:rgba(255,255,255,.20) }
.notes-toggle:active{ transform: translateY(1px) }

.notes-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(90vw, 320px); z-index:1002;
  background:rgba(0,0,0,.70); color:#fff; backdrop-filter:saturate(1.1) blur(8px);
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column; padding:16px 14px 18px; gap:10px;
  box-shadow: -6px 0 24px rgba(0,0,0,.35);
}
.notes-panel.open{ transform:translateX(0) }
.notes-panel header{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.notes-panel h3{ margin:0; font-size:1rem; font-weight:600 }
.notes-panel .close{ border:0; background:#333; color:#fff; border-radius:8px; padding:6px 10px; cursor:pointer }
.notes-panel .scroll{ overflow:auto; padding-right:6px }
.notes-panel .scroll p{ margin:.5em 0 0 0; line-height:1.4 }
.notes-panel .muted{ opacity:.8; font-size:.9em }
@media (prefers-reduced-motion: reduce){
  .notes-panel{ transition:none }
}
/* Darkroom compatibility: keep notes readable, but subtle */
body.darkroom .notes-panel{ background:rgba(0,0,0,.78) }

/* Hero image */
/* ===== Fancy Logo Styling (Gradient + Glass + Float) ===== */
:root{
  /* Tweak these to your brand */
  --ngs-accent-1: #ff8a00;
  --ngs-accent-2: #e52e71;
  --ngs-accent-3: #7f52ff;
  --ngs-accent-4: #09f;
  --ngs-radius: 22px;         /* inner image radius */
  --ngs-border-pad: 10px;     /* gradient ring thickness */
  --ngs-float-distance: 6px;  /* float amplitude */
}

/* Wrapper creates the gradient ring + glow */
.logo-wrap{
  position: relative;
  display: inline-block;
  padding: var(--ngs-border-pad);
  border-radius: calc(var(--ngs-radius) + var(--ngs-border-pad));
  background: linear-gradient(135deg,
              var(--ngs-accent-1),
              var(--ngs-accent-2) 35%,
              var(--ngs-accent-3) 70%,
              var(--ngs-accent-4));
  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    0 2px 6px rgba(0,0,0,.12) inset;
  animation: logo-float 5.5s ease-in-out infinite;
  will-change: transform;
}

/* Soft outer glow that matches the gradient */
.logo-wrap::before{
  content:"";
  position: absolute;
  inset: -14px;
  background: inherit;
  border-radius: inherit;
  filter: blur(22px);
  opacity: .35;
  z-index: -1; /* keeps glow behind everything */
}

/* The image gets the glassy panel look */
.logo{
  display: block;
  max-width: min(560px, 90vw);
  height: auto;
  border-radius: var(--ngs-radius);
  /* "Glass" card effect */
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 20px 50px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .5s cubic-bezier(.2,.8,.2,1),
              box-shadow .5s cubic-bezier(.2,.8,.2,1);
}

/* A subtle highlight sweep */
.logo::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.45), rgba(255,255,255,0) 40%);
  mix-blend-mode: soft-light;
}

/* Hover: small lift + micro-tilt, keeps it classy */
.logo-wrap:hover .logo{
  transform: translateY(-4px) scale(1.02) rotate(-0.8deg);
  box-shadow:
    0 28px 70px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

/* Gentle bobbing motion */
@keyframes logo-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--ngs-float-distance) * -1)); }
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce){
  .logo-wrap{ animation: none; }
  .logo{ transition: none; }
}

/* Optional: center the hero content nicely if not already */
.hero{
  display: grid;
  place-items: center;
  gap: 1rem;
  text-align: center;
}