/* Restaurang Bergamott: built by Last Page Studio engine 2.0.0. Tokens and fonts from site/design.py. */
@font-face{font-family:"Libre Caslon Display";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/albert-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/albert-sans-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/albert-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/albert-sans-latin-600-normal.woff2) format("woff2")}
:root{--c-paper:#F4F0E5;--c-paper-2:#EAE4D3;--c-card:#FBF9F3;--c-ink:#17140F;--c-soft:#4F493D;--c-rule:#D8D0BC;--c-ring:#6F6A59;--c-dark:#15171A;--c-on-dark:#F1EEE3;--c-on-dark-soft:#BCB8AA;--c-rule-dark:#3E4146;--c-accent:#D2DA48;--c-accent-ink:#17140F;--c-mark:#55600F;--c-k:#55600F;--c-k-dark:#D2DA48;--c-focus:#55600F;--c-focus-dark:#D2DA48;--c-tl:#17140F;--c-tl-hover:#55600F;--c-link-hover:#55600F;--c-btn:#17140F;--c-btn-fg:#F4F0E5;--c-btn-hover:#55600F;--c-btn-line:#17140F;--c-btn-dark:#D2DA48;--c-btn-dark-fg:#17140F;--c-btn-dark-hover:#E6ED7C;--f-display:"Libre Caslon Display","Iowan Old Style","Palatino Linotype",Georgia,serif;--f-text:"Albert Sans","Helvetica Neue",Arial,sans-serif;--t-body:400 17px/1.6 var(--f-text);--num:lining-nums tabular-nums;--u-thick:1px;--t-k:600 12px/1.25 var(--f-text);--k-track:.2em;--k-gap:14px;--t-tl:500 16px/1 var(--f-text);--tl-offset:6px;--t-btn:600 13px/1.1 var(--f-text);--btn-track:.16em;--btn-bw:1.5px;--btn-h:52px;--btn-px:26px;--t-fold:600 16px/1.2 var(--f-text);--t-brand-s:400 12px/1 var(--f-display);--brand-s-track:.1em;--t-brand-l:400 28px/1 var(--f-display);--t-nav:600 12px/1 var(--f-text);--nav-track:.16em;--t-h1:400 clamp(46px,13.5vw,62px)/1 var(--f-display);--t-h2:400 clamp(38px,10.6vw,50px)/1.02 var(--f-display);--t-date:400 24px/1.2 var(--f-display);--t-dish:400 25px/1.15 var(--f-display);--t-price:400 26px/1 var(--f-display);--t-stat:400 64px/1 var(--f-display);--t-bigtel:400 clamp(34px,9.6vw,44px)/1 var(--f-display);--hero-shade:20,16,12;--hero-sub:#F1EEE3;--hero-week:#F1EEE3;--f-hero:var(--f-display);--focus-w:3px;--gut:20px}
@media (min-width:768px){:root{--t-body:400 18px/1.6 var(--f-text)}}
@media (min-width:960px){:root{--gut:64px;--t-h1:400 clamp(72px,6.6vw,104px)/.96 var(--f-display);--t-h2:400 clamp(54px,4.8vw,76px)/1 var(--f-display);--t-bigtel:400 clamp(52px,4.4vw,68px)/1 var(--f-display);--t-dish:400 26px/1.15 var(--f-display)}}
/* ---- engine base: the same on every site, every value that gives a site its look comes from the tokens ---- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--c-paper);color:var(--c-ink);font:var(--t-body);-webkit-font-smoothing:antialiased;font-variant-numeric:var(--num,lining-nums)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:var(--u-thick,auto)}
a:hover{color:var(--c-link-hover,inherit)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-weight:var(--h-weight,400);text-wrap:balance}
em{font-style:italic}
:focus-visible{outline:var(--focus-w,2px) solid var(--c-focus);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--c-focus-dark,var(--c-accent))}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;background:var(--c-ink);color:var(--c-paper);padding:12px 16px;z-index:20}
.wrap{max-width:var(--max,1440px);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.nb{white-space:nowrap}
.today[hidden]{display:none}

/* labels, text links, buttons */
.k{font:var(--t-k);letter-spacing:var(--k-track,.18em);text-transform:uppercase;color:var(--c-k,inherit);margin:0 0 var(--k-gap,12px)}
.k--mark{color:var(--c-mark)}
.tl{display:inline-flex;align-items:center;min-height:44px;font:var(--t-tl);letter-spacing:var(--tl-track,normal);text-transform:var(--tl-case,none);color:var(--c-tl,inherit);text-decoration:underline;text-underline-offset:var(--tl-offset,4px)}
.tl:hover{color:var(--c-tl-hover,inherit)}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;flex:var(--btn-flex,1 1 auto);min-width:var(--btn-min-w,0);min-height:var(--btn-h,50px);padding:0 var(--btn-px,24px);
 font:var(--t-btn);letter-spacing:var(--btn-track,.14em);text-transform:uppercase;text-decoration:none;white-space:var(--btn-ws,normal);
 border:var(--btn-bw,1.5px) solid var(--c-btn);transition:background-color .2s,color .2s,border-color .2s}
.btn--fill{background:var(--c-btn);color:var(--c-btn-fg)}
.btn--fill:hover{background:var(--c-btn-hover);border-color:var(--c-btn-hover);color:var(--c-btn-fg)}
.btn--line{color:var(--c-btn-line,var(--c-btn))}
.btn--line:hover{background:var(--c-btn);color:var(--c-btn-fg)}
/* a dark section turns the buttons round */
.on-dark{--c-btn:var(--c-btn-dark);--c-btn-fg:var(--c-btn-dark-fg);--c-btn-hover:var(--c-btn-dark-hover);--c-btn-line:var(--c-on-dark)}

/* a typed white card with a thin rim line (a menu sheet, a sign, an hours card): rim colour from the tokens */
.card{background:var(--c-card,#fff);color:var(--c-ink);position:relative;box-shadow:0 30px 60px -28px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)}
.card::before{content:"";position:absolute;inset:8px;border:1.5px solid var(--c-mark);pointer-events:none}

/* phone folds: <details class="fold" data-open-from="960"> opens and stops folding from that width (core.js) */
.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 16px;cursor:pointer;list-style:none;border:2px solid currentColor;font:var(--t-fold,inherit);letter-spacing:.08em;text-transform:uppercase}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";flex:0 0 auto;font-size:1.6em;line-height:1;transition:transform .25s ease}
.fold[open]>summary::after{transform:rotate(45deg)}
.fs-t{flex:1 1 auto}
.fs-n{flex:0 0 auto;letter-spacing:.06em}
@supports selector(::details-content){
 :root{interpolate-size:allow-keywords}
 details.fold::details-content{block-size:0;overflow-y:clip;transition:block-size .3s ease,content-visibility .3s allow-discrete}
 details.fold[open]::details-content{block-size:auto}
}
html.fold-fixed details.fold>summary{display:none}

@keyframes lp-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---- pattern header.lockup ---- */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 var(--gut);height:68px;max-width:1440px;margin:0 auto}
.brand{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;text-decoration:none;line-height:1}
.br-s{font:var(--t-brand-s);letter-spacing:var(--brand-s-track,.08em)}
.br-l{font:var(--t-brand-l);letter-spacing:-.005em;margin-top:2px}
.nav{display:flex;align-items:center}
@media (min-width:900px){.hdr--nobrand{justify-content:flex-end}.hdr--nobrand .brand{display:none}}
.nav a{font:var(--t-nav);letter-spacing:var(--nav-track,.16em);text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 9px}
.nav a:hover{text-decoration:underline;text-underline-offset:6px}
.nav .hbook{display:none}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}
.hdr--over{position:absolute;top:0;left:0;right:0;z-index:5;color:var(--c-on-dark)}
.hdr--over :focus-visible{outline-color:var(--c-focus-dark,var(--c-accent))}
@media (min-width:1100px){
 .hdr{height:96px}
 .br-s{font-size:14px}
 .br-l{font-size:36px}
 .nav a{font-size:13px;padding:0 14px}
 .nav .hbook{display:inline-flex;border:1.5px solid var(--c-ink);margin-left:10px;padding:0 20px;min-height:46px}
 .nav .hbook:hover{background:var(--c-ink);color:var(--c-paper);text-decoration:none}
 .hdr--over .hbook{border-color:var(--c-on-dark)}
 .hdr--over .hbook:hover{background:var(--c-on-dark);color:var(--c-ink)}
}
@media (min-width:900px) and (max-height:940px){.hdr--over{height:76px}}
@media (max-width:380px){.nav a{font-size:11px;padding:0 6px;letter-spacing:.1em}}
@media print{.hdr{display:none}}

/* ---- pattern footer.frame ---- */
.ftr{background:var(--c-dark);color:var(--c-on-dark);padding:44px 0 36px;border-top:1px solid var(--c-rule-dark)}
.ftr-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:22px;align-items:start}
.ftr-logo{display:inline-flex;width:96px;min-height:44px}
.ftr-logo img{width:96px;height:auto;filter:invert(1)}
.ftr-a{font-style:normal;overflow-wrap:anywhere;font-size:16px;line-height:1.7;color:var(--c-on-dark-soft)}
.ftr a{text-decoration-color:var(--c-rule-dark)}
.ftr a:hover{color:var(--c-accent);text-decoration-color:var(--c-accent)}
.ftr-l{grid-column:1/3;display:flex;flex-wrap:wrap;column-gap:6px;border-top:1px solid var(--c-rule-dark);padding-top:8px}
.ftr-l a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px 0 0;font:var(--t-nav);letter-spacing:var(--nav-track,.16em);text-transform:uppercase;text-decoration:none}
@media (min-width:900px){
 .ftr{padding:64px 0 56px}
 .ftr-in{grid-template-columns:auto 1fr auto;column-gap:64px;align-items:center}
 .ftr-logo,.ftr-logo img{width:128px}
 .ftr-l{grid-column:3;flex-direction:column;border:0;padding:0}
 .ftr-l a{padding:0}
}
@media print{.ftr{display:none}}

/* ---- pattern hero.fullbleed ---- */
/* three rows: headline / photo / hours + buttons. The photo stops where the bottom row starts, so the hours and the
   buttons always sit on their own dark band and never on the food, at any screen size (Rasmus, 4 Nov 2026) */
.hero--full{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(200px,1fr) auto;color:var(--c-on-dark);background:rgb(var(--hero-shade));overflow:hidden}
/* phone: the photo starts under the headline (its top fades out of the dark band above it) */
.hero--full .hero__ph{position:relative;grid-row:2;grid-column:1}
.hero--full .hero__ph picture{position:absolute;inset:0}
.hero--full .hero__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero--full .hero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--hero-shade)) 0,rgba(var(--hero-shade),.5) 10%,rgba(var(--hero-shade),0) 22%,rgba(var(--hero-shade),0) 72%,rgb(var(--hero-shade)) 100%)}
.hero__top,.hero__bot{position:relative;z-index:2;grid-column:1;width:100%;max-width:1440px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);animation:lp-in .3s ease-out both}
.hero__top{grid-row:1;padding-top:76px;padding-bottom:4px}
.hero--full .k{margin-bottom:8px;color:var(--c-accent)}
.hero--full h1{font:400 clamp(27px,7.4vw,34px)/1.12 var(--f-hero,var(--f-display));letter-spacing:-.01em;text-wrap:balance;max-width:17em}
.hero--full .sub{margin-top:6px;font-size:16px;color:var(--hero-sub,var(--c-on-dark))}
.hero__bot{grid-row:3;padding-top:14px;padding-bottom:22px;display:grid;gap:12px}
.hero--full .today{font:600 15px/1.4 var(--f-display);letter-spacing:.04em}
.hero--full .week{font-size:16px;color:var(--hero-week,var(--c-on-dark))}
.hero__hrs .tl{min-height:32px;font-size:15px;color:var(--hero-sub,var(--c-on-dark))}
@media (min-width:900px){
 .hero--full{min-height:min(100svh,1200px);grid-template-rows:auto minmax(260px,1fr) auto}
 /* the photo reaches up behind the menu and the headline (they sit on the room, not the food) */
 .hero--full .hero__ph{grid-row:1 / 3}
 .hero--full .hero__ph img{object-position:50% 0}
 .hero__top{padding-top:104px}
 .hero--full h1{font-size:clamp(30px,2.9vw,46px);max-width:none}
 .hero--full .sub{font-size:19px}
 .hero__bot{grid-template-columns:1fr auto;align-items:end;padding-top:18px;padding-bottom:32px}
 .hero__bot .cta{flex-wrap:nowrap}
 .hero--full .hero__ph::after{background:linear-gradient(180deg,rgba(var(--hero-shade),.9) 0,rgba(var(--hero-shade),.66) 17%,rgba(var(--hero-shade),0) 30%,rgba(var(--hero-shade),0) 80%,rgb(var(--hero-shade)) 100%)}
}
@media (min-width:1100px){
 .hero__top{padding-top:112px}
 .hero--full .today{font-size:18px}
 .hero--full .week{font-size:18px}
 .hero--full .sub{font-size:21px}
}
/* very wide screens blow the photo up, so more of the room's detail lands behind the small top lines: a deeper top shade */
@media (min-width:1700px){
 .hero--full .hero__ph::after{background:linear-gradient(180deg,rgba(var(--hero-shade),.95) 0,rgba(var(--hero-shade),.9) 22%,rgba(var(--hero-shade),0) 38%,rgba(var(--hero-shade),0) 80%,rgb(var(--hero-shade)) 100%)}
}
/* short laptop screens (1280 x 720, 1366 x 768): a slimmer top band so the headline ends above the photo's subject */
@media (min-width:900px) and (max-height:940px){
 .hero__top{padding-top:74px}
 .hero--full .k{margin-bottom:4px}
 .hero--full h1{font-size:32px}
 .hero--full .sub{display:none}
 .hero__bot{padding-top:14px;padding-bottom:22px}
}
/* phones: the two buttons side by side, so the bottom band is shorter */
@media (max-width:480px){
 .hero--full .cta{flex-wrap:nowrap}
 .hero--full .btn{flex:1 1 0;padding:0 8px;font-size:12px;letter-spacing:.08em}
}
@media (max-width:480px) and (max-height:780px){
 .hero__top{padding-top:68px}
 .hero--full h1{font-size:clamp(25px,7vw,29px)}
 .hero--full .sub{display:none}
 .hero__hrs .tl{display:none}
 .hero__bot{gap:8px;padding-top:10px;padding-bottom:16px}
 .hero--full .btn{min-height:46px}
}

/* ---- pattern carte.ardoise ---- */
/* carte.ardoise: the chalk board, typed. Slate ground (--c-dark), chalk text (--c-on-dark), prices in the accent. */
.board{background:var(--c-dark) var(--board-texture,none);background-size:var(--board-texture-size,auto);color:var(--c-on-dark);padding:56px 0 64px}
.board-in{display:grid;gap:30px}
.board-hd h1,.board-hd h2{font:var(--t-h2);letter-spacing:-.01em;max-width:10em}
.board .k{color:var(--c-k-dark,var(--c-accent))}
.b-date{margin-top:12px;font:var(--t-date);letter-spacing:.06em;color:var(--c-accent)}
.b-note{margin-top:10px;max-width:27em;color:var(--c-on-dark-soft);text-wrap:pretty}
.board-hd .cta{margin-top:22px}
.board-hd .tl{margin-top:8px;color:var(--c-on-dark)}
.board-hd .tl:hover{color:var(--c-accent)}
.board-ph{position:relative;margin:10px auto 10px 10px;width:min(300px,calc(100% - 20px))}
.board-ph::before{content:"";position:absolute;inset:-9px;border:1px solid var(--c-rule-dark);pointer-events:none}
.board-ph img{width:100%}
.board-ph figcaption{margin-top:18px;font-size:14px;line-height:1.45;color:var(--c-on-dark-soft)}
/* the typed board: a ruled frame, double line like a menu card */
.board-list{position:relative;padding:26px 20px 14px;border:1px solid var(--c-on-dark-soft)}
.board-list::before{content:"";position:absolute;inset:5px;border:1px solid var(--c-rule-dark);pointer-events:none}
.b-lab{font:var(--t-k);letter-spacing:var(--k-track,.18em);text-transform:uppercase;color:var(--c-accent);margin:0 0 4px}
.board .dish{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline;padding:10px 0 11px;border-bottom:1px dashed var(--c-rule-dark);position:relative}
.board .dn{font:inherit;margin:0}
.board .dn b{display:block;font:var(--t-dish);font-size:23px;font-weight:400;color:var(--c-on-dark)}
.board .dn span{display:block;margin-top:2px;font-size:15px;line-height:1.4;color:var(--c-on-dark-soft)}
.board .gl{grid-column:1;margin:4px 0 0;font:italic 400 14.5px/1.4 var(--f-text);color:var(--c-on-dark-soft)}
.board .price{grid-row:1;grid-column:2;font:var(--t-price);font-size:24px;color:var(--c-accent);white-space:nowrap}
.board .dish--or{padding-top:24px}
.board .dish--or::before{content:attr(data-or);position:absolute;left:0;top:6px;font:italic 400 14px/1 var(--f-text);color:var(--c-on-dark-soft)}
.b-oy .dish{grid-template-columns:auto 1fr auto}
.b-oy .dn{display:flex;align-items:baseline;gap:12px;grid-column:1/3}
.b-oy .dn b{display:inline;font-size:25px;color:var(--c-accent)}
.b-oy .dn span{display:inline;margin:0;font:var(--t-dish);font-size:21px;color:var(--c-on-dark)}
.b-oy .price{grid-column:3}
.b-oy .gl{display:none}
.b-sec{margin-top:4px}
.b-oy+.b-sec{margin-top:22px;padding-top:4px}
.b-col--b{margin-top:6px;padding-top:24px;position:relative}
/* the chalk line between the starters and the rest, as on the board */
.b-col--b::before{content:"";position:absolute;top:0;left:20%;right:20%;height:3px;border-radius:2px;background:var(--c-on-dark);opacity:.85}
.board--page{padding-top:44px}
@media (min-width:760px){
 .board{padding:96px 0 104px}
 .board-in{grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:48px}
 .board-hd{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
 .board-hd .k,.board-hd h1,.board-hd h2,.b-date{grid-column:1/8}
 .b-note{grid-column:8/13;grid-row:2/4;align-self:end;margin:0}
 .board-hd .cta{grid-column:8/13;grid-row:4;margin-top:20px}
 .board-hd .tl{grid-column:1/8;grid-row:4;justify-self:start;margin-top:0;align-self:end}
 .board-ph{grid-column:1/13;margin:10px 10px 0;width:min(360px,calc(100% - 20px));align-self:start}
 .board-list{grid-column:1/13;padding:40px 36px 28px;display:grid;grid-template-columns:1fr 1fr;column-gap:44px}
 .b-col--b{margin-top:0;padding-top:0;padding-left:44px}
 .b-col--b::before{top:14px;bottom:14px;left:0;right:auto;width:3px;height:auto}
 .board .dish{padding:13px 0 14px}
 .board .dn b{font-size:26px}
 .board .price{font-size:26px}
 .b-oy .dn b{font-size:27px}
 .b-oy .dn span{font-size:22px}
 .board--page{padding-top:64px}
}
@media (min-width:1100px){
 .board-ph{grid-column:1/6;width:auto;max-width:480px;position:sticky;top:28px}
 .board-list{grid-column:6/13;padding:48px 44px 34px;column-gap:56px}
 .b-col--b{padding-left:56px}
 .board .dn b{font-size:27px}
 .board .price{font-size:28px}
}
@media (min-width:1700px){
 .board-in{max-width:1600px}
 .board .dn b{font-size:30px}
 .board .dn span{font-size:17px}
 .board .price{font-size:31px}
 .board .gl{font-size:16px}
 .board-list{padding:56px 56px 40px}
}

/* ---- pattern story.shapes ---- */
/* story.shapes: photos in shapes with a thin ring round each */
.shps{padding:56px 0 64px;background:var(--c-paper);color:var(--c-ink)}
.shps--paper2{background:var(--c-paper-2,var(--c-paper))}
.shps-in{display:grid;gap:38px}
.shps h1,.shps h2{font:var(--t-h2);letter-spacing:-.01em;max-width:9em}
.shps-tx p:not(.k):not(.shp-note){margin-top:14px;max-width:30em;text-wrap:pretty}
.shps-tx h2+p,.shps-tx h1+p{margin-top:20px}
.stats{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:30px;flex-wrap:wrap}
.stats li{display:flex;flex-direction:column;gap:4px}
.stats b{font:var(--t-stat);letter-spacing:-.01em;color:var(--c-ink)}
.stats span{font:var(--t-k);letter-spacing:.14em;text-transform:uppercase;color:var(--c-k)}
.shp-note{margin-top:22px;padding-top:14px;border-top:1px solid var(--c-rule);max-width:30em;font-size:15.5px;line-height:1.5;color:var(--c-soft);text-wrap:pretty}
.shps .cta{margin-top:24px}
.shps .btn{flex:0 1 auto}
/* a shape: the picture clipped, a thin ring 9px outside it */
.shp{--shp-r:50%;position:relative;margin:9px;width:calc(100% - 18px)}
.shp::before{content:"";position:absolute;inset:-9px;border:1px solid var(--c-ring);border-radius:var(--shp-r);pointer-events:none}
.shp img{width:100%;aspect-ratio:var(--ar);object-fit:cover;border-radius:var(--shp-r)}
.shp--arch{--shp-r:999px 999px 0 0}
.shp--pill{--shp-r:999px}
.shp--oval,.shp--round{--shp-r:50%}
.shps-pics{display:grid;grid-template-columns:repeat(12,1fr);column-gap:18px;row-gap:24px;align-items:start}
/* phone: bar */
.shps--bar .shp--1{grid-column:1/9;grid-row:1}
.shps--bar .shp--2{grid-column:7/13;grid-row:1;align-self:end;margin-top:60px;z-index:1}
.shps--bar .shp--3{grid-column:1/13;grid-row:2}
/* phone: rooms */
.shps--rooms .shp--1{grid-column:1/9;grid-row:1}
.shps--rooms .shp--2{grid-column:5/13;grid-row:2;margin-top:-52px}
@media (min-width:760px){
 .shps{padding:112px 0 120px}
 .shps-in{grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;gap:0 24px}
 .shps-tx{grid-column:1/6}
 .shps-pics{grid-column:6/13;column-gap:20px;row-gap:34px;padding-left:24px}
 .shps--rooms .shps-tx{grid-column:8/13;grid-row:1}
 .shps--rooms .shps-pics{grid-column:1/8;grid-row:1;padding-left:0;padding-right:24px}
 .shps--bar .shp--1{grid-column:1/8}
 .shps--bar .shp--2{grid-column:8/13;margin-top:0;align-self:end}
 .shps--bar .shp--3{grid-column:2/13;margin-top:-14px}
 .shps--rooms .shp--1{grid-column:1/7}
 .shps--rooms .shp--2{grid-column:7/13;grid-row:1;align-self:end;margin-top:0}
}
@media (min-width:760px) and (max-width:1099px){
 .shps-tx,.shps--rooms .shps-tx{grid-column:1/13;grid-row:auto}
 .shps-pics,.shps--rooms .shps-pics{grid-column:1/13;grid-row:auto;padding:0;margin-top:44px}
 .shps-in{align-items:start}
 .shps--rooms .shp--2{margin-top:-52px}
}
@media (min-width:1100px){
 .shps-tx{padding-right:24px}
 .stats b{font-size:76px}
}

/* ---- pattern gift.frame ---- */
.gift{padding:64px 0 72px;background:var(--c-paper);color:var(--c-ink)}
.gift-in{display:grid;gap:40px;align-items:center}
.gift-ph{position:relative;margin:9px;max-width:700px}
.gift-ph::before{content:"";position:absolute;inset:-9px;border:1px solid var(--c-ring);pointer-events:none}
.gift-ph img{width:100%}
.gift h2{font:var(--t-h2);letter-spacing:-.01em}
.gift-tx p:not(.k){margin-top:16px;max-width:28em;overflow-wrap:anywhere}
.gift-tx a:not(.btn){color:var(--c-tl,inherit)}
.gift .cta{margin-top:26px}
.gift .btn{flex:0 1 auto}
@media (min-width:960px){
 .gift{padding:104px 0 112px}
 .gift-in{grid-template-columns:repeat(12,1fr);column-gap:24px;gap:0 24px}
 .gift-ph{grid-column:1/8;margin:9px 9px 9px 9px}
 .gift-tx{grid-column:8/13;padding-left:16px}
}

/* ---- pattern visit.ring ---- */
.vring{background:var(--c-dark) var(--ground) var(--ground-pos)/cover;padding:40px 0}
.vcard{background:var(--c-card);color:var(--c-ink);position:relative;padding:34px 24px 30px;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.vcard::before{content:"";position:absolute;inset:7px;border:1px solid var(--c-ink);pointer-events:none}
.vcard::after{content:"";position:absolute;inset:11px;border:1px solid var(--c-rule);pointer-events:none}
.vc-logo{position:absolute;top:24px;right:24px;width:76px;height:auto;margin:0}
.vring h2{font:var(--t-h2);letter-spacing:-.01em}
.vc-l p:not(.k){margin-top:14px;max-width:28em;text-wrap:pretty}
.vc-l{padding-top:6px}
.bigtel{display:inline-flex;align-items:center;min-height:56px;margin-top:16px;font:var(--t-bigtel);letter-spacing:-.005em;color:var(--c-ink);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--c-accent);text-underline-offset:8px;white-space:nowrap}
.bigtel:hover{color:var(--c-tl-hover,var(--c-ink))}
.vc-l .cta{margin-top:22px}
.vc-r{margin-top:34px}
.vring .hrs{list-style:none;margin:0;padding:0;border-top:2px solid var(--c-ink)}
.vring .hrs li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--c-rule)}
.vring .hrs li span:last-child{white-space:nowrap;font-weight:600}
.vc-ak{margin-top:26px}
.vring address{font-style:normal;line-height:1.55}
.vring address a{color:var(--c-tl,inherit)}
.vc-r .cta{margin-top:22px}
.vring .btn{flex:0 1 auto}
@media (min-width:600px){.vring{padding:64px 0}.vcard{padding:48px 44px 42px}}
@media (min-width:960px){
 .vring{padding:112px 0;background-image:var(--ground-wide);background-position:var(--ground-pos-wide)}
 .vcard{max-width:1180px;margin:0 auto;padding:68px 68px 60px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
 .vcard::before{inset:10px}.vcard::after{inset:15px}
 .vc-l{grid-column:1/7}
 .vc-r{grid-column:8/13;margin-top:0;padding-top:4px}
 .vc-logo{position:static;width:120px;margin-bottom:20px}
 .bigtel{margin-top:24px;min-height:80px}
}
@media print{.vring{background:none}}

/* ---- pattern visitpage.ring ---- */
.vhead{padding-top:28px;padding-bottom:48px;display:grid;gap:34px}
.vhead h1{font:var(--t-h1);letter-spacing:-.015em}
.vhead .lede{margin-top:16px;max-width:30em}
.vaddr2{margin-top:6px;color:var(--c-soft)}
.vhead .today{margin-top:16px;font-weight:600}
.vhead .cta{margin-top:20px}
.vhead .btn{flex:0 1 auto}
.vfront{position:relative;margin:9px}
.vfront::before{content:"";position:absolute;inset:-9px;border:1px solid var(--c-ring);border-radius:999px;pointer-events:none}
.vfront img{width:100%;aspect-ratio:1.5/1;object-fit:cover;object-position:50% 40%;border-radius:999px}
.good{padding-top:64px;padding-bottom:72px}
.good h2{font:var(--t-h2);letter-spacing:-.01em}
.good dl{margin:28px 0 0;display:grid;gap:0;border-top:2px solid var(--c-ink)}
.good dl div{padding:16px 0;border-bottom:1px solid var(--c-rule)}
.good dt{font:var(--t-dish);font-size:24px;line-height:1.15}
.good dd{margin:6px 0 0;max-width:34em}
.good dd a{color:var(--c-tl,inherit)}
@media (min-width:960px){
 .vhead{grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding-top:48px;padding-bottom:96px}
 .vhead-l{grid-column:1/6}
 .vfront{grid-column:6/13;margin:9px 9px 9px 24px}
 .vfront img{aspect-ratio:1.7/1}
 .good{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding-top:120px;padding-bottom:136px}
 .good h2{grid-column:1/5}
 .good dl{grid-column:5/13;margin-top:0;grid-template-columns:1fr 1fr;column-gap:48px}
}

/* ---- pattern notfound.frame ---- */
.nf{padding:56px 0 88px}
.nf-in{display:grid;gap:28px;justify-items:start}
.nf-logo{width:140px;height:auto}
.nf h1{font:var(--t-h1);letter-spacing:-.015em;margin-bottom:16px}
.nf-t p:not(.k){margin-bottom:12px;max-width:28em}
.nf-l{margin-top:8px}
@media (min-width:900px){
 .nf{padding:96px 0 136px;min-height:60vh}
 .nf-in{grid-template-columns:auto 1fr;column-gap:72px;align-items:center}
}

/* ---- motion: calm ---- */
:root{--lp-reveal-dur-block:1s;--lp-reveal-dur-image:1.1s;--rv-dist:14px;--rv-stagger:.09s;--rv-ease:cubic-bezier(.22,.61,.36,1)}
/* ---- engine motion kit (Rasmus 3 Nov: the restaurangag.se feeling, blocks arrive as you scroll) ----
   .rv       a block fades up into place when it scrolls into view; style="--rv-i:n" staggers it inside its group
   .rv-img   a picture fades in and settles from a slight zoom
   .px       a photo band that moves slower than the page (parallax; CSS scroll-driven, no script)
   Hidden only when the script runs (html.js, set in <head>, taken back after 2.5 s if site.js never loads) and only when
   the visitor has not asked for less motion. Never put .rv on an element that has its own transform: wrap it. */
@media (prefers-reduced-motion:no-preference){
 html.js .rv{opacity:0;transform:translate3d(0,var(--rv-dist,14px),0);
  transition:opacity var(--lp-reveal-dur-block) var(--rv-ease),transform var(--lp-reveal-dur-block) var(--rv-ease);
  transition-delay:calc(var(--rv-i,0) * var(--rv-stagger,.08s))}
 html.js .rv.in{opacity:1;transform:none}
 html.js .rv-img img{opacity:0;transform:scale(1.04);
  transition:opacity var(--lp-reveal-dur-image) var(--rv-ease),transform calc(var(--lp-reveal-dur-image) * 1.6) var(--rv-ease)}
 html.js .rv-img.in img{opacity:1;transform:none}
 @supports (animation-timeline:view()){
  .px{overflow:clip}
  .px img{animation:lp-px linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 }
}
@keyframes lp-px{from{transform:translate3d(0,calc(var(--px,5%) * -1),0) scale(var(--px-scale,1.12))}to{transform:translate3d(0,var(--px,5%),0) scale(var(--px-scale,1.12))}}
@media print{html.js .rv,html.js .rv-img img{opacity:1!important;transform:none!important}}

/* ---- this site only (site/extra.css) ---- */
/* Restaurang Bergamott: geometry that belongs to this site's photos and its lockup only */
/* the first screen: the name as a lockup (a small line over the big name, like their logo) */
.hero--full .h1s{display:none;font:400 clamp(15px,4.4vw,19px)/1 var(--f-display);letter-spacing:.14em;margin-bottom:6px;color:var(--c-accent)}
.hero--full h1{font-size:clamp(50px,15.5vw,66px);line-height:.98;letter-spacing:-.012em;max-width:none}
.hero--full .sub{max-width:24em;text-wrap:pretty}
.hero--full .today,.vhead .today{font-family:var(--f-text);font-weight:600;letter-spacing:.02em}
@media (min-width:900px){
 .hero--full h1{font-size:clamp(72px,7.2vw,124px)}
 .hero--full .h1s{display:block;font-size:clamp(20px,1.8vw,30px);margin-bottom:10px}
 .hero--full .sub{font-size:clamp(18px,1.3vw,22px)}
}

/* inline links inside text get a 24 px tap height (lock L18) */
address a,.gift-tx p a,.good dd a,.ftr-a a,.shps-tx p a{display:inline-block;padding:3px 0}
@media (min-width:900px){.hero--full .sub{display:none}}
@media (max-width:380px){.nav a{padding:0 5px;letter-spacing:.08em;font-size:10.5px}.br-l{font-size:24px}}