/* Yetarch: one language for the whole site.
   Type: Schibsted Grotesk (display and reading), IBM Plex Mono (sheet labels, data, prices).
   Colour: cool paper, graphite ink and brushed silver. No accent colour: hierarchy comes from weight, size and tone.
   Motion: the base style is the finished state; only transform and opacity animate; nothing decorative loops. */
:root{
  --paper:#ECEDEE; --paper-2:#E2E4E6; --sheet:#F5F6F7; --white:#FBFBFC;
  --ink:#141618; --graphite:#30353A; --steel:#545B62; --stone:#5C636A; --hair:#CDD1D5; --line:#141618;
  --accent:#B8141B;
  --silver:linear-gradient(135deg,#F4F5F6 0%,#C3C8CD 55%,#8F969D 100%);
  --night:#141618; --night-2:#1D2024;
  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,3.2vw,48px);
  --out:cubic-bezier(.16,1,.3,1); --ease:cubic-bezier(.7,0,.2,1);
  --t-hover:.15s; --t-state:.2s; --t-panel:.38s; --t-reveal:.7s;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--white)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{padding-inline:var(--gut);max-width:1560px;margin-inline:auto}
.label{font:500 12px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;margin:0;letter-spacing:-.035em;text-wrap:balance;line-height:1}
p{text-wrap:pretty}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
.muted{color:var(--steel)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:12px;font:600 13px/1 var(--f-mono);letter-spacing:.34em;text-transform:uppercase}
.logo svg{width:30px;height:30px;flex:none}

/* header: one fixed height per breakpoint, so the page never moves when it is written in */
:root{--hh:67px}
@media (max-width:1000px){:root{--hh:105px}}
/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(236,237,238,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:66px}
.nav{display:flex;gap:clamp(14px,2vw,30px);justify-content:center;font:500 15px/1 var(--f-body);letter-spacing:-.005em}
.nav a{color:var(--steel);transition:color var(--t-hover)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.tools{display:flex;align-items:center;gap:10px}
.units{display:flex;border:1px solid var(--hair);border-radius:999px;padding:2px;font:500 11px/1 var(--f-mono)}
.units button{border:0;background:none;padding:6px 9px;border-radius:999px;cursor:pointer;color:var(--steel)}
.units button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:999px;padding:8px 13px;font:500 13px/1 var(--f-body);transition:border-color var(--t-hover),background var(--t-hover)}
.pill:hover{border-color:var(--ink)}
.pill.dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pill.dark:hover{background:var(--graphite)}

/* buttons */
.btn{appearance:none;display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid var(--ink);background:var(--ink);color:var(--white);padding:16px 22px;border-radius:2px;font:600 14px/1 var(--f-body);letter-spacing:-.005em;cursor:pointer;transition:background var(--t-state),color var(--t-state),border-color var(--t-state),scale .1s}
.btn:hover{background:var(--graphite);border-color:var(--graphite)}
.btn:active{scale:.98}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.light{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn.full{width:100%}
.btn .arr{display:inline-block;transition:translate var(--t-state) var(--out)}
.btn:hover .arr{translate:4px 0}
.btn[disabled]{opacity:.35;pointer-events:none}
.link{border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity var(--t-hover)}
.link:hover{opacity:.6}

/* section heads */
.sec{border-top:1px solid var(--hair)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 60px;align-items:end;padding:clamp(64px,8vw,120px) var(--gut) clamp(28px,3vw,44px)}
.sec-head h2{font-size:clamp(38px,5vw,76px);line-height:.95}
.sec-head p{margin:0;color:var(--graphite);font-size:clamp(18px,1.45vw,21px);line-height:1.55;max-width:46ch}
.sec-head p b{color:var(--ink);font-weight:600}
.sec-head .label{color:var(--accent)}
.sec-head .label{grid-column:1/-1;margin-bottom:-6px}

/* forms */
.field{display:grid;gap:7px;min-width:0}
.field label{font:500 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.field input,.field select,.field textarea{font:400 17px/1.4 var(--f-body);color:var(--ink);background:var(--white);border:1px solid var(--hair);border-radius:2px;padding:13px 14px;width:100%;transition:border-color var(--t-hover)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}

/* page transition to the studio */
.wipe{position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--night);clip-path:inset(0 0 0 100%)}
.wipe.paper{background:var(--paper)}
.wipe.red{background:#D10A11}
.wipe .wl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(48px,9vw,140px)/1 var(--f-display);letter-spacing:-.05em;color:var(--white);opacity:0;white-space:nowrap}
.wipe.paper .wl{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);translate:0 16px;background:var(--ink);color:var(--white);font:500 13px/1 var(--f-body);padding:14px 18px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity var(--t-panel),translate var(--t-panel) var(--out);z-index:150}
.toast.show{opacity:1;translate:0 0}

/* reveals: finished state is the default, the entrance only runs when motion is welcome */
@media (prefers-reduced-motion:no-preference){
  .rv:not(.in){opacity:0;translate:0 18px}
  .rv{transition:opacity var(--t-reveal) var(--out),translate var(--t-reveal) var(--out)}
  .draw-sheet.in img{animation:sweep 1.6s var(--ease) backwards}
  @keyframes sweep{from{clip-path:inset(0 100% 0 0)}}
}

/* footer */
.foot{background:var(--night);color:#D9DCDF}
.foot .wrap{padding-block:clamp(56px,7vw,96px) 0}
.f-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:clamp(40px,5vw,72px)}
.f-top h3{font-size:clamp(30px,3.4vw,52px);color:var(--white);max-width:14ch}
.f-top .label{color:#8B9298;display:block;margin-bottom:14px}
.f-top a,.f-top p{display:block;font:400 14px/2 var(--f-body);color:#C3C8CD;margin:0}
.f-top a:hover{color:var(--white)}
.f-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #2B2F34;padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px));font:500 10.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#80878E}
.foot .logo{color:var(--white)}
.foot .logo svg{filter:brightness(1.7) contrast(.9)}

@media (max-width:1000px){
  .top .wrap{grid-template-columns:auto auto;grid-template-rows:44px 30px;height:104px;padding-block:10px;row-gap:10px;box-sizing:border-box}
  .tools{flex-wrap:nowrap;white-space:nowrap}
  .nav{align-items:center}
  .nav a{white-space:nowrap;flex:none}
  .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:20px;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .tools{justify-self:end}
  .tools .pill:not(.dark){display:none}
  .sec-head{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .f-top>div:first-child{grid-column:1/-1}
}
@media (max-width:520px){.units{display:none}.logo span{letter-spacing:.26em}.tools .pill.dark{padding:8px 11px;font-size:12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* reserve the header before shop.js writes it, so nothing shifts */
div[data-shell="header"]{height:calc(var(--hh) + env(safe-area-inset-top,0px))}