@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Serif+Display&family=Quicksand:wght@400;500;600&family=Libre+Baskerville:wght@400;700&display=swap');

/* =========================================================
ROOT
========================================================= */

:root {
--cream: #FFF9F5;
--paper: #FFFCF9;
--powder: #F8E3E8;
--petal: #F2CBD5;
--dusty-rose: #C77D91;

--old-rose: #A6536D;
--burgundy: #67263F;
--plum: #7D4A5E;
--cocoa: #49343A;
--rose-taupe: #8C7078;
--mauve: #D9AAB7;

--reader-font: 'Cormorant Garamond', Georgia, serif;
--reader-size: 1.25rem;
--reader-line: 1.85;
--reader-width: 680px;

--footer: #67263F;
--footer-text: #FFF9F5;
}

/* =========================================================
BASE
========================================================= */

html {
scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  }

body {
margin: 0;
min-height: 100vh;

background:
radial-gradient(
circle at 15% 10%,
rgba(166, 83, 109, .12),
transparent 30%
),
radial-gradient(
circle at 85% 85%,
rgba(199, 125, 145, .14),
transparent 30%
),
var(--cream);

color: var(--cocoa);
font-family: var(--reader-font);
overflow-x: hidden;
transition: background .3s, color .3s;
}

body::before {
content: "";
position: fixed;
inset: 0;

pointer-events: none;
opacity: .2;

background-image:
radial-gradient(
rgba(103, 38, 63, .08) .6px,
transparent .6px
);

background-size: 6px 6px;
z-index: -1;
}

::selection {
background: var(--petal);
color: var(--burgundy);
}

a {
color: inherit;
}

/* =========================================================
NIGHT / LAMPLIGHT
========================================================= */

html[data-theme="night"] {
--cream: #2d1721;
--paper: #3a202c;
--powder: #5b2c40;
--petal: #784258;
--dusty-rose: #d891a8;

--old-rose: #e5a0b4;
--burgundy: #ffd6e1;
--plum: #efb8c8;
--cocoa: #f7e6eb;
--rose-taupe: #d2a9b5;
--mauve: #8e596e;

--footer: #4b2035;
--footer-text: #ffeaf0;
}

html[data-theme="night"] body {
background:
radial-gradient(
circle at 15% 10%,
rgba(216, 145, 168, .13),
transparent 30%
),
radial-gradient(
circle at 85% 85%,
rgba(120, 66, 88, .24),
transparent 32%
),
var(--cream);
}

html[data-theme="night"] .side-nav,
html[data-theme="night"] .settings-panel,
html[data-theme="night"] .story-paper,
html[data-theme="night"] .card,
html[data-theme="night"] .random-result {
background: rgba(58, 32, 44, .96);
}


/* =========================================================
   LEFT DRAWER
   ========================================================= */

.menu-button {
    position: fixed;
    top: 20px;
    left: 20px;

    width: 48px;
    height: 48px;

    border-radius: 50%;
    border: 1px solid var(--mauve);

    background: rgba(255, 252, 249, .92);
    color: var(--burgundy);

    font-size: 1.25rem;

    cursor: pointer;
    z-index: 1001;

    box-shadow: 0 8px 24px rgba(103, 38, 63, .1);
    transition: .25s;
}

.menu-button:hover {
    transform: rotate(4deg) scale(1.05);
    background: var(--powder);
}

.side-nav {
    position: fixed;
    top: 0;
    left: -350px;

    width: 325px;
    height: 100vh;

    padding: 86px 35px 40px;

    background: var(--paper);
    border-right: 1px solid var(--mauve);

    box-shadow: 15px 0 40px rgba(103, 38, 63, .12);

    z-index: 1000;

    transition: left .35s ease;
    overflow-y: auto;
}

.side-nav.open {
    left: 0;
}

.side-nav::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        url('images/flower-texture.svg')
        bottom right / 240px auto
        no-repeat;

    opacity: .12;
    pointer-events: none;
}

.nav-inner {
    position: relative;
    z-index: 1;
}

.nav-small {
    color: var(--dusty-rose);

    font: 600 .72rem Quicksand, sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;

    margin-bottom: 10px;
}

.nav-name {
    margin: 0 0 30px;

    color: var(--burgundy);
    font: 400 2rem 'DM Serif Display', serif;
}

.nav-link {
    display: block;

    padding: 13px 0;

    border-bottom: 1px solid var(--petal);

    text-decoration: none;
    color: var(--plum);

    font: 600 .82rem Quicksand, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;

    transition: .2s;
}

.nav-link:hover {
    padding-left: 8px;
    color: var(--old-rose);
}

.nav-a {
    font: 400 2.1rem 'DM Serif Display', serif;
    text-transform: none;
    letter-spacing: 0;

    color: var(--burgundy);

    border-bottom: 0;
    margin-bottom: 15px;
}

.drawer-close {
    position: absolute;
    right: 22px;
    top: 20px;

    border: 0;
    background: none;

    color: var(--old-rose);
    font-size: 1.2rem;

    cursor: pointer;
}


/* =========================================================
SETTINGS
========================================================= */

.settings-toggle {
position: fixed;
right: 20px;
top: 20px;

width: 48px;
height: 48px;

border-radius: 50%;
border: 1px solid var(--mauve);

background: rgba(255, 252, 249, .92);
color: var(--burgundy);

font: 600 .78rem Quicksand, sans-serif;

cursor: pointer;
z-index: 900;

box-shadow: 0 8px 24px rgba(103, 38, 63, .08);
}

.settings-panel {
position: fixed;
right: 20px;
top: 78px;

width: min(340px, calc(100vw - 40px));

padding: 22px;

background: var(--paper);
border: 1px solid var(--mauve);
border-radius: 18px;

box-shadow: 0 18px 50px rgba(103, 38, 63, .15);

z-index: 899;
display: none;
}

.settings-panel.open {
display: block;
}

.settings-title {
margin: 0 0 4px;

color: var(--burgundy);
font: 400 1.6rem 'DM Serif Display', serif;
}

.settings-sub {
margin: 0 0 18px;

color: var(--rose-taupe);
font-size: .9rem;
font-style: italic;
}

.setting-row {
margin: 14px 0;
}

.setting-label {
display: flex;
justify-content: space-between;
align-items: center;

margin-bottom: 7px;

font: 600 .7rem Quicksand, sans-serif;
letter-spacing: .1em;
text-transform: uppercase;

color: var(--plum);
}

.setting-buttons {
display: flex;
gap: 7px;
flex-wrap: wrap;
}

.setting-buttons button,
.size-button {
border: 1px solid var(--mauve);

background: transparent;
color: var(--plum);

padding: 7px 10px;
border-radius: 999px;

cursor: pointer;

font: 500 .72rem Quicksand, sans-serif;
}

.setting-buttons button:hover,
.size-button:hover {
background: var(--powder);
}

.setting-buttons button.active {
background: var(--old-rose);
color: #fff;
border-color: var(--old-rose);
}

/* =========================================================
TOP
========================================================= */

.top-bar {
width: 100%;

padding: 22px 28px;

display: flex;
align-items: center;
justify-content: flex-end;

position: relative;
z-index: 10;
}

.site-logo {
color: var(--burgundy);

font: 400 2rem 'DM Serif Display', serif;
text-decoration: none;

transition: .2s;
}

.site-logo:hover {
color: var(--old-rose);
transform: translateY(-2px);
}

/* =========================================================
READING PROGRESS
========================================================= */

.progress-wrap {
position: fixed;
top: 0;
left: 0;

width: 100%;
height: 8px;

background: rgba(242, 203, 213, .55);

z-index: 3000;
}

.progress-fill {
position: absolute;
top: 0;
left: 0;

width: 0;
height: 100%;

background: var(--dusty-rose);

transition: width .08s linear;
}

.progress-star {
position: absolute;
top: 50%;
left: 0;

transform: translate(-50%, -50%);

width: 32px;
height: 32px;

display: flex;
align-items: center;
justify-content: center;

color: var(--old-rose);
font-size: 1.5rem;

text-shadow:
0 0 5px rgba(255, 252, 249, .95),
0 0 9px rgba(199, 125, 145, .55);

transition: left .08s linear;
}

.progress-label {
position: absolute;
top: 14px;
left: 0;

transform: translate(-50%, 4px);

padding: 5px 10px;

border: 1px solid var(--mauve);
border-radius: 999px;

background: var(--paper);
color: var(--burgundy);

font: 600 .68rem Quicksand, sans-serif;
letter-spacing: .05em;

white-space: nowrap;

opacity: 0;
pointer-events: none;

transition: .18s;
}

.progress-wrap:hover .progress-label {
opacity: 1;
transform: translate(-50%, 0);
}

/* =========================================================
COMMON
========================================================= */

.page-intro {
max-width: 850px;

margin: 0 auto;
padding: 105px 25px 55px;

text-align: center;
}

.eyebrow {
margin: 0 0 15px;

color: var(--dusty-rose);

font: 600 .72rem Quicksand, sans-serif;
text-transform: uppercase;
letter-spacing: .18em;
}

.page-intro h1,
.story-header h1 {
margin: 0;

color: var(--burgundy);

font: 400 clamp(3rem, 8vw, 5.8rem) / .95
'DM Serif Display', serif;
}

.flourish {
margin: 25px 0;

color: var(--dusty-rose);

font-size: 1.1rem;
letter-spacing: .22em;
}

.intro-text,
.story-subtitle {
max-width: 600px;

margin: 0 auto;

color: var(--rose-taupe);

font-size: 1.15rem;
font-style: italic;
line-height: 1.6;
}

.card-grid {
width: min(900px, calc(100% - 32px));

margin: 0 auto 80px;

display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 20px;
}

.card {
padding: 28px;

background: rgba(255, 252, 249, .86);
border: 1px solid var(--mauve);
border-radius: 18px;

text-decoration: none;

box-shadow: 0 12px 32px rgba(103, 38, 63, .06);

transition: .25s;
}

.card:hover {
transform: translateY(-4px);

box-shadow: 0 18px 40px rgba(103, 38, 63, .1);

border-color: var(--dusty-rose);
}

.card-kicker {
color: var(--dusty-rose);

font: 600 .7rem Quicksand, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}

.card h2 {
margin: 8px 0;

color: var(--burgundy);

font: 400 2rem 'DM Serif Display', serif;
}

.card p {
margin: 0;

color: var(--rose-taupe);

font-size: 1rem;
line-height: 1.55;
}

.pill {
display: inline-block;

margin-top: 17px;
padding: 7px 11px;

border-radius: 999px;

background: var(--powder);
color: var(--old-rose);

font: 600 .68rem Quicksand, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
}

/* =========================================================
READING
========================================================= */

.story-header {
max-width: 850px;

margin: 0 auto;
padding: 95px 25px 55px;

text-align: center;
}

.story-paper {
width: min(850px, calc(100% - 32px));

margin: 0 auto;
padding: 65px clamp(25px, 6vw, 75px);

background: rgba(255, 252, 249, .88);

border-top: 1px solid var(--mauve);
border-bottom: 1px solid var(--mauve);

box-shadow: 0 18px 45px rgba(103, 38, 63, .07);
}

.story-text {
max-width: var(--reader-width);

margin: 0 auto;

color: var(--cocoa);

font-family: var(--reader-font);
font-size: var(--reader-size);
line-height: var(--reader-line);
}

.story-text p {
margin: 0 0 1.5em;
position: relative;
}

.story-text p:first-child:first-letter {
float: left;

font-family: 'DM Serif Display', serif;
font-size: 4.1em;
line-height: .8;

padding: .05em .12em 0 0;

color: var(--old-rose);
}

.story-text em {
color: var(--plum);
}

.note-box {
margin: 0 auto 35px;
padding: 14px 18px;

border-left: 3px solid var(--dusty-rose);

background: var(--powder);
color: var(--plum);

font-style: italic;
font-size: 1rem;
}

.story-navigation {
width: min(850px, calc(100% - 32px));

margin: 55px auto 75px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;
}

.story-nav-button {
padding: 10px 15px;

border: 1px solid var(--mauve);
border-radius: 999px;

text-decoration: none;
color: var(--plum);

font: 600 .72rem Quicksand, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;

transition: .2s;
}

.story-nav-button:hover {
color: #fff;
background: var(--old-rose);
}

.story-nav-center {
color: var(--dusty-rose);
}

/* =========================================================
INLINE NOTES
========================================================= */

.inline-note-btn {
position: absolute;
right: -42px;
top: 2px;

width: 27px;
height: 27px;

border: 1px solid var(--mauve);
border-radius: 50%;

background: var(--paper);
color: var(--old-rose);

font: 600 .75rem Quicksand, sans-serif;

cursor: pointer;
opacity: .45;

transition: .2s;
}

.story-text p:hover .inline-note-btn,
.inline-note-btn:focus {
opacity: 1;
}

.inline-note-btn.has-note {
opacity: 1;
background: var(--powder);
}

.inline-note {
display: none;

margin: -.8em 0 1.5em;
padding: 10px 14px;

border-radius: 12px;

background: var(--powder);
color: var(--plum);

font: 500 .82rem Quicksand, sans-serif;
}

.inline-note.show {
display: block;
}

.inline-note textarea {
width: 100%;
min-height: 70px;

border: 1px solid var(--mauve);
border-radius: 10px;

padding: 9px;

background: var(--paper);
color: var(--cocoa);

font: inherit;
}

.inline-actions {
display: flex;

gap: 6px;
margin-top: 6px;
}

.inline-actions button {
border: 1px solid var(--mauve);
border-radius: 999px;

background: transparent;
color: var(--plum);

padding: 5px 9px;

cursor: pointer;

font: 600 .65rem Quicksand, sans-serif;
}

/* =========================================================
COMMENTS
========================================================= */

.remarks-section {
width: min(850px, calc(100% - 32px));

margin: 0 auto 20px;
padding: 45px 25px 35px;

text-align: center;
}

.remarks-divider {
color: var(--dusty-rose);
letter-spacing: .2em;
}

.remarks-title {
margin: 18px 0 7px;

color: var(--burgundy);

font: 400 2rem 'DM Serif Display', serif;
}

.remarks-intro {
margin: 0 auto 25px;

color: var(--rose-taupe);

font-size: 1rem;
font-style: italic;
}

.commentbox-frame {
width: 100%;
min-height: 700px;
}

.commentbox {
min-height: 650px;
}

.commentbox iframe {
width: 100% !important;

border: 0;

min-height: 650px !important;
}

/* =========================================================
FOOTER
========================================================= */

footer {
margin-top: 30px;
padding: 42px 20px 50px;

background: var(--footer);
color: var(--footer-text);

text-align: center;
}

.footer-name {
margin-bottom: 8px;

font: 400 1.4rem 'DM Serif Display', serif;
}

.footer-line {
font-size: .92rem;
font-style: italic;
opacity: .88;
}

.secret-link {
color: inherit;

text-decoration: none;

border-bottom: 1px dotted rgba(255, 255, 255, .35);

cursor: default;
}

.secret-link:hover {
border-bottom-color: rgba(255, 255, 255, .8);
}

/* =========================================================
HOME
========================================================= */

.home-hero {
min-height: 82vh;

display: grid;
place-items: center;

text-align: center;

padding: 80px 24px;
}

.home-inner {
max-width: 900px;
}

.home-mark {
display: inline-block;

margin-bottom: 16px;

color: var(--dusty-rose);

font: 400 3rem 'DM Serif Display', serif;
}

.home h1 {
margin: 0;

color: var(--burgundy);

font: 400 clamp(4rem, 12vw, 9rem) / .83
'DM Serif Display', serif;

letter-spacing: -.04em;
}

.home h1 span {
color: var(--old-rose);
font-style: italic;
}

.home-tagline {
max-width: 560px;

margin: 30px auto;

color: var(--rose-taupe);

font-size: 1.25rem;
line-height: 1.6;
font-style: italic;
}

.home-links {
display: flex;
justify-content: center;

gap: 10px;
flex-wrap: wrap;
}

.home-link,
.random-button {
display: inline-block;

padding: 12px 18px;

border: 1px solid var(--mauve);
border-radius: 999px;

text-decoration: none;
color: var(--plum);

font: 600 .72rem Quicksand, sans-serif;
letter-spacing: .1em;
text-transform: uppercase;

background: rgba(255, 252, 249, .55);

cursor: pointer;
}

.home-link:hover,
.random-button:hover {
background: var(--old-rose);
color: #fff;
}

.random-box {
width: min(620px, calc(100% - 32px));

margin: 0 auto 90px;
padding: 30px;

text-align: center;

border-top: 1px solid var(--mauve);
border-bottom: 1px solid var(--mauve);
}

.random-box h2 {
margin: 0 0 8px;

color: var(--burgundy);

font: 400 2.1rem 'DM Serif Display', serif;
}

.random-box p {
color: var(--rose-taupe);
font-style: italic;
}

.random-result {
display: none;

margin-top: 20px;
padding: 20px;

border: 1px solid var(--mauve);
border-radius: 16px;

background: rgba(255, 252, 249, .8);
}

.random-result.show {
display: block;
}

.random-result a {
display: inline-block;

margin-top: 10px;

color: var(--old-rose);

font: 600 .76rem Quicksand, sans-serif;

text-transform: uppercase;
letter-spacing: .1em;
}

/* =========================================================
NOVEL
========================================================= */

.novel-card {
width: min(1000px, calc(100% - 32px));

margin: 0 auto 80px;

display: grid;
grid-template-columns: 250px 1fr;

gap: 45px;
align-items: center;

padding: 30px;

background: rgba(255, 252, 249, .78);

border: 1px solid var(--mauve);
border-radius: 18px;
}

.novel-cover {
width: 100%;
aspect-ratio: 2 / 3;

display: grid;
place-items: center;

text-align: center;

padding: 20px;

background: linear-gradient(
145deg,
#f7dfe5,
#eab7c6
);

border: 1px solid var(--mauve);

box-shadow: 8px 12px 30px rgba(103, 38, 63, .12);
}

.novel-cover span {
color: #67263f;

font: 400 2.3rem / 1.05
'DM Serif Display', serif;
}

.novel-info .eyebrow {
margin-bottom: 8px;
}

.novel-info h2 {
margin: 0 0 12px;

color: var(--burgundy);

font: 400 clamp(2.5rem, 5vw, 4rem) / .95
'DM Serif Display', serif;
}

.novel-blurb {
max-width: 620px;

margin: 0;

color: var(--cocoa);

font-size: 1.12rem;
line-height: 1.75;
}

.open-book {
display: inline-flex;

gap: 10px;
margin-top: 28px;

color: var(--old-rose);

font: 600 .72rem Quicksand, sans-serif;

text-transform: uppercase;
letter-spacing: .14em;

text-decoration: none;
}

.chapter-list {
width: min(850px, calc(100% - 32px));

margin: 0 auto 80px;
}

.chapter {
display: flex;
align-items: center;

gap: 25px;

padding: 22px 25px;
margin: 12px 0;

background: rgba(255, 252, 249, .75);

border: 1px solid var(--mauve);
border-radius: 12px;

text-decoration: none;

transition: .2s;
}

.chapter:hover {
transform: translateX(6px);
border-color: var(--dusty-rose);
}

.chapter .num {
font-size: 2rem;
color: var(--dusty-rose);

min-width: 40px;
}

.chapter h2 {
margin: 0;

color: var(--burgundy);

font: 400 1.3rem 'DM Serif Display', serif;
}

.chapter p {
margin: 4px 0 0;

font: 600 .72rem Quicksand, sans-serif;

color: var(--rose-taupe);

text-transform: uppercase;
letter-spacing: .08em;
}

/* =========================================================
ABOUT / UNPUBLISHED
========================================================= */

.about-grid {
width: min(950px, calc(100% - 32px));

margin: 0 auto 80px;

display: grid;
grid-template-columns: repeat(2, 1fr);

gap: 20px;
}

.about-section {
padding: 28px;

background: rgba(255, 252, 249, .78);

border: 1px solid var(--mauve);
border-radius: 16px;
}

.about-section h2 {
margin: 0 0 15px;

color: var(--burgundy);

font: 400 1.8rem 'DM Serif Display', serif;
}

.about-section ul {
padding-left: 20px;
margin: 0;
}

.about-section li {
margin: 7px 0;

color: var(--cocoa);
line-height: 1.5;
}l

.about-section blockquote {
margin: 10px 0;
padding-left: 15px;

border-left: 2px solid var(--dusty-rose);

color: var(--plum);
font-style: italic;
}

.unpublished-note {
width: min(700px, calc(100% - 32px));

margin: 0 auto 90px;

text-align: center;

color: var(--rose-taupe);

font-size: 1.1rem;
line-height: 1.7;
}


/* =========================================================
   KUBLIHANG KARIMLAN — READING PAGE SPACING
   ========================================================= */

.kk-reading-page .remarks-section {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.kk-reading-page .story-navigation {
    margin-top: 0px;
}

.kk-reading-page .commentbox-frame {
  min-height: 0px;
  
} .kk-reading-page .commentbox {
  min-height: 0px; 
  
} .kk-reading-page .commentbox iframe {
  min-height: 0px;
}