/* nordisk studio — forenklet side (v2, 2026-09).
   Mål: så tro som mulig mot mobil-mockupene (375 pt-bredde, Futura PT).
   Mockup-mål er delt på 3 (@3x) → CSS-px. Futura PT er ikke fritt
   tilgjengelig på web, så vi bruker Jost (nærmeste geometriske frie
   Futura-slektning): 300 ≈ Light, 400 ≈ Book, 500 ≈ Medium. */

/* Jost lastes fra egen server (ikke Google Fonts) — ingen IP-adresser til
   tredjepart. Variabel font: én fil per tegnsett dekker vekt 300–500.
   Kilde: Google Fonts, SIL Open Font License 1.1. */
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #fffaf4;
  --ink: #000;
  --gutter: 28px;          /* hamburger/menykant og footer-kant */
  --fs-title: 19.2px;      /* NORDISK STUDIO (60 pt; Jost er ~4 % bredere → ×0,96) */
  --fs-text: 12.8px;       /* meny, brødtekst, lenker (40 pt) */
  --fs-small: 9.6px;       /* bildetekster, navn (30 pt) */
  --fs-foot: 8px;          /* footer (25 pt) */
  --lh-text: 15px;         /* 45 pt linjeavstand i mockupen */
  --track: .056em;         /* sperret tekst (meny, bildetekster, footer-ord) — målt mot mockup */
  --col: 70%;              /* tekstkolonne (263/375) */
  --col-max: 560px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  /* Hele telefonvinduet (lvh): footeren havner nederst slik som på
     prosjektsiden når nettleserlinja trekkes inn, ikke over den. */
  min-height: 100vh;
  min-height: 100lvh;
  /* site.js setter --full-h = målt synlig høyde der den er større enn lvh */
  min-height: max(100lvh, var(--full-h, 0px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: "Jost", "Futura PT", Futura, "Century Gothic", sans-serif;
  font-weight: 300;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tracked { letter-spacing: var(--track); }

/* ---------- header ---------- */
.top { position: relative; z-index: 5; padding: 52px var(--gutter) 0; }
.top__row {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.burger {
  width: 18px; height: 100%;
  padding-bottom: 1px;     /* (radhøyde − 1 − 17) / 2 = helt tall → strekene på hele piksler */
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
/* Strekavstand = 8 px (1 + 7): et multiplum som gir hele skjermpiksler ved
   125/150/175/200/300 % skalering, så alle tre strekene blir like tykke. */
.burger span { display: block; height: 1px; background: var(--ink); }
.title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.mark { width: 24px; margin-right: 2px; }
.mark img { width: 100%; height: auto; }

.menu {
  display: flex; flex-direction: column;
  margin-top: 6px;
  letter-spacing: var(--track);
  line-height: 16px;
}
/* Lukket meny holder plassen sin (visibility), så siden ikke hopper når den
   åpnes/lukkes. Der menyen starter lukket (prosjektsiden), legger den seg
   over innholdet i stedet for å skyve det ned. */
.menu[hidden] { display: flex; visibility: hidden; }
body[data-menu="closed"] .menu {
  position: absolute; top: 100%; left: var(--gutter);
  padding: 0 12px 10px 0;
  background: var(--paper);
}
.menu a { align-self: flex-start; }
.menu a[aria-current="page"] { font-weight: 500; }

/* ---------- innhold ---------- */
main { flex: 1 0 auto; }

/* Studio / Kontakt: sentrert hovedbilde */
.hero-img { margin: 43px auto 0; width: 63.5%; max-width: 440px; }
.hero-img img { width: 100%; height: auto; }
.contact .hero-img { width: 66.4%; }

.tagline {
  margin: 64px 0 0; text-align: center;
  letter-spacing: .08em;
}
.prose {
  width: var(--col); max-width: var(--col-max);
  margin: 29px auto 0;
  text-align: justify;
  hyphens: manual;
}
.prose p { margin: 0 0 var(--lh-text); }
.prose p:last-child { margin-bottom: 0; }

/* Kontakt */
.people {
  width: 73.6%; max-width: 620px;
  margin: 82px auto 0;
  display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--fs-small);
  line-height: 15px;
}
.people b { display: block; font-weight: 400; }
.links {
  width: 73.6%; max-width: 620px;
  margin: 23px auto 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.links a { display: inline-flex; align-items: center; gap: 5px; }
.arrow { width: .47em; height: .47em; flex: none; margin-top: .08em; }

/* Prosjekter: rutenett */
.grid {
  width: 72.5%;
  margin: 6px auto 0;
  padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 30px;
}
.grid .ph { aspect-ratio: 1; overflow: hidden; }
.grid .ph img { width: 100%; height: 100%; object-fit: cover; }
.cap {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 12px;
  letter-spacing: var(--track);
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
  display: flex; justify-content: space-between; gap: 4px;
}
.grid a.item { display: block; }

/* Prosjekt-detalj */
.gallery {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.plan { width: 84%; max-width: 900px; margin: 32px auto 0; }
.plan img { width: 100%; height: auto; }
.proj-head {
  width: var(--col); max-width: var(--col-max);
  margin: 54px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.proj-head h1 { margin: 0; font: inherit; letter-spacing: .08em; }
.toggle { width: 16px; height: 16px; position: relative; flex: none; margin-right: 2px; }
.toggle::before, .toggle::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%;
  height: 1px; background: var(--ink); transition: transform .25s ease;
}
.toggle::after { transform: rotate(90deg); }
.toggle[aria-expanded="true"]::after { transform: rotate(0deg); }
.proj-head + .prose { margin-top: 24px; }
.prose--more { margin-top: var(--lh-text); }
.prose[hidden] { display: none; }

/* ---------- footer ---------- */
.foot {
  margin-top: 64px;
  padding: 0 30px 44px var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between;
  font-size: var(--fs-foot);
  line-height: 10px;
  white-space: nowrap;
}
.foot .w { letter-spacing: var(--track); }
.lang { position: relative; }
.lang__cur { letter-spacing: var(--track); }
.lang.is-open .lang__cur { font-weight: 500; }
.lang__list {
  position: absolute; left: 0; bottom: 100%;
  display: none; flex-direction: column; align-items: flex-start;
  padding-bottom: 1px;
}
.lang.is-open .lang__list { display: flex; }
.lang__list button { letter-spacing: var(--track); line-height: 10px; padding: 0; }

/* ---------- personvern ---------- */
.legal { width: 84%; max-width: 620px; margin: 43px auto 0; }
.legal h1 { font: inherit; letter-spacing: var(--track); margin: 0 0 var(--lh-text); }
.legal h2 { font: inherit; font-weight: 400; margin: 24px 0 4px; }
.legal p { margin: 0 0 8px; }
.legal .upd { margin-top: 24px; font-size: var(--fs-small); }

@media (hover: hover) {
  .menu a:hover, .foot a:hover, .foot button:hover, .links a:hover,
  .grid a.item:hover .cap, .burger:hover, .toggle:hover { opacity: .55; }
  .grid a.item .ph img { transition: opacity .3s ease; }
  .grid a.item:hover .ph img { opacity: .88; }
}

/* ---------- nettbrett ---------- */
@media (min-width: 700px) {
  :root {
    --gutter: 40px;
    --fs-title: 24px;
    --fs-text: 15px;
    --fs-small: 11px;
    --fs-foot: 10px;
    --lh-text: 18px;
  }
  .top { padding-top: 44px; }
  .top__row { height: 30px; }
  .burger { width: 22px; }
  .mark { width: 30px; }
  .menu { line-height: 19px; margin-top: 10px; }
  .hero-img { width: 44%; }
  .contact .hero-img { width: 46%; }
  /* 3 i bredden × 2 rader */
  .grid { width: calc(100% - 2 * var(--gutter)); max-width: 1240px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; margin-top: 40px; }
  .cap { line-height: 14px; }
  /* to bilder i bredden */
  .gallery { padding: 0 var(--gutter); gap: 8px; max-width: 1240px; margin-left: auto; margin-right: auto; }
  .people, .links { width: var(--col); max-width: var(--col-max); }
  .people { line-height: 17px; }
  /* jevn avstand mellom alle elementene i bunnlinja */
  .foot { padding: 0 var(--gutter) 40px; gap: 24px; line-height: 13px; }
  .lang__list button { line-height: 13px; }
}

/* ---------- desktop / laptop ---------- */
@media (min-width: 1100px) {
  :root {
    --gutter: 56px;
    --fs-title: 28px;
    --fs-text: 17px;
    --fs-small: 12px;
    --fs-foot: 11px;
    --lh-text: 21px;
    --col-max: 600px;
  }
  .top { padding-top: 48px; }
  .top__row { height: 34px; }
  .burger { width: 24px; }
  .mark { width: 34px; }
  .menu { line-height: 22px; }
  .hero-img { width: 30vw; max-width: 460px; margin-top: 56px; }
  .contact .hero-img { width: 31vw; max-width: 480px; }
  .tagline { margin-top: 72px; }
  /* begge radene skal få plass i skjermhøyden (rad ≈ bredde/3 + bildetekst) */
  .grid { column-gap: 24px; row-gap: 40px; max-width: min(1240px, max(760px, calc((100vh - 300px) * 1.5))); }
  .gallery { margin-top: 72px; gap: 12px; }
  .plan { margin-top: 64px; width: 50%; max-width: 760px; }
  .proj-head { margin-top: 72px; }
  .people { line-height: 18px; margin-top: 88px; }
  .foot { margin-top: 96px; line-height: 14px; }
  .lang__list button { line-height: 14px; }
}

/* små telefoner (< 360 px): footeren må ikke flyte over */
@media (max-width: 359px) {
  :root { --gutter: 20px; }
  .foot { padding-right: 20px; font-size: 7px; }
}