/* long-form.css */

/* 4 The elements of HTML */

dl, figcaption, footer, h1, h2, h3, h4, h5, h6, ol, p, table, ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* 4.1 The document element */
/* 4.1.1 The html element */

:root {
    --accent-color: black;
    --visited-color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent-color: white;
        --visited-color: white;
    }
}

html {
    font-family: Georgia, ui-serif, serif;
    font-size: 150%;
    font-optical-sizing: auto;
    line-height: 1.25;
    background-color: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: black;
        color: white;
    }
}

/* 4.2 Document metadata */
/* 4.2.1 The head element */
/* 4.2.2 The title element */
/* 4.2.3 The base element */
/* 4.2.4 The link element */
/* 4.2.5 The meta element */
/* 4.2.6 The style element */
/* 4.3 Sections */
/* 4.3.1 The body element */
/* 4.3.2 The article element */
/* 4.3.3 The section element */
/* 4.3.4 The nav element */
/* 4.3.5 The aside element */

aside, blockquote, figure, table {
    margin: 0 2ch;
    padding: 0;
}

aside {
    border-inline-start: 0.5ch solid var(--accent-color);
    padding-inline-start: 0.5ch;
}

/* aside { */
/*     font-family: Verdana, ui-sans-serif, sans-serif; */
/* } */

aside > :first-child::before {
    content: "Aside: ";
    color: var(--accent-color);
    font-weight: bold;
}

aside.note > :first-child::before {
    content: "Note: ";
}

aside.example > :first-child::before {
    content: "Example: ";
}

aside:not(.example) {
    font-size: 0.75rem;
}

@media (min-width: 80ch) {
    aside:not(.example), .pullquote {
        width: 18ch;
        float: right;
    }
    aside:not(.example) > :first-child,
    .pullquote > :first-child {
        margin-top: 0;
    }
    aside:not(.example) > :last-child,
    .pullquote > :last-child {
        margin-bottom: 0;
    }
}

/* 4.3.6 The h1, h2, h3, h4, h5, and h6 elements */

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-variant-numeric: lining-nums;
    color: var(--accent-color);
}

h1 {
    font-size: 2.75rem;
    font-stretch: condensed;
}

h1:first-child {
    margin-top: 0;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
    font-variant-caps: small-caps;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
    font-variant-caps: small-caps;
}

h6 {
    font-size: 1.25rem;
}

@media (max-width: 500px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 1rem; }
}

/* 4.3.7 The hgroup element */

main > hgroup:first-child > :first-child {
    margin-top: 0;
}

hgroup > p + :is(h1,h2,h3,h4,h5,h6), hgroup > :is(h1,h2,h3,h4,h5,h6):has(+ p) {
    line-height: 1;
}

hgroup > p:has(+ h1),
hgroup > p:has(+ h2),
hgroup > p:has(+ h3),
hgroup > p:has(+ h4),
hgroup > p:has(+ h5),
hgroup > p:has(+ h6),
hgroup > :is(h1,h2,h3,h4,h5,h6):has(+ p) {
    margin-bottom: 0;
}

hgroup > :is(h1,h2,h3,h4,h5,h6) + p, hgroup > p + :is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0;
}

hgroup > p:has(+ h1),
hgroup > p:has(+ h2),
hgroup > p:has(+ h3),
hgroup > p:has(+ h4),
hgroup > p:has(+ h5),
hgroup > p:has(+ h6) {
    margin-left: -1em;
}

hgroup > :is(h1,h2,h3,h4,h5,h6) + p {
    margin-left: 1em;
}

/* 4.3.8 The header element */

header {
    margin: 1rem;
    text-align: center;
}

/* 4.3.9 The footer element */

footer {
    text-align: center;
}

/* 4.3.10 The address element */

address, footer, header {
    font-style: italic;
}

h1 + .byline {
    margin-top: 0;
    text-indent: 3ch;
}
header > h1:has(+ .byline) {
    margin-bottom: 0;
}

/* 4.4 Grouping content */
/* 4.4.1 The p element */
/* 4.4.2 The hr element */

hr {
    border: 0;
    margin: 0;
    text-align: center;
    line-height: 1;
}

hr::after {
    content: "✻ ✻ ✻";
    font-size: 3em;
}

hr.fleuron::after {
    content: "❧";
}

/* 4.4.3 The pre element */

pre {
    word-break: break-all;
    overflow-wrap: break-word;
    overflow: scroll;
}

pre, code {
    font-family: ui-monospace, monospace;
}

/* 4.4.4 The blockquote element */

blockquote {
    font-style: italic;
}

blockquote, figcaption {
    font-size: 0.875rem;
}

.hero {
    max-width: 42rem;
}

blockquote.hero, .hero > blockquote {
    font-size: 1em;
}

@media (min-width: 80ch) {
    blockquote.hero, .hero > blockquote {
        font-size: 1.25em;
    }
}

/* 4.4.5 The ol element */
/* 4.4.6 The ul element */
/* 4.4.7 The menu element */
/* 4.4.8 The li element */
/* 4.4.9 The dl element */
/* 4.4.10 The dt element */
/* 4.4.11 The dd element */
/* 4.4.12 The figure element */
/* 4.4.13 The figcaption element */

figcaption {
    color: var(--accent-color);
}

blockquote + figcaption {
    text-align: right;
}

/* 4.4.14 The main element */

header + main {
    padding-top: 0;
}

@media (min-width: 80ch) {
    main, body > footer {
        max-width: 70ch;
        margin: 0 auto;
        padding: 1ch 1ch;
    }

    main > * {
        max-width: 28rem;
    }
    main > h1 {
        max-width: initial;
    }
}

/* 4.4.15 The div element */
/* 4.5 Text-level semantics */
/* 4.5.1 The a element */

#skipnav {
    display: block;
    position: absolute;
    top: -2em;
}

#skipnav:focus {
    position: static;
    top: auto;
}

a.permalink {
    text-decoration: none;
}

/* 4.5.2 The em element */

i, em {
    font-style: italic;
}

:lang(ja) i, :lang(ko) i, :lang(zh) i,
:lang(ja) em, :lang(ko) em, :lang(zh) em {
    text-emphasis: open dot;
    font-style: normal;
}

/* 4.5.3 The strong element */

b, strong {
    font-weight: 600;
}

:lang(ja) b, :lang(ko) b, :lang(zh) b,
:lang(ja) strong, :lang(ko) strong, :lang(zh) strong {
    text-emphasis: filled dot;
    font-weight: normal;
}

/* 4.5.4 The small element */
/* 4.5.5 The s element */
/* 4.5.6 The cite element */

cite.book {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* 4.5.7 The q element */
/* 4.5.8 The dfn element */
/* 4.5.9 The abbr element */
/* 4.5.10 The ruby element */
/* 4.5.11 The rt element */

:lang(zh-TW) rt {
    -webkit-ruby-position: inter-character;
    ruby-position: inter-character;
}

/* 4.5.12 The rp element */
/* 4.5.13 The data element */
/* 4.5.14 The time element */
/* 4.5.15 The code element */
/* 4.5.16 The var element */
/* 4.5.17 The samp element */
/* 4.5.18 The kbd element */
/* 4.5.19 The sub and sup elements */
/* 4.5.20 The i element */
/* 4.5.21 The b element */
/* 4.5.22 The u element */

:lang(zh) u { /* Chinese proper name mark */
    text-decoration: underline;
    text-underline-position: from-font;
}

/* 4.5.23 The mark element */

mark, ::target-text {
    background-color: var(--highlight-bg);
    color: var(--highlight-fg);
}

/* 4.5.24 The bdi element */
/* 4.5.25 The bdo element */
/* 4.5.26 The span element */
/* 4.5.27 The br element */
/* 4.5.28 The wbr element */
/* 4.6 Links */
/* 4.6.1 Introduction */
/* 4.6.2 Links created by a and area elements */
/* 4.6.3 API for a and area elements */
/* 4.6.4 Following hyperlinks */
/* 4.6.5 Downloading resources */
/* 4.6.5.1 Hyperlink auditing */
/* 4.6.6 Link types */
/* 4.6.6.1 Link type "alternate" */
/* 4.6.6.2 Link type "author" */
/* 4.6.6.3 Link type "bookmark" */
/* 4.6.6.4 Link type "canonical" */
/* 4.6.6.5 Link type "dns-prefetch" */
/* 4.6.6.6 Link type "external" */
/* 4.6.6.7 Link type "help" */
/* 4.6.6.8 Link type "icon" */
/* 4.6.6.9 Link type "license" */
/* 4.6.6.10 Link type "manifest" */
/* 4.6.6.11 Link type "modulepreload" */
/* 4.6.6.12 Link type "nofollow" */
/* 4.6.6.13 Link type "noopener" */
/* 4.6.6.14 Link type "noreferrer" */
/* 4.6.6.15 Link type "opener" */
/* 4.6.6.16 Link type "pingback" */
/* 4.6.6.17 Link type "preconnect" */
/* 4.6.6.18 Link type "prefetch" */
/* 4.6.6.19 Link type "preload" */
/* 4.6.6.20 Link type "prerender" */
/* 4.6.6.21 Link type "search" */
/* 4.6.6.22 Link type "stylesheet" */
/* 4.6.6.23 Link type "tag" */
/* 4.6.6.24 Sequential link types */
/* 4.6.6.24.1 Link type "next" */
/* 4.6.6.24.2 Link type "prev" */
/* 4.6.6.25 Other link types */
/* 4.7 Edits */
/* 4.7.1 The ins element */
/* 4.7.2 The del element */
/* 4.8 Embedded content */
/* 4.8.1 The picture element */
/* 4.8.2 The source element */
/* 4.8.3 The img element */
/* 4.8.5 The iframe element */
/* 4.8.6 The embed element */
/* 4.8.7 The object element */
/* 4.8.8 The param element */
/* 4.8.9 The video element */
/* 4.8.10 The audio element */
/* 4.8.11 The track element */
/* 4.8.12 Media elements */
/* 4.8.13 The map element */
/* 4.8.14 The area element */
/* 4.8.16 MathML */
/* 4.8.17 SVG */
/* 4.9 Tabular data */
/* 4.9.1 The table element */

table {
    table-layout: fixed;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

/* 4.9.2 The caption element */

caption {
    caption-side: top;
    border-bottom: none;
    font-weight: bold;
    color: var(--accent-color);
}

caption, td, th {
    padding: 0.25em;
}

/* 4.9.3 The colgroup element */
/* 4.9.4 The col element */
/* 4.9.5 The tbody element */
/* 4.9.6 The thead element */
/* 4.9.7 The tfoot element */
/* 4.9.8 The tr element */
/* 4.9.9 The td element */

td, th {
    vertical-align: top;
    border: 1px solid currentColor;
}

td {
    text-align: right;
}

/* 4.9.10 The th element */
/* 4.10 Forms */
/* 4.10.3 The form element */
/* 4.10.4 The label element */
/* 4.10.5 The input element */
/* 4.10.5.1 States of the type attribute */
/* 4.10.5.1.1 Hidden state (type=hidden) */
/* 4.10.5.1.2 Text (type=text) state and Search state (type=search) */
/* 4.10.5.1.3 Telephone state (type=tel) */
/* 4.10.5.1.4 URL state (type=url) */
/* 4.10.5.1.5 Email state (type=email) */
/* 4.10.5.1.6 Password state (type=password) */
/* 4.10.5.1.7 Date state (type=date) */
/* 4.10.5.1.8 Month state (type=month) */
/* 4.10.5.1.9 Week state (type=week) */
/* 4.10.5.1.10 Time state (type=time) */
/* 4.10.5.1.11 Local Date and Time state (type=datetime-local) */
/* 4.10.5.1.12 Number state (type=number) */
/* 4.10.5.1.13 Range state (type=range) */
/* 4.10.5.1.14 Color state (type=color) */
/* 4.10.5.1.15 Checkbox state (type=checkbox) */
/* 4.10.5.1.16 Radio Button state (type=radio) */
/* 4.10.5.1.17 File Upload state (type=file) */
/* 4.10.5.1.18 Submit Button state (type=submit) */
/* 4.10.5.1.19 Image Button state (type=image) */
/* 4.10.5.1.20 Reset Button state (type=reset) */
/* 4.10.5.1.21 Button state (type=button) */
/* 4.10.6 The button element */
/* 4.10.7 The select element */
/* 4.10.8 The datalist element */
/* 4.10.9 The optgroup element */
/* 4.10.10 The option element */
/* 4.10.11 The textarea element */
/* 4.10.12 The output element */
/* 4.10.13 The progress element */
/* 4.10.14 The meter element */
/* 4.10.15 The fieldset element */
/* 4.10.16 The legend element */
/* 4.11 Interactive elements */
/* 4.11.1 The details element */
/* 4.11.2 The summary element */
/* 4.11.4 The dialog element */
/* 4.12 Scripting */
/* 4.12.1 The script element */
/* 4.12.2 The noscript element */
/* 4.12.3 The template element */
/* 4.12.4 The slot element */
/* 4.12.5 The canvas element */
/* 4.13 Custom elements */
/* 4.14 Common idioms without dedicated elements */

/* End of article marker
 * <span class=halmos>∎</span>
 * <a href= class=halmos>∎</a>
 */
.halmos {
    color: var(--accent-color);
}
a.halmos {
    text-decoration: none;
}

/* Styling of TeX and LaTeX.
 * <span class=tex>T<sub>e</sub>X</span>
 * <span class=latex>L<sup>a</sup>T<sub>e</sub>X</span>
 */

.tex, .latex, .tex sub, .latex sub {
    font-size: 1em;
}

.tex sub, .latex sub, .latex sup {
    text-transform: uppercase;
}

.latex sub, .tex sub {
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.latex sup {
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

/* 4.14.1 Bread crumb navigation */
/* 4.14.2 Tag clouds */
/* 4.14.3 Conversations */
/* 4.14.4 Footnotes */

ul.references {
    padding-left: 0;
}
ul.references > li {
    list-style-type: none;
    text-indent: -2ch;
    margin-left: 2ch;
}
ul.references > li:target::after {
    color: var(--accent-color);
    content: "※";
}
ul.references cite {
    font-style: normal;
}
ul.references cite.book {
    font-style: italic;
    text-decoration: none;
}
a.citation {
    color: var(--accent-color);
    text-decoration: none;
}
aside.reference > :first-child::before {
    content: none;
}

/* 4.16 Matching HTML elements using selectors and CSS */
/* 4.16.3 Pseudo-classes */

:lang(ja), :lang(ko) {
    text-emphasis-position: over right;
}

:lang(zh) {
    text-emphasis-position: under right;
}

:link {
    color: var(--accent-color);
}

:visited {
    color: var(--visited-color);
}