* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: #ffffff; color: #202020; }
.kitchen { --paper: #ffffff; --ink: #202020; --muted: #586573; --line: #dce3e8; --primary: #23BDCC; --olive: #086873; --lime: #e8f7f8; --soft: #f5fafa; --button: #23BDCC; --on-button: #202020; --button-hover: #81dce4; --sans: 'Open Sans', Arial, sans-serif; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.65; }
.kitchen h1, .kitchen h2, .kitchen h3, .kitchen h4, .kitchen h5, .kitchen h6 { font-family: var(--serif, 'Dosis', sans-serif); font-weight: var(--heading-weight, 500); line-height: 1.15; margin: 0; text-wrap: balance; }
.kitchen p { margin: 0; }
.kitchen a { color: var(--olive); text-underline-offset: .24em; text-decoration-thickness: 1px; }
.kitchen a:hover { text-decoration-thickness: 2px; }
.kitchen a:focus-visible, .kitchen summary:focus-visible { outline: 3px solid var(--olive); outline-offset: 5px; }
.kitchen img { display: block; max-width: 100%; height: auto; }
.kitchen h1, .kitchen h2, .kitchen h3, .kitchen p, .kitchen a { overflow-wrap: anywhere; }
.shell { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 116px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand span { color: var(--ink); font-family: var(--serif, 'Dosis', sans-serif); font-size: 1.5rem; line-height: 1.15; }
.brand-logo { width: 68px; height: 68px; object-fit: contain; }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-left: auto; font-size: .875rem; }
.primary-nav a { color: var(--ink); text-decoration: none; padding-block: 10px; }
.primary-nav a:hover { color: var(--olive); text-decoration: underline; }
.kitchen .button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 20px; background: var(--button); color: var(--on-button); font-size: .875rem; font-weight: 700; line-height: 1.45; text-decoration: none; border: 1px solid transparent; }
.kitchen .button:hover { background: var(--button-hover); }
.header-action { flex-shrink: 0; }
.skip-link { position: absolute; top: -150px; left: 16px; z-index: 10; padding: 12px 20px; background: var(--paper); border: 2px solid var(--olive); }
.skip-link:focus { top: 12px; }
.journal-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; padding-block: 42px 34px; }
.journal-intro h1 { font-size: clamp(2.25rem, 4vw, 3.1rem); }
.journal-intro p { max-width: 520px; color: var(--muted); font-size: .9375rem; }
.featured-story { display: grid; grid-template-columns: 1.12fr 1fr; gap: 44px; align-items: center; padding-bottom: 42px; }
.featured-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.featured-copy { padding-block: 12px; }
.eyebrow { color: var(--olive); font-size: .75rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.eyebrow span { margin-inline: 8px; color: var(--muted); }
.featured-copy h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); margin-block: 16px 18px; }
.featured-copy h2 a, .story-card h3 a { color: var(--ink); text-decoration: none; }
.featured-copy h2 a:hover, .story-card h3 a:hover { color: var(--olive); text-decoration: underline; }
.story-description { font-size: .9375rem; line-height: 1.8; }
.story-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: .75rem; }
.featured-copy .story-meta { margin-top: 22px; }
.text-link { display: inline-block; font-size: .875rem; font-weight: 700; }
.text-link span { margin-left: 8px; }
.featured-copy .text-link { margin-top: 24px; }
.pathways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); background: var(--lime); padding-block: 26px; }
.pathway { padding: 6px 28px; }
.pathway + .pathway { border-left: 1px solid #bedadd; }
.pathway h2 { font-size: 1.65rem; margin-bottom: 12px; }
.pathway a { font-size: .8125rem; font-weight: 700; }
.pathway a span { margin-left: 6px; }
.recent-section { padding-block: 48px 64px; scroll-margin-top: 24px; }
.section-heading { display: flex; gap: 28px; align-items: center; margin-bottom: 28px; }
.section-heading h2 { font-size: 2rem; }
.section-rule { flex: 1; height: 1px; background: var(--line); }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 36px; }
.story-card { min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.card-image-link { display: block; }
.card-image-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-copy { padding-top: 20px; }
.story-card h3 { font-size: 1.875rem; margin-block: 10px 12px; }
.card-copy .story-meta { margin-top: 18px; }
.pagination:empty { display: none; }
.pagination { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.pagination nav, .pagination ul { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pagination ul { list-style: none; padding: 0; }
.pagination a, .pagination [aria-current] { display: inline-block; padding: 8px 15px; border: 1px solid var(--line); }
.pagination [aria-current] { background: var(--lime); font-weight: 700; }
.article-shell { width: min(1000px, calc(100% - 80px)); margin-inline: auto; padding-top: 48px; }
.reading-width { width: min(100%, 710px); margin-inline: auto; }
.article-header h1 { font-size: clamp(2.35rem, 4.6vw, 3.6rem); margin-block: 20px; }
.article-deck { font-size: 1.125rem; line-height: 1.8; }
.article-byline { border-top: 1px solid var(--line); margin-top: 26px; padding-block: 17px 28px; display: flex; justify-content: space-between; gap: 16px; font-size: .8125rem; color: var(--muted); }
.article-byline strong { color: var(--ink); font-weight: 600; }
.article-byline p:last-child { display: flex; flex-wrap: wrap; gap: 14px; }
.article-hero { width: 100%; max-height: 720px; object-fit: contain; margin: 10px auto 42px; }
.article-body { font-size: 1.0625rem; line-height: 1.85; padding-top: 12px; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin-block: 0 1.4em; }
.article-body h2 { font-size: 2rem; margin-block: 1.65em .65em; }
.article-body h3 { font-size: 1.6rem; margin-block: 1.5em .6em; }
.article-body h4, .article-body h5, .article-body h6 { font-size: 1.3rem; margin-block: 1.4em .6em; }
.article-body ul, .article-body ol { padding-left: 1.4em; margin-block: 0 1.5em; }
.article-body li { padding-left: .3em; margin-bottom: .55em; }
.article-body li::marker { color: var(--olive); }
.article-body img { width: auto; height: auto; margin: 28px auto; }
.article-body figure { margin: 32px 0; }
.article-body figure img { margin-bottom: 12px; }
.article-body figcaption { color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.article-body blockquote { margin: 30px 0; border-left: 3px solid var(--primary); padding: 18px 24px; background: var(--soft); }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body aside { padding: 24px; margin-block: 28px; background: var(--lime); border-top: 2px solid var(--primary); }
.article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: 24px; font-size: .9375rem; }
.article-body th, .article-body td { padding: 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { background: var(--soft); }
.article-body hr { margin-block: 36px; border: 0; border-top: 1px solid var(--line); }
.next-step { margin-top: 40px; padding: 26px; background: var(--lime); border-top: 1px solid #bedadd; }
.next-step h2 { font-size: 1.7rem; margin-bottom: 20px; }
.next-step-links { display: flex; gap: 20px 24px; align-items: center; flex-wrap: wrap; }
.related-section { padding-block: 64px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.related-grid h3 { font-size: 1.6rem; }
.related-section:not(:has(.story-card)), .featured-section:not(:has(.featured-story)) { display: none; }
.featured-story:not(:has(.featured-image)) { grid-template-columns: 1fr; }
.featured-story:not(:has(.featured-image)) .featured-copy { max-width: 710px; }
.card-image-link:not(:has(img)) { display: none; }
.site-footer { border-top: 1px solid var(--line); background: var(--soft); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; padding-block: 40px; }
.footer-brand { font-family: var(--serif, 'Dosis', sans-serif); font-size: 1.8rem; text-decoration: none; }
.footer-about p { max-width: 560px; margin-top: 14px; color: var(--muted); font-size: .875rem; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: .875rem; justify-self: end; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-block: 20px; font-size: .75rem; color: var(--muted); }
@media (max-width: 1080px) { .header-inner { flex-wrap: wrap; gap: 16px 24px; } .primary-nav { order: 3; width: 100%; justify-content: flex-start; border-top: 1px solid var(--line); padding-top: 8px; } .header-action { margin-left: auto; } .featured-story { gap: 28px; } .pathway { padding-inline: 20px; } }
@media (max-width: 700px) { .shell, .article-shell { width: calc(100% - 40px); } .header-inner { padding-block: 14px; } .brand-logo { width: 48px; height: 48px; } .brand span { font-size: 1.3rem; } .primary-nav { gap: 8px 22px; flex-wrap: wrap; font-size: .8125rem; } .header-action { font-size: .75rem; padding: 10px 12px; } .journal-intro { grid-template-columns: 1fr; gap: 16px; padding-block: 30px 26px; } .featured-story { grid-template-columns: 1fr; gap: 18px; padding-bottom: 30px; } .featured-copy { padding: 0; } .featured-copy h2 { margin-block: 12px 16px; } .featured-copy .text-link { margin-top: 18px; } .pathways { grid-template-columns: 1fr; padding: 0 20px; } .pathway { padding: 20px 0; } .pathway + .pathway { border-left: 0; border-top: 1px solid #bedadd; } .pathway h2 { font-size: 1.5rem; margin-bottom: 8px; } .recent-section { padding-block: 34px 44px; } .section-heading { gap: 18px; margin-bottom: 24px; } .section-heading h2 { font-size: 1.8rem; } .story-grid, .related-grid { grid-template-columns: 1fr; gap: 30px; } .story-card h3 { font-size: 1.8rem; } .article-shell { padding-top: 30px; } .article-header h1 { margin-block: 16px; } .article-deck { font-size: 1rem; } .article-byline { flex-direction: column; gap: 7px; } .article-hero { margin-bottom: 26px; } .article-body { font-size: 1rem; } .article-body h2 { font-size: 1.85rem; } .next-step { padding: 22px; } .next-step-links { align-items: flex-start; flex-direction: column; } .related-section { padding-block: 44px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 30px; } .footer-nav { justify-self: start; } .footer-bottom { flex-direction: column; gap: 8px; } }
@media (max-width: 420px) { .header-action { width: 100%; margin-left: 0; } .primary-nav { order: initial; } .header-inner { gap: 12px; } .brand { width: 100%; } }