/* Trykkeriet God Dag — designforslag v2 (lys) */
:root{
  --papir:#f4f0e7;         /* bakgrunn: ubestrøket papir */
  --papir2:#ece6d8;        /* kort/flater */
  --blekk:#1a1712;         /* tekst */
  --rod:#e2311b;           /* goddag-rød */
  --mesh:#c8dc3a;          /* duk: gulgrønn mesh */
  --meshdyp:#a3b92e;       /* duk, mørkere tråder */
  --gul:#f0d63a;           /* sjablong-gul */
  --alu1:#e8e8ec;          /* aluminium lys */
  --alu2:#a7a7b0;          /* aluminium skygge */
  --graa:#7d766b;          /* bildetekst */
  --strek:#d8d0bd;         /* delelinjer */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
  --logofont:'Yellowtail',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* myk innfading av hver side — gir sømløs overgang fra print-animasjonen */
@keyframes pagein{from{opacity:0}}
body{animation:pagein .32s ease}
@media (prefers-reduced-motion:reduce){body{animation:none}}
body{
  background:var(--papir);
  color:var(--blekk);
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--rod);color:var(--papir)}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--rod);outline-offset:3px}

/* ---------- topp: logo + nav, alltid synlig ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--papir) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--strek);
  text-align:center;
  padding:.65rem 1rem .55rem;
}
.logo{
  display:inline-block;text-decoration:none;line-height:.95;
}
.logo-img{
  display:block;height:auto;width:auto;max-width:280px;max-height:100px;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
/* gimmick: logoen vrikker litt på seg når du hovrer */
.logo:hover .logo-img{transform:rotate(-2.5deg) scale(1.05)}
.logo .l1,.logo .l2{
  display:block;font-family:var(--logofont);font-weight:400;
  color:transparent;-webkit-text-stroke:1.1px var(--blekk);
  letter-spacing:.01em;
}
.logo .l1{font-size:1.6rem}
.logo .l2{font-size:2.25rem;margin-top:-.3em;display:flex;align-items:center;justify-content:center;gap:.05em}
.logo .smil{width:1.45em;height:1.1em;flex:none;transform:translateY(.05em)}
.logo .smil circle,.logo .smil path,.logo .smil ellipse{stroke:var(--blekk);stroke-width:7;fill:none}
.site-nav{
  margin-top:.45rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;
}
.site-nav a{text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent;position:relative}
.site-nav a:hover{color:var(--rod)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--rod);color:var(--rod)}
/* gimmick: en liten rakel «trykker» understreken når man hovrer */
.site-nav a::before{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--rod);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.65,0,.3,1);
}
.site-nav a:hover::before{transform:scaleX(1)}
.site-nav a::after{
  content:"";position:absolute;bottom:-7px;left:-9px;width:11px;height:10px;opacity:0;border-radius:2px;
  background:linear-gradient(var(--rod) 0 45%, #a7a7b0 45% 100%);
  border:1px solid var(--blekk);
  transition:left .32s cubic-bezier(.65,0,.3,1), opacity .12s;
}
.site-nav a:hover::after{opacity:1;left:calc(100% - 3px)}

/* ---------- sideinnhold ---------- */
.page{max-width:1060px;margin:0 auto;padding:3.6rem 1.4rem 4.5rem}
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--graa);
  margin-bottom:1rem;
}
/* gimmick: passmerket er en bitteliten silketrykk-ramme med duk */
.eyebrow .pass{
  display:inline-block;width:17px;height:12px;vertical-align:-1px;
  border:2px solid var(--rod);border-radius:3px;overflow:hidden;
  color:transparent;font-size:0;line-height:0;
  background:
    repeating-linear-gradient(0deg, rgba(226,49,27,.28) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(226,49,27,.28) 0 1px, transparent 1px 3px);
}

/* rakel-avdekking av overskrifter (lys variant) */
.sq-reveal{
  position:relative;display:inline-block;
  font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:500;font-style:italic;line-height:1.08;
  font-variation-settings:'opsz' 72;
  margin-bottom:1.8rem;
}
.sq-reveal.printed .sq-text{ /* fallback-sluttilstand */
  clip-path:inset(-10% 0% -10% 0);
  text-shadow:2px 2px 0 color-mix(in srgb, var(--rod) 75%, transparent);
}
.sq-reveal .sq-text{
  display:inline-block;
  clip-path:inset(-10% 100% -10% 0);
}
.sq-reveal.printed .sq-text{animation:sqwipe 1s cubic-bezier(.65,0,.3,1) forwards}
@keyframes sqwipe{
  0%{clip-path:inset(-10% 100% -10% 0);text-shadow:6px 4px 0 color-mix(in srgb, var(--rod) 85%, transparent)}
  70%{clip-path:inset(-10% 0% -10% 0)}
  100%{clip-path:inset(-10% 0% -10% 0);text-shadow:2px 2px 0 color-mix(in srgb, var(--rod) 75%, transparent)}
}
.sq-reveal .blade{
  position:absolute;top:-12%;bottom:-6%;left:0;width:13px;border-radius:3px;
  background:linear-gradient(90deg,var(--alu1),var(--alu2));
  opacity:0;pointer-events:none;
}
.sq-reveal .blade::before{
  content:"";position:absolute;left:50%;top:-15px;width:32px;height:13px;margin-left:-16px;
  background:var(--rod);border-radius:4px;
}
.sq-reveal.printed .blade{animation:blademove 1s cubic-bezier(.65,0,.3,1) forwards}
@keyframes blademove{
  0%{opacity:1;left:-2%}
  85%{opacity:1}
  100%{opacity:0;left:101%}
}

.lede{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.55;max-width:32em}
.lede em{color:var(--rod)}
.bodycol{max-width:36em;margin-top:1.3rem;color:#4a443a}

/* Portefølje-lenka er skjult til den slås på i administrasjonen */
.site-nav a[href="portefolje.html"]{display:none}
.portefolje-paa .site-nav a[href="portefolje.html"]{display:block}

/* ---------- ticker (nederst, alle sider) ---------- */
.ticker{overflow:hidden;border-top:2px solid var(--blekk);background:var(--papir2);padding:.55rem 0;position:relative;z-index:6}
.ticker .tk{
  display:flex;gap:2.2rem;width:max-content;white-space:nowrap;
  animation:tick 38s linear infinite;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--blekk);
}
.ticker:hover .tk{animation-play-state:paused}
.ticker .tk .rd{color:var(--rod)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .tk{animation:none}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--strek);margin-top:2rem;padding:2.6rem 1.4rem 4rem;background:var(--papir2)}
.footgrid{max-width:1060px;margin:0 auto;display:grid;gap:2.2rem;grid-template-columns:1.2fr 1fr}
.footgrid h3{font-size:1.35rem;font-weight:500;font-style:italic;margin-bottom:.6rem}
.newsform{display:flex;gap:.5rem;margin-top:.5rem;max-width:26rem}
.newsform input{
  flex:1;background:var(--papir);border:1px solid var(--strek);color:var(--blekk);
  font-family:var(--mono);font-size:.8rem;padding:.7rem .8rem;
}
.newsform input::placeholder{color:var(--graa)}
.newsform button{
  background:var(--blekk);color:var(--papir);border:1px solid var(--blekk);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:0 1rem;
}
.newsform button:hover{background:var(--rod);border-color:var(--rod)}
.footmeta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;line-height:2.1;color:var(--graa);text-transform:uppercase}
.footmeta a{color:var(--blekk);text-decoration:none}
.footmeta a:hover{color:var(--rod)}

@media (max-width:860px){
  .footgrid{grid-template-columns:1fr}
  .page{padding:2.6rem 1.2rem 3.4rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sq-reveal .sq-text{clip-path:none !important;animation:none !important;
    text-shadow:2px 2px 0 color-mix(in srgb, var(--rod) 75%, transparent) !important}
  .sq-reveal .blade{display:none}
}