/* =====================================================================
   HØVE STØTT — Hug, leik og alvor
   Design system. Warm paper canvas, editorial backbone, brand bricks pop.
   Palette is non-negotiable: orange #FF9027 · blue #00B9F2 · lime #C4D94F
   ===================================================================== */

:root{
  /* Brand */
  --orange:#FF9027;
  --blue:#00B9F2;
  --lime:#C4D94F;
  --orange-deep:#E9741A;
  --blue-deep:#0098C9;
  --lime-deep:#A7BE33;

  /* Pillar mapping */
  --hug:var(--orange);
  --leik:var(--lime);
  --alvor:var(--blue);

  /* Paper canvas (light, warm, editorial) */
  --paper:#F4EEE1;
  --paper-2:#EDE5D4;
  --card:#FBF7EE;
  --ink:#211C16;
  --ink-2:#5C5345;
  --ink-3:#8B8170;
  --line:#241f1810;
  --line-2:#241f1822;

  /* Type */
  --display:"Schibsted Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;

  --maxw:1280px;
  --gut:clamp(20px, 5vw, 64px);
  --r:18px;
  --r-lg:30px;

  --shadow-sm:0 1px 0 #241f1814, 0 8px 22px -16px #241f1855;
  --shadow:0 2px 0 #241f1812, 0 26px 50px -30px #241f1866;
  --brick:0 6px 0 var(--brick-shade, #00000022);

  --accent:#FF9027;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* Dark canvas — the "Lego sky at night" mode */
html[data-bg="dark"]{
  --paper:#15130F;
  --paper-2:#1C1A14;
  --card:#221F18;
  --ink:#F4EEE1;
  --ink-2:#B9AE99;
  --ink-3:#857B68;
  --line:#ffffff12;
  --line-2:#ffffff24;
  --shadow-sm:0 1px 0 #00000040, 0 8px 22px -14px #000000aa;
  --shadow:0 2px 0 #00000040, 0 30px 60px -28px #000000cc;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}

/* Faint grid/paper texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--line-2) 1px, transparent 1.2px);
  background-size:46px 46px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--orange);color:#fff}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);position:relative;z-index:1}
section{position:relative;z-index:1}
.sec{padding-block:clamp(64px,9vw,128px)}

/* ---------- Type scale ---------- */
.kicker{
  font-family:var(--mono);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
  display:inline-flex;align-items:center;gap:.6em;
}
.kicker::before{display:none}
.kicker.no-rule::before{display:none}

h1,h2,h3{margin:0;font-weight:800;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.h-hero{font-size:clamp(44px,8vw,104px);font-weight:800;letter-spacing:-.035em;line-height:.92}
.h2{font-size:clamp(32px,5vw,64px)}
.h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.01em}
.lead{font-size:clamp(19px,2vw,24px);line-height:1.45;color:var(--ink-2);max-width:54ch;text-wrap:pretty}
.muted{color:var(--ink-2)}
.tiny{font-size:14px;color:var(--ink-3)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper); --edge:#0d0b08;
  position:relative;
  display:inline-flex;align-items:center;gap:.6em;
  /* base colour + a top sheen, layered in one property so the hover colour always wins */
  background:linear-gradient(#ffffff22,#ffffff00) top/100% 42% no-repeat, var(--bg);
  color:var(--fg);
  font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap;
  padding:.9em 1.35em;border:none;border-radius:15px;
  transition:transform .13s var(--ease), box-shadow .13s var(--ease), background .18s var(--ease), color .18s;
  box-shadow:0 6px 0 var(--edge), 0 16px 24px -12px #00000055;
}
/* playful rest-tilt — per-button via inline  style="--tilt:-2deg"  (maps to a CraftCMS field) */
.btn{transform:rotate(var(--tilt, -1.6deg))}
.btn.sm{transform:none}
.btn:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 9px 0 var(--edge), 0 22px 30px -12px #00000055}
.btn:active{transform:translateY(4px) rotate(0deg);box-shadow:0 2px 0 var(--edge), 0 7px 12px -8px #00000055}
.btn .ar{transition:transform .25s var(--ease-back)}
.btn:hover .ar{transform:translateX(4px)}

/* Orange = the signature brick: orange → green on hover → blue on click */
.btn.orange{--bg:var(--orange);--fg:#3a2200;--edge:#cf6f17}
.btn.orange:hover{--bg:var(--lime);--fg:#2f3600;--edge:#9fb336}
.btn.orange:active{--bg:var(--blue);--fg:#00303f;--edge:#0089bd}

.btn.blue{--bg:var(--blue);--fg:#00303f;--edge:#0089bd}
.btn.lime{--bg:var(--lime);--fg:#2f3600;--edge:#9fb336}
.btn.ghost{--bg:transparent;--fg:var(--ink);--edge:transparent;background:transparent;box-shadow:inset 0 0 0 2px var(--line-2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);transform:translateY(-3px) rotate(0deg)}
.btn.ghost:active{transform:translateY(2px) rotate(0deg)}
.btn.sm{font-size:15px;padding:.62em 1.05em;border-radius:12px}

/* CTA = signature magenta: lighter purple on hover, grey on click */
.btn.cta{--bg:#dd0079;--fg:#fff;--edge:#a40059}
.btn.cta:hover{--bg:#c97be8;--fg:#fff;--edge:#9b56c2}
.btn.cta:active{--bg:#8c8c8c;--fg:#fff;--edge:#6e6e6e}

/* ---------- Brick chip / tag ---------- */
.tag{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:.4em .7em;border-radius:8px;
  background:var(--paper-2);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.tag .dot{width:9px;height:9px;border-radius:3px}
.tag.hug .dot{background:var(--hug)} .tag.leik .dot{background:var(--leik)} .tag.alvor .dot{background:var(--alvor)}

/* ---------- Wordmark letters ---------- */
.glyph{display:inline-block;line-height:0}
.glyph svg{display:block;width:100%;height:100%}