/* v2 preview, a direction under review. Everything here is scoped to
   html, set by the floating toolbar in v2.js. Delete this file,
   v2.js and their two tags in index.html to remove the preview.

   The direction: the hero's constellation is the one signature; the rest of
   the page is quiet. One palette (night navy, ink, white, yellow as a mark),
   no stock photography, the work as the only imagery, one type system. */


/* 1 the first visit popover goes; the sky picker stays in the header */
html .quick-tip,
html .quick-hotspot { display: none !important; }

/* 2 one type system: display titles back in Schibsted at 400, no 200 cut */
html body .bento-card[class*="tone-"]>span:not(#_):not(#__):not(#___),
html body [data-r="thoughts"]>a>span:first-of-type:not(#_):not(#__):not(#___) {
  font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important; letter-spacing: -.01em !important;
}
html .ws-name { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; font-weight: 400; letter-spacing: -.01em; }

/* 3 Selected work: every screen on the same quiet stage, the constellation's
   dot field behind it, no photographs */
html .ws-shot[data-work-on]:not(#_) { --stage: #DCE6EF; background: var(--stage) !important; }
html[data-theme="dark"] .ws-shot[data-work-on]:not(#_) { --stage: #1A232B; }
html .ws-shot[data-work-on]:not(#_)::before {
  content: ""; position: absolute; inset: 0; opacity: 1;
  background: radial-gradient(circle, rgba(4, 23, 46, .18) 1.4px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 50%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
  mask-image: radial-gradient(130% 120% at 50% 50%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
}
html[data-theme="dark"] .ws-shot[data-work-on]:not(#_)::before { background-image: radial-gradient(circle, rgba(255, 255, 255, .14) 1.4px, transparent 1.6px); opacity: 1; }

/* 4 How I work: the heading and the quotes in the hero's night navy, no
   photographs; the principles stay white */
html body .bento>.bento-head:not(#_):not(#__):not(#___) {
  background: linear-gradient(115deg, #04172E 0%, #072F5E 60%, #0A4482 100%) !important;
}
html body .bento>.bento-head p:not(#_):not(#__) { text-shadow: none; }
html body .bento>.bento-quote:not(#_):not(#__):not(#___) {
  background: linear-gradient(180deg, #072F5E 0%, #04172E 100%) !important;
}
html body .bento>.bento-quote :is(blockquote, figcaption, .sec-h2):not(#_):not(#__) { text-shadow: none; }

/* 5 Thoughts: back to the drawings in the site's own language, ink lines,
   one yellow mark, a dot field, on one connected strip */
html [data-r="thoughts"] .th-mist { display: none !important; }
html [data-r="thoughts"] .th-v2 { display: block; }
html body [data-r="thoughts"]:not(#_):not(#__):not(#___) { gap: 0 !important; }
html[data-theme="light"] body [data-r="thoughts"]:not(#_):not(#__):not(#___) { outline: 1px solid rgba(51, 63, 72, .24) !important; outline-offset: -1px; }
html body [data-r="thoughts"]>a:not(#_):not(#__):not(#___) {
  position: relative; min-height: 0; justify-content: flex-start !important; overflow: visible;
  background: #FFFFFF !important; color: #333F48 !important; --ink-rgb: 51, 63, 72;
}
html body [data-r="thoughts"]>a+a:not(#_):not(#__):not(#___) { box-shadow: inset 1px 0 0 rgba(51, 63, 72, .24) !important; }
html[data-theme="dark"] body [data-r="thoughts"]>a:not(#_):not(#__):not(#___) { background: #26313A !important; color: #fff !important; --ink-rgb: 255, 255, 255; }
html[data-theme="dark"] body [data-r="thoughts"]>a+a:not(#_):not(#__):not(#___) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12) !important; }
html body [data-r="thoughts"]>a:hover:not(#_):not(#__):not(#___) { background: #F7F7F7 !important; }
html[data-theme="dark"] body [data-r="thoughts"]>a:hover:not(#_):not(#__):not(#___) { background: #2C3843 !important; }
html body [data-r="thoughts"]>a:not(#_)::before { display: none; }
html body [data-r="thoughts"]>a>span:last-child:not(#_):not(#__):not(#___) {
  position: static; padding: 24px 28px 0 !important; border: 0; border-radius: 0 !important; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; line-height: inherit; color: rgba(51, 63, 72, .6) !important;
}
html[data-theme="dark"] body [data-r="thoughts"]>a>span:last-child:not(#_):not(#__):not(#___) { color: rgba(255, 255, 255, .6) !important; }
html body [data-r="thoughts"]>a>span:first-of-type:not(#_):not(#__):not(#___) { padding: 8px 64px 28px 28px !important; color: inherit; text-shadow: none; }
html body [data-r="thoughts"]>a>span:first-of-type:not(#_)::after { top: 10px !important; opacity: .4; }
@media (max-width: 760px) {
  html body [data-r="thoughts"]:not(#_):not(#__):not(#___) { gap: 12px !important; outline: 0 !important; }
  html body [data-r="thoughts"]>a:not(#_):not(#__):not(#___),
  html body [data-r="thoughts"]>a+a:not(#_):not(#__):not(#___) { box-shadow: inset 0 0 0 1px rgba(51, 63, 72, .24) !important; }
  html[data-theme="dark"] body [data-r="thoughts"]>a:not(#_):not(#__):not(#___) { box-shadow: none !important; }
}