/* ─── tokens ───────────────────────────────────────────────────── */
  :root {
    --bg:        #0e0d0a;
    --bg-raised: #15140f;
    --bg-deep:   #050503;
    --fg:        #d6cbb0;
    --fg-dim:    #7a7460;
    --fg-faint:  #3d3a30;
    --amber:     #e3a248;
    --amber-deep:#b06a18;
    --line:      #2a2820;
    --line-soft: #1c1b15;
    --hl:        rgba(227, 162, 72, .12);

    --mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", "SF Mono", monospace;
    --fs:    14px;
    --maxw:  980px;
  }

  /* ─── reset / base ─────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { background: var(--bg-deep); }

  body {
    font-family: var(--mono);
    font-size: var(--fs);
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    /* faint scanlines */
    background-image: repeating-linear-gradient(
      0deg,
      rgba(227,162,72,0.035) 0 1px,
      transparent 1px 3px
    );
    min-height: 100vh;
    overflow-x: hidden;
  }
  /* vignette at edges */
  body::before {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse at center,
      transparent 55%, rgba(0,0,0,.55) 100%);
  }

  a { color: var(--amber); text-decoration: none; }
  a:hover, a:focus-visible {
    color: var(--bg);
    background: var(--amber);
    outline: none;
  }
  a:focus-visible { outline: 1px dashed var(--amber); outline-offset: 2px; }

  ::selection { background: var(--amber); color: var(--bg); }

  hr {
    border: 0;
    border-top: 1px dashed var(--line);
    margin: 28px 0;
  }

  /* ─── layout ───────────────────────────────────────────────────── */
  .titlebar {
    position: sticky; top: 0; z-index: 5;
    background: #000;
    border-bottom: 1px solid var(--line);
    padding: 6px 18px;
    font-size: 11.5px;
    color: var(--fg-dim);
    letter-spacing: .04em;
    display: flex; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
  }
  .titlebar .prompt { color: var(--fg); }
  .titlebar .prompt b { color: var(--amber); font-weight: 500; }
  .titlebar .uptime { color: var(--fg-faint); }

  .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 28px 24px 80px;
    position: relative;
    z-index: 2;
  }

  /* ─── banner ascii ─────────────────────────────────────────────── */
  pre.banner {
    margin: 0;
    color: var(--amber);
    font-size: 12px;
    line-height: 1.35;
    overflow-x: auto;
    white-space: pre;
  }
  pre.banner b { color: #ffe0a8; font-weight: 600; }

  /* ─── identity row: copy + ascii tree ──────────────────────────── */
  .identity {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 32px;
    align-items: start;
  }
  .identity .copy p { margin: 8px 0; max-width: 60ch; }
  .identity .copy .ln { color: var(--amber); }
  .identity .copy .cmd { color: var(--fg-dim); margin-top: 4px; }
  .identity .copy .cmd::before { content: "$ "; color: var(--amber-deep); }

  .tree-block {
    color: var(--amber);
    opacity: .9;
    font-size: 11px;
    line-height: 1.05;
    white-space: pre;
    margin: 0;
    text-align: center;
  }
  .tree-block .leaves { color: var(--amber); }
  .tree-block .trunk  { color: #8a5018; }
  .tree-block .cap    { color: var(--fg-dim); font-size: 10px; letter-spacing: .12em; display: block; margin-top: 6px; }

  /* blinking cursor */
  .cursor {
    display: inline-block;
    width: .55em; height: 1em;
    background: var(--amber);
    vertical-align: -2px;
    margin-left: 2px;
    animation: blink 1s steps(2, end) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* ─── section heading ──────────────────────────────────────────── */
  .section { margin-top: 48px; scroll-margin-top: 60px; }
  .section > h2 {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--amber);
    letter-spacing: .04em;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--amber);
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
  }
  .section > h2 .id { color: var(--fg-faint); font-weight: 400; }

  /* ─── works table ──────────────────────────────────────────────── */
  .works {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 6px 22px;
    align-items: baseline;
  }
  .works .num   { color: var(--fg-dim); }
  .works .name  { color: var(--amber); }
  .works .desc  { color: var(--fg); }
  .works .year  { color: var(--fg-dim); white-space: nowrap; }
  .works .row {
    display: contents;
  }
  .works .row:hover .name   { background: var(--hl); }
  .works .row:hover .desc   { color: #f0e6cf; }

  /* ─── log: featured + list ─────────────────────────────────────── */
  .featured-post {
    border: 1px solid var(--line);
    background: var(--bg-raised);
    padding: 22px 26px;
    position: relative;
  }
  .featured-post::before {
    content: "++ FEATURED ENTRY ++";
    position: absolute; top: -9px; left: 18px;
    background: var(--bg); color: var(--amber);
    padding: 0 8px; font-size: 10px; letter-spacing: .14em;
  }
  .featured-post .meta {
    color: var(--fg-dim); font-size: 11.5px; letter-spacing: .08em;
  }
  .featured-post h3 {
    margin: 6px 0 12px;
    font-size: 19px; font-weight: 600; color: #f0e6cf;
    line-height: 1.25;
  }
  .featured-post p {
    margin: 0 0 10px;
    max-width: 65ch;
  }
  .featured-post p .ln { color: var(--amber); }
  .featured-post .more {
    display: inline-block; margin-top: 6px;
    color: var(--amber); font-size: 12px;
    border: 1px solid var(--amber);
    padding: 4px 10px;
  }
  .featured-post .more:hover { background: var(--amber); color: var(--bg); }

  details.post-expand { border: none; }
  details.post-expand > summary {
    list-style: none;
    cursor: pointer;
  }
  details.post-expand > summary::-webkit-details-marker { display: none; }

  details.post-expand .when-open { display: none; }
  details.post-expand[open] .when-closed { display: none; }
  details.post-expand[open] .when-open { display: inline; }

  details.post-expand[open] p { margin: 10px 0; max-width: 65ch; }
  details.post-expand[open] p .ln { color: var(--amber); }

  .log-list {
    list-style: none; padding: 0; margin: 22px 0 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .log-list li a {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 18px;
    padding: 8px 10px;
    color: var(--fg);
    align-items: baseline;
  }
  .log-list li a:hover { background: var(--hl); color: var(--fg); }
  .log-list .date { color: var(--fg-dim); }
  .log-list .arrow { color: var(--amber); }
  .log-list li:not(:last-child) {
    border-bottom: 1px dashed var(--line);
  }

  details.log-entry { width: 100%; }
  details.log-entry > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 18px;
    padding: 8px 10px;
    color: var(--fg);
    align-items: baseline;
  }
  details.log-entry > summary::-webkit-details-marker { display: none; }
  details.log-entry > summary:hover { background: var(--hl); color: var(--fg); }

  details.log-entry .when-open { display: none; }
  details.log-entry[open] .when-closed { display: none; }
  details.log-entry[open] .when-open { display: inline; }

  .log-body {
    padding: 10px 10px 14px 138px;
    border-top: 1px dashed var(--line-soft);
  }
  .log-body p { margin: 8px 0; max-width: 65ch; }
  .log-body p .ln { color: var(--amber); }

  /* ─── contact box ──────────────────────────────────────────────── */
  .contact {
    margin-top: 18px;
    border: 1px solid var(--amber);
    background: var(--bg-raised);
    padding: 22px 26px;
    max-width: 520px;
    position: relative;
  }
  .contact::before {
    content: "// NOOSPHERIC LINK";
    position: absolute; top: -9px; left: 18px;
    background: var(--bg); color: var(--amber);
    padding: 0 8px; font-size: 10px; letter-spacing: .14em;
  }
  .contact dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 14px;
    margin: 0;
  }
  .contact dt { color: var(--fg-dim); }
  .contact dt::after { content: ""; }
  .contact dd { margin: 0; color: var(--fg); }
  .contact dd a { color: #f0e6cf; border-bottom: 1px solid var(--amber-deep); }
  .contact dd a:hover { color: var(--bg); border-bottom-color: transparent; }
  .contact .pgp { color: var(--fg-faint); letter-spacing: .04em; }

  .vox-hint {
    margin-top: 14px;
    color: var(--fg-dim); font-size: 12px;
    max-width: 60ch;
  }

  /* ─── footer ───────────────────────────────────────────────────── */
  footer {
    margin-top: 64px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    color: var(--fg-faint);
    font-size: 11.5px;
    display: flex; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
  }
  footer .prompt { color: var(--fg-dim); }
  footer .prompt::after {
    content: "";
    display: inline-block; width: .55em; height: 1em;
    background: var(--fg-dim);
    vertical-align: -2px;
    margin-left: 4px;
    animation: blink 1s steps(2, end) infinite;
  }

 
  /* ─── responsive ───────────────────────────────────────────────── */
  @media (max-width: 720px) {
    :root { --fs: 13px; }
    .wrap { padding: 22px 16px 60px; }
    pre.banner { font-size: 10px; }
    .identity {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .tree-block { font-size: 10px; }
    .works {
      grid-template-columns: auto 1fr;
      gap: 4px 14px;
    }
    .works .year { grid-column: 2; color: var(--fg-faint); font-size: 11px; margin-top: -2px; }
    .works .desc { grid-column: 2; font-size: 12.5px; }
    .log-list li a {
      grid-template-columns: 90px 1fr auto;
      gap: 12px;
    }
    details.log-entry > summary {
      grid-template-columns: 90px 1fr auto;
      gap: 12px;
    }
    .log-body { padding-left: 102px; }
    .contact dl { grid-template-columns: 100px 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cursor, footer .prompt::after { animation: none; }
  }

  /* ─── print: tone it down ──────────────────────────────────────── */
  @media print {
    body { background: #fff; color: #000; }
    body::before { display: none; }
    .titlebar { display: none; }
    a { color: #000; }
    pre.banner, .tree-block { color: #000; }
  }