:root{
    --bg-color: rgb(255, 247, 235);
    --bg-color-deep: #05060c;
    --text-color: rgb(55, 53, 62);
    --text-color-dim: rgb(113, 90, 90);
    --accent-color: rgb(204, 58, 99);
    --nebula: #8577b3;
    --line: rgba(242,239,230,0.14);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg-color);
    color:var(--text-color);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }

  ::selection{ background:var(--accent-color); color:var(--bg-color-deep); }

  .wrap{
    max-width:920px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- Nav ---------- */
  nav{
    position:sticky; top:0; z-index:10;
    background:rgba(11,14,26,0.86);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;
  }
  .brand{
    font-family:'Bitcount', monospace;
    font-size:0.82rem;
    letter-spacing:0.08em;
    color:var(--bg-color);
  }
  nav ul{
    list-style:none;
    display:flex;
    gap:28px;
    font-size:0.88rem;
  }
  nav a{ text-decoration:none; color:var(--bg-color); transition:color .2s; }
  nav a:hover, nav a:focus-visible{ color:var(--bg-color-deep); }

  @media (max-width:640px){
    nav ul{ display:none; }
  }

  /* ---------- Hero ---------- */
  header.hero{
    padding:96px 0 72px;
    position:relative;
  }
  .eyebrow{
    font-family:'Google Sans Flex', monospace;
    font-size:0.78rem;
    color:var(--accent-color);
    letter-spacing:0.14em;
    text-transform:uppercase;
    margin-bottom:22px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px; border-radius:50%;
    background:var(--accent-color);
    box-shadow:0 0 10px 2px rgba(232,163,61,0.6);
  }
  h1{
    font-family: 'Bitcount', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    line-height: 1.05;
    max-width: 14ch;
    letter-spacing: 0em;
  }
  h1 em{
    font-style:italic;
    font-weight:300;
    color:var(--accent-color);
  }
  .hero-sub{
    margin-top:26px;
    max-width:52ch;
    font-size:1.08rem;
    color:var(--text-color-dim);
  }
  .hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    margin-top:44px;
    font-family:'Google Sans Flex', monospace;
    font-size:0.82rem;
  }
  .hero-meta div span{
    display:block;
    color:var(--text-color-dim);
    font-size:0.72rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-bottom:4px;
  }

  /* ---------- Biblio ----------------- */
  p { 
    margin-bottom: 1rem;
  }
  .biblio li {
    list-style-type: none;
    margin-bottom: 1rem;
  }
  .title {
    font-style: italic;
  }

  .greek { font-family: 'Google sans'; }

  /* ---------- Section shell ---------- */
  section{ 
    padding:34px 0; 
    border-top:1px solid var(--line); 
  }
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:36px;
    gap:20px;
  }
  h2{
    font-family:'Bitcount', serif;
    font-weight:350;
    font-size:1.9rem;
  }

  footer{
    padding:48px 0 64px;
    border-top:1px solid var(--line);
    font-family:'Google Sans Flex', monospace;
    font-size:0.78rem;
    color:var(--text-color-dim);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .grade-fill{ transition:none; }
  }