/* gassert.ch
   One typeface, one column, no JavaScript.

   Measurements are taken from darioamodei.com, which is the agreed reference:
   20px/32px body, 28.8px h1, 24px h2, both headings at weight 600, a 620px
   column, and links in the text colour with a 1.6px underline set 2px down.
   Only the typeface differs - GT Sectra here, Newsreader there. */

/* ---- GT Sectra --------------------------------------------------------
   Licensed files, three styles: Book for text, Book Italic for emphasis,
   Bold for headings. The TEXT cut, not Fine or Display - those are drawn for
   larger sizes than a 20px body.

   woff2 only. The .otf/.ttf/.woff from the same purchase live in
   licensed-fonts-desktop/ and are deliberately NOT in static/, because
   everything under static/ gets published: serving retail desktop formats
   would let anyone install the font, and web licences cover woff/woff2.

   Book is declared at 350 so that Bold at 700 sits clearly apart from it, and
   so <em> picks up Book Italic rather than jumping to a heavier cut. */
@font-face {
    font-family: "GT Sectra";
    src: url("/fonts/GT-Sectra-Book.woff2") format("woff2");
    font-weight: 350; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "GT Sectra";
    src: url("/fonts/GT-Sectra-Book-Italic.woff2") format("woff2");
    font-weight: 350; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "GT Sectra";
    src: url("/fonts/GT-Sectra-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    --bg:   #f6f4ec;   /* warm off-white, a little lighter than the reference */
    --ink:  #231e19;   /* near-black, warmer than the reference */
    --rule: #ddd8c8;
    --measure: 620px;
    --body-weight: 350;      /* Book */
    --heading-weight: 700;   /* Bold */
}

/* Follows the operating system. No toggle, because a toggle needs JavaScript
   and the brief is static files. Delete this block for light-only. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:   #1b1a17;
        --ink:  #ece8de;
        --rule: #3b3831;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "GT Sectra", "Iowan Old Style", "Palatino Linotype", Palatino,
                 "Times New Roman", Times, serif;
    font-size: 20px;
    line-height: 32px;
    font-weight: var(--body-weight);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 6rem 20px 8rem;
}

/* Type scale ---------------------------------------------------------- */
h1, h2, h3 {
    font-weight: var(--heading-weight);
    line-height: 28.8px;
    margin: 0;
}

h1 {
    font-size: 28.8px;
    margin-bottom: 32px;
}

h2 {
    font-size: 24px;
    margin-top: 56px;
    margin-bottom: 16.8px;
}

h3 {
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 8px;
}

p { margin: 0 0 20px; }

/* Links: no colour change, just an underline that sits clear of descenders */
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1.6px;
    text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2.4px; }

/* Lists: small bullet, roomy, matching the reference's spacing */
ul, ol { margin: 0 0 20px; padding-left: 1.1em; }
li { margin-bottom: 10px; }
li::marker { font-size: 0.7em; }

/* Portrait: restrained rather than full-column, so it reads as a photograph
   on a page of text and not as a hero image. aspect-ratio reserves the space
   before the file loads, so nothing shifts. */
.portrait {
    display: block;
    max-width: 360px;
    aspect-ratio: 792 / 1024;
    height: auto;
    margin: 32px 0 36px;
    /* Barely there: 3px on a 360px image softens the corner without the photo
       reading as a rounded card. Any more would compete with GT Sectra rather
       than echo it. */
    border-radius: 3px;
}

blockquote {
    margin: 32px 0;
    padding-left: 20px;
    border-left: 1.6px solid var(--rule);
}

hr { border: 0; border-top: 1.6px solid var(--rule); margin: 48px 0; }

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

/* Long words and URLs must not push the column sideways on a phone */
p, li, h1, h2, h3 { overflow-wrap: break-word; }

/* Licence note: deliberately quiet, set below the last entry. attr_list
   (part of the markdown "extra" bundle) puts the class on it from the
   Markdown source. */
.license {
    margin-top: 56px;
    font-size: 15px;
    line-height: 24px;
    opacity: 0.62;
}

code, pre {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85em;
}
pre { overflow-x: auto; padding: 16px; background: rgb(0 0 0 / 4%); }
@media (prefers-color-scheme: dark) {
    pre { background: rgb(255 255 255 / 6%); }
}

/* Phones: the reference's 20px body is comfortable, so only the padding moves */
@media (max-width: 600px) {
    main { padding: 3rem 20px 5rem; }
    h2 { margin-top: 40px; }
}

@media print {
    :root { --bg: #fff; --ink: #000; }
    main { max-width: none; padding: 0; }
}