/* Fuku Sushi — bygget 2026-09-12
   Fargene og skriftene kommer fra kunde.toml. Ikke rediger denne fila:
   den skrives over ved neste bygging. */

:root{
  --blekk:#16303D;
  --dempet:#5A727E;
  --flate:#FFFFFF;
  --papir:#F1F5F7;
  --linje:#DCE5EA;
  --aksent:#1F6F8B;
  --aksentflate:#E3F0F5;
  --vis:"Fraunces",Georgia,serif;
  --brod:"Karla",-apple-system,BlinkMacSystemFont,sans-serif;
  --bredde:1080px;
}

*{box-sizing:border-box}
/* ⚠️ scroll-padding-top MAA staa her saa lenge .topp er sticky. Uten den
   lander overskriften bak topplinja hver gang noen bruker menyen. */
html{scroll-behavior:smooth;scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--flate);
  color:var(--blekk);
  font:17px/1.65 var(--brod);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}

.inn{max-width:var(--bredde);margin:0 auto;padding:0 22px}

/* ⚠️ «smal» begrenser LESEBREDDEN, ikke spalten.
   Her sto det en gang max-width:660px paa selve .inn.smal. Da sentrerte de
   smale seksjonene seg selv mens de brede holdt seg til 1080-kolonnen, og de
   to delte ikke venstrekant: paa en 1400 px skjerm startet «Om gaarden» 210 px
   lenger inn enn heltteksten rett over. Det ser ut som en feil, og det er det.
   Naa er spalten den samme overalt, og bare innholdet kappes. */
.inn.smal{max-width:var(--bredde)}
.inn.smal > *{max-width:660px}
/* Handlingsfeltet er det ene som SKAL staa midt paa. */
.handling .inn.smal > *{margin-left:auto;margin-right:auto}

h1,h2{font-family:var(--vis);font-weight:600;letter-spacing:-.015em;
  text-wrap:balance;margin:0 0 14px}
h1{font-size:clamp(32px,6vw,52px);line-height:1.08}
h2{font-size:clamp(24px,3.6vw,34px);line-height:1.18}
p{margin:0 0 16px;max-width:62ch}
a{color:inherit}

/* ── topp ────────────────────────────────────────────────────────── */
.topp{position:sticky;top:0;z-index:20;background:var(--flate);
  border-bottom:1px solid var(--linje)}
.baand{max-width:var(--bredde);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:20px}
.merke{font:600 19px var(--vis);text-decoration:none;letter-spacing:-.01em;
  white-space:nowrap}
.merke img{max-height:38px;width:auto}
.meny{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.meny a{font-size:15px;text-decoration:none;color:var(--dempet)}
.meny a:hover{color:var(--aksent)}
/* ⭐ Hvilken side du staar paa. Uten dette ser alle fanene like ut, og en
 * meny som ikke sier hvor du er, er halvparten av en meny. */
.meny a.aktiv{color:var(--blekk);font-weight:600}
.topp .knapp{margin-left:auto}
.meny ~ .knapp{margin-left:0}
/* Paa telefon er ANKERMENYEN stoey. Nummeret er det folk skal ha.
 * ⛔️ MEN SIDEMENYEN MAA STAA. Skjulte vi den ogsaa, fantes det ingen vei
 *    til de andre sidene fra en telefon i det hele tatt, og de fleste
 *    kundene til kundene vaare er paa telefon. Regelen var skrevet den
 *    gangen et nettsted alltid var én side. */
@media (max-width:720px){
  .meny:not(.sider){display:none}
  /* ⚠️ `flex-wrap` MAA settes her. Uten den blir `width:100%` bare til at
   *    menyen krymper og legger seg oppetter hoeyre kant ved siden av
   *    knappen, i stedet for aa faa en egen linje. Sett i nettleseren. */
  .baand{flex-wrap:wrap;row-gap:0}
  .topp .knapp{order:2}
  .meny.sider{order:3;width:100%;margin-left:0;gap:16px;
    padding-top:10px;border-top:1px solid var(--linje);margin-top:10px}
  .meny.sider a{font-size:14.5px}
  .topp .knapp{margin-left:auto}
}

/* ── knapper ─────────────────────────────────────────────────────── */
.knapp{
  display:inline-block;background:var(--aksent);color:var(--flate);
  font:600 15px var(--brod);text-decoration:none;
  padding:11px 20px;border-radius:9px;white-space:nowrap;
  /* 44 px er ikke pynt — det er en tommel paa en telefon. */
  min-height:44px;line-height:22px;
}
.knapp:hover{filter:brightness(1.08)}
.knapp.mild{background:transparent;color:var(--blekk);
  box-shadow:inset 0 0 0 1px var(--linje)}
.knapp.mild:hover{box-shadow:inset 0 0 0 1px var(--aksent);color:var(--aksent)}
.knapper{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}

/* ── hero ────────────────────────────────────────────────────────── */
/* ⚠️ Ikke 100vh. Da skyves selve sida ut av det foerste bildet folk ser. */
.hero{padding:78px 0 66px;background:var(--papir)}
.hero .over{font:600 13px var(--brod);letter-spacing:.1em;text-transform:uppercase;
  color:var(--aksent);margin:0 0 12px}
.hero .ingress{font-size:19.5px;color:var(--dempet);max-width:56ch}
.hero.med-bilde{background-size:cover;background-position:center;
  color:#fff;padding:110px 0 96px}
.hero.med-bilde .ingress{color:rgba(255,255,255,.92)}
.hero.med-bilde .over{color:#fff}
.hero.med-bilde .knapp.mild{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* ── blokker ─────────────────────────────────────────────────────── */
.blokk{padding:62px 0;border-top:1px solid var(--linje)}
/* ⚠️ «tonet» = --papir, ikke --flate. Klassen het en gang «flate» mens den
   satte papir-fargen, og da ble vekslingen satt i gang paa feil farge. */
.blokk.tonet{background:var(--papir);border-top:0}
.blokk .ingress{color:var(--dempet);margin-bottom:26px}
.fotnote{font-size:14.5px;color:var(--dempet);margin-top:22px}

/* ── rader: priser, tjenester ────────────────────────────────────── */
.rader{list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  column-gap:36px}
.rader li{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:15px 0;border-bottom:1px solid var(--linje)}
.rader .navn{font-weight:600}
.rader .navn small{display:block;font-weight:400;font-size:14.5px;
  color:var(--dempet);margin-top:2px}
.rader .verdi{font-weight:600;color:var(--aksent);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── aapningstider ───────────────────────────────────────────────── */
.tider{list-style:none;margin:0;padding:0}
.tider li{display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--linje);
  font-variant-numeric:tabular-nums}
.tider li span:first-child{font-weight:600}
.tider li span:last-child{color:var(--dempet);white-space:nowrap}
/* Avvikende tider skal SES. Det er de folk kjoerer forgjeves paa. */
.avvikstittel{font:600 13px var(--brod);letter-spacing:.09em;
  text-transform:uppercase;color:var(--aksent);margin:26px 0 2px}
.tider.avvik li{border-bottom-style:dashed}

/* ── galleri ─────────────────────────────────────────────────────── */
.galleri{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.galleri figure{margin:0}
.galleri img{border-radius:10px;aspect-ratio:4/3;object-fit:cover}
.galleri figcaption{font-size:14.5px;color:var(--dempet);margin-top:7px}

/* ── kontakt ─────────────────────────────────────────────────────── */
.kontakt{list-style:none;margin:0;padding:0}
.kontakt li{display:flex;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--linje)}
.kontakt li span{min-width:92px;color:var(--dempet);font-size:15px}
.kontakt li a{color:var(--aksent)}

/* ── handling ────────────────────────────────────────────────────── */
.handling{padding:62px 0;background:var(--aksentflate);text-align:center}
.handling p{margin-left:auto;margin-right:auto;color:var(--dempet)}
.handling .knapper{justify-content:center}

/* ── bunn ────────────────────────────────────────────────────────── */
.bunn{padding:34px 0;border-top:1px solid var(--linje);
  font-size:15px;color:var(--dempet)}
.bunn .inn{display:flex;gap:22px;flex-wrap:wrap;
  justify-content:space-between;align-items:center}
.bunn strong{color:var(--blekk);font-family:var(--vis);font-size:17px}
.bunn .orgnr{font-size:13.5px;margin-top:3px}
.bunn .hoyre{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.bunn a{color:var(--dempet)}
.bunn .knapp{color:var(--flate)}

/* ⭐ Nederste linje: personvern til venstre, signaturen til hoeyre.
 * ⛔️ HOLMESTRANDIT SINE EGNE FARGER, ikke kundens. #205d7e er den samme
 *    blaa som paa holmestrandit.no, og den skal vaere lik hos hver eneste
 *    kunde uansett hvilket fargesett hun har valgt. Det er nettopp det som
 *    gjoer en signatur til en signatur. Den er liten og stille, saa den
 *    slaass ikke med flaten rundt. */
.bunn .bunnlinje{margin-top:18px;padding-top:14px;
  border-top:1px solid var(--linje);font-size:13px}
.bunn .bunnlinje .bygget{color:var(--dempet)}
.bunn .bunnlinje a.hit{color:#205d7e;font-weight:600;text-decoration:none}
.bunn .bunnlinje a.hit:hover{text-decoration:underline}

/* ── tastatur ────────────────────────────────────────────────────── */
a:focus-visible{outline:2px solid var(--aksent);outline-offset:3px;
  border-radius:4px}