/* VARIABLES */

:root {
  /* Fonts / Visual */
  --font-regular: "DINish", sans-serif;
  --font-expanded: "DINish Expanded", sans-serif;
  --font-condensed: "DINish Condensed", sans-serif;
  --font-mono: "Ioskeley Mono", monospace, monospace;

  /* Fonts / Semantic */
  --font-body: var(--font-regular);
  --font-heading: var(--font-expanded);
  --font-display: var(--font-expanded);
  --font-metadata: var(--font-condensed);
  --font-code: var(--font-mono);

  /* Font weights */
  --weight-body: 500;
  --weight-bold: 700;
  --weight-title: 900;
  --weight-medium: 600;
  --weight-mild: 400;

  /* Lengths (Widths & Heights) */
  --length-card: 16rem;
  --length-s: 35rem;
  --length-m: 50rem;
  --length-l: 80rem;

  /* Gaps (Margin, Padding, Gap) */
  --gap-m: 1rem;
  --gap-hair: calc(var(--gap-m) / 16);
  --gap-xs: calc(var(--gap-m) * 0.25);
  --gap-s: calc(var(--gap-m) * 0.5);
  --gap-ms: calc(var(--gap-m) * 0.75);
  --gap-ml: calc(var(--gap-m) * 1.5);
  --gap-l: calc(var(--gap-m) * 2);
  --gap-xl: calc(var(--gap-m) * 3);
  --gap-massive: calc(var(--gap-m) * 6);

  /* Font sizes */
  --size-text: calc(18rem / 16);
  --sizing-ratio: 1.14;
  --size-s: calc(var(--size-text) * pow(var(--sizing-ratio), -2));
  --size-ms: calc(var(--size-text) * pow(var(--sizing-ratio), -1));
  --size-ml: calc(var(--size-text) * pow(var(--sizing-ratio), 2));
  --size-l:  calc(var(--size-text) * pow(var(--sizing-ratio), 3));
  --size-xl: calc(var(--size-text) * pow(var(--sizing-ratio), 4));
  --size-xxl: calc(var(--size-text) * pow(var(--sizing-ratio), 5));
  --size-3xl: calc(var(--size-text) * pow(var(--sizing-ratio), 6));
  --size-4xl: calc(var(--size-text) * pow(var(--sizing-ratio), 7));
  --size-5xl: calc(var(--size-text) * pow(var(--sizing-ratio), 8));
  --size-6xl: calc(var(--size-text) * pow(var(--sizing-ratio), 9));
  --size-7xl: calc(var(--size-text) * pow(var(--sizing-ratio), 10));
  --size-8xl: calc(var(--size-text) * pow(var(--sizing-ratio), 11));

  /* Line heights */
  --height-text: 1.2;

  /* Colors */
  --color-accent: #88a098;
  --color-bg-1: #101114;
  --color-bg-2: #44484f;
  --color-text-1: #e8cccc;
  --color-text-2: lch(from var(--color-accent) l c calc(h - 150));
  --color-text-3: #928484;
  --color-bg-root: var(--color-bg-1);
  --color-text-root: var(--color-text-1);
  --color-text-meta: var(--color-text-3);
  --color-text-link: var(--color-accent);

  /* Conveniences */
  --rempx: calc(1rem / 16);
  --ERROR: 1em dashed red;
}

/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FOUNDATION */

:root {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--height-text);
  background: var(--color-bg-root);
  color: var(--color-text-root);
  accent-color: var(--color-accent);
  > * {
    font-size: var(--size-text);
  }
}

a {
  color: var(--color-text-link);
}

input, textarea, select {
  background: var(--color-bg-2);
}

ul[role="list"] {
  list-style: none;
}

address {
  font-style: normal;
}

pre, code, samp, kbd, tt {
  font-family: var(--font-mono);
}

img {
  vertical-align: middle;
  max-width: 100%;
}

/* LAYOUT */

.x-container {
  --w: var(--length-l);
  max-width: min(var(--w), calc(100% - 2 * var(--gap-l)));
  margin-inline: auto;

  &.-length-m {
    --w: var(--length-m);
  }

  &.-length-s {
    --w: var(--length-s);
  }

  /* @media (--small) {
    padding-inline: var(--gap-m);
  } */
}

.layout-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap-m);

  @media (--width-s) {
    display: flex;
    flex-flow: column;
  }
}

.flow-grid {
  display: grid;
  --length-cell: var(--length-card);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--length-cell)), 1fr));
  gap: var(--gap-m);
}

.balance-grid {
  font-size: 0;
  --length-cell: var(--length-card);
  gap: var(--gap-m);

  text-wrap: balance;
  margin: auto calc(-1 * var(--gap-ml));
  max-width: 100%;

  >* {
    display: inline-block;
    vertical-align: top;
    text-align: initial;
    font-size: var(--size-text);
    width: var(--length-cell);
    margin: var(--gap-xl) var(--gap-ml);
  }
}

.flex-column, .flex-row {
  display: flex;
  gap: var(--gap-m);
}

.flex-column {
  flex-flow: column;
}

.flex-row {
  flex-flow: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* COMPONENTS */

/* Site */

.column-block {
  line-height: var(--height-touch-target);

  > * + * {
    margin-block: var(--gap-ms);
  }

  .title {
    font-size: 1em;
    font-weight: var(--weight-medium);
    font-family: var(--font-heading);
  }
}

.site-footer {
  margin-block: var(--gap-massive);
  font-size: var(--size-ms);

  --font-text: var(--font-condensed);
  --font-heading: var(--font-regular);
  font-family: var(--font-text);

  &:not(:hover, :focus-within) {
    opacity: .6;
  }
}

.settings-form {
  display: flex;
  flex-flow: column;
  gap: var(--gap-ms);
  .title {
    font-size: inherit;
    font-weight: var(--weight-text);
    font-family: var(--font-heading);
  }
}

.my-info {
  color: var(--color-text-2);
  .title {
    color: var(--color-text-1);
  }
}

.four-oh-four {
  h1 {
    font-family: var(--font-display);
    font-weight: 100;
    font-size: calc(var(--size-text) * pow(var(--sizing-ratio), 15));
    color: var(--color-bg-2);
  }
}
/* Widgets */

.small-note {
  font-size: var(--size-s);
  font-weight: var(--weight-mild);
  > small {
    font-size: 1em;
  }
}

/* Forms */

.tabular-form {
  display: grid;
  grid: auto-flow / auto 1fr;
  gap: var(--gap-ms);

  > .field {
    display: grid;
    grid: auto-flow / subgrid;
    grid-column: 1 / -1;

    > * {
      grid-column: 2;
      grid-row: 1;
    }

    > .label {
      grid-column: 1;
      grid-row: 1;
    }
  }
}

.radio-group {
  display: flex;
  flex-flow: row;
  gap: var(--gap-m);
  .option {
    font-weight: var(--weight-medium);
    input {
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }
  }
}

/* Blog */

.entry-list {
  &:not([role="list"]) {
    outline: var(--ERROR);
  }

  > * + * {
    margin-block: var(--gap-ms);
  }
}

.entry-item {
  .name {
    text-decoration: none;
  }

  .meta {
    font-family: var(--font-metadata);
    font-variant-numeric: proportional-nums tabular-nums;
    font-weight: var(--weight-mild);
    color: var(--color-text-meta);
    white-space: nowrap;
    font-size: var(--size-s);
  }
}

.entry-detail {
  .header {
    display: flex;
    flex-flow: column;
    gap: var(--gap-m);

    margin-block: var(--gap-massive);
  }

  .title {
    font-size: var(--size-3xl);
    font-family: var(--font-display);
    font-weight: var(--weight-text);
  }

  .meta {
    font-family: var(--font-metadata);
    color: var(--color-text-meta);
  }
}

/* Prose */

.prose-content {
  p, ul, ol, blockquote {
    margin-block: var(--gap-m);
  }

  h1, h2, h3, h4, h5, h6 {
    margin-block: var(--gap-l) var(--gap-m);
    font-family: var(--font-heading);
    & + & {
      margin-block-start: 0;
    }
  }

  h1 { font-size: var(--size-xxl); }
  h2 { font-size: var(--size-xl); }
  h3 { font-size: var(--size-l); }
  h4 { font-size: var(--size-ml); }
  h5 { font-size: var(--size-text); }

  ul, ol, blockquote, figure {
    margin-inline: var(--gap-ml);
  }
}

/* UTILITIES */

._unlink {
  a, &:is(a) {
    text-decoration: none;
  }
}

/* FONTS */

@font-face {
  name: "DINish";
  src: url("/fonts/DINish[slnt,wdth,wght].woff2") format("woff2");
}

@font-face {
  name: "DINish Expanded";
  src: url("/fonts/DINish[slnt,wdth,wght].woff2") format("woff2");
  font-variation-settings: "wdth" 125;
}

@font-face {
  name: "DINish Condensed";
  src: url("/fonts/DINish[slnt,wdth,wght].woff2") format("woff2");
  font-variation-settings: "wdth" 75;
}

@font-face {
  name: "Ioskeley Mono";
  src: url("/fonts/IoskeleyMono-Regular.ttf") format("ttf");
}

@font-face {
  name: "Ioskeley Mono";
  src: url("/fonts/IoskeleyMono-Bold.ttf") format("ttf");
  font-weight: 700;
}

@font-face {
  name: "Ioskeley Mono";
  src: url("/fonts/IoskeleyMono-Black.ttf") format("ttf");
  font-weight: 900;
}

@font-face {
  name: "Ioskeley Mono";
  src: url("/fonts/IoskeleyMono-Italic.ttf") format("ttf");
  font-style: italic;
}