/*
Theme Name: Conny Bischofberger
Description: Interview archive for connybischofberger.at. Rebuild of the 2010 design, responsive.
Version: 1.0
*/
:root{
  --purple:#2D0733; --orange:#d05328; --bg:#EFEFEF; --cream:#fff5d7;
  --ink:#111; --muted:#666; --rule:#d8d8d8;
  --serif:Georgia,"Times New Roman",Times,serif;
  --wrap:980px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:16px/1.65 var(--serif);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--orange)}
a:hover{color:#fff;background:var(--orange);text-decoration:none;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* header + nav */
.site-head{background:var(--purple);position:relative}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;
                 justify-content:space-between;gap:12px;padding-top:34px;padding-bottom:14px}
.site-title{margin:0;font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.site-title a{color:#fff;text-decoration:none;background:none;display:inline-block;padding:6px 16px 16px;margin:-6px -16px -16px}
.site-title a:hover{color:var(--cream);background:none}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0}
.nav li{position:relative}
.nav a{display:block;padding:8px 12px;color:#fff;text-decoration:none;
       font-size:14px;text-transform:uppercase;background:none;border-radius:0}
.nav a:hover,.nav .current-menu-item>a,.nav .active>a{background:var(--orange);color:#fff}
.nav ul ul{display:none;position:absolute;left:0;top:100%;background:var(--orange);
           flex-direction:column;min-width:220px;z-index:200;padding:4px 0}
.nav li:hover>ul,.nav li:focus-within>ul{display:flex}
.nav ul ul a{text-transform:none;font-style:italic;font-size:14px;padding:8px 14px}
.nav ul ul a:hover{background:var(--purple)}

/* content */
.main{padding:34px 0 50px}
.page-title{font-size:30px;line-height:1.2;color:var(--orange);margin:0 0 6px}
.page-sub{font-style:italic;color:var(--purple);margin:0 0 26px}
.prose{max-width:760px}
.prose p{margin:0 0 18px}

/* homepage */
.hero{display:grid;grid-template-columns:373px 1fr;gap:30px;align-items:center;
      margin:30px 0 10px;min-height:340px}
.hero-portrait img{display:block}
.quote-rotator{background:var(--purple);color:#fff;padding:40px 34px;border-radius:2px;text-align:center}
.quote-rotator .q{font-size:21px;line-height:1.4;margin:0 0 14px;min-height:4.2em}
.quote-rotator .a{font-size:14px;font-style:italic;color:var(--cream);margin:0}

/* interview archive */
.filters{margin:0 0 22px;font-size:14px}
.iv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px;list-style:none;padding:0;margin:0}
.iv-card{background:#fff;border:1px solid var(--rule);border-radius:2px;overflow:hidden;display:flex;flex-direction:column}
.iv-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.iv-card .body{padding:14px 16px 18px;flex:1;display:flex;flex-direction:column}
.iv-card h3{margin:0 0 6px;font-size:18px;line-height:1.25}
.iv-card h3 a{text-decoration:none;background:none;color:var(--purple)}
.iv-card h3 a:hover{color:var(--orange);background:none}
.iv-card .q{font-size:14px;font-style:italic;color:var(--orange);margin:0 0 10px}
.iv-card .meta{margin-top:auto;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.iv-noimg{aspect-ratio:3/2;background:var(--purple);color:var(--cream);
          display:flex;align-items:center;justify-content:center;font-size:34px;font-style:italic}

/* single interview */
/* Headline, intro and main photo share one block: the photo floats at the right,
   the intro flows underneath it once it is past the photo (magazine style). */
.iv-top{margin:0 0 6px}
.iv-header{margin:0 0 26px}
.iv-pull{font-size:27px;line-height:1.3;color:var(--orange);margin:0 0 10px}
.iv-who{font-style:italic;color:var(--purple);margin:0 0 4px;font-size:17px}
.iv-meta{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.iv-photo{float:right;width:440px;max-width:46%;margin:6px 0 20px 36px}
.iv-photo img{display:block;width:100%;height:auto}
.iv-intro{font-size:17px;line-height:1.7;color:#222;
          border-left:3px solid var(--orange);padding-left:18px;margin:0 0 30px}
.qa{max-width:760px}
.qa .frage{font-weight:bold;color:var(--purple);margin:26px 0 8px}
.qa .antwort{margin:0 0 8px}
.iv-footer{clear:both;max-width:760px;margin-top:34px;padding-top:14px;border-top:1px solid var(--rule);
           font-size:13px;color:var(--muted)}
.backlink{display:inline-block;margin-bottom:20px;font-size:14px}

/* footer */
.site-foot{border-top:2px solid var(--purple);text-align:center;
           padding:18px 0 30px;font-size:13px;color:var(--purple)}
.site-foot .name{font-size:15px;font-weight:bold;margin:0 0 6px}
.site-foot .name span{font-size:19px}
.site-foot a{color:var(--purple)}

@media (max-width:880px){
  .iv-photo{float:none;width:auto;max-width:100%;margin:0 0 22px}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-portrait{display:none}
}
@media (max-width:620px){
  .site-head .wrap{padding-top:18px}
  .nav ul{gap:0}
  .nav a{padding:7px 9px;font-size:13px}
  .nav ul ul{position:static;display:flex;background:none;padding:0}
  .nav ul ul a{padding-left:22px;opacity:.85}
  .page-title{font-size:25px}
  .iv-pull{font-size:22px}
}

.died{color:var(--muted);font-style:normal;font-size:.85em}
.qa .frage{font-weight:bold;color:var(--purple);margin:26px 0 8px}
.qa p{margin:0 0 14px}

.iv-thumb{background:none;display:block}
.iv-thumb:hover{background:none}

.iv-search{margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.iv-search input[type=search]{font:16px var(--serif);padding:8px 11px;border:1px solid var(--rule);
  border-radius:2px;min-width:270px;background:#fff;color:var(--ink)}
.iv-search button{font:15px var(--serif);padding:9px 18px;border:0;border-radius:2px;
  background:var(--purple);color:#fff;cursor:pointer}
.iv-search button:hover{background:var(--orange)}
.iv-clear{font-size:14px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.ws-list{list-style:none;padding:0;margin:0;display:grid;gap:26px;max-width:820px}
.ws-item{background:#fff;border:1px solid var(--rule);border-radius:2px;padding:20px 22px}
.ws-item h2{margin:0 0 4px;font-size:21px}
.ws-item h2 a{color:var(--purple);text-decoration:none;background:none}
.ws-item h2 a:hover{color:var(--orange);background:none}
.ws-sub{margin:0 0 8px;font-style:italic;color:var(--orange)}
.ws-teaser{margin:0 0 10px;color:#333}
.ws-more{font-size:14px}

/* ---- layout: keep the footer at the bottom on short pages ---- */
body{display:flex;flex-direction:column;min-height:100vh}
.main{flex:1 0 auto}
.site-foot{flex-shrink:0}

/* ---- footer wordmark: big capitals without breaking the text for screen readers ---- */
.site-foot .name{font-size:15px;font-weight:bold;margin:0 0 6px}
.site-foot .name .w::first-letter{font-size:19px}
.site-foot .name i{font-style:normal;color:var(--rule);margin:0 4px}

/* ---- hero ---- */
.hero{align-items:center;margin:38px 0 12px;min-height:auto;padding-bottom:34px;
      border-bottom:1px solid var(--rule)}
.hero-portrait img{filter:drop-shadow(0 14px 26px rgba(45,7,51,.28))}
.quote-rotator{padding:44px 40px}
.quote-rotator .q{font-size:22px;line-height:1.45;min-height:3.6em}
.quote-rotator .a{font-size:14.5px;line-height:1.5;color:#e8d9a8;font-style:italic;
                  max-width:46ch;margin:0 auto}

/* ---- homepage blocks ---- */
.home-block{margin:34px 0 8px}
.block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
            gap:10px;margin:0 0 18px}
.block-head h2{margin:0;font-size:23px;color:var(--purple)}
.block-more{font-size:15px;white-space:nowrap}
.home-block .iv-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.home-split{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;
            margin:40px 0 10px;padding-top:30px;border-top:1px solid var(--rule)}
.split-col h2{margin:0 0 10px;font-size:20px;color:var(--purple)}
.split-col p{margin:0 0 12px}
.plain{list-style:none;padding:0;margin:0 0 12px}
.plain li{margin:0 0 6px}

@media (max-width:880px){
  .hero{padding-bottom:24px}
  .home-split{grid-template-columns:1fr;gap:24px}
}

/* ============================================================
   Restore the original identity: orange hero, overlapping
   portrait, full-height nav highlight, textured header band.
   ============================================================ */

/* --- header band with the original texture --- */
.site-head{background:var(--purple) url(img/head-bg.jpg) no-repeat left top}
.site-head .wrap{padding-top:0;padding-bottom:0;align-items:stretch;min-height:100px}
.site-title{align-self:center;padding:0}

/* --- nav: active/hover fills the full band height, as before --- */
.nav ul{gap:0;height:100%;align-items:stretch}
.nav li{display:flex;align-items:stretch}
.nav > ul > li > a{display:flex;align-items:flex-end;padding:0 12px 22px;line-height:1}
.nav > ul > li > a:hover,
.nav > ul > li.active > a,
.nav > ul > li.current-menu-item > a,
.nav > ul > li:hover > a{background:var(--orange) url(img/navi-link-bg.gif) repeat-y left top}
.nav ul ul{top:100%;background:var(--orange)}
.nav ul ul a{padding:9px 14px}

/* --- hero: orange panel carrying the quotation-mark artwork --- */
.hero{position:relative;display:block;margin:44px 0 0;padding:0 0 34px;min-height:auto}
.hero-panel{position:relative;background:var(--orange) url(img/zitat-bg.jpg) no-repeat right top;
            background-size:cover;min-height:299px;display:flex;align-items:center;
            justify-content:flex-end;border-radius:2px}
.hero-portrait{position:absolute;left:0;bottom:-34px;width:373px;max-width:42%;z-index:5;
               pointer-events:none}
.hero-portrait img{display:block;width:100%;height:auto;
                   filter:drop-shadow(0 10px 22px rgba(45,7,51,.30))}
.quote-rotator{background:none;padding:34px 40px;width:56%;min-width:0;text-align:center}
.quote-rotator .q{font-size:21px;line-height:1.45;color:#fff;
                  text-shadow:0 1px 2px rgba(120,40,10,.35);min-height:3.4em;margin:0 0 12px}
.quote-rotator .a{font-size:14px;line-height:1.5;color:#fff5d7;font-style:italic;
                  max-width:46ch;margin:0 auto}

@media (max-width:880px){
  .hero{margin-top:24px;padding-bottom:0}
  .hero-panel{min-height:0;justify-content:center;background-position:center top}
  .hero-portrait{position:static;width:230px;max-width:60%;margin:0 auto -6px;display:block}
  .quote-rotator{width:100%;padding:26px 22px 30px}
}
@media (max-width:620px){
  .site-head{background-image:none}
  .site-head .wrap{min-height:0;padding:14px 20px;align-items:center}
  .nav > ul > li > a{align-items:center;padding:8px 10px}
}

/* portrait may break out of the panel, but must not crowd the section below */
.hero{padding-bottom:74px}
.hero-portrait{bottom:-40px}
.home-block{margin-top:26px}
@media (max-width:880px){ .hero{padding-bottom:0} }

/* divider sits clear of the portrait, and reads as a real rule */
.hero{border-bottom:3px solid var(--purple);padding-bottom:86px}
.hero-portrait{bottom:-34px}

/* portrait now offsets from the orange panel, so the rule stays clear of her */
.hero{padding-bottom:68px;border-bottom:3px solid var(--purple)}
.hero-panel{position:relative}
.hero-portrait{position:absolute;left:0;bottom:-30px;top:auto;width:373px;max-width:40%;z-index:5}
@media (max-width:880px){
  .hero{padding-bottom:0}
  .hero-portrait{position:static;width:230px;max-width:60%;margin:0 auto -6px}
}

/* thin rule again — the fix was the positioning, not the weight */
.hero{border-bottom:1px solid var(--rule)}

/* artwork at natural size pinned right, as the original did - not stretched */
.hero-panel{background:var(--orange) url(img/zitat-bg.jpg) no-repeat right top;
            background-size:auto 100%}
.hero-portrait{left:-6px;max-width:34%}

/* trimmed artwork - the shipped jpg had the page grey baked into its edges */
.hero-panel{background-image:url(img/zitat-bg-trim.jpg)}

/* ---- hero, final -----------------------------------------------------
   zitat-bg.jpg has ~4px of the page grey baked into its left/bottom
   edges. The 2010 site hid that by sizing the container to the image and
   letting those edges meet the grey page. Same trick here: panel width =
   artwork width, natural size, pinned right. No re-encoding of the asset.
   ---------------------------------------------------------------------- */
.hero-panel{width:834px;max-width:100%;margin-left:auto;
            background-color:transparent;
            background-image:url(img/zitat-bg.jpg);
            background-repeat:no-repeat;
            background-position:right top;
            background-size:auto;
            min-height:299px;border-radius:0}
.hero-portrait{left:-12%;bottom:-30px;width:373px;max-width:38%}

@media (max-width:880px){
  .hero-panel{width:100%;min-height:0;background-color:var(--orange);
              background-size:cover;background-position:center top}
  .hero-portrait{position:static;width:220px;max-width:58%;margin:0 auto -6px}
}

/* portrait at its natural 373px (was capped to ~317px by max-width),
   sitting lower over the panel as in the original */
.hero{padding-bottom:86px}
.hero-portrait{width:373px;max-width:45%;left:-12.5%;bottom:-52px}
@media (max-width:880px){
  .hero{padding-bottom:0}
  .hero-portrait{position:static;width:220px;max-width:58%;margin:0 auto -6px}
}

/* keep even the longest quotes clear of the closing quote-mark artwork */
.quote-rotator{width:58%;padding:26px 30px 30px}
.quote-rotator .q{font-size:19px;line-height:1.38;min-height:3.2em;margin:0 0 9px}
.quote-rotator .a{font-size:13px;line-height:1.45;max-width:42ch}

/* shift her left so her shoulder clears the opening quotation mark */
.hero{overflow:visible}
.hero-portrait{left:-17%}
@media (max-width:880px){ .hero-portrait{position:static;left:auto;margin:0 auto -6px} }

/* --- hero: sit the quote in the measured channel between the marks --------
   zitat-bg.jpg is 834x299. Opening marks: x 169-264, y 4-74.
   Closing marks: x 674-769, y 221-294. Clear channel: x 270-670, y 74-221.
   Percentages so it holds when the panel shrinks on narrow screens.        */
.quote-rotator{
  position:absolute;
  left:32.4%;            /* 270 / 834 */
  right:19.7%;           /* (834-670) / 834 */
  top:24.7%;             /* 74 / 299  */
  bottom:26.1%;          /* (299-221) / 299 */
  width:auto;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.quote-rotator .q{font-size:18px;line-height:1.34;min-height:0;margin:0 0 8px}
.quote-rotator .a{font-size:12.5px;line-height:1.4;max-width:none;margin:0}

@media (max-width:820px){
  .quote-rotator{position:static;left:auto;right:auto;top:auto;bottom:auto;
                 width:100%;padding:26px 22px 30px}
}

/* --- homepage split: bottom-align the two trailing "→" links -------------- */
.home-split{align-items:stretch}
.split-col{display:flex;flex-direction:column}
.split-col > p:last-child{margin-top:auto;margin-bottom:0}

/* ==========================================================================
   Navigation: port the original hover + dropdown treatment
   navi-link-bg.gif      400x27  orange w/ dashed dark line at the LEFT edge
   navi-link-span-bg.gif   3x27  transparent w/ dashed dark line, sits RIGHT
   dropout-bg.png        207x500 white panel, 4px soft shadow L/R/bottom
   The original hung these off an inner <span>; wp_nav_menu emits no span, so
   both edges are layered onto the <a> as multiple backgrounds instead.
   ========================================================================== */
.nav > ul > li > a:hover,
.nav > ul > li.active > a,
.nav > ul > li.current-menu-item > a,
.nav > ul > li:hover > a{
  background:url(img/navi-link-span-bg.gif) repeat-y right top,
             url(img/navi-link-bg.gif) repeat-y left top,
             var(--orange);
}

/* white caret under a hovered parent that has children (was a 10x5 gif) */
.nav > ul > li.menu-item-has-children > a{position:relative}
.nav > ul > li.menu-item-has-children:hover > a::after{
  content:"";position:absolute;left:50%;bottom:12px;margin-left:-5px;
  width:0;height:0;border:5px solid transparent;
  border-top:5px solid #fff;border-bottom:0;
}

/* dropdown panel */
.nav ul ul{
  left:-4px;width:207px;min-width:0;padding:0 4px 4px;
  background:url(img/dropout-bg.png) no-repeat center bottom;
}
.nav ul ul li{display:block}
.nav ul ul a{
  display:block;width:199px;padding:10px 22px 10px 17px;
  font:italic 12px/1.35 var(--serif);text-transform:none;color:#000;
  background:url(img/navi-link-span-bg.gif) repeat-y right top,
             url(img/navi-link-bg.gif) repeat-y left top,
             var(--orange);
}
.nav ul ul a:hover,
.nav ul ul .current-menu-item > a{
  color:#fff;
  background:url(img/navi-link-span-bg.gif) repeat-y right top,
             url(img/navi-link-bg.gif) repeat-y left top,
             var(--orange);
}

@media (max-width:620px){
  .nav > ul > li.menu-item-has-children:hover > a::after{display:none}
  .nav ul ul{width:auto;padding:0;background:none;left:auto}
  .nav ul ul a{width:auto;padding-left:22px;color:#fff;background:none}
  .nav ul ul a:hover{background:var(--orange)}
}


/* ==========================================================================
   Header geometry, as the original had it:
     #head       height:100px
     #head h1    position:absolute; top:62px; left:10px   (24px, no tracking)
     #navi-out   position:absolute; top:0; right:0        (flush to the 980px edge)
   Both are out of flow there, so the nav can never wrap under the title.
   Gated at >=980px -- the width at which .wrap reaches its 980px max. Below
   that nothing here applies and the header keeps the flex row, which stacks.
   ========================================================================== */
@media (min-width:980px){
  .site-head .wrap{position:relative;height:100px}
  .site-title{position:absolute;left:20px;top:56px;margin:0;
              font-size:24px;line-height:1;letter-spacing:normal}
  .nav{position:absolute;right:20px;top:0;height:100px}
  /* original: a{padding-left:7px;margin-left:2px} span{padding-right:7px} */
  .nav > ul > li > a{padding:0 8px 22px;margin-left:2px}
}

/* .nav ul{height:100%} was matching the submenu too. A column flex container
   with a fixed height and flex-wrap:wrap breaks its items into extra COLUMNS,
   which is what scattered the dropdown entries sideways. */
.nav ul ul{height:auto;flex-wrap:nowrap;align-items:stretch}

/* contact page: social links as small buttons */
.social{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.social a{display:inline-block;padding:7px 14px;border-radius:3px;text-decoration:none;
          font-size:14px;color:#fff;background:var(--purple)}
.social a:hover{background:var(--orange);color:#fff}

/* ==========================================================================
   Phone menu: below 620px the nav collapses behind a toggle button.
   Without JavaScript (no html.js) the full list stays visible.
   ========================================================================== */
.nav-toggle{display:none}
@media (max-width:620px){
  .site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
                   padding:12px 20px;min-height:0}
  .site-title{font-size:17px;line-height:1;letter-spacing:.02em;white-space:nowrap;flex:0 1 auto;min-width:0}
  .nav-toggle{flex:0 0 auto}
  .site-title a{padding:10px 10px;margin:-10px -10px}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid rgba(255,255,255,.35);
              border-radius:3px;color:#fff;font:13px var(--serif);text-transform:uppercase;letter-spacing:.06em;
              padding:8px 11px;cursor:pointer}
  .nav-toggle .bars{display:inline-flex;flex-direction:column;gap:4px}
  .nav-toggle .bars i{display:block;width:18px;height:2px;background:#fff;border-radius:1px}
  .nav-toggle:hover,.nav-open .nav-toggle{background:var(--orange);border-color:var(--orange)}
  html.js .nav{display:none}
  html.js .nav-open .nav{display:block}
  .nav{flex-basis:100%;width:100%;margin-top:12px;border-top:1px solid rgba(255,255,255,.2);padding-top:6px}
  .nav ul{display:block;height:auto}
  .nav li{display:block}
  .nav > ul > li > a{display:block;padding:11px 8px;font-size:15px;line-height:1.2}
  .nav > ul > li > a:hover,.nav > ul > li.current-menu-item > a,.nav > ul > li.active > a,
  .nav > ul > li:hover > a{background:var(--orange);background-image:none}
  .nav ul ul{display:block;position:static;width:auto;background:none;padding:0 0 4px}
  .nav ul ul a{display:block;padding:8px 8px 8px 26px;font-size:14px;font-style:italic;color:#fff;opacity:.9;background:none}
  .nav ul ul a:hover,.nav ul ul .current-menu-item > a{background:var(--orange);color:#fff}
  /* search row: field and button side by side */
  .iv-search{flex-wrap:nowrap}
  .iv-search input[type=search]{min-width:0;flex:1}
  .iv-search .iv-clear{flex-basis:100%}
  /* medium filter: tighter on phones */
}
@media (max-width:420px){
  .site-title{font-size:16px}
  .nav-toggle .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .nav-toggle{padding:9px 10px}
}

/* medium filter: pill row */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;margin:0 0 22px;font-size:13px}
.filters-label{font-weight:bold;color:var(--purple);margin-right:6px}
.filters a{display:inline-block;padding:5px 11px;border:1px solid var(--rule);border-radius:999px;
           background:#fff;color:var(--purple);text-decoration:none;line-height:1.2;white-space:nowrap}
.filters a .n{color:var(--muted);font-size:12px;margin-left:2px}
.filters a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.filters a:hover .n{color:#fff}
.filters a.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
.filters a.is-active .n{color:#fff}
@media (max-width:620px){
  .filters-label{flex-basis:100%;margin:0 0 2px}
}

/* --- hero on phones: stack portrait above the quote, full-width text ------ */
@media (max-width:880px){
  .hero{margin-top:20px;padding-bottom:0;overflow:hidden}
  .hero-panel{display:block;width:100%;min-height:0;padding:22px 0 0;
              background-color:var(--orange);background-image:none;border-radius:2px}
  .hero-portrait{position:static;display:block;width:190px;max-width:52%;margin:0 auto -4px;left:auto;bottom:auto}
  .hero-portrait img{filter:drop-shadow(0 8px 16px rgba(45,7,51,.35))}
  .quote-rotator{position:static;width:100%;padding:22px 22px 28px;
                 border-top:1px solid rgba(255,255,255,.25)}
  .quote-rotator .q{font-size:18px;line-height:1.4;margin:0 0 10px}
  .quote-rotator .a{font-size:13px}
  .quote-rotator .q,.quote-rotator .a{max-width:46ch;margin-left:auto;margin-right:auto}
}

/* pictures inside interview or page text: full width of the column, caption underneath */
.qa img,.prose img{display:block;max-width:100%;height:auto;margin:26px 0}
.qa .wp-caption,.prose .wp-caption{max-width:100%;width:auto !important;margin:26px 0}
.qa .wp-caption img,.prose .wp-caption img{margin:0}
.wp-caption-text{font-size:13px;line-height:1.5;color:var(--muted);font-style:italic;margin:8px 0 0}
.qa .alignleft,.prose .alignleft{float:left;margin:6px 24px 14px 0;max-width:48%}
.qa .alignright,.prose .alignright{float:right;margin:6px 0 14px 24px;max-width:48%}
.qa .aligncenter,.prose .aligncenter{margin-left:auto;margin-right:auto}
.qa::after,.prose::after{content:"";display:block;clear:both}
@media (max-width:620px){
  .qa .alignleft,.qa .alignright,.prose .alignleft,.prose .alignright{float:none;max-width:100%;margin:26px 0}
}

/* page text: headings and the CV table on the Portrait page */
.prose h2{font-size:24px;color:var(--orange);margin:38px 0 10px}
.prose h3{font-size:17px;color:var(--purple);margin:26px 0 6px}
.prose table.cv{border-collapse:collapse;width:100%;margin:6px 0 10px;font-size:15px}
.prose table.cv td{vertical-align:top;padding:6px 0;border-top:1px solid var(--rule)}
.prose table.cv tr:first-child td{border-top:0}
.prose table.facts td:first-child{width:11.5em}
.prose small{font-size:13px;color:var(--muted)}
.prose table.cv td:first-child{width:9.5em;padding-right:14px;white-space:nowrap;font-weight:bold;color:var(--purple)}
@media (max-width:620px){
  .prose table.cv td{display:block;padding:2px 0}
  .prose table.cv td:first-child{width:auto;padding-top:10px;border-top:1px solid var(--rule)}
  .prose table.cv td:last-child{border-top:0;padding-bottom:8px}
  .prose table.cv tr:first-child td:first-child{border-top:0}
}

/* interview text: a paragraph consisting only of bold text is a question */
.qa p > strong:only-child{color:var(--purple)}
.qa p:has(> strong:only-child){margin:26px 0 8px}