@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-tight-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-tight-latin-700-normal.woff2) format("woff2"); }

:root {
  --paper: #eeeae2;
  --ink: #1c1a17;
  --muted: #6b655c;
  --rule: rgba(28, 26, 23, 0.14);
  --pad: max(20px, 3.4vw);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.28  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  background-size: 900px 900px;
  color: var(--ink);
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  padding: var(--pad);
  padding-top: calc(var(--pad) + env(safe-area-inset-top));
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.26  0 0 0 0 0.2  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* Topp: samma placering av ordmärket som på startsidan */
.top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  margin-bottom: clamp(48px, 9vw, 120px);
}
.top nav { display: flex; gap: 18px; font-size: 16px; padding-top: 4px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.mark {
  font-weight: 700; font-size: clamp(34px, 5vw, 72px); line-height: 0.8;
  letter-spacing: -0.035em; color: var(--ink); text-decoration: none; white-space: nowrap;
}

/* Liten rad med plus som avdelare */
.pluses { display: flex; gap: 14px; margin: 0 0 28px; }
.pluses span { position: relative; width: 22px; height: 22px; display: block; }
.pluses i { position: absolute; background: var(--c); }
.pluses i:nth-child(1) { left: 0; top: 10px; width: 8px; height: 2.5px; }
.pluses i:nth-child(2) { right: 0; top: 10px; width: 8px; height: 2.5px; background: var(--d); }
.pluses i:nth-child(3) { left: 10px; top: 0; width: 2.5px; height: 8px; background: var(--e); }
.pluses i:nth-child(4) { left: 10px; bottom: 0; width: 2.5px; height: 8px; background: var(--f); }

main { max-width: 680px; }
h1 {
  font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 0.95;
  letter-spacing: -0.035em; margin-bottom: 18px;
}
.lede { color: var(--muted); margin-bottom: 48px; }
h2 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 44px 0 12px; padding-top: 18px; border-top: 1px solid var(--rule);
}
p, li { margin-bottom: 12px; }
ul { padding-left: 1.1em; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
strong { font-weight: 700; }
.mail { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; }

footer {
  margin-top: clamp(64px, 10vw, 140px); padding-top: 18px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted);
}
footer a { color: var(--muted); }

/* Smala skärmar: ordmärket överst till höger, menyn under */
@media (max-width: 600px) {
  .top { flex-direction: column-reverse; align-items: flex-end; gap: 22px; }
  .top nav { align-self: flex-start; }
  body { overflow-x: hidden; }
}

/* Stort plus framför rubriken, med exakt samma proportioner som på startsidan:
   arm = 37 % av plusets bredd, tjocklek = 20 % av armen */
h1 .plus {
  --s: 0.7em;
  --arm: calc(var(--s) * 0.37);
  --th: max(3px, calc(var(--arm) * 0.2));
  position: relative; display: inline-block;
  width: var(--s); height: var(--s); margin-right: 0.2em; vertical-align: 0;
}
h1 .plus i { position: absolute; display: block; }
h1 .plus i:nth-child(1) { left: 0;  top: calc(50% - var(--th) / 2); width: var(--arm); height: var(--th); background: var(--p1, #f2453d); }
h1 .plus i:nth-child(2) { right: 0; top: calc(50% - var(--th) / 2); width: var(--arm); height: var(--th); background: var(--p2, #f5cc2c); }
h1 .plus i:nth-child(3) { top: 0;    left: calc(50% - var(--th) / 2); width: var(--th); height: var(--arm); background: var(--p3, #1a9bd7); }
h1 .plus i:nth-child(4) { bottom: 0; left: calc(50% - var(--th) / 2); width: var(--th); height: var(--arm); background: var(--p4, #2fa877); }

/* ---------- Breda skärmar: två kolumner ---------- */
@media (min-width: 1000px) {
  main {
    max-width: none; display: grid; align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 7vw;
  }
  main .intro { position: sticky; top: var(--pad); }
  main .body { max-width: 680px; padding-top: 0.5em; }
  main .body > h2:first-child { margin-top: 0; }
}

/* ---------- Rörelse ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* Innehållet döljs tills motion.js tagit över; failsafe om skriptet inte laddas */
@keyframes tw-failsafe { to { opacity: 1; } }
.js .top, .js main { opacity: 0; animation: tw-failsafe .01s 2.5s forwards; }
.js.ready .top, .js.ready main { opacity: 1; animation: none; }

:root { --ease: cubic-bezier(.2, .75, .15, 1); }
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* Rubriken: orden glider upp ur en osynlig kant */
.js h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js h1 .w > span { display: inline-block; transform: translateY(110%); transition: transform 1.05s var(--ease); transition-delay: var(--d, 0s); }
.js h1.in .w > span { transform: none; }

/* Plusets armar växer ut från mitten */
.js h1 .plus i { transform: scale(0); transition: transform .7s cubic-bezier(.3, 1.35, .5, 1); transition-delay: var(--d, 0s); }
.js h1 .plus i:nth-child(1) { transform-origin: 100% 50%; }
.js h1 .plus i:nth-child(2) { transform-origin: 0 50%; }
.js h1 .plus i:nth-child(3) { transform-origin: 50% 100%; }
.js h1 .plus i:nth-child(4) { transform-origin: 50% 0; }
.js h1.in .plus i { transform: none; }

/* Glasbrädet */
.board i { transition: transform .55s var(--ease), opacity .55s var(--ease), filter .35s ease, background-color .2s; }
.js .board i { opacity: 0; transform: translateY(-26px) scale(.9); }
.js .board.in i { opacity: .88; transform: none; transition-delay: var(--d, 0s); }
.js .board.in i.o { opacity: 1; }
.board.live i { transition-delay: 0s; }
.board i.pop { animation: tw-pop .45s var(--ease) both; animation-delay: var(--d, 0s); }
.board i.shatter { animation: tw-shatter .5s ease-in both; animation-delay: var(--d, 0s); }
@keyframes tw-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: .88; } }
@keyframes tw-shatter {
  0%   { filter: brightness(1); transform: none; opacity: .88; }
  35%  { filter: brightness(1.9) saturate(.6); transform: scale(1.08); opacity: 1; }
  100% { filter: brightness(2.2); transform: scale(.15) rotate(25deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .top, .js main { opacity: 1; animation: none; }
  .js .rv, .js h1 .w > span, .js h1 .plus i, .js .board i { opacity: 1; transform: none; transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}