:root {
    --measure: 70ch; /* width */
    --space: 1rem;
    --ratio: 1.1;
    --s-9: calc(var(--s-7) / var(--ratio));
    --s-8: calc(var(--s-7) / var(--ratio));
    --s-7: calc(var(--s-6) / var(--ratio));
    --s-6: calc(var(--s-5) / var(--ratio));
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 20px;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --s6: calc(var(--s5) * var(--ratio));
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: var(--measure);
}


html,
body,
header,
main,
footer {
    max-width: none;
}

video, img {
    /* so images and videos don't overflow */
    max-width: 100%;
}


/* TODO add to max-width: 100% group, or use inline size as shown? */
/* table { */
/*     max-inline-size: none; */
/* } */

.box {
    padding: var(--s-5);
}

/* .cluster > * > * { */
/*     margin: calc(var(--space) / 2); */
/* } */

.center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
}

.text-center {
    text-align: center;
}

.center-recursive {
    box-sizing: content-box;
    margin-inline: auto;
    text-align: center;
    max-inline-size: var(--measure);
    display:flex;
    flex-direction: column;
    align-items: center;
}

.cover {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh; /* fills 100% of viewport height, thus "vh" */
    padding: var(--s-5);
}

.cover > * {
    margin-block: 1rem;
}

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

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

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

.vertical-center {
    display: flex;
    flex-direction: column;
    /* padding: var(--s-5); */
}

.vertical-center > * {
    margin-block: 1rem;
}

.vertical-center > :first-child:not(.primary) {
    margin-block-start: 0;
}

.vertical-center > :last-child:not(.primary) {
    margin-block-end: 0;
}

.vertical-center > .primary {
    margin-block: auto;
}

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

.stack > * {
    margin-block: 0;
}

.stack > * + * {
    margin-block-start: var(--space, --ratio);
}

.cluster {
    overflow: hidden;
}

.cluster > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* margin: calc(var(--space) / 2 * -1); */
}

.cluster.outer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, --ratio);
    justify-content: space-between;
    align-items: center;
}

.cluster.inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, --ratio);
    justify-content: flex-start;
}

.cluster.inner.right {
    justify-content: flex-end;
}


.grid {
    display: grid;
    grid-gap: var(--space);
}

@supports (width: min(var(--grid-min), 100%)) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
    }
}

.with-left-sidebar {
    /* if you update this, probably also update with-right-sidebar */
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
}

.with-left-sidebar > :first-child {
    flex-grow: 1;
}

.with-left-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 60%;
}

.with-right-sidebar {
    /* if you update this, probably also update with-left-sidebar */
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
}

.with-right-sidebar > :last-child {
    flex-grow: 1;
}

.with-right-sidebar > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 60%;
}


/* TODO doesn't work */
/* .non-stretchy-sidebar { */
/*     align-items: flex-start; */
/* } */


/* TODO */
/* The Sidebar is applicable to all sorts of content. The ubiquitous “media object” (the placing of an item of media next to a description) is a mainstay, but it can also be used to align buttons with form inputs (where the button forms the sidebar and has an intrinsic, content-based width). */


/* Be aware that the <label> elements would need "display: block" to appear above the inputs */

/* TODO */
/* https://every-layout.dev/layouts/cluster/#use-cases */
/* By applying justify-content: space-between and align-items: center you can even set out your page header’s logo and navigation. This will wrap naturally, and without the need for an @media breakpoint: */


/* As a rule of thumb, em units are better for sizing inline elements, and rem units are better for block elements. SVG icons are perfect candidates for em-based sizing, since they either accompany or supplant text. */


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

.stack > * {
  margin-block: 0;
} 

.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

.stack-recursive {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack-recursive * {
  margin-block: 0;
} 

.stack-recursive * + * {
  margin-block-start: var(--space, 1.5rem);
}

.grid {
  display: grid;
  grid-gap: var(--s0);
}

@supports (width: min(250px, 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  }
}