/* Kafé Kanelbollen. Plomme, dus lavendel og varm beige, med kanel som aksent. */
@font-face{font-family:"Young Serif";font-weight:400;font-display:swap;src:url(/fonter/young-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:400;font-display:swap;src:url(/fonter/albert-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:600;font-display:swap;src:url(/fonter/albert-sans-latin-600-normal.woff2) format("woff2")}
:root{
  --bakgrunn:#FBF7F2;
  --tekst:#3A2C40;
  --tekst-2:#6B5E70;
  --hoved:#62385C;         /* plomme */
  --lavendel:#6C5F86;
  --hoved-tekst:#FFFFFF;
  --aksent:#A65E36;       /* kanel */
  --flate:#EEEAF2;
  --linje:#E3D9E3;
  --smor:#F1E4D3;         /* varm beige */
  --krem:#F6EBDD;         /* tekst på lavendel */
  --tittel:"Young Serif",Georgia,serif;
  --brod:"Albert Sans",Arial,sans-serif;
  --radius:18px;
  --maks:1160px;
  --felt-kant:#C4B6C8;
  --felt-radius:12px;
  --bunn-bakgrunn:#3A2C40;
  --topp-bakgrunn:rgba(251,247,242,.96);
}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:400;letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:400}
h3{font-size:1.35rem;font-weight:400}
.merke span{font-family:var(--tittel);font-size:1.6rem;color:var(--hoved)}
.bunn .merke span{color:#fff}
.ingress{font-size:clamp(1.1rem,1.6vw,1.25rem);color:var(--tekst-2);max-width:34em}
.knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.knapp-strek{color:var(--hoved)}
.knapp-strek:hover{background:var(--flate)}

/* Helt: overskrift, bilde og stempel */
.helt{padding:clamp(40px,7vw,88px) 0 clamp(48px,7vw,88px)}
.helt-rad{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
.helt h1{color:var(--hoved);max-width:11ch}
.helt .ingress{margin-top:22px}
.helt-bilde{position:relative}
.helt-bilde img,.helt-bilde .plassholder{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--radius);min-height:0}
.stempel{position:absolute;left:-28px;bottom:-28px;margin:0;width:132px;height:132px;border-radius:50%;background:var(--hoved);color:#fff;display:grid;place-items:center;text-align:center;font-family:var(--tittel);font-size:1.02rem;line-height:1.15;transform:rotate(-8deg);box-shadow:0 0 0 6px var(--bakgrunn),0 0 0 8px var(--hoved)}
.stempel b{font-weight:400;color:var(--krem)}

/* Fra ovnen: lavendelbånd med fliskant */
.ovn-band{background:var(--lavendel);color:#fff;position:relative;padding:40px 0}
.ovn-band::before,.ovn-band::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 5px 5px,var(--bakgrunn) 4px,transparent 4.5px) 0 0/20px 10px repeat-x}
.ovn-band::before{top:-5px}
.ovn-band::after{bottom:-5px}
.ovn-rad{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.ovn-band h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.ovn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ovn li{display:grid;gap:2px;border-left:2px solid rgba(255,255,255,.35);padding-left:14px}
.ovn time{font-family:var(--tittel);font-size:1.6rem;color:var(--krem);font-variant-numeric:tabular-nums}
.ovn span{color:rgba(255,255,255,.88);font-size:.98rem;line-height:1.35}

/* Seksjoner */
.seksjon{padding:clamp(56px,8vw,96px) 0}
.seksjon-tett{padding-top:clamp(28px,4vw,48px)}
.seksjon-flate{background:var(--smor)}
.seksjon-tittel{margin-bottom:28px;color:var(--hoved)}
.to-kol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.to-kol h2{color:var(--hoved);margin-bottom:14px}
.fliser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.flis{text-decoration:none;display:grid;gap:8px;align-content:start}
.flis img,.flis .plassholder{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);min-height:0}
.flis h3{margin-top:8px;color:var(--hoved)}
.flis p{margin:0;color:var(--tekst-2)}
.flis:hover h3{text-decoration:underline;text-decoration-color:var(--aksent);text-underline-offset:4px}
.kake-bilde img,.kake-bilde .plassholder{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;max-width:460px;margin:0 auto;border:8px solid #fff;box-shadow:0 0 0 2px var(--hoved)}
.finn .adresse,.finn-info .adresse{display:flex;gap:10px;align-items:center;font-size:1.15rem;font-weight:600;margin:12px 0 18px}
.adresse svg{width:22px;height:22px;color:var(--aksent)}
.tider-tittel{color:var(--hoved);margin:0 0 12px;font-size:1.4rem}
.finn-info .tider-tittel{margin-top:32px}

/* Undersider */
.side-topp{padding:clamp(44px,6vw,80px) 0 0}
.side-topp h1{color:var(--hoved)}
.side-topp .ingress{margin-top:16px}

/* Meny med prikkete linje fram til prisen */
.meny-rad{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.menygruppe{margin-bottom:44px;scroll-margin-top:90px}
.menygruppe h2{font-size:1.7rem;color:var(--hoved);padding-bottom:10px;border-bottom:2px solid var(--hoved);margin-bottom:6px}
.menyliste{list-style:none;margin:0;padding:0}
.menyliste li{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid var(--linje)}
.vare{display:grid;flex:1;min-width:0}
.vare small{color:var(--tekst-2);font-size:.92rem}
.pris{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.meny-side{position:sticky;top:96px}
.meny-side img,.meny-side .plassholder{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);min-height:0}
.merk{margin-top:16px;color:var(--tekst-2)}

.kakeliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kakeliste li{display:grid;gap:2px;padding:20px;border-radius:var(--radius);background:#fff;border:1px solid var(--linje)}
.kakeliste b{font-family:var(--tittel);font-weight:400;font-size:1.25rem;color:var(--hoved)}
.kakeliste span{color:var(--tekst-2)}
.kakeliste em{font-style:normal;font-weight:600;margin-top:8px}
#bestill{scroll-margin-top:72px}
#bestill .to-kol{align-items:start}
.skjema-bilde{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);margin-top:20px;min-height:0}
.skjema{background:#fff;padding:clamp(20px,3vw,32px);border-radius:var(--radius);border:1px solid var(--linje)}

.tekst p{max-width:36em}
.haker{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.haker li{display:flex;gap:10px;align-items:center}
.haker svg{width:22px;height:22px;color:var(--aksent);flex:none}
.to-kol>img,.to-kol>.plassholder,.finn-info img,.finn-info .plassholder{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);min-height:0}
.kontakt-linjer{display:grid;gap:8px;margin-top:24px}
.kontakt-linjer a{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:600}
.kontakt-linjer svg{width:20px;height:20px;color:var(--aksent)}

@media (max-width:980px){
  .fliser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .helt-rad,.to-kol,.meny-rad{grid-template-columns:1fr}
  .ovn-rad{grid-template-columns:1fr}
  .ovn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kakeliste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meny-side{position:static}
}
@media (max-width:640px){
  .fliser{gap:14px}
  .flis h3{font-size:1.15rem}
  .flis p{font-size:.92rem}
  .stempel{width:104px;height:104px;font-size:.85rem;left:auto;right:12px;bottom:-24px}
  .kakeliste{grid-template-columns:1fr}
  .helt .knapp{flex:1 1 auto}
}

.finn-info img.bilde-staende{aspect-ratio:4/5;max-height:560px}
.kake-bilde img{object-position:68% 50%}
.helt-bilde img{object-position:50% 50%}