:root {
  /* Vertical ratio */
  --ratio: 1.5;
  /* Default font size in any browser */
  --s0:  1rem;
  /* Positive harmonic scale, s1 = 1.5 */
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  /* Negative harmonic scale */
  --s-1: calc(var(--s0) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));

  /* Colors */
  --light: hsl(0, 0%, 90%);
  --dark: hsl(0, 0%, 20%);
  --white: hsl(0, 0%, 97%);
  --accent: hsl(50, 100%, 20%);

  /* Max width measure */
  --max-measure: 60ch;

  /* Viewport dependent font size */
  /* font-size: calc(var(--s0) + 0.5vw); */

  font-family: sans-serif;
  color: var(--dark);
  background-color: var(--white);
  line-height: var(--ratio);
}

* {
  /* Count border inside box */
  box-sizing: border-box;
  /* Prevent wide text */
  max-inline-size: var(--max-measure);
}

/* Override max measure */
html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

h1 {
  font-size: var(--s3);
}

h2 {
  font-size: var(--s2);
}

h3 {
  font-size: var(--s1);
}

/* Vertical stack */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  
}

/* Reset vertical margins (> * stop recursion) */
.stack > * {
  margin-block: 0;
}

/* Add marging start fron 2nd element  (> * + * stop recursion) */
.stack > * + * {
  margin-block-start: var(--s1);
}

/* Shorter stack, recursive */
.stack.short * + * {
  margin-block-start: var(--s-1);
}

/* Box */
.box {
  padding: var(--s1);
  color: var(--dark);
  background-color: var(--white);
  /* Show if high contrast enabled */
  outline: var(--border-thin) transparent;
}

/* Force colors on all elements */
.box * {
  color: inherit;
}

/* Invert colors */
.box.invert {
  filter: invert(100%);
}

/* Center */
.center {
  /* Exclude padding from width */
  box-sizing: content-box;
  max-inline-size: var(--max-measure);
  /* Left and right margins */
  margin-inline: auto;
  /* Paddings */
  padding-inline-start: var(--s1);
  padding-inline-end: var(--s1);
}

/* Cluster */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  /* Control layout */
  /* space-between: left and right */
  /* center: all center */
  justify-content: space-between;
  align-items: center;
}

/* Sidebar */
/* Control vertical stretch with align-items: stretch | flex-start */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

/* Sidebar is first child */
.sidebar > :first-child {
  /* Sidebar size */
  flex-basis: 20rem;
  flex-grow: 1;
}

/* Main content is last child */
.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  /* Wrap when same width as sidebar */
  min-inline-size: 50%;
}

/* Switcher */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  /* Layout switch at threshold */
  --threshold: 30rem;
}

.switcher > * {
  flex-grow: 1;
  /* Switch at threshold */
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

/* Switch to vertical if more than 5 elements */
.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

/* Cover */
/* Composed by header, footer and h1 in the middle */
.cover {
  --space: var(--s1);
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  padding: var(--space);
}

.cover > * {
  margin-block: var(--s1);
}

.cover > :first-child:not(h1) {
  margin-block-start: 0;
}

.cover > :last-child:not(h1) {
  margin-block-end: 0;
}

.cover > h1 {
  margin-block: auto;
}

/* Grid */
.grid {
  display: grid;
  grid-gap: 1rem;
  --min: 10ch;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr));
}

/* Frame */
/* Supports single child, img or video */
/* Pick aspect ratio (16/9, 4/3, 1/1) */
.frame {
  --n: 4;
  --d: 3;
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Reel */
.reel {
  --height: auto;
  --width: 25ch;
  display: flex;
  block-size: var(--height);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--light) var(--dark);
}

.reel > * {
  flex: 0 0 var(--width);
}

.reel > img {
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

/* Imposter */
.imposter {
  position: fixed;
  inset-block-start: 80%;
  inset-inline-start: 80%;
  transform: translate(-50%, -50%);
  overflow: auto;
  max-inline-size: calc(100% - (var(--1) * 2));
  max-block-size: calc(100% - (var(--1) * 2));
}

/* Icon */
.icon {
  height: 0.75em;
  width: 0.75em;
  /* Override with cap if supported */
  height: 1cap;
  width: 1cap;
}

/* --- */

html {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: var(--s2);
}

a {
  color: var(--accent) !important;
}

footer > .cluster {
    justify-content: center;
}