/* ============================================================
   NỀN GIẤY — tokens, reset, nhịp dòng kẻ, kiểu chữ
   Thế giới: bài văn học trò trên giấy kiểm tra, cô chấm mực đỏ.
   Mọi khoảng cách đều là bội số của --lh để chữ nằm ĐÚNG trên
   dòng kẻ. Phá nhịp này là phá cả vật liệu của trang.
   ============================================================ */

:root {
    /* Giấy: trắng xanh lạnh của giấy kiểm tra, KHÔNG phải giấy kem */
    --paper: #f5f7fa;
    --paper-deep: #e8edf5;
    --paper-edge: #d7dfec;

    /* Dòng kẻ ngang và lề dọc của tờ giấy */
    --rule: #c9d7ee;
    --margin-rule: #e79aa0;

    /* Mực bút bi của học trò */
    --ink: #22307d;
    --ink-soft: #55609b;

    /* Mực đỏ của cô: --red để viết trên giấy, --red-deep cho nền và chữ nhỏ */
    --red: #e01b0f;
    --red-deep: #a81208;

    --graphite: #4c5666;
    --white: #ffffff;

    /* Nhịp dòng kẻ 32px. Cả thang --s1..--s7 dưới đây đều là bội số
       hoặc ước của nó; đổi con số này mà không tính lại cả thang thì
       chữ sẽ rơi vào giữa hai dòng kẻ và lời hứa vật liệu của trang
       thành nói dối ngay trên màn hình. */
    --lh: 2rem;
    --s1: 0.5rem;
    --s2: 1rem;
    --s3: 2rem;
    --s4: 3rem;
    --s5: 4rem;
    --s6: 6rem;
    --s7: 8rem;

    --measure: 34rem;
    --page: 72rem;

    --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, -apple-system, sans-serif;
    --font-hand: "Patrick Hand", "Archivo", cursive;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    /* Dấu tiếng Việt chồng cao: nới line-height ở cỡ lớn để không cụt dấu */
    line-height: 1.12;
}

h1 {
    font-size: clamp(2.25rem, 5.4vw, 3.75rem);
}

h2 {
    font-size: clamp(1.875rem, 4.4vw, 3rem);
}

h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 700;
}

p {
    margin: 0 0 var(--lh);
    max-width: var(--measure);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

strong {
    font-weight: 700;
}

/* --- Tờ giấy: dòng kẻ ngang + lề đỏ dọc ------------------- */

.sheet {
    position: relative;
    background-color: var(--paper);
    background-image: repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(var(--lh) - 1px),
            var(--rule) calc(var(--lh) - 1px),
            var(--rule) var(--lh));
    background-position: 0 0;
}

/* Lề đỏ dọc. Nó phải rơi đúng ranh giới giữa cột lề (nơi cô ghi số
   thứ tự và điểm) và cột thân bài — như trong vở thật, chữ học trò
   bắt đầu ngay sau vạch đỏ. */
.sheet::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.25rem;
    width: 2px;
    background: var(--margin-rule);
    opacity: 0.85;
    pointer-events: none;
}

@media (min-width: 62rem) {
    .sheet::before {
        left: calc((100% - min(100% - 2rem, var(--page))) / 2 + 10rem);
    }
}

/* Dưới 62rem lưới về một cột, nên thân bài phải tự né vạch đỏ */
.page--paper {
    padding-left: 2.5rem;
}

@media (min-width: 62rem) {
    .page--paper {
        padding-left: 0;
    }
}

/* --- Vùng mực đỏ: cô cầm cả trang -------------------------- */

.field-red {
    background: var(--red-deep);
    color: var(--white);
    /* Dòng kẻ vẫn còn, chỉ đổi sang mực trắng mờ */
    background-image: repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(var(--lh) - 1px),
            rgba(255, 255, 255, 0.13) calc(var(--lh) - 1px),
            rgba(255, 255, 255, 0.13) var(--lh));
}

.field-red a {
    color: var(--white);
}

/* --- Khung trang ------------------------------------------- */

.page {
    width: min(100% - 2rem, var(--page));
    margin-inline: auto;
}

.page--indent {
    padding-left: clamp(1rem, 4vw, 3rem);
}

/* Hai mục cạnh nhau cộng dồn padding, nên mỗi mục chỉ giữ một nửa
   khoảng thở nó cần; chỗ nghỉ đến từ nội dung thưa, không từ ô trống. */
section {
    padding-block: clamp(var(--s4), 5.5vw, var(--s5));
    /* Thanh trên dính cứng: neo #id phải chừa chỗ cho nó */
    scroll-margin-top: 5rem;
}

.lede {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--graphite);
    max-width: 38rem;
}

.field-red .lede {
    color: rgba(255, 255, 255, 0.86);
}

.section-title + .lede {
    margin-top: var(--s2);
}

.section-title {
    max-width: 18ch;
    margin-bottom: 0;
}

/* Chú thích trung thực: cái gì là minh họa thì nói rõ là minh họa */
.disclosure {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--graphite);
    font-style: italic;
    max-width: 30rem;
    margin-bottom: 0.5rem;
}

/* Bỏ qua điều hướng: ẩn cho tới khi có người dùng bàn phím tab tới */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 100;
    background: var(--red-deep);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    padding: 0.625rem 1rem;
    transition: top 0.18s var(--ease);
}

.skip-link:focus {
    top: 0.5rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

:where(a, button):focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

.field-red :where(a, button):focus-visible {
    outline-color: var(--white);
}