/* Plotteriet – samlet fra prototypen v11 av wp/bygg.py. Ikke rediger her, rediger i v11 og bygg på nytt. */

/* ===== fra v11/style.css ===== */
/* v4 – Leken blekk. Én sterk farge (signalgul), svart blekk, store bokstaver. */

:root {
  --y: #ffd31a;
  --ink: #111;
  --paper: #fffdf4;
  --gutter: clamp(16px, 4vw, 56px);
  --fat: "Bagel Fat One", "Arial Rounded MT Bold", sans-serif;
  --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--y); color: var(--ink); font: 400 18px/1.5 var(--sans); }
::selection { background: var(--ink); color: var(--y); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--y); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 12px; }

.giant { font: 400 clamp(4.2rem, 15.5vw, 15rem)/.84 var(--fat); letter-spacing: -.02em; margin: 0; text-transform: uppercase; }
.big { font: 400 clamp(2.6rem, 7vw, 6rem)/.92 var(--fat); letter-spacing: -.01em; margin: 0 0 .35em; text-wrap: balance; }
h3 { font: 800 1.45rem/1.1 var(--sans); margin: 0 0 .3em; letter-spacing: -.01em; }

/* ── Topp ─────────────────────────────────── */
.topp { display: flex; align-items: center; gap: 24px; padding: 18px var(--gutter); }
.logo { font: 400 1.8rem/1 var(--fat); text-decoration: none; margin: 0; }
.hovedmeny { display: flex; gap: 8px; margin-left: auto; }
.hovedmeny a { font-weight: 600; text-decoration: none; padding: 8px 16px; border-radius: 999px; border: 2px solid transparent; transition: border-color .2s; }
.hovedmeny a:hover { border-color: var(--ink); }
.kurv { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--y); }

/* ── Helten ───────────────────────────────── */
.hero { position: relative; padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(48px, 6vw, 80px); }
.hero .giant { display: grid; font-size: clamp(3.2rem, 8.7vw, 10rem); position: relative; z-index: 1; max-width: calc(100% - clamp(240px, 31vw, 470px)); }
.hero .giant span { white-space: nowrap; }

.stage {
  position: absolute; z-index: 2;
  right: var(--gutter); top: clamp(16px, 4vw, 48px);
  width: clamp(240px, 31vw, 470px);
}
.paper {
  position: relative; margin: 0;
  background: var(--paper); padding: 6% 6% 9%;
  border-radius: 6px;
  transform: rotate(2.5deg);
  box-shadow: 0 24px 40px -18px rgba(60, 40, 0, .55), 0 2px 0 rgba(0, 0, 0, .08);
}
.paper canvas { display: block; width: 100%; aspect-ratio: 826 / 1100; }
.paper figcaption, .snap figcaption {
  position: absolute; font: 400 1.3rem/1 var(--fat); background: var(--ink); color: var(--y);
  padding: 8px 14px 10px; border-radius: 999px;
}
.paper figcaption { right: -14px; bottom: 18px; transform: rotate(-6deg); }
.pen { position: absolute; left: 0; top: 0; width: 34px; transform-origin: 50% 100%; pointer-events: none; transition: opacity .4s; }
.hero.is-done .pen { opacity: 0; }

.snap {
  position: absolute; z-index: 3; margin: 0;
  left: -16%; top: 6%;
  width: 36%;
  background: #fff; padding: 8px 8px 34px; border-radius: 4px;
  transform: rotate(-9deg);
  box-shadow: 0 18px 30px -14px rgba(60, 40, 0, .6);
}
.snap img { aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.snap figcaption { left: 50%; bottom: -16px; transform: translateX(-50%) rotate(4deg); }
.swoosh { display: none; position: absolute; z-index: 3; left: -22%; top: 44%; width: 22%; color: var(--ink); transform: rotate(-8deg); }

.sticker {
  position: absolute; z-index: 4; right: -10px; top: -14px; margin: 0;
  width: 108px; height: 108px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--ink); color: var(--y); font: 400 1.15rem/.95 var(--fat);
  transform: rotate(12deg);
  animation: wobble 4s var(--pop) infinite;
}
@keyframes wobble { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(4deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .sticker { animation: none; } }

.hero__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end;
  margin-top: clamp(28px, 4vw, 48px); max-width: calc(100% - clamp(240px, 31vw, 470px) - 24px);
}
.lead { margin: 0; font-size: 1.2rem; font-weight: 600; max-width: 34em; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pris { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.pris b { font: 400 1.6rem/1 var(--fat); margin-right: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 30px; border-radius: 999px; border: 3px solid var(--ink);
  background: var(--ink); color: var(--y);
  font: 400 1.35rem/1 var(--fat); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--pop), background .2s, color .2s;
}
.btn:hover { transform: rotate(-3deg) scale(1.05); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--y); }
.btn--yellow { background: var(--y); color: var(--ink); border-color: var(--y); }
.btn--xl { font-size: clamp(1.5rem, 3vw, 2.2rem); padding: 24px 40px; }

/* ── Ticker ───────────────────────────────── */
.ticker { background: var(--ink); color: var(--y); overflow: hidden; padding: 16px 0; transform: rotate(-1.5deg) scaleX(1.03); margin: 20px 0; }
.ticker__run { display: flex; gap: 28px; width: max-content; font: 400 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--fat); text-transform: uppercase; animation: run 28s linear infinite; }
.ticker__run .dot { width: .32em; height: .32em; border-radius: 50%; background: currentColor; align-self: center; flex: none; }
@keyframes run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__run { animation: none; } }

/* ── Steg ─────────────────────────────────── */
.steps { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(60px, 8vw, 100px); }
.stairs { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.stairs li { position: relative; background: var(--paper); border-radius: 22px; padding: 28px 28px 30px 96px; border: 3px solid var(--ink); }
.stairs li:nth-child(1) { grid-column: 1 / 7; }
.stairs li:nth-child(2) { grid-column: 4 / 10; transform: rotate(-1.2deg); }
.stairs li:nth-child(3) { grid-column: 7 / 13; background: var(--ink); color: var(--y); }
.stairs b { position: absolute; left: 22px; top: 18px; font: 400 4rem/1 var(--fat); }
.stairs p { margin: 0; font-weight: 400; max-width: 36ch; }

/* ── Vegg ─────────────────────────────────── */
.wall { padding: clamp(60px, 8vw, 110px) var(--gutter); }
.pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 6vw, 72px); }
.pill { font: 400 clamp(1.2rem, 2.2vw, 1.7rem)/1 var(--fat); text-decoration: none; padding: 16px 26px; border-radius: 999px; background: var(--ink); color: var(--y); transition: transform .35s var(--pop); }
.pill:hover { transform: translateY(-4px) rotate(-2deg); }
.pill--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }

/* ── Bryllup (svart flate, gul tekst) ─────── */
.wedding { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; background: var(--ink); color: var(--y); padding: clamp(72px, 9vw, 130px) var(--gutter); border-radius: 40px; margin: 40px clamp(8px, 2vw, 24px); }
.wedding p { max-width: 40ch; }
.wedding ::selection { background: var(--y); color: var(--ink); }
.wedding__img { border-radius: 20px; transform: rotate(2deg); }
.packs { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 10px; }
.packs li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; padding: 14px 22px; border: 2px solid var(--y); border-radius: 999px; }
.packs b { font: 400 1.4rem/1 var(--fat); }
.packs em { font: 400 1.4rem/1 var(--fat); font-style: normal; }

/* ── Jul ──────────────────────────────────── */
.xmas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(80px, 10vw, 140px) var(--gutter); }
.xmas p { max-width: 42ch; font-weight: 400; }
.burst {
  display: grid; place-items: center; align-content: center; margin: 0;
  width: clamp(170px, 20vw, 250px); aspect-ratio: 1; color: var(--y); text-align: center;
  position: relative; isolation: isolate; background: none;
  transform: rotate(-10deg);
}
.burst__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: var(--ink); }
.burst span { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.burst b { font: 400 clamp(2rem, 3.6vw, 2.8rem)/1 var(--fat); }
.xmas__card { width: clamp(150px, 18vw, 240px); border-radius: 12px; transform: rotate(6deg); box-shadow: 0 20px 30px -18px rgba(60, 40, 0, .6); }

/* ── Om ───────────────────────────────────── */
.about { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(60px, 8vw, 110px) var(--gutter); }
.about__pic { position: relative; width: clamp(220px, 28vw, 380px); }
.about__pic img { aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%; border: 4px solid var(--ink); filter: grayscale(1) contrast(1.1); }
.bubble { position: absolute; right: -24px; top: -8px; margin: 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 24px 24px 24px 4px; padding: 12px 18px; font: 400 1.1rem/1.1 var(--fat); transform: rotate(5deg); }
.about p { max-width: 44ch; font-size: 1.1rem; }
.sig { width: 220px; margin-top: 20px; mix-blend-mode: multiply; }

.slutt { background: var(--ink); color: var(--y); padding: clamp(80px, 10vw, 140px) var(--gutter); display: grid; justify-items: start; gap: 32px; }
.giant--close { font-size: clamp(5rem, 22vw, 18rem); }

.bunn { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 28px var(--gutter) 40px; background: var(--ink); color: var(--y); border-top: 2px solid var(--y); font-weight: 600; }
.bunn p { margin: 0; }
.bunn nav { display: flex; gap: 20px; margin-left: auto; }

@media (max-width: 860px) {
  .hovedmeny { display: none; }
  .kurv { margin-left: auto; }
  .stage { position: relative; right: auto; top: auto; width: 70%; margin: 20px 4% 0 auto; }
  .hero .giant { font-size: 13.4vw; max-width: none; }
  .snap { left: -38%; top: 30%; width: 50%; }
  .swoosh { display: none; }
  .sticker { width: 84px; height: 84px; font-size: .95rem; right: -6px; }
  .hero__foot { grid-template-columns: 1fr; max-width: none; }
  .stairs { grid-template-columns: 1fr; }
  .stairs li { grid-column: auto !important; padding-left: 84px; }
  .wedding, .xmas, .about { grid-template-columns: 1fr; }
  .packs li { grid-template-columns: 1fr auto; }
  .packs span { grid-row: 2; font-size: .9rem; }
  .bubble { right: -8px; }
  .bunn nav { margin-left: 0; }
}


/* ===== fra v11/galleri.css ===== */
/* v9 – Salongveggen. Tynne svarte rammer med skrå skygge, hengt på snor.
   Rammene lever: de svaier rolig, svinger når du scroller, og retter seg opp når du holder over dem.
   Ingen priser på veggen: den viser bestillinger, ikke varer. */

.wall__lead { max-width: 46ch; margin: -.6em 0 28px; font-size: 1.15rem; font-weight: 600; }

.salon {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 96px) clamp(20px, 2.6vw, 40px);
  align-items: center;
  padding: clamp(40px, 4vw, 64px) 0 0;
}
.work { --tilt: 0deg; position: relative; margin: 0; padding-top: 34px; }
.work--frank { grid-column: 1 / 5; grid-row: 1; --tilt: -2.4deg; }
.work--hus { grid-column: 5 / 8; grid-row: 1 / 3; --tilt: 1.6deg; }
.work--portrett { grid-column: 9 / 12; grid-row: 1; align-self: end; --tilt: -1.2deg; }
.work--golden { grid-column: 2 / 5; grid-row: 2; align-self: start; --tilt: 2deg; }
.work--kafe { grid-column: 10 / 13; grid-row: 2; align-self: start; --tilt: -1.8deg; }

/* Svingelementet bærer spiker, snor og ramme; dreiepunktet er spikeren */
.swing {
  display: block; position: relative;
  transform: rotate(var(--tilt));
  transform-origin: 50% -34px;
  transition: transform .7s var(--pop);
  will-change: transform;
}
.salon.is-live .swing { transition: none; } /* JS styrer svingningen */
.work:hover .swing, .work:focus-within .swing { transform: rotate(0deg); }

.frame {
  display: block; position: relative; text-decoration: none;
  padding: 5px;
  background: var(--ink);
  /* lyset kommer skrått ovenfra til venstre */
  box-shadow: 18px 24px 26px -10px rgba(120, 60, 60, .38), 4px 6px 6px -2px rgba(120, 60, 60, .25);
  transition: box-shadow .5s cubic-bezier(.2, .8, .2, 1);
}
.work:hover .frame { box-shadow: 26px 34px 34px -12px rgba(120, 60, 60, .42), 4px 6px 6px -2px rgba(120, 60, 60, .2); }
.mat { display: block; background: #fff; padding: 9%; box-shadow: inset 0 0 0 1px rgba(31, 36, 24, .06); }
.mat img { width: 100%; } /* bildene vises i sine egne farger */

.nail {
  display: block; position: absolute; left: 50%; top: -40px; width: 11px; height: 11px; margin-left: -5.5px; z-index: 2;
  border-radius: 50%; background: var(--ink); box-shadow: 2px 3px 3px rgba(120, 60, 60, .4);
}
.cord { display: block; position: absolute; left: 14%; right: 14%; top: -34px; width: 72%; height: 36px; color: var(--ink); overflow: visible; }
.sticker-price, .spot { display: none; }

/* Museumsskilt: blekk med krem skrift */
.plaque {
  display: grid; gap: 1px; width: max-content; max-width: 100%; margin-top: 22px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px 12px; border-radius: 14px;
  font-size: .82rem; line-height: 1.35;
}
.plaque b { font: 400 1.15rem/1.1 var(--fat); }
.plaque ::selection { background: var(--paper); color: var(--ink); }
.plaque__price { display: none; }
.note { margin: clamp(56px, 7vw, 96px) 0 0; font-weight: 600; max-width: 52ch; }

@media (max-width: 860px) {
  .salon { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 64px 16px; }
  .work--frank { grid-column: 1 / 6; grid-row: auto; }
  .work--hus { grid-column: 2 / 7; grid-row: auto; }
  .work--portrett { grid-column: 1 / 5; grid-row: auto; }
  .work--kafe { grid-column: 3 / 7; grid-row: auto; }
  .work--golden { grid-column: 1 / 7; grid-row: auto; }
}

/* ── v10: fotoet bak tegningen ─────────────── */
.mat { position: relative; overflow: hidden; }
.photo {
  position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: cover;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.65, 0, .35, 1);
}
.peek-line {
  position: absolute; top: 9%; bottom: 9%; left: 9%; width: 2px; margin-left: -1px;
  background: var(--ink); opacity: 0;
  transition: left .8s cubic-bezier(.65, 0, .35, 1), opacity .3s;
}
.work.show-photo .photo { clip-path: inset(0 0 0 0); }
.work.show-photo .peek-line { animation: sweep .8s cubic-bezier(.65, 0, .35, 1) forwards; }
@media (hover: hover) {
  .work.has-photo:hover .photo { clip-path: inset(0 0 0 0); }
  .work.has-photo:hover .peek-line { animation: sweep .8s cubic-bezier(.65, 0, .35, 1) forwards; }
}
.peek {
  justify-self: start; margin-top: 8px;
  font: 600 .8rem/1 var(--sans); color: var(--ink); background: var(--paper);
  border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
}
.peek[aria-pressed="true"] { background: var(--rose); }
/* pennestreken farer over bildet og forsvinner */
@keyframes sweep {
  0% { left: 9%; opacity: 1; }
  88% { left: 91%; opacity: 1; }
  100% { left: 91%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .photo, .peek-line { transition: none; animation: none !important; }
}


/* ===== fra v11/farger.css ===== */
/* v9 – Paletten: støvrosa #d8a2a2, lys rosa #ffdcdc, krem #fff9d6, salvie #8ea66b.
   Blekket (#1f2418) er en dyp salvie-sort, valgt for minst 5.4:1 mot alle fire. */

:root {
  --y: #ffdcdc;       /* grunnfargen: veggen */
  --ink: #1f2418;
  --paper: #fff9d6;
  --rose: #d8a2a2;
  --sage: #8ea66b;
}

/* Flatene som var svarte i v4 får palettens to sterkeste farger, med blekk som tekst */
.ticker, .stairs li:nth-child(3) { background: var(--rose); color: var(--ink); }
.wedding, .slutt { background: var(--sage); color: var(--ink); }
.wedding .packs li { border-color: currentColor; }
.wedding ::selection, .slutt ::selection { background: var(--ink); color: var(--paper); }
.wedding .btn--yellow, .slutt .btn--yellow { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.stairs li { background: var(--paper); }
.bubble { background: var(--paper); }
.paper { background: #fff; } /* tegnearket i helten er hvitt, som ekte papir */

/* Pennen i helten */
.pen__body { fill: var(--ink); }
.pen__band { fill: var(--rose); }


/* ===== fra v11/sider.css ===== */
/* v11 – Hele nettstedet. Felles meny, filmen og byggeklossene undersidene bruker.
   Bygger på style.css (v4-grunnen), galleri.css (rammene) og farger.css (paletten). */

/* ── Meny ─────────────────────────────────── */
.hovedmeny a[aria-current="page"] { border-color: var(--ink); }
.menu-btn {
  display: none; margin-left: auto;
  font: 400 1.15rem/1 var(--fat); color: var(--ink); background: transparent;
  border: 3px solid var(--ink); border-radius: 999px; padding: 11px 18px; cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--y); }

@media (max-width: 860px) {
  .topp { position: relative; z-index: 20; }
  .menu-btn { display: inline-flex; }
  .kurv { margin-left: 0; }
  .topp.is-open .hovedmeny {
    display: grid; position: absolute; left: 12px; right: 12px; top: calc(100% - 4px);
    gap: 4px; padding: 14px; margin: 0;
    background: var(--ink); border-radius: 28px;
    box-shadow: 18px 24px 26px -10px rgba(120, 60, 60, .38);
  }
  .topp.is-open .hovedmeny a { color: var(--y); font: 400 1.9rem/1 var(--fat); padding: 14px 16px; border: 0; }
  .topp.is-open .hovedmeny a[aria-current="page"] { background: var(--rose); color: var(--ink); }
}

/* ── Filmen på forsiden ───────────────────── */
.film {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center;
  padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(80px, 10vw, 140px);
}
.film__wall { position: relative; margin: 0 auto; padding-top: 34px; width: min(100%, 400px); transform: rotate(-1.5deg); }
.film__frame {
  position: relative; display: block; padding: 5px; background: var(--ink);
  box-shadow: 18px 24px 26px -10px rgba(120, 60, 60, .38), 4px 6px 6px -2px rgba(120, 60, 60, .25);
}
.film__frame video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); }
.film__sound {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font: 400 1.1rem/1 var(--fat); color: var(--y); background: var(--ink);
  border: 3px solid var(--y); border-radius: 999px; padding: 13px 20px; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--pop);
}
.film__sound:hover { transform: translateX(-50%) rotate(-3deg) scale(1.05); }
.film__sound[aria-pressed="true"] { background: var(--y); color: var(--ink); border-color: var(--ink); }
.film__text p { max-width: 40ch; font-size: 1.15rem; font-weight: 600; margin: 0 0 28px; }

.xmas__more, .about__more { margin: 18px 0 0; font-weight: 800; }
.xmas__more a, .about__more a { text-underline-offset: 4px; text-decoration-thickness: 2px; }
.xmas__link { display: block; border-radius: 12px; }
.xmas__link img { transition: transform .4s var(--pop); }
.xmas__link:hover img { transform: rotate(1deg) scale(1.04); }

/* ── Sidetopp på undersidene ──────────────── */
.phero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: clamp(16px, 3vw, 40px) var(--gutter) clamp(56px, 7vw, 100px);
}
.phero__title { font: 400 clamp(3.2rem, 9vw, 8.4rem)/.86 var(--fat); letter-spacing: -.02em; margin: 0 0 .3em; text-wrap: balance; }
.phero .lead { font-size: 1.2rem; max-width: 38ch; }
.phero__aside { position: relative; }
.phero--solo { grid-template-columns: minmax(0, 1fr); }
.phero--solo .phero__title { max-width: 14ch; }

.facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; }
.facts li { padding: 11px 18px; border-radius: 999px; border: 3px solid var(--ink); font-weight: 600; background: var(--paper); }
.facts li b { font: 400 1.25rem/1 var(--fat); margin-right: 4px; }
.facts li.facts--ink { background: var(--ink); color: var(--paper); }

/* Et enkelt bilde i ramme (samme ramme som veggen, uten snor) */
.framed { position: relative; margin: 0; padding: 5px; background: var(--ink); box-shadow: 18px 24px 26px -10px rgba(120, 60, 60, .38), 4px 6px 6px -2px rgba(120, 60, 60, .25); }
.framed > img { width: 100%; }
.framed--mat > span { display: block; background: #fff; padding: 8%; }
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(2deg); }

.section { padding: clamp(56px, 8vw, 110px) var(--gutter); }
.section__lead { max-width: 46ch; font-size: 1.15rem; font-weight: 600; margin: -.4em 0 clamp(32px, 4vw, 52px); }
.band { margin: 40px clamp(8px, 2vw, 24px); border-radius: 40px; padding: clamp(64px, 8vw, 120px) var(--gutter); }
.band--sage { background: var(--sage); }
.band--rose { background: var(--rose); }
.band--paper { background: var(--paper); }
.band--ink { background: var(--ink); color: var(--y); }
.band--ink ::selection { background: var(--y); color: var(--ink); }

.textlink { font-weight: 800; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ── Motiver i butikken: annenhver side ───── */
.motifs { display: grid; gap: clamp(72px, 9vw, 130px); }
.motif { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.motif:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.motif:nth-child(even) .motif__pic { order: 2; }
.motif__pic { max-width: 440px; justify-self: center; width: 100%; }
.motif h3 { font: 400 clamp(2rem, 4.4vw, 3.4rem)/.95 var(--fat); margin: 0 0 .35em; }
.motif p { max-width: 40ch; margin: 0 0 20px; }
.motif .pris { font-weight: 600; margin: 0 0 22px; }

/* ── Prisliste med prikklinje ─────────────── */
.pricelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; max-width: 760px; }
.pricelist li { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 0; }
.pricelist li::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: 3px dotted currentColor; opacity: .55; transform: translateY(-6px); }
.pricelist b { grid-column: 1; font: 400 clamp(1.4rem, 2.6vw, 1.9rem)/1 var(--fat); }
.pricelist em { grid-column: 3; font-style: normal; font: 400 clamp(1.2rem, 2.2vw, 1.6rem)/1 var(--fat); white-space: nowrap; }
.pricelist span { grid-column: 1 / -1; grid-row: 2; font-size: .98rem; max-width: 52ch; }
.smallprint { max-width: 58ch; font-size: .98rem; margin: 26px 0 0; }

/* Bryllupspakkene: rader som på forsiden, men med innhold */
.packs--full li { grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto; border-radius: 28px; padding: 18px 26px; align-items: center; }
.packs--full span { font-size: 1rem; }
.packs--full .btn { font-size: 1.05rem; padding: 12px 20px; border-width: 2px; }

/* ── Skjema ───────────────────────────────── */
.formwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.formwrap__intro p { max-width: 38ch; }
.form { display: grid; gap: 20px; background: var(--paper); border: 3px solid var(--ink); border-radius: 32px; padding: clamp(22px, 3.4vw, 44px); }
.form .rad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label, .field .label { font-weight: 800; }
.field small, .opt { font-weight: 400; font-size: .92rem; }
.form input[type="text"], .form input[type="email"], .form input[type="number"], .form input[type="date"], .form select, .form textarea {
  width: 100%; font: 400 1.05rem/1.4 var(--sans); color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 14px; padding: 13px 15px; min-height: 52px;
}
.form textarea { min-height: 160px; resize: vertical; }
.form select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2418' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center / 14px; padding-right: 44px; }
.form :is(input, select, textarea):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: #8f1d1d; box-shadow: inset 0 0 0 1px #8f1d1d; }
.err { margin: 0; color: #8f1d1d; font-weight: 600; font-size: .95rem; }
.form .btn { justify-self: start; }
.form__note { margin: 0; font-size: .95rem; }

.drop {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center;
  border: 2px dashed var(--ink); border-radius: 18px; padding: 16px; background: #fff; cursor: pointer;
}
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.drop.is-over { background: var(--y); }
.drop__thumb { width: 72px; aspect-ratio: 1; border-radius: 12px; background: var(--y); display: grid; place-items: center; overflow: hidden; font: 400 2rem/1 var(--fat); }
.drop__thumb img { width: 100%; height: 100%; object-fit: cover; }
.drop__text b { display: block; }

.thanks { display: grid; gap: 14px; justify-items: start; background: var(--sage); border-radius: 32px; padding: clamp(28px, 4vw, 48px); }
.thanks h3 { font: 400 clamp(2rem, 4vw, 3rem)/1 var(--fat); margin: 0; }
.thanks p { margin: 0; max-width: 42ch; }

/* Frist-stjerne, gjenbrukt fra forsiden */
.burst--small { width: clamp(130px, 14vw, 170px); }
.burst--small b { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* ── Om meg ───────────────────────────────── */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story p { max-width: 46ch; font-size: 1.15rem; margin: 0 0 1em; }
.story p:first-child { font-size: 1.35rem; font-weight: 600; }
.story__pic { position: sticky; top: 24px; }
.story__pic img { border-radius: 28px; border: 4px solid var(--ink); filter: grayscale(1) contrast(1.1); }

/* ── Gavekort ─────────────────────────────── */
.amounts { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; }
.amounts legend { font-weight: 800; padding: 0; margin-bottom: 10px; }
.amounts label { position: relative; }
.amounts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.amounts span { display: inline-flex; font: 400 1.35rem/1 var(--fat); padding: 14px 20px; border-radius: 999px; border: 3px solid var(--ink); background: #fff; transition: transform .3s var(--pop); }
.amounts input:checked + span { background: var(--ink); color: var(--y); transform: rotate(-3deg); }
.amounts input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 16px; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ink); }
.check b { display: block; }

.giftcard {
  position: relative; aspect-ratio: 148 / 105; background: #fff; border-radius: 6px; padding: 7% 8%;
  box-shadow: 18px 24px 26px -10px rgba(120, 60, 60, .38), 0 2px 0 rgba(0, 0, 0, .06);
  transform: rotate(-2.5deg); display: grid; align-content: space-between;
  font-family: var(--sans);
}
.giftcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.giftcard__logo { font: 400 clamp(1rem, 2vw, 1.4rem)/1 var(--fat); }
.giftcard__kind { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.giftcard__sum { font: 400 clamp(3rem, 8vw, 6rem)/.9 var(--fat); margin: 0; }
.giftcard__msg { margin: 0; font-size: clamp(.9rem, 1.6vw, 1.05rem); min-height: 2.8em; overflow-wrap: anywhere; }
.giftcard__foot { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; font-weight: 600; }
.giftcard__code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .08em; }

@media (max-width: 860px) {
  .film, .phero, .formwrap, .motif, .motif:nth-child(even), .story { grid-template-columns: minmax(0, 1fr); }
  .motif:nth-child(even) .motif__pic { order: 0; }
  .film__wall { width: min(78%, 360px); }
  .form .rad { grid-template-columns: minmax(0, 1fr); }
  .packs--full li { grid-template-columns: minmax(0, 1fr) auto; }
  .packs--full span { grid-row: 2; grid-column: 1 / -1; }
  .packs--full .btn { grid-row: 1; grid-column: 2; }
  .story__pic { position: static; max-width: 420px; }
  .pricelist li { gap: 10px; }
}

.actions--spaced { margin-top: 28px; }
.xmas__gift { width: clamp(150px, 18vw, 240px); }
.xmas__gift img { display: block; }
.order-aside { display: grid; justify-items: center; }
.order-aside .framed { width: min(100%, 360px); }
.order-aside .burst { position: absolute; left: -4%; bottom: -8%; }

/* Tre rammer på rad i bryllup og galleri, forskjøvet som på veggen */
.salon--3 .work--a { grid-column: 1 / 7; grid-row: 1; --tilt: -1.6deg; }
.salon--3 .work--b { grid-column: 8 / 11; grid-row: 1; align-self: end; --tilt: 1.8deg; }
.salon--3 .work--c { grid-column: 4 / 8; grid-row: 2; --tilt: -1deg; }

/* Bilder fra verkstedet som løse fotografier */
.snaps { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); align-items: flex-start; }
.snapshot { margin: 0; background: #fff; padding: 12px 12px 18px; width: min(100%, 380px); box-shadow: 18px 24px 26px -10px rgba(120, 60, 60, .38); }
.snapshot:nth-child(2) { margin-top: clamp(24px, 6vw, 80px); width: min(100%, 320px); }
.snapshot figcaption { font-weight: 600; font-size: .95rem; padding: 12px 4px 0; }

/* Gavekort */
.gift { margin-top: clamp(24px, 4vw, 48px); }
.gift__preview { position: sticky; top: 24px; padding-top: 12px; }
.gift__note { font-weight: 600; margin: 32px 0 0; }
.gift__total { margin: 0; font-weight: 600; }
.gift__total b { font: 400 1.6rem/1 var(--fat); margin-left: 6px; }

@media (max-width: 860px) {
  .salon--3 .work--a { grid-column: 1 / 7; grid-row: auto; }
  .salon--3 .work--b { grid-column: 1 / 5; grid-row: auto; }
  .salon--3 .work--c { grid-column: 2 / 7; grid-row: auto; }
  .gift__preview { position: static; }
}

/* Skjulte elementer skal være skjult selv om komponenten har egen display */
[hidden] { display: none !important; }
.bunn nav { flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 860px) { .drop { grid-template-columns: 56px minmax(0, 1fr); } .drop__thumb { width: 56px; } }
.story__pic.about__pic { width: min(100%, 440px); }
@media (max-width: 860px) { .story__pic { position: relative; width: min(78%, 360px); } }
/* Stillbildet fra 3D-kortet har samme rosa bakgrunn som siden, så det trenger verken ramme eller skygge */
.xmas__card--3d { border-radius: 0; box-shadow: none; transform: rotate(4deg); width: clamp(180px, 22vw, 300px); }