@font-face {
  font-family: "Neue Haas Display";
  src: url("NeueMedium.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("NeueMedium-subset.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Berkeley Mono";
  src: url("BerkeleyMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face { /* replace with latin modern woff2 ? */
  font-family: "ComputerModern";
  src: url("cmunrm.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

:root {
  --page-pad-x: clamp(1.25rem, 4vw, 3rem);
  --page-pad-y: clamp(1.5rem, 5vw, 4rem);
  --reading-width: min(42rem, 100%);
  
  --table-pad-x: 0.5rem;
  --table-pad-y: 0.35rem;
  --table-index-width: calc(3ch + (2 * var(--table-pad-x)));
  --table-date-width: calc(10.1ch + (2 * var(--table-pad-x)));

  --pink: oklch(0.7328 0.2284 339.01); /* #ff61d7 */
  --dark-pink: oklch(from var(--pink) calc(l*0.9) calc(c*1.1) calc(h*1.05));
  --light-blue: oklch(0.8156 0.1201 227.25); /* #61d2ff */
  --dark-blue: oklch(0.4988 0.2817 264.74); /* #0f3dff */
  --green: oklch(0.7853 0.1905 150.98); /* #3cda76 */
  
  --grey: #AAAAAA;
  --dark-grey: #8d8d8d;
  --black: #161616;
  --offwhite: oklch(0.982 0.0041 91.45); /* #faf9f6 */
  --cream: #fff9d7;
}

/* ================================================== */
/* BASE ELEMENTS                                      */
/* ================================================== */

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

  a {
    color: black;
    text-decoration: underline;
    text-decoration-color: var(--pink);
    &:hover { text-decoration: none }
    &:active { color: var(--dark-pink) }
    &:visited { text-decoration-color: var(--green) }
    &::selection { color: #ffffff }
  }
}

::search-text {
  background-color: var(--cream);
}

::selection {
  background: var(--green);
  color: var(--cream);
}

.nav {
  display: flex;
  background-color: var(--offwhite);
  color: black;
  align-items: center;
  height: 3.5vh;
  border-bottom: 1px solid var(--dark-grey);
  font: 1rem "Berkeley Mono", monospace; 
  position: sticky;
  top: 0; /* makes header stick */
  
  .home {
    margin-left: var(--page-pad-x);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    a {
      text-decoration-color: var(--pink); /* enforce pink underlines (no :visited state) */

      &:last-child { /* last child is the current page in the nav tree */
        color: var(--dark-pink); /* active state colour */
        text-decoration-color: var(--dark-pink);
      } 
    }
  }

  .info {
    @media (width<1000px) {
      display: none;
    }
    
    color: var(--dark-grey);
    margin-left: auto;
    margin-right: var(--page-pad-x);
    font-size: 0.875rem;

    a { text-decoration-color: var(--pink) } /* no active state   */
  }


}

body {
  background: var(--offwhite);
  color: var(--black);
}

main {
  min-height: 96.5vh;
  padding:
    var(--page-pad-y)
    var(--page-pad-x)
    var(--page-pad-y)
    var(--page-pad-x);

  /* HERO */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  container-type: inline-size;
}

/* ================================================== */
/* PAGE LAYOUT                                        */
/* ================================================== */

/* @container hero (width >1000px) {
  .hero-stack {
    background: black; 
  }
} */

.hero-stack { /* div container */
  display: grid;
  width: fit-content;
  max-width: 50cqw;

  @media (width<1525px) {
    max-width: 65cqw;
  }

  @media (width<700px) {
    max-width: 90cqw;
  }
}

.hero-bio {
  font-family: "Neue Haas Display";
  color: var(--grey);
  text-align: justify;
  font-size: clamp(1.25rem, 1.69491247cqw, 60px);
  /* font-size: 1.6425vw; */

  b {
    font-weight: inherit;
    color: var(--black);
  }
  a { 
    color: var(--light-blue);
    text-decoration-color: var(--light-blue);
  }
  a:active { color: var(--dark-blue) }
}

.inner-container {
  position: relative;

  .wordmark {
    display: flex;
    align-items: center;
    margin-block: 2rem;
  }
}

/* ================================================== */
/* TABLES                                             */
/* ================================================== */
.table-shell {
  --cols: var(--table-index-width) minmax(0, 1fr);
  --row-height: calc(1lh + (2 * var(--table-pad-y)) + 1px);
  --column-lines:
    linear-gradient(
      90deg,
      transparent 0 calc(var(--table-index-width) - 1px),
      var(--dark-grey) calc(var(--table-index-width) - 1px) var(--table-index-width),
      transparent var(--table-index-width) 100%
    );

  display: flex;
  flex-direction: column;
  border: 1px solid var(--dark-grey);
  background: var(--column-lines), white;
  font: 0.875rem/1 "Berkeley Mono", monospace;
  text-align: left;

  a { /* LINK STYLING */
    white-space: normal;

    &::after { /* ARROW HOVER REVEAL */
      display: inline-block;
      inline-size: 1.15em; /* SPACE RESERVED IN LAYOUT */
      color: var(--pink);
      text-align: end;
      text-decoration: none;
      opacity: 0; /* DEFAULT HIDDEN */
    }
    &:is(:hover, :focus-visible)::after { opacity: 1 } /* REVEAL */
  }
}

.blog-table {
  --cols: var(--table-index-width) minmax(0, 1fr) var(--table-date-width);
  --column-lines:
    linear-gradient(
      90deg,
      transparent 0 calc(var(--table-index-width) - 1px),
      var(--dark-grey) calc(var(--table-index-width) - 1px) var(--table-index-width),
      transparent var(--table-index-width) 100%
    ),
    linear-gradient(
      90deg,
      transparent 0 calc(100% - var(--table-date-width) - 1px),
      var(--dark-grey) calc(100% - var(--table-date-width) - 1px) calc(100% - var(--table-date-width)),
      transparent calc(100% - var(--table-date-width)) 100%
    );

  .table-shell-body::after { flex: 0 0 calc(3 * var(--row-height)) }

  a::after { content: "↖"; }
}

.links-table {
  @media (width>=1505px) {
    position: absolute;
    left: calc(100% + 1rem);
    top: 0;
    bottom: 0;
    width: 12.5cqw;
  } 
  @media (width<1200px) {
    position: relative;
  }
  
  margin-top: 2rem;
  
  a::after { content: "↗"; }
}

.main {
  @media(width<1200px) {
    height: calc(96.5vh);
  }
}

.table-shell-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  block-size: 2rem;
  padding-inline: var(--table-pad-x);
  outline: 1px solid var(--black);
  background: var(--pink);
  color: white;
  font: inherit;
  font-size: 1rem;

  svg {
    inline-size: 1rem;
    block-size: 1rem;
  }
}

.row-count {
  margin-inline-start: auto;
  letter-spacing: -0.1rem;
}

.table-shell-head,
.table-shell-row {
  display: grid;
  align-items: center;
  grid-template-columns: var(--cols);

  > * {
    min-inline-size: 0;
    padding: var(--table-pad-y) var(--table-pad-x);
  }
}

.table-shell-head {
  color: var(--dark-grey);
}

.table-shell-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  list-style: none;
}

.table-shell-row { border-block-end: 1px solid var(--dark-grey) }

.table-shell-body::after {
  content: "";
  box-sizing: border-box;
  flex: 1;
  min-block-size: var(--row-height);
  padding-block-end: 1px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--row-height) - 1px),
      var(--dark-grey) calc(var(--row-height) - 1px) var(--row-height)
    );
  background-origin: content-box;
  background-clip: content-box;
}

/* ================================================== */
/* BLOG POSTS                                         */
/* ================================================== */
.page-shell {
  width: var(--reading-width); /* title should have much more width than reading area */
  display: grid;
  gap: 1.5rem;
  text-align: left;
}

.page-title {
  font-family: "Neue Haas Display";
  font-size: clamp(1.8rem, 6vw, 3.375rem);
  line-height: 1.1;
  color: var(--pink);
}

.subtitle {
  font-family: ComputerModern;
  display: flex;
  justify-content: space-between;
  color: var(--grey);
}

.page-body {
  font-family: ComputerModern;  
  line-height: 1.7;
  font-size: 1.125rem;
  text-align: left;
  text-wrap: pretty;
}