:root {
  --ink: #243238;
  --ink-soft: #536466;
  --paper: #fff2cc;
  --paper-bright: #fffaf0;
  --pine: #5b7c59;
  --mint: #b8d9a9;
  --mint-deep: #6eaa87;
  --tomato: #d96551;
  --ice: #9bd8e9;
  --butter: #f2ca76;
  --line: rgba(36, 50, 56, .21);
  --shadow: rgba(62, 82, 65, .18);
  --display: ui-rounded, "Avenir Next Rounded", "Trebuchet MS", system-ui, sans-serif;
  --body: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --utility: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.5; }
img { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 50; padding: .7rem 1rem; background: var(--ink); color: var(--paper-bright); }
.skip-link:focus { top: 1rem; }

.site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(10rem, 1fr) auto minmax(12rem, 1fr); align-items: center; gap: 1rem; min-height: 5.25rem; padding: .7rem clamp(1rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); background: rgba(255, 242, 204, .92); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: .6rem; width: max-content; color: var(--ink); font: 900 .77rem/.84 var(--display); letter-spacing: .08em; text-decoration: none; }
.brand-mark { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 2px solid var(--ink); border-radius: 44% 44% 49% 44%; background: var(--mint); box-shadow: 2px 2px 0 var(--ink); font: 900 .69rem/1 var(--utility); transform: rotate(-7deg); }
.main-nav, .legal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem clamp(.65rem, 1.6vw, 1.45rem); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.legal-nav { justify-content: flex-end; color: var(--ink-soft); font-size: .65rem; }
.main-nav a, .legal-nav a, .site-footer a { text-decoration-thickness: 1px; text-underline-offset: .22em; }

.eyebrow { margin: 0 0 .85rem; color: var(--pine); font: 800 .67rem/1 var(--utility); letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); line-height: .91; }
h1 { margin-bottom: 1.35rem; font-size: clamp(3.8rem, 8.5vw, 8.35rem); letter-spacing: -.075em; }
h2 { margin-bottom: 1rem; font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -.065em; }
h3 { margin-bottom: .7rem; font-size: clamp(1.7rem, 2.7vw, 2.65rem); letter-spacing: -.055em; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.05rem; border: 2px solid var(--ink); border-radius: .8rem 1.05rem .85rem 1rem; box-shadow: 3px 3px 0 var(--ink); font-size: .78rem; font-weight: 900; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
.button-primary { background: var(--tomato); color: #fffdf5; }
.button-quiet, .button-outline { background: var(--paper-bright); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(28rem, .95fr); width: 100%; min-height: min(48rem, calc(100vh - 5.25rem)); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #fff3c8 0%, #fff7e3 55%, #d7ebb9 100%); }
.hero > * { min-width: 0; }
.hero::before { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 49%; background: repeating-linear-gradient(90deg, transparent 0 2.4rem, rgba(64, 88, 63, .075) 2.4rem 2.48rem), repeating-linear-gradient(0deg, transparent 0 2.4rem, rgba(64, 88, 63, .075) 2.4rem 2.48rem); content: ""; }
.hero-copy { align-self: center; min-width: 0; padding: clamp(4rem, 10vw, 9.5rem) clamp(1.25rem, 7vw, 8rem); }
.hero-copy .eyebrow { color: var(--tomato); }
.hero-lede { max-width: 34rem; font-size: clamp(1rem, 1.55vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 2.35rem; }
.hero-facts { display: flex; gap: clamp(1rem, 3vw, 3rem); margin: 0; }
.hero-facts div { padding-left: .6rem; border-left: 2px solid var(--pine); }
.hero-facts dt { font: 800 .55rem/1 var(--utility); letter-spacing: .1em; }
.hero-facts dd { margin: .2rem 0 0; font: 900 1.42rem/1 var(--display); }
.hero-stage { position: relative; align-self: stretch; min-height: 35rem; margin: 0; overflow: hidden; }
.hero-stage::after { position: absolute; z-index: -1; right: -11%; bottom: -25%; width: 31rem; height: 31rem; border: 1px dashed rgba(36, 50, 56, .4); border-radius: 50%; content: ""; }
.hero-machine { position: absolute; right: 1%; bottom: -3%; width: min(95%, 42rem); filter: drop-shadow(0 1.25rem .85rem var(--shadow)); }
.hero-stage-label, .hero-stage-rule { position: absolute; z-index: 2; font: 800 .62rem/1 var(--utility); letter-spacing: .12em; }
.hero-stage-label { top: clamp(2rem, 5vw, 4.25rem); left: clamp(1rem, 4vw, 3.5rem); padding: .48rem .58rem; border: 1px solid var(--ink); background: var(--paper-bright); box-shadow: 3px 3px 0 rgba(36, 50, 56, .2); transform: rotate(-4deg); }
.hero-stage-rule { top: clamp(5.4rem, 9vw, 8rem); right: clamp(1rem, 5vw, 4rem); max-width: 9rem; color: var(--pine); text-align: right; transform: rotate(3deg); }
.hero-food-cloud { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.cloud-food { position: absolute; width: clamp(4rem, 9vw, 7.5rem); filter: drop-shadow(0 .5rem .3rem rgba(36, 50, 56, .18)); }
.cloud-food-a { top: 16%; right: 24%; transform: rotate(-11deg); }.cloud-food-b { top: 35%; left: 5%; transform: rotate(13deg); }.cloud-food-c { bottom: 14%; left: 14%; transform: rotate(-9deg); }.cloud-food-d { right: 7%; bottom: 28%; transform: rotate(10deg); }

.shelf-letter { display: grid; grid-template-columns: auto minmax(16rem, .85fr) minmax(18rem, 1.15fr); gap: clamp(1rem, 5vw, 5rem); align-items: center; padding: clamp(2.8rem, 7vw, 7.5rem) clamp(1.25rem, 7vw, 8rem); background: var(--pine); color: #fff9e8; }
.shelf-letter .eyebrow { color: #e8d590; }.shelf-letter h2 { margin: 0; }.shelf-letter > p:last-child { max-width: 38rem; margin: 0; }.shelf-letter-mark { display: grid; width: 6.4rem; height: 6.4rem; place-items: center; margin: 0; border: 2px dashed #fff9e8; border-radius: 50%; font: 900 1.1rem/1 var(--utility); transform: rotate(-14deg); }

.rhythm-section { display: grid; grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 7rem); padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); background: var(--paper-bright); }
.section-intro { align-self: start; position: sticky; top: 7rem; }.section-intro > p:last-child { max-width: 27rem; }
.rhythm-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.rhythm-card { position: relative; min-height: 17rem; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--line); border-left: .65rem solid var(--tomato); background: #ffe4d5; box-shadow: .55rem .55rem 0 rgba(91, 124, 89, .13); }
.rhythm-card-save { border-left-color: var(--mint-deep); background: #e2f2dd; }.rhythm-card-serve { border-left-color: #68b8d0; background: #dff2f7; }.step { display: inline-block; margin-bottom: 2.2rem; color: var(--pine); font: 800 .61rem/1 var(--utility); letter-spacing: .1em; }.rhythm-card p { max-width: 31rem; margin-bottom: 0; font-size: .95rem; }
.mini-shelf { position: absolute; right: 1.5rem; bottom: 1.25rem; display: grid; grid-template-columns: repeat(2, 4.2rem); gap: .35rem; transform: rotate(4deg); }.mini-cell { display: grid; width: 4.2rem; height: 4.2rem; place-items: center; border: 2px solid rgba(36, 50, 56, .4); border-radius: .65rem; }.mini-cell img { width: 75%; }.mini-hot { background: #ffa793; }.mini-room { background: #f6d47f; }.mini-frozen { background: #bce8f7; }.mini-cool { background: #83d9ad; }
.swap-mark { position: absolute; right: 1.5rem; bottom: 1.2rem; display: flex; align-items: center; gap: .25rem; }.swap-mark span { order: 1; font: 900 2.1rem/1 var(--display); }.swap-mark img { width: 4.8rem; }.swap-mark img:last-child { order: 2; }.serve-stack { position: absolute; right: 1.75rem; bottom: 1rem; display: flex; align-items: end; }.serve-stack img { width: 4.4rem; margin-left: -.65rem; filter: drop-shadow(0 .35rem .2rem rgba(36, 50, 56, .15)); }

.pantry-section { padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); background: linear-gradient(140deg, #e0f1e2 0%, #c4e0c7 100%); }
.pantry-heading { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(17rem, .55fr); gap: 3rem; align-items: end; margin-bottom: 2rem; }.pantry-heading p:last-child { max-width: 28rem; margin-bottom: .5rem; }
.family-switcher { display: flex; overflow-x: auto; border-bottom: 2px solid var(--ink); }.family-tab { min-width: 8rem; padding: 1rem 1.15rem; border: 0; border-right: 1px solid rgba(36, 50, 56, .25); background: transparent; color: var(--ink); cursor: pointer; font: 900 .75rem/1 var(--utility); letter-spacing: .11em; transition: background .16s ease, color .16s ease; }.family-tab:last-child { border-right: 0; }.family-tab.is-selected, .family-tab:hover { background: var(--ink); color: var(--paper-bright); }
.family-panels { margin-top: 1.25rem; }.family-panel { display: grid; grid-template-columns: minmax(13rem, .68fr) minmax(22rem, 1.32fr); gap: 2rem; align-items: center; min-height: 25rem; padding: clamp(1.4rem, 4vw, 4rem); border: 1px solid rgba(36, 50, 56, .28); box-shadow: .7rem .7rem 0 rgba(36, 50, 56, .12); }.family-hot { background: #ffd9cd; }.family-frozen { background: #d7eff9; }.family-cool { background: #d5f0d8; }.family-room { background: #fae6ad; }.family-copy > span { display: block; margin-bottom: 2rem; font: 900 .65rem/1 var(--utility); letter-spacing: .1em; }.family-copy p { max-width: 21rem; }.food-fan { display: flex; align-items: center; justify-content: center; min-height: 15rem; padding: 1rem; }.food-fan img { width: min(23%, 10rem); margin-left: -3.5%; filter: drop-shadow(0 .7rem .3rem rgba(36, 50, 56, .16)); transition: transform .2s ease; }.food-fan img:first-child { margin-left: 0; }.food-fan img:nth-child(1) { transform: rotate(-18deg) translateY(.5rem); }.food-fan img:nth-child(2) { transform: rotate(-9deg) translateY(-.8rem); }.food-fan img:nth-child(4) { transform: rotate(9deg) translateY(-.6rem); }.food-fan img:nth-child(5) { transform: rotate(18deg) translateY(.6rem); }.food-fan img:hover { transform: translateY(-.8rem) scale(1.08); }

.guest-section { display: grid; grid-template-columns: minmax(15rem, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 7vw, 8rem); padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem) 0; overflow: hidden; background: #f4dfaf; }.guest-heading { align-self: center; padding-bottom: clamp(3rem, 8vw, 8rem); }.guest-heading > p:last-child { max-width: 26rem; }
.guest-line { display: flex; align-items: end; min-height: 33rem; padding-top: 5rem; }.guest-card { position: relative; flex: 1 1 0; min-width: 8rem; margin-left: -1.3rem; padding: 1rem .2rem 0; border: 1px solid rgba(36, 50, 56, .3); border-bottom: 0; background: rgba(255, 250, 240, .52); transition: transform .2s ease; }.guest-card:first-child { margin-left: 0; }.guest-card:hover { z-index: 2; transform: translateY(-1rem) rotate(-1deg); }.guest-card > img { width: min(100%, 13rem); margin: 1rem auto 0; }.guest-card-one { background: #e9dec8; }.guest-card-two { background: #e6c3bd; }.guest-card-three { background: #c8e1cf; }.guest-card-four { background: #c1deeb; }.guest-tag { position: absolute; top: -1.65rem; left: .6rem; font: 900 .65rem/1 var(--utility); letter-spacing: .1em; }

.appearance-section { display: grid; grid-template-columns: minmax(15rem, .7fr) minmax(27rem, 1.3fr); gap: clamp(2rem, 7vw, 8rem); padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); background: var(--ink); color: #fff7df; }.appearance-copy { align-self: center; }.appearance-copy .eyebrow { color: #d0e6a8; }.appearance-copy > p:not(.eyebrow) { max-width: 28rem; }.appearance-copy .button { color: var(--ink); }
.appearance-samples { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: minmax(11rem, 1fr) minmax(11rem, 1fr); gap: 1rem; }.look-card { position: relative; min-height: 14rem; margin: 0; overflow: hidden; border: 1px solid rgba(255, 247, 223, .45); background: #86b892; }.look-card img { position: absolute; right: 3%; bottom: -5%; max-width: 92%; max-height: 94%; object-fit: contain; filter: drop-shadow(0 .9rem .45rem rgba(0, 0, 0, .24)); }.look-card figcaption { position: absolute; z-index: 1; top: .7rem; left: .75rem; padding: .35rem .42rem; background: rgba(36, 50, 56, .88); font: 900 .56rem/1 var(--utility); letter-spacing: .08em; }.look-card-garden { grid-row: span 2; background: #c7e2a6; }.look-card-moon { background: #8895cc; }.look-card-note { background: #f0c46f; }.look-card-note img { right: 4%; bottom: 8%; width: 87%; }

.site-footer { display: grid; grid-template-columns: auto minmax(13rem, 1fr) auto; align-items: center; gap: 1.25rem 3rem; padding: 2rem clamp(1rem, 4vw, 4.5rem); background: #172226; color: #fff5d9; }.footer-brand { display: flex; align-items: center; gap: .65rem; font-family: var(--display); font-size: .9rem; }.footer-brand .brand-mark { color: var(--ink); background: var(--mint); }.site-footer p { margin: 0; font-size: .78rem; }.site-footer nav { display: flex; flex-wrap: wrap; gap: .65rem 1.15rem; font-size: .7rem; }.contact-placeholder { grid-column: 2 / -1; color: #cbdcbc; }

.reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity .6s ease, transform .6s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }

/* Legal documents keep the same content and a deliberately simple reading layout. */
.legal-page main { max-width: 58rem; margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) 1.2rem; }.legal-page .legal-intro { padding-bottom: 2rem; border-bottom: 3px solid var(--pine); }.legal-page h1 { font-size: clamp(3rem, 8vw, 6rem); }.legal-page h2 { margin-top: 3rem; font-size: clamp(1.7rem, 3vw, 2.6rem); }.legal-page h3 { margin-top: 1.8rem; font-size: 1.28rem; }.legal-page li { margin: .5rem 0; }.legal-page .last-updated { color: #626964; font: .75rem/1.4 var(--utility); }.legal-page .notice { padding: 1rem 1.1rem; border-left: .4rem solid var(--tomato); background: #ffe7d8; }.legal-page .site-header { grid-template-columns: minmax(9rem, 1fr) auto; }.legal-page .main-nav { display: none; }

@media (max-width: 980px) { .site-header { grid-template-columns: 1fr auto; }.main-nav { display: none; }.hero { grid-template-columns: 1fr; }.hero::before { top: 50%; width: 100%; }.hero-copy { padding-bottom: 3rem; }.hero-stage { min-height: 32rem; }.rhythm-section, .guest-section, .appearance-section { grid-template-columns: 1fr; }.section-intro { position: static; }.shelf-letter { grid-template-columns: auto 1fr; }.shelf-letter > p:last-child { grid-column: 2; }.pantry-heading { grid-template-columns: 1fr; gap: .5rem; }.family-panel { grid-template-columns: 1fr; }.guest-heading { padding-bottom: 1rem; }.guest-line { min-height: 27rem; }.appearance-copy { max-width: 34rem; }.site-footer { grid-template-columns: 1fr; }.contact-placeholder { grid-column: auto; } }
@media (max-width: 620px) { .site-header { grid-template-columns: 1fr; justify-items: start; min-height: 4.7rem; padding: .55rem .8rem; }.brand { font-size: .66rem; }.brand-mark { width: 2.2rem; height: 2.2rem; }.legal-nav { justify-content: flex-start; gap: .55rem; font-size: .58rem; }.hero-copy { padding: 3.6rem 1.2rem 2.7rem; }.hero-actions { flex-direction: column; align-items: flex-start; }.hero-stage { width: 100%; max-width: 100%; min-height: 25rem; }.hero-stage-label { top: 1.5rem; left: 1rem; }.hero-stage-rule { top: 4.4rem; right: 1rem; }.cloud-food { width: 4rem; }.cloud-food-a { top: 20%; right: 20%; }.cloud-food-b { top: 40%; }.cloud-food-c { bottom: 10%; }.cloud-food-d { right: 2%; bottom: 30%; }.shelf-letter { grid-template-columns: 1fr; gap: 1.2rem; padding: 3rem 1.2rem; }.shelf-letter > p:last-child { grid-column: auto; }.shelf-letter-mark { width: 4.7rem; height: 4.7rem; }.rhythm-section, .pantry-section, .appearance-section { padding: 4rem 1.2rem; }.mini-shelf { position: static; width: max-content; margin: 1.6rem 0 0; }.swap-mark, .serve-stack { position: static; width: max-content; margin: 1.6rem 0 0; }.rhythm-card { min-height: 0; }.family-tab { min-width: 6.8rem; padding: .9rem .75rem; }.family-panel { min-height: 0; padding: 1.5rem; }.food-fan { min-height: 10rem; padding: 0; }.guest-section { padding: 4rem 1.2rem 0; }.guest-line { min-height: 21rem; padding-top: 3rem; overflow-x: auto; }.guest-card { min-width: 7.8rem; }.appearance-samples { grid-template-columns: 1fr; grid-template-rows: auto; }.look-card-garden { grid-row: auto; }.look-card { min-height: 13rem; }.site-footer { padding: 2rem 1.2rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.button, .guest-card, .food-fan img { transition: none; } }