.catalog-intro { display:grid; grid-template-columns:1fr 220px; align-items:center; gap:48px; padding-block:40px 30px; }
.catalog-intro h1 { font-family:var(--font-body); font-size:44px; line-height:1.3; letter-spacing:-.045em; margin:12px 0 18px; }
.catalog-intro h1 em { color:#edc27e; font-style:normal; }
.catalog-intro p:not(.eyebrow) { font-size:14px; line-height:1.9; color:#c7d2bd; margin:0; }
.catalog-emblem { min-height:220px; display:grid; justify-items:center; align-content:center; padding:20px; background:#304d3b; border:1px solid #7a8b61; }
.catalog-emblem>img { margin-bottom:12px; }
.catalog-emblem>span { font-family:var(--font-pixel); font-size:10px; color:#d0d8bd; }
.catalog-emblem>b { font-size:24px; color:#f3d69a; line-height:1.3; margin-top:7px; }
.catalog-emblem>small { font-size:10px; color:#bdccac; }
.catalog-section { padding-block:22px 64px; }
.catalog-controls { display:grid; grid-template-columns:minmax(210px,1.8fr) repeat(3,minmax(130px,1fr)) auto; gap:12px; align-items:end; padding:20px; background:#2a4637; border:1px solid #617c55; }
.catalog-field { display:grid; gap:7px; min-width:0; }
.catalog-field>span { font-size:11px; color:#d2ddc5; }
.catalog-field input,.catalog-field select { width:100%; min-width:0; height:44px; padding:10px 12px; border:1px solid #a8b68b; border-radius:0; background:#f3ebd5; color:#354735; font-family:var(--font-body); font-size:13px; }
.catalog-controls>.button { min-height:44px; box-shadow:none; }
.catalog-results { display:flex; justify-content:space-between; align-items:center; margin:24px 0 10px; font-size:13px; }
.catalog-results p { margin:0; color:#e3e6d2; }
.catalog-results .text-link { font-size:12px; }
.catalog-note { color:#c1ceb4; font-size:12px; line-height:1.85; margin:0 0 24px; max-width:850px; }
.bread-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.bread-card { display:flex; flex-direction:column; text-decoration:none; background:#f2ead4; color:#354b3b; border:1px solid #c4bc99; padding:16px; min-width:0; }
.bread-card:hover { border-color:#f0c474; outline:2px solid #edbf76; outline-offset:0; }
.bread-card:focus-visible { outline:3px solid #edbf76; outline-offset:4px; }
.bread-card-art { height:114px; position:relative; display:grid; place-items:center; background:#e5e2c8; margin:-16px -16px 16px; border-bottom:3px solid #b3a77c; }
.bread-number { position:absolute; top:10px; left:12px; color:#62694e; font-size:9px; font-family:var(--font-pixel); }
.bread-card-name { display:flex; gap:8px; align-items:start; justify-content:space-between; }
.bread-card-name h2 { font-family:var(--font-body); color:#304c37; font-size:18px; line-height:1.5; letter-spacing:-.035em; margin:0; overflow-wrap:anywhere; }
.bread-tier { font-size:10px; color:#586643; border:1px solid #aeb58c; padding:1px 5px; flex-shrink:0; margin-top:4px; }
.bread-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; }
.bread-tag { font-size:10px; padding:3px 6px; line-height:1.6; background:#dce0c8; color:#43563b; }
.bread-tag.air { background:#d4e2db; color:#315849; }
.bread-card-desc { font-size:12px; line-height:1.75; color:#59634d; margin:12px 0; min-height:42px; word-break:keep-all; }
.bread-mini-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px 0; border-top:1px solid #ccc4a4; margin:auto 0 0; }
.bread-stat dt { font-size:10px; color:#58634b; margin-bottom:5px; }
.bread-stat dd { font-size:14px; font-weight:750; line-height:1.5; margin:0; color:#344d37; font-variant-numeric:tabular-nums; }
.bread-card-footer { display:flex; gap:8px; justify-content:space-between; border-top:1px solid #d4ccb0; padding-top:10px; color:#576548; font-size:10px; }
.catalog-empty { text-align:center; padding:48px 20px; background:#e9e4cb; color:#3f5138; }
.catalog-empty h2 { font-size:25px; color:#3f5138; margin:20px 0 12px; }
.catalog-empty p { font-size:14px; }
main>.bread-detail { width:min(920px,calc(100% - 48px)); padding-block:34px 64px; }
.bread-back { display:inline-block; margin-bottom:26px; padding:8px 0; }
.bread-detail-header { display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:center; margin-bottom:28px; }
.bread-detail-portrait { height:200px; display:grid; place-items:center; background:#e1dfc4; border:1px solid #a6ad87; box-shadow:5px 5px 0 #132e25; }
.bread-detail-header h1 { font-family:var(--font-body); font-size:40px; line-height:1.4; margin:10px 0 12px; letter-spacing:-.04em; }
.bread-lede { font-size:15px; color:#d0d9c3; line-height:1.8; margin:0 0 12px; }
.bread-detail-header .bread-tags { margin-top:0; }
.bread-detail-header .bread-tag { background:#405c42; color:#e4e9d4; }
.bread-detail-body { background:#f3ecd8; color:#344b38; padding:36px 40px; }
.bread-detail-section+.bread-detail-section { margin-top:32px; padding-top:28px; border-top:1px solid #c6bd9b; }
.bread-detail-section h2 { font-family:var(--font-body); font-size:24px; line-height:1.5; color:#344b38; margin-bottom:20px; letter-spacing:-.03em; }
.bread-detail-section h3 { font-family:var(--font-body); font-size:15px; line-height:1.6; color:#435637; margin-bottom:16px; }
.bread-detail-section>p { line-height:1.9; font-size:14px; word-break:keep-all; }
.bread-full-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 20px; }
.bread-full-stats .bread-stat { padding:16px; background:#e2e2c9; }
.bread-full-stats dt { font-size:11px; margin-bottom:7px; }
.bread-full-stats dd { font-size:18px; }
.bread-detail-note { font-size:12px!important; color:#56624c; line-height:1.85; margin:14px 0 0; word-break:keep-all; }
.bread-effects { padding-left:20px; margin:18px 0 0; }
.bread-effects li { padding:5px 0; font-size:14px; line-height:1.85; word-break:keep-all; }
.bread-recipe+.bread-recipe { margin-top:24px; }
.recipe-sequence { display:flex; list-style:none; flex-wrap:wrap; align-items:center; gap:12px; padding:0; margin:0 0 16px; }
.recipe-sequence>li { display:flex; align-items:center; gap:8px; font-size:12px; color:#354d35; }
.recipe-sequence>li+li:before { content:'→'; color:#647248; margin-right:4px; }
.recipe-chip { display:inline-flex; gap:6px; align-items:center; background:#e2e3c8; padding:8px; }
.recipe-cost { font-size:13px; font-weight:750; color:#4b5b3c; margin:12px 0; }
.merge-inputs { display:flex; gap:20px; align-items:center; }
.merge-bread { display:flex; align-items:center; gap:10px; color:#3d5437; text-decoration:none; border-bottom:1px solid #99a07b; padding:8px 0; font-size:13px; }
.merge-bread:hover { color:#8b5b26; }
.merge-plus { color:#6a744e; }
.bread-detail-nav { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:24px; }
.bread-detail-nav .text-link { text-align:right; line-height:1.8; word-break:keep-all; }
@media(max-width:1100px){ .bread-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .catalog-controls { grid-template-columns:repeat(3,minmax(0,1fr)) auto; } .catalog-search { grid-column:1/-1; } }
@media(max-width:680px){
 .catalog-intro { grid-template-columns:1fr; gap:0; padding-block:28px 12px; } .catalog-intro h1 { font-size:32px; } .catalog-intro p:not(.eyebrow) { font-size:12px; } .catalog-emblem { display:none; } .catalog-section { padding-top:14px; } .catalog-controls { grid-template-columns:1fr 1fr; gap:12px; padding:14px; } .catalog-search { grid-column:1/-1; } .catalog-controls>.button { align-self:end; } .catalog-field input,.catalog-field select { font-size:12px; padding-inline:8px; } .catalog-results { font-size:12px; } .catalog-note { font-size:11px; } .bread-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .bread-card { padding:12px; } .bread-card-art { margin:-12px -12px 12px; height:108px; } .bread-card-name { gap:5px; } .bread-card-name h2 { font-size:14px; } .bread-tier { font-size:8px; padding:1px 3px; } .bread-number { font-size:8px; top:8px; left:8px; } .bread-tags { gap:4px; margin-top:8px; } .bread-tag { font-size:9px; padding:2px 4px; } .bread-card-desc { font-size:10px; min-height:52px; margin:10px 0; } .bread-mini-stats { gap:4px; padding:10px 0; } .bread-stat dt { font-size:9px; } .bread-stat dd { font-size:11px; } .bread-card-footer { font-size:9px; gap:4px; }
 main>.bread-detail { width:calc(100% - 32px); padding-top:22px; } .bread-back { margin-bottom:20px; } .bread-detail-header { grid-template-columns:120px minmax(0,1fr); gap:18px; margin-bottom:24px; } .bread-detail-portrait { height:152px; } .bread-detail-portrait img { max-width:none; } .bread-detail-header h1 { font-size:26px; } .bread-detail-header .eyebrow { font-size:9px; letter-spacing:.08em; } .bread-lede { font-size:12px; } .bread-detail-body { padding:24px 18px; } .bread-detail-section h2 { font-size:21px; margin-bottom:16px; } .bread-full-stats { grid-template-columns:1fr 1fr; gap:10px; } .bread-full-stats .bread-stat { padding:12px; } .bread-full-stats dt { font-size:10px; } .bread-full-stats dd { font-size:16px; } .bread-detail-section>p,.bread-effects li { font-size:13px; } .bread-detail-note { font-size:11px!important; } .recipe-sequence { gap:8px; } .recipe-sequence>li { font-size:11px; } .recipe-chip { padding:6px; font-size:11px; } .merge-inputs { gap:12px; } .merge-bread { flex-direction:column; gap:8px; font-size:11px; } .bread-detail-nav { align-items:stretch; flex-direction:column; gap:20px; } .bread-detail-nav>.button { text-align:center; } .bread-detail-nav .text-link { text-align:left; }
}
/* Keep a utility page's catalogue close to its controls. */
.catalog-intro { padding-block:28px 18px; }
.catalog-intro h1 { font-size:40px; }
.catalog-emblem { min-height:140px; display:grid; grid-template-columns:104px 1fr; gap:4px 12px; padding:16px; align-content:center; align-items:center; }
.catalog-emblem>img { grid-row:1/4; margin:0; }
.catalog-emblem>span,.catalog-emblem>b,.catalog-emblem>small { text-align:center; margin:0; }
@media(max-width:680px){ .catalog-intro h1 { font-size:30px; } .catalog-emblem { display:none; } }