/* index_v3.css — the home page as the opening quire of the booke ("second
   edition"). Loaded ONLY by layouts/home.html. Every class is vn-* namespaced
   so no legacy stylesheet (index_v2, home-mobile, responsive) can interfere.
   One inline script on the page (the plate shuffle); all other data is baked
   at build time. Fonts are self-hosted latin woff2 subsets (~50KB each). */

@font-face {
    font-family: "IM Fell English";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/imfell-english-latin.woff2) format("woff2");
    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: "Caveat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/caveat-latin.woff2) format("woff2");
    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;
}
/* Home-only Amiri override: this file loads after style.css, so on this page
   the Arabic (imprint line, the sun's mansion) uses a self-hosted 74KB woff2
   subset of the full Arabic block instead of the 186KB gstatic TTF. */
@font-face {
    font-family: "Amiri";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/amiri-arabic-subset.woff2) format("woff2");
    /* only the block the subset actually contains — anything rarer falls
       through to the site-wide Amiri faces from style.css */
    unicode-range: U+0600-06FF, U+200C-200F, U+25CC;
}

body {
    margin: auto;
    padding: 20px 12px 46px;
    max-width: 900px;
}

/* ═══════════ navbar — the site's dotted header idiom ═══════════ */
.vn-header {
    background-color: var(--white);
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.vn-header-left {
    width: 181px;
    padding: 3px 0;
    border-bottom: 1px dotted var(--darkbrown);
    border-right: 1px dotted var(--darkbrown);
    font-weight: bold;
}
.vn-header-left .vn-brand { padding-left: 4px; }
.vn-star {
    text-decoration: none !important;
    float: right;
    font-weight: bold;
    font-size: small;
    color: var(--accent);
    margin-inline-end: 8px;
    padding-top: 2px;
}
.vn-header-nav { display: flex; flex: 1; }
.vn-nav-link {
    border-right: 1px dotted var(--darkbrown);
    border-bottom: 1px dotted var(--darkbrown);
    text-align: center;
    width: 100%;
}
.vn-nav-link:last-child { border-right: none; }
.vn-nav-link a {
    color: var(--darkbrown);
    text-decoration: none !important;
    display: block;
    padding: 3px 0;
    -webkit-transition: 0.25s;
}
.vn-nav-link a:hover {
    color: var(--white);
    background-color: var(--darkbrown);
    letter-spacing: 1px;
}

/* ═══════════ bands: sections with reserved note margins ═══════════ */
.vn-band {
    position: relative;
    border-bottom: 1px dotted var(--darkbrown);
    padding: 22px 178px 18px;
}
.vn-band:last-of-type { border-bottom: none; }
.vn-head {
    font-weight: bold;
    text-align: center;
    padding: 3px;
    margin: 0 0 14px;
    font-size: 1em;
}

/* pencil margin notes */
.vn-anno { position: relative; }
.vn-anno > .vn-note { position: absolute; top: 2px; width: 156px; display: block; }
.vn-pencil {
    font-family: "Caveat", cursive;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.12;
    font-variant-emoji: text; /* symbols stay ink, never colour emoji */
}
.vn-pencil a { color: var(--muted); }
.vn-note-l { left: -170px; text-align: right; transform: rotate(-1.1deg); }
.vn-note-r { right: -170px; transform: rotate(0.9deg); }
.vn-note-attr { display: block; font-size: 11px; margin-top: 1px; opacity: 0.85; }

/* ═══════════ title leaf — the portal: one wide scene, title set in ═══════════ */
.vn-title-leaf { text-align: center; padding-top: 26px; padding-bottom: 24px; }
.vn-portal { position: relative; margin: 0 -164px; }
.vn-portal-art {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    image-rendering: auto; /* fine dither grain must downscale smoothly */
    border: 1px solid var(--darkbrown);
    background: var(--white);
}
.vn-portal-title { position: absolute; bottom: 16px; }
.vn-pos-r .vn-portal-title { right: 22px; text-align: right; }
.vn-pos-l .vn-portal-title { left: 22px; text-align: left; }
.vn-title-knock {
    font-family: "IM Fell English", "TimesOrTinos", "Times New Roman", serif;
    font-weight: normal;
    font-size: clamp(2em, 4.6vw, 2.9em);
    letter-spacing: 0.01em;
    line-height: 1;
    margin: 0;
    color: var(--white);
    text-shadow:
        1px 1px 0 var(--darkbrown),
        -1px -1px 0 rgba(var(--ink-rgb), 0.6),
        1px -1px 0 rgba(var(--ink-rgb), 0.6),
        -1px 1px 0 rgba(var(--ink-rgb), 0.6);
}
.vn-sub-knock {
    color: var(--white);
    font-style: italic;
    font-size: 13px;
    margin-top: 3px;
    text-shadow: 1px 1px 0 var(--darkbrown), -1px -1px 0 rgba(var(--ink-rgb), 0.6);
}
.vn-portal-credit {
    position: absolute;
    bottom: 10px;
    font-size: 10.5px;
    font-style: italic;
    color: var(--white);
    text-shadow: 1px 1px 0 var(--darkbrown);
}
.vn-pos-r .vn-portal-credit { left: 12px; }
.vn-pos-l .vn-portal-credit { right: 12px; }
.vn-enum { max-width: 34em; margin: 18px auto 12px; text-align: center; }
.vn-edition { margin: 0 auto 18px; max-width: 30em; font-size: 0.95em; text-align: center; }
/* The ❤️ (see home.html). Native glyph on Apple platforms; elsewhere Apple's own
   artwork as an image — no explicit width, each srcset asset is the font engine's
   output for that density, so intrinsic sizing matches the native emoji's size. */
.vn-device-heart { display: block; margin: 0 auto; }
.vn-device-glyph { display: none; font-size: 18px; line-height: 1; }
.vn-device.vn-native-emoji .vn-device-glyph { display: block; }
.vn-device.vn-native-emoji picture { display: none; }
.vn-device-motto { font-size: 10px; display: block; margin-top: 2px; opacity: 0.75; }
.vn-imprint {
    margin: 16px auto 0;
    max-width: 30em;
    border-top: 1px dotted var(--darkbrown);
    padding-top: 11px;
}
.vn-imprint-ar { font-family: "Amiri", serif; font-size: 15px; margin-top: 3px; }
.vn-price { font-size: 0.85em; margin-top: 13px; color: var(--muted); }

/* ═══════════ the licence ═══════════ */
.vn-licence { max-width: 34em; margin: 0 auto; font-size: 0.95em; text-align: justify; }

/* ═══════════ to the reader ═══════════ */
.vn-preface p, .vn-preface blockquote { margin: 0 0 13px; text-align: justify; }
/* markdownify unwraps single-paragraph anno content (no <p>), so the anno
   block itself carries the paragraph break and justification */
.vn-preface .vn-anno { margin-bottom: 13px; text-align: justify; }
.vn-preface > p:first-of-type::first-letter,
.vn-preface .vn-content > p:first-of-type::first-letter {
    float: left;
    font-size: 40px;
    line-height: 0.85;
    padding: 2px 6px 0 0;
}
.vn-preface blockquote {
    font-size: 0.95em;
    font-style: italic;
    padding: 0 1.5em;
}
.vn-preface img { display: block; margin: 4px auto 14px; }

/* ═══════════ further matters ═══════════ */
.vn-further {
    text-align: center;
    font-size: 0.95em;
    padding: 12px 8px;
    border-bottom: 1px dotted var(--darkbrown);
}
.vn-further .sep { color: var(--muted); padding: 0 5px; }

/* ═══════════ colophon ═══════════ */
.vn-colophon { text-align: center; }
.vn-colophon p { margin: 0 auto 9px; font-size: 0.95em; text-align: center; }
.vn-w1 { max-width: 44em; }
.vn-w2 { max-width: 34em; }
.vn-w3 { max-width: 24em; }
.vn-colo-star { color: var(--accent); font-size: 12px; margin: 8px 0 0; }

/* ═══════════ the change log (parsed from actions.org) ═══════════
   Deliberately the look of the working notes box from the design mockups:
   gray sans-serif slip with a dashed border — a modern repair-tag pasted at
   the foot of the old book. */
.vn-changelog {
    margin: 30px 178px 0;
    padding: 12px 16px;
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #444;
    background: #e3e3e3;
    border: 1px dashed #999;
}
.vn-changelog .vn-head {
    font-family: inherit;
    text-align: left;
    padding: 0;
    margin: 0 0 4px;
    font-size: 12px;
}
.vn-changelog a { color: #444; }
.vn-log-intro {
    margin: 0 0 6px;
    font-style: italic;
    color: #666;
    text-align: left;
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.vn-log-kw { font-weight: bold; }
.vn-log-more { margin: 8px 0 0; text-align: left; }
.vn-log-entry { padding: 6px 0 4px; }
.vn-log-entry + .vn-log-entry { border-top: 1px dashed #bbb; }
.vn-log-date {
    font-variant-numeric: tabular-nums;
    color: #777;
    padding-right: 8px;
    white-space: nowrap;
}
.vn-log-entry p {
    margin: 3px 0 0;
    text-align: left;
    /* counters style.css's global `p { font-family … !important }` */
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.vn-log-img {
    display: block;
    margin: 8px 0 4px;
    max-width: 190px;
    border: 1px solid #999;
    mix-blend-mode: normal;
    image-rendering: auto;
}

/* ═══════════ foot: signature mark & catchword ═══════════ */
.vn-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 6px 0;
    font-size: 0.8em;
}
.vn-sig { opacity: 0.5; }
.vn-catchword { font-style: italic; }

/* ═══════════ mobile ═══════════ */
@media (max-width: 700px) {
    body { padding: 12px 8px 36px; }
    .vn-header { position: static; flex-wrap: wrap; }
    .vn-header-left { width: 100%; border-right: none; text-align: center; }
    .vn-header-nav { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
    .vn-nav-link { border-right: 1px dotted var(--darkbrown); }
    .vn-nav-link:nth-child(4n) { border-right: none; }
    .vn-band { padding: 20px 10px 16px; }
    .vn-anno > .vn-note {
        position: static;
        width: auto;
        text-align: left;
        transform: none;
        /* border-left: 2px solid rgba(102, 102, 102, 0.4); */
        padding-left: 10px;
        margin: 8px 0 13px 8px;
        top: auto !important;
    }
    .vn-portal { margin: 0; }
    .vn-portal-art { height: 220px; }
    .vn-portal-title { bottom: 12px; }
    .vn-pos-r .vn-portal-title { right: 12px; }
    .vn-pos-l .vn-portal-title { left: 12px; }
    .vn-title-knock { font-size: 1.7em; }
    .vn-portal-credit {
        position: absolute;
        bottom: -19px;
        left: 0;
        right: 0;
        text-align: center;
        color: var(--muted);
        text-shadow: none;
    }
    .vn-title-leaf .vn-enum { margin-top: 26px; }
    .vn-changelog { margin: 22px 4px 0; }
}