@font-face{font-family:"Dela";src:url(/fonts/dela-gothic-one-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-vf-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto JP";src:url(/fonts/noto-serif-jp-300-tsuri.woff2) format("woff2");font-weight:300;font-display:swap}

:root{
  --ink:#0E0E10;--kram:#E8DCC0;--shu:#B33A2B;--oliv:#6B6B3A;--rost:#C9521F;--skog:#3D5233;--senap:#D6A73C;
  --k70:rgba(232,220,192,.72);--k45:rgba(232,220,192,.6);--on-shu:#F7F1E3;--k15:rgba(232,220,192,.14);
  --pad:clamp(1.25rem,4vw,3.5rem);
  --sec:clamp(5.5rem,12vw,11rem);
  --display:"Dela",Impact,"Arial Black",sans-serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--ink);color:var(--kram);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
picture{display:contents}
main{overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,p,figure{margin:0}
:focus-visible{outline:2px solid var(--senap);outline-offset:3px}
::selection{background:var(--shu);color:var(--kram)}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.label{color:var(--k45);margin-bottom:1.5rem}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--kram);color:var(--ink);padding:.75rem 1rem}
.skip:focus{left:1rem;top:1rem}

/* knappar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3rem;padding:.9rem 1.5rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;border-radius:0;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-shu{background:var(--shu);color:var(--on-shu)}
.btn-shu:hover{background:#962E22}
.btn-line{background:transparent;color:var(--kram);border-color:rgba(232,220,192,.45)}
.btn-line:hover{border-color:var(--kram);background:rgba(232,220,192,.06)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);padding-top:max(1rem,env(safe-area-inset-top));transition:background-color .3s,border-color .3s;
  border-bottom:1px solid transparent}
.top.solid{background:rgba(14,14,16,.94);border-color:var(--k15)}
.mark{font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.top nav{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2rem)}
.top nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.6rem 0;color:var(--k70);transition:color .2s}
.top nav a:hover{color:var(--kram)}
.top nav .nav-cta{background:var(--shu);color:var(--on-shu);padding:.6rem .85rem}
.top nav .nav-cta:hover{background:#962E22}
.arr{margin-left:.25em}
.show-s{display:none}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:7rem var(--pad) clamp(1.75rem,4vw,3rem);overflow:hidden;isolation:isolate}
.hero-poster img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero-video{opacity:0;transition:opacity 1.6s ease;z-index:-2}
.hero-video.on{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,14,16,.62) 0%,rgba(14,14,16,.12) 30%,rgba(14,14,16,.28) 58%,rgba(14,14,16,.9) 88%,var(--ink) 100%),
  radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(14,14,16,.55) 100%)}
.hero-kicker{position:absolute;left:var(--pad);top:clamp(5.5rem,13vh,8rem);color:var(--k70)}
.hero-jp{position:absolute;right:var(--pad);top:clamp(5.5rem,13vh,8rem);writing-mode:vertical-rl;font-family:"Noto JP",serif;
  font-weight:300;font-size:clamp(3.25rem,8vw,8.5rem);line-height:1;letter-spacing:.12em;color:rgba(232,220,192,.82)}
.hero h1{font-family:var(--display);font-weight:400;font-size:min(19vw,9rem);line-height:.86;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 clamp(1.25rem,3vw,2.25rem) -.04em}
.hero h1 span{display:block}
.hero-row{display:grid;gap:1.25rem;align-items:end}
.hero-div{display:flex;align-items:center;gap:.9rem;color:var(--kram)}
.bar{width:2.25rem;height:3px;background:var(--shu)}
.hero-soon{font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.15;font-weight:300;letter-spacing:-.01em}
.hero-soon strong{font-weight:600}
.hero-soon span{color:var(--k45)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--k15);padding:1.05rem 0;background:var(--ink)}
.marquee-track{display:flex;width:max-content;animation:mq 48s linear infinite}
.marquee-track span{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--k70)}
.marquee-track i{width:.5rem;height:.5rem;background:var(--shu);margin:auto 2.25rem;flex:none}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* sektioner */
section{position:relative}
.sec-head h2,.manifest h2,.natt h2,.anmal h2,.prose h1{font-family:var(--display);font-weight:400;letter-spacing:-.005em;line-height:.92}
.sec-head h2{font-size:clamp(2.8rem,9vw,8.5rem)}
.sec-note{color:var(--k45);margin-top:1.5rem}
.sec-text{max-width:34ch;color:var(--k70);margin-top:1.5rem;font-size:1.125rem}

.manifest{padding:var(--sec) var(--pad);overflow:hidden}
.manifest h2{font-size:clamp(2.1rem,5.6vw,5.4rem);line-height:1.02;max-width:15ch}
.manifest h2 span{display:block;color:var(--k45)}
.manifest-text p{max-width:38ch;margin-top:2rem;color:var(--k70);font-size:1.15rem}
.abborre-line{position:absolute;right:-12vw;bottom:-4vw;width:min(78vw,1100px);height:auto;fill:none;stroke:var(--kram);
  stroke-width:1;opacity:.22;pointer-events:none;z-index:-1}
.abborre-line path{vector-effect:non-scaling-stroke}

/* droppen */
.droppen{padding:var(--sec) var(--pad)}
.drops{display:flex;flex-direction:column;margin-top:clamp(3rem,8vw,7rem)}
.drop{width:clamp(15rem,32vw,30rem);will-change:transform}
.drop-img{position:relative}
.drop-img::before{content:"";position:absolute;inset:-22% -24%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(214,167,60,.20),rgba(201,82,31,.07) 55%,transparent 78%)}
.drop img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.float{animation:fl 9s ease-in-out infinite alternate}
.d-b .float,.d-e .float{animation-duration:11s;animation-delay:-3s}
.d-c .float,.d-g .float{animation-duration:10s;animation-delay:-6s}
@keyframes fl{from{transform:translate3d(0,-6px,0)}to{transform:translate3d(0,8px,0)}}
.drop figcaption,.rx figcaption{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:1.25rem;color:var(--k70);
  border-top:1px solid var(--k15);padding-top:.85rem}
.kod{color:var(--on-shu);background:var(--shu);padding:0 .45em}
.note{color:var(--k45);flex-basis:100%}
.d-a{align-self:flex-start;margin-left:2vw}
.drop.d-a{width:calc(clamp(15rem,32vw,30rem)*.8)}
.d-b{align-self:flex-end;margin-top:-14vw;margin-right:4vw}
.d-c{align-self:center;margin-top:6vw;margin-left:8vw}
.interlude{align-self:flex-start;font-family:var(--display);font-size:clamp(2.4rem,7vw,6.5rem);line-height:.98;margin:-4vw 0 0;color:var(--k45)}
.interlude em{font-style:normal;color:var(--kram)}
.d-d{align-self:flex-end;margin-top:-10vw;margin-right:10vw}
.d-e{align-self:flex-start;margin-top:4vw;margin-left:16vw}
.d-f{align-self:flex-end;margin-top:-16vw;margin-right:0}
.d-g{align-self:center;margin-top:8vw;margin-left:-14vw}

/* natt */
.natt{padding:0 var(--pad) var(--sec)}
.natt-img{width:min(100%,72rem);height:auto;margin:0 auto}
.natt-text{position:relative;margin:clamp(-9rem,-10vw,-3rem) auto 0;width:min(100%,72rem);padding-left:clamp(0rem,4vw,3rem)}
.natt h2{font-size:clamp(3rem,10vw,9.5rem)}

/* reflex */
.reflex{padding:var(--sec) var(--pad);display:grid;gap:clamp(3rem,6vw,5rem)}
.reflex .sec-head h2{font-size:clamp(2.8rem,6.2vw,6.25rem)}
.reflex .sec-text{margin-top:2.25rem}
.flash-btn{margin-top:2rem}
.flash-btn[aria-pressed="true"]{background:var(--kram);color:var(--ink)}
.reflex-pair{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.reflex-one{max-width:36.375rem;width:100%;justify-self:center}
.rx{will-change:transform}
.rx-stack{position:relative;overflow:hidden;background:#000}
.rx-stack img{width:100%;height:auto}
.rx-on{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease-out}
.rx.lit .rx-on{opacity:1;transition-duration:.06s}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}
.rx.pop .flash{animation:fx .7s ease-out}
@keyframes fx{0%{opacity:0}8%{opacity:.9}100%{opacity:0}}

/* stickers */
.stickers{padding:var(--sec) var(--pad);overflow:hidden}
.st-wrap{display:flex;flex-direction:column;margin-top:clamp(2.5rem,6vw,4rem)}
.st img{width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.st figcaption{margin-top:1rem;color:var(--k45)}
.st-3{width:min(84vw,36rem);transform:rotate(-3deg)}
.st-2{width:min(52vw,22rem);align-self:flex-end;margin:-7vw 3vw 0 0;rotate:6deg}
.st-4{width:min(92vw,46rem);align-self:center;margin-top:2rem;rotate:-1.5deg}

/* anmälan */
.anmal{background:var(--kram);color:var(--ink);padding:var(--sec) var(--pad)}
.anmal .label{color:rgba(14,14,16,.6)}
.anmal-inner{max-width:60rem}
.anmal h2{font-size:clamp(2.8rem,10vw,8.5rem)}
.anmal-lead{font-size:clamp(1.15rem,1.8vw,1.4rem);max-width:36ch;margin-top:1.75rem}
.signup{margin-top:clamp(2.5rem,5vw,3.5rem);max-width:44rem}
.signup label{display:block;margin-bottom:.75rem}
.signup-row{display:flex;flex-wrap:wrap;gap:.75rem}
.signup input[type=email]{flex:1 1 16rem;min-width:0;min-height:3.25rem;padding:.75rem 0;border:0;border-bottom:2px solid var(--ink);
  border-radius:0;background:transparent;color:var(--ink);font:500 1.35rem/1.2 var(--sans)}
.signup input::placeholder{color:rgba(14,14,16,.42)}
.signup input:focus-visible{outline:none;border-bottom-color:var(--shu)}
.signup .btn{min-height:3.25rem}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.consent{margin-top:1.25rem;font-size:.95rem;max-width:52ch;color:rgba(14,14,16,.78)}
.status{margin-top:1rem;min-height:1.5em;font-weight:600}
.status.ok{color:var(--skog)}
.status.err{color:#8E2A1F}
.form-closed{margin-top:1rem;color:rgba(14,14,16,.7);text-transform:none;letter-spacing:.04em}

/* footer */
.foot{padding:clamp(4rem,8vw,6rem) var(--pad) 2rem;border-top:1px solid var(--k15)}
.foot-grid{display:grid;gap:2.5rem;align-items:center}
.patch{width:clamp(10rem,16vw,14rem);height:auto}
.foot-big{font-family:var(--display);font-size:clamp(2.4rem,5vw,4rem);line-height:1}
.foot-line .mono{color:var(--k45);margin-top:.75rem}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-links a{text-decoration:none;color:var(--k70);display:inline-block;padding:.3rem 0}
.foot-links a:hover{color:var(--kram)}
.foot-base{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;margin-top:3.5rem;padding-top:1.5rem;
  border-top:1px solid var(--k15);color:var(--k45);font-size:.68rem}

/* textsidor */
.prose{max-width:46rem;padding:clamp(8rem,16vw,11rem) var(--pad) var(--sec);margin:0 auto}
.prose h1{font-size:clamp(2.8rem,8vw,5.5rem);margin-bottom:1.75rem}
.prose h2{font-family:var(--mono);font-weight:400;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--k45);margin:2.75rem 0 .6rem}
.prose p{color:var(--k70);max-width:62ch}
.prose .lead{font-size:1.3rem;color:var(--kram)}
.prose .small{margin-top:3rem;color:var(--k45)}
.prose .btn{margin-top:2rem;margin-right:.5rem}
.nf{min-height:70vh}

/* större skärmar */
/* ljudkontroll */
.snd{position:fixed;z-index:40;left:var(--pad);bottom:max(1rem,env(safe-area-inset-bottom));display:flex;align-items:center;gap:.25rem;
  padding:.25rem .9rem .25rem .25rem;background:rgba(14,14,16,.82);border:1px solid var(--k15);border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--kram)}
.snd-btn{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .8rem 0 .7rem;border:0;border-radius:999px;background:transparent;
  color:inherit;font:inherit;cursor:pointer}
.snd-btn:hover .snd-txt{color:var(--kram)}
.snd-txt{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--k70);min-width:5.6em;text-align:left}
.snd-wave{display:flex;align-items:center;gap:2px;width:18px;height:16px}
.snd-wave i{display:block;width:2px;height:3px;background:var(--k45);border-radius:1px;transition:height .3s ease,background-color .3s ease}
.snd.is-on .snd-wave i{background:var(--shu);animation:snd-w 1.1s ease-in-out infinite}
.snd.is-on .snd-wave i:nth-child(1){height:6px;animation-delay:-.3s}
.snd.is-on .snd-wave i:nth-child(2){height:14px;animation-delay:-.7s}
.snd.is-on .snd-wave i:nth-child(3){height:9px;animation-delay:-.1s}
.snd.is-on .snd-wave i:nth-child(4){height:12px;animation-delay:-.5s}
@keyframes snd-w{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.snd-vol{--fill:35%;-webkit-appearance:none;appearance:none;width:clamp(4.5rem,8vw,6.5rem);height:44px;margin:0;background:transparent;cursor:pointer}
.snd-vol::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--shu) var(--fill),var(--k15) var(--fill))}
.snd-vol::-moz-range-track{height:3px;border-radius:2px;background:var(--k15)}
.snd-vol::-moz-range-progress{height:3px;border-radius:2px;background:var(--shu)}
.snd-vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:var(--kram);border:0}
.snd-vol::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--kram);border:0}
.snd:not(.is-on) .snd-vol{opacity:.55}
.snd-btn:focus-visible,.snd-vol:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
body.home .hero{padding-bottom:calc(clamp(1.75rem,4vw,3rem) + 3.75rem)}
body.home .foot{padding-bottom:5.5rem}

@media (min-width:900px){
  .hero h1{font-size:min(11.4vw,15rem);margin-bottom:2.25rem}
  .hero h1 span{display:inline}
  .hero-row{grid-template-columns:1fr 1.2fr auto;gap:2rem}
  .manifest{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem}
  .manifest .label{grid-column:1/4}
  .manifest-text{grid-column:4/12}
  .reflex{grid-template-columns:4fr 8fr;align-items:start}
  .reflex .sec-head{position:sticky;top:7rem}
  .reflex-pair{grid-template-columns:1fr 1fr;align-items:start}
.reflex-one{grid-template-columns:minmax(0,36.375rem);justify-content:center}
  .rx-2{margin-top:9rem}
  .stickers{display:grid;grid-template-columns:4fr 8fr;gap:2rem;align-items:start}
  .foot-grid{grid-template-columns:auto 1fr auto;gap:3.5rem}
}
@media (max-width:700px){
  .hide-s{display:none}
  .show-s{display:inline}
  .top nav{gap:.9rem}
  .mark{font-size:.95rem}
  .drop{width:72vw}
  .drop.d-a{width:57.6vw}
  .d-a,.d-c,.d-e,.d-g{align-self:flex-start;margin:0;margin-top:3.5rem}
  .d-b,.d-d,.d-f{align-self:flex-end;margin:0;margin-top:3.5rem}
  .d-a{margin-top:0}
  .interlude{margin:4rem 0 0}
  .natt{padding-inline:0}
  .natt-text{padding-inline:var(--pad);margin-top:-2.6rem}
  .st-2{margin:-2.5rem 1rem 0 0}
}
@media (max-width:420px){.top nav a.nav-ig{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none}
  .float{animation:none}
  .hero-video{display:none}
  .rx-on,.rx.lit .rx-on{transition:none}
  .rx.pop .flash{animation:none}
  .snd.is-on .snd-wave i{animation:none}
}