/* Balkan Women History — warm / archival theme
   Shared stylesheet for all pages */

:root{
  --paper:#efe6d2; --paper2:#e7dcc3; --paper3:#f5eede;
  --ink:#3a2f24; --muted:#7a6b56; --rust:#9c4724; --gold:#b07a25;
  --line:#cdbf9f; --green:#557068; --plum:#7d6a86;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Lora',Georgia,serif;line-height:1.65;
  background-image:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.35), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
a{color:var(--rust)}
.wrap{max-width:1080px;margin:0 auto;padding:0 36px}
.wrap-narrow{max-width:740px;margin:0 auto;padding:0 36px}

/* ---------- Header ---------- */
header{border-bottom:3px double var(--gold);background:var(--paper2)}
.masthead{text-align:center;padding:28px 0 20px}
.masthead .meta{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.masthead h1{font-family:'Playfair Display',serif;font-weight:700;font-size:46px;margin:8px 0 4px}
.masthead h1 a{color:var(--ink);text-decoration:none}
.masthead .tag{font-style:italic;color:var(--rust);font-size:17px}
nav ul{display:flex;justify-content:center;gap:32px;list-style:none;padding:12px 0;border-top:1px solid var(--line);
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;padding-bottom:2px}
nav a:hover,nav a.active{color:var(--rust);border-bottom:1px solid var(--rust)}

/* ---------- Shared bits ---------- */
.divider{text-align:center;color:var(--gold);font-size:22px;letter-spacing:.5em;padding:10px 0}
.lbl{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.stamp{display:inline-block;border:2px solid var(--rust);color:var(--rust);padding:10px 22px;
  text-transform:uppercase;letter-spacing:.16em;font-size:13px;text-decoration:none;transform:rotate(-1.5deg);background:transparent;cursor:pointer}
.stamp:hover{background:var(--rust);color:var(--paper3)}
h2.sect,h3.sect{font-family:'Playfair Display',serif;font-weight:500;text-align:center;padding-top:10px}
h3.sect{font-size:30px}
.sect-sub{text-align:center;color:var(--muted);font-style:italic;margin-bottom:30px}

/* portrait / image blocks (placeholder gradients) */
.portrait{aspect-ratio:3/4;border:8px solid #fff;box-shadow:0 6px 0 var(--line),0 8px 22px rgba(0,0,0,.25);
  position:relative;filter:sepia(.25)}
.portrait .cap{position:absolute;bottom:-30px;left:0;right:0;text-align:center;font-style:italic;font-size:13px;color:var(--muted)}
.g-teuta{background:linear-gradient(160deg,#c2a878,#8a6a42)}
.g-plum{background:linear-gradient(150deg,#7d6a86,#4a3c52)}
.g-rust{background:linear-gradient(150deg,#a9612f,#6a3414)}
.g-green{background:linear-gradient(150deg,#557068,#324b41)}
.g-blue{background:linear-gradient(150deg,#5d6f86,#33414b)}
.g-gold{background:linear-gradient(150deg,#b89a5e,#7a5e2a)}

/* ---------- Home hero ---------- */
.hero{display:grid;grid-template-columns:300px 1fr;gap:40px;padding:50px 0;align-items:center}
.hero h2{font-family:'Playfair Display',serif;font-size:42px;line-height:1.12;margin:10px 0 14px}
.hero p{font-size:18px;color:#4a3d2e}
.hero .more{display:inline-block;margin-top:16px;color:var(--rust);text-decoration:none;font-style:italic;border-bottom:1px solid var(--rust)}

/* ---------- Card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-bottom:54px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.clip{background:var(--paper2);border:1px solid var(--line);padding:8px;box-shadow:2px 2px 0 var(--line);
  text-decoration:none;color:inherit;display:block}
.clip:hover{box-shadow:4px 4px 0 var(--line);transform:translate(-1px,-1px)}
.clip .img{aspect-ratio:1/1;filter:sepia(.4);margin-bottom:12px}
.clip .era{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:0 8px}
.clip h4{font-family:'Playfair Display',serif;font-size:21px;margin:4px 8px 6px;color:var(--ink)}
.clip p{font-size:15px;color:var(--muted);padding:0 8px 10px}

/* ---------- Educational band ---------- */
.edu{background:var(--paper2);border-top:3px double var(--gold);border-bottom:3px double var(--gold)}
.edu-in{display:grid;grid-template-columns:1fr 1fr;gap:46px;padding:48px 0;align-items:center}
.edu h3{font-family:'Playfair Display',serif;font-size:30px;margin-bottom:12px}
.edu p{font-size:17px;margin-bottom:18px;color:#4a3d2e}
.ledger{list-style:none;border:1px solid var(--line);background:rgba(255,255,255,.4)}
.ledger li{display:flex;gap:16px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:16px}
.ledger li:last-child{border-bottom:0}
.ledger .yr{font-family:'Playfair Display',serif;color:var(--rust);min-width:84px}

/* ---------- Archive page ---------- */
.page-head{text-align:center;padding:46px 0 8px}
.page-head h2{font-family:'Playfair Display',serif;font-weight:500;font-size:40px}
.page-head p{color:var(--muted);font-style:italic;margin-top:6px;font-size:18px}
.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:24px 0 36px}
.filters a{border:1px solid var(--line);background:var(--paper3);padding:7px 16px;border-radius:999px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.filters a.active,.filters a:hover{background:var(--rust);color:var(--paper3);border-color:var(--rust)}
.era-block{padding-bottom:20px}
.era-block > h3{font-family:'Playfair Display',serif;font-size:26px;border-bottom:1px solid var(--line);
  padding-bottom:8px;margin-bottom:24px;color:var(--ink)}

/* ---------- Story / article page ---------- */
.article-hero{padding:46px 0 30px;text-align:center}
.article-hero .era{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:13px}
.article-hero h1{font-family:'Playfair Display',serif;font-weight:700;font-size:48px;line-height:1.1;margin:12px 0;max-width:820px;margin-inline:auto}
.article-hero .dek{font-style:italic;color:var(--muted);font-size:20px;max-width:640px;margin:0 auto}
.article-hero .byline{margin-top:18px;font-size:14px;color:var(--muted);letter-spacing:.05em}
.figure{margin:0 0 30px}
.figure .portrait{max-width:340px;margin:0 auto 36px}
.article{font-size:18.5px;line-height:1.8}
.article p{margin-bottom:22px}
.article h2{font-family:'Playfair Display',serif;font-size:28px;margin:34px 0 14px}
.article .drop::first-letter{font-family:'Playfair Display',serif;font-size:64px;float:left;line-height:.8;
  padding:6px 10px 0 0;color:var(--rust)}
blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:26px 0;font-style:italic;
  font-size:21px;color:#4a3d2e;font-family:'Playfair Display',serif}
.factbox{background:var(--paper2);border:1px solid var(--line);padding:24px 26px;margin:30px 0;box-shadow:2px 2px 0 var(--line)}
.factbox h4{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:.04em;margin-bottom:12px;text-transform:uppercase;color:var(--rust)}
.factbox dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15px}
.factbox dt{color:var(--muted)}
.sources{font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:36px;padding-top:18px}
.sources a{word-break:break-word}

/* ---------- Learn page ---------- */
.learn-hero{text-align:center;padding:50px 0 10px}
.learn-hero h2{font-family:'Playfair Display',serif;font-weight:500;font-size:40px}
.learn-hero p{color:var(--muted);font-size:19px;max-width:620px;margin:14px auto 0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:40px 0}
.tile{background:var(--paper2);border:1px solid var(--line);padding:28px;box-shadow:2px 2px 0 var(--line)}
.tile .ic{font-size:30px}
.tile h3{font-family:'Playfair Display',serif;font-size:22px;margin:10px 0 8px}
.tile p{font-size:15px;color:var(--muted)}
.bigtimeline{list-style:none;border-left:2px solid var(--gold);margin:20px 0 50px;padding-left:0}
.bigtimeline li{position:relative;padding:0 0 26px 30px}
.bigtimeline li::before{content:'';position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--rust);border:2px solid var(--paper)}
.bigtimeline .yr{font-family:'Playfair Display',serif;color:var(--rust);font-size:20px}
.bigtimeline .ev{display:block;font-size:16px}
.bigtimeline .ev b{font-weight:500}

/* ---------- Footer ---------- */
footer{text-align:center;padding:42px 0;color:var(--muted);font-style:italic;border-top:3px double var(--gold);margin-top:10px;background:var(--paper2)}
footer .links{margin-top:8px;font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
footer .links a{color:var(--muted);text-decoration:none;margin:0 10px}
footer .links a:hover{color:var(--rust)}

@media(max-width:760px){
  .hero,.edu-in{grid-template-columns:1fr}
  .grid,.grid.two,.tiles{grid-template-columns:1fr}
  .masthead h1{font-size:34px}
  .article-hero h1{font-size:34px}
}