/*
  Donkeystudio-Journal-Theme, Rams/Braun-Datenblatt-Richtung - identische
  Optik/Farbpalette wie donkeystudio.de selbst (siehe landing/style.css),
  hier auf Ghost-Blog-Bedarf (Post-Liste, Post-Inhalt) zugeschnitten statt
  1:1 kopiert.
*/
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700.woff2') format('woff2');
}

:root{
  --case:#3A332C;
  --dial:#EDE7DA;
  --needle:#C1502E;
  --scale-line:#B9AF9C;
  --text-dim:#8C8371;
  --hairline:rgba(58,51,44,0.16);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--case);
  color:var(--case);
  font-family:'Space Grotesk', sans-serif;
  line-height:1.55;
}

a{
  color:var(--needle);
  text-decoration:underline;
  text-decoration-color:rgba(193,80,46,0.4);
}
a:hover{ text-decoration-color:var(--needle); }

body::before, body::after{
  content:"";
  position:fixed;
  top:0; bottom:0;
  width:22px;
  background-image: repeating-linear-gradient(180deg, var(--scale-line) 0 1px, transparent 1px 22px);
  opacity:0.22;
  pointer-events:none;
  z-index:0;
}
body::before{ left:0; }
body::after{ right:0; }
@media (max-width: 720px){
  body::before, body::after{ display:none; }
}

.page{
  position:relative;
  z-index:1;
  padding: clamp(24px, 5vw, 56px) 22px;
  display:flex;
  justify-content:center;
}

.sheet{
  position:relative;
  width:100%;
  max-width:860px;
  background:var(--dial);
  color:var(--case);
  border-radius:4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.35), 0 24px 60px rgba(0,0,0,0.35);
  padding: clamp(28px, 5vw, 56px);
}

.sheet::before, .sheet::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  pointer-events:none;
}
.sheet::before{ top:-1px; left:-1px; border-top:2px solid var(--needle); border-left:2px solid var(--needle); }
.sheet::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--needle); border-right:2px solid var(--needle); }

.tick-rule{
  height:9px;
  margin: 40px 0;
  background-image: repeating-linear-gradient(90deg, var(--scale-line) 0 1px, transparent 1px 18px);
  opacity:0.55;
}

/* ---------- Kopf / Typenschild ---------- */
.nameplate{
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}

.logo-badge{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--case);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
  background:#000;
  flex-shrink:0;
}

.nameplate-text{ flex:1 1 240px; min-width:0; }

.nameplate-text h1{
  margin:0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight:700;
  letter-spacing:0.01em;
}

.nameplate-text .claim{
  margin:6px 0 0;
  color:var(--text-dim);
  font-size:0.98rem;
}

.nameplate-spec{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  font-family:'Space Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.06em;
  color:var(--text-dim);
  text-transform:uppercase;
  padding-top:6px;
}

/* ---------- Abschnitte ---------- */
.datasheet-section h2{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 18px;
  font-size:1rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.09em;
}

.sec-no{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--dial);
  background:var(--needle);
  padding:3px 8px;
  border-radius:2px;
}

.datasheet-section p{ max-width:60ch; font-size:0.98rem; color:var(--case); }

.datasheet-section p.footnote{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  color:var(--text-dim);
  letter-spacing:0.01em;
  max-width:70ch;
  margin-top:22px;
}

/* ---------- Post-Liste (Journal-Uebersicht) ---------- */
.post-list{
  margin: 22px 0 0;
  display:flex;
  flex-direction:column;
}
.post-list .row{
  display:grid;
  grid-template-columns: minmax(100px, 150px) 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--hairline);
}
.post-list .row:first-child{ border-top:1px solid var(--hairline); }
.post-list dt{
  margin:0;
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:var(--text-dim);
  padding-top:2px;
}
.post-list dd{ margin:0; font-size:0.98rem; }
.post-list dd a{ color:var(--case); text-decoration:none; }
.post-list dd a:hover{ color:var(--needle); }
@media (max-width:520px){
  .post-list .row{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- Post-Inhalt (einzelner Beitrag) ---------- */
.post-content h2{ text-transform:none; letter-spacing:normal; font-size:1.5rem; margin-bottom:22px; }
.post-content h3, .post-content h4{
  margin: 28px 0 8px;
  font-weight:600;
  color:var(--case);
}
.post-content p, .post-content li{ max-width:68ch; font-size:1rem; }
.post-content ul, .post-content ol{ max-width:68ch; padding-left:1.2em; }
.post-content img{ max-width:100%; height:auto; border-radius:3px; margin:16px 0; }
/* Koenig-Editor-Bildbreiten: "wide" ist bereits der Default (Bilder sind
   nicht wie Fliesstext auf 68ch begrenzt, sondern fuellen die Sheet-Breite);
   "full" bricht zusaetzlich bis zum Viewport-Rand aus dem Sheet aus. */
.post-content .kg-width-wide{ width:100%; max-width:100%; }
.post-content .kg-width-full{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}
.post-content .kg-width-full img{ border-radius:0; margin:16px 0; }
.post-content figcaption{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  color:var(--text-dim);
  margin-top:-8px;
}
.post-content blockquote{
  margin: 20px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--needle);
  color: var(--text-dim);
  font-style: italic;
}
.post-content code{
  font-family:'Space Mono', monospace;
  font-size:0.9em;
  background:rgba(58,51,44,0.08);
  padding:2px 5px;
  border-radius:2px;
}
.post-content pre{
  background:rgba(58,51,44,0.08);
  padding:14px 16px;
  border-radius:3px;
  overflow-x:auto;
}
.post-content pre code{ background:none; padding:0; }
.post-content hr{ border:none; border-top:1px dashed var(--hairline); margin:32px 0; }

/* ---------- Fusszeile / Colophon ---------- */
.colophon{
  margin-top:44px;
  padding-top:16px;
  border-top:1px dashed var(--hairline);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  font-family:'Space Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.colophon a{ color:var(--text-dim); text-decoration:underline; text-decoration-color:var(--hairline); }
.colophon .rams-quote{
  flex:1 1 100%;
  text-transform:none;
  letter-spacing:0.01em;
  margin-top:10px;
  font-style:italic;
  color:var(--text-dim);
}