/* =========================================================
   Maschito site — shared stylesheet
   Every page links to this file, so a change here
   changes the look of the whole site.
   ========================================================= */

:root{
  --paper:   #faf6ee;   /* page background, warm cream   */
  --ink:     #2a2420;   /* main text                      */
  --muted:   #6b5f55;   /* secondary text                 */
  --rule:    #e3d9c8;   /* thin lines                     */
  --card:    #ffffff;
  --accent:  #9b2c1f;   /* deep red (Albanian eagle red)  */
  --accent-2:#3d5a3a;   /* olive green (the laurel)       */
  --gold:    #b48a3c;
  --maxw:    1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:1.075rem;
  line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:#6e1d13}

h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .4em;
}
h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.5vw,2.5rem)}
h3{font-size:1.55rem}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- Header / navigation ---------- */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:10;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:51px}
.brand span{font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-weight:600;line-height:1}
.brand small{display:block;font-family:"Source Serif 4",serif;font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.95rem}
.nav a{color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--accent)}

/* ---------- Hero ---------- */
.hero{padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.eyebrow{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 12px;
}
.lede{font-size:1.2rem;color:var(--muted);max-width:34em}
.hero figure{margin:0}
.hero figure img{border-radius:4px;box-shadow:0 18px 40px -18px rgba(40,25,10,.45)}
figcaption{font-size:.85rem;color:var(--muted);margin-top:8px;font-style:italic}

/* ---------- Sections ---------- */
section{padding:48px 0}
section + section{border-top:1px solid var(--rule)}
.section-head{max-width:40em;margin-bottom:28px}
.section-head p{color:var(--muted);margin:0}

/* Quick facts strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:28px}
.facts div{background:var(--paper);padding:16px 18px}
.facts b{display:block;font-family:"Cormorant Garamond",serif;font-size:1.7rem;color:var(--accent);line-height:1.1}
.facts span{font-size:.88rem;color:var(--muted)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:6px;
  padding:26px 26px 22px;display:flex;flex-direction:column;
}
.card .tag{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:600;margin-bottom:8px}
.card p{margin:0 0 16px}
.card .meta{font-size:.9rem;color:var(--muted)}
.card .links{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}

.btn{
  display:inline-block;padding:9px 16px;border-radius:4px;
  background:var(--accent);color:#fff;text-decoration:none;font-size:.95rem;
}
.btn:hover{background:#7d2217;color:#fff}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn.ghost:hover{background:var(--accent);color:#fff}

/* Feature (Saint Elia) */
.feature{
  display:grid;grid-template-columns:1fr 1.2fr;gap:0;
  background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden;
}
.feature .text{padding:32px}
.feature .panel{
  background:var(--accent);color:#fbefe6;padding:32px;
  display:flex;flex-direction:column;justify-content:center;
}
.feature .panel h3{color:#fff}
.feature .panel .big{font-family:"Cormorant Garamond",serif;font-size:4rem;line-height:1;color:#fff}
.feature .panel a{color:#fff}

/* Coming soon */
.soon{
  border:1px dashed var(--gold);background:#fffaf0;border-radius:6px;padding:26px;
}
.soon .tag{color:var(--gold)}

/* Family names */
.names{columns:4 180px;column-gap:28px;padding:0;margin:0;list-style:none}
.names li{padding:5px 0;border-bottom:1px dotted var(--rule);break-inside:avoid}
.names em{color:var(--muted);font-style:normal;font-size:.9em}

/* ---------- Footer ---------- */
.site-footer{background:#2a2420;color:#d9cfc2;padding:36px 0;font-size:.92rem}
.site-footer a{color:#fff}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- Phones and small screens ---------- */
@media (max-width:820px){
  .hero .wrap,.feature,.cards{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:32px}
  .site-header{position:static}
}

/* =========================================================
   Booklet pages (e.g. lacentra-backen.html)
   ========================================================= */
.booklet .wrap{max-width:760px}
.title-page{padding:56px 0 36px;text-align:center}
.title-page .subtitle{font-family:"Cormorant Garamond",serif;font-size:1.7rem;line-height:1.25;margin:0 0 14px}
.title-page .byline{font-size:1.15rem;margin:0 0 4px}
.title-page .copyright{color:var(--muted);font-size:.9rem}
.webmaster-note{
  text-align:left;margin-top:28px;padding:18px 20px;font-size:.95rem;
  background:#fffaf0;border-left:4px solid var(--gold);border-radius:4px;
}
.webmaster-note .pg{float:none;margin:0 2px}

/* Contents table */
.toc{width:100%;border-collapse:collapse;margin:8px 0 26px}
.toc td{padding:7px 0;border-bottom:1px dotted var(--rule);vertical-align:bottom}
.toc td:last-child{text-align:right;width:3em;font-variant-numeric:oldstyle-nums}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.toc tr.gap td{border:0;padding:4px}
.jump-label{font-size:.9rem;color:var(--muted);margin:0 0 8px}
.page-jump{display:flex;flex-wrap:wrap;gap:6px}
.page-jump a{
  min-width:2.3em;text-align:center;padding:4px 6px;font-size:.9rem;
  border:1px solid var(--rule);border-radius:4px;background:var(--card);text-decoration:none;
}
.page-jump a:hover{border-color:var(--accent);background:var(--accent);color:#fff}

/* Booklet text */
.booklet-text{padding:10px 0 40px}
.chapter{padding:36px 0 8px;border-top:1px solid var(--rule)}
.chapter:first-child{border-top:0}
.chapter h2{margin-bottom:.6em}
.dedication{text-align:center;font-size:1.15rem}
.oral-history{border-left:3px solid var(--rule);padding-left:18px}

/* Page-number tags: show where each printed page begins */
.pg{
  display:inline-block;font-family:"Source Serif 4",serif;font-size:.72rem;font-weight:600;
  letter-spacing:.04em;line-height:1;padding:4px 7px;margin:0 6px;border-radius:20px;
  background:var(--accent);color:#fff !important;text-decoration:none;vertical-align:.25em;
  scroll-margin-top:90px;
}
.pg:hover{background:#6e1d13}
h2 .pg{margin:0 10px 0 0;vertical-align:.5em}
.chapter > .pg{margin-bottom:10px}
[id]{scroll-margin-top:90px}

/* Figures inside the booklet */
.float-left{float:left;width:42%;margin:4px 24px 12px 0}
.float-left img{border:1px solid var(--rule);background:#fff}
.full-page{margin:28px auto;text-align:center;max-width:440px}
.full-page img{margin:8px auto 0;border:1px solid var(--rule)}
.photo-caption{
  font-style:italic;color:var(--muted);font-size:.95rem;
  border:1px dashed var(--rule);padding:12px 16px;border-radius:4px;background:#fff;
}
.photo-caption span{display:block;font-style:normal;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.missing-page{
  margin:18px 0;padding:12px 16px;font-size:.92rem;color:var(--muted);
  background:#fffaf0;border:1px dashed var(--gold);border-radius:4px;
}
.booklet-names{margin:18px 0}
.footnote{font-size:.92rem;color:var(--muted)}
.end-mark{text-align:center;color:var(--muted);font-style:italic;margin-top:40px}

/* Floating "back to contents" button */
.to-contents{
  position:fixed;right:18px;bottom:18px;z-index:20;
  background:var(--ink);color:#fff;text-decoration:none;font-size:.9rem;
  padding:9px 14px;border-radius:24px;box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
}
.to-contents:hover{background:var(--accent);color:#fff}

@media (max-width:820px){
  .float-left{float:none;width:100%;max-width:340px;margin:0 auto 18px}
}

/* Booklet photographs */
.cover-photo{margin:30px auto 0;max-width:320px}
.cover-photo img{box-shadow:0 18px 40px -18px rgba(40,25,10,.5);border-radius:3px}
.cover-photo figcaption{text-align:center}
.full-page img{max-width:100%}
.wide{margin:26px 0}
.wide img{width:100%;border:1px solid var(--rule)}
.webmaster-aside{font-size:.88rem;color:var(--muted);margin:8px 0 0}

/* Caglia-Manduano booklet extras */
.photo-slot{
  margin:22px 0;padding:14px 16px;font-size:.9rem;color:var(--muted);font-style:italic;
  border:1px dashed var(--rule);border-radius:4px;background:#fffdf8;text-align:center;
}
.photo-slot .pg{font-style:normal}
.chapter h3{margin-top:1.4em}
.chapter h3 .pg{margin:0 10px 0 0;vertical-align:.35em}
.plain-list,.food-list,.sayings{padding-left:1.2em}
.plain-list li,.food-list li{margin:6px 0}
.plain-list ol{margin:6px 0}
.sayings{list-style:none;padding-left:0}
.sayings li{
  font-family:"Cormorant Garamond",serif;font-size:1.3rem;line-height:1.35;
  padding:8px 0 8px 18px;border-left:3px solid var(--accent);margin:10px 0;
}
.finger-rhyme{padding-left:18px;border-left:3px solid var(--rule)}
.dated-note{font-size:.92rem;color:var(--muted);font-style:italic}
.info-table{border-collapse:collapse;min-width:240px}
.info-table td{padding:5px 18px 5px 0;border-bottom:1px dotted var(--rule)}
.info-table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.info-list dt{font-weight:600;margin-top:12px}
.info-list dd{margin:2px 0 0 0}

/* =========================================================
   Nasse study page (nasse-italo-albanian-villages.html)
   ========================================================= */
.study .title-page h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.ch-no{display:block;font-family:"Source Serif 4",serif;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
sup.fn{font-size:.7em;line-height:0}
sup.fn a{text-decoration:none;padding:0 1px;font-weight:600}
sup.fn a:hover{text-decoration:underline}
.chapter-notes{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--muted)}
.chapter-notes h4{font-family:"Source Serif 4",serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;color:var(--ink)}
.chapter-notes ol{padding-left:2.2em;margin:0}
.chapter-notes li{margin:5px 0}
.chapter-notes li:target{background:#fff3cf}
.chapter-notes .back{text-decoration:none;margin-left:4px}
p.bib{padding-left:1.6em;text-indent:-1.6em;margin:6px 0;font-size:.95rem}
figure.photo,figure.map{margin:26px 0;text-align:center}
figure.photo img{margin:0 auto;border:1px solid var(--rule);max-height:80vh;width:auto}
figure.map img{margin:6px auto 0;border:1px solid var(--rule)}
figure.photo figcaption,figure.map figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}
.fig-no{font-weight:600;color:var(--ink)}
.hint{font-style:italic}
.frontispiece{margin:28px auto 0;max-width:560px}
.frontispiece img{border:1px solid var(--rule)}
.frontispiece figcaption{text-align:center}
.downloads{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.downloads .jump-label{width:100%;margin:0}
.pg-line{margin:18px 0 -10px}
.table-wrap{overflow-x:auto;margin:14px 0}
.data-table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
.data-table th{text-align:left;border-bottom:2px solid var(--ink);padding:6px 10px 6px 0;font-weight:600;vertical-align:bottom}
.data-table td{border-bottom:1px dotted var(--rule);padding:4px 10px 4px 0}
.data-table td:nth-child(n+4),.data-table th:nth-child(n+4){text-align:right;font-variant-numeric:tabular-nums}
.data-table tfoot td{border-top:2px solid var(--ink);border-bottom:0;font-weight:600}
.alt{color:var(--muted);font-size:.9em}
.chapter h3 .pg{vertical-align:.35em}

/* Fratelli Giura page */
.lede-text{max-width:36em;margin:18px auto 0;color:var(--muted);font-size:1.1rem}
blockquote.plaque{margin:10px 0 12px;padding:22px 26px;background:#f3ede2;border:1px solid var(--rule);border-radius:4px;
  font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.5;text-align:center}
blockquote.plaque p{margin:0 0 10px}
.plaque-date{font-variant:small-caps;letter-spacing:.08em;color:var(--muted)}
figure.portrait{float:right;width:220px;margin:4px 0 14px 24px}
figure.portrait img{border:1px solid var(--rule)}
figure.portrait figcaption{font-size:.82rem;color:var(--muted);margin-top:6px;font-style:italic}
@media (max-width:820px){figure.portrait{float:none;margin:0 auto 18px}}
.inscription{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:18px 0 10px}
.inscription .latin{background:#f3ede2;border:1px solid var(--rule);border-radius:4px;padding:16px 18px;
  font-family:"Cormorant Garamond",serif;font-size:.98rem;letter-spacing:.04em;text-align:center;line-height:1.6}
.inscription .latin p,.inscription .english p{margin:0 0 12px}
.inscription .english{font-size:1rem}
@media (max-width:820px){.inscription{grid-template-columns:1fr}}
.history-table{min-width:0}
.history-table td:nth-child(n+2),.history-table th:nth-child(n+2){text-align:left}
.center-btn{text-align:center;margin-top:28px}
.facts b a{color:inherit;text-decoration:none;border-bottom:2px solid var(--accent, #9a3b2e)}
.site-footer .credit{flex-basis:100%;margin:8px 0 0;font-size:.78rem;color:#a89c8e}
.site-footer .credit a{color:#d9cfc2}
.photo-link{font-size:.95rem;color:var(--muted);font-style:italic}
.credit-line{font-size:.78rem;font-style:normal}