/* ====================================================================
   UNDERSIDORNA  ·  N.P. Ringstrom
   Samma varld som filmen, men lugnare: det har ar sidor man laser, inte
   en tagning man aker igenom. Deras djupbla och gula, Fraunces i
   rubriker, Archivo i brodtext. Ingen beige.
   ==================================================================== */
:root{
  --natt:#060B24; --bla:#131578; --bla-l:#2A2DA8; --gul:#E8C34A;
  --is:#E6ECFB; --vit:#FFFFFF; --dis:rgba(234,242,255,.62);
  --pad:clamp(20px,5vw,72px); --matt:1120px;
  --lugn:cubic-bezier(.22,.61,.36,1);
  --serif:'Bodoni Moda',Didot,'Times New Roman',serif;
  --brod:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{scroll-behavior:auto !important}
body{margin:0;background:var(--natt);color:var(--is);font-family:var(--brod);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.026em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gul);outline-offset:4px}
.inre{max-width:var(--matt);margin:0 auto;padding:0 var(--pad)}
.hoppa{position:absolute;left:10px;top:10px;z-index:300;transform:translateY(-200%);
  background:var(--gul);color:var(--bla);padding:12px 20px;font-weight:700}
.hoppa:focus{transform:translateY(0)}

.list{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;gap:18px;
  padding:16px var(--pad);background:rgba(7,10,42,.7);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid rgba(250,216,76,.18);
  transition:background .5s var(--lugn)}
.list.fast{background:rgba(19,21,120,.95)}
.marke{font-family:var(--serif);font-size:clamp(15px,1.7vw,19px)}
.marke b{font-weight:600}
.marke span{color:var(--gul);font-size:.72em;letter-spacing:.22em;margin-left:10px;
  font-family:var(--brod);font-weight:700;vertical-align:.18em}
.list nav{margin-left:auto;display:none;gap:24px;font-size:13.5px;font-weight:600}
@media(min-width:900px){.list nav{display:flex}}
.list nav a{color:var(--dis);transition:color .3s var(--lugn),letter-spacing .3s var(--lugn)}
.list nav a:hover,.list nav a[aria-current]{color:var(--gul);letter-spacing:.04em}
.ring{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--gul);color:var(--gul);font-weight:700;font-size:14px;
  transition:background .3s var(--lugn),color .3s var(--lugn)}
@media(min-width:900px){.ring{margin-left:0}}
.ring:hover{background:var(--gul);color:var(--bla)}

/* toppen: bandet med bild bakom och rubriken over */
.topp{position:relative;min-height:min(66vh,560px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--bla)}
.topp-bild{position:absolute;inset:-8% 0 -8%;will-change:transform}
.topp-bild img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.topp::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,10,42,.72),rgba(7,10,42,.26) 42%,rgba(7,10,42,.94))}
.topp-text{position:relative;z-index:2;width:100%;padding-top:clamp(110px,15vw,170px);
  padding-bottom:clamp(34px,5vw,62px)}
.brod-smulor{margin:0 0 16px;font-size:11.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gul)}
.brod-smulor a{border-bottom:1px solid rgba(250,216,76,.4)}
.brod-smulor span{opacity:.5;margin:0 6px}
.topp h1{font-size:clamp(34px,7vw,80px);color:var(--vit);max-width:16ch}
.ing{margin:18px 0 0;max-width:52ch;font-size:clamp(16px,2vw,21px);color:rgba(255,255,255,.8)}

/* texten */
.text{padding:clamp(56px,7vw,104px) 0;background:var(--vit);color:#12142B}
.text .inre{max-width:74ch}
.text h3{font-size:clamp(22px,3vw,34px);color:var(--bla);margin:clamp(30px,4vw,46px) 0 12px}
.text h3:first-child{margin-top:0}
.text p{margin:0 0 1.05em;color:#3A3C68;font-size:17px;line-height:1.72}
[data-in]{opacity:0;transform:translateY(22px)}

.bott{padding:clamp(56px,7vw,100px) 0;background:var(--bla)}
.bott h2{font-size:clamp(26px,4.4vw,48px);color:var(--vit);max-width:18ch}
.bott-rad{margin:clamp(30px,4vw,48px) 0 0;display:grid;gap:24px}
@media(min-width:760px){.bott-rad{grid-template-columns:repeat(4,1fr)}}
.vad{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gul)}
.var{margin:0;font-size:17px;line-height:1.55;color:var(--is)}
.var a{border-bottom:1px solid rgba(250,216,76,.5);transition:color .3s var(--lugn)}
.var a:hover{color:var(--gul)}

.fot{background:var(--natt);color:var(--dis);padding:34px 0;font-size:13.5px}
.fot b{color:var(--is)}
.fot-meny{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px}
.fot-meny a{color:var(--dis);transition:color .3s var(--lugn)}
.fot-meny a:hover{color:var(--gul)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-in]{opacity:1;transform:none}
}

/* ---------- galleriet pa undersidorna ----------
   Joakim 2026-08-31: "deras originalhemsida visade bilder pa sina
   tjanster. Var ar mer bara text." Nu ligger sidans EGNA bilder direkt
   under hjalten, innan texten. */
.galleri{padding:clamp(48px,6vw,88px) 0;background:var(--natt)}
.g-rut{display:grid;gap:clamp(10px,1.4vw,18px);margin:clamp(26px,3.4vw,44px) 0 0;
  padding:0;list-style:none;grid-template-columns:1fr}
@media(min-width:700px){.g-rut{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.g-rut{grid-template-columns:repeat(3,1fr)}}
.g-post{overflow:hidden;aspect-ratio:4/3;background:rgba(234,242,255,.06)}
.g-post img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--lugn),filter .45s var(--lugn)}
.g-post:hover img{transform:scale(1.05);filter:brightness(1.07)}


/* ---------- undersidorna foljer verkstadsjournalen ----------
   Samma varld som startsidan: mono i etiketter, plåtar med lopnummer,
   massing pa kobolt. Galleriet ar inte langre bilder dumpade i ett
   rutnat, det ar en katalog. */
.g-rut{gap:2px;background:rgba(232,195,74,.22);grid-template-columns:repeat(2,1fr);counter-reset:pl}
@media(min-width:900px){.g-rut{grid-template-columns:repeat(4,1fr)}}
.g-post{aspect-ratio:1/1;background:var(--natt);position:relative;counter-increment:pl}
.g-post::before{content:counter(pl,decimal-leading-zero);position:absolute;left:12px;top:10px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.6);
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.g-post img{filter:saturate(.92)}
.g-post:hover img{filter:saturate(1.05)}
.brod-smulor{font-family:var(--mono);letter-spacing:.2em}
.topp h1{letter-spacing:-.028em}
.vad{font-family:var(--mono);letter-spacing:.2em}
.fot-meny a{font-size:13.5px}
.text h3{font-family:var(--serif)}