/* Το χώμαν / To Homan: single-page booklet layout */

/* Self-hosted Alegreya with breve (U+0306) anchors on ζ σ ξ ψ Σ (see tools/make_font.py).
   Every text style must use this family, or the breve falls back to another font and floats. */
@font-face { font-family: "Alegreya Choman"; src: url("../fonts/alegreya-choman-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Choman"; src: url("../fonts/alegreya-choman-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Choman"; src: url("../fonts/alegreya-choman-700-normal.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Choman"; src: url("../fonts/alegreya-choman-700-italic.woff2") format("woff2"); font-weight: 500 800; font-style: italic; font-display: swap; }

:root{
  --serif:"Alegreya Choman",Georgia,"Times New Roman",serif;
  --ochre:#BD7431;      /* cover background, sampled from the booklet PDF */
  --sun:#FCC443;        /* the spiral sun */
  --soil:#3B2000;       /* the stone print */
  --cream:#EFE5D8;      /* title colour on the cover */
  --paper:#FFFEFB;
  --ink:#2A1C10;
  --muted:#6E5A48;
  --head:#B86A28;       /* large headings, as in the booklet */
  --accent:#9A531B;     /* small orange text, darkened for legibility */
  --rule:#E9D7C3;
  color-scheme:light;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1C130B; --ink:#EDE3D6; --muted:#B9A592; --head:#E3A161; --accent:#E3A161; --rule:#3A2A1B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{--paper:#1C130B; --ink:#EDE3D6; --muted:#B9A592; --head:#E3A161; --accent:#E3A161; --rule:#3A2A1B; color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(4.5rem + env(safe-area-inset-top,0px)); -webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1.125rem;line-height:1.62;
  font-feature-settings:"kern","liga","onum";
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:2px}

/* language switching */
html[data-lang="el"] [lang="en"]{display:none!important}
html[data-lang="en"] [lang="el"]{display:none!important}
/* lyrics are sung in Greek, so they show in both languages */
html[data-lang="en"] .lyrics[lang="el"]{display:block!important}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar-in{max-width:72rem;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;position:relative}
.mark{font-style:italic;font-size:1.5rem;color:var(--head);text-decoration:none;line-height:1;margin-right:auto}
.nav{display:flex;gap:1.4rem}
.nav a{text-decoration:none;font-weight:500}
.nav a:hover{color:var(--head)}
.lang{font:inherit;font-weight:700;font-size:.95rem;background:none;color:var(--accent);
  border:1.5px solid currentColor;border-radius:999px;padding:.15rem .7rem;cursor:pointer}
.lang:hover{background:var(--accent);color:var(--paper)}
.menu{display:none;font:inherit;background:none;border:0;color:var(--ink);padding:.3rem;cursor:pointer}
.menu svg{display:block}
@media (max-width:860px){
  .menu{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule)}
  .nav.open{display:flex}
  .nav a{padding:.85rem 1.25rem;border-top:1px solid var(--rule)}
}
/* once the cover has scrolled away, the bar takes the cover's ochre (set by js/site.js) */
.bar{transition:background-color .3s ease,border-color .3s ease}
.bar.solid{background:var(--ochre);border-bottom-color:var(--ochre);color:var(--cream)}
.bar.solid .mark,.bar.solid .lang,.bar.solid .menu{color:var(--cream)}
.bar.solid .nav a:hover{color:var(--sun)}
.bar.solid .lang:hover{background:var(--cream);color:var(--ochre)}
@media (max-width:860px){
  .bar.solid .nav{background:var(--ochre);border-bottom-color:var(--ochre)}
  .bar.solid .nav a{border-top-color:rgba(239,229,216,.35)}
}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* running head, like the booklet's margin */
.rail{display:none;position:fixed;left:1.1rem;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:center;
  font-style:italic;font-weight:700;color:var(--head);letter-spacing:.02em;pointer-events:none;opacity:.85}
@media (min-width:1100px){.reading .rail{display:block}}

/* ---------- cover ---------- */
.hero{background:var(--ochre);color:var(--cream);padding:2.5rem 1.25rem 3rem}
.hero-in{max-width:34rem;margin:0 auto;text-align:center}
.cover{width:100%;margin:0 auto;animation:rise 1.4s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){.cover{animation:none}}

/* ---------- page sections ---------- */
main{display:block}
.sec{max-width:72rem;margin:0 auto;padding:4.5rem 1.25rem}
.sec + .sec{border-top:1px solid var(--rule)}
.sec h2{font-weight:400;font-size:clamp(2rem,5vw,2.8rem);line-height:1.1;color:var(--head);margin:0 0 2rem}
.orn{display:block;width:44px;height:44px;margin:0 0 1.2rem;background:var(--head);
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.orn.a{--m:url("../images/ornament-leaves.png")}
.orn.b{--m:url("../images/ornament-flower.png")}
.prose{max-width:38rem}
.prose h3{font-weight:700;color:var(--accent);font-size:1.15rem;margin:0 0 1rem}
.prose p{margin:0 0 1.1rem;hyphens:auto}
.prose .sign{font-style:italic;margin-bottom:1.2rem}
.cols{display:grid;gap:3rem}
@media (min-width:900px){.cols{grid-template-columns:minmax(0,38rem) minmax(0,1fr);gap:5rem}}
.about h3,.credits-sec h3{font-weight:700;font-size:1.15rem;color:var(--accent);margin:0 0 .5rem}
.about p{margin:0 0 1rem}
.side{font-size:1.05rem}
.side .role{display:block;color:var(--muted)}

/* ---------- index ---------- */
.index{list-style:none;margin:0;padding:0;columns:2 22rem;column-gap:4rem}
.index li{break-inside:avoid}
.index a{display:flex;gap:1rem;align-items:baseline;padding:.6rem 0;text-decoration:none;border-bottom:1px solid var(--rule)}
.index .no{font-weight:800;color:var(--head);min-width:1.6rem;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.index .tt{font-size:1.2rem}
.index a:hover .tt{color:var(--head)}

/* ---------- track reader ---------- */
.track{max-width:72rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
.js .track{display:none}
.js .track.on{display:block}
.js.reading .page{display:none}
.back{display:inline-block;text-decoration:none;color:var(--accent);font-weight:500;margin-bottom:2rem}
.back::before{content:"‹ "}
.count{margin:0;color:var(--muted);font-variant-numeric:lining-nums}
/* each song's ornament from the booklet, drawn in the heading orange */
.song-orn{display:block;width:6rem;height:4.2rem;margin:0 0 1.4rem;background:var(--head);
  -webkit-mask-position:left center;mask-position:left center;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.song-orn.dot{width:2.6rem;height:2.6rem;border-radius:50%;margin:.8rem 0 2rem}
.track h3{font-weight:400;font-size:clamp(2.1rem,6vw,3.2rem);line-height:1.08;color:var(--head);margin:.2rem 0 2.5rem;max-width:20ch}
.spread{display:grid;gap:2rem}
@media (min-width:900px){
  .spread{grid-template-columns:16rem minmax(0,38rem);gap:5rem}
  .credits{position:sticky;top:6rem;align-self:start;text-align:right}
}
.credits ul{list-style:none;margin:0;padding:0;color:var(--accent);font-size:1rem;line-height:1.4}
.credits li{margin:0 0 .7rem}
.credits .k{font-weight:700}
.credits sup.ord{font-size:.68em;line-height:0;margin-left:.04em}
.text p{margin:0 0 1.1rem;hyphens:auto}
.text h4{font-weight:700;font-size:1.25rem;color:var(--accent);margin:2.6rem 0 .9rem;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.text .verse{margin:0 0 0 1.5rem;font-style:italic;font-size:1.05rem;line-height:1.5}
.text .verse.vs{margin-top:.2rem}
.text .verse.ve{margin-bottom:1.3rem}
.text .srcs{margin:1.8rem 0 1.4rem}
.text .src-label{font-weight:700;color:var(--accent);font-size:.95rem;margin:0 0 .35rem}
.text .src{font-size:.95rem;color:var(--muted);margin:0 0 .35rem;padding-left:1.5rem;text-indent:-1.5rem;overflow-wrap:anywhere}
.text a{color:var(--accent)}
.lyrics{margin:0 0 2.5rem;font-weight:700;line-height:1.55}
.lyrics p{margin:0 0 1.1rem;hyphens:none}
.lyrics .notes{margin-top:1.2rem;font-weight:400}
.lyrics .lyr{width:fit-content;max-width:100%}
.lyrics .c{text-align:center}
/* English mode: each Greek stanza is followed by its translation */
.lyrics .tr{font-weight:400;color:var(--muted);margin:-.6rem 0 1.6rem;font-size:1.02rem;line-height:1.5}
.ph{margin:2.2rem 0 2.4rem}
.ph img{width:100%;background:var(--rule)}
.ph.tall img{width:auto;max-width:100%;max-height:34rem}
.ph figcaption{margin-top:.6rem;font-size:.92rem;font-style:italic;color:var(--muted);line-height:1.4}
sup.fn{font-size:.68em;line-height:0;margin-left:.05em}
sup.fn a{text-decoration:none;color:var(--accent);font-weight:700}
.notes{margin:2.5rem 0 0;padding:1.2rem 0 0 1.4rem;border-top:1px solid var(--head);font-size:.92rem;color:var(--muted);line-height:1.45}
.notes li{margin:0 0 .45rem}
.notes li::marker{color:var(--accent);font-weight:700}
.notes li:target{color:var(--ink)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3.5rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.pn{text-decoration:none;font-weight:700;color:var(--accent)}
.pn.prev::before{content:"‹ "} .pn.next{text-align:right} .pn.next::after{content:" ›"}

/* ---------- contributors ---------- */
.people{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem 2.5rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.people li{line-height:1.35}
.people b{display:block;font-weight:700}
.people .r{color:var(--muted);font-size:1rem}
.credits-sec h3{margin-top:3rem}
.roles{list-style:none;margin:0;padding:0;max-width:44rem}
.roles li{margin:0 0 .55rem;line-height:1.4}
.roles .k{font-weight:700;color:var(--accent)}
.legend{margin:1rem 0 0;font-size:.92rem;font-style:italic;color:var(--muted)}

/* ---------- thanks ---------- */
.dedication{font-style:italic;font-size:1.2rem;color:var(--muted);margin:0 0 2.5rem}

/* ---------- interview photos ---------- */
.photos .lead{font-style:italic;color:var(--muted);margin:-1rem 0 2.2rem}
.gallery{columns:2 24rem;column-gap:2rem}
.gallery figure{break-inside:avoid;margin:0 0 2.2rem}
.gallery img{width:100%;background:var(--rule)}
.gallery img + img{margin-top:.6rem}
.gallery figcaption{margin-top:.6rem;font-size:.95rem;font-style:italic;color:var(--muted);line-height:1.4}

/* ---------- contact ---------- */
.contact .mail{font-size:clamp(1.4rem,4vw,2.1rem);color:var(--head);text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere}

footer{background:var(--ochre);color:var(--cream);padding:2rem 1.25rem}
.foot-in{max-width:72rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;justify-content:space-between}
footer p{margin:0;font-size:1rem}
.legal-link{font:inherit;font-size:.95rem;background:none;border:0;padding:0;color:var(--cream);
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;cursor:pointer}
.legal-link:hover{color:var(--sun)}

/* ---------- copyright popup ---------- */
.legal{max-width:44rem;width:calc(100% - 2rem);max-height:calc(100% - 3rem);padding:2.2rem 2rem 1.6rem;
  border:0;border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.legal::backdrop{background:rgba(59,32,0,.55)}
.legal h2{font-weight:400;font-size:1.7rem;color:var(--head);margin:0 0 1.2rem;padding-right:2rem}
.legal p{font-size:.95rem;line-height:1.55;margin:0 0 1rem;hyphens:auto}
.legal-close{position:absolute;top:.7rem;right:.8rem;width:2.4rem;height:2.4rem;font-size:1.7rem;line-height:1;
  background:none;border:0;color:var(--accent);cursor:pointer;border-radius:999px}
.legal-close:hover{background:var(--rule)}