:root {
          --bg: #0c0e11;
          --panel: #14171b;
          --border: #23262b;
          --border-soft: #1b1e23;
          --text: #e7e9ec;
          --muted: #83888f;
          --muted-dim: #565b62;
          --accent: #c98a4b;
          --accent-dim: rgba(201, 138, 75, 0.12);
      }
      * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }
      html {
          scroll-behavior: smooth;
      }
      body {
          background: var(--bg);
          background-image: radial-gradient(
              ellipse 900px 500px at 50% -10%,
              rgba(201, 138, 75, 0.05),
              transparent
          );
          color: var(--text);
          font-family: "IBM Plex Sans", sans-serif;
          line-height: 1.6;
      }
      .wrap {
          /*max-width: 800px;*/
          margin: 0 90px;
          padding: 0 24px;
      }
@media (max-width: 768px) {
    .wrap {
       
	margin:0;    
}
}
      .rail {
          display: none;
          position: fixed;
          top: 0;
          bottom: 0;
          width: 120px;
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.68rem;
          color: var(--muted-dim);
          pointer-events: none;
      }
      .rail.left {
          left: 0;
      }
      .rail.right {
          right: 0;
      }
      .rail-label {
          position: absolute;
          top: 50%;
          writing-mode: vertical-rl;
          letter-spacing: 0.15em;
          text-transform: uppercase;
      }
      .rail.left .rail-label {
          left: 48px;
          transform: translateY(-50%) rotate(180deg);
      }
      .rail.right .rail-label {
          right: 48px;
          transform: translateY(-50%);
      }
      .rail-ticks {
          position: absolute;
          left: 48px;
          top: 0;
          bottom: 0;
          width: 1px;
          background: repeating-linear-gradient(
              to bottom,
              var(--border-soft) 0,
              var(--border-soft) 1px,
              transparent 1px,
              transparent 32px
          );
      }
      .rail.right .rail-ticks {
          left: auto;
          right: 48px;
      }

      @media (min-width: 1240px) {
          .rail {
              display: block;
          }
      }
      a {
          color: inherit;
      }
      ::selection {
          background: var(--accent-dim);
          color: var(--text);
      }

      /* header */
      header {
          border-bottom: 1px solid var(--border-soft);
      }
      .nav {
          /*max-width: 720px;*/
          margin: 0 30px;
          padding: 22px 24px;
          display: flex;
          justify-content: space-between;
          align-items: baseline;
      }
      .logo {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 500;
          font-size: 0.95rem;
          color: var(--text);
          text-decoration: none;
          letter-spacing: -0.01em;
      }
      .logo .prompt {
          color: var(--muted-dim);
          margin-right: 2px;
      }
      .nav a.link {
          color: var(--muted);
          text-decoration: none;
          font-size: 0.82rem;
          font-family: "IBM Plex Mono", monospace;
          border-bottom: 1px solid transparent;
          transition:
              color 0.15s ease,
              border-color 0.15s ease;
      }
      .nav a.link:hover {
          color: var(--accent);
          border-color: var(--accent-dim);
      }

      /* hero */
      .hero {
          padding: 60px 0 44px;
          border-bottom: 1px solid var(--border-soft);
          margin-bottom: 40px;
      }
      .kicker {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.76rem;
          color: var(--accent);
          letter-spacing: 0.04em;
          margin-bottom: 14px;
          display: block;
      }
      h1 {
          font-family: "Space Grotesk", sans-serif;
          font-weight: 600;
          font-size: clamp(1.85rem, 4vw, 2.5rem);
          line-height: 1.22;
          letter-spacing: -0.015em;
          margin-bottom: 16px;
          max-width: 18ch;
      }
      .hero p {
          color: var(--muted);
          font-size: 1rem;
          max-width: 50ch;
          margin-bottom: 18px;
      }
      .byline {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.8rem;
          color: var(--muted-dim);
      }
      .byline a {
          color: var(--accent);
          text-decoration: none;
          border-bottom: 1px solid var(--accent-dim);
      }
      .byline a:hover {
          border-color: var(--accent);
      }

      /* posts */
      .posts {
          padding-bottom: 72px;
      }
      .posts-head {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          margin-bottom: 20px;
      }
      .posts-head h2 {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.78rem;
          color: var(--muted);
          font-weight: 400;
          letter-spacing: 0.01em;
      }
      .posts-head h2 .path {
          color: var(--muted-dim);
      }
      .posts-count {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.72rem;
          color: var(--muted-dim);
      }

      .post-list {
          border-top: 1px solid var(--border-soft);
      }
      .post {
          display: grid;
          grid-template-columns: 44px 1fr;
          gap: 4px 16px;
          text-decoration: none;
          color: var(--text);
          padding: 20px 12px;
          margin: 0 -12px;
          border-bottom: 1px solid var(--border-soft);
          border-radius: 6px;
          transition:
              background 0.15s ease,
              border-color 0.15s ease;
      }
      .post:hover {
          background: var(--panel);
          border-bottom-color: var(--border-soft);
      }
      .post-index {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.78rem;
          color: var(--muted-dim);
          padding-top: 2px;
          transition: color 0.15s ease;
      }
      .post:hover .post-index {
          color: var(--accent);
      }
      .post-body {
          min-width: 0;
      }
      .post-tag {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.7rem;
          color: var(--accent);
          text-transform: uppercase;
          letter-spacing: 0.07em;
      }
      .post-title {
          font-family: "Space Grotesk", sans-serif;
          font-weight: 600;
          font-size: 1.1rem;
          margin: 5px 0 6px;
          letter-spacing: -0.01em;
      }
      .post-desc {
          color: var(--muted);
          font-size: 0.9rem;
          max-width: 54ch;
      }
      .post-meta {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.72rem;
          color: var(--muted-dim);
          margin-top: 8px;
      }
      .post-meta .dot {
          margin: 0 6px;
          color: var(--border);
      }

      /* footer */
      footer {
          border-top: 1px solid var(--border-soft);
          padding: 28px 0;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 12px;
      }
      footer p,
      footer a {
          font-family: "IBM Plex Mono", monospace;
          font-size: 0.74rem;
          color: var(--muted-dim);
          text-decoration: none;
      }
      footer a:hover {
          color: var(--accent);
      }

      @media (max-width: 600px) {
          .nav {
              padding: 18px 20px;
          }
          .hero {
              padding: 44px 0 32px;
          }
          .post {
              grid-template-columns: 32px 1fr;
              gap: 2px 12px;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          html {
              scroll-behavior: auto;
          }
          * {
              transition: none !important;
          }
      }
      .hero {
          display: flex;
          justify-content: space-between;
          align-items: center;

          padding: 60px 0 44px;
          border-bottom: 1px solid var(--border-soft);
          margin-bottom: 40px;
          gap: 4rem;
      }

      .hero-text {
          flex: 1;
      }

      .hero-hamster {
          width: 280px;
          height: auto;
          flex-shrink: 0;
      }
      @media (max-width: 900px) {
          .hero {
              flex-direction: column-reverse;
              text-align: center;
              gap: 2rem;
          }

          h1,
          .hero p {
              max-width: 100%;
          }

          .hero-hamster {
              width: 180px;
          }
      }