/* KainFit v2: shared tokens, chrome and motion. Page-specific styles stay inline in each page. */
/* Static weights on purpose: some WebKit builds ignore a variable font's wght axis and draw the Thin master */
@font-face{font-family:"Big Shoulders";src:url(fonts/BigShoulders-900.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/Schibsted-800.woff2) format("woff2");font-weight:800 900;font-display:swap}

:root{
  --ube:#2d1b4e;
  --ube-deep:#211339;
  --ube-lift:#3a2563;
  --latik:#f0b429;
  --latik-deep:#dfa51e;
  --cream:#f6f1ea;
  --ink:#1a1023;
  --purple:#6a3b8e;
  --terra:#d9694a;

  --c-protein:var(--latik-deep);
  --c-carbs:var(--purple);
  --c-fat:var(--terra);

  --display:"Big Shoulders","Arial Narrow",sans-serif;
  --body:"Schibsted",system-ui,sans-serif;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);

  --gutter:clamp(16px,4vw,48px);
  --z-grain:1;--z-content:2;--z-menu:9;--z-nav:10;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark}
button,a,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.skip{position:fixed;left:16px;top:16px;transform:translateY(-200%);z-index:30;padding:12px 18px;border-radius:12px;background:var(--latik);color:var(--ink);font-weight:800;text-decoration:none;transition:transform .2s var(--ease-out)}
.skip:not(:focus){clip-path:inset(50%)}
.skip:focus{transform:none;clip-path:none}
body{
  margin:0;min-height:100dvh;
  background:var(--ube);color:var(--cream);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
/* The body clip alone does not stop phones: while a card or photo slides in from
   the side, Android Chrome and iPhone Safari let the page widen and wobble.
   Clipping main sideways holds it. clip, not hidden, so sticky still works. */
main{overflow-x:clip}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--latik);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Film grain, fixed and inert so it never repaints with scroll */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav: a floating island, not a bar ---------- */
.nav{
  position:fixed;z-index:var(--z-nav);top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  width:min(calc(100% - 24px),1180px);
  display:flex;align-items:center;gap:12px;
  padding:7px 7px 7px 14px;border-radius:999px;
  background:rgba(33,19,57,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(246,241,234,.1),inset 0 1px 0 rgba(246,241,234,.08),0 18px 40px -18px rgba(10,4,20,.6);
  animation:navIn .7s var(--ease-expo) both;
}
@keyframes navIn{from{opacity:0;transform:translate(-50%,-16px)}}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.01em;min-height:44px}
.brand img{width:26px;height:auto}
.brand b{color:var(--latik);font-weight:800}
.nav__links{display:flex;gap:4px;margin:0 auto;padding:0;list-style:none}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;color:rgba(246,241,234,.86);transition:background-color .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){.nav__links a:hover{background:rgba(246,241,234,.08);color:var(--cream)}}

.pill{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:6px 6px 6px 20px;border:0;border-radius:999px;
  background:var(--latik);color:var(--ink);font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 -2px 0 rgba(26,16,35,.18),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s var(--ease-out),background-color .2s ease;
}
.pill:active{transform:scale(.97)}
.pill__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(26,16,35,.12);transition:transform .35s var(--ease-drawer)}
.pill__icon svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){
  .pill:hover{background:#f6c14a}
  .pill:hover .pill__icon{transform:translate(2px,-1px) scale(1.06)}
}

.burger{display:none;width:46px;height:46px;border:0;border-radius:50%;background:rgba(246,241,234,.08);cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--cream);transition:transform .35s var(--ease-drawer),opacity .2s ease}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:96px var(--gutter) 48px;background:rgba(26,16,35,.9);overscroll-behavior:contain;
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease-out),visibility 0s linear .3s;
}
.menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--ease-out),visibility 0s}
.menu a{font-family:var(--display);font-weight:900;font-size:clamp(3rem,14vw,5rem);line-height:1;text-transform:uppercase;text-decoration:none;padding:6px 0;
  opacity:0;transform:translateY(28px);transition:opacity .45s var(--ease-expo),transform .6s var(--ease-expo)}
.menu.is-open a{opacity:1;transform:none}
.menu.is-open a:nth-child(2){transition-delay:.05s}.menu.is-open a:nth-child(3){transition-delay:.1s}.menu.is-open a:nth-child(4){transition-delay:.15s}
.menu a:last-child{color:var(--latik)}

.field{display:flex;gap:8px;align-items:center;padding:6px;border-radius:999px;background:var(--cream);box-shadow:inset 0 2px 6px rgba(26,16,35,.12)}
.field input{
  flex:1;min-width:0;min-height:46px;padding:0 6px 0 16px;border:0;background:transparent;color:var(--ink);
  font-size:17px;font-weight:600;outline:none;
}
.field input::placeholder{color:#5c4f6b}
.field:focus-within{box-shadow:inset 0 2px 6px rgba(26,16,35,.12),0 0 0 3px var(--latik)}
.field .pill{flex:none}
/* =====================================================================
   Sections below the hero. Each one is a plate set down on the last:
   rounded crown, pulled up over the section before it.
   ===================================================================== */
.sec{
  position:relative;z-index:var(--z-content);
  padding:clamp(96px,11vw,168px) var(--gutter) clamp(120px,12vw,184px);
  margin-top:calc(-1 * var(--crown));
  border-radius:var(--crown) var(--crown) 0 0;
  scroll-margin-top:72px;
}
:root{--crown:clamp(28px,4.5vw,64px)}
.wrap{max-width:1240px;margin:0 auto;position:relative}
.sec h2{
  margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,1.9rem + 4.6vw,6rem);line-height:.9;letter-spacing:-.005em;text-wrap:balance;
}
.sec__lede{margin:18px 0 0;max-width:56ch;font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);text-wrap:pretty}
.head{display:grid;gap:4px;margin-bottom:clamp(40px,6vw,72px);max-width:880px}

/* Reveals: content is visible by default. Only when the observer is
   running (html.io) does anything wait for its entrance, and every
   entrance is an animation that ends on the visible state. */
html.io [data-in]:not(.in){opacity:0;pointer-events:none}
[data-in].in{animation:var(--anim,rise) .9s var(--ease-expo) var(--d,0ms) both}
[data-in="set"]{--anim:setDown}
[data-in="phone"]{--anim:phoneUp}
[data-in="wipe"]{--anim:wipe}
[data-in="focus"]{--anim:focusPull}
[data-in="pop"]{--anim:popIn}
[data-in="fly"]{--anim:flyIn}
@keyframes setDown{from{opacity:0;transform:translateY(-34px) rotate(calc(var(--r,0deg) * 3)) scale(1.03)}to{transform:rotate(var(--r,0deg))}}
@keyframes phoneUp{from{opacity:0;transform:perspective(1200px) translateY(70px) rotateX(22deg)}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes focusPull{from{opacity:0;filter:blur(14px);transform:scale(1.05)}}
@keyframes popIn{from{opacity:0;transform:scale(.86) rotate(-3deg)}}
@keyframes flyIn{from{opacity:0;transform:translate(var(--fx,0),var(--fy,40px)) rotate(var(--fr,-20deg)) scale(.8)}to{transform:rotate(var(--rr,0deg))}}
.chip{text-decoration:none;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:rgba(246,241,234,.1);box-shadow:inset 0 0 0 1px rgba(246,241,234,.18);color:var(--cream);font-weight:800;font-size:15px;cursor:pointer;transition:transform .16s var(--ease-out),background-color .2s ease}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip:hover{background:rgba(246,241,234,.16)}}
.pill--ube{background:var(--ube);color:var(--cream);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.pill--ube .pill__icon{background:rgba(246,241,234,.14)}
@media (hover:hover) and (pointer:fine){.pill--ube:hover{background:var(--ube-lift)}}
/* ---------- Footer ---------- */
.foot{position:relative;z-index:var(--z-content);margin-top:calc(-1 * var(--crown));border-radius:var(--crown) var(--crown) 0 0;padding:clamp(64px,8vw,96px) var(--gutter) calc(28px + env(safe-area-inset-bottom));background:#140b22;color:rgba(246,241,234,.82)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start}
.foot .brand{font-size:24px;color:var(--cream)}
.foot .brand img{width:32px}
.foot__promise{margin:14px 0 0;max-width:36ch;font-size:17px;font-weight:700;color:var(--cream)}
.foot__fine{margin:10px 0 0;max-width:48ch;font-size:14px}
.foot ul{display:grid;grid-template-columns:repeat(2,auto);gap:4px 36px;margin:0;padding:0;list-style:none}
.foot ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;color:rgba(246,241,234,.86);transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.foot ul a:hover{color:var(--latik)}}
.foot__set{display:flex;flex-wrap:wrap;gap:10px;margin:48px 0 28px}
.foot__set svg{width:40px;height:40px}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:22px;border-top:1px solid rgba(246,241,234,.12);font-size:14px}

/* ---------- Shared chrome at small sizes ---------- */
@media (max-width:900px){
  .nav__links,.nav .pill__label{display:none}
  .burger{display:block}
  .nav{padding-left:16px}
  .nav .pill{padding:6px;margin-left:auto}
  .nav .pill__label-short{display:inline;padding-left:12px}
}
@media (min-width:901px){.nav .pill__label-short{display:none}}
@media (max-width:420px){
  .field{flex-wrap:wrap;border-radius:22px}
  .field input{flex-basis:100%;padding-left:12px}
  .field .pill{width:100%;justify-content:space-between}
}
@media (max-width:600px){.foot__grid{grid-template-columns:minmax(0,1fr)}}
.nav__links a[aria-current="page"]{background:rgba(246,241,234,.1);color:var(--cream)}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}

/* The nav slides in once per visit, not on every page */
html.seen .nav{animation:none}

/* ---------- Page to page: the nav holds still, the page glides ----------
   Cross-document view transitions. Browsers without them just navigate. */
@view-transition{navigation:auto}
.nav{view-transition-name:nav}
::view-transition-group(nav){animation-duration:0s}
::view-transition-old(root){animation:vtOut .22s var(--ease-out) both}
::view-transition-new(root){animation:vtIn .6s var(--ease-expo) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px) scale(.992);filter:blur(3px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(24px)}}

/* ---------- Smooth wheel scrolling (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Page heads for the inner pages ---------- */
.pagehead{position:relative;z-index:var(--z-content);isolation:isolate;padding:clamp(128px,14vw,188px) var(--gutter) calc(clamp(72px,9vw,120px) + var(--crown));overflow:clip}
.pagehead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 80% 40%,rgba(106,59,142,.7),transparent 70%),radial-gradient(40% 45% at 5% 100%,rgba(240,180,41,.14),transparent 70%)}
.pagehead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;
  background:repeating-linear-gradient(45deg,var(--cream) 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,var(--cream) 0 2px,transparent 2px 22px);
  -webkit-mask-image:radial-gradient(60% 70% at 75% 45%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 75% 45%,#000,transparent 75%)}
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:var(--latik);color:var(--ink);font-weight:800;font-size:14px;animation:rise .7s var(--ease-expo) both}
.pagehead h1{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;
  font-size:clamp(3.75rem,2.4rem + 6vw,7.5rem);color:var(--cream);text-wrap:balance;
  text-shadow:1px 1px 0 var(--terra),2px 2px 0 var(--terra),3px 3px 0 var(--terra),4px 4px 0 var(--terra),5px 5px 0 var(--terra),6px 6px 0 var(--terra);
  animation:lineUpBlock 1s var(--ease-expo) .05s both}
@keyframes lineUpBlock{from{opacity:0;transform:translateY(40px);clip-path:inset(0 0 100% 0)}to{clip-path:inset(-20% -10% -20% -10%)}}
.pagehead__lede{margin:22px 0 0;max-width:52ch;font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);color:rgba(246,241,234,.86);text-wrap:pretty;animation:rise .8s var(--ease-expo) .25s both}
.pagehead__date{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--latik);animation:rise .8s var(--ease-expo) .2s both}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}

/* Cream reading plate for long copy */
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--gold{background:var(--latik);color:var(--ink)}
.sec--ube{background:var(--ube);color:var(--cream)}
.sec--deep{background:var(--ube-deep);color:var(--cream)}
.sec--ink{background:var(--ink);color:var(--cream)}
.prose{max-width:64ch;font-size:clamp(1.02rem,.97rem + .25vw,1.14rem);line-height:1.65}
.prose p{margin:0 0 1em}
.prose a{color:inherit;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sec--cream .prose a{color:var(--ube)}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

.head .kicker{justify-self:start}