*,
  *::before,
  *::after{box-sizing:border-box;margin:0;padding:0}

  :root{
    --cream:#F2EBDD;
    --paper:#F8F4EB;
    --sand:#E5DCC9;
    --sand-2:#DCD1BA;
    --terra:#B8543A;
    --terra-dark:#91402D;
    --olive:#5C6B4A;
    --brown:#3D2E24;
    --brown-soft:#675448;
    --mustard:#D9A94E;
    --line:#CFC4AD;
    --line-soft:#E2D9C7;
    --white:#FFFDF8;
    --pad:clamp(20px,4vw,56px);
    --max:1600px;
    --ease:cubic-bezier(.22,1,.36,1);
  }

  html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    scrollbar-width:thin;
    scrollbar-color:var(--terra) var(--sand);
    overflow-x:hidden;
  }

  body{
    background:var(--cream);
    color:var(--brown);
    font-family:"Manrope",system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    max-width:100vw;
    position:relative;
  }

  body.locked{overflow:hidden}
  ::selection{background:var(--terra);color:var(--cream)}
  a{color:inherit;text-decoration:none}
  button,input{font:inherit}
  button{border:0;background:none;color:inherit;cursor:pointer}
  img{display:block;max-width:100%}
  button:focus-visible,
  a:focus-visible,
  input:focus-visible{outline:2px solid var(--terra);outline-offset:4px}

  .wrap{width:min(var(--max),100%);margin-inline:auto;padding-inline:var(--pad)}

  .serif{
    font-family:"DM Serif Display",Georgia,serif;
    font-weight:400;
    line-height:.95;
    letter-spacing:-.025em;
  }

  .serif em{color:var(--terra);font-style:italic}
  .hand{font-family:"Caveat",cursive;font-weight:600}

  .label{
    color:var(--brown-soft);
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .75s var(--ease),transform .75s var(--ease);
  }

  .reveal.visible{opacity:1;transform:none}

  header{
    position:relative;
    z-index:50;
    background:rgba(242,235,221,.96);
    border-bottom:1px solid var(--line);
  }

  .head{
    min-height:82px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:32px;
  }

  .logo{
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    width:max-content;
    font-family:"DM Serif Display",Georgia,serif;
    font-size:30px;
    line-height:1;
    letter-spacing:-.02em;
  }

  .logo-mark{
    width:9px;height:9px;
    flex:0 0 9px;
    margin-right:7px;
    border-radius:50%;
    background:var(--terra);
    transform:translateY(-5px);
  }

  .logo em{color:var(--terra);font-size:.84em;font-style:italic}

  .head-nav{
    display:flex;
    justify-content:center;
    gap:clamp(18px,2.5vw,38px);
  }

  .head-nav a,
  .head-action{
    position:relative;
    padding:7px 0;
    color:var(--brown-soft);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:color .25s ease;
  }

  .head-nav a::after{
    content:"";
    position:absolute;
    left:50%;bottom:0;
    width:5px;height:5px;
    border-radius:50%;
    background:var(--terra);
    transform:translate(-50%,4px);
    opacity:0;
    transition:opacity .25s ease,transform .25s ease;
  }

  .head-nav a:hover,
  .head-action:hover{color:var(--brown)}
  .head-nav a:hover::after{opacity:1;transform:translate(-50%,0)}

  .head-actions{display:flex;align-items:center;gap:20px}
  .head-action{border-bottom:1px solid transparent}

  .cart-button{
    display:inline-flex;
    align-items:center;
    gap:7px;
  }

  .cart-count{
    display:grid;
    place-items:center;
    min-width:21px;height:21px;
    padding-inline:5px;
    border-radius:50%;
    background:var(--terra);
    color:var(--cream);
    font-size:10px;
    font-weight:700;
  }

  .menu-button{display:none}

  .hero{padding:clamp(56px,8vw,112px) 0 clamp(72px,10vw,128px);overflow:hidden}

  .hero-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(20px,2.5vw,40px);
    align-items:start;
  }

  .hero-copy{grid-column:1 / span 7;padding-top:clamp(10px,3vw,48px);position:relative;z-index:2}

  .hero-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:28px;
    color:var(--brown-soft);
    font-size:20px;
  }

  .hero-eyebrow::before{content:"";width:42px;height:1px;background:var(--brown-soft)}

  .hero-title{
    max-width:900px;
    color:var(--brown);
    font-size:clamp(64px,9.8vw,170px);
  }

  .hero-sub{
    max-width:480px;
    margin:32px 0 36px;
    color:var(--brown-soft);
    font-size:13px;
    line-height:1.7;
  }

  .hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

  .primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:52px;
    padding:0 25px;
    border-radius:999px;
    background:var(--mustard);
    color:var(--brown);
    font-size:13px;
    font-weight:700;
    transition:transform .3s var(--ease),background .3s ease,color .3s ease,gap .3s ease;
  }

  .primary-button::after{content:"→";font-size:17px}
  .primary-button:hover{gap:19px;transform:translateY(-2px);background:var(--brown);color:var(--cream)}

  .text-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--brown);
    font-size:13px;
    font-weight:700;
  }

  .text-link span{transition:transform .25s ease}
  .text-link:hover span{transform:translateX(4px)}

  .hero-visual-wrap{
    grid-column:8 / span 5;
    position:relative;
    padding:24px 24px 0 24px;
  }

  .hero-visual{
    position:relative;
    overflow:hidden;
    aspect-ratio:4/5;
    border-radius:5px 5px 180px 5px;
    background:var(--sand);
  }

  .hero-visual::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 65%,rgba(61,46,36,.18));
    pointer-events:none;
  }

  .hero-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
  .hero-visual-wrap:hover .hero-visual img{transform:scale(1.035)}

  .hero-caption{
    position:absolute;
    left:0;
    bottom:72px;
    z-index:3;
    padding:8px 16px;
    border-radius:999px;
    background:var(--paper);
    box-shadow:0 8px 24px rgba(61,46,36,.12);
    color:var(--brown);
    font-size:20px;
    transform:rotate(-4deg);
  }

  .hero-badge{
    position:absolute;
    top:0;right:0;
    z-index:3;
    display:grid;
    place-items:center;
    width:100px;height:100px;
    padding:14px;
    border-radius:50%;
    background:var(--olive);
    color:var(--cream);
    text-align:center;
    font-family:"DM Serif Display",Georgia,serif;
    font-size:14px;
    line-height:1.1;
    transform:rotate(8deg);
    box-shadow:0 10px 28px rgba(61,46,36,.12);
  }

  .hero-note{
    position:absolute;
    right:7%;
    bottom:5%;
    z-index:3;
    color:var(--cream);
    font-size:15px;
    text-shadow:0 1px 8px rgba(0,0,0,.25);
  }

  .section{padding:clamp(80px,10vw,140px) 0;overflow:hidden}
  .section.compact{padding-top:0}

  .section-head{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:20px;
    align-items:end;
    margin-bottom:clamp(44px,6vw,76px);
  }

  .section-eyebrow{grid-column:1/span 4;color:var(--terra);font-size:19px}
  .section-title{grid-column:1/span 8;color:var(--brown);font-size:clamp(45px,5.7vw,88px)}
  .section-desc{grid-column:9/span 4;color:var(--brown-soft);font-size:14px;line-height:1.75}

  .cat-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:20px;
  }

  .cat{
    position:relative;
    display:block;
    overflow:hidden;
    min-height:280px;
    background:var(--sand);
    border-radius:5px;
    isolation:isolate;
    transition:transform .45s var(--ease);
  }

  .cat:hover{transform:translateY(-5px)}
  .cat-1{grid-column:1/span 7;aspect-ratio:16/10}
  .cat-2{grid-column:8/span 5;aspect-ratio:5/4}
  .cat-3{grid-column:1/span 4;aspect-ratio:5/6}
  .cat-4{grid-column:5/span 8;aspect-ratio:16/10}

  .cat img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 1.2s var(--ease);
  }

  .cat:hover img{transform:scale(1.045)}

  .cat::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 38%,rgba(38,27,21,.68));
    z-index:1;
  }

  .cat-content{
    position:absolute;
    left:25px;right:25px;bottom:24px;
    z-index:2;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:15px;
    color:var(--cream);
  }

  .cat-name{
    font-family:"DM Serif Display",Georgia,serif;
    font-size:clamp(31px,4vw,62px);
    line-height:.95;
  }

  .cat-name em{color:var(--mustard);font-style:italic}
  .cat-count{font-family:"Caveat",cursive;font-size:19px;white-space:nowrap}

  .products-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(36px,5vw,70px) 22px;
  }

  .product{grid-column:span 4;min-width:0}
  .product:nth-child(4){grid-column:3/span 4}

  .product-card{
    position:relative;
    overflow:hidden;
    aspect-ratio:4/5;
    border-radius:5px;
    background:var(--sand);
    cursor:pointer;
  }

  .product-card img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 1s var(--ease);
  }

  .product:hover .product-card img{transform:scale(1.025)}

  .product-badge{
    position:absolute;
    top:14px;left:14px;
    z-index:2;
    padding:6px 10px;
    border-radius:999px;
    background:var(--paper);
    color:var(--brown);
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .product-badge.olive{background:var(--olive);color:var(--cream)}
  .product-badge.new{background:var(--mustard)}

  .wish{
    position:absolute;
    top:14px;right:14px;
    z-index:3;
    display:grid;
    place-items:center;
    width:38px;height:38px;
    border-radius:50%;
    background:rgba(248,244,235,.92);
    color:var(--brown);
    font-size:18px;
    transition:transform .25s ease,background .25s ease,color .25s ease;
  }

  .wish:hover{transform:scale(1.08);background:var(--terra);color:var(--cream)}
  .wish[aria-pressed="true"]{background:var(--terra);color:var(--cream)}

  .product-info{padding-top:15px}

  .product-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px}

  .product-name{font-family:"DM Serif Display",Georgia,serif;font-size:25px;line-height:1.1}
  .product-price{font-size:16px;font-weight:700;white-space:nowrap}
  .product-desc{margin-top:5px;color:var(--brown-soft);font-size:14px;line-height:1.5}

  .product-open{
    display:inline-flex;
    margin-top:10px;
    color:var(--terra);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .25s ease,transform .25s ease;
  }

  .product:hover .product-open{opacity:1;transform:none}

  .philosophy{
    padding:clamp(80px,11vw,155px) 0;
    background:var(--sand);
    border-block:1px solid var(--line);
    overflow:hidden;
  }

  .philosophy-inner{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(30px,5vw,70px);
    align-items:center;
  }

  .philosophy-visual{
    grid-column:1/span 5;
    overflow:hidden;
    aspect-ratio:4/5;
    border-radius:5px 5px 180px 5px;
    background:var(--cream);
  }

  .philosophy-visual img{width:100%;height:100%;object-fit:cover}
  .philosophy-content{grid-column:7/span 6}
  .philosophy-title{font-size:clamp(42px,5vw,76px);margin-bottom:30px}
  .philosophy-text{max-width:600px;margin-bottom:20px;color:var(--brown-soft);font-size:17px;line-height:1.75}

  .signature{display:inline-block;margin-top:8px;font-size:26px;transform:rotate(-2deg)}

  .inside-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:18px;
  }

  .inside-item{
    position:relative;
    overflow:hidden;
    background:var(--sand);
    border-radius:5px;
  }

  .inside-1{grid-column:1/span 5;aspect-ratio:4/5}
  .inside-2{grid-column:6/span 4;aspect-ratio:1;margin-top:45px}
  .inside-3{grid-column:10/span 3;aspect-ratio:3/4;margin-top:-25px}

  .inside-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .inside-item:hover img{transform:scale(1.045)}

  .inside-caption{
    position:absolute;
    left:18px;bottom:16px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(61,46,36,.7);
    color:var(--cream);
    backdrop-filter:blur(7px);
    font-family:"Caveat",cursive;
    font-size:18px;
  }

  .why{
    padding:clamp(80px,9vw,120px) 0;
    border-top:1px solid var(--line);
    overflow:hidden;
  }

  .why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
  }

  .why-item{
    min-height:250px;
    padding:40px 28px 45px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transition:background .3s ease;
  }

  .why-item:last-child{border-right:0}
  .why-item:hover{background:var(--sand)}

  .why-num{margin-bottom:20px;color:var(--terra);font-family:"DM Serif Display",Georgia,serif;font-size:43px;font-style:italic;line-height:1}
  .why-title{margin-bottom:10px;font-family:"DM Serif Display",Georgia,serif;font-size:23px;line-height:1.15}
  .why-desc{color:var(--brown-soft);font-size:13px;line-height:1.7}

  .final-cta{
    padding:clamp(90px,12vw,155px) 0;
    background:var(--brown);
    color:var(--cream);
    text-align:center;
    overflow:hidden;
    position:relative;
  }

  .final-cta::before{
    content:"";
    position:absolute;
    width:min(650px,80vw);aspect-ratio:1;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(242,235,221,.08);
    border-radius:50%;
  }

  .final-cta-inner{position:relative;z-index:1;max-width:850px;margin:auto}

  .final-cta .eyebrow{
    margin-bottom:22px;
    font-family:"Caveat",cursive;
    font-weight:600;
    font-size:22px;
    color:var(--mustard);
    letter-spacing:.01em;
  }

  .final-cta h2{font-size:clamp(48px,7vw,100px);margin-bottom:24px}
  .final-cta h2 em{color:var(--mustard);font-style:italic}
  .final-cta p{max-width:520px;margin:0 auto 34px;color:rgba(242,235,221,.72);font-size:16px}

  .newsletter{
    display:flex;
    width:min(520px,100%);
    margin:auto;
    gap:8px;
  }

  .newsletter-label{
    display:block;
    margin-bottom:14px;
    font-family:"Caveat",cursive;
    font-weight:600;
    font-size:18px;
    color:var(--mustard);
    letter-spacing:.01em;
  }

  .newsletter input{
    min-width:0;
    flex:1;
    height:58px;
    padding:0 24px;
    border:1px solid rgba(242,235,221,.2);
    border-radius:999px;
    outline:0;
    background:rgba(242,235,221,.06);
    color:var(--cream);
    font-size:15px;
    transition:border-color .25s ease,background .25s ease;
  }

  .newsletter input::placeholder{color:rgba(242,235,221,.45)}
  .newsletter input:focus{border-color:var(--mustard);background:rgba(242,235,221,.1)}

  .newsletter button{
    height:58px;
    padding:0 28px;
    border-radius:999px;
    background:var(--mustard);
    color:var(--brown);
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    transition:background .25s ease,color .25s ease,transform .25s ease;
  }

  .newsletter button:hover{background:var(--cream);transform:translateY(-1px)}

  .form-message{
    min-height:26px;
    margin-top:14px;
    font-family:"Caveat",cursive;
    font-weight:600;
    font-size:17px;
    color:var(--mustard);
    letter-spacing:.01em;
  }

  footer{padding:85px 0 35px;border-top:1px solid var(--line);overflow:hidden}

  .footer-grid{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:40px;
    padding-bottom:55px;
    border-bottom:1px solid var(--line);
  }

  .footer-logo{font-family:"DM Serif Display",Georgia,serif;font-size:27px}
  .footer-logo em{color:var(--terra);font-style:italic}
  .footer-desc{max-width:320px;margin-top:16px;color:var(--brown-soft);font-size:13px;line-height:1.7}

  .footer-col h3{margin-bottom:15px;color:var(--brown-soft);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
  .footer-col a{display:block;margin:7px 0;color:var(--brown);font-size:13px;transition:color .2s ease}
  .footer-col a:hover{color:var(--terra)}

  .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:28px;color:var(--brown-soft);font-size:11px}
  .footer-bottom-links{display:flex;gap:20px}

  .backtop{
    position:fixed;
    right:22px;bottom:22px;
    z-index:30;
    width:44px;height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:rgba(248,244,235,.92);
    box-shadow:0 8px 25px rgba(61,46,36,.1);
    opacity:0;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity .25s ease,transform .25s ease,background .25s ease,color .25s ease;
  }

  .backtop.visible{opacity:1;pointer-events:auto;transform:none}
  .backtop:hover{background:var(--brown);color:var(--cream)}

  .drawer{
    position:fixed;
    inset:0;
    z-index:100;
    visibility:hidden;
    pointer-events:none;
  }

  .drawer.active{visibility:visible;pointer-events:auto}

  .drawer-backdrop{
    position:absolute;inset:0;
    background:rgba(34,25,20,.38);
    opacity:0;
    transition:opacity .35s ease;
  }

  .drawer-panel{
    position:absolute;
    top:0;right:0;
    width:min(460px,100%);
    height:100%;
    overflow:auto;
    padding:28px;
    background:var(--paper);
    transform:translateX(100%);
    transition:transform .45s var(--ease);
  }

  .drawer.active .drawer-backdrop{opacity:1}
  .drawer.active .drawer-panel{transform:none}

  .drawer-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }

  .drawer-header-text{display:flex;flex-direction:column;gap:4px}

  .drawer-header h2{
    font-family:"DM Serif Display",Georgia,serif;
    font-size:36px;
    line-height:1;
    letter-spacing:-.02em;
    color:var(--brown);
  }

  .drawer-header h2 em{color:var(--terra);font-style:italic}

  .drawer-subtitle{
    font-family:"Caveat",cursive;
    font-weight:600;
    font-size:17px;
    color:var(--brown-soft);
    letter-spacing:.01em;
  }

  .close{
    flex-shrink:0;
    width:44px;height:44px;
    display:grid;place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    font-size:22px;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
  }

  .close:hover{background:var(--brown);color:var(--cream);border-color:var(--brown)}

  .drawer-body{padding:28px 0}

  .drawer-body p{
    color:var(--brown-soft);
    font-size:15px;
    line-height:1.7;
  }

  .drawer-body p em{
    font-family:"DM Serif Display",Georgia,serif;
    font-style:italic;
    color:var(--brown);
    font-size:1.05em;
  }

  .drawer-links a{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:18px 0;
    border-bottom:1px solid var(--line-soft);
    font-family:"DM Serif Display",Georgia,serif;
    font-size:26px;
    color:var(--brown);
    transition:padding-left .25s ease,color .25s ease;
  }

  .drawer-links a:hover{padding-left:8px;color:var(--terra)}

  .drawer-links a span{
    color:var(--terra);
    font-family:"Caveat",cursive;
    font-size:18px;
    font-weight:600;
  }

  .search-form{display:flex;gap:8px;margin-bottom:22px}

  .search-form input{
    flex:1;height:52px;
    min-width:0;
    padding:0 20px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--white);
    outline:none;
    transition:border-color .25s ease;
  }

  .search-form input:focus{border-color:var(--terra)}

  .search-result{padding:16px 0;border-bottom:1px solid var(--line-soft)}
  .search-result button{width:100%;text-align:left}

  .search-result strong{
    display:block;
    font-family:"DM Serif Display",Georgia,serif;
    font-weight:400;
    font-size:22px;
    color:var(--brown);
    line-height:1.15;
  }

  .search-result small{
    display:block;
    margin-top:4px;
    color:var(--brown-soft);
    font-family:"Caveat",cursive;
    font-size:15px;
    font-weight:600;
  }

  .product-modal{
    position:fixed;inset:0;
    z-index:120;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(34,25,20,.5);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
  }

  .product-modal.active{opacity:1;visibility:visible;pointer-events:auto}

  .modal-card{
    width:min(940px,100%);
    max-height:min(780px,92vh);
    overflow:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--paper);
    border-radius:7px;
    transform:translateY(18px) scale(.985);
    transition:transform .4s var(--ease);
  }

  .product-modal.active .modal-card{transform:none}

  .modal-image{min-height:540px;background:var(--sand)}
  .modal-image img{width:100%;height:100%;object-fit:cover}

  .modal-content{position:relative;padding:48px 40px}

  .modal-close{
    position:absolute;top:20px;right:20px;
    width:44px;height:44px;
    display:grid;place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    font-size:22px;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
  }

  .modal-close:hover{background:var(--brown);color:var(--cream);border-color:var(--brown)}

  .modal-tag{
    font-family:"Caveat",cursive;
    font-weight:600;
    font-size:16px;
    color:var(--terra);
    letter-spacing:.01em;
  }

  .modal-title{
    margin:16px 0 10px;
    font-size:52px;
    line-height:1;
  }

  .modal-price{
    font-family:"DM Serif Display",Georgia,serif;
    font-size:24px;
    color:var(--brown);
    letter-spacing:-.01em;
  }

  .modal-description{
    margin:28px 0;
    color:var(--brown-soft);
    font-size:15px;
    line-height:1.75;
  }

  .modal-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    margin:28px 0;
    background:var(--line);
    border-radius:4px;
    overflow:hidden;
  }

  .modal-meta div{padding:20px 18px;background:var(--paper)}

  .modal-meta span{
    display:block;
    margin-bottom:6px;
    font-family:"Caveat",cursive;
    font-weight:600;
    font-size:15px;
    color:var(--terra);
    letter-spacing:.01em;
  }

  .modal-meta strong{
    display:block;
    font-family:"DM Serif Display",Georgia,serif;
    font-weight:400;
    font-size:16px;
    color:var(--brown);
  }

  .modal-add{width:100%;min-height:56px}

  .modal-note{
    margin-top:16px;
    font-family:"Caveat",cursive;
    font-weight:600;
    font-size:15px;
    color:var(--brown-soft);
    text-align:center;
    letter-spacing:.01em;
  }

  .toast{
    position:fixed;
    left:50%;bottom:25px;
    z-index:150;
    max-width:calc(100vw - 40px);
    padding:14px 22px;
    border-radius:999px;
    background:var(--brown);
    color:var(--cream);
    font-family:"DM Serif Display",Georgia,serif;
    font-size:16px;
    font-style:italic;
    letter-spacing:.005em;
    box-shadow:0 12px 34px rgba(61,46,36,.28);
    transform:translate(-50%,15px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
    text-align:center;
  }

  .toast.show{opacity:1;transform:translate(-50%,0)}
  .toast em{color:var(--mustard);font-style:italic}

  @media (max-width:1100px){
    .head{grid-template-columns:auto auto}
    .head-nav{display:none}
    .head-actions{justify-self:end}
    .menu-button{display:inline-flex;align-items:center;gap:7px}
    .hero-copy{grid-column:1/span 12}
    .hero-visual-wrap{grid-column:1/span 8;max-width:650px}
    .section-head{grid-template-columns:1fr}
    .section-eyebrow,.section-title,.section-desc{grid-column:1}
    .section-desc{max-width:520px}
    .cat-1{grid-column:1/span 7}
    .cat-2{grid-column:8/span 5}
    .cat-3{grid-column:1/span 5}
    .cat-4{grid-column:6/span 7}
    .product{grid-column:span 6}
    .product:nth-child(4){grid-column:span 6}
    .philosophy-visual{grid-column:1/span 5}
    .philosophy-content{grid-column:7/span 6}
  }

  @media (max-width:720px){
    .head{min-height:70px}
    .logo{font-size:25px}
    .head-action.search-link{display:none}
    .head-actions{gap:12px}
    .menu-button{font-size:12px}
    .hero{padding:45px 0 70px}
    .hero-copy{grid-column:1/span 12}
    .hero-eyebrow{font-size:18px}
    .hero-title{font-size:clamp(51px,15vw,86px)}
    .hero-sub{margin:24px 0 28px;font-size:15px}
    .hero-visual-wrap{grid-column:1/span 12;padding:20px 20px 0 20px}
    .hero-visual{aspect-ratio:4/5;border-radius:4px 4px 100px 4px}
    .hero-caption{left:0;bottom:55px;font-size:17px}
    .hero-badge{width:78px;height:78px;right:0;top:0;font-size:11px}
    .hero-note{font-size:12px}
    .section{padding:72px 0}
    .section-title{font-size:clamp(39px,11vw,56px)}
    .section-eyebrow{font-size:17px}
    .cat-grid{gap:12px}
    .cat-1,.cat-2,.cat-3,.cat-4{grid-column:span 12;aspect-ratio:4/3}
    .cat-content{left:18px;right:18px;bottom:18px}
    .cat-name{font-size:34px}
    .cat-count{font-size:16px}
    .products-grid{grid-template-columns:1fr;gap:48px}
    .product,.product:nth-child(4){grid-column:1}
    .product-open{opacity:1;transform:none}
    .product-card{aspect-ratio:5/6}
    .philosophy{padding:72px 0}
    .philosophy-inner{grid-template-columns:1fr;gap:35px}
    .philosophy-visual,.philosophy-content{grid-column:1}
    .philosophy-visual{max-width:520px;border-radius:4px 4px 100px 4px}
    .philosophy-title{font-size:clamp(39px,10vw,54px)}
    .philosophy-text{font-size:15px}
    .inside-grid{grid-template-columns:1fr;gap:12px}
    .inside-1,.inside-2,.inside-3{
      grid-column:1;
      margin-top:0;
      aspect-ratio:4/3;
    }
    .inside-1{aspect-ratio:4/5}
    .why-grid{grid-template-columns:1fr}
    .why-item{min-height:0;border-right:0;padding:32px 22px 36px}
    .newsletter{flex-direction:column}
    .newsletter input{
      width:100%;
      height:64px;
      font-size:16px;
      padding:10px 26px;
    }
    .newsletter button{
      width:100%;
      height:64px;
    }
    .final-cta{padding:75px 0}
    .final-cta h2{font-size:clamp(43px,12vw,60px)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
    .footer-grid > .footer-col:first-child{grid-column:1/span 2}
    .footer-bottom{flex-direction:column}
    .modal-card{grid-template-columns:1fr;max-height:94vh}
    .modal-image{min-height:330px;max-height:46vh}
    .modal-content{padding:32px 24px}
    .modal-title{font-size:40px}
    .drawer-panel{padding:22px}
    .drawer-header h2{font-size:30px}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .reveal{opacity:1;transform:none}
  }