:root {
    --cream: #fff9ef;
    --ink: #2b201c;
    --muted: #746762;
    --tomato: #d9472c;
    --tomato-dark: #ba341e;
    --basil: #2e7550;
    --crust: #efa946;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: Arial, Helvetica, sans-serif;
}

.hero {
    width: min(1120px, calc(100% - 48px));
    min-height: calc(100vh - 72px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
}

.hero__content { max-width: 600px; }
.brand { margin: 0 0 54px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.brand__mark { color: var(--tomato); font-size: 24px; vertical-align: -1px; }
.eyebrow { margin: 0 0 16px; color: var(--tomato); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 620px; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(46px, 6vw, 76px); line-height: .98; letter-spacing: -.055em; }
.hero__text { max-width: 480px; margin: 28px 0 34px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.button { display: inline-flex; gap: 22px; align-items: center; padding: 16px 21px; border-radius: 8px; color: white; background: var(--tomato); box-shadow: 0 9px 20px rgba(194, 58, 34, .2); font-weight: 700; text-decoration: none; transition: transform .18s, background .18s; }
.button:hover, .button:focus-visible { background: var(--tomato-dark); transform: translateY(-2px); }
.button span { font-size: 22px; line-height: .5; }

.pizza-card { position: relative; overflow: hidden; min-height: 475px; padding: 32px; border-radius: 24px; background: var(--basil); box-shadow: 14px 18px 0 #e9decd; }
.pizza-card > p { position: absolute; right: 29px; bottom: 21px; margin: 0; color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pizza-card__shine { position: absolute; width: 540px; height: 540px; top: -260px; right: -90px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.pizza { position: absolute; width: min(360px, 82%); aspect-ratio: 1; top: 53%; left: 51%; border: 18px solid var(--crust); border-radius: 50%; background: #e45934; transform: translate(-50%, -50%) rotate(-13deg); box-shadow: inset 0 0 0 6px #f28a43, 0 25px 25px rgba(18, 52, 34, .26); }
.pizza::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 15% 18%, #f5bd60 0 4%, transparent 4.7%), radial-gradient(circle at 72% 70%, #f5bd60 0 5%, transparent 5.7%), radial-gradient(circle at 66% 22%, #f5bd60 0 3%, transparent 3.8%); opacity: .85; }
.pepperoni { position: absolute; z-index: 1; width: 17%; aspect-ratio: 1; border: 3px solid #a82b25; border-radius: 50%; background: #c93f31; }
.pepperoni--one { top: 22%; left: 22%; }.pepperoni--two { top: 18%; right: 23%; }.pepperoni--three { bottom: 21%; left: 27%; }.pepperoni--four { bottom: 25%; right: 19%; }
.basil { position: absolute; z-index: 2; width: 10%; height: 18%; border-radius: 100% 0 100% 0; background: #23734b; }.basil--one { top: 43%; left: 46%; transform: rotate(30deg); }.basil--two { top: 60%; left: 56%; transform: rotate(205deg); }
footer { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 30px; color: var(--muted); border-top: 1px solid #eadfce; font-size: 13px; }

.calculator-page { background: #f4eee3; }
.calculator-shell { width: min(840px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 42px 0; }.calculator-shell .brand { margin: 42px 0 76px; }.back-link { color: var(--muted); font-size: 14px; text-decoration: none; }.back-link:hover { color: var(--tomato); }.calculator-placeholder { padding: clamp(36px, 7vw, 74px); border-radius: 20px; background: white; box-shadow: 0 12px 35px rgba(62, 47, 34, .08); }.calculator-placeholder h1 { font-size: clamp(40px, 5vw, 60px); }.calculator-placeholder > p:last-child { max-width: 500px; margin: 26px 0 0; color: var(--muted); font-size: 17px; line-height: 1.55; }

.calculator-shell { width: min(1040px, calc(100% - 48px)); }.calculator-shell .brand { margin-bottom: 38px; }.calculator__header { max-width: 650px; margin-bottom: 36px; }.calculator__header h1 { font-size: clamp(40px, 5vw, 62px); }.calculator__header > p:last-child { color: var(--muted); line-height: 1.5; }.calculator__grid { display: grid; gap: 22px; }.panel { padding: 28px; border: 1px solid #ebdfd1; border-radius: 16px; background: #fffdf9; box-shadow: 0 7px 18px rgba(62,47,34,.05); }.panel h2 { margin: 0 0 22px; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; }.fields { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; }.batch-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } label { display: grid; gap: 7px; color: #5f514c; font-size: 13px; font-weight: 700; } input, select { width: 100%; min-width: 0; padding: 12px; border: 1px solid #dbcec0; border-radius: 7px; outline: 0; color: var(--ink); background: white; font: inherit; font-size: 16px; font-weight: 400; } input:focus, select:focus { border-color: var(--tomato); box-shadow: 0 0 0 3px rgba(217,71,44,.12); }.input-unit { display: flex; align-items: center; border: 1px solid #dbcec0; border-radius: 7px; background: white; }.input-unit:focus-within { border-color: var(--tomato); box-shadow: 0 0 0 3px rgba(217,71,44,.12); }.input-unit input { border: 0; box-shadow: none; }.input-unit b { padding: 0 12px; color: var(--muted); font-size: 13px; }.total-dough { display: flex; justify-content: space-between; margin-top: 17px; padding-top: 16px; border-top: 1px solid #eee4d9; }.total-dough span { color: var(--muted); font-size: 14px; }.total-dough strong { color: var(--tomato); font-size: 21px; }.recipe-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.recipe .hint { min-height: 38px; margin: -12px 0 19px; color: var(--muted); font-size: 13px; line-height: 1.4; }.fermentation-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-bottom: 20px; padding: 14px; border: 1px solid #ebded2; border-radius: 10px; background: #fff8f1; }.fermentation-box label { margin: 0; }.fermentation-status { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 12px; border-radius: 8px; background: #faeee2; border: 1px dashed #dfcdbd; }.fermentation-status span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }.fermentation-status strong { color: var(--tomato); font-size: 13.5px; font-weight: 700; }.recipe dl { margin: 21px 0 0; }.recipe dl div { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid #eee4d9; }.recipe dt { color: var(--muted); }.recipe dd { margin: 0; font-weight: 700; }.calculator__save { justify-self: end; border: 0; cursor: pointer; font: inherit; }.alert { margin: 0 0 22px; padding: 14px 17px; border-radius: 8px; font-size: 14px; }.alert--success { color: #175b37; background: #ddf2e5; }.alert--error { color: #962c1d; background: #fde4dc; }

.flours-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }.flours-heading h3 { margin: 0; font-size: 16px; }.text-button, .remove-flour, .biga-action { border: 0; cursor: pointer; font: inherit; font-weight: 700; }.text-button { padding: 0; color: var(--tomato); background: transparent; }.text-button:hover { color: var(--tomato-dark); }.flour-columns, .flour-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, .55fr) 34px; gap: 12px; }.flour-columns { margin-top: 16px; padding: 0 14px; color: #5f514c; font-size: 13px; font-weight: 700; }.flour-list { display: grid; gap: 12px; margin-top: 10px; }.flour-row { align-items: center; padding: 14px; border: 1px solid #eee4d9; border-radius: 10px; background: #fffaf4; }.remove-flour { width: 34px; height: 34px; border-radius: 50%; color: var(--tomato); background: #fde4dc; font-size: 22px; line-height: 1; }.ingredient-list { display: grid; gap: 14px; }.ingredient-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(105px, .55fr) auto; gap: 10px; align-items: center; }.ingredient-list__name { font-size: 14px; }.biga-actions { display: flex; gap: 6px; }.biga-action { padding: 8px 9px; border-radius: 6px; color: #8b4d42; background: #f7eadf; font-size: 11px; text-transform: uppercase; }.biga-action--exclude { color: var(--tomato); background: #fde4dc; }.recipe #finish-flours { margin-bottom: 0; }.recipe #finish-flours + dl { margin-top: 0; }

.saved-link { margin-left: 16px; }.saved-date { margin-top: 28px; }.saved-date h2 { margin: 0 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; }.saved-recipe { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 18px 20px; color: var(--ink); text-decoration: none; }.saved-recipe:hover { border-color: var(--tomato); }.saved-recipe small { display: block; margin-top: 5px; color: var(--muted); } dialog { width: min(440px, calc(100% - 32px)); border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.22); } dialog::backdrop { background: rgba(43,32,26,.45); } dialog form { display: grid; gap: 16px; } dialog h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; } .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 4px; }.modal-actions .button { border: 0; cursor: pointer; font: inherit; }

@media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 42px; padding: 44px 0; }.brand { margin-bottom: 46px; }.pizza-card { min-height: 350px; order: -1; }.pizza { width: 290px; }.hero__text { font-size: 16px; }.hero h1 { font-size: clamp(43px, 13vw, 60px); }.fields, .batch-fields, .fermentation-box, .recipe-columns { grid-template-columns: 1fr; }.calculator-shell { width: min(100% - 32px, 1040px); padding-top: 28px; }.calculator-shell .brand { margin: 31px 0; }.panel { padding: 22px; }.calculator__save { width: 100%; justify-content: center; }.flour-columns, .flour-row { grid-template-columns: 1fr 34px; }.flour-columns span:first-child, .flour-row > input { grid-column: 1 / -1; }.flour-columns span:nth-child(2) { display: none; }.ingredient-list > div { grid-template-columns: 1fr; }.biga-actions { justify-content: flex-start; } }