:root {
  font-size: calc(100% + 0.2vw);
  line-height: 1.6;
  quotes: "“" "”" "‘" "”";
  &[lang="de"] {
    quotes: "„" "“" "," "‘";
  }
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  --scale: 1.25;
  --font-size-s: calc(1rem / var(--scale));
  --font-size-l: calc(var(--scale) * 1rem);
  --font-size-xl: calc(var(--scale) * var(--font-size-l));
  --font-size-xxl: calc(var(--scale) * var(--font-size-xl));
  --color-main: #3C3C3C;
  --color-sub-light: oklch(0.6 0 0);
  --color-sub-lighter: oklch(0.85 0 0);
  --color-bg: oklch(0.98 0 0);
  --color-acc: #03A791;
  --color-code: lch(from var(--color-acc) l c calc(h + 180));
  --color-bauhaus-blue: #00B0F0;
  --color-bauhaus-red: #FF1A1A;
  --color-bauhaus-yellow: #F7EA00;
  --gap: 1rlh;
  --gutter: calc(0.5 * var(--gap));
  --gap-col: clamp(calc(0.25 * var(--gap)), 1vw, var(--gap));
  --max-width-main: 34em;
  --grid-cols-sm: [full-start breakout-start] minmax(var(--gutter), 1fr) [content] minmax(0, var(--max-width-main)) var(--gutter) [breakout-end margin] minmax(var(--gap), 1fr) [full-end];
  --grid-cols-simple: [full-start breakout-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--max-width-main)) [content-end] minmax(var(--gutter), 1fr) [breakout-end full-end];
}

/* Base styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, li, pre) {
  margin: 0;
}

body {
  --webkit-font-smoothing: antialiased;
  align-items: start;
  background-color: var(--color-bg);
  color: var(--color-main);
  display: grid;
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 100svh;

  /* For notes (children: main, footer) */
  &:has(> :last-child:nth-child(2)) {
      grid-template-rows: 1fr auto;
  }
  /* For pages (children: header, main, footer) */
  &:has(> :last-child:nth-child(3)) {
      grid-template-rows: auto 1fr auto;
  }
}

a {
  color: currentColor;
  position: relative;
  text-decoration-color: var(--color-bauhaus-yellow);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 50%;
  text-underline-offset: -0.3em;
  transition: color 0.3s;
}
a[href^="http"] {
  text-decoration-color: hsl(from var(--color-bauhaus-blue) h 50% 85%);
}
a:focus-visible,
a:hover {
  color: var(--color-bauhaus-red);
  text-decoration: none;
}
a:visited {
  /* Note: Alpha component will be ignored due to privacy restrictions */
  text-decoration-color: hsl(from var(--color-bauhaus-yellow) h 0 90%);
}
a:has(svg[preserveAspectRatio]) {
  display: block;
}
a > svg {
  display: block;
}
:root:not([lang="de"]) a[hreflang="de"]::after {
  color: var(--color-sub-light);
  content: " [German]";
}
:root[lang="de"] a[data-expires]::after {
  color: var(--color-sub-light);
  content: " [verfügbar bis " attr(data-expires) "]";
}

figure:has(blockquote),
:not(figure) > blockquote {
  border-inline-start: var(--gutter) solid hsl(from var(--color-bauhaus-red) h s 90%);
  padding-inline-start: var(--gutter);
}

canvas {
  display: block;
}

details {
  border-block: 1px dotted var(--color-sub-light);
  padding-block: 0.5rlh;
}

dt {
  font-weight: bold;
}
dd + dt {
  margin-block-start: var(--gap);
}

figcaption {
  color: var(--color-sub-light);
  font-size: 0.8em;
  padding-block-start: calc((1rlh - 1em) / 2);
}

:where(h1, h2, h3, h4) {
  --space: 2rlh;
  font-size: 1rem;
  line-height: 1rlh;
  text-wrap: balance;
}

h4 {
  font-weight: 300;
  text-transform: uppercase;
}

hr {
  border: none;
  margin: 0;

  &::before {
    color: var(--color-code);
    /* content: "• • •"; */
    content: "❦";
    display: block;
    text-align: center;
  }
}

img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

[role="list"] {
  list-style: none;
  padding: 0;
}
:where(ol, ul) {
  padding-inline-start: var(--gap);
}
:not [role="list"] {
  li + li,
  li :where(ol, ul) {
    margin-block-start: 0.5em;
  }
}
[data-variant="dated"] li {
  display: flex;
  gap: var(--gap);
}


:not(pre) > code,
samp,
kbd {
  color: var(--color-code);
  font-family: inherit;
  font-weight: 500;
  word-break: break-all;
}
pre {
  background: var(--color-sub-lighter);
  border-radius: 0.25em;
  font-size: var(--font-size-s);
  line-height: 1.875;
  overflow-x: auto;
  padding: var(--gutter);
}

time {
  color: hsl(from var(--color-main) h s 60%);
  display: block;
  font-variant-numeric: tabular-nums;
  text-wrap: nowrap;
}

summary {
  cursor: pointer;
}

video {
  inline-size: 100%;
}

header {
  align-items: center;
  display: flex;
  gap: var(--gutter);
  inline-size: 100%;
  justify-content: space-between;
  margin: var(--gutter) auto 0;
  max-inline-size: var(--max-width-main);
  padding: var(--gutter);

  span {
    font-weight: 700;
    text-box-trim: trim-end;
  }
}

@keyframes flash {
  20% {
    background: var(--color-acc);
  }
  100% {
    background: transparent;
  }
}
:target {
  animation: flash 1s ease-out;
  scroll-margin-block-start: var(--gap);
}
::target-text {
  background-color: rgb(from var(--color-acc) r g b / 0.3);
}

/* Base layouts */

:where(.stack),
blockquote {
  & > * + * {
    --_space: var(--space, var(--gap));
    margin-block-start: var(--_space);
  }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(0.5 * var(--gap));
}

[data-layout="reel"] {
  display: flex;
  justify-content: space-evenly;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  > img {
    block-size: 100%;
    inline-size: auto;
    max-inline-size: revert;
    scroll-snap-align: start;
  }
}

[data-text-decor="handwritten"] {
  color: hsl(from currentColor h s 60%);
  font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
  font-weight: 100;
}
[data-text-decor="underlined"] {
  text-decoration: underline;
}

#masthead {
  background: oklch(0.92 0 0);
  display: flex;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  gap: 16px;
  justify-content: space-between;
  padding-inline: 8px;

  h1 {
    font-weight: normal;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-wrap-mode: nowrap;
  }

  a {
    text-decoration: none;
  }
}

#stream {
  block-size: calc(100svh - 1rlh);
  display: flex;
  justify-content: space-evenly;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  > * {
    flex: 0 0 24em;
    overflow-y: scroll;
    scroll-snap-align: start;

    @media (width <= 24em) {
      flex: 0 0 100%;
    }
  }

  ul {
    padding-inline: var(--gap);
  }

  h2 {
    background: var(--color-bg);
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 0.75;
    padding: 1rlh;
    position: sticky;
    text-align: center;
    top: 0;
    z-index: 1;
  }

  [data-stream-item] {
    border-image: linear-gradient(to right, transparent, hsl(from var(--color-main) h s 50%), transparent) 1;
    > p {
      margin-block-start: 0.3em;
    }
  }

  [data-stream-item="link"] {
    * {
      font-size: 0.8rem;
      line-height: 1;
    }
    * + & {
      margin-block-start: 1rlh;
    }
    &:last-child {
      margin-block-end: 1rlh;
    }
    hgroup {
      display: flex;
      gap: var(--gap);
      justify-content: space-between;
    }
    p {
      color: hsl(from var(--color-main) h s 35%);
      font-weight: 300;
      text-wrap: pretty;
    }
  }

  [data-stream-item="note"] {
    border-block-start: 1px solid;
    padding-block: 1rlh;

    :not([data-stream-item="note"]) + & {
      margin-block-start: 1rlh;
    }

    &:has(+ :not([data-stream-item="note"])) {
      border-block-end: 1px solid;
      margin-block-end: 1rlh;
    }

    hgroup {
      display: flex;
      flex-direction: column-reverse;

      p {
        align-items: center;
        display: flex;
        gap: var(--gap);
        justify-content: space-between;
      }

      .hot {
        background: hsl(from var(--color-bauhaus-red) h s 70%);
        color: var(--color-bg);
        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
        font-size: 0.8rem;
        line-height: 1;
        font-weight: 700;
        padding: 4px 8px;
        transform: rotate(4deg) translateX(8px);
        text-box: trim-both cap alphabetic;
        text-transform: uppercase;
      }
    }
    h3 {
      font-size: 1.6em;
      line-height: 1;
    }
  }

  [data-stream-item="note-re"] {
    * + & {
      margin-block-start: 1rlh;
    }
    &:last-child {
      margin-block-end: 1rlh;
    }
    hgroup {
      display: flex;
      flex-direction: column-reverse;

      * {
        line-height: 1;
      }
    }
    h3 {
      font-weight: 400;
      text-wrap: initial;

      a:link {
        text-decoration-color: hsl(from var(--color-bauhaus-yellow) h 80% 80%);
      }
    }
  }

  [data-tags*="index"]::after {
    content: " 📇" / "Bookmarked with tag 'Index'";
  }
  [data-tags*="tool"]::after {
    content: " 🔨" / "Bookmarked with tag 'Tool'";
  }
  [data-tags*="inspiration"]::after {
    content: " ✨" / "Bookmarked with tag 'Inspiration'";
  }
  [data-tags*="book"]::after {
    content: " 📖" / "Bookmarked with tag 'Book'";
  }
  [data-tags*="assets"]::after {
    content: " 🎨" / "Bookmarked with tag 'Assets'";
  }
  [data-tags*="community"]::after {
    content: " 🤝🏻" / "Bookmarked with tag 'Community'";
  }
  [data-tags*="api"]::after {
    content: " 📈" / "Bookmarked with tag 'API'";
  }
  [data-tags*="course"]::after {
    content: " 🎓" / "Bookmarked with tag 'Course'";
  }
  [data-tags*="shop"]::after {
    content: " 🛒" / "Bookmarked with tag 'Shop'";
  }
}

main {
  display: grid;
  grid-template-columns: var(--grid-cols-sm);
  position: relative;

  > * {
    grid-column: content;
  }
  > pre {
    grid-column: content-start / full-end;
  }
  > .full {
    grid-column: full;
    margin-block: calc(2 * var(--gap)) var(--gap);
    img {
      inline-size: 100%;
      object-fit: cover;
    }
  }
  aside[class] {
    border: 4px dashed var(--color-acc);
    padding: var(--gutter);
  }
}
main:has(+ footer) {
  padding-block-end: calc(2 * var(--gap));

  &:not(:has(.content)) {
    padding-block-start: calc(2 * var(--gap));
  }
}
.spoiler {
  background: currentColor;
  cursor: help;

  &:active,
  &:hover,
  &:focus-visible {
    background: none;
  }
}

blockquote.chat {
  background: var(--color-sub-lighter);
  border: none;
  border-radius: 1em;
  font-variation-settings: 'ital' 0;
  inline-size: 80%;
  overflow: auto;
  padding: 0.5em 0.75em;

  time {
    float: right;
    margin-inline-start: var(--gutter);
  }
}
/* header { */
/*   display: grid; */
/*   grid-template-columns: subgrid; */
/*   grid-template-rows: subgrid; */
/*   grid-column: full; */
/*   grid-row: 1 / span 2; */
/*   position: relative; */
/*   z-index: -1; */

main > h1 {
  grid-column: margin;
  grid-row: 1;
  inline-size: fit-content;
  text-wrap: nowrap;
  writing-mode: vertical-lr;
  border-block-start: 1px solid var(--color-sub-light);
  border-image: linear-gradient(to bottom, var(--color-code), var(--color-bg)) 1;
  color: var(--color-sub-light);
  max-inline-size: 90%;
  overflow: hidden;
  padding-block: 0;
  padding-inline: 0.1em;
  position: absolute;
  text-box-trim: unset;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
main > h1 ~ p:first-of-type {
  font-weight: 600;
  grid-column: content;

  time {
    text-align: right;

    &:has(+ time) {
      color: var(--color-sub-lighter);
    }
  }
}
main:has(#cover) {
  h1 {
    filter: blur(1px);
    border: none;
  }
}
h2 + time {
  border-block-start: 1px solid var(--color-sub-light);
  color: var(--color-sub-light);
  font-weight: 600;
  inline-size: fit-content;
  margin: 0;
  writing-mode: vertical-lr;
}
.content {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  /* Necessary for dense rows when note does not fill page vertically */ 
  grid-template-rows: repeat(10, min-content);
  margin-block-start: var(--gap);

  > * {
    grid-column: content;
  }

  & > p:first-of-type::first-line {
    font-weight: 700;
  }


  @media screen and (width >= 500px) {
    :not(pre) > code {
      word-break: normal;
    }
  }

  .into-margin {
    grid-column: margin;
    grid-row: span 3;
    margin-inline-start: calc(2 * var(--gap));
  }

  [data-image-placement] {
    inline-size: 100%;
  }

  [data-image-placement="breakout"],
  *:has(> [data-image-placement="breakout"]) {
    grid-column: breakout;
  }

  [data-image-placement="breakout-right"],
  *:has(> [data-image-placement="breakout-right"]) {
    grid-column: content / full-end;
  }

  [data-image-placement="full"],
  *:has(> [data-image-placement="full"]) {
    grid-column: full;
  }

  [data-image-placement="breakout"] + figcaption {
    margin-inline-start: var(--gutter);
  }

  figure.grid {
    grid-column: content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    justify-items: center;

    img {
      inline-size: 100%;
    }

    figcaption {
      background: var(--color-sub-lighter);
      border: none;
      padding: var(--gutter);
    }
  }
}
#cover {
  grid-column: content;

  img {
    background: var(--color-sub-lighter);
    block-size: 100%;
    border: 0.4em solid var(--color-bg);
    box-shadow: 3px 3px 8px var(--color-main);
    inline-size: 100%;
    object-fit: cover;
    transform: rotate(-4deg);
  }
}
[data-layout="reel"] {
  block-size: min(70vh, 600px);
  gap: max(2vw, var(--gutter));
  margin-block: calc(2 * var(--gap)) var(--gap);
}
[data-column="full-right"] {
  grid-column: content / full-end;
}
[data-column="full"] {
  grid-column: full;
}

footer {
  background: var(--color-code);
  bottom: 0;
  color: var(--color-bg);
  display: grid;
  grid-template-columns: var(--grid-cols-simple);
  padding-block: calc(2 * var(--gap));
  text-align: center;

  & > * {
    grid-column: content;
  }

  a {
    text-decoration: none;
  }

  a:active,
  a:focus-visible,
  a:hover {
    color: var(--color-main);
  }

  ul {
    margin-block-start: calc(var(--gutter) - 0.5em); /* Account for margin between li elements */

    &:has(a[aria-current=true]) li:not(:has(a[aria-current=true])) a {
      opacity: 0.7;
    }
  }

  li {
    display: inline-block;

    &::before {
      content: "•";
      color: var(--color-main);
      margin: 0 0.3em;
      mix-blend-mode: color-dodge;
      position: relative;
      top: -0.05em;
    }

    a[aria-current=true] {
      font-weight: 800;
    }

  }

  #webring-links {
    margin-block-start: calc(2 * var(--gap));
  }

  svg {
    margin-inline: auto;
  }
}