/* Tekstsidene på tjuvholmen.vidr.dev (spesifikasjon 2026-09-29, del 7 og 8): sort og gull, Cormorant Garamond og Jost,
   mye luft og rolige bevegelser. Mobil først; alt av bevegelse slås av med prefers-reduced-motion. */
:root { --bg:#0b0b0b; --kort:#121110; --tekst:#e8e2d0; --dempet:#9a917c; --gull:#c9a54c; --gull-lys:#ecd497; --gull-mork:#b88f45;
  --strek:rgba(201,165,76,.35); --maks:72rem; --tekstbredde:40rem; --rom:clamp(3.5rem, 9vw, 8rem);
  --kant-v:max(16px, env(safe-area-inset-left)); --kant-h:max(16px, env(safe-area-inset-right)); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--tekst); font:300 clamp(17px, 0.5vw + 15px, 19px)/1.7 Jost, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; }   /* height-attributtet (mot layoutskift) skal ikke overstyre aspect-ratio */
h1, h2, h3 { font-family:"Cormorant Garamond", Georgia, serif; font-weight:500; line-height:1.08; color:var(--tekst); margin:0 0 .5em; text-wrap:balance; }
h1 { font-size:clamp(42px, 6.4vw, 96px); letter-spacing:.01em; }
h2 { font-size:clamp(30px, 3.4vw, 50px); }
h3 { font-size:clamp(22px, 1.9vw, 28px); }
p { margin:0 0 1.1em; text-wrap:pretty; }
a { color:var(--gull); text-underline-offset:3px; text-decoration-thickness:1px; }
:focus-visible { outline:2px solid var(--gull); outline-offset:3px; border-radius:4px; }
.skjult { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- toppstripe og meny */
.topp { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:1.2rem;
  padding:calc(12px + env(safe-area-inset-top)) var(--kant-h) 12px var(--kant-v);
  background:linear-gradient(#0b0b0bf2, #0b0b0bb3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,165,76,.12); }
.logo { font:500 1.2rem/1 "Cormorant Garamond", serif; letter-spacing:.32em; color:var(--gull); text-decoration:none; white-space:nowrap; margin-right:auto; }
.logo span { letter-spacing:.06em; color:var(--tekst); }
@media (max-width: 480px) { .topp { gap:.6rem; } .logo { font-size:1rem; letter-spacing:.2em; } .menyknapp { padding:0 .8rem; } }
.meny { display:flex; gap:1.3rem; align-items:center; }
.meny a { color:var(--tekst); text-decoration:none; font-size:.92rem; letter-spacing:.02em; }
.meny a:hover, .meny a[aria-current="page"] { color:var(--gull); }
.spraak { font:inherit; font-size:.85rem; color:var(--tekst); background:rgba(255,255,255,.05); border:1px solid var(--strek);
  border-radius:999px; padding:.35rem 1.9rem .35rem .7rem; min-height:36px; cursor:pointer;
  -webkit-appearance:none; appearance:none;   /* egen vinkel: nettleserens egen ligger for langt inn mot kanten */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8e2d0' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:.7rem auto; }
.spraak option { color:#111; }
@media (max-width: 480px) { .spraak { padding:.3rem 1.5rem .3rem .55rem; background-position:right .55rem center; } }
.menyknapp { display:none; min-width:44px; min-height:44px; background:none; border:1px solid var(--strek); border-radius:999px; color:var(--tekst);
  font:inherit; font-size:.85rem; padding:0 1rem; cursor:pointer; }
.topp .knapp { min-height:38px; padding:0 1.1em; font-size:.88rem; }
@media (max-width: 1100px) {
  .menyknapp { display:inline-flex; align-items:center; justify-content:center; }
  .topp .knapp { display:none; }
  .meny { position:fixed; inset:0; z-index:20; flex-direction:column; justify-content:center; gap:1.1rem; padding:2rem;
    background:#0b0b0bf7; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
  .meny a { font:500 clamp(28px, 7vw, 40px)/1.15 "Cormorant Garamond", serif; }
  body.meny-aapen .meny { opacity:1; visibility:visible; }
  body.meny-aapen .menyknapp { position:relative; z-index:21; }
  body.meny-aapen { overflow:hidden; }
}

/* ---------- knapper */
.knapp { display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding:0 1.6em; border-radius:999px;
  text-decoration:none; font-weight:500; letter-spacing:.02em; color:#15110a; border:1px solid transparent; cursor:pointer; font-family:inherit; font-size:1rem;
  background:linear-gradient(135deg, var(--gull-lys), var(--gull-mork)); transition:transform .2s, box-shadow .2s; }
.knapp:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(201,165,76,.25); }
.knapp-kant { color:var(--gull); background:rgba(11,11,11,.35); border-color:var(--gull); }
.knapper { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }

/* ---------- hero (forsiden) */
.hero { position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; margin-top:calc(-1 * (62px + env(safe-area-inset-top))); }
.hero-lerret, .hero-stille { position:absolute; inset:0; width:100%; height:100%; }
.hero-lerret { touch-action:pan-y; display:block; }
.hero-stille { object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, #0b0b0b 0%, #0b0b0bd9 22%, #0b0b0b40 55%, transparent 75%); }
.hero-tekst { position:relative; z-index:1; width:100%; max-width:var(--maks); margin:0 auto;
  padding:0 var(--kant-h) calc(9vh + env(safe-area-inset-bottom)) var(--kant-v); pointer-events:none; }
.hero-tekst a, .hero-tekst button { pointer-events:auto; }
.hero h1 { font-size:clamp(34px, 8vw, 132px); letter-spacing:.22em; margin-right:-.22em; font-weight:500; }   /* 10 bokstaver ≈ 8,4 em: får plass på 360 px */
.hero h1::after { content:""; display:block; width:min(340px, 55vw); height:1px; margin:.28em 0 0; background:linear-gradient(90deg, var(--gull), transparent); }
.hero .ingress { max-width:34rem; }
.hero-navn { position:absolute; z-index:1; right:var(--kant-h); top:calc(84px + env(safe-area-inset-top)); margin:0;
  font:italic 400 clamp(15px, 1.2vw, 18px) "Cormorant Garamond", serif; color:var(--dempet); transition:opacity .8s; }

/* ---------- innhold */
main { display:block; }
.innhold { max-width:var(--maks); margin:0 auto; padding:0 var(--kant-h) 0 var(--kant-v); }
.seksjon { padding:var(--rom) 0; border-top:1px solid var(--strek); }
.seksjon:first-child { border-top:0; }
.seksjon > p, .seksjon > ul, .seksjon > .ingress { max-width:var(--tekstbredde); }
.nummer { display:block; font:italic 400 1rem "Cormorant Garamond", serif; color:var(--gull); letter-spacing:.2em; margin-bottom:.8rem; }
.ingress { font-size:clamp(19px, 1.2vw + 12px, 24px); line-height:1.55; color:var(--tekst); font-weight:300; max-width:var(--tekstbredde); }
.punkter { padding-left:1.1em; } .punkter li { margin:.35em 0; } .punkter li::marker { color:var(--gull); }
.smuler { font-size:.88rem; color:var(--dempet); padding:1.4rem 0 0; }
.smuler a { color:var(--dempet); text-decoration:none; } .smuler a:hover { color:var(--gull); }
.smuler span[aria-hidden] { margin:0 .5em; color:var(--strek); }
.sidetopp { padding:2.2rem 0 1.8rem; }
.hovedbilde { margin:0 calc(-1 * var(--kant-v)); position:relative; }
.hovedbilde img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
@media (min-width: 900px) { .hovedbilde { margin:0; } .hovedbilde img { border-radius:12px; } }
.hovedbilde .knapper { margin-top:1rem; }
.fakta { border-collapse:collapse; width:100%; max-width:var(--tekstbredde); margin:0 0 1rem; }
.fakta td { padding:.6em 0; border-bottom:1px solid var(--strek); vertical-align:top; }
.fakta td:first-child { color:var(--dempet); width:38%; padding-right:1em; }
.kilder { font-size:.9rem; color:var(--dempet); } .kilder a { color:var(--dempet); }

/* ---------- galleri, kort og fliser */
.galleri { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.galleri figure { margin:0; }
.galleri img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:10px; display:block; }
.galleri figcaption { color:var(--dempet); font-size:.92rem; margin-top:.6em; line-height:1.5; }
.galleri figcaption a { display:inline-block; margin-top:.3em; }
/* Vidars egne foto (bygg_sider.py: foto()): tre i bredden, stort bilde i en enkel visning ved klikk (side.js) */
.fotorad { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top:1.4rem; }
.fotorad figure { margin:0; }
.fotorad a { display:block; border-radius:10px; overflow:hidden; cursor:zoom-in; }
.fotorad img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) { .fotorad a:hover img { transform:scale(1.035); } }
.fotorad figcaption { color:var(--dempet); font-size:.9rem; margin-top:.6em; line-height:1.5; }
.fotorad .kreditt { display:block; font-size:.78rem; letter-spacing:.06em; color:var(--gull); opacity:.85; margin-top:.25em; }
.fotovisning { border:0; padding:0; margin:auto; max-width:100vw; max-height:100svh; background:transparent; color:var(--tekst); cursor:zoom-out; }
.fotovisning::backdrop { background:rgba(5,5,5,.92); }
.fotovisning img { display:block; margin:0 auto; max-width:min(1600px, 96vw); max-height:calc(100svh - 6rem); width:auto; height:auto; border-radius:6px; }
.fotovisning p { max-width:min(1600px, 96vw); margin:.7rem auto 0; padding:0 .2rem; font-size:.9rem; color:var(--dempet); } .fotovisning p span { color:var(--gull); margin-left:.6em; }
.fotovisning button { position:fixed; top:calc(12px + env(safe-area-inset-top)); right:14px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--strek); background:rgba(11,11,11,.7); color:var(--tekst); font-size:1.6rem; line-height:1; cursor:pointer; }
.kortrutenett { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-top:2rem; }
.kort { position:relative; display:flex; flex-direction:column; background:var(--kort); border:1px solid rgba(201,165,76,.12); border-radius:12px;
  overflow:hidden; transition:border-color .3s, transform .3s; }
.kort:hover, .kort:focus-within { border-color:var(--gull); }
.kort .bilde { overflow:hidden; }
.kort img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) { .kort:hover img { transform:scale(1.045); } }
.kort .tekst { padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.kort h3 { margin:0; } .kort h3 a { color:var(--tekst); text-decoration:none; }
.kort h3 a::after { content:""; position:absolute; inset:0; }          /* hele kortet er klikkbart til «Les mer» */
.kort p { color:var(--dempet); margin:0; font-size:.95rem; line-height:1.55; }
.kort .lenker { display:flex; gap:1.2rem; margin-top:auto; padding-top:.6rem; font-size:.92rem; position:relative; z-index:1; }
.flisrad { display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw, 400px); gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.3rem var(--kant-h) 1rem var(--kant-v); margin:1.6rem calc(-1 * var(--kant-v)) 0; scrollbar-width:thin; scrollbar-color:var(--strek) transparent; }
.flis { scroll-snap-align:start; position:relative; display:block; border-radius:12px; overflow:hidden; color:var(--tekst); text-decoration:none; }
.flis img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) { .flis:hover img { transform:scale(1.04); } }
.flis .tekst { position:absolute; inset:auto 0 0 0; padding:3rem 1.1rem 1.1rem; background:linear-gradient(0deg, #0b0b0bf0, transparent); }
.flis h3 { margin:0 0 .2em; } .flis p { margin:0; font-size:.9rem; color:var(--dempet); }
.baand { position:relative; min-height:min(78svh, 720px); display:grid; align-items:end; border-radius:14px; overflow:hidden; margin-top:1rem; }
.baand img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.baand::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, #0b0b0be6, transparent 60%); }
.baand .tekst { position:relative; z-index:1; padding:clamp(1.4rem, 4vw, 3.5rem); max-width:44rem; }
.opplevelse { display:grid; gap:1.4rem; align-items:center; margin:2.5rem 0; }
@media (min-width: 900px) { .opplevelse { grid-template-columns:1.4fr 1fr; gap:3rem; } .opplevelse:nth-child(even) .bilde { order:2; } }
.opplevelse img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }

/* ---------- sammenligning med stolpe («Slik ble modellen laget», Vidar 3.10): to bilder oppå hverandre, det øverste vises til venstre for stolpen */
.sammenlign { position:relative; overflow:hidden; aspect-ratio:16/9; background:#2f2f2f; user-select:none; -webkit-user-select:none; --x:50%; }
.sammenlign img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.sammenlign .over { clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.sammenlign .stolpe { position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--gull-lys); pointer-events:none;
  box-shadow:0 0 12px rgba(0,0,0,.45); }
.sammenlign .stolpe::after { content:'‹ ›'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gull-lys); color:var(--gull-lys); font:500 1.05rem/40px Jost, sans-serif; text-align:center; letter-spacing:.12em; }
.sammenlign .etikett { position:absolute; bottom:.8rem; padding:.3rem .7rem; border-radius:6px; background:rgba(11,11,11,.72); color:var(--tekst);
  font-size:.82rem; letter-spacing:.04em; pointer-events:none; transition:opacity .3s; }
.sammenlign .etikett.v { left:.8rem; } .sammenlign .etikett.h { right:.8rem; }
.sammenlign input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.sammenlign input:focus-visible + .stolpe::after { outline:2px solid var(--tekst); outline-offset:3px; }
@media (min-width: 900px) { .sammenlign { border-radius:12px; } }
.hovedbilde .sammenlign { margin:0; }
.seksjon .sammenlign, .seksjon .skjermbilde { margin-top:1.6rem; }
.skjermbilde { margin:0; } .skjermbilde img { width:100%; height:auto; display:block; border-radius:10px; }
.skjermbilde figcaption, .sammenlign + .bildetekst { color:var(--dempet); font-size:.92rem; margin-top:.6em; line-height:1.5; }

/* ---------- bunn */
.bunn { margin-top:var(--rom); border-top:1px solid var(--strek); color:var(--dempet); font-size:.92rem;
  padding:3rem var(--kant-h) calc(3rem + env(safe-area-inset-bottom)) var(--kant-v); }
.bunn .indre { max-width:var(--maks); margin:0 auto; }
.bunn nav { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.5rem 1.2rem; margin-bottom:2.2rem; }
.bunn a { color:var(--tekst); text-decoration:none; } .bunn a:hover { color:var(--gull); }
.bunn .logo { display:inline-block; margin-bottom:1.4rem; }

/* ---------- inn ved rulling, banner og dialog */
.vis { opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.vis.synlig { opacity:1; transform:none; }
.banner, .dialog { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:30;
  width:max-content; max-width:calc(100vw - 32px); padding:.8rem 1rem; background:var(--kort); border:1px solid var(--gull); border-radius:10px;
  display:flex; align-items:center; gap:.9rem; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.dialog { flex-direction:column; align-items:flex-start; max-width:min(420px, calc(100vw - 32px)); }
.dialog p { margin:0; } .banner .knapp, .dialog .knapp { min-height:40px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .vis { opacity:1; transform:none; transition:none; }
  .kort img, .flis img, .fotorad img, .knapp { transition:none; }
}