@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genar102.ttf");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genai102.ttf");
    font-style: italic;
    font-weight: normal;
}

:root { --bg:#f0eeeb; --card-bg:#faf9f7; --border:#d0c8bc; --ink:#1e1a14; --dim:#6b6055; --gold:#8b6914; --gold-light:#c9a84c; --shadow:rgba(0,0,0,0.08); --c0:#7a3a5a; --c1:#1a4f8a; --c2:#6a1a7a; --c3:#1a6a4a; --c4:#7a4a00; --c5:#3a6000; --c6:#8a1a0e; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); min-height:100vh; font-family:'Crimson Text',serif; color:var(--ink); display:flex; flex-direction:column; align-items:center; padding:50px 24px 80px; font-size:18px; }
.back { position:fixed; top:20px; left:20px; }
.back a { color:var(--dim); text-decoration:none; font-size:1rem; font-family:'Cinzel',serif; }
.back a:hover { color:var(--gold); }
h1 { font-family:'Cinzel',serif; font-size:1rem; letter-spacing:0.3em; color:var(--gold); text-transform:uppercase; margin-bottom:8px; margin-top:14px; }
.subtitle { color:var(--dim); font-size:0.95rem; margin-bottom:28px; text-align:center; }
.verse-coloured { max-width:860px; width:100%; font-size:clamp(1.2rem,2.5vw,1.8rem); font-family:"GentiumAlt","Gentium Plus","Gentium","Palatino Linotype","Palatino",serif; font-style:italic; line-height:2.4; text-align:center; margin-bottom:12px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:24px 28px; box-shadow:0 2px 8px var(--shadow); }
.chunk { display:inline; cursor:pointer; border-radius:3px; padding:3px 5px; transition:all 0.15s; border-bottom:3px solid transparent; }
.chunk:hover { filter:brightness(0.85); border-bottom-color:currentColor; }
.chunk.active { border-bottom-color:currentColor; filter:brightness(0.75); }
.c0{color:var(--c0)} .c1{color:var(--c1)} .c2{color:var(--c2)} .c3{color:var(--c3)} .c4{color:var(--c4)} .c5{color:var(--c5)} .c6{color:var(--c6)}
.legend { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; max-width:780px; }
.legend-item { font-size:0.85rem; display:flex; align-items:center; gap:6px; }
.legend-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.detail-panel { max-width:740px; width:100%; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:30px 34px; margin-bottom:30px; min-height:200px; box-shadow:0 2px 8px var(--shadow); }
.panel-greek { font-size:1.7rem; font-family:"GentiumAlt","Gentium Plus","Gentium","Palatino Linotype","Palatino",serif; font-style:italic; margin-bottom:6px; }
.panel-trans { font-size:1.15rem; margin-bottom:14px; font-style:italic; color:var(--gold); }
.panel-role { font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--dim); font-family:'Cinzel',serif; margin-bottom:14px; }
.panel-desc { font-size:1rem; color:var(--ink); line-height:1.75; }
.panel-structure { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); font-size:0.92rem; color:var(--dim); font-style:italic; line-height:1.6; }
.placeholder { text-align:center; color:var(--dim); font-style:italic; padding:50px 0; font-size:1rem; }
.clause-map { max-width:860px; width:100%; margin-bottom:40px; }
.clause-map h2 { font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:0.2em; color:var(--dim); text-transform:uppercase; margin-bottom:14px; text-align:center; }
.clause-row { display:flex; align-items:stretch; gap:0; margin-bottom:5px; border-radius:4px; overflow:hidden; border:1px solid rgba(0,0,0,0.06); }
.clause-label { font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-family:'Cinzel',serif; padding:9px 14px; display:flex; align-items:center; min-width:160px; flex-shrink:0; font-weight:700; }
.clause-text { padding:9px 18px; font-family:"GentiumAlt","Gentium Plus","Gentium","Palatino Linotype","Palatino",serif; font-style:italic; font-size:1rem; display:flex; align-items:center; flex:1; line-height:1.5; color:var(--ink); }
.row-imp  { background:rgba(122,58,90,0.08); }  .row-imp  .clause-label { color:#7a3a5a; }
.row-neg  { background:rgba(138,26,14,0.08); }  .row-neg  .clause-label { color:#8a1a0e; }
.row-subj { background:rgba(106,26,122,0.08); } .row-subj .clause-label { color:#6a1a7a; }
.row-loc  { background:rgba(26,106,74,0.08); }  .row-loc  .clause-label { color:#1a6a4a; }
.row-v2   { background:rgba(26,79,138,0.08); }  .row-v2   .clause-label { color:#1a4f8a; }
.row-time { background:rgba(122,74,0,0.08); }   .row-time .clause-label { color:#7a4a00; }
.row-purp { background:rgba(58,96,0,0.08); }    .row-purp .clause-label { color:#3a6000; }
.row-adv  { background:rgba(26,79,138,0.08); }  .row-adv  .clause-label { color:#1a4f8a; }
.row-obj  { background:rgba(58,96,0,0.08); }    .row-obj  .clause-label { color:#3a6000; }
.row-verb { background:rgba(26,74,114,0.08); }  .row-verb .clause-label { color:#1a4a72; }
.row-part { background:rgba(122,74,0,0.08); }   .row-part .clause-label { color:#7a4a00; }
.row-exc  { background:rgba(26,106,74,0.08); }  .row-exc  .clause-label { color:#1a6a4a; }
.row-pron { background:rgba(138,26,14,0.08); }  .row-pron .clause-label { color:#8a1a0e; }

@media (max-width: 640px) {
  .clause-label { min-width: 110px; font-size: 0.7rem; }
}