:root{
    --bg:#04080d; --bg2:#0a1219; --text:#e8edf0; --dim:#9fb0ba;
    --line:#1d2b36; --accent:#bcd6e4;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);
    font:17px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased}
  h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:normal}
  a{color:var(--accent)}
  img{max-width:100%;display:block}

  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
    background:url("bilder/hero.jpg") center 30%/cover no-repeat}
  .hero::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,8,13,.25) 0%,rgba(4,8,13,.05) 40%,rgba(4,8,13,.92) 100%)}
  .hero-inner{position:relative;z-index:1;width:100%;max-width:980px;margin:0 auto;
    padding:0 24px 9svh}
  .kicker{letter-spacing:.35em;text-transform:uppercase;font-size:13px;color:var(--dim)}
  .hero h1{font-size:clamp(64px,14vw,150px);font-style:italic;line-height:1;margin:6px 0 10px;
    text-shadow:0 2px 30px rgba(0,0,0,.6)}
  /* Ordbilden i stället för satt text. Katrines logotyp, aldrig omfärgad. */
  .hero h1.hero-logo{margin:14px 0 18px;line-height:0}
  .hero h1.hero-logo img{width:min(62vw,540px);height:auto;
    filter:drop-shadow(0 2px 18px rgba(0,0,0,.75))}
  .tagline{font-family:Georgia,serif;font-style:italic;font-size:clamp(20px,3.4vw,28px);
    color:var(--text);max-width:560px;text-shadow:0 1px 20px rgba(0,0,0,.8)}
  .hero-meta{margin-top:22px;color:var(--dim);font-size:15.5px}
  .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .btn{display:inline-block;padding:13px 26px;border:1px solid var(--accent);
    color:var(--accent);text-decoration:none;letter-spacing:.08em;font-size:14.5px;
    text-transform:uppercase;transition:background .2s,color .2s}
  .btn:hover{background:var(--accent);color:var(--bg)}
  .btn.solid{background:var(--accent);color:var(--bg)}
  .btn.solid:hover{background:transparent;color:var(--accent)}

  section{padding:84px 24px}
  .wrap{max-width:720px;margin:0 auto}
  .wide{max-width:980px;margin:0 auto}
  h2{font-size:clamp(30px,5vw,42px);font-style:italic;margin-bottom:28px}
  p{margin-bottom:1.2em}
  p:last-child{margin-bottom:0}
  .lead{font-size:19px}
  .divider{border:none;border-top:1px solid var(--line);max-width:980px;margin:0 auto}

  .team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:8px 40px;margin-top:8px}
  .team div{padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px}
  .team span{display:block;color:var(--dim);font-size:13px;letter-spacing:.12em;
    text-transform:uppercase;margin-bottom:2px}

  .card{border:1px solid var(--line);background:var(--bg2);padding:36px;margin-top:8px}
  .card h3{font-size:24px;font-style:italic;margin-bottom:14px}
  .card ul{list-style:none;margin:14px 0 18px}
  .card li{padding:4px 0;color:var(--dim);font-size:15.5px}
  .card li strong{color:var(--text);font-weight:600}

  .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:28px;margin-top:8px}
  .info-grid h3{font-size:14px;letter-spacing:.2em;text-transform:uppercase;
    font-family:"Segoe UI",sans-serif;color:var(--dim);margin-bottom:8px}

  .press-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;margin:20px 0}
  .press-grid a{display:block;border:1px solid var(--line)}
  .press-grid img{aspect-ratio:3/2;object-fit:cover;width:100%}
  .small{font-size:14px;color:var(--dim)}

  footer{padding:60px 24px 48px;border-top:1px solid var(--line);text-align:center;
    color:var(--dim);font-size:14.5px}
  footer p{margin-bottom:10px}
  .foot-logo{font-family:Georgia,serif;font-style:normal;font-size:24px;color:var(--text);letter-spacing:.01em}
  .foot-logo em{font-style:italic}

  .funders{margin:38px auto 34px;max-width:820px}
  .funders-label{letter-spacing:.28em;text-transform:uppercase;font-size:12px;
    color:var(--dim);margin-bottom:20px}
  /* Staplade, en logotyp per rad. Valt framför en vågrät rad eftersom logotyperna är
     byggda så olika att de aldrig ligger optiskt jämnt sida vid sida. */
  .funder-logos{display:flex;flex-direction:column;align-items:center;gap:30px}
  /* Höjderna är optiskt balanserade, inte lika. Malmös märke innehåller stadsvapnet,
     Region Skånes är stående med symbol över text, Kulturrådet är ren ordbild.
     Samma pixelhöjd skulle göra Kulturrådet enormt och Region Skåne oläsligt.
     Ändra inte till samma höjd. */
  .funder-logos img{width:auto;opacity:.94}
  .funder-logos img.malmo{height:52px}
  .funder-logos img.rsk{height:78px}
  .funder-logos img.kur{height:19px}
  @media (max-width:600px){
    .funder-logos{gap:24px}
    .funder-logos img.malmo{height:42px}
    .funder-logos img.rsk{height:62px}
    .funder-logos img.kur{height:16px}
  }
  @media (max-width:600px){
    section{padding:60px 20px}
    .card{padding:26px 20px}
  }
  /* ---- Formulär (samtal.html) ---- */
  .form-wrap{max-width:560px;margin:0 auto}
  .field{margin-bottom:24px}
  .field label{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--dim);margin-bottom:8px}
  .field .hint{text-transform:none;letter-spacing:0;font-size:14px;color:var(--dim);
    margin-top:6px;display:block}
  input[type=text],input[type=email],select,textarea{
    width:100%;padding:13px 14px;background:var(--bg2);color:var(--text);
    border:1px solid var(--line);border-radius:0;font:16px/1.5 "Segoe UI",system-ui,sans-serif}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
  textarea{min-height:96px;resize:vertical}
  .req{color:var(--accent)}
  button.btn{background:var(--accent);color:var(--bg);border:1px solid var(--accent);
    cursor:pointer;font-family:inherit}
  button.btn:hover{background:transparent;color:var(--accent)}
  .hidden{position:absolute;left:-9999px}
  .nav-back{display:inline-block;margin-bottom:26px;font-size:14px;color:var(--dim);
    text-decoration:none;letter-spacing:.05em}
  .nav-back:hover{color:var(--accent)}
  .page-head{padding:70px 24px 0}
  .page-head h1{font-size:clamp(34px,6vw,54px);font-style:italic;margin-bottom:14px}
  .page-head .kicker{margin-bottom:10px}
  .fullbokad{border:1px solid var(--accent);padding:22px;margin-bottom:30px}