/* homepage */
.hero{position:relative;padding:22px 0 0;text-align:center}
.hero h1{font-size:clamp(31px,8.4vw,64px);max-width:15ch;margin:0 auto}
.hero h1 .line{display:block}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero .sub{font-size:clamp(17px,4.4vw,21px);max-width:36ch;margin:14px auto 0;color:var(--plum)}
.hero .sun{position:absolute;left:-6px;top:6px;width:64px;animation:spin 40s linear infinite}
.hero .kite-fly{position:absolute;right:-8px;top:-4px;width:86px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:760px){.hero{padding-top:40px}.hero .sun{width:96px;left:2%;top:30px}.hero .kite-fly{width:130px;right:3%;top:10px}}
@media (max-width:420px){.hero h1{padding:0 34px}}

/* where to first: photo tiles */
.where{margin:30px auto 0}
.where h2{font-size:clamp(26px,6vw,40px);text-align:center;margin:0 0 30px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.tile{position:relative;display:block;aspect-ratio:600/840;text-decoration:none;color:#fff;transition:transform .2s ease}
.tile:hover{transform:translateY(-4px)}
.tile:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:var(--radius)}
.tile .ph{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--gold-wash)}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover .ph img{transform:scale(1.04)}
.tile .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,32,46,0) 22%,rgba(42,32,46,.6) 52%,rgba(42,32,46,.92) 100%)}
.tile .txt{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.tile h3{font-size:clamp(23px,2.6vw,33px);line-height:1.02;margin:0;color:#fff;text-wrap:balance}
.tile .q{margin:5px 0 9px;font:600 16px/1.25 var(--sans);opacity:.95}
.tile .idea{font:600 16px/1.3 var(--sans);margin:0 0 8px}
.tile .tchips{display:flex;flex-wrap:wrap;gap:5px}
.tile .tchips span{font:700 16px var(--sans);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--plum);text-shadow:none}
.tile .peek{position:absolute;z-index:3;width:clamp(64px,8vw,96px);height:auto;top:-22px;right:-10px;transform:rotate(8deg);filter:drop-shadow(0 4px 6px rgba(58,46,63,.18));transition:transform .25s ease}
.tile:hover .peek{transform:rotate(-4deg) translateY(-6px)}
@media (max-width:520px){.tiles{gap:12px}.tile .tchips span:nth-child(n+3){display:none}.tile .idea{font-size:16px}.tile h3{font-size:22px}.tile .q{font-size:16px;margin:4px 0 7px}.tile .txt{left:12px;right:12px;bottom:12px}.tile .peek{width:58px;top:-18px;right:-6px}}
@media (prefers-reduced-motion:reduce){.tile,.tile .ph img,.tile .peek{transition:none}}

/* sample week strip */
.week-wrap{padding:22px 0;margin:0 0 22px}
.week-head{padding:0 20px 14px}
.week-head .eyebrow{margin:0 0 2px;font:800 16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--coral)}
.week-head h2{font-size:clamp(24px,5.5vw,34px);text-wrap:balance}
.week-head p:last-child{margin:6px 0 0;color:var(--plum-soft)}
.week{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;overflow-x:auto;padding:4px 20px 10px;scroll-snap-type:x mandatory;scroll-padding:0 20px;overscroll-behavior-x:contain}
.day{scroll-snap-align:start;border-radius:18px;background:var(--cream);border:1px solid var(--line);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .15s}
.day:hover{transform:translateY(-3px)}
.day .d{font:800 16px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:10px 12px 0;color:var(--coral)}
.day img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:8px}
.day .ic{margin:8px 12px 0;aspect-ratio:4/3;border-radius:12px;display:grid;place-items:center;background:var(--gold-wash)}
.day .ic svg{width:34px;height:34px;color:var(--plum)}
.day b{display:block;padding:10px 12px 2px;font-size:16px;line-height:1.25}
.day .m{display:block;padding:0 12px 12px;font-size:16px;color:var(--plum-soft);font-weight:700}
.day.today{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.week-cta{display:flex;justify-content:center;padding:16px 20px 0}
@media (min-width:1000px){.week{grid-auto-columns:minmax(0,1fr);overflow:visible}.day .d{font-size:16px;letter-spacing:.05em;white-space:nowrap}}

/* dinner card */
.dinner{margin:22px 0 0}
.dinner-card{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;position:relative}
.dinner-card .photo{border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:4/3}
.dinner-card .body{padding:18px 18px 22px}
.dinner-card .eyebrow{font-size:16px;color:var(--plum-soft);margin:0 0 4px}
.dinner-card h2{font-size:clamp(30px,7.4vw,40px);margin-bottom:12px}
.dinner-card .chips{margin-bottom:18px}
.dinner-card .acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dinner-card .garlic{position:absolute;right:10px;bottom:10px;width:84px;transform-origin:bottom center;animation:wiggle 3.4s ease-in-out infinite}
.dinner-card.swap{animation:pop .45s ease}
@media (min-width:760px){.dinner-card{grid-template-columns:1.05fr 1fr;align-items:center}.dinner-card .photo{border-radius:var(--radius) 0 0 var(--radius);height:100%;aspect-ratio:auto}.dinner-card .body{padding:30px}.dinner-card .garlic{width:110px}}

/* value row */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 22px}
.value{padding:14px 8px 16px;text-align:center}
.value img{width:100%;max-width:120px;aspect-ratio:1;object-fit:contain;margin:0 auto 6px}
.value b{display:block;font:650 16px/1.2 var(--serif)}
@media (min-width:760px){.values{gap:18px}.value b{font-size:20px}.value{padding:20px}}

/* desktop: the headline stays on exactly two big lines */
@media (min-width:760px){.hero h1{max-width:none;font-size:clamp(36px,5vw,64px);line-height:1.08}.hero h1 .line{white-space:nowrap}.hero .sub{max-width:52ch}.hero .kite-fly{top:-26px;right:1%;width:118px}.hero .sun{top:4px;left:1%;width:88px}}
@media (min-width:760px) and (max-width:1100px){.hero .kite-fly{width:88px;top:-18px}.hero .sun{width:76px}}

/* hero: straight to the real weekly plan (board 2026-10-07) */
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px auto 4px}
.hero-cta .btn{width:auto;max-width:100%}
.hero-note{font-size:16px;color:var(--ink-soft,#6b5f6f)}