/* Local draft additions only; the Yulin layout and type remain authoritative. */
:root { color-scheme:light; --rp-bg:#f8f6ef; --rp-surface:#f1eee4; --rp-text:#18231f; --rp-muted:#59655f; --rp-line:rgba(24,35,31,.2); --yl-chinese:#526e78; }

.cpi-page .yl-hero h1 { font-size:clamp(58px,6.4vw,94px); }
.cpi-photo-placeholder { display:flex; flex-direction:column; gap:14px; justify-content:center; align-items:center; width:100%; height:100%; min-height:200px; padding:28px; background:var(--rp-surface); color:var(--rp-muted); text-align:center; font-size:12px; line-height:1.7; }
.cpi-photo-placeholder small { max-width:230px; font-size:11px; }
.cpi-page .yl-store-gallery-track > .yl-photo-slide { height:auto; aspect-ratio:3/4; }
.cpi-venue-gallery .yl-store-gallery-track > .yl-photo-slide { aspect-ratio:4/3; }
.cpi-venue-gallery { margin-bottom:24px; }
.yl-dining-panel .cpi-photo-placeholder { background:var(--venue-photo); color:var(--venue-muted); }
.cpi-page .yl-dining-panel figcaption,.cpi-page .yl-dining-panel .yl-store-gallery-controls :is(button,span) { color:var(--venue-muted); }
.yl-pending { color:var(--rp-muted); font-size:12px; line-height:1.8; }
.cpi-status { margin-block:18px; font-size:12px; line-height:1.8; color:var(--rp-muted); }
.yl-dining-panel .cpi-status { color:var(--venue-muted); }
.cpi-bars-status { margin-top:40px; padding-top:26px; border-top:1px solid var(--venue-line); }
.cpi-getting-here { scroll-margin-top:28px; padding-top:12px; }
.cpi-getting-here h3 { font:400 30px/1.2 var(--rp-display); margin:0; }
.cpi-getting-here p { font-size:14px; line-height:1.8; color:var(--rp-muted); }
.cpi-section-nav { position:sticky; top:0; z-index:90; display:flex; flex-wrap:wrap; gap:10px 30px; padding-block:14px; border-top:1px solid var(--rp-line); background:var(--rp-bg); }
.cpi-section-nav a { display:flex; align-items:center; min-height:36px; font-size:14px; color:var(--rp-text); }
.cpi-section-nav a:hover { color:var(--rp-accent); }
.cpi-section-nav a:focus-visible,.yl-mobile-action a:focus-visible { outline:2px solid var(--rp-accent); outline-offset:3px; }
.cpi-page section[id],.cpi-page .yl-stop,.cpi-getting-here { scroll-margin-top:88px; }
.cpi-page .yl-route { top:88px; max-height:calc(100dvh - 112px); }
.cpi-page .cpi-location-note { margin-block:20px; padding:14px 16px; border-left:3px solid #d6b990; background:rgba(248,246,239,.07); }
.cpi-location-note strong { display:block; color:var(--venue-ink); font-size:13px; font-weight:600; }
.cpi-location-note span { display:block; margin-top:5px; font-size:13px; }
.cpi-reader-notice { padding-block:20px 32px; border-top:1px solid var(--rp-line); color:var(--rp-muted); font-size:13px; }
.cpi-reader-notice p { margin:0; }
@media(min-width:801px) { #store-hug { grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr); } #store-hug>.yl-store-gallery { grid-column:2; grid-row:1; } #store-hug>.yl-store-caption { grid-column:1; grid-row:1; } }
@media(max-width:600px) {
 .cpi-page .yl-breadcrumb { padding-block:18px; font-size:12px; gap:10px; }
 .cpi-page .yl-hero { gap:22px; }
 .cpi-page .yl-hero h1 { display:block; font-size:clamp(42px,12vw,48px); line-height:1.08; }
 .cpi-page .yl-hero h1 span { display:block; margin-top:8px; font-size:17px; }
 .cpi-page .yl-hero .yl-eyebrow { margin-bottom:10px; }
 .cpi-page .yl-deck { font-size:29px; margin-block:16px 12px; }
 .cpi-page .yl-intro { font-size:15px; line-height:1.65; }
 .cpi-page .yl-actions { margin-top:20px; gap:18px; }
 .cpi-page .yl-button { min-height:46px; padding-block:12px; }
 .cpi-section-nav { display:none; }
 .cpi-page section[id],.cpi-page .yl-stop,.cpi-getting-here { scroll-margin-top:20px; }
 .cpi-page .yl-route { position:static; max-height:none; }
 .cpi-page .yl-mobile-action { grid-template-columns:.75fr .75fr 1.15fr 1.2fr; gap:4px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
 .cpi-page .yl-mobile-action a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:6px 2px; font-size:12px; line-height:1.35; }
 .cpi-page .yl-mobile-action a:last-child { color:var(--rp-text); background:transparent; }
 .cpi-page .yl-mobile-action a:hover { color:var(--rp-accent); }
}