/* ==========================================================================
   HAVN & BORD — DEMOSIDE (håndkodet etter Cazworks' egne standarder)
   --------------------------------------------------------------------------
   Alt du trenger å endre for å reskinne siden ligger i :root under.
   Bygget etter samme oppskrift som malen «warm-serif», men i en mørk,
   restaurant-aktig fargesetting.
   ========================================================================== */

:root{

  /* ---------- 1. FARGER --------------------------------------------------- */

  --farge-bakgrunn:      #100F0C;   /* hovedbakgrunn, nesten svart og varm    */
  --farge-bakgrunn-2:    #17150F;   /* mørkt sandbånd, annenhver seksjon      */
  --farge-overskrift:    #F4EEE0;   /* overskrifter, varm hvit                */
  --farge-tekst:         #B7B2A2;   /* brødtekst, dempet varm grå             */
  --farge-dempet:        #8D8877;   /* etiketter, småtekst                    */
  --farge-strek:         rgba(244,238,224,.12);  /* alle tynne streker        */
  --farge-dyp:           #0A0906;   /* de mørkeste flatene: hero-overlegg     */
  --farge-dyp-tekst:     #F4EEE0;
  --farge-aksent:        #C7A165;   /* gull/tan: knapper, lenker, priser      */

  --farge-aksent-lys:    #DDBE8C;   /* aksenten i hover og lyse detaljer      */
  --farge-aksent-tekst:  #1B160E;   /* mørk tekst oppå den gyldne knappen     */
  --farge-aksent-svak:   rgba(199,161,101,.14);

  /* Bildetone: alle bilder farges likt så de ulike bildene ser ut som én
     sammenhengende serie. */
  --bilde-tone:          #0A0906;
  --bilde-styrke:        .3;    /* 0 = ingen tone, 1 = full tone            */


  /* ---------- 2. SKRIFT ---------------------------------------------------
     Bytter du skrift her, må du også bytte <link>-linja i index.html.
     ----------------------------------------------------------------------- */

  --skrift-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --skrift-tekst:   "Inter", "Helvetica Neue", Arial, sans-serif;

  --display-vekt:     500;
  --display-sperring: -.015em;

  /* ---------- 3. MÅL OG FART ---------------------------------------------- */

  --maks-bredde:      1280px;
  --sidemarg:         20px;
  --seksjon-luft:     64px;
  --seksjon-luft-stor:104px;
  --hjorne:           2px;

  --fart-rask:  .18s;
  --fart-rolig: .7s;
  --kurve: cubic-bezier(.2,.7,.3,1);

  /* Karusellen i galleriet: se DESIGN.md, avsnittet "Karusell" for
     forklaring og tommelfingerregel for --karusell-fart. */
  --karusell-luft: 14px;   /* avstand mellom bildene i karusellen        */
  --karusell-fart: 52s;    /* tid for én runde av det ene bildesettet    */
}

/* ==========================================================================
   GRUNNMUR
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg,video{display:block;max-width:100%;height:auto;}
button,input,textarea,select{font:inherit;color:inherit;}

body{
  background:var(--farge-bakgrunn);
  color:var(--farge-tekst);
  font-family:var(--skrift-tekst);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}

:focus-visible{outline:3px solid var(--farge-aksent);outline-offset:3px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--farge-aksent);color:var(--farge-aksent-tekst);
  padding:12px 18px;font-size:14px;
}
.skip:focus{left:20px;top:12px;}

.wrap{
  width:100%;max-width:var(--maks-bredde);
  margin-inline:auto;padding-inline:var(--sidemarg);
}

.section{padding-block:var(--seksjon-luft);}
.section--alt{background:var(--farge-bakgrunn-2);}
.section--dyp{background:var(--farge-bakgrunn-2);}

/* ==========================================================================
   TYPOGRAFI
   Playfair Display (serif) til h1/h2/sitater, Inter (sans) til alt annet.
   Hierarki lages av størrelse, vekt og luft — ikke av VERSALER.
   ========================================================================== */

.display{
  font-family:var(--skrift-display);
  font-weight:var(--display-vekt);
  line-height:1.08;
  letter-spacing:var(--display-sperring);
  text-wrap:balance;
  color:var(--farge-overskrift);
}

h1.display{font-size:clamp(34px,7.4vw,64px);line-height:1.12;}
h2.display{font-size:clamp(28px,4.6vw,42px);line-height:1.1;}

h3{
  font-family:var(--skrift-tekst);
  font-weight:600;
  font-size:clamp(17px,2.2vw,19px);
  line-height:1.35;
  letter-spacing:-.004em;
  color:var(--farge-overskrift);
}

.etikett{
  display:inline-block;
  font-family:var(--skrift-tekst);
  font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--farge-aksent);
  margin-bottom:14px;
}

.lede{
  font-size:clamp(16px,2vw,18px);
  line-height:1.6;
  max-width:56ch;
  color:var(--farge-tekst);
  margin-top:14px;
}

.sek-topp{margin-bottom:36px;text-align:center;}
.sek-topp .lede{margin-inline:auto;}

/* ---------- knapper ---------- */

.knapp{
  display:inline-block;
  font-family:var(--skrift-tekst);
  font-weight:600;font-size:14px;
  padding:15px 26px;
  border:1px solid transparent;border-radius:var(--hjorne);
  cursor:pointer;
  transition:background var(--fart-rask) ease,color var(--fart-rask) ease,
             border-color var(--fart-rask) ease,transform var(--fart-rask) ease;
}
.knapp--fylt{background:var(--farge-aksent);color:var(--farge-aksent-tekst);}
.knapp--fylt:hover{background:var(--farge-aksent-lys);transform:translateY(-2px);}
.knapp--linje{border-color:rgba(244,238,224,.35);color:var(--farge-overskrift);background:rgba(244,238,224,.04);}
.knapp--linje:hover{background:var(--farge-overskrift);color:var(--farge-dyp);border-color:var(--farge-overskrift);}

/* ==========================================================================
   BILDER
   ========================================================================== */

.bilde{
  position:relative;overflow:hidden;
  background:var(--farge-bakgrunn-2);
  border-radius:var(--hjorne);
}
.bilde img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--kurve);}
.bilde::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--bilde-tone);mix-blend-mode:multiply;
  opacity:var(--bilde-styrke);pointer-events:none;
}

/* ==========================================================================
   ANIMASJON
   ========================================================================== */

.avslor{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--fart-rolig) var(--kurve),
             transform var(--fart-rolig) var(--kurve);
}
.avslor.synlig{opacity:1;transform:none;}

@keyframes stigOpp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes visFrem{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .avslor{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;}
}

/* ==========================================================================
   TOPPLINJE
   ========================================================================== */

.topp{
  position:sticky;top:0;z-index:100;
  background:rgba(16,15,12,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background var(--fart-rask) ease,border-color var(--fart-rask) ease;
}
.topp.rullet{background:rgba(10,9,6,.92);border-color:var(--farge-strek);}
.topp__rad{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px;}

.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--skrift-display);
  font-weight:500;font-size:20px;
  letter-spacing:.02em;color:var(--farge-overskrift);
}
.logo__merke{width:26px;height:26px;color:var(--farge-aksent);flex:none;}
.topp__cta{display:none;}

.meny-knapp{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 8px;
  background:none;border:1px solid var(--farge-strek);border-radius:var(--hjorne);
  cursor:pointer;
}
.meny-knapp span{
  display:block;height:2px;background:var(--farge-overskrift);
  transition:transform var(--fart-rask) ease,opacity var(--fart-rask) ease;
}
.meny-knapp[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.meny-knapp[aria-expanded="true"] span:nth-child(2){opacity:0;}
.meny-knapp[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.meny{display:none;}
.meny.apen{
  display:block;position:absolute;top:100%;left:0;right:0;z-index:120;
  background:#0D0C09;
  border-top:1px solid var(--farge-strek);
  border-bottom:1px solid var(--farge-strek);
  padding:6px var(--sidemarg) 22px;
}
.meny a{
  display:block;padding:13px 0;font-size:18px;
  color:var(--farge-overskrift);border-bottom:1px solid var(--farge-strek);
}
.meny .knapp{margin-top:18px;width:100%;text-align:center;border-bottom:0;}

/* ==========================================================================
   SEKSJON: HERO
   ========================================================================== */

.hero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;color:var(--farge-dyp-tekst);}
.hero__bilde{position:absolute;inset:0;z-index:0;}
.hero__bilde img{width:100%;height:100%;object-fit:cover;animation:visFrem 1.2s var(--kurve) backwards;}
.hero__skygge{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,6,4,.55) 0%,rgba(6,6,4,.4) 45%,rgba(6,6,4,.75) 100%);
}
.hero__innhold{
  position:relative;z-index:2;
  text-align:center;padding-block:120px 80px;
}
.hero__innhold h1{
  color:#fff;margin-inline:auto;max-width:20ch;
  animation:stigOpp .9s var(--kurve) .1s backwards;
}
.hero__knapper{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px;
  animation:stigOpp .9s var(--kurve) .26s backwards;
}

/* ==========================================================================
   SEKSJON: MENY
   ========================================================================== */

.meny-rad{display:grid;gap:28px;}

.meny-liste{border-top:1px solid var(--farge-strek);}
.meny-liste__knapp{
  display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:6px;
  width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--farge-strek);
  padding-block:20px;cursor:pointer;
  transition:padding var(--fart-rask) ease;
}
.meny-liste__navn{
  grid-column:1;
  font-family:var(--skrift-tekst);font-weight:700;font-size:15px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--farge-overskrift);
}
.meny-liste__pil{
  grid-column:2;grid-row:1;
  color:var(--farge-dempet);transition:color var(--fart-rask) ease,transform var(--fart-rask) ease;
}
.meny-liste__tekst{
  grid-column:1 / -1;
  font-size:15px;line-height:1.5;color:var(--farge-tekst);max-width:52ch;
}
.meny-liste__knapp:hover,
.meny-liste__knapp.aktiv{padding-inline:14px;background:rgba(244,238,224,.04);}
.meny-liste__knapp:hover .meny-liste__navn,
.meny-liste__knapp.aktiv .meny-liste__navn{color:var(--farge-aksent);}
.meny-liste__knapp:hover .meny-liste__pil,
.meny-liste__knapp.aktiv .meny-liste__pil{color:var(--farge-aksent);transform:translate(2px,-2px);}

.meny-bilde{aspect-ratio:4/3;border-radius:var(--hjorne);overflow:hidden;background:var(--farge-bakgrunn-2);}
.meny-bilde img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease;}

.meny-cta{display:block;width:max-content;margin:40px auto 0;}

/* ==========================================================================
   SEKSJON: GALLERI
   ========================================================================== */

/* Karusellen: se DESIGN.md for full forklaring av mønsteret.
   .galleri-ramme er vinduet (skjuler alt som glir utenfor).
   .galleri er selve båndet — JS dobler bildene i det, og CSS lar det
   gli sidelengs i en jevn, uendelig løkke. container-type gjør at
   bildebredden kan regnes ut fra RAMMAS bredde (cqw), ikke båndets
   egen bredde, som er dobbelt så bred som rammen. */
.galleri-ramme{
  border:1px solid var(--farge-strek);border-radius:var(--hjorne);
  padding:14px;overflow:hidden;
  container-type:inline-size;
}
.galleri{
  display:flex;
  gap:var(--karusell-luft);
  width:max-content;
}
/* Denne klassen legges på av js/script.js, og bare når JavaScript
   faktisk har doblet bildene. Uten den ligger bildene i ett sett og
   båndet står stille — bedre enn en karusell som "hakker" fordi den
   bare har halve bildesettet å gli gjennom. */
.galleri.galleri--glir{
  animation:karusellGli var(--karusell-fart) linear infinite;
}
.galleri-ramme:hover .galleri.galleri--glir,
.galleri-ramme:focus-within .galleri.galleri--glir{
  animation-play-state:paused;
}
@keyframes karusellGli{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}   /* nøyaktig ett bildesett, siden båndet er doblet */
}

/* Bildebredden: ca. 1,6 bilder synlige på mobil, tre fra 760 piksler.
   Se DESIGN.md for hvordan du endrer antallet. */
.galleri .bilde{
  flex:0 0 calc((100cqw - var(--karusell-luft)) / 1.6);
  aspect-ratio:3/4;
}
.galleri .bilde:hover img{transform:scale(1.04);}

/* Med "reduser bevegelse" lar js/script.js være å doble bildene, og her
   bytter vi det glidende båndet ut med et vanlig, stillestående
   rutenett. Ligger etter reglene over med vilje — samme klasser,
   men denne skal vinne når regelen gjelder. */
@media (prefers-reduced-motion:reduce){
  .galleri-ramme{overflow:visible;container-type:normal;}
  .galleri{
    display:grid;grid-template-columns:repeat(2,1fr);gap:var(--karusell-luft);
    width:auto;
  }
  .galleri .bilde{flex:none;}
}

/* ==========================================================================
   SEKSJON: OM OSS
   ========================================================================== */

.om-panel{
  border:1px solid var(--farge-strek);border-radius:var(--hjorne);
  padding:24px;
  display:grid;gap:26px;
}
.om__bilde{aspect-ratio:4/3;}
.om__tekst p{margin-top:14px;max-width:60ch;}
.om__tekst h2{margin-top:2px;}

.om__kort{
  display:grid;gap:20px;
  border-top:1px solid var(--farge-strek);padding-top:26px;
}
.om__kort-element h3{margin-bottom:8px;}
.om__kort-element p{font-size:15px;color:var(--farge-tekst);max-width:34ch;}

/* ==========================================================================
   SEKSJON: RESERVERING
   ========================================================================== */

.panel{
  background:rgba(244,238,224,.03);
  border:1px solid var(--farge-strek);
  border-radius:var(--hjorne);
}
.reservering__panel{display:grid;gap:0;overflow:hidden;}
.reservering__info{padding:30px 24px;}
.reservering__undertittel{
  font-family:var(--skrift-display);font-weight:500;font-style:normal;
  font-size:clamp(22px,3.6vw,28px);line-height:1.25;
  color:var(--farge-overskrift);max-width:16ch;margin-bottom:24px;
}
.reservering__tider{border-top:1px solid var(--farge-strek);margin-bottom:24px;}
.reservering__tider .rad{
  display:flex;align-items:baseline;gap:10px;
  padding-block:13px;border-bottom:1px solid var(--farge-strek);font-size:15px;
}
.reservering__tider .rad__navn{color:var(--farge-tekst);}
.reservering__tider .rad__prikker{flex:1;border-bottom:1px dotted var(--farge-strek);transform:translateY(-4px);}
.reservering__tider .rad__verdi{
  font-weight:600;color:var(--farge-aksent);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.reservering__adresse{margin-bottom:26px;}
.reservering__adresse p{color:var(--farge-overskrift);font-size:16px;}

.reservering__bilde{min-height:280px;}
.reservering__bilde img{width:100%;height:100%;object-fit:cover;display:block;}

/* ==========================================================================
   SEKSJON: HVOR VI HOLDER TIL
   ========================================================================== */

.sted-rad{display:grid;gap:14px;}
.sted__bilde{aspect-ratio:4/3;}

/* ==========================================================================
   BUNN
   ========================================================================== */

.bunn{background:#0A0906;color:var(--farge-dempet);border-top:1px solid var(--farge-strek);}
.bunn__rad{display:grid;gap:32px;padding-block:56px 30px;}
.bunn__logo{
  font-family:var(--skrift-display);font-weight:500;font-size:26px;
  letter-spacing:.01em;color:var(--farge-overskrift);
  display:block;margin-bottom:10px;
}
.bunn__om{max-width:32ch;font-size:15px;}
.bunn h4{
  font-family:var(--skrift-tekst);font-weight:600;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  color:#6E6A5D;margin-bottom:16px;
}
.bunn ul{display:grid;gap:11px;font-size:15px;}
.bunn a{transition:color var(--fart-rask) ease;}
.bunn a:hover{color:var(--farge-aksent);}
.bunn__sosialt{display:flex;gap:12px;}
.bunn__sosialt a{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--farge-strek);border-radius:var(--hjorne);
  transition:background var(--fart-rask) ease,border-color var(--fart-rask) ease,color var(--fart-rask) ease;
}
.bunn__sosialt a:hover{background:var(--farge-aksent);border-color:var(--farge-aksent);color:#1B160E;}
.bunn__sosialt svg{width:16px;height:16px;fill:currentColor;}

.bunn__demo{
  border-top:1px solid var(--farge-strek);
  padding-block:18px;
}
.bunn__demo p{font-size:13px;color:#6E6A5D;max-width:64ch;}

.bunn__linje{
  border-top:1px solid var(--farge-strek);
  padding-block:18px 34px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:13px;
}

/* ==========================================================================
   FRA 600 PIKSLER
   ========================================================================== */

@media (min-width:600px){
  .om__kort{grid-template-columns:repeat(2,1fr);column-gap:26px;}
}

/* ==========================================================================
   FRA 760 PIKSLER
   ========================================================================== */

@media (min-width:760px){
  :root{--sidemarg:32px;}
  .section{padding-block:var(--seksjon-luft-stor);}
  .sek-topp{margin-bottom:52px;}

  .meny-rad{grid-template-columns:1.05fr 1fr;gap:52px;align-items:start;}
  .meny-bilde{aspect-ratio:auto;height:100%;min-height:420px;position:sticky;top:100px;}

  .om-panel{grid-template-columns:.9fr 1.1fr;grid-template-areas:"bilde tekst" "kort kort";padding:36px;gap:36px 44px;}
  .om__bilde{grid-area:bilde;aspect-ratio:auto;height:100%;}
  .om__tekst{grid-area:tekst;align-self:center;}
  .om__kort{grid-area:kort;grid-template-columns:repeat(4,1fr);column-gap:30px;}

  .reservering__panel{grid-template-columns:1fr 1fr;}
  .reservering__info{padding:44px;}

  .sted-rad{grid-template-columns:1fr 1fr;gap:20px;}

  /* Fra 760 piksler: tre bilder synlige i karusellen i stedet for 1,6 */
  .galleri .bilde{flex-basis:calc((100cqw - 2 * var(--karusell-luft)) / 3);}

  .bunn__rad{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-block:68px 30px;}
}

@media (min-width:760px) and (prefers-reduced-motion:reduce){
  .galleri{grid-template-columns:repeat(4,1fr);}
}

/* ==========================================================================
   FRA 900 PIKSLER — desktopmeny
   ========================================================================== */

@media (min-width:900px){
  .meny-knapp{display:none;}
  .meny,.meny.apen{
    display:flex;position:static;align-items:center;gap:30px;margin-left:auto;
    background:none;border:0;padding:0;
  }
  .meny__liste{display:flex;gap:28px;}
  .meny a{
    padding:4px 0;font-size:14px;border-bottom:1px solid transparent;
    transition:border-color var(--fart-rask) ease,color var(--fart-rask) ease;
  }
  .meny a:hover{border-color:var(--farge-aksent);color:var(--farge-aksent);}
  .meny .knapp{display:none;}
  .topp__cta{display:inline-block;}

  .hero__innhold{padding-block:170px 120px;}
}

/* ==========================================================================
   UTSKRIFT
   ========================================================================== */

@media print{
  .topp,.hero__bilde,.galleri-ramme,.knapp{display:none !important;}
  body{background:#fff;color:#000;font-size:12pt;}
  .section,.section--dyp,.section--alt{background:#fff;color:#000;}
  .display,h3,p{color:#000;}
}