/* ============================================================
   DESIGNSYSTEM, varm redaksjonell, leken aksent
   ============================================================ */
:root{
  /* Flater */
  --paper:#e6e9df;
  --paper-2:#eef1e8;

  /* Blekk / tekst */
  --ink:#16302a;
  --ink-2:#4c5f55;
  --ink-3:#8a988e;

  /* Linjer */
  --line:rgba(22,48,42,.14);
  --line-2:rgba(22,48,42,.26);

  /* Aksent, dus, brent oransje (tweakbar) */
  --accent:#bd6a39;
  --accent-ink:#f1efe5;
  --accent-soft:color-mix(in srgb, var(--accent) 14%, var(--paper));

  /* British racing green, dypt panel */
  --brg:#0d3527;
  --brg-2:#0e3a2b;
  --on-green:#e8ebe0;

  /* Skrift */
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --hand:'Caveat', cursive;

  /* Mål */
  --maxw:1120px;
  --gutter:clamp(1.25rem, 5vw, 4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:14px;
}

/* ============================================================
   RESET / BASIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* mild papirtekstur */
  background-image:radial-gradient(var(--line) .5px, transparent .5px);
  background-size:22px 22px;
}

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.05; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

/* ============================================================
   LAYOUT-HJELPERE
   ============================================================ */
.site-header,
.section,
.hero,
.site-footer{
  width:min(100% - 0px, var(--maxw));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:20;
  padding-block:1rem;
  backdrop-filter:saturate(1.2) blur(8px);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav__brand{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600; letter-spacing:-.01em; font-size:1.05rem;
}
.nav__mark{
  width:14px; height:14px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.nav__links{ display:flex; gap:clamp(1rem,3vw,2rem); font-size:.95rem; }
.nav__links a{ color:var(--ink-2); transition:color .2s var(--ease); }
.nav__links a:hover{ color:var(--accent); }
@media (max-width:520px){ .nav__links{ gap:1rem; } .nav__brand{ font-size:1rem; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:clamp(1.25rem, 4vw, 3rem) clamp(2.5rem,6vw,4rem); position:relative; }
.hero > *{ position:relative; z-index:1; }

/* ── Clippy: binders-assistenten i hero ──────────────────── */
.clippy{
  position:absolute; z-index:2;
  top:50%; right:clamp(0rem, 3vw, 2.5rem);
  transform:translateY(-50%);
  width:clamp(150px, 19vw, 215px);
}
.clippy__char{
  display:block; width:100%; padding:0; margin:0;
  border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.clippy__char:focus-visible .clippy__wire{ stroke:var(--accent); }
.clippy__svg{ width:100%; height:auto; display:block; overflow:visible; }

.clippy__wire{
  fill:none; stroke:var(--ink); stroke-width:8;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
}
.is-ready .clippy__wire{ animation:clippy-draw 1.8s var(--ease) forwards; }
@keyframes clippy-draw{ to{ stroke-dashoffset:0; } }

.clippy__face{ opacity:0; }
.is-ready .clippy__face{ animation:clippy-face-in .5s var(--ease) 1.5s forwards; }
@keyframes clippy-face-in{ to{ opacity:1; } }
.clippy__eye{ fill:#f6f4ec; stroke:var(--ink); stroke-width:3; }
.clippy__pupil{ fill:var(--ink); }
.clippy__brow{ fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
.clippy__eyes{ transform-box:fill-box; transform-origin:center; }
.clippy__brow{ transform-box:fill-box; transform-origin:center bottom; }

/* idle-liv: vipp + blunk + blikk + bryn, ulike perioder = organisk */
[data-motion="on"] .is-ready .clippy__svg{
  transform-origin:50% 82%;
  animation:clippy-bob 3.6s ease-in-out 1.9s infinite;
}
[data-motion="on"] .is-ready .clippy__eyes{ animation:clippy-blink 5s ease-in-out 2s infinite; }
[data-motion="on"] .is-ready .clippy__pupil{ animation:clippy-look 8s ease-in-out 3s infinite; }
[data-motion="on"] .is-ready .clippy__brow{ animation:clippy-brow 8s ease-in-out 3s infinite; }
@keyframes clippy-bob{
  0%,100%{ transform:translateY(0) rotate(-2.5deg); }
  50%{ transform:translateY(-7px) rotate(2.5deg); }
}
@keyframes clippy-blink{ 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.08); } }
@keyframes clippy-look{ 0%,28%,72%,100%{ transform:translateX(0); } 40%,56%{ transform:translateX(5px); } }
@keyframes clippy-brow{ 0%,34%,62%,100%{ transform:translateY(0); } 44%,54%{ transform:translateY(-4px); } }

/* ── Snakkeboble ─────────────────────────────────────────── */
.clippy__bubble{
  position:absolute; z-index:3;
  right:calc(100% - 34px); top:0;
  width:min(74vw, 265px);
  background:var(--paper-2);
  border:1.5px solid var(--ink);
  border-radius:16px;
  padding:.95rem 1.05rem .85rem;
  box-shadow:0 16px 36px -18px rgba(22,48,42,.55);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
/* Åpning/lukking styres av .3s-overgangen over (ingen forsinket pop, som ellers
   gjorde at boblen lå usynlig en stund hver gang man åpnet den på nytt). */
.clippy[data-open="false"] .clippy__bubble{ opacity:0; transform:scale(.85) translateY(6px); pointer-events:none; }
.clippy__bubble::after{
  content:""; position:absolute; right:-7px; top:22px;
  width:14px; height:14px; background:var(--paper-2);
  border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  transform:rotate(-45deg);
}
.clippy__close{
  position:absolute; top:5px; right:8px; border:0; background:none;
  cursor:pointer; font-size:1.25rem; line-height:1; color:var(--ink-3);
}
.clippy__close:hover{ color:var(--accent); }
.clippy__hi{ font-size:.9rem; color:var(--ink-2); }
.clippy__hi strong{ color:var(--ink); }
.clippy__text{ font-family:var(--serif); font-size:1.18rem; line-height:1.15; margin-top:.15rem; }
.clippy__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.clippy__chip{
  font-size:.8rem; font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:999px; padding:.25rem .65rem;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.clippy__chip:hover{ border-color:var(--accent); color:var(--accent); }
.clippy__soon{ font-family:var(--hand); color:var(--accent); font-size:1.05rem; margin-top:.55rem; }

/* ── Chat: Bindersen svarer ──────────────────────────────── */
.clippy__log{
  display:flex; flex-direction:column; gap:.45rem;
  max-height:200px; overflow-y:auto;
  margin-top:.6rem; padding-right:.15rem;
}
.clippy__msg{
  position:relative;
  font-size:.95rem; line-height:1.3; max-width:90%;
  padding:.4rem .6rem; border-radius:13px; white-space:pre-wrap;
}
.clippy__msg--bot{
  align-self:flex-end; color:var(--on-green);
  background:var(--brg);
  border-bottom-right-radius:4px;
}
.clippy__msg--bot::before{
  content:""; position:absolute; right:-3px; bottom:8px;
  width:9px; height:9px; background:var(--brg);
  border-radius:1px; transform:rotate(45deg);
}
.clippy__msg--me{
  align-self:flex-start; color:var(--accent-ink); background:var(--accent);
  border-bottom-left-radius:4px;
}
.clippy__msg--me::before{
  content:""; position:absolute; left:-3px; bottom:8px;
  width:9px; height:9px; background:var(--accent);
  border-radius:1px; transform:rotate(45deg);
}
.clippy__msg.is-thinking{ opacity:.55; letter-spacing:.18em; }

.clippy__form{ display:flex; gap:.4rem; margin-top:.65rem; }
.clippy__input{
  flex:1; min-width:0; font:inherit; font-size:.92rem;
  padding:.45rem .65rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:999px;
}
.clippy__input:focus-visible{ outline:none; border-color:var(--accent); }
.clippy__send{
  flex:none; width:36px; border:0; cursor:pointer; border-radius:999px;
  background:var(--ink); color:#fff; font-size:1rem; line-height:1;
  transition:background-color .2s var(--ease);
}
.clippy__send:hover{ background:var(--accent); }
.clippy__input:disabled,.clippy__send:disabled{ opacity:.5; cursor:default; }

@media (max-width:880px){
  .clippy{
    position:static; transform:none; width:100%; margin:2.5rem 0 0;
    display:flex; flex-direction:column-reverse; align-items:center;
  }
  .clippy__char{ width:118px; }
  .clippy__bubble{
    position:static; transform:none; margin-top:1.3rem; max-width:300px;
    left:auto; right:auto; top:auto; bottom:auto;
  }
  .clippy[data-open="false"] .clippy__bubble{ display:none; }
  .clippy__bubble::after{ display:none; }
  .is-ready .clippy[data-open="true"] .clippy__bubble{ animation:none; }
}
@media (prefers-reduced-motion:reduce){
  .clippy__wire{ stroke-dashoffset:0; }
  .clippy__face{ opacity:1; }
  .clippy__svg,.clippy__eyes,.clippy__pupil,.clippy__brow,.clippy__bubble{ animation:none !important; }
}
.hero__title{
  font-size:clamp(2.6rem, 1.8rem + 5.2vw, 5.6rem);
  max-width:14ch; letter-spacing:-.01em;
}
.hero__title em{ color:var(--accent); }
.hero__strike{ position:relative; white-space:nowrap; }
.hero__strike::after{
  content:""; position:absolute; left:-2%; right:-2%; top:54%;
  height:.09em; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease) .4s;
}
.is-ready .hero__strike::after{ transform:scaleX(1); }

/* Håndskrevne margnotater */
.margin-note{
  font-family:var(--hand); color:var(--accent);
  font-size:1.5rem; line-height:1.1; transform:rotate(-2.5deg);
}
[data-notes="off"] .margin-note{ display:none; }

/* ============================================================
   SECTION-HODER
   ============================================================ */
.section__head{ margin-bottom:clamp(2rem,4vw,3.2rem); max-width:60ch; }
.section__title{
  font-size:clamp(2rem,1.5rem + 2.5vw,3.4rem);
  margin-bottom:.6rem;
}
.section__title::before{
  content:""; display:inline-block; vertical-align:middle;
  width:.55em; height:.55em; margin-right:.5rem; border-radius:50%;
  background:var(--accent);
}
.section__intro{ color:var(--ink-2); font-size:1.1rem; }
.section__intro strong{ color:var(--ink); font-weight:600; }

/* ============================================================
   ARBEID, prosjekt-karusell, 2 rader som scroller sidelengs
   ============================================================ */
/* Hode med plass til bla-knapper ute til høyre */
.section__head--carousel{
  max-width:none;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
}
.section__head--carousel .section__head-main{ max-width:60ch; }

/* Bla-knapper, kun desktop (vises av main.js når det finnes mer å se) */
.carousel__nav{ display:flex; gap:.6rem; flex-shrink:0; }
.carousel__nav[hidden]{ display:none; }
.carousel__btn{
  inline-size:2.9rem; block-size:2.9rem;
  display:grid; place-items:center;
  font-size:1.15rem; line-height:1; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:50%; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .15s var(--ease), opacity .2s var(--ease);
}
.carousel__btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.carousel__btn:active{ transform:scale(.9); }
.carousel__btn:disabled{ opacity:.3; cursor:default; }
.carousel__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Skall, holder kant-toningene som hinter «det er mer» */
.carousel{ position:relative; }
.carousel::before,
.carousel::after{
  content:""; position:absolute; top:0; bottom:0;
  inline-size:clamp(1.4rem, 5vw, 3.2rem);
  pointer-events:none; z-index:2; opacity:0;
  transition:opacity .3s var(--ease);
}
.carousel::before{ left:0;  background:linear-gradient(to right, var(--paper), transparent); }
.carousel::after { right:0; background:linear-gradient(to left,  var(--paper), transparent); }
.carousel.can-left::before{ opacity:1; }
.carousel.can-right::after{ opacity:1; }

/* Selve sporet, 2 rader og uendelig mange kolonner, x-scroll med snap */
.cards{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2, auto);
  grid-auto-columns:clamp(270px, 80vw, 344px);
  gap:1.5rem;
  margin:0; padding:.9rem 0 2rem;          /* luft til hover-løft + scrollbar */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--accent) 60%, transparent) transparent;
}
.cards:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--radius); }
.cards::-webkit-scrollbar{ height:8px; }
.cards::-webkit-scrollbar-track{ background:transparent; }
.cards::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent) 50%, transparent); border-radius:999px;
}
.cards::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Skjul piler der sidelengs sveiping er naturlig (touch / smale skjermer) */
@media (max-width:680px), (pointer:coarse){
  .carousel__nav{ display:none; }
}

.card{ scroll-snap-align:start; }
.card{
  display:flex; flex-direction:column; height:100%;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 16px 44px -20px rgba(22,48,42,.55);
}
.card__media{
  display:block; aspect-ratio:16 / 10; overflow:hidden;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.card__media img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
  transition:transform .45s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.035); }
.card__body{ display:flex; flex-direction:column; flex:1; padding:1.3rem 1.5rem 1.5rem; }
.card__title{ font-size:1.65rem; }
.card__desc{ margin-top:.55rem; color:var(--ink-2); font-size:1rem; flex:1; }
.card__actions{
  margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.tag{
  font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem;
}
.card__links{ display:inline-flex; gap:1.1rem; }
.card__links a{
  font-weight:600; font-size:.92rem; color:var(--ink);
  border-bottom:1.5px solid var(--accent); padding-bottom:1px;
  transition:color .2s var(--ease);
}
.card__links a:hover{ color:var(--accent); }

/* ============================================================
   ERFARING, tidslinje på dypt grønt panel
   ============================================================ */
.section--cv{
  width:100%;
  max-width:none; padding-inline:var(--gutter);
  background:var(--brg);
  color:var(--on-green);
}
.section--cv > *{
  width:min(100%, var(--maxw)); margin-inline:auto;
}
.section--cv .section__title{ color:var(--on-green); }
.section--cv .section__intro{ color:color-mix(in srgb, var(--on-green) 75%, transparent); }
.section--cv .margin-note{ color:var(--accent); }

.timeline{ position:relative; display:grid; gap:.4rem; }
.timeline__item{
  display:grid;
  grid-template-columns:minmax(8.5rem, 11rem) 1fr;
  gap:clamp(1rem,3vw,2.5rem);
  padding:1.5rem 0;
  border-top:1px solid color-mix(in srgb, var(--on-green) 16%, transparent);
}
.timeline__item:last-child{ border-bottom:1px solid color-mix(in srgb, var(--on-green) 16%, transparent); }
.timeline__when{
  font-variant-numeric:tabular-nums; font-size:.9rem; font-weight:500;
  color:color-mix(in srgb, var(--on-green) 65%, transparent);
  padding-top:.45rem;
}
.timeline__role{ font-size:1.5rem; line-height:1.12; color:var(--on-green); }
.timeline__org{
  font-weight:600; font-size:.92rem; margin-top:.25rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:.06em;
}
.timeline__text{ margin-top:.7rem; color:color-mix(in srgb, var(--on-green) 82%, transparent); max-width:62ch; }
.timeline__item--edu .timeline__role{ font-style:italic; }
@media (max-width:620px){
  .timeline__item{ grid-template-columns:1fr; gap:.4rem; }
  .timeline__when{ padding-top:0; order:-1; }
}

/* ============================================================
   KONTAKT
   ============================================================ */
.section--contact{ text-align:center; }
.section--contact .section__title::before{ display:none; }
.contact__lead{ max-width:46ch; margin:1rem auto 2.4rem; color:var(--ink-2); font-size:1.2rem; }
.contact__links{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
.contact__links a{
  display:grid; gap:.2rem; text-align:left;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.1rem 1.6rem; min-width:230px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.contact__links a:hover{ border-color:var(--accent); transform:translateY(-3px); }
.contact__type{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.contact__value{ font-size:1.15rem; font-weight:500; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  padding-block:2.5rem 3rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between;
  color:var(--ink-3); font-size:.9rem;
}
.site-footer__hint{ font-variant-numeric:tabular-nums; letter-spacing:.15em; opacity:.55; }

/* ============================================================
   INNGANGS-ANIMASJON (respekterer reduced-motion + data-motion)
   ============================================================ */
[data-motion="on"] .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-motion="on"] .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-motion="on"] .reveal{ opacity:1; transform:none; transition:none; }
  .hero__strike::after,.nytteverdi__fill{ transition:none; }
}

/* "Ekstra ubrukelig"-modus (Konami) */
body.konami{ animation:tilt 6s var(--ease) infinite alternate; }
@keyframes tilt{ from{ filter:hue-rotate(0); } to{ filter:hue-rotate(-12deg); } }
body.konami .card:hover{ transform:translateY(-4px) rotate(-1deg); }