/* Josefines gate 30 – farger og fonter hentet fra Squarespace-siden (okt. 2026) */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonter/instrument-serif.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonter/instrument-serif-italic.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonter/newsreader.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonter/newsreader-italic.woff2) format('woff2'); }

:root {
  --pergament: #e7e4da;
  --blekk: #0a0a0a;
  --rod: #831b1b;
  --rod-mork: #6a1414;
  --oliven: #576250;
  --oker: #a98a5b;
  --teal: #5b767a;
  --overskrift: 'Instrument Serif', 'Times New Roman', serif;
  --brodtekst: 'Newsreader', Georgia, serif;
  --kant: clamp(16px, 4vw, 48px);
  --bredde: 1240px;
  --topp-hoyde: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topp-hoyde) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pergament); color: var(--blekk); font: 400 1rem/1.5 var(--brodtekst); -webkit-tap-highlight-color: rgba(131, 27, 27, .15); }
a, button { touch-action: manipulation; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--overskrift); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; margin: 0 0 .5em; }
h1 { font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.6rem); }
h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); }
p { margin: 0 0 1em; }
.stor-tekst { font-size: clamp(1.1rem, 1rem + .4vw, 1.31rem); line-height: 1.5; }
.innenfor { max-width: var(--bredde); margin-inline: auto; padding-inline: var(--kant); }
.sentrert { text-align: center; }

.hopp { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--blekk); color: var(--pergament); padding: 8px 14px; }
.hopp:focus { left: 8px; }

/* ---------- Knapper ---------- */
.knapp { display: inline-block; font: 400 1rem/1 var(--brodtekst); text-decoration: none; padding: 1em 2.2em; border-radius: 999px; background: var(--rod); color: var(--pergament); border: 0; cursor: pointer; transition: background .2s, transform .2s; }
.knapp:hover { background: var(--rod-mork); }
.knapp--lys { background: var(--pergament); color: var(--blekk); }
.knapp--lys:hover { background: #fff; }
.knapp--rod { background: var(--rod); }

/* ---------- Toppfelt ---------- */
.topp { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topp-hoyde); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--kant); background: rgba(231, 228, 218, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .3s; }
.topp--scrollet { background: rgba(231, 228, 218, .82); }
.topp__venstre { display: flex; gap: 1.4rem; align-items: center; }
.topp__lenke, .nedtrekk__knapp { font: 400 1rem var(--brodtekst); color: var(--blekk); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.topp__lenke:hover, .nedtrekk__knapp:hover, .nedtrekk.apen .nedtrekk__knapp { text-decoration: underline; text-underline-offset: 4px; }
.logo { display: block; text-decoration: none; padding-block: 4px; }
.logo img { height: 56px; width: auto; }
.topp__hoyre { justify-self: end; display: flex; align-items: center; gap: 1.4rem; }
.topp__lenker { display: none; list-style: none; margin: 0; padding: 0; gap: 1.3rem; }
.topp__lenker a { text-decoration: none; padding: 6px 0; white-space: nowrap; }
.topp__lenker a:hover, .topp__lenker a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1180px) { .topp__lenker { display: flex; } }
.topp__hoyre .knapp { padding: .9em 1.6em; }

/* Meny-nedtrekk med diamant-pil (fra Squarespace custom.css) */
.nedtrekk { position: relative; }
.nedtrekk__liste { list-style: none; margin: 0; padding: 14px 0; position: absolute; top: calc(100% + 16px); left: -20px; min-width: 200px; background: var(--teal); color: var(--pergament); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.nedtrekk__liste::before { content: ""; position: absolute; width: 14px; height: 14px; background: var(--teal); left: 34px; top: -6px; transform: rotate(45deg); }
.nedtrekk__liste::after { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.nedtrekk.apen .nedtrekk__liste { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .nedtrekk:hover .nedtrekk__liste { opacity: 1; visibility: visible; transform: none; } }
.nedtrekk__liste a { display: block; padding: 8px 22px; text-decoration: none; font-size: 1.05rem; }
.nedtrekk__liste a:hover, .nedtrekk__liste a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

/* Mobil: større trykkflater og menyen som fullbreddepanel under toppfeltet */
@media (max-width: 640px) {
  :root { --topp-hoyde: 60px; }
  .topp__lenke { display: none; }
  .nedtrekk__knapp { min-height: 44px; padding: 0 12px 0 0; }
  .logo img { height: 44px; }
  .topp__hoyre .knapp { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; font-size: .9rem; }
  .nedtrekk__liste { position: fixed; top: var(--topp-hoyde); left: 0; right: 0; min-width: 0; padding: 12px 0 20px; box-shadow: 0 18px 30px rgba(10, 10, 10, .18); }
  .nedtrekk__liste::before { left: calc(var(--kant) + 14px); }
  .nedtrekk__liste a { padding: 12px var(--kant); font: 400 1.7rem/1.15 var(--overskrift); letter-spacing: -0.01em; }
}
@media (max-width: 359px) {
  .logo img { height: 38px; }
  .topp__hoyre .knapp { padding: 0 .9em; font-size: .85rem; }
}

/* ---------- Hero ---------- */
/* Høyden følger bredden (16:9) så bildet ikke beskjæres til en smal stripe på brede skjermer */
.hero { position: relative; min-height: min(max(440px, 56.25vw), 92vh); display: grid; align-items: center; color: var(--pergament); background: var(--blekk); overflow: hidden; }
.hero__bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero__under { margin: 1rem auto 0; max-width: 40rem; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
.hero__bildetekst { position: absolute; z-index: 1; left: var(--kant); bottom: 1.2rem; margin: 0; font-size: .9rem; font-style: italic; color: var(--pergament); }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .38); }
.hero__innhold { position: relative; z-index: 1; width: 100%; padding: calc(var(--topp-hoyde) + 2rem) var(--kant) 3rem; text-align: center; }
.hero__tittel { margin: 0; font-size: clamp(3rem, 1.6rem + 4.6vw, 6.4rem); }
.hero__logo img { width: min(360px, 56vw); height: auto; margin-inline: auto; filter: drop-shadow(0 2px 14px rgba(10, 10, 10, .35)); }
.hero--artikkel .hero__innhold { display: grid; gap: 1.5rem; justify-items: center; }
.hero__over { margin: 0 0 -1rem; font: 400 clamp(1.2rem, 1rem + .8vw, 1.7rem) var(--overskrift); letter-spacing: .02em; }
.hero--lav { min-height: min(max(340px, 36vw), 60vh); }
.hero--smal { min-height: min(max(260px, 26vw), 46vh); }
@supports (height: 1svh) {
  .hero { min-height: min(max(440px, 56.25vw), 92svh); }
  .hero--lav { min-height: min(max(340px, 36vw), 60svh); }
  .hero--smal { min-height: min(max(260px, 26vw), 46svh); }
}
@media (max-width: 640px) {
  .hero { min-height: 72svh; }
  .hero--lav { min-height: 46svh; }
  .hero--smal { min-height: 34svh; }
  .hero__innhold { padding-bottom: 2rem; }
}
.hero--tom::after { display: none; }

/* ---------- Seksjoner ---------- */
.seksjon { padding-block: clamp(3rem, 2rem + 4vw, 7rem); }
.seksjon--oliven { background: var(--oliven); color: var(--pergament); }
.seksjon--oker { background: var(--oker); }
.to-kol { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .to-kol { grid-template-columns: 1fr 1fr; }
  .to-kol--bred-venstre { grid-template-columns: 1.25fr 1fr; }
}
.tekst-kol { max-width: 34rem; }
.bilde-ramme img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.video-ramme video { width: 100%; aspect-ratio: 16 / 9; display: block; background: var(--blekk); }

/* Forside: fredet-tall med keystone-linjer */
.fakta { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; max-width: 46rem; }
.fakta > div { padding: .5rem 1.5rem; border-left: 1px solid var(--oker); }
.fakta > div:first-child { border-left: 0; padding-left: 0; }
.fakta strong { display: block; font: 400 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1.05 var(--overskrift); color: var(--oker); letter-spacing: -0.02em; margin-bottom: .6rem; }
.fakta span { font-size: .95rem; }
@media (max-width: 560px) {
  .fakta { grid-template-columns: 1fr; }
  .fakta > div { border-left: 0; border-top: 1px solid var(--oker); padding: 1.2rem 0; }
  .fakta > div:first-child { border-top: 0; }
}

.kart { position: relative; width: 100%; max-width: 760px; aspect-ratio: 16 / 10; margin: 2.5rem auto 0; background: #ddd; }
.kart iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(.95); }
.kart__adresse { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 1px; padding: 10px 14px; background: var(--pergament); font-size: .85rem; line-height: 1.35; box-shadow: 0 2px 10px rgba(10, 10, 10, .15); text-align: left; }
.kart__adresse strong { font: 400 1.15rem/1.1 var(--overskrift); }
.kart__adresse a { color: var(--rod); text-underline-offset: 3px; display: inline-block; padding-block: 12px 10px; }
@media (max-width: 560px) { .kart { aspect-ratio: 4 / 5; } }

/* ---------- Galleri og lysboks ---------- */
.galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(12px, 2vw, 28px); }
@media (max-width: 560px) { .galleri { grid-template-columns: 1fr 1fr; gap: 8px; } }
.galleri__lenke { display: block; overflow: hidden; background: #d8d4c7; }
.galleri__lenke img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.galleri__lenke:hover img { transform: scale(1.04); }
.lysboks { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(10, 10, 10, .94); }
.lysboks[open] { display: grid; place-items: center; }
.lysboks img { max-width: 92vw; max-height: 88vh; object-fit: contain; touch-action: pan-y pinch-zoom; }
.lysboks button { position: absolute; background: none; border: 0; color: var(--pergament); font: 400 3rem/1 var(--overskrift); cursor: pointer; padding: 16px 22px; min-width: 56px; min-height: 56px; }
@media (max-width: 640px) {
  .lysboks img { max-width: 100vw; }
  .lysboks__forrige, .lysboks__neste { top: auto; bottom: 12px; transform: none; }
}
.lysboks__lukk { top: 8px; right: 8px; }
.lysboks__forrige { left: 4px; top: 50%; transform: translateY(-50%); }
.lysboks__neste { right: 4px; top: 50%; transform: translateY(-50%); }

/* ---------- Historie ---------- */
.innhold-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; font-size: 1.15rem; }
.innhold-liste a { text-underline-offset: 4px; display: inline-block; padding-block: 10px; }
@media (min-width: 641px) { .innhold-liste { gap: .4rem; } .innhold-liste a { padding-block: 4px; } }
.kapittel { padding-block: clamp(3.5rem, 3rem + 3vw, 6rem); }
.kapittel + .kapittel { border-top: 1px solid rgba(10, 10, 10, .12); }
.kapittel h2 { text-align: center; }
.kapittel .knapp { margin-top: 1rem; }
@media (min-width: 860px) { .kapittel--speilet .bilde-ramme { order: -1; } }
.kilder { columns: 2 22rem; column-gap: 3rem; font-size: .95rem; }
.kilder h3 { font-size: 1.6rem; margin-top: 1.5rem; break-after: avoid; }
.kilder p { break-inside: avoid; margin-bottom: .8em; }
.kilder a { word-break: break-all; }

/* ---------- Artikkel (Huset, Lindboe …) ---------- */
.del { max-width: var(--bredde); margin-inline: auto; padding: clamp(3rem, 2.5rem + 3vw, 5.5rem) var(--kant) 0; display: grid; gap: 1.5rem 4rem; grid-template-columns: 1fr; }
.del__hode { display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap; }
.del__hode h2 { margin: 0; text-transform: uppercase; }
.del__nr { margin: 0; font-family: var(--overskrift); font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; }
.del__tekst { max-width: 40rem; }
.del__figur { margin: 0; }
.del__figur img { width: 100%; }
.del__figur figcaption { font-size: .9rem; font-style: italic; margin-top: .6rem; }
@media (min-width: 900px) {
  .del { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .del__hode { grid-column: 1 / -1; }
  .del__figur { position: sticky; top: calc(var(--topp-hoyde) + 24px); }
  .del--bilde-venstre .del__tekst { grid-column: 2; grid-row: 2; }
  .del--bilde-venstre .del__figur { grid-column: 1; grid-row: 2; }
  .del--bilde-venstre { grid-template-columns: 1fr 1.15fr; }
  .del--bilde-venstre .del__hode { justify-content: flex-end; }
}
@media (max-width: 899px) {
  /* Mobil: overskrift, så bilde, så tekst – ellers kommer bildet etter lange tekstblokker */
  .del__hode { order: -2; }
  .del__figur { order: -1; }
}
.tilbake { text-align: center; padding-block: 4rem 6rem; margin: 0; }

/* ---------- Kort om: tidslinje ---------- */
.tidslinje { list-style: none; margin: 3rem 0 0; padding: 0; position: relative; }
.tidslinje::before { content: ""; position: absolute; left: 7.4rem; top: .6rem; bottom: 0; width: 2px; background: var(--oker); }
.tidslinje li { display: grid; grid-template-columns: 6rem 2.8rem 1fr; gap: 0 1.5rem; padding-bottom: clamp(3rem, 6vw, 6rem); position: relative; }
.tidslinje__aar { font: 400 clamp(1.9rem, 1.5rem + 1vw, 2.6rem)/1 var(--overskrift); color: var(--oker); text-align: right; }
.tidslinje__prikk { width: 18px; height: 18px; border-radius: 50%; background: var(--oker); margin: .5rem 0 0 .45rem; position: relative; }
.tidslinje__innhold { display: grid; gap: 1.5rem 2.5rem; }
.tidslinje__innhold h3, .tidslinje__tittel { margin-bottom: .4em; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); }
@media (min-width: 860px) { .tidslinje__innhold { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .tidslinje::before { left: 8px; }
  .tidslinje li { grid-template-columns: 1fr; padding-left: 2.4rem; }
  .tidslinje__prikk { position: absolute; left: 0; top: 0; margin: .3rem 0 0; }
  .tidslinje__aar { text-align: left; margin-bottom: .8rem; }
}

/* ---------- Etasjekart (klikkbare plantegninger) ---------- */
.etasjekart { max-width: var(--bredde); margin: 2rem auto 0; padding-inline: var(--kant); display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; }
.etasjekart__topp { display: grid; gap: .9rem; }
.etasjekart__faner { display: flex; flex-wrap: wrap; gap: .5rem; }
.etasjekart__faner button { font: 400 1.05rem var(--brodtekst); padding: .7em 1.3em; min-height: 44px; border-radius: 999px; border: 1px solid var(--blekk); background: transparent; cursor: pointer; }
.etasjekart__faner button[aria-selected="true"] { background: var(--blekk); color: var(--pergament); }
.etasjekart__plan { position: relative; background: #fff; box-shadow: 0 1px 0 rgba(10, 10, 10, .08); }
.etasjekart__plan img { width: 100%; }
.etasjekart__plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rom-felt polygon { fill: url(#skravur-gronn); stroke: #3d7a3a; stroke-width: 2; stroke-opacity: .5; transition: fill .15s, stroke-opacity .15s; }
.rom-felt text { font: 400 34px var(--overskrift); fill: var(--blekk); text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 8px; }
a.rom-felt:hover polygon, a.rom-felt:focus polygon, .rom-felt.aktiv polygon { fill: rgba(61, 122, 58, .22); stroke-opacity: 1; stroke-width: 4; }
a.rom-felt:focus { outline: none; }
.rom-felt--uten-tekst polygon { fill: url(#skravur); stroke: var(--rod); stroke-opacity: .3; }
a.rom-felt--uten-tekst:hover polygon, a.rom-felt--uten-tekst:focus polygon, .rom-felt--uten-tekst.aktiv polygon { fill: rgba(131, 27, 27, .18); stroke: var(--rod); stroke-opacity: 1; }
.rom-felt--uten-tekst text { fill: rgba(10, 10, 10, .55); }
.etasjekart__kort { align-self: start; background: var(--pergament); border-top: 2px solid var(--oker); padding-top: 1rem; }
.etasjekart__kort img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1rem; }
.etasjekart__kort h3 { margin: 0 0 .3rem; }
.etasjekart__kort p { margin: 0 0 .4rem; }
.etasjekart__detaljer { font-weight: 600; }
.etasjekart__liste { font-size: .95rem; }
.etasjekart__liste p { margin: 0 0 .4rem; }
.etasjekart__liste strong { font-weight: 600; margin-right: .4rem; }
.etasjekart__liste a { text-underline-offset: 3px; display: inline-block; padding: 4px 2px; }
.etasjekart__forklaring { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; font-size: .95rem; }
.etasjekart__prove + .etasjekart__prove, .etasjekart__forklaring .etasjekart__prove:not(:first-child) { margin-left: 1.2rem; }
.etasjekart__prove.etasjekart__prove--gronn { border-color: rgba(61, 122, 58, .5); background: repeating-linear-gradient(45deg, rgba(61, 122, 58, .45) 0 2px, transparent 2px 7px); }
.etasjekart__prove { width: 28px; height: 18px; border: 1px solid rgba(131, 27, 27, .4); background: repeating-linear-gradient(45deg, rgba(131, 27, 27, .35) 0 2px, transparent 2px 7px); }
@media (min-width: 960px) {
  .etasjekart { grid-template-columns: 1fr 300px; }
  .etasjekart__topp, .etasjekart__liste { grid-column: 1 / -1; }
  .etasjekart__etasje { grid-column: 1; grid-row: 2; }
  .etasjekart__kort { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--topp-hoyde) + 24px); }
}
@media (max-width: 959px) { .etasjekart__kort { display: none; } }

/* ---------- Romside ---------- */
.rom-intro { align-items: start; }
.rom-plan { margin: 0; display: block; }
.rom-plan .galleri__lenke { background: #fff; }
.rom-plan img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.rom-plan:hover img { transform: none; }
.rom-plan figcaption { font-size: .9rem; font-style: italic; margin-top: .7rem; }
.rom-leilighet { font: 400 1.3rem/1.2 var(--overskrift); margin-top: -.3rem; }
.rom-detaljer { font-weight: 600; margin-bottom: .3rem; }
.rom-fotnote, .etasjekart__fotnote { font-size: .85rem; font-style: italic; opacity: .85; max-width: 34rem; }
.etasjekart__fotnote { grid-column: 1 / -1; margin: 0; }
.fakta-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.4rem 3rem; margin: 2rem 0 0; }
.fakta-liste div { border-top: 1px solid var(--oker); padding-top: .8rem; }
.fakta-liste dt { font: 400 1.35rem/1.2 var(--overskrift); color: var(--oker); margin-bottom: .3rem; }
.fakta-liste dd { margin: 0; }
.rom-nav { display: flex; justify-content: space-between; gap: 1rem; padding-block: 2rem 5rem; }
.rom-nav a { text-underline-offset: 4px; padding: 10px 0; }

/* ---------- Kontakt ---------- */
.side-contact main { background: var(--oker); }
.kontakt__firma { font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem)/1.1 var(--overskrift); margin: -.2rem 0 2.5rem; }
@media (max-width: 859px) { .kontakt-blokk + .kontakt-blokk { margin-top: 1rem; } }
.kontakt-blokk h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); }
.kontakt-blokk a:not(.knapp) { text-underline-offset: 4px; }

/* ---------- Bildegalleri-oversikt ---------- */
.kort-lenker { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.kort-lenke { text-decoration: none; }
.kort-lenke img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1rem; transition: opacity .2s; }
.kort-lenke:hover img { opacity: .85; }
.kort-lenke h2 { margin: 0; text-align: center; }

/* ---------- Bunn ---------- */
.bunn { background: var(--oker); padding: 2.5rem var(--kant) 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem 2rem; align-items: end; }
.bunn__navn, .bunn__epost { font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem)/1.1 var(--overskrift); letter-spacing: -0.02em; margin: 0; text-decoration: none; }
.bunn__epost:hover { text-decoration: underline; text-underline-offset: 6px; }
.bunn__liten { grid-column: 1 / -1; margin: 1.5rem 0 0; font-size: .85rem; }
@media (max-width: 640px) {
  .bunn { grid-template-columns: 1fr; }
  .bunn__epost { font-size: 1.5rem; display: inline-block; padding-block: 8px; }
  .bunn__liten { font-size: .9rem; line-height: 2; }
  .bunn__liten a { display: inline-block; padding-block: 6px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }