/* Colours: deep North Sea slate, paper-coloured text, one heather accent */
:root{
  --sb-w:270px;
  --bg:#172129;--side:#101920;--card:#202c36;--line:#2c3a46;--active:#2c3a46;
  --ink:#e8e3d6;--soft:#cdc8bb;--muted:#98a5ab;--accent:#b595c8;
  --serif:Alegreya,Georgia,"Times New Roman",serif;
  --sans:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(1.25rem,4.5vw,3.25rem);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-left:var(--sb-w);background:var(--bg);color:var(--ink);font:400 1.15rem/1.65 var(--sans)}
::selection{background:var(--accent);color:#101920}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:var(--ink);text-decoration-color:rgba(181,149,200,.6);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--accent);text-decoration-thickness:2px}
img{max-width:100%}
html{scrollbar-color:var(--line) var(--bg)}

/* Sidebar */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);padding:2.25rem 1.9rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;overflow-y:auto;background:var(--side);border-right:1px solid var(--line)}
.sb-top,.sb-panel,.sb-cols{display:contents}
.sb-menu{display:none}
.sb-pfp{width:140px;height:140px;padding:4px;background:var(--ink);border-radius:2px;object-fit:cover}
.sb-name{margin:.9rem 0 0;font:500 2.3rem/1.05 var(--serif);letter-spacing:-.01em}
.sb-role{margin:0;color:var(--muted)}
.sb-role a{color:var(--muted)}
.sb-role a:hover{color:var(--ink)}
.sb-bio{margin:0;color:var(--muted);font-size:1.08rem;line-height:1.45}
.sb-label{font:italic 400 1.2rem/1.2 var(--serif);color:var(--muted)}

/* Explore */
.sb-card{margin-top:1.4rem;display:flex;flex-direction:column;gap:.05rem}
.sb-card .sb-label{margin-bottom:.4rem}
.sb-card a{display:flex;justify-content:space-between;padding:.3rem 0;color:var(--muted);text-decoration:none}
.sb-card a span:last-child{opacity:.45}
.sb-card a:hover{color:var(--ink)}
.sb-card a.active{color:var(--ink)}
.sb-card a.active span:first-child{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.25em}

/* Contacts (filled from data/links.json) */
.sb-out{margin-top:1rem}
.sb-pills{display:flex;flex-direction:column;gap:.2rem;margin-top:.4rem}
.sb-pill{display:flex;align-items:center;gap:.6rem;color:var(--muted);text-decoration:none}
.sb-pill:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent)}
.sb-pill img{flex:none;opacity:.85}

/* Foot */
.sb-foot{margin-top:auto;padding-top:1rem}
.sb-clock{font:400 1.3rem/1 var(--sans);font-variant-numeric:tabular-nums lining-nums;color:var(--muted);text-decoration:none}
.sb-clock:hover{color:var(--ink)}
.sb-panel>a[href^="mailto"]{color:var(--muted);font-size:1.05rem}
.sb-panel>a[href^="mailto"]:hover{color:var(--ink)}
.sb-panel footer{color:var(--muted);opacity:.7;font-size:.95rem}

/* Banner: the photo with a title plate cut into its bottom-left corner */
.banner{display:grid;justify-content:start;align-content:end;min-height:clamp(200px,27vw,330px);max-width:100%;margin-bottom:3.5rem;background:var(--banner,url(/images/banner.jpg)) center/cover}
.banner h1,.banner p{margin:0;background:var(--bg);max-width:min(100%,40rem)}
.banner h1{padding:1.3rem 2.5rem .2rem var(--gutter);border-top-right-radius:6px;font:500 clamp(1.9rem,3.5vw,2.8rem)/1.1 var(--serif);letter-spacing:-.01em}
.banner p{padding:0 2.5rem 0 var(--gutter);font:italic 400 1.2rem/1.4 var(--serif);color:var(--muted)}
.banner h1:last-child{padding-bottom:.2rem}
.banner p{padding-bottom:.2rem}
.banner h1:only-child{padding-bottom:.1rem}

/* Simple message pages (404) */
.page-msg{max-width:38rem;margin:0;padding:0 var(--gutter) 4rem}

/* 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);font-size:1.12rem}
  html.menu-open{overflow:hidden}
  .sidebar{inset:0 0 auto 0;width:auto;display:block;padding:0;overflow:visible;z-index:100;border-right:0;border-bottom:1px solid var(--line)}
  .sb-top{display:flex;align-items:center;gap:.75rem;height:var(--bar-h);padding:0 1rem}
  .sb-pfp{width:38px;height:38px;padding:2px}
  .sb-name{flex:1;margin:0;font-size:1.4rem}
  .sb-menu{display:inline-flex;align-items:center;padding:.3rem .85rem;border:1px solid var(--line);border-radius:3px;background:none;color:var(--ink);font:500 1rem var(--sans);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:1.25rem;align-items:start}
  .sb-card{margin-top:0}
  .sb-card a{font-size:1.02rem}
  .sb-out{margin-top:0}
  .sb-pills{font-size:1.02rem}
  .sb-foot{padding-top:0}
  .banner{min-height:clamp(140px,38vw,220px);margin-bottom:2rem}
  .banner h1{padding:1rem 1.25rem .2rem 1.25rem;font-size:clamp(1.7rem,7.5vw,2.2rem)}
  .banner p{padding:0 1.25rem .15rem;font-size:1.1rem}
}

/* About + copyright pages */
.about{max-width:40rem;margin:0;padding:0 var(--gutter) 4rem}
.about h2{margin:2.5rem 0 .5rem;font:500 1.8rem/1.2 var(--serif)}
.about p{margin:.9rem 0}
.about-links{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin-top:1rem}
.about-links a{color:var(--soft)}
.cr-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem 1.5rem}
.cr-list li{display:flex;align-items:center;gap:.8rem}
.cr-list img{flex:none;width:44px;height:44px;border-radius:2px;object-fit:cover}
.cr-list .cr-t{display:block;line-height:1.3}
.cr-list .cr-o{display:block;font-size:.95rem;line-height:1.3;color:var(--muted)}
.about{max-width:44rem}
.about:has(.cr-list){max-width:60rem}