:root{
  --bg:#0d0d0d;
  --panel:#141414;
  --ink:#f5f5f5;
  --muted:#a0a0a0;
  --accent:#d72638;
  --line:#262626;
  --maxw:800px;
  --base:19px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:var(--base);line-height:1.75}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;height:auto;display:block;margin:1rem auto}

/* Header + nav */
header{
  text-align:center;
  padding:2rem 1rem 1.25rem;
  background:var(--panel);
  padding-bottom:2rem;          /* underline on all pages */
  margin-bottom:1rem;
  border-bottom:2px solid var(--accent);
}
.brand{margin:0 auto .75rem;font-size:2rem;font-weight:800;letter-spacing:.5px;color:var(--ink)}
.brand-link{color:var(--ink);text-decoration:none}
.brand-link:hover{color:var(--accent)}
nav{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
nav a{color:var(--ink);font-weight:700}
nav a:hover{color:var(--accent)}
.divider{height:1px;background:var(--line);margin:0 auto;border:0;max-width:var(--maxw)}

/* Layout */
main{max-width:var(--maxw);margin:2rem auto;padding:0 1rem}
.post-title,.post-title a{color:var(--accent);font-size:1.6rem;font-weight:800;margin:0 0 .25rem;text-align:center}
.post-body p{margin:1rem 0}
.post-footer{color:var(--muted);font-size:.9rem;margin-top:1rem}
.post-outer + .post-outer{border-top:1px solid var(--line);margin-top:2rem;padding-top:2rem}

footer{max-width:var(--maxw);margin:2rem auto 3rem;padding:0 1rem;text-align:center;color:var(--muted)}

/* Unified “bubble” panel used everywhere */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  padding:2rem;
  border-radius:8px;
  box-shadow:0 0 12px rgba(0,0,0,.6);
  margin:2rem auto;
  max-width:var(--maxw);
}
.panel h2{
  margin:0 0 .75rem;
  letter-spacing:.5px;
  color:var(--accent);
  text-align:center;
}
.panel p{margin:1rem 0}

/* Lists used on Documents */
.doc-list{margin:1rem 0 0;padding-left:1.25rem}
.doc-list li{margin:.4rem 0}

/* Optional gallery grid (works inside .panel) */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
  margin-top:1.5rem;
}
.gallery-grid figure{
  background:#141414;
  border:1px solid #262626;
  padding:10px;
  border-radius:8px;
}
.gallery-grid img{margin:0;display:block;width:100%;height:auto}
.gallery-grid figcaption{
  margin-top:.5rem;
  font-size:.95rem;
  color:#a0a0a0;
  text-align:center;
}

/* Homepage-only */
.home main{margin-top:3rem;margin-bottom:4rem;text-align:center}
.home .about-text{ /* left-aligned article column */
  text-align:center;
  margin:0 auto;
  max-width:800px;
}
.home .about-text p{margin:1.25rem 0;line-height:1.9}

/* Mobile tweak */
@media (max-width:480px){
  :root{ --base:18px; --maxw:92vw; }
  .brand{font-size:1.75rem}
}

.home .logo {
  margin: 2rem auto 1.5rem;
  width: 40%;          /* small on desktop */
  max-width: 208px;    /* 40% of the old 520px cap */
}

.home .logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Let the logo grow on small screens */
@media (max-width: 480px) {
  .home .logo {
    width: 80%;        /* much bigger on mobile */
    max-width: none;   /* remove the hard cap */
  }
}

/* Center Story page placeholder */
.story .post-body {
  display: flex;
  align-items: center;    /* vertical center */
  justify-content: center; /* horizontal center */
  min-height: 200px;      /* give it some height so centering shows */
  text-align: center;
}

/* Collapsible folders */
.fold {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #121212;
  margin: 1rem 0;
  padding: .25rem .75rem;
}

.fold summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem .25rem;
}

.fold summary::-webkit-details-marker { display: none; }

/* caret */
.fold summary::before {
  content: "›";
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .2s ease;
  font-weight: 900;
  color: var(--accent);
}
.fold:not([open]) summary::before {
  transform: rotate(0deg);
}

.fold .doc-list {
  margin: .25rem 0 1rem 1.25rem;
}

.fold-controls{
  display:flex;
  gap:.5rem;
  margin-top:1rem;
}
.fold-controls button{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.5rem .75rem;
  cursor:pointer;
}
.fold-controls button:hover{
  border-color:var(--accent);
}