:root{
      --bg:#fefce8;
      --section:#fef2f2;
      --primary:#f9a8d4;
      --text:#4b5563;
      --white:#fffafc;
      --shadow-dark: rgba(233, 170, 205, 0.35);
      --shadow-light: rgba(255,255,255,0.95);
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      color:var(--text);
      background-color:var(--bg);
      background-image:
        radial-gradient(rgba(75,85,99,0.04) 0.7px, transparent 0.7px),
        radial-gradient(rgba(249,168,212,0.05) 0.7px, transparent 0.7px);
      background-position: 0 0, 12px 12px;
      background-size: 24px 24px;
    }
    h1,h2,h3,h4,h5{
      text-transform:uppercase;
      letter-spacing:0.08em;
      color:var(--text);
      margin-top:0;
    }
    p{
      color:var(--text);
      line-height:1.8;
      font-size:1rem;
    }
    a{color:inherit}
    .page-shell{
      width:min(1280px, calc(100% - 32px));
      margin:24px auto;
    }
    .neu{
      background:var(--section);
      border-radius:var(--radius-xl);
      box-shadow:
        12px 12px 24px var(--shadow-dark),
        -12px -12px 24px var(--shadow-light);
    }
    .neu-soft{
      background:var(--section);
      border-radius:var(--radius-lg);
      box-shadow:
        8px 8px 18px rgba(233, 170, 205, 0.25),
        -8px -8px 18px rgba(255,255,255,0.92);
    }
    .neu-inset{
      background:var(--section);
      border-radius:var(--radius-lg);
      box-shadow:
        inset 6px 6px 12px rgba(233, 170, 205, 0.18),
        inset -6px -6px 12px rgba(255,255,255,0.85);
    }
    .topbar{
      padding:18px 28px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:28px;
      position:sticky;
      top:14px;
      z-index:20;
      margin-bottom:24px;
    }
    .brand{
      position:absolute;
      left:28px;
      font-weight:700;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--text);
    }
    .menu-wrap{
      display:flex;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
    }
    .menu-link{
      padding:12px 22px;
      border-radius:999px;
      text-transform:uppercase;
      letter-spacing:0.08em;
      font-size:0.92rem;
      text-decoration:none;
      background:transparent;
      border:1.5px solid rgba(249,168,212,0.55);
      color:var(--text);
      box-shadow:
        5px 5px 12px rgba(233, 170, 205, 0.18),
        -5px -5px 12px rgba(255,255,255,0.9);
    }
    .hero{
      display:flex;
      gap:24px;
      padding:24px;
      margin-bottom:28px;
      align-items:stretch;
      flex-wrap:wrap;
    }
    .hero-left{
      flex:1 1 360px;
      display:flex;
      flex-direction:column;
      gap:20px;
      min-width:280px;
    }
    .hero-right{
      flex:1.15 1 420px;
      min-width:280px;
      display:flex;
      align-items:stretch;
    }
    .hero-panel{
      padding:34px;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .eyebrow{
      display:inline-block;
      padding:10px 16px;
      border-radius:999px;
      background:rgba(249,168,212,0.22);
      color:var(--text);
      width:max-content;
      font-size:0.85rem;
      letter-spacing:0.12em;
      text-transform:uppercase;
      margin-bottom:16px;
    }
    .hero h1{
      font-size:clamp(2rem, 5vw, 4.3rem);
      line-height:1.05;
      margin-bottom:18px;
    }
    .hero-copy{
      max-width:58ch;
      font-size:1.05rem;
    }
    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top:26px;
    }
    .ghost-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:14px 22px;
      border-radius:999px;
      text-decoration:none;
      border:1.5px solid rgba(249,168,212,0.7);
      background:transparent;
      color:var(--text);
      text-transform:uppercase;
      letter-spacing:0.08em;
      box-shadow:
        6px 6px 14px rgba(233, 170, 205, 0.16),
        -6px -6px 14px rgba(255,255,255,0.9);
    }
    .hero-stats{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }
    .stat-card{
      flex:1 1 130px;
      padding:18px 20px;
      min-width:120px;
    }
    .stat-card strong{
      display:block;
      font-size:1.6rem;
      margin-bottom:6px;
    }
    .hero-image-card{
      width:100%;
      padding:18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
    }
    .hero-image-card img{
      width:100%;
      height:100%;
      min-height:420px;
      object-fit:cover;
      border-radius:28px;
      display:block;
      box-shadow:
        8px 8px 18px rgba(233, 170, 205, 0.20),
        -8px -8px 18px rgba(255,255,255,0.88);
    }
    .hero-caption{
      margin-top:16px;
      padding:14px 18px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
    }
    .split-area{
      display:flex;
      gap:24px;
      flex-wrap:wrap;
      margin-bottom:28px;
      align-items:flex-start;
    }
    .features{
      flex:0.95 1 320px;
      padding:26px;
    }
    .features-grid{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      margin-top:20px;
    }
    .feature-item{
      flex:1 1 220px;
      padding:22px;
    }
    .feature-icon{
      width:54px;
      height:54px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:14px;
      color:var(--text);
      background:rgba(249,168,212,0.22);
      box-shadow:
        6px 6px 14px rgba(233, 170, 205, 0.18),
        -6px -6px 14px rgba(255,255,255,0.85);
    }
    .spotlight{
      flex:1.05 1 420px;
      padding:26px;
    }
    .spotlight-wrap{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
      align-items:stretch;
      margin-top:18px;
    }
    .spotlight-text{
      flex:1 1 250px;
      padding:24px;
    }
    .spotlight-quote{
      font-size:1.1rem;
      line-height:1.9;
    }
    .spotlight-list{
      margin:18px 0 0;
      padding-left:18px;
    }
    .spotlight-list li{
      margin-bottom:10px;
    }
    .spotlight-media{
      flex:1 1 260px;
      min-height:280px;
      overflow:hidden;
      padding:16px;
    }
    .spotlight-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:24px;
      display:block;
    }
    .content-section{
      padding:28px;
      margin-bottom:28px;
    }
    .content-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
      margin-bottom:26px;
    }
    .content-grid{
      display:flex;
      flex-wrap:wrap;
      gap:22px;
    }
    .post-card{
      flex:1 1 calc(33.333% - 22px);
      min-width:280px;
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .post-image{
      width:100%;
      height:220px;
      object-fit:cover;
      border-radius:24px;
      display:block;
    }
    .post-body{
      padding:8px 6px 6px;
      display:flex;
      flex-direction:column;
      gap:12px;
      flex:1;
    }
    .post-body h3{
      font-size:1.12rem;
      line-height:1.4;
      margin:0;
    }
    .post-body p{
      margin:0;
      flex:1;
    }
    .post-link{
      align-self:flex-start;
      text-decoration:none;
      padding:12px 18px;
      border-radius:999px;
      border:1.5px solid rgba(249,168,212,0.7);
      text-transform:uppercase;
      letter-spacing:0.08em;
      font-size:0.88rem;
      background:transparent;
      box-shadow:
        5px 5px 12px rgba(233, 170, 205, 0.16),
        -5px -5px 12px rgba(255,255,255,0.9);
    }
    footer{
      padding:22px 28px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
      margin-bottom:18px;
    }
    .footer-links{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .footer-links a{
      text-decoration:none;
      padding:10px 16px;
      border-radius:999px;
      border:1px solid rgba(249,168,212,0.55);
      background:transparent;
    }
    @media (max-width: 992px){
      .brand{
        position:static;
        margin-bottom:8px;
      }
      .topbar{
        flex-direction:column;
        gap:14px;
      }
      .hero-image-card img{
        min-height:320px;
      }
    }
    @media (max-width: 600px){
      .page-shell{
        width:min(100% - 18px, 1280px);
        margin:12px auto;
      }
      .topbar,.hero,.features,.spotlight,.content-section,footer{
        padding:18px;
      }
      .hero-panel{
        padding:22px;
      }
      .hero h1{
        font-size:2rem;
      }
      .post-card{
        min-width:100%;
      }
      .hero-caption{
        align-items:flex-start;
      }
    }