:root {
    --paper:      #f5f1e8;
    --paper-2:    #efe8d8;
    --ink:        #1c1a17;
    --ink-soft:   #5a534a;
    --red:        #cf2e2e;
    --red-deep:   #a51f1f;
    --rule:       rgba(28, 26, 23, 0.06);
    --hairline:   rgba(28, 26, 23, 0.14);
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --hand:  "Caveat", "Comic Sans MS", cursive;
}

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

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

body {
    font-family: var(--serif);
    color: var(--ink);
    background-color: var(--paper);
    /* faint notebook rules + warm vignette */
    background-image:
        repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px),
        radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.55), transparent 60%);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* paper grain overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* red margin rule, like ruled paper */
body::after {
    content: "";
    position: fixed;
    top: 0; bottom: 0;
    left: clamp(18px, 6vw, 88px);
    width: 1.5px;
    background: var(--red);
    opacity: 0.28;
    z-index: 0;
}

.wrap {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(48px, 9vw, 96px) clamp(28px, 7vw, 72px) 64px;
}

/* ---------- shared bits ---------- */
.kicker {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}
.kicker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}
.dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(207,46,46,0.14);
}

/* ---------- the headword (the misspelling) ---------- */
.entry { margin-top: clamp(34px, 6vw, 52px); }

.headword {
    font-weight: 900;
    font-size: clamp(3.2rem, 14vw, 7rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
    /* spell-check squiggle */
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--red);
    text-decoration-thickness: clamp(2px, 0.5vw, 4px);
    text-underline-offset: clamp(6px, 1.6vw, 14px);
}

.pronounce {
    font-family: var(--mono);
    font-size: clamp(0.82rem, 2.4vw, 1rem);
    color: var(--ink-soft);
    margin-top: clamp(20px, 4vw, 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
}
.pronounce em { color: var(--ink); font-style: italic; font-family: var(--serif); }

/* ---------- the correction ---------- */
.correction {
    margin-top: 30px;
    font-size: clamp(1.5rem, 5vw, 2.4rem);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45em;
}
.x-mark {
    font-family: var(--mono);
    color: var(--red);
    font-weight: 500;
    font-size: 0.62em;
    transform: translateY(-0.12em);
}
.correction .label {
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.62em;
}
/* the fixed word: strike the z, hand-write the y */
.fix { position: relative; font-weight: 600; white-space: nowrap; }
.fix .z {
    position: relative;
    color: var(--ink-soft);
}
.fix .z::after {            /* red strike-through */
    content: "";
    position: absolute;
    left: -6%; right: -6%;
    top: 52%;
    height: 0.09em;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    border-radius: 2px;
    animation: strike 0.5s ease-out 1.5s forwards;
}
.fix .y {                   /* hand-written correction above */
    color: var(--red);
    font-family: var(--hand);
    font-weight: 700;
    position: absolute;
    right: -0.05em;
    top: -0.92em;
    font-size: 0.95em;
    opacity: 0;
    transform: rotate(-6deg) translateY(6px);
    animation: ink-in 0.45s ease-out 1.95s forwards;
}
/* ---------- definition ---------- */
.definition {
    margin-top: clamp(30px, 5vw, 44px);
    font-size: clamp(1.18rem, 3.4vw, 1.5rem);
    max-width: 38ch;
}
.definition .pos {
    font-style: italic;
    color: var(--red-deep);
    font-weight: 600;
}

/* ---------- margin note (handwritten) ---------- */
.note {
    font-family: var(--hand);
    color: var(--red);
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    line-height: 1.1;
    transform: rotate(-2.5deg);
    margin-top: 30px;
}
.note .arrow { display: inline-block; transform: rotate(8deg); }

/* ---------- CTA ---------- */
.cta-row {
    margin-top: clamp(40px, 7vw, 60px);
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 30px;
    box-shadow: 6px 6px 0 var(--red);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.button:hover, .button:focus-visible {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--red);
    outline: none;
}
.button .arr { transition: transform 0.18s ease; }
.button:hover .arr { transform: translateX(4px); }
.stay {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink-soft);
}
.stay a { color: var(--ink); text-decoration-color: var(--hairline); }

/* ---------- divider ---------- */
.rule-break {
    display: flex; align-items: center; gap: 16px;
    margin: clamp(56px, 10vw, 84px) 0 clamp(36px, 6vw, 48px);
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.rule-break::before, .rule-break::after {
    content: ""; flex: 1; height: 1px; background: var(--hairline);
}

/* ---------- SEO prose ---------- */
.prose h2 {
    font-weight: 900;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.prose h2 .pen {
    color: var(--red);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--red);
    text-underline-offset: 5px;
}
.prose p {
    font-size: clamp(1.04rem, 2.6vw, 1.16rem);
    color: #2a2620;
    margin-top: 16px;
    max-width: 62ch;
}
.prose p a { color: var(--red-deep); text-underline-offset: 3px; }

/* common misspellings grid */
.typos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 28px 0 8px;
}
.typos li {
    font-family: var(--mono);
    font-size: 0.95rem;
    padding: 12px 14px;
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    color: var(--ink-soft);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: rgba(207,46,46,0.6);
    text-underline-offset: 4px;
}
.typos li.correct {
    color: var(--ink);
    background: #fff;
    text-decoration: none;
    border-color: var(--ink);
    font-weight: 500;
    position: relative;
}
.typos li.correct::after {
    content: "✓";
    color: var(--red);
    position: absolute;
    right: 12px;
}

/* FAQ */
.faq { margin-top: 12px; }
.faq details {
    border-top: 1px solid var(--hairline);
    padding: 18px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: clamp(1.08rem, 2.8vw, 1.25rem);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mark {
    font-family: var(--mono);
    color: var(--red);
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.faq details[open] summary .mark { transform: rotate(45deg); }
.faq p { margin-top: 12px; }

/* footer */
footer {
    margin-top: clamp(56px, 10vw, 88px);
    padding-top: 28px;
    border-top: 1px solid var(--hairline);
    font-family: var(--mono);
    font-size: 0.74rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
footer a { color: var(--ink); }

/* ---------- entrance animation ---------- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.34s; }
.d4 { animation-delay: 0.50s; }
.d5 { animation-delay: 0.66s; }
.d6 { animation-delay: 0.82s; }

@keyframes rise   { to { opacity: 1; transform: translateY(0); } }
@keyframes strike { to { transform: scaleX(1); } }
@keyframes ink-in { to { opacity: 1; transform: rotate(-6deg) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .reveal { opacity: 1; transform: none; }
    .fix .z::after { transform: scaleX(1); }
    .fix .y { opacity: 1; transform: rotate(-6deg); }
}