/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/*
 * Web Fonts
 * CSS and font files downloaded from https://gwfh.mranftl.com/fonts
 */

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*
 * Web Fonts
 * CSS and font files downloaded from https://gwfh.mranftl.com/fonts
 */

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*
 * Variables.
 */
:root {
  --content-width: 75ch;

  --ff-display: 'Bebas Neue', sans-serif;
  --ff-body: 'Inter', sans-serif;

  /* Perfect Fourth fluid font scale (ratio 1.333) */
  --fs-sm: clamp(0.84rem, 0.15vi + 0.8rem, 1.0rem);
  --fs-base: clamp(1.12rem, 0.3vi + 1.05rem, 1.333rem);
  --fs-md: clamp(1.49rem, 0.6vi + 1.35rem, 1.777rem);
  --fs-lg: clamp(1.98rem, 1.0vi + 1.73rem, 2.369rem);
  --fs-xl: clamp(2.64rem, 1.7vi + 2.2rem, 3.158rem);
  --fs-2xl: clamp(3.52rem, 2.6vi + 2.8rem, 4.209rem);
  --fs-3xl: clamp(4.69rem, 4.0vi + 3.6rem, 5.611rem);

  /* Silver Ratio fluid spacing scale (ratio: 1.414) */
  --sp-3xs: clamp(0.125rem, 0.04vi + 0.115rem, 0.177rem);
  --sp-2xs: clamp(0.177rem, 0.08vi + 0.16rem, 0.25rem);
  --sp-xs: clamp(0.25rem, 0.15vi + 0.21rem, 0.354rem);
  --sp-sm: clamp(0.354rem, 0.25vi + 0.28rem, 0.5rem);
  --sp-md: clamp(0.5rem, 0.4vi + 0.4rem, 0.707rem);
  --sp-base: clamp(0.707rem, 0.5vi + 0.68rem, 1.00rem);
  --sp-lg: clamp(1.00rem, 0.8vi + 0.93rem, 1.414rem);
  --sp-xl: clamp(1.414rem, 1.2vi + 1.3rem, 2.00rem);
  --sp-2xl: clamp(2.00rem, 1.8vi + 1.8rem, 2.828rem);
  --sp-3xl: clamp(2.828rem, 2.6vi + 2.55rem, 4.00rem);
  --sp-4xl: clamp(4.00rem, 3.6vi + 3.6rem, 5.657rem);
  --sp-5xl: clamp(5.657rem, 5.1vi + 5.10rem, 8.00rem);
  --sp-6xl: clamp(8.00rem, 7.2vi + 7.20rem, 11.314rem);

  --page-gutter: 3vw;

  /* 1. Dominant/neutral scale (slight blue tint) */
  --clr-blue-tint-100: oklch(58.06% 0.012 285.43);
  --clr-blue-tint-200: oklch(52.17% 0.012 285.43);
  --clr-blue-tint-300: oklch(46.28% 0.012 285.43);
  --clr-blue-tint-400: oklch(40.39% 0.012 285.43);
  --clr-blue-tint-500: oklch(34.5% 0.012 285.43);
  --clr-blue-tint-600: oklch(28.61% 0.012 285.43);
  --clr-blue-tint-700: oklch(22.72% 0.012 285.43);
  --clr-blue-tint-800: oklch(16.83% 0.012 285.43);
  --clr-blue-tint-900: oklch(10.94% 0.012 285.43);


  /* 2. Secondary/text scale (pure white/light gray) */
  --clr-achromatic-100: oklch(100.00% 0 0);
  --clr-achromatic-200: oklch(87.50% 0 0);
  --clr-achromatic-300: oklch(75.00% 0 0);
  --clr-achromatic-400: oklch(62.50% 0 0);
  --clr-achromatic-500: oklch(50.00% 0 0);
  --clr-achromatic-600: oklch(37.50% 0 0);
  --clr-achromatic-700: oklch(25.00% 0 0);
  --clr-achromatic-800: oklch(12.50% 0 0);
  --clr-achromatic-900: oklch(0.00% 0 0);

  /* 3. Accent scale (cyan) */
  --clr-cyan-100: oklch(99.16% 0.165 206.50);
  --clr-cyan-200: oklch(93.27% 0.165 206.50);
  --clr-cyan-300: oklch(87.38% 0.165 206.50);
  --clr-cyan-400: oklch(81.49% 0.165 206.50);
  --clr-cyan-500: oklch(75.60% 0.165 206.50);
  --clr-cyan-600: oklch(69.71% 0.165 206.50);
  --clr-cyan-700: oklch(63.82% 0.165 206.50);
  --clr-cyan-800: oklch(57.93% 0.165 206.50);
  --clr-cyan-900: oklch(52.04% 0.165 206.50);

  /* 4. Error scale (red) */
  --clr-red-100: oklch(93.8% 0.15 25);
  --clr-red-200: oklch(81.9% 0.15 25);
  --clr-red-300: oklch(70.0% 0.15 25);
  --clr-red-400: oklch(58.1% 0.15 25);
  --clr-red-500: oklch(50.00% 0.15 25);
  --clr-red-600: oklch(37.5% 0.15 25);
  --clr-red-700: oklch(25.0% 0.15 25);
  --clr-red-800: oklch(12.5% 0.15 25);
  --clr-red-900: oklch(0.00% 0.15 25);

  /* 5. Functional mappings */
  --color-text: var(--clr-achromatic-200);
  --color-bg: var(--clr-blue-tint-700);
  --color-accent: var(--clr-cyan-500);
  --color-muted: var(--clr-achromatic-300);
  --color-error: var(--clr-red-300);
  --color-card-bg: var(--clr-blue-tint-600);
  --color-highlight-text: var(--clr-achromatic-900);
  --color-highlight-bg: var(--color-accent);
  --color-backdrop-bg: var(--clr-blue-tint-800) / 0.35;


  --box-shadow:
    -2px -2px 12px 4px rgb(255 255 255 / 0.05),
    0 0 0 1px rgb(255 255 255 / 0.08);
}


/*
 * Typography.
 */

body {
  color-scheme: dark;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-family: var(--ff-display);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

p {
  margin-bottom: 1em;
  text-wrap: pretty;
}

a {
  color: var(--color-text);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

:focus {
  outline: 2px solid var(--color-accent);
  transition: outline-color 200ms ease;
}

.heading-primary {
  margin-bottom: var(--sp-3xl);
  border-bottom: solid 3px var(--color-accent);
  padding: 0 0 0.5em 0;
  text-align: center;

  font-size: var(--fs-2xl);
  letter-spacing: 0.05em;
  text-shadow:
        1px 1px 0 var(--color-bg),
        2px 2px 0 var(--color-accent);
}

.heading-secondary {
  margin-bottom: var(--sp-base);

  font-size: var(--fs-xl);
  letter-spacing: 0.05em;
  text-shadow:
        1px 1px 0 var(--color-bg),
        2px 2px 0 var(--color-accent);
}

.heading-tertiary {
  margin-bottom: var(--sp-base);

  font-size: var(--fs-lg);
}


/*
 * Layout.
 */

html, body {
  height: 100%;
}

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.site-main > * {
  margin-bottom: var(--sp-5xl);

  &:last-child {
    margin-bottom: 0;
  }
}


/*
 * Site Components.
 */

.site-header {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--content-width)) 1fr;
  margin: var(--sp-base) var(--page-gutter) var(--sp-xl) var(--page-gutter);

  .wrapper {
    grid-column: 2;
    border-bottom: solid 2px var(--color-muted);
    padding: 0 var(--sp-lg);
  }

  .logo {
    margin-bottom: var(--sp-md);
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    letter-spacing: 0.03em;
    line-height: 1;
  }

  a {
    color: var(--color-text);
    text-decoration: none;

    transition: 300ms;
  }

  a:hover {
    color: var(--color-text);
    text-decoration: none;

    filter: brightness(1.2);
    transition: 300ms;
  }
}


.site-breadcrumbs {

  ol {
    list-style: none;
    padding: 0 0 0 var(--sp-base);
    margin: 0;

    display: flex;
    flex-wrap: wrap;
  }

  li {
    display: inline;
    padding: 0;
  }

  li+li:before {
    content: "\00BB";
    font-weight: normal;
    padding: 0 var(--sp-md);
  }

  li:first-child {
    margin-left: calc(var(--sp-base) * -1);
  }

  li:last-child {
    font-weight: bold;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    color: var(--color-accent);
  }
}


.site-main {
  margin: var(--sp-4xl) var(--page-gutter);
}


.site-footer {
  padding: var(--sp-base);
  text-align: center;

  p {
    font-size: var(--fs-sm);
  }

  .footer-copyright a {
    text-decoration: underline;
  }

  .footer-links {
    margin-bottom: var(--sp-base);
    font-size: var(--fs-sm);

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      display: inline;
      padding: 0;
    }

    li+li:before {
      content: " • ";
      font-weight: normal;
    }
  }
}


/*
 * Homepage Components
 */

.home-intro {
  container-type: inline-size;

  .home-intro-content {
    justify-self: center;
    max-width: 55ch;
  }
}


.hero {
  width: 100%;
  height: 40vh;
  background-image: url("../img/hero-l-full.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  @media screen and (min-width: 600px) {
    height: 60vh;
  }
}


.card-group {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--content-width)) 1fr;
  row-gap: var(--sp-2xl);
  container-type: inline-size;

  & > * {
    grid-column: 2/2;
  }

  .group-title {
    text-align: center;
    padding: 0 var(--sp-lg) var(--sp-sm) var(--sp-lg);
    margin-bottom: 0;
    border-bottom: solid 2px var(--color-accent);
  }
}


.card-group .card {
  background-color: var(--color-card-bg);
  box-shadow: var(--box-shadow);

  a {
    display: block;
    text-decoration: none;
    height: 100%;
  }

  a:hover {
    color: var(--color-text);
    outline: 2px solid var(--color-accent);
    transition: outline 0.2s ease-out;
  }

  .card-header {
    position: relative;
    overflow: hidden;
  }

  .cover {
    width: 100%;
    height: auto;

    transition: filter 0.5s ease;
    filter: saturate(1);
  }

  .card-body {
    padding: var(--sp-lg);
  }

  &:hover .cover {
    filter: saturate(1.4);
  }

  @media screen and (min-width: 800px) {
    &.portrait .link {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }
}


.card-group .twins {
  margin: 0 auto;
  display: grid;
  gap: var(--sp-2xl);

  @container (min-width: 700px) {
    max-width: calc(var(--content-width) * 1.5);
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
  }

  @container (min-width: 900px) {
    &.main-and-aside {
      grid-template-columns: 2fr 1fr;
    }
  }
}


.card-group .reel {
  grid-column: 1/-1;
  justify-self: center;
  max-width: calc(var(--content-width) * 1.5);

  display: grid;
  gap: var(--sp-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));

  & > * {
    scroll-snap-align: start;
  }

  @container (max-width: 800px) {
    width: 100%;
    max-width: unset;
    grid-auto-columns: minmax(80%, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: 1fr;
    gap: var(--sp-lg);

    overflow-x: auto;
    scroll-snap-type: x mandatory;

    padding: var(--sp-xs) var(--page-gutter) var(--sp-md) var(--page-gutter);
    margin: 0 calc(var(--page-gutter) * -1);

    scrollbar-color: var(--color-muted) var(--color-bg);
    scrollbar-width: thin;
  }
}


.badge {
  --edge-offset: 1em;

  position: absolute;
  top: calc(0.5em + var(--edge-offset));
  right: calc(-2.5em - var(--edge-offset));
  width: calc(8em + 4 * var(--edge-offset));
  padding: 0.5em 0;

  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(45deg);

  font-size: var(--fs-sm);
  font-weight: bold;
  text-transform: uppercase;

  color: var(--color-highlight-text);
  background-color: var(--color-highlight-bg);
  box-shadow: var(--box-shadow);
}


.meta {
  list-style-type: none;
  padding: 0;
  color: var(--color-muted);

  li {
    padding-left: 1.5em;
    position: relative;
    text-wrap: pretty;
  }

  li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* Concrete icons are defined in a separate file */
}


/*
 * Story page
 */

.article > .site-top,
.article > .site-main,
.article > .site-footer {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--content-width)) 1fr;

  & > * {
    grid-column: 2/2;
  }
}

.article > .site-main > * {
  margin-bottom: var(--sp-3xl);
}


.article > .site-top {
  margin-left: var(--page-gutter);
  margin-right: var(--page-gutter);
}


.story-intro {

  .story-header {
    position: relative;
    overflow: hidden;
  }

  .cover {
    width: 100%;
    height: auto;
  }
}


.story-toc {
  padding-top: 0;

  ol {
    margin-left: var(--sp-2xl);
    padding: 0;
    columns: 3 calc(var(--content-width) / 3 - 7rem);
  }

  a {
    text-decoration: none;
  }

  .selected {
    font-weight: bold;
  }
}


.story-content {
  margin-bottom: var(--sp-3xl);

  hr {
    border: none;
    margin: var(--sp-xl) 0;
  }
 
  hr::before {
    display: block;
    content: '• • •';
    text-align: center;

    color: var(--color-accent);
    font-size: var(--fs-md);
    letter-spacing: 0.2em;
  }
}


.story-endmarker {
  margin-top: var(--sp-2xl);
  display: flex;
  justify-content: center;

  color: var(--color-accent);
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.05em;
}


.story-pagination {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);

  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: var(--sp-xl);
    list-style-type: inside;
  }

  li {
      display: inline;
      margin: 0;
  }

  a {
    text-decoration: none;
  }
}


/*
 * Modal for the age check
 */

.modal {
  margin: auto auto;
  padding: var(--sp-xl);
  max-width: 30em;
  text-align: center;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-text);

  h2 {
    margin-bottom: var(--sp-base);
  }

  .actions {
    list-style: none;
    margin: 0;
    padding: 0;

    .button {
      margin: 0.5em 0;
      width: 100%;
    }
  }

  &::backdrop {
    backdrop-filter: blur(15px);
    background-color: var(--color-backdrop-bg);
  }
}


form {
  display: grid;
  gap: var(--sp-lg);

  .form-group {
    display: grid;
    gap: var(--sp-sm);
  }

  .form-input,
  .form-textarea {
    width: 100%;
    padding: var(--sp-md) var(--sp-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-text);
  }

  .form-textarea {
    resize: vertical;
  }

  input:user-invalid {
    color: var(--color-error);
    border-color: var(--color-error);
  }
}


.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  gap: var(--sp-md);
  padding: var(--sp-base) var(--sp-lg);

  font-family: var(--ff-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.03em;

  color: var(--color-text);
  background-color: transparent;
  border: 2px solid var(--color-text);
  border-radius: 4px;
  box-shadow: var(--box-shadow);

  transition: all 200ms ease-in-out;

  &.inactive {
    color: var(--color-muted);
    border-color: var(--color-muted);
    box-shadow: none;

    pointer-events: none;
    cursor: default;
  }

  &:active:not(.inactive) {
    transform: translate(2px, 2px);
  }

  &.pressed,
  &:focus,
  &:hover:not(.inactive),
  &:active:not(.inactive) {
    color: var(--color-highlight-text);
    background-color: var(--color-highlight-bg);
    border-color: var(--color-highlight-bg);
    box-shadow: none;
  }
}


.skip-link {
  position: absolute;
  left: -9999px;

  &:focus {
    left: 5px;
    top: 5px;
    z-index: 999;
  }
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/*
 * Google Material Icons.
 */


.icon.tags::before {
  /* sell */
  background-image: url("data:image/svg+xml,%3Cns0%3Asvg%20xmlns%3Ans0%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22hsl%280%2C%200%25%2C%2070%25%29%22%3E%3Cns0%3Apath%20d%3D%22M856-390%20570-104q-12%2012-27%2018t-30%206q-15%200-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33%2023.5-56.5T160-880h287q16%200%2031%206.5t26%2017.5l352%20353q12%2012%2017.5%2027t5.5%2030q0%2015-5.5%2029.5T856-390ZM513-160l286-286-353-354H160v286l353%20354ZM260-640q25%200%2042.5-17.5T320-700q0-25-17.5-42.5T260-760q-25%200-42.5%2017.5T200-700q0%2025%2017.5%2042.5T260-640Zm220%20160Z%22%20%2F%3E%3C%2Fns0%3Asvg%3E");
}


.icon.reading-time::before {
  /* coffee */
  background-image: url("data:image/svg+xml,%3Cns0%3Asvg%20xmlns%3Ans0%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22hsl%280%2C%200%25%2C%2070%25%29%22%3E%3Cns0%3Apath%20d%3D%22M440-240q-117%200-198.5-81.5T160-520v-240q0-33%2023.5-56.5T240-840h500q58%200%2099%2041t41%2099q0%2058-41%2099t-99%2041h-20v40q0%20117-81.5%20198.5T440-240ZM240-640h400v-120H240v120Zm200%20320q83%200%20141.5-58.5T640-520v-40H240v40q0%2083%2058.5%20141.5T440-320Zm280-320h20q25%200%2042.5-17.5T800-700q0-25-17.5-42.5T740-760h-20v120ZM160-120v-80h640v80H160Zm280-440Z%22%20%2F%3E%3C%2Fns0%3Asvg%3E");
}


.icon.status::before {
  /* warning */
  background-image: url("data:image/svg+xml,%3Cns0%3Asvg%20xmlns%3Ans0%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22hsl%280%2C%200%25%2C%2070%25%29%22%3E%3Cns0%3Apath%20d%3D%22m40-120%20440-760%20440%20760H40Zm138-80h604L480-720%20178-200Zm302-40q17%200%2028.5-11.5T520-280q0-17-11.5-28.5T480-320q-17%200-28.5%2011.5T440-280q0%2017%2011.5%2028.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z%22%20%2F%3E%3C%2Fns0%3Asvg%3E");
}