/*
             ####   +#####
             +#### #######
               ##+-#++##-
         #####    #.-+    #####+
        #######    #-   +######
         #####-#       +#+.                  ┏┓   ┏┓•      •  ┓   
         ####-- #  .  --.+######       -     ┗┓   ┃┃┓┏┓┓┏┓┏┓  ┃ ┓┏
 #     +##+##-+#. ### +###+######     -      ┗┛•  ┗┻┗┗┛┗┻┗┫┗  ┗┛┗┻
  #    -######+    `      #######    --                   ┛       
   ##          -                   +#+
    ###########+- ###    ###########.
                      +      #####-          ascii art generated with
                                               - <asciiart.eu/image-to-ascii>
                                               - <patorjk.com/software/taag/>

+-------+
| ABOUT |
+-------+

This is the primary stylesheet for s.qiouyi.lu.
Coded from scratch by S. Qiouyi Lu unless otherwise noted.

           Base URL: <https://s.qiouyi.lu>
            Contact: <s@qiouyi.lu>

            Version: 1.3.2
Versioning standard: <https://semver.org>

       Last updated: 2025-05-20
            Changed: hide top button on print

==========================================
           TABLE OF CONTENTS
------------------------------------------
Type the search key into the "find" box
(ctrl + F or cmd + F) to jump to section.
==========================================
Section name                    Search key
------------------------------------------
1. UI ............................. sql-ui
   1.1 Assets ................. sql-assets
   1.2 Colors ................. sql-colors
   1.3 Typography ............... sql-type
   1.4 Normalize .............. sql-normal
   1.5 Letterhead ............... sql-head
   1.6 Content .................. sql-main
   1.7 Navigation Map ............ sql-nav
   1.8 Newsletter Signup ........ sql-news
   1.9 Tip Banner ................ sql-tip
  1.10 Footer ................... sql-foot
  1.11 Return to Top ........... sql-totop
2. UX ............................. sql-ux
   2.1 Skiplink ................. sql-skip
   2.2 Syntax highlighting .... sql-syntax
==========================================

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

88    88  888888
88    88    88
88    88    88
Y8b  d8P    88
 "Y88P"   888888       [sql-ui]

 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* ---------------------------------------------------------------------------------
   [sql-assets] ASSETS
   --------------------------------------------------------------------------------- */

/* Define assets */
:root {
  --letterhead: url('/assets/images/layout/cubes.png');
  --paper: url('/assets/images/layout/paper.png');
  --atlas: url('/assets/images/layout/topography.png');
  --frame: url('/assets/images/layout/frame.svg');
  --簽名: url('/assets/logos/lqy.svg');
}

@media (prefers-color-scheme: dark) {
  :root {
    --letterhead: url('/assets/images/layout/nami.png');
    --paper: url('/assets/images/layout/asfalt.png');
  }
}

/* Define reusable designs */
.framed {
  padding: 2rem;
  width: 100%;
  border-image-slice: 30% 30% 30% 30%;
  border-image-width: 4em 4em 4em 4em;
  border-image-outset: 0;
  border-image-repeat: round round;
  border-image-source: var(--frame);
  border-style: solid;
  border-color: var(--accent);
}

.spacer {
  display: inline-block;
  margin: 0 4px;
}

.flower::before {
  content: '\273F';
}

/* ---------------------------------------------------------------------------------
   [sql-colors] COLORS
   --------------------------------------------------------------------------------- */

:root {
  /* Define color variables */
  --赤壁: #690000;
  --吃墨紙: #efefef;
  --筆畫: #222;
  --安灰: #ccc;
  --云: #666;
  --鐵觀音: #333;
  --朙月光: #fff;
  --烏燈黑火: #000;

  /* accessibility color */
  --access-blue: #005983;

  /* Define outlines and borders */
  --solid: 4px solid;

  /* Set default colors */
  --canvas: var(--朙月光);
  --off-white: var(--吃墨紙);
  --high-contrast: var(--烏燈黑火);
  --midtone: var(--云);
  --accent: var(--赤壁);
  --subtle: var(--安灰);
  --borders: var(--安灰);
  --body-text: var(--鐵觀音);
}

/* reset text on print to black */
@media print {
  * {
    color: Black !important;
  }
}

/* Set dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: var(--烏燈黑火);
    --high-contrast: var(--朙月光);
    --midtone: var(--云);
    --subtle: var(--鐵觀音);
    --borders: var(--鐵觀音);
    --body-text: var(--安灰);
  }

  h1, h2, h3, h4, h5, h6 {
    --accent: var(--high-contrast);
  }

  li::marker, li::before {
    color: var(--midtone);
  }
}

/* Set default colors */
* {
  scrollbar-color: var(--midtone) transparent;
  transition: scrollbar-color 0.5s,
              background-color 0.5s,
              color 0.5s;
}

@media (prefers-reduced-motion) {
  * {
    transition: scrollbar-color 0.25s,
                background-color 0.25s,
                color 0.25s;
  }
}

*:focus, *:hover {
  scrollbar-color: var(--赤壁) transparent;
}

body {
  background-color: var(--canvas);
  color: var(--body-text);
}

button, .button {
  display: inline-block;
  background-color: var(--筆畫);
  color: var(--吃墨紙) !important;
  border-bottom: none !important;
  border: var(--outline) var(--borders);
  padding: 10px 20px;
  border-radius: 4px;
  font: 700 var(--font-size)/1.2 var(--sans-serif);
}

button:hover, button:focus, .button:hover, .button:focus {
  background-color: var(--accent) !important;
}

.cta {
  background-color: var(--accent) !important;
}

.cta:hover, .cta:focus {
  background-color: var(--筆畫);
}

:focus {
  outline: var(--solid) var(--accent);
  border-radius: 4px;
  text-decoration: none;
}

::selection, ::-moz-selection, mark {
  background-color: var(--赤壁);
  color: var(--朙月光);
}

.framed ::selection, .framed ::-moz-selection {
  background-color: var(--朙月光);
  color: var(--赤壁);
  opacity: 1;
}

.content mark {
  background-color: #69000025;
  font-weight: bold;
  color: var(--high-contrast);
  font-family: var(--sans-serif);
}

.content mark a {
  border-bottom-color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  .content mark {
    background-color: #69000075;
  }

  .content mark a {
    border-bottom-color: var(--body-text);
  }

  .content mark a:hover {
    border-bottom-color: var(--high-contrast);
  }
}

.content .note {
  font-family: var(--handwriting);
  font-style: unset;
  position: relative;
}

@media (prefers-color-scheme: dark) {
  #navigation :focus, #navigation a:hover {
    color: var(--high-contrast);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

::marker,
.content a, #navigation a {
  color: var(--accent);
}

.content a {
  border-bottom: 2px solid var(--subtle);
}

@media (prefers-color-scheme: dark) {
  .content a, #navigation a {
    border-bottom-color: var(--midtone);
  }
}

.content a:hover, #navigation a:hover,
.content a:focus, #navigation a:focus {
  background-color: #69000015;
  border-bottom-color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  .content a:hover, #navigation a:hover,
  .content a:focus, #navigation a:focus {
    background-color: var(--accent);
    color: var(--朙月光);
    border-bottom-color: var(--accent);
  }
}

/* Improve legibility in dark mode */
@media (prefers-color-scheme: dark) {
  .content a, #navigation a {
    color: var(--high-contrast);
  }
}

/* ---------------------------------------------------------------------------------
   [sql-type] TYPOGRAPHY
   --------------------------------------------------------------------------------- */

/* Load fonts */

 @font-face {
  font-family: 'Fraunces';
  src:  url('/assets/fonts/fraunces/72pt-semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: auto;
	font-fallback: serif;
  /*______________________________________________________________
    /\                                                            \
    \_|                                                           |
      |  license: SIL OFL v1.1                                    |
      |  <https://s.qiouyi.lu/assets/fonts/fraunces/license/>     |
      |                                                           |
      |   ________________________________________________________|__
      \_/___________________________________________________________/ */
}

@font-face {
  font-family: 'Fraunces';
  src:  url('/assets/fonts/fraunces/9pt-italic.ttf') format('truetype');
  font-style: italic;
  font-display: auto;
	font-fallback: serif;
  /*______________________________________________________________
    /\                                                            \
    \_|                                                           |
      |  license: SIL OFL v1.1                                    |
      |  <https://s.qiouyi.lu/assets/fonts/fraunces/license/>     |
      |                                                           |
      |   ________________________________________________________|__
      \_/___________________________________________________________/ */
}

@font-face {
  font-family: 'Bitter';
  src:  url('/assets/fonts/bitter/medium.ttf') format('truetype');
  font-weight: normal;
  font-display: auto;
	font-fallback: serif;
  /*______________________________________________________________
    /\                                                            \
    \_|                                                           |
      |  license: SIL OFL v1.1                                    |
      |  <https://s.qiouyi.lu/assets/fonts/bitter/license/>       |
      |                                                           |
      |   ________________________________________________________|__
      \_/___________________________________________________________/ */
}

@font-face {
  font-family: 'Bitter';
  src:  url('/assets/fonts/bitter/medium-italic.ttf') format('truetype');
  font-style: italic;
  font-display: auto;
	font-fallback: serif;
  /*______________________________________________________________
    /\                                                            \
    \_|                                                           |
      |  license: SIL OFL v1.1                                    |
      |  <https://s.qiouyi.lu/assets/fonts/bitter/license/>       |
      |                                                           |
      |   ________________________________________________________|__
      \_/___________________________________________________________/ */
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat/bold.ttf') format('truetype');
  font-weight: 700;
  font-display: auto;
	font-fallback: sans-serif;
  /*________________________________________________________________
    /\                                                              \
    \_|                                                             |
      |  license: SIL OFL v1.1                                      |
      |  <https://s.qiouyi.lu/assets/fonts/montserrat/license/>     |
      |                                                             |
      |   __________________________________________________________|__
      \_/_____________________________________________________________/ */
}

@font-face {
	font-family: 'Charis SIL';
	font-weight: 500;
	font-display: auto;
	font-fallback: serif;
	src: url('/assets/fonts/charis-sil/regular.woff2') format('woff2'),
		url('/assets/fonts/charis-sil/regular.woff') format('woff'),
    url('/assets/fonts/charis-sil/regular.ttf') format('truetype');
  /*________________________________________________________________
    /\                                                              \
    \_|                                                             |
      |  license: SIL OFL v1.1                                      |
      |  <https://s.qiouyi.lu/assets/fonts/charis-sil/license/>     |
      |                                                             |
      |   __________________________________________________________|__
      \_/_____________________________________________________________/ */
}

:root {
  /* Define reusable variables for fonts */
    --serif: 'Fraunces', serif;
    --slab-serif: 'Bitter', serif;
    --sans-serif: 'Montserrat', sans-serif;
    --ipa: 'Charis SIL', serif;
    --chinese: 'Noto Sans TC', serif;
    --uicons: 'uicons-bold-straight';
    --handwriting: 'Calligraffitti', serif;
    
  /* Define font size */
  /* Fluidly variable formula h/t Mike Foskett */
  /* <https://codepen.io/2kool2/pen/bxdzEJ> */
    --font-size: clamp(16px, calc(0.9rem + ((1vw - 0.2em) * 1)), 1.4rem);

  /* Define line height */
    --line-height: 1.65;

  /* Set font smoothing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
  /* Fix Safari bug with viewport units in calc() */
  /* h/t Mike Foskett <https://codepen.io/2kool2/pen/bxdzEJ> */
  min-height: 0vw;

  /* Set default font */
  font: 500 var(--font-size)/var(--line-height) var(--slab-serif);
}

:target {
  scroll-margin-top: 4rem;
}

/* Set default fonts per language */
:lang(ipa) {
  font-family: var(--ipa);
}

:lang(zh), :lang(jp) {
  font-family: var(--sans-serif);
  font-synthesis: none !important;
}

/* Set default link typography */
a {
  font-weight: 700;
}

#markdown-toc a {
  font-weight: 500;
}

/* Set default heading styles */
h1, h2, h3, h4, h5, h6 {
  --headers: var(--accent);
  --header-scale: 1;

  font-family: var(--serif);
  color: var(--headers);
  font-size: calc(var(--font-size) * var(--header-scale));
  line-height: 1.6;
}

.byline {
  --header-scale: 1.6;
}

.byline:focus-within {
  --accent: var(--赤壁);
}

h1 {
  --header-scale: 2;
}

@media only screen and (min-width: 768px) {
  h1 {
    --header-scale: 2.6;
  }
}

#navigation h2, #navigation-label {
  --header-scale: 1.4;
}

.content h2 {
  --header-scale: 2;
  width: max-content;
  max-width: 100%;
  color: var(--accent);
}

h3 {
  --header-scale: 1.4;
  font-family: var(--slab-serif);
}

.content h1, .content h2, .content h3 {
  margin: 2rem 0 1rem 0;
}

h4, h5, h6 {
  font-family: var(--sans-serif);
  color: var(--high-contrast);
  font-weight: 700;
  margin: 1rem 0;
}

p + h1[id], p + h2[id], p + h3[id] {
  margin-top: 4rem;
}

.content-body h1[id] + p, .content-body h2[id] + p, .content-body h3[id] + p {
  margin-top: calc(var(--font-size) * 1.6);
}

.header-description, #navigation .header-description {
  font-size: unset;
  font-style: italic;
}

.header-description, #navigation .header-description {
  margin: 0 0 2rem 0;
}

.content *:not(.page-title) hgroup {
  margin-bottom: 2rem;
}

.content *:not(.page-title) hgroup h2 {
  margin-bottom: 0;
}

/* Footnotes */

.footnotes {
  font-size: smaller;
}

.footnotes::before {
  content: '***';
  display: block;
  width: max-content;
  font-family: var(--serif);
  letter-spacing: 12px;
  color: var(--midtone);
  text-align: center;
  margin: 4rem auto 0 auto;
}

/* Scale icons */
.fi {
  font-size: smaller;
}

/* Set horizontal rule */
hr {
  margin: 4rem auto;
  width: 100%;
  height: 0;
  border: 2px solid var(--borders);
}

/* Set paragraph style */
p {
  margin-bottom: calc(var(--font-size) * 1.6);
}

p:last-of-type {
  margin: 0;
}

/* Set semantic styles */
address {
  margin: 2rem auto;
  text-align: center;
  font-weight: bold;
  font-style: normal;
}

abbr {
  text-decoration: none;
  border-bottom: 2px dotted var(--body-text);
}

.content rt {
  font-family: var(--ipa);
  font-size: calc(0.7 * var(--font-size));
}

cite:lang(zh),
cite:lang(jp) {
  font-style: normal;
}

cite:lang(zh)::before,
cite:lang(jp)::before {
  content: '『';
}

cite:lang(zh)::after,
cite:lang(jp)::after {
  content: '』';
}

cite:lang(zh).short::before,
cite:lang(zh).song::before,
cite:lang(zh) cite:lang(zh)::before {
  content: '〈';
}

cite:lang(zh).short::after,
cite:lang(zh).song::after,
cite:lang(zh) cite:lang(zh)::after {
  content: '〉';
}

cite:lang(zh-Hans)::before,
cite:lang(zh-Hans).song::before {
  content: '《';
}

cite:lang(zh-Hans)::after,
cite:lang(zh-Hans).song::after {
  content: '》';
}

cite:lang(zh-TW)::before, cite:lang(zh-TW)::after {
  display: none;
}

cite:lang(zh-TW) {
  text-decoration: wavy underline;
  text-decoration-color: var(--midtone);
}

code {
  background-color: var(--烏燈黑火);
  color: var(--green);
  padding: 0 4px;
}

code[class] {
  color: var(--云);
}

pre {
  width: 100%;
  max-width: 100%;
  /* h/t <https://css-tricks.com/snippets/css/make-pre-text-wrap/> */
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }

.content .license {
  color: var(--high-contrast);
  background-color: var(--canvas);
  font-size: smaller;
}

 pre code {
  width: 100%;
 }

del {
  color: var(--midtone);
}

ins {
  color: var(--high-contrast);
}

dfn {
  font-weight: bold;
  font-style: normal;
  font-family: var(--sans-serif);
}

dfn::before {
  content: '【';
}

dfn::after {
  content: '】';
}

.comprehension dfn {
  display: block;
  width: auto;
  text-decoration: underline;
  margin-bottom: 10px;
}

.comprehension dfn::before, .comprehension dfn::after {
  display: none;
}

kbd {
  display: inline-block;
  font-size: calc(0.5 * var(--font-size));
  background-color: var(--筆畫);
  color: var(--吃墨紙);
  padding: 4px 8px;
  border: 4px inset var(--烏燈黑火);
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
}

samp {
  font-size: smaller;
}

/* Set emphasis styles */
strong {
  font-family: var(--sans-serif);
}

/* Tooltips */
[title] {
  position: relative;
  display: inline;
  overflow-wrap: break-word;
}

span[title] {
  border-bottom: 2px dotted var(--body-text);
}

p [title] {
  display: inline;
}

[title]::after {
  display: none;
  padding: 4px;
  margin-right: 8px;
  margin-left: 8px;

  background-color: inherit;
  color: inherit;
  text-decoration: dotted underline;
  
  content: '\f804' ' ' attr(title);
  font: 500 italic calc(0.8 * var(--font-size))/var(--line-height) var(--uicons), var(--serif);
  letter-spacing: 0;
  text-transform: none;

  position: relative;
  bottom: 0;
}

abbr[title]:focus, span[title]:focus {
  outline: 0px;
  border-top: 2px solid var(--midtone);
  border-left: 2px solid var(--midtone);
  border-right: 2px solid var(--midtone);
}

abbr[title]::after {
  content: 'abbreviation for ' attr(title);
  background-color: transparent;
  color: var(--body-text);
  font: 500 italic 0.8rem/1.6 var(--slab-serif);
  text-decoration: none;
}

span[title]::after {
  text-decoration: none;
  content: attr(title);
}

[title]:focus::after {
  display: inline;
}

.return-to-top:focus::after {
  bottom: 70px;
}

.letterhead .byline a::after,
#page-title a::after {
  bottom: 8px;
}

/* Set reusable typography classes */
.caps {
  font-family: var(--sans-serif);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.smaller {
  font-size: smaller;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.left, .right {
  margin-left: 0;
  margin-right: 0;
}

/* Keep captions centered */
.left figcaption, .left caption,
.right figcaption, .right caption {
  text-align: center;
}

.centered {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.columns {
  column-count: 2;
  column-gap: 2rem;
}

@media only screen and (min-width: 768px) {
  .columns {
    column-count: 3;
    column-gap: 4rem;
  }
}

/* Style blockquotes */

blockquote:not(.twitter-tweet) {
  position: relative;
  font: 400 italic larger/1.5 var(--serif);
  margin: 2rem 1rem 3rem 1rem;
  border-left: 8px solid var(--accent);
  --padding: 2rem;
  padding: 0 var(--padding);
}

@media only screen and (min-width: 768px) {
  blockquote:not(.twitter-tweet) {
    margin: 2rem 4rem 3rem 4rem;
  }
}

blockquote a {
  color: currentColor;
}

blockquote strong {
  font-style: normal;
  background-color: transparent;
}

.content .alert, .content .notice, .content .citation {
  font: 500 var(--font-size)/var(--line-height) var(--slab-serif);
  border-radius: 15px;
  border: var(--solid) var(--midtone);
  color: var(--high-contrast);
  margin: 2rem auto;
  padding: 2rem;
}

.content .citation {
  background-color: var(--canvas);
  padding-left: calc(3rem + 10px);
  padding-bottom: calc(2rem - 10px);
  font-size: smaller;
}

.content .alert, .banner {
  background-color: var(--accent);
  color: var(--朙月光);
}

.content .alert::before, .content .citation::before, .content .citation::after {
  font: 400 2rem/1 var(--uicons);
  position: absolute;
}

.content .alert::before {
  content: '\f455';
  top: calc(50% - 1rem);
  left: 1rem;
}

.content .citation::before {
  font-size: 2rem;
  content: '\f211';
  top: -4px;
  color: var(--midtone);
  left: 1rem;
}

.content .citation::after {
  font: 700 16px/1 var(--sans-serif);
  text-transform: uppercase;
  content: 'Citation';
  top: 6px;
  color: var(--midtone);
  left: calc(3rem + 10px);
}

.content .alert {
  font: 700 var(--font-size)/1.6 var(--sans-serif);
  border-color: var(--high-contrast);
  padding: 2rem 2rem 2rem 4rem;
}

.content .alert a {
  border-bottom-color: var(--朙月光);
}

.content .notice {
  background-color: var(--off-white);
  border-color: var(--canvas);
}

@media (prefers-color-scheme: dark) {
  .content .notice {
    background-color: var(--borders);
  }
}

.banner {
  font-size: smaller;
  padding: 10px 20px;
  text-align: center;
  font-style: italic;
}

.banner p {
  font-size: smaller;
}

.banner a {
  border: none;
  text-decoration: underline;
}

.banner a:focus {
  outline: 2px solid var(--吃墨紙);
  text-decoration: none;
}

.content .public-domain {
  padding: 2rem 2rem 2rem calc(32px + 2rem);
}

.content .public-domain::before {
  content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%225.5 -3.5 64 64%22%3E %3Cpath fill=%22%23666666%22 d=%22M54.414 39.014c.915-1.828 1.372-4.114 1.372-5.943h-7.772l6.4 5.943zM53.5 17.071C48.471 7.93 35.671 5.186 26.986 11.586l5.485 5.485c5.943-4.571 14.172 0 14.629 6.858h8.229c0-2.743-.915-5.943-1.829-6.858-.914-1.828.914 1.829 0 0z%22/%3E %3Cpath fill=%22%23666666%22 d=%22M37.5-3.5c-17.829 0-32 14.171-32 32s14.171 32 32 32 32-14.171 32-32-14.171-32-32-32zm-27.429 32c0-5.486 1.829-10.514 4.572-14.629l6.4 6.4c-2.743 7.772-1.829 17.372 4.114 23.772 5.486 5.486 15.086 6.857 22.4 3.2l4.572 5.028c-4.115 2.743-9.143 4.115-14.172 4.115-15.543-.457-27.886-12.8-27.886-27.886zm17.829-.914 13.714 14.171c-4.114 1.372-8.685 0-11.428-3.657-1.829-3.2-2.286-7.314-2.286-10.514zM57.157 47.7l-38.4-38.857C23.33 3.814 30.186 1.07 37.5 1.07c15.086 0 27.429 12.343 27.429 27.429 0 7.314-3.2 14.171-7.772 19.2z%22/%3E %3C/svg%3E"); /* mark via Wikipedia */
  display: block;
  position: absolute;
  top: 2rem;
  left: 1rem;
}

.content .verse {
  font-style: normal;
  line-height: 1.5;
  text-indent: calc(var(--padding) * -1) !important;
  padding-left: calc(var(--padding) * 2) !important;
}

.verse p {
  font-size: smaller;
  margin: 0;
}

.content .verse .stanza {
  text-indent: 0;
  padding-left: 0;
  margin: 2rem 0 2rem -2rem;
}

/* Pullquotes */
.content .pull {
  width: 100%;
  margin: 2rem 4rem 2rem 0;
  background-color: var(--canvas);
  box-shadow: 0 8px #00000008;
  padding: 2rem;
  font: 400 larger/1.5 var(--serif);
}

@media only screen and (min-width: 768px) {
  .content .pull {
    width: 50%;
    float: left;
  }
}

@media only screen and (min-width: 1280px) {
  .content-body {
    width: 70%;
    max-width: 900px;
  }

  .content-body .pull {
    width: 60%;
    margin-left: -20%;
  }
}

/* Archive metadata */
.content-body.archive {
  display: flex;
  flex-flow: column;
}

.content-body.archive .metadata {
  font-size: calc(0.7 * var(--font-size));
}

@media only screen and (min-width: 1200px) {
  .content-body.archive {
    flex-flow: row-reverse;
    max-width: min(1200px,100%);
  }

  .content-body.archive .wrapper {
    width: min(calc(900px - 2rem),calc(100% - 300px - 2rem));
  }

  .content-body.archive .skip-to-metadata {
    display: none;
  }

  .content-body.archive .metadata {
    width: 300px;
    margin-right: 2rem;
  }
}

.archive.metadata .title {
  text-align: center;
}

/* CV styling */
.cv-return {
  background-color: var(--canvas);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 5px;
  font: var(--font-size) var(--sans-serif);
  display: inline-block;
  margin-bottom: 2rem;
}

.cv-return:hover {
  text-decoration: underline;
}

section.cv {
  --margin-scale: 1;
  background-color: var(--canvas);
  border: 2px solid var(--borders);
  padding: 1rem;
  margin: 2rem 0;
}

.cv.label {
  position: relative;
  top: -1.6rem;
  background-color: var(--赤壁);
  color: White;
  font: smaller var(--sans-serif);
  padding: 2px 8px;
  margin: 0 0 -1rem 0;
}

.cv.header {
  font-size: 1.4rem;
  font-style: italic;
  border-bottom: 2px dotted var(--borders);
}

.content-body .cv dl {
  margin: 0;
}

.plain {
  background-color: unset;
  color: currentColor;
}

.cv.cover {
  max-width: 100%;
}

.plain-permalink {
  font-family: monospace;
}

@media only screen and (min-width: 760px) {
  section.cv {
    margin: 2rem 0 4rem 0;
  }

  .cv.label {
    top: -2rem;
  }

  .cv.cover {
      margin: 0 0 1rem 1rem;
      float: right;
  }

  .cv.header {
      clear: both;
  }
}

/* Translations */
.content .translation {
  font: 500 var(--font-size)/var(--line-height) var(--slab-serif);
}

.content .translation::before {
  content: '\f5fa' ' ' attr(data-translated-from) ' ' '\2192' ' ' attr(data-translated-to);
  font-family: var(--uicons), var(--sans-serif);
  text-transform: uppercase;
  background-color: var(--accent);
  color: var(--朙月光);
  display: block;
  width: max-content;
  padding: 2px 10px 6px 10px;
  margin: 0 0 1rem -2rem;
}

/* Comprehension callouts */
.content .comprehension {
  border-left: none;
  background-color: LemonChiffon;
  color: DarkSlateGray;
  font: 500 italic var(--font-size)/1.4 var(--serif);
  width: 300px;
  position: relative;
  padding: 2rem;
  hyphens: manual;
}

.comprehension::after {
  content: '';
  display: block;
  background:
  /* linear gradient shape modified from design by Yuan Chuan */
  /* <https://yuanchuan.dev/gradient-shapes/> */
    linear-gradient(
      135deg, currentColor 50%, var(--canvas) 50%
    )
    50% / 50% 50% no-repeat;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: calc(-1rem + 2px);
  right: calc(-1rem + 2px);
}

@media only screen and (max-width: 767px) {
  .content .comprehension {
    margin: 2rem auto;
  }
}

/* Tweets */
.twitter-tweet-rendered {
  margin: 2rem auto 3rem auto !important;
}

/* Badges */
.label.newsletter {
  display: block;
  width: max-content;
  margin: 2rem auto 4rem auto;
  display: block;
  width: max-content;
  padding: 4px 16px;
  border-bottom: none;
  background-color: var(--accent);
  color: var(--朙月光);
}

.label.newsletter a {
  border-bottom: none;
  color: currentColor;
}

.page-title .metadata {
  text-align: center;
  font: 500 smaller/1.4 var(--slab-serif);
  margin: 2rem auto 4rem auto;
  opacity: 0.6;
}

.page-title .work-byline {
  text-align: center;
  margin: 0 auto 3rem auto;
  color: var(--吃墨紙);
  font: 700 var(--font-size)/1.25 var(--sans-serif);
}

.page-title .work-length {
  font: 500 smaller/1.25 var(--slab-serif);
  opacity: 0.8;
}

.page-title .metadata .pubdate, .page-title .metadata .updated {
  display: inline-block;
  margin: 0 auto 2rem auto;
}

.page-title .metadata .pubdate + .updated::before {
  content: '\273F';
  display: inline-block;
  font-style: normal;
  margin: 0 8px;
  opacity: 0.5;
}

/* Figures */
body {
  counter-reset: figure table;
}

.content figure:not(.table) figcaption {
  counter-increment: figure;
}

.content figure:not(.table) figcaption::before {
  content: 'Figure ' counter(figure) '. ';
  font-weight: bold;
  font-family: var(--serif);
  font-style: italic;
}

/* Tables */
table {
  --borders: var(--canvas);
  font-size: smaller;
  counter-increment: table;
  caption-side: bottom;
  border-collapse: collapse;
  border: var(--solid) var(--borders);
  overflow-x: scroll;
  font-variant-numeric: tabular-nums;
}

tfoot tr {
  --borders: var(--吃墨紙);
  border-top: var(--solid) var(--borders);
  background-color: var(--canvas);
  font-size: larger;
  font-family: var(--serif);
  font-style: italic;
  font-variant-numeric: default;
}

@media (prefers-color-scheme: dark) {
  tfoot tr {
    --borders: var(--筆畫);
  }
}

th, td {
  padding: 10px 20px;
}

th[scope="column"] {
  background-color: var(--赤壁);
  color: var(--吃墨紙);
}

tfoot th[scope="column"] {
  background-color: unset;
  color: unset;
}

tr {
  background: var(--canvas);
}

tr:nth-child(even) {
  background: #ffffff60;
}

@media (prefers-color-scheme: dark) {
  tr:nth-child(even) {
    background: #cccccc05;
  }
}

caption {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

caption::before {
  content: 'Table ' counter(table) '. ';
  font-weight: bold;
  font-family: var(--serif);
  font-style: italic;
}

/* ---------------------------------------------------------------------------------
   [sql-normal] NORMALIZE
   --------------------------------------------------------------------------------- */

/* Set box model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Restore white space to lists and style bullets */
ol, ul {
  margin: 4rem auto 4rem 2rem;
}

li {
  margin: calc(0.7 * var(--font-size)) 0 var(--font-size) min(calc(1 * var(--font-size), 5%));
  padding-left: min(var(--font-size),2%);
}

li ul, li ol {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Style unordered list bullets */

ul > li {
  list-style-type: '\273F';
}

/* Add parentheses to ordered list numbering for better readability */

@counter-style decimal-parentheses {
  system: extends decimal;
  prefix: '(';
  suffix: ') ';
}

.content ol {
  list-style: decimal-parentheses;
}

.content ol li::marker {
  font-weight: bold;
  font-family: var(--serif);
}

/* Nest ordered list numbering for better navigability */
/* h/t <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters#example_of_a_nested_counter> */
#markdown-toc ol {
  list-style-type: none;
  margin: 0;
}

#markdown-toc, .outline {
  counter-reset: section; /* Creates a new instance of the
                             section counter with each ol
                             element */
  list-style-type: none;
}

#markdown-toc li, .outline li {
  text-indent: -1.5rem;
}

#markdown-toc ol li {
  text-indent: -1.25rem;
}

ul#markdown-toc li {
  padding-left: 2rem;
}

ul#markdown-toc li::marker {
  content: '\f623'; /* link-alt */
  color: var(--midtone);
  font-family: var(--uicons);
  font-size: smaller;
}

#markdown-toc li::before, .outline li::before {
  counter-increment: section; /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") ". "; /* Combines the values of all instances
                                          of the section counter, separated
                                          by a period */
  text-align: right;
  display: inline-block;
  color: var(--accent);
  font-family: var(--serif);
  font-weight: bold;
  margin-right: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  ol#markdown-toc li::before, .outline li::before {
    color: var(--midtone);
  }
}

/* Separate footnote counters */

.content .footnotes ol {
  list-style-type: unset;
  counter-reset: footnotes;
  margin-left: 0;
}

.content .footnotes li {
  counter-increment: footnote;
}

.content .footnotes li::marker {
  content: '[' counter(footnote) ']';
}

/* Style rubric lists */

.content .rubric {
  display: block;
  background-color: var(--canvas);
  color: var(--body-text);
  padding: 1rem;
  margin: 2rem;
  border: var(--solid) var(--borders);
}

.content .rubric::before {
  content: attr(data-title);
  display: block;
  background-color: var(--accent);
  color: White;
  font: 700 var(--font-size)/var(--line-height) var(--sans-serif);
  padding: 1rem;
  margin: -1rem -1rem 2rem -1rem;
}

.content .rubric li::marker {
  content: '\f337';
  font-family: var(--uicons);
  font-size: smaller;
}

/* Style definition lists */
.content dl {
  margin: 2rem;
}

dt {
  font-weight: bold;
  font-family: var(--sans-serif);
}

dd {
  margin: 1rem 0 1rem 2rem;
}

#navigation dd {
  margin: 1rem 0;
}

@media only screen and (min-width: 768px) {
  #navigation dd {
    margin: 1rem 0 1rem 1rem;
  }
}

.header-description {
  margin: 0 0 2rem 0;
}

/* Set default figure types */
figure {
  margin: 2rem auto;
  text-align: center;
  width: max-content;
  max-width: 100%;
}

figure * {
  max-width: 100%;
}

figure:not(.table) {
  font-size: smaller;
}

figcaption {
  margin: 0 auto;
  text-align: center;
}

/* Style details */
details {
  margin: 0 0 1rem 0;
}

.content details + p {
  margin-top: 2rem;
}

summary {
  font-weight: bold;
  font-family: var(--sans-serif);
}

/*---------------------------------------------------------------------------*
 [sql-head]     LETTERHEAD
 *---------------------------------------------------------------------------*/

.letterhead {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 1rem;
  background-image: var(--letterhead);
  position: relative;
  z-index: 69;
 }

/* Logo */

.logo {
  --size: 100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.logo a {
  position: relative;
  display: block;
  width: max-content;
  height: max-content;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.logo .to-home {
  border-radius: 50%;
}

.logo picture {
  display: block;
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.logo img {
  border-radius: 50%;
  display: block;
  padding: 8px;
  margin: 0 auto;
  text-align: center;
}

.logo a:focus img {
  background-color: var(--朙月光);
}

.logo .byline {
  margin-top: -1rem;
}

.logo:focus-within .byline {
  margin-top: 0;
}

.byline a {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tagline {
  color: var(--midtone);
}

/* Top nav */

@media print {
  .topbar {
    display: none !important;
  }
}

.topbar {
  --whitespace-scale: 1;
  margin: 0 auto;
  padding: 1rem 2rem;
  position: relative;
}

.topbar .menu-link {
  display: inline-block;
  padding: calc(2px * var(--whitespace-scale)) calc(4px * var(--whitespace-scale));
  margin: 0;
  text-decoration: none;
  border-bottom: var(--solid) transparent;
}

.topbar .nav-icon {
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  .topbar .nav-icon {
    color: var(--midtone);
  }
}

.topbar .menu-link:hover {
  border-color: var(--赤壁);
}

.topbar .menu-link:active {
  border-bottom-color: transparent;
}

.topbar .menu-item + .menu-item::before {
  content: '\2022';
  color: var(--subtle);
  display: inline-block;
  margin: 0 calc(4px * var(--whitespace-scale));
}

@media only screen and (min-width: 768px) {
  .topbar {
    --whitespace-scale: 2;
  }
}

@media (prefers-color-scheme: dark) {
  .byline a, .topbar .menu-link {
    color: var(--安灰);
  }
}

/*---------------------------------------------------------------------------*
 [sql-main]       CONTENT
 *---------------------------------------------------------------------------*/

 /* Container */
.content {
  width: 100%;
  background-image: var(--paper);
  position: relative;
}

@media only screen and (min-width: 768px) {
  .content::before {
    top: 10px;
  }
}

/* Page title */
.page-title {
  background: var(--赤壁);
  text-align: center;
  margin: 0 auto;
  padding: 1rem;
  color: var(--吃墨紙);
  z-index: 69;
  position: relative;
}

.page-type {
  font: 500 italic var(--font-size)/1 var(--serif);
  margin: 1rem auto 2rem auto;
  opacity: 0.8;
}

#page-title {
  padding-top: 1rem;
  margin: 0 auto 1rem auto;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

@media only screen and (min-width: 768px) {
  #page-title {
    padding: 1rem 3rem;
  }
}

.page-title a, #page-title a {
  color: var(--吃墨紙);
  font-weight: unset;
  border: unset;
}

#page-title a:hover, #page-title a:active {
  background-color: transparent;
}

#page-title a:focus {
  background-color: transparent;
  outline-color: var(--吃墨紙);
}

.page-title .page-summary {
  margin-bottom: 0.8rem;
  padding: 0 0 1rem 0;
}

/* Content body */

.content-body {
  --whitespace-scale: 1;
  margin: 0 auto;
  padding:
    calc(3rem * var(--whitespace-scale)) 
    calc(1rem * var(--whitespace-scale)) 
    calc(4rem * var(--whitespace-scale)) 
    calc(1rem * var(--whitespace-scale));
  width: 100%;
  position: relative;
}

/* Table of contents */
#markdown-toc {
  color: var(--body-text);
  font-size: smaller;
  padding: 3rem 0 0 0;
  margin-bottom: 3rem;
  z-index: 69;
}

#markdown-toc ol, #markdown-toc ul {
  margin-top: 0.5rem;
}

.content .toc-anchor {
  display: block;
  position: sticky;
  top: 0;
  margin-bottom: -4rem;
  background: var(--paper);
  padding: 4px 0;
  border-bottom: var(--solid) var(--borders);
  z-index: 20;
}

@media (prefers-color-scheme: light) {
  .content .toc-anchor {
    --borders: #e7e7e7;
  }
}

.content .to-toc {
  border: none;
  padding: 4px 8px;
  background: var(--paper);
}

@media only screen and (max-width: 1599px) {
  #markdown-toc {
    margin-top: 2rem;
  }
}

#markdown-toc a, #markdown-toc ::marker {
  color: var(--high-contrast);  
}

#markdown-toc li {
  margin: 0 0 0.5rem 1rem;
  padding-left: 4px;
}

@media only screen and (min-width: 768px) {
  .content-body {
    --whitespace-scale: 1.5;
  }
}

@media only screen and (min-width: 1280px) {
  .content-body {
    --whitespace-scale: 2;
  }
}

@media only screen and (min-width: 1600px) {
  #markdown-toc:not(.inline), #markdown-toc:not(.inline) .toc-anchor {
    column-count: unset;
    width: 38%;
    float: right;
    padding: 0 2rem 2rem 2rem;
    height: 100vh;
    overflow: auto;
    color: var(--body-text);
    background: var(--paper);
    position: sticky;
    margin-right: -20vw;
    border-left: none;
  }

  .content .toc-anchor {
    top: 0;
    border-bottom: none;
    margin-bottom: unset;
    text-align: right;
    margin-right: -18vw !important;
  }

  .to-toc {
    margin: 0;
    padding: 0;
  }

  #markdown-toc {
    top: 3rem;
    margin-top: 3rem;
  }
}

/*---------------------------------------------------------------------------*
 [sql-nav]     NAVIGATION MAP
 *---------------------------------------------------------------------------*/

 @media print {
  .navigation {
    display: none !important;
  }
 }

/* Set row styling */
.navigation {
  clear: both;
  --whitespace-scale: 1;
  border-top: var(--solid) var(--borders);
  background: repeat fixed center / 400px var(--atlas) var(--borders);
  padding: calc(4rem * var(--whitespace-scale)) calc(10px * var(--whitespace-scale));
  position: relative;
  z-index: 69;
}

@media (prefers-color-scheme: dark) {
  .navigation {
    background-color: var(--canvas);
  }
}

/* Set row label style */
.navigation .label {
  margin: 0 auto;
  width: max-content;
  padding: 10px 40px;
  color: var(--high-contrast);
}

.navigation .label .fi {
  color: var(--midtone);
}

/* Return to top link */

#navigation-return, .content .skiplink {
  display: block;
  width: max-content;
  margin: 1rem auto;
  padding: 10px 1rem;
  border-radius: 50px;
  color: var(--朙月光);
  outline-color: var(--朙月光);
  text-indent: -9999px;
  font-weight: bold;
}

#navigation-return:focus, .content .skiplink:focus {
  text-indent: 0;
  outline: var(--朙月光) var(--solid);
  background-color: var(--access-blue);
  box-shadow: 0 0 10px var(--烏燈黑火);
}

/* Set borders */
.navigation .label, #navigation {
  background-color: var(--canvas);
  border: var(--solid) var(--subtle);
}

.navigation {
  border-color: var(--subtle);
}

@media (prefers-color-scheme: dark) {
  .navigation .label, #navigation, .navigation {
    border-color: var(--borders);
  }
}

/* Style map container */
#navigation {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  column-count: 2;
  column-gap: calc(2rem * var(--whitespace-scale));
  column-rule: var(--solid) var(--borders);
  font-size: smaller;
  padding: calc(2rem * var(--whitespace-scale))
           calc(10px * var(--whitespace-scale));
}

@media only screen and (min-width:768px) {
  #navigation {
    padding: calc(2rem * var(--whitespace-scale))
    calc(1rem * var(--whitespace-scale));
  }
}

#navigation .submenu {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -moz-page-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  margin-bottom: 2rem;
}

/* Set map typography */
#navigation h2, #navigation h3 {
  color: var(--high-contrast);
}

#navigation h2 .fi {
  color: var(--midtone);
}

#navigation h3 {
  margin: 2rem 0 1rem 0;
  color: var(--midtone);
}

#navigation dd {
  color: var(--body-text);
  font-size: smaller;
  margin-bottom: 1rem;
}

/* Assist navigation with indicator symbol on links */
#navigation :focus::after, #navigation a:hover::after {
  content: '\f5da';
  color: var(--midtone);
  font-family: var(--uicons);
  font-size: smaller;
  font-weight: normal;
  display: inline-block;
  margin: 0 0 0 4px;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  #navigation :focus::after, #navigation a:hover::after {
    color: var(--吃墨紙);
  }
}

/* Responsive adjustments for desktop */
@media only screen and (min-width: 1280px) {
  .navigation {
      --whitespace-scale: 2;
  }

  #navigation {
      max-width: 1280px;
      column-count: 3;
  }
}

@media only screen and (min-width: 1600px) {
  #navigation {
    column-count: 4;
    max-width: 1600px;
  }
}

/* ---------------------------------------------------------------------------------
 [sql-news] NEWSLETTER SIGNUP
 * --------------------------------------------------------------------------------- */

#navigation .signup-form {
  margin-left: 0;
}

.signup fieldset {
  border: var(--solid) var(--borders);
  padding: 1rem;
}

.signup legend, .signup input[type="submit"] {
  font: 700 calc(0.7 * var(--font-size))/1 var(--sans-serif);
}

.signup legend {
  background-color: var(--borders);
  padding: 4px 8px;
}

.signup fieldset:focus-within legend {
  background-color: var(--accent);
  color: var(--朙月光);
}

.signup input {
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  margin: 10px 0 0 0;
}

.signup input[type="email"], .signup input[type="text"] {
  background-color: var(--borders);
  color: var(--high-contrast);
  font-family: monospace;
  width: 100%;
  outline-color: var(--borders);
}

.signup input[type="email"]:hover,
.signup input[type="email"]:focus,
.signup input[type="text"]:hover,
.signup input[type="text"]:focus {
  background-color: var(--canvas);
  color: var(--body-text);
  outline-color: var(--accent);
  transition: outline-color 0.25s;
}

.signup input[type="email"]:hover,
.signup input[type="text"]:hover {
  outline: var(--solid) var(--borders);
}

.signup input[type="submit"] {
  background-color: var(--筆畫);
  color: var(--吃墨紙);
}

.signup input[type="submit"]:hover,
.signup input[type="submit"]:focus {
  background-color: var(--accent);
}

.signup .platform {
  margin-top: 1rem;
  font-size: 0.7rem;
  font-style: italic;
}

.signup .platform a {
  font-weight: normal;
  color: var(--midtone) !important;
}

#newsletter .signup .platform a {
  text-decoration: underline;
}

.signup .platform a:hover,
.signup .platform a:focus {
  background-color: transparent !important;
  color: var(--high-contrast) !important;
  text-decoration: none;
}

.signup .platform a::after {
  display: none !important;
}

.content .signup fieldset {
  background-color: var(--canvas);
  width: 60%;
  min-width: 300px;
  margin: 0 auto;
}

.content .newsletter-cta {
  font: 400 larger/var(--line-height) var(--serif);
  margin: 2rem auto;
  text-align: center;
}

/* ---------------------------------------------------------------------------------
 [sql-tip] TIP BANNER
 * --------------------------------------------------------------------------------- */

 .tip-banner {
  background-color: var(--accent);
  width: 100%;
  position: fixed;
  top: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 10px 0 0 0;
  border-bottom: 2px solid var(--borders);
}

.tip-cta {
  color: #fff;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  margin: 0 0 5px 0;
}

.tip-links {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

/**
* @bugfix Prevent webkit from removing list semantics
* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
* 1. Add a non-breaking space
* 2. Make sure it doesn't mess up the DOM flow
*/
.tip-links > li:before {
  content: "\200B"; /* 1 */
  position: absolute; /* 2 */
}

.tip-links > li {
display: inline-block;
}

.tip-label {
  /* hide visually but retain for screen readers */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.tip-link {
  display: block;
  height: 25px;
  width: 80px;
  padding: 0;
  margin: 0;
}

.tip-link:hover {
  background-color: #ffffff15;
}

.tip-link[title]::after {
  display: none !important;
}

.tip-patreon {
  width: 80px;
  background: center / contain no-repeat url('/assets/logos/patreon.svg');
}

.tip-kofi {
  width: 50px;
  background: center / contain no-repeat url('/assets/logos/kofi.svg');
}

.tip-paypal {
  width: 60px;
  background: center / contain no-repeat url('/assets/logos/paypal.svg');
}

.tip-venmo {
  width: 45px;
  background: center / contain no-repeat url('/assets/logos/venmo.png');
}

.tip-cashapp {
  width: 70px;
  background: center / contain no-repeat url('/assets/logos/cashapp.svg');
}

@media screen and (min-width: 900px) {
  .tip-banner {
      flex-flow: row;
      justify-content: space-between;
      padding: 0 1rem;
  }

  .tip-cta {
      font-size: 0.9rem;
      text-align: left;
  }

  .tip-links {
      margin: 6px 0 0 0;
      text-align: right;
  }

  .tip-link {
      height: 25px;
  }

  .tip-patreon {
      width: 90px;
  }

  .tip-kofi {
      width: 60px;
  }

  .tip-paypal {
      width: 70px;
  }

  .tip-venmo {
      width: 50px;
  }

  .tip-cashapp {
      width: 85px;
  }
}

@media screen and (min-width: 1200px) {
  .tip-banner {
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 8rem;
  }

  .tip-cta {
      font-size: 1rem;
  }

  .tip-links {
      margin: 10px 0 0 0;
  }

  .tip-link {
      height: 30px;
  }
}

/*---------------------------------------------------------------------------*
 [sql-foot]     FOOTER
 *---------------------------------------------------------------------------*/

.site-copyright {
  font: 500 calc(0.7 * var(--font-size))/var(--line-height) var(--slab-serif);
  background-color: var(--赤壁);
  color: var(--吃墨紙);
  padding: 2rem 80px 1rem 1rem;

  display: flex;
  flex-flow: row;
}

@media only screen and (max-width: 400px) {
  .site-copyright {
    flex-flow: column;
  }
}

.site-copyright .flower {
  opacity: 0.5;
}

.site-copyright p {
  margin-bottom: 1rem;
}

.site-copyright a {
  font-weight: normal;
  text-decoration: none;
  border-bottom: 2px solid #ffffff40;
  outline-width: 1px;
  outline-color: currentColor;
}

.site-copyright a:hover {
  border-bottom-color: #ffffff90;
}

.site-copyright a:focus, .site-copyright a:active,
.site-copyright .logo a {
  border-bottom-color: transparent;
}

.site-copyright strong {
  background-color: transparent;
  font-size: larger;
}

.site-copyright .logo {
  --size: 70px;
  margin-right: 2rem;
}

@media only screen and (min-width: 768px) {
  .site-copyright {
    padding: 4rem 80px 2rem 80px;
  }
  
  .site-copyright .logo {
    margin-right: 4rem;
  }
}

@media only screen and (min-width: 1280px) {
  .site-copyright {
    padding: 4rem 20% 2rem 20%;
  }
}

.site-copyright .logo .byline {
  margin-top: 10px;
}

.site-copyright .logo img {
  background-color: var(--吃墨紙);
  padding: 8px;
  margin: 0 auto;
}

.site-copyright .byline,
.site-copyright .byline a,
.site-copyright .tagline {
  color: var(--朙月光);
}

/*---------------------------------------------------------------------------*
 [sql-totop]     RETURN TO TOP BUTTON
 *---------------------------------------------------------------------------*/

 @media print {
  .to-top, .return-to-top {
    display: none !important;
  }
 }

.to-top {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-items: center;
  text-align: center;
  width: max-content;
  height: 2rem;
  position: fixed;
  z-index: 100;
  bottom: 15px;
  right: 10px;
  background-color: transparent;
}

.return-to-top {
  text-decoration: none;
  font-size: calc(0.6 * var(--font-size));
  line-height: 1;
  color: var(--high-contrast);
  background: var(--paper);
  box-shadow: 0 0 10px #00000025;
  padding: 5px;
  border-radius: 4px;
}

.return-to-top .label {
  display: block;
}

.return-to-top:hover, .return-to-top:focus {
  background: var(--赤壁);
  color: var(--吃墨紙);
  outline-color: var(--朙月光);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

88    88  88   88
88    88   88 88
88    88    888
Y8b  d8P   88 88
 "Y88P"   88   88      [sql-ux]

 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*---------------------------------------------------------------------------*
 [sql-skip]    SKIPLINK
               Derived from "Accessible skip-to-content link for desktop and
               mobile" by Mike Foskett <https://codepen.io/2kool2/pen/bxdzEJ>
 *---------------------------------------------------------------------------*/

 .skip-link {
  position: absolute;
  padding: 10px 1.2rem;
  color: var(--朙月光);
  background-color: var(--筆畫);
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  width: auto;
  text-align: center;
  transform: translate3d(0, -9999px, 0);
  transition: transform .3s ease-out;
  z-index: 500;
}

.skip-link:focus {
  transform: translate3d(10px, 10px, 0);
  outline: var(--朙月光) var(--solid);
  background-color: var(--access-blue);
  box-shadow: 0 0 10px var(--烏燈黑火);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

@media print {
  .skip-link {
    display: none;
  }
}

/*---------------------------------------------------------------------------*
 [sql-syntax]    SYNTAX HIGHLIGHTING
                 Designed to work with Rouge syntax highlighter.
 *---------------------------------------------------------------------------*/

pre, code, .tags {
  --black: #000;
  --gray: #999;
  --red: #e21;
  --dark-orange: #a50;
  --orange: #c60;
  --yellow-orange: #d90;
  --yellow-green: #8c5;
  --green: #6a0;
  --blue: #09c;
}

pre {
  background-color: var(--black);
  color: var(--gray);
  font-size: smaller;
  margin: 0 auto 2rem auto;
}

pre code {
  color: var(--gray) !important;
}

pre .c /* comment */ {
  color: var(--dark-orange);
  font-style: italic;
}

pre .nv /* text, name */ {
  color: var(--gray);
}

pre .p /* punctuation */,
pre .s /* string */,
pre .nb,
pre .k /* command */ {
  color: var(--blue);
}

pre .nt /* tag */,
.tags li {
  color: var(--green);
}

pre .nd /* selector */,
pre .s1 {
  color: var(--yellow-green);
}

pre .nc /* class */ {
  color: var(--orange);
}

pre .nl,
pre .na /* attribute */ {
  color: var(--yellow-orange);
}

pre .n /* string */ {
  color: var(--blue);
}

pre .o /* operator, brackets */ {
  color: var(--orange);
}

pre .m /* integer */ {
  color: var(--orange);
}