:root{
      --bg:#fff7ed;
      --section:#ffedd5;
      --primary:#ea580c;
      --text:#7c2d12;
      --soft:#fed7aa;
      --line:#fdba74;
      --white:#fffaf5;
    }
    html{
      scroll-behavior:smooth;
    }
    body{
      background:
        radial-gradient(circle at top left, rgba(234,88,12,.10), transparent 32%),
        radial-gradient(circle at bottom right, rgba(234,88,12,.08), transparent 28%),
        linear-gradient(135deg, #fff7ed 0%, #fffaf6 45%, #fff1e6 100%);
      color:var(--text);
      font-family:'Libre Baskerville', serif;
      min-height:100vh;
    }
    h1,h2,h3,h4,h5,h6,.title,.subtitle,.navbar-item,.menu-label,.button{
      font-family:'Cormorant Garamond', serif;
      color:var(--text)!important;
      font-weight:300!important;
      letter-spacing:.02em;
    }
    a{
      color:var(--primary);
      transition:all .3s ease;
    }
    a:hover{
      color:var(--text);
    }
    .page-shell{
      display:grid;
      grid-template-columns: 220px 1fr;
      gap:1rem;
      max-width:1440px;
      margin:0 auto;
      padding:1rem;
    }
    .editorial-nav{
      position:sticky;
      top:1rem;
      align-self:start;
      background:linear-gradient(180deg, rgba(255,237,213,.9) 0%, rgba(255,247,237,.85) 100%);
      border:1px solid rgba(234,88,12,.18);
      border-radius:28px;
      padding:1.1rem .9rem;
      box-shadow:0 12px 30px rgba(124,45,18,.06);
      backdrop-filter:blur(10px);
    }
    .brand-mark{
      font-size:2rem;
      line-height:1;
      margin-bottom:.2rem;
    }
    .brand-name{
      font-size:1.6rem;
      margin-bottom:.2rem;
    }
    .brand-copy{
      font-size:.82rem;
      line-height:1.5;
      color:rgba(124,45,18,.82);
    }
    .nav-links{
      margin-top:1.25rem;
      display:flex;
      flex-direction:column;
      gap:.55rem;
    }
    .nav-links a{
      display:block;
      padding:.65rem .85rem;
      border:1px solid rgba(234,88,12,.22);
      border-radius:999px;
      background:rgba(255,250,245,.72);
      color:var(--text);
      text-align:left;
      font-size:1.05rem;
    }
    .nav-links a:hover{
      transform:translateX(4px) scale(1.02);
      border-color:var(--primary);
      box-shadow:0 10px 22px rgba(234,88,12,.10);
    }
    .main-flow{
      display:grid;
      gap:1rem;
    }
    .panel-box{
      background:linear-gradient(180deg, rgba(255,237,213,.92), rgba(255,247,237,.84));
      border:1px solid rgba(234,88,12,.16);
      border-radius:34px;
      box-shadow:0 14px 36px rgba(124,45,18,.06);
      overflow:hidden;
    }
    .hero-wrap{
      padding:1rem;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:1rem;
      align-items:center;
    }
    .hero-copy{
      padding:1rem;
    }
    .eyebrow{
      display:inline-block;
      font-size:.85rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--primary);
      border-bottom:1px solid rgba(234,88,12,.28);
      padding-bottom:.2rem;
      margin-bottom:.8rem;
    }
    .hero-title{
      font-size:4rem;
      line-height:.9;
      margin-bottom:.8rem;
    }
    .hero-text{
      font-size:1rem;
      line-height:1.75;
      max-width:52ch;
      color:rgba(124,45,18,.88);
      margin-bottom:1rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      align-items:center;
    }
    .button.is-outline-theme{
      background:transparent;
      border:1px solid var(--primary);
      color:var(--primary)!important;
      border-radius:999px;
      padding:.6rem 1.1rem;
      transition:all .35s ease;
    }
    .button.is-outline-theme:hover{
      background:rgba(234,88,12,.08);
      transform:scale(1.05);
    }
    .hero-visual{
      position:relative;
      min-height:360px;
      display:grid;
      place-items:center;
      padding:1rem;
    }
    .hero-orbit{
      width:min(100%, 420px);
      aspect-ratio:1/1;
      border-radius:50%;
      padding:1rem;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,237,213,.85) 62%, rgba(234,88,12,.12) 100%);
      border:1px solid rgba(234,88,12,.18);
      animation:zoomPulse 7s ease-in-out infinite;
    }
    .hero-orbit img{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:50%;
      border:8px solid rgba(255,250,245,.88);
      box-shadow:0 20px 40px rgba(124,45,18,.12);
    }
    .floating-note{
      position:absolute;
      background:rgba(255,250,245,.86);
      border:1px solid rgba(234,88,12,.18);
      border-radius:20px;
      padding:.75rem .9rem;
      max-width:170px;
      font-size:.85rem;
      line-height:1.5;
      box-shadow:0 12px 30px rgba(124,45,18,.08);
      animation:zoomFloat 5.5s ease-in-out infinite;
    }
    .note-top{
      top:14%;
      left:0;
    }
    .note-bottom{
      right:2%;
      bottom:10%;
      animation-delay:1.2s;
    }
    .about-wrap{
      padding:1rem;
    }
    .about-grid{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:1rem;
      align-items:stretch;
    }
    .about-stamp{
      background:linear-gradient(145deg, rgba(255,250,245,.95), rgba(255,237,213,.75));
      border:1px solid rgba(234,88,12,.16);
      border-radius:30px;
      padding:1.2rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:100%;
    }
    .about-stamp .big-number{
      font-size:4.8rem;
      line-height:.9;
      color:var(--primary);
    }
    .about-stamp p{
      font-size:.95rem;
      line-height:1.8;
      color:rgba(124,45,18,.86);
    }
    .about-story{
      background:rgba(255,250,245,.6);
      border:1px solid rgba(234,88,12,.14);
      border-radius:30px;
      padding:1.2rem;
    }
    .section-title{
      font-size:2.4rem;
      line-height:1;
      margin-bottom:.6rem;
    }
    .about-story p{
      font-size:.96rem;
      line-height:1.8;
      margin-bottom:.75rem;
      color:rgba(124,45,18,.88);
    }
    .about-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:.6rem;
    }
    .about-tags span{
      padding:.45rem .8rem;
      border:1px solid rgba(234,88,12,.2);
      border-radius:999px;
      font-size:.82rem;
      background:rgba(255,237,213,.6);
    }
    .content-wrap{
      padding:1rem;
    }
    .content-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:1rem;
      margin-bottom:.9rem;
      flex-wrap:wrap;
    }
    .content-head p{
      max-width:56ch;
      line-height:1.7;
      font-size:.94rem;
      color:rgba(124,45,18,.84);
      margin:0;
    }
    .carousel-shell{
      overflow-x:auto;
      padding-bottom:.4rem;
      scroll-snap-type:x mandatory;
      scrollbar-width:thin;
      scrollbar-color: var(--primary) rgba(255,237,213,.5);
    }
    .carousel-track{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:minmax(270px, 31%);
      gap:.9rem;
    }
    .post-card{
      scroll-snap-align:start;
      background:linear-gradient(180deg, rgba(255,250,245,.98), rgba(255,237,213,.76));
      border:1px solid rgba(234,88,12,.16);
      border-radius:28px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:100%;
      transition:transform .35s ease, box-shadow .35s ease;
    }
    .post-card:hover{
      transform:scale(1.025);
      box-shadow:0 18px 34px rgba(234,88,12,.10);
    }
    .post-top{
      display:grid;
      grid-template-columns:92px 1fr;
      gap:.8rem;
      padding:1rem 1rem .7rem;
      align-items:center;
    }
    .post-image-wrap{
      width:92px;
      height:92px;
      border-radius:50%;
      padding:4px;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(234,88,12,.14));
      animation:zoomPulse 6s ease-in-out infinite;
    }
    .post-image-wrap img{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:50%;
      border:3px solid rgba(255,250,245,.95);
    }
    .post-title{
      font-size:1.55rem;
      line-height:1.05;
      margin:0;
    }
    .post-body{
      padding:0 1rem 1rem;
      display:flex;
      flex-direction:column;
      gap:.9rem;
      height:100%;
    }
    .post-excerpt{
      font-size:.9rem;
      line-height:1.75;
      color:rgba(124,45,18,.84);
      flex-grow:1;
    }
    .post-link{
      align-self:flex-start;
      padding:.55rem .95rem;
      border:1px solid var(--primary);
      border-radius:999px;
      color:var(--primary);
      font-size:.95rem;
      background:transparent;
    }
    .post-link:hover{
      background:rgba(234,88,12,.08);
      transform:scale(1.04);
    }
    .footer-wrap{
      padding:1rem 1.2rem;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1fr auto;
      gap:1rem;
      align-items:center;
    }
    .footer-note{
      font-size:.9rem;
      line-height:1.7;
      color:rgba(124,45,18,.8);
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      justify-content:flex-end;
    }
    .footer-links a{
      padding:.45rem .85rem;
      border-radius:999px;
      border:1px solid rgba(234,88,12,.18);
      background:rgba(255,250,245,.7);
      color:var(--text);
    }
    .footer-links a:hover{
      transform:scale(1.04);
      border-color:var(--primary);
    }
    @keyframes zoomPulse{
      0%,100%{transform:scale(1);}
      50%{transform:scale(1.035);}
    }
    @keyframes zoomFloat{
      0%,100%{transform:scale(1) translateY(0);}
      50%{transform:scale(1.04) translateY(-6px);}
    }
    @media screen and (max-width: 1100px){
      .page-shell{
        grid-template-columns:1fr;
      }
      .editorial-nav{
        position:relative;
        top:auto;
      }
      .nav-links{
        flex-direction:row;
        flex-wrap:wrap;
      }
      .hero-grid,
      .about-grid{
        grid-template-columns:1fr;
      }
      .hero-title{
        font-size:3.2rem;
      }
      .carousel-track{
        grid-auto-columns:minmax(270px, 70%);
      }
    }
    @media screen and (max-width: 768px){
      .page-shell{
        padding:.75rem;
      }
      .hero-wrap,
      .about-wrap,
      .content-wrap,
      .footer-wrap{
        padding:.85rem;
      }
      .hero-title{
        font-size:2.6rem;
      }
      .section-title{
        font-size:2rem;
      }
      .hero-visual{
        min-height:280px;
      }
      .floating-note{
        position:static;
        max-width:none;
        margin-top:.7rem;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .footer-links{
        justify-content:flex-start;
      }
      .carousel-track{
        grid-auto-columns:minmax(250px, 88%);
      }
    }