/* ─────────────────────────────────────────
   FONTS
───────────────────────────────────────── */
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Sigmar+One);

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  /* Palette */
  --bg:      #f7efda;   /* page background  */
  --surface: #e3bbbd;   /* card background  */
  --border:  #97976a;   /* dividers         */
  --accent:  #df949d;   /* highlights / CTA */
  --text:    #97976a;   /* primary text     */
  --muted:   #6A9797;   /* secondary text   */

  /* Typography */
  --font-display: 'Sigmar One', sans-serif;
  --font-body:    'Indie Flower', cursive;

  /* Layout */
  --radius: 4px;
  --max-w:  1100px;
  --pad:    clamp(1.25rem, 4vw, 3rem);
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size:   clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
.site-header {
  position:        sticky;
  top:             0;
  z-index:         100;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         1.75rem var(--pad);
  border-bottom:   1px solid var(--border);
  background:      rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(12px);
}

.logo {
  font-family:    var(--font-display);
  font-size:      2.5rem;
  letter-spacing: 0.1em;
  color:          var(--accent);
}

nav { display: flex; gap: 2rem; }

nav a {
  font-size:      1rem;
  letter-spacing: 0.05em;
  color:          var(--muted);
  transition:     color 0.2s;
}
nav a:hover { color: var(--text); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   clamp(4rem, 10vw, 9rem) var(--pad) clamp(3rem, 7vw, 6rem);
  animation: fadeUp 0.7s ease both;
}

.hero-label {
  display:        inline-block;
  font-size:      1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  1.25rem;
}

.hero h1 {
  font-family:   var(--font-display);
  font-size:     clamp(2.6rem, 6vw, 5.5rem);
  line-height:   1.05;
  max-width:     12ch;
  margin-bottom: 1.5rem;
}

.hero h1 em {
  font-style: italic;
  color:      var(--accent);
}

.hero-sub {
  color:         var(--muted);
  max-width:     42ch;
  margin-bottom: 2.5rem;
}

/* ─────────────────────────────────────────
   BUTTON
───────────────────────────────────────── */
.btn {
  display:        inline-block;
  padding:        0.75rem 2rem;
  background:     var(--accent);
  color:          #0d0d0d;
  font-family:    var(--font-display);
  font-weight:    700;
  font-size:      0.9rem;
  letter-spacing: 0.05em;
  border:         none;
  border-radius:  var(--radius);
  cursor:         pointer;
  transition:     transform 0.15s, box-shadow 0.15s;
}

.btn:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px rgba(200, 240, 74, 0.25);
}

.btn:active { transform: translateY(0); }

/* ─────────────────────────────────────────
   CARDS
───────────────────────────────────────── */
.cards {
  max-width:             var(--max-w);
  margin:                0 auto;
  padding:               clamp(2rem, 5vw, 4rem) var(--pad);
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   1.5rem;
}

.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       2rem;
  transition:    border-color 0.2s, transform 0.2s;
}

.card:hover {
  border-color: var(--accent);
  background:   #ebcfd0;
  transform:    translateY(-4px);
}

.cards .card:nth-child(1) { animation: fadeUp 0.5s 0.1s ease both; }
.cards .card:nth-child(2) { animation: fadeUp 0.5s 0.2s ease both; }
.cards .card:nth-child(3) { animation: fadeUp 0.5s 0.3s ease both; }

.card-num {
  display:        block;
  font-family:    var(--font-display);
  font-size:      0.75rem;
  letter-spacing: 0.15em;
  color:          var(--accent);
  margin-bottom:  1rem;
}

.card h3 {
  font-family:   var(--font-display);
  font-size:     1.25rem;
  font-weight:   700;
  margin-bottom: 0.75rem;
}

.card p { color: var(--muted); font-size: 0.95rem; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding:    2rem var(--pad);
  font-size:  0.8rem;
  color:      var(--muted);
}

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 600px) {
  nav { gap: 1.25rem; }
  .hero h1 { font-size: 2.4rem; }
}

/* ─────────────────────────────────────────
   WINDOW for Main Content
───────────────────────────────────────── */
.window {
  border: 3px solid var(--accent);
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  width: 100%;        /* fills its container */
  max-width: 500px;   /* caps width on standalone pages */
  background: #fff;
  overflow: hidden;
  height: 83.5vh;       /* fills most of viewport height */
}

.window-header {
  background: var(--accent);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
}

.window-body {
  padding: 25px;
}

/* kept for any other pages that still use it */
.window_flex {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   clamp(4rem, 10vw, 9rem) var(--pad) clamp(3rem, 7vw, 6rem);
  animation: fadeUp 0.7s ease both;
  display: flex;
  justify-content: right;
  height: 80vh;
}

/* ─────────────────────────────────────────
   SITE LAYOUT — sidebar + main
───────────────────────────────────────── */
.site-layout {
  display:     flex;
  gap:         1.5rem;
  max-width:   var(--max-w);
  margin:      0 auto;
  padding:     2rem var(--pad);
  align-items: flex-start;   /* critical: lets sidebar stick independently */
}

/* ── Sidebar ── */
.sidebar {
  width:          340px;
  flex-shrink:    0;
  position:       sticky;
  top:            calc(var(--header-h, 80px) + 1rem);
  max-height:     calc(100vh - var(--header-h, 80px) - 2rem);
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar .window { width: 100%; max-width: none; }

/* ── Main content ── */
.site-main {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.site-main .window { max-width: none; }

/* ── Responsive: stack on mobile ── */
@media (max-width: 700px) {
  .site-layout { flex-direction: column; }
  .sidebar {
    width:      100%;
    position:   static;
    max-height: none;
  }
}

/* ── Staggered entrance for layout windows ── */
.fade-1 { animation: fadeUp 0.5s 0.05s ease both; }
.fade-2 { animation: fadeUp 0.5s 0.15s ease both; }
.fade-3 { animation: fadeUp 0.5s 0.25s ease both; }
.fade-4 { animation: fadeUp 0.5s 0.35s ease both; }

/* ─────────────────────────────────────────
   PAGE CONTENT  (single-column pages)
───────────────────────────────────────── */
.page-content {
  max-width: 760px;
  margin:    0 auto;
  padding:   2rem var(--pad);
  display:   flex;
  flex-direction: column;
  gap:       1.5rem;
}

.page-content .window { max-width: none; }

/* on the blog page the list grows to show all posts unscrolled */
.feed-list.feed-list--expanded {
  max-height: none !important;
  overflow-y: visible !important;
  height: auto;
}

/* blog page window fills available vertical space */
.page-content .window {
  max-width: none;
  height: auto;
  min-height: 70vh;
}

/* ─────────────────────────────────────────
   FEED WIDGET
───────────────────────────────────────── */
.feed-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.feed-tab {
  font-family:    var(--font-display);
  font-size:      0.65rem;
  letter-spacing: 0.08em;
  padding:        2px 10px;
  border:         2px solid var(--accent);
  border-radius:  var(--radius);
  background:     transparent;
  color:          var(--accent);
  cursor:         pointer;
  transition:     background 0.15s, color 0.15s;
}

.feed-tab:hover {
  background:   var(--surface);
  color:        var(--text);
  border-color: var(--border);
}

.feed-tab.active {
  background:   var(--accent);
  color:        #fff;
  border-color: var(--accent);
}

.feed-list {
  max-height:    340px;
  overflow-y:    auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #fff;
}

.feed-list::-webkit-scrollbar       { width: 5px; }
.feed-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.feed-list::-webkit-scrollbar-track { background: #fff; }

.feed-entry {
  display:         block;
  padding:         9px 4px;
  border-bottom:   1px dashed var(--border);
  text-decoration: none;
  color:           var(--text);
  transition:      background 0.1s;
  cursor:          pointer;
}

.feed-entry:last-child { border-bottom: none; }
.feed-entry:hover      { background: var(--bg); }

.feed-entry__meta {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 3px;
}

.feed-pill {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.08em;
  padding:        1px 7px;
  border-radius:  var(--radius);
  border:         1px solid var(--border);
  background:     var(--surface);
  color:          var(--text);
  flex-shrink:    0;
}

.feed-pill--blog  { background: #f2d5d7; border-color: var(--accent); color: #a05060; }
.feed-pill--art   { background: #d5e8e8; border-color: var(--muted);  color: #3d6e6e; }
.feed-pill--books { background: #e8e8d5; border-color: var(--border); color: #6e6e3d; }
.feed-pill--news  { background: var(--surface); border-color: var(--border); color: var(--text); }

.feed-entry__date {
  font-family: var(--font-body);
  font-size:   0.72rem;
  color:       var(--muted);
}

.feed-entry__title {
  font-family:   var(--font-display);
  font-size:     0.82rem;
  color:         var(--accent);
  margin-bottom: 2px;
  line-height:   1.3;
}

.feed-entry:hover .feed-entry__title { text-decoration: underline; }

.feed-entry__excerpt {
  font-family: var(--font-body);
  font-size:   0.78rem;
  color:       var(--muted);
  line-height: 1.5;
}

.feed-empty {
  font-family: var(--font-body);
  font-style:  italic;
  font-size:   0.85rem;
  color:       var(--muted);
  text-align:  center;
  padding:     20px 0;
}

/* ─────────────────────────────────────────
   MODAL
───────────────────────────────────────── */
.modal-backdrop {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(60, 50, 40, 0.55);
  z-index:         200;
  justify-content: center;
  align-items:     center;
  padding:         20px;
  backdrop-filter: blur(3px);
}

.modal-backdrop.active {
  display:   flex;
  animation: fadeIn 0.18s ease both;
}

.modal-window {
  width:          100%;
  max-width:      560px;
  max-height:     80vh;
  display:        flex;
  flex-direction: column;
  animation:      fadeUp 0.22s ease both;
  /* inherits .window styles: border, shadow, background */
}

.modal-close {
  font-family: var(--font-display);
  font-size:   1.1rem;
  background:  transparent;
  border:      none;
  color:       #fff;
  cursor:      pointer;
  line-height: 1;
  padding:     0 4px;
  opacity:     0.8;
  transition:  opacity 0.15s;
}
.modal-close:hover { opacity: 1; }

.modal-body {
  overflow-y:      auto;
  flex:            1;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #fff;
}
.modal-body::-webkit-scrollbar       { width: 5px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.modal-body::-webkit-scrollbar-track { background: #fff; }

.modal-meta {
  display:        flex;
  align-items:    center;
  gap:            8px;
  margin-bottom:  14px;
  padding-bottom: 10px;
  border-bottom:  1px dashed var(--border);
}

.modal-content {
  font-family:   var(--font-body);
  font-size:     0.95rem;
  color:         var(--text);
  line-height:   1.7;
  margin-bottom: 16px;
}

.modal-content p            { margin-bottom: 0.9em; }
.modal-content p:last-child { margin-bottom: 0; }
.modal-content b            { color: var(--accent); }
.modal-content i            { color: var(--muted); }
.modal-content a            { color: var(--accent); text-decoration: underline; }

.modal-footer {
  padding-top: 12px;
  border-top:  1px dashed var(--border);
  text-align:  right;
}

.modal-goto {
  font-size: 0.8rem;
  padding:   0.5rem 1.2rem;
}

/* ─────────────────────────────────────────
   POST PAGE  (blog/your-post.html)
───────────────────────────────────────── */
.post-window {
  width:     100%;
  max-width: 620px;
}

.post-meta {
  display:        flex;
  align-items:    center;
  gap:            10px;
  flex-wrap:      wrap;
  margin-bottom:  16px;
  padding-bottom: 12px;
  border-bottom:  1px dashed var(--border);
}

.post-back {
  font-family: var(--font-body);
  font-size:   0.78rem;
  color:       var(--muted);
  margin-left: auto;
  transition:  color 0.15s;
}
.post-back:hover { color: var(--accent); }

.post-content {
  font-family: var(--font-body);
  font-size:   1rem;
  color:       var(--text);
  line-height: 1.75;
}

.post-content p            { margin-bottom: 1em; }
.post-content p:last-child { margin-bottom: 0; }
.post-content b            { color: var(--accent); }
.post-content i            { color: var(--muted); }
.post-content a            { color: var(--accent); text-decoration: underline; }
.post-content a:hover      { color: var(--muted); }

.post-content img {
  max-width:     100%;
  margin:        1.2em 0;
  border:        2px solid var(--border);
  border-radius: var(--radius);
}