/* This file Made by Lazyx */

/* Font */
@font-face {
    font-family: "poppins";
    src: url("fonts/Poppins-Regular.ttf");
}
@font-face {
    font-family: "normal";
    src: url("fonts/OperatorMonoLigNerdFont-Regular.otf");
}
@font-face {
    font-family: "italic";
    src: url("fonts/OperatorMonoLigNerdFont-Italic.otf");
}
@font-face {
    font-family: "blackletter";
    src: url("fonts/Canterbury.ttf");
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "normal", sans-serif;
    background: #f1eadc;
    color: #1b150d;
    line-height: 1.65;
    overflow-x: hidden;
    transition: background 200ms ease, color 200ms ease;
}

a {
    color: #1b150d;
    text-decoration: none;
}

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

h1 {
    font-family: "blackletter", sans-serif;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: #6a0f0f;
    font-size: 4rem;
    text-align: center;
}

h2 {
    font-family: "poppins", sans-serif;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: #6a0f0f;
    font-size: 2.4rem;
}

h3 {
    font-family: "poppins", sans-serif;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: #6a0f0f;
    font-size: 1.8rem;
}

h4 {
    font-family: "poppins", sans-serif;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: #6a0f0f;
    font-size: 1.4rem;
}

code, pre, kbd {
    font-family: "italic", monospace;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Ink panels */
.card, .panel {
    background: #faf5ea;
    border: 3px solid #1b150d;
    border-radius: 0;
    box-shadow: 6px 6px 0 #1b150d;
    padding: 28px 24px;
    position: relative;
    transition: transform 110ms ease, box-shadow 110ms ease;
}

.card:hover,
.panel:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 rgba(27,21,13,0.18);
}

.sub {
    background: #e7dec9;
    border: 2px solid #1b150d;
    border-radius: 0;
    box-shadow: 3px 3px 0 #1b150d;
    padding: 18px;
}

.card,
.card-row {
    margin-bottom: 20px;
}

/* Overline label */
.overline {
    display: inline-block;
    font-family: "normal", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    background: #d8202a;
    border: 2px solid #1b150d;
    padding: 4px 12px;
    margin-bottom: 18px;
    transform: skewX(-10deg);
    box-shadow: 3px 3px 0 #1b150d;
}
.overline span {
    display: inline-block;
    transform: skewX(10deg);
}

/* Hero */
.hero {
    padding: 48px 24px 56px;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #ded8cd;
}

.hero-inner {
    /* 不再限制 hero 内部最大宽度，使横幅与文章 card 同宽 */
    max-width: none;
    position: relative;
    margin: 0 auto;
}

.hero-title {
    font-family: "blackletter", sans-serif;
    font-size: 6.5em;          /* 横屏时保持大尺寸，相对其他 hero 文本更大 */
    line-height: 0.95;
    margin: 16px 0 40px;
    color: #4a0000;
}

.hero-legend {
    font-size: 1rem;            /* 与 h1 形成更明显的对比 */
    line-height: 1.5;
    color: #6a0f0f;
    margin-bottom: 20px;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    color: #6a0f0f;
    margin-bottom: 20px;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;        /* 横屏：横幅占满容器宽度 */
}

.hero-btn {
    display: block;
    width: 100%;                 /* 横屏：全宽横幅，与 card 同宽 */
    padding: 2px 10px;           /* 保持原有紧凑内边距 */
    background: #6a0f0f;
    color: #ffffff;
    border: 2px solid #1b150d;
    font-family: "poppins", sans-serif;
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    box-shadow: 4px 4px 0 rgba(27,21,13,0.22);
    transition: transform 110ms ease, box-shadow 110ms ease, background 110ms ease, color 110ms ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.hero-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 rgba(27,21,13,0.22);
    background: #8a1a1a;
}

.saying {
    font-family: "italic", monospace;
}

.underline-link {
    text-decoration: underline;
    text-decoration-color: #d8202a;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.underline-link:hover {
    background: #e7dec9;
    color: #d8202a;
}

/* NLTV entry: whole block no underline, only inner link underlined */
.hero-btn.nltv-entry {
    text-decoration: none;
}

.hero-btn.nltv-entry a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #d8202a;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Community database cards */
.wall {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.password {
    background: #fffdf6;
    border: 2px solid #1b150d;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(27,21,13,0.12);
    padding: 12px 16px;
    transition: box-shadow 110ms ease, transform 110ms ease;
}

.password:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(27,21,13,0.18);
}

.password p {
    margin: 4px 0;
    line-height: 1.5;
    text-indent: 0;
}

.password-by {
    font-size: 0.75rem;
    color: #695f50;
    letter-spacing: 0.02em;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    border: 2.5px solid #1b150d;
    cursor: pointer;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    position: relative;
    background: #faf5ea;
    color: #1b150d;
    box-shadow: 4px 4px 0 #1b150d;
    transition: transform 110ms ease, box-shadow 110ms ease;
    box-sizing: border-box;
}

.btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 rgba(27,21,13,0.18);
}
.btn:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 #1b150d;
}

.btn.filled {
    background: #d8202a;
    color: #ffffff;
}
.btn.tonal {
    background: #e7dec9;
    color: #1b150d;
}
.btn.outlined {
    background: transparent;
    color: #1b150d;
}

.card-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.card-row .card {
    flex: 1;
    min-width: 240px;
}

/* Article content */
.news-card {
    margin-bottom: 20px;
}

.news-card figure {
    background: #e7dec9;
    border: 3px solid #1b150d;
    box-shadow: 6px 6px 0 rgba(27,21,13,0.18);
    padding: 22px;
    text-align: center;
    margin-bottom: 20px;
}

.news-card figure img {
    margin: 0 auto;
    border: 2px solid #1b150d;
    transition: transform 110ms ease, box-shadow 110ms ease;
}

.news-card figure img:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 rgba(27,21,13,0.22);
}

.news-card p {
    margin: 0 0 18px 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    line-height: 1.7;
    text-indent: 2em;
}

.news-card p:last-child {
    margin-bottom: 0;
}

.news-card p.saying {
    margin-bottom: 18px;
    text-indent: 0; /* 取消链接缩进 */
}

.news-card p.saying a {
    display: block;
    width: 100%;
    padding: 14px 18px;
    background: #faf5ea;
    border: 2.5px solid #1b150d;
    box-shadow: 4px 4px 0 rgba(27,21,13,0.15);
    text-decoration: underline;
    text-decoration-color: #d8202a;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    color: #1b150d;
    font-weight: 700;
    transition: transform 110ms ease, box-shadow 110ms ease;
    box-sizing: border-box;
}

.news-card p.saying a:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 rgba(27,21,13,0.20);
}

.news-card p.saying a:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 rgba(27,21,13,0.20);
}

.news-card a {
    color: #1b150d;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #d8202a;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.news-card a:hover {
    color: #d8202a;
}

.modules-heading {
    margin: 30px 0 10px;
    text-align: left;
    color: #6a0f0f;
}

/* Form controls */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    margin: 8px 0 16px;
    font-family: "normal", sans-serif;
    font-size: 1rem;
    color: #1b150d;
    background: #fffdf6;
    border: 2px solid #1b150d;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(27,21,13,0.18);
    outline: none;
    box-sizing: border-box;
    transition: box-shadow 110ms ease, transform 110ms ease, border-color 110ms ease;
}

input:not([type="checkbox"]):not([type="radio"]):hover,
textarea:hover,
select:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(27,21,13,0.22);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    outline: 3px solid #d8202a;
    outline-offset: 2px;
    background: #ffffff;
}

body.dark input:not([type="checkbox"]):not([type="radio"]),
body.dark textarea,
body.dark select {
    background: #2b241a;
    color: #f1eadc;
    border-color: #f1eadc;
    box-shadow: 3px 3px 0 rgba(241,234,220,0.18);
}
body.dark input:not([type="checkbox"]):not([type="radio"]):hover,
body.dark textarea:hover,
body.dark select:hover {
    box-shadow: 5px 5px 0 rgba(241,234,220,0.22);
}
body.dark input:not([type="checkbox"]):not([type="radio"]):focus,
body.dark textarea:focus,
body.dark select:focus {
    outline: 3px solid #d8202a;
    background: #3a3227;
}

/* Reveal animation */
.reveal, .reveal-scale {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 400ms ease, transform 400ms ease;
}
.reveal.visible, .reveal-scale.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Image button style for gallery */
.image-btn {
    display: block;
    max-width: 50%;
    margin: 0;
    background: #faf5ea;
    border: 2px solid #1b150d;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(27,21,13,0.10);
    padding: 10px;
    box-sizing: border-box;
    transition: transform 110ms ease, box-shadow 110ms ease;
    text-align: center;
}
.image-btn img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}
.image-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 rgba(27,21,13,0.15);
}

/* Back to top button (global) */
.top-button {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100;
}
.hidden {
    display: none;
}

/* Hero title two-line / single-line helpers */
.purchase-title .line-small {
    display: block;
    font-size: 0.6em;
}
.purchase-title .line-nailong {
    display: block;
    font-size: 1em;
}
.hero-title.nowrap {
    white-space: nowrap;
}

/* Dark mode */
body.dark {
    background: #1b150d;
    color: #f1eadc;
}
body.dark a {
    color: #f1eadc;
}
body.dark .hero {
    background: #2b241a;
}
body.dark .card,
body.dark .panel {
    background: #2b241a;
    border-color: #f1eadc;
    box-shadow: 6px 6px 0 #f1eadc;
}
body.dark .card:hover,
body.dark .panel:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 rgba(241,234,220,0.18);
}
body.dark .sub {
    background: #3a3227;
    border-color: #f1eadc;
    box-shadow: 3px 3px 0 #f1eadc;
}
body.dark .overline {
    background: #d8202a;
    color: #ffffff;
    border-color: #f1eadc;
    box-shadow: 3px 3px 0 #f1eadc;
}
body.dark .hero-title {
    color: #f1eadc;
}
body.dark .hero-subtitle,
body.dark .hero-legend {
    color: #cfc6b8;
}
body.dark .hero-btn {
    background: #6a0f0f;
    color: #ffffff;
    border-color: #f1eadc;
    box-shadow: 4px 4px 0 rgba(241,234,220,0.18);
}
body.dark .hero-btn:hover {
    box-shadow: 7px 7px 0 rgba(241,234,220,0.22);
    background: #8a1a1a;
}
body.dark .news-card figure {
    background: #3a3227;
    border-color: #f1eadc;
    box-shadow: 6px 6px 0 rgba(241,234,220,0.18);
}
body.dark .news-card p {
    background: none;
    border: none;
    box-shadow: none;
}
body.dark .news-card p.saying a {
    background: #2b241a;
    color: #f1eadc;
    border-color: #f1eadc;
    box-shadow: 4px 4px 0 rgba(241,234,220,0.15);
}
body.dark .news-card p.saying a:hover {
    box-shadow: 7px 7px 0 rgba(241,234,220,0.20);
}
body.dark .news-card p.saying a:active {
    box-shadow: 0 0 0 rgba(241,234,220,0.20);
}
body.dark .news-card a {
    color: #f1eadc;
}
body.dark .news-card a:hover {
    color: #d8202a;
}
body.dark .btn {
    background: #2b241a;
    color: #f1eadc;
    border-color: #f1eadc;
    box-shadow: 4px 4px 0 #f1eadc;
}
body.dark .btn:hover {
    box-shadow: 7px 7px 0 rgba(241,234,220,0.18);
}
body.dark .btn:active {
    box-shadow: 0 0 0 #f1eadc;
}
body.dark .btn.filled {
    background: #d8202a;
    color: #ffffff;
}
body.dark .btn.tonal {
    background: #3a3227;
    color: #f1eadc;
}
body.dark .btn.outlined {
    background: transparent;
    color: #f1eadc;
}
body.dark .image-btn {
    background: #2b241a;
    border-color: #f1eadc;
    box-shadow: 4px 4px 0 rgba(241,234,220,0.18);
}
body.dark .image-btn:hover {
    box-shadow: 7px 7px 0 rgba(241,234,220,0.18);
}

/* Dark mode: community database cards */
body.dark .password {
    background: #2b241a;
    border-color: #f1eadc;
    box-shadow: 3px 3px 0 rgba(241,234,220,0.18);
}
body.dark .password:hover {
    box-shadow: 5px 5px 0 rgba(241,234,220,0.22);
}
body.dark .password p {
    color: #f1eadc;
}
body.dark .password-by {
    color: #cfc6b8;
}

/* Dark mode: underline link hover */
body.dark .underline-link:hover {
    background: #3a3227;
    color: #f1eadc;
}

/* ========= 移动端适配 ========= */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .hero {
        padding: 30px 16px 40px;
    }

    .hero-title {
        font-size: 3.5em;          /* 移动端适当增大，保持相对大小 */
    }

    .hero-legend,
    .hero-subtitle {
        font-size: 0.9rem;         /* 进一步缩小次要文本，突出 h1 */
    }

    .hero-actions {
        align-items: stretch;       /* 移动端也保持横幅与卡片同宽 */
    }

    .hero-btn {
        width: 100%;                /* 横幅宽度不变，与 card 一致 */
        /* 不再限制 max-width 或使用 90% 宽度 */
        margin-left: 0;
        margin-right: 0;
    }

    .card,
    .panel {
        padding: 20px 16px;
    }

    .card-row {
        flex-direction: column;
    }

    .card-row .card {
        min-width: 0;
    }

    .news-card figure {
        padding: 16px;
    }

    .btn {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .modules-heading {
        margin: 24px 0 10px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
}