/* clasentri.com — oak→leaf, folder tabs, brighter tree bg, elegant serif, readable everywhere. */
:root{
  --gold:#e6bf5e; --rail:#463116; --ink:#f5eeda;
  --paper:#efe6cf; --paperink:#2a2418;
}
*{ margin:0; box-sizing:border-box; }
html,body{ width:100%; }
body{
  font-family:"EB Garamond",Georgia,serif; color:var(--ink); min-height:100vh;
  /* BRIGHTER: light warm veil so the tree shows through */
  background:linear-gradient(rgba(30,42,20,.20),rgba(24,34,16,.36)),
             url("/assets/img/cropped-tree.jpg") center/cover fixed #16220e;
}
a{ color:inherit; text-decoration:none; }

header.site{ text-align:center; padding:46px 20px 4px; }
header.site h1{ font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:.04em;
  font-size:clamp(2.6rem,8vw,4.6rem); color:var(--gold);
  text-shadow:0 2px 5px rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.45); }
header.site h1 a{ color:var(--gold); }
header.site .tag{ font-family:"Cormorant Garamond",serif; font-style:italic; color:#f2ebd4;
  font-size:clamp(1.1rem,2.6vw,1.5rem); letter-spacing:.14em; text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* ===== FOLDER TABS across the top — ONE ROW ===== */
nav.tabs{
  display:flex; justify-content:center; align-items:flex-end; flex-wrap:nowrap;
  max-width:100%; margin:0 auto; padding:18px clamp(4px,1.5vw,16px) 0;
  border-bottom:5px solid var(--rail); overflow-x:auto;        /* scroll on tiny screens */
}
nav.tabs .tab{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:600;
  font-size:clamp(.8rem,1.35vw,1.12rem); letter-spacing:.01em; color:#f8f1de; white-space:nowrap;
  padding:9px clamp(9px,1.3vw,18px); margin:0 2px -5px; flex:0 0 auto;   /* overlap onto the rail */
  background:var(--c); border:1px solid rgba(0,0,0,.4); border-bottom:none;
  border-radius:12px 12px 0 0; position:relative; cursor:pointer;
  box-shadow:0 -3px 10px rgba(0,0,0,.3); text-shadow:0 1px 2px rgba(0,0,0,.55);
  transition:.14s;
}
nav.tabs .tab:hover{ transform:translateY(-3px); filter:brightness(1.13); }
nav.tabs .tab.active{ box-shadow:0 -5px 15px rgba(0,0,0,.42); z-index:2; filter:brightness(1.1); }
nav.tabs .tab.home{ font-style:italic; }

main{ max-width:1520px; margin:0 auto; padding:24px clamp(12px,3vw,36px) 64px; }
.section-title{ font-family:"Cormorant Garamond",serif; color:var(--gold); font-weight:600;
  letter-spacing:.05em; font-size:1.8rem; margin:14px 6px 18px; padding-bottom:8px;
  border-bottom:1px solid rgba(230,191,94,.4); text-shadow:0 1px 4px rgba(0,0,0,.65); }

/* listing cards — light text on dark card = high contrast */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.card{ background:rgba(24,30,16,.74); border:1px solid rgba(230,191,94,.2); border-radius:12px; overflow:hidden; transition:.15s; }
.card:hover{ transform:translateY(-3px); border-color:rgba(230,191,94,.45); }
.card .thumb{ width:100%; height:172px; object-fit:cover; display:block; }
.card-body{ padding:18px 20px; }
.card .date{ color:var(--gold); font-family:"Oswald",sans-serif; font-size:.78rem; letter-spacing:.06em; }
.card .chip{ display:inline-block; font-family:"Oswald",sans-serif; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.06em; padding:2px 9px; border-radius:999px; color:#fff; margin-left:8px; }
.card h3{ font-family:"Cormorant Garamond",serif; font-weight:600; color:#f6efda; margin:5px 0 8px; font-size:1.42rem; line-height:1.2; }
.card p{ color:#dcd6c2; font-size:1.06rem; line-height:1.5; }

/* ===== SINGLE POST — light parchment, so migrated WP (dark) text reads clearly ===== */
article.post{ background:var(--paper); color:var(--paperink); border-radius:14px;
  padding:clamp(24px,4vw,52px); max-width:860px; margin:0 auto; box-shadow:0 12px 44px rgba(0,0,0,.45); }
article.post h1{ font-family:"Cormorant Garamond",serif; color:#43301a; font-weight:600; font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.14; margin-bottom:6px; }
article.post .meta{ color:#7c6b46; font-family:"Oswald",sans-serif; letter-spacing:.04em; font-size:.85rem; margin-bottom:22px; }
article.post .body{ font-size:1.17rem; line-height:1.8; color:#2a2418; }
article.post .body img{ max-width:100%; height:auto; border-radius:8px; margin:14px 0; }
article.post .body h2, article.post .body h3{ font-family:"Cormorant Garamond",serif; color:#43301a; margin:24px 0 10px; }
article.post .body a{ color:#7a5a1e; text-decoration:underline; }
.backlink{ display:inline-block; margin:0 0 16px; color:var(--gold); font-family:"Cormorant Garamond",serif; font-size:1.25rem; text-shadow:0 1px 4px rgba(0,0,0,.7); }

.pagination{ display:flex; gap:9px; justify-content:center; margin:36px 0; font-family:"Oswald",sans-serif; }
.pagination a,.pagination span{ padding:9px 15px; border-radius:9px; background:rgba(24,30,16,.74); border:1px solid rgba(230,191,94,.28); color:var(--ink); }
.pagination .cur{ background:var(--gold); color:#2a2010; }

/* ===== IMAGES gallery: sub-categories + media grid ===== */
.subnav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px auto 22px; max-width:900px; }
.subnav .sub{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:1.02rem; letter-spacing:.03em;
  color:#f3ead2; padding:6px 16px; border-radius:999px; background:rgba(70,49,22,.72);
  border:1px solid rgba(230,191,94,.3); text-shadow:0 1px 2px rgba(0,0,0,.5); transition:.14s; }
.subnav .sub:hover{ filter:brightness(1.15); }
.subnav .sub.active{ background:var(--gold); color:#2a2010; border-color:var(--gold); }
.subnav .sub .n{ opacity:.7; font-size:.82em; }
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.media-wrap{ position:relative; }
.trash{ position:absolute; bottom:6px; right:6px; margin:0; }
.trash button{ background:rgba(90,20,20,.82); border:1px solid rgba(255,120,120,.45); color:#fff;
  border-radius:8px; padding:3px 8px; font-size:1rem; line-height:1; cursor:pointer; opacity:.72; transition:.12s; }
.trash button:hover{ opacity:1; background:#8a1f1f; transform:scale(1.08); }
.media{ display:flex; align-items:center; justify-content:center; border-radius:10px; overflow:hidden;
  background:rgba(16,22,12,.6); border:1px solid rgba(230,191,94,.18); aspect-ratio:1/1; padding:6px; }
.media img,.media video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.media:hover{ border-color:rgba(230,191,94,.5); }

footer.site{ text-align:center; color:#e8e0c8; padding:28px; font-size:.9rem; text-shadow:0 1px 3px rgba(0,0,0,.7); border-top:1px solid rgba(255,255,255,.12); }
@media (max-width:560px){ nav.tabs .tab{ font-size:.98rem; padding:10px 14px; } }