/* ── Variables ────────────────────────────────────────────── */
:root {
  --bg-a1: #110a1a;
  --bg-a2: #081420;
  --bg-a3: #1e1433;

  --color-a1: #0c1923;
  --color-a2: #2b0e47;
  --color-a3: #11101c;

  --color-b0: #70bccd;
  --color-b1: #0a2c30;
  --color-b2: #ac7362;
  --color-b3: #dfc185;

  --text: #83613b;
  --mute: #1c1924;

  --link: #26ab79;
  --over: #ffef07;

  /* SIZE */

  --base: clamp(1rem, 0.9vw + 0.9rem, 1.25rem);
  --ratio: 1.25;

  --ratio-down: calc(1 / var(--ratio));

  --step-0: var(--base);

  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
  --step-6: calc(var(--step-5) * var(--ratio));
  --step-7: calc(var(--step-6) * var(--ratio));
  --step-8: calc(var(--step-7) * var(--ratio));

  --step--1: calc(var(--step-0)  * var(--ratio-down));
  --step--2: calc(var(--step--1) * var(--ratio-down));
  --step--3: calc(var(--step--2) * var(--ratio-down));
  --step--4: calc(var(--step--3) * var(--ratio-down));
  --step--5: calc(var(--step--4) * var(--ratio-down));
  --step--6: calc(var(--step--5) * var(--ratio-down));
  --step--7: calc(var(--step--6) * var(--ratio-down));
  --step--8: calc(var(--step--7) * var(--ratio-down));

  /* SPACE */
  --space-xs: var(--step--2);
  --space-sm: var(--step--1);
  --space-md: var(--step-0);
  --space-lg: var(--step-1);
  --space-xl: var(--step-2);

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* gap and pad are for convenience and clarity, you use --space-n directly in classes */
  --gap: var(--space-md);
  --pad: var(--space-lg);

  --shadow: 0 var(--space-xs) var(--space-lg) rgba(0, 0, 0, 0.25);
  --radius: 16px;

  /*
  The browser keeps adding columns until they can’t stay at least 300px wide.
  300px → minimum card width
  1fr → grow to fill remaining space
  auto-fit → automatically create as many columns as fit
  */
  --grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

  --bg-i1: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  --bg-i2: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%230e0814' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* ── Reset ────────────────────────────────────────────────── */
*,
::before,
::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--over);
}

html.homepage {
}
html.pagerizer {
}
html.permalink {
}

/* ── Base ────────────────────────────────────────────────── */

/* ── Body ────────────────────────────────────────────────── */
body {
  min-height: 100dvh;

  color: var(--text);
  background-color: var(--color-a3);
  background-image: var(--bg-i1);

  font-size: var(--step-0);
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.6;

  padding: var(--pad);
}

/* ── Typo ────────────────────────────────────────────────── */
h3 {
  font-size: var(--step-1);
  font-weight: 100;
}

h2 {
  font-size: var(--step-2);
  font-weight: 100;
}

h1 {
  font-size: var(--step-3);
  font-weight: 100;
}

/* ── Posts ────────────────────────────────────────────── */
/* Post grid */
.posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 540px) {
}
@media (min-width: 1200px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1600px) {
  .posts {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Post ────────────────────────────────────────────── */
article.post {
  box-shadow: var(--shadow);
  background-color: var(--color-a1);
  background-image: var(--bg-i2);
  margin: var(--step-1) 0;
  border-radius: var(--radius);
  border: 8px solid black;
}

.post .cover {
  margin: 0;
}
.post .cover img {
  border-radius: calc(var(--radius) / 2) calc(var(--radius) / 2) 0 0;
  display: block;
  width: 100%;
  object-fit: cover;
}

.post .actions {
  margin: 0 var(--step-1);
  display: flex;
  justify-content: space-between;
}
.post .actions .action {
  color: var(--color-b2);
  padding: var(--step--3) var(--step--2);
  border: 1px solid var(--color-b2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.post .actions .action.primary {
  border: 1px solid var(--color-b3);
  color: var(--color-b3);
}

.post .number {
  font-size: var(--step-0);
  font-weight: 100;
  color: var(--color-b2);
}
.post .title {
  font-size: var(--step-1);
  padding: 0 var(--step-3);
  font-weight: 300;
  text-align: center;
  text-wrap: balance;

}
.post .title-text {
  color: var(--color-b0);
}

.post .details,
.post .tags {
  text-align: center;
  font-size: var(--step--1);

}

.post .detail,
.post .tag {
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--step-1);
  padding: var(--step--8) var(--step--2);
  /*margin:var(--step--8) var(--step--8);*/
  margin-bottom: var(--step--8);
  white-space: nowrap;
  display: inline-block;
}

.post .detail.primary,
.post .tag.primary {
  color: var(--color-b3);
}

.text {
  max-width: clamp(45ch, 50vw, 75ch);
  padding-inline: 1rem;
  margin-inline: auto;
  text-wrap: balance;
  text-align: center;
  color: var(--color-b3);

}

.homepage-footer {
  color: var(--mute);

  font-size: var(--step-1);
  text-align: center;

  padding: var(--pad);
}

/* ── Nav: prev / next ─────────────────────────────────────── */
nav.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
  color: var(--color-b2);
}

/* ── Nav: pager buttons ───────────────────────────────────── */
nav.pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1.5rem 0;
}

nav.pager a,
nav.pager span {
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--color-b1);
  color: var(--color-b2);
  transition:
    background 0.2s,
    color 0.2s;
}

nav.pager a:hover {
  background: var(--color-b1);
  color: var(--color-b3);
}
nav.pager [aria-current="true"] {
  background: var(--color-b2);
  color: var(--color-b3);
  font-weight: 700;
}

/* ── Permalink article ────────────────────────────────────── */

.permalink-article {
  max-width: clamp(45ch, 50vw, 75ch);
  padding-inline: 1rem;
  margin-inline: auto;
  text-wrap: balance;

  background-color: var(--color-a1);
  background-image: var(--bg-i2);

    border-radius: var(--radius);
  box-shadow: var(--shadow);

  padding: 3rem 1rem;
}

/* permalink page image */
.permalink-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-xl);
}

.permalink-title {
  font-size: var(--step-1);
  font-weight: 300;

}
  .permalink-article figure {
    padding: 0;
    margin: 0;
  }
.permalink-time {
  display: inline-block;
  margin-bottom: 6rem;
  font-size: var(--step--2);
}

.permalink-audio-player {
  width: 100%;
  padding: 2rem;
}

.permalink-links {
  margin-top: var(--step-3);
  text-align: center;
}
.permalink-links .permalink-link {
  margin: var(--step-3) 0;
}

  hr.web-divider {
    margin: 6.666rem 0;
    border-color: transparent;
  }

.permalink-content-body {
  margin-bottom: 12rem;
}

.permalink-artwork-credit {
  margin-top: var(--step-3);
  text-align: center;
  font-size: var(--step--2);
}

.permalink-divider {
  color: var(--color-b1);
  margin: 3rem 0;
}

.permalink-paragraph {
  margin-bottom: 2rem;
}

.permalink-artwork-credit {
  padding: var(--step-6) 0;
}

.permalink-content-body h1,
.permalink-content-body h2,
.permalink-content-body h3,
.permalink-content-body h4,
.permalink-content-body h5,
.permalink-content-body h6
{
  font-weight: 300;
  font-size: var(--step-1);
}
.permalink-content-body code[class] {
  
  overflow: auto;
  display: block;
  background: rgba(0,0,0,0.25);
  padding: var(--step-1);
  font-size: var(--step--1);
  border-radius: var(--radius);
  
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  @page {
    size: letter;
    margin: 2.54cm 1.8cm;
  }

  * {
    color: #000;
    background: #fff;
  }



  hr.web-divider {
    display: none;
  }


  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    padding: 0;
  }

  .permalink-title {
    font-size: var(--step-0);
    break-after: always;
  }

  .permalink-paragraph {
    margin-bottom: .5rem;
  }

  section, footer {
        break-after: always;
  }

  .permalink-image {
    display: block;
    height: auto;
    margin-bottom: 0;
    box-shadow: none;
  }
  .permalink-article {
    padding: 0;
    max-width: none;
    background-color: none;
    background-image: none;
    border-radius: none;
    box-shadow: none;
  }

.permalink-content-body {
  margin: 0;
}

  .permalink-paragraph {
    margin-bottom: 3rem;
    break-after: avoid;
  }

  .permalink-time,
  .permalink-audio-player,
  .permalink-divider,
  .permalink-artwork-credit {
    display: none;
  }
}
section.divider {
  margin: 6rem 0;
}