/* Collected Stories — Ghost Theme */

:root {
  --bg: #F7F5F0; --bg2: #EEEBE4;
  --ink: #1A1714;
  --ui: #3D3832; --ui2: #5C554A; --ui3: #7A7168;
  --line: rgba(26,23,20,0.15); --line2: rgba(26,23,20,0.08);
  --accent: #6B563C; --accent-bg: rgba(107,86,60,0.1);
  --serif: 'EB Garamond', Georgia, serif;
  --body: 'Literata', Georgia, serif;
  --sans: 'Poppins', system-ui, sans-serif;
  --col: 620px; --hpad: 2rem;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --spring: cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] {
  --bg: #141210; --bg2: #1C1A16;
  --ink: #E0DBD2;
  --ui: #C0B9AD; --ui2: #9A9286; --ui3: #756D63;
  --line: rgba(224,219,210,0.14); --line2: rgba(224,219,210,0.06);
  --accent: #D4B86A; --accent-bg: rgba(212,184,106,0.12);
}

@keyframes pageIn { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes itemIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
body{font-family:var(--body);line-height:1.7;overflow-x:hidden;background:var(--bg);color:var(--ink);transition:background .3s,color .3s}

.grain{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px}
[data-theme="dark"] .grain{opacity:.035}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-bg)}
.prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);opacity:.45;z-index:1001;transform-origin:left;pointer-events:none;width:0}
.wrap{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);transition:background .3s,color .3s;opacity:0;animation:siteIn .8s ease .15s forwards}
@keyframes siteIn{from{opacity:0}to{opacity:1}}

/* HEADER */
.hd{padding:1.8rem var(--hpad) 0;width:100%;display:flex;justify-content:space-between;align-items:center;animation:fadeIn .5s ease both;position:relative;z-index:100}
.hd__t{font-family:var(--serif);font-weight:400;font-size:1.15rem;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:opacity .25s}
.hd__t:hover{opacity:.5}
.hd__r{display:flex;align-items:center;gap:1rem}
.dnav{display:flex;gap:1.3rem;font-family:var(--sans);font-size:.64rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.dnav a{color:var(--ui2);transition:color .25s;position:relative}
.dnav a:hover{color:var(--ink)}
.dnav a.on{color:var(--ink)}
.dnav a.on::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--ink);opacity:.25}
.ib{background:none;border:none;cursor:pointer;color:var(--ui2);padding:.25rem;display:flex;align-items:center;justify-content:center;transition:color .25s;font-size:.8rem;line-height:1}
.ib:hover{color:var(--ink)}
.fp{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.fp button{background:none;border:none;cursor:pointer;font-family:var(--serif);color:var(--ui2);padding:.2rem .45rem;transition:all .15s;display:flex;align-items:center;justify-content:center;line-height:1}
.fp button:not(:last-child){border-right:1px solid var(--line)}
.fp button:hover{color:var(--ink);background:var(--line2)}
.fp button.on{color:var(--accent);background:var(--accent-bg)}
.fp button.fs{font-size:.58rem}
.fp button.fm{font-size:.74rem}
.fp button.fl{font-size:.92rem}

/* HAMBURGER */
.burger{display:none;background:none;border:none;cursor:pointer;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:6px 4px;z-index:101;position:relative}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:all .3s var(--ease);border-radius:1px}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}

/* MOBILE MENU */
.mob-bg{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.3);opacity:0;transition:opacity .25s;pointer-events:none}
.mob-bg.vis{opacity:1;pointer-events:auto}
[data-theme="dark"] .mob-bg{background:rgba(0,0,0,.55)}
.mob{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--bg);padding:5.5rem var(--hpad) 2rem;border-bottom:1px solid var(--line);box-shadow:0 8px 40px rgba(0,0,0,.08);transform:translateY(-100%);transition:transform .35s var(--spring)}
.mob.vis{transform:translateY(0)}
[data-theme="dark"] .mob{box-shadow:0 8px 40px rgba(0,0,0,.35)}
.mob nav{display:flex;flex-direction:column}
.mob nav a{font-family:var(--serif);font-size:1.6rem;font-weight:400;padding:.85rem 0;border-bottom:1px solid var(--line2);color:var(--ui2);transition:color .2s;display:block}
.mob nav a:first-child{border-top:1px solid var(--line2)}
.mob nav a:hover,.mob nav a.on{color:var(--ink)}
.mob__tools{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.mob__tl{font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui2);font-weight:400;min-width:56px}

@media(max-width:640px){.dnav,.fp-desk,.thm-desk{display:none}.burger{display:flex}}
@media(min-width:641px){.burger{display:none!important}.mob-bg{display:none!important}.mob{display:none!important}}

/* MAIN */
main{flex:1;max-width:var(--col);margin:0 auto;padding:0 var(--hpad);width:100%}

/* CONTENTS */
.idx{padding-top:5.5rem;padding-bottom:3rem;animation:pageIn .5s var(--spring) both}
.idx__h{font-family:var(--serif);font-weight:400;font-size:3.2rem;line-height:1.1;letter-spacing:-.01em;margin-bottom:.2rem}
.idx__meta{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:4rem;flex-wrap:wrap}
.idx__tag{font-family:var(--sans);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui2);font-weight:400}
.idx__n{font-family:var(--sans);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui3);font-weight:300}
.sl{list-style:none;position:relative}
.sl::before{content:'';position:absolute;top:0;left:-2rem;width:1px;height:100%;background:var(--line)}
.sl__i{animation:itemIn .4s var(--spring) both}
.sl__i+.sl__i{border-top:1px solid var(--line2)}
.sl__a{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;cursor:pointer;transition:padding-left .3s var(--ease)}
.sl__a:hover{padding-left:.6rem}
.sl__a:hover .sl__num{color:var(--accent)}
.sl__a:hover .sl__t{color:var(--ui)}
.sl__num{font-family:var(--sans);font-size:.55rem;font-weight:400;letter-spacing:.06em;color:var(--ui2);min-width:1.5rem;transition:color .25s;position:relative;top:-.05em}
.sl__t{font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.25;transition:color .25s}
.sl__sub{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui2);margin-top:.12rem;font-weight:400}

/* STORY */
.st{padding-top:4rem;padding-bottom:5rem;animation:pageIn .5s var(--spring) both}
.st__back{font-family:var(--sans);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui2);display:inline-flex;align-items:center;gap:.4em;margin-bottom:2.5rem;cursor:pointer;font-weight:400;transition:color .25s;min-height:44px}
.st__back:hover{color:var(--ink)}
.st__ba{transition:transform .25s var(--ease);font-size:.85em}
.st__back:hover .st__ba{transform:translateX(-3px)}
.st__hdr{margin-bottom:3rem}
.st__title{font-family:var(--serif);font-weight:400;font-size:2.8rem;line-height:1.1;letter-spacing:-.01em}
.st__subtitle{font-family:var(--sans);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui2);margin-top:.5rem;font-weight:400}
.st__rt{font-family:var(--sans);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui3);margin-top:.7rem;font-weight:300}
.st__members{font-family:var(--sans);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-top:.5rem}
.st__rule{width:2.5rem;height:1px;background:var(--line);margin-top:1.6rem}
.st__body{line-height:1.85;letter-spacing:.003em;font-weight:400;font-size:1.02rem}
.st__body p{margin-bottom:1.15em}
.st__body em,.st__body i{font-style:italic}
.st__body strong{font-weight:600}
.st__body blockquote{margin:1.5em 0;padding-left:1.2em;border-left:2px solid var(--line);color:var(--ui);font-style:italic}
.st__body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.st__body a:hover{color:var(--ink)}
.st__body>p:first-of-type::first-letter{font-family:var(--serif);font-weight:400;float:left;font-size:3.8em;line-height:.76;margin-right:.07em;margin-top:.06em}
.st__body hr{border:none;margin:2.5em 0;height:1px;background:var(--line2)}
.st__body hr.replaced{display:none}
.scene-break{display:flex;align-items:center;justify-content:center;gap:.65rem;margin:2.5em 0;user-select:none;color:var(--ui3)}
.scene-break__dot{width:3px;height:3px;border-radius:50%;background:currentColor}
.scene-break__line{width:1.8rem;height:1px;background:currentColor;opacity:.4}

/* STORY END NAV */
.se{margin-top:4.5rem;animation:fadeIn .4s .15s ease both;width:100vw;position:relative;left:50%;transform:translateX(-50%);padding:0 var(--hpad)}
.se__rule{width:100%;height:1px;background:var(--line);margin-bottom:2.2rem}
.se__fin{text-align:center;font-family:var(--serif);font-size:.8rem;letter-spacing:.4em;color:var(--ui3);margin-bottom:2.5rem}
.se__support{text-align:center;margin-bottom:2rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;color:var(--ui3);font-weight:400}
.se__support a{color:var(--ui2);transition:color .25s;text-decoration:underline;text-underline-offset:2px}
.se__support a:hover{color:var(--ink)}
.se__nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);min-height:4.5rem}
.se__lnk{display:flex;align-items:center;gap:.6rem;padding:1.2rem 0;cursor:pointer;transition:color .25s}
.se__lnk:hover{color:var(--ui)}
.se__lnk--r{justify-content:flex-end;text-align:right}
.se__lab{font-family:var(--sans);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui2);margin-bottom:.15rem;font-weight:400}
.se__lt{font-family:var(--serif);font-size:1.1rem;line-height:1.22}
.se__arr{font-family:var(--sans);font-size:.75rem;color:var(--ui3);flex-shrink:0;transition:transform .3s var(--ease)}
.se__lnk:hover .se__arr--l{transform:translateX(-5px)}
.se__lnk:hover .se__arr--r{transform:translateX(5px)}
.se__ret{display:flex;align-items:center;justify-content:center;padding:1.2rem 1.5rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui2);transition:color .25s;cursor:pointer;font-weight:400;border-left:1px solid var(--line2);border-right:1px solid var(--line2);align-self:stretch}
.se__ret:hover{color:var(--ink)}

/* PAGES */
.pg{padding-top:4.5rem;padding-bottom:5rem;animation:pageIn .5s var(--spring) both}
.pg__title{font-family:var(--serif);font-weight:400;font-size:2.6rem;line-height:1.1;margin-bottom:.3rem}
.pg__label{font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ui2);margin-bottom:2.5rem;font-weight:400}
.pg__rule{width:2.5rem;height:1px;background:var(--line);margin-bottom:2.2rem}
.pg__body{font-size:.98rem;line-height:1.82;max-width:520px}
.pg__body p{margin-bottom:1.2em}
.pg__body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pg__body a:hover{color:var(--ink)}
.pg__back{display:inline-flex;align-items:center;gap:.4em;font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui2);margin-top:2.5rem;cursor:pointer;transition:color .25s;font-weight:400;min-height:44px}
.pg__back:hover{color:var(--ink)}

/* SUPPORT PAGE */
.support{padding-top:4.5rem;padding-bottom:5rem;animation:pageIn .5s var(--spring) both}
.support__h{font-family:var(--serif);font-weight:400;font-size:2.6rem;line-height:1.1;margin-bottom:.5rem}
.support__intro{font-size:.98rem;line-height:1.82;max-width:520px;margin-bottom:3rem}
.support__intro p{margin-bottom:1.2em}
.support__options{margin-bottom:3rem}
.support__option{padding:1.5rem 0;border-bottom:1px solid var(--line2)}
.support__option:first-child{border-top:1px solid var(--line2)}
.support__option-h{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:.3rem}
.support__option-desc{font-size:.9rem;line-height:1.7;color:var(--ui);margin-bottom:1rem;max-width:480px}
.support__btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:.6rem 1.3rem;border-radius:3px;border:1px solid var(--ink);color:var(--ink);background:none;cursor:pointer;transition:all .2s}
.support__btn:hover{background:var(--ink);color:var(--bg)}
.support__perks{margin-bottom:3rem}
.support__perks-h{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui2);margin-bottom:1.5rem;font-weight:400}
.support__perk{padding:.8rem 0;border-bottom:1px solid var(--line2);display:flex;gap:1rem;align-items:baseline}
.support__perk:first-child{border-top:1px solid var(--line2)}
.support__perk-name{font-family:var(--serif);font-size:1.05rem;font-weight:400;min-width:140px}
.support__perk-desc{font-size:.88rem;line-height:1.65;color:var(--ui)}

/* SUBSCRIBE INLINE */
.subscribe-inline{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line2)}
.subscribe-inline__label{font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui2);margin-bottom:.8rem;font-weight:400}
.subscribe-inline__form{display:flex;gap:.5rem;max-width:400px}
.subscribe-inline__input{flex:1;font-family:var(--body);font-size:.88rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);transition:border-color .25s}
.subscribe-inline__input:focus{outline:none;border-color:var(--accent)}
.subscribe-inline__input::placeholder{color:var(--ui3)}
.subscribe-inline__btn{font-family:var(--sans);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;padding:.5rem 1rem;border-radius:3px;border:1px solid var(--ink);color:var(--ink);background:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.subscribe-inline__btn:hover{background:var(--ink);color:var(--bg)}

/* FOOTER */
.ft{padding:4rem var(--hpad) 2.5rem;width:100%;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui3);font-weight:400}
.ft a{transition:color .25s}
.ft a:hover{color:var(--ink)}

/* GHOST OVERRIDES */
.gh-portal-triggerbtn-iframe{display:none!important}

/* RESPONSIVE */
@media(max-width:640px){
  html{font-size:16px}
  :root{--hpad:1.5rem}
  .idx{padding-top:3.5rem}
  .idx__h{font-size:2.2rem}
  .idx__meta{margin-bottom:2.5rem;gap:.8rem}
  .sl::before{left:-1.5rem}
  .sl__t{font-size:1.3rem}
  .sl__a{gap:.7rem;padding:1rem 0;min-height:48px}
  .st{padding-top:2.5rem;padding-bottom:4rem}
  .st__title{font-size:2rem}
  .st__body>p:first-of-type::first-letter{font-size:3em}
  .se__nav{grid-template-columns:1fr;border-top:1px solid var(--line2);border-bottom:none}
  .se__lnk{border-bottom:1px solid var(--line2);justify-content:space-between}
  .se__lnk--r{justify-content:space-between;text-align:right}
  .se__ret{border-left:none;border-right:none;border-bottom:1px solid var(--line2);padding:1rem 0}
  .pg{padding-top:3.5rem}
  .pg__title{font-size:1.9rem}
  .support__h{font-size:1.9rem}
  .support__perk{flex-direction:column;gap:.2rem}
  .ft{padding:3rem var(--hpad) 2rem;flex-direction:column;gap:.4rem;align-items:center;text-align:center}
}
@media(max-width:380px){
  .idx__h{font-size:1.85rem}
  .sl__t{font-size:1.15rem}
  .st__title{font-size:1.7rem}
  .pg__title{font-size:1.6rem}
  .hd__t{font-size:.95rem}
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ui3)}

/* ═══════════════════════════════════════════════════════
   GHOST KOENIG EDITOR — REQUIRED CLASSES
   ═══════════════════════════════════════════════════════ */

.kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin: 1.5em auto;
  left: 50%;
  transform: translateX(-50%);
}

.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 1.5em 0;
}

.kg-width-full img,
.kg-width-wide img {
  max-width: 100%;
  height: auto;
}

.kg-image-card img,
.kg-gallery-image img {
  max-width: 100%;
  height: auto;
}

.kg-gallery-container {
  display: flex;
  flex-direction: column;
  max-width: var(--col);
  margin: 1.5em auto;
}

.kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.kg-gallery-image {
  flex: 1 1 0;
  margin: 0 0.5em;
}
.kg-gallery-image:first-of-type { margin-left: 0; }
.kg-gallery-image:last-of-type { margin-right: 0; }

.kg-bookmark-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin: 1.5em 0;
}

.kg-bookmark-container {
  display: flex;
  text-decoration: none;
  color: var(--ink);
}

.kg-bookmark-content {
  flex: 1; padding: 1.2rem;
  display: flex; flex-direction: column;
}

.kg-bookmark-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.kg-bookmark-description {
  font-size: 0.82rem;
  color: var(--ui2);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kg-bookmark-metadata {
  font-family: var(--sans);
  font-size: 0.55rem;
  color: var(--ui3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kg-bookmark-icon { width: 16px; height: 16px; }

.kg-bookmark-thumbnail { width: 140px; min-height: 100%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
