/* Kanna‑Kulture static site styles — HSL tokens only */
:root {
    /* Surfaces */
    --background: 0 0% 100%;
    --foreground: 222 50% 6%;
  
    --card: 0 0% 100%;
    --card-foreground: 222 50% 6%;
  
    /* Brand */
    --primary: 145 46% 28%;
    --primary-foreground: 0 0% 98%;
  
    --secondary: 152 30% 92%;
    --secondary-foreground: 145 42% 22%;
  
    --muted: 210 24% 96%;
    --muted-foreground: 215 16% 46%;
  
    --accent: 165 60% 40%;
    --accent-foreground: 0 0% 98%;
  
    --border: 214 32% 91%;
    --ring: 145 46% 28%;
  
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.25);
    --shadow-glow: 0 0 48px hsl(var(--accent) / 0.35);
  
    --radius: 12px;
  }
  
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    line-height: 1.6;
  }
  
  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  .h2 { font: 800 2rem/1.2 "Plus Jakarta Sans", Inter, sans-serif; margin: 0; }
  .h3 { font: 800 1.5rem/1.2 "Plus Jakarta Sans", Inter, sans-serif; margin: 0 0 .25rem; }
  .small { font-size: .85rem; }
  .muted { color: hsl(var(--muted-foreground)); }
  .center { text-align: center; }
  .narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
  
  /* Header */
  .site-header {
    position: sticky; top: 0; z-index: 40;
    background: hsl(var(--background)/.8);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid hsl(var(--border));
  }
  .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
  .brand-mark { width: 24px; height: 24px; color: hsl(var(--primary)); }
  .brand-name { font: 700 1.0625rem/1 "Plus Jakarta Sans", Inter, sans-serif; }
  .nav { display: none; gap: 2rem; }
  .nav-link { color: hsl(var(--muted-foreground)); text-decoration: none; font-size: .95rem; position: relative; transition: color .2s ease; }
  .nav-link:hover { color: hsl(var(--foreground)); }
  .header-actions { display: flex; gap: .5rem; align-items: center; }
  
  @media (min-width: 768px) { .nav { display: flex; } }
  
  /* Buttons */
  .btn { display: inline-flex; align-items: center; gap: .5rem; justify-content: center; border-radius: 999px; border: 1px solid transparent; padding: .625rem 1rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn .icon { font-size: 1rem; }
  .btn-sm { padding: .5rem .875rem; font-size: .9rem; }
  .btn-lg { padding: .75rem 1.125rem; font-size: 1rem; }
  .btn-xl { padding: .875rem 1.25rem; font-size: 1.05rem; }
  .btn-hero { color: hsl(var(--primary-foreground)); background-image: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%); box-shadow: var(--shadow-elegant); }
  .btn-hero:hover { box-shadow: var(--shadow-glow); }
  .btn-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
  .btn-outline:hover { background: hsl(var(--secondary)); border-color: hsl(var(--secondary)); }
  .btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
  .btn-ghost:hover { color: hsl(var(--foreground)); }
  
  /* Hero */
  .hero { position: relative; min-height: 60vh; display: grid; align-items: center; }
  .hero-bg { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(60% 60% at 30% 40%, hsl(var(--accent)/.25), transparent 60%),
    radial-gradient(40% 40% at 70% 30%, hsl(var(--primary)/.25), transparent 60%),
    linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(152 30% 97%) 65%, transparent 100%);
    filter: blur(0px);
  }
  .hero-inner { padding: 3rem 0; }
  .hero-title { font: 800 clamp(2rem, 5vw, 3.5rem)/1.1 "Plus Jakarta Sans", Inter, sans-serif; margin: 0; letter-spacing: -0.02em; }
  .hero-subtitle { margin: 1rem 0 0; font-size: 1.125rem; color: hsl(var(--muted-foreground)); max-width: 48ch; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
  
  /* Sections */
  .section { padding: 4rem 0; }
  .subtle { background: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(152 30% 97%) 100%); }
  .section-header { max-width: 640px; }
  
  /* Grid */
  .grid { display: grid; gap: 1rem; }
  .grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
  
  /* Cards */
  .card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-elegant); transition: transform .2s ease, box-shadow .2s ease; }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
  .card-header { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
  .card-title { font: 700 1.05rem/1.2 "Plus Jakarta Sans", Inter, sans-serif; margin: 0; }
  .card-text { margin: 0; color: hsl(var(--muted-foreground)); font-size: .95rem; }
  .link-card .story-link { display: inline-block; margin-top: .75rem; color: hsl(var(--primary)); text-decoration: none; position: relative; }
  .link-card .story-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: hsl(var(--primary)); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
  .link-card .story-link:hover::after { transform: scaleX(1); transform-origin: left; }
  
  /* Icons (pure CSS shapes for simplicity) */
  .i { width: 20px; height: 20px; display: inline-block; color: hsl(var(--primary)); }
  .i-leaf { background: conic-gradient(from 180deg at 50% 50%, hsl(var(--primary)) 0 25%, transparent 0 100%); border-radius: 100% 0 100% 0; transform: rotate(45deg); }
  .i-cookie { border-radius: 50%; background: radial-gradient(circle at 30% 35%, transparent 3px, hsl(var(--primary)) 4px 6px, transparent 7px),
    radial-gradient(circle at 70% 60%, transparent 3px, hsl(var(--primary)) 4px 6px, transparent 7px),
    hsl(var(--secondary-foreground)/.15); }
  .i-drop { border-radius: 0 100% 100% 100%; background: hsl(var(--primary)); transform: rotate(45deg); }
  .i-heart { position: relative; }
  .i-heart::before, .i-heart::after { content: ""; position: absolute; width: 10px; height: 16px; background: hsl(var(--primary)); border-radius: 10px 10px 0 0; top: 2px; }
  .i-heart::before { left: 2px; transform: rotate(-45deg); transform-origin: 0 100%; }
  .i-heart::after { left: 8px; transform: rotate(45deg); transform-origin: 100% 100%; }
  .i-box { border: 2px solid hsl(var(--primary)); border-radius: 3px; box-shadow: inset 0 0 0 2px hsl(var(--primary)/.2); }
  .i-scale { border-bottom: 2px solid hsl(var(--primary)); border-radius: 50%; }
  .i-pill { border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary)) 50%, hsl(var(--accent)) 50%); }
  .i-cap { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 18px solid hsl(var(--primary)); height: 0; width: 0; }
  
  /* Accordion */
  .accordion { margin-top: 1.25rem; }
  .accordion-item { border-bottom: 1px solid hsl(var(--border)); }
  .accordion-trigger { width: 100%; text-align: left; padding: 1rem 0; background: none; border: 0; font: 600 1rem/1.2 Inter, sans-serif; cursor: pointer; }
  .accordion-content { padding: 0 0 1rem; color: hsl(var(--muted-foreground)); }
  
  /* Newsletter */
  .newsletter { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1rem auto 0; }
  .newsletter input { height: 48px; padding: 0 1rem; border-radius: 999px; border: 1px solid hsl(var(--border)); outline: none; font-size: 1rem; }
  .newsletter input:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 4px hsl(var(--ring)/.15); }
  @media (min-width: 640px) { .newsletter { grid-template-columns: 1fr auto; } }
  
  /* Footer */
  .site-footer { border-top: 1px solid hsl(var(--border)); padding: 2.5rem 0; margin-top: 2rem; }
  .footer-inner { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; }
  .footer-nav { display: flex; gap: 1.25rem; }
  @media (min-width: 768px) { .footer-inner { flex-direction: row; } }
  
  /* Toast */
  #toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: hsl(var(--foreground)); color: hsl(var(--primary-foreground)); padding: .75rem 1rem; border-radius: 12px; box-shadow: var(--shadow-elegant); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
  
  /* Icon cloud */
  .icon-cloud { position: absolute; inset: 0; pointer-events: none; }
  .cloud-icon { position: absolute; width: 28px; height: 28px; color: hsl(var(--primary)); opacity: .18; animation: float var(--d, 8s) ease-in-out infinite; }
  .ci-1 { top: 18%; left: 8%; --d: 9s; }
  .ci-2 { top: 28%; right: 10%; color: hsl(var(--accent)); --d: 7s; }
  .ci-3 { bottom: 22%; left: 16%; opacity: .14; --d: 10s; }
  .ci-4 { bottom: 18%; right: 18%; color: hsl(var(--secondary-foreground)); --d: 8s; }
  .ci-5 { top: 12%; right: 32%; opacity: .12; --d: 11s; }
  
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  
  /* Animate existing category icons */
  .card .i { animation: bob 4s ease-in-out infinite; }
  
  /* Gallery */
  .gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 1.25rem; }
  @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
  .media { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-elegant); background: hsl(var(--card)); }
  .media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .4s ease; }
  .media:hover img { transform: scale(1.03); }
  .media figcaption { padding: .5rem .75rem; }
  
  /* Reveal animation */
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }


  /* this is the code i added for images */

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .media {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  .media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .media figcaption {
    padding: 0.5rem;
    font-size: 0.85rem;
    text-align: center;
    color: #555;
  }