/* Typsnitt, självhostade som woff2 (SIL Open Font License 1.1, se OFL-filerna i assets/fonts/).
   Latin-delmängden täcker svenska tecken, tankstreck och typografiska citattecken. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-opsz.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  /* Systemfärger (Pantone Ponder, Color of the Year 2020) */
  --classic-blue: #004581;   /* 19-4052 / PMS 2154 C – primär: eyebrow, etiketter, aktiv länk, knapp, fokus */
  --classic-blue-hover: #123E6B; /* utanför paletten – hover-ton för knapp */
  --provence:     #658DC6;   /* 16-4032 – sekundär: hårlinjen under eyebrow */
  --monument:     #84898C;   /* 17-4405 – neutral bas; för text används --muted */
  --baby-blue:    #B5C7D3;   /* 13-4308 – ljus yta: bylineblocket */
  --stucco:       #A58D7F;   /* 16-1412 – varm accent: understrykning, tankstrecken i avgränsningsblocket */
  --peach-quartz: #F5B895;   /* 13-1125 – reserverad: sparsam highlight */
  --cornhusk:     #F2D6AE;   /* 12-0714 – ljus varm yta: avgränsningsblocket */

  /* Systemneutraler (utanför Pantone-paletten, avsiktligt osynliga) */
  --paper: #FBF8F3;
  --ink: #202428;
  --muted: #5E6467;
  --rule: rgba(32, 36, 40, 0.12);

  --max: 42rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

strong, b { font-weight: 600; }

a { color: var(--classic-blue); text-decoration-color: var(--stucco); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--classic-blue);
  outline-offset: 3px;
  border-radius: 1px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

/* Navigation */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 2rem 0 3rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.nav-word {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav-links a:hover { color: var(--classic-blue); }

.nav-links a.current {
  color: var(--classic-blue);
  border-bottom-color: var(--classic-blue);
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--classic-blue);
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}

.rule {
  border: none;
  border-top: 1px solid var(--provence);
  opacity: 0.45;
  margin: 0 0 2.5rem;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.6rem;
  max-width: 24ch;
}

.sub {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 3rem;
}

.lede {
  font-size: 1.02rem;
  margin: 0 0 2.5rem;
  max-width: 52ch;
}

.lede em {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--stucco);
}

/* Brödtext: omslag för Markdown från Sveltia */
.body-text { max-width: 52ch; margin: 0 0 2.5rem; }
.body-text p,
.body-text ul,
.body-text ol,
.body-text blockquote {
  font-size: 1.02rem;
  margin: 0 0 1.6rem;
}
.body-text ul,
.body-text ol { padding-left: 1.25rem; }
.body-text li { margin-bottom: 0.4rem; }
.body-text h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 3rem 0 1rem;
}
.body-text h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
}
.body-text blockquote {
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--stucco);
  color: var(--muted);
}
.body-text > :last-child { margin-bottom: 0; }

/* Porträtt med bildtext (Om mig) */
.portrait {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: end;
  margin: 0 0 2.5rem;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: color-mix(in srgb, var(--baby-blue) 35%, var(--paper));
}

.portrait figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.portrait-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
}

.portrait-description { color: var(--ink); margin-top: 0.6rem; }

.portrait-credit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}

/* Bylineblocket: en kolumn under 560 px. Bredare: tre poster per rad, färre poster
   fyller raden, och fyra eller fler läggs två per rad. Kolumnerna blir aldrig smalare
   än det längsta ordet, så att långa sammansättningar inte bryts mitt i. */
.byline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 2.5rem 0 4rem;
  background: color-mix(in srgb, var(--baby-blue) 35%, var(--paper));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.byline-item {
  padding: 1.25rem;
  border-top: 1px solid var(--rule);
}

.byline-item:first-child { border-top: none; }

@media (min-width: 561px) {
  .byline { grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
  .byline:has(> .byline-item:only-child) { grid-template-columns: minmax(0, 1fr); }
  .byline:has(> .byline-item:nth-child(2):last-child),
  .byline:has(> .byline-item:nth-child(4)) { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }

  .byline-item {
    padding: 1.5rem 1.25rem;
    border-top: none;
    border-left: 1px solid var(--rule);
  }
  .byline-item:nth-child(3n+1) { border-left: none; }
  .byline-item:nth-child(n+4) { border-top: 1px solid var(--rule); }

  .byline:has(> .byline-item:nth-child(4)) > .byline-item:nth-child(3n+1) { border-left: 1px solid var(--rule); }
  .byline:has(> .byline-item:nth-child(4)) > .byline-item:nth-child(2n+1) { border-left: none; }
  .byline:has(> .byline-item:nth-child(4)) > .byline-item:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

.byline-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--classic-blue);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.6rem;
  line-height: 1.4;
}

.byline-detail { font-size: 0.88rem; color: var(--ink); overflow-wrap: break-word; }
.byline-detail a { color: inherit; }

/* Profillänkar (Hem, Om mig) och hänvisningar */
.profiles,
.see-also {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0 0 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.byline + .profiles { margin-top: -2.5rem; }

/* Sektioner med fråga som rubrik (Coachning) */
.qa-section { margin: 0 0 2.5rem; }
.qa-section .body-text { margin-bottom: 0; }

.not-list {
  margin: 0 0 4rem;
  background: color-mix(in srgb, var(--cornhusk) 40%, var(--paper));
  padding: 1.75rem 1.5rem;
  border-radius: 2px;
}

.not-list h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 1rem;
}

.not-list ul { list-style: none; margin: 0; padding: 0; }

.not-list li {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}

.not-list li:last-child { border-bottom: none; }
.not-list li:first-child { padding-top: 0; }
.not-list li::before { content: "– "; color: var(--stucco); }

/* FAQ-sida: hopfällbara frågor via <details>/<summary>, ingen JS */
.faq-list { margin: 0 0 4rem; }

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item:first-child { border-top: 1px solid var(--rule); }

.faq-item summary {
  font-family: 'Fraunces', serif;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
  padding: 1.15rem 2rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.1rem;
  top: 1.05rem;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--classic-blue);
  font-size: 1rem;
}

.faq-item[open] summary::after { content: "–"; }

.faq-answer {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 52ch;
  padding-bottom: 1.4rem;
}

.faq-answer p { margin: 0 0 1rem; }
.faq-answer > :last-child { margin-bottom: 0; }

/* Textlista: uppsats, debatt och rapportering i filens ordning */
.text-list {
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
  max-width: 52ch;
  border-top: 1px solid var(--rule);
}

.text-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.text-item p { margin: 0; }

.dateline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--classic-blue);
  margin-bottom: 0.4rem;
}

.text-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.35;
}

.text-title a { color: var(--ink); }
.text-title a:hover { color: var(--classic-blue); }

.text-author,
.text-summary {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

/* Länkar till sajtens sidor (404) */
.page-list {
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.page-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }

/* Sektionsrubrik, delad mellan sidor */
.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.8rem;
}

.cta { padding-top: 1rem; }
.cta p { color: var(--muted); margin: 0 0 1.8rem; max-width: 44ch; }

.btn {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--paper);
  background: var(--classic-blue);
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover { background: var(--classic-blue-hover); }
.btn:focus-visible { outline: 2px solid var(--classic-blue); outline-offset: 3px; }

footer {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

footer p { margin: 0; max-width: 60ch; }
footer a { color: inherit; }

@media (max-width: 560px) {
  .nav { padding: 1.5rem 0 2rem; }
  .nav-links { gap: 0.4rem 1rem; }
  .portrait { grid-template-columns: minmax(0, 1fr); }
  .portrait img { max-width: 70%; }
}

@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fadeUp 0.7s ease both; }
  .fade-in.d1 { animation-delay: 0.08s; }
  .fade-in.d2 { animation-delay: 0.16s; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}