html, body { background: #0C0B0A; color: #F5F0E8; font-family: 'Inter Tight', sans-serif; }
    .font-display { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 500; letter-spacing: -0.02em; }
    .font-mono { font-family: 'IBM Plex Mono', monospace; }

    .grain::before { content:""; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); opacity:0.05; pointer-events:none; z-index:1; mix-blend-mode:overlay; }

    .drift { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; opacity:0.5; will-change:transform; }
    @keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,-40px) scale(1.15); } }
    @keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,50px) scale(0.85); } }
    .drift-a { animation: drift1 14s ease-in-out infinite; }
    .drift-b { animation: drift2 18s ease-in-out infinite; }

    .card { background: linear-gradient(180deg, rgba(245,240,232,0.02) 0%, rgba(245,240,232,0) 100%); border: 1px solid #2A2620; transition: border-color 250ms ease, background 250ms ease; }
    .divider { height:1px; background: linear-gradient(90deg, transparent, #2a2620, transparent); }
    ::selection { background: #00D68F; color: #0C0B0A; }

    .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
    .reveal.is-in { opacity: 1; transform: none; }

    .mega-panel { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px); opacity:0; pointer-events:none; transition:opacity 220ms ease, transform 220ms ease; }
    .mega-panel::before { content:""; position:absolute; top:-28px; left:-48px; right:-48px; height:32px; }
    .mega-trigger { }
    .mega-trigger:hover .mega-panel,
    .mega-trigger:focus-within .mega-panel,
    .mega-trigger.is-open .mega-panel,
    .mega-panel:hover { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }.magnet { will-change: transform; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }

    /* Breadcrumb */
    .breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
      color: #6B6761;
      padding: 88px 0 8px;
    }
    .breadcrumb a { color: #9B968C; transition: color .2s; }
    .breadcrumb a:hover { color: #00D68F; }
    .breadcrumb .sep { color: #3A342B; }
    .breadcrumb .current { color: #F5F0E8; }

    /* ===== Filter pills ===== */
    .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
    .filter-pill {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px; letter-spacing: 0.04em;
      padding: 8px 14px; border-radius: 999px;
      color: #9B968C;
      border: 1px solid #2A2620;
      background: transparent;
      transition: all .2s; cursor: pointer;
    }
    .filter-pill:hover { color: #F5F0E8; border-color: #3A342B; }
    .filter-pill.is-active {
      color: #00D68F;
      background: rgba(0,214,143,0.08);
      border-color: rgba(0,214,143,0.4);
    }

    /* ===== Featured card ===== */
    .feat-card {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      border: 1px solid #2A2620;
      border-radius: 22px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(245,240,232,0.02) 0%, rgba(245,240,232,0) 100%);
      transition: border-color .25s ease;
    }
    .feat-card:hover { border-color: rgba(0,214,143,0.45); }
    @media (max-width: 900px) { .feat-card { grid-template-columns: 1fr; } }
    .feat-cover {
      aspect-ratio: 16/11;
      background: linear-gradient(135deg, rgba(0,214,143,0.25), rgba(93,236,179,0.15)), #1B1815;
      position: relative;
      overflow: hidden;
      display: grid; place-items: center;
    }
    .feat-cover .typo {
      font-family: 'Fraunces', serif; font-style: italic;
      font-variation-settings: 'wght' 500, 'SOFT' 100;
      font-size: clamp(60px, 9vw, 110px);
      color: rgba(245,240,232,0.18);
      letter-spacing: -0.04em;
      line-height: 0.9; text-align: center;
      padding: 20px;
    }
    .feat-meta { padding: 30px 32px 32px; display: flex; flex-direction: column; justify-content: center; }
    .feat-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #00D68F; margin-bottom: 14px; }
    .feat-h { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: #F5F0E8; }
    .feat-h em { font-family: 'Fraunces', serif; font-style: italic; color: #00D68F; font-variation-settings: 'wght' 500, 'SOFT' 80; }
    .feat-dek { color: #9B968C; line-height: 1.65; margin-top: 14px; font-size: 15px; }
    .feat-byline { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #2A2620; font-size: 13px; color: #9B968C; }
    .feat-by-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,214,143,0.4), rgba(0,214,143,0.1)); display: grid; place-items: center; font-family: 'Fraunces', serif; font-style: italic; color: #F5F0E8; font-size: 13px; }
    .feat-by-name { color: #F5F0E8; font-weight: 500; }

    /* ===== Post cards ===== */
    .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
    .post-card {
      display: flex; flex-direction: column;
      border: 1px solid #2A2620;
      border-radius: 18px;
      overflow: hidden;
      background: #0E0D0C;
      transition: border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
    }
    .post-card:hover { border-color: rgba(0,214,143,0.4); transform: translateY(-2px); }
    .post-cover {
      aspect-ratio: 16/10;
      display: grid; place-items: center;
      position: relative; overflow: hidden;
    }
    .post-cover .typo {
      font-family: 'Fraunces', serif; font-style: italic;
      font-variation-settings: 'wght' 500, 'SOFT' 100;
      font-size: clamp(36px, 4vw, 56px);
      color: rgba(245,240,232,0.2);
      letter-spacing: -0.02em;
      text-align: center; padding: 18px;
    }
    .post-cover.c-brand { background: linear-gradient(135deg, rgba(93,236,179,0.25), rgba(0,214,143,0.08)), #1B1815; }
    .post-cover.c-web { background: linear-gradient(135deg, rgba(0,214,143,0.30), rgba(15,30,25,0.4)), #14181a; }
    .post-cover.c-mkt { background: linear-gradient(135deg, rgba(155,150,140,0.22), rgba(0,214,143,0.05)), #181216; }
    .post-cover.c-sales { background: linear-gradient(135deg, rgba(204,255,0,0.12), rgba(0,214,143,0.10)), #14160e; }
    .post-cover.c-ai { background: linear-gradient(135deg, rgba(0,214,143,0.32), rgba(93,236,179,0.10)), #0e1815; }
    .post-cover.c-ops { background: linear-gradient(135deg, rgba(155,150,140,0.18), rgba(0,214,143,0.10)), #18181a; }

    .post-tag {
      position: absolute; top: 14px; left: 14px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(12,11,10,0.85);
      border: 1px solid #2A2620;
      color: #00D68F;
      backdrop-filter: blur(8px);
    }

    .post-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
    .post-h { font-family: 'Fraunces', serif; font-variation-settings: 'wght' 500; color: #F5F0E8; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 8px; }
    .post-card:hover .post-h { color: #00D68F; }
    .post-dek { color: #9B968C; font-size: 14px; line-height: 1.55; flex: 1; }
    .post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #2A2620; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6B6761; }
    .post-foot .author { color: #9B968C; text-transform: none; letter-spacing: 0; font-family: 'Inter Tight', sans-serif; font-size: 12px; }

    /* Newsletter card */
    .news-card {
      position: relative;
      border: 1px solid rgba(0,214,143,0.3);
      border-radius: 22px;
      padding: 36px 36px 38px;
      background: linear-gradient(180deg, rgba(0,214,143,0.05), rgba(0,214,143,0));
      overflow: hidden;
    }
    .news-card::before {
      content: ""; position: absolute; right: -120px; top: -120px;
      width: 320px; height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,214,143,0.18), transparent 70%);
      pointer-events: none;
    }
    .news-form {
      display: flex; gap: 8px; flex-wrap: wrap;
      max-width: 460px;
    }
    .news-form input {
      flex: 1; min-width: 200px;
      background: #0C0B0A;
      border: 1px solid #2A2620;
      border-radius: 10px;
      padding: 12px 16px;
      color: #F5F0E8;
      font-family: 'Inter Tight', sans-serif;
      font-size: 14px;
      outline: none;
      transition: border-color .2s;
    }
    .news-form input:focus { border-color: #00D68F; }
    .news-form button {
      background: #00D68F;
      color: #0C0B0A;
      padding: 12px 22px;
      border-radius: 10px;
      font-weight: 500;
      transition: background .2s;
      cursor: pointer;
      border: none;
    }
    .news-form button:hover { background: #F5F0E8; }

    a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible, input:focus-visible, details > summary:focus-visible { outline:2px solid #00D68F; outline-offset:3px; border-radius:6px; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
      .reveal { opacity:1; transform:none; }
    }

    /* Hidden state */
    .post-card[hidden] { display: none !important; }