/* baharna — site styles. All values reference tokens.css. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  padding:var(--space-lg) var(--space-md) var(--space-2xl);
}
.frame{
  max-width:var(--maxw);margin:0 auto;background:var(--bg);
  border:var(--bw) solid var(--line-bright);
  box-shadow:var(--shadow-frame);
}

/* titlebar */
.titlebar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  background:var(--accent);color:var(--on-bright);
  border-bottom:var(--bw) solid var(--line-bright);
  padding:var(--space-sm) var(--space-md);
}
.wordmark{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;letter-spacing:var(--ls-pixel);color:var(--on-bright)}
.wordmark .blink{color:var(--on-bright)}
.status{font-family:var(--font-mono);font-size:var(--fs-meta);display:flex;align-items:center;gap:var(--space-2xs);white-space:nowrap;color:var(--on-bright)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--live);border:1px solid rgba(0,0,0,.4);display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:pulse var(--dur-pulse) ease-in-out infinite}
  .cursor{animation:blink var(--dur-blink) step-end infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* layout: sidebar + main */
.shell{display:flex;align-items:stretch}
.sidebar{
  flex:0 0 var(--sidebar-w);background:var(--panel);
  border-right:var(--bw) solid var(--line-bright);padding:var(--space-md) 0;
}
.navgroup{margin-bottom:var(--space-md)}
.navgroup .glabel{
  font-family:var(--font-display);font-size:var(--fs-eyebrow);color:var(--muted);
  letter-spacing:var(--ls-pixel);padding:0 var(--space-md);margin-bottom:var(--space-2xs);display:block;
}
.navlink{
  display:block;width:100%;text-align:left;
  font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink);
  text-decoration:none;border-left:3px solid transparent;
  padding:var(--space-2xs) var(--space-md);letter-spacing:var(--ls-mono);
}
.navlink:hover{background:var(--panel2);color:var(--gold)}
.navlink[aria-current="page"]{
  border-left-color:var(--accent);color:var(--accent);
  font-weight:var(--fw-medium);background:rgba(232,92,74,.09);
}
.navlink:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.side-rss{padding:0 var(--space-md);margin-top:var(--space-xs)}
.side-rss a{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--accent2);
  text-decoration:none;border:1px solid var(--accent2);padding:3px var(--space-xs);display:inline-block}
.side-rss a:hover{background:var(--accent2);color:var(--bg)}

main{flex:1;min-width:0;padding:var(--space-lg) var(--space-lg) var(--space-xs)}

/* type + shared */
.eyebrow{font-family:var(--font-display);font-size:var(--fs-eyebrow);color:var(--accent2);letter-spacing:var(--ls-pixel);margin:0 0 var(--space-sm);display:block}
h1,h2,h3{font-weight:var(--fw-bold);line-height:var(--lh-tight);margin:0 0 var(--space-sm);color:var(--ink)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);border-bottom:var(--bw) dotted var(--line-bright);padding-bottom:var(--space-2xs)}
h3{font-size:var(--fs-lead)}
a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--gold)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}

/* h-card */
.h-card{display:flex;gap:var(--space-md);align-items:flex-start;border:var(--bw) solid var(--line);background:var(--panel);padding:var(--space-md);margin-bottom:var(--space-lg)}
.avatar{flex:0 0 var(--avatar-size);height:var(--avatar-size);background:var(--accent2);color:var(--bg);font-family:var(--font-display);font-size:30px;display:flex;align-items:center;justify-content:center}
.h-card p{margin:0;font-size:var(--fs-small);line-height:var(--lh-snug)}
.h-card .name{font-weight:var(--fw-bold);font-size:var(--fs-lead)}

/* now block */
.now{border-left:5px solid var(--gold);background:var(--panel);padding:var(--space-sm) var(--space-md);margin:0 0 var(--space-lg);font-size:var(--fs-small)}
.now .lbl{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--accent);display:flex;justify-content:space-between;margin-bottom:4px;letter-spacing:var(--ls-mono)}
.now .lbl a{font-size:var(--fs-eyebrow);color:var(--muted)}

/* post stream */
.stream-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);margin-bottom:4px}
.stream-head a{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--accent2)}
.posts{list-style:none;margin:0;padding:0}
.posts li{padding:var(--space-sm) 0;border-bottom:1px solid var(--line)}
.posts li:first-child{border-top:1px solid var(--line)}
.posts .date{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--muted)}
.posts .title{display:block;font-weight:var(--fw-medium);font-size:var(--fs-body);margin:2px 0 5px;color:var(--ink);text-decoration:none}
.posts .title:hover{color:var(--gold);text-decoration:underline}
.tag{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--accent2);border:1px solid var(--accent2);padding:0 5px;margin-right:5px;white-space:nowrap}
.subscribe{font-size:var(--fs-meta);color:var(--muted);margin-top:var(--space-sm)}

/* uses / contact spec tables */
.specs{margin:0 0 var(--space-lg)}
.specs dl{display:grid;grid-template-columns:160px 1fr;gap:var(--space-2xs) var(--space-md);margin:0}
.specs dt{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--accent);padding-top:1px}
.specs dd{margin:0}
.specs dd .note{color:var(--muted);font-size:var(--fs-label)}

/* colophon */
.colo dl{display:grid;grid-template-columns:140px 1fr;gap:var(--space-2xs) var(--space-md);margin:0 0 var(--space-md)}
.colo dt{font-family:var(--font-mono);font-size:var(--fs-label-sm);color:var(--accent)}
.colo dd{margin:0}

/* blogroll */
.blogroll{list-style:none;margin:0;padding:0}
.blogroll li{padding:var(--space-xs) 0;border-bottom:1px solid var(--line)}
.blogroll .desc{color:var(--muted);font-size:var(--fs-label)}

/* blog post body */
.h-entry .post-meta{font-size:var(--fs-meta);color:var(--muted);margin:0 0 var(--space-lg)}
.h-entry .post-meta .tag{margin-left:6px}
.e-content{font-size:var(--fs-body);line-height:var(--lh-body)}
.e-content p{margin:0 0 var(--space-md)}
.e-content h2{margin-top:var(--space-lg)}
.e-content ul,.e-content ol{margin:0 0 var(--space-md);padding-left:var(--space-lg)}
.e-content li{margin:var(--space-3xs) 0}
.e-content a{color:var(--accent2)}
.e-content code{font-family:var(--font-mono);font-size:.9em;background:var(--panel);padding:1px 5px;border:1px solid var(--line)}
.e-content pre{background:var(--panel);border:1px solid var(--line-bright);border-left:3px solid var(--accent2);padding:var(--space-sm) var(--space-md);overflow-x:auto;margin:0 0 var(--space-md)}
.e-content pre code{background:none;border:0;padding:0;font-size:var(--fs-label)}
.e-content blockquote{border-left:4px solid var(--gold);margin:0 0 var(--space-md);padding:var(--space-2xs) var(--space-md);color:var(--muted)}
.back{margin-top:var(--space-xl);font-size:var(--fs-label-sm)}

/* footer */
footer{border-top:var(--bw) solid var(--line-bright);background:var(--panel);padding:var(--space-md);font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--muted)}
.buttons{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-bottom:var(--space-sm)}
.btn88{width:var(--btn88-w);height:var(--btn88-h);border:1px solid var(--line-bright);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-display);font-size:var(--fs-pixel);line-height:1.1;letter-spacing:.3px;padding:2px;color:var(--ink);text-decoration:none}
a.btn88:hover{background:var(--gold);color:var(--on-bright)}
.b-rss{background:var(--accent);color:var(--on-bright);border-color:var(--accent)}
.b-11ty{background:var(--accent2);color:var(--bg);border-color:var(--accent2)}
.b-de{background:var(--gold);color:var(--on-bright);border-color:var(--gold)}
.webring{margin:4px 0 var(--space-sm);color:var(--ink)}
.webring a{color:var(--accent2)}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2xs)}

/* responsive: collapse sidebar to a top bar */
@media (max-width:640px){
  body{padding:var(--space-md) var(--space-xs) var(--space-xl)}
  .frame{box-shadow:4px 4px 0 rgba(60,194,180,.22)}
  .status .when{display:none}
  .shell{flex-direction:column}
  .sidebar{flex:auto;border-right:none;border-bottom:var(--bw) solid var(--line-bright);
    display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:var(--space-xs)}
  .navgroup{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
  .navgroup .glabel{display:none}
  .navlink{width:auto;border-left:none;padding:4px var(--space-xs)}
  .navlink[aria-current="page"]{border-left:none;background:none;text-decoration:underline}
  .side-rss{padding:0;margin:0 0 0 auto}
  .specs dl,.colo dl{grid-template-columns:1fr;gap:2px 0}
  .specs dt,.colo dt{padding-top:var(--space-xs)}
  h1{font-size:25px}
}

/* now-block: the shared include wraps prose in <p> */
.now p{margin:0}

/* /slashes index */
.slashlist{display:grid;grid-template-columns:140px 1fr;gap:var(--space-2xs) var(--space-md);margin:var(--space-md) 0 0}
.slashlist dt{font-family:var(--font-mono);font-size:var(--fs-label-sm)}
.slashlist dt a{color:var(--accent2);text-decoration:none}
.slashlist dt a:hover{color:var(--gold);text-decoration:underline}
.slashlist dd{margin:0;color:var(--muted);font-size:var(--fs-label)}
@media (max-width:640px){.slashlist{grid-template-columns:1fr;gap:0}.slashlist dt{padding-top:var(--space-xs)}}

/* image sizing */
.e-content img{max-width:100%;height:auto;display:block;margin:0 0 var(--space-md);border:1px solid var(--line-bright)}