/* Loco Moco feature: compact homepage card; the history sits in an expandable details element. */
.loco-feature { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:2rem; align-items:center; margin-top:2.5rem; padding:1.25rem; background:var(--color-bg-alt); border:1px solid color-mix(in srgb, var(--color-accent) 20%, transparent); border-radius:20px; scroll-margin-top:84px; }
.loco-photo { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:14px; }
.loco-copy h3 { font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.15; letter-spacing:-.03em; margin:.25rem 0 .75rem; }
.loco-copy > p { color:var(--color-text-soft); margin:0 0 1.25rem; max-width:52ch; }
.loco-order { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.25rem; }
.loco-order span { color:var(--color-text-soft); font-size:.9rem; }
.loco-order strong { color:var(--color-accent-hover); font-size:1.15rem; }
.loco-story { margin-top:1.25rem; border-top:1px solid var(--color-line-strong); padding-top:.75rem; }
.loco-story summary { cursor:pointer; font-weight:700; padding:.6rem 0; min-height:44px; display:flex; align-items:center; gap:.5rem; list-style:none; }
.loco-story summary::-webkit-details-marker { display:none; }
.loco-story summary::before { content:'+'; color:var(--color-accent); font-size:1.2rem; width:1rem; }
.loco-story[open] summary::before { content:'–'; }
.loco-story p { color:var(--color-text-soft); font-size:.95rem; margin:.5rem 0 .9rem; max-width:62ch; }
.loco-source { font-size:.9rem; text-decoration:underline; text-underline-offset:3px; }
.loco-story summary:focus-visible, .loco-feature a:focus-visible { outline:3px solid var(--color-accent-hover); outline-offset:4px; border-radius:6px; }
@media (max-width:760px) { .loco-feature { grid-template-columns:1fr; gap:1.25rem; padding:1rem; } .loco-photo { aspect-ratio:4/3; } }