/*
 * dotdoc.css — identity skin for dotdoc.de (and thermalplug.de).
 * Provides: @font-face, :root palette, html font-size, body font, and ALL
 * font-family / size / weight / color / background rules.
 *
 * Self-hosted fonts (Zoe vendored 2026-06-14 into themes/estate/static/fonts/).
 * No CDN font dependency anywhere in this file. Self-hosted only.
 *
 * Palette (per data/sites.yaml design.skins.dotdoc and plans/007 §1 :root):
 *   --black:  #111111
 *   --dark:   #2C2C2C
 *   --mid:    #666666
 *   --rule:   #E0E0E0
 *   --light:  #F6F6F6
 *   --white:  #FFFFFF
 *   --accent: #1A1A2E
 *
 * Author: Leo (frontend) — 2026-06-14
 */

/* ── @font-face — self-hosted, NO CDN ───────────────────────────────────────── */

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Palette ────────────────────────────────────────────────────────────────── */
:root {
  --black:   #111111;
  --dark:    #2C2C2C;
  --mid:     #666666;
  --rule:    #E0E0E0;
  --light:   #F6F6F6;
  --white:   #FFFFFF;
  --accent:  #1A1A2E;
}

/* ── Base typography ─────────────────────────────────────────────────────────── */
html {
  font-size: 17px;
}

body {
  background: var(--white);
  color: var(--dark);
  font-family: 'Playfair Display', serif;
}

/* ── SITE HEADER typography ──────────────────────────────────────────────────── */
.site-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
}

.site-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--mid);
  text-transform: uppercase;
}

/* ── SITE NAV typography ─────────────────────────────────────────────────────── */
.site-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.15s;
}

.site-nav a:hover {
  color: var(--black);
}

.site-nav a[aria-current="page"] {
  color: var(--black);
}

/* ── HERO typography ─────────────────────────────────────────────────────────── */
.hero-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.4rem;
}

.hero-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--black);
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

.hero-statement {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.7;
}

.hero-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--mid);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
}

.hero-meta strong {
  font-weight: 600;
  color: var(--black);
}

/* ── WORK GRID typography ────────────────────────────────────────────────────── */
.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.8rem;
}

.work-item-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.7rem;
}

.work-item-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

.work-item-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.65;
}

.work-item-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--black);
  margin-top: 1.2rem;
  letter-spacing: 0.06em;
}

/* Dark (SCY:MO / TP) work items */
.work-item-dark {
  background: var(--accent);
}

.work-item-dark:hover {
  background: #222244;
}

.work-item-dark .work-item-tag {
  color: rgba(255,255,255,0.38);
}

.work-item-dark .work-item-title {
  color: var(--white);
}

.work-item-dark .work-item-desc {
  color: rgba(255,255,255,0.65);
}

.work-item-dark .work-item-arrow {
  color: rgba(255,255,255,0.5);
}

/* Profile work item */
.work-item-profile {
  background: var(--light);
  border-left: 3px solid var(--black);
}

.work-item-profile:hover {
  background: #EBEBEB;
}

/* ── PUBLICATIONS typography ─────────────────────────────────────────────────── */
.pub-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.4rem;
}

.pub-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

.pub-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.65;
}

.pub-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  letter-spacing: 0.06em;
  white-space: nowrap;
  align-self: start;
  margin-top: 0.2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color 0.15s;
}

.pub-link:hover {
  border-color: var(--black);
}

/* ── CONTACT ─────────────────────────────────────────────────────────────────── */
.contact-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}

.contact-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}

.contact-link:hover {
  color: var(--black);
  border-color: var(--black);
}

/* ── ARTICLE HEADER typography ───────────────────────────────────────────────── */
.article-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.2rem;
}

.article-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--black);
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}

.article-deck {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: var(--content-max);
}

.article-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--mid);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}

.article-meta strong {
  font-weight: 600;
  color: var(--black);
}

/* ── LEAD CLAIM typography ───────────────────────────────────────────────────── */
.lead-claim .claim {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  font-weight: 700;
  color: var(--black);
  line-height: 1.5;
  max-width: var(--content-max);
  letter-spacing: -0.01em;
}

.lead-claim .econ {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.75;
  max-width: var(--content-max);
  margin-top: 1.2rem;
  border-left: 3px solid var(--black);
  padding-left: 1.2rem;
}

.lead-claim .econ strong {
  font-weight: 600;
  color: var(--dark);
}

/* ── BIO typography ──────────────────────────────────────────────────────────── */
.bio {
  background: var(--light);
}

.bio p {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.7;
  font-style: italic;
}

.bio a {
  color: var(--dark);
}

/* ── INTRO ORIENTATION typography ────────────────────────────────────────────── */
.intro-orientation p {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.8;
  font-style: italic;
  border-left: 3px solid var(--rule);
  padding-left: 1.2rem;
}

/* ── Q&A typography ──────────────────────────────────────────────────────────── */
.qa-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.7rem;
}

.qa-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 1.1rem;
}

.qa-question {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  color: var(--mid);
  border-left: 2px solid var(--black);
  padding: 0.4rem 1rem;
  margin-bottom: 1.4rem;
  line-height: 1.6;
}

.answer p {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--dark);
  margin-bottom: 1.1rem;
  text-align: justify;
  hyphens: auto;
}

.answer p:last-child {
  margin-bottom: 0;
}

/* ── PULL QUOTE typography ───────────────────────────────────────────────────── */
.pull {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  color: var(--black);
  line-height: 1.55;
}

/* ── SPEC BOX typography ─────────────────────────────────────────────────────── */
.spec-box {
  background: var(--light);
  border-left: 2px solid var(--black);
}

.spec-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.7rem;
}

.spec-box p {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.7;
  margin-bottom: 0.2rem;
}

.spec-box table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.77rem;
  color: var(--dark);
  margin-top: 0.4rem;
}

.spec-box th {
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.spec-box td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
  vertical-align: top;
}

.spec-box tr:last-child td {
  border-bottom: none;
}

.spec-box td:last-child {
  color: var(--mid);
  font-size: 0.72rem;
}

/* ── IMAGE caption typography ────────────────────────────────────────────────── */
.img-caption {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--mid);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  line-height: 1.5;
}

/* ── DARK BREAK typography ───────────────────────────────────────────────────── */
.dark-break {
  background: var(--accent);
}

.dark-break p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: rgba(255,255,255,0.88);
  max-width: var(--content-max);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.dark-break cite {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}

/* ── SIDEBAR typography ──────────────────────────────────────────────────────── */
.sidebar {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mid);
  background: var(--light);
}

.sidebar h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.9rem;
  line-height: 1.25;
}

.sidebar p {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.75;
  margin-bottom: 0.7rem;
}

.sidebar p:last-child {
  margin-bottom: 0;
}

.sidebar .pull-inline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--black);
  border-left: 2px solid var(--black);
  padding-left: 1rem;
  margin-top: 0.4rem;
}

/* ── DECISION FLAG ───────────────────────────────────────────────────────────── */
.decision-flag {
  grid-column: 1 / -1;
  border: 1px dashed #B00;
  background: #FFF6F6;
  padding: 1.2rem 1.5rem;
  margin: 1.2rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #800;
  line-height: 1.7;
}

.decision-flag strong {
  color: #B00;
}

/* ── CLOSING typography ──────────────────────────────────────────────────────── */
.closing {
  background: var(--black);
}

.closing-col-left {
  border-right: 1px solid rgba(255,255,255,0.1);
}

.closing-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: 1.2rem;
}

.closing-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
}

.closing-col p {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.7);
  line-height: 1.85;
  margin-bottom: 1.3rem;
  text-align: justify;
  hyphens: auto;
}

.closing-final {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  font-style: normal;
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* ── I4-TEASER typography ────────────────────────────────────────────────────── */
.i4-teaser {
  border-top: 2px solid var(--black);
}

.i4-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.2rem;
}

.i4-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--black);
  margin-bottom: 1.2rem;
  line-height: 1.1;
}

.i4-text {
  font-family: 'Playfair Display', serif;
  font-size: 0.97rem;
  font-style: italic;
  color: var(--dark);
  line-height: 1.85;
  max-width: var(--content-max);
  text-align: justify;
  hyphens: auto;
}

.i4-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  border: 1px solid var(--rule);
  padding: 0.3rem 0.8rem;
}

/* ── FOOTER typography ───────────────────────────────────────────────────────── */
.footer-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
}

.footer-copy {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: var(--mid);
}

.footer-links {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-links a {
  color: var(--mid);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--black);
}

.footer-links .sep {
  color: var(--rule);
  font-size: 0.8rem;
}

.footer-icons {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.footer-icons a {
  color: var(--mid);
  transition: color 0.15s;
  display: flex;
  align-items: center;
}

.footer-icons a:hover {
  color: var(--black);
}

.footer-icons svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── estate-attrib (compliance footer — dotdoc skin colors) ──────────────────── */
.estate-attrib {
  color: var(--mid);
}

.estate-attrib a {
  color: var(--mid);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.estate-attrib a:hover {
  color: var(--black);
}

.estate-crosslinks__label {
  color: var(--mid);
}

.estate-crosslinks__list a {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
}

.estate-crosslinks__list a:hover {
  color: var(--black);
  text-decoration: underline;
}

/* ── estate-nav (Lane-2 pages — dotdoc skin) ─────────────────────────────────── */
.estate-nav {
  background: var(--light);
  border-bottom-color: var(--rule);
}

.estate-nav__home {
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
}

.estate-nav__home:hover {
  color: var(--accent);
}

.estate-nav__list a {
  color: var(--dark);
  text-decoration: none;
  font-size: 0.9rem;
}

.estate-nav__list a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Impressum typography ────────────────────────────────────────────────────── */
.impressum-page {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--dark);
}

.impressum-page h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--black);
}

.impressum-page h2 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
}

.impressum-page p {
  color: var(--dark);
}

.impressum-todo {
  border: 1px dashed #B00;
  background: #FFF6F6;
  padding: 0.8rem 1.2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #800;
  line-height: 1.6;
}

/* ── Effects grid typography (i2) ────────────────────────────────────────────── */
.effects-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1rem;
}

.effect-item {
  background: var(--white);
}

.effect-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.5rem;
}

.effect-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.65;
}

/* ── SERIES NAV (index into the Thermal Plug interview series) ────────────────── */
.series-nav {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--black);
}

.series-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.1rem;
}

.series-links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}

.series-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--black);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.series-link:hover {
  color: var(--mid);
  padding-left: 0.4rem;
}

/* ── estate-lang (EN/DE switcher — dotdoc skin) ──────────────────────────── */
.estate-lang__list {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
}

.estate-lang__current {
  font-weight: 600;
  color: var(--black);
  cursor: default;
  letter-spacing: 0.04em;
}

.estate-lang__alt {
  font-weight: 400;
  color: var(--mid);
  text-decoration: none;
}

.estate-lang__alt:hover {
  color: var(--black);
  text-decoration: underline;
}

.estate-lang__list li + li::before {
  color: var(--mid);
  opacity: 0.4;
}