/* #region THEME */
:root{
    --paper: #14161D;
    --card: #1D2029;
    --ink: #E8E9F2;
    --ink-soft: #A6ACC7;
    --ink-faint: #6B7290;
    --rule: #2C2F3C;
    --amber: #E3A15B;
    --amber-bg: #3A2A14;
    --teal: #5CC8A8;
    --teal-bg: #123A30;
    --grid-opacity: 0.96;
  color-scheme: dark;
}

[data-theme="light"]{
    --paper: #EDEEF2;
    --card: #FFFFFF;
    --ink: #1B2440;
    --ink-soft: #5B6488;
    --ink-faint: #8A91AC;
    --rule: #CDD1DD;
    --amber: #C97A1E;
    --amber-bg: #FBEEDC;
    --teal: #1E6353;
    --teal-bg: #E1F0EB;
    --grid-opacity: 0.94;
  color-scheme: light;
}

/* #endregion THEME */

/* #region GLOBAL */
*{ box-sizing: border-box; }

body{
  margin        : 0;
  background    : var(--paper);
  position      : relative;
  color         : var(--ink);
  font-family   : 'Inter', sans-serif;
  transition    : background-color 0.2s ease, color 0.2s ease;
}

.github-corner { position: absolute; z-index: 40; top: 0; left: 0; border-bottom: 0; text-decoration: none; }
.github-corner svg { height: 70px; width: 70px; fill:#6e6e6e; color: #3A3A3A; transform: scaleX(-1); }

/* #endregion */

/* #region HEADER */
.pageHeader{
    position  : relative;
    max-width : 760px;
    margin    : 0 auto;
    padding   : 30px 0px;

    & > section{
        display         : flex;
        justify-content : space-between;
        align-items     : flex-start;
        gap             : 24px;
        margin-bottom   : 48px;

        & > header{ flex: 1; min-width: 0; }
    }

    & h1{
      font-family    : 'Fraunces', serif;
      font-weight    : 600;
      font-size      : 40px;
      line-height    : 1.1;
      margin         : 0 0 14px;
    }
}

.eyebrow{
  font-family       : 'IBM Plex Mono', monospace;
  font-size         : 12px;
  letter-spacing    : 0.08em;
  text-transform    : uppercase;
  color             : var(--ink-faint);
  margin            : 0 0 10px;
}

.intro{
    font-size   : 15px;
    color       : var(--ink-soft);
    max-width   : 52ch;
    line-height : 1.6;
    margin      : 0;
}

.stats{
    display     : flex;
    gap         : 24px;
    margin-top  : 28px;
    font-family : 'IBM Plex Mono', monospace;
    font-size   : 12px;
    color       : var(--ink-faint);

    & b{ color: var(--ink); font-weight: 500; }
}

/* #endregion HEADER */

/* #region THEME TOGGLE */
.theme-toggle{
  flex-shrink   : 0;
  width         : 36px;
  height        : 36px;
  border-radius : 50%;
  border        : 1px solid var(--rule);
  background    : var(--card);
  color         : var(--ink-soft);
  display       : flex;
  align-items   : center;
  justify-content: center;
  cursor        : pointer;
  padding       : 0;
  transition    : border-color 0.15s ease, color 0.15s ease;

  &:hover{ border-color: var(--ink-soft); color: var(--ink); }

  & svg { width: 17px; height: 17px; }
}

.theme-toggle .icon-sun{ display: block; }
.theme-toggle .icon-moon{ display: none; }

[data-theme="light"] .theme-toggle .icon-sun{ display: none; }
[data-theme="light"] .theme-toggle .icon-moon{ display: block; }
/* #endregion */


/* #region FILTERS */
.filters{
  display           : flex;
  flex-wrap         : wrap;
  gap               : 8px;
  margin            : 26px 0 20px;
  padding-bottom    : 24px;
  border-bottom     : 1px solid var(--rule);
}

.tag{
  font-family   : 'IBM Plex Mono', monospace;
  font-size     : 12px;
  padding       : 6px 12px;
  border        : 1px solid var(--rule);
  border-radius : 20px;
  background    : var(--card);
  color         : var(--ink-soft);
  cursor        : pointer;
  transition    : border-color 0.15s ease, color 0.15s ease, background 0.15s ease;

  &:hover{ border-color: var(--ink-soft); color: var(--ink); }
  &.active{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
}

/* #endregion */

/* #region LISTING */
.listings{ position: relative; }

.entry{
  grid-template-columns: 92px 20px 1fr;
  display       : grid;
  gap           : 0;
}

.entry-date{
  font-family   : 'IBM Plex Mono', monospace;
  font-size     : 12px;
  color         : var(--ink-faint);
  text-align    : right;
  padding       : 18px 14px 0px;
  white-space   : nowrap;
}

.entry-spine{
  position  : relative;
  display   : flex;
  justify-content: center;
}

.entry-spine::before{
  content:"";
  position: absolute;
  top: 0; bottom: -4px;
  width: 1px;
  background: var(--rule);
}

.entry:last-child .entry-spine::before{ bottom: 50%; }

.entry-dot{
  position      : relative;
  z-index       : 1;
  width         : 12px; height: 12px;
  border-radius : 50%;
  background    : var(--paper);
  border        : 2px solid var(--ink-faint);
  margin-top    : 20px;
}

.entry.featured .entry-dot{ border-color: var(--amber); background: var(--amber); }

.card{
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 8px 14px;
  margin: 4px 0 15px 8px;
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.2s ease;

  &:hover{ border-color: var(--ink-soft); }

  & > main{ font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }

  & > header{
      display           : flex;
      align-items       : baseline;
      justify-content   : space-between;
      gap               : 12px;
      flex-wrap         : wrap;
      margin-bottom     : 8px;

      & a{
          font-family : 'Fraunces', serif;
          font-weight : 600;
          font-size   : 19px;
          margin      : 0;
          letter-spacing: -0.005em;
          text-decoration: none;
          transition: color 0.2s ease;
          color:var(--ink);
          &:hover{ color: var(--ink-faint); }
      }

      & > span{
          font-family   : 'IBM Plex Mono', monospace;
          font-size     : 11px;
          color         : var(--amber);
          background    : var(--amber-bg);
          padding       : 3px 8px;
          border-radius : 4px;
          white-space   : nowrap;
      }
  }

  & > footer{
      display: flex; flex-direction:row; justify-content:space-between;
      & div:nth-of-type(1){ display: flex; flex-wrap: wrap; gap: 6px; }
      & div:nth-of-type(2){
          & a{
              font-family   : 'IBM Plex Mono', monospace;
              font-size     : 12px;
              text-decoration: none;
              letter-spacing: 0.1em;
              color: var(--ink);
              &:hover{ color: var(--ink-soft);}
          }
      }
      & span{
          font-family   : 'IBM Plex Mono', monospace;
          font-size     : 11px;
          color         : var(--teal);
          background    : var(--teal-bg);
          padding       : 3px 8px;
          border-radius : 4px;
      }
  }
}

/* #endregion */

/* #region MEDIA */
@media( max-width: 767px ){
    .pageHeader{ padding: 10px 20px; }
}
/* #endregion */