:root{
    --lin:#F5EFDF;
    --pergament:#FDF8EB;
    --trakol:#1F211A;
    --sten:#6C6A57;
    --oliv:#66724F;
    --cypress:#22392E;
    --guld:#B99B5E;
    --linje:rgba(31,33,26,.16);
    --display:'Cormorant Garamond',Palatino,Georgia,serif;
    --body:'Newsreader',Georgia,serif;
    --utility:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    --maxw:1120px;
    --textw:660px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    background:var(--lin);
    color:var(--trakol);
    font-family:var(--body);
    font-size:1.1rem;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--cypress);color:var(--lin)}
  a{color:var(--cypress)}
  a:focus-visible,button:focus-visible,summary:focus-visible{
    outline:2px solid var(--oliv);outline-offset:3px;border-radius:2px;
  }
  .eyebrow{
    font-family:var(--utility);
    font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--oliv);display:block;margin-bottom:1rem;
  }
  h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12}
  h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:1.4rem}
  h3{font-size:1.4rem;margin-bottom:.6rem}
  p+p{margin-top:1rem}
  .smal{max-width:var(--textw)}
  .inre{max-width:var(--maxw);margin:0 auto;padding:6rem 1.5rem}
  @media (max-width:760px){.inre{padding:4rem 1.25rem}}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:60;
    background:color-mix(in srgb,var(--lin) 90%,transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--linje);
  }
  .nav{position:relative;
    max-width:var(--maxw);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:.7rem 1.5rem;gap:1rem;
  }
  .marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--trakol)}
  .marke img{width:46px;height:46px;border-radius:50%;box-shadow:0 2px 10px rgba(31,33,26,.14)}
  .marke span{
    font-family:var(--display);font-weight:600;
    font-size:1.15rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.1;
  }
  .navlinks{display:flex;gap:1.4rem;list-style:none;align-items:center}
  .navlinks a{
    font-family:var(--utility);font-size:.78rem;letter-spacing:.08em;
    text-transform:uppercase;text-decoration:none;color:var(--trakol);
    border-bottom:1px solid transparent;padding-bottom:2px;
  }
  .navlinks a:hover{border-bottom-color:var(--oliv)}
  .menytoggle{
    display:none;font-family:var(--utility);font-size:.78rem;
    letter-spacing:.1em;text-transform:uppercase;
    background:none;border:1px solid var(--linje);
    padding:.45rem .8rem;cursor:pointer;color:var(--trakol);
  }
  @media (max-width:900px){
    .menytoggle{display:block}
    .navlinks{
      display:none;position:absolute;left:0;right:0;top:100%;
      background:var(--lin);border-bottom:1px solid var(--linje);
      flex-direction:column;gap:0;align-items:stretch;
    }
    .navlinks.open{display:flex}
    .navlinks li{border-top:1px solid var(--linje)}
    .navlinks a{display:block;padding:1rem 1.5rem;border-bottom:none}
  }

  /* ---------- bildband ---------- */
  .band{position:relative;isolation:isolate}
  .band img.fond{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:-2;
  }
  .band::after{content:"";position:absolute;inset:0;z-index:-1}

  /* ---------- hero ---------- */
  .hero{min-height:88vh;display:flex;align-items:center}
  .hero::after{background:linear-gradient(100deg,rgba(245,239,223,.62) 0%,rgba(245,239,223,.28) 46%,rgba(245,239,223,0) 75%)}
  .plakett{
    background:color-mix(in srgb,var(--pergament) 88%,transparent);
    border:1px solid var(--linje);
    padding:2.6rem 2.6rem 2.4rem;
    max-width:640px;
    box-shadow:0 18px 50px rgba(31,33,26,.14);
  }
  .hero h1{font-size:clamp(2.5rem,5.6vw,3.9rem)}
  .hero .ingress{margin-top:1.3rem;font-size:1.2rem;color:#3E4033}
  .hero .arlig{margin-top:1.5rem;font-size:.98rem;font-style:italic;color:var(--sten)}
  .knappar{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}
  .knapp{
    font-family:var(--utility);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;padding:.9rem 1.5rem;
    border:1px solid var(--cypress);color:var(--cypress);
    background:transparent;transition:background .18s,color .18s;
  }
  .knapp:hover{background:var(--cypress);color:var(--lin)}
  .knapp.fylld{background:var(--cypress);color:var(--lin)}
  .knapp.fylld:hover{background:var(--trakol);border-color:var(--trakol)}
  @media (max-width:640px){.plakett{padding:1.8rem 1.4rem}}

  /* ---------- pelare ---------- */
  .pelare{
    display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--linje);margin-top:2.6rem;
  }
  .pelare>div{padding:2rem 2rem 2rem 0;border-bottom:1px solid var(--linje)}
  .pelare>div+div{border-left:1px solid var(--linje);padding-left:2rem}
  .pelare .eyebrow{margin-bottom:.7rem}
  .pelare p{font-size:1rem}
  @media (max-width:840px){
    .pelare{grid-template-columns:1fr}
    .pelare>div{padding:1.7rem 0}
    .pelare>div+div{border-left:none;padding-left:0}
  }
  .pelarnot{margin-top:2rem;font-style:italic;color:var(--sten);max-width:var(--textw)}

  /* ---------- arbetet (gymbandet) ---------- */
  .arbetet{color:var(--lin)}
  .arbetet::after{background:linear-gradient(180deg,rgba(24,26,20,.66),rgba(24,26,20,.55))}
  .arbetet .eyebrow{color:#CBBE95}
  .arbetet h2{color:var(--lin)}
  .arbetet .smal{color:#EDE8D8}
  .arbetet .fem{
    display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;
    font-family:var(--utility);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  }
  .arbetet .fem span{border:1px solid rgba(245,239,223,.5);padding:.45rem .8rem}

  /* ---------- grundläget ---------- */
  .tvadel{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
  @media (max-width:900px){.tvadel{grid-template-columns:1fr;gap:2rem}}
  .ram img{width:100%;height:auto;display:block;border:1px solid var(--linje);box-shadow:0 14px 40px rgba(31,33,26,.12)}
  .ram figcaption{font-family:var(--utility);font-size:.75rem;color:var(--sten);margin-top:.6rem;letter-spacing:.04em}
  .citat{
    font-family:var(--display);font-style:italic;
    font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.35;
    border-left:2px solid var(--oliv);padding-left:1.2rem;margin:1.8rem 0;
  }
  .stig{list-style:none;margin-top:1.8rem;position:relative}
  .stig li{
    position:relative;padding:0 0 1.5rem 3.4rem;
  }
  .stig li::before{
    content:attr(data-n);
    position:absolute;left:0;top:-2px;
    width:2.3rem;height:2rem;
    background:var(--pergament);
    border:1px solid var(--linje);
    border-radius:48% 52% 55% 45% / 60% 55% 45% 40%;
    display:grid;place-items:center;
    font-family:var(--display);font-size:1.05rem;color:var(--cypress);
    box-shadow:0 3px 8px rgba(31,33,26,.10);
  }
  .stig li:not(:last-child)::after{
    content:"";position:absolute;left:1.12rem;top:2.1rem;bottom:.2rem;
    border-left:2px dotted var(--oliv);opacity:.55;
  }
  .stig strong{font-family:var(--utility);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.15rem}
  .stig li p{font-size:1rem}

  /* ---------- programmet ---------- */
  .fakta{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--linje);border:1px solid var(--linje);margin:2.4rem 0;
  }
  .fakta>div{background:var(--pergament);padding:1.5rem 1.3rem}
  .fakta .tal{font-family:var(--display);font-size:2rem;line-height:1;display:block;margin-bottom:.35rem;color:var(--cypress)}
  .fakta .txt{font-family:var(--utility);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sten)}
  @media (max-width:640px){.fakta{grid-template-columns:1fr}}
  .veckor{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:1.4rem}
  @media (max-width:760px){.veckor{grid-template-columns:1fr}}
  .veckor>div{background:var(--pergament);border:1px solid var(--linje);padding:1.4rem 1.5rem}
  .spar{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.4rem}
  @media (max-width:760px){.spar{grid-template-columns:1fr}}
  .spar>div{background:var(--pergament);border:1px solid var(--linje);border-top:3px solid var(--oliv);padding:1.4rem 1.5rem}
  .spar p{font-size:.98rem;color:#3E4033}
  .spar strong{color:var(--cypress)}
  .veckor h3{font-size:1.15rem}
  .veckor p{font-size:.98rem;color:#3E4033}
  .rytm{list-style:none;max-width:var(--textw);margin-top:1.2rem}
  .rytm li{padding:.75rem 0 .75rem 1.5rem;border-top:1px solid var(--linje);position:relative;font-size:1rem}
  .rytm li::before{content:"";position:absolute;left:0;top:1.25rem;width:7px;height:7px;border-radius:50%;background:var(--oliv)}

  /* ---------- boken ---------- */
  .boken{background:var(--pergament);border-top:1px solid var(--linje);border-bottom:1px solid var(--linje)}
  .bokgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:center}
  @media (max-width:900px){.bokgrid{grid-template-columns:1fr;gap:2.2rem}}
  .omslag{
    background:var(--lin);border:1px solid var(--linje);
    aspect-ratio:1/1.414;max-width:330px;margin:0 auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:2rem 1.6rem;
    box-shadow:0 20px 50px rgba(31,33,26,.16);
  }
  .omslag img{width:120px;height:auto;margin-bottom:1.4rem}
  .omslag .boktitel{font-family:var(--display);font-weight:500;font-size:1.9rem;line-height:1.1}
  .omslag .bokunder{font-family:var(--display);font-style:italic;color:var(--sten);margin-top:.6rem;font-size:.95rem}
  .omslag .bokgrek{font-family:var(--display);letter-spacing:.3em;font-size:.62rem;color:var(--sten);margin-top:1.6rem;text-transform:uppercase}

  /* ---------- för vem ---------- */
  .tvakolumn{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.4rem}
  @media (max-width:820px){.tvakolumn{grid-template-columns:1fr;gap:2rem}}
  .tvakolumn ul{list-style:none}
  .tvakolumn li{padding:.75rem 0;border-top:1px solid var(--linje);font-size:1rem}
  .tvakolumn h3{font-family:var(--utility);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem}
  .tvakolumn .nej h3{color:var(--sten)}

  /* ---------- FAQ ---------- */
  details{border-top:1px solid var(--linje);max-width:780px}
  details:last-of-type{border-bottom:1px solid var(--linje)}
  summary{
    cursor:pointer;list-style:none;
    padding:1.25rem 2.4rem 1.25rem 0;
    font-family:var(--display);font-size:1.28rem;position:relative;
  }
  summary::-webkit-details-marker{display:none}
  summary::after{
    content:"+";position:absolute;right:.2rem;top:1.1rem;
    font-family:var(--display);font-size:1.5rem;color:var(--oliv);
    transition:transform .2s ease;
  }
  details[open] summary::after{transform:rotate(45deg)}
  details .svar{padding:0 0 1.5rem;max-width:660px}
  details .svar p{font-size:1rem}

  /* ---------- kontakt ---------- */
  .kontakt{background:var(--cypress);color:var(--lin)}
  .kontakt .eyebrow{color:#B9C4AC}
  .kontakt h2{color:var(--lin)}
  .kontakt .smal{color:#E7E4D2}
  .kontakt .knapp{border-color:var(--lin);color:var(--lin)}
  .kontakt .knapp:hover{background:var(--lin);color:var(--cypress)}

  /* ---------- footer ---------- */
  footer{background:var(--lin)}
  .fot{
    max-width:var(--maxw);margin:0 auto;padding:3.2rem 1.5rem;
    display:flex;flex-wrap:wrap;gap:2.4rem;align-items:center;justify-content:space-between;
  }
  .fot img{width:150px;height:auto;border-radius:6px}
  .fot small{
    font-family:var(--utility);font-size:.75rem;color:var(--sten);
    max-width:460px;line-height:1.65;display:block;
  }
  .fot .grek{font-family:var(--display);letter-spacing:.34em;font-size:.8rem;color:var(--sten);text-transform:uppercase;display:block;margin-top:.5rem}