/* ==========================================================================
   Jørgen Kjørven — nettsideutkast v3 «Haven»
   Inspirert av Wildhaven-malen (lovable.dev): fullskjerm-foto med tekst nede til venstre og
   framdriftsstreker, luftige lyse seksjoner med sentrerte små overskrifter, viftede kort,
   ikonrader, ett kontaktkort og mørk footer. Innhold og tokens er Jørgens (tokens.json v1.0).
   ========================================================================== */
:root {
  --papir: #F5F0E6; --papir-dyp: #EBE4D6; --blekk: #1E2621; --tekst: #262E29; --tekst-sekundar: #5A645D;
  --glo: #B9512A; --glo-dyp: #8F3B1C; --glo-lys: #E0A07E; --gran: #3D5648; --gran-lys: #DCE3DB; --linje: #D3CABA; --hvit: #FFFFFF;
  --font-heading: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-body: "Karla", "Karla Fallback", "Helvetica Neue", Arial, sans-serif;
  --tracking: -0.02em;
  --xs: .75rem; --sm: .875rem; --base: 1.0625rem; --lg: 1.1875rem; --xl: 1.375rem; --2xl: 1.625rem; --3xl: 2rem; --4xl: 2.5rem;
  --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2rem; --sp-xl: 3rem; --sp-2xl: 4rem; --sp-3xl: 6rem;
  --section: clamp(5rem, 11vw, 9rem); --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --r-sm: 3px; --r-md: 10px; --r-lg: 18px; --r-full: 9999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur2: 220ms; --dur3: 420ms; --dur4: 700ms; --dur5: 1400ms;
  --slide: 9000ms; --io: 1100ms; --bg: var(--papir);
  --wrap: 80rem; --narrow: 38rem;
  --shadow: 0 24px 60px -30px rgba(30,38,33,.35), 0 1px 0 rgba(30,38,33,.06);
}
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/Karla-italic-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: 'Karla'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/Karla-normal-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: 'Karla'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/Karla-normal-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; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/Newsreader-italic-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: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/Newsreader-italic-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; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/Newsreader-normal-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: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/Newsreader-normal-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; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 90%; descent-override: 26%; }
@font-face { font-family: "Karla Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 101%; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-body); font-size: var(--base); line-height: 1.6; color: var(--tekst); background: var(--papir); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 300; letter-spacing: var(--tracking); line-height: 1.05; margin: 0; text-wrap: balance; color: var(--blekk); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--glo); outline-offset: 3px; border-radius: var(--r-sm); }
button { font: inherit; }
.q { font-family: var(--font-heading); font-style: italic; font-weight: 300; letter-spacing: var(--tracking); line-height: 1.05; text-wrap: balance; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--glo); color: var(--hvit); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; }

/* Sentrert seksjonshode, Wildhaven-rytme */
.center { text-align: center; max-width: var(--narrow); margin: 0 auto var(--sp-2xl); }
.center .kicker { display: block; margin-bottom: var(--sp-sm); }
.center h2 { font-size: clamp(1.65rem, 3vw, 2.7rem); }
.center p { margin-top: var(--sp-sm); color: var(--tekst-sekundar); font-size: var(--lg); line-height: 1.5; }
.kicker { font-size: var(--xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gran); }

/* Knapper: piller */
.btn { display: inline-flex; align-items: center; gap: .7em; padding: 1em 1.8em; border-radius: var(--r-full); font-weight: 600; font-size: var(--sm); letter-spacing: .03em; text-decoration: none; color: var(--blekk); background: var(--papir); border: 1px solid transparent; transition: transform var(--dur3) var(--ease-out), background var(--dur3), color var(--dur3), border-color var(--dur3); }
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glo-dyp); transform: scaleX(0); transform-origin: left; transition: transform var(--dur3) var(--ease-out); }
.btn:hover::before { transform: scaleX(1); }
.btn-ghost::before { background: rgba(245,240,230,.12); }
.site-nav .btn::before, .om .links a::before { display: none; }
.btn svg { width: 1em; height: 1em; transition: transform var(--dur3) var(--ease-out); }
.btn-ghost svg { opacity: .8; }
.btn:hover { transform: translateY(-1px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: none; }
.btn-glo { background: var(--glo); color: var(--hvit); }
.btn-glo:hover { background: var(--glo); }
.btn-ghost { background: transparent; color: var(--papir); border-color: rgba(245,240,230,.5); }
.btn-ghost:hover { background: rgba(245,240,230,.12); border-color: var(--papir); }
.btn-ink { background: var(--blekk); color: var(--papir); }
.btn-ink:hover { background: #2A342E; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 30; color: var(--papir); transition: background var(--dur3), color var(--dur3), border-color var(--dur3); border-bottom: 1px solid transparent; }
.site-header.is-solid { background: color-mix(in srgb, var(--papir) 94%, transparent); color: var(--blekk); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--linje); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 1.1rem var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.wordmark { font-family: var(--font-heading); font-weight: 500; font-size: var(--xl); letter-spacing: var(--tracking); text-decoration: none; line-height: 1; display: inline-flex; align-items: center; gap: .55em; }
.wordmark svg { width: 1.5em; height: 1.5em; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); }
.site-nav a:not(.btn) { font-size: var(--xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; opacity: .92; transition: opacity var(--dur2); }
.site-nav a:not(.btn):hover { opacity: 1; }
@media (min-width: 821px) { .site-nav a:not(.btn) { position: relative; padding: .3rem 0; } .site-nav a:not(.btn)::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: currentColor; transition: left var(--dur3) var(--ease-out), right var(--dur3) var(--ease-out); } .site-nav a:not(.btn):hover::after { left: 0; right: 0; } }
.site-nav .btn { padding: .7em 1.3em; font-size: var(--xs); letter-spacing: .1em; text-transform: uppercase; }
.site-header:not(.is-solid) .site-nav .btn { background: var(--papir); color: var(--blekk); }
.site-header.is-solid .site-nav .btn { background: var(--blekk); color: var(--papir); }
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: inherit; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--dur3) var(--ease-out); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 820px) {
  .menu-toggle { display: flex; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; background: var(--blekk); color: var(--papir); padding: .5rem var(--gutter) 1.5rem; clip-path: inset(0 0 100% 0); transition: clip-path var(--dur4) var(--ease-out); }
  .site-nav.is-open { clip-path: inset(0 0 0 0); }
  .site-nav a:not(.btn) { font-family: var(--font-heading); font-weight: 300; font-size: var(--2xl); letter-spacing: var(--tracking); text-transform: none; padding: .8rem 0; width: 100%; border-bottom: 1px solid rgba(245,240,230,.16); }
  .site-nav .btn { margin-top: 1rem; }
}

/* Hero: fullskjerm-foto med bildeskift og framdriftsstreker */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--papir); background: var(--blekk); overflow: hidden; isolation: isolate; }
.slides { position: absolute; inset: 0; z-index: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms var(--ease-out); }
.slide.is-active { opacity: 1; }
.slide picture { position: absolute; inset: 0; display: block; }
.slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transform: scale(1.025); transition: transform calc(var(--slide) + 1600ms) linear; }
.slide.is-active img { transform: scale(1); }
.slide-2 { background: var(--blekk); }
.slide-2 img { object-position: 50% 22%; }
/* Mobil: ansiktet opp i høyre hjørne over teksten, og mørkere tekstfelt. Portrettet er 2:3 og dekker 390 px bredde med stor beskjæring. */
@media (max-width: 899px) { .slide-2 img { object-position: 55% 12%; } }
.slide-3 img { object-position: 68% 40%; }
@media (max-width: 899px) { .slide-3 img { object-position: 74% 50%; } }
@media (min-width: 900px) {
  .slide-2 picture { left: 42%; }
  .slide-2::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, var(--blekk) 40%, rgba(30,38,33,.6) 52%, transparent 70%); }
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(30,38,33,.78) 0%, rgba(30,38,33,.25) 45%, rgba(30,38,33,.15) 100%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; padding: 9rem var(--gutter) 6.5rem; max-width: var(--wrap); margin: 0 auto; width: 100%; }
.hero-copy .kicker { color: var(--glo-lys); display: block; margin-bottom: var(--sp-sm); }
/* Hva han gjør leses først (upright, 0,5 s), spørsmålet rett under i merkets stemme. Alle andre steder får spørsmålet mest plass. */
.hero-copy h1 { font-family: var(--font-heading); font-weight: 300; letter-spacing: var(--tracking); line-height: 1.02; text-wrap: balance; font-size: clamp(2.6rem, 6vw, 5.8rem); color: var(--papir); max-width: 12ch; }
.hero-proof { list-style: none; padding: 0; margin: var(--sp-xl) 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: var(--xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,240,230,.72); }
.hero-proof li { display: flex; align-items: center; gap: .6rem; }
.hero-proof li::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--glo); }
.hero-copy .actions { margin-top: var(--sp-xl); display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md); align-items: center; }
.progress { position: absolute; z-index: 2; left: 0; right: 0; bottom: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; padding: 0 var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.progress button { height: 18px; background: none; border: 0; padding: 8px 0; cursor: pointer; position: relative; }
.progress button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(245,240,230,.3); }
.progress button::after { content: ""; position: absolute; left: 0; top: 8px; height: 2px; width: 0; background: var(--papir); }
.progress button.is-active::after { animation: fill var(--slide) linear forwards; }
.progress button.is-done::after { width: 100%; }
@keyframes fill { to { width: 100%; } }
/* Nettbrett og mobil (16.10.2026, som Kati og Amado): bildet fyller hele første skjerm, headeren ligger
   gjennomsiktig oppå, og tekst, knapp og bevis står nederst på bildet med en mørk overgang bak. */
@media (max-width: 899px) {
  .hero::after { background: linear-gradient(to top, rgba(30,38,33,.94) 0%, rgba(30,38,33,.72) 30%, rgba(30,38,33,.12) 58%, rgba(30,38,33,0) 72%, rgba(30,38,33,.4) 100%); }
  .hero-copy { padding: 8rem var(--gutter) 3.5rem; }
  .progress { bottom: 1rem; }
  /* Portrettet zoomet ut: hele bildebredden, plassert øverst, og nederkanten tones inn i blekk bak teksten. */
  .slide-2 picture { top: 0; bottom: auto; left: 50%; width: var(--pw, 100%); transform: translateX(-50%); -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }
  .slide-2 img { height: auto; }
  .kicker-navn { display: none; }
  .hero-copy h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); max-width: none; }
  .hero-copy .actions { margin-top: var(--sp-lg); gap: var(--sp-md); }
  .hero-copy .btn-ghost { border: 0; padding: 0; border-radius: 0; border-bottom: 1px solid rgba(245,240,230,.45); overflow: visible; }
  .hero-copy .btn-ghost::before { display: none; }
  .hero-proof { margin-top: var(--sp-lg); }
  .hero-proof li:nth-child(n+2) { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .slide-2 { --pw: 74%; }
  .slide-2 picture { -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, #000 62%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, #000 62%, transparent 96%); mask-composite: intersect; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero-copy h1 { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .hero-proof { display: none; }
}
/* Luft rundt hvert ord så kursivens overheng ikke klippes av masken; negativ marg holder ordavstanden uendret. */
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em .2em .1em .06em; margin: -.08em -.2em -.1em -.06em; }
.words .w > span { display: inline-block; transform: translateY(110%); animation: lineUp 1.1s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
@keyframes lineUp { to { transform: none; } }
.rise { animation: rise var(--dur5) var(--ease-out) both; } .rise.d1 { animation-delay: 120ms; } .rise.d2 { animation-delay: 320ms; }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
.fade { opacity: 0; animation: fadeIn var(--dur5) var(--ease-out) forwards; } .fade.d3 { animation-delay: 560ms; } .fade.d4 { animation-delay: 800ms; }
@keyframes fadeIn { to { opacity: 1; } }

/* Seksjoner */
.section { padding: var(--section) 0; }
.section.tone { background: var(--papir-dyp); --bg: var(--papir-dyp); }

/* Viftede kort */
.fan { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); align-items: stretch; max-width: 64rem; margin: 0 auto; }
.card { background: var(--blekk); color: var(--papir); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem); min-height: 24rem; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: opacity var(--io) var(--ease-out), transform var(--dur4) var(--ease-out), translate var(--dur4) var(--ease-out), box-shadow var(--dur4) var(--ease-out); position: relative; }
.card .idx { font-family: var(--font-heading); font-weight: 300; font-size: var(--xl); color: var(--glo-lys); font-variant-numeric: tabular-nums; }
.card .q { font-size: clamp(1.45rem, 2.2vw, 1.9rem); color: var(--papir); margin: var(--sp-md) 0 auto; }
.card .title { font-size: var(--xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,240,230,.6); margin-top: var(--sp-lg); }
.card .take { font-size: var(--sm); color: rgba(245,240,230,.82); margin-top: .5rem; line-height: 1.5; }
@media (min-width: 900px) {
  .fan .card:nth-child(1) { transform: rotate(-4deg) translateY(1.2rem); transform-origin: bottom right; }
  .fan .card:nth-child(3) { transform: rotate(4deg) translateY(1.2rem); transform-origin: bottom left; }
  .fan .card:nth-child(2) { z-index: 2; transform: translateY(-.6rem); }
  /* Hover: kortet løfter seg litt og skyggen blir dypere. Vinkelen står, ingen vipping etter musen. */
  .fan .card:hover { translate: 0 -.6rem; z-index: 3; box-shadow: 0 2px 6px rgba(30,38,33,.10), 0 34px 56px -26px rgba(30,38,33,.55); }
}
@media (max-width: 899px) { .fan { grid-template-columns: 1fr; max-width: 32rem; } .card { min-height: auto; } }
.fan-foot { text-align: center; margin-top: var(--sp-2xl); display: grid; gap: var(--sp-sm); justify-items: center; }
.fan-foot p { color: var(--tekst-sekundar); font-size: var(--sm); max-width: 48ch; }
.fan-foot a:not(.btn) { color: var(--glo-dyp); text-underline-offset: .2em; }

/* Ikonrader */
.rows { display: grid; gap: var(--sp-sm); max-width: 60rem; margin: 0 auto; }
.rowc { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: var(--sp-md); align-items: center; background: var(--papir); border-radius: var(--r-md); padding: 1.3rem 1.5rem; border: 1px solid var(--linje); transition: opacity var(--io) var(--ease-out), transform var(--dur3) var(--ease-out), border-color var(--dur3); }
.rowc:hover { transform: translateX(4px); border-color: var(--gran); }
.rowc .ico { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--papir); display: grid; place-items: center; color: var(--gran); }
.rowc .ico svg { width: 1.3rem; height: 1.3rem; }
.rowc h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--base); color: var(--tekst); }
.rowc p { font-size: var(--sm); color: var(--tekst-sekundar); margin-top: .15rem; }
.rowc .tag { font-size: var(--xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gran); white-space: nowrap; }
@media (max-width: 600px) { .rowc { grid-template-columns: 2.6rem minmax(0, 1fr); } .rowc .tag { grid-column: 2; } }

/* Bildebånd med sitat */
.band { position: relative; min-height: 80svh; display: grid; align-items: center; justify-items: start; color: var(--papir); overflow: hidden; text-align: left; background: var(--blekk); }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(30,38,33,.78) 0%, rgba(30,38,33,.55) 45%, rgba(30,38,33,.2) 100%); }
.band .inner { position: relative; z-index: 1; max-width: 46rem; padding: var(--section) var(--gutter); margin-left: max(0px, calc((100vw - var(--wrap)) / 2)); }
.band .kicker { color: var(--glo-lys); display: block; margin-bottom: var(--sp-md); }
.band .q { font-size: clamp(1.6rem, 3.6vw, 2.9rem); color: var(--papir); }
.band cite { display: block; margin-top: var(--sp-lg); font-style: normal; font-size: var(--xs); letter-spacing: .14em; text-transform: uppercase; color: rgba(245,240,230,.7); }
.band .credit { position: absolute; right: var(--gutter); bottom: 1rem; z-index: 1; font-size: var(--xs); color: rgba(245,240,230,.5); }

/* Mosaikk fra Kina: tre bilder, midterste senket */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); max-width: 68rem; margin: 0 auto; align-items: start; }
.mosaic figure, .proof figure { margin: 0; }
.mosaic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.mosaic figcaption, .proof figcaption { margin-top: .7rem; font-size: var(--xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-sekundar); }
@media (min-width: 701px) { .mosaic figure:nth-child(2) { transform: translateY(2rem); } }
@media (max-width: 700px) { .mosaic { grid-template-columns: 1fr; max-width: 32rem; } }

/* Anerkjennelser: scenebilde og to diplomer */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-lg); max-width: 64rem; margin: 0 auto; align-items: start; }
.proof img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; border-radius: var(--r-md); box-shadow: var(--shadow); background: var(--hvit); }
.proof .foto img { object-position: 50% 55%; }
@media (max-width: 700px) { .proof { grid-template-columns: 1fr; max-width: 24rem; } }

/* Lavt bånd før kontakt */
.band-low { min-height: 52svh; }
.band-low img { object-position: 50% 60%; }
.band-low .inner { padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); }
.band-low .q { font-size: clamp(1.5rem, 3vw, 2.4rem); }

/* Fra deltakere: to ujevne sitater, hårlinje i glo */

/* Tall */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-lg); max-width: 60rem; margin: 0 auto; text-align: center; }
.stats b { display: block; font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: var(--blekk); font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: .6rem; font-size: var(--sm); color: var(--tekst-sekundar); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }

/* Om */
.om { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-2xl) var(--sp-3xl); align-items: center; max-width: 68rem; margin: 0 auto; }
.om img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.om .kicker { display: block; margin-bottom: var(--sp-sm); }
.om h2 { font-size: clamp(1.65rem, 3vw, 2.7rem); margin-bottom: var(--sp-md); }
.om p { font-size: var(--lg); line-height: 1.55; color: var(--tekst); max-width: 40ch; }
.om ul { list-style: none; padding: 0; margin: var(--sp-lg) 0 0; display: grid; gap: .5rem; }
.om li { display: flex; gap: .8rem; align-items: baseline; font-size: var(--base); }
.om li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--glo); flex: 0 0 auto; transform: translateY(-.1em); }
.om .links { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.om .links a { font-size: var(--sm); font-weight: 600; color: var(--blekk); text-decoration: none; border: 1px solid var(--linje); border-radius: var(--r-full); padding: .55em 1.1em; transition: border-color var(--dur2), background var(--dur2); }
.om .links a:hover { border-color: var(--blekk); background: var(--papir-dyp); }
@media (max-width: 900px) { .om { grid-template-columns: 1fr; } .om img { max-width: 26rem; } }

/* Kontaktkort */
.contact-card { max-width: 60rem; margin: 0 auto; background: var(--papir-dyp); border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--linje); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; }
.contact-side { background: var(--blekk); color: var(--papir); padding: clamp(1.8rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-xl); }
.contact-side .kicker { color: var(--glo-lys); display: block; margin-bottom: var(--sp-sm); }
.contact-side .q { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--papir); }
.contact-side .tel { display: inline-block; font-family: var(--font-heading); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3rem); color: var(--glo-lys); text-decoration: none; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: .6rem; }
.contact-side .tel:hover { color: var(--papir); }
.contact-side .note { font-size: var(--sm); color: rgba(245,240,230,.7); }
.form { padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: var(--sp-md); }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-sekundar); }
.field input, .field textarea, .field select { font: inherit; color: var(--tekst); background: var(--papir); border: 1px solid var(--linje); border-radius: var(--r-md); padding: .8rem 1rem; width: 100%; transition: border-color var(--dur2); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gran); box-shadow: 0 0 0 3px rgba(61,86,72,.15); }
/* Egen pil i nedtrekksmenyen: nettleserens standardpil ligger helt ute i kanten og følger ikke paddingen. */
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%235A645D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: .9rem; padding-right: 2.8rem; cursor: pointer; }
.field select::-ms-expand { display: none; }
.field textarea { min-height: 6.5rem; resize: vertical; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.form-status { font-size: var(--sm); color: var(--tekst-sekundar); margin: 0; min-height: 1.4em; }
.form-status.err { color: var(--glo-dyp); }
.form-done { font-family: var(--font-heading); font-weight: 300; font-size: var(--2xl); line-height: 1.3; color: var(--blekk); border-left: 2px solid var(--glo); padding-left: var(--sp-md); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 820px) { .contact-card, .row-2 { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--blekk); color: rgba(245,240,230,.7); padding: var(--sp-3xl) 0 var(--sp-lg); font-size: var(--sm); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-xl) var(--sp-lg); }
.footer-grid .wordmark { color: var(--papir); margin-bottom: var(--sp-sm); }
.footer-grid p { max-width: 32ch; }
.footer-grid .fh { font-size: var(--xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--papir); margin: 0 0 var(--sp-sm); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-grid a { color: inherit; text-decoration: none; }
.footer-grid a:hover { color: var(--papir); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-sm); margin-top: var(--sp-2xl); padding-top: var(--sp-md); border-top: 1px solid rgba(245,240,230,.16); font-size: var(--xs); }
.footer-bottom a { color: inherit; }

.rule { display: block; width: 3rem; height: 1px; background: var(--glo); margin: var(--sp-md) auto 0; transform: scaleX(0); transition: transform var(--dur5) var(--ease-out) 200ms; }
:where(.reveal > *) { opacity: 0; transform: translateY(16px); transition: opacity var(--io) var(--ease-out), transform var(--io) var(--ease-out); }
:where(.reveal > :nth-child(2)) { transition-delay: 90ms; } :where(.reveal > :nth-child(3)) { transition-delay: 180ms; } :where(.reveal > :nth-child(4)) { transition-delay: 270ms; } :where(.reveal > :nth-child(5)) { transition-delay: 360ms; } :where(.reveal > :nth-child(n+6)) { transition-delay: 450ms; }
:where(.reveal.is-visible > *) { opacity: 1; transform: none; }
.reveal.is-visible .rule { transform: scaleX(1); }
.curtain { position: relative; display: block; }
.curtain::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); background: var(--bg); transform-origin: bottom; transition: transform var(--dur5) var(--ease-out) 150ms; pointer-events: none; }
.proof .curtain::after { border-radius: var(--r-md); }
.reveal.is-visible .curtain::after { transform: scaleY(0); }
.band img { transform: scale(1.06); transition: transform 2400ms var(--ease-out); }
.band:has(.is-visible) img { transform: none; }
.no-js .reveal > *, .no-js .rule, .no-js .band img { opacity: 1; transform: none; } .no-js .curtain::after { display: none; }
@media (prefers-reduced-motion: reduce) { .reveal > *, .rise, .fade, .words .w > span, .rule, .band img { animation: none; opacity: 1; transform: none; transition: none; } .curtain::after { display: none; } .btn::before { display: none; } .slide img { transform: none; transition: none; } .progress button.is-active::after { animation: none; width: 100%; } }

.notfound { min-height: 70svh; display: grid; align-items: center; background: var(--blekk); color: var(--papir); padding: var(--section) 0; text-align: center; }
.notfound .q { font-size: clamp(2.4rem, 6vw, 5rem); color: var(--papir); margin-bottom: var(--sp-lg); }

/* ==========================================================================
   Mer bevegelse (14.10.2026, Eskilds bestilling): mus- og scrollparallakse i heroen,
   rolig løft på kortene, ordvis innrulling av overskrifter på scroll, parallakse på
   bildebånd og portrett, hårlinjer som tegner seg, header som gjemmer seg på vei ned.
   Kun transform og opacity. Alt slås av ved prefers-reduced-motion.
   ========================================================================== */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: background var(--dur3), color var(--dur3), border-color var(--dur3), transform var(--dur4) var(--ease-out); }
.slides, .hero-copy { will-change: transform; }
@media (min-width: 900px) { .slide picture { top: -3%; bottom: -3%; } }

/* Ordvis innrulling av seksjonsoverskrifter når de kommer i bildet */
.words-io .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em .2em .12em .06em; margin: -.08em -.2em -.12em -.06em; }
.words-io .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.is-visible .words-io .w > span, .words-io.is-visible .w > span { transform: none; }

/* Kort: rolig løft på hover (16.10.2026: lyset og vippingen etter musen ble fjernet, det forstyrret lesingen) */
.card .idx { display: inline-block; transition: transform var(--dur4) var(--ease-out); }
.card:hover .idx { transform: translateX(.25rem); }

/* Ikonrader: ikonet vrir seg litt, taggen glir */
.rowc .ico { transition: transform var(--dur4) var(--ease-out), background var(--dur3); }
.rowc:hover .ico { transform: rotate(-10deg) scale(1.08); background: var(--gran-lys); }
.rowc .tag { transition: transform var(--dur4) var(--ease-out), color var(--dur3); }
.rowc:hover .tag { transform: translateX(-.3rem); color: var(--glo-dyp); }

/* Bånd: bildet beveger seg saktere enn siden (JS setter --py) */
.band picture { position: absolute; inset: -12% 0; display: block; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.band picture img { position: absolute; inset: 0; }

/* Mosaikk og anerkjennelser: forskjøvet teppe, rolig zoom på hover */
.mosaic .curtain, .proof .curtain, .om .curtain { overflow: hidden; border-radius: var(--r-lg); }
.proof .curtain { border-radius: var(--r-md); }
.mosaic figure:nth-child(2) .curtain::after, .proof figure:nth-child(2) .curtain::after { transition-delay: 320ms; }
.mosaic figure:nth-child(3) .curtain::after, .proof figure:nth-child(3) .curtain::after { transition-delay: 490ms; }
.mosaic img, .proof img, .om img { transition: transform 1.4s var(--ease-out); }
.mosaic figure:hover img, .proof figure:hover img { transform: scale(1.035); }
.om picture { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; display: block; }

/* Sitater: glo-hårlinjen tegner seg ovenfra */

/* Tall: kort glo-strek under hvert tall tegner seg etter at tallet har satt seg */
.stats b { position: relative; padding-bottom: .5rem; }
.stats b::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2rem; height: 1px; background: var(--glo); transform: translateX(-50%) scaleX(0); transition: transform var(--dur5) var(--ease-out) 500ms; }
.reveal.is-visible .stats b::after, .stats.is-visible b::after { transform: translateX(-50%) scaleX(1); }

/* Skjema: etiketten skifter farge når feltet har fokus */
.field:focus-within label { color: var(--gran); }
.contact-side .tel { transition: color var(--dur3), transform var(--dur4) var(--ease-out); display: inline-block; }
.contact-side .tel:hover { transform: translateX(.3rem); }

.no-js .words-io .w > span, .no-js .stats b::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .words-io .w > span, .stats b::after { transform: none !important; transition: none !important; }
  .band picture, .om picture, .slides, .hero-copy, .card { transform: none !important; }
  .site-header.is-hidden { opacity: 0; transform: none; }
  .mosaic figure:hover img, .proof figure:hover img { transform: none; }
}

/* Egen nedtrekksmeny i Jørgens palett (14.10.2026). Native select ligger skjult og bærer verdien. */
.dd { position: relative; }
.dd-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd-btn { font: inherit; color: var(--tekst); background: var(--papir); border: 1px solid var(--linje); border-radius: var(--r-md); padding: .8rem 2.8rem .8rem 1rem; width: 100%; text-align: left; cursor: pointer; transition: border-color var(--dur2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%235A645D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: .9rem; }
.dd-btn::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .9rem; height: .9rem; transform: translateY(-50%); transition: transform var(--dur3) var(--ease-out); }
.dd-btn:focus-visible, .dd.is-open .dd-btn { outline: none; border-color: var(--gran); box-shadow: 0 0 0 3px rgba(61,86,72,.15); }
.dd-btn.is-empty { color: var(--tekst-sekundar); }
.dd.is-open .dd-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 10l4.5-4.5L12.5 10' fill='none' stroke='%233D5648' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dd-list { position: absolute; left: 0; right: 0; top: calc(100% + .4rem); z-index: 8; margin: 0; padding: .4rem; list-style: none; background: var(--papir); border: 1px solid var(--linje); border-radius: var(--r-md); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur3) var(--ease-out), transform var(--dur3) var(--ease-out), visibility 0s var(--dur3); }
.dd.is-open .dd-list { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur3) var(--ease-out), transform var(--dur3) var(--ease-out); }
.dd-list li { display: flex; align-items: center; gap: .7rem; padding: .65rem .9rem; border-radius: var(--r-sm); cursor: pointer; color: var(--tekst); font-size: var(--base); transition: background var(--dur2), transform var(--dur3) var(--ease-out); }
.dd-list li::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--glo); opacity: 0; transform: scale(.4); transition: opacity var(--dur2), transform var(--dur3) var(--ease-out); flex: 0 0 auto; }
.dd-list li[aria-selected="true"] { color: var(--blekk); font-weight: 600; }
.dd-list li[aria-selected="true"]::before { opacity: 1; transform: none; }
.dd-list li:hover, .dd-list li.is-active { background: var(--papir-dyp); transform: translateX(2px); }
.dd-list li.is-muted { color: var(--tekst-sekundar); }
@media (prefers-reduced-motion: reduce) { .dd-list, .dd-list li, .dd-list li::before { transition: none; transform: none; } }
/* Nedtrekksmenyen må få ligge utenpå kortet: avrundingen flyttes til den mørke siden. */
.contact-card { overflow: visible; }
.contact-side { border-radius: var(--r-lg) 0 0 var(--r-lg); }
@media (max-width: 820px) { .contact-side { border-radius: var(--r-lg) var(--r-lg) 0 0; } }

/* Åpning: teppet. Merket tegnes i papirstrek, glo-prikken lander, navnet setter seg, overlegget glir opp.
   Klassen intro-on settes av skriptet i <head> FØR første maling, så det aldri blinker.
   Hero-animasjonene står på pause så lenge intro-on ligger på <html>. Styres fra app.js. */
.intro { display: none; }
.intro-on .intro, .intro.is-out { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 1.25rem; background: var(--blekk); color: var(--papir); transition: transform var(--dur5) var(--ease-out); will-change: transform; }
.intro.is-out { transform: translateY(-101%); }
.intro[hidden] { display: none; }
.intro-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: introDraw 1s var(--ease-out) var(--d) forwards; }
.intro-pop { transform: scale(0); transform-box: fill-box; transform-origin: center; animation: introPop var(--dur4) var(--ease-out) var(--d) forwards; }
.intro-mark .d-a { --d: .2s; } .intro-mark .d-b { --d: .6s; } .intro-mark .d-c { --d: 1.2s; }
.intro-name { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: var(--tracking); line-height: 1; opacity: 0; transform: translateY(10px); animation: introSettle 1.2s var(--ease-out) .9s forwards; }
.intro-name i { font-weight: 300; color: var(--glo-lys); }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introPop { to { transform: scale(1); } }
@keyframes introSettle { to { opacity: 1; transform: none; } }
.intro-skip { position: absolute; right: 1.5rem; bottom: 1.5rem; background: transparent; border: 1px solid rgba(245,240,230,.25); color: var(--papir); font-family: var(--font-body); font-size: var(--xs); letter-spacing: .18em; text-transform: uppercase; padding: .6rem 1rem; cursor: pointer; opacity: .7; transition: opacity var(--dur2); }
.intro-skip:hover, .intro-skip:focus-visible { opacity: 1; }
.intro-on .rise, .intro-on .fade, .intro-on .words .w > span { animation-play-state: paused; }

/* Foredragsseksjonen, lettere å lese (16.10.2026): tema øverst, spørsmålet delt, to korte punkter per kort. */
.ny .center p { max-width: 34ch; margin-inline: auto; }
.ny .intro1 { font-size: var(--lg); color: var(--tekst); margin-top: var(--sp-md); }
.ny .intro2 { color: var(--tekst-sekundar); margin-top: .6rem; }
.ny .intro3 { font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: var(--xl); line-height: 1.3; color: var(--blekk); margin-top: var(--sp-md); }
.ny .card .top { display: flex; align-items: baseline; gap: .8rem; }
.ny .card .tema { font-size: var(--xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,240,230,.62); line-height: 1.4; }
.ny .card .q { margin: var(--sp-md) 0 0; }
.ny .card .q2 { font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: var(--lg); line-height: 1.3; color: rgba(245,240,230,.72); margin-top: .6rem; }
.ny .card .bunn { margin-top: auto; padding-top: var(--sp-lg); border-top: 1px solid rgba(245,240,230,.14); }
.ny .card .q, .ny .card .q2 { margin-bottom: var(--sp-lg); } .ny .card .q:has(+ .q2) { margin-bottom: 0; }
.ny .card .lbl { font-size: var(--xs); color: var(--glo-lys); margin-bottom: .6rem; }
.ny .card .takes { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ny .card .takes li { position: relative; padding-left: 1.1rem; font-size: var(--sm); line-height: 1.45; color: rgba(245,240,230,.88); }
.ny .card .takes li::before { content: ""; position: absolute; left: 0; top: .6em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--glo); }
.ny .card { gap: 0; }
.ny .fan { margin-top: var(--sp-xl); }
.ny .fan-foot p + p { margin-top: -.3rem; }

/* Ute i verden (16.10.2026): delt intro, foredragstittelen for seg, bildene på linje, begge sitatene som kort under. */
.nyv .center p { max-width: 42ch; margin-inline: auto; }
.nyv .intro1 { font-size: var(--lg); color: var(--tekst); margin-top: var(--sp-md); }
.nyv .tittel { margin-top: var(--sp-md); display: grid; gap: .35rem; max-width: 30ch !important; }
.nyv .tittel span { font-size: var(--xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--glo-dyp); }
.nyv .tittel i { font-family: var(--font-heading); font-weight: 300; font-size: var(--xl); line-height: 1.3; color: var(--blekk); }
.nyv .intro2 { color: var(--tekst-sekundar); margin-top: var(--sp-md); }
.nyv .mosaic { margin-top: var(--sp-xl); }
.nyv .mosaic figure:nth-child(2) { transform: none; }
/* Sitatene: samme bredde og mellomrom som bildene over, like høye kort */
.sitater { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-md); max-width: 68rem; margin: var(--sp-2xl) auto 0; align-items: stretch; }
.sitater blockquote { margin: 0; padding: var(--sp-lg); background: var(--papir-dyp); border-radius: var(--r-lg); }
.sitater .q { font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--blekk); }
.sitater cite { display: block; margin-top: var(--sp-md); font-style: normal; font-size: var(--xs); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-sekundar); }
@media (max-width: 700px) { .sitater { grid-template-columns: 1fr; max-width: 32rem; } }

/* Undersider (16.10.2026): /foredrag, /om og /kontakt. Lavere hero med samme bildespråk, foredragene i full lengde. */
.page-hero { min-height: 74svh; }
.page-hero .hero-copy h1 { font-size: clamp(2.2rem, 3.4vw, 3.1rem); max-width: 20ch; }
.page-lede { margin-top: var(--sp-md); max-width: 40ch; font-size: var(--lg); line-height: 1.55; color: rgba(245,240,230,.86); }
@media (max-width: 899px) { .page-hero { min-height: 88svh; } .page-hero .hero-copy h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); } .page-lede { font-size: var(--base); } }
.section .center .lead1, .section .center .lead2, .section .center .lead3 { max-width: 40ch; margin-inline: auto; }
.lead1 { font-size: var(--lg); color: var(--tekst); margin-top: var(--sp-md); }
.lead2 { color: var(--tekst-sekundar); margin-top: .6rem; }
.lead3 { font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: var(--xl); line-height: 1.3; color: var(--blekk); margin-top: var(--sp-md); }
.lectures { max-width: 64rem; margin: var(--sp-xl) auto 0; display: grid; gap: var(--sp-md); }
.lecture { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-lg) var(--sp-2xl); background: var(--blekk); color: var(--papir); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow); scroll-margin-top: 6rem; }
.lecture .idx { display: block; font-family: var(--font-heading); font-weight: 300; font-size: var(--2xl); color: var(--glo-lys); }
.lecture .kicker { display: block; margin-top: var(--sp-sm); color: rgba(245,240,230,.62); }
.lecture h2 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: var(--tracking); color: var(--papir); margin-top: .5rem; }
.lecture .q { font-size: clamp(1.45rem, 2.2vw, 1.9rem); color: var(--papir); }
.lecture .q2 { font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: var(--lg); line-height: 1.3; color: rgba(245,240,230,.72); margin: .5rem 0 var(--sp-lg); }
.lecture .lec-body > p:not(.q):not(.q2) { color: rgba(245,240,230,.86); line-height: 1.65; max-width: 52ch; }
.lecture .lec-body > p + p:not(.q2) { margin-top: .8rem; }
@media (max-width: 760px) { .lecture { grid-template-columns: 1fr; } }
.facts-list { list-style: none; padding: 0; margin: var(--sp-xl) auto 0; max-width: 44rem; display: grid; }
.facts-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-sm) 0; border-top: 1px solid var(--linje); }
.facts-list b { font-family: var(--font-heading); font-weight: 400; font-size: var(--lg); color: var(--glo-dyp); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: center; align-items: center; margin-top: var(--sp-lg); }
.tlink { color: var(--glo-dyp); font-weight: 600; text-underline-offset: .2em; }

/* Foredragsfaner på /foredrag (16.10.2026): ett foredrag om gangen, rolig inntoning ved bytte. */
.lec-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-width: 64rem; margin: var(--sp-xl) auto 0; padding: .4rem; background: var(--papir); border: 1px solid var(--linje); border-radius: var(--r-full); }
.lec-tabs[hidden] { display: none; }
.lec-tabs button { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .6rem 1rem; border: 0; border-radius: var(--r-full); background: transparent; color: var(--tekst); font: 600 var(--sm)/1.2 var(--font-body); cursor: pointer; transition: background var(--dur3) var(--ease-out), color var(--dur3) var(--ease-out); }
.lec-tabs button span { font-family: var(--font-heading); font-weight: 300; font-size: var(--lg); color: var(--glo-dyp); transition: color var(--dur3); }
.lec-tabs button:hover { background: var(--papir-dyp); }
.lec-tabs button[aria-selected="true"] { background: var(--blekk); color: var(--papir); }
.lec-tabs button[aria-selected="true"] span { color: var(--glo-lys); }
.lec-tabs button:focus-visible { outline: 2px solid var(--glo); outline-offset: 2px; }
.lec-tabs + .lectures { margin-top: var(--sp-md); }
.lecture[role="tabpanel"] { min-height: 26rem; }
.lectures { position: relative; }
.lecture[hidden] { display: none; }
@media (max-width: 600px) {
  .lec-tabs { border-radius: var(--r-lg); gap: .3rem; }
  .lec-tabs button { flex-direction: column; gap: .15rem; border-radius: var(--r-md); padding: .55rem .4rem; font-size: var(--xs); }
  .lecture[role="tabpanel"] { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .lec-tabs button { transition: none; } }

/* /kontakt (16.10.2026): skjemaet skal synes med en gang. Lav hero, kortet ligger oppå nederkanten av bildet. */
.page-hero.kontakt-hero { min-height: 0; }
.kontakt-hero .hero-copy { padding-top: 7.5rem; padding-bottom: 9.5rem; }
.kontakt-hero .hero-copy h1 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); max-width: none; }
.kontakt-hero .page-lede { max-width: 52ch; }
.kontakt-sec { padding-top: 0; }
.kontakt-sec .contact-card { position: relative; z-index: 3; margin-top: -7rem; }
@media (max-width: 899px) {
  .kontakt-hero .hero-copy { padding-top: 6rem; padding-bottom: 6.5rem; }
  .kontakt-hero .page-lede { display: none; }
  .kontakt-sec .contact-card { margin-top: -4.5rem; }
  .kontakt-sec .contact-side { order: 2; border-radius: 0 0 var(--r-lg) var(--r-lg); } /* skjemaet først på mobil, telefonen under */
  .kontakt-sec .form { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .kontakt-hero .hero-copy { padding-top: 5.5rem; padding-bottom: 9rem; }
  .kontakt-hero .page-lede { display: none; }
}

.kontakt-hero .hero-copy .kicker { color: #F3C9AE; text-shadow: 0 1px 10px rgba(30,38,33,.55); } /* lysere glo, leses mot den lyse himmelen */

/* Undersidene, mer liv (18.10.2026): bilde til høyre, sitatlinje, ikon i formatkortene */
@media (min-width: 901px) { .om-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .om-flip > :first-child { order: 2; } }
.om-flip img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
.om p + p { margin-top: var(--sp-sm); }
.om .pull { font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: var(--xl); line-height: 1.3; color: var(--glo-dyp); margin-top: var(--sp-lg); max-width: 30ch; }
.formater .card .ico { width: 1.6rem; height: 1.6rem; color: var(--glo-lys); flex: 0 0 auto; align-self: center; }
@media (min-width: 900px) { .formater .card { min-height: 20rem; } }
.page-hero .actions { margin-top: var(--sp-lg); }
.fan-foot strong { color: var(--tekst); }
.mosaic + .facts-list { margin-top: var(--sp-2xl); }
/* /om: portrettet tar mer av bredden og hele høyden, mindre blekkflate (18.10.2026) */
@media (min-width: 900px) {
  /* Bredden følger høyden (ikke skjermbredden), så like mye av Jørgen vises på alle skjermer. Kanten tones ut mot blekk. */
  .om-hero .slide-2 picture { left: auto; right: 0; width: min(56%, 74svh); -webkit-mask-image: linear-gradient(to right, transparent, #000 30%); mask-image: linear-gradient(to right, transparent, #000 30%); }
  .om-hero .slide-2::before { display: none; }
  .om-hero .slide-2 img { object-position: 50% 8%; }
}
/* Bildeskift på undersidene (18.10.2026): prisutdelingen har Jørgen til høyre */
.slide-hoyre img { object-position: 80% 35%; }
.page-hero .progress { bottom: 1.5rem; }
.slide-hoyre::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(30,38,33,.42); }
@media (min-width: 900px) { .slide-hoyre::before { background: linear-gradient(to right, rgba(30,38,33,.88) 0%, rgba(30,38,33,.6) 42%, rgba(30,38,33,.15) 70%); } }

/* Forsiden kortet ned (18.10.2026): tre nye bevegelser */
/* 1. Kortene deles ut: de ligger i en bunke midt på og spres i vifte når de kommer inn. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .fan.reveal:not(.is-visible) .card:nth-child(1) { transform: translateX(104%) rotate(0deg); }
  .fan.reveal:not(.is-visible) .card:nth-child(3) { transform: translateX(-104%) rotate(0deg); }
  .fan.reveal:not(.is-visible) .card:nth-child(2) { transform: translateY(2.5rem); }
  .fan.reveal .card { transition: opacity 500ms var(--ease-out), transform 1.25s cubic-bezier(.2, .9, .25, 1.12), translate var(--dur4) var(--ease-out), box-shadow var(--dur4) var(--ease-out); }
  .fan.reveal .card:nth-child(1), .fan.reveal .card:nth-child(3) { transition-delay: 0ms, 260ms, 0ms, 0ms; }
}
/* 2. Bildestripen glir sidelengs mens du scroller forbi. Uten støtte kan den sveipes. */
.strip { margin: var(--sp-xl) 0 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip-track { display: flex; gap: var(--sp-md); width: max-content; padding: 0 var(--gutter); }
.strip figure { margin: 0; scroll-snap-align: center; }
.strip img { display: block; height: clamp(15rem, 30vw, 24rem); width: auto; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--hvit); }
.strip figcaption { margin-top: .7rem; font-size: var(--xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-sekundar); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip { overflow-x: clip; scroll-snap-type: none; }
    .strip-track { animation: strip-gli linear both; animation-timeline: view(); animation-range: cover 5% cover 95%; }
  }
}
@keyframes strip-gli { from { translate: 12vw 0; } to { translate: calc(-100% + 88vw) 0; } }
.nyv .sitater { margin-top: var(--sp-2xl); }
.nyv .intro2 { max-width: 46ch !important; }
/* 3. Tall og Om i én seksjon: tallene teller opp (app.js) */
.om-tall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.om-tall .stats { grid-template-columns: 1fr 1fr; gap: var(--sp-2xl) var(--sp-lg); max-width: none; }
@media (max-width: 900px) { .om-tall { grid-template-columns: 1fr; } }
/* /om Følg og lytt: tre lenkekort på rad (18.10.2026) */
.follow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); max-width: 60rem; margin: var(--sp-xl) auto 0; }
.follow a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--sp-md); align-items: center; padding: var(--sp-lg); background: var(--papir-dyp); border: 1px solid transparent; border-radius: var(--r-lg); color: var(--blekk); text-decoration: none; transition: translate var(--dur4) var(--ease-out), box-shadow var(--dur4) var(--ease-out), border-color var(--dur3); }
.follow .ico { grid-row: 1 / 3; width: 3rem; height: 3rem; border-radius: 50%; background: var(--papir); display: grid; place-items: center; color: var(--glo); transition: background var(--dur3), color var(--dur3), transform var(--dur4) var(--ease-out); }
.follow .ico svg { width: 1.35rem; height: 1.35rem; }
.follow .t { font-weight: 600; font-size: var(--base); align-self: end; }
.follow .s { font-size: var(--sm); color: var(--tekst-sekundar); align-self: start; }
.follow .pil { position: absolute; right: var(--sp-lg); top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; color: var(--glo); opacity: 0; translate: -.4rem 0; transition: opacity var(--dur3), translate var(--dur4) var(--ease-out); }
.follow a:hover, .follow a:focus-visible { translate: 0 -.3rem; border-color: var(--linje); box-shadow: var(--shadow); }
.follow a:hover .ico, .follow a:focus-visible .ico { background: var(--glo); color: var(--papir); transform: rotate(-8deg); }
.follow a:hover .pil, .follow a:focus-visible .pil { opacity: 1; translate: 0 0; }
@media (hover: none) { .follow .pil { opacity: 1; translate: 0 0; } }
@media (max-width: 800px) { .follow { grid-template-columns: 1fr; max-width: 26rem; } }

/* Undersidene synket med forsiden «Lysbordet» (18.10.2026): bildene i innholdet blir polaroider på lys flate */
:root { --ramme: #FFFDF8; --pol-skygge: 0 1px 1px rgba(30,38,33,.08), 0 14px 30px -12px rgba(30,38,33,.38), 0 30px 60px -30px rgba(30,38,33,.3); }
.om .curtain, .mosaic .curtain { background: var(--ramme); padding: .6rem .6rem 2rem; border-radius: 2px; box-shadow: var(--pol-skygge); overflow: hidden; }
.om .curtain img, .mosaic .curtain img { border-radius: 1px; box-shadow: none; }
.om .curtain::after, .mosaic .curtain::after { border-radius: 2px; }
.om > :first-child .curtain { rotate: -2deg; }
.om-flip > :first-child .curtain { rotate: 2deg; }
.mosaic figure:nth-child(1) .curtain { rotate: -2.5deg; } .mosaic figure:nth-child(2) .curtain { rotate: 1.5deg; } .mosaic figure:nth-child(3) .curtain { rotate: -1deg; }
.om .curtain, .mosaic .curtain { transition: rotate var(--dur4) var(--ease-out), scale var(--dur4) var(--ease-out); }
.om .curtain:hover, .mosaic figure:hover .curtain { rotate: 0deg; scale: 1.02; }
.mosaic figcaption { font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: var(--sm); letter-spacing: 0; text-transform: none; margin-top: -1.6rem; position: relative; padding-left: .8rem; color: var(--tekst-sekundar); }
@media (prefers-reduced-motion: reduce) { .om .curtain, .mosaic .curtain { rotate: 0deg !important; } }

/* Konvertering (18.10.2026): korte svar ved skjemaet, «Spør om dette foredraget», små formatkort på forsiden */
.svar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-md) var(--sp-lg); max-width: 68rem; margin: var(--sp-xl) auto 0; }
.svar > div { display: grid; gap: .35rem; padding-top: var(--sp-sm); border-top: 1px solid var(--linje); }
.svar dt { font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: var(--lg); color: var(--blekk); }
.svar dd { margin: 0; font-size: var(--sm); color: var(--tekst-sekundar); line-height: 1.5; }
@media (max-width: 900px) { .svar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .svar { grid-template-columns: 1fr; } }
.spor { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-md); font-size: var(--sm); font-weight: 600; color: var(--glo-dyp); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1rem; }
.spor svg { width: 1rem; height: 1rem; transition: translate var(--dur3) var(--ease-out); }
.spor:hover svg, .spor:focus-visible svg { translate: .25rem 0; }
.lecture .spor { color: var(--glo-lys); }
.format-mini { list-style: none; padding: 0; margin: var(--sp-2xl) auto 0; max-width: 64rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); }
.format-mini li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: start; padding: var(--sp-md) var(--sp-lg); background: var(--ramme, #FFFDF8); border-radius: 2px; box-shadow: 0 1px 1px rgba(30,38,33,.06), 0 12px 26px -16px rgba(30,38,33,.35); }
.format-mini li:nth-child(1) { rotate: -1deg; } .format-mini li:nth-child(3) { rotate: 1deg; }
.format-mini svg { grid-row: 1 / 3; width: 1.4rem; height: 1.4rem; color: var(--glo); margin-top: .15rem; }
.format-mini b { font-weight: 600; }
.format-mini span { font-size: var(--sm); color: var(--tekst-sekundar); line-height: 1.45; }
@media (max-width: 800px) { .format-mini { grid-template-columns: 1fr; max-width: 30rem; } .format-mini li { rotate: 0deg !important; } }

/* Undersidene: lik, lavere hero på /foredrag og /om (18.10.2026), så de leses som undersider */
@media (min-width: 900px) {
  .page-hero:not(.kontakt-hero) { min-height: 66svh; }
  .page-hero:not(.kontakt-hero) .hero-copy { padding-top: 8rem; padding-bottom: 4.5rem; }
  .page-hero .hero-copy h1 { font-size: clamp(2.2rem, 3.4vw, 3.1rem); max-width: 20ch; }
  .page-hero .hero-proof { margin-top: var(--sp-lg); }
}
@media (max-width: 899px) { .page-hero:not(.kontakt-hero) { min-height: 80svh; } }

/* Nettbrett og mobil ryddet (18.10.2026) */
/* Bildene fra GCNEC på forsiden: rolig rutenett under PC-bredde, ingen glidning ut over kanten */
@media (max-width: 1023px) {
  .lb-strip { animation: none !important; translate: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; gap: var(--sp-lg) var(--sp-md); }
  .lb-strip .pol:nth-child(1) { transform: rotate(-1.5deg); } .lb-strip .pol:nth-child(2) { transform: rotate(1.5deg); }
  .lb-strip .pol:nth-child(3) { transform: rotate(1deg); } .lb-strip .pol:nth-child(4) { transform: rotate(-1deg); }
}
/* Kontaktskjemaet: smalere og tettere */
.contact-card { max-width: 54rem; }
.form { padding: clamp(1.4rem, 3vw, 2.2rem); gap: var(--sp-sm); }
.contact-side { padding: clamp(1.4rem, 3vw, 2.2rem); }
.field input, .field textarea, .field select, .dd-btn { padding-top: .65rem; padding-bottom: .65rem; }
.field textarea { min-height: 5.5rem; }
@media (max-width: 820px) {
  .contact-card { max-width: 38rem; }
  .row-2 { grid-template-columns: 1fr 1fr; }
  .contact-side { flex-direction: row; flex-wrap: wrap; gap: var(--sp-md) var(--sp-xl); }
  .contact-side > div { flex: 1 1 14rem; }
  .contact-side .tel { font-size: 2rem; }
  .contact-side .q { font-size: var(--lg) !important; }
}
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }
/* Footer: merke og knapp på egen rad, tre lenkespalter */
.footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: start; }
.footer-brand { display: grid; gap: var(--sp-sm); justify-items: start; }
.footer-brand .wordmark { font-size: 1.5rem; margin: 0; }
.footer-brand .btn { margin-top: var(--sp-xs, .4rem); }
.footer-grid .fh { color: var(--glo-lys); }
.footer-grid ul a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur3) var(--ease-out), color var(--dur3); padding-bottom: 1px; }
.footer-grid ul a:hover { background-size: 100% 1px; }
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-lg); padding-bottom: var(--sp-lg); border-bottom: 1px solid rgba(245,240,230,.12); }
  .footer-brand .wordmark { grid-column: 1; } .footer-brand p { grid-column: 1; }
  .footer-brand .btn { grid-column: 2; grid-row: 1 / 3; margin: 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-sm); font-size: .8125rem; }
  .footer-brand { grid-template-columns: 1fr; }
  .footer-brand .btn { grid-column: 1; grid-row: auto; }
}