:root{
      --bg:#f9fafb;
      --section:#e5e7eb;
      --primary:#0f766e;
      --text:#111827;
      --border:#111827;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        linear-gradient(135deg, rgba(15,118,110,0.08) 0%, rgba(249,250,251,1) 35%, rgba(229,231,235,0.85) 100%);
      color:var(--text);
      font-family: Inter, Arial, Helvetica, sans-serif;
    }
    h1,h2,h3,h4,h5{
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:800;
      margin:0 0 .7rem 0;
      line-height:1.05;
    }
    p{margin:.2rem 0 1rem 0; line-height:1.55}
    a{color:var(--text)}
    .topbar{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(249,250,251,0.96);
      border-bottom:3px solid var(--border);
      backdrop-filter: blur(8px);
    }
    .nav-shell{
      max-width:1400px;
      margin:0 auto;
      padding:.55rem .9rem;
      display:grid;
      grid-template-columns: 1.2fr auto;
      gap:.8rem;
      align-items:center;
    }
    .brand-wrap{
      display:flex;
      align-items:center;
      gap:.7rem;
    }
    .brand-badge{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      background:var(--primary);
      color:#fff;
      border:3px solid var(--border);
      font-weight:900;
      transform:rotate(-4deg);
    }
    .brand-title{
      font-size:1rem;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.12em;
    }
    nav{
      background:transparent;
      box-shadow:none;
      height:auto;
      line-height:normal;
    }
    nav ul{
      display:flex;
      gap:.5rem;
      justify-content:flex-end;
      align-items:center;
      flex-wrap:wrap;
      margin:0;
    }
    nav ul li a, .sidenav li a{
      color:var(--text);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.06em;
      border:3px solid var(--border);
      border-radius:999px;
      padding:.55rem 1rem;
      background:var(--section);
      transition:transform .35s ease, background .35s ease, color .35s ease;
    }
    nav ul li a:hover, .sidenav li a:hover, .pill-btn:hover{
      background:var(--primary);
      color:#fff;
      transform:translateX(6px);
    }
    .sidenav{
      background:var(--bg);
      border-right:3px solid var(--border);
    }
    .menu-trigger{
      display:none;
      border:3px solid var(--border);
      border-radius:999px;
      background:var(--section);
      width:48px;
      height:48px;
      align-items:center;
      justify-content:center;
      color:var(--text);
    }
    .page{
      max-width:1400px;
      margin:0 auto;
      padding:.9rem;
      display:grid;
      grid-template-columns: minmax(0, 1.7fr) 330px;
      gap:.9rem;
    }
    .main-col{
      display:grid;
      gap:.9rem;
    }
    .card-brutal{
      background:var(--section);
      border:3px solid var(--border);
      box-shadow:8px 8px 0 0 var(--primary);
    }
    .hero{
      overflow:hidden;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      min-height:480px;
    }
    .hero-copy{
      padding:1rem;
      display:grid;
      align-content:space-between;
      gap:.8rem;
    }
    .hero-kicker{
      display:inline-block;
      width:max-content;
      padding:.35rem .7rem;
      background:var(--primary);
      color:#fff;
      border:3px solid var(--border);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      animation:slideInLeft .7s ease;
    }
    .hero h1{
      font-size:clamp(2.3rem, 5vw, 5.2rem);
      animation:slideInLeft .8s ease;
    }
    .hero p{
      max-width:58ch;
      font-size:1rem;
      animation:slideInLeft .95s ease;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      animation:slideInLeft 1.05s ease;
    }
    .pill-btn{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.8rem 1.15rem;
      border-radius:999px;
      border:3px solid var(--border);
      background:var(--bg);
      color:var(--text);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.06em;
      transition:transform .35s ease, background .35s ease, color .35s ease;
    }
    .pill-btn.primary{
      background:var(--primary);
      color:#fff;
    }
    .hero-figure{
      position:relative;
      min-height:320px;
      border-left:3px solid var(--border);
      overflow:hidden;
      animation:slideInRight .85s ease;
    }
    .hero-figure img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border:8px solid var(--section);
    }
    .hero-stamp{
      position:absolute;
      right:14px;
      bottom:14px;
      background:var(--bg);
      border:3px solid var(--border);
      padding:.8rem 1rem;
      font-weight:900;
      text-transform:uppercase;
      max-width:220px;
      box-shadow:6px 6px 0 0 var(--primary);
    }
    .about-band{
      display:grid;
      grid-template-columns: .9fr 1.1fr;
      gap:0;
      overflow:hidden;
    }
    .about-title{
      background:linear-gradient(135deg, rgba(15,118,110,.14), rgba(229,231,235,1));
      border-right:3px solid var(--border);
      padding:1rem;
      display:flex;
      align-items:flex-end;
    }
    .about-text{
      padding:1rem;
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:.8rem;
      align-items:start;
    }
    .micro-box{
      background:var(--bg);
      border:3px solid var(--border);
      padding:.8rem;
      min-height:100%;
    }
    .content-wrap{
      display:grid;
      grid-template-columns: minmax(0,1fr);
      gap:.8rem;
      padding:.8rem;
    }
    .content-head{
      display:grid;
      grid-template-columns: 1fr auto;
      gap:.8rem;
      align-items:end;
      border-bottom:3px solid var(--border);
      padding-bottom:.6rem;
    }
    .post-list{
      display:grid;
      gap:.8rem;
    }
    .post-row{
      display:grid;
      grid-template-columns: 220px minmax(0,1fr);
      gap:.8rem;
      background:var(--bg);
      border:3px solid var(--border);
      overflow:hidden;
      transition:transform .35s ease;
      animation:slideInUp .7s ease;
    }
    .post-row:hover{
      transform:translateX(8px);
    }
    .post-thumb{
      min-height:180px;
      border-right:3px solid var(--border);
      background:linear-gradient(135deg, rgba(15,118,110,.14), rgba(229,231,235,.95));
    }
    .post-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border:8px solid var(--bg);
    }
    .post-copy{
      padding:.85rem;
      display:grid;
      gap:.45rem;
      align-content:start;
    }
    .post-copy h3{
      font-size:1.05rem;
      margin-bottom:.2rem;
    }
    .meta-line{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-bottom:.2rem;
    }
    .tag-brutal{
      display:inline-block;
      padding:.2rem .55rem;
      background:var(--section);
      border:2px solid var(--border);
      font-weight:800;
      text-transform:uppercase;
      font-size:.75rem;
    }
    .sidebar{
      display:grid;
      gap:.9rem;
      align-content:start;
    }
    .side-box{
      padding:.9rem;
    }
    .side-list{
      display:grid;
      gap:.55rem;
      margin-top:.5rem;
    }
    .side-link{
      display:block;
      padding:.7rem .75rem;
      background:var(--bg);
      border:3px solid var(--border);
      font-weight:800;
      text-transform:uppercase;
      transition:transform .35s ease, background .35s ease, color .35s ease;
    }
    .side-link:hover{
      transform:translateX(6px);
      background:var(--primary);
      color:#fff;
    }
    .newsletter-input{
      border:3px solid var(--border)!important;
      background:var(--bg)!important;
      padding:0 .8rem!important;
      box-shadow:none!important;
      margin:0!important;
      color:var(--text)!important;
    }
    .input-field{
      margin:.2rem 0 .8rem 0!important;
    }
    .footer{
      max-width:1400px;
      margin:0 auto;
      padding:0 .9rem .9rem;
    }
    .footer-inner{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:.8rem;
      padding:.9rem;
      align-items:center;
    }
    .footer-minimal-nav{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .footer-minimal-nav a{
      padding:.55rem .9rem;
      border:3px solid var(--border);
      border-radius:999px;
      background:var(--bg);
      font-weight:800;
      text-transform:uppercase;
    }
    @keyframes slideInLeft{
      from{opacity:0; transform:translateX(-28px)}
      to{opacity:1; transform:translateX(0)}
    }
    @keyframes slideInRight{
      from{opacity:0; transform:translateX(28px)}
      to{opacity:1; transform:translateX(0)}
    }
    @keyframes slideInUp{
      from{opacity:0; transform:translateY(24px)}
      to{opacity:1; transform:translateY(0)}
    }
    @media (max-width: 1100px){
      .page{
        grid-template-columns: 1fr;
      }
      .sidebar{
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
    }
    @media (max-width: 860px){
      .hero{
        grid-template-columns: 1fr;
      }
      .hero-figure{
        border-left:none;
        border-top:3px solid var(--border);
        min-height:260px;
      }
      .about-band{
        grid-template-columns: 1fr;
      }
      .about-title{
        border-right:none;
        border-bottom:3px solid var(--border);
      }
      .about-text{
        grid-template-columns: 1fr;
      }
      .post-row{
        grid-template-columns: 1fr;
      }
      .post-thumb{
        border-right:none;
        border-bottom:3px solid var(--border);
        min-height:220px;
      }
      .footer-inner{
        grid-template-columns: 1fr;
      }
      .footer-minimal-nav{
        justify-content:flex-start;
      }
      nav ul{
        display:none;
      }
      .menu-trigger{
        display:flex;
        justify-self:end;
      }
      .nav-shell{
        grid-template-columns: 1fr auto;
      }
    }
    @media (max-width: 640px){
      .sidebar{
        grid-template-columns: 1fr;
      }
      .content-head{
        grid-template-columns: 1fr;
      }
      .hero-copy, .about-title, .about-text, .content-wrap, .side-box, .footer-inner{
        padding:.8rem;
      }
      .brand-title{
        font-size:.88rem;
      }
    }