/* PAGES ENTRY HEADERS */
.pagetext .pagesection {
	margin-top:3em;
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sage);
}
.pagetext .pagetitle {
	margin-top:0em;
	margin-bottom:0.5em;
  font-size: 2rem;
}
.pagetext .phonhead {
  font-size:1.1em;
  margin:0 0 1.5em 0;
  text-align:left;
}
.pagetext .phonhead span {
  display:inline-block;
  margin:0 1em 0 .5em
}
.pagetext .phonhead img {
  vertical-align:-9%
}

/* PAGES BODY CONTENT */
.pagetext p {
  font-size: 1.1rem;
  color:black;
  max-width: 520px;
  margin-bottom: 0.8rem;
  line-height:1.6rem;
}
.pagetext .quotetext {
	color:black;
  font-size:1em;
  padding:0;
  max-width: 450px;
  margin:.4em 0 .4em 1.5em;
  text-align:left;
  line-height:1.3em
}
.pagetext .quotenote {
  max-width: 480px;
	color:var(--sage);
  font-size:.9em;
  text-align:left;
  padding:0;
	font-weight:600;
  margin:-.4em 3em .5em 1.5em;
  line-height:1.3em;
}
.pagetext .question, .pagetext .answer {
	color: var(--sage);
	font-family:Arial,Tahoma,Helvetica,"URW Gothic L","DejaVu Sans",sans-serif;
	font-weight:700;
	font-style:normal;
	padding-left:.3em;
	padding-right:.4em;
	margin-right:.4em
}
p sup {
  vertical-align: 12%;
  font-size: 0.7rem;
  margin:0;
  padding:0;
}


/* ============================================================
   WORLD WIDE WORDS — IMAGE STYLES
   Works with existing <p class="image-l/r/c" style="width:xx%">
   markup without any changes to the 435 pages.
   ============================================================ */

/* --- Shared base --- */
p.image-l,
p.image-r,
p.image-c {
    /* Remove default paragraph margin/padding */
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding: 0;

    /* Caption text styling */
    font-size: 0.85em;
    line-height: 1.4;
    color: #555;          /* or your verdigris/navy palette tone */
    font-style: normal;   /* the <em> inside handles italic selectively */
}

p.image-l img,
p.image-r img,
p.image-c img {
    display: block;       /* removes inline-block gap below images */
    width: 100%;          /* fills the <p> container (whose width is the inline style) */
    height: auto;
    margin-bottom: 0.05em; /* small gap between stacked images or image+caption */
}

/* --- Float left --- */
p.image-l {
    float: left;
    margin-right: 1.5em;
    margin-left: 0;
}

/* --- Float right --- */
p.image-r {
    float: right;
    margin-left: 1.5em;
    margin-right: 0;
}

/* --- Centred --- */
p.image-c {
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    clear: both;
}

p.image-c img {
    margin-left: auto;
    margin-right: auto;
}

/* --- Clearfix: any element following a floated image --- */
/* Add class "image-follows" to the next <p> or <h2> if needed,
   or use this blanket rule for headings which always want a clear */
h2, h3 {
    clear: both;
}

p.image-l br,
p.image-r br,
p.image-c br {
    display: block;
    line-height: 0.3em;  /* compress the <br /> to almost nothing */
}


/* --- Responsive: collapse floats on narrow screens --- */
@media (max-width: 600px) {
    p.image-l,
    p.image-r {
        float: none;
        width: 90% !important;   /* overrides the inline style */
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}