/* Colours */
:root{--sb-w:265px;--bg:#1a1917;--side:#232220;--card:#2c2a27;--active:#413d35;--ink:#f1ede4;--muted:#a8a296;color-scheme:dark}

/* Page frame: content sits to the right of the fixed sidebar */
body{margin:0;padding-left:var(--sb-w);box-sizing:border-box;background:var(--bg);color:var(--ink)}

/* Sidebar */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);padding:2.5rem 2rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;overflow-y:auto;background:var(--side);box-sizing:border-box}
.sb-top,.sb-panel,.sb-cols{display:contents}
.sb-menu{display:none}
.sb-pfp{width:144px;height:144px;border-radius:50%;object-fit:cover}
.sb-name{margin:.6rem 0 0;font:400 2.3rem/1.1 Fraunces,Georgia,serif}
.sb-role{margin:0;font:.95rem "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sb-bio{margin:0;color:var(--muted);line-height:1.5}
.sb-label{font:.95rem "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
a {color: #f1ede4}

/* Explore card */
.sb-card{margin-top:1.4rem;padding:1.1rem;border-radius:18px;background:var(--card);display:flex;flex-direction:column;gap:.3rem}
.sb-card .sb-label{margin-bottom:.5rem}
.sb-card a{display:flex;justify-content:space-between;padding:.65rem .75rem;border-radius:10px;color:var(--muted);text-decoration:none;transition:background .15s,color .15s}
.sb-card a:hover{background:rgba(65,61,53,.6);color:var(--ink)}
.sb-card a.active{background:var(--active);color:var(--ink)}

/* Contact links (bulleted list, filled from data/links.json) */
.sb-out{margin-top:.8rem}
.sb-pills{display:flex;flex-direction:column;gap:.4rem;padding-left:1.2rem;margin-top:.6rem}
.sb-pill{display:list-item;list-style:disc;color:inherit;text-decoration:none}
.sb-pill:hover{text-decoration:underline}
.sb-pill img{display:inline-block;vertical-align:-3px;margin-right:.5rem}

/* Footer: clock */
.sb-foot{margin-top:auto}
.sb-clock{margin:0;font:1.2rem/1 "DM Mono",ui-monospace,monospace;letter-spacing:.05em;color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums}
.sb-clock:hover{color:var(--ink)}

/* Banner */
.banner{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(160px,24vw,280px);margin-bottom:2.5rem;padding:2rem 2.5rem;color:#fff;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.6)),var(--banner,url(/images/banner.jpg)) center/cover}
.banner h1{margin:0;font:400 clamp(2rem,4vw,3rem) Fraunces,Georgia,serif}
.banner p{margin:.4rem 0 0;font:.95rem "DM Mono",ui-monospace,monospace;letter-spacing:.06em;opacity:.9}

/* Simple message pages (404) */
.page-msg{padding:0 2.5rem 4rem;line-height:1.7}
.page-msg a{color:inherit}

/* Phones: slim top bar with a menu button; the panel opens below it */
@media (max-width:760px){
  :root{--bar-h:56px}
  body{padding-left:0;padding-top:var(--bar-h)}
  html.menu-open{overflow:hidden}
  .sidebar{inset:0 0 auto 0;width:auto;display:block;padding:0;overflow:visible;z-index:100;border-bottom:1px solid rgba(128,128,128,.2)}
  .sb-top{display:flex;align-items:center;gap:.75rem;height:var(--bar-h);padding:0 1rem}
  .sb-pfp{width:36px;height:36px}
  .sb-name{flex:1;margin:0;font-size:1.25rem}
  .sb-menu{display:inline-flex;align-items:center;padding:.45rem .9rem;border:1px solid currentColor;border-radius:999px;background:none;color:var(--ink);font:.75rem "DM Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .sb-panel{display:flex;flex-direction:column;gap:.9rem;padding:0 1rem;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .4s ease,visibility 0s .4s}
  .sidebar.open .sb-panel{max-height:calc(100dvh - var(--bar-h));overflow-y:auto;visibility:visible;transition:max-height .4s ease}
  .sb-panel>:first-child{margin-top:.25rem}
  .sb-panel>:last-child{margin-bottom:1rem}
  .sb-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
  .sb-card{margin-top:0;padding:.7rem}
  .sb-card a{padding:.55rem .6rem;font-size:.9rem}
  .sb-out{margin-top:0}
  .sb-pills{font-size:.9rem}
  .banner{min-height:clamp(120px,34vw,200px);margin-bottom:1.5rem;padding:1.25rem}
  .banner h1{font-size:clamp(1.5rem,7vw,2rem)}
  .page-msg{padding:0 1.25rem 3rem}
}

/* Intro paragraph (home page) */
.intro{max-width:1000px;margin:0 auto 2.5rem;padding:0 1rem;font-size:1.1rem;line-height:1.7}
.intro p{margin:0}

/* About page */
.about{max-width:760px;margin:0 auto 3rem;padding:0 1rem;line-height:1.7}
.about h2{margin:2rem 0 .5rem;font:400 1.6rem Fraunces,Georgia,serif}
.about p{margin:.5rem 0}
.about a{color:inherit}
.about-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.about-links a{padding:.45rem 1rem;border:1px solid var(--active);border-radius:999px;color:var(--muted);text-decoration:none;font:.85rem "DM Mono",ui-monospace,monospace;letter-spacing:.06em;transition:background .15s,color .15s}
.about-links a:hover{background:var(--active);color:var(--ink)}

/* Copyright list */
.cr-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.cr-list li{display:flex;align-items:center;gap:.8rem;padding:.6rem;border-radius:12px;background:var(--card)}
.cr-list img{flex:none;width:48px;height:48px;border-radius:6px;object-fit:cover}
.cr-list .cr-t{display:block}
.cr-list .cr-o{display:block;font-size:.85rem;color:var(--muted)}