* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #111; background: white; font-family: Poppins, 'Century Gothic', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.7; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { color: #656565; }
button, input, textarea { font: inherit; }
button, .button { border: 1px solid #111; background: #111; color: white; padding: .8rem 1.6rem; cursor: pointer; }
:focus-visible { outline: 2px solid #356b93; outline-offset: 5px; }
body > header { max-width: 1600px; margin: auto; padding: 2.75rem 6%; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.brand { font-size: 1.75rem; font-weight: 500; text-decoration: none; letter-spacing: -.03em; }
nav { display: flex; gap: 1.2rem; }
nav a { text-decoration: none; }
nav a[aria-current] { text-decoration: underline; }
main { max-width: 1600px; margin: auto; padding: 4.7rem 6% 6rem; }
.skip { position: fixed; left: 1rem; top: -6rem; padding: .8rem 1rem; background: #111; color: white; z-index: 9; }
.skip:focus { top: 1rem; }
.recipe-row { display: grid; grid-template-columns: 1.1fr .8fr; gap: 4.3%; align-items: start; margin-bottom: 6.2rem; }
.recipe-row:last-child { margin-bottom: 0; }
.cover { display: block; }
.cover img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.recipe-summary { padding-top: .1rem; }
.metadata { font-size: .875rem; margin: 0 0 1.2rem; }
.metadata a { text-decoration: none; }
.recipe-summary h2 { font-size: clamp(1.75rem, 3.2vw, 2.55rem); line-height: 1.35; font-weight: 500; margin: 0 0 1.6rem; letter-spacing: -.035em; }
.recipe-summary h2 a { text-decoration: none; }
.recipe-summary p:not(.metadata) { font-weight: 300; margin: 0 0 2rem; }
.read-more { color: #666; font-size: .9375rem; font-weight: 300; }
footer { border-top: 1px solid #ececec; text-align: center; padding: 4rem 6%; }
footer h2 { font-weight: 500; font-size: 1.75rem; margin: 0 0 1.1rem; }
footer p { margin: .8rem 0; font-weight: 300; }
.service-note, .copyright { color: #686868; font-size: .875rem; }
.copyright { margin-top: 3rem; }
.listing-title { font-size: 2.4rem; font-weight: 500; margin: 0 0 3rem; }
.recipe-detail { max-width: 1100px; margin: auto; }
.recipe-header { text-align: center; margin-bottom: 3rem; }
.recipe-header h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 500; line-height: 1.3; letter-spacing: -.04em; margin: 0 0 1rem; }
.recipe-header .metadata { margin: 0; }
.recipe-content { font-weight: 300; }
.recipe-content h2, .recipe-content h3, .recipe-content h4, .recipe-content h5 { font-weight: 500; line-height: 1.4; }
.recipe-content h3 { font-size: 1.8rem; margin-top: 3rem; }
.recipe-content h4 { font-size: 1.2rem; margin: 2rem 0 .8rem; }
.recipe-content p { margin: .8rem 0; }
.recipe-content ul, .recipe-content ol { padding-left: 1.5rem; }
.recipe-content li { padding-left: .2rem; margin-bottom: .4rem; }
.recipe-content strong { font-weight: 500; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 2.5rem 0 4rem; align-items: start; }
.intro-grid > figure { margin: 2rem 0 0; }
.intro-grid .text-block h4:first-child { margin-top: 0; }
.photo-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; margin: 2rem 0 3rem; }
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; }
.photo-group img { aspect-ratio: 4 / 3; object-fit: cover; }
figure a { display: block; }
figcaption { color: #565656; font-size: .875rem; font-weight: 300; margin-top: .5rem; }
.tags { margin: 3rem 0; font-size: .875rem; color: #555; line-height: 2; }
.comments { margin: 3rem 0; border-top: 1px solid #ddd; padding-top: 2rem; }
.comments h2 { font-weight: 500; font-size: 1.5rem; }
.comment { border-bottom: 1px solid #eee; padding: 1.5rem 0; font-weight: 300; }
.comment strong { font-weight: 500; }
.comment p { margin: .5rem 0; }
.recipe-pagination { display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid #ddd; margin-top: 4rem; padding-top: 2rem; }
.recipe-pagination a { max-width: 46%; text-decoration: none; }
.recipe-pagination small { display: block; color: #666; font-size: .875rem; }
.recipe-pagination span { display: block; font-size: 1.3rem; }
.recipe-pagination .next { text-align: right; margin-left: auto; }
.contact { max-width: 720px; margin: auto; font-weight: 300; }
.contact form { display: grid; gap: 1.4rem; margin-top: 2.5rem; }
.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { display: grid; gap: .5rem; font-size: 1rem; }
label small { font-size: .875rem; color: #555; }
input, textarea { border: 1px solid #aaa; border-radius: 0; background: #fafafa; width: 100%; padding: .7rem; color: #111; }
textarea { resize: vertical; min-height: 180px; }
form button { justify-self: start; }
form [role=status] { font-size: .875rem; }
@media (min-width: 1400px) { .recipe-summary h2 { font-size: 2.75rem; } }
@media (max-width: 720px) {
 body > header { padding: 1.75rem 6%; gap: 1rem; }
 .brand { font-size: 1.3rem; }
 nav { gap: .75rem; font-size: .875rem; }
 main { padding-top: 2.5rem; }
 .recipe-row { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
 .recipe-summary h2 { margin-bottom: 1rem; }
 .recipe-summary p:not(.metadata) { margin-bottom: 1rem; }
 .metadata { margin-bottom: .7rem; }
 .intro-grid { grid-template-columns: 1fr; gap: 1.5rem; }
 .intro-grid > figure { margin: 0; }
 .recipe-header { text-align: left; }
 .recipe-pagination span { font-size: 1.05rem; }
 .name-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }