/* ==========================================================================
   BluePetra Seminary - public site
   --------------------------------------------------------------------------
   A third distinct voice. The Quiz site is playful, the Ministry site is a
   settled nonprofit; this is a school, and the core activity is READING -
   3,972 Markdown lectures, most of them long-form Korean prose.

   So the whole design is subordinated to legibility: a deep study green, warm
   paper rather than white, generous line height, and a measure capped near
   40em so lines never run too long to track. Korean has no inter-word spacing
   to help the eye, so line-height is set higher than an English-only site
   would need.

   No build step - plain CSS from /public/css.
   ========================================================================== */

:root {
    /* 한지와 인장. The paper is hanji, the letters are ink, and the red is a
       seal - which is stamped, never painted. `--seal` may colour a mark, a
       button, a 3px bar or a dotted underline and nothing larger; the workhorse
       warm accent is `--brass`, which is now 갈필 brown. If red ever becomes a
       surface it stops meaning "here" and starts meaning nothing. */
    --ink:        #2a2724;
    --ink-deep:   #1c1a17;
    --ink-soft:   #4a453f;
    --brass:      #8a6a52;   /* 갈필 - bars, dots, secondary links */
    --brass-soft: #c4ac95;
    --seal:       #a8443a;   /* 인장 - the mark, the one button, "you are here" */
    --seal-soft:  #c98d84;
    --paper:      #f8f5ed;
    --paper-warm: #efe9dd;
    --card:       #ffffff;
    --text:       #2a2724;
    --text-muted: #6f6a61;
    --line:       #e5ded0;

    /* Georgia carries no Hangul, so every Korean heading used to fall through
       to whatever gothic the OS happened to have - serif in Latin, sans in
       Korean, and different on every machine. One family now covers both. */
    --font-display: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont,
                    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-body:    'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic',
                    'Noto Sans KR', Roboto, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --wrap: 1120px;
    --read: 40em;      /* reading measure for lecture bodies */
    --radius: 10px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` in the browser's own
   stylesheet, so any class here that sets `display` overrides it. That is how
   the diagram-zoom overlay (.zoom, display:flex, hidden) came to cover every
   lecture with a black screen. Nothing may rely on `hidden` without this. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.35;
    font-weight: 600;
}

a { color: var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

.site-header { background: var(--ink); color: #fff; padding: 16px 0; }

.site-header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px; flex-wrap: wrap;
}

/* The logo: 겹인장 on 한지, then the name, then the descriptor behind a rule.
   The descriptor can be dropped and the rule goes with it - what is left is
   still the logo. The wordmark is English in both languages, because a mark is
   a name and a name is not translated. */
.brand {
    font-family: var(--font-display);
    font-size: 1.28rem; color: #fff; text-decoration: none;
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}

.brand-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* Three colours, and they are the page's own tokens rather than literals, so
   the mark follows the palette if the palette ever moves again. The letters
   are outlines, not <text>: the favicon is drawn from the same path by
   `scripts/make_icons.py`, which has no webfont, and text would have given the
   header and the browser tab two different typefaces. */
.brand-tile { fill: var(--seal); }
.brand-bp   { fill: #fff; }

.brand-word {
    font-size: 1.14rem; font-weight: 600; letter-spacing: 0.004em;
    white-space: nowrap; color: #fff;
}
.brand-rule { width: 1px; height: 15px; flex: none; background: rgba(255,255,255,0.3); }
/* The site's own name, set at the same size as the wordmark. It is told
   apart by weight and colour, not by being small - it is a name, not a
   caption - and it must not out-shout the mark, so it is the quietest
   readable value on this ground. */
.brand-sub {
    font-size: 1.14rem; font-weight: 400; letter-spacing: 0.004em;
    white-space: nowrap; color: rgba(255,255,255,0.56);
    font-family: var(--font-display);
}

/* The bar is tight on a phone; the descriptor is the first thing to go, and
   the rule leaves with it rather than hanging there on its own. */
@media (max-width: 760px) {
    .brand-rule, .brand-sub { display: none; }
}

.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-nav a { color: rgba(255,255,255,0.84); text-decoration: none; font-size: 0.94rem; }
.site-nav a:hover { color: #fff; }

.lang-switch { display: flex; gap: 7px; align-items: center; font-size: 0.83rem; color: rgba(255,255,255,0.4); }
.lang-switch a { color: rgba(255,255,255,0.6); }
.lang-switch a.is-active { color: var(--brass-soft); font-weight: 600; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-block; padding: 12px 28px; border-radius: var(--radius);
    text-decoration: none; font-weight: 600; font-size: 0.96rem;
    border: 1px solid transparent; cursor: pointer;
}
.btn-brass { background: var(--seal); color: #fff; font-weight: 600; }
.btn-brass:hover { background: #8e372e; }
.btn-ghost { border-color: rgba(255,255,255,0.32); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* ---------- Hero ---------- */

.hero { background: var(--ink); color: #fff; padding: 78px 0 84px; }
.hero .eyebrow {
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem;
    color: var(--brass-soft); margin-bottom: 18px;
}
.hero h1 { color: #fff; font-size: 2.7rem; max-width: 20ch; margin: 0 0 20px; }
.hero p { color: rgba(255,255,255,0.8); max-width: 54ch; font-size: 1.06rem; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 42px; margin-top: 46px; flex-wrap: wrap; }
.hero-stat .n { font-family: var(--font-display); font-size: 2rem; color: var(--brass-soft); line-height: 1; }
.hero-stat .l { font-size: 0.85rem; color: rgba(255,255,255,0.62); margin-top: 5px; }

/* ---------- Sections ---------- */

.section { padding: 70px 0; }
.section-warm { background: var(--paper-warm); }
.section-head { max-width: 60ch; margin-bottom: 38px; }
.section-head h2 { font-size: 1.85rem; margin: 0 0 10px; }
.section-head p { color: var(--text-muted); margin: 0; }

/* ---------- Course language switch ---------- */

/* Interface language and course language are separate choices; this switches
   the latter without touching the former. */
.prog-switch { display: flex; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.prog-switch a {
    padding: 9px 20px; border: 1px solid var(--line); border-radius: 30px;
    text-decoration: none; font-size: 0.92rem; color: var(--text-muted);
    background: var(--card);
}
.prog-switch a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.prog-switch .count { opacity: 0.6; font-size: 0.85em; }

/* ---------- Track / course listing ---------- */

.track { margin-bottom: 46px; }
.track-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 20px; }
.track-head h3 { margin: 0; font-size: 1.35rem; }
.track-head .code { font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--brass); font-weight: 700; }
.track-head .n { margin-left: auto; font-size: 0.86rem; color: var(--text-muted); }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.course {
    display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px; text-decoration: none;
}
.course:hover { border-color: var(--ink); }
.course .c-code { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--brass); font-weight: 700; }
.course h4 { margin: 6px 0 10px; font-size: 1.06rem; line-height: 1.45; }
.course .c-meta { font-size: 0.84rem; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

.tag {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 0.74rem; font-weight: 600;
}
.tag-core { background: #e7efe9; color: #2c5b40; }
.tag-elective { background: #f0eee9; color: #6a6d70; }

.empty-track { color: var(--text-muted); font-size: 0.94rem; padding: 14px 0; }

/* ---------- Course detail ---------- */

.course-hero { background: var(--ink); color: #fff; padding: 54px 0; }
.course-hero .c-code { font-family: ui-monospace, monospace; color: var(--brass-soft); font-size: 0.86rem; font-weight: 700; }
.course-hero h1 { color: #fff; font-size: 2.1rem; margin: 8px 0 14px; }
.course-hero .c-meta { color: rgba(255,255,255,0.72); font-size: 0.93rem; display: flex; gap: 18px; flex-wrap: wrap; }

.chapter { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: 14px; overflow: hidden; }
.chapter-head { padding: 16px 22px; background: var(--paper-warm); border-bottom: 1px solid var(--line); }
.chapter-head h3 { margin: 0; font-size: 1.04rem; }
.chapter-head .n { font-size: 0.78rem; color: var(--brass); font-weight: 700; letter-spacing: 0.05em; }

.lecture-list { list-style: none; margin: 0; padding: 0; }
.lecture-list li { border-bottom: 1px solid var(--line); }
.lecture-list li:last-child { border-bottom: none; }
.lecture-list a { display: flex; gap: 14px; padding: 12px 22px; text-decoration: none; align-items: baseline; }
.lecture-list a:hover { background: var(--paper-warm); }
.lecture-list .num { font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--text-muted); min-width: 2.6em; }

/* ---------- Lecture reading view ---------- */

.reader { padding: 46px 0 70px; }
.reader-inner { max-width: var(--read); margin: 0 auto; }

.crumb { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 26px; }
.crumb a { color: var(--text-muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

/* The lecture body. Everything here is rendered from Markdown, so the rules
   have to cover whatever the author wrote rather than a fixed template. */
.lecture-body { font-size: 1.06rem; line-height: 1.95; }
.lecture-body h1 { font-size: 1.9rem; margin: 0 0 26px; }
.lecture-body h2 { font-size: 1.42rem; margin: 46px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lecture-body h3 { font-size: 1.16rem; margin: 32px 0 12px; }
.lecture-body p { margin: 0 0 20px; }
.lecture-body ul, .lecture-body ol { margin: 0 0 20px; padding-left: 1.5em; }
.lecture-body li { margin-bottom: 8px; }
.lecture-body strong { color: var(--ink); }
.lecture-body hr { border: none; border-top: 1px solid var(--line); margin: 38px 0; }

.lecture-body blockquote {
    margin: 24px 0; padding: 4px 0 4px 22px;
    border-left: 3px solid var(--brass);
    color: var(--ink-soft); font-style: normal;
}
.lecture-body blockquote p:last-child { margin-bottom: 0; }

/* Tables are common in this material and often wide - they scroll inside
   their own box so the page itself never scrolls sideways. */
.lecture-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.94rem; }
.lecture-body thead th { background: var(--paper-warm); text-align: left; }
.lecture-body th, .lecture-body td { border: 1px solid var(--line); padding: 9px 12px; vertical-align: top; }

.lecture-body img { max-width: 100%; height: auto; display: block; margin: 26px auto; }

.lecture-body code {
    background: var(--paper-warm); padding: 2px 6px; border-radius: 4px;
    font-size: 0.9em;
}
.lecture-body pre { background: var(--paper-warm); padding: 16px; border-radius: 8px; overflow-x: auto; }
.lecture-body pre code { background: none; padding: 0; }

.lecture-body details {
    background: var(--paper-warm); border: 1px solid var(--line);
    border-radius: 8px; padding: 14px 18px; margin: 20px 0;
}
.lecture-body summary { cursor: pointer; font-weight: 600; color: var(--ink); }

/* ---------- Pager ---------- */

.pager-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pager-nav a { text-decoration: none; max-width: 46%; }
.pager-nav .dir { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); font-weight: 700; }
.pager-nav .t { display: block; color: var(--ink); font-weight: 600; margin-top: 3px; }
.pager-nav .next { text-align: right; margin-left: auto; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,0.66); padding: 52px 0 30px; font-size: 0.91rem; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 38px; margin-bottom: 34px; }
.site-footer h4 { color: #fff; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 14px; font-family: var(--font-body); }
.site-footer a { color: rgba(255,255,255,0.66); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
/* The footer signs the page with the same lockup, one size up. The footer is
   already ink, so the mark needs nothing but room. */
.foot-brand { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; }
.foot-brand .brand-mark { width: 26px; height: 26px; flex-shrink: 0; display: block; }
.foot-brand .brand-mark svg { width: 100%; height: 100%; display: block; }
.foot-brand .brand-word { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; color: #fff; }
.foot-brand .brand-rule { width: 1px; height: 14px; background: rgba(255,255,255,0.28); }
.foot-brand .brand-sub {
    font-size: 1.06rem; font-weight: 400; color: rgba(255,255,255,0.52);
    font-family: var(--font-display);
}

.footer-base { border-top: 1px solid rgba(255,255,255,0.13); padding-top: 22px; font-size: 0.83rem; color: rgba(255,255,255,0.46); }

@media (max-width: 820px) {
    .footer-cols { grid-template-columns: 1fr; gap: 26px; }
    .hero { padding: 56px 0 60px; }
    .hero h1 { font-size: 2rem; }
    .section { padding: 50px 0; }
    .hero-stats { gap: 28px; }
}

/* ---------- Student sign-in / registration ---------- */

.auth-wrap { padding: 60px 0 80px; }
.auth-card {
    max-width: 420px; margin: 0 auto; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px; padding: 38px 36px;
}
.auth-card h1 { font-size: 1.5rem; margin: 0 0 6px; }
.auth-card .sub { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 26px; }

.field { margin-bottom: 17px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"] {
    width: 100%; padding: 11px 13px; border: 1px solid var(--line);
    border-radius: 8px; font-size: 0.98rem; font-family: inherit; background: #fff;
}
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(42,39,36,0.10); }
.field .hint { font-size: 0.82rem; color: var(--text-muted); margin: 6px 0 0; }

/* Remember-me on the left, the way out on the right. The forgotten-password
   link belongs beside the password field and nowhere else - a reader looking
   for it is not reading the page, they are scanning for it. */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-forgot { font-size: 0.86rem; color: var(--brass); text-decoration: none; }
.auth-forgot:hover { color: var(--ink); text-decoration: underline; }

.check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; }

.btn-block {
    width: 100%; padding: 12px; background: var(--ink); color: #fff; border: none;
    border-radius: 8px; font-size: 0.98rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.btn-block:hover { background: var(--ink-soft); }

.auth-alt { text-align: center; margin-top: 22px; font-size: 0.9rem; color: var(--text-muted); }
.auth-alt a { color: var(--ink); font-weight: 600; }

.alert-error {
    background: #fdf2f0; border: 1px solid #eec7c0; color: #7e2f27;
    padding: 11px 14px; border-radius: 8px; font-size: 0.89rem; margin-bottom: 20px;
}
.alert-ok {
    background: #eef4ee; border: 1px solid #c2ddc6; color: #2c5b40;
    padding: 11px 14px; border-radius: 8px; font-size: 0.89rem; margin-bottom: 20px;
}

/* ==========================================================================
   Coming-soon holding page
   Shown to the public while the site is being built. Staff bypass it, so this
   is deliberately calm and finished-looking rather than an error screen.
   ========================================================================== */

.soon-body { background: var(--ink); color: rgba(255,255,255,0.8); }

.soon {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px; text-align: center;
}

.soon-inner { max-width: 520px; }

.soon-mark {
    width: 54px; height: 54px; border-radius: 12px;
    background: var(--brass); color: var(--ink-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.3rem; margin-bottom: 28px;
}

.soon h1 {
    color: #fff; font-size: 2.1rem; margin: 0 0 10px;
}

.soon-tag { color: rgba(255,255,255,0.55); margin: 0; font-size: 0.98rem; }

.soon-rule {
    width: 46px; height: 2px; background: var(--brass);
    margin: 34px auto;
}

.soon h2 {
    color: var(--brass-soft); font-size: 1.18rem; margin: 0 0 14px;
    font-family: var(--font-body); font-weight: 600;
}

.soon-body-text {
    color: rgba(255,255,255,0.72); line-height: 1.85; margin: 0 0 30px;
}

.soon-contact { margin: 0 0 34px; }
.soon-contact a { color: var(--brass-soft); text-decoration: none; }
.soon-contact a:hover { text-decoration: underline; }

.soon-links {
    font-size: 0.92rem; color: rgba(255,255,255,0.3);
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.soon-links a { color: rgba(255,255,255,0.6); text-decoration: none; }
.soon-links a:hover { color: #fff; }

.soon-staff { margin: 44px 0 0; }
.soon-staff a {
    color: rgba(255,255,255,0.26); text-decoration: none; font-size: 0.82rem;
}
.soon-staff a:hover { color: rgba(255,255,255,0.55); }

/* ---------- Admin: launch gate control ---------- */

.gate-panel {
    border-left: 3px solid var(--brass);
}
.gate-state { font-weight: 600; }
.gate-on  { color: #8a6a2a; }
.gate-off { color: #2c5b40; }

/* ---------- My study ---------- */

.flash-ok {
    background: #eef4ee; border: 1px solid #c2ddc6; color: #2c5b40;
    padding: 11px 15px; border-radius: 8px; font-size: 0.92rem; margin-bottom: 24px;
}

.study-row {
    display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px;
}
.study-main { flex: 2; min-width: 240px; }
.study-main h3 { margin: 5px 0 6px; font-size: 1.14rem; }
.study-main h3 a { text-decoration: none; }
.study-main h3 a:hover { color: var(--brass); }

.study-progress { flex: 1; min-width: 200px; }

.bar { height: 7px; background: var(--paper-warm); border-radius: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brass); }
.bar-label { font-size: 0.83rem; color: var(--text-muted); margin: 7px 0 8px; }

/* ---------- Enrolment / lecture completion ---------- */

.enroll-box {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--paper-warm); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 30px;
}
.enroll-box .note { color: var(--text-muted); font-size: 0.88rem; margin: 0; flex: 1; min-width: 220px; }

.btn-sm {
    padding: 9px 20px; border-radius: 8px; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.92rem; font-weight: 600;
    background: var(--ink); color: #fff; text-decoration: none; display: inline-block;
}
.btn-sm:hover { background: var(--ink-soft); }
.btn-sm-ghost { background: none; border: 1px solid var(--line); color: var(--text-muted); }
.btn-sm-ghost:hover { background: #fff; color: var(--ink); }

.badge-done {
    display: inline-block; background: #e7efe9; color: #2c5b40;
    padding: 2px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
}

.lecture-list .done-tick { color: #2c5b40; font-weight: 700; margin-left: auto; }

.done-box {
    margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* ---------- Non-degree notice ----------
   Present on every public surface rather than one buried page: the curriculum
   is M.Div-shaped, so a visitor could reasonably assume this is a degree.
   Styled to be clearly readable but not alarming. */

.legal-note {
    color: rgba(255,255,255,0.42);
    font-size: 0.82rem;
    line-height: 1.7;
    margin: 0 0 10px;
    max-width: 72ch;
}

.hero-legal {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    margin: -14px 0 0;
}

.legal-inline {
    background: var(--paper-warm);
    border-left: 3px solid var(--line);
    padding: 12px 18px;
    color: var(--text-muted);
    font-size: 0.87rem;
    line-height: 1.7;
    margin: 0 0 32px;
    border-radius: 0 6px 6px 0;
}

.soon-legal {
    color: rgba(255,255,255,0.34);
    font-size: 0.8rem;
    line-height: 1.7;
    margin: 34px auto 0;
    max-width: 46ch;
}

.auth-legal {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.65;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Quizzes
   --------------------------------------------------------------------------
   Answering is reading too, so the question card keeps the lecture measure and
   line height rather than tightening into a form. Correct/incorrect is carried
   by a left border and a word, never by colour alone.
   ========================================================================== */

.prose { max-width: var(--read); }
.page-heading { font-size: 1.7rem; margin: 0 0 10px; }
.hint { font-size: 0.86rem; color: var(--text-muted); margin: 8px 0 0; }
.back-link { margin: 34px 0 0; font-size: 0.92rem; }

.quiz-meta { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 28px; }

.quiz-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 22px;
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.quiz-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.quiz-row-actions { display: flex; align-items: center; gap: 8px; }
.quiz-kind {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--paper-warm);
    color: var(--ink-soft);
    white-space: nowrap;
}
.quiz-kind.is-exam { background: var(--ink); color: #fff; }
.quiz-title { font-size: 0.95rem; }
.quiz-score { font-size: 0.86rem; color: var(--brass); font-weight: 700; }

.q-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 16px;
}
.q-card.r-ok { border-left-color: #4a7c59; }
.q-card.r-no { border-left-color: #7e2f27; }

.q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.q-num {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ink); color: #fff;
    font-size: 0.8rem; font-weight: 700;
}
.q-type { font-size: 0.76rem; color: var(--text-muted); letter-spacing: 0.03em; }
.r-mark { font-size: 0.8rem; font-weight: 700; margin-left: auto; }
.r-mark.ok { color: #3f6b4c; }
.r-mark.no { color: #7e2f27; }
.r-mark.pend { color: var(--brass); }

.q-prompt { line-height: 1.9; }
.q-prompt p { margin: 0 0 12px; }
.q-prompt p:last-child { margin-bottom: 0; }

.q-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    line-height: 1.7;
}
.q-choice:hover { background: var(--paper-warm); }
.q-choice input { margin-top: 7px; }
.q-choice.static { cursor: default; }
.q-choice.static:hover { background: none; }
.q-choice.c-right { border-color: #4a7c59; background: #f1f6f2; }
.q-choice.c-chosen-wrong { border-color: #7e2f27; background: #fbf2f0; }

/* While an exam is still being marked the student sees which option they chose
   and nothing more. Neutral on purpose: green or red here would answer the
   question the page is refusing to answer. */
.q-choice.c-chosen { border-color: var(--ink); background: var(--paper-warm); }
.c-tag { margin-left: auto; font-size: 0.74rem; font-weight: 700; color: #3f6b4c; white-space: nowrap; }

.q-input, .q-textarea {
    width: 100%;
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    background: var(--paper);
    color: var(--text);
}
.q-input:focus, .q-textarea:focus { outline: 2px solid var(--brass-soft); outline-offset: 1px; }
.q-textarea { resize: vertical; }

.r-answer { margin-top: 14px; padding: 12px 14px; background: var(--paper-warm); border-radius: 8px; }
.r-answer.r-model { background: #f1f6f2; }
.r-answer.r-feedback { background: #fdf7ec; }
.r-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 6px; }
.r-text { white-space: pre-wrap; line-height: 1.85; }
.r-answer .lecture-body { font-size: 1rem; line-height: 1.85; }
.r-answer .lecture-body p:last-child { margin-bottom: 0; }

.score-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brass);
    margin-bottom: 28px;
}
.score-card.is-pass { border-left-color: #4a7c59; }
.score-card.is-fail { border-left-color: #7e2f27; }
.score-card.is-pending { border-left-color: var(--brass); }
.score-n { font-family: var(--font-display); font-size: 2.4rem; color: var(--ink); line-height: 1; }
.score-detail { font-size: 0.92rem; color: var(--text-muted); }
.score-note { margin-top: 4px; }

@media (max-width: 640px) {
    .q-card { padding: 18px 16px; }
    .quiz-row { padding: 13px 16px; }
    .r-mark { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Certificates: the student's list, and the public verification page.
 *
 * These live here rather than in certificate.css, which is loaded only by the
 * printable sheet itself.
 * ------------------------------------------------------------------ */

.cert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brass);
    border-radius: var(--radius);
    margin-bottom: 12px;
}
.cert-row.is-revoked { border-left-color: #7e2f27; opacity: 0.75; }
.cert-row-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cert-title { font-family: var(--font-display); color: var(--ink); font-size: 1.05rem; }
.cert-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

.verify-form { display: flex; gap: 10px; align-items: center; margin: 22px 0 10px; flex-wrap: wrap; }
.verify-form .q-input { margin-top: 0; flex: 1 1 260px; letter-spacing: 0.06em; }

.verify-result {
    margin-top: 22px;
    padding: 20px 22px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
}
.verify-result.is-valid { border-left-color: #4a7c59; }
.verify-result.is-revoked { border-left-color: #7e2f27; }
.verify-result.is-none { border-left-color: var(--text-muted); }

.verify-verdict { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin-bottom: 12px; }

.verify-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.verify-facts dt { color: var(--text-muted); font-size: 0.84rem; }
.verify-facts dd { margin: 0; }

@media (max-width: 560px) {
    .verify-facts { grid-template-columns: 1fr; gap: 2px; }
    .verify-facts dd { margin-bottom: 10px; }
}

/* Certificate requirements on the course page. Met items are ticked as well
   as tinted, so the state does not depend on colour alone. */
.req-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brass);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 18px;
}
.req-box.is-done { border-left-color: #4a7c59; }
.req-head {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.req-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    padding: 3px 0 3px 20px;
    position: relative;
    color: var(--text-muted);
}
.req-line::before {
    content: "\2022";
    position: absolute;
    left: 2px;
    color: var(--line);
}
.req-line.is-met { color: var(--ink); }
.req-line.is-met::before { content: "\2713"; color: #4a7c59; }
.req-line.is-pending::before { content: "\22EF"; color: var(--brass); }


/* ==========================================================================
   Registration, the student's own account, and the legal pages
   ========================================================================== */

.auth-card-wide { max-width: 640px; }

/* The honeypot. Moved off-screen rather than display:none, because some bots
   deliberately skip hidden inputs - and kept out of the accessibility tree and
   the tab order so no real person can land in it. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-block {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0 0 22px;
    padding: 22px 0 0;
}
.form-block:first-of-type { border-top: none; padding-top: 0; }

.form-block legend,
.form-block > legend {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--ink);
    padding: 0;
    margin-bottom: 4px;
}

.block-note { font-size: 0.86rem; color: var(--text-muted); margin: 2px 0 16px; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--card);
    font-family: var(--font-body);
    font-size: 0.97rem;
    color: var(--text);
}
.field select:focus,
.field textarea:focus { outline: 2px solid var(--brass-soft); outline-offset: 1px; }

.field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--card);
    font-family: var(--font-body);
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--text);
    resize: vertical;
}

.static-value {
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Consent is the one place on the form where the checkbox is the point, so it
   gets more room than a normal control rather than less. */
.form-block-consent { background: var(--paper-warm); border-radius: var(--radius); padding: 20px; border-top: none; }
.consent { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; font-size: 0.93rem; line-height: 1.7; }
.consent input { margin-top: 6px; flex-shrink: 0; }
.consent a { color: var(--ink); font-weight: 600; }

.captcha { margin-top: 16px; }
/* reCAPTCHA renders a fixed-width iframe; let it scroll rather than push the
   page sideways on a narrow phone. */
.captcha > div { max-width: 100%; overflow-x: auto; }

.profile-progress { margin: 22px 0 30px; }
.profile-bar {
    height: 6px;
    background: var(--paper-warm);
    border-radius: 99px;
    overflow: hidden;
}
.profile-bar span { display: block; height: 100%; background: var(--brass); border-radius: 99px; }
.profile-bar-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 7px; }

.profile-consent {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
    color: var(--text-muted);
}
.profile-consent p { margin: 0 0 8px; }

.flash-ok {
    background: #eef6ef;
    border: 1px solid #c4ddc7;
    color: #2c6b32;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.92rem;
    margin-bottom: 22px;
}

/* ---------- Legal documents ---------- */

.legal-doc { font-size: 1rem; }
.legal-doc h2 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    margin: 40px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.legal-doc h3 { font-size: 1rem; margin: 26px 0 10px; }
.legal-doc p { margin: 0 0 14px; line-height: 1.9; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 1.4em; line-height: 1.9; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc strong { color: var(--ink); }

.legal-updated { font-size: 0.84rem; color: var(--text-muted); margin: 0 0 30px; }
.legal-lede { font-size: 1.04rem; color: var(--ink-soft); margin-bottom: 30px !important; }

/* The clauses a reader must not skim past - non-degree status, what happens to
   certificate records - are lifted out rather than left in the run of text. */
.legal-callout {
    background: var(--paper-warm);
    border-left: 3px solid var(--brass);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 18px 20px;
    margin: 20px 0 24px;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 0.92rem;
    display: block;
    overflow-x: auto;
}
.legal-table thead th {
    text-align: left;
    background: var(--paper-warm);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    font-weight: 600;
}
.legal-table th, .legal-table td {
    border: 1px solid var(--line);
    padding: 9px 12px;
    vertical-align: top;
    line-height: 1.7;
}

.legal-foot {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.7;
}

@media (max-width: 620px) {
    .field-pair { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Reading time, resume, chapter progress, weekly streak
   --------------------------------------------------------------------------
   All of this exists to answer one question a student actually has - "do I
   have time for this right now?" - and to make the near end (the chapter)
   visible instead of only the far one (the course).
   ========================================================================== */

/* This line sits inside the dark hero, so it cannot take the page's text
   tokens: `strong` was var(--ink) on a var(--ink) background, which made the
   name of the first lecture - the one thing the home page is built to offer -
   literally invisible. It had been that way since the hero was written. */
.hero-first { margin: 18px 0 0; font-size: 0.94rem; color: rgba(255,255,255,0.72); }
.hero-first strong { color: #fff; font-weight: 600; }
.hero-nosignup { display: block; margin-top: 3px; font-size: 0.86rem; }

/* Stated before the reading starts, in the reader's own column. */
.read-time {
    font-size: 0.86rem;
    color: var(--text-muted);
    padding-bottom: 14px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.read-of-chapter { color: var(--brass); }

.lec-min { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

/* One lecture, one button - the study screen leads with this. */
.resume {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brass);
    border-radius: var(--radius);
    padding: 24px 26px;
    margin-bottom: 26px;
}
.resume-label {
    font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brass); font-weight: 700;
}
.resume-title { font-family: var(--font-display); font-size: 1.3rem; margin: 8px 0 6px; line-height: 1.4; }
.resume-meta { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 18px; }
.resume-meta strong { color: var(--ink); }

/* The chapter is the unit that finishes this week. */
.chapter-meta {
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--text-muted); margin-top: 6px;
}
.chapter-count { font-variant-numeric: tabular-nums; }
.chapter-done { color: #3f6b4c; font-weight: 600; }
.chapter-head.is-complete { background: #f1f6f2; }

.chapter-bar {
    height: 4px; background: var(--paper-warm); border-radius: 99px;
    overflow: hidden; margin-top: 10px;
}
.chapter-bar span { display: block; height: 100%; background: var(--brass); border-radius: 99px; }

.chapter-progress-box {
    margin-top: 20px; padding: 16px 18px;
    background: var(--paper-warm); border-radius: var(--radius);
}
.chapter-progress-box.is-complete { background: #f1f6f2; }
.chapter-progress-box .chapter-bar { margin-top: 0; background: rgba(0,0,0,0.07); }
.chapter-progress-label { font-size: 0.86rem; color: var(--text-muted); margin-top: 9px; }
.chapter-progress-box.is-complete .chapter-progress-label { color: #3f6b4c; font-weight: 600; }

/* Weekly. A missed Tuesday breaks nothing, so nothing here scolds. */
.streak {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 14px 20px; margin-bottom: 26px;
    border-radius: var(--radius);
    background: var(--paper-warm);
}
.streak.is-kept { background: #f1f6f2; }
.streak-n { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.streak-note { font-size: 0.88rem; color: var(--text-muted); }

.streak-toast {
    margin-top: 16px; padding: 11px 16px;
    background: #f1f6f2; border-radius: var(--radius);
    font-size: 0.9rem; color: #3f6b4c;
}

@media (max-width: 620px) {
    .lec-min { margin-left: 0; width: 100%; }
}


/* ==========================================================================
   The lecture, in the shape it was written
   --------------------------------------------------------------------------
   99% of lectures share a six-part skeleton - objectives, anchor verse, body,
   summary, reflection questions - which the site used to render as one
   undifferentiated column. Each part now gets the form it was written in.

   The body column never changes width: 40em is the recommended line length for
   Korean text, and it is the one fixed point of this layout.
   ========================================================================== */

.read-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: transparent; z-index: 60; pointer-events: none;
}
.read-progress span { display: block; height: 100%; width: 0; background: var(--brass); }

.reader-grid { display: block; }
.lecture-title {
    font-family: var(--font-display); font-size: 1.85rem; line-height: 1.4;
    margin: 0 0 14px; color: var(--ink);
}

.lecture-intro { color: var(--ink-soft); }
.lecture-intro p:last-child { margin-bottom: 0; }

/* ---------- Contents rail ---------- */

.outline { display: none; }

@media (min-width: 1100px) {
    /* Two columns only where there is genuinely room. The body column keeps its
       exact width; the rail takes the space to its left. */
    .reader-grid {
        display: grid;
        grid-template-columns: 210px minmax(0, var(--read));
        gap: 54px;
        justify-content: center;
        align-items: start;
    }
    .outline { display: block; }
    .outline-inner {
        position: sticky; top: 26px;
        max-height: calc(100vh - 60px); overflow-y: auto; padding-right: 8px;
    }
}

.outline-head {
    font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 12px;
}
.outline ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.outline li { margin: 0; }
.outline a {
    display: block; padding: 5px 0 5px 14px; margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 0.86rem; line-height: 1.5; color: var(--text-muted); text-decoration: none;
}
.outline a:hover { color: var(--ink); }
.outline a.is-here { color: var(--ink); border-left-color: var(--brass); font-weight: 500; }
.outline .lvl-3 a { padding-left: 26px; font-size: 0.83rem; }
.outline .lvl-4 a { padding-left: 38px; font-size: 0.8rem; }

/* ---------- Objectives ---------- */

.goals {
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--brass);
    border-radius: var(--radius); padding: 20px 24px; margin: 28px 0;
}
.goals-head {
    font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brass); font-weight: 700; margin: 0 0 12px;
}
.goals ul { margin: 0; padding-left: 18px; }
.goals li { margin-bottom: 7px; line-height: 1.75; }
.goals li:last-child { margin-bottom: 0; }

/* ---------- Anchor verse ---------- */

.anchor-verses { margin: 34px 0; }
.anchor-verse {
    margin: 0 0 16px; padding: 24px 28px; border: none;
    background: var(--paper-warm); border-radius: var(--radius);
    text-align: center;
}
.anchor-verse:last-child { margin-bottom: 0; }
.anchor-verse p {
    font-family: var(--font-display); font-size: 1.16rem; line-height: 1.85;
    color: var(--ink); margin: 0;
}
.anchor-verse cite {
    display: block; margin-top: 12px; font-style: normal;
    font-size: 0.84rem; letter-spacing: 0.04em; color: var(--brass);
}

/* ---------- Summary ---------- */

.summary-card {
    margin: 44px 0 0; padding: 22px 26px;
    background: #f1f6f2; border-radius: var(--radius);
}
.summary-head {
    font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #3f6b4c; font-weight: 700; margin: 0 0 12px;
}
.summary-card .lecture-body { font-size: 1rem; line-height: 1.85; }
.summary-card .lecture-body p:last-child,
.summary-card .lecture-body ul:last-child { margin-bottom: 0; }
.summary-link { display: inline-block; margin-top: 14px; font-size: 0.88rem; color: #3f6b4c; }

/* ---------- Recall check ---------- */

.recall { margin-top: 30px; padding: 20px 24px; border: 1px dashed var(--line); border-radius: var(--radius); }
.recall-head { font-size: 1rem; margin: 0 0 6px; }
.recall-note { font-size: 0.86rem; color: var(--text-muted); margin: 0 0 14px; }
.recall-list { list-style: none; margin: 0; padding: 0; }
.recall-list li { margin-bottom: 9px; }
.recall-list label { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; line-height: 1.7; }
.recall-list input { margin-top: 7px; flex-shrink: 0; }
.recall-list input:checked + span { color: var(--text-muted); text-decoration: line-through; }

/* ---------- Reflection ---------- */

.reflect { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.reflect-head { font-size: 1.14rem; margin-bottom: 8px; }
.reflect-lead { font-size: 0.95rem; color: var(--text-muted); }
.reflect-note { font-size: 0.86rem; color: var(--text-muted); margin: 0 0 20px; }

.reflect-q { margin-bottom: 22px; padding: 16px 18px; background: var(--paper-warm); border-radius: var(--radius); }
.reflect-q.is-answered { background: #f1f6f2; }
.q-text { font-size: 0.97rem; line-height: 1.75; margin-bottom: 12px; color: var(--ink); }
.reflect-q textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--card); font-family: var(--font-body); font-size: 0.97rem;
    line-height: 1.8; color: var(--text); resize: vertical;
}
.reflect-q textarea:focus { outline: 2px solid var(--brass-soft); outline-offset: 1px; }
.reflect-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.saved-mark { font-size: 0.84rem; color: #3f6b4c; }
.reflect-plain { padding-left: 18px; }
.reflect-plain li { margin-bottom: 8px; line-height: 1.75; }
.reflect-all { margin-top: 6px; font-size: 0.9rem; }

/* ---------- Diagram zoom ---------- */

.lecture-body img.zoomable { cursor: zoom-in; }
.zoom {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(18, 34, 30, 0.94);
    display: flex; align-items: center; justify-content: center;
    padding: 28px; cursor: zoom-out;
}
.zoom img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 6px; padding: 12px; }
.zoom-close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none; color: #fff; font-size: 2rem;
    line-height: 1; cursor: pointer; padding: 6px 12px;
}

/* ---------- Review mode ---------- */

.review-modes { display: flex; gap: 10px; margin: 20px 0 8px; flex-wrap: wrap; }
.review-hint { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 22px; max-width: var(--read); }
.review-chapter { margin-top: 34px; }
.review-ch-head {
    font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 14px;
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.review-ch-head .n { color: var(--brass); font-size: 0.8rem; letter-spacing: 0.05em; margin-right: 8px; }

.review-card {
    padding: 16px 20px; margin-bottom: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.review-card-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.review-card-head a { font-weight: 600; color: var(--ink); text-decoration: none; }
.review-card-head a:hover { text-decoration: underline; }
.review-min { font-size: 0.8rem; color: var(--text-muted); margin-left: auto; }
.review-summary { font-size: 0.97rem; line-height: 1.85; }
.review-summary p:last-child, .review-summary ul:last-child { margin-bottom: 0; }
.review-reveal summary { cursor: pointer; font-size: 0.9rem; color: var(--brass); padding: 4px 0; }
.review-reveal[open] summary { margin-bottom: 10px; }

/* ---------- Notebook ---------- */

.note-entry { padding: 20px 0; border-bottom: 1px solid var(--line); }
.note-where { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 0.86rem; margin-bottom: 10px; }
.note-when { color: var(--text-muted); margin-left: auto; }
.note-q { font-size: 0.94rem; color: var(--ink); margin-bottom: 8px; }
.note-a { white-space: pre-wrap; line-height: 1.85; color: var(--text-muted); }

/* Wide tables are common in this material and unreadable on a phone; each row
   folds into its own block with the column name in front of the value. */
@media (max-width: 620px) {
    .lecture-title { font-size: 1.45rem; }
    .anchor-verse { padding: 18px 16px; }
    .anchor-verse p { font-size: 1.04rem; }
    .review-min { margin-left: 0; }
}


/* ==========================================================================
   Scripture, glossary, highlighting
   --------------------------------------------------------------------------
   45,310 scripture references across the corpus were dead text; a student
   reading theology opens their Bible every few minutes, and this removes that
   trip. The glossary marks only the FIRST appearance of a term in a lecture -
   a page of dotted underlines is noise, not help.
   ========================================================================== */

.scripture {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--brass);
    cursor: help;
}
.scripture:hover { border-bottom-style: solid; color: var(--brass); }

.term {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-bottom: 1px dashed var(--text-muted);
    padding: 0;
    cursor: help;
}
.term:hover { border-bottom-color: var(--ink); }

/* ---------- Popover ---------- */

.popover {
    position: absolute;
    z-index: 80;
    max-width: min(400px, calc(100vw - 24px));
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 34px rgba(20, 40, 34, 0.16);
    padding: 16px 18px;
    font-size: 0.94rem;
    line-height: 1.8;
}
.pop-head {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--ink);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft, var(--line));
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.pop-version { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-muted); }
.pop-body { max-height: 320px; overflow-y: auto; }
.pop-body p { margin: 0 0 8px; }
.pop-body p:last-child { margin-bottom: 0; }
.pop-loading { color: var(--text-muted); font-size: 0.88rem; }
.pop-foot { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); }
.pop-link { display: inline-block; margin-top: 12px; font-size: 0.84rem; color: var(--brass); }
.pop-remove {
    margin-top: 6px; background: none; border: 1px solid var(--line);
    border-radius: 6px; padding: 5px 12px; font: inherit; font-size: 0.84rem;
    color: var(--text-muted); cursor: pointer;
}
.pop-remove:hover { border-color: #7e2f27; color: #7e2f27; }

.v-num {
    font-size: 0.7em;
    color: var(--brass);
    vertical-align: super;
    margin-right: 5px;
    font-weight: 700;
}

/* ---------- Passage page ---------- */

.passage { font-size: 1.04rem; line-height: 1.95; }
.passage-verse { margin: 0 0 12px; }

/* ---------- Highlighting ---------- */

mark.hl { background: transparent; color: inherit; padding: 1px 0; border-radius: 2px; }
mark.hl-yellow { background: rgba(232, 197, 71, 0.34); }
mark.hl-green  { background: rgba(124, 191, 140, 0.32); }
mark.hl-blue   { background: rgba(126, 176, 214, 0.32); }
mark.hl-pink   { background: rgba(224, 143, 168, 0.30); }
/*
 * Shared marks: the sentences enough readers have published a mark on.
 *
 * A dotted rule, never a fill. The four fills belong to the reader's own pen,
 * and a lecture where the school's marks competed with your own for the same
 * colour would be unreadable - the shared layer has to sit under the reading,
 * not in it. Where a sentence is both yours and the school's, your colour
 * stays and only picks up the dotted rule.
 */
mark.hl-shared {
    background: transparent; color: inherit; padding: 1px 0;
    border-bottom: 2px dotted var(--brass-soft); cursor: pointer;
}
mark.hl-shared:hover { background: rgba(138, 106, 82, 0.10); }
mark.hl[data-marks] { border-bottom: 2px dotted var(--brass); cursor: pointer; }
mark.hl[data-note] { border-bottom: 2px solid var(--brass); cursor: pointer; }

.pop-marks {
    margin: 0 0 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 0.86rem; color: var(--brass);
}
.pop-marks:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.pop-share {
    margin-top: 6px; margin-right: 6px; background: none;
    border: 1px solid var(--brass-soft); border-radius: 6px;
    padding: 5px 12px; font: inherit; font-size: 0.84rem;
    color: var(--brass); cursor: pointer;
}
.pop-share:hover { border-color: var(--brass); background: rgba(138, 106, 82, 0.08); }
.pop-hint { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--text-muted); }

.hl-bar {
    position: absolute;
    z-index: 85;
    display: flex;
    gap: 6px;
    padding: 7px 9px;
    background: var(--ink);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(20, 40, 34, 0.28);
}
.hl-bar .sw {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0;
}
.sw-yellow { background: #e8c547; }
.sw-green  { background: #7cbf8c; }
.sw-blue   { background: #7eb0d6; }
.sw-pink   { background: #e08fa8; }

.hl-entry { padding: 18px 0; border-bottom: 1px solid var(--line); }
.hl-quote { border-left: 3px solid var(--brass); padding-left: 14px; line-height: 1.85; }
.hl-where { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.86rem; margin-bottom: 10px; }
.hl-when { color: var(--text-muted); margin-left: auto; }

.hl-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.hl-state {
    font-size: 0.76rem; letter-spacing: 0.06em; color: var(--text-muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
.hl-state.is-public { color: var(--brass); border-color: var(--brass-soft); }
.hl-toggle {
    background: none; border: 1px solid var(--line); border-radius: 6px;
    padding: 4px 12px; font: inherit; font-size: 0.82rem;
    color: var(--text-muted); cursor: pointer;
}
.hl-toggle:hover { border-color: var(--brass-soft); color: var(--brass); }

/* ---------- Wide tables on a phone ---------- */

@media (max-width: 620px) {
    /* 8,184 tables, some 58 rows deep. A table that scrolls sideways on a
       phone is not read; each row becomes its own block instead, with the
       column name in front of the value. */
    .lecture-body table,
    .lecture-body thead,
    .lecture-body tbody,
    .lecture-body tr,
    .lecture-body th,
    .lecture-body td { display: block; }

    .lecture-body thead { position: absolute; left: -9999px; }

    .lecture-body tr {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        margin-bottom: 12px;
        padding: 4px 0;
        background: var(--card);
    }

    .lecture-body td {
        border: none;
        border-bottom: 1px solid var(--line-soft, var(--paper-warm));
        padding: 8px 14px;
    }
    .lecture-body tr td:last-child { border-bottom: none; }

    .lecture-body td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        margin-bottom: 3px;
    }
}

/* Korean and English side by side. Much of this material argues from the Greek,
   and the two translations often differ exactly where the argument lives. */
.passage-modes { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 26px; }
.passage-en-title { display: block; font-size: 0.9rem; color: var(--text-muted); margin-top: 4px; }

.parallel { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.parallel-head {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line); border-bottom: 1px solid var(--line);
}
.parallel-head div {
    background: var(--paper-warm); padding: 9px 16px;
    font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-soft);
}
.parallel-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line); border-bottom: 1px solid var(--line);
}
.parallel-row:last-child { border-bottom: none; }
.parallel-ko, .parallel-en { background: var(--card); padding: 13px 16px; line-height: 1.85; }
.parallel-en { color: var(--text-muted); font-size: 0.95rem; }
.parallel-en .v-num { visibility: hidden; }

.pop-pair { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.pop-pair:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pop-ko { margin: 0 0 5px; }
.pop-en { margin: 0; font-size: 0.88rem; color: var(--text-muted); padding-left: 14px; }

.pop-actions { display: flex; gap: 14px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.pop-compare {
    background: none; border: 1px solid var(--line); border-radius: 6px;
    padding: 4px 11px; font: inherit; font-size: 0.8rem;
    color: var(--brass); cursor: pointer;
}
.pop-compare:hover { border-color: var(--brass); }
.pop-actions .pop-link { margin-top: 0; }

@media (max-width: 620px) {
    /* Stacked rather than columns - two 20-character columns are unreadable. */
    .parallel-head { display: none; }
    .parallel-row { grid-template-columns: 1fr; }
    .parallel-en { padding-top: 0; padding-left: 30px; }
    .parallel-en .v-num { display: none; }
}

/* The student's own note on a lecture. Closed until clicked so it never
   competes with the reading; already open when something is written, so nobody
   has to hunt for their own words. */
/* ---- student papers -----------------------------------------------------

   A paper is a student's work published on a school's site, which is a thing a
   reader will misread unless the page is emphatic. `.pp-standing` is that
   emphasis: it sits above the text, and the promoted variant is the only place
   on the site that says the school agrees.                                 */

.pp-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.pp-head { display: flex; gap: 8px; align-items: baseline; font-size: 0.78rem; }
.pp-state {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brass);
}
.pp-returned .pp-state { color: var(--seal); }
.pp-course { margin-left: auto; color: var(--text-muted); }
.pp-title { margin: 4px 0 2px; font-size: 1.04rem; }
.pp-meta { margin: 0; font-size: 0.84rem; color: var(--text-muted); }
.pp-late { color: var(--seal); font-weight: 600; }

.pp-gloss {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brass);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.pp-review, .pp-feedback {
    margin-top: 10px;
    padding: 10px 14px;
    border-left: 3px solid var(--brass-soft);
    background: var(--paper-warm);
    font-size: 0.9rem;
}
.pp-review > summary { cursor: pointer; color: var(--brass); font-size: 0.86rem; }
.pp-feedback h2 { margin: 0 0 6px; font-size: 0.9rem; }

.pp-standing {
    margin: 0 0 26px;
    padding: 12px 16px;
    border-left: 3px solid var(--line);
    background: var(--paper-warm);
    font-size: 0.88rem;
}
.pp-standing strong { display: block; margin-bottom: 4px; }
.pp-standing p { margin: 0; color: var(--ink-soft); }
.pp-standing.is-gloss { border-left-color: var(--brass); }

.pp-h1 { margin-bottom: 2px; }
.pp-byline { margin: 0 0 22px; font-size: 0.86rem; color: var(--text-muted); }
.pp-body { font-size: 1.02rem; }
.pp-sources {
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}
.pp-sources h2 { font-size: 0.95rem; }

.pp-check { list-style: none; margin: 0 0 14px; padding: 0; }
.pp-check li { margin-bottom: 6px; font-size: 0.92rem; }
.pp-check input { margin-right: 8px; }
.pp-withdraw { margin-top: 22px; }
.pp-how { margin-top: 28px; font-size: 0.88rem; color: var(--text-muted); }

.pp-declared {
    margin-bottom: 22px;
    padding: 12px 16px;
    border-left: 3px solid var(--brass-soft);
    background: var(--paper-warm);
    font-size: 0.9rem;
}
.pp-declared h2 { margin: 0 0 6px; font-size: 0.88rem; }
.pp-declared ul { margin: 0 0 12px; padding-left: 1.2em; }

.cp-papers { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.cp-papers h2 { font-size: 1.02rem; }
.cp-paper { padding: 8px 0; }
.cp-paper h3 { margin: 0; font-size: 0.98rem; }
.cp-paper-meta { margin: 2px 0 0; font-size: 0.84rem; color: var(--text-muted); }

/* ---- primary sources ----------------------------------------------------

   A source page is a document, not a lecture: wider measure, no cards, and the
   provenance block above the text rather than below it.

   `.src-mark` is the in-lecture link. It is deliberately quieter than a
   scripture link - the title is already long and distinctive, so it does not
   need a strong underline to be findable.                                  */

.src-mark {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--brass-soft);
}
.src-mark:hover, .src-mark:focus { border-bottom-color: var(--brass); color: var(--brass); }

.src-card { margin: 6px 0 26px; }
.src-kind {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--brass);
}
.src-name { margin: 4px 0 2px; }
.src-original { margin: 0; color: var(--text-muted); font-style: italic; }
.src-meta { margin: 8px 0 0; font-size: 0.86rem; color: var(--text-muted); }
.src-meta span + span::before { content: " \B7 "; }

.src-provenance {
    margin: 0 0 30px;
    padding: 14px 18px;
    border-left: 3px solid var(--brass-soft);
    background: var(--paper-warm);
    font-size: 0.9rem;
}
.src-provenance h2 {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.src-provenance p { margin: 0 0 6px; }
.src-provenance p:last-child { margin-bottom: 0; }

.src-text { font-size: 1.04rem; }
.src-text blockquote {
    margin: 0 0 14px;
    padding-left: 16px;
    border-left: 2px solid var(--line);
}

.src-orig {
    margin: 30px 0 0;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.src-orig[open] { border-style: solid; }
.src-orig > summary {
    cursor: pointer;
    padding: 12px 18px;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--brass);
    font-size: 0.92rem;
}
.src-orig > summary::-webkit-details-marker { display: none; }
.src-orig-note { font-size: 0.8rem; color: var(--text-muted); }
.src-orig > .lecture-body { padding: 0 18px 8px; font-size: 0.94rem; }

.src-note { margin-top: 34px; }
.src-note h2, .src-lectures h2 { font-size: 1.02rem; }

.src-lectures { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.src-lecture-list { list-style: none; margin: 0; padding: 0; }
.src-lecture-list li { margin-bottom: 2px; }
.src-lecture-list a {
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
}
.src-lecture-list a:hover { background: var(--paper-warm); }
.src-l-code {
    flex-shrink: 0;
    width: 4.6em;
    color: var(--brass);
    font-size: 0.82rem;
    font-weight: 700;
}

.src-licence {
    padding: 12px 16px;
    border-left: 3px solid var(--brass-soft);
    background: var(--paper-warm);
    font-size: 0.88rem;
}
.src-group { margin-top: 30px; font-size: 1.05rem; }
.src-index { list-style: none; margin: 0; padding: 0; }
.src-index li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.src-index a { text-decoration: none; color: var(--text); }
.src-index a:hover .src-i-title { color: var(--brass); }
.src-i-title { font-weight: 600; }
.src-i-era { margin-left: 8px; font-size: 0.84rem; color: var(--text-muted); }
.src-i-original { display: block; font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
.src-growing { margin-top: 30px; font-size: 0.88rem; color: var(--text-muted); }

/* ---- footnotes ----------------------------------------------------------

   The marker is a raised number, not a bracketed link: this is a seminary
   text, and the apparatus should read like one. Clicking it opens the note in
   a popover (reader.js); the list below is what prints and what a reader with
   no JavaScript falls back to.                                             */

.lecture-body sup:has(> .fn-ref) { line-height: 0; }
.fn-ref {
    text-decoration: none;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--brass);
    padding: 0 1px;
    border-bottom: none;
}
.fn-ref:hover, .fn-ref:focus { color: var(--seal); }

.fn-list {
    margin: 34px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.fn-list::before {
    content: "\C8FC";                    /* 주 - the notes below the text */
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
:root:lang(en) .fn-list::before { content: "NOTES"; }
.fn-list ol { margin: 0; padding-left: 1.4em; }
.fn-item { margin-bottom: 6px; }
.fn-item p { margin: 0; }
.fn-item:target { background: var(--paper-warm); border-radius: 4px; }
.fn-back { text-decoration: none; color: var(--brass); font-size: 0.9em; }

/* Inside the collapsed layer the notes are already in a tinted box. */
.deeper .fn-list { border-top-color: var(--brass-soft); }

/* ---- the deeper layer ---------------------------------------------------

   Closed by default and styled to read as a *door*, not as a section that got
   collapsed. It sits between the body and the summary card, so it must not
   look heavier than either: a left rule and a tinted ground, no box shadow.

   The minutes on the toggle are the whole point of the row - a reader decides
   whether to open it on that number.                                       */

.deeper {
    margin-top: 30px;
    border-left: 3px solid var(--brass-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--paper-warm);
}
.deeper[open] { padding-bottom: 6px; }
.deeper > summary {
    cursor: pointer;
    padding: 14px 20px;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--brass);
    font-size: 0.98rem;
    font-weight: 600;
}
.deeper > summary::-webkit-details-marker { display: none; }
.deeper > summary::after {
    content: "\203A";                 /* a single angle quote: "there is more this way" */
    margin-left: auto;
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.deeper[open] > summary::after { transform: rotate(90deg); }
.deeper-mins {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.deeper-note {
    margin: 0 20px 4px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.deeper > .lecture-body { padding: 0 20px; }

/* The layer never competes with the lecture: its headings start a step down
   from the body's, whatever level the author wrote them at. */
.deeper > .lecture-body h2 { font-size: 1.12rem; }
.deeper > .lecture-body h3 { font-size: 1rem; }

@media (max-width: 640px) {
    .deeper > summary { padding: 12px 14px; }
    .deeper-note { margin: 0 14px 4px; }
    .deeper > .lecture-body { padding: 0 14px; }
}

.my-note {
    margin-top: 30px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.my-note[open] { border-style: solid; border-color: var(--brass-soft); }
.my-note > summary {
    cursor: pointer;
    padding: 14px 20px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brass);
    font-size: 0.94rem;
}
.my-note > summary::-webkit-details-marker { display: none; }
.my-note > summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}
.my-note[open] > summary::before { content: "\2212"; }
.my-note > summary:hover { color: var(--ink); }

/* Stated rather than assumed. A closed <details> hides its contents through the
   browser's own stylesheet - exactly the kind of default a class here can
   override without anyone noticing, which is how `hidden` was lost under
   .zoom. The form is laid out only when the box is open. */
.my-note:not([open]) form { display: none; }
.my-note form { padding: 0 20px 18px; }
.my-note textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--text);
    resize: vertical;
}
.my-note textarea:focus { outline: 2px solid var(--brass-soft); outline-offset: 1px; }

.note-kind {
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 8px;
}

/* ==========================================================================
   Greek and Hebrew
   --------------------------------------------------------------------------
   Marked differently from a glossary term on purpose. A dashed underline says
   "there is a definition here"; these words want to say "you can say this out
   loud", so they carry the brass the rest of the site uses for the original
   languages and sit on a faint tint rather than a line.
   ========================================================================== */

.ow {
    font: inherit;
    color: inherit;
    background: rgba(138, 106, 82, 0.10);
    border: none;
    border-bottom: 1px solid var(--brass-soft);
    border-radius: 3px;
    padding: 0 2px;
    cursor: pointer;
}

.ow:hover,
.ow:focus-visible { background: rgba(138, 106, 82, 0.22); }

/* Greek and Hebrew both need a face that actually has the glyphs, and Hebrew
   needs the extra size - pointed text at body size is unreadable. */
.ow[lang="grc"] { font-family: 'Gentium Plus', 'Palatino Linotype', Palatino, Georgia, serif; }
.ow[lang="hbo"],
[lang="hbo"] {
    font-family: 'SBL Hebrew', 'Times New Roman', 'David', serif;
    font-size: 1.12em;
    direction: rtl;
    unicode-bidi: isolate;
}

.ow-entry + .ow-entry { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.ow-reading { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.ow-translit { font-size: 0.82rem; font-weight: 400; color: var(--text-muted); font-style: italic; }
.ow-gloss { font-size: 0.9rem; }
.ow-auto { font-size: 0.76rem; color: var(--text-muted); }

/* The attribution the data licences require. Quiet, but present. */
.ow-source {
    font-size: 0.74rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 30px auto 0;
}

/* -------------------------------------------------------------- word page */

.ow-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 32px;
    text-align: center;
}

.ow-lang { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.ow-lemma { font-size: 2.6rem; margin: 8px 0 4px; line-height: 1.25; }
.ow-reading-big { font-size: 1.5rem; font-weight: 600; color: var(--brass); margin: 0 0 6px; }
.ow-translit-line { display: flex; gap: 14px; justify-content: center; font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin: 0 0 16px; }
.ow-gloss-big { font-size: 1.02rem; margin: 0; }
.ow-gloss-en { font-size: 0.85rem; color: var(--text-muted); margin: 8px 0 0; }
.ow-derivation { font-size: 0.88rem; color: var(--text-muted); }

.ow-h2 { font-family: var(--font-display); font-size: 1.2rem; margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

.ow-lectures { list-style: none; padding: 0; margin: 0; }
.ow-lectures li { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); }
.ow-lectures a { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; flex: 1; text-decoration: none; }
.ow-lectures a:hover .ow-lec { text-decoration: underline; }
.ow-course { font-size: 0.76rem; letter-spacing: 0.06em; color: var(--brass); min-width: 62px; }
.ow-hits { font-size: 0.76rem; color: var(--text-muted); }

.ow-nearby { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.ow-nearby a {
    display: inline-flex; gap: 7px; align-items: baseline;
    border: 1px solid var(--line); border-radius: 30px;
    padding: 6px 14px; text-decoration: none; font-size: 0.86rem;
}
.ow-nearby a:hover { border-color: var(--brass-soft); }
.ow-nearby span { color: var(--text-muted); font-size: 0.8rem; }

/* One line under a course title, so the catalogue is browsable without
   opening every card. Clamped: the teaser is written short, but a
   hand-edited description must not be able to stretch the grid. */
.c-teaser {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 6px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The lead sentence on a course page: the same line the catalogue card and the
   search-result snippet carry, set larger so it reads as an opening rather
   than as the first line of the body. */
.course-intro { margin-bottom: 40px; }

.course-lead {
    font-family: var(--font-display);
    font-size: 1.16rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- search --
   The form is the page: someone who lands here has come to type something,
   so the field is the first thing under the heading and takes the focus. */
.search-form { display: flex; gap: 8px; margin: 18px 0 26px; }
.search-form input {
    flex: 1; min-width: 0; padding: 11px 14px; font: inherit;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit;
}
.search-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.search-form button {
    padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer;
    border: 0; border-radius: 8px; background: var(--ink); color: #fff;
}

.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { padding: 16px 0; border-top: 1px solid var(--line); }
.search-results li:first-child { border-top: 0; }
.search-results a { font-weight: 600; text-decoration: none; }
.search-results a:hover { text-decoration: underline; }
.search-where { margin: 3px 0 0; font-size: .86rem; color: var(--text-muted); }
.search-snippet { margin: 7px 0 0; font-size: .93rem; color: var(--text-muted); line-height: 1.6; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- one place --
   Same shape as the original-language word page: the gazetteer entry on top,
   and underneath it the thing no gazetteer has - our own lectures. */
.pl-card { padding: 22px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.pl-kind { margin: 0; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pl-name { margin: 6px 0 2px; font-size: 2rem; }
.pl-en { margin: 0; color: var(--text-muted); }
.pl-coords { margin: 10px 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pl-conf { margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--paper-warm); }
.pl-auto { margin: 10px 0 0; font-size: .86rem; color: var(--brass); }

.pl-map { margin: 24px 0; }
.pl-map svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.pl-map figcaption { margin-top: 8px; font-size: .84rem; color: var(--text-muted); }
/* Pins on the real base map. Sizes come from the template, which derives them
   from how far the frame is zoomed in. */
.pl-dot { fill: #6b6357; stroke: #fff; stroke-width: .5; vector-effect: non-scaling-stroke; }
.pl-dot-here { fill: var(--brass); stroke: #fff; stroke-width: .8; vector-effect: non-scaling-stroke; }
.pl-label, .pl-label-here {
    font-family: var(--font-body); paint-order: stroke;
    stroke: #faf8f3; stroke-width: 2.5px; stroke-linejoin: round;
}
.pl-label { fill: #4a443b; }
.pl-label-here { font-weight: 700; fill: var(--ink-deep); }

.pl-h2 { margin: 30px 0 12px; font-size: 1.15rem; }
.pl-verses { margin: 0; padding-left: 1.4em; }
.pl-verses li { padding: 5px 0; }
.pl-verses a { font-weight: 600; white-space: nowrap; }
.pl-verse-text { display: block; color: var(--text-muted); font-size: .92rem; line-height: 1.6; }

.pl-lectures { list-style: none; margin: 0; padding: 0; }
.pl-lectures li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.pl-lectures li:first-child { border-top: 0; }
.pl-lectures a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; flex: 1; }
.pl-lectures a:hover .pl-lec { text-decoration: underline; }
.pl-course { font-size: .8rem; color: var(--text-muted); min-width: 4.2em; }
.pl-hits { font-size: .82rem; color: var(--text-muted); }
.pl-credit { margin-top: 34px; font-size: .82rem; color: var(--text-muted); }

/* A place name in a lecture. Quieter than the glossary's dotted underline and
   the original-language button: a lecture names a dozen places and they are
   context, not the argument. */
.pl-mark {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--brass-soft);
}
.pl-mark:hover { border-bottom-color: var(--brass); background: var(--paper-warm); }

/* ------------------------------------------------------------- journeys -- */
.jn-title { margin: 6px 0 2px; }
.jn-sub { margin: 0 0 22px; color: var(--text-muted); }
.jn-map { margin: 0 0 26px; }
.jn-map svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.jn-sea { fill: #dbe7ef; }
.jn-land { fill: #faf8f3; }
.jn-coast { fill: none; stroke: #8d9aa5; stroke-width: .8; vector-effect: non-scaling-stroke; }
.jn-river { fill: none; stroke: #a8c6da; stroke-width: .8; vector-effect: non-scaling-stroke; }
.jn-lake { fill: #dbe7ef; stroke: #a8c6da; stroke-width: .6; vector-effect: non-scaling-stroke; }
.jn-route { fill: none; stroke: var(--brass); stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.jn-pin { fill: var(--brass); stroke: #fff; stroke-width: .6; vector-effect: non-scaling-stroke; }
.jn-pin.is-approx { fill: #b9a274; }
.jn-num { fill: #fff; font-weight: 700; font-family: var(--font-body); }
.jn-label { fill: var(--ink-deep); font-family: var(--font-body); paint-order: stroke;
            stroke: #faf8f3; stroke-width: 2.5px; stroke-linejoin: round; }

.jn-stops { margin: 0; padding-left: 1.5em; }
.jn-stops li { padding: 5px 0; }
.jn-stop-name a { font-weight: 600; }
.jn-ref { margin-left: 8px; font-size: .85rem; color: var(--text-muted); }
.jn-approx { margin-left: 8px; font-size: .78rem; color: var(--brass); }
.jn-course { margin-top: 26px; }

.jn-list { list-style: none; margin: 0; padding: 0; }
.jn-list li { padding: 14px 0; border-top: 1px solid var(--line); }
.jn-list li:first-child { border-top: 0; }
.jn-list a { text-decoration: none; display: block; }
.jn-list a:hover .jn-list-title { text-decoration: underline; }
.jn-list-title { font-weight: 600; font-size: 1.05rem; }
.jn-list-sub { display: block; color: var(--text-muted); font-size: .92rem; margin-top: 2px; }
.jn-list-meta { display: block; margin-top: 4px; font-size: .82rem; color: var(--text-muted); }
.jn-note { display: block; margin-top: 2px; font-size: .9rem; color: var(--text-muted); line-height: 1.55; }

/* ------------------------------------------------------------- timeline -- */
.tl-legend { display: flex; align-items: center; gap: 8px; font-size: .86rem;
             color: var(--text-muted); margin: 0 0 26px; }
.tl-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.tl-key-world { background: var(--ink); }
.tl-key-korea { background: var(--brass); margin-left: 14px; }

.tl-era { margin: 34px 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
          display: flex; align-items: baseline; gap: 10px; font-size: 1.2rem; }
.tl-era-span { font-size: .84rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* The rail is a border on the list, so it is one line however many items there
   are and it cannot drift out of step with them. */
.tl-rail { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--line); }
.tl-item { position: relative; padding: 12px 0 12px 18px; }
.tl-dot { position: absolute; left: -25px; top: 18px; width: 10px; height: 10px;
          border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); }
.tl-korea .tl-dot { background: var(--brass); }
.tl-korea .tl-body { border-left: 3px solid var(--brass-soft); padding-left: 12px; }

/* Stacked, the year is a caption above a heading and reads as neither. Given
   its own column it becomes the thing you scan by, which is what a timeline is
   navigated with. Below 900px there is only one lane, so it goes back to
   sitting above the title - still large, just not in a gutter that no longer
   exists. */
.tl-year { margin: 0 0 2px; font-variant-numeric: tabular-nums; line-height: 1; }
.tl-year-n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
             letter-spacing: -.01em; color: var(--ink); }
.tl-korea .tl-year-n { color: var(--brass); }
.tl-year-full { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip-path: inset(50%); white-space: nowrap; }
.tl-name { margin: 0; font-size: 1.02rem; }
.tl-note { margin: 4px 0 0; color: var(--text-muted); font-size: .93rem; line-height: 1.6; }
.tl-links { margin: 6px 0 0; font-size: .82rem; display: flex; gap: 12px; }
.tl-lectures { list-style: none; margin: 8px 0 0; padding: 0; }
.tl-lectures li { padding: 2px 0; font-size: .88rem; }
.tl-lectures a { text-decoration: none; }
.tl-lectures a:hover { text-decoration: underline; }
.tl-course { color: var(--text-muted); margin-right: 6px; }

@media (min-width: 900px) {
    /* Two lanes: the world on the left of the rail, Korea on the right. Below
       this width they stack, because two 300px columns of Korean prose is
       worse than one readable one. */
    .tl-rail { padding-left: 0; margin-left: 50%; border-left: 2px solid var(--line); }
    .tl-item { width: 100%; }
    .tl-world { transform: translateX(-100%); padding-left: 0; padding-right: 26px; text-align: right; }
    .tl-world .tl-dot { left: auto; right: -31px; }
    .tl-world .tl-links, .tl-world .tl-legend { justify-content: flex-end; }
    .tl-korea { padding-left: 26px; }
    .tl-korea .tl-dot { left: -31px; }

    .tl-eras { max-width: 1040px; margin: 0 auto; }

    /* The gutter the year lives in. Its width is set by four digits at 1.75rem
       plus the room the dot needs, and the text beside it is indented by
       exactly that much so nothing runs underneath. */
    .tl-item { --tl-gutter: 84px; }
    .tl-year { position: absolute; top: 10px; margin: 0; }
    .tl-year-n { font-size: 1.75rem; }

    .tl-world { padding-right: calc(26px + var(--tl-gutter)); }
    .tl-world .tl-year { right: 26px; text-align: right; }

    .tl-korea { padding-left: calc(26px + var(--tl-gutter)); }
    .tl-korea .tl-year { left: 26px; text-align: left; }
    .tl-korea .tl-body { border-left: 3px solid var(--brass-soft); padding-left: 12px; }
}

/* Context layers shared by the journey and place maps. Everything here is
   quiet on purpose: the page's own subject is drawn over it and must read
   first. */
.mp-region {
    fill: #8a7f6d; opacity: .75; font-family: var(--font-body); font-weight: 600;
    paint-order: stroke; stroke: #faf8f3; stroke-width: 3px; stroke-linejoin: round;
    text-transform: none; pointer-events: none;
}
.mp-dot { fill: #a49b8c; }
.mp-peak { fill: #9a8f7c; }
.mp-label {
    fill: #6f6656; font-family: var(--font-body); pointer-events: none;
    paint-order: stroke; stroke: #faf8f3; stroke-width: 2px; stroke-linejoin: round;
}

/* --------------------------------------------- the divided-monarchy chart --
   Four columns on one year axis. It scrolls sideways on a narrow screen rather
   than reflowing: reading across the columns is the whole point, and stacking
   them would leave a list of kings. */
.ot-source { font-size: .86rem; color: var(--text-muted); }
.ot-scroll { overflow-x: auto; margin: 22px 0; padding-bottom: 8px; }
/* The columns set their own widths now, so the chart is as wide as its content
   and the scroller carries the overflow. min-width keeps it filling a wide
   screen when the content happens to be narrower. */
.ot-chart { width: max-content; min-width: 100%; position: relative; }


.ot-heads { display: flex; gap: 6px; padding-left: 62px; margin-bottom: 6px; }
.ot-head {
    font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted);
    text-align: center; padding-bottom: 4px; border-bottom: 2px solid var(--line);
}
.ot-axis-head { position: absolute; left: 0; width: 56px; text-align: right; border: 0; }
.ot-head-event { flex: 0 0 320px; }

.ot-body { display: flex; gap: 6px; padding-left: 62px; position: relative; }
.ot-col { position: relative; min-width: 0; }
.ot-col-event { flex: 0 0 320px; }

.ot-rule { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.ot-year {
    position: absolute; left: -62px; width: 56px; text-align: right;
    font-size: .72rem; color: var(--text-muted); transform: translateY(-.5em);
    font-variant-numeric: tabular-nums;
}

.ot-bar {
    position: absolute; border-radius: 4px; padding: 3px 5px; overflow: hidden;
    font-size: .72rem; line-height: 1.25;
}
.ot-bar-name { display: block; font-weight: 600; }
.ot-bar-years { display: block; color: rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }

.ot-col-judah  .ot-bar { background: #e6ddc8; color: #4a3f22; }
.ot-col-israel .ot-bar { background: #d9e3dc; color: #24413a; }
.ot-col-empire .ot-bar { background: #ded7e2; color: #40304a; }
.ot-col-prophet .ot-bar { background: #f0e2d2; color: #5a3a22; }

/* Certainty is drawn, not written: a dated reign and a reconstructed one must
   not look equally solid. */
.ot-bar.ot-approximate { border: 1px dashed rgba(0,0,0,.35); }
.ot-bar.ot-disputed { border: 1px dashed rgba(0,0,0,.35); opacity: .7; }

/* One line, always. The spacing pass upstream pushes each label down by a
   fixed amount, and that amount can only be right if every label is the same
   height - a two-line label silently ate the gap and landed on its neighbour. */
.ot-event {
    position: absolute; left: 6px; right: 0; font-size: .76rem; line-height: 1.3;
    transform: translateY(-.6em); display: flex; gap: 8px; white-space: nowrap;
}
.ot-event-year { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 3em; }
.ot-event-name { font-weight: 600; }

.ot-key { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-muted); }
.ot-swatch { display: inline-block; width: 22px; height: 12px; border-radius: 3px; background: #e6ddc8; }
.ot-swatch.ot-approximate { border: 1px dashed rgba(0,0,0,.45); }
.ot-swatch.ot-disputed { border: 1px dashed rgba(0,0,0,.45); opacity: .6; }

/* Genesis 1–11: an order and no axis. Drawn as a plain numbered sequence so
   the absence of a year axis is visible rather than implied. */
.ot-section { margin: 40px 0 8px; font-size: 1.25rem; }
.ot-sequence { margin: 14px 0 8px; padding-left: 1.4em; }
.ot-sequence li { padding: 7px 0; }
.ot-seq-name { font-weight: 600; }
.ot-seq-note { display: block; color: var(--text-muted); font-size: .92rem; margin-top: 2px; }

/* The two datings, drawn as two columns because the disagreement is a hundred
   and eighty years wide and a footnote would make it look like a rounding. */
.ot-chart-early { min-width: 720px; }
.ot-col-scheme .ot-bar { background: #eee6d8; color: #4a3f2c; }
.ot-scheme-late .ot-bar { background: #e2e6ea; color: #2c3a45; }
.ot-early-event {
    position: absolute; right: 2px; transform: translateY(-.6em);
    font-size: .72rem; display: flex; gap: 6px; pointer-events: none;
    line-height: 1.25;
}
.ot-early-event .ot-event-name { font-weight: 600; }

/* A label pushed clear of its neighbour, and the leader back to its year. The
   marker never moves: the chart would be lying if the tick drifted to make
   room for the words. */
.ot-leader { position: absolute; left: 1px; width: 1px; background: var(--line); }
.ot-tick { position: absolute; left: 0; width: 5px; height: 1px; background: #b9a274; }
.ot-event, .ot-early-event { align-items: baseline; }

/* A one- or two-year reign is shorter than two lines of text. Rather than clip
   the years away, such a bar puts the name and the years on one line. */
.ot-bar { display: flex; flex-direction: column; justify-content: flex-start; }
.ot-bar-short { flex-direction: row; align-items: baseline; gap: 5px; }
.ot-bar-short .ot-bar-name, .ot-bar-short .ot-bar-years { display: inline; }

/* ==========================================================================
   The sixty-six books
   --------------------------------------------------------------------------
   A board, not a progress bar. Each square is a book of the Bible and fills in
   as the student reads the lectures that teach from it - so progress is stated
   in the one arrangement every reader here already knows by heart.

   Two audiences on one grid. A signed-in student sees their own progress; a
   visitor has none, so the same squares are shaded by how heavily the school
   teaches each book (.is-guest) rather than showing 66 empty boxes.
   ========================================================================== */

.section-head h1 { font-size: 1.95rem; margin: 0 0 10px; }

.bm-summary { font-size: 1.05rem; color: var(--ink); margin: 0 0 24px; max-width: 56ch; }
.bm-note { color: var(--text-muted); font-size: 0.9rem; max-width: 60ch; }
.bm-honest { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }

/* The single nearest finishable book. Deliberately the loudest thing on the
   page after the board itself. */
.bm-nearest {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--paper-warm); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 28px;
}
.bm-nearest p { margin: 0; flex: 1; min-width: 220px; color: var(--ink); }

.bm-legend { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 30px; }
.bm-legend li { display: flex; align-items: center; gap: 7px; font-size: 0.86rem; color: var(--text-muted); }
.bm-key { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; }
.bm-key.is-done { background: var(--ink); border-color: var(--ink); }
.bm-key.is-part { background: linear-gradient(to top, var(--brass-soft) 55%, var(--card) 55%); }
.bm-key.is-open { background: var(--card); }
.bm-key.is-untaught { background: var(--paper-warm); border-style: dashed; }
.bm-key.w-1 { background: var(--card); }
.bm-key.w-2 { background: var(--paper-warm); }
.bm-key.w-3 { background: #ece2d2; border-color: var(--brass-soft); }

.bm-testament {
    font-size: 1.15rem; margin: 34px 0 4px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.bm-group { margin-top: 22px; }
.bm-group h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); margin: 0 0 10px; }

.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }

.bm-cell {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 62px; padding: 8px 4px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--ink);
    text-decoration: none; text-align: center; line-height: 1.25;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* The fill rises from the bottom like a vessel filling, which reads as
   "how much of this book is behind me" without a number being needed. */
.bm-cell.is-part::before {
    content: ""; position: absolute; inset: auto 0 0 0; height: var(--fill, 0%);
    background: var(--brass-soft); opacity: .55;
}
.bm-cell.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.bm-cell.is-untaught { background: var(--paper-warm); border-style: dashed; color: var(--text-muted); }

.bm-cell:hover, .bm-cell:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(42,39,36,.13); }
.bm-cell:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.bm-abbr { position: relative; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.bm-count { position: relative; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bm-cell.is-done .bm-count { color: rgba(255,255,255,.75); }

/* Nobody is signed in: shade by how much the school teaches the book. */
.bm-grid.is-guest .bm-cell.w-1 { background: var(--card); }
.bm-grid.is-guest .bm-cell.w-2 { background: var(--paper-warm); }
.bm-grid.is-guest .bm-cell.w-3 { background: #ece2d2; border-color: var(--brass-soft); }

/* ---------- One book ---------- */

.bm-back { font-size: 0.9rem; margin: 0 0 14px; }
.bm-bar { max-width: 420px; margin-bottom: 26px; }

.bm-lectures { list-style: none; padding: 0; margin: 0 0 22px; }
.bm-lectures li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.bm-lectures li.is-done a { color: var(--text-muted); }
.bm-lectures a { font-weight: 500; text-decoration: none; color: var(--ink); }
.bm-lectures a:hover { text-decoration: underline; }
.bm-lecture-meta { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }
.bm-tag {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    background: var(--paper-warm); border: 1px solid var(--line); font-size: 0.76rem;
}
.bm-tag.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }

.bm-booknav { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; font-size: 0.92rem; }

/* ---------- The card on the study screen ---------- */

.bm-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 30px;
}
.bm-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.bm-card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.bm-mini { display: grid; grid-template-columns: repeat(22, 1fr); gap: 3px; margin: 14px 0 12px; }
.bm-dot { aspect-ratio: 1; border-radius: 2px; background: var(--paper-warm); border: 1px solid var(--line); }
.bm-dot.is-part.p-1 { background: #efe3d6; border-color: #ddc9b4; }
.bm-dot.is-part.p-2 { background: #c4ac95; border-color: #b99b83; }
.bm-dot.is-part.p-3 { background: var(--brass-soft); border-color: var(--brass); }
.bm-dot.is-untaught { opacity: .45; }
.bm-dot.is-done { background: var(--ink); border-color: var(--ink); }

@media (max-width: 520px) {
    .bm-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
    .bm-cell { min-height: 54px; }
    .bm-abbr { font-size: 0.94rem; }
}

/* One book's lectures, grouped by the course that teaches them. */
.bm-course { margin-bottom: 26px; }
.bm-course h2 {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    font-size: 1.05rem; margin: 0 0 4px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.bm-course h2 span {
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 400;
    color: var(--text-muted); margin-left: auto;
}

/* ==========================================================================
   The week: a goal the student set, twelve weeks behind them, and a rest week
   --------------------------------------------------------------------------
   Replaces the bare streak line. The streak is still weekly and still never
   daily; what is new is that the target is chosen rather than imposed, and
   that a week can be declared rest instead of counted as failure.
   ========================================================================== */

.week-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 30px;
}
.week-card.is-met { border-color: var(--brass-soft); }

.week-head { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.week-n { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.week-note { font-size: 0.88rem; color: var(--text-muted); margin-top: 2px; }
.week-streak { margin-left: auto; text-align: right; }
.week-streak strong { display: block; font-size: 0.95rem; color: var(--ink); }
.week-streak span { font-size: 0.82rem; color: var(--text-muted); }

.week-strip { display: flex; gap: 5px; list-style: none; padding: 0; margin: 16px 0 4px; flex-wrap: wrap; }
.week-box {
    width: 26px; height: 26px; border-radius: 5px;
    background: var(--paper-warm); border: 1px solid var(--line);
}
.week-box.is-some { background: #efe3d6; border-color: #ddc9b4; }
.week-box.is-met { background: var(--brass-soft); border-color: var(--brass); }
/* A rest week is neither kept nor missed, and must not look like either. */
.week-box.is-rest {
    background: repeating-linear-gradient(-45deg, var(--paper-warm), var(--paper-warm) 3px, #e7e0d2 3px, #e7e0d2 6px);
    border-color: var(--line);
}
.week-box.is-now { outline: 2px solid var(--ink); outline-offset: 1px; }

.week-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.goal-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.goal-pick > span { font-size: 0.82rem; color: var(--text-muted); margin-right: 2px; }
.goal-btn {
    font-family: inherit; font-size: 0.82rem; padding: 5px 12px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--text-muted);
}
.goal-btn:hover { border-color: var(--brass-soft); color: var(--ink); }
.goal-btn.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.rest-btn {
    font-family: inherit; font-size: 0.82rem; padding: 5px 12px; cursor: pointer;
    background: none; border: 1px dashed var(--line); border-radius: 999px; color: var(--text-muted);
    margin-left: auto;
}
.rest-btn:hover { border-color: var(--brass-soft); color: var(--ink); }

/* ==========================================================================
   Today's review
   --------------------------------------------------------------------------
   One card at a time on a narrow measure. Everything else on this site is
   built for long reading; this screen is built for three minutes on a phone,
   so the card is the page and there is nothing else on it.
   ========================================================================== */

.deck-wrap { max-width: 640px; }

.deck-head { margin-bottom: 22px; }
.deck-head h1 { font-size: 1.6rem; margin: 0 0 12px; }
.deck-pips { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; }
.deck-pips li {
    width: 34px; height: 6px; border-radius: 3px;
    background: var(--paper-warm); border: 1px solid var(--line);
}
.deck-pips li.is-done { background: var(--brass); border-color: var(--brass); }
.deck-sub { font-size: 0.86rem; color: var(--text-muted); margin: 0; }

.deck-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; margin: 0;
}
.deck-source {
    font-size: 0.78rem; letter-spacing: .04em; color: var(--text-muted);
    margin-bottom: 10px;
}
.deck-prompt { font-size: 1.05rem; color: var(--ink); margin-bottom: 20px; }
.deck-prompt p:first-child { margin-top: 0; }
.deck-prompt p:last-child { margin-bottom: 0; }
.deck-ask { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 16px; }

/* The word itself is the point of a vocabulary card, so it gets the room. */
.deck-word { text-align: center; margin: 6px 0 18px; }
.deck-lemma {
    display: block; font-family: var(--font-display); font-size: 2.4rem;
    line-height: 1.3; color: var(--ink);
}
.deck-reading { display: block; font-size: 0.95rem; color: var(--text-muted); margin-top: 4px; }

.deck-choices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.deck-choices button, .deck-choices li.is-key, .deck-choices li:not(.is-key) {
    text-align: left; line-height: 1.6;
}
.deck-choices button {
    display: flex; gap: 12px; width: 100%; cursor: pointer;
    font-family: inherit; font-size: 0.97rem; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
    padding: 13px 16px;
}
.deck-choices button:hover { border-color: var(--brass-soft); background: var(--paper-warm); }
.deck-choices button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.deck-label { color: var(--text-muted); min-width: 1.4em; }

/* After the answer the same list is shown marked, as plain items. */
.deck-choices.is-marked li {
    display: flex; gap: 12px; padding: 13px 16px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
    font-size: 0.97rem;
}
.deck-choices.is-marked li.is-key { border-color: var(--ink); background: var(--paper-warm); }
.deck-choices.is-marked li.is-yours { border-style: dashed; color: var(--text-muted); }

.deck-short { display: flex; gap: 10px; flex-wrap: wrap; }
.deck-short input {
    flex: 1; min-width: 200px; font-family: inherit; font-size: 1rem;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--paper); color: var(--text);
}
.deck-short input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

.deck-result.is-right { border-color: var(--brass-soft); }
.deck-result.is-wrong { border-color: var(--line); }
.deck-verdict { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin-bottom: 14px; }

.deck-answers { margin: 18px 0 0; }
.deck-answers dt { font-size: 0.78rem; color: var(--text-muted); margin-top: 12px; }
.deck-answers dd { margin: 3px 0 0; color: var(--ink); }

.deck-more { margin: 16px 0 0; font-size: 0.9rem; }
.deck-box {
    margin: 20px 0 18px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 0.86rem; color: var(--text-muted);
}
.deck-empty p { margin: 0 0 16px; color: var(--ink); }
.deck-done-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.deck-note { margin-top: 22px; font-size: 0.84rem; color: var(--text-muted); }

/* The card on the study screen. */
.deck-tile {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    background: var(--paper-warm); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 30px;
}
.deck-tile div { flex: 1; min-width: 200px; }
.deck-tile h3 { margin: 0 0 3px; font-size: 1.05rem; }
.deck-tile p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }

/* ==========================================================================
   The course map, and the milestones
   --------------------------------------------------------------------------
   The contents list answers "what is in this course". The map answers "how
   far have I come" - the same chapters, read as a road rather than a table.
   Nothing on it is ever locked: every node is a working link, because this
   school has never made anybody earn the right to read.
   ========================================================================== */

.cm-sub { color: var(--text-muted); max-width: 60ch; margin: 0 0 18px; }
.cm-summary { color: var(--ink); margin: 0 0 20px; }
.cm-note { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line);
    color: var(--text-muted); font-size: 0.88rem; max-width: 62ch; }

.cm-legend { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 26px; }
.cm-legend li { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; color: var(--text-muted); }
.cm-key { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--card); display: inline-block; }
.cm-key.is-reading { background: #efe3d6; border-color: #ddc9b4; }
.cm-key.is-read { background: var(--brass-soft); border-color: var(--brass-soft); }
.cm-key.is-held { background: var(--brass); border-color: var(--brass); }
.cm-key.is-settled { background: var(--ink); border-color: var(--ink); }

/* The path itself: a spine down the left with a node on each chapter. */
.cm-path { list-style: none; padding: 0; margin: 0; position: relative; }
.cm-path::before {
    content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px;
    width: 2px; background: var(--line);
}
.cm-node { position: relative; margin-bottom: 8px; }
.cm-node > a {
    display: flex; gap: 16px; align-items: flex-start; text-decoration: none;
    padding: 14px 16px 14px 0; border-radius: 8px; color: var(--ink);
}
.cm-node > a:hover { background: var(--paper-warm); }
.cm-node > a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.cm-num {
    position: relative; z-index: 1; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1rem;
    background: var(--card); border: 2px solid var(--line); color: var(--text-muted);
}
.cm-node.is-reading .cm-num { border-color: #ddc9b4; background: #f4ece0; color: var(--ink); }
.cm-node.is-read .cm-num { border-color: var(--brass-soft); background: var(--brass-soft); color: var(--ink-deep); }
.cm-node.is-held .cm-num { border-color: var(--brass); background: var(--brass); color: #fff; }
.cm-node.is-settled .cm-num { border-color: var(--ink); background: var(--ink); color: #fff; }
.cm-node.is-here .cm-num { box-shadow: 0 0 0 4px rgba(138,106,82,.22); }

.cm-body { flex: 1; min-width: 0; }
.cm-title { display: block; font-weight: 500; line-height: 1.5; }
.cm-meta { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }
.cm-book {
    display: inline-block; margin-left: 5px; padding: 0 7px; border-radius: 999px;
    background: var(--paper-warm); border: 1px solid var(--line); font-size: 0.76rem;
}
.cm-bar { display: block; height: 4px; border-radius: 2px; background: var(--paper-warm);
    margin-top: 8px; max-width: 320px; overflow: hidden; }
.cm-bar span { display: block; height: 100%; background: var(--brass); }

.cm-state { flex: none; font-size: 0.8rem; color: var(--text-muted); padding-top: 2px; }
.cm-node.is-held .cm-state, .cm-node.is-settled .cm-state { color: var(--ink); }
.cm-here {
    position: absolute; left: 66px; bottom: -2px;
    font-size: 0.74rem; color: var(--brass); letter-spacing: .04em;
}

/* ---------- Milestones ---------- */

.ms-summary { color: var(--ink); margin: 0 0 26px; }
.ms-group { font-size: 1.05rem; margin: 28px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ms-list { list-style: none; padding: 0; margin: 0; }
.ms-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.ms-mark { flex: none; width: 22px; text-align: center; color: var(--line); font-size: 1.1rem; line-height: 1.6; }
.ms-item.is-held .ms-mark { color: var(--brass); }
.ms-item h3 { margin: 0; font-size: 1rem; color: var(--text-muted); }
.ms-item.is-held h3 { color: var(--ink); }
.ms-item p { margin: 2px 0 0; font-size: 0.86rem; color: var(--text-muted); }
.ms-when { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ms-note { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line);
    color: var(--text-muted); font-size: 0.88rem; max-width: 62ch; }

/* The row on the study screen. */
.ms-strip {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 22px; margin-bottom: 30px;
}
.ms-strip div { flex: 1; min-width: 200px; }
.ms-strip h3 { margin: 0 0 4px; font-size: 1.05rem; }
.ms-strip p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.ms-chip {
    display: inline-block; margin: 2px 6px 2px 0; padding: 2px 10px; border-radius: 999px;
    background: var(--paper-warm); border: 1px solid var(--line); font-size: 0.8rem; color: var(--ink);
}
.ms-more { font-size: 0.8rem; color: var(--text-muted); }

.deck-milestone { margin: 0 0 16px; font-size: 0.92rem; }

@media (max-width: 620px) {
    .cm-node > a { gap: 12px; }
    .cm-state { display: none; }
}

/* ==========================================================================
   Walking together
   --------------------------------------------------------------------------
   A small-group board with no individual numbers on it, which is why there is
   no table of members-with-figures in this stylesheet and should never be one.
   Everything here is either a group total or a name.
   ========================================================================== */

.gr-list { list-style: none; padding: 0; margin: 0 0 34px; }
.gr-list li { border-bottom: 1px solid var(--line); }
.gr-list a { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    padding: 15px 0; text-decoration: none; color: var(--ink); }
.gr-list a:hover .gr-name { text-decoration: underline; }
.gr-name { font-weight: 500; }
.gr-meta { font-size: 0.84rem; color: var(--text-muted); margin-left: auto; }

.gr-forms { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gr-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.gr-form h2 { font-size: 1.05rem; margin: 0 0 6px; }
.gr-form p { margin: 0 0 14px; font-size: 0.86rem; color: var(--text-muted); }
.gr-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.gr-row input {
    flex: 1; min-width: 160px; font-family: inherit; font-size: 1rem;
    padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--paper); color: var(--text);
}
.gr-row input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
#code { letter-spacing: .18em; text-transform: uppercase; }
.gr-error { color: #8a2f2f; font-size: 0.86rem; margin: 10px 0 0; }

.gr-privacy {
    margin-top: 36px; padding: 22px 24px;
    background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius);
}
.gr-privacy h2 { font-size: 1.02rem; margin: 0 0 10px; }
.gr-privacy ul { margin: 0; padding-left: 20px; }
.gr-privacy li { font-size: 0.89rem; color: var(--text-muted); margin-bottom: 7px; line-height: 1.65; }

/* ---------- One group's board ---------- */

.gr-back { font-size: 0.9rem; margin: 0 0 14px; }
.gr-h { font-size: 1.1rem; margin: 34px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.gr-sub { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 14px; max-width: 62ch; }
.gr-note { font-size: 0.82rem; color: var(--text-muted); margin: 10px 0 0; max-width: 60ch; }

.gr-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.gr-stats div {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px;
}
.gr-stats b {
    display: block; font-family: var(--font-display); font-size: 1.9rem;
    line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums;
}
.gr-stats b small { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.gr-stats span { font-size: 0.84rem; color: var(--text-muted); }

/* Twelve bars, scaled to this group's own best week - never to another's. */
.gr-weeks {
    display: flex; align-items: flex-end; gap: 6px; height: 78px;
    list-style: none; padding: 0; margin: 0;
}
.gr-weeks li { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.gr-weeks li span { display: block; width: 100%; background: var(--brass-soft); border-radius: 3px 3px 0 0; }
.gr-weeks li.is-now span { background: var(--brass); }

.gr-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 5px; }
.gr-book {
    display: flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 6px 2px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    font-family: var(--font-display); font-size: 0.9rem; text-decoration: none;
}
.gr-book.is-part { background: var(--brass-soft); border-color: var(--brass-soft); }
.gr-book.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.gr-book.is-untaught { background: var(--paper-warm); border-style: dashed; color: var(--text-muted); }
.gr-book:hover { border-color: var(--brass); }

.gr-members { list-style: none; padding: 0; margin: 0; }
.gr-members li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.gr-member-name { font-weight: 500; }
.gr-tag { font-size: 0.76rem; padding: 1px 9px; border-radius: 999px;
    background: var(--paper-warm); border: 1px solid var(--line); color: var(--text-muted); }
.gr-members form { margin: 0 0 0 auto; }
.gr-remove { background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.82rem; color: var(--text-muted); text-decoration: underline; padding: 0; }
.gr-remove:hover { color: #8a2f2f; }

.gr-admin { margin-top: 8px; }
.gr-code {
    font-family: var(--font-display); font-size: 2rem; letter-spacing: .16em;
    color: var(--ink); margin: 6px 0 6px;
}
.gr-admin-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

.gr-leave { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.gr-leave button { background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 16px; cursor: pointer; font-family: inherit; font-size: 0.86rem; color: var(--text-muted); }
.gr-leave button:hover { border-color: #b98b8b; color: #8a2f2f; }
.gr-leave span { font-size: 0.82rem; color: var(--text-muted); }

/* The row on the study screen. */
.gr-tile {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 22px; margin-bottom: 30px;
}
.gr-tile div { flex: 1; min-width: 200px; }
.gr-tile h3 { margin: 0 0 4px; font-size: 1.05rem; }
.gr-tile p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }

/* ==========================================================================
   Installing the school
   --------------------------------------------------------------------------
   Offered once, on the study screen only, and never again once waved away.
   `hidden` does the hiding, which is why [hidden] { display: none !important }
   near the top of this file is not optional - see the note there.
   ========================================================================== */

.install-tile {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    background: var(--paper-warm); border: 1px dashed var(--line);
    border-radius: var(--radius); padding: 16px 20px; margin-bottom: 30px;
}
.install-tile div { flex: 1; min-width: 200px; }
.install-tile h3 { margin: 0 0 3px; font-size: 1rem; }
.install-tile p { margin: 0; font-size: 0.86rem; color: var(--text-muted); }
.install-dismiss {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.84rem; color: var(--text-muted); text-decoration: underline; padding: 4px;
}
.install-dismiss:hover { color: var(--ink); }

/* ==========================================================================
   Open platform - questions and answers
   --------------------------------------------------------------------------
   Everything below the reading was written by readers, and it has to look it.
   The lecture is serif on warm paper with a 40em measure; this section keeps
   the measure so the eye does not have to re-learn the line length, but sits
   on the darker paper with the body face, so that scrolling past the summary
   card is unmistakably leaving the school's own words behind.
   ========================================================================== */

/* The zone, and the panels standing on it.
   --------------------------------------------------------------------------
   These four sections used to be four full-width bands, and two of them
   carried the same ground, so 사례 and 질문 ran together into one field with a
   hairline somewhere in the middle. Worse, every "write one yourself" form was
   `--card` on a section that was also `--card`, which left the whole lower
   half of the page - the part that asks the reader to contribute - as text
   floating on nothing.

   So: one warm ground for the whole zone, and each section lifted onto a
   panel of its own with air between them. The panel is the width of the
   reading measure, so the eye keeps the line length it has had all page. */

.op-zone {
    background: var(--paper-warm);
    border-top: 1px solid var(--line);
    margin-top: 56px;
    padding: 4px 0 46px;
}

/* The lecture ended. Said once, quietly, where it happens. */
.op-zone-mark {
    display: flex; align-items: center; gap: 16px;
    /* The panel measure, and the panel padding, so the rule lines up with the
       edges of the cards below rather than the page. */
    max-width: var(--read); padding: 0 30px;
    margin: 30px auto 22px; font-size: 0.79rem; color: var(--text-muted);
    letter-spacing: 0.02em;
}
.op-zone-mark::before,
.op-zone-mark::after { content: ""; flex: 1; height: 1px; background: var(--brass-soft); opacity: .55; }

.op { background: none; border: 0; margin: 0; padding: 0; }
.op + .op { margin-top: 18px; }

.op .read {
    max-width: var(--read);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 26px 30px 30px;
    box-shadow: 0 2px 10px -8px rgba(42, 39, 36, 0.35);
}

.op-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.op-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 0; }
.op-count { font-size: 0.84rem; color: var(--text-muted); }

/* The promise, stated where it is made. */
.op-promise { font-size: 0.86rem; color: var(--brass); margin: 0 0 24px; }

.op-flash {
    background: var(--paper); border: 1px solid var(--brass-soft); border-radius: var(--radius);
    padding: 10px 14px; font-size: 0.9rem; color: var(--ink); margin: 0 0 20px;
}
.op-errors {
    background: var(--paper); border: 1px solid #d8a79c; border-radius: var(--radius);
    padding: 12px 16px 12px 32px; font-size: 0.9rem; color: #7e2f27; margin: 0 0 20px;
}

.op-item {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 18px;
}

/* The sentence being asked about. Quoted, never re-rendered as Markdown -
   it is the lecture's text and belongs to the lecture. */
.op-anchor {
    border-left: 3px solid var(--brass-soft); padding: 2px 0 2px 12px;
    margin: 0 0 12px; font-size: 0.9rem; line-height: 1.75; color: var(--text-muted);
}

.op-body { font-size: 0.97rem; line-height: 1.85; color: var(--text); }
.op-body p { margin: 0 0 10px; }
.op-body p:last-child { margin-bottom: 0; }
.op-body ul, .op-body ol { margin: 0 0 10px; padding-left: 22px; }

.op-meta {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-top: 12px; font-size: 0.82rem; color: var(--text-muted);
}
.op-by { color: var(--ink-soft); font-weight: 600; }

.op-badge {
    font-size: 0.72rem; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--line); color: var(--text-muted); white-space: nowrap;
}
.op-badge.is-answered { color: #3d6b52; border-color: #a9c9b6; }
.op-badge.is-waiting  { color: var(--brass); border-color: var(--brass-soft); }
.op-badge.is-overdue  { color: #7e2f27; border-color: #d8a79c; }
.op-badge.is-staff    { color: var(--ink); border-color: var(--ink-soft); }

/* An answer is indented under its question - one level, never two. A thread
   that nests is a thread that argues. */
.op-answer {
    margin-top: 16px; padding: 14px 0 0 16px;
    border-top: 1px solid var(--line); border-left: 2px solid var(--brass-soft);
}

.op-form { margin-top: 16px; }
.op-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.op-form textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
    font: inherit; font-size: 0.95rem; line-height: 1.75; background: var(--card);
    color: var(--text); resize: vertical;
}
.op-form textarea:focus { outline: 2px solid var(--brass-soft); outline-offset: 1px; }
.op-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.op-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

.op-form.is-ask {
    background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px; margin-top: 26px;
    /* A brass edge, because this is the one block on the panel that asks for
       something rather than reporting something. */
    border-left: 3px solid var(--brass-soft);
}
.op-form.is-ask > .op-label:first-child,
.op-form.is-ask > .pv-label:first-child { font-size: 0.95rem; }

.op-quoted { position: relative; margin-bottom: 10px; }
.op-unquote {
    background: none; border: none; padding: 0; font: inherit; font-size: 0.78rem;
    color: var(--text-muted); cursor: pointer; text-decoration: underline;
}
.op-unquote:hover { color: var(--ink); }

/* Objecting and withdrawing are kept closed. They are necessary and they are
   not what this section is for. */
.op-report { margin-top: 14px; }
.op-report summary { font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }
.op-report summary:hover { color: var(--ink); }

.op-empty, .op-locked { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
.op-locked { padding: 16px 0 0; border-top: 1px solid var(--line); }

/* The quote button on the selection bar, beside the four colours. */
.hl-ask {
    background: none; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
    color: #fff; font: inherit; font-size: 0.78rem; padding: 1px 10px;
    cursor: pointer; margin-left: 2px;
}
.hl-ask:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- Perspective cards ---------- */

/* A second reader-written section under the questions, and it has to read as a
   different kind of thing: reviewed, structured, and grouped by who holds the
   view rather than by who posted last. */
/* Reviewed, so it leads - and it is the only panel that opens the zone. */
.op-pv { margin-top: 0; }

.pv-group { margin-bottom: 26px; }
.pv-tradition {
    font-family: var(--font-display); font-size: 1.02rem; color: var(--ink);
    margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}

.pv-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 12px;
}

/* The two cited fields. A definition list, because that is what they are -
   and because it keeps them from reading as more prose. */
.pv-fields {
    display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
    margin: 14px 0 0; font-size: 0.86rem;
}
.pv-fields dt { color: var(--text-muted); }
.pv-fields dd { margin: 0; color: var(--text); }

.pv-field { margin-top: 16px; }
.pv-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.pv-label i { font-style: normal; color: var(--brass); }
.pv-field .op-hint { margin-bottom: 6px; }
.pv-field textarea,
.pv-field input[type="text"],
.pv-field select {
    background: var(--card);
    width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
    font: inherit; font-size: 0.95rem; line-height: 1.7; background: var(--paper);
    color: var(--text);
}
.pv-field textarea { resize: vertical; }
.pv-field textarea:focus,
.pv-field input:focus,
.pv-field select:focus { outline: 2px solid var(--brass-soft); outline-offset: 1px; }

.op-badge.is-reviewed { color: #3d6b52; border-color: #a9c9b6; }

/* ---------- Case studies ---------- */



.op-hub-link { margin-left: auto; font-size: 0.84rem; color: var(--brass); white-space: nowrap; }

.case-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 14px;
}

/* The facets come before the prose on purpose: a reader scanning forty cases
   is looking for a church their own size before they read a word. */
.case-facets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.case-facet {
    font-size: 0.76rem; padding: 2px 10px; border-radius: 999px;
    background: var(--paper-warm); border: 1px solid var(--line); color: var(--ink-soft);
}

.case-outcome {
    margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--brass-soft);
    background: var(--paper); font-size: 0.9rem; line-height: 1.75;
}
.case-outcome-label {
    display: block; font-size: 0.74rem; letter-spacing: 0.06em;
    color: var(--brass); margin-bottom: 2px;
}

.case-form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.case-form-row .pv-field { flex: 1 1 180px; }

/* One direction. There is no opposite of this button. */
.op-vote { margin: 0 0 0 auto; }
.vote-btn {
    background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: 3px 12px; font: inherit; font-size: 0.8rem; color: var(--text-muted);
    cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.vote-btn:hover { border-color: var(--brass-soft); color: var(--brass); }
.vote-btn.is-on { border-color: var(--brass); color: var(--brass); background: rgba(138, 106, 82, 0.08); }
.vote-btn b { font-weight: 700; }

/* ---------- Error reports ---------- */

/* The quietest thing on the page. A correction is a favour, not a
   conversation, so it gets no heading, no count and no list. */
.op-errata { padding: 6px 0 0; }
.op-errata .read { background: none; border: 0; box-shadow: none; padding: 14px 30px 0; }
.er-box summary { font-size: 0.84rem; color: var(--text-muted); cursor: pointer; }
.er-box summary:hover { color: var(--ink); }
.er-box[open] { padding-bottom: 8px; }

/* ---------- The hub ---------- */

.hub-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 16px; }
.hub-kinds a {
    display: inline-flex; gap: 8px; align-items: baseline;
    padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px;
    text-decoration: none; color: var(--text-muted); font-size: 0.9rem;
    background: var(--card);
}
.hub-kinds a.is-active { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.hub-kinds a b { font-size: 0.8rem; color: var(--brass); font-weight: 700; }

.hub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.hub-filters input[type="search"],
.hub-filters select {
    border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
    font: inherit; font-size: 0.9rem; background: var(--card); color: var(--text);
}
.hub-filters input[type="search"] { min-width: 200px; flex: 1 1 200px; }

.hub-item {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 14px;
}
.hub-where { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.86rem; margin-bottom: 10px; }
.hub-when { color: var(--text-muted); margin-left: auto; }
.hub-back { margin-left: auto; font-size: 0.82rem; color: var(--brass); white-space: nowrap; }

/* ---------- The authorised gloss ---------- */

/* The one badge on this site that means the school itself said something. It
   gets the ink colour rather than the brass the other badges share, and it is
   a link: the whole reward is that a name goes with it. */
.op-badge.is-gloss {
    color: #fff; background: var(--ink); border-color: var(--ink);
    text-decoration: none; font-weight: 600;
}
a.op-badge.is-gloss:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

/* A promoted item is pinned to the top of its section. A left rule rather than
   a highlight: it is still the author's contribution sitting in the margin,
   not part of the lecture. */
.op-item:has(.is-gloss),
.pv-card:has(.is-gloss),
.case-card:has(.is-gloss),
.hub-item:has(.is-gloss) { border-left: 3px solid var(--ink); }

/* ---------- Contributors ---------- */

/* Ordered by when the school last endorsed something, never by how much anybody
   has. There is deliberately nothing here to climb. */
.cr-row {
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cr-name { font-family: var(--font-display); font-size: 1.06rem; color: var(--ink); text-decoration: none; }
.cr-name:hover { text-decoration: underline; }
.cr-where { font-size: 0.88rem; color: var(--text-muted); }
.cr-denom { margin-left: 8px; }
.cr-n { margin-left: auto; font-size: 0.82rem; color: var(--brass); }

.cr-item {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 14px;
}

/* ==========================================================================
   Reading guide
   --------------------------------------------------------------------------
   A floating "?" and a panel of live samples. Everything in it is styled by
   the marker classes themselves, so a sample here and the real thing in the
   text cannot drift apart - which is the only reason the panel is any use.
   ========================================================================== */

.guide-open {
    position: fixed; right: 20px; bottom: 20px; z-index: 70;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
    font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(20, 40, 34, 0.14);
}
.guide-open:hover { color: var(--ink); border-color: var(--ink-soft); }

.guide-nudge {
    position: fixed; right: 68px; bottom: 26px; z-index: 70;
    max-width: min(280px, calc(100vw - 100px));
    background: var(--ink); color: #fff; border-radius: var(--radius);
    padding: 10px 34px 10px 14px; font-size: 0.85rem; line-height: 1.6;
    box-shadow: 0 6px 22px rgba(20, 40, 34, 0.26);
}
.guide-nudge-x {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none; color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.guide-nudge-x:hover { color: #fff; }

.guide-panel {
    position: fixed; right: 20px; bottom: 68px; z-index: 71;
    width: min(400px, calc(100vw - 40px));
    max-height: min(70vh, 640px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(20, 40, 34, 0.2);
    padding: 18px 20px 16px;
}

.guide-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.guide-head h2 { font-family: var(--font-display); font-size: 1.06rem; color: var(--ink); margin: 0; }
.guide-close {
    margin-left: auto; background: none; border: none; padding: 0 2px;
    font-size: 1.3rem; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.guide-close:hover { color: var(--ink); }

.guide-intro { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 14px; line-height: 1.6; }

.guide-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guide-row {
    display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 12px;
    align-items: baseline; font-size: 0.88rem; line-height: 1.65;
}
.guide-eg { white-space: nowrap; }
/* A sample with nothing to render - a gesture rather than a mark. */
.guide-eg-plain {
    font-size: 0.78rem; color: var(--brass); white-space: normal;
}
.guide-say { color: var(--text); }

/* The samples must not be operable: they explain a control, they are not one. */
.guide-rows .term,
.guide-rows .ow,
.guide-rows .scripture,
.guide-rows .pl-mark { cursor: default; pointer-events: none; }

.guide-foot {
    margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: 0.8rem; color: var(--text-muted); line-height: 1.6;
}

@media (max-width: 560px) {
    /* On a phone the panel is the screen; anchoring it to a corner just makes
       it a cramped corner. */
    .guide-panel {
        right: 12px; left: 12px; bottom: 68px; width: auto;
        max-height: min(76vh, 560px);
    }
    .guide-nudge { right: 68px; left: 12px; max-width: none; }
}

@media print {
    .guide-open, .guide-panel, .guide-nudge { display: none !important; }
}

/* ==========================================================================
   The top bar
   --------------------------------------------------------------------------
   Sixteen links used to sit here side by side and wrapped onto two lines. A
   two-line menu is a list, not a way through: nothing in it is more important
   than anything else. Five items now - 교과 과정, 자료, 커뮤니티, 검색, and
   what belongs to the reader - with the rest one click inside.

   The menus are <details>/<summary>, which means they open and close with no
   JavaScript whatsoever. `js/nav.js` adds only the three things a bare
   <details> cannot do: close its siblings, close on Escape, close on a click
   outside. If that file fails to load the menu still works.
   ========================================================================== */

.site-header .wrap { flex-wrap: nowrap; gap: 18px; }

.site-nav { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0; }
.nav-gap { flex: 1; min-width: 8px; }

/* Every top-level thing in the bar - link or menu trigger - is one shape. */
.nav-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px; border-radius: 5px;
    font-size: 0.9rem; color: rgba(255,255,255,0.82);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    font-family: var(--font-body);
}
.nav-item:hover { background: rgba(255,255,255,0.16); color: #fff; }
.nav-item:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }
.site-nav > a.nav-item.is-here { color: #fff; font-weight: 600; }

.nav-car {
    width: 7px; height: 7px; opacity: .55;
    border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .12s ease;
}

.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { background: rgba(255,255,255,0.24); color: #fff; }
.nav-menu[open] > summary .nav-car { transform: rotate(-135deg) translate(-2px, -2px); }

.nav-panel {
    position: absolute; top: calc(100% + 7px); left: 0; z-index: 60; min-width: 216px;
    background: var(--card); border: 1px solid var(--line); border-radius: 5px;
    padding: 6px; box-shadow: 0 10px 28px -14px rgba(42,39,36,0.5);
}
.nav-panel.is-right { left: auto; right: 0; }

/* One shape for links and for the sign-out button, which has to be a form. */
.nav-panel a,
.nav-panel button {
    display: flex; align-items: baseline; gap: 9px; width: 100%;
    padding: 9px 11px; border-radius: 4px; border: 0; background: none;
    color: var(--text); text-decoration: none; text-align: left;
    font-size: 0.9rem; font-family: var(--font-body); cursor: pointer;
}
.nav-panel a:hover,
.nav-panel button:hover { background: var(--line); color: var(--ink-deep); }
.nav-panel a:focus-visible,
.nav-panel button:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }
.nav-panel form { margin: 0; }

/* The open page is marked inside its own panel - quieter than underlining
   something in the bar, and it says which section the page belongs to. */
.nav-panel a::before { content: ""; width: 5px; flex: none; }
.nav-panel a.is-here { font-weight: 600; }
.nav-panel a.is-here::before {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--seal); transform: translateY(-2px);
}

.nav-panel hr { border: 0; border-top: 1px solid var(--line); margin: 5px 8px; }
.nav-cap {
    font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); padding: 8px 11px 4px; margin: 0;
}

/* Search is an action, so it is not shaped like the places. */
.nav-find {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    padding: 7px 13px; border-radius: 5px; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.82);
    text-decoration: none; font-size: 0.86rem;
}
.nav-find:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); color: #fff; }
.nav-find:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }
.nav-find svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav-find.is-cta { background: var(--seal); border-color: var(--seal); color: #fff; font-weight: 600; }
.nav-find.is-cta:hover { background: #8e372e; border-color: #8e372e; }

.lang-switch { flex-shrink: 0; white-space: nowrap; }

/* ==========================================================================
   Messages to the school
   --------------------------------------------------------------------------
   The thread is a conversation, so the school's replies are set apart by
   ground rather than by alignment - chat bubbles on opposite sides would make
   a support thread look like a chat app, and this is correspondence.
   ========================================================================== */

.msg-page { padding: 44px 0 72px; }
.msg-page h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 6px; }
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.msg-head h1 { margin: 0; }
.msg-lede { color: var(--ink-soft); margin: 0 0 14px; line-height: 1.9; }

.msg-note {
    font-size: 0.88rem; color: var(--text-muted); line-height: 1.8;
    background: var(--paper-warm); border-radius: 8px;
    border-left: 3px solid var(--brass-soft); padding: 12px 16px; margin: 0 0 26px;
}

.msg-list { list-style: none; margin: 0 0 24px; padding: 0; }
.msg-row { border-bottom: 1px solid var(--line); }
.msg-row a { display: block; padding: 15px 4px; text-decoration: none; color: inherit; }
.msg-row a:hover { background: var(--paper-warm); }
.msg-subject { display: block; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.msg-meta {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    font-size: 0.82rem; color: var(--text-muted); margin: 0;
}
.msg-kind { color: var(--brass); }
.msg-state.is-open { color: var(--brass); }
.msg-state.is-answered { color: #3d6b52; }
.msg-state.is-closed { color: var(--text-muted); }
.msg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); display: inline-block; }
.msg-row.is-new .msg-subject { color: var(--seal); }
.msg-empty { color: var(--text-muted); }
.msg-back { font-size: 0.88rem; margin: 0 0 14px; }
.msg-back a { color: var(--brass); text-decoration: none; }

.msg-thread { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 14px; }
.msg-post {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 18px 20px;
}
/* The school's own voice, on the warmer ground. */
.msg-post.is-staff { background: var(--paper-warm); border-left: 3px solid var(--seal); }
.msg-by {
    display: flex; gap: 10px; align-items: baseline;
    font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 10px;
}
.msg-by span { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
.msg-body { font-size: 0.97rem; line-height: 1.85; }
.msg-body p { margin: 0 0 10px; }
.msg-body p:last-child { margin-bottom: 0; }

.msg-form { margin-top: 8px; }
.msg-form select, .msg-form input[type="text"], .msg-form textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
    font: inherit; font-size: 0.95rem; background: var(--card); color: var(--text);
}
.msg-form textarea { line-height: 1.8; resize: vertical; }
.msg-form .field { margin-bottom: 18px; }
.msg-form label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.msg-form.is-reply { border-top: 1px solid var(--line); padding-top: 22px; }

.msg-closed {
    color: var(--text-muted); font-size: 0.92rem;
    border-top: 1px solid var(--line); padding-top: 18px; margin: 0 0 18px;
}

/* ==========================================================================
   The About page
   --------------------------------------------------------------------------
   An intent page: a thesis, then one promise per section, each with the place
   it can be checked. The checking line is set quieter than the promise on
   purpose - it is a footnote, not a second claim.
   ========================================================================== */

.ab-lead { background: var(--ink); padding: 62px 0 56px; }
.ab-lead .read { max-width: var(--read); }
.ab-kicker {
    font-family: var(--font-mono, monospace); font-size: 0.72rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--brass-soft); margin: 0 0 16px;
}
.ab-lead h1 {
    color: #fff; font-size: clamp(1.7rem, 4.4vw, 2.3rem); font-weight: 600;
    line-height: 1.35; margin: 0 0 20px; text-wrap: balance;
}
.ab-thesis { color: rgba(255,255,255,0.76); font-size: 1.02rem; line-height: 1.9; margin: 0; }

.ab-body { padding: 52px 0 8px; }
.ab-item { margin-bottom: 42px; }
.ab-item h2 {
    font-family: var(--font-display); font-size: 1.22rem; font-weight: 600;
    color: var(--ink); margin: 0 0 12px;
}
.ab-item p { margin: 0 0 10px; line-height: 1.9; }

/* Where the promise can be checked. */
.ab-check {
    font-size: 0.88rem; color: var(--text-muted);
    border-left: 2px solid var(--brass-soft); padding: 2px 0 2px 12px; margin: 14px 0 0;
}
.ab-check a { color: var(--brass); }

.ab-scale { background: var(--paper-warm); border-top: 1px solid var(--line); padding: 46px 0 50px; margin-top: 34px; }
.ab-scale h2 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; margin: 0 0 8px; }
.ab-scale-note { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 26px; }

.ab-figures { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 22px; }
.ab-figures > div {
    flex: 1 1 120px; background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; padding: 16px 18px;
}
.ab-figures dt {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
    color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ab-figures dd { margin: 4px 0 0; font-size: 0.84rem; color: var(--text-muted); }

.ab-extra { font-size: 0.92rem; line-height: 1.9; color: var(--ink-soft); margin: 0; }

.ab-end { padding: 44px 0 64px; }
.ab-end p { font-size: 1.02rem; margin: 0 0 20px; }

/* ---------- The one sheet, under 860px ---------- */

.nav-burger { display: none; position: relative; margin-left: auto; }
.nav-burger > summary {
    list-style: none; cursor: pointer; width: 38px; padding: 9px 10px;
    border-radius: 5px; color: #e6ded1;
    display: flex; flex-direction: column; gap: 3.5px;
}
.nav-burger > summary::-webkit-details-marker { display: none; }
.nav-burger > summary i { display: block; height: 1.6px; background: currentColor; border-radius: 2px; }
.nav-burger[open] > summary { background: rgba(255,255,255,0.24); }
.nav-burger > summary:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }

.nav-sheet {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 268px;
    max-height: 78vh; overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 6px;
    padding: 6px; box-shadow: 0 14px 34px -16px rgba(42,39,36,0.55);
}
.nav-sheet a,
.nav-sheet button {
    display: block; width: 100%; padding: 10px 12px; border-radius: 4px;
    border: 0; background: none; text-align: left; cursor: pointer;
    color: var(--text); text-decoration: none; font-size: 0.94rem; font-family: var(--font-body);
}
.nav-sheet a:hover, .nav-sheet button:hover { background: var(--line); color: var(--ink-deep); }
.nav-sheet a.is-here { font-weight: 600; color: var(--seal); }
.nav-sheet hr { border: 0; border-top: 1px solid var(--line); margin: 5px 9px; }
.nav-sheet form { margin: 0; }

@media (max-width: 860px) {
    .site-nav { display: none; }
    .nav-burger { display: block; }
    .brand-word { font-size: 1.02rem; }
    .brand-mark { width: 27px; height: 27px; }
}

/* ---------- Course bibliography ---------- */

/* Closed by default and last on the page. A reading list is what a student
   wants on their second visit; seventy titles above the chapter list would
   bury what they came for. */
.reading-list {
    margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card);
}
.reading-list > summary {
    padding: 16px 20px; cursor: pointer; display: flex; flex-wrap: wrap;
    gap: 4px 12px; align-items: baseline;
}
.reading-list > summary::-webkit-details-marker { color: var(--brass); }
.reading-list[open] > summary { border-bottom: 1px solid var(--line); }
.rl-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.rl-note { font-size: 0.84rem; color: var(--text-muted); }

.rl-body { padding: 6px 20px 20px; font-size: 0.95rem; line-height: 1.85; }
.rl-body h1 { font-size: 1.05rem; }
.rl-body h2 {
    font-size: 0.95rem; color: var(--brass); margin: 22px 0 8px;
    padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.rl-body h3 { font-size: 0.9rem; margin: 16px 0 6px; }
.rl-body ul { padding-left: 20px; }
.rl-body li { margin-bottom: 6px; }
/* Most entries carry an English title in italics beside the Korean. */
.rl-body em { color: var(--ink-soft); }
.rl-body table { font-size: 0.9rem; }

/* ---------- Reading list: the tick ---------- */

/* The bibliography is the author's own markdown; only the tick is added, so
   everything here has to sit beside prose it does not control. */
.rl-progress {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
    padding: 12px 20px 0; font-size: 0.86rem;
}
.rl-count { color: var(--ink-soft); font-weight: 600; }
.rl-bar {
    flex: 1 1 120px; min-width: 100px; height: 5px; border-radius: 3px;
    background: var(--paper-warm); overflow: hidden;
}
.rl-bar b { display: block; height: 100%; background: var(--brass); border-radius: 3px; }
.rl-log { color: var(--brass); white-space: nowrap; }
.rl-signin { padding: 0 20px 4px; font-size: 0.84rem; color: var(--text-muted); }

.rl-tick {
    background: none; border: 1px solid var(--line); border-radius: 5px;
    width: 22px; height: 22px; padding: 0; cursor: pointer; flex: 0 0 auto;
    color: var(--text-muted); font-size: 0.8rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.rl-tick:hover { border-color: var(--brass); color: var(--brass); }
.rl-tick.is-done { background: var(--brass); border-color: var(--brass); color: #fff; }

/* A ticked entry stays fully legible - it is a record, not a deleted line. */
.rl-item.is-done .rl-text { color: var(--text-muted); }

.rl-body li.rl-item {
    display: flex; gap: 10px; align-items: flex-start;
    list-style: none; margin-left: -20px;
}
.rl-body li.rl-item .rl-text { flex: 1 1 auto; }
.rl-body td.rl-cell, .rl-body th.rl-cell { width: 34px; text-align: center; }

/* ---------- The reading log ---------- */

.rlog-course { margin-bottom: 26px; }
.rlog-head {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
    font-family: var(--font-display); font-size: 1.02rem;
    padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.rlog-n { margin-left: auto; font-size: 0.82rem; color: var(--brass); }

.rlog-item {
    display: flex; gap: 10px; align-items: baseline;
    padding: 7px 0; font-size: 0.93rem; line-height: 1.7;
}
.rlog-tick { color: var(--brass); flex: 0 0 auto; }
.rlog-text { flex: 1 1 auto; }
.rlog-meta { display: flex; gap: 10px; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.rlog-section { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 620px) {
    .rlog-item { flex-wrap: wrap; }
    .rlog-meta { width: 100%; padding-left: 20px; }
}