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

:root{
  --blekk:#2B2320;
  --dempet:#6B5D55;
  --flate:#FFFDF9;
  --papir:#F6F1E8;
  --linje:#E4DACB;
  --aksent:#9A5B34;
  --aksentflate:#F5E7DC;
  --vis:"Newsreader",Georgia,"Times New Roman",serif;
  --brod:"Public Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --signatur:#143C52;
  --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}
.blokk h2{margin-bottom:22px}
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:10px;white-space:nowrap;
  /* 44 px er ikke pynt — det er en tommel paa en telefon. */
  min-height:44px;line-height:22px;
}
/* ⭐ Én easing og én varighet for alt som svarer paa musa. Uten transition
   hopper fargen, og det ser billig ut selv om ingen kan si hvorfor. */
.knapp,.meny a,.bunn a,.kontakt li a{transition:color .15s ease,background-color .15s ease,
  box-shadow .15s ease,filter .15s ease}
@media (prefers-reduced-motion:reduce){.knapp,.meny a,.bunn a,.kontakt li a{transition:none}}
.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)}
.knapp:active{transform:translateY(1px)}
.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:96px 0 88px;
  /* ⭐ Bildet er poenget. Et ekte bilde av stedet skal faa plass, ikke bare
     kikke fram bak teksten. Klemt mellom 440 og 640 px saa det aldri blir
     en hel skjerm (da skyves sida ut av synet) og aldri en tynn stripe. */
  display:flex;align-items:center;min-height:clamp(440px,58vh,640px)}
.hero.med-bilde .inn{width:100%}
.hero.med-bilde .ingress{color:rgba(255,255,255,.92)}
.hero.med-bilde .over{color:#fff}
/* ⚠️ Skyggen er ikke pynt: den holder teksten lesbar der bildet er lyst,
   selv etter overlegget. Lett nok til aa ikke synes som skygge. */
.hero.med-bilde h1,.hero.med-bilde .ingress,.hero.med-bilde .over{
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hero.med-bilde .knapp.mild{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
/* Paa et moerkt bilde er aksentfargen paa hover for svak. Hvit flate i stedet. */
.hero.med-bilde .knapp.mild:hover{color:#fff;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px #fff}
/* ⭐ Delt hero: tekst til venstre, bildet staaende til hoeyre. Ingen overlegg,
   ingen skygge; bildet faar vaere et bilde. 5:6 er telefonens hoeydeformat
   uten aa bli et taarn. Under 720 px legger bildet seg under teksten. */
.hero.delt{padding:72px 0 64px}
.hero.delt .inn.todelt{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);
  gap:48px;align-items:center}
.hero.delt .herobilde{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:14px;
  background:var(--linje)}
@media (max-width:720px){
  .hero.delt{padding:44px 0 48px}
  .hero.delt .inn.todelt{grid-template-columns:1fr;gap:28px}
  .hero.delt .herobilde{aspect-ratio:4/3}
}

/* ── blokker ─────────────────────────────────────────────────────── */
.blokk{padding:72px 0;border-top:1px solid var(--linje)}
@media (max-width:720px){.blokk{padding:52px 0}}
/* ⭐ Bilder toner inn naar de er lastet, i stedet for aa hoppe fram.
   Bare opacity, som er gratis, og av for den som har bedt om ro. */
img[loading="lazy"]{animation:tone .4s ease-out both}
@keyframes tone{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){img[loading="lazy"]{animation:none}}
/* ⚠️ «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;
  /* To kolonner paa 1080, ikke tre. Tre gjorde prislista til et rutenett
     man leter i; to leses som en liste. */
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  column-gap:44px}
.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}

/* ── utvalg: to til fire kort ────────────────────────────────────── */
/* ⚠️ Kortene har bilde, det er hele forskjellen fra lista. Tre like hvite
   bokser med tekst i er det kjedeligste som finnes; med et ekte bilde
   oeverst er det en meny. Radius 14 som heroen, ikke en tredje skala. */
.utvalg{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.utvalg.kort-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.utvalg.kort-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.utvalg .kort{display:block;color:inherit;text-decoration:none;
  background:var(--flate);border:1px solid var(--linje);border-radius:14px;
  overflow:hidden;transition:transform .15s ease,border-color .15s ease}
.utvalg a.kort:hover{transform:translateY(-2px);border-color:var(--aksent)}
.utvalg .kort img{aspect-ratio:4/3;object-fit:cover;background:var(--papir)}
.utvalg .kort h3{font:600 20px var(--vis);margin:16px 18px 6px;letter-spacing:-.01em}
.utvalg .kort p{font-size:15.5px;color:var(--dempet);margin:0 18px 16px;max-width:none}
.utvalg .kort .verdi{display:block;margin:-8px 18px 16px;font-weight:600;color:var(--aksent);
  font-variant-numeric:tabular-nums}
@media (max-width:900px){.utvalg.kort-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.utvalg,.utvalg.kort-3,.utvalg.kort-4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.utvalg .kort{transition:none}}

/* ── nytt: blokk eller stripe ────────────────────────────────────── */
/* Blokk: butikken som vil vise det nye stort. Samme kortform som utvalg,
   med dato oeverst i innholdet. Stripe: tre linjer, dato til venstre. */
.nytt-blokk{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.nytt-blokk .innlegg{background:var(--flate);border:1px solid var(--linje);
  border-radius:14px;overflow:hidden}
.nytt-blokk img{aspect-ratio:3/2;object-fit:cover;background:var(--papir)}
.nytt-blokk .innhold{padding:16px 18px 18px}
.nytt-blokk time,.nytt-stripe time{font-size:13.5px;color:var(--dempet);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nytt-blokk h3{font:600 20px/1.25 var(--vis);margin:6px 0 8px;letter-spacing:-.01em}
.nytt-blokk p{font-size:15.5px;color:var(--dempet);margin:0;max-width:none}
.nytt-blokk h3 a,.nytt-stripe a{color:inherit;text-decoration:none}
.nytt-blokk h3 a:hover,.nytt-stripe a:hover{color:var(--aksent)}
@media (max-width:900px){.nytt-blokk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.nytt-blokk{grid-template-columns:1fr}}
.nytt-stripe{list-style:none;margin:0;padding:0}
.nytt-stripe li{display:grid;grid-template-columns:11rem 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linje);align-items:baseline}
.nytt-stripe strong{display:block}
.nytt-stripe .liten{display:block;font-size:15px;color:var(--dempet);margin-top:2px}
@media (max-width:720px){.nytt-stripe li{grid-template-columns:1fr;gap:4px}}

/* ── 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}
/* ⭐ Klokkeslettet er det folk kom for. Det staar i blekk, ikke dempet:
   dempet paa papir er 4,6:1 i «sjo», og det er tallet som skal leses. */
.tider li span:last-child{color:var(--blekk);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 ─────────────────────────────────────────────────────── */
/* ⚠️ Tre kolonner paa 1080, ikke fire. Med fire ble bildene 240 px smaa, og
   fem bilder ga én alene paa rad to. Kvadrat, ikke 4:3: kundenes egne
   bilder er telefonbilder i hoeydeformat, og 4:3 kappet motivet.
   Sett paa fuku-sushi 13.09.2026. */
.galleri{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.galleri figure{margin:0;display:flex;flex-direction:column}
.galleri img{border-radius:10px;aspect-ratio:1/1;object-fit:cover;
  background:var(--papir)}
/* ⭐ RYTME, ikke et rutenett. Med fem bilder eller flere faar det foerste
   bildet to kolonner og to rader, og de fire neste legger seg rundt det.
   Fem bilder = fem celler, ingen tom rute. Under 720 px er det én kolonne,
   og da MAA spennet av: «span 2» i et énkolonnes auto-fit lager en usynlig
   kolonne nummer to og siden scroller sidelengs. */
@media (min-width:720px){
  /* ⚠️ Det store bildet er kvadratisk som de smaa, bare dobbelt saa bredt.
     Foerste utgave lot det beholde sin egen hoeyde, og da bestemte et
     staaende telefonbilde radhoeyden for hele galleriet: 930 px hoeyt, og
     de smaa ved siden av fikk luft de ikke ba om. Sett 13.09.2026. */
  .galleri figure:first-child:nth-last-child(n+5){grid-column:span 2;grid-row:span 2}
}
/* ⭐ Fem bilder = fem celler. I tre kolonner blir det ett stort, to til
   hoeyre og to under, med en TOM rute nederst til hoeyre. I fire kolonner
   gaar det opp: det store paa to ganger to, og fire smaa i en firkant ved
   siden av. Flere enn fem legger seg under, fire i bredden.
   ⚠️ :has() er nytt (Chrome 105, Safari 15.4, Firefox 121). Eldre nettlesere
   faar tre kolonner og en tom rute, som er penere enn ingenting. */
@media (min-width:900px){
  .galleri:has(figure:first-child:nth-last-child(n+5)){grid-template-columns:repeat(4,1fr)}
}
.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}
/* ⛔️ blekk, ikke dempet. Dempet paa aksentflate er 4,36:1 i «sjo», under
   kravet paa 4,5. Regnet 13.09.2026, for alle fire settene. */
.handling p{margin-left:auto;margin-right:auto;color:var(--blekk)}
.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)}
/* ⭐ ORDMERKET, slik det staar paa holmestrandit.no: «Holmestrand» i navy,
   «IT» i gull. Eier, 13.09.2026: «Ikke logo men farge paa it.»
   ⭐ Gullet er DET LYSE fra merket, #D99521, paa eiers beskjed 13.09.2026:
   «Holmestrandit IT skal være gul.» Foerste utgave brukte den moerke
   teksttonen #8A5E12 for kontrastens skyld (2,9:1 mot 6:1 i 13 px), men
   det er navnet vaart, og det skal se ut som logoen. Derfor ett hakk
   stoerre og fet, saa det leses likevel. */
.bunn .bunnlinje a.hit{color:var(--signatur);font-weight:700;text-decoration:none;
  letter-spacing:-.01em;font-size:14px}
.bunn .bunnlinje a.hit b{color:#D99521;font-weight:700}
.bunn .bunnlinje a.hit:hover{text-decoration:underline}

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