:root {
  --bg: #fff9ef;
  --paper: #fffdf8;
  --ink: #2f241d;
  --muted: #6e5f52;
  --accent: #7b3f25;
  --soft: #ead8bf;
  --card: #fff4e1;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-image: 0 8px 25px rgba(0, 0, 0, 0.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(#fffaf2, #f7ead8);
  color: var(--ink);
  line-height: 1.65;
}

img, svg, video, audio { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: min(100% - 28px, 1040px);
  margin-inline: auto;
  padding-block: 22px;
}

.hero {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 28px 0;
}
.logo {
  width: clamp(52px, 10vw, 72px);
  height: clamp(52px, 10vw, 72px);
  border-radius: 18px;
  object-fit: contain;
}
.tag { font-size: 1.18rem; color: var(--muted); }
h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; margin: .1em 0; }
h2 { font-size: clamp(1.55rem, 4vw, 2rem); margin-top: 1.6rem; }

.nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--soft);
  border-bottom: 1px solid var(--soft);
  padding: 12px 0;
  margin-bottom: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 18px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* VIKTIG ÄNDRING 2026-06-05
   Listbilderna beskärs inte längre. Hela bilden visas i kortet.
   Tidigare object-fit: cover kunde kapa topp/botten. */
.card img {
  width: 100%;
  height: clamp(180px, 28vw, 230px);
  object-fit: contain;
  object-position: center center;
  padding: 10px;
  background: var(--card);
}

.card .pad { padding: 16px; }
.card h3 { margin: .2rem 0; font-size: 1.25rem; }
.meta { font-size: .92rem; color: var(--muted); }

.story { width: min(100%, 790px); }
.story img.cover {
  width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto 18px;
  border-radius: clamp(14px, 3vw, 24px);
  border: 1px solid var(--soft);
  box-shadow: var(--shadow-image);
  background: var(--paper);
}

.reader {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 24px;
  padding: clamp(18px, 4vw, 42px);
  font-size: clamp(1.06rem, 2vw, 1.18rem);
}
.reader p { margin: 0 0 1.1em; }
.audio { display: block; width: 100%; margin: 16px 0; }
.ad {
  border: 1px dashed #c8b497;
  background: #fffaf2;
  color: #8a7560;
  text-align: center;
  border-radius: 14px;
  padding: 18px;
  margin: 24px 0;
  font-size: .92rem;
}
.controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.btn {
  border: 1px solid var(--soft);
  border-radius: 999px;
  padding: 10px 14px;
  background: #fffdf8;
  color: var(--accent);
  cursor: pointer;
}
.search {
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--soft);
  font-size: 1rem;
  background: #fffdf8;
}
footer {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--soft);
  color: var(--muted);
}
.memory-board { display: grid; grid-template-columns: repeat(4, minmax(60px, 110px)); gap: 12px; }
.tile { aspect-ratio: 1; background: var(--card); border: 1px solid var(--soft); border-radius: 16px; font-size: 2rem; }
.tile.revealed { background: var(--paper); }

.night { background: #12100f; color: #eadfcd; }
.night .reader,
.night .card,
.night .ad,
.night .btn,
.night .story img.cover { background: #1c1917; color: #eadfcd; border-color: #3d352f; }
.night a,
.night .btn { color: #f0c28b; }
.night .meta,
.night .tag { color: #b8aa98; }

@media (max-width: 640px) {
  .wrap { width: min(100% - 20px, 1040px); padding-block: 14px; }
  .hero { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
  .logo { width: 52px; height: 52px; border-radius: 12px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .card img { height: clamp(210px, 62vw, 320px); padding: 8px; }
  .reader { border-radius: 18px; }
}

/* 2026-06-05: Hård override för startsidans/listans kortbilder.
   Målet är noll beskärning: bilderna får behålla sin naturliga proportion.
   Denna regel ska ligga SIST i filen. */
.grid .card img,
.card picture img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 12px !important;
  background: var(--card) !important;
}
.card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
}


/* Startsida utkast 2026-06-06 */
.nav-link{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:none;line-height:1.65}.nav-link:hover{text-decoration:underline}.night .nav-link{color:#f0c28b}
.home-hero{grid-template-columns:88px 1fr;align-items:center}.home-hero h1{max-width:760px}.eyebrow{margin:0 0 .35rem;color:var(--accent);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}.night .eyebrow{color:#f0c28b}.home-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:24px;align-items:center;background:rgba(255,253,248,.72);border:1px solid var(--soft);border-radius:28px;padding:clamp(18px,4vw,34px);box-shadow:var(--shadow-soft);margin:18px 0 26px}.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick-card{background:var(--paper);border:1px solid var(--soft);border-radius:18px;padding:16px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.05)}.spotlight{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:26px;align-items:center;background:linear-gradient(135deg,#fffdf8,#fff0d7);border:1px solid var(--soft);border-radius:32px;padding:clamp(18px,4vw,34px);margin:24px 0}.spotlight-image img{width:100%;height:auto;max-height:460px;object-fit:contain;border-radius:24px;background:var(--card);box-shadow:var(--shadow-image)}.spotlight h2{margin:.1rem 0 .4rem;font-size:clamp(2rem,5vw,3.5rem)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.section-block{margin:34px 0}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:16px}.section-head h2{margin:.1rem 0}.section-head p{max-width:440px;margin:0;color:var(--muted)}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.feature-card{background:var(--paper);border:1px solid var(--soft);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-soft)}.feature-card img{width:100%;height:230px;object-fit:contain;background:var(--card);padding:12px}.feature-card .pad{padding:16px}.feature-card h3{margin:.2rem 0}.listen-block{background:#fff5e6;border:1px solid var(--soft);border-radius:28px;padding:clamp(18px,4vw,30px)}.listen-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.listen-list a{display:flex;justify-content:space-between;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--soft);border-radius:18px;padding:14px 16px;font-weight:700}.listen-list small{color:var(--muted);font-weight:500}.author-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.author-card{background:var(--paper);border:1px solid var(--soft);border-radius:22px;padding:18px;box-shadow:var(--shadow-soft)}.author-card h3{margin-top:0}.author-card ul{margin:.5rem 0 0;padding-left:1.2rem}.memory-teaser{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;background:var(--paper);border:1px solid var(--soft);border-radius:28px;padding:24px;margin:34px 0;box-shadow:var(--shadow-soft)}.memory-teaser img{width:96px;height:96px;border-radius:24px;object-fit:contain}.compact-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:16px}.compact-card p:not(.meta){display:none}.compact-card img{height:160px!important;object-fit:contain!important;background:var(--card)!important;padding:10px!important}.compact-card .pad{padding:14px}.compact-card h3{font-size:1.05rem}.night .home-intro,.night .spotlight,.night .listen-block,.night .author-card,.night .memory-teaser,.night .quick-card,.night .feature-card,.night .listen-list a{background:#1c1917;color:#eadfcd;border-color:#3d352f}.night .section-head p,.night .listen-list small{color:#b8aa98}.night .spotlight{background:linear-gradient(135deg,#1c1917,#282018)}
@media (max-width:760px){.home-intro,.spotlight,.section-head{display:block}.quick-actions{margin-top:16px}.section-head p{margin-top:6px}.spotlight-image{margin-bottom:16px}.memory-teaser{grid-template-columns:72px 1fr}.memory-teaser img{width:72px;height:72px}.feature-card img{height:auto;max-height:none}.compact-card img{height:auto!important}.nav{gap:12px}}


/* Gemensamma komponenter */
.site-nav { align-items: center; }
.nav-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.nav-link:hover { text-decoration: underline; }
.site-footer { margin-top: 48px; padding: 24px 0; border-top: 1px solid var(--soft); color: var(--muted); }
.site-footer p { margin: 0; }
.night .nav-link { color: #f0c28b; }

/* Bildstorlekar 2026-06-06
   De flesta sagobilderna är 512x512 px och Kejsarens nya kläder är 200x200 px.
   Därför begränsar vi visningsstorleken så att bilderna inte förstoras och blir korniga. */
.card img,
.feature-card img,
.compact-card img {
  width: min(100%, 512px) !important;
  max-width: 512px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: var(--card) !important;
}

/* Större presentationsbilder får inte heller blåsas upp över originalstorleken. */
.story img.cover,
.spotlight-image img {
  width: min(100%, 512px) !important;
  max-width: 512px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Den här bilden är bara 200x200 px i materialet och blir snabbt kornig om den förstoras. */
img[src*="kejsarens-nya-klader"] {
  width: min(100%, 200px) !important;
  max-width: 200px !important;
  height: auto !important;
}


/* Header och konfiguration v2 */
.site-header {
  display: block;
  padding: 20px 0 14px;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
}
.site-brand:hover { text-decoration: none; }
.site-logo {
  width: clamp(46px, 8vw, 64px);
  height: clamp(46px, 8vw, 64px);
  border-radius: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}
.site-title {
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.site-subtitle {
  margin: 8px 0 0;
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--muted);
}
.page-title {
  margin-top: 10px;
  margin-bottom: 18px;
}
.story-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
}
.night .site-brand { color: #eadfcd; }
.night .site-subtitle { color: #b8aa98; }
@media (max-width: 640px) {
  .site-header { padding: 14px 0 10px; }
  .site-brand { gap: 10px; }
  .site-logo { border-radius: 12px; }
}


/* Kvällens saga v1 */
.daily-story {
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  align-items: center;
}
.featured-heading {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.daily-story-text h3 {
  margin: 0 0 .55rem;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.12;
}
.daily-story-text p {
  color: var(--muted);
  font-size: 1.08rem;
  margin: 0;
}
.story-actions .btn {
  min-width: 112px;
  text-align: center;
}
.night .daily-story-text p { color: #b8aa98; }
@media (max-width:760px) {
  .daily-story { display: block; }
  .featured-heading { margin-bottom: 16px; }
  .daily-story-image { margin-bottom: 16px; }
}


/* Enhetlig sagokortmall – 2026-06-08
   Struktur: Titel, bild, resumé och längst ned knapparna Läs/Lyssna. */
.story-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.story-card {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.story-card h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.25;
}
.story-card-image {
  display: block;
  margin: 0 0 14px;
}
.story-card-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center center;
  background: var(--card);
  border-radius: 18px;
  padding: 10px;
  box-sizing: border-box;
}
.story-card p {
  margin: 0 0 14px;
  color: var(--muted);
  flex: 1 1 auto;
}
.story-card-actions {
  margin-top: auto;
  padding-top: 4px;
}
.story-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.night .story-card {
  background: #1c1917;
  color: #eadfcd;
  border-color: #3d352f;
}
.night .story-card p {
  color: #b8aa98;
}
.night .story-card-image img {
  background: #241f1b;
}
@media (max-width: 640px) {
  .story-card-grid {
    grid-template-columns: 1fr;
  }
  .story-card-image img {
    height: auto;
    max-height: 320px;
  }
}


/* Författarsidor och förenklade sagokort – authors-open-1 */
.lead {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.08rem;
}
.author-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 22px 0 34px;
}
.author-overview-card {
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.author-overview-card h2 { margin: 0; }
.author-overview-card p:not(.eyebrow) { margin: 0; color: var(--muted); }
.author-overview-card .btn { margin-top: auto; align-self: flex-start; }
.back-link { margin-top: 24px; }
.night .author-overview-card { background:#1c1917; color:#eadfcd; border-color:#3d352f; }
.night .author-overview-card p:not(.eyebrow), .night .lead { color:#b8aa98; }


/* Fortsätt där du slutade */
.continue-story {
  margin: 18px 0 22px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 999px;
  font-size: 1rem;
}
.continue-story a {
  color: var(--accent);
  font-weight: 650;
}
.night .continue-story {
  background: #1c1917;
  border-color: #3d352f;
}
.night .continue-story a {
  color: #f0c28b;
}

/* Justeringar 2026-06-09: grupperade listor, relaterade sagor och memorylayout */
.story-list-group {
  margin: 1.6rem 0 2.2rem;
}
.story-list-group > h3 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  margin: 0 0 1rem;
}
.more-stories-section {
  margin: 34px 0 10px;
}
.more-stories-section h2 {
  margin-bottom: 16px;
}
.daily-story-image {
  display: block;
}
.daily-story-image:hover {
  text-decoration: none;
}
.memory-page {
  min-height: calc(100vh - 260px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.memory-page .page-title {
  margin-bottom: 4px;
}
.memory-intro {
  margin: 0 0 6px;
  color: var(--muted);
}
.memory-moves {
  min-height: 1.4em;
  margin-bottom: 10px;
}
.memory-board {
  width: min(100%, 468px);
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  gap: clamp(7px, 1.8vw, 12px);
  justify-content: center;
  margin: 0 auto 16px;
}
.memory-board .tile {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}
.memory-board .tile img {
  display: block;
}
@media (max-width: 640px) {
  .memory-page {
    min-height: auto;
  }
  .memory-board {
    width: min(100%, 360px);
  }
}

/* Memory fix 2026-06-09 v2
   Gör 4x4-brädet kvadratiskt, horisontellt centrerat och begränsat av skärmhöjden.
   Målet är att hela memoryt ska synas utan förvrängda radavstånd på laptop/iPad. */
.memory-page {
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding-top: clamp(4px, 1.2vh, 14px) !important;
}
.memory-page .page-title {
  margin: 0 0 2px !important;
  font-size: clamp(1.55rem, 4vw, 2.15rem) !important;
}
.memory-intro {
  margin: 0 0 4px !important;
}
.memory-moves {
  min-height: 1.2em !important;
  margin: 0 0 8px !important;
}
.memory-board {
  --memory-board-size: min(92vw, 520px, calc(100dvh - 250px));
  width: var(--memory-board-size) !important;
  height: var(--memory-board-size) !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  gap: clamp(5px, 1.2vw, 10px) !important;
  margin: 0 auto 12px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
.memory-board .tile {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: clamp(10px, 2vw, 16px) !important;
}
.memory-board .tile img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
@media (max-width: 760px) {
  .memory-board {
    --memory-board-size: min(94vw, calc(100dvh - 225px)) !important;
    gap: 6px !important;
  }
}
@media (max-height: 720px) {
  .memory-page .page-title { font-size: 1.45rem !important; }
  .memory-intro { display: none !important; }
  .memory-board {
    --memory-board-size: min(92vw, calc(100dvh - 205px)) !important;
    gap: 5px !important;
  }
}


/* Admin v2 och författardata */
.author-rich-card{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.author-portrait{width:96px;height:128px;object-fit:cover;border-radius:16px;border:1px solid var(--soft);background:var(--card)}
.author-placeholder{width:96px;height:128px;border-radius:16px;border:1px solid var(--soft);background:var(--card);display:grid;place-items:center;font-size:2.2rem}
.author-detail{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:24px;align-items:start;margin:20px 0 28px}
.author-portrait-large{width:100%;max-width:180px;border-radius:18px;border:1px solid var(--soft);background:var(--card)}
.author-placeholder-large{width:100%;max-width:180px;height:220px;font-size:3rem}
.author-body p:first-child{margin-top:0}
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.admin-tab{border:1px solid var(--soft);background:var(--paper);border-radius:999px;padding:10px 14px;color:var(--accent);cursor:pointer;font:inherit}
.admin-tab.active{background:var(--card);font-weight:700}
.admin-section[hidden]{display:none!important}
@media(max-width:650px){.author-rich-card,.author-detail{grid-template-columns:1fr}.author-portrait,.author-placeholder{width:100%;height:auto;max-height:220px}.author-portrait-large{max-width:220px}}


/* Författarlista – ren layout utan platshållarbild */
.author-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.author-rich-card {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.author-rich-card .eyebrow {
  margin-bottom: 0;
}
.author-rich-card h2 {
  margin: 0;
}
.author-image-link {
  display: block;
  margin-top: 4px;
}
.author-rich-card .author-portrait {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  object-position: center top;
  border-radius: 16px;
  border: 1px solid var(--soft);
  background: var(--card);
}
.author-rich-card .author-summary {
  margin: 0;
  color: var(--muted);
}
.author-rich-card .read-more {
  margin-top: auto;
  font-weight: 700;
}
.author-detail-no-image {
  display: block;
}
.night .author-rich-card .author-summary {
  color: #b8aa98;
}