/* default.css — the stylesheet used for most pages on my site */

@import "variables.css";
@import "base.css";
@import "patterns.css";
@import "meta.css";
@import "tweet.css";

/* Tunable parameters */

html {
    --column-width: 44rem;
    --quote-width: 44rem;
    --metadata-width: 32rem;
}

/* Fonts & Text */

h1, h2, h3, h4, h5, h6, hgroup:has(h1) > p {
    font-size: 1.125rem;
}

:is(h1, h2, h3, h4, h5, h6):lang(ja) {
  font-weight: inherit;
}

h2:lang(ja) {
  font-size: 2rem;
}

@media (min-width: 340px) {
    h1 {
        font-size: 1.875rem;
    }
    h2 {
        font-size: 1.625rem;
    }
    h3, hgroup:has(h1) > p {
        font-size: 1.375rem;
    }
}

blockquote, figcaption.snug {
    font-family: var(--serif-font-stack);
    font-weight: var(--serif-font-weight);
    font-style: italic;
}

h1 abbr[title=and],
h2 abbr[title=and] {
    font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", serif;
    font-style: italic;
    font-weight: normal;
    opacity: 0.75;

    /* Hack to prevent Baskerville Italic's ampersand getting cut off */
    display: inline-block;
    padding-inline-end: 0.1ch;
}

:is(h1, h2, h3, h4, h5, h6, figure.hero > figcaption) :link,
:is(h1, h2, h3, h4, h5, h6, figure.hero > figcaption) :visited {
    text-decoration-thickness: auto;
}

blockquote pre {
    font-style: normal;
}

figcaption.snug:lang(ja),
figcaption.snug:has(> :lang(ja)) {
    font-family: var(--page-font-stack);
    font-weight: var(--page-font-weight);
    font-style: normal;
}

blockquote :is(cite, em, i) {
    font-style: normal;
}

blockquote :is(cite, em, i) :is(cite, em, i) {
    font-style: italic;
}

blockquote :is(cite, em, i) :is(cite, em, i) :is(cite, em, i) {
    font-style: normal;
}

address {
    font-style: normal;
}
h1 + .byline {
    margin-top: 0;
    text-indent: 3ch;
}
h1:has(+ .byline) {
    margin-bottom: 0;
}

figure {
    text-align: center;
}

figure.listing, figure:has(> blockquote), figure:has(> pre) {
    text-align: left;
}

figure > blockquote + figcaption {
    text-align: right;
}

figure > blockquote + figcaption:last-child {
    margin-top: 1em;
}

figure > figcaption:has(+ blockquote) {
    text-align: left;
}

figure > figcaption:first-child:has(+ blockquote) {
    margin-bottom: 1em;
}

figure, figure img, figure video {
    max-width: 100%;
    width: 100%;
    height: auto;
}

figure > pre {
    margin-inline: 1ic;
}

.hero, figure#main {
    max-width: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

figure.hero:has(> blockquote) {
    font-family: var(--serif-font-stack);
    font-weight: var(--serif-font-weight);
    font-style: italic;
    padding-block: 0.5rem;
    max-width: calc(100% - 1ic);
}

figure.hero > blockquote {
    margin-block-start: 0.5ic;
    margin-inline: 0;
}

figure.hero > figcaption.inset {
    font-size: 0.5em;
}

@media (min-width: 800px) {
    figure.hero > figcaption.inset {
        font-size: 1em;
    }
    figure.hero:has(> blockquote) {
        font-size: 1.25rem;
        padding-inline: 2ic;
        max-width: calc(100% - 4ic);
    }
    figure.hero > blockquote {
        margin-inline: 1ic;
    }
}

@media (min-width: 1024px) {
    figure.hero:has(> blockquote) {
        font-size: 1.75rem;
    }
}

@media (min-width: 700px) {
    .inscribed {
        font-size: 2em;
    }
}

figure.hero > figcaption:has(+ blockquote),
figure.hero > blockquote + figcaption {
    margin-block: 0;
}

figure.hero > blockquote + figcaption {
    margin-inline-end: 4ic;
}

:has(> .inset),
:has(> .inscribed) {
    position: relative;
}

.inset, .inscribed {
    margin: 0;
    padding: 0.5em;
    position: absolute;
}

.inset {
    background: white;
    color: black;
}

.inscribed {
    font-family: var(--heading-font-stack);
    font-stretch: var(--heading-font-stretch);
    font-weight: var(--heading-font-weight);
}

.inscribed, .inscribed :link, .inscribed :visited {
    background: transparent;
    color: inherit;
    text-decoration: none;
}

figure > .inset:first-child {
    top: 0;
    left: 0;
}

figure > .inset:last-child {
    bottom: 0;
    right: 0;
}

figure > .inscribed:first-child {
    top: 0;
    left: 0;
    right: 0;
}

figure > .inscribed:last-child {
    bottom: 0;
    left: 0;
    right: 0;
}

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

html { counter-reset: update 1; }
ins {
    counter-increment: update;
    text-decoration: none;
}

p:has(> ins:only-child) {
    margin: -0.5rem auto;
    padding: 0.5rem 1ch;
    background-color: #efe;
}

@media (prefers-color-scheme: dark) {
    p:has(> ins:only-child) {
        background-color: #efe;
    }
}

p:has(> ins:only-child)::before {
    display: inline;
    font-family: var(--heading-font-stack);
    font-stretch: var(--heading-font-stretch);
    font-weight: var(--heading-font-weight);
    content: "Update: ";
}

p:has(> ins:only-child) + p:has(> ins:only-child)::before {
    content: "Update " counter(update) ": ";
}

article > :not(.hero):first-child,
main > :not(.hero):first-child {
    margin-top: 1rem;
}

html.draft :is(article, main) h1::before,
article.draft h1::before {
    content: "Draft: ";
    font-variant: small-caps;
}

dfn, legend {
    font-style: normal;
    font-weight: bold;
}

figcaption, h5, h6 {
    font-weight: inherit;
}

figure:has(> pre) > figcaption {
    font-weight: bold;
}

/* Layout */

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
}

article > *,
main > *,
footer > dl.metadata {
    max-width: var(--column-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

main > figure {
    padding: 0;
}

hgroup.quote > * {
    display: inline;
}

footer > dl.metadata {
    max-width: var(--metadata-width);
}

article > ol, article > ul,
main > ol, main > ul {
    padding-left: 8ch;
}

article > footer {
    text-align: center;
}

dl dl, dl ol, dl ul,
ol dl, ol ol, ol ul,
ul dl, ul ol, ul ul {
    margin: 0;
}

blockquote {
    margin: 0;
}

article > blockquote,
main > blockquote {
    max-width: var(--quote-width);
    margin: 0 auto;
    padding: 0.5rem 1rem;
}

blockquote {
    padding: 0.5rem 0;
}

figure > blockquote:first-child,
figure > figcaption + blockquote {
    padding-top: 0;
}

figure > blockquote:has(+ figcaption),
figure > blockquote:last-child {
    padding-bottom: 0;
}

figcaption.snug:first-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
figcaption.snug:last-child {
    margin-top: 0;
    padding-top: 0;
}

blockquote > * {
    margin: 0.5rem 4ch;
}

/* Site-wide header and footer */

body > header#masthead {
    max-width: none;
    margin: 0;
    padding: 0;
    padding-block: 0.5rem;
}

#masthead {
    justify-content: space-between;
    font-family: var(--heading-font-stack);
    font-stretch: var(--heading-font-stretch);
    font-weight: var(--heading-font-weight);
    font-size: 2em;
    display: flex;
    align-items: baseline;
    border-block-end: 1rem double var(--masthead-contrast);
}

#masthead:lang(ja) {
    font-size: 1.5em;
}

@media print {
    #masthead {
        font-size: 1.25em;
    }
}

#masthead, #skipnav:has(+ #masthead) {
    background-color: var(--masthead-color);
    color: var(--masthead-contrast);
}

#masthead > h1 {
    font-family: var(--brand-font-stack);
    font-stretch: var(--brand-font-stretch);
    font-style: var(--brand-font-style);
    font-weight: var(--brand-font-weight);
    font-size: 1em;
    padding: 0;
}

#masthead > h1,
#masthead > hgroup > h1 {
    margin: 0;
    margin-inline-start: 1rem;
}

#masthead > nav {
    margin: 0;
    margin-inline-end: 1rem;
}

#masthead > nav, #masthead > nav > ul {
    display: flex;
    align-items: baseline;
    gap: 1em;
    margin: 0;
    padding: 0;
}

#masthead > nav > ul > li {
    list-style-type: none;
}

#masthead > nav > ul > li:last-child {
    padding-inline-end: 1em;
}

#masthead [rel~=alternate] img {
    width: 1em;
    height: auto;
    aspect-ratio: 1;
    vertical-align: text-bottom;
}

@media (max-width: 475px) {
    #masthead > nav {
        display: none;
    }
}

@media (max-width: 750px) {
    #masthead > nav > ul > li:not(:first-child) {
        display: none;
    }
}

@media (max-width: 1150px) {
    #masthead > h1 > span {
        display: none;
    }
}

fieldset {
    border: none;
    margin: 1rem 0 0 0;
    padding: 0;
}
legend {
    margin: 0 0 1rem 0;
    padding: 0;
}
input[type=search] {
    -webkit-appearance: textfield;
    max-width: 10rem;
}
input[type=search]::-webkit-search-decoration {
    display: none;
}
input, button {
    font-size: 1rem;
    height: auto;
    border: 0;
    margin: 0;
    padding: 0 0.5ch;
}

body > footer {
    max-width: 100%;
    margin: 1rem 0 0 0;
    padding: rem 0 0 0;
    justify-content: space-around;
}

body > footer:empty {
    margin: 0;
    padding: 0;
}

body > footer > * {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    text-align: center;
}

body > header#masthead :link,
body > header#masthead :visited,
body > footer :link,
body > footer :visited {
    text-decoration: none;
}

/* Colors */

html {
    background: var(--page-color);
    color: var(--page-contrast);
    color-scheme: light dark;
}

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

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

#masthead > h1 :link,
#masthead > h1 :visited {
    color: inherit
}

#masthead > h1 {
    background: var(--brand-color);
    background-clip: text;
    color: transparent;
}

#masthead.theme-color-bleedthrough :link,
#masthead.theme-color-bleedthrough :visited {
    color: inherit;
}

input[type=search] {
    background-color: #eee;
    color: #000;
}

button {
    background-color: #ddd;
    color: #000;
}

@media (prefers-color-scheme: dark) {
    input[type=search] {
        background-color: #222;
        color: #fff;
    }

    button {
        background-color: #333;
        color: #fff;
    }
}