/* ==============================================================
   JELLI / PROSE — post bodies and prose pages (privacy, terms…).
   The imported bodies are WordPress block markup, its colour and
   size classes written against the old theme: here they map onto
   the night palette (yellow for amber, a purple-tinted card for
   the purple callouts), at a reading size.
   ============================================================== */
.prose{font:400 18px/1.75 var(--body);color:#D9D0E4;overflow-wrap:break-word}
.prose>:first-child{margin-top:0}
.prose>*+*,.prose .wp-block-group__inner-container>*+*,.prose .wp-block-column>*+*,.prose blockquote>*+*,.prose li>*+*{margin-top:1.1em}
.prose p:empty{display:none}

/* Headings */
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{font-family:var(--display);color:#FCF9FF;line-height:1.22;letter-spacing:-.015em;text-wrap:balance}
.prose>h1,.prose>h2,.prose>h3,.prose>h4{margin-top:1.8em}
.prose h1{font-size:clamp(28px,3.1vw,38px);font-weight:600}
.prose h2{font-size:clamp(24px,2.6vw,32px);font-weight:600}
.prose h3{font-size:clamp(20px,2vw,24px);font-weight:600}
.prose h4,.prose h5,.prose h6{font-size:18px;font-weight:600}

/* Text */
.prose a{color:var(--button);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:#FFF1AE}
.prose a:focus-visible{outline:2px solid var(--button);outline-offset:3px;border-radius:2px}
.prose strong,.prose b{color:#FFF;font-weight:600}
.prose em,.prose i{font-style:italic}
.prose small{font-size:.85em}
.prose code{padding:.12em .38em;border-radius:6px;background:rgba(155,104,203,.16);font:400 .88em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#F2E8FB}
.prose pre{overflow-x:auto;padding:18px 20px;border-radius:14px;background:#12102A;border:1px solid rgba(213,180,244,.16)}
.prose pre code{padding:0;background:none}

/* Lists. WordPress's carried their own markers ("•", an emoji); a markdown list gets the design's. */
.prose ul,.prose ol{padding-inline-start:1.35em}
.prose ul li::marker{color:#CCA2F4}
.prose ol li::marker{color:#CCA2F4;font-family:var(--display);font-weight:600}
.prose ul.wp-block-list{list-style:none;padding-inline-start:0}
.prose li+li{margin-top:.55em}

/* Pictures */
.prose img{max-width:100%;height:auto;border-radius:18px;vertical-align:middle}
.prose figure{margin-inline:0}
.prose .wp-block-image,.prose .aligncenter{text-align:center}
.prose .wp-block-image img{margin-inline:auto}
.prose figcaption{margin-top:10px;font:400 13px/1.5 var(--body);color:#AFA1C6;text-align:center}
.prose .wp-block-embed iframe,.prose iframe{display:block;max-width:100%;border:0;border-radius:18px}
.prose .wp-block-embed__wrapper{position:relative}

/* Quotes */
.prose blockquote{margin-inline:0;padding-block:4px;padding-inline:24px 0;border-inline-start:3px solid var(--button);color:#EDE6F5}
.prose blockquote blockquote{padding:0;border:0}
/* WordPress left empty quotes in about a third of the posts. */
.prose blockquote:has(>blockquote:only-child>p:empty:only-child){display:none}
.prose cite{display:block;margin-top:8px;font:500 13px/1.5 var(--body);font-style:normal;color:#B7A6C8}

/* Rules and spacers: WordPress's are frequent. The rules stay quiet; the spacers (0 to 80 px of them, unevenly, between
   nearly every block) go, for the column's own even rhythm. */
.prose hr,.prose .wp-block-separator{height:1px;margin:2.4em 0;border:0;background:rgba(221,185,246,.2)!important;color:transparent}
.prose .wp-block-spacer{display:none}

/* Tables */
.prose .wp-block-table{overflow-x:auto;margin-inline:0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.prose th,.prose td{padding:11px 14px;border:1px solid rgba(221,185,246,.18);text-align:start;vertical-align:top}
.prose thead th,.prose th{background:rgba(155,104,203,.12);color:#FFF;font-family:var(--display);font-weight:600}
.prose tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* Columns, media and text */
.prose .wp-block-columns{display:flex;flex-wrap:wrap;gap:1.4em 2em}
.prose .wp-block-column{flex:1 1 0;min-width:0}
.prose .wp-block-columns>.wp-block-column{margin-top:0}
.prose .wp-block-media-text{display:grid;grid-template-columns:50% 1fr;gap:1.6em;align-items:center}
.prose .wp-block-media-text>*{margin-top:0}
.prose .wp-block-media-text__media img{width:100%}
.prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.prose .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:10px;background:var(--button)!important;color:var(--on-yellow)!important;font:600 14px var(--display);text-decoration:none}

/* WordPress's palette and sizes, on the night background */
.prose .has-luminous-vivid-amber-color{color:var(--button)}
.prose .has-white-color{color:#FFF}
.prose .has-vivid-purple-color{color:#CCA2F4}
.prose .has-text-align-center{text-align:center}
.prose .has-text-align-left{text-align:start}
.prose .has-text-align-right{text-align:end}
.prose .has-small-font-size{font-size:14px}
.prose .has-medium-font-size{font-size:1em}
.prose .has-large-font-size{font-size:clamp(23px,2.5vw,29px);line-height:1.35}
.prose .has-x-large-font-size{font-size:clamp(27px,3vw,36px);line-height:1.25}
/* The purple callouts ("JJ's tip"): the design's card, whatever colour the post set inline. */
.prose :not(hr).has-background{padding:1.15em 1.4em;border-radius:18px;border:1px solid rgba(210,175,244,.2);background:linear-gradient(123deg,rgba(103,52,158,.6),rgba(40,24,74,.85) 80%)!important}
.prose :not(hr).has-background a{color:var(--button)}

/* A prose page: the interior hero, then one readable column. */
.prose-hero{padding:86px 0 46px;max-width:760px;margin:0 auto}
.prose-hero h1{margin-top:0}
.prose-date{display:block;margin-top:18px;font:400 14px/1.5 var(--body);color:#B7A6C8}
.prose-main .prose{max-width:760px;margin:0 auto 40px;font-size:17px}

@media(max-width:700px){
  .prose{font-size:17px}
  .prose .wp-block-columns{flex-direction:column}
  .prose .wp-block-column{flex-basis:auto!important}
  .prose .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:1fr!important}
  .prose-hero{padding:52px 0 30px}
}