/* ============================================================
   DESIGNSYSTEM
   Et stille ark med blekk og en penn.

   Tre regler som holder siden sammen:
   1. Tekst står i ro. Det som beveger seg er streker: de tegnes.
   2. Oransje er pennen til Espen. I ro finnes den to steder: streken
      over «ubrukelige» og margnotatet. Ellers bare der du peker.
   3. En skriftfamilie. Størrelse, vekt og kursiv gjør resten.

   Arket selv er ikke flatt: bak alt ligger en dis av papir, uttynnet
   blekk og uttynnet penn (bakgrunn.js). Den bryter ingen av reglene.
   Den er vær, ikke innhold: den driver for sakte til å ses i fart, og
   den bruker ingen farge som ikke står i :root. Glatte flater (det
   grønne panelet, bildene, snakkebobla) er det den måles mot, så de
   skal forbli glatte.
   ============================================================ */

/* Source Serif 4, variabel (vekt 300 til 700, optisk størrelse 8 til 60).
   Ligger i repoet, så siden ikke spør Google om noe. Lisens: fonts/OFL.txt.
   Den greske fila finnes for en bokstav: π i «π-pugger». */
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/source-serif-4-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:'Source Serif 4'; font-style:italic; font-weight:300 700; font-display:swap;
  src:url("../fonts/source-serif-4-latin-italic.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:'Source Serif 4'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/source-serif-4-greek.woff2") format("woff2");
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root{
  /* Flater */
  --paper:#e6e9df;
  --paper-2:#eef1e8;

  /* Blekk / tekst */
  --ink:#16302a;
  --ink-2:#3f5148;   /* mørknet fra #4c5f55 da disen kom: brødtekst skal tåle den mørkeste flekken */

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

  /* Pennen */
  --accent:#bd6a39;
  --accent-ink:#f1efe5;

  /* British racing green, dypt panel */
  --brg:#0d3527;
  --on-green:#e8ebe0;
  --accent-on-green:color-mix(in srgb, var(--accent) 68%, var(--on-green));

  /* Disen bak arket: blekket og pennen tynnet ut i papiret. Ingen nye
     farger, bare flere trinn av de samme. bakgrunn.js leser de to
     prosentene. Øk dem ikke uten å måle: med disse tallene har brødteksten
     (--ink-2) 5,0:1 mot den mørkeste flekken, og grensen er 4,5. */
  --haze-wash:20%;
  --haze-warm:30%;
  --haze-wash-c:color-mix(in srgb, var(--brg) var(--haze-wash), var(--paper));
  --haze-warm-c:color-mix(in srgb, var(--accent) var(--haze-warm), var(--paper));
  /* Papirkorn: fin støy i blekkfargen */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .086  0 0 0 0 .188  0 0 0 0 .165  1.2 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Skrift: en familie, variabel i vekt og optisk størrelse */
  --serif:'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;

  /* Mål */
  --maxw:1180px;
  --gutter:clamp(1.25rem, 5vw, 4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-ink:cubic-bezier(.3,.7,.15,1);      /* penn: rask ut, myk inn */
  --ease-spring:cubic-bezier(.3,1.45,.45,1);  /* liten oversving */

  /* Pennestrøk som maske: en tynn, lett buet tunge som strekkes til ordets bredde */
  --pen-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M.6 6.4C.1 6.4.1 5.2.7 5.1 26 3.2 60 5 99.3 3.1c.6 0 .7 1.1.1 1.2C62 6.4 27 4.9.6 6.4Z'/%3E%3C/svg%3E");
  --pen-strike:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1.2 6.5C.2 6.6.1 4.5 1.1 4.3 25 2.7 60 4.5 98.8 2.4c1.1-.1 1.2 2.1.1 2.3C62 6.8 28 5 1.2 6.5Z'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET / BASIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* Arket. Uten JavaScript eller WebGL er dette hele disen: tre stille
     laveringer. Ellers ligger bakgrunn.js sitt lerret oppå. */
  background:
    radial-gradient(62vw 54vh at 88% 6%,  var(--haze-warm-c), transparent 72%),
    radial-gradient(70vw 62vh at 4% 34%,  var(--paper-2),     transparent 72%),
    radial-gradient(84vw 70vh at 62% 96%, var(--haze-wash-c), transparent 72%),
    var(--paper);
  background-attachment:fixed;
}

/* Disen (bakgrunn.js) og kornet i papiret. Begge ligger bak alt innhold.
   Kornet finnes bare her: paneler, bilder og snakkeboble er glatte, og det
   er mot dem du ser at arket har en overflate. */
.haze,
html::after{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}
.haze{ width:100%; height:100%; display:block; }
html::after{
  content:"";
  background:var(--grain) 0 0 / 220px 220px;
  opacity:.34;
}

body{
  margin:0;
  font-family:var(--serif);
  font-optical-sizing:auto;
  color:var(--ink);
  line-height:1.55;
  font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums;
}

h1,h2,h3{ font-weight:400; line-height:1.05; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }

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

/* ============================================================
   PENNEN: understrek som tegnes der du peker
   ============================================================ */
.pen{ position:relative; }
.pen::after,
.card__title::after{
  content:""; position:absolute; left:-.12em; right:-.12em; bottom:-.34em; height:.46em;
  background:var(--accent);
  -webkit-mask:var(--pen-line) center / 100% 100% no-repeat;
          mask:var(--pen-line) center / 100% 100% no-repeat;
  clip-path:inset(0 0 0 100%);                 /* i ro: borte. Forlater mot høyre */
  transition:clip-path .32s var(--ease);
  pointer-events:none;
}
.pen:hover::after,
.pen:focus-visible::after,
.card:hover .card__title::after{
  clip-path:inset(0);
  transition:none;
  animation:pen-in .5s var(--ease-ink) backwards;
}
@keyframes pen-in{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0); } }
/* Samme bevegelse under et annet navn, så streken i hero kan tegnes på nytt */
@keyframes pen-again{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0); } }

/* ============================================================
   LAYOUT-HJELPERE
   ============================================================ */
.site-header,
.section,
.hero{
  width:min(100%, var(--maxw));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(4rem, 9vw, 7.5rem); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{ position:relative; padding-block:1.5rem 1.2rem; }
.site-header::after{
  content:""; position:absolute; left:var(--gutter); right:var(--gutter); bottom:0;
  height:1px; background:var(--line-2); transform-origin:left;
}
.js .site-header::after{ transform:scaleX(0); transition:transform 1.3s var(--ease-ink) .05s; }
.js .is-ready .site-header::after{ transform:none; }

.nav{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.nav__brand{ font-weight:600; font-size:1.08em; letter-spacing:-.005em; }
.nav__links{ display:flex; gap:clamp(1.1rem,3vw,2.2rem); font-size:.98em; }
.nav__links a{ color:var(--ink-2); transition:color .2s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
@media (max-width:520px){
  .nav{ flex-wrap:wrap; }
  .nav__links{ gap:1rem; font-size:.94em; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  display:flex; align-items:center;
  min-height:min(74svh, 720px);
  padding-block:clamp(3rem, 8vw, 6rem);
}
.hero__title{
  font-size:clamp(2.75rem, 1.55rem + 6.1vw, 6.5rem);
  font-weight:360; line-height:1; letter-spacing:-.032em;
  max-width:7.2em; text-wrap:initial;
}
.hero__strike{ position:relative; white-space:nowrap; }
.hero__strike::after{
  content:""; position:absolute; left:-3%; right:-3%; top:41%; height:.33em;
  background:var(--accent);
  -webkit-mask:var(--pen-strike) center / 100% 100% no-repeat;
          mask:var(--pen-strike) center / 100% 100% no-repeat;
  pointer-events:none;
}
.js .hero__strike::after{ clip-path:inset(0 100% 0 0); }
.js .is-ready .hero__strike::after{
  clip-path:inset(0);
  animation:pen-in .62s var(--ease-ink) .75s backwards;
}
.js .is-ready .hero__strike.is-again::after{ animation:pen-again .5s var(--ease-ink) backwards; }

/* ── Bindersen: binders-assistenten ─────────────────────────
   Tegningen står i CSS, livet (blikk, blunk, bryn) i bindersen.js. */
.clippy{
  position:absolute; z-index:2;
  top:50%; right:clamp(.5rem, 5vw, 4.5rem);
  transform:translateY(-50%);
  width:clamp(170px, 21vw, 270px);
}
.clippy__char{
  display:block; width:100%; padding:0; margin:0;
  border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform-origin:50% 86%;
  rotate:calc(var(--lean, 0) * 1deg);
}
.clippy__char:focus-visible{ outline:none; }
.clippy__char:focus-visible .clippy__wire{ stroke:var(--accent); }
.clippy__svg{
  width:100%; height:auto; display:block; overflow:visible; transform-origin:50% 86%;
  translate:calc(var(--dx, 0) * 1px) calc(var(--dy, 0) * 1px);   /* sukk og bank: hele figuren, ved siden av vuggingen */
}

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

.js .clippy__face{ opacity:0; }
.js .is-ready .clippy__face{ animation:clippy-face-in .4s var(--ease) 1.45s forwards; }
@keyframes clippy-face-in{ to{ opacity:1; } }

.clippy__eye{ fill:#f6f4ec; stroke:var(--ink); stroke-width:2.6; }
.clippy__pupil{
  fill:var(--ink);
  transform:translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px));
}
.clippy__brow{
  fill:none; stroke:var(--ink); stroke-width:4.2; stroke-linecap:round;
  transform-box:fill-box; transform-origin:center;
}
.clippy__brow--l{ transform:translateY(calc(var(--bl, 0) * 1px)) rotate(calc(var(--bla, 0) * 1deg)); }
.clippy__brow--r{ transform:translateY(calc(var(--br, 0) * 1px)) rotate(calc(var(--bra, 0) * 1deg)); }
.clippy__eyes{ transform-box:fill-box; transform-origin:center; transform:scaleY(var(--lid, 1)); }

/* Det bare emotene bruker (laget av bindersen.js): prikken til spørsmålstegnet og z-ene til sov.
   Begge er blekk i samme strek som tråden, og usynlige til en emote ber om dem. */
.clippy__dot{
  fill:var(--ink); opacity:0;
  transform-box:fill-box; transform-origin:center;
}
.clippy__z{
  fill:none; stroke:var(--ink); stroke-width:3.6;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0;
  opacity:0;
}

/* Hvile: en rolig vugging. Alt annet er hendelser, ikke tilstander. */
[data-motion="on"] .is-ready .clippy__svg{ animation:clippy-sway 6.4s ease-in-out 2s infinite; }
@keyframes clippy-sway{
  0%,100%{ transform:translateY(0) rotate(-1.1deg); }
  50%{ transform:translateY(-3px) rotate(1.1deg); }
}

/* ── Snakkeboble ─────────────────────────────────────────── */
.clippy__bubble{
  position:absolute; z-index:3;
  right:calc(66% + 14px); top:54%;
  width:min(76vw, 280px);
  background:var(--paper-2);
  border:1px solid var(--ink);
  border-radius:12px;
  padding:.95rem 1.05rem .9rem;
  box-shadow:0 18px 40px -22px rgba(22,48,42,.5);
  transform-origin:100% 34px;
  transition:opacity .22s var(--ease), transform .34s var(--ease-spring);
}
.clippy[data-open="false"] .clippy__bubble{
  opacity:0; transform:scale(.9) translateX(8px); pointer-events:none;
  transition:opacity .16s var(--ease), transform .2s var(--ease);
}
.clippy__bubble::after{
  content:""; position:absolute; right:-6.5px; top:28px;
  width:12px; height:12px; background:var(--paper-2);
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:rotate(-45deg);
}
.clippy__close{
  position:absolute; top:4px; right:7px; border:0; background:none;
  cursor:pointer; font-size:1.3rem; line-height:1; color:var(--ink-2);
  padding:.15rem .35rem;
}
.clippy__close:hover{ color:var(--ink); }
.clippy__hi{ font-size:.92rem; color:var(--ink-2); padding-right:1.2rem; }
.clippy__hi strong{ color:var(--ink); font-weight:600; }

/* ── Chat: Bindersen svarer ──────────────────────────────── */
.clippy__log{
  display:flex; flex-direction:column; gap:.45rem;
  max-height:210px; overflow-y:auto;
  margin-top:.65rem; padding-right:.15rem;
  scrollbar-width:thin;
}
.clippy__msg{
  font-size:.95rem; line-height:1.35; max-width:90%;
  padding:.42rem .68rem; border-radius:11px; white-space:pre-wrap;
}
.clippy__msg--bot{
  align-self:flex-end; color:var(--on-green); background:var(--brg);
  border-bottom-right-radius:3px;
}
.clippy__msg--me{
  align-self:flex-start; color:var(--ink);
  background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2);
  border-bottom-left-radius:3px;
}
.clippy__msg.is-thinking{ opacity:.6; letter-spacing:.2em; }

.clippy__form{ display:flex; gap:.4rem; margin-top:.7rem; }
.clippy__input{
  flex:1; min-width:0; font-size:.95rem;
  padding:.45rem .7rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:8px;
}
.clippy__input::placeholder{ color:var(--ink-2); opacity:.8; font-style:italic; }
.clippy__input:focus-visible{ outline:none; border-color:var(--ink); }
.clippy__send{
  flex:none; width:38px; border:0; cursor:pointer; border-radius:8px;
  background:var(--ink); color:var(--paper); font-size:1rem; line-height:1;
  transition:background-color .2s var(--ease);
}
.clippy__send:hover{ background:var(--brg); }
.clippy__input:disabled,.clippy__send:disabled{ opacity:.5; cursor:default; }

@media (max-width:880px){
  .hero{ display:block; min-height:0; }
  .clippy{
    position:static; transform:none; width:100%; margin:2.75rem 0 0;
    display:flex; flex-direction:column-reverse; align-items:flex-start;
  }
  .clippy__char{ width:112px; }
  .clippy__bubble{
    position:relative; inset:auto;       /* i flyten, men fortsatt anker for lukkekrysset */
    margin-top:1.2rem; width:min(100%, 320px);
    transform-origin:20% 0;
  }
  .clippy[data-open="false"] .clippy__bubble{ display:none; }
  .clippy__bubble::after{ display:none; }
}

/* ============================================================
   SEKSJONSHODER
   ============================================================ */
.section__head{ margin-bottom:clamp(2rem,4vw,3.25rem); }
.section__title{
  font-size:clamp(2.2rem, 1.5rem + 3vw, 3.75rem);
  font-weight:360; letter-spacing:-.026em;
}
.section__intro{ margin-top:.75rem; max-width:44ch; color:var(--ink-2); font-size:1.1em; }

/* Margnotatet: pennen, i kursiv */
.margin-note{
  margin-top:.9rem; font-style:italic; font-size:1.02em; color:var(--accent);
}
[data-notes="off"] .margin-note{ display:none; }

/* ============================================================
   PROSJEKTER: 2 rader som blas sidelengs
   ============================================================ */
.section__head--carousel{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
}

/* Bla-piler, kun desktop (vises av main.js når det finnes mer å se) */
.carousel__nav{ display:flex; gap:.2rem; flex-shrink:0; margin-right:-.6rem; }
.carousel__nav[hidden]{ display:none; }
.carousel__btn{
  border:0; background:none; cursor:pointer;
  font-size:1.7rem; line-height:1; padding:.35rem .6rem;
  transition:translate .25s var(--ease-spring), opacity .2s var(--ease);
}
.carousel__btn[data-dir="prev"]:not(:disabled):hover{ translate:-4px 0; }
.carousel__btn[data-dir="next"]:not(:disabled):hover{ translate:4px 0; }
.carousel__btn:not(:disabled):active{ translate:0 0; }
.carousel__btn:disabled{ opacity:.22; cursor:default; }

/* Skall, holder kant-toningene som hinter «det er mer». Toningen er en maske
   på sporet og ikke en papirfarget flate oppå, siden arket bak ikke er
   ensfarget lenger. --fade-l og --fade-r er registrert så de kan gli. */
@property --fade-l{ syntax:"<number>"; inherits:true; initial-value:0; }
@property --fade-r{ syntax:"<number>"; inherits:true; initial-value:0; }
.carousel{
  position:relative; --fade-l:0; --fade-r:0;
  transition:--fade-l .3s var(--ease), --fade-r .3s var(--ease);
}
.carousel.can-left{ --fade-l:1; }
.carousel.can-right{ --fade-r:1; }
/* Masken klipper også fokusrammen til sporet, så den tegnes på skallet */
.carousel:has(> .cards:focus-visible){ outline:2px solid var(--accent); outline-offset:6px; border-radius:3px; }

/* Sporet: 2 rader, så mange kolonner som trengs, x-scroll med snap.
   Det går helt ut i margen, så kortene glir ut av arket og ikke inn i en vegg. */
.cards{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2, auto);
  grid-auto-columns:clamp(270px, 78vw, 348px);
  gap:2.75rem 2rem;
  margin:0 calc(-1 * var(--gutter)); padding:.25rem var(--gutter) 1.75rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter);
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
  --mask:linear-gradient(to right,
    rgb(0 0 0 / calc(1 - var(--fade-l))) calc(var(--gutter) * .15),
    #000 var(--gutter),
    #000 calc(100% - var(--gutter)),
    rgb(0 0 0 / calc(1 - var(--fade-r))) calc(100% - var(--gutter) * .15));
  -webkit-mask-image:var(--mask); mask-image:var(--mask);
}
.cards:focus-visible{ outline:none; }
.cards::-webkit-scrollbar{ height:6px; }
.cards::-webkit-scrollbar-track{ background:transparent; }
.cards::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:999px; }
.cards::-webkit-scrollbar-thumb:hover{ background:var(--ink-2); }

/* Dra med mus: sporet følger hånda (main.js) */
.cards.is-grabbable{ cursor:grab; }
.cards.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; -webkit-user-select:none; }
.cards.is-dragging a{ pointer-events:none; }
.cards.is-gliding{ scroll-snap-type:none; }

@media (max-width:680px), (pointer:coarse){
  .carousel__nav{ display:none; }
}

.card{ display:flex; flex-direction:column; scroll-snap-align:start; }
.card__media{
  display:block; aspect-ratio:16 / 10; overflow:hidden;
  background:var(--paper-2); border-radius:5px;
  box-shadow:0 0 0 1px var(--line-2);
  transition:box-shadow .3s var(--ease);
}
.card:hover .card__media{ box-shadow:0 0 0 1px var(--ink); }
.card__media img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
  -webkit-user-drag:none; user-select:none;
}
.card__body{ display:flex; flex-direction:column; flex:1; padding-top:1.05rem; }
.card__title{
  position:relative; align-self:flex-start;
  font-size:1.6rem; letter-spacing:-.016em;
}
.card__desc{ margin-top:.5rem; color:var(--ink-2); font-size:.97em; line-height:1.5; flex:1; }
.card__actions{
  margin-top:.95rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:.35rem 1rem; flex-wrap:wrap;
  font-size:.9em;
}
.tag{ font-style:italic; color:var(--ink-2); }
.card__links{ display:inline-flex; gap:1.1rem; }
.card__links a{
  text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--line-2); text-underline-offset:.24em;
}
.card__credit{ margin-top:.7rem; font-size:.74em; line-height:1.45; color:var(--ink-2); }
.card__credit a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.card__note{ color:var(--ink-2); }

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

.timeline{ display:grid; }
.timeline__item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(8.5rem, 12rem) 1fr;
  gap:clamp(1rem,3vw,2.5rem);
  padding:1.6rem 0 1.75rem;
}
/* Skillelinjene tegnes fra venstre når raden kommer til syne */
.timeline__item::before,
.timeline__item:last-child::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:color-mix(in srgb, var(--on-green) 24%, transparent);
  transform-origin:left;
}
.timeline__item:last-child::after{ top:auto; bottom:0; }
.js .timeline__item::before,
.js .timeline__item:last-child::after{
  transform:scaleX(0);
  transition:transform 1.25s var(--ease-ink) var(--d, 0ms);
}
.js .timeline__item:last-child::after{ transition-delay:calc(var(--d, 0ms) + 220ms); }
.js .timeline__item.is-inked::before,
.js .timeline__item.is-inked:last-child::after{ transform:none; }

.timeline__when{
  font-variant-numeric:tabular-nums lining-nums; font-size:.9em;
  color:color-mix(in srgb, var(--on-green) 64%, transparent);
  padding-top:.5rem;
}
.timeline__role{ font-size:1.55rem; line-height:1.14; letter-spacing:-.012em; text-wrap:initial; }
.timeline__org{ margin-top:.25rem; font-style:italic; color:color-mix(in srgb, var(--on-green) 80%, transparent); }
.timeline__text{ margin-top:.7rem; max-width:60ch; color:color-mix(in srgb, var(--on-green) 86%, transparent); }
@media (max-width:620px){
  .timeline__item{ grid-template-columns:1fr; gap:.35rem; }
  .timeline__when{ padding-top:0; }
}

/* ============================================================
   KONTAKT
   ============================================================ */
.section--contact{ padding-bottom:0; }
.contact__lead{ max-width:38ch; margin-top:.9rem; color:var(--ink-2); font-size:1.15em; }
.contact__mail{
  margin-top:clamp(2rem, 5vw, 3.25rem);
  font-size:clamp(1.85rem, .9rem + 4.6vw, 4.5rem);
  font-weight:360; line-height:1.1; letter-spacing:-.032em;
}
.contact__mail a{ display:inline-block; }
.contact__mail .pen::after{ bottom:-.2em; height:.3em; }
.contact__more{ margin-top:1.1rem; font-size:1.1em; color:var(--ink-2); }
.contact__more a{ transition:color .2s var(--ease); }
.contact__more a:hover{ color:var(--ink); }

/* Slutten: en strek, og en som kikker over den */
.contact__end{
  position:relative;
  margin-top:clamp(4.5rem, 11vw, 8rem);
  padding-bottom:clamp(3.25rem, 7vw, 4.75rem);
}
.contact__end::before{
  content:""; display:block; height:1px; background:var(--line-2); transform-origin:left;
}
.js .contact__end::before{ transform:scaleX(0); transition:transform 1.4s var(--ease-ink); }
.js .contact__end.is-inked::before{ transform:none; }

.peek{
  --peek:clamp(108px, 14vw, 150px);
  position:absolute; right:clamp(.5rem, 6vw, 5rem); bottom:100%;
  width:var(--peek); height:var(--peek); overflow:hidden;
  margin-bottom:-1px;                     /* står på streken */
  pointer-events:none;
}
.peek .clippy__char{
  pointer-events:auto;
  transform-origin:50% 100%;
  translate:0 27%;                        /* øynene akkurat over streken (prosent av egen høyde) */
  transition:translate .9s var(--ease-spring);
}
.js .peek .clippy__char{ translate:0 72%; }
.js .contact__end.is-inked .peek .clippy__char{ translate:0 27%; transition-delay:.9s; }
.js .contact__end.is-inked .peek .clippy__char:hover{ translate:0 20%; transition-delay:0s; transition-duration:.45s; }
.peek .clippy__wire{ stroke-dasharray:none; stroke-dashoffset:0; animation:none !important; }
.peek .clippy__face{ opacity:1; animation:none !important; }
.peek .clippy__svg{ animation:none !important; }

/* ── Bindersen, den masete ───────────────────────────────────
   Følgefiguren som mas.js setter ned ved det du leser. Plassen (left, top)
   og bobla regnes ut der, her står bare utseendet.
   Hun starter utegnet, slik toppfiguren gjorde før siden tegnet henne:
   tråden i skjul og ansiktet borte, til emoten «kom» tegner henne.
   Siden tegner henne ikke selv, så den innskriften og vuggingen som
   gjelder toppfiguren slås av her. Ikke som .peek, som tar bort dash helt:
   da kunne verken «forsvinn» eller «kom» virke. */
.mas{ --mas-w:clamp(84px, 6.4vw, 104px); }
.mas__char{
  position:fixed; z-index:40;
  width:var(--mas-w);
}
.js .mas .clippy__wire{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:none !important;
}
.js .mas .clippy__face{ opacity:0; animation:none !important; }
.mas .clippy__svg{ animation:none !important; }

.mas__bubble{
  position:fixed; z-index:41;
  width:min(280px, calc(100vw - 2rem));
  padding:.95rem 1.05rem .9rem;
  background:var(--paper-2);
  border:1px solid var(--ink);
  border-radius:12px;
  box-shadow:0 18px 40px -22px color-mix(in srgb, var(--ink) 50%, transparent);
}
.mas__bubble:not([hidden]){ animation:mas-pop .34s var(--ease-spring) backwards; }
@keyframes mas-pop{ from{ opacity:0; transform:scale(.92); } }

.mas__q{ font-size:.98rem; line-height:1.4; color:var(--ink); }
.mas__answers{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.mas__answers[hidden]{ display:none; }
.mas__answer{
  border:0; cursor:pointer; font-size:.95rem; line-height:1.3;
  padding:.42rem .78rem; border-radius:8px;
  color:var(--ink); background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .2s var(--ease);
}
.mas__answer:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.mas__answer[aria-disabled="true"]{ opacity:.5; cursor:default; }

/* Samtalen i bobla: samme meldinger som i chatten over */
.mas__log{ display:flex; flex-direction:column; gap:.45rem; margin-top:.7rem; }
.mas__log[hidden]{ display:none; }

/* På det grønne panelet er blekk usynlig. Står hun over det (mas.js sier fra med data-on),
   tegnes hun i samme lyse farge som teksten der. */
.mas .clippy__wire, .mas .clippy__brow, .mas .clippy__z{ transition:stroke .3s var(--ease); }
.mas[data-on="dark"] .clippy__wire,
.mas[data-on="dark"] .clippy__brow,
.mas[data-on="dark"] .clippy__z{ stroke:var(--on-green); }
.mas[data-on="dark"] .clippy__dot{ fill:var(--on-green); }

/* Krysset: synlig hele tiden hun står der */
.mas__x{
  position:fixed; z-index:42;
  display:grid; place-items:center;
  width:28px; height:28px; padding:0;
  border-radius:50%; cursor:pointer;
  font-size:1.1rem; line-height:1; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--line-2);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.mas__x:hover{ color:var(--ink); border-color:var(--ink); }

@media (max-width:880px){
  .mas{ --mas-w:72px; }
}

/* ============================================================
   BEVEGELSE AV
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important; transition-delay:0s !important;
  }
}
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after{
  animation-duration:.01ms !important; animation-delay:0s !important;
  transition-duration:.01ms !important; transition-delay:0s !important;
}

/* "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{ rotate:-1deg; }