@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200';
@import 'https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap';
@import 'https://cdn.jsdelivr.net/npm/chiron-go-round-tc-webfont@1.0.8/css/vf.min.css';


@font-face {
  font-family: punc;
  src: url('/webfonts/punc_fw_alpha.woff2') format('woff2');
}

@font-face {
  font-family: kana;
  src: url('/webfonts/kana.woff2') format('woff2');
}

@font-face {
  font-family: Chubbo;
  src: url('/webfonts/Chubbo.woff2') format('woff2');
}

@font-face {
  font-family: Chubbo;
  src: url('/webfonts/Chubbo-Italic.woff2') format('woff2');
  font-style: italic;
}

.material-symbols-outlined {
  font-size: inherit;
}

/* preflight */
* {
  padding: 0;
  margin: 0;

  /* Reset border */
  box-sizing: border-box;
  border: 0 solid;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol, ul, menu { list-style: none; }


:root {
  --paper-colour: #e8d7aa;
  --foreground-colour: #584d35; /* TODO */
  --background-colour: #e8d08f;
  --border-colour: #b8b8b8;
  --accent-colour: #50422c;
  --quote-colour: #ebdeb9;
  --icon-colour: #584d35cc;
  --milk-colour: var(--background-colour);
  --unit-length: calc(30rem + 2 * (2rlh - 1rem));
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper-colour: #232323;
    --foreground-colour: #aaa;
    --background-colour: #1b1b1b;
    --border-colour: black;
    --accent-colour: #bfbfbf;
    --icon-colour: #aaaa;
    --milk-colour: var(--icon-colour);
    --quote-colour: #2e2e2e;
  }
}

html, body {
  font-size: 15px;
  line-height: 1.667;
}

body {
  /* Set locale to `zh-HK` to enable essential substitutions of puncs */
  font-family:
    punc,  /* Use features `chws`/`vchw` */
    kana,  /* Use features `palt`/`vpal` */
    Chubbo,  /* Latin */
    'Chiron GoRound TC WS', sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-display: block;
  text-align: justify;
  hanging-punctuation: first;

  /* Disable unintended font resizing on iOS */
  -webkit-text-size-adjust: 100%;

  color: var(--foreground-colour);
  background-color: var(--background-colour);

  padding: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;

  width: 100vw;
  overflow-x: hidden;

  font-feature-settings:
    "palt", "vpal";  /* Ideally `pkna` but Source Han doesn't support */
}

/* Only do PcS in Chrome (Safari has layout err) */
@supports (text-spacing-trim: normal) {
  body {
    font-feature-settings: "palt", "vpal", "chws", "vchw";
  }
}

a {
  font-weight: 550;
  color: var(--accent-colour);
  text-decoration: none;

  &, & > *:not(svg):not(code):not(i) {
    transition:
      background-color .3s ease-out,
      color .3s ease-out;

    border-radius: 0.2rem;
    cursor: none;
  }
}

a:hover, a:hover > *:not(svg):not(code):not(i), ::selection {
  color: var(--background-colour);
  background-color: var(--accent-colour);
}

ol, ul {
  list-style-position: inside;
}

ol { list-style-type: cjk-ideographic; }
ul { list-style-type: 'ー、'; }

code {
  font-family: 'Source Code Pro', monospace;
}

.tcy { text-combine-upright: all; }

/* Temporal fix for Chrome */
@supports (text-spacing-trim: normal) {
  .tcy {
    writing-mode: horizontal-tb;
    line-height: 1;
    text-indent: 0 !important;  /* `text-indent` somehow gets passed down unexpectedly */
  }
}

.paper, .post blockquote, .post pre {
  box-shadow: inset 0 1px 0 #fff6;
}

@media (prefers-color-scheme: dark) {
  .paper, .post blockquote, .post pre {
    box-shadow: inset 0 0 0 1px #fff2;
  }
}

.paper {
  a:hover, ::selection { color: var(--paper-colour); }

  /* Place link at the bottom right corner when hovering */
  &:hover .link { opacity: 0.5; }
  .link {
    opacity: 0;

    &:hover { opacity: 1; }
  }
  &:not(.shortie) .link { display: none; }

  position: relative;   /* -> */
  .link {
    position: absolute; /* <- */
    bottom: 0; right: 0;

    width: 1rem;
    line-height: 1;
    margin: calc(1rlh - 1rem);

    transition: opacity .3s ease-out;
  }

  /* Paper size */
  width: fit-content;
  &:not(.shortie) {
    width: var(--unit-length);
    writing-mode: vertical-rl;
  }
  &.single:not(.shortie) { width: calc(0.5rem + 28rlh + (2rlh - 1rem)); }

  margin: 0 auto;
  & + .paper { margin-top: calc(2rlh - 1rem); }

  background-color: var(--paper-colour);
  border: 0.75px solid var(--border-colour);
  border-radius: 0.5rem;

  &:not(.shortie) .post, .post blockquote {
    &> p:not(:first-of-type) {
      text-indent: 1rem;
    }
  }

  &.shortie .post {
    &> p + p,
    p + blockquote, blockquote + p,
    p + pre, pre + p,
    p + ol, ol + p,
    p + ul, ul + p {
      margin-block-start: 1rlh;
    }
  }

  &.shortie .post { width: 30rem; }
  &:not(.shortie) .post {
    width: 100%;
    height: 30rem;
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
  }

  .post {
    margin-inline: calc(2rlh - 1rem);
    padding-block:  calc(2rlh - 1rem - (0.5rlh - 0.5rem));

    h2 { margin-block-end: 1rlh; }

    blockquote, pre {
      background-color: var(--quote-colour);

      padding-inline: 1rem;
      padding-block:  calc(1rem - (0.5rlh - 0.5rem));

      &:last-child {
        margin-block-end: calc(0.5rlh - 0.5rem);
      }
    }

    blockquote, pre {
      border: 0.75px solid var(--border-colour);
      border-radius: 0.333rem;
    }

    figure {
      display: grid;
      img, figcaption {
        grid-row: 1;
        grid-column: 1;
      }

      img {
        width: 100%;
        height: auto;
        display: block;
      }

      figcaption {
        opacity: 1;
        transition:
          opacity .3s ease-out;

        &:hover {
          cursor: none;
          opacity: 0.5;
        }
      }
    }
  }

  pre {
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
  }
}

@supports (overscroll-behavior:contain) {
  .paper:not(.shortie) .post {
    mask:
      linear-gradient(90deg,  rgba(0, 0, 0, .2), black .333rem) left,
      linear-gradient(270deg, rgba(0, 0, 0, .2), black .333rem) right;
    mask-repeat: no-repeat;
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
}

/* header */

.icon {
  width: 45px;
  height: 45px;
  color: var(--icon-colour);
}

header {
  position: sticky;
  top: calc(-2rlh + 1rem + 0.5rlh - 0.5rem - 1rlh - 45px + 0.25rlh - 0.25rem);
  width: 100vw;
  margin-left: -0.5rem;
  z-index: 100;
  background-image: linear-gradient(
    to bottom,
    var(--background-colour) calc(2rlh - 1rem + 1rlh + 45px + 0.5rem),
    transparent
  );

  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--unit-length);

    .links {
      display: flex;
      gap: 1.333rem;

      a {
        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover {
          background-color: unset;
          color: unset;
        }

        .label {
          margin-top: calc(0.25rem - 0.25rlh);
        }
      }
    }
  }
}

header nav, #ū-ê-bô-ê {
  padding: calc(2rlh - 1rem - (0.5rlh - 0.5rem)) 0;
  margin: 0 auto;
}

#ū-ê-bô-ê {
  width: fit-content;

  article {
    margin-inline: calc(2rlh - 1rem);
    max-width: 30rem;
    p + p { margin-block-start: 1rlh; }
  }
}

/* Disable selection */
header, #ū-ê-bô-ê, .material-symbols-outlined { user-select: none; }

@media (max-width: 550px) {
  body {
    padding-bottom: 0.5rem;
  }

  .paper {
    width: 100%;

    &.shortie .post {
      width: auto;
      text-align: left;
    }

    &:not(.shortie), &.single:not(.shortie) {
      width: 100%;
    }
  }

  #ū-ê-bô-ê {
    text-align: left;
  }
}

@media (pointer: coarse), (hover: none) {
  .paper {
    &:not(.single) .link {
      opacity: 0.5;
    }
  }
}