@font-face {
    font-family: "Bai Jamjuree";
    src: url("fonts/baijamjuree/BaiJamjuree-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Bai Jamjuree";
    src: url("fonts/baijamjuree/BaiJamjuree-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Bai Jamjuree";
    src: url("fonts/baijamjuree/BaiJamjuree-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ink: #142637;
    --muted: #425970;
    --line: #d6e2ec;
    --teal: #0b6269;
    --teal-dark: #084d57;
    --teal-soft: #d4eeeb;
    --ice: #f3f8fc;
    --paper: #fff;
    --shadow: 0 1px 2px #163f6820, 0 5px 16px #164b7310;
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: radial-gradient(ellipse at 50% 340px, #fff 0, var(--ice) 82%);
    color: var(--ink);
    font: 400 16px/1.5 "Bai Jamjuree", Tahoma, sans-serif;
}

h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { line-height: 1.24; }
h1 { font-size: clamp(2rem, 3.1vw, 2.75rem); font-weight: 700; }
h2 { font-size: clamp(1.38rem, 2.35vw, 2rem); }
h1, h2, h3, p, dd { overflow-wrap: anywhere; }
a { color: var(--teal); text-underline-offset: .18em; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid #086fac; outline-offset: 3px; }
#content:focus { outline: none; }

.catalog-shell { width: min(1296px, calc(100% - 64px)); margin-inline: auto; }

.catalog-skip, .catalog-sr-only {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.catalog-skip:focus {
    inset: 8px auto auto 8px;
    z-index: 5;
    clip-path: none;
    width: auto;
    height: auto;
    padding: .6rem 1rem;
    background: var(--paper);
}

.catalog-header {
    position: relative;
    z-index: 2;
    background: #fbfdff;
    box-shadow: 0 2px 9px #173e6022;
    border-bottom: 1px solid #deebf3;
}

.catalog-header-inner {
    width: min(1360px, calc(100% - 56px));
    margin-inline: auto;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 36px);
}

.catalog-brand {
    flex: 0 0 auto;
    border-inline-end: 1px solid var(--line);
    padding-inline-end: clamp(12px, 2.4vw, 34px);
}

.catalog-brand img { width: 136px; height: auto; }

.catalog-nav {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2.2vw, 30px);
}

.catalog-nav-link {
    position: relative;
    min-height: 44px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.catalog-nav-link.is-current, .catalog-nav-link:hover, .catalog-menu[open] .catalog-nav-link {
    color: #075c84;
    background: #e1f0fb;
}

.catalog-nav-link.is-current::after {
    content: "";
    position: absolute;
    inset: auto 10px -6px;
    height: 3px;
    border-radius: 6px;
    background: #137c87;
}

.catalog-menu { position: relative; }
.catalog-menu summary { list-style: none; }
.catalog-menu summary::-webkit-details-marker { display: none; }

.catalog-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1;
    min-width: 11rem;
    width: max-content;
    max-width: min(21rem, calc(100vw - 48px));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.catalog-dropdown a, .catalog-dropdown button {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    background: none;
    overflow-wrap: anywhere;
}

.catalog-dropdown a:hover, .catalog-dropdown button:hover,
.catalog-dropdown [aria-current] { background: #ebf6fc; color: var(--teal-dark); }
.catalog-account .catalog-dropdown { left: auto; right: 0; }
.catalog-account summary { border: 1px solid var(--line); border-radius: 24px; }
.catalog-account summary .fa-user {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--teal);
}
.catalog-account summary span:not(.fa) {
    max-width: 11em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-search {
    flex: 0 1 276px;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-inline-start: auto;
    border: 1px solid #cbdbe9;
    border-radius: 24px;
    background: #eaf2f9;
}

.catalog-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    border-radius: 0 24px 24px 0;
    padding: 9px 12px 9px 3px;
    background: transparent;
}

.catalog-search input::placeholder { color: #49627a; }
.catalog-search button {
    align-self: stretch;
    flex: 0 0 44px;
    border: 0;
    border-radius: 24px 0 0 24px;
    background: transparent;
}
.catalog-search button:hover { background: #d9eaf7; }

.catalog-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.catalog-button .fa { flex: 0 0 auto; }

.catalog-primary {
    color: #fff;
    background: linear-gradient(180deg, #127d79, #0b606a);
    border-color: #147881;
    box-shadow: inset 0 1px #ffffff38;
}
.catalog-primary:hover { background: var(--teal-dark); }
.catalog-outline { color: var(--teal-dark); background: #fafdff; border-color: #bcd3e2; }
.catalog-outline:hover { background: #e6f4f5; border-color: #689ca9; }
.catalog-disabled { color: #697a89; border-color: var(--line); background: #f0f5f8; }
.catalog-menu-toggle { display: none; }
.catalog-logout-status:not(:empty) { display: block; padding: 6px 12px; color: var(--muted); }

.catalog-mountains {
    background: linear-gradient(0deg, var(--ice), #f5fafd00 30%), url("../images/novel-mountains.jpg") center top / cover no-repeat;
}

.catalog-breadcrumb { padding: 13px 18px; color: var(--muted); font-size: .94rem; }
.catalog-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.catalog-breadcrumb li { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.catalog-breadcrumb a { color: var(--muted); text-decoration: none; }
.catalog-breadcrumb a:hover { text-decoration: underline; }
.catalog-breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }

.catalog-novel-hero {
    display: grid;
    grid-template-columns: minmax(124px, 216px) minmax(0, 1fr) minmax(330px, 33.25%);
    align-items: center;
    gap: clamp(16px, 2.4vw, 34px);
    padding: 18px 18px 20px;
}

.catalog-novel-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 216 / 260;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    background: #eaf2f8;
    box-shadow: 0 8px 20px #18375422;
}

.catalog-novel-cover[src="images/logo.png"], .catalog-chapter-cover img[src="images/logo.png"] {
    object-fit: contain;
    padding: 8px;
}

.catalog-novel-intro { min-width: 0; }
.catalog-novel-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; margin-top: 13px; color: var(--muted); font-weight: 600; }
.catalog-novel-meta .fa { margin-right: 4px; }
.catalog-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 24px;
    padding: 3px 12px;
    color: #18643c;
    background: #def1e6;
    font-size: .875rem;
}
.catalog-badge .fa { font-size: .6rem; }
.catalog-novel-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 16px;
    color: var(--muted);
    font-size: 1.075rem;
}
.catalog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.catalog-actions .catalog-button { min-height: 46px; padding-inline: 20px; }

.catalog-panel, .catalog-chapter {
    background: linear-gradient(125deg, #fff, #fafdff);
    border: 1px solid #e0e9f0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.catalog-novel-status { overflow: hidden; }
.catalog-novel-status h2 {
    padding: 14px 24px;
    background: linear-gradient(90deg, #e2f2f1, #d8e9ed);
    font-size: 1.36rem;
}
.catalog-novel-status h2 .fa { margin-inline-end: 8px; color: var(--teal); }
.catalog-novel-status dl { padding: 5px 20px 12px; }
.catalog-novel-status dl div {
    display: grid;
    grid-template-columns: minmax(130px, .83fr) minmax(0, 1.17fr);
    align-items: baseline;
    gap: 8px;
    padding: 8px 6px;
}
.catalog-novel-status dl div + div { border-top: 1px solid #e1ebf2; }
.catalog-novel-status dt .fa { width: 22px; color: #4a667f; }
.catalog-novel-status dd { font-weight: 600; }
.catalog-novel-status dd a { font-weight: 700; }

.catalog-tab-bar { border-bottom: 1px solid #ccdde9; background: #f9fcfeb8; }
.catalog-tabs { display: flex; flex-wrap: wrap; gap: 10px clamp(6px, 2.7vw, 42px); padding: 8px 18px; }
.catalog-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px clamp(10px, 2vw, 26px);
    border-radius: 10px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    text-align: center;
}
.catalog-tabs a:hover { background: #e8f4f9; }
.catalog-tabs a[aria-current] { background: #157987; color: white; }
.catalog-tabs a[aria-current]::after {
    content: "";
    position: absolute;
    inset: auto 8px -9px;
    height: 3px;
    border-radius: 6px 6px 0 0;
    background: #127987;
}

.catalog-feed { padding-block: 28px 20px; }
.catalog-feed > .catalog-breadcrumb { padding: 0 0 18px; }
.catalog-section-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 4px 0 22px;
    min-width: 0;
}
.catalog-section-heading p { margin-top: 2px; color: var(--muted); }
.catalog-section-icon {
    display: grid;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: var(--radius);
    color: var(--teal);
    background: var(--teal-soft);
    font-size: 1.65rem;
}
.catalog-heading-action { margin-left: auto; border-color: #57919d; flex: 0 0 auto; }

.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.catalog-chapter {
    display: grid;
    align-items: center;
    grid-template-columns: clamp(90px, 10vw, 144px) minmax(0, 1fr) auto;
    gap: 16px;
    padding: 10px 18px 10px 16px;
    min-width: 0;
}
.catalog-chapter-cover {
    position: relative;
    align-self: center;
    overflow: hidden;
    border-radius: 11px;
    background: #e5eff6;
    box-shadow: 0 2px 5px #1b263525;
}
.catalog-chapter-cover img { width: 100%; height: auto; aspect-ratio: 144 / 90; object-fit: cover; object-position: center 44%; }
.catalog-chapter-cover span {
    position: absolute;
    inset: auto 0 0;
    padding: 2px 4px;
    color: white;
    background: #11191ce8;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
}
.catalog-chapter h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.catalog-chapter-novel { display: inline-block; margin-bottom: 2px; color: var(--teal); font-weight: 600; }
.catalog-chapter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 9px; color: var(--muted); font-size: .93rem; }
.catalog-chapter-meta > span { display: inline-flex; align-items: baseline; gap: 6px; }
.catalog-chapter-meta > span + span { border-left: 1px solid #ccd9e5; padding-left: 12px; }
.catalog-read { font-size: .875rem; min-width: 144px; padding-inline: 14px; white-space: nowrap; }

.catalog-notice { margin-block: 14px; padding: 12px 16px; border-radius: 10px; background: #e0f0f9; }
.catalog-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; color: var(--muted); font-weight: 600; }
.catalog-synopsis { padding: clamp(16px, 3vw, 32px); white-space: pre-line; }
.catalog-empty { padding: 32px 20px; text-align: center; }
.catalog-empty p { margin-bottom: 14px; }
.catalog-empty h1 { margin-bottom: 10px; }
.catalog-error { padding: 16px 0 34px; }

.catalog-detail {
    display: grid;
    grid-template-columns: minmax(132px, 216px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 3vw, 40px);
    padding: clamp(16px, 3vw, 36px);
    max-width: 920px;
    margin: 12px auto 0;
}
.catalog-detail-novel { font-weight: 700; }
.catalog-detail h1 { margin: 6px 0 14px; }
.catalog-detail-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--muted); }
.catalog-detail-meta div { display: grid; gap: 2px; }
.catalog-detail-meta dd { color: var(--ink); font-weight: 600; }
.catalog-neighbors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin: 16px auto 0;
    gap: 12px;
}
.catalog-back-link { text-align: center; padding: 18px 0 28px; }

.catalog-share-dialog {
    width: min(440px, calc(100% - 32px));
    padding: 20px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
}
.catalog-share-dialog::backdrop { background: #172c4266; }
.catalog-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.catalog-share-dialog input { width: 100%; background: var(--ice); border: 1px solid var(--line); border-radius: 8px; padding: 9px; margin: 4px 0 12px; }
.catalog-share-status { color: var(--muted); }
.catalog-share-status:not(:empty) { margin-top: 8px; }

.catalog-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    border-top: 1px solid var(--line);
    padding: 18px 0 24px;
    color: var(--muted);
    font-size: .875rem;
}

@media (max-width: 1100px) {
    .catalog-novel-hero { grid-template-columns: 160px minmax(0, 1fr) minmax(295px, 34%); }
    .catalog-novel-status dl { padding-inline: 12px; }
    .catalog-novel-status dl div { grid-template-columns: minmax(115px, .9fr) minmax(0, 1.1fr); padding-inline: 3px; }
    .catalog-grid { gap: 12px; }
    .catalog-chapter { gap: 10px; padding-inline: 10px; }
    .catalog-read { min-width: 0; padding-inline: 10px; }
}

@media (max-width: 860px) {
    .catalog-shell { width: calc(100% - 40px); }
    .catalog-header-inner { width: calc(100% - 40px); flex-wrap: wrap; justify-content: space-between; gap: 0; min-height: 64px; }
    .catalog-brand { border: 0; padding: 0; }
    .catalog-brand img { width: 122px; }
    .catalog-menu-toggle { display: inline-flex; }
    .catalog-nav {
        display: none;
        flex: 1 0 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        padding: 6px 0 15px;
    }
    .catalog-menu-toggle[aria-expanded="true"] + .catalog-nav { display: flex; }
    .catalog-nav-link.is-current::after { display: none; }
    .catalog-search { margin: 4px 0; flex: 0 0 auto; }
    .catalog-dropdown, .catalog-account .catalog-dropdown { position: static; width: 100%; max-width: none; box-shadow: none; margin-top: 5px; }
    .catalog-account summary span:not(.fa) { max-width: 75%; }
    .catalog-breadcrumb { padding-inline: 0; }
    .catalog-novel-hero { grid-template-columns: minmax(120px, 155px) minmax(0, 1fr); padding-inline: 0; }
    .catalog-novel-status { grid-column: 1 / -1; }
    .catalog-tabs { padding-inline: 0; }
    .catalog-grid { grid-template-columns: minmax(0, 1fr); }
    .catalog-chapter { grid-template-columns: clamp(94px, 16vw, 144px) minmax(0, 1fr) auto; }
}

@media (max-width: 480px) {
    .catalog-shell, .catalog-header-inner { width: calc(100% - 28px); }
    .catalog-novel-hero { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 14px; padding-top: 5px; }
    .catalog-novel-intro h1 { font-size: 1.7rem; }
    .catalog-novel-meta { gap: 5px; margin-top: 5px; font-size: .875rem; }
    .catalog-novel-description { font-size: .94rem; margin-top: 7px; -webkit-line-clamp: 3; }
    .catalog-actions { margin-top: 11px; gap: 6px; }
    .catalog-actions .catalog-button { padding-inline: 10px; }
    .catalog-tabs { flex-wrap: nowrap; gap: 3px; }
    .catalog-tabs a { flex: 1 1 auto; gap: 5px; padding-inline: 4px; font-size: .89rem; min-height: 44px; }
    .catalog-tabs a .fa { display: none; }
    .catalog-feed { padding-top: 20px; }
    .catalog-section-heading { gap: 8px; margin-bottom: 14px; }
    .catalog-section-icon { flex-basis: 38px; width: 38px; height: 44px; font-size: 1.1rem; border-radius: 9px; }
    .catalog-section-heading p { font-size: .85rem; }
    .catalog-heading-action { padding-inline: 8px; gap: 4px; font-size: .875rem; }
    .catalog-chapter { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
    .catalog-chapter-cover span { display: none; }
    .catalog-chapter-novel { font-size: .88rem; }
    .catalog-chapter-meta { gap: 1px 7px; margin-top: 4px; font-size: .8rem; }
    .catalog-chapter-meta > span { gap: 4px; }
    .catalog-chapter-meta > span + span { padding-left: 0; border: 0; }
    .catalog-read { gap: 4px; padding-inline: 8px; font-size: .8rem; }
    .catalog-read .fa-book { display: none; }
    .catalog-detail { grid-template-columns: 77px minmax(0, 1fr); align-items: start; margin-top: 0; }
    .catalog-detail h1 { font-size: 1.65rem; }
    .catalog-detail-meta { gap: 7px 18px; font-size: .9rem; }
    .catalog-neighbors { gap: 8px; }
    .catalog-neighbors .catalog-button { padding-inline: 6px; }
}

@media (max-width: 350px) {
    .catalog-chapter { grid-template-columns: 62px minmax(0, 1fr) auto; }
    .catalog-read .fa-angle-right { display: none; }
    .catalog-novel-status dl div { grid-template-columns: 104px minmax(0, 1fr); font-size: .94rem; }
    .catalog-novel-status dt .fa { width: 16px; }
}