/* Fucina degli Angeli: Every Layout primitives, set up in the templates.
   After Kenya Hara: one face, one weight, order by size and space, no
   effects. The works bring the colour, on white; no dark scheme, so the
   browser draws its own parts light too (color-scheme), and the white
   is set with the black, never left to a reader's default */

:root {
    color-scheme: light;

    --measure: 60ch;
    --leading: 1.6;

    --color-text: #111;
    --color-muted: #666;
    --color-line: #e5e5e5;
    --color-bg: #fff;

    /* the modular scale: step n is the ratio to the power n. Space keeps
       three steps between its levels, so the eye tells them apart: s8
       between the parts of a page, s5 between groups, s2 between items,
       s-1 from a name to what it names. The two large ones are white,
       and white is a share of the screen: on a short one (a phone held
       sideways) they are 7% and 12% of its height, in the same ratio,
       so the page is not white alone */
    --ratio: 1.2;
    --s-5: calc(1rem * pow(var(--ratio), -5));
    --s-3: calc(1rem * pow(var(--ratio), -3));
    --s-1: calc(1rem * pow(var(--ratio), -1));
    --s0: 1rem;
    --s1: calc(1rem * var(--ratio));
    --s2: calc(1rem * pow(var(--ratio), 2));
    --s3: calc(1rem * pow(var(--ratio), 3));
    --s5: min(1rem * pow(var(--ratio), 5), 7svh);
    --s8: min(1rem * pow(var(--ratio), 8), 12svh);

    /* a work among other pages (.thumb), and the least a picture is in a
       page: three fill the measure, two the narrowest main (cqi) */
    --thumb: min((var(--measure) - 2 * var(--s2)) / 3, 50cqi - var(--s2) / 2);
}

/* set on a primitive, not passed down to the ones inside it */
@property --space { syntax: "*"; inherits: false; }
@property --justify { syntax: "*"; inherits: false; }
@property --align { syntax: "*"; inherits: false; }

/* old browsers: the last ones of the systems that take no newer one,
   Chrome 109 (Windows 7 and 8) and 119 (Android 7), Firefox 115 (the
   same Windows, macOS to 10.14), Safari 15 (macOS 10.15, iPadOS 15).
   Each lacks one of three things without which the page has no spaces
   or sizes; here is what it reads instead. What else they lack only
   leaves a detail out. When they are gone, so is this, to its end */

/* no pow(): the steps as numbers, those of a ratio of 1.2 */
@supports not (width: calc(1px * pow(2, 2))) {
    :root {
        --s-5: 0.402rem;
        --s-3: 0.579rem;
        --s-1: 0.833rem;
        --s2: 1.44rem;
        --s3: 1.728rem;
        --s5: min(2.488rem, 7svh);
        --s8: min(4.3rem, 12svh);
    }
}

/* no cqi: where main is narrower than the measure, it is the screen
   less the body's two gutters */
@supports not (width: 1cqi) {
    :root { --thumb: min((var(--measure) - 2 * var(--s2)) / 3, 50vw - 1.5 * var(--s2)); }
}

/* no @property: what a primitive is told is taken back from all it
   holds; a rule or a style of their own tells them again */
* { --space: initial; --justify: initial; --align: initial; }

/* end of old browsers */

/* Ysabeau: a file holds every weight (the bold is for soffio's *bold*,
   which a text may use); the second of each style has the letters of
   the other European languages (ț), and only a page with one of them
   fetches it */
@font-face { font-family: 'Ysabeau'; src: url('/static/fonts/ysabeau-latin.woff2') format('woff2'); font-weight: 1 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Ysabeau'; src: url('/static/fonts/ysabeau-latin-ext.woff2') format('woff2'); font-weight: 1 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Ysabeau'; src: url('/static/fonts/ysabeau-italic-latin.woff2') format('woff2'); font-weight: 1 1000; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Ysabeau'; src: url('/static/fonts/ysabeau-italic-latin-ext.woff2') format('woff2'); font-weight: 1 1000; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* reset, as Every Layout's: a box's size includes its padding */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
}

/* a work is seen whole, and in its shape: where the screen's height
   cuts its box, the picture is contained in it, never stretched */
img {
    display: block;
    max-inline-size: 100%;
    max-block-size: 80svh;
    block-size: auto;
    object-fit: contain;
}

ul[role="list"] {
    list-style: none;
    padding: 0;
}

/* type: one face, one weight; size and space make the order. The scale
   grows with the screen, so the page keeps its proportions, and does not
   move when it grows a scroll bar. Headings go down to h6, as
   soffio's sections do; lines wrap pretty where the browser can */
html {
    font-size: clamp(1rem, 0.8rem + 0.4vi, 1.5rem);
    font-family: 'Ysabeau', sans-serif;
    /* Ysabeau's own figures are old-style: a date wants them all one height */
    font-variant-numeric: lining-nums;
    line-height: var(--leading);
    color: var(--color-text);
    background-color: var(--color-bg);
    scrollbar-gutter: stable;
}

h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--s3); }
h2 { font-size: var(--s2); }
h3 { font-size: var(--s1); }
h4, h5, h6 { font-size: var(--s0); }
p { text-wrap: pretty; }
hgroup p { color: var(--color-muted); }
nav, figcaption, .meta { font-size: var(--s-1); color: var(--color-muted); font-variant-numeric: lining-nums tabular-nums; }
[role="doc-endnotes"] { font-size: var(--s-1); }
::selection { background-color: var(--color-line); }

a {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

/* a link in a text is underlined, in grey, so many links leave the text
   quiet; the pointer makes it as dark as the words. Elsewhere a link's
   place says it, and the pointer underlines only the words that lead: a
   title, not its whole row. A text is soffio's sections, or a
   template's own words, as the 404's (.text) */
:is(section, .text) a { text-decoration-line: underline; text-decoration-color: var(--color-muted); }
:is(section, .text) a:hover { text-decoration-color: currentColor; }
:is(nav, footer, hgroup, .rule, .meta, .ticker) a:hover, [role="list"] a:hover h3 { text-decoration-line: underline; }
/* a note's number is a link, not underlined, and does not part the lines */
a:is([role="doc-noteref"], [role="doc-backlink"]) { text-decoration-line: none; }
sup { line-height: 0; }
a:focus-visible { outline: 1px solid; outline-offset: 3px; }
/* a link in the header or the footer is a target big enough for a
   thumb, and still one line to the eye */
:is(nav, footer) a { padding-block: var(--s-3); }
a[hreflang] { text-transform: uppercase; }
a[aria-current] { color: var(--color-text); }

/* primitives */

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space, var(--s3));
}

/* the Center: its gutter is its parent's padding, so it fills a flex
   column as well as a block */
.center {
    inline-size: 100%;
    max-inline-size: var(--measure);
    margin-inline: auto;
}

/* --space is one gap, or two: between the lines, then between the words */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--s1));
    justify-content: var(--justify, flex-start);
    align-items: var(--align, center);
}

/* the Center's intrinsic option: what is looked at stands in the middle,
   what is read starts from the left */
.intrinsic, figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

figure { gap: var(--s-1); }

/* a picture is never smaller than a thumbnail. A page's own image has
   no caption, so it is no figure */
:is(figure, .intrinsic) > img { min-inline-size: min(var(--thumb), 100%); }

/* the Sidebar, Every Layout's: the side --side wide, the rest beside it
   while it keeps half the line; less, and each has a line of its own */
.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--s1));
    align-items: var(--align, stretch);
}

.with-sidebar > :first-child {
    flex-basis: var(--side, 20rem);
    flex-grow: 1;
}

.with-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

/* the Cover: what is looked at, alone in the middle of the first screen */
.cover {
    min-block-size: 60svh;
    justify-content: center;
}

/* its picture is looked at, not read: the measure is the text's, and
   the picture is as wide as the screen leaves it, s5 of white at each
   side, over the sides of the column; on a narrow screen, as wide as
   the column. It leaves the first screen room for the header above it
   and the title under it: the header's padding (as with no news line),
   the mark and the sections; s8 to main, s5 to the title, its line,
   and s5 under it, so it does not touch the screen's edge. On a screen
   too short for both the picture stays: half the measure tall, or 80%
   of the screen as any picture, and the title is under the screen's
   edge */
.cover > .intrinsic > img {
    max-inline-size: max(100%, 100vi - 2 * var(--s5));
    max-block-size: max(min(80svh, var(--measure) / 2), 100svh - 3 * var(--s5) - var(--s8) - 2.2 * var(--s3) - var(--s-1) - 2 * var(--leading) * var(--s-1) - 4 * var(--s-3) - 1px);
}

/* page */

/* the body is a column with the gutter: the news line from edge to edge,
   then the page, a Center and a Stack whose main pushes the footer to
   the bottom, however short the page. main is the measure of what is in
   it (cqi) */
body {
    display: flex;
    flex-direction: column;
    min-block-size: 100svh;
    padding-inline: var(--s2);
}
body > .center { flex-grow: 1; }
body > .center > main { margin-block-end: auto; container-type: inline-size; }
body > .center > header { padding-block-start: var(--s5); }
/* the mark stays in one place: without the news line (no news, or the
   home), the header takes its height, a line of --s-1, its padding and
   its border */
body:not(:has(> .ticker)) > .center > header {
    padding-block-start: calc(var(--s5) + var(--leading) * var(--s-1) + 2 * var(--s-3) + 1px);
}
body > .center > footer { padding-block-end: var(--s5); }
body > .center > header img { inline-size: var(--s3); block-size: var(--s3); }
hgroup { --space: var(--s-5); }
/* among rows with a year at the side, a row with none keeps its empty
   place, the titles on one unseen line; an until's time is no year */
[role="list"]:has(> li > .with-sidebar > time) > li > .with-sidebar:not(:has(> time))::before {
    content: "";
    flex-basis: var(--side);
    flex-grow: 1;
    font-size: var(--s-1);
}

/* the Frame, Every Layout's: a picture in a square box, contained,
   never cut, at the bottom of the box; the box keeps its place before
   the picture loads */
.frame {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: 50% 100%;
}

/* a work among other pages: small, whole, one size everywhere */
.thumb { inline-size: var(--thumb); }
.thumb h3 { font-size: var(--s-1); }

/* the news line: one small line at the top, a rule under it. It does
   not move or wrap: what does not fit is scrolled */
.ticker {
    flex-wrap: nowrap;
    margin-inline: calc(var(--s2) * -1);
    padding: var(--s-3) var(--s2);
    border-block-end: 1px solid var(--color-line);
    font-size: var(--s-1);
    color: var(--color-muted);
}
.ticker > div { flex-grow: 1; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.ticker ul { flex-wrap: nowrap; }
.ticker li { padding-inline-end: var(--s5); white-space: nowrap; }
.ticker > p { white-space: nowrap; }
/* while the line can still be scrolled on, an ellipsis, the type's own
   sign for more, stands at its end over what is cut; scrolled to the
   end it goes. The line's scroll drives it: where all fits there is no
   scroll, and no ellipsis. It goes at 99%, not at the end: a finger
   may stop a fraction of a pixel short of it. A browser with no scroll
   timeline (Safari before 26, Firefox) reads none of this: its line is
   as it was */
@supports (animation-timeline: scroll()) {
    .ticker > div { display: flex; }
    .ticker > div::after {
        content: "…";
        position: sticky;
        inset-inline-end: 0;
        background-color: var(--color-bg);
        visibility: hidden;
        animation: more linear both;
        animation-timeline: scroll(inline);
    }
    @keyframes more { from { visibility: visible; } 99%, to { visibility: hidden; } }
}

/* soffio's text: flat sections, the notes last. A word too long for the
   line is broken, as in a book, in the page's language: one of ten
   letters or more, four at least on each line (Safari reads only its
   own two limits, the four and the four); a quote mark hangs in the
   margin, where the browser can */

section > * + * { margin-block-start: var(--s3); }
section > * + :is(h2, h3, h4, h5, h6, figure), section > figure + * { margin-block-start: var(--s5); }
section > :is(h2, h3, h4, h5, h6) + * { margin-block-start: var(--s-1); }
:is(section, .text) :is(p, li) {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hanging-punctuation: first last;
}
section ul, section ol { padding-inline-start: var(--s1); }
/* a list's marks are grey: only the words are black */
section li::marker { color: var(--color-muted); }
section li + li { margin-block-start: var(--s-1); }

/* end matter: the notes, the colophon, under one line: the colophon
   right under the notes has none of its own */
.rule, [role="doc-endnotes"] { padding-block-start: var(--s1); border-block-start: 1px solid var(--color-line); }
[role="doc-endnotes"] + .rule { padding-block-start: 0; border-block-start: 0; }

.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* on paper: no news line, header links or footer, which lead nowhere
   there; the page's margins are the gutter; a work still whole, and no
   row or figure split by the end of a sheet */
@media print {
    html { font-size: 11pt; }
    body { padding: 0; }
    :is(.ticker, nav, body > .center > footer) { display: none; }
    .cover { min-block-size: auto; }
    img, .cover > .intrinsic > img { max-block-size: 50vh; }
    :is(figure, [role="list"] > li) { break-inside: avoid; }
    :is(section, .text) a { text-decoration-color: currentColor; }
}