/* Grandma's Pot — finish pass
   Purpose: preserve the approved visual canon while making the live responsive build feel intentional on real phones. */

:focus-visible{outline:2px solid var(--terra);outline-offset:4px}
.main-nav a,.linkish,.gallery-cta a,.social a,.dock a,.btn{transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease,filter .18s ease,opacity .18s ease}
.story-menu,.gallery,.current,.practical{position:relative}
.menu-item{border-bottom:1px solid rgba(74,43,24,.08)}
.menu-item:last-child{border-bottom:0}
.menu-item img{box-shadow:0 6px 20px rgba(76,45,24,.1)}
.linkish{padding-bottom:3px;border-bottom:1px solid rgba(155,56,23,.28)}
.linkish:hover,.linkish:focus-visible{color:var(--terra);border-color:currentColor}
.story .truth{background:rgba(193,81,34,.055);padding:10px 12px;border-left-width:3px}
.gallery-grid figure{position:relative}
.gallery-grid img{transition:transform .35s ease,filter .35s ease}
.gallery-grid figure:hover img{transform:scale(1.025)}
.gallery-cta a:hover,.gallery-cta a:focus-visible{background:var(--terra);border-color:var(--terra);color:#fff}

/* Keep the original supplied logo untouched: same asset, colours and lettering everywhere. */
.brand img{content:normal!important;filter:none!important;mix-blend-mode:normal!important}
.footer-logo{content:normal!important;filter:none!important;mix-blend-mode:normal!important;opacity:1;background:none;border:0;box-shadow:none;padding:0}

/* Grandma belongs to the paper, not inside a picture card.
   Feather the portrait into the parchment in the same quiet spirit as the face above the real doorway. */
.portrait{position:relative;display:grid;place-items:center;isolation:isolate;overflow:visible}
.portrait:before{content:"";position:absolute;inset:8% 3%;z-index:-1;background:radial-gradient(ellipse at center,rgba(112,79,49,.09),rgba(112,79,49,0) 72%);filter:blur(18px);pointer-events:none}
.portrait img{display:block;width:112%;max-width:390px;margin:auto;box-shadow:none!important;border:0;background:transparent;mix-blend-mode:multiply;opacity:.62;filter:sepia(.24) grayscale(.18) saturate(.66) contrast(.86) brightness(1.06);-webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 48%,#000 0 52%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.58) 77%,transparent 100%);mask-image:radial-gradient(ellipse 58% 52% at 50% 48%,#000 0 52%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.58) 77%,transparent 100%)}
.social a{padding-bottom:3px;border-bottom:1px solid transparent}
.social a:hover,.social a:focus-visible{border-color:currentColor}

@media(max-width:820px){
  .story{min-height:0}
  .current{background:rgba(255,248,233,.17)}
}

@media(max-width:560px){
  html{scroll-padding-bottom:70px}
  .wrap{width:min(calc(100% - 34px),var(--max))}

  /* Masthead — the brand itself is the strip. No picture-in-a-box effect. */
  .site-header{position:relative;background:var(--paper);border:0;box-shadow:0 1px 0 rgba(74,43,24,.13)}
  .site-header:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent 0 4%,rgba(193,81,34,.58) 16%,rgba(193,81,34,.58) 84%,transparent 96%);opacity:.58;pointer-events:none}
  .header-grid{min-height:70px;padding:7px 0;gap:10px;align-items:center}
  .brand{display:flex;align-items:center;min-width:0;overflow:visible}
  .brand img{height:50px!important;width:auto!important;max-width:min(72vw,255px)!important;max-height:none!important;object-fit:contain;object-position:left center;mix-blend-mode:normal;filter:none}
  .head-right{margin-left:auto;gap:0}
  .hamb{width:42px;height:42px;border:0;border-radius:0;background:transparent;padding:0}
  .hamb span,.hamb span:before,.hamb span:after{width:22px;height:1.5px;border-radius:2px;background:#352218}
  .hamb span:before{top:-7px}.hamb span:after{top:7px}
  .nav-row{top:70px;padding:15px 18px 20px;box-shadow:0 12px 24px rgba(57,35,20,.1);background:rgba(247,236,216,.99)}

  /* Hero — dramatic but composed; both native CTAs remain fully visible. */
  .hero{min-height:610px}
  .hero-copy{padding:220px 0 112px}
  .hero h1{font-size:clamp(2.28rem,10.9vw,3rem);line-height:.99;max-width:11ch;margin-bottom:18px;letter-spacing:-.035em}
  .hero p{font-size:1rem;line-height:1.44;max-width:29ch;margin-bottom:24px}
  .buttons{gap:9px}
  .btn{min-height:48px;padding:0 18px;font-size:.71rem;letter-spacing:.045em}
  .btn:first-child{box-shadow:0 8px 22px rgba(112,44,17,.18)}

  /* Menu / story — calmer rhythm, no inherited desktop void. */
  .story-menu{padding:30px 0 18px}
  .section-title{font-size:clamp(1.85rem,9vw,2.28rem);line-height:1.03;letter-spacing:-.025em;margin-bottom:22px}
  .menu-list{gap:0}
  .menu-item{grid-template-columns:68px minmax(0,1fr);gap:14px;padding:14px 0}
  .menu-item img{width:66px;height:66px}
  .menu-item h3{font-size:1.04rem;line-height:1.15;margin-bottom:6px}
  .menu-item p{font-size:.78rem;line-height:1.48}
  .linkish{margin-top:18px;font-size:.7rem;line-height:1.35;letter-spacing:.045em}
  .portrait{width:72%;max-width:290px;margin:24px auto 8px;padding:0}
  .portrait img{width:118%;max-width:300px;opacity:.6}
  .story{min-height:0!important;padding:24px 0 18px}
  .story .section-title{margin-bottom:18px}
  .story p{font-size:1rem;line-height:1.56;max-width:34ch}
  .story .truth{font-size:.66rem;line-height:1.42;margin-top:17px;padding:10px 11px}

  /* Gallery / event strip. */
  .gallery{padding:18px 0 26px}
  .gallery-heading{font-size:1.1rem;line-height:1.22;gap:9px;margin-bottom:14px;text-align:center;text-wrap:balance}
  .gallery-heading:before,.gallery-heading:after{width:20px;flex:0 0 20px}
  .gallery-grid{gap:4px}
  .gallery-grid figure{border-radius:2px;aspect-ratio:1.08/1}
  .gallery-cta{margin-top:9px}
  .gallery-cta a{width:100%;text-align:center;padding:12px 13px;font-size:.65rem}
  .current{padding:21px 0}
  .current-inner{grid-template-columns:60px minmax(0,1fr);gap:13px;align-items:start}
  .current img{width:60px;height:60px;border-radius:2px}
  .current h2{font-size:1.12rem;margin:1px 0 5px}
  .current p{font-size:.74rem;line-height:1.46}
  .current .linkish{grid-column:1/-1;margin:3px 0 0;padding-top:9px}

  /* Practical info becomes four compact editorial rows, not a giant 2x2 dashboard. */
  .practical{padding:20px 0 22px}
  .info-grid{display:grid!important;grid-template-columns:1fr;border:0!important}
  .info-card{min-width:0;text-align:left!important;border:0!important;border-bottom:1px solid var(--line)!important;padding:13px 0!important;display:grid!important;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;justify-items:start}
  .info-card:last-child{border-bottom:0!important}
  .info-icon{grid-column:1;grid-row:1 / span 2;width:26px;height:26px;min-height:0!important;font-size:0!important;background:var(--terra2);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-size:contain}
  .info-card:nth-child(1) .info-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 6.5v6h5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 6.5v6h5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
  .info-card:nth-child(2) .info-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s6.5-6.1 6.5-12A6.5 6.5 0 1 0 5.5 9C5.5 14.9 12 21 12 21Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='9' r='2.2' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s6.5-6.1 6.5-12A6.5 6.5 0 1 0 5.5 9C5.5 14.9 12 21 12 21Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='9' r='2.2' fill='black'/%3E%3C/svg%3E")}
  .info-card:nth-child(3) .info-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 3.8 4.8 5.5c-.7.5-.9 1.4-.6 2.2 2.3 5.7 6.5 9.9 12.2 12.2.8.3 1.7.1 2.2-.6l1.7-2.4c.4-.6.3-1.5-.3-2l-3.1-2.4c-.6-.4-1.4-.4-1.9.1l-1.4 1.4a14.6 14.6 0 0 1-4-4L11 8.6c.5-.5.5-1.3.1-1.9L9.2 4c-.5-.6-1.4-.7-2-.2Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 3.8 4.8 5.5c-.7.5-.9 1.4-.6 2.2 2.3 5.7 6.5 9.9 12.2 12.2.8.3 1.7.1 2.2-.6l1.7-2.4c.4-.6.3-1.5-.3-2l-3.1-2.4c-.6-.4-1.4-.4-1.9.1l-1.4 1.4a14.6 14.6 0 0 1-4-4L11 8.6c.5-.5.5-1.3.1-1.9L9.2 4c-.5-.6-1.4-.7-2-.2Z' fill='black'/%3E%3C/svg%3E")}
  .info-card:nth-child(4) .info-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4 4.1 12.7A5.2 5.2 0 0 1 11.5 5l.5.6.5-.6a5.2 5.2 0 0 1 7.4 7.7L12 20.4Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4 4.1 12.7A5.2 5.2 0 0 1 11.5 5l.5.6.5-.6a5.2 5.2 0 0 1 7.4 7.7L12 20.4Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E")}
  .info-card h3{grid-column:2;margin:0 0 4px;font-size:.64rem;line-height:1.2;letter-spacing:.075em;text-transform:uppercase}
  .info-card p{grid-column:2;margin:0;font-size:.82rem;line-height:1.38}
  .info-card a{font-size:inherit;line-height:inherit}
  .info-card small{grid-column:2;display:block;font-size:.6rem;line-height:1.32;margin-top:3px;color:var(--muted)}

  /* Footer — one decisive brand close, not another content section. */
  .footer{position:relative;padding:20px 0 calc(68px + env(safe-area-inset-bottom));border-top:2px solid rgba(193,81,34,.58);background:linear-gradient(155deg,#20321a,#13230f)}
  .footer-grid{display:flex;flex-direction:column;gap:7px;text-align:center;align-items:center}
  .footer-logo{display:block;width:min(235px,72vw);height:auto;margin:0 auto 2px}
  .footer p{font-size:.61rem;line-height:1.4;max-width:35ch;color:#cfbea5}
  .social{margin-top:1px;gap:18px;font-size:.67rem;justify-content:center}
  .social a{border:0;padding:2px 0;color:#f1e4cf}

  /* Floating utility rail — tiny, useful, and visually subordinate. */
  .dock{left:10px;right:10px;bottom:calc(7px + env(safe-area-inset-bottom));width:auto;max-width:470px;margin-inline:auto;border:1px solid rgba(255,255,255,.12);border-radius:13px;overflow:hidden;background:rgba(17,31,14,.965);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(18,25,14,.28);padding-bottom:0}
  .dock a{min-height:46px;gap:3px;font-size:.52rem;letter-spacing:.055em;border-right-color:rgba(255,255,255,.09)}
  .dock b{display:block;width:19px;height:19px;font-size:0!important;line-height:1;background:#f5e7d1;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-size:contain}
  .dock a:nth-child(1) b{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8 9h8M8 12h8M8 15h6' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8 9h8M8 12h8M8 15h6' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
  .dock a:nth-child(2) b{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M12 2.8v4M12 17.2v4M2.8 12h4M17.2 12h4' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M12 2.8v4M12 17.2v4M2.8 12h4M17.2 12h4' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
  .dock a:nth-child(3) b{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 3.8 4.8 5.5c-.7.5-.9 1.4-.6 2.2 2.3 5.7 6.5 9.9 12.2 12.2.8.3 1.7.1 2.2-.6l1.7-2.4c.4-.6.3-1.5-.3-2l-3.1-2.4c-.6-.4-1.4-.4-1.9.1l-1.4 1.4a14.6 14.6 0 0 1-4-4L11 8.6c.5-.5.5-1.3.1-1.9L9.2 4c-.5-.6-1.4-.7-2-.2Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 3.8 4.8 5.5c-.7.5-.9 1.4-.6 2.2 2.3 5.7 6.5 9.9 12.2 12.2.8.3 1.7.1 2.2-.6l1.7-2.4c.4-.6.3-1.5-.3-2l-3.1-2.4c-.6-.4-1.4-.4-1.9.1l-1.4 1.4a14.6 14.6 0 0 1-4-4L11 8.6c.5-.5.5-1.3.1-1.9L9.2 4c-.5-.6-1.4-.7-2-.2Z' fill='black'/%3E%3C/svg%3E")}
  .dock a:active{background:rgba(255,255,255,.07)}
}

@media(max-width:370px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .brand img{height:46px!important;max-width:70vw!important}
  .header-grid{min-height:66px}.nav-row{top:66px}
  .hero-copy{padding-top:205px}
  .portrait{width:70%}
  .info-card{grid-template-columns:34px minmax(0,1fr);column-gap:10px}
  .dock{left:7px;right:7px;bottom:calc(6px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}