/* jennymaxwell.com — small custom layer on top of Pico.css (classless) */

:root{
  /* The palette below is a light, paper-style design. Declare it as light-only so
     browsers in dark mode do not mix Pico's dark card/background colours with our
     dark ink colour (which made text unreadable). */
  color-scheme:light;
  --ink:#201c17;
  --paper:#ffffff;
  --paper-soft:#faf5ec;
  --quote-bg:#f2e6d3;
  --rule:#e5dcc7;
  --muted:#6c6255;
  --accent:#a8431f;
  --accent-dark:#7e3014;
  --accent-soft:#f6e3d6;
  --maxw:1180px;
}

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  font-size:17px;
  margin:0;
}

h1,h2,h3,.pull{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  color:var(--ink);
}

/* ---------- top identity ribbon ---------- */
.ribbon{
  background:#151312;
  color:#fff;
  text-align:center;
  padding:.55rem 1rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.ribbon span{ color:#c7bfae; font-weight:400; letter-spacing:.04em; text-transform:none; margin-left:.5em; }

/* ---------- shell ---------- */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 16px;
}

article{ max-width:100%; }

.lead{ padding-top:1.75rem; }
.lead h1{
  font-size:clamp(1.75rem,5.4vw,2.9rem);
  line-height:1.12;
  font-weight:700;
  margin:0 0 .6rem;
}
.dek{
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  color:var(--accent-dark);
  font-style:italic;
  margin:0 0 1rem;
  line-height:1.4;
}
.byline{
  color:var(--muted);
  font-size:.92rem;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:.6rem 0;
  margin:0 0 1.5rem;
}
.byline strong{ color:var(--ink); }

blockquote.pull{
  background:var(--quote-bg);
  border:none;
  border-left:5px solid var(--accent);
  margin:0 0 1.75rem;
  padding:1.1rem 1.3rem;
  font-size:clamp(1.05rem,2.3vw,1.25rem);
  font-style:italic;
  line-height:1.5;
  border-radius:4px;
}

figure.media{
  margin:0 0 1.75rem;
}
figure.media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}
figure.media figcaption{
  color:var(--muted);
  font-size:.88rem;
  padding-top:.5rem;
  line-height:1.45;
}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:#111;
}
.video-frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

article section{ margin-bottom:2.1rem; }
article h2{
  font-size:clamp(1.35rem,3.4vw,1.85rem);
  line-height:1.2;
  margin:0 0 .9rem;
}
article h3{
  font-size:clamp(1.1rem,2.6vw,1.35rem);
  margin:1.4rem 0 .6rem;
}
article p{ margin:0 0 1rem; }
article ul, article ol{ padding-left:1.3rem; margin:0 0 1rem; }
article li{ margin-bottom:.5rem; }
article li::marker{ color:var(--accent); font-weight:700; }

section.limits{
  background:var(--paper-soft);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:1.4rem 1.5rem 1.1rem;
}
section.limits h2{ margin-top:0; }

/* ---------- CTA ---------- */
.cta-block{
  background:var(--paper-soft);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:1.3rem;
  text-align:center;
  margin:1.5rem 0 2rem;
}
.disclosure-line{
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 .9rem;
  line-height:1.5;
}
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff !important;
  font-weight:700;
  font-size:1rem;
  padding:.95rem 1.9rem;
  border-radius:7px;
  text-decoration:none;
  letter-spacing:.01em;
  border:none;
  min-height:44px;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.btn:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.btn:focus-visible{ outline:3px solid var(--accent-dark); outline-offset:3px; }
.btn:active{ transform:translateY(0); }

/* ---------- two-column layout ---------- */
.layout{ display:block; }
.layout aside.rail{ margin-top:0; }
.card{
  background:var(--paper-soft);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:1.4rem 1.5rem;
  margin-bottom:2rem;
}
.card h2{ font-size:1.2rem; margin:0 0 .8rem; }
.card ul{ padding-left:1.1rem; margin:0; }
.card li{ margin-bottom:.6rem; font-size:.95rem; }
.card p.fine{ font-size:.78rem; color:var(--muted); margin:.8rem 0 0; }

@media (min-width:1024px){
  .layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:3rem;
    align-items:start;
  }
  .layout aside.rail{
    position:sticky;
    top:1.5rem;
  }
}

/* ---------- sticky CTA bar ---------- */
.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  background:#fff;
  border-top:1px solid var(--rule);
  padding:.6rem 1rem;
  display:flex;
  justify-content:center;
  transform:translateY(110%);
  transition:transform .25s ease;
  z-index:60;
  box-shadow:0 -4px 14px rgba(0,0,0,.08);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; max-width:420px; text-align:center; }
body.has-sticky-cta{ padding-bottom:78px; }

/* ---------- page close ---------- */
aside.notice#disclosure{
  max-width:var(--maxw);
  margin:2.5rem auto 0;
  padding:1.1rem 16px;
}
aside.notice#disclosure > p{
  background:var(--paper-soft);
  border-left:4px solid var(--accent);
  border-radius:6px;
  padding:1rem 1.2rem;
  font-size:.95rem;
  line-height:1.55;
  margin:0;
}
aside.notice#disclosure a{ color:var(--accent-dark); font-weight:600; }

footer.foot{
  background:#151312;
  color:#d8d2c4;
  margin-top:2rem;
  padding:2rem 0 2.5rem;
}
footer.foot .wrap{ }
footer.foot .imprint{
  font-size:.9rem;
  line-height:1.7;
  color:#d8d2c4;
  margin-bottom:1.3rem;
}
footer.foot .imprint p{ margin:0 0 .2rem; color:#d8d2c4; }
footer.foot .imprint strong{ color:#fff; }
nav.legal{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 1.4rem;
  padding-top:1rem;
  border-top:1px solid #3a352c;
}
nav.legal a{
  color:#e9e4d8;
  font-size:.9rem;
  text-decoration:underline;
  text-decoration-color:#6c6255;
}
nav.legal a:hover, nav.legal a:focus-visible{ color:#fff; text-decoration-color:#fff; }

/* ---------- generic publication page (legal / about) ---------- */
main.page{ padding-bottom:2rem; }
main.page h1{
  font-size:clamp(1.7rem,4.6vw,2.5rem);
  margin:1.75rem 0 1rem;
}
main.page h2{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-size:clamp(1.25rem,3vw,1.55rem);
  margin:1.8rem 0 .7rem;
}
main.page p, main.page li{ font-size:1.02rem; }
main.page section{ margin-bottom:1.6rem; }
main.page .updated{ color:var(--muted); font-size:.9rem; margin-bottom:1.5rem; }
main.page address{ font-style:normal; }

a{ color:var(--accent-dark); }
a:focus-visible, button:focus-visible{ outline:3px solid var(--accent-dark); outline-offset:2px; }

/* prevent any accidental horizontal overflow */
img, video{ max-width:100%; }
* { box-sizing:border-box; }
