/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   ITF Free Font License + SIL Open Font License 1.1. Se assets/fonts/lisenser/
   ---------------------------------------------------------- */
@font-face{
  font-family:'Gambetta';
  src:url('../assets/fonts/gambetta-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gambetta';
  src:url('../assets/fonts/gambetta-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../assets/fonts/ibm-plex-mono-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --display:'Gambetta', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  /* Hvitt papir i alle tre palettene. Blekket er forskjellen, ikke bakgrunnen.
     Dempet tekst er samme blekk svekket med gjennomsiktighet, ikke en egen
     lysere hex. Grepet er målt på leaalstad.com, som demper med opacity 0,75
     på én mørk farge og holder hele siden i familie.
     Den statiske verdien står først som reserve for nettlesere uten color-mix. */
  --c-paper:#FFFFFF;
  --c-ink:#1B3F3C;
  --c-muted:#4a5f5b;
  --c-muted:color-mix(in srgb, var(--c-ink) 82%, #FFFFFF);
  --c-line:#E6E4DF;
  --c-fokus:#1B3F3C;

  --r:14px;
  --r-lg:20px;
  --r-pill:999px;

  --z-dekor:1; --z-sticky:100; --z-dokk:200;
  --z-overlay:300; --z-panel:400; --z-varsel:500;

  --maks:1240px;
  --luft:clamp(56px, 8vw, 112px);
}

[data-palett="dyp-plomme"]{
  --c-ink:#5C0935; --c-fokus:#5C0935;
  --c-muted:#7a3355;
  --c-muted:color-mix(in srgb, var(--c-ink) 82%, #FFFFFF);
  --c-line:#EDE2E7;
}
[data-palett="dyp-teal"]{
  --c-ink:#284849; --c-fokus:#284849;
  --c-muted:#4f6768;
  --c-muted:color-mix(in srgb, var(--c-ink) 82%, #FFFFFF);
  --c-line:#E2E6E5;
}

/* ---------- Grunn ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--display);
  font-weight:300;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
:focus-visible{
  outline:2px solid var(--c-fokus);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Topp og nav ----------
   Ordmerket sentrert med menyen under, samme oppsett som leaalstad.com
   (header 137px, gjennomsiktig, alt midtstilt). */
.topp{
  display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:20px clamp(20px,5vw,64px) 12px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.03em;
  max-width:var(--maks); margin:0 auto;
}
/* Ordmerket er sidens H1 etter at posisjoneringslinjen ble fjernet.
   Det er en overskrift semantisk, ikke visuelt: størrelsen kommer fra
   mono-skalaen i .topp, ikke fra nettleserens h1-standard. */
.ordmerke-tittel{font:inherit; font-weight:400; margin:0;}
.ordmerke{
  color:var(--c-ink); text-decoration:none; text-transform:uppercase;
  min-height:44px; display:inline-flex; align-items:center;
  letter-spacing:0.1em;
}
.nav{
  display:flex; gap:clamp(10px,2.5vw,26px);
  flex-wrap:wrap; justify-content:center;
}
.nav a{
  color:var(--c-muted); text-decoration:none; text-transform:uppercase;
  padding:12px 4px; min-height:44px; display:inline-flex; align-items:center;
}
.nav a:hover{color:var(--c-ink);}


/* ---------- Håndverksseksjonen ----------
   Var heroen. Flyttet ned under varene, der den selger oppdrag i stedet for
   å stå i veien for det Reidun primært vil vise. */
.handverk{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
  align-items:center;
}
.meta{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--c-muted); margin-bottom:18px;
}
.handverk h2{
  font-weight:400; font-size:clamp(34px,4.6vw,54px);
  line-height:1.04; letter-spacing:-0.01em; margin-bottom:20px;
}
.ingress{color:var(--c-muted); max-width:44ch; margin-bottom:28px;}
.knapp{
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em;
  text-transform:uppercase; text-decoration:none;
  background:var(--c-ink); color:var(--c-paper);
  padding:16px 30px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; min-height:44px;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.knapp:hover{transform:translateY(-2px);}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin-top:30px;}
.chips li{
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  padding:9px 16px; border:1px solid var(--c-line);
  border-radius:var(--r-pill); color:var(--c-muted);
}
/* Kryssfade mellom fire arbeider. Ren CSS, ingen JavaScript.
   Grunnbildet ligger i flyten og har alltid full dekkevne, så seksjonen
   viser et bilde uansett om animasjoner kjører eller ikke (byggeregel 5).
   De tre andre ligger oppå i stigende lag: hvert av dem toner inn mens
   det forrige fortsatt står på 100 %, og slukkes først når det neste
   dekker det helt. Da blir det aldri et gjennomsiktig glimt mellom to bilder. */
.arbeidsfoto{position:relative;}
.arbeidsfoto__bilde{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-lg); display:block;
}
.arbeidsfoto__bilde:not(.arbeidsfoto__bilde--grunn){
  position:absolute; inset:0; height:100%; opacity:0;
  animation:foto-fade 24s linear infinite;
}
.arbeidsfoto__bilde:nth-of-type(2){z-index:2; animation-delay:0s;}
.arbeidsfoto__bilde:nth-of-type(3){z-index:3; animation-delay:6s;}
.arbeidsfoto__bilde:nth-of-type(4){z-index:4; animation-delay:12s;}

@keyframes foto-fade{
  0%    {opacity:0;}
  21%   {opacity:0;}
  25%   {opacity:1;}   /* tonet inn over grunnbildet */
  46%   {opacity:1;}   /* står til neste har dekket det */
  50%   {opacity:1;}
  50.01%{opacity:0;}   /* slukkes skjult under neste lag */
  100%  {opacity:0;}
}
/* Det øverste laget må tone ut i stedet for å slukke, ellers blir
   overgangen tilbake til grunnbildet et hardt klipp. */
.arbeidsfoto__bilde:nth-of-type(4){animation-name:foto-fade-siste;}
@keyframes foto-fade-siste{
  0%    {opacity:0;}
  21%   {opacity:0;}
  25%   {opacity:1;}
  46%   {opacity:1;}
  50%   {opacity:0;}
  100%  {opacity:0;}
}

/* ---------- Seksjoner ---------- */
.seksjon{
  max-width:var(--maks); margin:0 auto;
  padding:var(--luft) clamp(20px,5vw,64px);
  border-top:1px solid var(--c-line);
}
.seksjon__tittel{
  font-weight:400; font-size:clamp(28px,4vw,40px);
  line-height:1.1; margin-bottom:14px;
}
.seksjon__ingress{
  color:var(--c-muted); max-width:56ch; margin-bottom:34px;
}
/* Første seksjon har ingen strek over seg og lite luft, slik at varene
   begynner høyt på siden. Målt forbilde: leaalstad.com, første bilde 138px nede. */
.seksjon--forst{border-top:0; padding-top:0;}
/* Midtstilt for å følge den midtstilte headeren over. En venstrestilt tittel
   rett under et sentrert ordmerke leser som to ulike rutenett. */
.seksjon--forst .seksjon__tittel{
  font-size:clamp(22px,2.4vw,28px); margin-bottom:14px; text-align:center;
}
.seksjon--forst .seksjon__ingress{
  text-align:center; margin-left:auto; margin-right:auto; margin-bottom:34px;
}

/* ---------- Til salgs ----------
   Kortene ligger i en flex-kolonne uten marginer per kort, slik at et kort
   Reidun legger til i panelet får nøyaktig samme avstand som resten
   (gotcha 1 i admin-skillen: aldri inline marginer på listeobjekter). */
.varer{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:clamp(24px,3vw,40px);
}
.vare{display:flex; flex-direction:column;}
.vare__bilde{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--r-lg); margin-bottom:14px;
}
.vare__bilde img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.vare__status{
  position:absolute; top:12px; left:12px; z-index:var(--z-dekor);
  font-family:var(--mono); font-size:10px; letter-spacing:0.07em;
  text-transform:uppercase; padding:7px 13px; border-radius:var(--r-pill);
  background:var(--c-paper); color:var(--c-muted);
}
.vare h3{
  font-weight:400; font-size:21px; line-height:1.2; margin-bottom:6px;
}
.vare__tekst{color:var(--c-muted); font-size:16px; line-height:1.5;}
.vare__pris{
  font-family:var(--mono); font-size:14px; letter-spacing:0.02em;
  margin-top:10px;
}
.vare__pris:empty{display:none;}
.vare__mer{
  font-family:var(--mono); font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--c-muted); margin-top:12px;
  text-decoration:underline; text-underline-offset:4px;
}

/* Bildegalleri inne i «Les mer»-modalen. Panelet dekorerer hver .galleri med
   «+ Bilde» og en Bytt/Slett-meny av seg selv, så Reidun kan legge til flere
   bilder per møbel uten at vi rører markupen. */
.galleri{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:12px; margin-top:20px;
}
.galleri img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r); display:block;
}

/* Solgt. Settes av varer.js ut fra teksten i statusfeltet, men merket i seg
   selv står i HTML-en, så opplysningen er riktig også uten JavaScript. */
.vare--solgt .vare__bilde img{filter:saturate(0.25); opacity:0.6;}
.vare--solgt .vare__status{background:var(--c-ink); color:var(--c-paper);}
.vare--solgt .vare__pris{text-decoration:line-through; color:var(--c-muted);}
.vare--solgt .vare__mer{display:none;}
.spalter{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:28px; color:var(--c-muted); max-width:80ch;
}
/* To per rad på desktop. Tekstene er utvidet, og fire smale spalter ville
   gitt ordelt brødtekst. */
.tjenester{
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px,1fr));
  gap:clamp(32px,4vw,56px);
}
/* Bildet har en egen boks med fast forhold, slik at utsnittet er stabilt og
   Reidun kan dra det på plass i panelet (gotcha 10 i admin-skillen). */
.tjeneste__bilde{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg); display:block; margin-bottom:18px;
}
.tjenester h3{
  font-weight:400; font-style:italic; font-size:24px; margin-bottom:10px;
}
.tjenester p{color:var(--c-muted); font-size:17px;}
.tjeneste__ord{
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  text-transform:uppercase; margin-bottom:12px;
}
/* Utdypningen står som en dempet ettersetning, skilt med en tynn strek i
   stedet for enda et avsnitt i samme vekt. */
.tjeneste__nb{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--c-line);
  font-size:16px;
}

/* ---------- Rullende galleri ---------- */
.seksjon--bred{max-width:none; padding-left:0; padding-right:0;}
.seksjon--bred .seksjon__tittel,
.seksjon--bred .under-galleri{
  max-width:var(--maks); margin-left:auto; margin-right:auto;
  padding:0 clamp(20px,5vw,64px);
}
.marquee{
  display:flex; gap:24px; overflow:hidden;
  padding:8px 0 20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__spor{
  display:flex; gap:24px; list-style:none; flex:0 0 auto;
}
/* Animasjonen starter først når galleri.js har laget duplikatsporet.
   Uten JavaScript blir dette en rad man kan dra sidelengs, se .marquee under. */
.marquee[data-rull] .marquee__spor{animation:rull 78s linear infinite;}
.marquee:not([data-rull]){overflow-x:auto; mask-image:none; -webkit-mask-image:none;}
.marquee[data-pauset] .marquee__spor{animation-play-state:paused;}
@keyframes rull{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-100% - 24px));}
}
.kort{flex:0 0 clamp(230px, 26vw, 310px);}
.kort img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-lg); display:block;
}
.kort__tekst{
  font-size:15px; line-height:1.5; color:var(--c-muted);
  margin-top:12px;
}
.under-galleri{margin-top:22px;}
.under-galleri a{
  color:var(--c-ink); text-underline-offset:4px;
  min-height:44px; display:inline-flex; align-items:center;
}

/* ---------- Kontakt ---------- */
.kontakt{
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:clamp(28px,5vw,64px); align-items:start;
}
.skjema{display:grid; gap:18px; max-width:520px;}
.skjema label{
  display:grid; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--c-muted);
}
.skjema input, .skjema textarea{
  font-family:var(--display); font-size:17px; color:var(--c-ink);
  background:transparent; border:1px solid var(--c-line);
  border-radius:var(--r); padding:14px 16px; min-height:52px;
  width:100%;
}
.skjema input:focus-visible, .skjema textarea:focus-visible{border-color:var(--c-ink);}
.skjema button{border:none; cursor:pointer; justify-self:start;}
.skjema__svar{
  font-family:var(--mono); font-size:12px; line-height:1.6;
  color:var(--c-muted); min-height:1.4em;
}
.kontakt__info{color:var(--c-muted); display:grid; gap:14px;}
.kontakt__info a{
  color:var(--c-ink); min-height:44px; display:inline-flex; align-items:center;
}

/* ---------- Bunn ---------- */
.bunn{
  max-width:var(--maks); margin:0 auto;
  padding:var(--luft) clamp(20px,5vw,64px) 96px;
  border-top:1px solid var(--c-line);
  font-family:var(--mono); font-size:12px; letter-spacing:0.02em;
  color:var(--c-muted); display:grid; gap:10px;
}
.bunn a{
  color:var(--c-muted); text-underline-offset:3px;
  min-height:44px; display:inline-flex; align-items:center;
}
.bunn a:hover{color:var(--c-ink);}
.bunn__rad{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;}

/* ---------- Design Lab ---------- */
.lab{
  position:fixed; bottom:20px; left:20px; z-index:var(--z-panel);
  font-family:var(--mono); font-size:12px;
}
.lab__bryter{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:12px 18px; cursor:pointer;
  border-radius:var(--r-pill);
  border:0.5px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.35);
  -webkit-backdrop-filter:blur(30px) saturate(210%);
  backdrop-filter:blur(30px) saturate(210%);
  box-shadow:0 8px 32px rgba(0,0,0,0.04),
             inset 0 1.5px 0.5px rgba(255,255,255,0.65),
             inset 0 -1px 2px rgba(0,0,0,0.05);
  color:var(--c-ink); font-family:var(--mono); font-size:12px;
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.lab__bryter:hover{transform:translateY(-1px) scale(1.02);}
.lab__panel{
  margin-top:10px; padding:16px; border-radius:24px;
  border:0.5px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.35);
  -webkit-backdrop-filter:blur(30px) saturate(210%);
  backdrop-filter:blur(30px) saturate(210%);
  box-shadow:0 8px 32px rgba(0,0,0,0.04),
             inset 0 1.5px 0.5px rgba(255,255,255,0.65);
  display:grid; gap:14px;
}
/* Må stå etter .lab__panel: lik spesifisitet, så kilderekkefølgen avgjør. */
.lab__panel[hidden]{display:none;}
.lab__rad{display:flex; align-items:center; gap:10px;}
.lab__valg{display:flex; gap:6px;}
.lab__valg button{
  min-width:44px; min-height:44px; cursor:pointer;
  border-radius:var(--r-pill); border:1px solid var(--c-line);
  background:transparent; color:var(--c-ink);
  font-family:var(--mono); font-size:12px;
  transition:background 0.4s cubic-bezier(0.16,1,0.3,1),
             color 0.4s cubic-bezier(0.16,1,0.3,1);
}
.lab__valg button[aria-pressed="true"]{
  background:var(--c-ink); color:var(--c-paper); border-color:var(--c-ink);
}
.lab__kreditt{
  display:flex; gap:5px; align-items:center;
  font-size:10px; color:var(--c-muted);
  border-top:1px solid var(--c-line); padding-top:10px;
}
.lab__kreditt a{
  color:var(--c-ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:3px;
}
.lab__spark{width:11px; height:11px; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);}
.lab__kreditt a:hover .lab__spark{transform:rotate(90deg) scale(1.25);}

/* ---------- Responsiv ---------- */
@media (max-width:820px){
  .handverk{grid-template-columns:1fr; gap:26px;}
  .arbeidsfoto{order:-1;}
  .arbeidsfoto__bilde{aspect-ratio:3/2;}
  .kontakt{grid-template-columns:1fr;}
  .bunn{padding-bottom:110px;}
}

/* Mobil komprimerer i stedet for å stable (byggeregel 2).
   Tjenestene går til to per rad med etikett og én nøkkelordlinje, den
   utdypende setningen ligger igjen på desktop. Luften strammes inn: en
   telefonskjerm trenger ikke 112px mellom hver seksjon. */
@media (max-width:620px){
  :root{--luft:44px;}

  /* Toppen strammes så varene begynner høyt også på telefon. Header, H1-linje
     og seksjonstittel skal til sammen koste under en tredjedel av skjermen. */
  /* Bare ytre luft strammes. Trykkflatene beholder sine 44px (byggeregel 8). */
  .topp{padding:4px 20px 2px; gap:2px;}
  .ordmerke{font-size:12px;}
  .nav{gap:13px; width:100%;}
  .nav a{font-size:10px; padding:0;}
  .seksjon--forst .seksjon__tittel{font-size:20px; margin-bottom:16px;}

  /* Mobil komprimerer: etikett og nøkkelordlinje, den utdypende teksten
     ligger igjen på desktop (byggeregel 2). */
  .tjenester{grid-template-columns:1fr 1fr; gap:20px 18px;}
  .tjenester h3{font-size:18px; margin-bottom:6px;}
  .tjeneste__mer, .tjeneste__nb{display:none;}
  .tjeneste__bilde{aspect-ratio:1/1; margin-bottom:12px;}

  /* Salgsobjektene komprimeres til to per rad. Kortteksten faller bort,
     tittel og pris er det man trenger for å avgjøre om man vil trykke. */
  .varer{grid-template-columns:1fr 1fr; gap:22px 14px;}
  .vare h3{font-size:16px; line-height:1.25;}
  .vare__tekst{display:none;}
  .vare__pris{font-size:13px; margin-top:6px;}
  .vare__mer{font-size:10px; margin-top:8px;}
  .vare__status{font-size:9px; padding:5px 10px; top:8px; left:8px;}
  .seksjon__ingress{margin-bottom:24px;}

  .spalter{gap:16px;}
  .seksjon__tittel{margin-bottom:22px;}
  .chips{margin-top:22px;}
  .kort__tekst{font-size:14px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .marquee{overflow-x:auto; mask-image:none; -webkit-mask-image:none;}
  .marquee__spor{animation:none;}
  .marquee__spor[aria-hidden="true"]{display:none;}
  /* Fjern kryssfaden helt. Grunnbildet står igjen, aldri en tom flate. */
  .arbeidsfoto__bilde:not(.arbeidsfoto__bilde--grunn){display:none;}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}