/* ==========================================================================
   Xăm Quan Âm — Vietnamese lot pages

   Same temple-slip system as the English edition (paper, cinnabar seal, the
   grade colours) so the two read as one object in two languages. The
   typesetting is rebuilt, because the English settings do not survive contact
   with Vietnamese:

   - The English pages are set in Cormorant Garamond, a very high-contrast
     Garamond. Vietnamese stacks two marks on one vowel (ế ộ ữ ằ) and those
     hairlines break up at text sizes. EB Garamond keeps the lineage with a
     sturdier axis and real Vietnamese coverage.
   - Headings there run at line-height 1.18. Two stacked marks need more;
     under ~1.3 the upper mark clips against the line above.
   - Uppercase is off-limits for Vietnamese: capitals flatten the tone marks
     into the cap-height and the word stops being readable. It is used here
     only on Latin and monospace labels.
   - Letter-spacing stays 0 on Vietnamese display type; tracking visually
     detaches a mark from the stem it belongs to.

   Be Vietnam Pro carries labels and numerals — drawn by a Vietnamese foundry
   for this script.
   ========================================================================== */

:root {
    --paper: #F1EBDD;
    --paper-hi: #FBF7EE;
    --ink: #221C17;
    --ink-2: #6A5D4E;
    --ink-3: #8A7B68;
    --rule: #D6C9AE;
    --rule-soft: #E3D9C3;
    --cinnabar: #B3372B;

    --jade: #3E5637;   --jade-bg: #E4EADC;
    --ochre: #7A5C13;  --ochre-bg: #F2E8CD;
    --plum: #7C2A38;   --plum-bg: #F3DEDF;
    --slate: #5A5145;  --slate-bg: #E9E2D5;

    --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --ui: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
    --han: "Songti SC", "Noto Serif TC", "Source Han Serif TC", "MingLiU", "SimSun", serif;
    --shadow: 0 1px 2px rgba(34, 28, 23, .05), 0 12px 34px -14px rgba(34, 28, 23, .26);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #171410; --paper-hi: #211C17;
        --ink: #EDE4D3; --ink-2: #B9AB94; --ink-3: #8E8069;
        --rule: #3B3229; --rule-soft: #2A241D;
        --cinnabar: #E0705F;
        --jade: #9BBE8E;  --jade-bg: #222C1E;
        --ochre: #D6AE55; --ochre-bg: #2E2717;
        --plum: #E2909C;  --plum-bg: #2F1D21;
        --slate: #B6A992; --slate-bg: #26221C;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 40px -16px rgba(0, 0, 0, .7);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    /* 18px, not the English edition's 17 — the marks need the extra size. */
    font-size: 18px;
    line-height: 1.74;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(circle at 16% 10%, rgba(179, 55, 43, .05), transparent 42%),
        radial-gradient(circle at 84% 80%, rgba(122, 92, 19, .05), transparent 46%);
}

.wrap { padding: 0 20px 72px; }
.slip { max-width: 760px; margin: 0 auto; }

/* ---------------------------------------------------------------- header -- */

.head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 54px 0 24px;
}

.seal {
    width: 92px; height: 92px;
    display: grid; place-items: center;
    background: var(--cinnabar);
    color: #FBF7EE;
    border-radius: 3px;
    box-shadow: var(--shadow);
    position: relative;
}
.seal::after {
    content: "";
    position: absolute; inset: 5px;
    border: 1px solid rgba(251, 247, 238, .42);
    border-radius: 1px;
}
.seal-n {
    font-family: var(--ui);
    font-weight: 600; font-size: 40px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.seal-l {
    font-family: var(--ui);
    font-size: 8.5px; letter-spacing: .22em;
    text-transform: uppercase;   /* a Latin label — safe to capitalise */
    opacity: .82; margin-top: 5px;
}

.head-main { min-width: 0; }

.eyebrow {
    font-family: var(--ui);
    font-size: 10.5px; letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 8px;
}

h1 {
    margin: 0;
    font-size: clamp(1.85rem, 5vw, 2.7rem);
    font-weight: 600;
    line-height: 1.32;           /* clearance for stacked marks */
    letter-spacing: 0;           /* never track Vietnamese display type */
    text-wrap: balance;
    padding-block-start: .06em;  /* the upper mark can never touch the line above */
}

/* Grade chip: colour AND shape, so it survives greyscale and colour-blindness. */
.grade {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 14px; padding: 7px 15px 7px 12px;
    border-radius: 2px;
    font-family: var(--ui); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.grade i { width: 11px; height: 11px; display: block; flex: none; background: currentColor; }
.grade--auspicious   { color: var(--jade);  background: var(--jade-bg); }
.grade--auspicious i { border-radius: 50%; }
.grade--neutral      { color: var(--ochre); background: var(--ochre-bg); }
.grade--neutral i    { border-radius: 1px; }
.grade--inauspicious { color: var(--plum);  background: var(--plum-bg); }
.grade--inauspicious i { transform: rotate(45deg); }
.grade--mixed        { color: var(--slate); background: var(--slate-bg); }
.grade--mixed i      { height: 3px; }

hr.rule { height: 1px; background: var(--rule); border: 0; margin: 30px 0 0; }

/* ------------------------------------------------------------------ type -- */

.label {
    font-family: var(--ui);
    font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cinnabar);
    margin: 0 0 12px;
}
.sub {
    font-family: var(--ui);
    font-size: 11px; color: var(--ink-3);
    margin: 0 0 12px;
    letter-spacing: 0;
    text-transform: none;   /* Vietnamese — must not be capitalised */
}

/* The 漢字 beside its Hán Việt reading, with the sense beneath: the way these
   texts are actually presented. The old pages showed the characters on only
   5 of 100 lots. */
.poem-zone { margin: 30px 0 0; }
.poem {
    padding: 28px 30px;
    background: var(--paper-hi);
    border: 1px solid var(--rule-soft);
    border-inline-start: 3px solid var(--cinnabar);
    border-radius: 2px;
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr);
    gap: 0 28px;
    box-shadow: var(--shadow);
}
.div { background: var(--rule-soft); }
.col { min-width: 0; }
.col .l { display: block; }
.col--han {
    font-family: var(--han);
    font-size: 1.24rem;
    line-height: 2;
    letter-spacing: .1em;
    white-space: nowrap;
}
.col--sound .l {
    font-style: italic;
    color: var(--ink-2);
    font-size: 1.05rem;
    line-height: 2;   /* verse: marks never crowd */
}

.sense {
    margin: 22px 0 0;
    padding-inline-start: 3px;
}
.sense .l {
    display: block;
    font-size: 1.08rem;
    line-height: 1.95;
    font-weight: 600;
}

.reading { margin: 32px 0 0; max-width: 64ch; }
.reading p { margin: 0; font-size: 1.06rem; }

/* Per-matter verdicts as ledger rows — rows scan faster than cards, and match
   the English edition. The old pages carried four of these; the source has up
   to fourteen. */
.ledger { margin: 34px 0 0; }
.row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: 6px 24px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.row:first-of-type { border-top: 1px solid var(--rule); }
.k {
    font-family: var(--ui);
    font-size: .82rem; font-weight: 600; line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;   /* Vietnamese label — left alone */
    padding-top: .18em;
}
.v { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; }
.giai-prose { margin: 0; font-size: 1.06rem; max-width: 64ch; }

/* ---------------------------------------------------------------- footer -- */

.nav, .foot {
    font-family: var(--ui);
    font-size: .84rem;
}
.nav {
    margin: 42px 0 0; padding-top: 20px;
    border-top: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; gap: 12px 20px;
    align-items: center; justify-content: space-between;
}
.mid { color: var(--ink-3); }
.foot { margin: 20px 0 0; color: var(--ink-3); }

a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
a:hover { color: var(--cinnabar); border-bottom-color: var(--cinnabar); }
a:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; border-radius: 1px; }

@media (max-width: 640px) {
    .head { grid-template-columns: 1fr; gap: 16px; padding-top: 38px; }
    .seal { width: 74px; height: 74px; }
    .seal-n { font-size: 32px; }
    .poem { grid-template-columns: 1fr; gap: 0; padding: 22px 20px; }
    .div { height: 1px; margin: 18px 0; }
    .col--han { white-space: normal; font-size: 1.15rem; }
    .row { grid-template-columns: 1fr; gap: 2px; }
}