/* ———RESET——— */ /* prettier-ignore */
* {
margin: 0;
::before, ::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { max-width: 100%; }
input, button, textarea, select { font: inherit; font-size: 100%; -webkit-appearance: none; appearance: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
}

/* ———SITE VARIABLES——— */
:root {
  /* fonts */
  --font-display: sansita, sans-serif;
  --font-display-alt: sansita-alt, sansita, sans-serif;
  --font-mono: victor-mono, monospace;
  --font-mono-alt: victor-mono-italic, victor-mono, monospace;
  --font-base: public-sans, sans-serif;
  --font-base-italic: public-sans-italic, public-sans, sans-serif;
  /* colors */
  --color-base: 255, 255, 255;
  --color-base-alt: 229, 244, 255;
  --color-link: var(--color-base);
  --color-link-background: 227, 41, 162;
  --color-twilight: 0, 51, 121;
  --color-twilight-dark: 0, 43, 102;
  /* misc */
  --page-width: 65rem;
}

/* ———FONTS——— */
@font-face {
  font-family: "victor-mono-italic";
  src: url("../fonts/victor-mono-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "public-sans";
  src: url("../fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "sansita-alt";
  src: url("../fonts/sansita-black-italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "victor-mono";
  src: url("../fonts/victor-mono.woff2 ") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "public-sans-italic";
  src: url("../fonts/public-sans-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "sansita";
  src: url("../fonts/sansita-black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

/* ———UTOPIA: TYPE——— */ /* https://utopia.fyi/type/calculator?c=320,14,1.2,1440,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,3xs-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(0.6076rem, 0.5527rem + 0.2748vw, 0.8rem);
  --step--1: clamp(0.7292rem, 0.6518rem + 0.3869vw, 1rem);
  --step-0: clamp(0.875rem, 0.7679rem + 0.5357vw, 1.25rem);
  --step-1: clamp(1.05rem, 0.9036rem + 0.7321vw, 1.5625rem);
  --step-2: clamp(1.26rem, 1.062rem + 0.9902vw, 1.9531rem);
  --step-3: clamp(1.512rem, 1.2465rem + 1.3277vw, 2.4414rem);
  --step-4: clamp(1.8144rem, 1.4609rem + 1.7677vw, 3.0518rem);
  --step-5: clamp(2.1773rem, 1.7094rem + 2.3392vw, 3.8147rem);
}

/* ———UTOPIA: SPACE——— */ /* https://utopia.fyi/space/calculator?c=320,14,1.2,1440,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,3xs-l&g=s,l,xl,12 */
:root {
  --space-3xs: clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem);
  --space-2xs: clamp(0.4375rem, 0.3839rem + 0.2679vw, 0.625rem);
  --space-xs: clamp(0.6875rem, 0.6161rem + 0.3571vw, 0.9375rem);
  --space-s: clamp(0.875rem, 0.7679rem + 0.5357vw, 1.25rem);
  --space-m: clamp(1.3125rem, 1.1518rem + 0.8036vw, 1.875rem);
  --space-l: clamp(1.75rem, 1.5357rem + 1.0714vw, 2.5rem);
  --space-xl: clamp(2.625rem, 2.3036rem + 1.6071vw, 3.75rem);
  --space-2xl: clamp(3.5rem, 3.0714rem + 2.1429vw, 5rem);
  --space-3xl: clamp(5.25rem, 4.6071rem + 3.2143vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1429rem + 0.5357vw, 0.625rem);
  --space-2xs-xs: clamp(0.4375rem, 0.2946rem + 0.7143vw, 0.9375rem);
  --space-xs-s: clamp(0.6875rem, 0.5268rem + 0.8036vw, 1.25rem);
  --space-s-m: clamp(0.875rem, 0.5893rem + 1.4286vw, 1.875rem);
  --space-m-l: clamp(1.3125rem, 0.9732rem + 1.6964vw, 2.5rem);
  --space-l-xl: clamp(1.75rem, 1.1786rem + 2.8571vw, 3.75rem);
  --space-xl-2xl: clamp(2.625rem, 1.9464rem + 3.3929vw, 5rem);
  --space-2xl-3xl: clamp(3.5rem, 2.3571rem + 5.7143vw, 7.5rem);
}

/* Default Utopia sizing for headers */ /* prettier-ignore */
* {
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-3); }
  h4 { font-size: var(--step-2); }
  h5 { font-size: var(--step-1); }
}

html {
  min-height: 100dvh;
}
body {
  font-family: var(--font-base);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--step-0);
  color: rgba(var(--color-base), 1);
  position: relative;
  background-color: rgba(var(--color-twilight), 0.75);
  background-image: url(../img/bkgrnd-clouds-sml.png);
  background-position: center bottom 38%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#server-tag {
  position: fixed;
  top: 6px;
  left: 0px;
  font-size: var(--step--2);
  font-family: var(--font-base-italic);
  font-style: italic;
  color: rgb(var(--color-twilight));
  background-color: yellow;
  padding: 6px 10px 6px 6px;
  border-radius: 0 12px 12px 0;
  opacity: 0.9;
  z-index: 1000;
}
h1 {
  font-family: var(--font-display-alt);
  font-style: italic;
  font-weight: 900;
  a {
    text-decoration: none;
  }
}
header {
  padding: var(--space-2xl) var(--space-s) var(--space-m) var(--space-s);
  text-align: center;
}
main {
  margin: 0 auto;
  padding: 0 var(--space-xl);
  max-width: var(--page-width);
}
a {
  color: var(--color-link);
  font-weight: 400;
  text-decoration: underline;
}
#to-top {
  /* Back to top button */
  z-index: 900;
  position: fixed;
  bottom: var(--space-m);
  right: 5px;
  padding: var(--space-2xs) var(--space-3xs);
  background-color: rgba(var(--color-twilight), 1);
  cursor: pointer;
  border: none;
  border-radius: 6px;
  /*opacity: 0;*/
  display: hidden;
  transition:
    opacity 1s ease,
    visibility 1s;
  img {
    height: 24px;
    opacity: 0.9;
  }
  :hover& {
    background-color: rgba(var(--color-twilight-dark), 1);
    img {
      opacity: 1;
    }
  }
}

/* ———ANIMATION & DISPLAY——— */
.fade-in {
  opacity: 1;
  visibility: visible;
}
.fade-out {
  opacity: 0;
  visibility: hidden;
}
.invisible {
  display: none;
}
.visible {
  display: block;
}

/* ———LINK BLOG——— */
#index {
  ul.link-blog {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0;
    line-height: 0;
    text-align: justify;
    text-justify: auto;
    li {
      display: none;
    }
    li.visible {
      display: inline;
    }
  }
  article {
    display: inline;
    line-height: 2.75;
    vertical-align: baseline;
    h2,
    p {
      display: inline;
      font-size: var(--step-0);
      border: 0;
    }
    p {
    }
    h2 {
      vertical-align: baseline;
      padding: 0;
      margin: 0;
      img {
        display: inline-block;
        height: var(--step-1);
        vertical-align: middle;
        margin-right: 0.25em;
        margin-bottom: 3px;
      }
      a {
        padding: var(--space-2xs);
        vertical-align: baseline;
        border: 0;
        border-radius: var(--space-2xs);
        background: linear-gradient(
          in oklab 90deg,
          rgba(var(--color-link-background), 1) 38%,
          rgba(227, 106, 41, 0) 100%
        );
        color: rgba(var(--color-link), 1);
        font-weight: 800;
        white-space: nowrap;
        text-decoration: none;
        box-decoration-break: clone;
        -box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        .draft& {
          background: linear-gradient(
            in oklab 90deg,
            rgb(var(--color-twilight)),
            rgb(var(--color-base-alt), 0)
          );
        }
      }
      a:hover,
      a:active {
        background: linear-gradient(
          in oklab 179deg,
          rgba(var(--color-link-background), 1) 90%,
          rgba(173, 31, 124, 1) 99%
        );
        box-shadow:
          1px 1px var(--space-3xs) rgba(var(--color-twilight), 0.33),
          -1px -2px 3px rgba(var(--color-base), 0.1);
      }
    }

    p {
      margin-left: calc(var(--space-3xs) * -1);
      font-family: var(--font-mono-alt);
      font-weight: 400;
      font-style: italic;
      color: rgba(var(--color-base-alt), 1);
      text-shadow: 0 1px 3px rgba(var(--color-twilight), 0.5);
      hyphens: auto;
      padding: var(--space-2xs);
      vertical-align: baseline;
    }
  }
}
article[data-post-draft="true"] {
  opacity: 0.8;
}

/* ———PAGE FOOTER——— */
footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 3px;
  margin: var(--space-xl) auto var(--space-s) auto;
  max-width: var(--page-width);
  h3 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 400;
  }
  ul {
    padding-left: 0;
    margin-left: 0;
    li {
      list-style-type: none;
    }
  }
  h3,
  h4,
  p,
  li:last-child {
    margin-bottom: var(--space-s);
  }
  a {
    font-weight: 700;
    background-color: rgba(var(--color-base-alt), 0.2);
    text-decoration: none;
    img {
      width: 1em;
      max-width: none;
      padding-right: var(--space-3xs);
      margin: 0;
      display: inline;
      vertical-align: middle;
    }
    :hover& {
      background-color: rgba(var(--color-link-background), 1);
    }
  }
  small {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 400;
    a {
      background-color: transparent;
    }
  }
  .external,
  .internal {
    padding: var(--space-s-m);
    border-radius: var(--space-s);
    backdrop-filter: blur(8px);
    background: linear-gradient(
      to top,
      rgba(var(--color-twilight), 0.5),
      rgba(var(--color-base), 0)
    );
  }
  .internal {
    .dinkus {
      padding-top: var(--space-s);
      margin-bottom: 0;
      img {
        width: var(--step-1);
      }
      a {
        background-color: transparent;
      }
    }
  }
}

/* ———FILTER CONTROLS——— */
#filter-control {
  text-align: center;
  padding-bottom: var(--space-l);
  #filter-buttons {
    padding-bottom: var(--space-xs);
  }
  button {
    border: none;
    background-color: rgba(var(--color-twilight), 1);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--space-m);
    box-shadow: 1px 1px 1px rgba(var(--color-base-alt), 0.1);
    :hover&,
    .always-on:hover& {
      background-color: rgba(var(--color-twilight-dark), 1);
      img {
        opacity: 1;
      }
    }
    .active& {
      background-color: rgba(var(--color-link-background), 1);
      box-shadow: -1px -1px 1px rgba(var(--color-twilight), 0.1);
      .hover& {
        background-color: rgba(var(--color-link-background), 1);
      }
      img {
        opacity: 1;
      }
    }
    .always-on& {
      img {
        opacity: 0.9;
      }
    }
    img {
      width: 24px;
      height: 24px;
      opacity: 0.9;
      display: block;
    }
  }
  @media (hover: none) {
    button {
      :hover&,
      .always-on:hover& {
        background-color: rgba(var(--color-twilight), 1);
        img {
          opacity: 0.9;
        }
      }
      .active&,
      .active:hover {
        background-color: rgba(var(--color-link-background), 1);
        img {
          opacity: 1;
        }
      }
    }
  }
  #tooltip {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    height: 1em;
  }
}

/* ———POST PAGE——— */
#post_page {
  article {
    font-size: var(--step-0);
    line-height: 1.425;
    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: var(--font-display);
      font-style: normal;
      margin-bottom: var(--space-s);
      clear: both;
      a {
        border-top-left-radius: var(--space-3xs);
        border-top-right-radius: var(--space-3xs);
      }
    }
    header {
      h1 {
        font-size: var(--step-5);
        font-family: var(--font-display);
        font-style: normal;
      }
      .tagline {
        text-transform: uppercase;
        font-weight: 300;
      }
      a {
        background-color: transparent;
        font-weight: 300;
        text-decoration: none;
        :hover& {
          background-color: rgb(var(--color-link-background));
          color: rgb(var(--color-link));
          text-decoration: none;
        }
      }
    }
    main {
      background: linear-gradient(
        164deg,
        rgba(var(--color-twilight), 1),
        rgba(var(--color-twilight-dark), 1)
      );
      border-radius: var(--space-s);
    }
    .post-content {
      max-width: 48rem;
      margin: 0 auto;
      padding: var(--space-l) var(--space-3xs-2xs) var(--space-3xl)
        var(--space-3xs-2xs);
      color: rgb(var(--color-base-alt));
    }
    h2 {
      font-size: var(--step-3);
    }
    h3 {
      font-size: var(--step-2);
    }
    h4 {
      font-size: var(--step-1);
    }
    ul {
      margin-bottom: var(--space-s);
    }
    p {
      font-family: var(--font-base);
      font-style: normal;
      margin-bottom: var(--space-s);
      clear: both;
    }
    a {
      background-color: rgba(var(--color-base-alt), 0.1);
      padding: 0 var(--space-3xs);
      margin: 0 1px;
      font-weight: normal;
      display: inline-block;
      border-radius: 3px;
      :hover& {
        background-color: rgba(var(--color-link-background), 1);
      }
    }
    i,
    em {
      font-family: var(--font-base-italic);
      font-style: italic;
    }
    b,
    strong {
      font-weight: bold;
    }
    img {
      border: solid 3px rgba(var(--color-base-alt), 0.25);
      border-radius: var(--space-xs);
      width: 95%;
      max-width: 28rem;
      margin-bottom: var(--space-s);
      float: left;
      display: inline;
    }
    blockquote {
      padding: 1rem var(--space-s-m);
      border-left: solid 3px rgba(var(--color-base-alt), 0.25);
      background-color: rgb(var(--color-twilight-dark));
      margin-bottom: var(--space-s);
      font-size: var(--step--1);
      border-radius: var(--space-3xs);
      p {
        margin-bottom: 0;
      }
    }
    hr {
      height: 1px;
      margin-bottom: var(--space-s);
      border: none;
      border-bottom: dotted 1px rgb(var(--color-base-alt), 0.25);
    }
  }
  footer {
    margin-top: var(--space-m);
    .external,
    .internal {
      background: linear-gradient(
        to bottom,
        rgba(var(--color-twilight), 0.5),
        rgba(var(--color-base), 0)
      );
    }
  }
}

/* ———ADMIN PAGE——— */
#admin {
  h1 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 900;
  }
  .tagline {
    display: none;
  }
  .admin-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1 rem;
    background-color: rgba(var(--color-link-background));
    padding: var(--space-s);
    margin-bottom: 0;
    border-radius: var(--space-s) var(--space-s) 0 0;
    vertical-align: middle;
    text-align: right;
    :first-child& {
      margin-right: auto;
    }
    .view-count {
      display: inline-block;
      opacity: 0.9;
    }
    .admin-actions {
      display: flex;
      gap: var(--space-xs);
      flex-wrap: wrap;
    }
    a {
      font-weight: 600;
      opacity: 0.9;
      :last-child& {
        margin-right: 0;
      }
      :hover& {
        opacity: 1;
      }
    }
    img {
      display: inline;
      vertical-align: middle;
      margin-right: var(--space-3xs);
      height: var(--step-0);
    }
  }
  table {
    border-collapse: collapse;
    margin-bottom: var(--space-xl);
    backdrop-filter: blur(30px);
    background: linear-gradient(
      to top,
      rgba(var(--color-twilight), 0.4),
      rgba(var(--color-twilight-dark), 0.9)
    );
    border-radius: 0 0 var(--space-s) var(--space-s);
  }
  tr {
    border-bottom: dotted 4px rgba(var(--color-base-alt), 0.1);
    display: none;
  }
  tr.visible {
    display: table-row;
  }
  tr:last-child {
    border-bottom: none;
  }
  td {
    vertical-align: top;
    padding: var(--space-s);
    h2 {
      font-size: var(--step-1);
      font-weight: 700;
    }
    p {
      font-weight: 100;
    }
    code {
      font-family: var(--font-mono);
      font-weight: 200;
      font-size: var(--step--2);
      color: rgba(var(--color-base-alt), 1);
      word-break: break-all;
    }
    time {
      font-weight: 400;
      color: rgba(var(--color-base-alt), 1);
    }
  }
  td.icon {
    width: var(--space-m);
    min-width: 16px;
    padding-right: 0;
    img {
      width: var(--space-m);
      padding: 0;
      margin: 0 auto;
    }
  }
  td.action {
    + :last-child {
      padding-right: var(--space-s);
    }
    img {
      opacity: 0.75;
    }
    img:hover {
      opacity: 1;
    }
  }
  footer {
    display: none;
  }
}

/* ———POST FORM——— */
#post_form {
  h1 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 900;
  }
  .tagline {
    display: none;
  }
  header {
    padding-bottom: var(--space-s);
  }
  footer {
    display: none;
  }
}
div.post-form {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 1rem;
  align-items: center;
  max-width: 50rem;
  margin: 0 auto;
  border-radius: var(--space-2xs);
  padding: var(--space-xs) var(--space-2xs);
  background-color: rgba(var(--color-twilight), 0.5);
  .invisible {
    display: none;
  }
  label,
  .without-label {
    text-align: right;
    width: 7rem;
    height: 100%;
    padding-top: var(--space-2xs);
  }
  label {
    font-weight: bold;
  }
  .without-label {
    font-size: var(--step--1);
    font-weight: normal;
  }
  .extra-info {
    font-size: var(--step--1);
    opacity: 0.8;
  }
  .button-group {
    grid-column: 2;
    text-align: right;
  }
  code {
    font-size: var(--step--1);
    word-break: break-all;
  }
  input,
  select,
  textarea {
    padding: var(--space-2xs);
    border-radius: var(--space-2xs);
  }
  input:is([type="checkbox"]) {
    appearance: auto;
    width: 1em;
    height: 1em;
    margin-right: var(--space-xs);
  }
  button {
    padding: var(--space-3xs) var(--space-m);
    border-radius: var(--space-3xs);
    font-weight: 800;
    background-color: rgba(var(--color-link-background), 1);
    color: rgba(rgba(var(--color-base), 1), 1);
    border-bottom-color: rgba(var(--color-twilight-dark), 1);
    border-right-color: rgba(var(--color-twilight-dark), 1);
    border-top-color: rgba(var(--color-base-alt), 0.25);
    border-left-color: rgba(var(--color-base-alt), 0.25);
    cursor: pointer;
  }
  button.secondary {
    font-size: var(--step--1);
    font-weight: 400;
    background-color: rgba(var(--color-twilight-dark), 1);
  }
  button:hover {
    text-decoration: underline;
  }
}
#login {
  footer {
    display: none;
  }
}

/* ———RESPONSIVE OVERRIDES——— */
@media (width <= 750px) {
  body {
    background-position: center bottom 0%;
    background-color: rgba(var(--color-twilight), 0.98);
  }
  #to-top {
    right: 8px;
  }
  header {
    /*padding-bottom: var(--space-3xs);*/
    p.tagline {
      font-size: var(--step--1);
    }
  }
  main {
    padding: 0 var(--space-xs);
  }
  #index {
    article {
      h2 {
        a {
          white-space: wrap;
          -box-decoration-break: slice;
          -webkit-box-decoration-break: slice;
          img {
            font-size: var(--step-0);
          }
        }
      }
      p {
        padding: var(--space-2xs);
        background-color: rgba(var(--color-twilight), 0.1);
        white-space: wrap;
        hyphens: auto;
        overflow-wrap: break-word;
        -box-decoration-break: slice;
        -webkit-box-decoration-break: slice;
      }
    }
  }
  footer {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
    background: linear-gradient(
      to top,
      rgba(var(--color-twilight-dark), 0.9),
      rgba(var(--color-twilight), 0.5)
    );
    border-radius: var(--space-s) var(--space-s) 0 0;
    .internal,
    .external {
      margin-left: var(--space-2xs);
      margin-right: var(--space-2xs);
    }
    .internal {
      background: transparent;
    }
    .external {
      background: transparent;
      padding-top: 0;
    }
    .dinkus {
      display: none;
    }
  }
  div.post-form {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    background-color: rgba(var(--color-twilight), 0.5);
    .button-group {
      grid-column: 1;
      margin-top: var(--space-xs);
    }
    label,
    .without-label {
      display: block;
      text-align: left;
      font-size: var(--step-1);
      max-width: none;
      width: auto;
      height: auto;
      margin: 0;
      padding: var(--space-2xs);
      background-color: rgba(var(--color-twilight), 1);
    }
    .without-label {
      font-size: var(--step-0);
    }
    code,
    .extra-info {
      padding: var(--space-3xs) var(--space-2xs);
    }
  }
}