/* Gemensamt för alla sidor: färger, spiral, skev text, meny och sidfot */

/* CMYK på varmvitt papper. Färgroller:
   --red    botten (sidans och spiralens bottenplåt)
   --paper  otryckt papper / ljus text
   --deep   svart: text, stämpel
   --accent markeringar, pilen
   --namn1 / --namn2  namnets två plåtar
   --stamp-* stämpelns färger */
:root{
  --cyan:#00a3e0;
  --magenta:#e6007e;
  --gul:#ffe500;
  --paper:#f4eee2;
  --red:var(--paper);
  --teal:var(--cyan);
  --deep:#161616;
  --accent:var(--magenta);
  --namn1:var(--deep);
  --namn2:var(--magenta);
  --armar:cyan magenta gul; /* spiralens färgade armar, i ordning */
  --halo:var(--paper);      /* urtaget runt namnet */
  --armtackning:1.18;       /* >1 = armarna överlappar: rött, grönt och blått där de möts */
  --armforskjut:7;          /* feltryck mellan armarna */
  /* Stämpeln: svartvit */
  --stamp-bg:var(--paper);--stamp-fg:var(--deep);--stamp-acc:var(--deep);
  --logo:"Anton",sans-serif;
  --text:"Pirata One",serif; /* blackletter med tydliga former */
}
*{box-sizing:border-box;margin:0}
a{color:inherit;text-decoration:none}
html,body{min-height:100%}
body{background:var(--red);color:var(--deep);font:400 17px/1.5 var(--text)}

/* Helskärmssida: meny överst, innehåll, sidfot underst */
/* overflow:clip i stället för hidden: går inte att scrolla ens automatiskt (t.ex. när man tabbar till en länk) */
.stage{position:relative;height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:clip}

/* Spiraltunneln – mitt i bild, överdelen lutar mot oss, två offsetplåtar */
/* Mitten ligger en aning ovanför skärmens mitt (namnsidorna flyttar upp sitt innehåll lika mycket) */
.tunnel{position:absolute;left:50%;top:calc(50% - 3vh);width:0;height:0;perspective:850px}
.tunnel .tilt{position:absolute;left:0;top:0;width:210vmax;height:210vmax;translate:-50% -50%;transform:rotateX(-32deg) scaleX(1.08);background:var(--paper)}
/* Spiralens läge ställs efter klockan i gemensam.js, så den fortsätter i samma läge när man byter sida */
.tunnel svg{position:absolute;inset:0;width:100%;height:100%;animation:snurr-mot 10s linear infinite}

/* Huvudet: ett CMYK-tryck (feltryck med dubbeltryck) av Magnus huvud som ligger kvar i spiralens mitt och snurrar
   medurs hela tiden (mot spiralen). Vid sidbyte zoomar det fram och lägger sig överst en stund medan nästa sida
   dyker upp bakom det, och glider sedan tillbaka in i mitten. Zoomen sköts av gemensam.js. */
.huvud{position:absolute;left:50%;top:calc(50% - 3vh);height:min(72vh,46rem);aspect-ratio:662/1000;translate:-50% -50%;pointer-events:none;scale:.13}
.huvud.fram{z-index:3}
.huvud .snurr{position:absolute;inset:0;animation:snurr-med 16s linear infinite}
.huvud img{position:absolute;inset:0;width:100%;height:100%}
.huvud .plat{mix-blend-mode:multiply}
.huvud .papper{translate:2.2% 1.7%}
.huvud .gul{translate:-2.2% 1.6%}.huvud .cyan{translate:-2% -1.8%}.huvud .magenta{translate:2.3% 1.4%}.huvud .svart{translate:.5% -.3%}
@media (max-width:640px){.huvud{top:calc(50% - 4vh);height:min(62vh,130vw)}}

/* Sidbyte: sidan laddas inte om – gemensam.js byter bara innehållet (main) och animerar det ut och in.
   Spiralen, projektorn, menyn och sidfoten ligger kvar. */
/* Vid sidbyte växer innehållet fram i stället: loggan, rubriken och stämpeln poppar inte upp */
html.klipp .hem .mark .ord,html.klipp .shop .mark .ord,html.klipp .sign,html.klipp .signplat{animation-duration:0s,2s;animation-delay:0s}
.tunnel .plat-teal{mix-blend-mode:var(--blend,multiply);left:.32%;top:.22%}
@keyframes snurr-mot{to{rotate:-360deg}}
@keyframes snurr-med{to{rotate:360deg}}
@keyframes upp{from{opacity:0;translate:0 1rem}}

/* Skev skräckfilmstext, tryckt som loggan: vitt i botten (skugga + kant), gul/cyan/magenta-plåtar som glider, svart överst */
.ord{position:relative;z-index:1;mix-blend-mode:multiply;font-family:var(--text);font-weight:400;line-height:.9;text-align:center;filter:url(#skev)}
.ord .rad{display:block;white-space:nowrap}
.ord i{display:inline-block;font-style:normal;transform:translateY(var(--y)) rotate(var(--r)) scale(var(--sx),var(--sy)) skewX(var(--k));transform-origin:50% 80%}
.ord .lager{display:block}
.ord .lager + .lager{position:absolute;inset:0;padding:inherit}
.ord .form{visibility:hidden}
.ord .gul,.ord .cyan,.ord .magenta{mix-blend-mode:multiply}
.ord .gul{color:var(--gul);translate:-.05em .045em;animation:ord-gul 9s ease-in-out infinite alternate}
.ord .cyan{color:var(--cyan);translate:-.04em -.035em;animation:ord-cyan 11s ease-in-out infinite alternate}
.ord .magenta{color:var(--magenta);translate:.045em .035em;animation:ord-magenta 7.5s ease-in-out infinite alternate}
.ord .svart{color:var(--deep)}
@keyframes ord-gul{to{translate:-.03em .06em}}
@keyframes ord-cyan{to{translate:-.055em -.02em}}
@keyframes ord-magenta{to{translate:.03em .05em}}
/* Det vita lagret blandas inte – det gör texten läsbar mot spiralen */
.ord.halo{position:absolute;inset:0;z-index:0;mix-blend-mode:normal;pointer-events:none}
.ord.halo .lager{visibility:visible;color:var(--paper);-webkit-text-stroke:.07em var(--paper);paint-order:stroke fill}
.ord.halo .skugga{translate:.065em .055em;-webkit-text-stroke:0}


/* ---------- Menyn överst och sidfoten underst: samma luft, samma typografi ---------- */
/* Båda saknar botten – vit text direkt på spiralen. Färgblocken trycks med multiply så att spiralen under blandas in. */
.topnav,.foot{position:relative;color:var(--paper)}

/* Menyn */
.topnav{grid-row:1;display:flex;justify-content:center;align-items:baseline;gap:clamp(1.6rem,5vw,4rem);padding:1rem 1rem .9rem;font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:.03em}
.topnav a{position:relative;padding:.15em .5em;white-space:nowrap;outline:none}
.topnav a i{position:relative;font-style:normal}
.topnav a small{position:relative;font-size:.7em;opacity:.8;margin-left:.4em}
/* Ett snett färgblock bakom sidan man är på: magenta, About cyan */
.topnav a::before{content:"";position:absolute;inset:-6% -2%;background:var(--sida,var(--magenta));mix-blend-mode:multiply;transform:rotate(-2.5deg) skewX(-14deg);opacity:0}
.topnav a[aria-current="page"]::before{opacity:1}
.topnav a[href="about.html"]{--sida:var(--cyan)}

/* Sidfoten: två lika kolumner (rubrik över adress) + finstilt rad */
.foot{grid-row:3;padding:.9rem 1rem 1rem;text-align:center}
.contact{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:.8rem clamp(2.5rem,8vw,6rem)}
.contact a{display:grid;justify-items:center;gap:.4rem}
.contact b{font-weight:400;font-size:1.08rem;letter-spacing:.03em}
.contact span{position:relative;font-size:clamp(1.3rem,2.1vw,1.65rem);letter-spacing:.02em;padding:0 .25em}
.contact span i{position:relative;font-style:normal}
/* Snett färgblock bakom adressen: cyan och magenta, samma som i menyn */
.contact span::before{content:"";position:absolute;left:-.25em;right:-.25em;top:36%;bottom:-6%;background:var(--magenta);mix-blend-mode:multiply;transform:rotate(2deg) skewX(-14deg);transition:top .25s,transform .25s}
.contact a:first-child span::before{background:var(--cyan);transform:rotate(-2.5deg) skewX(-14deg)}
.contact a:hover span::before,.contact a:focus-visible span::before{top:-8%;transform:rotate(-1deg) skewX(-14deg)}
/* Adressraden: inga kommatecken, varje del ett eget block med luft emellan */
.fine{margin-top:.9rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 2em;font-size:.98rem;letter-spacing:.03em;opacity:.85}
.fine span{white-space:nowrap}

/* Samma understrykning på alla länkar när man för markören över */
.topnav a:hover i,.topnav a:focus-visible i,.contact a:hover span i,.contact a:focus-visible span i{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
.contact a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

@media (max-width:640px){
  /* Mitten ligger lite ovanför skärmens mitt i mobilen – namnsidorna flyttar upp sitt innehåll lika mycket */
  .tunnel{top:calc(50% - 4vh)}
  .tunnel .tilt{width:190vmax;height:190vmax}
  /* Menyn på en rad i mobilen */
  .topnav{gap:.8rem;padding:.85rem .5rem .75rem;font-size:.95rem;letter-spacing:0}
  .topnav a{padding:.15em .3em}
  .topnav a small{font-size:.72em;margin-left:.25em}
  .foot{padding:.6rem 1rem .7rem}
  .contact{grid-template-columns:1fr;gap:.4rem}
  .contact a{gap:.1rem}
  .contact b{font-size:.85rem}
  .contact span{font-size:1.1rem}
  .fine{font-size:.75rem}
  .fine{margin-top:.6rem;gap:.35em 1.6em}
  .fine{line-height:1.8}
}

/* Projektor: bilden ska se ut som optiskt projicerad film.
   Mjukare kanter (linsen), skärpa som andas, rörligt filmkorn, ljus i mitten och ett mycket svagt flimmer.
   Lagren ligger över spiralen, loggan och rubrikerna (.ord har z-index 1, projektorn kommer efter i koden)
   men under texterna och stämpeln (z-index 2). Färgblocken under menyn och mejlen ligger kvar i bilden.
   Släpper igenom musen. Stängs av med ?projektor=0 */
.projektor{position:fixed;inset:0;pointer-events:none;z-index:1}
/* Texterna ligger ovanpå projektionen, skarpa */
.topnav a i,.topnav a small,.contact b,.contact span i,.fine{position:relative;z-index:2}
.projektor>*{position:absolute;inset:0}
/* Linsen: skarpt i mitten, allt mjukare ut mot kanterna.
   Oskärpan smetar ut papperprickarna i färgen, så mättnad och kontrast lyfts lite för att färgerna inte ska blekna. */
.projektor .lins{-webkit-backdrop-filter:blur(1.8px) saturate(1.45) contrast(1.12);backdrop-filter:blur(1.8px) saturate(1.45) contrast(1.12);
  -webkit-mask:radial-gradient(ellipse 72% 68% at 50% 47%,transparent 45%,#000 100%);mask:radial-gradient(ellipse 72% 68% at 50% 47%,transparent 45%,#000 100%)}
/* Skärpan andas: hela bilden glider ur och i fokus, som när någon vrider på skärperingen.
   Oregelbundet – oftast skarpt, ibland en långsam glidning ut och tillbaka, ibland en liten justering. */
.projektor .fokus{animation:fokus 17s ease-in-out infinite}
@keyframes fokus{
  0%,12%{-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
  24%{-webkit-backdrop-filter:blur(3.2px) saturate(1.3) contrast(1.06);backdrop-filter:blur(3.2px) saturate(1.3) contrast(1.06)}
  29%{-webkit-backdrop-filter:blur(2.6px) saturate(1.25) contrast(1.05);backdrop-filter:blur(2.6px) saturate(1.25) contrast(1.05)}
  38%,55%{-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
  61%{-webkit-backdrop-filter:blur(1.3px) saturate(1.15);backdrop-filter:blur(1.3px) saturate(1.15)}
  66%,78%{-webkit-backdrop-filter:blur(.3px) saturate(1.02);backdrop-filter:blur(.3px) saturate(1.02)}
  86%{-webkit-backdrop-filter:blur(2px) saturate(1.2) contrast(1.04);backdrop-filter:blur(2px) saturate(1.2) contrast(1.04)}
  94%,100%{-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}}
/* Skakighet: filmen vickar en aning i projektorn, en ny position per filmruta (25 bilder/s). Bara bilden (spiral, logga, rubriker, foto) – texterna står still. */
/* (loggan och shop-rubriken har egna in-animationer, där läggs vav till i deras egna regler) */
.projektor-pa .tunnel,.projektor-pa .bild{animation:vav 2s steps(1) infinite}
/* Arket, polaroidens plåtar och skenen skakar i takt med bilden – texten på arket står still */
.projektor-pa :is(.lapp,.lappglod,.lapptryck,.bildtryck),.projektor-pa .bildfalt::before{animation:vav-t 2s steps(1) infinite}
@keyframes vav{0%{translate:-0.09px 0.23px}2%{translate:-0.13px -0.00px}4%{translate:-0.41px -0.10px}6%{translate:0.15px 0.13px}8%{translate:0.45px 0.19px}10%{translate:0.41px 0.20px}12%{translate:-0.34px 0.50px}14%{translate:-0.03px 0.53px}16%{translate:-0.61px -0.47px}18%{translate:-0.68px -0.49px}20%{translate:-0.30px -0.32px}22%{translate:0.00px -0.48px}24%{translate:0.11px -0.11px}26%{translate:-0.17px 0.71px}28%{translate:0.10px 0.96px}30%{translate:-0.16px 0.24px}32%{translate:-0.22px 0.10px}34%{translate:0.09px 0.17px}36%{translate:-0.10px -0.33px}38%{translate:-0.24px 0.35px}40%{translate:-0.43px 0.32px}42%{translate:-0.11px -0.48px}44%{translate:-0.05px 0.30px}46%{translate:-0.73px 0.04px}48%{translate:-0.48px -0.35px}50%{translate:-0.11px -0.24px}52%{translate:-0.58px 0.23px}54%{translate:-0.11px 0.56px}56%{translate:0.44px 0.50px}58%{translate:0.30px -0.28px}60%{translate:0.40px -0.45px}62%{translate:0.08px -0.84px}64%{translate:-0.29px -0.74px}66%{translate:0.28px -1.36px}68%{translate:-0.34px -0.71px}70%{translate:0.30px -0.16px}72%{translate:-0.49px -1.23px}74%{translate:-0.17px -1.07px}76%{translate:-0.49px -0.20px}78%{translate:0.09px -0.05px}80%{translate:0.14px 0.17px}82%{translate:0.64px 0.38px}84%{translate:0.57px 0.47px}86%{translate:-0.21px 0.86px}88%{translate:0.21px 0.75px}90%{translate:-0.57px 0.17px}92%{translate:-0.04px -0.71px}94%{translate:-0.09px 0.03px}96%{translate:-0.51px 0.74px}98%{translate:-0.11px 0.38px}}
/* samma skakighet som transform, för delar som redan har en egen translate (plåtarna) */
@keyframes vav-t{0%{transform:translate(-0.09px,0.23px)}2%{transform:translate(-0.13px,-0.00px)}4%{transform:translate(-0.41px,-0.10px)}6%{transform:translate(0.15px,0.13px)}8%{transform:translate(0.45px,0.19px)}10%{transform:translate(0.41px,0.20px)}12%{transform:translate(-0.34px,0.50px)}14%{transform:translate(-0.03px,0.53px)}16%{transform:translate(-0.61px,-0.47px)}18%{transform:translate(-0.68px,-0.49px)}20%{transform:translate(-0.30px,-0.32px)}22%{transform:translate(0.00px,-0.48px)}24%{transform:translate(0.11px,-0.11px)}26%{transform:translate(-0.17px,0.71px)}28%{transform:translate(0.10px,0.96px)}30%{transform:translate(-0.16px,0.24px)}32%{transform:translate(-0.22px,0.10px)}34%{transform:translate(0.09px,0.17px)}36%{transform:translate(-0.10px,-0.33px)}38%{transform:translate(-0.24px,0.35px)}40%{transform:translate(-0.43px,0.32px)}42%{transform:translate(-0.11px,-0.48px)}44%{transform:translate(-0.05px,0.30px)}46%{transform:translate(-0.73px,0.04px)}48%{transform:translate(-0.48px,-0.35px)}50%{transform:translate(-0.11px,-0.24px)}52%{transform:translate(-0.58px,0.23px)}54%{transform:translate(-0.11px,0.56px)}56%{transform:translate(0.44px,0.50px)}58%{transform:translate(0.30px,-0.28px)}60%{transform:translate(0.40px,-0.45px)}62%{transform:translate(0.08px,-0.84px)}64%{transform:translate(-0.29px,-0.74px)}66%{transform:translate(0.28px,-1.36px)}68%{transform:translate(-0.34px,-0.71px)}70%{transform:translate(0.30px,-0.16px)}72%{transform:translate(-0.49px,-1.23px)}74%{transform:translate(-0.17px,-1.07px)}76%{transform:translate(-0.49px,-0.20px)}78%{transform:translate(0.09px,-0.05px)}80%{transform:translate(0.14px,0.17px)}82%{transform:translate(0.64px,0.38px)}84%{transform:translate(0.57px,0.47px)}86%{transform:translate(-0.21px,0.86px)}88%{transform:translate(0.21px,0.75px)}90%{transform:translate(-0.57px,0.17px)}92%{transform:translate(-0.04px,-0.71px)}94%{transform:translate(-0.09px,0.03px)}96%{transform:translate(-0.51px,0.74px)}98%{transform:translate(-0.11px,0.38px)}}
/* Ljuset från projektorn: lite ljusare i mitten, mörkare hörn */
.projektor .ljus{background:radial-gradient(ellipse 80% 75% at 50% 47%,rgba(255,250,235,.10) 0,transparent 55%,rgba(20,10,0,.22) 100%);mix-blend-mode:soft-light}
/* Filmkorn som byter bild ungefär 24 gånger i sekunden */
.projektor .korn{inset:-50%;background-size:384px 384px;opacity:.11;mix-blend-mode:soft-light;animation:korn .33s steps(1) infinite}
@keyframes korn{0%{translate:0 0}12.5%{translate:-7% 3%}25%{translate:4% -9%}37.5%{translate:-11% -4%}50%{translate:8% 6%}62.5%{translate:-3% 11%}75%{translate:12% -2%}87.5%{translate:-6% -12%}}
/* Flimmer: små ljusskiftningar, ungefär som en lampa som inte lyser helt jämnt */
.projektor .flimmer{background:#1a1208;opacity:0;animation:flimmer 1.9s steps(1) infinite}
@keyframes flimmer{0%{opacity:.02}4%{opacity:.045}8%{opacity:.012}15%{opacity:.035}23%{opacity:.018}31%{opacity:.006}39%{opacity:.04}47%{opacity:.022}52%{opacity:.055}55%{opacity:.015}66%{opacity:.038}71%{opacity:.02}79%{opacity:.008}84%{opacity:.042}93%{opacity:.014}}


/* ================= Sidorna =================
   All sidspecifik stil ligger här (inte i sidorna), så att innehållet kan bytas utan att något annat ändras.
   Alla sidor har samma ram: .stage = meny, innehåll (main), sidfot på en skärmhöjd. */
body{overflow:hidden}
.stage > main{grid-row:2;grid-column:1}
.mark{position:relative}
@keyframes pop{from{scale:0;rotate:-60deg}}
.osynlig{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Home (main.center.hem) ---- */
/* Namnet ligger exakt mitt i bild – stämpeln hänger under */
/* Inget eget lager (z-index), så att loggan kan tryckas ovanpå spiralen och blandas med den */
.hem.center{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:21vh;pointer-events:none}
.hold{position:relative;pointer-events:auto}
/* Loggan: MAGNUS RENFORS i Pirata One, formad till en boll ("versal boll"), tryckt precis som Shop-rubriken (.ord):
   vitt bara på ena sidan, gul/cyan/magenta-plåtar som glider, svart överst. */
.hem .mark .ord{font-size:min(19vw,15vh,14rem);line-height:.74;rotate:-4deg;padding:.15em .3em .5em;animation:pop 1s cubic-bezier(.3,1.6,.5,1) .15s both}
/* lägre skärmar (t.ex. 1280×720): lite mindre, så att stämpeln får luft ovanför sidfoten */
@media (min-width:641px) and (max-height:800px){.hem .mark .ord{font-size:min(19vw,13vh,14rem)}}
.projektor-pa .hem .mark .ord{animation:pop 1s cubic-bezier(.3,1.6,.5,1) .15s both,vav 2s steps(1) infinite}

/* Skylten: stämpel under namnet (ligger ovanpå projektorn, z-index 2) – texten snurrar medurs, dödskallen moturs */
.sign{position:absolute;z-index:2;left:0;right:0;top:calc(100% + clamp(.6rem,2vh,1.4rem));margin:0 auto;display:grid;place-items:center;width:clamp(8rem,min(15vw,16.5vh),12rem);aspect-ratio:1;border-radius:50%;background:var(--stamp-bg);color:var(--stamp-fg);animation:upp .6s ease both;animation-delay:.75s}
.sign .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Texten snurrar runt en punkt lite bredvid mitten, så att den vinglar lätt */
.sign .ring{position:absolute;inset:6%;transform-origin:49% 51.2%;animation:snurr-med 22s linear infinite}
.sign .ring svg{display:block;width:100%;height:100%;transition:scale .45s cubic-bezier(.3,1.3,.5,1)}
/* Vid hover växer textringen och bokstäverna inom den vita cirkeln, så att texten blir lätt att läsa */
.sign:hover .ring svg,.sign:focus-visible .ring svg{scale:1.06}
.sign:hover .ring text,.sign:focus-visible .ring text{font-size:22.5px;letter-spacing:0}
.sign:hover .pil,.sign:focus-visible .pil{scale:1.3}
.sign .ring text{font:400 20px var(--text);letter-spacing:.2px;fill:var(--stamp-fg);transition:font-size .45s,letter-spacing .45s}
/* Dödskallen (Hobbyfilms logga), tryckt i svart + cyan + magenta.
   Alla plåtar snurrar lika fort men runt olika mittpunkter – förskjutningen syns olika mycket i olika lägen. */
.sign .pil{display:grid;place-items:center;width:46%;transition:scale .45s cubic-bezier(.3,1.6,.5,1)}
.sign .pil svg{grid-area:1/1;display:block;width:100%;height:auto;overflow:visible;animation:snurr-mot 9s linear infinite}
.sign .pil .plat{mix-blend-mode:multiply}
.sign .pil .cyan{color:var(--cyan);transform-origin:46% 49%}
.sign .pil .magenta{color:var(--magenta);transform-origin:54% 47%}
.sign .pil .svart{color:var(--stamp-acc);transform-origin:50% 52%}
.sign:focus-visible{outline:2px solid var(--deep);outline-offset:6px}

@media (max-width:640px){
  .hem .mark .ord{font-size:min(24vw,11vh)}
  .sign{width:min(34vw,14.5vh)}
  .hem.center{padding-bottom:8vh}
}

/* ---- Shop (main.center.shop) ---- */
.shop.center{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:6vh;pointer-events:none}
.shop .mark .ord{rotate:-4deg;animation:pop 1s cubic-bezier(.3,1.6,.5,1) .15s both}
.projektor-pa .shop .mark .ord{animation:pop 1s cubic-bezier(.3,1.6,.5,1) .15s both,vav 2s steps(1) infinite}
.shop .mark .ord{padding:clamp(.6rem,1.6vw,1.2rem) clamp(1rem,2.4vw,2rem);font-size:clamp(3rem,min(12.5vw,16vh),11.5rem)}
@media (max-width:640px){.shop .mark .ord{font-size:19vw}.shop.center{padding-bottom:8vh}}

/* ---- About (main.about) ---- */
/* Innehållet scrollar inom mittraden (i mobilen) – menyn, sidfoten och spiralen står still */
main.about{grid-row:2;min-height:0;overflow:auto;scrollbar-width:none;align-content:safe center;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;align-items:center;max-width:68rem;width:100%;margin:0 auto;padding:clamp(1rem,4vh,3rem) clamp(1rem,4vw,3rem)}

/* Bilden: tryckt i teal med en förskjuten röd plåt ovanpå */
/* Fotot anpassas efter skärmhöjden så att allt får plats mellan menyn och sidfoten */
/* Fotot: en gammal polaroid – kvadratisk bild i en gräddvit ram med bred nederkant.
   Bilden är redan blekt och tryckt med en gnutta offset (media/bilder/polaroid.py).
   Bredden anpassas efter skärmhöjden så att allt får plats mellan menyn och sidfoten (ramen är 1,135 × så hög som bred). */
.bildfalt{position:relative;justify-self:center}
.bild{--w:min(100%,calc((100svh - 19rem) * .88));position:relative;rotate:-2deg;width:var(--w);
  padding:calc(var(--w) * .055) calc(var(--w) * .055) calc(var(--w) * .19);
}
/* Ramen: gräddvitt papper, en aning genomskinligt ut mot hörnen */
.bild::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 75% 75% at 50% 46%,rgba(243,239,228,1) 62%,rgba(243,239,228,.93) 100%)}
/* Inbränd i filmen: ljuset blöder ut en aning runt ramen. Färgkanterna är egna plåtar (.bildtryck) utanför fotot,
   som trycks med multiply på spiralen – lite ur passning, så att de reagerar på färgerna under. */
/* Ljuset som blöder ut runt polaroiden och lappen ligger UNDER plåtarna, så att plåtarna ser likadana ut överallt */
.bildfalt::before{content:"";position:absolute;inset:0;rotate:-2deg;pointer-events:none;
  box-shadow:0 0 10px 2px rgba(255,247,230,.5),0 0 28px 6px rgba(255,240,215,.22)}
.lappglod{position:absolute;inset:0;rotate:1.5deg;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(255,247,230,.6)) drop-shadow(0 0 16px rgba(255,240,215,.3))}
.lappglod::before{content:"";position:absolute;inset:0;background:var(--paper);clip-path:var(--form)}
.bildtryck{position:absolute;inset:0;pointer-events:none;rotate:-2deg;mix-blend-mode:multiply;opacity:.6}
.bildtryck.c{background:var(--cyan);translate:-5px -4px}
.bildtryck.m{background:var(--magenta);translate:6px 5px}
/* Bilden smälter också ihop en aning med ramen */
.bild img{-webkit-mask:radial-gradient(ellipse 85% 85% at 50% 50%,#000 78%,rgba(0,0,0,.82) 100%);mask:radial-gradient(ellipse 85% 85% at 50% 50%,#000 78%,rgba(0,0,0,.82) 100%)}
.bild img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#d9d2c2}
/* Om bilden saknas visas en tom papperslapp */
.bild.tom img{visibility:hidden}
.bild .tomt{display:none;position:absolute;inset:calc(var(--w) * .055) calc(var(--w) * .055) calc(var(--w) * .19);place-items:center;text-align:center;padding:1.5rem;font-size:1.2rem;color:var(--cyan)}
.bild.tom .tomt{display:grid}

/* Texten ligger på en utriven papperslapp */
.text{position:relative;z-index:2;padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem) clamp(1.6rem,3vw,2.6rem);rotate:1.5deg}
/* Lappen (About), polaroiden och Hobbyfilm-cirkeln trycks i lager, som allt annat. Cyan- och magentaplåten ligger
   UTANFÖR (som syskon, utan eget lager), så att de trycks halvgenomskinligt med multiply rakt på spiralen och
   reagerar på färgerna under. Papperet ligger ovanpå. */
.lappfalt{position:relative}
/* På datorn överlappar arket polaroidens kant en bit, så att de hänger ihop utan glipa i mitten */
@media (min-width:761px){.lappfalt{margin-left:-2.2rem}.bildfalt{justify-self:end}
  /* där arket ligger över polaroiden ska ingen cyan hamna på det vita: cyanplåten förskjuts bara uppåt */
  .lapptryck.c{translate:1px -6px;-webkit-mask:linear-gradient(90deg,transparent 4%,#000 9%);mask:linear-gradient(90deg,transparent 4%,#000 9%)}}
/* Lappens form, gemensam för papperet och plåtarna: en banderoll med lätt böljande sidor och svalstjärt nedtill.
   Papperet är åldrat: mörkare, varmare mot kanterna. */
.lappfalt{--form:polygon(0.0% 1.2%,2.5% 1.5%,5.0% 1.7%,7.5% 2.0%,10.0% 2.2%,12.5% 2.3%,15.0% 2.4%,17.5% 2.4%,20.0% 2.3%,22.5% 2.2%,25.0% 2.0%,27.5% 1.8%,30.0% 1.6%,32.5% 1.3%,35.0% 1.0%,37.5% 0.7%,40.0% 0.5%,42.5% 0.3%,45.0% 0.1%,47.5% 0.0%,50.0% 0.0%,52.5% 0.0%,55.0% 0.1%,57.5% 0.3%,60.0% 0.5%,62.5% 0.7%,65.0% 1.0%,67.5% 1.3%,70.0% 1.6%,72.5% 1.8%,75.0% 2.0%,77.5% 2.2%,80.0% 2.3%,82.5% 2.4%,85.0% 2.4%,87.5% 2.3%,90.0% 2.2%,92.5% 2.0%,95.0% 1.7%,97.5% 1.5%,100.0% 1.2%,99.2% 2.3%,99.5% 4.7%,99.6% 7.0%,99.8% 9.3%,99.9% 11.6%,100.0% 13.9%,100.0% 16.3%,100.0% 18.6%,99.9% 20.9%,99.7% 23.2%,99.5% 25.6%,99.3% 27.9%,99.1% 30.2%,98.8% 32.5%,98.6% 34.9%,98.4% 37.2%,98.2% 39.5%,98.1% 41.9%,98.0% 44.2%,98.0% 46.5%,98.0% 48.8%,98.1% 51.2%,98.2% 53.5%,98.4% 55.8%,98.6% 58.1%,98.8% 60.5%,99.1% 62.8%,99.3% 65.1%,99.5% 67.4%,99.7% 69.8%,99.9% 72.1%,100.0% 74.4%,100.0% 76.7%,100.0% 79.0%,99.9% 81.4%,99.8% 83.7%,99.6% 86.0%,99.5% 88.3%,99.2% 90.7%,100.0% 100.0%,83.0% 93.5%,66.0% 99.0%,50.0% 93.0%,34.0% 99.0%,17.0% 93.5%,0.0% 100.0%,1.9% 90.7%,2.0% 88.4%,2.0% 86.1%,1.9% 83.8%,1.8% 81.5%,1.7% 79.2%,1.5% 76.9%,1.3% 74.6%,1.0% 72.3%,0.8% 70.0%,0.6% 67.7%,0.4% 65.4%,0.2% 63.1%,0.1% 60.8%,0.0% 58.5%,0.0% 56.2%,0.0% 53.9%,0.1% 51.6%,0.3% 49.3%,0.5% 47.0%,0.7% 44.7%,0.9% 42.4%,1.1% 40.1%,1.4% 37.8%,1.6% 35.5%,1.7% 33.2%,1.9% 30.9%,2.0% 28.6%,2.0% 26.3%,2.0% 24.0%,1.9% 21.7%,1.8% 19.4%,1.6% 17.1%,1.4% 14.8%,1.2% 12.5%,0.9% 10.2%,0.7% 7.9%,0.5% 5.6%,0.3% 3.3%)}
.lapptryck{position:absolute;inset:0;pointer-events:none;rotate:1.5deg;mix-blend-mode:multiply;opacity:.6}
.lapptryck::before,.lapp::before{content:"";position:absolute;inset:0;clip-path:var(--form)}
.lapptryck.c{translate:-5px -4px}.lapptryck.c::before{background:var(--cyan)}
.lapptryck.m{translate:6px 5px}.lapptryck.m::before{background:var(--magenta)}
.lapp{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lapp::before{background:radial-gradient(ellipse 80% 75% at 50% 45%,var(--paper) 55%,#ead9b8 100%)}
.text{padding-bottom:clamp(2.6rem,5vw,3.6rem)}
/* Cirkeln: helt rund och tydlig. Plåtarna är egna cirklar bakom, i samma läge, med multiply mot spiralen. */
.signplat{opacity:.6;position:absolute;left:0;right:0;top:calc(100% + clamp(.6rem,2vh,1.4rem));margin:0 auto;width:clamp(8rem,min(15vw,16.5vh),12rem);aspect-ratio:1;border-radius:50%;
  pointer-events:none;mix-blend-mode:multiply;animation:upp .6s ease both;animation-delay:.75s}
.signplat.c{background:var(--cyan);translate:-5px -4px}
.signplat.m{background:var(--magenta);translate:6px 5px}
@media (max-width:640px){.signplat{width:min(34vw,14.5vh)}}
.text .mark{position:relative;display:inline-block;margin-bottom:clamp(1.2rem,3vh,2rem)}
.text .mark .ord{rotate:-3deg}
.text .ord{padding:.3rem .6rem;font-size:clamp(3rem,6.5vw,5.8rem);text-align:left}
.text p{color:var(--deep);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.55;max-width:34rem;text-wrap:pretty;hyphens:manual}
/* Lång text: på datorn är lappen lika hög som fotot, rubriken står kvar och brödtexten scrollar inuti lappen.
   Texten tonar ut i över- och nederkanten så att man ser att det finns mer. */
.text{display:flex;flex-direction:column;max-height:calc(100svh - 19rem)}
.text .mark{align-self:flex-start;flex:none}
.brodtext{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--magenta) transparent;padding:.4em .6em 1.6em 0;outline:none;
  -webkit-mask:linear-gradient(transparent,#000 1.2em,#000 calc(100% - 2.6em),transparent);mask:linear-gradient(transparent,#000 1.2em,#000 calc(100% - 2.6em),transparent)}
.text p + p{margin-top:1.1em}
.text a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--magenta)}
.text a:hover,.text a:focus-visible{color:var(--magenta)}

@media (max-width:760px){
  main.about{grid-template-columns:1fr}
  main.about{gap:1.4rem}
  .lappfalt{margin-top:-1.6rem}
  /* I mobilen scrollar hela innehållet i stället (mellan menyn och sidfoten) */
  .text{max-height:none}
  .brodtext{overflow:visible;-webkit-mask:none;mask:none;padding:0}
  /* polaroidens bredd sätts på ramen runt den, så att plåtarna bakom får samma storlek */
  .bildfalt{width:max(8rem,min(15rem,calc((100svh - 38rem) * .88),100%))}
  .bild{--w:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}