/* ==========================================================================
   Shared styles — honoratkablansi.com
   ========================================================================== */

:root{
  --bg: #ffffff;
  --ink: #0a0a0a;
  --sub: #6b6b6b;
  --accent: #0000fe;
  --accent-dim: #4d4dff;
  --rule: #dcdcdc;
  --term-bg: #fbfbfb;
  --term-border: #e2e2e2;
  --dot1: #0a0a0a;
  --dot2: #6b6b6b;
  --dot3: #0000fe;
  --font-mono: "Space Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html[data-theme="dark"]{
  --bg: #232323;
  --ink: #f2f2f2;
  --sub: #8a8a8a;
  --accent: #4d6dff;
  --accent-dim: #7a93ff;
  --rule: #3a3a3a;
  --term-bg: #292929;
  --term-border: #3a3a3a;
  --dot1: #f2f2f2;
  --dot2: #8a8a8a;
  --dot3: #4d6dff;
}

/* Fallback for browsers with JS disabled: follow the OS setting directly.
   Pages with JS enabled set data-theme explicitly before first paint,
   which takes precedence over this. */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg: #232323;
    --ink: #f2f2f2;
    --sub: #8a8a8a;
    --accent: #4d6dff;
    --accent-dim: #7a93ff;
    --rule: #3a3a3a;
    --term-bg: #292929;
    --term-border: #3a3a3a;
    --dot1: #f2f2f2;
    --dot2: #8a8a8a;
    --dot3: #4d6dff;
  }
}

*{ box-sizing: border-box; }

img, svg{ max-width: 100%; height: auto; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  transition: background 0.15s ease, color 0.15s ease;
}

.wrap{
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 24px 28px;
}
.wrap--md{ max-width: 760px; }
.wrap--lg{ max-width: 920px; }

/* Restores the original, roomier spacing for pages other than the
   404 / under-construction status pages, which stay compact so they
   fit on one screen without scrolling. */
.wrap--spacious{ padding: 40px 24px 60px; }
.wrap--spacious .announce{ padding: 12px 0; margin-bottom: 32px; }
.wrap--spacious nav{ margin-bottom: 56px; }
.wrap--spacious .meta{ margin-bottom: 18px; }
.wrap--spacious .dots{ margin: 56px 0 20px; }
.wrap--spacious footer{ gap: 28px; }
.wrap--spacious .footer-heading{ margin-bottom: 10px; }
.wrap--spacious .footer-col li{ margin-bottom: 6px; }

/* announcement bar */
.announce{
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  text-align: center;
  padding: 8px 0;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
}
.announce-link{
  display: block;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  margin-bottom: 3px;
}
.announce-link:hover{ color: var(--accent-dim); }
.announce-sub{ color: var(--sub); }

/* nav */
nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 10px;
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 20px;
}
.brand{
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  line-height: 0;
  margin-left: 0;
}
.nav-logo,
.brand-logo,
img[src="icon.svg"]{
  transition: opacity 0.15s ease;
}
html[data-theme="dark"] .nav-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] img[src="icon.svg"]{
  filter: invert(1);
}
.nav-logo{ height: 22px; width: auto; }
.brand:hover .nav-logo{ opacity: 0.7; }

/* full identity block: logo beside a stacked name + domain — used on the homepage */
.brand--full{
  flex-direction: row;
  align-items: center;
  gap: 10px;
  line-height: normal;
}
.brand-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.brand-logo{
  height: 34px;
  width: auto;
  flex-shrink: 0;
}
.brand-name{ font-size: 15px; line-height: 1.3; }
.brand-domain{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sub);
}
.brand--full:hover .brand-name{ color: var(--accent); }

.nav-links{
  display: flex;
  align-items: center;
  text-align: right;
}
nav a{
  color: var(--sub);
  text-decoration: none;
  margin-left: 14px;
}
nav a:hover{ color: var(--accent); }
nav button{
  background: none;
  border: none;
  color: var(--sub);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-left: 14px;
}
nav button:hover{ color: var(--accent); }

.nav-toggle{
  display: none;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  margin-left: 0;
  padding: 2px 4px;
}

/* stacked variant — used on the homepage: brand block on top, then a
   vertical, right-staggered bracketed menu below it, both sitting in
   the left column with the rest of the row left empty. */
nav.nav--stacked{
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
nav.nav--stacked .nav-toggle{ display: none; }
nav.nav--stacked .nav-links{
  display: flex;
  position: static;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  width: auto;
  min-width: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-top: 0;
}
nav.nav--stacked .nav-links a,
nav.nav--stacked .nav-links button{
  margin-left: 0;
  font-weight: 700;
}
nav.nav--stacked .nav-links a::before,
nav.nav--stacked .nav-links a::after,
nav.nav--stacked #theme-toggle::before,
nav.nav--stacked #theme-toggle::after{
  color: var(--accent);
}
nav.nav--stacked .nav-links a::before,
nav.nav--stacked #theme-toggle::before{ content: "[ "; }
nav.nav--stacked .nav-links a::after,
nav.nav--stacked #theme-toggle::after{ content: " ]"; }

@media (max-width: 600px){
  nav{ position: relative; }
  .nav-toggle{ display: block; }
  .nav-links{
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    width: max-content;
    min-width: 160px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 16px 18px;
    text-align: right;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 20;
  }
  .nav-links.open{ display: flex; }
  .nav-links a,
  .nav-links button{ margin-left: 0; }
}

/* homepage hero — sized to its own content (no longer forced to fill the
   viewport) so the whole page, including the recent-posts list and
   footer below it, fits without requiring a scroll on most screens. */
.hero-screen{
  min-height: calc(100vh - 92px);
  display: flex;
  flex-direction: column;
}

/* generic centered block, used on the 404 and under-construction pages.
   Sized to its own content rather than the viewport, so the page (nav
   + this block + footer) fits on one screen without scrolling. */
.center-screen{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.center-screen .lede{ text-align: center; }
.center-screen .progress-row{ width: 100%; max-width: 420px; }
.hero{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}
.hero-logo{
  height: 64px;
  width: auto;
  margin-bottom: 18px;
}
html[data-theme="dark"] .hero-logo{
  filter: invert(1);
}
.hero-name{
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 24px;
}
.pgp{
  color: var(--sub);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.pgp .label{ color: var(--accent); }
.quote{
  color: var(--sub);
  font-style: italic;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 28px;
}
.quote .attrib{
  display: block;
  margin-top: 4px;
  font-style: normal;
}
.social-icons{
  display: flex;
  justify-content: center;
  gap: 12px;
}
.social-icons a{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.social-icons a:hover{ background: var(--accent); }
.social-icons svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.section-heading{
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 20px;
}
.section-heading::before{ content: "# "; }
.teaser{
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  padding-bottom: 24px;
}
.teaser .post-item{ margin-bottom: 0; }
.recent-posts{
  max-width: 560px;
  margin: 0 auto;
}
.all-posts{
  display: block;
  margin-top: 8px;
  font-size: 13px;
}
.all-posts a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.all-posts a:hover{ color: var(--accent-dim); }

/* heading */
h1{
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
h1::before{
  content: "# ";
}
.meta{
  color: var(--sub);
  font-size: 12.5px;
  margin-bottom: 10px;
}
.lede{
  color: var(--ink);
  margin-bottom: 14px;
}
.lede .path{
  color: var(--accent-dim);
}

/* generic sub-heading, used on about/work/post pages */
h2{
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  margin: 40px 0 14px;
}
h2::before{ content: "# "; }
h2:first-of-type{ margin-top: 0; }
p{ margin: 0 0 14px; }

/* posts list */
.post-item{ margin-bottom: 34px; }
.post-item:last-child{ margin-bottom: 8px; }
.post-item .title{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}
.post-item .title a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.post-item .title a:hover{ text-decoration-color: var(--accent); }
.post-item .meta{ margin-bottom: 8px; }
.post-item .desc{ color: var(--ink); margin-bottom: 8px; }
.post-item .readmore{
  color: var(--sub);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.post-item .readmore:hover{ color: var(--accent); border-bottom-color: var(--accent-dim); }

.pagination{
  margin: 12px 0 44px;
  font-size: 13px;
}
.pagination a{ color: var(--sub); text-decoration: none; }
.pagination a:hover{ color: var(--accent); }

/* work page — card grid */
.work-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 44px;
}
.work-card{
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 6px;
  padding: 16px 18px;
}
.work-card h3{
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.work-card ul{ margin: 0; padding: 0; list-style: none; }
.work-card li{
  font-size: 13.5px;
  color: var(--sub);
  margin-bottom: 7px;
  padding-left: 16px;
  position: relative;
}
.work-card li:last-child{ margin-bottom: 0; }
.work-card li::before{
  content: "→";
  color: var(--accent);
  position: absolute;
  left: 0;
}
.work-card li b{ color: var(--ink); }
@media (max-width: 640px){
  .work-grid{ grid-template-columns: 1fr; }
}

/* post body — long-form article content */
.post-body{ margin-bottom: 44px; }
.post-body h2{
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 8px;
}
.post-body h3{
  color: var(--accent);
  font-size: 14px;
  margin: 28px 0 10px;
}
.post-body h3::before{ content: "## "; }
.post-body ul, .post-body ol{ padding-left: 20px; margin: 0 0 14px; }
.post-body li{ margin-bottom: 6px; }
.post-body a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.post-body a:hover{ text-decoration-color: var(--accent); }
.post-body pre{
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 13px;
  margin: 0 0 16px;
}
.post-body :not(pre) > code{
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 13px;
}
.attribution{
  border-left: 3px solid var(--accent);
  background: var(--term-bg);
  color: var(--sub);
  font-size: 13px;
  padding: 10px 16px;
  margin: 0 0 24px;
}
.attribution b{ color: var(--accent); }
.figure{
  border: 1px solid var(--term-border);
  background: var(--term-bg);
  border-radius: 6px;
  padding: 18px;
  margin: 0 0 20px;
  text-align: center;
  color: var(--sub);
  font-size: 13px;
}

/* progress bar — used on under-construction.html */
.progress-row{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 16px;
}
.bar{
  flex: 1;
  height: 8px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.bar-fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 41%;
  background: repeating-linear-gradient(
    45deg,
    var(--accent),
    var(--accent) 6px,
    var(--accent-dim) 6px,
    var(--accent-dim) 12px
  );
  animation: shift 1.2s linear infinite;
}
@keyframes shift{
  from{ background-position: 0 0; }
  to{ background-position: 17px 0; }
}

/* status code — used on 404.html */
.code{
  font-size: 72px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -2px;
  line-height: 1;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.code span{ color: var(--accent); }

.actions{
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 16px;
}
.actions a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.actions a:hover{ color: var(--accent-dim); }

/* terminal */
.terminal{
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  margin-bottom: 20px;
}
.term-titlebar{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--term-border);
  position: relative;
}
.term-titlebar span.dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.term-titlebar .dot1{ background: var(--dot1); }
.term-titlebar .dot2{ background: var(--dot2); }
.term-titlebar .dot3{ background: var(--dot3); }
.term-title{
  position:absolute; left:0; right:0;
  text-align:center;
  font-size: 12px;
  color: var(--sub);
}
.term-body{
  padding: 16px 18px 20px;
}
.term-line{ margin-bottom: 12px; }
.term-line:last-child{ margin-bottom: 0; }
.prompt{ color: var(--accent); }
.cmd{ color: var(--ink); }
.out{
  color: var(--sub);
  margin: 4px 0 0 14px;
}
.out.err{ color: var(--accent); }
.cursor{
  display:inline-block;
  width: 7px; height: 14px;
  background: var(--accent);
  vertical-align: -2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink{
  50%{ opacity: 0; }
}

/* footer */
.dots{
  margin: 20px 0 12px;
  border: none;
  border-top: 2px solid var(--accent);
}
footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--sub);
}
.footer-cols{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  width: 100%;
  text-align: left;
}
.footer-col{ min-width: 110px; }
.footer-heading{
  color: var(--sub);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li{
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--sub);
}
.footer-col li a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
}
.footer-col li a:hover{ color: var(--accent-dim); }
.footer-copyright{
  display: flex;
  justify-content: flex-start;
  align-self: flex-start;
  width: 100%;
  gap: 14px;
}
.footer-copyright a{ color: var(--sub); text-decoration: none; }
.footer-copyright a:hover{ color: var(--accent); }

@media (max-width: 480px){
  .wrap{ padding: 28px 18px 44px; }
  .code{ font-size: 56px; }
  .hero{ padding: 24px 0 40px; }
  .hero-logo{ height: 52px; }
  .hero-name{ font-size: 19px; }
  .pgp, .quote{ font-size: 12px; }
  .work-card{ padding: 14px 16px; }
  .term-title{ display: none; }
}