:root {
  color-scheme: light;
  --ink: #2c1712;
  --paper: #f7efdc;
  --cream: #fffaf0;
  --tomato: #b93424;
  --tomato-dark: #a72e23;
  --egg: #f3b71b;
  --soft-egg: #ffda61;
  --leaf: #2d7450;
  --blue: #588f8b;
  --ratio: 50;
  --tomato-size: 1;
  --egg-size: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button, input { font: inherit; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .85rem 1rem; color: #fff; background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(92rem, calc(100% - 3rem)); margin: auto; min-height: 5.5rem; border-bottom: 1.5px solid var(--ink); }
.brand { display: inline-flex; align-items: center; gap: .75rem; width: max-content; text-decoration: none; }
.brand span { display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; font-family: ui-serif, Georgia, serif; font-weight: 800; }
.brand b { font-size: .92rem; letter-spacing: -.02em; }
nav { display: flex; gap: 2rem; }
nav a, .text-link { font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-underline-offset: .3rem; text-decoration-thickness: 1px; }
.text-link { justify-self: end; }

.hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(28rem, 1.15fr); min-height: calc(100svh - 5.5rem); overflow: hidden; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 6rem) clamp(3rem, 5vw, 5rem) max(1.5rem, calc((100vw - 92rem)/2)); }
.eyebrow, .section-number { margin: 0 0 1.4rem; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .7rem; }
.eyebrow span { width: 2rem; height: .55rem; border-radius: 999px; background: var(--tomato); }
h1 { margin: 0; font-size: clamp(4rem, 8.4vw, 8.8rem); line-height: .82; letter-spacing: -.075em; }
h1 em { color: var(--tomato); font-family: ui-serif, Georgia, serif; font-weight: 400; }
.lede { max-width: 36rem; margin: 2rem 0; font: 500 clamp(1.05rem, 1.8vw, 1.3rem)/1.55 ui-serif, Georgia, serif; }
.primary-action { display: flex; justify-content: space-between; align-items: center; width: min(100%, 23rem); padding: 1rem 1.15rem; border: 2px solid var(--ink); border-radius: 999px; color: var(--paper); background: var(--ink); font-size: .84rem; font-weight: 800; text-decoration: none; transition: color .2s, background .2s, transform .2s; }
.primary-action:hover, .primary-action:focus-visible { color: var(--ink); background: var(--egg); transform: translateY(-.2rem); outline: 4px solid var(--blue); outline-offset: 3px; }
.proof-list { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin: auto 0 0; padding: 3rem 0 0; list-style: none; font-size: .68rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.proof-list li::before { content: "✓"; margin-right: .4rem; color: var(--leaf); font-weight: 950; }

.hero-art { position: relative; min-height: 42rem; overflow: hidden; border-left: 1.5px solid var(--ink); background: linear-gradient(145deg, #f2c84e, #e98d43 55%, #b93424); isolation: isolate; }
.hero-art::before { content: ""; position: absolute; inset: 8% 9%; border: 1.5px solid rgb(44 23 18 / .35); border-radius: 48% 52% 50% 48% / 60% 45% 55% 40%; transform: rotate(8deg); }
.sun { position: absolute; width: 36%; aspect-ratio: 1; right: 8%; top: 8%; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: -1rem 1rem 0 rgb(44 23 18 / .12); }
.vertical-type { position: absolute; z-index: 3; left: 3%; top: 8%; margin: 0; font: 800 .7rem/1.1 ui-serif, Georgia, serif; letter-spacing: .35em; writing-mode: vertical-rl; }
.plate-shadow { position: absolute; width: 64%; height: 14%; left: 18%; bottom: 11%; border-radius: 50%; background: rgb(44 23 18 / .24); filter: blur(.2rem); transform: rotate(-4deg); }
.food-bowl { position: absolute; width: min(73%, 40rem); aspect-ratio: 1.08; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-3deg); filter: drop-shadow(0 2rem 1.2rem rgb(44 23 18 / .25)); }
.food { position: absolute; z-index: 3; inset: 0 2% 32%; overflow: hidden; border: .35rem solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 32% 16%, #f89247, #ce452b 70%); }
.bowl-face { position: absolute; inset: 36% 5% 0; display: grid; place-items: center; border: .35rem solid var(--ink); border-top: 0; border-radius: 0 0 50% 50% / 0 0 85% 85%; background: repeating-radial-gradient(circle at 50% -75%, transparent 0 3.1rem, rgb(44 23 18 / .13) 3.2rem 3.35rem), var(--blue); }
.bowl-face span { margin-top: 4rem; padding: .35rem .85rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font: 850 clamp(.55rem, 1vw, .82rem)/1 ui-serif, Georgia, serif; letter-spacing: .15em; }
.tomato, .egg, .green { position: absolute; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.tomato { width: 24%; aspect-ratio: 1.1; border: .16rem solid var(--ink); border-radius: 64% 24% 58% 28%; background: radial-gradient(circle at 36% 28%, #ffa57e 0 8%, transparent 9%), linear-gradient(145deg, #f85c3b, var(--tomato-dark)); box-shadow: inset .35rem -.3rem 0 rgb(80 10 10 / .18); }
.tomato::after { content: ""; position: absolute; width: 18%; height: 45%; left: 42%; top: 8%; border-radius: 50%; background: #ffd195; transform: rotate(35deg); opacity: .7; }
.t1{left:7%;top:15%;transform:rotate(-18deg) scale(var(--tomato-size))}.t2{left:42%;top:5%;transform:rotate(22deg) scale(var(--tomato-size))}.t3{right:4%;top:35%;transform:rotate(50deg) scale(var(--tomato-size))}.t4{left:23%;bottom:4%;transform:rotate(18deg) scale(var(--tomato-size))}
.egg { width: 30%; aspect-ratio: 1.8; border: .15rem solid var(--ink); border-radius: 62% 38% 72% 28%; background: linear-gradient(155deg, #ffec98, var(--soft-egg)); box-shadow: inset .35rem -.25rem 0 rgb(210 133 0 / .2); }
.e1{left:7%;top:43%;transform:rotate(20deg) scale(var(--egg-size))}.e2{left:32%;top:24%;transform:rotate(-15deg) scale(var(--egg-size))}.e3{right:3%;top:8%;transform:rotate(28deg) scale(var(--egg-size))}.e4{right:20%;bottom:3%;transform:rotate(-8deg) scale(var(--egg-size))}
.green { z-index: 4; width: 4%; aspect-ratio: 1; border: .08rem solid var(--ink); border-radius: 50% 10%; background: #65a25b; }.g1{left:31%;top:16%;transform:rotate(20deg)}.g2{right:27%;top:31%;transform:rotate(-30deg)}.g3{left:48%;bottom:18%;transform:rotate(45deg)}
.made-note { position: absolute; z-index: 5; right: 6%; bottom: 5%; margin: 0; font: italic 500 clamp(1rem, 2vw, 1.5rem)/1.1 ui-serif, Georgia, serif; text-align: right; transform: rotate(-6deg); }

.ratio-lab { padding: clamp(5rem, 9vw, 9rem) max(1rem, calc((100vw - 82rem)/2)); color: var(--paper); background: var(--ink); }
.lab-heading { display: grid; grid-template-columns: .6fr 1.3fr 1fr; gap: 2rem; align-items: end; margin-bottom: 4rem; }
.lab-heading > p:last-child { margin: 0; font: 400 1rem/1.6 ui-serif, Georgia, serif; opacity: .76; }
h2 { margin: 0; font: 500 clamp(3rem, 6vw, 6.2rem)/.9 ui-serif, Georgia, serif; letter-spacing: -.055em; }
.dial-card { display: grid; grid-template-columns: .75fr 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 4rem); border: 1.5px solid rgb(247 239 220 / .5); border-radius: 2rem; background: #38231d; }
.ratio-readout { display: flex; align-items: center; justify-content: center; color: var(--egg); font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 850; line-height: .8; letter-spacing: -.08em; }
.ratio-readout i { padding: 0 .12em; color: var(--paper); font-family: ui-serif, Georgia, serif; font-weight: 300; }
.range-wrap label { display: block; margin-bottom: 2rem; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
input[type="range"] { width: 100%; height: 2.2rem; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
input[type="range"]::-webkit-slider-runnable-track { height: .65rem; border: 2px solid var(--paper); border-radius: 999px; background: linear-gradient(90deg, var(--soft-egg), var(--paper), var(--tomato)); }
input[type="range"]::-webkit-slider-thumb { width: 2.2rem; height: 2.2rem; margin-top: -.9rem; appearance: none; border: .35rem solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
input[type="range"]::-moz-range-track { height: .65rem; border: 2px solid var(--paper); border-radius: 999px; background: linear-gradient(90deg, var(--soft-egg), var(--paper), var(--tomato)); }
input[type="range"]::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border: .35rem solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
input[type="range"]:focus-visible { outline: 4px solid var(--egg); outline-offset: .65rem; border-radius: 999px; }
.range-labels { display: flex; justify-content: space-between; margin-top: .7rem; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#ratio-hint { margin: 1.2rem 0 0; font-size: .7rem; opacity: .65; }
.memory-result { padding-left: 1.5rem; border-left: 1px solid rgb(247 239 220 / .35); }
.result-label { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.memory-result h3 { margin: .35rem 0 1rem; color: var(--egg); font: 500 clamp(1.7rem, 3vw, 2.8rem)/1 ui-serif, Georgia, serif; }
.memory-result > p { margin: 0; font: 400 .95rem/1.5 ui-serif, Georgia, serif; }
.no-js-ratios { display: none; }
.no-js .dial-card { display: none; }
.no-js .no-js-ratios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.no-js-ratios article { min-height: 15rem; padding: 1.5rem; border: 1px solid var(--paper); border-radius: 1.5rem; }
.no-js-ratios b { color: var(--egg); font-size: 2rem; }.no-js-ratios h3{font:500 1.8rem/1 ui-serif,Georgia,serif}.no-js-ratios p{opacity:.75;line-height:1.5}

.why { padding: clamp(5rem, 10vw, 10rem) max(1rem, calc((100vw - 82rem)/2)); }
.why-title { display: grid; grid-template-columns: .6fr 2.3fr; gap: 2rem; align-items: start; }
.why-title h2 em { color: var(--tomato); font-weight: 400; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 5rem; border-block: 1.5px solid var(--ink); }
.why-grid article { padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; border-left: 1.5px solid var(--ink); }
.why-grid article:first-child { border-left: 0; }
.why-grid span { color: var(--tomato); font-size: .72rem; font-weight: 850; }
.why-grid h3 { margin: 3.5rem 0 .8rem; font: 550 clamp(1.5rem, 2.5vw, 2.3rem)/1 ui-serif, Georgia, serif; }
.why-grid p { max-width: 29ch; margin: 0; font-size: .93rem; line-height: 1.6; }

.keep { display: grid; grid-template-columns: .45fr 1.55fr; gap: 2rem; padding: clamp(5rem, 9vw, 9rem) max(1rem, calc((100vw - 82rem)/2)); color: var(--paper); background: var(--tomato); }
.keep h2 { max-width: 15ch; }
#share-line { max-width: 40rem; margin: 2rem 0; font: italic 500 clamp(1.1rem, 2vw, 1.45rem)/1.5 ui-serif, Georgia, serif; }
button { padding: 1rem 1.4rem; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--paper); box-shadow: .35rem .35rem 0 var(--ink); font-size: .8rem; font-weight: 850; cursor: pointer; }
button:hover, button:focus-visible { background: var(--egg); outline: 4px solid var(--paper); outline-offset: 4px; }
.copy-status { min-height: 1.5rem; font-size: .75rem; }
.no-js #copy-ratio { display: none; }
footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; padding: 3rem max(1.5rem, calc((100vw - 92rem)/2)); color: var(--paper); background: var(--ink); font-size: .72rem; line-height: 1.5; }
footer p { margin: 0; } footer p:last-child { text-align: right; }

@media (max-width: 62rem) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav{display:none}.text-link{grid-column:2}
  .hero { grid-template-columns: 1fr; }.hero-art{border-left:0;border-top:1.5px solid var(--ink);min-height:42rem}.proof-list{margin-top:1rem}
  .lab-heading { grid-template-columns: 1fr 2fr; }.lab-heading > p:last-child{grid-column:2}
  .dial-card { grid-template-columns: 1fr 1.6fr; }.memory-result{grid-column:1/-1;border-left:0;border-top:1px solid rgb(247 239 220 / .35);padding:1.5rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
}

@media (max-width: 42rem) {
  .site-header { width: calc(100% - 2rem); }.brand b{display:none}.text-link{font-size:.68rem}
  .hero-copy { padding-inline: 1rem; }.hero-art{min-height:33rem}.food-bowl{width:90%}.made-note{bottom:3%}
  h1{font-size:clamp(3.6rem,18vw,6rem)}
  .lab-heading, .why-title, .keep { grid-template-columns: 1fr; }.lab-heading > p:last-child{grid-column:1}.lab-heading{gap:.5rem}
  .dial-card { grid-template-columns: 1fr; border-radius:1.3rem }.ratio-readout{justify-content:flex-start}.memory-result{grid-column:1;grid-template-columns:1fr;gap:.3rem}
  .range-labels span:nth-child(2){display:none}
  .no-js .no-js-ratios { grid-template-columns: 1fr; }
  .why-title{gap:.5rem}.why-grid{grid-template-columns:1fr}.why-grid article{border-left:0;border-top:1.5px solid var(--ink)}.why-grid article:first-child{border-top:0}.why-grid h3{margin-top:1.5rem}
  .keep { gap:.5rem; }
  footer{grid-template-columns:1fr}footer p:last-child{text-align:left}
}

@media (max-width: 22rem) {
  .hero-copy { padding-inline: .75rem; }
  .hero-art { min-height: 28rem; }
  .ratio-lab, .why, .keep { padding-inline: .75rem; }
  .dial-card { padding: 1rem; }
  .ratio-readout { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}