:root{
      --bg:#ffffff;
      --section:#f9fafb;
      --primary:#0f766e;
      --text:#111827;
      --muted:#4b5563;
      --line:#d1d5db;
    }
    html{
      scroll-behavior:smooth;
    }
    body{
      background:var(--bg);
      color:var(--text);
      font-family:'Inter',sans-serif;
      overflow-x:hidden;
      background-image:
        radial-gradient(rgba(17,24,39,0.03) 0.6px, transparent 0.6px),
        radial-gradient(rgba(15,118,110,0.025) 0.6px, transparent 0.6px);
      background-size:18px 18px, 24px 24px;
      background-position:0 0, 9px 9px;
    }
    h1,h2,h3,h4{
      font-family:'Cormorant Garamond',serif;
      font-weight:300;
      letter-spacing:-0.03em;
      color:var(--text);
    }
    a{
      color:var(--text);
    }
    .page-wrap{
      display:flex;
      min-height:100vh;
    }
    .rail{
      width:96px;
      border-right:2px solid var(--text);
      background:linear-gradient(180deg, rgba(249,250,251,0.95), rgba(255,255,255,0.95));
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:space-between;
      padding:1.5rem 0.75rem;
      position:sticky;
      top:0;
      height:100vh;
      flex-shrink:0;
    }
    .rail-brand{
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      font-family:'Cormorant Garamond',serif;
      font-size:2rem;
      font-weight:400;
      letter-spacing:0.08em;
      color:var(--primary);
    }
    .rail-menu{
      display:flex;
      flex-direction:column;
      gap:1rem;
      width:100%;
      align-items:center;
    }
    .rail-menu a{
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      font-size:0.8rem;
      text-transform:uppercase;
      letter-spacing:0.14em;
      border:2px solid var(--text);
      padding:0.9rem 0.35rem;
      border-radius:999px;
      background:#fff;
      transition:transform .28s ease, background .28s ease, color .28s ease;
    }
    .rail-menu a:hover{
      background:var(--primary);
      color:#fff;
      transform:rotate(180deg) scale(1.06);
    }
    .rail-note{
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      font-size:0.72rem;
      color:var(--muted);
      letter-spacing:0.08em;
    }
    .main{
      flex:1;
      min-width:0;
    }
    .hero-shell{
      padding:1.5rem;
    }
    .hero-box{
      background:var(--section);
      border:2px solid var(--text);
      min-height:78vh;
      position:relative;
      overflow:hidden;
    }
    .hero-grid{
      display:flex;
      flex-wrap:wrap;
      min-height:78vh;
    }
    .hero-left{
      flex:1 1 58%;
      padding:4.5rem 4rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
      z-index:2;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:0.75rem;
      margin-bottom:1rem;
      color:var(--primary);
      text-transform:uppercase;
      letter-spacing:0.18em;
      font-size:0.78rem;
    }
    .hero-kicker::before{
      content:"";
      width:48px;
      height:2px;
      background:var(--primary);
      display:inline-block;
    }
    .hero-title{
      font-size:clamp(3.2rem,8vw,6.4rem);
      line-height:0.9;
      max-width:9ch;
      margin-bottom:1.25rem;
    }
    .hero-sub{
      font-size:1.06rem;
      line-height:1.9;
      color:var(--muted);
      max-width:58ch;
      margin-bottom:2rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
      align-items:center;
    }
    .btn-brutal{
      border:2px solid var(--text);
      border-radius:999px;
      padding:0.9rem 1.4rem;
      background:#fff;
      color:var(--text);
      font-weight:600;
      transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
      box-shadow:6px 6px 0 0 var(--text);
    }
    .btn-brutal:hover{
      transform:scale(1.05);
      background:var(--primary);
      color:#fff;
      box-shadow:8px 8px 0 0 var(--text);
    }
    .btn-ghost{
      background:transparent;
    }
    .hero-right{
      flex:1 1 42%;
      border-left:2px solid var(--text);
      background:
        linear-gradient(135deg, rgba(15,118,110,0.10), rgba(255,255,255,0.65)),
        var(--section);
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:2rem;
    }
    .slider-stack{
      position:relative;
      width:min(430px, 100%);
      aspect-ratio:1/1.08;
    }
    .slide-card{
      position:absolute;
      inset:0;
      border:2px solid var(--text);
      background:#fff;
      padding:1.25rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      animation:sliderFade 18s infinite, zoomPulse 18s infinite;
      transform-origin:center center;
    }
    .slide-card:nth-child(1){ animation-delay:0s,0s; }
    .slide-card:nth-child(2){ animation-delay:6s,6s; }
    .slide-card:nth-child(3){ animation-delay:12s,12s; }
    .slide-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:1rem;
    }
    .slide-tag{
      font-size:0.72rem;
      text-transform:uppercase;
      letter-spacing:0.18em;
      color:var(--primary);
    }
    .slide-count{
      font-size:0.78rem;
      color:var(--muted);
    }
    .slide-image{
      width:140px;
      height:140px;
      border-radius:50%;
      object-fit:cover;
      border:2px solid var(--text);
      align-self:center;
      margin:1rem 0;
      background:var(--section);
    }
    .slide-title{
      font-size:2rem;
      line-height:0.95;
      margin-bottom:0.75rem;
    }
    .slide-text{
      color:var(--muted);
      line-height:1.75;
      font-size:0.96rem;
    }
    @keyframes sliderFade{
      0%, 27%{opacity:1; z-index:3;}
      33%, 94%{opacity:0; z-index:1;}
      100%{opacity:1; z-index:3;}
    }
    @keyframes zoomPulse{
      0%, 27%{transform:scale(1);}
      33%, 94%{transform:scale(1.06);}
      100%{transform:scale(1);}
    }
    .hero-badges{
      position:absolute;
      right:1.2rem;
      bottom:1.2rem;
      display:flex;
      gap:0.75rem;
      flex-wrap:wrap;
      z-index:4;
    }
    .hero-badge{
      border:2px solid var(--text);
      background:#fff;
      border-radius:999px;
      padding:0.55rem 0.9rem;
      font-size:0.8rem;
      font-weight:500;
    }
    .section-block{
      padding:1.5rem;
    }
    .panel{
      background:var(--section);
      border:2px solid var(--text);
      padding:2rem;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1.5rem;
      margin-bottom:2rem;
      flex-wrap:wrap;
    }
    .section-title{
      font-size:clamp(2.2rem,4vw,3.6rem);
      line-height:0.95;
      margin-bottom:0.5rem;
    }
    .section-desc{
      color:var(--muted);
      max-width:60ch;
      line-height:1.8;
    }
    .feature-ribbon{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
    }
    .feature-item{
      flex:1 1 240px;
      min-height:220px;
      border:2px solid var(--text);
      background:#fff;
      padding:1.4rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:transform .28s ease;
    }
    .feature-item:hover{
      transform:scale(1.03);
    }
    .feature-num{
      font-family:'Cormorant Garamond',serif;
      font-size:3rem;
      line-height:1;
      color:var(--primary);
    }
    .feature-item h3{
      font-size:1.9rem;
      margin:1rem 0 0.5rem;
    }
    .feature-item p{
      color:var(--muted);
      line-height:1.8;
    }
    .content-mosaic{
      display:flex;
      flex-wrap:wrap;
      margin:-0.75rem;
    }
    .post-cell{
      padding:0.75rem;
      width:25%;
      display:flex;
    }
    .post-card{
      width:100%;
      border:2px solid var(--text);
      background:#fff;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      transition:transform .3s ease;
    }
    .post-card:hover{
      transform:scale(1.03);
    }
    .post-media{
      padding:1.5rem 1.5rem 0;
      display:flex;
      justify-content:center;
    }
    .post-media img{
      width:132px;
      height:132px;
      object-fit:cover;
      border-radius:50%;
      border:2px solid var(--text);
      background:var(--section);
    }
    .post-body{
      padding:1.25rem 1.5rem 1.5rem;
      display:flex;
      flex-direction:column;
      gap:0.9rem;
      flex:1;
    }
    .post-title{
      font-size:2rem;
      line-height:0.95;
    }
    .post-excerpt{
      color:var(--muted);
      line-height:1.8;
      font-size:0.95rem;
      flex:1;
    }
    .post-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      align-self:flex-start;
      border:2px solid var(--text);
      border-radius:999px;
      padding:0.7rem 1rem;
      font-weight:600;
      background:var(--section);
      transition:transform .25s ease, background .25s ease, color .25s ease;
    }
    .post-link:hover{
      transform:scale(1.05);
      background:var(--primary);
      color:#fff;
    }
    .footer-min{
      padding:1.5rem;
    }
    .footer-box{
      background:var(--section);
      border:2px solid var(--text);
      padding:1.5rem 2rem;
      display:flex;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      align-items:center;
    }
    .footer-brand{
      font-family:'Cormorant Garamond',serif;
      font-size:2rem;
      color:var(--primary);
    }
    .footer-links{
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
    }
    .footer-links a{
      border:2px solid var(--text);
      border-radius:999px;
      padding:0.55rem 0.95rem;
      background:#fff;
      transition:transform .25s ease, background .25s ease, color .25s ease;
    }
    .footer-links a:hover{
      transform:scale(1.05);
      background:var(--primary);
      color:#fff;
    }
    .footer-copy{
      color:var(--muted);
      font-size:0.92rem;
    }
    @media screen and (max-width: 1200px){
      .post-cell{ width:50%; }
      .hero-left{ padding:3rem 2.4rem; }
    }
    @media screen and (max-width: 900px){
      .page-wrap{ display:block; }
      .rail{
        width:100%;
        height:auto;
        position:relative;
        border-right:none;
        border-bottom:2px solid var(--text);
        flex-direction:row;
        justify-content:space-between;
        padding:1rem;
      }
      .rail-brand, .rail-note, .rail-menu a{
        writing-mode:horizontal-tb;
        transform:none;
      }
      .rail-brand{
        font-size:2rem;
      }
      .rail-menu{
        flex-direction:row;
        width:auto;
        gap:0.5rem;
      }
      .rail-menu a:hover{
        transform:scale(1.06);
      }
      .hero-right{
        border-left:none;
        border-top:2px solid var(--text);
        min-height:460px;
      }
      .hero-grid{
        flex-direction:column;
      }
    }
    @media screen and (max-width: 768px){
      .hero-shell, .section-block, .footer-min{
        padding:1rem;
      }
      .hero-left{
        padding:2rem 1.4rem;
      }
      .panel{
        padding:1.25rem;
      }
      .post-cell{ width:100%; }
      .feature-item{ min-height:auto; }
      .footer-box{
        padding:1.25rem;
      }
      .hero-title{
        font-size:clamp(2.6rem,12vw,4rem);
      }
      .slide-title{
        font-size:1.6rem;
      }
    }