@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Karla:wght@400;500;600;700&display=swap');

:root{
  --ink:#1c2530;
  --paper:#f7f2e7;
  --paper-dim:#efe7d6;
  --aegean:#0b4f6c;
  --aegean-deep:#083a51;
  --olive:#5c6b32;
  --ochre:#b8862c;
  --line:#d8cdb2;
  --white:#fffdf8;
  --radius:10px;
  --maxw:1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Karla', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
}

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:700;
  color:var(--aegean-deep);
  margin:0 0 .4em;
}

a{ color:var(--aegean); }

/* ---------- Greek key (meander) motif ---------- */
.meander{
  height:14px;
  width:100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 14 V0 H14 V8 H28 V0 H42 V8 H56 V14' fill='none' stroke='%230b4f6c' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:56px 14px;
  opacity:.85;
}
.meander.gold{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 14 V0 H14 V8 H28 V0 H42 V8 H56 V14' fill='none' stroke='%23b8862c' stroke-width='2.5'/%3E%3C/svg%3E");
}

/* ---------- Layout shells ---------- */
.site-header{
  background:var(--aegean-deep);
  color:var(--white);
  padding:0;
}
.site-header .inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:26px 28px 20px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand .key{
  width:34px; height:34px;
  flex:none;
}
.brand h1{
  color:var(--white);
  font-size:1.5rem;
  margin:0;
  letter-spacing:.3px;
}
.brand .sub{
  display:block;
  font-family:'Karla',sans-serif;
  font-weight:400;
  font-size:.78rem;
  color:#cfe0e8;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:2px;
}
nav.tabs{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
nav.tabs a{
  color:#dce7ec;
  text-decoration:none;
  font-size:.92rem;
  font-weight:600;
  padding:8px 14px;
  border-radius:7px 7px 0 0;
  background:rgba(255,255,255,.05);
}
nav.tabs a.active{
  background:var(--paper);
  color:var(--aegean-deep);
}
nav.tabs a:hover:not(.active){ background:rgba(255,255,255,.14); }

main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:34px 28px 80px;
}

.lede{
  font-size:1.06rem;
  color:#4b5563;
  max-width:66ch;
}

/* ---------- Cards ---------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:20px;
}
.card h3{ margin-top:0; }

.grid{
  display:grid;
  gap:18px;
}
.grid.cols-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* ---------- Lesson chips / filters ---------- */
.chiprow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 22px;
}
.chip{
  border:1px solid var(--line);
  background:var(--white);
  color:var(--aegean-deep);
  font-family:'Karla',sans-serif;
  font-weight:600;
  font-size:.85rem;
  padding:6px 13px;
  border-radius:999px;
  cursor:pointer;
}
.chip.active{
  background:var(--aegean);
  border-color:var(--aegean);
  color:var(--white);
}
.chip:hover:not(.active){ background:var(--paper-dim); }

/* ---------- Vocab table ---------- */
table.vocab{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
table.vocab th{
  text-align:left;
  background:var(--aegean-deep);
  color:var(--white);
  font-family:'Karla',sans-serif;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:10px 14px;
}
table.vocab td{
  padding:10px 14px;
  border-top:1px solid var(--paper-dim);
  vertical-align:top;
}
table.vocab tr:nth-child(even) td{ background:#fbf8f0; }
.gr-word{ font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; color:var(--aegean-deep); }
.tag{
  display:inline-block;
  font-size:.7rem;
  padding:2px 8px;
  border-radius:999px;
  background:var(--paper-dim);
  color:#6b5a2c;
  font-weight:700;
  letter-spacing:.03em;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--aegean);
  color:var(--white) !important;
  text-decoration:none;
  padding:10px 20px;
  border-radius:8px;
  font-weight:700;
  font-size:.92rem;
  border:none;
  cursor:pointer;
}
.btn:hover{ background:var(--aegean-deep); }
.btn.ghost{
  background:transparent;
  color:var(--aegean) !important;
  border:1.5px solid var(--aegean);
}
.btn.gold{ background:var(--ochre); }
.btn.gold:hover{ background:#94691c; }

/* ---------- Accordion (grammar) ---------- */
details.lesson{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:14px;
  padding:4px 0;
}
details.lesson > summary{
  cursor:pointer;
  list-style:none;
  padding:16px 22px;
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:1.15rem;
  color:var(--aegean-deep);
  display:flex;
  align-items:center;
  gap:10px;
}
details.lesson > summary::-webkit-details-marker{ display:none; }
details.lesson > summary::before{
  content:"❯";
  color:var(--ochre);
  transition:transform .15s ease;
  font-size:.85em;
}
details.lesson[open] > summary::before{ transform:rotate(90deg); }
.lesson-body{ padding:0 22px 20px; }
.lesson-body h4{ margin-top:18px; font-size:1rem; }
.lesson-body ul{ padding-left:20px; }
.note{
  background:var(--paper-dim);
  border-left:3px solid var(--ochre);
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  font-size:.93rem;
  margin:10px 0;
}

/* ---------- Study plan ---------- */
.week{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:16px;
  overflow:hidden;
}
.week-head{
  background:var(--aegean-deep);
  color:var(--white);
  padding:12px 20px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}
.week-head h3{ color:var(--white); margin:0; font-size:1.1rem;}
.week-head .dates{ font-size:.8rem; color:#cfe0e8; }
.days{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;
}
.day{
  padding:14px 16px;
  border-top:1px solid var(--paper-dim);
  border-left:1px solid var(--paper-dim);
}
.day .dname{
  font-weight:700;
  color:var(--aegean-deep);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.day .dtask{ font-size:.88rem; color:#3a4552; }
.today-flag{
  background:var(--ochre);
  color:var(--white);
  font-size:.65rem;
  font-weight:700;
  padding:1px 7px;
  border-radius:999px;
  margin-left:6px;
  letter-spacing:.03em;
}

/* ---------- Flashcards ---------- */
.flash-stage{
  max-width:460px;
  margin:0 auto;
  text-align:center;
}
.flashcard{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:50px 30px;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 0 var(--line);
  user-select:none;
}
.flashcard .face{ font-family:'Fraunces',serif; font-size:1.7rem; color:var(--aegean-deep); }
.flashcard .sub{ display:block; font-family:'Karla',sans-serif; font-size:.85rem; color:#8a7a4a; margin-top:8px; }
.flash-controls{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.flash-progress{ font-size:.85rem; color:#6b7280; margin-top:10px; }

/* quiz */
.quiz-q{ font-family:'Fraunces',serif; font-size:1.25rem; margin-bottom:16px; color:var(--aegean-deep); }
.quiz-opts{ display:grid; gap:10px; }
.quiz-opt{
  text-align:left;
  padding:12px 16px;
  border:1.5px solid var(--line);
  background:var(--white);
  border-radius:8px;
  cursor:pointer;
  font-size:.98rem;
  font-family:'Karla',sans-serif;
}
.quiz-opt:hover{ border-color:var(--aegean); }
.quiz-opt.correct{ background:#e5f1e0; border-color:var(--olive); }
.quiz-opt.wrong{ background:#f7e3e0; border-color:#b04a3a; }
.quiz-score{ font-weight:700; color:var(--aegean-deep); }

footer{
  text-align:center;
  padding:30px;
  font-size:.8rem;
  color:#8a7a4a;
}

@media (max-width:600px){
  .site-header .inner{ padding:20px 18px 14px; }
  main{ padding:24px 18px 60px; }
}