/* jdw-text.css — типографіка, шапка та підвал довідкових сторінок Juliedw2 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --jd-wine: #7a3a4e;
  --jd-rose: #a8546b;
  --jd-graphite: #2c2c31;
  --jd-canvas: #faf6f7;
  --jd-card: #ffffff;
  --jd-text: #34313a;
  --jd-quiet: #625b67;
  --jd-hair: #ecdfe3;
  --jd-sans: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --jd-disp: "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --jd-r1: 4px;
  --jd-r2: 12px;
  --jd-r3: 20px;
  --jd-sh1: 0 4px 14px rgba(44, 44, 49, 0.07);
  --jd-sh2: 0 12px 30px rgba(44, 44, 49, 0.1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--jd-sans);
  background: var(--jd-canvas);
  color: var(--jd-text);
  font-size: 16px;
  line-height: 1.72;
}

a {
  color: var(--jd-wine);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--jd-rose);
}

.jd-w2-top {
  top: 0;
  z-index: 20;
  padding: 16px 20px;
  background: rgba(250, 246, 247, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--jd-hair);
}
.jd-w2-top-in {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.jd-w2-top-sign {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--jd-graphite);
  position: relative;
  flex: 0 0 auto;
}
.jd-w2-top-sign::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--jd-rose);
}
.jd-w2-top-name {
  font-family: var(--jd-disp);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--jd-graphite);
  text-transform: uppercase;
}

/* Велика цитата-інтро */
.jd-w2-open {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 24px 10px;
}
.jd-w2-open-kind {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--jd-rose);
  margin-bottom: 16px;
}
.jd-w2-open-quote {
  position: relative;
  font-family: var(--jd-disp);
  font-size: clamp(24px, 3.9vw, 40px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--jd-graphite);
  padding-left: 28px;
  border-left: 6px solid var(--jd-wine);
}
.jd-w2-open-quote em {
  font-style: normal;
  color: var(--jd-wine);
  font-weight: 800;
}
.jd-w2-open-by {
  margin: 20px 0 0 34px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--jd-quiet);
  max-width: 640px;
}
.jd-w2-open-when {
  display: inline-block;
  margin: 22px 0 0 34px;
  padding: 5px 14px;
  border: 1px solid var(--jd-graphite);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jd-graphite);
}

.jd-w2-foot {
  background: var(--jd-graphite);
  color: #b6aeb6;
  padding: 26px 20px 22px;
  text-align: center;
  margin-top: 50px;
}
.jd-w2-foot-in {
  max-width: 880px;
  margin: 0 auto;
}
.jd-w2-foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-bottom: 14px;
}
.jd-w2-foot-nav a {
  color: #d8c3cb;
  font-size: 11.5px;
}
.jd-w2-foot-nav a:hover {
  color: #fff;
}
.jd-w2-foot-note {
  font-size: 11px;
  line-height: 1.75;
  color: #928a94;
  max-width: 780px;
  margin: 0 auto 10px;
}
.jd-w2-foot-sign {
  font-size: 11px;
  color: #8b838f;
}

@media (max-width: 720px) {
  .jd-w2-open {
    padding: 44px 18px 6px;
  }
  .jd-w2-open-quote {
    padding-left: 18px;
    border-left-width: 5px;
  }
  .jd-w2-open-by,
  .jd-w2-open-when {
    margin-left: 23px;
  }
}