/* ============ TOKENS ============ */
:root{
  --bg:#121212;
  --bg-alt:#181818;
  --bg-elevated:#211f1b;
  --rule: rgba(232,227,216,0.10);
  --rule-strong: rgba(232,227,216,0.20);
  --ink:#ece7db;
  --ink-dim:#bdb3a0;
  --ink-faint:#93897a;
  --accent:#c39f6b;
  --accent-soft: rgba(195,159,107,0.35);
  --accent-wash: rgba(195,159,107,0.08);
  --shadow: rgba(0,0,0,0.5);
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --content-w: 700px;
  --sidebar-w: 248px;
}
html[data-theme="light"]{
  --bg:#eae4d4;
  --bg-alt:#e2dbc6;
  --bg-elevated:#f2ede1;
  --rule: rgba(38,34,32,0.14);
  --rule-strong: rgba(38,34,32,0.26);
  --ink:#242019;
  --ink-dim:#4d453a;
  --ink-faint:#5c5245;
  --accent:#6e5228;
  --accent-soft: rgba(140,106,52,0.3);
  --accent-wash: rgba(140,106,52,0.08);
  --shadow: rgba(80,70,50,0.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .4s ease, color .4s ease;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; margin:0;}
::selection{background:var(--accent-soft); color:var(--ink);}
:focus-visible{outline:1px solid var(--accent); outline-offset:3px;}
button{font-family:var(--sans);}

.fade-in{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.fade-in.visible{opacity:1; transform:translateY(0);}

.emblem{ color: var(--emblem-color, var(--accent)); display:block; }

/* ============ TOPBAR ============ */
.topbar{
  position:fixed; top:0; left:0; right:0; height:64px; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(var(--bg) 55%, transparent); pointer-events:none;
}
.brand{font-family:var(--serif); font-size:1.5rem; letter-spacing:0.14em; font-weight:500; pointer-events:auto; cursor:pointer; user-select:none; background:none; border:none; color:var(--ink);}
.brand .dot{color:var(--accent);}
.menu-btn{
  position:fixed; top:18px; left:20px; z-index:70; pointer-events:auto;
  width:38px; height:38px; display:none; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--rule-strong); border-radius:2px; cursor:pointer;
}
.menu-btn span{display:block; position:absolute; width:16px; height:1px; background:var(--ink);}
.menu-btn span::before, .menu-btn span::after{content:''; display:block; position:absolute; width:16px; height:1px; background:var(--ink); left:0;}
.menu-btn span::before{transform:translateY(-5px);}
.menu-btn span::after{transform:translateY(5px);}
.theme-toggle{
  position:fixed; top:20px; right:24px; z-index:70; pointer-events:auto;
  background:transparent; border:1px solid var(--rule-strong); color:var(--ink-dim);
  font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; padding:7px 12px; border-radius:2px; cursor:pointer;
}
.theme-toggle:hover{color:var(--ink); border-color:var(--accent-soft);}

/* ============ SIDEBAR ============ */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--bg-alt); border-right:1px solid var(--rule);
  padding:96px 0 0 0; z-index:100; display:flex; flex-direction:column; transition:transform .3s ease;
}
.sidebar-inner{overflow-y:auto; padding:0 8px 20px 36px; flex:1;}
.side-label{font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px 0;}
.side-nav{list-style:none; margin:0 0 30px 0; padding:0;}
.side-nav li{margin-bottom:2px;}
.side-nav button{
  display:block; width:100%; text-align:left; padding:7px 0 7px 14px; font-size:0.92rem; color:var(--ink-dim);
  border-left:2px solid transparent; margin-left:-14px; background:none; border-top:none; border-right:none; border-bottom:none;
  cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
.side-nav button:hover{color:var(--ink);}
.side-nav button.active{color:var(--ink); border-left-color:var(--accent);}
.side-search{margin:0 0 26px 0;}
.side-search input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--rule-strong);
  color:var(--ink); font-family:var(--sans); font-size:0.85rem; padding:6px 2px 8px 0;
}
.side-search input:focus{outline:none; border-bottom-color:var(--accent);}
.side-search input::placeholder{color:var(--ink-faint);}
.sidebar-foot{padding:14px 36px 20px 36px; border-top:1px solid var(--rule); font-size:0.7rem; color:var(--ink-faint);}
.sidebar-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:95;}

/* ============ MAIN ============ */
.main{margin-left:var(--sidebar-w); min-height:100vh; padding-top:64px;}
.progress-bar{position:fixed; top:0; left:var(--sidebar-w); right:0; height:2px; z-index:65; background:transparent;}
.progress-fill{height:100%; width:0%; background:var(--accent); transition:width .1s linear;}

/* ============ HOME ============ */
.hero{padding:8vh 8vw 6vh 8vw; max-width:980px;}
.hero-eyebrow{font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin-bottom:26px;}
.hero h1{font-size:clamp(2.4rem, 5vw, 4.2rem); line-height:1.12; font-weight:500;}
.hero p.sub{margin-top:26px; max-width:560px; color:var(--ink-dim); font-size:1.05rem; line-height:1.7;}

.section{padding:0 8vw 6vh 8vw; max-width:1180px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; border-bottom:1px solid var(--rule); padding-bottom:14px;}
.section-head h2{font-size:1.5rem;}
.section-head .see-all{font-size:0.78rem; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase; background:none; border:none; cursor:pointer;}
.section-head .see-all:hover{color:var(--accent);}

.featured-card{
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  padding-bottom:6vh; margin-bottom:2vh; border-bottom:1px solid var(--rule); cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; width:100%; text-align:left; color:inherit; font:inherit;
}
.fc-cover{aspect-ratio:4/3; border-radius:2px; box-shadow:0 30px 60px -20px var(--shadow);}
.fc-meta{font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;}
.fc-title{font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.18; margin-bottom:18px;}
.fc-summary{color:var(--ink-dim); font-size:1rem; line-height:1.75; margin-bottom:20px;}
.fc-sub{font-size:0.78rem; color:var(--ink-faint); letter-spacing:0.03em;}

.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
.card{cursor:pointer; display:flex; flex-direction:column; background:none; border:none; padding:0; text-align:left; color:inherit; font:inherit; position:relative;}
.card .c-cover{aspect-ratio:16/10; border-radius:2px; margin-bottom:18px; transition:transform .3s ease;}
.card:hover .c-cover{transform:translateY(-3px);}
.c-meta{font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.c-title{font-size:1.28rem; line-height:1.3; margin-bottom:10px; color:var(--ink);}
.c-summary{font-size:0.88rem; color:var(--ink-dim); line-height:1.6; margin-bottom:14px;}
.c-sub{font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.03em;}
.read-badge{
  position:absolute; top:10px; right:10px; background:var(--bg); color:var(--accent);
  font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:20px;
  border:1px solid var(--accent-soft); z-index:2;
}

.row-list{display:flex; flex-direction:column;}
.row-item{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; padding:20px 0; border-bottom:1px solid var(--rule); cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; width:100%; text-align:left; color:inherit; font:inherit;}
.row-num{font-family:var(--serif); font-size:1.6rem; color:var(--ink-faint); width:34px;}
.row-title{font-size:1.12rem; color:var(--ink);}
.row-cat{font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);}
.row-item:hover .row-title{color:var(--accent);}

/* ============ COVER PANELS (emblem art, no external images) ============ */
.cover-panel{
  width:100%; height:100%; border-radius:2px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--wash) 22%, var(--bg)) 0%, var(--bg-alt) 70%);
  border:1px solid var(--rule);
}
.cover-panel::before{
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--wash) 7%, transparent) 0px, transparent 2px, transparent 26px, color-mix(in srgb, var(--wash) 7%, transparent) 28px);
  opacity:0.5;
}
.cover-emblem{position:relative; z-index:1; opacity:0.92;}

/* ============ TOPICS / CUBES (movie-site style) ============ */
.cube-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.cube{
  aspect-ratio:1/1.05; border-radius:4px; cursor:pointer; position:relative; overflow:hidden;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--wash) 26%, var(--bg)) 0%, var(--bg-alt) 75%);
  border:1px solid var(--rule); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:20px; text-align:center;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cube:hover{transform:translateY(-6px); border-color:var(--accent-soft); box-shadow:0 24px 48px -20px var(--shadow);}
.cube-name{font-family:var(--serif); font-size:1.25rem; line-height:1.25; color:var(--ink);}
.cube-count{font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);}

/* ============ FULLSCREEN READING MODAL ============ */
.reader-overlay{
  position:fixed; top:0; left:var(--sidebar-w); right:0; bottom:0; z-index:150;
  background:var(--bg); overflow-y:auto; opacity:0; transform:translateY(24px);
  pointer-events:none; transition:opacity .35s ease, transform .35s ease;
}
.reader-overlay.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.reader-close{
  position:sticky; top:0; z-index:5; display:flex; justify-content:flex-end; padding:20px 24px 0 0;
}
.reader-close button{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--rule-strong); background:var(--bg);
  color:var(--ink); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.reader-close button:hover{border-color:var(--accent); color:var(--accent);}

/* ============ ARTICLE ============ */
.article-wrap{max-width:var(--content-w); margin:0 auto; padding:2vh 24px 10vh 24px;}
.article-cover-full{
  height:38vh; margin-bottom:6vh; border-radius:0;
}
.a-eyebrow{font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:20px;}
.a-title{font-size:clamp(2rem,4vw,3.1rem); line-height:1.15; margin-bottom:20px;}
.a-dek{font-size:1.15rem; color:var(--ink-dim); font-style:italic; font-family:var(--serif); line-height:1.6; margin-bottom:28px;}
.a-meta{display:flex; gap:22px; flex-wrap:wrap; font-size:0.78rem; color:var(--ink-faint); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:16px 0; margin-bottom:6vh;}
.a-meta strong{color:var(--ink-dim); font-weight:600;}

.a-body{font-size:1.13rem; line-height:1.85; color:var(--ink);}
.a-body p{margin:0 0 1.7em 0;}
.a-body p:first-of-type::first-letter{
  font-family:var(--serif); font-size:4.6rem; float:left; line-height:0.78; padding-right:12px; padding-top:8px; color:var(--accent); font-weight:500;
}
.fn-ref{color:var(--accent); cursor:pointer; font-size:0.72em; margin-left:1px; background:none; border:none; padding:0;}
.pull-quote{margin:2.6em 0; padding:0.4em 0 0.4em 34px; border-left:2px solid var(--accent); font-family:var(--serif); font-style:italic; font-size:1.55rem; line-height:1.5; color:var(--ink);}
.pull-quote cite{display:block; font-style:normal; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:14px;}

.a-tags{display:flex; gap:10px; flex-wrap:wrap; margin:5vh 0 4vh 0;}
.a-tags span{font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--rule-strong); padding:6px 12px; border-radius:20px;}

.read-marker{
  display:flex; align-items:center; gap:10px; margin:5vh 0 3vh 0; padding:16px 20px;
  border:1px solid var(--rule-strong); border-radius:4px; color:var(--ink-dim); font-size:0.92rem;
}
.read-marker.done{color:var(--accent); border-color:var(--accent-soft);}
.read-marker .tick{font-size:1.1rem;}

.footnotes{border-top:1px solid var(--rule); padding-top:32px; margin-top:2vh;}
.footnotes h4{font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px;}
.footnotes ol{padding-left:20px; margin:0; color:var(--ink-dim); font-size:0.88rem; line-height:1.8;}
.footnotes li{margin-bottom:8px;}

.sources{padding-top:32px; margin-top:2vh; border-top:1px solid var(--rule);}
.sources h4{font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px;}
.sources ul{list-style:none; padding:0; margin:0; color:var(--ink-dim); font-size:0.88rem; line-height:2;}
.sources li{font-style:italic; font-family:var(--serif); font-size:1.02rem;}

.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8vh; padding-top:5vh; border-top:1px solid var(--rule-strong);}
.pn-item{cursor:pointer; padding:20px; border:1px solid var(--rule); border-radius:2px; transition:border-color .2s ease; background:none; text-align:left; color:inherit; font:inherit;}
.pn-item:hover{border-color:var(--accent-soft);}
.pn-item.next{text-align:right;}
.pn-label{font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
.pn-title{font-family:var(--serif); font-size:1.25rem; line-height:1.3;}

.related-head{font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin:8vh 0 26px 0; text-align:center;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1100px; margin:0 auto 8vh auto; padding:0 24px;}

/* ============ ARCHIVE / CATEGORY / SEARCH ============ */
.page-head{padding:9vh 8vw 4vh 8vw; max-width:900px;}
.page-head .k{font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;}
.page-head h1{font-size:clamp(2rem,4vw,3rem); line-height:1.2;}
.page-head p{color:var(--ink-dim); margin-top:18px; font-size:1rem; line-height:1.7; max-width:640px;}

.archive-groups{padding:0 8vw 10vh 8vw;}
.archive-group{margin-bottom:44px;}
.archive-group h3{font-family:var(--serif); font-size:1.6rem; color:var(--accent); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--rule);}
.archive-list{list-style:none; margin:0; padding:0;}
.archive-list li button{width:100%; text-align:left; background:none; border:none; padding:12px 0; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; gap:20px; cursor:pointer; color:inherit; font:inherit;}
.archive-list li:hover .al-title{color:var(--accent);}
.al-title{font-size:1.02rem;}
.al-date{font-size:0.75rem; color:var(--ink-faint); white-space:nowrap;}

.archive-tabs{display:flex; gap:6px; padding:0 8vw; margin-bottom:2vh; flex-wrap:wrap;}
.archive-tab{font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--rule-strong); border-radius:20px; cursor:pointer; color:var(--ink-dim); background:none;}
.archive-tab.active{color:var(--bg); background:var(--accent); border-color:var(--accent);}

.empty-state{padding:10vh 8vw; text-align:center; color:var(--ink-faint); font-family:var(--serif); font-size:1.3rem;}

.about-body{max-width:640px; padding:0 8vw 12vh 8vw; color:var(--ink-dim); font-size:1.05rem; line-height:1.85;}
.about-body p{margin-bottom:1.6em;}
.about-body h2{color:var(--ink); font-size:1.5rem; margin:2em 0 0.7em 0;}

footer.site-foot{border-top:1px solid var(--rule); padding:6vh 8vw; display:flex; justify-content:space-between; color:var(--ink-faint); font-size:0.78rem; flex-wrap:wrap; gap:12px;}

/* ============ NEWSLETTER POPUP ============ */
.newsletter-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:180; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.newsletter-backdrop.open{opacity:1; pointer-events:auto;}
.newsletter-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(440px, 88vw); z-index:181;
  background:var(--bg-elevated); border:1px solid var(--rule-strong); border-radius:4px; padding:40px 36px;
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; box-shadow:0 40px 80px -20px var(--shadow);
}
.newsletter-modal.open{opacity:1; transform:translate(-50%,-50%); pointer-events:auto;}
.newsletter-modal .nl-close{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--ink-faint); font-size:1.1rem; cursor:pointer;}
.newsletter-modal h3{font-size:1.6rem; margin-bottom:12px;}
.newsletter-modal p{color:var(--ink-dim); font-size:0.94rem; line-height:1.6; margin-bottom:22px;}
.nl-form{display:flex; gap:10px;}
.nl-form input{flex:1; background:transparent; border:1px solid var(--rule-strong); color:var(--ink); padding:11px 12px; border-radius:2px; font-size:0.9rem;}
.nl-form input:focus{outline:none; border-color:var(--accent);}
.nl-form button{background:var(--accent); color:var(--bg); border:none; padding:11px 18px; border-radius:2px; font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap;}
.nl-form button:hover{opacity:0.9;}
.nl-status{margin-top:14px; font-size:0.85rem; color:var(--ink-dim);}
.nl-status.error{color:#c77;}
.nl-status.success{color:var(--accent);}

.inline-subscribe{
  margin:6vh 0; padding:30px; border:1px solid var(--rule-strong); border-radius:4px; text-align:center;
}
.inline-subscribe h4{font-size:1.3rem; margin-bottom:8px;}
.inline-subscribe p{color:var(--ink-dim); font-size:0.9rem; margin-bottom:18px;}
.inline-subscribe .nl-form{max-width:380px; margin:0 auto;}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:repeat(2,1fr);}
  .featured-card{grid-template-columns:1fr;}
  .cube-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 720px){
  :root{--sidebar-w:0px;}
  .menu-btn{display:flex;}
  .sidebar{transform:translateX(-100%); width:280px; box-shadow:0 0 60px var(--shadow);}
  .sidebar.open{transform:translateX(0);}
  .sidebar.open ~ .sidebar-scrim{display:block;}
  .main{margin-left:0;}
  .progress-bar{left:0;}
  .reader-overlay{left:0;}
  .card-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .prevnext{grid-template-columns:1fr;}
  .pn-item.next{text-align:left;}
  .hero{padding-top:14vh;}
  .a-body p:first-of-type::first-letter{font-size:3.4rem;}
  .cube-grid{grid-template-columns:repeat(2,1fr);}
  .nl-form{flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .fade-in{transition:none; opacity:1; transform:none;}
}