:root { --ink: #25231f; --paper: #fcfaf6; --line: #e7e0d5; --sage: #66745a; --paprika: #b7533c; --cream: #f4eee4; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; margin: 0; }
main { max-width: 1280px; margin: auto; padding: 0 42px; }
nav { align-items: center; display: flex; justify-content: space-between; min-height: 94px; }
.wordmark { color: var(--ink); font-family: Georgia, serif; font-size: 31px; font-weight: 700; letter-spacing: -.06em; text-decoration: none; }.wordmark span { color: var(--paprika); }
.nav-link { color: var(--sage); font-size: 14px; font-weight: 750; text-decoration: none; }.nav-link span { font-size: 17px; margin-left: 4px; }
.hero { display: grid; grid-template-columns: 1.04fr .96fr; min-height: 650px; overflow: hidden; padding: 54px 4.5% 34px; position: relative; }.hero::before { background: #f0e8da; border-radius: 50%; content: ""; height: 610px; position: absolute; right: -132px; top: 6px; width: 610px; z-index: -1; }
.hero-copy { align-self: center; max-width: 545px; padding-bottom: 45px; }.eyebrow { color: var(--paprika); font-size: 11px; font-weight: 800; letter-spacing: .17em; margin: 0 0 21px; }.hero h1, .closing h2 { font-family: Georgia, serif; font-size: clamp(60px, 7.2vw, 96px); font-weight: 700; letter-spacing: -.065em; line-height: .93; margin: 0; }.hero h1 em, .closing em { color: var(--paprika); font-weight: inherit; }.lede { color: #5a574f; font-size: 18px; line-height: 1.58; margin: 29px 0 28px; max-width: 450px; }.button { background: var(--sage); border-radius: 999px; color: #fff; display: inline-block; font-size: 14px; font-weight: 800; padding: 15px 22px; text-decoration: none; transition: transform .2s ease, background .2s ease; }.button:hover { background: #526047; transform: translateY(-2px); }.button span { font-size: 17px; margin-left: 8px; }.fine-print { color: #89847a; font-size: 12px; margin-top: 18px; }
.phone-wrap { align-items: center; display: flex; justify-content: center; min-height: 550px; position: relative; }.phone { background: #24241f; border: 8px solid #24241f; border-radius: 39px; box-shadow: 0 30px 50px #635a4b38; height: 518px; overflow: hidden; position: relative; transform: rotate(6deg); width: 256px; }.notch { background: #24241f; border-radius: 0 0 15px 15px; height: 21px; left: 76px; position: absolute; top: 0; width: 95px; z-index: 2; }.phone-content { background: var(--paper); height: 100%; padding: 34px 13px 15px; }.phone-top { display: flex; font-family: Georgia, serif; font-size: 18px; font-weight: 700; justify-content: space-between; }.phone-kicker { color: #79746c; font-size: 7px; font-weight: 800; letter-spacing: .08em; margin: 20px 0 7px; }.meal-art { align-items: center; background: #8f7657; display: flex; height: 186px; justify-content: center; overflow: hidden; position: relative; }.plate { align-items: center; border: 4px solid #eee5d7; border-radius: 50%; display: flex; justify-content: center; position: absolute; }.main { background: #aa6840; font-size: 58px; height: 121px; width: 121px; }.carrot { background: #d0794a; bottom: 6px; font-size: 23px; height: 54px; left: 16px; width: 54px; }.rice { background: #88945c; bottom: 6px; font-size: 23px; height: 54px; right: 16px; width: 54px; }.phone h2 { font-family: Georgia, serif; font-size: 24px; margin: 13px 0 9px; }.tags { display: flex; gap: 5px; overflow: hidden; white-space: nowrap; }.tags span { background: #f0eee9; border-radius: 99px; color: #53584c; font-size: 8px; padding: 5px 7px; }.phone-note { color: #57534c; font-size: 10px; line-height: 1.35; margin: 10px 0; }.phone-actions { border-top: 1px solid var(--line); color: #777168; display: flex; font-size: 9px; justify-content: space-between; padding-top: 10px; }.scribble { color: var(--paprika); font-family: "Bradley Hand", "Comic Sans MS", cursive; font-size: 18px; position: absolute; }.scribble.one { right: 7%; top: 25px; transform: rotate(-9deg); }.scribble.two { bottom: 38px; left: 4%; transform: rotate(-11deg); }
.principles { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 4.5% 0; padding: 71px 0 76px; }.principles article { border-right: 1px solid var(--line); padding: 0 13% 0 8%; }.principles article:first-child { padding-left: 0; }.principles article:last-child { border: 0; }.principles span { color: var(--paprika); font-size: 11px; font-weight: 800; letter-spacing: .1em; }.principles h2 { font-family: Georgia, serif; font-size: 27px; letter-spacing: -.04em; margin: 17px 0 10px; }.principles p { color: #615d55; font-size: 14px; line-height: 1.55; margin: 0; }
.closing { background: var(--sage); color: #fff; margin: 0 4.5% 54px; overflow: hidden; padding: 78px 8%; position: relative; text-align: center; }.closing::after { border: 1px solid #ffffff2f; border-radius: 50%; content: ""; height: 370px; position: absolute; right: -130px; top: -210px; width: 370px; }.closing .eyebrow { color: #dfe5d1; }.closing h2 { font-size: clamp(43px, 5vw, 66px); letter-spacing: -.055em; }.closing em { color: #f6d2af; }.button-light { background: #f9f6ed; color: var(--sage); margin-top: 30px; }.button-light:hover { background: #fff; }
footer { align-items: center; border-top: 1px solid var(--line); color: #837e74; display: flex; font-size: 12px; justify-content: space-between; margin: auto; max-width: 1196px; padding: 28px 0 35px; } footer .wordmark { font-size: 22px; } footer a:not(.wordmark) { color: inherit; text-decoration: none; }
@media (max-width: 720px) { main { padding: 0 20px; } nav { min-height: 76px; }.hero { display: block; min-height: auto; padding: 46px 6% 25px; }.hero::before { height: 470px; right: -240px; top: 280px; width: 470px; }.hero-copy { padding: 0; }.hero h1 { font-size: 64px; }.lede { font-size: 16px; }.phone-wrap { min-height: 490px; }.phone { height: 465px; transform: rotate(4deg); width: 230px; }.meal-art { height: 164px; }.main { height: 110px; width: 110px; }.principles { display: block; margin: 24px 6% 0; padding: 28px 0; }.principles article { border-bottom: 1px solid var(--line); border-right: 0; padding: 28px 0; }.principles article:last-child { border-bottom: 0; }.closing { margin: 0 6% 34px; padding: 61px 7%; }.closing h2 { font-size: 43px; } footer { margin: 0 20px; } }