:root {
  --page: #f7f0e6; --surface: #fff9f0; --ink: #332925; --muted: #786b62;
  --line: #d8c9b8; --accent: #d95d39; --dark: #29221f;
  --display: "Fraunces", serif; --body: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font: 16px/1.55 var(--body); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; z-index: 5; top: 10px; left: 10px; padding: 8px 12px; color: white; background: var(--dark); transform: translateY(-150%); }
.skip:focus { transform: none; }
.site-header, main > section, footer { width: min(1160px, calc(100% - 48px)); margin: auto; }
.site-header { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 600 20px var(--display); }
.brand span { display: grid; width: 36px; height: 36px; place-items: center; color: white; background: var(--accent); font: 600 11px var(--body); }
nav { display: flex; gap: 28px; font-size: 14px; } nav a:hover { color: var(--accent); }
h1, h2, h3, .eyebrow, .facts, .filters, .status { font-family: var(--display); }
.eyebrow { margin: 0 0 18px; color: var(--muted); font: 600 11px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.welcome { min-height: 690px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; padding-block: 75px 100px; }
h1 { margin: 0; font-size: clamp(52px, 7vw, 94px); line-height: .92; letter-spacing: -.07em; }
.welcome-copy > p:not(.eyebrow) { max-width: 500px; margin: 32px 0; color: var(--muted); font-size: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; font-weight: 600; } .actions a:last-child { border-bottom: 1px solid var(--ink); }
.button { padding: 13px 18px; color: white; background: var(--dark); }
.tasting-board { position: relative; min-height: 530px; overflow: hidden; background: #cfaf70; transform: rotate(1deg); }
.paper-card { position: absolute; z-index: 2; left: 8%; top: 10%; width: 35%; min-height: 170px; padding: 20px; background: var(--surface); box-shadow: 10px 14px 0 rgb(51 41 37 / 12%); transform: rotate(-7deg); }
.paper-card span, .paper-card em { display: block; color: var(--muted); font-size: 10px; font-style: normal; } .paper-card strong { display: block; margin: 25px 0; font: 600 25px/1 var(--display); }
.donut, .mini-donut, .large-donut { position: relative; border-radius: 50%; background: var(--accent); }
.donut::after, .mini-donut::after, .large-donut::after { content: ""; position: absolute; inset: 29%; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 5px rgb(51 41 37 / 8%); }
.tasting-board .donut { position: absolute; width: 52%; aspect-ratio: 1; box-shadow: 0 18px 20px rgb(51 41 37 / 22%); }
.cherry { background: var(--accent); } .charcoal, .art-black { background: var(--dark); } .saffron, .art-saffron { background: #d89a31; }
.tasting-board .cherry { right: 5%; bottom: 10%; transform: rotate(13deg); } .tasting-board .charcoal { left: 31%; bottom: 9%; transform: rotate(-12deg) scale(.76); } .tasting-board .saffron { right: 31%; top: 27%; transform: rotate(20deg) scale(.65); }
.label { position: absolute; z-index: 3; padding: 7px 10px; color: var(--ink); background: var(--surface); font: 11px var(--body); box-shadow: 4px 5px 0 rgb(51 41 37 / 12%); } .label-a { right: 9%; top: 15%; transform: rotate(8deg); } .label-b { left: 10%; bottom: 18%; transform: rotate(-8deg); } .label-c { left: 46%; top: 13%; transform: rotate(5deg); }
.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); } .quick-links a { display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; padding: 25px 18px; border-right: 1px solid var(--line); } .quick-links a:first-child { padding-left: 0; } .quick-links a:last-child { border: 0; } .quick-links span { grid-row: span 2; color: var(--accent); font: 12px var(--display); } .quick-links strong { font: 600 15px var(--display); } .quick-links small { color: var(--muted); }
.recipe-index, .field-notes { padding-block: 105px; border-bottom: 1px solid var(--line); }.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }.section-head h2, .field-notes h2, .signup h2, .why h2, .rate h2 { margin: 0; font: 600 clamp(40px, 5vw, 66px)/.96 var(--display); letter-spacing: -.06em; }.search span { display: block; color: var(--muted); font-size: 11px; }.search input { width: 240px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); background: transparent; }.filters { display: flex; gap: 5px; margin: 45px 0 35px; border-bottom: 1px solid var(--line); }.filters button { padding: 12px 15px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }.filters button.active { border-color: var(--accent); color: var(--ink); }
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 22px; }.recipe-card[hidden] { display: none; }.mini-donut { display: block; height: 250px; margin-bottom: 17px; background: var(--accent); }.mini-donut::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: rgb(255 249 240 / 42%); }.mini-donut span { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 6px 8px; color: white; background: var(--dark); font: 11px var(--body); }.art-miso { background: #a96d45; }.art-cardamom { background: #d4b58d; }.art-pickle { background: #7d9366; }.recipe-card h3 { margin: 5px 0; font: 600 23px/1.1 var(--display); }.recipe-card small { color: var(--muted); }.status { margin: 25px 0 0; color: var(--muted); font-size: 12px; }
.field-notes { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }.field-notes > div:first-child > p:last-child { max-width: 410px; margin-top: 28px; color: var(--muted); font-size: 18px; }.notes-list { border-top: 1px solid var(--line); }.notes-list article { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 23px 0; border-bottom: 1px solid var(--line); }.notes-list b { color: var(--accent); }.notes-list h3 { margin: 0; font-size: 24px; }.notes-list p { grid-column: 2; margin: 0; color: var(--muted); }
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-block: 100px; padding: 65px; color: white; background: var(--dark); }.signup .eyebrow { color: #cbbdb0; }.signup label { display: block; margin-bottom: 10px; color: #cbbdb0; font-size: 12px; }.signup form > div { display: flex; border-bottom: 1px solid #a59487; }.signup input { min-width: 0; flex: 1; padding: 13px 0; border: 0; color: white; background: transparent; }.signup button { padding: 0 16px; border: 0; color: white; background: var(--accent); cursor: pointer; }.signup form p { color: #cbbdb0; font-size: 12px; }
footer { display: flex; justify-content: space-between; align-items: center; min-height: 130px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.recipe-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-block: 90px; }.recipe-hero h1 { max-width: 680px; }.recipe-hero > div:first-child > p:not(.eyebrow) { max-width: 580px; margin: 30px 0; color: var(--muted); font-size: 19px; }.rating-summary { padding-top: 20px; border-top: 1px solid var(--line); color: var(--accent); font-family: var(--display); }.rating-summary span { margin-left: 16px; color: var(--muted); font: 13px var(--body); }.large-donut { width: min(100%, 500px); aspect-ratio: 1; justify-self: end; box-shadow: 16px 20px 0 rgb(51 41 37 / 13%); }.large-donut::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: rgb(255 249 240 / 35%); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 20px; padding-block: 25px; border-block: 1px solid var(--line); }.facts p { margin: 0; }.facts span { display: block; margin-bottom: 5px; color: var(--muted); font: 11px var(--body); text-transform: uppercase; }.facts b { font-size: 19px; }.facts button { border: 0; border-bottom: 2px solid var(--accent); background: transparent; cursor: pointer; font-weight: 600; }
.recipe-layout { display: grid; grid-template-columns: 350px minmax(0, 680px); justify-content: center; gap: 100px; padding-block: 100px; }.ingredient-head { display: flex; justify-content: space-between; align-items: end; }.ingredient-head h2 { margin: 0; font: 600 30px var(--display); }.stepper { display: flex; }.stepper button { width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; cursor: pointer; }.ingredients { list-style: none; margin: 25px 0 0; padding: 0; border-top: 1px solid var(--line); }.ingredients li { border-bottom: 1px solid var(--line); }.ingredients label { display: flex; padding: 13px 0; cursor: pointer; }.ingredients input { width: 17px; height: 17px; margin: 3px 12px 0 0; accent-color: var(--accent); }.ingredients input:checked + span { color: var(--muted); text-decoration: line-through; }.swap { margin-top: 28px; padding: 20px; background: #eadcca; }.swap h3 { margin: 0 0 8px; }.swap p { margin: 0; color: var(--muted); font-size: 13px; }.method ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }.method li { display: grid; grid-template-columns: 40px 1fr; gap: 15px; padding: 27px 0; border-bottom: 1px solid var(--line); }.method li > b { color: var(--accent); }.method h2 { margin: 0 0 13px; font: 600 27px var(--display); }.method p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }.method button { margin-top: 16px; padding: 0 0 5px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; cursor: pointer; font-size: 12px; }.why, .rate { display: grid; grid-template-columns: 280px 1fr; gap: 80px; padding-block: 80px; border-top: 1px solid var(--line); }.why > div p, .rate > div:first-child p:last-child { max-width: 600px; color: var(--muted); font-size: 18px; }.stars button { padding: 0 5px; border: 0; color: #c8bcae; background: transparent; cursor: pointer; font-size: 40px; }.stars button.chosen { color: var(--accent); }.stars p { color: var(--muted); font-size: 12px; }.timer-bar { position: fixed; z-index: 8; left: 50%; bottom: 20px; display: flex; gap: 30px; align-items: center; padding: 14px 18px; color: white; background: var(--dark); transform: translate(-50%, 160%); transition: transform .2s; }.timer-bar.visible { transform: translateX(-50%); }.timer-bar strong { color: var(--accent); }.timer-bar button { border: 0; color: white; background: transparent; cursor: pointer; }
@media (max-width: 800px) { .site-header, main > section, footer { width: calc(100% - 32px); }.site-header nav a:not(:last-child) { display: none; }.welcome, .recipe-hero, .field-notes, .signup { grid-template-columns: 1fr; gap: 50px; }.welcome { padding-block: 60px 75px; }.tasting-board { min-height: 430px; }.quick-links { grid-template-columns: 1fr 1fr; }.quick-links a { border-bottom: 1px solid var(--line); }.section-head { display: block; }.search { display: block; margin-top: 25px; }.search input { width: 100%; }.filters { overflow-x: auto; }.recipe-grid { grid-template-columns: 1fr; }.signup { padding: 45px 25px; }.signup form > div { display: block; }.signup button { width: 100%; min-height: 45px; }.recipe-hero { padding-block: 65px; }.large-donut { justify-self: center; }.facts { grid-template-columns: 1fr 1fr; }.recipe-layout, .why, .rate { grid-template-columns: 1fr; gap: 55px; }.recipe-layout { padding-block: 70px; } footer { gap: 15px; } footer p { display: none; } }
@media print { .site-header, .recipe-hero, .facts button, .rate, .timer-bar { display: none; }.recipe-layout { grid-template-columns: 1fr 1.5fr; padding: 0; }.why { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }