:root{
    --pink:#ffb7c5;          /* blossom */
    --purple:#8a6cff;        /* hero accent */
    --plum:#3a2a52;          /* deep purple */
    --ink:#0f0f12;           /* page background */
    --charcoal:#1a1a1d;      /* panel background */
    --card:#222226;          /* card background */
    --text:#e9e9ee;          /* primary text */
    --muted:#b9bac4;         /* secondary text */
    --accent:#6dcff6;        /* sky blue */
    --accent2:#98c379;       /* matcha */
    --container:1120px;
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  
  /* Base */
  html,body{margin:0;padding:0}
  body{
    font-family:"Montserrat",sans-serif;
    font-weight:300;
    background:
      radial-gradient(1400px 700px at -10% -20%, rgba(138,108,255,.10), transparent),
      radial-gradient(1200px 600px at 110% -10%, rgba(255,183,197,.10), transparent),
      var(--ink);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  
  
  
  h1,h2,h3 {
    font-family:"Libre Bodoni",serif;
    color:var(--text);
    margin:0 0 8px;
  }

  p {
    color:var(--muted);
    margin:0 0 16px
}

  .container {
    max-width:var(--container);
    margin:0 auto;
    padding:0 20px
}

  section {
    padding:80px 0;
    position:relative;
}


  /* Section dividers */
  section::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    pointer-events:none;
  }
  
  /* Header */
  header.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:linear-gradient(180deg, rgba(15,15,18,.78), rgba(15,15,18,.55));
    backdrop-filter:blur(8px);
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg,var(--pink),var(--purple),var(--accent),var(--accent2)) 1;
  }

  .nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:120px;
}

  .brand {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--text);
}
  .brand-logo-img {
    width:96px;
    height: auto;
    object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
  .brand-name {
    font-size:26px;
    letter-spacing:.3px;
}
  .nav-links {
    display:flex;
    gap:18px;
}
  .nav-links a {
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    opacity:.9;
    padding:10px 12px;
    border-radius:10px;
}
  .nav-links a:hover {
    background:rgba(255,255,255,.06);
}
  
    /* Hero */
  .hero {
    position:relative;
    overflow:hidden;
    min-height:min(92vh,520px);
    background:
      linear-gradient(180deg, rgba(15, 15, 18, 0.781), rgba(15, 15, 18, 0.781)),
      url("./images/graphic-art.jpg") center/cover no-repeat,
      radial-gradient(900px 520px at 10% -10%, rgba(255,183,197,.18), transparent), /* pink */
      radial-gradient(820px 460px at 110% 8%, rgba(152,195,121,.18), transparent),   /* green */
      radial-gradient(760px 420px at 50% 120%, rgba(138,108,255,.16), transparent);  /* purple */
  }


  .hero-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:48px;
    align-items:center;
    padding:80px 0;
}
  
  .hero-inner {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:48px;
    align-items:center;
    padding:80px 0;
  }

  .eyebrow {
    text-transform:uppercase;
    letter-spacing:.18em;
    font-weight:700;
    color:var(--muted);
    margin-bottom:8px;
    font-size:12px;
}

  .hero p {
    font-size:18px;
}
  
  /* CTAs */
  .cta {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--text);
    color:var(--ink);
    text-decoration:none;
    padding:12px 18px;
    border-radius:999px;
    font-weight:800;
    box-shadow:var(--shadow);
  }

  .cta:hover {
    transform:translateY(-1px);
}

  .btn-accent {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    padding:12px 16px;
    border-radius:999px;
    font-weight:800;
    background:linear-gradient(135deg,var(--purple),var(--accent));
    color:#071219;
    box-shadow:var(--shadow);
  }

  .btn-accent:hover {
    transform:translateY(-1px);
}
  
  /* Hero image card */
  .hero-visual {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.1);
    background: url("./images/cafe.jpg") center/cover no-repeat;
    position: relative;
  }
  
  .hero-visual::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:var(--radius);
    background:linear-gradient(135deg, rgba(255,183,197,.18), rgba(138,108,255,.15));
    mix-blend-mode:soft-light;
  }
  
  /* Parallax */
  .parallax {
    position:relative;
    min-height:40vh;
    display:grid;
    place-items:center;
    text-align:center;
    color:#fff;
    background-image:url("https://images.unsplash.com/photo-1705831156575-a5294d295a31?q=80&w=1200&auto=format&fit=crop");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
  }
  .parallax::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,.6));
}
  .parallax>.container{
    position:relative;
    z-index:1;
}
  .parallax h2 {
    font-size:40px;
}
  
  /* Alternating section tints */
  #about {
    background:linear-gradient(180deg, rgba(138,108,255,.06), rgba(138,108,255,0));
}
  #menu {
    background: linear-gradient(
        180deg,
        rgba(152, 195, 121,0.55),
        rgba(255,183,197,1)
      );
  }

  #menu .menu-card {
    background: var(--card);
    color: var(--text);
  }
  
  #menu .menu-card h3,
  #menu .menu-card p,
  #menu .menu-card .meta {
    color: var(--text);    /* primary text color */
  }
  
  #menu .menu-card p {
    color: var(--muted);   /* secondary text color */
  }

  #events {
    background:linear-gradient(180deg, rgba(34,34,38,.6), rgba(34,34,38,.2));
}
  #contact {
    background:linear-gradient(180deg, rgba(109,207,246,.06), rgba(109,207,246,0));
}
  
  /* About Section Split layout */
  .split {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    align-items:center;
}
  .image{
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
}
  .image img{
    width:100%;
    height:auto;
    display:block;
}
  
  /* Menu cards */
  .section-header{
    text-align:center;
    margin-bottom:36px;
}
  .section-header p{
    margin:0
}
  .menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}
  .menu-card{
    background:var(--card);
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    position:relative;
  }
  .menu-card::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:4px;
    background:linear-gradient(90deg,var(--purple),var(--pink),var(--accent2));
  }
  .menu-card .pic{
    aspect-ratio:16/10;
    background-size:cover;
    background-position:center;
}
  .menu-card .body {
    padding:18px;
}
  .menu-card h3{
    font-size:20px;
}
  .menu-card p{
    color:var(--muted);
}
  .meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:800;
}
  .pill{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    letter-spacing:.3px;
    background:var(--pink);
    color:#5e0e23;
}
  
  /* Buttons */
  .btn-outline{
    border:2px solid rgba(255,255,255,.85);
    color:var(--text);
    text-decoration:none;
    padding: 10px 14px;
    border-radius:999px;
    font-weight:700;
    transition:.2s background;
    display: inline-flex; 
    align-items: center;
    margin-top: 20px;  
  }
  .btn-outline:hover{
    background: rgba(255, 183, 197, 0.12);
}
  
  /* Events */
  .events-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}
  .event-card{
    display:grid;
    grid-template-columns:92px 1fr;
    gap:16px;
    background:var(--card);
    border:1px solid rgba(255,255,255,.07);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
  }
  .event-date{
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    background:linear-gradient(180deg,var(--purple),#ffd9e2);
    color:#150a23;
    border-radius:12px;
    font-weight:900;
  }
  .event-date .mon {
    font-size:12px;
    letter-spacing:.14em;
}
  .event-date .day{
    font-size:28px;
    line-height:1;
}
  .event-body .event-title{
    margin:0 0 6px;
}
  .event-meta{
    color:var(--muted);
    margin-bottom:10px;
}
  
  /* Footer */
  footer{
    background:#0c0c0e;
    border-top:1px solid rgba(255,255,255,.06);
    color:var(--muted);
}
  .footer-inner{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:center;
    padding:24px 0;
    text-align:center;
}
  
  /* Sakura decorations */
  .sakura-deco {
    position: absolute;
    pointer-events: none;
    user-select: none;
    opacity: 0.18;
    z-index: 0;
  }
  .sakura-deco--1 {
    width: 220px;
    top: 10%;
    right: 2%;
    transform: rotate(15deg);
  }
  .sakura-deco--2 {
    width: 160px;
    bottom: 8%;
    left: 1%;
    transform: rotate(-20deg);
  }

  /* Responsive */
  @media (max-width:1000px){
    .hero-inner{
        grid-template-columns:1fr;
    }
    .split{
        grid-template-columns:1fr;
    }
  }
  @media (max-width:640px){
    section{
        padding:56px 0;
    }
    .brand-name{
        font-size:22px;
    }
    .event-card{
        grid-template-columns:72px 1fr;
    }
    .brand-logo-img{
        width:48px;
    }
  }