/* wierk.com — manuscript aesthetic
   typography: Fraunces (variable serif) throughout
   palette: warm paper, deep ink, oxblood accent
   intent: an old printed book, quietly animated */

:root {
    --paper: #f7f2e6;
    --paper-deep: #efe7d4;
    --ink: #1a1410;
    --ink-soft: #463e33;
    --ink-faded: #756a57;
    --rule: #d8cdb5;
    --rule-soft: #ebe3cf;
    --oxblood: #7a1f1a;
    --oxblood-bright: #9a2a20;
    --gold: #a07b2e;
}

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

html {
    background: var(--paper);
}

body {
    background: var(--paper);
    background-image:
        radial-gradient(ellipse at top left, rgba(160, 123, 46, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(122, 31, 26, 0.04) 0%, transparent 60%),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-attachment: fixed;
    color: var(--ink);
    font-family: 'Fraunces', 'EB Garamond', Georgia, serif;
    font-variation-settings: "opsz" 14, "SOFT" 30;
    font-feature-settings: "liga" 1, "dlig" 1, "onum" 1;
    line-height: 1.68;
    padding: 4rem 2rem 3rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page {
    max-width: 680px;
    margin: 0 auto;
}

/* Staggered entrance — each child fades in on its own delay */
.stagger > * {
    opacity: 0;
    animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.25s; }
.stagger > *:nth-child(3) { animation-delay: 0.45s; }
.stagger > *:nth-child(4) { animation-delay: 0.65s; }
.stagger > *:nth-child(5) { animation-delay: 0.85s; }
.stagger > *:nth-child(n+6) { animation-delay: 1.0s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Breadcrumb — small caps, letter-spaced */
.crumb {
    font-size: 0.78rem;
    color: var(--ink-faded);
    margin-bottom: 3.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-variation-settings: "opsz" 9, "wght" 450;
    font-feature-settings: "smcp" 1;
}
.crumb a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.1em;
    transition: color 0.25s, border-color 0.25s;
}
.crumb a:hover {
    color: var(--oxblood);
    border-bottom-color: var(--oxblood);
}
.crumb .sep {
    margin: 0 0.7em;
    color: var(--rule);
}

/* Display h1 — large optical size for dramatic contrast */
h1 {
    font-size: clamp(2.4rem, 6.5vw, 3.8rem);
    font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 100;
    line-height: 1.02;
    letter-spacing: -0.022em;
    margin-bottom: 0.6rem;
    color: var(--ink);
}
h1 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 100;
    color: var(--oxblood);
}

.lede {
    color: var(--ink-soft);
    font-style: italic;
    font-size: 1.22rem;
    font-variation-settings: "opsz" 24, "wght" 380, "SOFT" 50;
    line-height: 1.45;
    margin-bottom: 3.5rem;
    max-width: 34em;
}
.meta {
    font-size: 0.78rem;
    color: var(--ink-faded);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-variation-settings: "opsz" 9, "wght" 500;
    margin-bottom: 3rem;
}

/* Section headings — marked with a small fleuron */
h2 {
    font-size: 1.5rem;
    font-variation-settings: "opsz" 40, "wght" 480, "SOFT" 0;
    letter-spacing: -0.005em;
    margin: 3.2rem 0 1rem;
    color: var(--ink);
    position: relative;
    padding-top: 0.4rem;
}
h2::before {
    content: "❦";
    display: block;
    color: var(--oxblood);
    font-size: 1.05rem;
    margin-bottom: 1rem;
    opacity: 0.75;
    font-variation-settings: "opsz" 14, "wght" 400;
}

h3 {
    font-size: 1.08rem;
    font-variation-settings: "opsz" 14, "wght" 500, "SOFT" 60;
    font-style: italic;
    color: var(--ink-soft);
    margin: 2rem 0 0.5rem;
}

/* Body paragraphs — comfortable optical size */
p {
    font-size: 1.14rem;
    font-variation-settings: "opsz" 14, "wght" 380;
    line-height: 1.72;
    color: var(--ink);
    margin-bottom: 1.25rem;
    hyphens: auto;
}

em {
    font-style: italic;
    font-variation-settings: "opsz" 14, "wght" 380, "SOFT" 60;
}
strong {
    font-variation-settings: "opsz" 14, "wght" 520;
    color: var(--ink);
}

/* Drop cap on the opening paragraph of an essay */
.dropcap::first-letter {
    font-size: 4.6rem;
    line-height: 0.88;
    float: left;
    font-variation-settings: "opsz" 144, "wght" 420, "SOFT" 100;
    padding: 0.38rem 0.55rem 0 0;
    color: var(--oxblood);
    font-style: normal;
}

/* Links — old-book underline */
a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: color 0.25s, border-color 0.25s;
    touch-action: manipulation;
}
a:hover {
    color: var(--oxblood);
    border-bottom-color: var(--oxblood);
}
a:focus-visible {
    outline: 2px solid var(--oxblood);
    outline-offset: 3px;
    border-radius: 2px;
}

ul, ol {
    margin: 1rem 0 1.6rem 1.4rem;
}
li {
    font-size: 1.08rem;
    font-variation-settings: "opsz" 14, "wght" 380;
    color: var(--ink);
    margin-bottom: 0.55rem;
    line-height: 1.68;
}
ul { list-style: none; }
ul li { position: relative; padding-left: 1.1rem; }
ul li::before {
    content: "·";
    position: absolute;
    left: 0;
    top: -0.1em;
    color: var(--oxblood);
    font-weight: 500;
    font-size: 1.4em;
}

/* The etymology chain — framed quietly */
.chain {
    font-size: 1.08rem;
    font-style: italic;
    color: var(--ink-soft);
    padding: 1.5rem 1.8rem;
    background: rgba(255, 250, 236, 0.55);
    border-left: 2px solid var(--oxblood);
    margin: 2rem 0;
    line-height: 2.1;
    font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 40;
}
.chain em {
    color: var(--ink);
    font-style: italic;
    font-variation-settings: "opsz" 14, "wght" 460, "SOFT" 60;
}
.chain .arrow {
    color: var(--oxblood);
    margin: 0 0.3em;
    font-style: normal;
    opacity: 0.7;
}

/* Tables — like an old scholarly glossary */
table {
    width: 100%;
    margin: 1.6rem 0 2.2rem;
    border-collapse: collapse;
    font-size: 1rem;
}
thead tr {
    border-bottom: 1px solid var(--oxblood);
}
th {
    text-align: left;
    padding: 0 0.9rem 0.9rem 0;
    font-variation-settings: "opsz" 9, "wght" 500;
    color: var(--ink-faded);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-feature-settings: "smcp" 1;
}
td {
    text-align: left;
    padding: 0.75rem 0.9rem 0.75rem 0;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
    font-variation-settings: "opsz" 14, "wght" 380;
    color: var(--ink);
    line-height: 1.5;
}
td em {
    color: var(--ink);
}
td.lang {
    color: var(--ink-soft);
    font-style: italic;
    font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 40;
    width: 26%;
}
td.ipa {
    color: var(--ink-faded);
    font-size: 0.95rem;
    width: 16%;
    font-variation-settings: "opsz" 14, "wght" 360;
}
td.meaning {
    color: var(--ink);
}

/* Inline sentence cards (Luxembourgish examples) */
.sentence {
    padding: 1.1rem 1.4rem;
    background: rgba(255, 250, 236, 0.55);
    border-left: 2px solid var(--oxblood);
    margin: 0.9rem 0;
}
.sentence .lb {
    font-size: 1.15rem;
    font-variation-settings: "opsz" 14, "wght" 430, "SOFT" 50;
    color: var(--ink);
    margin-bottom: 0.25rem;
}
.sentence .en {
    font-size: 0.98rem;
    color: var(--ink-faded);
    font-style: italic;
    font-variation-settings: "opsz" 14, "wght" 380, "SOFT" 30;
}

blockquote {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ink-soft);
    margin: 2.2rem 0;
    padding: 0.3rem 0 0.3rem 1.8rem;
    border-left: 2px solid var(--oxblood);
    line-height: 1.55;
    font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 70;
}
blockquote cite {
    display: block;
    margin-top: 0.6rem;
    font-style: normal;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    font-variation-settings: "opsz" 9, "wght" 500;
    text-transform: uppercase;
}

/* Flourish divider — centered ornamental glyphs */
.flourish {
    text-align: center;
    color: var(--oxblood);
    font-size: 1.2rem;
    margin: 3.5rem 0;
    opacity: 0.6;
    letter-spacing: 2em;
    padding-left: 2em;
    font-variation-settings: "opsz" 24, "wght" 400;
}
.flourish::before { content: "❦ ❦ ❦"; }

/* Footer nav — same tone, lower volume */
footer {
    margin-top: 5.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
    color: var(--ink-faded);
    letter-spacing: 0.05em;
}
footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    font-variation-settings: "opsz" 9, "wght" 450;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
}
footer a {
    color: var(--ink-soft);
    border: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 0.15em;
    transition: color 0.25s, border-color 0.25s;
}
footer a:hover {
    color: var(--oxblood);
    border-bottom-color: var(--oxblood);
}
footer .mark {
    margin-top: 1.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faded);
    font-variation-settings: "opsz" 9, "wght" 400;
}
footer .mark a {
    color: inherit;
    border-bottom: 1px solid transparent;
    padding-bottom: 0.1em;
    transition: color 0.25s, border-color 0.25s;
}
footer .mark a:hover {
    color: var(--oxblood);
    border-bottom-color: var(--oxblood);
}

/* Responsive — tighten on small screens */
@media (max-width: 600px) {
    body { padding: 2.5rem 1.4rem 2.5rem; }
    .crumb { margin-bottom: 2.8rem; }
    h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
    .lede { font-size: 1.1rem; margin-bottom: 2.5rem; }
    p { font-size: 1.06rem; }
    li { font-size: 1.02rem; }
    .chain { font-size: 1rem; padding: 1.1rem 1.2rem; line-height: 1.95; }
    table { font-size: 0.92rem; }
    th, td { padding-right: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
    /* Cognates-page tables stack to cards on mobile — scoped in-page */
    .dropcap::first-letter { font-size: 3.4rem; }
    .flourish { letter-spacing: 1.4em; padding-left: 1.4em; }
    footer nav { gap: 1.2rem; font-size: 0.68rem; }
}

/* Reduced motion — respect the setting */
@media (prefers-reduced-motion: reduce) {
    .stagger > * { opacity: 1; animation: none; }
}