@font-face {
  src:          url('/assets/newsreader-var.woff2') format('woff2');
  font-family:  'Newsreader';
  font-weight:  200 800;
  font-style:   normal;
  font-display: swap;
}
@font-face {
  src:          url('/assets/newsreader-italic-var.woff2') format('woff2');
  font-family:  'Newsreader';
  font-weight:  200 800;
  font-style:   italic;
  font-display: swap;
}

@font-face {
  src:          url('/assets/cascadia_mono-var.woff2') format('woff2');
  font-family:  'Cascadia Mono';
  font-weight:  200 800;
  font-style:   normal;
  font-display: swap;
}
@font-face {
  src:          url('/assets/cascadia_mono-italic-var.woff2') format('woff2');
  font-family:  'Cascadia Mono';
  font-weight:  200 800;
  font-style:   italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Fonts */
  --f-serif: Newsreader, serif;
  --f-mono: 'Cascadia Mono', monospace;

  --s-xxs: 0.75rem;
  --s-xs:  0.875rem;
  --s-s:   1rem;
  --s-m:   1.125rem;
  --s-l:   1.25rem;
  --s-xl:  1.375rem;
  --s-2xl: 1.5rem;
  --s-3xl: 2rem;
  --s-4xl: 2.5rem;
  --s-5xl: 3rem;
  --s-6xl: 4rem;
  
  /* Layout */
  --h-line:   1.5rem;                        /* vertical rhythm between blocks */
  --w-main:   68ch;                           /* main text column */
  --w-side:   18rem;                          /* side-note column */
  --w-margin: clamp(1rem, 4vw, 2.5rem);       /* min space at page edges */
  --w-gap:    clamp(1.5rem, 3vw, 2.5rem);     /* space between columns */
  --w-page:   calc(var(--w-main) + var(--w-side) + var(--w-gap));
 
  /* Colors - Night Owl theme (modified) */
  --hue:   245;
 
  --c-syn-bg:       oklch(0.200 0.035 var(--hue));
  --c-syn-fg:       oklch(0.900 0.020 260);
  --c-syn-cur:      oklch(0.700 0.060 var(--hue));
  --c-syn-sel:      oklch(0.350 0.056 var(--hue));
  --c-syn-srch:     oklch(0.580 0.052 var(--hue));
  --c-syn-com:      oklch(0.550 0.024 200);
  --c-syn-con:      oklch(0.700 0.190 30);
  --c-syn-num:      oklch(0.750 0.140 45);
  --c-syn-kw:       oklch(0.740 0.135 310);
  --c-syn-fn:       oklch(0.744 0.130 260);
  --c-syn-str:      oklch(0.842 0.085 75);
  --c-syn-sup:      oklch(0.834 0.150 120);
  --c-syn-lan:      oklch(0.829 0.092 180);
  --c-syn-inv:      oklch(0.660 0.245 0);

  --c-canvas:       var(--c-syn-bg);
  --c-surface:      oklch(0.230 0.035 var(--hue));
  --c-well:         oklch(0.170 0.035 var(--hue));

  --c-line:         oklch(0.315 0.025 var(--hue));

  --c-text:         oklch(0.975 0.020 var(--hue));
  --c-text-2:       oklch(0.905 0.020 var(--hue));
  --c-text-3:       oklch(0.805 0.020 var(--hue));
  --c-text-4:       oklch(0.565 0.030 var(--hue));
 
  --c-visited:      oklch(0.700 0.075 300);
  --c-select:       oklch(0.330 0.065 262);

  --c-accent:       oklch(0.700 0.150 45);
  --c-accent-hi:    oklch(0.800 0.130 45);
  --c-accent-dim:   oklch(0.400 0.070 45);
}

@media (max-width: 68rem) {
  :root {
    --w-margin: clamp(1rem, 4vw, 2.5rem);
    --w-page: calc(100svw - 2 * var(--w-margin));
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --hue: 92;

    --c-syn-bg:       oklch(0.98809 0 none);
    --c-syn-fg:       oklch(0.37692 0.03395 286.94);
    --c-syn-cur:      oklch(0.71431 0.03027 228.25);
    --c-syn-sel:      oklch(0.9067 0 none);
    --c-syn-srch:     oklch(0.6979 0.0159 196.79);
    --c-syn-com:      oklch(0.70275 0.02746 268.73);
    --c-syn-con:      oklch(0.5773 0.13483 22.209);
    --c-syn-num:      oklch(0.49766 0.20951 342.46);
    --c-syn-kw:       oklch(0.56388 0.18598 311.73);
    --c-syn-fn:       oklch(0.58187 0.1557 263.15);
    --c-syn-str:      oklch(0.62801 0.12508 22.487);
    --c-syn-sup:      oklch(0.58187 0.1557 263.15);
    --c-syn-lan:      oklch(0.61219 0.1023 199.06);
    --c-syn-inv:      oklch(0.65945 0.24438 3.1909);

    --c-canvas:       oklch(0.975 0.008 92);
    --c-surface:      oklch(0.995 0.004 92);
    --c-well:         oklch(0.950 0.012 92);
    --c-line:         oklch(0.875 0.014 92);
    --c-text:         oklch(0.185 0.018 262);
    /* --c-text-3333     oklch(0.345 0.020 262); */
    /* --c-text-3:       oklch(0.500 0.018 262); */

    --c-accent:       oklch(0.475 0.165 30);
    --c-accent-hi:    oklch(0.395 0.150 28);
    --c-accent-dim:   oklch(0.940 0.033 45);
    --c-visited:      oklch(0.440 0.110 300);
    --c-select:       oklch(0.900 0.045 70);
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* General element styles */

html { font-size: 16px; }

body {
  background:               var(--c-canvas);
  color:                    var(--c-text);
  margin:                   0;
  min-height:               100vh;
  display:                  grid;
  grid-template-rows:       auto auto 1fr auto auto;        /* footer stays at the bottom */
  font-family:              var(--f-serif);
  font-size:                1.125rem;
  line-height:              var(--h-line);
  -webkit-text-size-adjust: 100%;
}

a[href] {
  color:           inherit;
  text-decoration: none;

  &:hover { color: var(--c-accent); }
  &:active { color: var(--c-accent-dim); }
}

b { font-weight: 600; }

input, button, select, textarea, a[href].button { font-family: var(--f-mono); }

button, a[href].button {
  background:     none;
  border:         1px solid var(--c-accent);
  border-radius:  0.25rem;
  color:          var(--c-text-3);
  cursor:         pointer;
  display:        block;
  font-size:      var(--s-xs);
  font-weight:    300;
  letter-spacing: 0.1em;
  padding:        calc(var(--h-line) / 2) var(--h-line);
  text-transform: uppercase;

  &:hover {
    color:        var(--c-accent);
  }
  &:active {
    border-color: var(--c-accent-dim);
    color:        var(--c-accent-dim);
  }
}

img, svg, video { display: block; max-width: 100%; height: auto; }

code {
  font-family: var(--f-mono);
  font-size:   0.9em;
}

pre {
  background:    var(--c-well);
  border:        1px solid var(--c-line);
  border-radius: 0.25rem;
  padding:       calc(0.5 * var(--h-line)) var(--h-line);
  text-wrap:     wrap;

  code {
    font-size:  var(--s-xs);
  }
}

p {
  color:  var(--c-text-2);
  margin: var(--h-line) 0;

  hyphens: auto;
  hyphenate-limit-chars: 7;

  word-break: break-word;
  text-align: justify;
  text-wrap:  pretty;
}

p > code {
  color: var(--c-syn-str);
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 0; }

h3 { line-height: calc(2 * var(--h-line)); }

h1 { font-size: var(--s-5xl); line-height: calc(2 * var(--h-line)); }
h2 { font-size: var(--s-4xl); line-height: calc(2 * var(--h-line)); }
h3 { font-size: var(--s-3xl); }
h4 { font-size: var(--s-2xl); line-height: var(--h-line); }
h5 { font-size: var(--s-xl);  line-height: var(--h-line); }
h6 { font-size: var(--s-l);   line-height: var(--h-line); }

ul { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior:     auto !important;
  }
}

/* Generic site styles */

header.site-header {
  align-items:    baseline;
  display:        flex;
  flex-wrap:      wrap;
  gap:            calc(2 * var(--h-line));
  margin:         0 auto;
  padding-top:    calc(2 * var(--h-line));
  padding-bottom: var(--h-line);
  width:          var(--w-page);

  .site-name {
    font-size:     var(--s-4xl);
    font-weight:   600;
    line-height:   calc(3 * var(--h-line));
  }

  .site-nav {
    display:         flex;
    justify-content: flex-end;
    flex-grow:       1;
    flex-wrap:       wrap;
    gap:             var(--h-line);
    list-style:      none;
    margin:          0;
    padding:         0;

    li.site-link {
      display:        block;
      color:          var(--c-text-3);
      font-family:    var(--f-mono);
      font-size:      var(--s-xs);
      font-weight:    300;
      letter-spacing: 1.5px;
      text-transform: uppercase;

      &.active {
        color:       var(--c-accent);
        font-weight: 600;
      }
    }
  }
}

.site-header-separator {
  background: url(/assets/pleter-bg.svg);
  flex-grow:  0;
  height:     calc(2 * var(--h-line));
}

footer.site-footer {
  color:   var(--c-text-3);
  margin:  0 auto;
  padding: calc(var(--h-line) * 2) 0;
  width:   var(--w-page);

  p { text-align: center; }

  .site-footer-nav {
    display:         flex;
    justify-content: center;
    gap:             var(--h-line);

    li.site-footer-link {
      display:        block;
      font-family:    var(--f-mono);
      font-size:      var(--s-xxs);
      font-weight:    300;
      letter-spacing: 1.5px;
      text-transform: uppercase;

      &.active {
        color:       var(--c-accent);
        font-weight: 600;
      }
    }
  }
}

main.page-content {
  margin: calc(2 * var(--h-line)) auto 0 auto;
  width:  var(--w-page);
}

.buttons {
  display:         flex;
  gap:             var(--h-line);
  justify-content: right;
}

dl.contact-list {
  line-height: calc(1.5 * var(--h-line));

  dt {
    border-top:  1px solid var(--c-line);
    color:       var(--c-text-3);
    font-family: var(--f-mono);
    font-size:   var(--s-xs);
    font-weight: 300;
  }

  dd {
    margin: 0;
  }
}

/* Overview layout styles */

.overview {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--w-gap);

  .overview-main { width: var(--w-main); }
  .overview-side { width: var(--w-side); }

  .overview-main > section, .overview-side > section {
    margin-bottom: var(--h-line);
  }

  .overview-list-item {
    background:    var(--c-surface);
    border:        1px solid var(--c-line);
    border-left:   4px solid var(--c-accent);
    border-radius: 0.25rem;
    padding:       var(--h-line);

    &:not(:last-child) {
      margin-bottom: calc(0.5 * var(--h-line));
    }

    .overview-list-item-head {
      align-items:     baseline;
      display:         flex;
      flex-wrap:       wrap;
      justify-content: space-between;
      gap:             0.5rem;
      margin-bottom:   var(--h-line);
    }

    .overview-list-item-text p {
      margin-bottom: 0;
    }
  }

  .overview-title {
    font-family: var(--f-mono);
    font-size:  var(--s-3xl);
    font-weight: 600;
    line-height: calc(2 * var(--h-line));
    padding-bottom: var(--h-line);
  }

  .overview-section-title {
    color:          var(--c-text-3);
    font-family:    var(--f-mono);
    font-size:      var(--s-s);
    font-weight:    300;
    letter-spacing: 0.1rem;
    margin-bottom:  var(--h-line);
    text-transform: uppercase;
  }
}

/* Home-specific styles */

.home-project-name {
  font-family:  var(--f-mono);
  font-weight:  500;
}

.home-project-tag {
  background:    var(--c-accent-dim);
  border:        1px solid var(--c-accent);
  border-radius: 8px;
  display:       inline-block;
  font-family:   var(--f-mono);
  font-size:     var(--s-xxs);
  font-weight:   500;
  padding:       0 calc(0.5 * var(--h-line));
}

.home-blog-year {
  align-items: baseline;
  display:     flex;

  .home-blog-year-num {
    color:       var(--c-text-3);
    flex-grow:   0;
    flex-shrink: 0;
    font-family: var(--f-mono);
    font-weight: 600;
    width:       6ch;
    line-height: calc(2 * var(--h-line));
  }

  .home-blog-year-items {
    flex: 1;
    margin: 0;

    li {
      border-top:  1px solid var(--c-line);
      display:     flex;
      gap:         2ch;
      /* line-height: var(--h-line) * 2); */
      padding:     calc(var(--h-line) * 0.5) 0;

      .home-blog-date {
        color:          var(--c-text-4);
        display:        block;
        flex-shrink:    0;
        font-family:    var(--f-mono);
        font-size:      var(--s-s);
        font-weight:    600;
        width:          6ch;
        text-transform: uppercase;
      }

      .home-blog-title {
        font-size: var(--s-l);
      }
    }
  }
}

/* About page styles */

.about-sub-header-meta {
  color:       var(--c-text-3);
  font-family: var(--f-mono);
  font-size:   var(--s-xs);
  font-weight: 300;
}

.about-sub-header-date {
  color:       var(--c-text-4);
  font-family: var(--f-mono);
  font-size:   var(--s-s);
  text-align:  right;
}

/* Blog-specific styles */

.blog-entry {
  
}

.blog-meta {
  color:          var(--c-text-4);
  display:        flex;
  font-family:    var(--f-mono);
  font-size:      var(--s-s);
  gap:            calc(0.5 * var(--h-line));
  margin-bottom:  var(--h-line);
  text-transform: uppercase;

  .blog-meta-sep { font-weight: 300 }
}

/* Prose sections - blogs etc. */

.prose {
  align-items:           start;
  display:               grid;
  column-gap:            var(--w-gap);
  font-size:             var(--s-l);
  row-gap:               var(--h-line);
  grid-template-columns: [main] var(--w-main) [side] var(--w-side) [side-end];

  & > * {
    grid-column:  main;
    margin-block: 0;
  }

  h1 {
    padding-bottom: var(--h-line);

    &:after {
      background: var(--c-accent);
      border-radius: 2px;
      content:       "";
      display:       block;
      height:        4px;
      margin-top:    calc(var(--h-line) - 4px);
      width:         8rem;
    }
  }
  
  a[href] {
    text-decoration:       underline;
    text-decoration-color: var(--c-accent);

    &:hover { color: var(--c-accent); }
  }

  figcaption {
    font-style: italic;
    text-align: center;
  }

  sup {
    font-size:      0.75em;
    line-height:    0;
    position:       relative;
    vertical-align: baseline;
    top:            -0.5em;
  }

  .wide {
    grid-column: main / side-end;

    figure {
      margin: var(--h-line) 0;
      width: 100%;

      img, svg { width: 100% !important; }

      figcaption { margin-top: var(--h-line); }
    }
  }

  .sidenote {
    clear:         right;
    color:         var(--c-text-4);
    float:         right;
    font-size:     var(--s-xs);
    margin-right:  calc(-1 * (var(--w-side) + var(--w-gap)));
    margin-bottom: calc(0.5 * var(--h-line));
    width:         var(--w-side);
    line-height:   calc(0.75 * var(--h-line));

    a[href] { text-decoration-color: inherit; }
  }
}

@media (max-width: 1088px) {
  header.site-header {
    gap: 0;

    .site-name { width: var(--w-page); }
    .site-nav { justify-content: flex-start; }
  }

  .overview {
    .overview-main { width: var(--w-page); }
    .overview-side { width: var(--w-page); }
  }

  .home-side { order: -1; }
}

  /* Below this the side notes drop inline. Roughly --page + padding. */
  /* --breakpoint: 60rem; */
  
/* .wrap { */
  /* max-width: var(--page); */
  /* margin-inline: auto; */
  /* padding-inline: var(--gutter); */
/* } */
 
/* /* ========================================================================== */
   /* 4. Prose grid — the 2/1 split */
   /* -------------------------------------------------------------------------- */
   /* Named lines: full | main | side */
 
   /* Narrow: side collapses onto main, so notes just flow inline. */
   /* Wide:   side becomes a real column and notes sit beside their paragraph. */
 
   /* Every child lands in `main` unless it opts out. A .sidenote declares only */
   /* its column, so grid auto-placement drops it into the first free row — */
   /* which is the row of the element it follows in the source. */
   /* ========================================================================== */
/* .prose { */
/* @media (width >= 62rem) { */
  /* .prose { */
    /* grid-template-columns: */
      /* [full-start] minmax(var(--gutter), 1fr) */
      /* [main-start] minmax(0, var(--measure)) */
      /* [main-end side-start] var(--side) */
      /* [side-end] minmax(var(--gutter), 1fr) */
      /* [full-end]; */
  /* } */
/* } */
 
/* --- Escape hatches ------------------------------------------------------ */
/* .prose > .wide { grid-column: main-start / side-end; }   /* text + note column */
/* .prose > .full { grid-column: full; }                    /* edge to edge */
 
/* --- Headings: extra air above, never on the first block ----------------- */
/* .prose > * + :is(h2, h3) { margin-block-start: 1.5rem; } */
 
/* .sidenote { */
  /* grid-column: side; */
  /* font-size: 0.875rem; */
  /* line-height: 1.5; */
  /* color: var(--muted); */
  /* border-inline-start: 2px solid var(--rule); */
  /* padding-inline-start: 0.875rem; */
/* } */
 
/* @media (width >= 62rem) { */
  /* .sidenote { */
    /* border-inline-start: none; */
    /* padding-inline-start: 0; */
  /* } */
/* } */