:root{
    --cream: #F6F1E7;
    --cream-2: #EFE7D6;
    --olive-deep: #4B5A34;
    --olive: #6E7F49;
    --sage: #A9B98C;
    --ink: #2B2B22;
    --gold: #B58A4A;
    --line: rgba(75,90,52,0.22);
    --shadow: 0 10px 30px rgba(43,43,34,0.08);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Lato', sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- textured background ---------- */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
      radial-gradient(circle at 15% 8%, rgba(110,127,73,0.06), transparent 40%),
      radial-gradient(circle at 85% 92%, rgba(181,138,74,0.07), transparent 40%);
    z-index:0;
  }

  .wrap{position:relative; z-index:1; max-width:960px; margin:0 auto; padding:0 24px;}

  /* ---------- header ---------- */
  header{
    text-align:center;
    padding:64px 24px 40px;
    position:relative;
  }

  .crest{
    width:260px; height:260px; margin:0 auto 22px;
    display:flex; align-items:center; justify-content:center;
  }
  .crest img{
    width:100%; height:100%;
    object-fit:contain;
    filter:drop-shadow(0 8px 20px rgba(43,43,34,0.12));
  }
  @media (max-width:560px){
    .crest{width:220px; height:220px;}
  }

  h1.brand{
    font-family:'Lato', sans-serif;
    font-weight:500;
    font-size:clamp(2.6rem, 6vw, 4.2rem);
    letter-spacing:0.01em;
    margin:0;
    color:var(--olive-deep);
    line-height:1;
  }

  .brand-sub{
    font-family:'Lato', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.35em;
    font-size:0.72rem;
    color:var(--gold);
    margin-top:14px;
    font-weight:500;
  }

  .brand-flourish{
    width:220px; height:14px; margin:20px auto 0;
    opacity:0.8;
  }

  /* ---------- sticky nav ---------- */
  nav.catnav{
    position:sticky; top:0; z-index:20;
    background:rgba(246,241,231,0.96);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding:12px 0;
  }
  nav.catnav .wrap{
    display:flex; gap:10px; overflow-x:auto;
    padding:2px 20px 6px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  nav.catnav .wrap::-webkit-scrollbar{display:none;}
  nav.catnav a{
    flex:0 0 auto;
    font-size:0.92rem;
    font-weight:600;
    letter-spacing:0.01em;
    text-transform:none;
    color:var(--olive-deep);
    text-decoration:none;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.5);
    transition:all .25s ease;
    white-space:nowrap;
  }
  nav.catnav a:hover, nav.catnav a:focus-visible{
    border-color:var(--olive);
    background:rgba(110,127,73,0.12);
  }
  nav.catnav a.active{
    border-color:var(--olive);
    background:var(--olive-deep);
    color:#fff;
  }

  /* ---------- sections ---------- */
  section.category{
    padding:56px 0 12px;
    scroll-margin-top:70px;
    position:relative;
  }

  .cat-header{
    position:relative;
    z-index:1;
    padding-top:4px;
  }

  .cat-doodle{
    position:absolute;
    z-index:0;
    top:50%;
    right:6px;
    transform:translateY(-50%);
    width:132px;
    height:132px;
    pointer-events:none;
  }
  .cat-doodle img{
    width:100%; height:100%;
    object-fit:contain;
    opacity:0.92;
  }
  @media (max-width:560px){
    .cat-doodle{width:90px; height:90px; right:-4px;}
  }

  .cat-heading{
    display:flex;
    align-items:baseline;
    gap:18px;
    margin-bottom:6px;
    position:relative;
    z-index:1;
  }
  .cat-heading .num{
    font-family:'Lato', sans-serif;
    font-style:italic;
    color:var(--sage);
    font-size:1.1rem;
  }
  .cat-heading h2{
    font-family:'Lato', sans-serif;
    font-weight:600;
    font-size:clamp(1.9rem,4vw,2.6rem);
    color:var(--olive-deep);
    margin:0;
  }
  .cat-rule{
    height:1px;
    background:linear-gradient(90deg, var(--olive) 0%, transparent 70%);
    margin:14px 0 34px;
    position:relative;
    z-index:1;
  }

  .items{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    position:relative;
    z-index:1;
  }
  .item{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
    column-gap:16px;
    padding:20px 0;
    border-bottom:1px dashed var(--line);
  }
  .item:last-child{border-bottom:none;}

  .item-name{
    font-family:'Lato', sans-serif;
    font-weight:600;
    font-size:1.3rem;
    color:var(--ink);
  }
  .item-price{
    font-family:'Lato', sans-serif;
    font-weight:600;
    font-size:1.2rem;
    color:var(--olive);
    white-space:nowrap;
  }
  .item-desc{
    grid-column:1 / -1;
    font-size:0.92rem;
    line-height:1.55;
    color:#141414;
    margin-top:6px;
    max-width:60ch;
  }

  /* ---------- divider (signature element) ---------- */
  .vine-divider{
    display:flex; align-items:center; justify-content:center;
    margin:8px 0 0;
    opacity:0.75;
  }
  .vine-divider svg{width:180px; height:auto;}

  /* ---------- footer ---------- */
  footer{
    text-align:center;
    padding:70px 24px 60px;
    color:var(--olive-deep);
  }
  footer .fnote{
    font-family:'Lato', sans-serif;
    font-style:italic;
    font-size:1.15rem;
    color:var(--olive);
  }
  footer .fsmall{
    margin-top:10px;
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold);
  }

  @media (max-width:560px){
    header{padding:44px 20px 28px;}
    section.category{padding:40px 0 6px;}
    .item{grid-template-columns:1fr auto;}
  }