/* Each story is composed for its restaurant design, inside the scrolling preview. */
.story-page { position:relative; min-width:0; min-height:var(--stage-height); }
.story-page *, .story-page figure { min-width:0; }
.story-page figure, .story-page blockquote { margin:0; }
.story-page img { display:block; width:100%; object-fit:cover; }
.story-page h2, .story-page h3 { font-weight:400; }
.story-page .story-kicker { display:block; font:600 6px/1.6 Arial,Helvetica,sans-serif; letter-spacing:1.25px; }
.story-page .restaurant-cta { max-width:100%; gap:15px; flex-shrink:0; font-size:8px; padding:10px 12px; min-height:32px; }
.story-page .restaurant-cta svg { flex-shrink:0; }

/* Editorial: a feature headline, a kitchen photograph, and newspaper columns. */
.story-editorial { padding:0 25px 23px; }
.story-editorial .story-edition { display:flex; justify-content:space-between; gap:12px; padding:10px 0 8px; border-bottom:3px double var(--border); font:5px/1.4 Arial,sans-serif; letter-spacing:1px; }
.story-editorial .story-editorial-heading { display:grid; grid-template-columns:1.8fr 1fr; gap:8px 25px; padding:18px 0; border-bottom:1px solid var(--border); }
.story-editorial-heading .story-kicker { grid-column:1/-1; }
.story-editorial-heading h2 { font:400 clamp(29px,4.5cqw,50px)/1.03 Georgia,serif; letter-spacing:-1.3px; }
.story-editorial-heading>p:last-child { align-self:end; font:italic 11px/1.65 Georgia,serif; }
.story-editorial .story-editorial-columns { display:grid; grid-template-columns:1.1fr 1fr .7fr; gap:21px; padding-top:18px; }
.story-editorial-columns figure img { height:clamp(155px,24cqw,250px); object-position:61% center; }
.story-editorial-columns figcaption { font:5px/1.6 Arial,sans-serif; letter-spacing:.7px; margin-top:9px; }
.story-editorial .story-editorial-article { font:10px/1.75 Georgia,serif; }
.story-editorial-article p+p { margin-top:12px; }
.story-editorial-article .story-dropcap::first-letter { float:left; font:43px/.85 Georgia,serif; padding:6px 5px 0 0; }
.story-editorial-article .restaurant-cta { margin-top:15px; background:none; color:var(--fg); border-bottom:1px solid var(--fg); padding:8px 0; }
.story-editorial-columns aside { border-left:1px solid var(--border); padding-left:17px; }
.story-editorial-columns aside .story-kicker { font-size:5px; letter-spacing:1px; }
.story-editorial-columns blockquote { font:italic clamp(17px,2.6cqw,29px)/1.18 Georgia,serif; margin:14px 0 18px; letter-spacing:-.3px; }
.story-editorial-columns aside>p { font:7px/1.8 Arial,sans-serif; color:var(--secondary); }

/* Cinema: one immersive photo with a title and a quiet invitation underneath. */
.story-cinema { isolation:isolate; padding:23px 5% 27px; display:flex; flex-direction:column; gap:35px; }
.story-cinema .story-cinema-image, .story-cinema .story-cinema-shade { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.story-cinema .story-cinema-image { object-position:61% 50%; }
.story-cinema .story-cinema-shade { background:linear-gradient(90deg,#0c1712eb 0%,#0c171257 90%),linear-gradient(0deg,#0c1712fa,transparent 90%); }
.story-cinema .story-cinema-topline { display:flex; justify-content:space-between; gap:12px; font:5px/1.6 Arial,sans-serif; letter-spacing:1.5px; color:#d5b58b; }
.story-cinema-title .story-kicker { color:#d5b58b; margin-bottom:13px; }
.story-cinema-title h2 { font:400 clamp(34px,6.3cqw,69px)/1.02 Georgia,serif; letter-spacing:-1.8px; }
.story-cinema-title h2 em { color:#dbc6a7; }
.story-cinema .story-cinema-bottom { display:grid; grid-template-columns:1.25fr 1fr; align-items:end; gap:35px; margin-top:auto; }
.story-cinema-bottom>div:first-child { font:9px/1.85 Arial,sans-serif; max-width:310px; color:#d7dacd; }
.story-cinema-bottom p+p { margin-top:9px; }
.story-cinema-invitation { display:flex; align-items:flex-end; flex-direction:column; gap:11px; }
.story-cinema-invitation>span { text-align:right; font:5px/1.8 Arial,sans-serif; letter-spacing:1.3px; color:#d5b58b; }
.story-cinema .restaurant-cta { padding:9px 0; background:none; color:#f4eee2; border-bottom:1px solid #d5b58b; }

/* Poster: loud typography, angled snapshots, and a handwritten-note rhythm. */
.story-poster { padding:0 25px 18px; overflow:hidden; }
.story-poster .story-poster-topline { display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--fg); font:700 5px/1.6 Arial,sans-serif; letter-spacing:1px; }
.story-poster .story-poster-grid { display:grid; grid-template-columns:1.08fr 1fr; gap:15px 24px; padding:21px 0; }
.story-poster-title h2 { font:900 clamp(46px,8cqw,85px)/.83 Arial,Helvetica,sans-serif; letter-spacing:-3.4px; }
.story-poster-title h2 em { font-style:normal; -webkit-text-stroke:1px var(--fg); color:var(--canvas); }
.story-poster .story-poster-collage { position:relative; min-height:238px; margin:6px 10px 0 0; }
.story-poster-collage figure { position:absolute; background:var(--fg); border:5px solid var(--fg); }
.story-poster-collage img { height:100%; }
.story-poster-collage .story-poster-kitchen { width:86%; height:77%; top:0; right:0; transform:rotate(7deg); }
.story-poster-kitchen img { height:calc(100% - 21px); object-position:60% center; }
.story-poster-kitchen figcaption { color:var(--canvas); font:700 5px/1 Arial,sans-serif; letter-spacing:.6px; padding-top:8px; text-align:center; }
.story-poster-collage .story-poster-salad { width:62%; height:52%; bottom:0; left:-7px; border-color:#fff3b9; transform:rotate(-10deg); box-shadow:3px 4px 0 #982b2126; }
.story-poster .story-poster-badge { position:absolute; right:-9px; bottom:10px; width:76px; height:76px; border:2px solid var(--fg); border-radius:50%; background:var(--canvas); display:grid; place-content:center; text-align:center; font:900 12px/.95 Arial,sans-serif; transform:rotate(10deg); }
.story-poster .story-poster-note { grid-column:1/-1; display:grid; grid-template-columns:.45fr 1fr; gap:20px; padding:13px 15px; background:#fff1ac; border-block:1px solid var(--fg); }
.story-poster-note>span { font:900 19px/1 Arial,sans-serif; letter-spacing:-.7px; }
.story-poster-note>p { font:9px/1.7 Arial,sans-serif; max-width:380px; }
.story-poster .story-poster-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.story-poster-bottom>p { font:900 10px/1.25 Arial,sans-serif; letter-spacing:.4px; }
.story-poster .restaurant-cta { font-weight:700; }

/* Gallery: an asymmetric composition with generous space and quiet captions. */
.story-gallery { padding:28px 8% 31px; display:grid; grid-template-columns:1fr 1.14fr; gap:33px 12%; align-items:start; }
.story-gallery .story-gallery-intro { padding-top:7px; }
.story-gallery-intro .story-kicker { font-size:5px; color:var(--secondary); margin-bottom:24px; }
.story-gallery-intro h2 { font:400 clamp(31px,5.3cqw,59px)/1.04 Georgia,serif; letter-spacing:-1.6px; }
.story-gallery-intro>p { font:9px/1.85 Arial,sans-serif; color:var(--secondary); margin-top:21px; }
.story-gallery .story-gallery-main { margin-top:19px; }
.story-gallery-main img { height:clamp(205px,31cqw,320px); object-position:61% center; }
.story-gallery figcaption { display:flex; gap:9px; margin-top:10px; font:italic 8px/1.5 Georgia,serif; }
.story-gallery figcaption>span { font:5px/1.9 Arial,sans-serif; color:var(--secondary); }
.story-gallery .story-gallery-note { padding-top:14px; border-top:1px solid var(--border); align-self:center; }
.story-gallery-note>span { font:5px/1.8 Arial,sans-serif; letter-spacing:1.5px; }
.story-gallery-note>p { font:10px/1.85 Georgia,serif; margin:15px 0; }
.story-gallery .restaurant-cta { padding:8px 0; }
.story-gallery .story-gallery-detail { width:76%; margin-left:auto; }
.story-gallery-detail img { aspect-ratio:1.1; }

/* Bistro: a framed welcome letter, classic type, and a kitchen portrait. */
.story-bistro { padding:17px; }
.story-bistro .story-bistro-frame { border:1px solid var(--border); outline:1px solid var(--border); outline-offset:-5px; padding:22px 28px 18px; }
.story-bistro-frame>header { text-align:center; padding-bottom:18px; border-bottom:3px double var(--border); }
.story-bistro-ornament { display:block; margin-bottom:6px; }
.story-bistro-ornament svg { width:20px; height:20px; margin:auto; stroke:currentColor; }
.story-bistro-frame>header .story-kicker { font-size:5px; letter-spacing:1.9px; }
.story-bistro-frame h2 { font:400 clamp(27px,4.5cqw,47px)/1.1 Georgia,serif; letter-spacing:-1px; margin:10px 0; }
.story-bistro-subtitle { font:italic 10px/1.5 Georgia,serif; }
.story-bistro .story-bistro-letter { display:grid; grid-template-columns:.8fr 1fr; gap:28px; padding:20px 0; align-items:center; }
.story-bistro .story-bistro-inset { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 15px; border-block:1px solid var(--border); text-align:center; background:#772d3505; }
.story-bistro-inset>span:first-child { font:5px/1.8 Arial,sans-serif; letter-spacing:1.3px; }
.story-bistro-inset h3 { font:400 clamp(27px,4cqw,39px)/1.04 Georgia,serif; letter-spacing:-.8px; margin:16px 0; }
.story-bistro-inset>p { font:10px/1.8 Georgia,serif; }
.story-bistro-inset .story-bistro-flourish { font:25px/1 Georgia,serif; margin:17px 0 11px; }
.story-bistro-inset small { font:italic 8px/1.6 Georgia,serif; color:var(--secondary); }
.story-bistro-letter>div { font:11px/1.8 Georgia,serif; }
.story-bistro-letter p+p { margin-top:10px; }
.story-bistro-letter p:first-child { font-style:italic; font-size:14px; }
.story-bistro-letter .story-bistro-signature { font-size:10px; }
.story-bistro-signature em { font-size:17px; }
.story-bistro-frame>footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:13px; border-top:3px double var(--border); }
.story-bistro-frame>footer>span { font:5px/1.9 Arial,sans-serif; letter-spacing:1px; }
.story-bistro-frame>footer strong { font-weight:400; }

/* Shop: ingredient-led cards and an everyday-food promise. */
.story-shop { padding:21px; }
.story-shop .story-shop-topline { display:flex; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); font:5px/1.6 Arial,sans-serif; letter-spacing:.7px; }
.story-shop .story-shop-heading { display:grid; grid-template-columns:1.05fr 1fr; gap:25px; align-items:end; padding:20px 0; }
.story-shop-heading .story-kicker { font-size:5px; margin-bottom:11px; }
.story-shop-heading h2 { font:800 clamp(28px,4.6cqw,49px)/.96 Arial,sans-serif; letter-spacing:-1.8px; }
.story-shop-heading h2 em { font-style:normal; font-weight:400; }
.story-shop-heading>p { font:9px/1.8 Arial,sans-serif; color:var(--secondary); padding-bottom:2px; }
.story-shop .story-shop-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.story-shop .story-shop-value { background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.story-shop-value>img { height:clamp(90px,14cqw,150px); }
.story-shop-value:nth-child(2)>img { object-position:60% center; }
.story-shop-value>div { padding:13px 11px 15px; }
.story-shop-value span { font:4px/1.5 Arial,sans-serif; letter-spacing:.5px; display:block; margin-bottom:9px; color:var(--secondary); }
.story-shop-value h3 { font:700 clamp(14px,2cqw,22px)/1.1 Arial,sans-serif; letter-spacing:-.5px; }
.story-shop-value p { font:8px/1.75 Arial,sans-serif; color:var(--secondary); margin-top:9px; }
.story-shop .story-shop-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:21px; }
.story-shop-bottom strong { display:block; font:600 9px/1.6 Arial,sans-serif; }
.story-shop-bottom span { display:block; font:6px/1.7 Arial,sans-serif; color:var(--secondary); margin-top:4px; }
.story-shop .restaurant-cta { font-size:7px; padding-inline:10px; gap:10px; }

@container (max-width:650px) {
  .story-editorial .story-editorial-columns { grid-template-columns:1fr 1.1fr; gap:18px; }
  .story-editorial-columns aside { grid-column:1/-1; border-left:0; border-top:1px solid var(--border); padding:13px 0 0; display:flex; align-items:center; justify-content:space-between; gap:15px; }
  .story-editorial-columns blockquote { margin:0; font-size:17px; }
  .story-editorial-columns blockquote br { display:none; }
  .story-editorial-columns aside>p { flex-shrink:0; }
  .story-poster-title h2 { font-size:clamp(44px,9cqw,68px); }
  .story-poster .story-poster-collage { min-height:209px; }
  .story-poster .story-poster-badge { height:61px; width:61px; font-size:10px; }
  .story-shop .story-shop-values { grid-template-columns:1fr 1fr; }
  .story-shop .story-shop-season { grid-column:1/-1; display:grid; grid-template-columns:.85fr 1fr; }
  .story-shop-season>img { height:100%; min-height:125px; }
  .story-shop-season>div { align-self:center; }
  .story-shop-value h3 { font-size:18px; }
  .story-shop .story-shop-bottom { align-items:flex-start; flex-direction:column; }
}

/* Phone compositions grow vertically; the existing site-content owns scrolling. */
@container (max-width:480px) {
  .story-page .story-kicker { font-size:6px; }
  .story-page .restaurant-cta { font-size:8px; }
  .story-editorial { padding:0 18px 23px; }
  .story-editorial .story-edition { font-size:4px; letter-spacing:.8px; }
  .story-editorial .story-editorial-heading { display:block; padding:20px 0 16px; }
  .story-editorial-heading .story-kicker { margin-bottom:11px; }
  .story-editorial-heading h2 { font-size:35px; }
  .story-editorial-heading>p:last-child { font-size:11px; margin-top:13px; }
  .story-editorial-heading>p:last-child br { display:none; }
  .story-editorial .story-editorial-columns { grid-template-columns:1fr; gap:19px; }
  .story-editorial-columns figure img { height:185px; }
  .story-editorial .story-editorial-article { font-size:12px; line-height:1.8; }
  .story-editorial-columns aside { display:grid; grid-template-columns:1fr auto; gap:12px; }
  .story-editorial-columns aside .story-kicker { grid-column:1/-1; }
  .story-editorial-columns blockquote { font-size:19px; }
  .story-editorial-columns blockquote br { display:block; }
  .story-cinema { padding:20px 22px 26px; gap:32px; }
  .story-cinema .story-cinema-topline { font-size:4px; letter-spacing:1px; }
  .story-cinema-title .story-kicker { font-size:5px; }
  .story-cinema-title h2 { font-size:42px; letter-spacing:-1.5px; }
  .story-cinema .story-cinema-bottom { grid-template-columns:1fr; gap:23px; }
  .story-cinema-bottom>div:first-child { font-size:11px; }
  .story-cinema-invitation { align-items:flex-start; gap:10px; }
  .story-cinema-invitation>span { text-align:left; font-size:5px; }
  .story-cinema .story-cinema-image { object-position:59% center; }
  .story-cinema .story-cinema-shade { background:linear-gradient(90deg,#0c1712c9,#0c171254),linear-gradient(0deg,#0c1712f7,transparent); }
  .story-poster { padding:0 18px 20px; }
  .story-poster .story-poster-topline { font-size:4px; letter-spacing:.4px; gap:9px; }
  .story-poster-topline>span:last-child { max-width:106px; text-align:right; }
  .story-poster .story-poster-grid { grid-template-columns:1.1fr .9fr; gap:20px 9px; padding-top:23px; }
  .story-poster-title h2 { font-size:clamp(30px,10.5cqw,45px); letter-spacing:-1.7px; line-height:.9; }
  .story-poster .story-poster-collage { min-height:180px; margin:0 4px 0 0; }
  .story-poster-collage figure { border-width:3px; }
  .story-poster-collage .story-poster-kitchen { width:99%; height:68%; }
  .story-poster-kitchen img { height:100%; }
  .story-poster-kitchen figcaption { display:none; }
  .story-poster-collage .story-poster-salad { width:94%; height:45%; left:-3px; }
  .story-poster .story-poster-badge { width:47px; height:47px; font-size:8px; right:-5px; bottom:31%; }
  .story-poster .story-poster-note { grid-template-columns:1fr; gap:11px; padding:15px 13px; }
  .story-poster-note>span { font-size:23px; }
  .story-poster-note>p { font-size:11px; }
  .story-poster .story-poster-bottom { align-items:flex-start; flex-direction:column; gap:12px; }
  .story-poster-bottom>p { font-size:11px; }
  .story-gallery { padding:26px 24px 31px; gap:27px 16px; grid-template-columns:1fr 1fr; }
  .story-gallery .story-gallery-intro { grid-column:1/-1; padding:0; }
  .story-gallery-intro .story-kicker { font-size:5px; margin-bottom:17px; }
  .story-gallery-intro h2 { font-size:44px; }
  .story-gallery-intro>p { font-size:10px; margin-top:16px; }
  .story-gallery .story-gallery-main { grid-column:1/-1; width:80%; margin:0 0 0 auto; }
  .story-gallery-main img { height:231px; }
  .story-gallery .story-gallery-note { grid-column:1/-1; padding-top:20px; }
  .story-gallery-note>p { font-size:12px; margin:14px 0; }
  .story-gallery .story-gallery-detail { grid-column:1/-1; width:68%; margin:0; }
  .story-gallery figcaption { font-size:9px; }
  .story-bistro { padding:13px; }
  .story-bistro .story-bistro-frame { padding:21px 19px 19px; }
  .story-bistro-frame h2 { font-size:31px; }
  .story-bistro-frame h2 em { display:block; }
  .story-bistro-subtitle { font-size:10px; }
  .story-bistro .story-bistro-letter { grid-template-columns:1fr; gap:23px; padding-block:21px; }
  .story-bistro .story-bistro-inset { padding:24px 18px; }
  .story-bistro-inset h3 { font-size:35px; }
  .story-bistro-inset>p { font-size:11px; }
  .story-bistro-letter>div { font-size:12px; line-height:1.8; }
  .story-bistro-letter p:first-child { font-size:15px; }
  .story-bistro-frame>footer { gap:15px; flex-wrap:wrap; }
  .story-bistro-frame>footer>span { font-size:5px; }
  .story-shop { padding:19px 17px 23px; }
  .story-shop .story-shop-topline { font-size:4px; letter-spacing:.5px; }
  .story-shop-topline>span:last-child { text-align:right; }
  .story-shop .story-shop-heading { grid-template-columns:1fr; gap:15px; padding:22px 0; }
  .story-shop-heading h2 { font-size:43px; }
  .story-shop-heading>p { font-size:11px; line-height:1.75; }
  .story-shop .story-shop-values { gap:10px; }
  .story-shop .story-shop-season { grid-template-columns:1fr; }
  .story-shop-season>img { height:160px; min-height:0; }
  .story-shop-value>img { height:95px; }
  .story-shop-value>div { padding:13px 11px 16px; }
  .story-shop-value span { font-size:4px; line-height:1.65; }
  .story-shop-value h3 { font-size:17px; }
  .story-shop-season h3 { font-size:26px; }
  .story-shop-value p { font-size:10px; line-height:1.65; }
  .story-shop .story-shop-bottom { padding-top:22px; }
  .story-shop-bottom strong { font-size:11px; }
  .story-shop-bottom span { font-size:7px; }
}