:root {
    /* Backgrounds */
    --color-background-accent:                         #E24C4F;
    --color-background-attention:                      #FFFFD6;
    --color-background-neutral:                        rgba(0, 0, 0, .21);
    --color-background-static-dark:                    #222222;
    --color-background-static-light:                   #FFFFFF;
    --color-background-placeholder:                    rgba(255, 255, 255, .1);
    --color-background-scrim:                          rgba(0, 0, 0, .6);
    --color-background-base-primary:                   #1E1E1E;
    --color-background-base-secondary:                 #2A2A2A;
    --color-background-base-secondary-gradient:        green;
    --color-background-collection-primary:             #121212;
    --color-background-collection-secondary:           #2A2A2A;
    --color-background-collection-secondary-gradient:  green;
    --color-background-elevated-primary:               #2A2A2A;
    --color-background-elevated-secondary:             #1E1E1E;
    --color-background-masthead-default:               #121212;
    --color-background-menu-primary:                   #1E1E1E;
    --color-background-menu-secondary:                 #2A2A2A;
    --color-background-nav-default:                    #E24C4F;
    --color-background-nav-hover:                      green;
    --color-background-nav-selected:                   green;

    /* Text */
    --color-text-accent:                               #E24C4F;
    --color-text-default:                              #FFFFFF;
    --color-text-weak:                                 #A0A0A0;
    --color-text-on-accent:                            #FFFFFF;
    --color-text-on-dark:                              #FFFFFF;
    --color-text-on-light:                             #222222;
    --color-text-tag:                                  #E24C4F;
    --color-text-error:                                green;
    --color-text-link-default:                         #81D4FA;
    --color-text-link-hover:                           #81D4FA;
    --color-text-link-active:                          #81D4FA;
    --color-text-link-visited:                         #81D4FA;
    --color-text-link-focus:                           #E24C4F;

    /* Border*/
    --color-border-accent:                             #E24C4F;
    --color-border-accessible:                         #7D7D7D;
    --color-border-default:                            rgba(0,0,0,.21);
    --color-border-error:                              green;
}
@media (prefers-color-scheme: light) {
  .aftonbladet {
    /* Backgrounds */
    --color-background-accent:                         #DD2A30;
    --color-background-attention:                      #F8F7CF;
    --color-background-neutral:                        rgba(0, 0, 0, .09);
    --color-background-static-dark:                    #222222;
    --color-background-static-light:                   #FFFFFF;
    --color-background-placeholder:                    rgba(0, 0, 0, .1);
    --color-background-scrim:                          rgba(0, 0, 0, .5);
    --color-background-base-primary:                   #FFFFFF;
    --color-background-base-secondary:                 #F7F7F7;
    --color-background-base-secondary-gradient:        green;
    --color-background-collection-primary:             #F7F7F7;
    --color-background-collection-secondary:           #FFFFFF;
    --color-background-collection-secondary-gradient:  green;
    --color-background-elevated-primary:               #FFFFFF;
    --color-background-elevated-secondary:             #F7F7F7;
    --color-background-masthead-default:               #FFFFFF;
    --color-background-menu-primary:                   #FFFFFF;
    --color-background-menu-secondary:                 #F7F7F7;
    --color-background-nav-default:                    #DD2A30;
    --color-background-nav-hover:                      green;
    --color-background-nav-selected:                   green;

    /* Text */
    --color-text-accent:                               #DD2A30;
    --color-text-default:                              #222222;
    --color-text-weak:                                 #585858;
    --color-text-on-accent:                            #FFFFFF;
    --color-text-on-dark:                              #FFFFFF;
    --color-text-on-light:                             #222222;
    --color-text-tag:                                  #DD2A30;
    --color-text-error:                                green;
    --color-text-link-default:                         #0078BD;
    --color-text-link-hover:                           #0067A3;
    --color-text-link-active:                          #00578A;
    --color-text-link-visited:                         #004770;
    --color-text-link-focus:                           #C4252B;

    /* Border*/
    --color-border-accent:                             #DD2A30;
    --color-border-accessible:                         #909090;
    --color-border-default:                            rgba(0,0,0,.09);
    --color-border-error:                              green;
  }

  .sportbladet {
    /* Backgrounds */
    --color-background-accent:                         #A11014;
    --color-background-attention:                      #FFFED6;
    --color-background-neutral:                        rgba(0, 0, 0, .09);
    --color-background-static-dark:                    #222222;
    --color-background-static-light:                   #FFFFFF;
    --color-background-placeholder:                    rgba(0, 0, 0, .1);
    --color-background-scrim:                          rgba(0, 0, 0, .5);
    --color-background-base-primary:                   #FDE3E6;
    --color-background-base-secondary:                 #FEEBEE;
    --color-background-base-secondary-gradient:        green;
    --color-background-collection-primary:             #fdd5db;
    --color-background-collection-secondary:           #feebee;
    --color-background-collection-secondary-gradient:  green;
    --color-background-elevated-primary:               #FEEBEE;
    --color-background-elevated-secondary:             #FDE3E6;
    --color-background-masthead-default:               #FDE3E6;
    --color-background-menu-primary:                   #FEEBEE;
    --color-background-menu-secondary:                 #FDD5DB;
    --color-background-nav-default:                    #A11014;
    --color-background-nav-hover:                      green;
    --color-background-nav-selected:                   green;

    /* Text */
    --color-text-accent:                               #A11014;
    --color-text-default:                              #222222;
    --color-text-weak:                                 #585858;
    --color-text-on-accent:                            #FFFFFF;
    --color-text-on-dark:                              #FFFFFF;
    --color-text-on-light:                             #222222;
    --color-text-tag:                                  #A11014;
    --color-text-error:                                green;
    --color-text-link-default:                         #006BA8;
    --color-text-link-hover:                           #0067A3;
    --color-text-link-active:                          #00578A;
    --color-text-link-visited:                         #004770;
    --color-text-link-focus:                           #911C20;

    /* Border*/
    --color-border-accent:                             #A11014;
    --color-border-accessible:                         #909090;
    --color-border-default:                            rgba(0,0,0,.09);
    --color-border-error:                              green;
  }
}
@media (prefers-color-scheme: dark) {
  .aftonbladet {
    /* Backgrounds */
    --color-background-accent:                         #E24C4F;
    --color-background-attention:                      #FFFFD6;
    --color-background-neutral:                        rgba(0, 0, 0, .21);
    --color-background-static-dark:                    #222222;
    --color-background-static-light:                   #FFFFFF;
    --color-background-placeholder:                    rgba(255, 255, 255, .1);
    --color-background-scrim:                          rgba(0, 0, 0, .6);
    --color-background-base-primary:                   #1E1E1E;
    --color-background-base-secondary:                 #2A2A2A;
    --color-background-base-secondary-gradient:        green;
    --color-background-collection-primary:             #121212;
    --color-background-collection-secondary:           #2A2A2A;
    --color-background-collection-secondary-gradient:  green;
    --color-background-elevated-primary:               #2A2A2A;
    --color-background-elevated-secondary:             #1E1E1E;
    --color-background-masthead-default:               #121212;
    --color-background-menu-primary:                   #1E1E1E;
    --color-background-menu-secondary:                 #2A2A2A;
    --color-background-nav-default:                    #E24C4F;
    --color-background-nav-hover:                      green;
    --color-background-nav-selected:                   green;

    /* Text */
    --color-text-accent:                               #E24C4F;
    --color-text-default:                              #FFFFFF;
    --color-text-weak:                                 #A0A0A0;
    --color-text-on-accent:                            #FFFFFF;
    --color-text-on-dark:                              #FFFFFF;
    --color-text-on-light:                             #222222;
    --color-text-tag:                                  #E24C4F;
    --color-text-error:                                green;
    --color-text-link-default:                         #81D4FA;
    --color-text-link-hover:                           #81D4FA;
    --color-text-link-active:                          #81D4FA;
    --color-text-link-visited:                         #81D4FA;
    --color-text-link-focus:                           #E24C4F;

    /* Border*/
    --color-border-accent:                             #E24C4F;
    --color-border-accessible:                         #7D7D7D;
    --color-border-default:                            rgba(0,0,0,.21);
    --color-border-error:                              green;
  }

  .sportbladet {
    /* Backgrounds */
    --color-background-accent:                         #FDD5DA;
    --color-background-attention:                      #FFFFD6;
    --color-background-neutral:                        rgba(0, 0, 0, .18);
    --color-background-static-dark:                    #222222;
    --color-background-static-light:                   #FFFFFF;
    --color-background-placeholder:                    rgba(255, 255, 255, .1);
    --color-background-scrim:                          rgba(0, 0, 0, .6);
    --color-background-base-primary:                   #2E1116;
    --color-background-base-secondary:                 #431920;
    --color-background-base-secondary-gradient:        green;
    --color-background-collection-primary:             #230107;
    --color-background-collection-secondary:           #431920;
    --color-background-collection-secondary-gradient:  green;
    --color-background-elevated-primary:               #431920;
    --color-background-elevated-secondary:             #2E1116;
    --color-background-masthead-default:               #230107;
    --color-background-menu-primary:                   #2E1116;
    --color-background-menu-secondary:                 #431920;
    --color-background-nav-default:                    #FDD5DA;
    --color-background-nav-hover:                      green;
    --color-background-nav-selected:                   green;

    /* Text */
    --color-text-accent:                               #FF7692;
    --color-text-default:                              #FFFFFF;
    --color-text-weak:                                 #BFAEB1;
    --color-text-on-accent:                            #431920;
    --color-text-on-dark:                              #FFFFFF;
    --color-text-on-light:                             #222222;
    --color-text-tag:                                  #FDD5DA;
    --color-text-error:                                green;
    --color-text-link-default:                         #81D4FA;
    --color-text-link-hover:                           #81D4FA;
    --color-text-link-active:                          #81D4FA;
    --color-text-link-visited:                         #81D4FA;
    --color-text-link-focus:                           #FF7692;

    /* Border*/
    --color-border-accent:                             #FDD5DA;
    --color-border-accessible:                         #856A6E;
    --color-border-default:                            rgba(0,0,0,.18);
    --color-border-error:                              green;
  }
}
@font-face {
  font-family:           'JP Grotesk by Jonas Petersson';
  src:                    url("/fonts/PeterssonGrotesk-0.008-Regular.woff2") format("woff2");
  font-display:           swap;
  font-weight:            400;
  font-style:             normal;
  font-stretch:           normal;
  font-variant:           normal;
}
:root {
  --font-family-default:  "arial", sans-serif;
  --font-family-display:  "verdana", sans-serif;
  --font-family-mono:     monospace, monospace;
  --font-weight-regular:  400;
  --font-weight-bold:     700;
  --font-size-default:    100%;
  --text-11-bold:         normal normal var(--font-weight-bold) 11px/14px var(--font-family-default);
  --text-14-bold:         normal normal var(--font-weight-bold) 14px/18px var(--font-family-default);
  --text-16-bold:         normal normal var(--font-weight-bold) 16px/21px var(--font-family-default);
  --font-headline:        normal normal var(--font-weight-medium) 2em/1.2 var(--font-family-default);
  --font-subhead:         normal normal var(--font-weight-regular) 1.25em/1.5 var(--font-family-default);
  --font-body:            normal normal var(--font-weight-regular) 1em/1.5 var(--font-family-default);
  --font-code:            normal normal var(--font-weight-regular) 0.875em/1.5 var(--font-family-mono);
}
@media (min-width: 590px) {
  :root {
    --font-headline:      normal normal var(--font-weight-medium) 3em/1.2 var(--font-family-default);
  }
}
:root {
  --size-site-max-width: 1400px;
  --size-site-margin: 6.4vw;
  --size-grid-gap-width: 1.5em;
  --size-text-max-width: 28em;
  --size-measure: 60ch;
}
/*
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
 */
.u-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.u-flow > * + * {
  margin-top: var(--flow-space, 1em);
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
:root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  cursor: default;
  /*
  overflow: hidden;
  */
  background-color: var(--color-base);
  font: var(--font-body);
  color: var(--color-text);
  font-size: var(--font-size-default);
  max-width: 1280px;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  /*
  text-rendering: optimizeSpeed;
  */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  background-color: var(--color-background);
  min-height: 100vh;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
  font-size: inherit;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
input,
textarea,
select {
  font: inherit;
  /*
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  */
}
button {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: default;
}
pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
img,
picture {
  /*
  display: block;
  */
  width: 100%;
  height: auto;
  /*
  max-width: 100%;
  */
}
hr {
  display: block;
  width: 100%;
  height: 1px;
  padding: 0;
  border: 0;
  margin: 0;
  background-color: currentColor;
}
svg:not([fill]) {
  fill: currentColor;
}
a:not(.Button) {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:not(.Button):hover,
a:not(.Button):active {
  background-color: transparent;
}
a:not(.Button):active {
  opacity: 0.6;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
::-moz-selection {
  background: yellow;
}
::selection {
  background: yellow;
}
::-moz-selection {
  background: yellow;
}
/*
 * https://github.com/WICG/focus-visible
 * https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
 */
:focus:not(:focus-visible) {
  outline: 0;
}
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: .25em;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.Text h1,
.Text h2,
.Text h3,
.Text h4,
.Text h5,
.Text h6,
.Text b,
.Text strong {
  font-weight: 400;
}
.Text i,
.Text em {
  font-style: normal;
  font-weight: 400;
}
.Text h1 {
  font: var(--font-headline);
}
.Text h2 {
  font: var(--font-subhead);
}
.Text p {
  font: var(--font-body);
}
.Text blockquote {
  padding-left: 1.5em;
  border-left: 1px solid var(--color-foreground);
}
.Text figcaption {
  font-size: 80%;
}
.Text ul:not([class]),
.Text ol:not([class]) {
  list-style: none;
  padding: 0;
}
.Text li:not([class]) > ul {
  margin: 0;
}
.Text ul:not([class]) li,
.Text li:not([class]) {
  position: relative;
  padding-left: 1.5em;
}
.Text li:not([class]):before {
  position: absolute;
  left: 0px;
}
.Text ul:not([class]) li:before {
  content: "•";
}
.Text ol:not([class]) li {
  counter-increment: step-counter;
}
.Text ol:not([class]) li:before {
  content: counter(step-counter) ".";
}
/* Code */
.Text pre {
  displat: block;
}
.Text code {
  display: block;
  background: var(--color-background-neutral);
  border-radius: 2px;
  padding: 1em;
  width: 100%;
  overflow: auto;
  font: var(--font-code);
}
/* Horizontal rule */
.Text hr {
  border: none;
  border-top: 1px solid var(--color-foreground);
}
/* Tables */
.Text table {
  table-layout: auto;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--color-foreground);
  word-break: normal;
}
.Text th,
.Text td {
  border: 1px solid var(--color-foreground);
  padding: .5em 1em;
  vertical-align: top;
  font-weight: normal;
  text-align: left;
}
.Text th {
  text-transform: uppercase;
}
.Text a:not([class]) {
  border-bottom: 1px solid var(--color-link);
}
.Text a:hover:not([class]) {
  color: var(--color-link);
}
img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}
svg {
  display: block;
  position: relative;
}
picture {
  display: block;
}
picture,
figure,
.Grid {

}
.Grid figure,
.Grid svg {
  margin: 0;
}
figure picture {
  margin-top: 0;
  margin-bottom: 0;
}
figcaption {
  margin-top: 0.5em;
}
:root {
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-xl: 20px;
}
/*
@import 'normalize.css';
@import 'sanitize.css';
*/
.Body--collection {
  background-color: var(--color-background-collection-primary);
}
.Button {
  display: flex;
  align-items: center; 
  justify-content: center; 
  cursor: pointer;
  text-decoration: none;
}
.Button > * {
  pointer-events: none;
}
.Button--large {
  height: 44px;
  border-radius: 22px;
  font: var(--text-16-bold);
  color: var(--color-text-on-light);
  display: inline-flex;
  padding: 0 24px;
}
.Button--icon.Button--large {
  width: 44px;
  padding: 0;
}
.Button--filled {
  background-color: var(--color-background-static-light);
  box-shadow: 
  0 1px 2px 0 rgb(26 26 26 / 30%), 
  0 1px 3px 1px rgb(26 26 26 / 15%);
}
.Shorts {
  position: fixed;
  background-color: var(--color-background-base-primary);
  z-index: 2;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: 100vh;
  display: none;
  flex-direction: column;
  list-style: none; 
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: auto;
}
.Shorts.is-visible {
  display: flex;
}
.Shorts-item {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.Shorts-player {
  position: relative;
  background: #222;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.Shorts-video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.format-16 .Shorts-video {
  height: 100%;
  width: 200%;
  position: absolute;
  left: -50%;
  right: -50%;
  margin: auto;
  -o-object-fit: none;
     object-fit: none;
}
.Shorts-controls  {
 
}
.Shorts-controls > * {
  position: fixed;
  z-index: 4;
}
.Shorts-close {
  top: 48px;
  right: 48px;
}
.Shorts-audio {
  bottom: 16px;
  right: 16px;
}
.Icon--audio-on {
    display: none;
  }
.Icon--audio-off {
    display: block;
  }
.is-on .Icon--audio-on {
    display: block;
  }
.is-on .Icon--audio-off {
    display: none;
  }
.Shorts-close {
  top: 16px;
  right: 16px;
}
.Shorts-nav {
  display: none;
}
.Shorts-progress {
  background: rgba(0,0,0,.2);
  position: fixed;
  z-index: 4;
  height: 6px;
  width: 100%;
}
.Shorts-progressBar {
  background: var(--color-background-accent);
  width: 0%;
  height: 6px;
}
.Shorts-caption {
  position: absolute;
  display: block;
  z-index: 2;
  width: 100%;
  bottom: 0px;
  padding: 48px 112px 16px 16px;
  background-image: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0));
}
.Shorts-caption p {
  display: inline-block;
  font: var(--text-16-bold);
  color: var(--color-text-on-dark);
  text-shadow: 0px 1px #000;
  min-height: 44px;
}
.Shorts-caption .Button {
  margin-top: 16px;
}
@media (min-width: 590px) {
  .Shorts-player {
    position: relative;
    aspect-ratio: 9 / 16;
    background: #222;
    width: 320px;
    height: auto;
    overflow: hidden;
    border-radius: 32px;
    transition: transform .3s ease;
  }
  
  .Shorts-item.in-view .Shorts-player {
    transform: scale(1);
  }
  .Shorts-item:not(.in-view) .Shorts-player {
    transform: scale(0.7);
  }

  .Shorts-video {
    display: block;
    width: 100%;
    height: auto;
  }

  .format-16 .Shorts-video {
    height: 100%;
    width: 200%;
    position: absolute;
    left: -50%;
    right: -50%;
    margin: auto;
  }
  
  .Shorts-close {
    top: 48px;
    right: 48px;
  }

  .Shorts-audio {
    top: 104px;
    right: 48px;
  }

  .Shorts-nav {
    display: none;
    width: 48px;
    height: 104px;
    right: 48px;
    bottom: 48px;
  }

  .Shorts-nav > :first-child {
    position: absolute;
    top: 0px;
  }

  .Shorts-nav > :last-child {
    position: absolute;
    bottom: 0px;
  }

  .Shorts-nav .Button {
    display: none;
  }

  .Shorts-nav .Button.is-visible {
    display: flex;
  }

  .Shorts-nav {
    display: block;
  }

  .Shorts-caption {
    padding: 48px 24px 24px 24px;
  }
}
.WidgetShorts {
  
}
.WidgetShorts-list::-webkit-scrollbar {
  display: none;
}
.WidgetShorts-list {
  overflow-x: auto;
  scroll-snap-type: x mandatory;   
  scroll-behavior: smooth;
  display: flex;
  flex-wrap: nowrap;
  align-items: center; 
  padding: 0 16px;
  margin: 0 -16px 0 -16px;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.WidgetShorts-item {
  position: relative;
  width: 128px;
  height: 228px;
  border-radius: 20px;
  -webkit-transform: translateZ(0);
  overflow: hidden;
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-margin: 0 16px 0 16px;
}
.WidgetShorts-link {
  display: flex;
  height: 100%;
  background: yellow;
}
.WidgetShorts-image {
  position: absolute;
  top: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity .4s ease;
}
@media (hover: hover) {
  .WidgetShorts-link:hover .WidgetShorts-image {
    opacity: 0;
  }
}
.WidgetShorts-video {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
}
.format-16 .WidgetShorts-video {
  height: 100%;
  width: auto;
  position: absolute;
  left: -9999px;
  right: -9999px;
  margin: auto;
}
.WidgetShorts-caption {
  position: absolute;
  z-index: 2;
  width: 100%;
  bottom: 0;
  font: var(--text-14-bold);
  color: var(--color-text-on-dark);
  padding: 48px 12px 12px;
  background-image: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0));
  text-shadow: 0px 1px #000;
}
.WidgetShorts-image,
.WidgetShorts-video,
.WidgetShorts-caption {
  pointer-events: none;
}
.Badge {
  background-color: var(--color-background-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-xs);
  font: var(--text-11-bold);
  text-transform: uppercase;
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 5px;
}
.Box {
  max-width: 660px;
  background-color: var(--color-background-collection-secondary);
  border: 1px solid var(--color-border-default);
  padding: 16px;
}
.Box-header {
  padding-bottom: 8px;
}
/* Becase I cna't put role="list" on breadcrumbs ul */
.Breadcrumbs {
  list-style: none;
}
.Breadcrumbs {
  display: flex;
  margin-bottom: 1em;
}
.Breadcrumbs-item:after {
  padding: 0 .5em;
}
.Breadcrumbs-item:not(:last-child):after {
  content: '/';
}
.Footer {
  border-top: 1px solid var(--color-foreground);
  margin-top: 4em;
  padding-top: 1em;
  font-size: 80%;
}
.Grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.Grid-item--span2 {
  grid-column: 1 / span 2;
}
.Masthead {
  padding-top: 2em;
  position: relative;
}
.Masthead-profile {
  display: block;
  width: 48px;
  margin-bottom: 1em;
  position: relative;
  left: -0.4em;
}
.Masthead-profile img {
  width: 100%;
  height: auto;
}
.Masthead nav ul {
  display: flex;
  -moz-column-gap: 1em;
       column-gap: 1em;
  flex-wrap: wrap;
}
@media (min-width: 1012px) {

  .Masthead {
    padding-top: 0;
  }

  .Masthead-profile {
    display: block;
    width: 64px;
    position: absolute;
    top: -0.2em;
  }

  .Masthead-brand {
    display: flex;
    align-items: center;
    margin-bottom: 2em;
  }

  .Masthead-logo {
    font: var(--font-logo);
    color: var(--color-text);
  }

  .Masthead nav ul {
    display: block;
  }

  .Masthead-appearance {
    padding-top: 4em;
    display: flex;
    align-items: center;
  }


}
.Player-link {
  position: relative;
  padding-left: 1.2em;
  display: flex;
  align-items: center;
}
.Player-linkTime {
  margin-left: auto;
  display: flex;
}
.Player-linkCurrentTime {
  display: none;
}
.Player-linkCurrentTime:after {
  content: '\a0/\a0';
}
.Player-linkDuration:before {
  content: ' ';
}
.Player-link--selected .Player-linkCurrentTime {
  display: inline;
}
.Player-link--selected {
  animation-name: playlist-selected;
  animation-duration: .5s;
  animation-iteration-count: infinite;
}
@keyframes playlist-selected {
  from  { opacity: 1; }
  to    { opacity: .5; }
}
.Player-link--play:before {
  position: absolute;
  left: 0;
  content: ' ';
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23000000" d="M17.5,12l-9,6l0,-12l9,6Z"/></svg>');
}
.Player-link--pause:before {
  position: absolute;
  left: 0;
  content: ' ';
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="%23000000"><rect x="7" y="6" width="4" height="11"/><rect x="13" y="6" width="4" height="11"/></g></svg>');
}
@media (prefers-color-scheme: dark) {
  .Player-link--play:before {
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23dddddd" d="M17.5,12l-9,6l0,-12l9,6Z"/></svg>');
  }
  .Player-link--pause:before {
    background: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="%23dddddd"><rect x="7" y="6" width="4" height="11"/><rect x="13" y="6" width="4" height="11"/></g></svg>');
  }
}
.Poster {
  --poster-background: var(--background, var(--color-foreground));
  --poster-foreground: var(--foreground, var(--color-background));
}
.Poster rect {
  fill: var(--poster-background);
}
.Poster text {
  fill: var(--poster-foreground);
}
.Checkbox {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
}
.Checkbox-field {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.Checkbox-label {
  padding-left: 2.25em;
  display: block;
}
.Checkbox-label:before {
  position: absolute;
  left: 0px;
  top: 1px;
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  background: transparent;
  border-radius: 10px;
  border: 1px solid var(--sample-foreground);
}
.Checkbox-field + .Checkbox-label:before {
  background-repeat: no-repeat;
  background-position: -2px 50%;
}
.Checkbox-field:checked + .Checkbox-label:before {
  border: 1px solid var(--sample-foreground);
  background-color: var(--sample-foreground);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6237117,7.6707477 C17.8055527,7.46292938 18.121434,7.44187063 18.3292523,7.62371165 C18.5370706,7.80555268 18.5581294,8.12143399 18.3762883,8.3292523 L11.3762883,16.3292523 C11.1858277,16.5469216 10.8509646,16.5580713 10.6464466,16.3535534 L6.64644661,12.3535534 C6.45118446,12.1582912 6.45118446,11.8417088 6.64644661,11.6464466 C6.84170876,11.4511845 7.15829124,11.4511845 7.35355339,11.6464466 L10.975645,15.2685382 L17.6237117,7.6707477 Z' fill='#ffffff'/%3E%3C/svg%3E");
}
/*
.Checkbox-field:focus + .Checkbox-label:before {
  border: 2px solid var(--color-foreground);
}
.Checkbox-field:focus + .Checkbox-label {

}
*/
.Range {
  display: block;
}
.Range-label,
.Range-output {
  white-space: nowrap;
}
.Range-label:after {
  content: ': ';
}
.Range .Range-field {
  margin-top: .25em;
}
.Range-field {
  display: block;
  width: 100%;
  height: 1em;
  padding: 0;
  border: 0;
  border-radius: 0px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
}
.Range-field::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  background: var(--sample-foreground);
  border: 0;
}
.Range-field::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 0;
   position: relative;
   transform-origin: 50% 50%;
   /* overflow: hidden; */
   margin-top: -10px;
   /* background: transparent radial-gradient(circle, #000000 25%, transparent 25%, transparent 100%); */
   background: var(--sample-background, var(--color-background));
   border: 1px solid var(--sample-foreground);
   box-shadow: none;
}
.Range-field:active::-webkit-slider-thumb {
   background: var(--sample-foreground);
}
/*
@media not all and (hover: none) {
  .Range-field:hover::-webkit-slider-thumb {
   border-color: var(--range-thumb-border-color--withHover);
  }
}

.Range-field:focus {
   outline: 0;
   border: 0;
   background: transparent;
}

.Range-field:focus::-webkit-slider-thumb {
   border-color: var(--range-thumb-border-color--withFocus);
   box-shadow: var(--range-shadow--withFocus);
}
*/
.Sample {
  --sample-background: var(--background);
  --sample-foreground: var(--foreground, var(--color-foreground));
}
.Sample {
  width: 100%;
  background: var(--sample-background);
  border: 1px solid red;
  border-color: var(--sample-background, var(--sample-foreground));
  color: var(--sample-foreground);
  padding: 0;
  overflow: hidden;
}
/*
.Sample .Sample-controls {
  visibility: hidden;
}
.Sample:hover .Sample-controls {
  visibility: visible;
}
*/
.Sample-content {
  border: 0;
  text-align: center;
  display: block;
  padding: 3rem;
  padding: 3rem 11.4%;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  outline: none;
}
.Sample-content:focus {
  outline: none;
  border: 0;
}
.Sample-content:active {
  outline: none;
  border: 0;
}
.Sample-content--layoutColumns {
  -moz-column-gap: 1.5em;
       column-gap: 1.5em;
  -moz-column-count: 4;
       column-count: 4;
}
.Sample-content--layoutGrid {
  display: grid;
  -moz-column-gap: 1.5em;
       column-gap: 1.5em;
  row-gap: 1.5em;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.Sample-content p:not(:first-child) {
  text-indent: 3em;
}
.Sample-content h3 + p:not(:first-child) {
  text-indent: 0em;
}
.Sample-content h3 {
  margin: 1em 0 .5em 0;
}
.Sample-content h3:first-child {
  margin-top: 0;
}
.Sample-content:focus:not(:focus-visible),
.Sample-content:focus-visible {
  outline: 0 !important;
}
/* Toolbar */
.Toolbar {
  padding: 1em;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.Toolbar-flex {
  display: flex;
  margin: 0 auto;
  margin-bottom: 0em;
  gap: 1em;
}
.Toolbar-flex .Toolbar-item {
  width: 7em;
}
.Toolbar-grid {
  --auto-grid-min-size: 8rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 24px;
}
.Sample .Range-label,
.Sample .Range-output,
.Sample .Checkbox-label,
.Sample .Select,
.Sample .StyleName {
  font-size: 0.75em;
  text-transform: uppercase;
}
.Sample .StyleName {
  height: 20px;
  display: flex;
  align-items: center;
}
.Select {
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  position: relative;
}
.Select-field {
  height: 20px;
  width: auto;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  background-repeat: no-repeat;
  background-position: calc(100% - .5em) 50%;
  color: inherit;
  padding: 0;
  padding-right: 1.2em;
  white-space: nowrap;
}
.Select-icon {
  position: absolute;
  right: 0px;
  pointer-events: none;
}
.Select-iconPath {
  stroke: currentColor;
}
.Select-field:focus {
  outline: 0;
}
.Set {
  display: grid;
  grid-template-columns: repeat(8, 1fr);

}
.Set > li {
  padding-top: 100%;
  position: relative;
  box-shadow: 1px 0 0 0 var(--color-foreground),
              0 1px 0 0 var(--color-foreground),
              1px 1px 0 0 var(--color-foreground),
              1px 0 0 0 var(--color-foreground) inset,
              0 1px 0 0 var(--color-foreground) inset;
}
.Set > li > svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.Set-glyph {
  fill: var(--color-text);
}
.List {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}
.List li {
  margin: 0;
  padding: 0 !important;
}
.Tag {
  display: block;
  border-radius: 48px;
  color: var(--color-background) !important;
  background-color: var(--color-foreground) !important;
  padding: .5em 1em;
}
.Tag:hover {
  border: 0 !important;
}
.Text > * + *, 
.u-flow > * + * {
  margin-bottom: var(--flow-space, 1em);
}
.Text :first-child {
  margin-top: 0;
}
.Text :last-child {
  margin-bottom: 0;
}
.Text h1 {
  margin: 0 0 0.5rem;
}
.Text h2 {
  margin: 2em 0 0.5rem;
}
.Text h3 {
  margin: 2em 0 0.5rem;
}
:root {
  --default-margin-top: 4em;
}
.Default-header {
  width: 100%;
  height: 60vw;
  max-height: 600px;
  padding: 6.4% 6.4% 0;
}
.Default-headerLayoutFull {
  padding: 0;
}
.Default-headerImage {
  display: block;
  height: 100%;
}
.Default-headerImage img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}
.Default-wrapper {
  padding: 0 6.4%;
  min-height: 100%;
}
.Default-main {
  padding-top: 0em;
  padding-bottom: 3em;
}
p {
  /* max-width: 640px; */
}
p:has(> img) {
  max-width: 100vw;
}
@media (min-width: 1012px) {
  .Default-wrapper {
    padding: 0;
    display: grid;
    gap: 24px;
    /* grid-template-columns: repeat(12, 1fr); */
    grid-template-columns: 1fr 74%;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-areas:
    "sidebar main";
  }

  .Default-sidebar {
    grid-area: sidebar;
    grid-column: 2 / span 3;
    padding-top: var(--default-margin-top);
  }

  .Default-sidebar > * { /* Safari?? */
    position: sticky;
    top: var(--default-margin-top);
    padding-bottom: 4em;
  }

  .Default-main {
    grid-area: main;
    grid-column: 5 / span 10;
    padding-top: var(--default-margin-top);
    padding-bottom: 6em;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-flow: column;
  }

  .Default-main > * {
    grid-column: 1 / span 7;
  }

/* ((200*2)+(24*1)/((200*9)+(24*8)) */
  .Default-main img,
  .u-extended {
    left: initial;
    right: initial;
    max-width: 100vw;
    width: 129.38%; /* ((100*8)+(24*7)) / ((100*6)+(24*5)) */
    height: auto; /* ((100*9)+(24*8)) / ((100*7)+(24*6)) */
  }

}
.Drawing img {
  mix-blend-mode: multiply;
}