/* Hakujuji-inspired catalog hierarchy, with Mariko's original content. */
.recipe-catalog-hero { padding:112px var(--page-gutter) 80px; background:#f4f1eb; }
.recipe-breadcrumb { display:flex; gap:16px; font-size:12px; margin-bottom:48px; }
.recipe-catalog-hero__inner { display:grid; grid-template-columns:.65fr 1.3fr .8fr; align-items:center; gap:44px; }
.recipe-catalog-hero__title h1 { margin-top:32px; font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,30px); line-height:1.9; }
.recipe-catalog-hero__inner figure { aspect-ratio:1; overflow:hidden; }
.recipe-catalog-hero__inner figure img { width:100%; height:100%; object-fit:cover; }
.recipe-catalog-tag { display:inline-block; font-size:11px; border:1px solid var(--line); border-radius:24px; padding:5px 15px; }
.recipe-catalog-hero__copy h2 { font-family:var(--serif); font-size:23px; font-weight:500; line-height:1.8; margin:22px 0; }
.recipe-catalog-hero__copy > p:not(.recipe-catalog-tag) { font-size:13px; line-height:2; }
.recipe-catalog-hero__copy .text-link { margin-top:26px; }
.recipe-catalog-intro { margin-top:32px; color:#625d57; }
.recipe-search-page .recipe-section { padding-top:64px; }
.recipe-search-page .recipe-section > .section-heading { margin-bottom:40px; }
.recipe-search-page .search-panel { display:flex; flex-direction:column; padding:0; background:transparent; }
.recipe-search-page .filter-group { order:-1; display:block; padding:0 0 32px; margin:0; }
.recipe-search-page .filter-group > p { display:none; }
.recipe-search-page .filter-list { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.recipe-search-page .filter-list button { min-width:138px; padding:16px 24px; border-radius:28px; background:#fff; }
.recipe-search-page .search-field { width:min(100%,640px); margin:8px auto 36px; border:1px solid var(--line); }
.recipe-tag-row { display:grid; grid-template-columns:130px 1fr 160px; gap:24px; border-block:1px solid var(--line); padding:32px 0; align-items:center; }
.recipe-tag-row > p { font-family:var(--serif); font-size:16px; }
.recipe-tags { display:flex; flex-wrap:wrap; gap:10px 18px; border-left:1px solid var(--line); padding-left:24px; }
.recipe-tags button { background:transparent; border:0; color:#514c46; padding:8px 0; font-size:12px; cursor:pointer; }
.recipe-tags button span { color:#8b7054; }
.recipe-tags button[aria-pressed=true] { text-decoration:underline; text-underline-offset:6px; font-weight:700; }
.recipe-sort { font-size:11px; display:grid; gap:8px; }
.recipe-sort select { width:100%; padding:13px; color:#fff; background:#645344; border:0; border-radius:4px; font:inherit; font-size:13px; }
.recipe-search-page .result-meta { margin-top:24px; }
.recipe-search-page .recipe-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px 28px; }
.recipe-search-page .recipe-image { aspect-ratio:1; }
.recipe-search-page .card-number { display:none; }
.recipe-search-page .recipe-copy h3 { font-size:17px; }
.recipe-search-page .recipe-meta { flex-wrap:wrap; gap:10px; }
.recipe-search-page .recipe-meta span { border:1px solid var(--line); padding:4px 9px; border-radius:20px; }
@media(max-width:980px) {
 .recipe-catalog-hero__inner { grid-template-columns:1fr 1fr; gap:32px; }
 .recipe-catalog-hero__title { grid-column:1/-1; }
 .recipe-catalog-hero__title h1 br { display:none; }
 .recipe-tag-row { grid-template-columns:110px 1fr; }
 .recipe-sort { grid-column:2; max-width:180px; }
 .recipe-search-page .recipe-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 22px; }
}
@media(max-width:680px) {
 .recipe-catalog-hero { padding-top:110px; padding-bottom:56px; }
 .recipe-breadcrumb { margin-bottom:32px; }
 .recipe-catalog-hero__inner { grid-template-columns:1fr; gap:28px; }
 .recipe-catalog-hero__title h1 { margin-top:18px; font-size:25px; }
 .recipe-catalog-hero__title h1 br { display:initial; }
 .recipe-catalog-hero__copy h2 { margin-block:14px; }
 .recipe-catalog-intro { margin-top:24px; }
 .recipe-search-page .filter-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
 .recipe-search-page .filter-list button { min-width:0; padding:13px 8px; }
 .recipe-tag-row { grid-template-columns:1fr; gap:18px; padding-block:24px; }
 .recipe-tags { padding:0; border:0; }
 .recipe-sort { grid-column:1; }
 .recipe-search-page .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 16px; }
 .recipe-search-page .recipe-copy h3 { font-size:15px; letter-spacing:0; }
 .recipe-search-page .recipe-copy > p { font-size:11px; }
 .recipe-search-page .recipe-copy { padding-top:15px; }
}
/* ---
author: codex
model: gpt-6-astra
updated: 2026-09-09
--- */
.recipe-search-page .recipe-copy h2{font:500 18px/1.7 var(--serif);margin:14px 0 12px;letter-spacing:.035em}.recipe-read-link{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8b5538;border-top:1px solid #e7ddd2;padding-top:15px;margin-top:18px}.recipe-search-page .recipe-card a{display:block}.recipe-search-page .recipe-card a:focus-visible{outline:3px solid #a47550;outline-offset:6px}.recipe-search-page .recipe-image img{transition:transform .35s}.recipe-search-page .recipe-card a:hover img{transform:scale(1.035)}.recipe-article .recipe-yield-badge{display:inline-block;border:1px solid #d9cabc;padding:8px 16px;margin-top:18px;font-size:12px;color:#805337}.recipe-article .recipe-ingredients .recipe-ingredient-group{font-weight:600;color:#805337;margin-top:15px;background:#f6f1e9;padding:9px 14px;list-style:none}.recipe-article .recipe-ingredients li{line-height:1.9;white-space:pre-line}.recipe-article .recipe-article__body section h2{font-family:var(--serif);font-size:27px;font-weight:500}.recipe-article .recipe-article__footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}.recipe-article .recipe-steps li::marker{color:#975535;font-weight:600}.recipe-article .recipe-article__toc a:hover{background:#f6f1e9}.recipe-article .recipe-article__toc a:focus-visible{outline:3px solid #a47550;outline-offset:4px}
@media(max-width:680px){.recipe-search-page .recipe-copy h2{font-size:15px;line-height:1.7;letter-spacing:0;margin-top:12px}.recipe-read-link{font-size:10px;gap:8px}.recipe-article .recipe-article__body section h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.recipe-search-page .recipe-image img{transition:none}}
.recipe-search-page .recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}.recipe-filter-details{border-block:1px solid var(--line);padding:20px 0;margin-bottom:25px}.recipe-filter-details>summary{font-family:var(--serif);font-size:16px;cursor:pointer;padding:8px 0}.recipe-filter-hint{font-size:11px;color:#756657;margin-top:20px}.recipe-filter-details .recipe-tag-row{grid-template-columns:130px 1fr;border:0;padding:18px 0}.recipe-search-page .recipe-sort{align-self:flex-end;width:160px}.recipe-detail-tags{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}.recipe-detail-tags a{font-size:12px;padding:8px 13px;border:1px solid #decfbd;color:#895939}.recipe-search-page .recipe-copy{min-height:180px}
@media(max-width:980px){.recipe-search-page .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}}
@media(max-width:680px){.recipe-search-page .recipe-grid{gap:32px 16px}.recipe-filter-details .recipe-tag-row{grid-template-columns:1fr;gap:10px}.recipe-search-page .recipe-copy{min-height:0}.recipe-detail-tags{gap:8px}}

.recipe-detail-tags a:focus-visible{outline:3px solid #a47550;outline-offset:4px}.recipe-detail-tags a:hover{background:#f6f1e9}
/* author: codex | model: gpt-6-astra | updated: 2026-09-10 */
.recipe-search-page .recipe-faceted-search{gap:0;margin-bottom:32px}.recipe-keyword{display:flex;gap:12px;max-width:760px;width:100%;margin:auto}.recipe-search-page .recipe-keyword .search-field{margin:0;flex:1;width:auto;min-width:0;background:#fff}.recipe-search-submit{border:1px solid #e3c45b;border-radius:32px;background:#e3c45b;color:#443c31;padding:12px 28px;min-height:48px;font:600 15px/1.5 var(--sans);cursor:pointer}.recipe-search-hint{font-size:12px;line-height:1.8;color:#645b51;text-align:center;margin:12px 0 22px}.recipe-faceted-search>.recipe-filter-hint{font-size:12px;line-height:1.8;margin:0 0 12px;color:#645b51}.recipe-facet-list{border-top:1px solid #ddd5c8}.recipe-facet{border-bottom:1px solid #ddd5c8}.recipe-facet summary{display:flex;gap:16px;align-items:center;list-style:none;cursor:pointer;min-height:56px;font-size:16px;font-weight:600;padding:12px 6px}.recipe-facet summary::-webkit-details-marker{display:none}.recipe-facet summary>[data-facet-selection]{font-size:12px;font-weight:400;color:#62533e}.recipe-facet-plus{margin-left:auto;width:22px;height:22px;position:relative}.recipe-facet-plus:before,.recipe-facet-plus:after{content:'';position:absolute;background:#514838;left:4px;right:4px;top:10px;height:1px}.recipe-facet-plus:after{transform:rotate(90deg)}.recipe-facet[open] .recipe-facet-plus:after{transform:none}.recipe-facet fieldset{border:0;padding:0 6px 20px;margin:0;min-width:0}.recipe-facet-section{display:grid;grid-template-columns:150px 1fr;gap:18px;margin-top:14px}.recipe-facet-section:has(>.recipe-facet-options:only-child){grid-template-columns:1fr}.recipe-facet-section>p{font-size:13px;line-height:1.8;padding-top:11px;margin:0;color:#6c5e4b}.recipe-facet-options{display:flex;flex-wrap:wrap;gap:10px}.recipe-check{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 14px;border:1px solid #d6cdbd;border-radius:24px;cursor:pointer;background:#fff;font-size:13px;color:#443c31;line-height:1.5}.recipe-check input{width:16px;height:16px;margin:0;accent-color:#705b20;flex-shrink:0}.recipe-check small{color:#645b51;font-size:11px}.recipe-check:has(input:checked){border-color:#b89a3f;background:#f7ecc3}.recipe-check:focus-within{outline:3px solid #705b20;outline-offset:3px}.recipe-faceted-search button:focus-visible,.recipe-facet summary:focus-visible,.recipe-faceted-search select:focus-visible{outline:3px solid #705b20;outline-offset:3px}.recipe-selected{margin-top:20px}.recipe-selected>p{font-size:12px;font-weight:600;margin-bottom:10px}.recipe-selected>div{display:flex;flex-wrap:wrap;gap:8px}.recipe-selected button{min-height:44px;padding:10px 15px;border:1px solid #cdb96e;border-radius:24px;background:#f7ecc3;color:#443c31;font:inherit;font-size:12px;cursor:pointer}.recipe-search-page .recipe-faceted-search .result-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px;border:0;padding:0}.recipe-search-page .recipe-faceted-search .recipe-sort{margin-left:auto;display:flex;align-items:center;width:auto;gap:12px;align-self:auto;font-size:12px}.recipe-search-page .recipe-faceted-search .recipe-sort select{width:auto;min-height:44px;background:#fff;color:#443c31;border:1px solid #cfc5b4;border-radius:22px;padding:10px 30px 10px 14px}.recipe-faceted-search [data-reset-search]{min-height:44px;color:#514229;text-decoration:underline;text-underline-offset:4px}.recipe-faceted-search [hidden],.recipe-search-page [data-recipe-card][hidden],.recipe-search-page [data-empty-results][hidden]{display:none!important}.recipe-search-page .recipe-section>.section-heading{margin-bottom:32px}
@media(max-width:680px){.recipe-keyword{gap:8px}.recipe-search-submit{padding:10px 20px}.recipe-search-page .recipe-keyword .search-field{padding-inline:14px}.recipe-search-hint{text-align:left;font-size:11px;margin-bottom:20px}.recipe-faceted-search>.recipe-filter-hint{font-size:11px}.recipe-facet summary{font-size:15px}.recipe-facet-section{grid-template-columns:1fr;gap:9px;margin-top:18px}.recipe-facet-section>p{padding:0;font-size:12px}.recipe-check{font-size:12px;padding:9px 12px}.recipe-facet-options{gap:8px}.recipe-search-page .recipe-faceted-search .result-meta{gap:12px}.recipe-search-page .recipe-faceted-search .recipe-sort{margin-left:0;width:100%;justify-content:flex-end}.recipe-selected button{max-width:100%;overflow-wrap:anywhere}}