/* =====================
       TOKENS
    ====================== */
    :root{
      /* color */
      --bg:#0f1115;          /* charcoal */
      --ink:#e8e5e0;         /* parchment */
      --muted:#a7a39a;       /* warm gray */
      --accent:#d6a76c;      /* brass */
      --accent-tech:#5bd4ff; /* cyan */
      --line:#2a2e37;        /* guide lines */
      --panel:#151922;       /* cards */
      /* layout */
      --container:1200px;
      --radius:10px;
      --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px;
      /* type */
      --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      --font-serif: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
    }
    html,body{height:100%}
    body{
      margin:0; color:var(--ink); background:
        linear-gradient(90deg, transparent 0 49px, var(--line) 49px 50px, transparent 50px) repeat-x,
        linear-gradient(0deg,  transparent 0 49px, var(--line) 49px 50px, transparent 50px) repeat-y,
        linear-gradient(180deg, #0f1115, #121522);
      background-size: 50px 100%, 100% 50px, auto;
      font: 16px/1.6 var(--font-sans);
    }
    .container{max-width:var(--container);margin:0 auto;padding:clamp(16px,3vw,48px)}

    /* =====================
       TYPOGRAPHY
    ====================== */
    .kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem}
    .meta{color:var(--muted);font-size:.9rem}
    h1, h2, h3{font-family:var(--font-serif)}
    h1{font-weight:700;font-size:clamp(28px,5vw,56px);line-height:1.1;margin:.2rem 0}
    h2{font-weight:700;font-size:1.4rem;margin:0 0 var(--space-2);color:var(--muted);text-transform:uppercase;letter-spacing:.18em}
    h3{font-weight:600;font-size:1.1rem;margin:.2rem 0 .4rem}
    a{color:var(--ink);text-decoration:none}
    a:hover{color:var(--accent)}

    /* =====================
       CORE COMPONENTS
    ====================== */
    /* brand mark */
    .mark{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--accent);position:relative}
    .mark:before,.mark:after{content:"";position:absolute;background:var(--accent)}
    .mark:before{width:70%;height:1px}
    .mark:after{height:70%;width:1px}

    /* nav */
    header{display:flex;align-items:center;gap:var(--space-4);justify-content:space-between}
    nav ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}
    .menu-btn{appearance:none;border:1px solid var(--accent);background:transparent;color:var(--accent);padding:8px 10px;cursor:pointer}

    /* hero */
    .hero{margin:var(--space-6) 0;border:1px solid var(--line);background:
      radial-gradient(1200px 400px at 20% -10%, rgba(214,167,108,.12), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2)),
      var(--panel);overflow:hidden}
    .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;padding:clamp(18px,4vw,48px)}
    .diagram{aspect-ratio:1.2/1;border:1px solid var(--line);position:relative;background:
      conic-gradient(from 0deg at 50% 50%, transparent 0 45deg, rgba(214,167,108,.12) 45deg 90deg, transparent 0),
      radial-gradient(300px 300px at 70% 30%, rgba(255,255,255,.05), transparent 60%), var(--bg)}
    .diagram:before{content:"";position:absolute;inset:18% 18%;border:1px solid var(--accent);mix-blend:screen}
    .diagram:after{content:"";position:absolute;inset:40% 0 0 40%;border-left:1px dashed var(--accent);border-top:1px dashed var(--accent);opacity:.7}

    /* grid + card */
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .card{grid-column:span 4;background:linear-gradient(180deg,#151922,#10141d);border:1px solid var(--line);padding:20px;transition:transform .2s ease, border-color .2s ease;position:relative}
    .card:hover{transform:translateY(-4px);border-color:var(--accent)}

    /* form */
    .input{padding:10px;border:1px solid var(--line);background:#0e1219;color:var(--ink);width:100%}
    .btn{display:inline-block;padding:10px 14px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;text-decoration:none;font-size:.95rem}
    .btn:hover{background:var(--accent);color:#0f1115}

    /* blog */
    .post{max-width:860px;margin:0 auto}
    .post figure{margin:16px 0 20px;border:1px solid var(--line);background:var(--panel)}
    .post figure img{display:block;width:100%;height:auto}
    .post figure figcaption{padding:10px 12px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
    .prose p{margin:0 0 1em}
    .prose h2{font:700 1.35rem var(--font-serif);margin:1.6em 0 .6em}
    .prose h3{font:600 1.05rem var(--font-serif);margin:1.4em 0 .4em}
    .prose a{color:var(--accent);text-underline-offset:3px}
    .prose a:hover{text-decoration:underline}
    .prose blockquote{margin:1.2em 0;padding:12px 16px;border-left:2px solid var(--accent);background:rgba(255,255,255,.02)}
    .prose code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.95em; background:#0e1219; padding:.15em .35em; border:1px solid var(--line); border-radius:3px}
    .prose pre{margin:1em 0; padding:14px; background:#0e1219; border:1px solid var(--line); overflow:auto}
    .tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
    .tag{border:1px solid var(--line);padding:4px 8px;font-size:.85rem;color:var(--muted)}
    .post-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
    .post-nav a{border:1px solid var(--line);padding:10px 12px}

    /* footer */
    footer{margin-top:var(--space-6);padding:24px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}

    /* Tech mode */
    .tech { --accent: var(--accent-tech); }
    .tech .mark{filter:drop-shadow(0 0 6px rgba(91,212,255,.35))}
    .tech .diagram{animation: sweep 10s linear infinite}
    .tech .card{background:linear-gradient(180deg,#161b24,#0e131b);border-color:#223040}
    .tech .card::before{content:"";position:absolute;inset:8px;pointer-events:none;background:
      linear-gradient(90deg, rgba(91,212,255,.35), transparent 40%),
      linear-gradient(180deg, rgba(91,212,255,.15), transparent 40%);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      padding:1px;border-radius:2px;opacity:.25}
    .tech a:hover{text-shadow:0 0 8px rgba(91,212,255,.6)}
    @keyframes sweep{0%{background-position:0 0,70% 30%,0 0}100%{background-position:360deg 0,70% 30%,0 0}}

    /* responsive */
    @media (max-width: 900px){.hero-inner{grid-template-columns:1fr}.card{grid-column:span 6}}
    @media (max-width: 640px){nav ul{gap:12px;flex-wrap:wrap}.card{grid-column:span 12}}

    /* helper */
    .section{border:1px solid var(--line);background:var(--panel);padding:var(--space-4);margin:var(--space-5) 0}
    .muted{color:var(--muted)}
    .divider{border-top:1px solid var(--line);margin:var(--space-4) 0}