/*===Workbench===*/
html {
    font-size: 16px; /*定义 1rem*/
    line-height: var(--text-l);
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
}

body {
    margin: 0;
    font-family: var(--font-f-base);
    font-size: var(--font-s-l);
    color: var(--text-c);
    background-color: var(--bg-c);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*===Stock: Frame===*/
header {
    position: sticky;
    top: 0;
    z-index: 100; /*层级设定*/
    background-color: var(--bg-c-elevate);
    border-bottom: var(--border-l) var(--border-c);
}
main {
    display: block;
} /* to be confirmed */

footer {
    display: block;
    border-top: var(--border-l) var(--border-c);
} /* to be confirmed */

section {
    display: block;
} /* to be confirmed */

nav {
    display: block;
} /* to be confirmed */

article {
    display: block;
} /* to be confirmed */

aside {
    display: block;
} /* to be confirmed */

/*===Stock: Plate===*/
/*title*/
h1,
h2,
h3,
h4 {
    color: var(--text-c-title);
    font-family: var(--font-f-head);
    font-weight: var(--font-w-bold);
}

h1 {
    margin-top: var(--gap-8);
    font-size: var(--font-s-3xl);
}
h2 {
    margin-top: var(--gap-6);
    font-size: var(--font-s-2xl);
}
h3 {
    font-size: var(--font-s-xl);
}
h4 {
    font-size: var(--font-s-l);
}

:is(h1, h2, h3, h4) + :is(h1, h2, h3, h4) {
    margin-top: var(--gap-2);
}

/*paragraph*/
p {
    margin-bottom: var(--gap-4);
    text-align: justify;
    hyphens: auto;
    font-family: var(--font-f-base);
    font-weight: var(--font-w-normal);
    font-size: var(--font-s-l);
    color: var(--text-c);
}

strong,
b {
    font-weight: var(--font-w-bold);
}

em,
i {
    font-style: italic;
}

small {
    font-size: var(--text-s-s);
}

mark {
    border-radius: var(--text-r);
    padding: 0.1em 0.2em;
    background-color: var(--text-cl-highlight);
}

/*code*/
code,
kbd,
samp,
pre {
    background-color: var(--bg-c-descend);
    font-family: var(--font-f-code);
    font-weight: var(--font-w-normal);
}

pre {
    margin: var(--gap-4) 0;
    padding: var(--gap-4);
    border-radius: var(--border-r);
    line-height: var(--text-l-tight);
    font-size: var(--font-s-s);
    overflow-x: auto;
}

code,
kbd,
samp {
    border-radius: var(--text-r);
    padding: 0.1em 0.2em;
    color: var(--text-c-accent); /*颜色未来可改*/
}

/*quote*/
blockquote {
    margin: var(--gap-4) 0;
    margin-left: var(--gap-3);
    border-left: var(--border-l-strong) var(--text-c-accent);
    padding-left: var(--gap-3);
    font-style: italic;
    color: var(--text-c);
    text-decoration: underline var(--text-dl-wavy) var(--text-c-accent);
    text-underline-offset: 0.2em;
} /*margin-left和padding-left都正好取list的padding的一半，使之与list标记和文字都几乎对齐。*/

/*list*/
ul,
ol {
    margin: var(--gap-4) 0;
    padding-left: var(--gap-6);
    font-size: var(--font-s-l);
}

ol {
    list-style: decimal;
}

ul {
    list-style: disc;
}

li {
    margin-bottom: var(--gap-1);
}

li::marker {
    color: var(--text-c-accent);
}

/*media*/
img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

video,
iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

video.verticle,
iframe.verticle {
    display: block;
    width: 75%;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
}

figure {
    margin: var(--gap-4) 0;
    text-align: center;
}

figcaption {
    margin-top: var(--gap-1);
    font-size: var(--font-s-s);
    color: var(--text-c);
    transition: var(--transition-all);
}

figtitle {
    display: block;
    margin-bottom: var(--gap-1);
    font-size: var(--font-s-l);
    color: var(--text-c-title);
    transition: var(--transition-all);
}

figure:hover figcaption {
    color: var(--text-c-hover);
}

figure:hover figtitle {
    color: var(--text-c-hover);
}

/*table*/
table {
    width: 100%;
    margin: var(--gap-4) 0;
    border-collapse: collapse;
}

th,
td {
    padding: var(--gap-2) var(--gap-3);
    border: var(--border-l) var(--border-c);
    font-size: var(--font-s-l);
    text-align: left;
}

th {
    background-color: var(--bg-c-descend);
    font-weight: var(--font-w-semibold);
    color: var(--text-c-accent);
}

/*自定义元素 <conlang>*/
conlang {
    font-family: var(--font-f-conlang);
    word-break: break-all;
}

h1 conlang,
h2 conlang,
h3 conlang,
h4 conlang {
    font-weight: var(--font-w-bold);
}

p conlang {
    font-weight: var(--font-w-normal);
    font-size: var(--font-s-xl);
}
blockquote conlang {
    font-style: normal;
    font-weight: var(--font-w-bold);
    font-size: var(--font-s-3xl);
}

/*自定义元素 <cuneiform>*/
cuneiform {
    font-family: var(--font-f-cuneiform);
    word-break: break-all;
}
cuneiform.ob {
    font-family: var(--font-f-cuneiform-ob);
}
cuneiform.na {
    font-family: var(--font-f-cuneiform-na);
}

h1 cuneiform,
h2 cuneiform,
h3 cuneiform,
h4 cuneiform {
    font-weight: var(--font-w-bold);
}

p cuneiform {
    font-weight: var(--font-w-normal);
    font-size: var(--font-s-xl);
}
blockquote cuneiform {
    font-style: normal;
    font-weight: var(--font-w-bold);
    font-size: var(--font-s-3xl);
}

/*===Stock: Handle===*/
a {
    color: var(--text-c-accent);
    text-decoration: none;
    transition: var(--transition-all);
}

a:hover {
    color: var(--text-c-hover);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

a[href]:hover::after {
    content: attr(href);
    position: fixed;
    top: var(--gap-2);
    right: var(--gap-2);
    padding: var(--gap-4-3) var(--gap-2);
    font-family: var(--font-f-code);
    font-size: var(--font-s-l);
    color: var(--gray-100);
    background-color: var(--text-c-hover);
    border-radius: var(--radius-4);
    white-space: nowrap;
    pointer-events: none;
    z-index: 999;
    box-shadow: var(--shadow-light);
}

/*form*/
input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    cursor: pointer;
}

/*highlight*/
::selection {
    background-color: var(--highlight-cl);
    color: var(--text-c-hover);
}
:target {
    background-color: var(--highlight-cl);
    outline: var(--border-l-hover) var(--text-c-hover);
    outline-offset: var(--text-r);
}

/*===Stock: Decoration===*/
/*divider*/
hr {
    margin: var(--gap-4) auto;
    width: 80%;
    border: none;
    border-top: var(--border-l-dash) var(--border-c);
    opacity: 0.8;
}