/* ==========================================================================
   PA Philosophers — the single entry page
   Container, grid and gap are the network standard: 1260 / 1fr 300px / 32px,
   the same frame every single-entry page in the Atlas uses.
   ========================================================================== */

.pa-ph-main {
	--ph-ink:    #0D2818;
	--ph-green:  #1A4D2E;
	--ph-olive:  #2D5016;
	--ph-gold:   #B8860B;
	--ph-sage:   #5A7C59;
	--ph-cream:  #F5F1E8;
	--ph-paper:  #FAF8F5;
	--ph-hair:   rgba(13, 40, 24, .14);

	max-width: 1260px;
	margin: 0 auto;
	padding: 40px 32px 60px;
	color: var(--ph-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.pa-page-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	align-items: start;
}

.pa-main-col { min-width: 0; }

/* --- eyebrow ------------------------------------------------------------- */

.pa-eyebrow {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ph-sage);
	padding-bottom: .6rem;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--ph-hair);
}
.pa-eyebrow a { color: inherit; text-decoration: none; }
.pa-eyebrow a:hover { color: var(--ph-olive); }
.pa-eyebrow-mid { color: var(--ph-gold); }

/* --- header -------------------------------------------------------------- */

.pa-ph-head {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--ph-olive);
}

.pa-ph-headtext { min-width: 0; }

/* FIXED px AND AN ASPECT RATIO. Never a percentage width: a percentage-width
   image inside a grid column is what made the Literature Atlas front page
   sprawl, and the fix there was exactly this. */
.pa-ph-portrait {
	margin: 0;
	flex: 0 0 200px;
	width: 200px;
}
.pa-ph-portrait img {
	display: block;
	width: 200px;
	height: 267px;
	object-fit: cover;
	object-position: center top;
	border-radius: 4px;
	background: var(--ph-cream);
}
.pa-ph-portrait figcaption {
	margin-top: 6px;
	font-size: .7rem;
	color: var(--ph-sage);
	line-height: 1.35;
}

.pa-ph-h1 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(2rem, 4.6vw, 3rem);
	line-height: 1.1;
	color: var(--ph-ink);
}

.pa-ph-dates {
	margin: .5rem 0 0;
	font-size: 1rem;
	color: var(--ph-sage);
	letter-spacing: .02em;
}
.pa-ph-datenote { font-style: italic; }

/* THE LEDE. The featured-snippet target and the meta description, so it is
   set apart from the body and nothing is allowed above it. */
.pa-ph-lede {
	margin: 1rem 0 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.22rem;
	line-height: 1.5;
	color: var(--ph-olive);
}

/* --- identity grid -------------------------------------------------------- */

.pa-ph-id {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px 26px;
	margin: 0 0 1.6rem;
	padding: 1rem 1.2rem;
	background: var(--ph-cream);
	border-radius: 6px;
}
.pa-ph-id-row { min-width: 0; }
.pa-ph-id dt {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ph-sage);
	margin-bottom: 2px;
}
.pa-ph-id dd { margin: 0; font-size: .95rem; line-height: 1.4; }
.pa-ph-id dd a { color: var(--ph-olive); }

/* --- ratings -------------------------------------------------------------- */

/* THREE FIXED COLUMNS, NOT auto-fit.
   auto-fit gave five across on a wide screen and left a lone sixth beneath,
   and because each row was space-between the dots sat at the right edge of
   cells of differing widths, so nothing lined up with anything. Three columns
   divide six ratings into two clean rows. */
.pa-ph-rates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 32px;
	margin: 0 0 2rem;
}

/* A FIXED LABEL COLUMN is what actually aligns the dots: with the label given
   a set width, every dot group starts at the same offset inside its cell, and
   the cells are equal. space-between could never do this. */
.pa-ph-rate-row {
	display: grid;
	grid-template-columns: 108px auto;
	align-items: center;
	gap: 10px;
}
.pa-ph-rate-label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ph-sage);
}
.pa-ph-rate-dots { display: inline-flex; gap: 4px; }
.pa-ph-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--ph-hair);
}
.pa-ph-dot.is-on { background: var(--ph-gold); }

/* --- sections ------------------------------------------------------------- */

.pa-ph-sec { margin: 0 0 2.2rem; }

.pa-ph-h2 {
	margin: 0 0 .7rem;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--ph-green);
}

.pa-ph-sec p {
	margin: 0 0 1rem;
	font-size: 1.02rem;
	line-height: 1.68;
}
.pa-ph-sec p:last-child { margin-bottom: 0; }
.pa-ph-sec a { color: var(--ph-olive); }

.pa-ph-lastwords {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.15rem;
	font-style: italic;
	color: var(--ph-olive);
}

/* --- works ---------------------------------------------------------------- */

.pa-ph-work {
	padding: 0 0 .9rem 1rem;
	margin-bottom: .9rem;
	border-left: 3px solid var(--ph-hair);
}
.pa-ph-work--master { border-left-color: var(--ph-gold); }
.pa-ph-work-t {
	margin: 0 0 .3rem;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 1.14rem;
	color: var(--ph-ink);
}

/* --- quotes --------------------------------------------------------------- */

.pa-ph-quote { margin: 0 0 1.2rem; padding: 0; }
.pa-ph-quote blockquote {
	margin: 0;
	padding: 0 0 0 1.1rem;
	border-left: 3px solid var(--ph-gold);
}
.pa-ph-quote blockquote p {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.16rem;
	font-style: italic;
	line-height: 1.55;
	margin: 0;
}
.pa-ph-quote figcaption {
	margin: .35rem 0 0 1.1rem;
	font-size: .78rem;
	color: var(--ph-sage);
}

/* --- connections ---------------------------------------------------------- */

.pa-ph-rels { margin: 0; }
.pa-ph-rel {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 16px;
	padding: .7rem 0;
	border-top: 1px solid var(--ph-hair);
}
.pa-ph-rel:last-child { border-bottom: 1px solid var(--ph-hair); }
.pa-ph-rel dt {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ph-sage);
	padding-top: 3px;
}
.pa-ph-rel dd { margin: 0; font-size: .96rem; line-height: 1.5; }
.pa-ph-rel-links { display: block; }
.pa-ph-rel-links a { color: var(--ph-olive); font-weight: 600; }

/* The original wording sits under the links, quieter, because it is the
   source sentence rather than navigation. */
.pa-ph-rel-note {
	display: block;
	margin-top: .25rem;
	font-size: .86rem;
	color: var(--ph-sage);
}

/* --- sources -------------------------------------------------------------- */

.pa-ph-sources { margin: 0; padding-left: 1.1rem; }
.pa-ph-sources li { margin-bottom: .35rem; font-size: .95rem; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
	.pa-page-layout { grid-template-columns: 1fr; }
	.pa-ph-rates { grid-template-columns: repeat(2, 1fr); }
	.pa-ph-main { padding: 28px 20px 48px; }
	.pa-ph-head { flex-direction: column; gap: 18px; }
	.pa-ph-portrait { flex-basis: auto; }
	.pa-ph-rel { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 600px) {
	.pa-ph-main { padding: 22px 16px 40px; }
	.pa-ph-rates { grid-template-columns: 1fr; }
	.pa-ph-portrait,
	.pa-ph-portrait img { width: 150px; }
	.pa-ph-portrait img { height: 200px; }
}

/* ==========================================================================
   The navigator sidebar — ported from the diaries section's stylesheet,
   which is where these class names come from. Recoloured to the greens.
   ========================================================================== */
/* ── sidebar cards ─────────────────────────────────────── */
/* CLONED, not approximated, from la-author-sidebar/assets/la-sidebar.css
   (.la-card, .la-card-title, .la-ask-desc), so this sidebar, the omissions
   sidebar and the author/book sidebar are one object. Values are copied
   literally rather than imported, because la-sidebar.css is NOT enqueued on
   a diary page and its --la-radius token lives in author.css :root,
   which is not either. A change made there has to be made here by hand. */
.pa-di-card{background:#faf9f7; border:.5px solid #e0ddd5; border-radius:12px; padding:16px; margin-bottom:16px}
.pa-di-card h3{
  display:flex; align-items:center; gap:6px;
  font-family:sans-serif;
  font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:#1A4D2E; line-height:1.4; margin:0 0 14px;
}
.pa-di-card p{font-family:sans-serif; font-size:11.5px; line-height:1.55; color:#777; margin:0}
.pa-di-card p + p{margin-top:10px}
.pa-di-card a{color:var(--di-blue)}
.pa-di-links{line-height:1.9}
/* ── cross-references ─────────────────────────────────────────────── */
/* A mention of another entry in this section. Deliberately quiet: a
   dotted underline in the body colour rather than a blue link, because
   these appear mid-sentence and a page of blue would be unreadable. */
.pa-di-xref{
  color:inherit; text-decoration:none;
  border-bottom:1px dotted var(--di-blue);
}
.pa-di-xref:hover,.pa-di-xref:focus-visible{
  color:var(--di-red); border-bottom-color:var(--di-red); border-bottom-style:solid;
}
.pa-di-card p.pa-di-ask-desc{font-family:sans-serif; font-size:11.5px; line-height:1.55; color:#5c6b78; margin:0 0 12px}
.pa-di-card p.pa-di-ai-badge{
  display:inline-flex; align-items:center; gap:4px;
  margin:10px 0 0; font-family:sans-serif; line-height:1.4;
  font-size:9.5px; letter-spacing:normal; color:#aaa;
}
/* Navigator — the same clone: .la-nav-search, .la-nav-list, .la-nav-item,
   .la-nav-current. The markup here is <ol>/<li>/<a> rather than the book
   sidebar's flat <a> rows, so the row rules hang off the anchor inside the
   item; everything else is identical, including the negative margin that
   bleeds the list to the card edges. The Key above it is untouched — with a
   hundred diaries it still earns its place. */
.pa-di-nav-count{float:right; color:#8a949c; font-weight:400; letter-spacing:normal}
/* v1.3.0 - THE SEARCH BOX, and the reason it needs a raised selector.

   GeneratePress styles `input[type="search"]` - one element plus one
   attribute, specificity (0,1,1). A bare `.pa-di-nav-q` is (0,1,0), so THE
   THEME WINS and everything declared here is discarded before it reaches the
   page: what rendered was the theme's own search field, not this one.
   `.pa-di-nav input.pa-di-nav-q` is (0,2,1) and clears it without
   !important.

   No icon: a background-image magnifier depends on a background-position no
   other stylesheet touches, and the theme sets the `background` SHORTHAND,
   which resets image and position along with the colour. The red keyline
   carries the prominence instead. */
.pa-di-nav input.pa-di-nav-q{
  width:100%; font-family:sans-serif; font-size:13px; padding:9px 12px;
  border:1px solid var(--di-red,#B8860B); border-radius:8px; background:#fff; color:#222;
  outline:none; margin:0 0 10px; box-sizing:border-box;
  transition:box-shadow .15s; background-image:none;
}
.pa-di-nav input.pa-di-nav-q::placeholder{color:#8a949c}
.pa-di-nav input.pa-di-nav-q:hover{border-color:var(--di-red,#B8860B); box-shadow:0 0 0 2px rgba(230,57,70,.12)}
.pa-di-nav input.pa-di-nav-q:focus{border-color:var(--di-red,#B8860B); box-shadow:0 0 0 3px rgba(230,57,70,.22)}
.pa-di-nav-list{
  list-style:none; max-height:420px; overflow-y:auto;
  margin:0 -16px -16px; padding:0 0 8px; border-top:.5px solid #e8e5de;
}
.pa-di-nav-list::-webkit-scrollbar{width:4px}
.pa-di-nav-list::-webkit-scrollbar-track{background:transparent}
.pa-di-nav-list::-webkit-scrollbar-thumb{background:#dedad2; border-radius:2px}
.pa-di-nav-item[hidden]{display:none}
/* v1.3.0 - THE SECTION HEADING, in place of the colour key. In flow, not
   sticky: a sticky heading has to be opaque or the rows scroll through it,
   which makes it a solid bar that then sits on top of the row beneath. These
   labels are sentences, so one wrapping to two lines inside a pinned bar
   overlaps whatever it was pinned over. Text rather than furniture: set like
   the entry titles but italic and in the section red. */
.pa-di-nav-head{
  padding:13px 16px 3px; margin:0;
  font-family:sans-serif; font-size:12px; font-style:italic; font-weight:400;
  line-height:1.4; color:var(--di-red,#B8860B);
}
.pa-di-nav-head:first-child{padding-top:9px}
.pa-di-nav-head[hidden]{display:none}
.pa-di-nav-item a{
  display:flex; align-items:center; gap:6px;
  font-family:sans-serif; font-size:12px; color:#333; text-decoration:none;
  padding:5px 16px; line-height:1.4; transition:background .1s, color .1s;
}
.pa-di-nav-item a:hover{background:#f5f3ee; color:#1A4D2E}
.pa-di-nav-item.is-here a{background:#fff8e6; color:#1A4D2E; font-weight:600}
.pa-di-nav-item.is-here a:hover{background:#fff3d0}
/* THE ROW THAT BROKE, AND WHY.
   The title was flex:1 1 auto and the date flex:0 0 auto, so the date took
   whatever width it wanted and the title absorbed every consequence - a long
   date squeezed the title into a narrow column and it wrapped to five or six
   lines, and an over-long one overflowed onto the title entirely.

   Three changes, and all three are needed:
   1. the date is now a computed century, so it is short by construction;
   2. it is allowed to shrink and truncate, so no future value can force a
      squeeze even if the computation is bypassed by a filter;
   3. the row aligns on the FIRST line rather than centring, so a title that
      does wrap to two lines keeps its date beside line one instead of
      floating it into the middle of the block. */
.pa-di-nav-item a{align-items:flex-start}
.pa-di-nav-t{
  flex:1 1 auto; min-width:0;
  line-height:1.35; overflow-wrap:anywhere;
}
.pa-di-nav-y{
  flex:0 1 auto; min-width:0; max-width:42%;
  color:#8a949c; font-size:11px; line-height:1.55;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:right;
}
.pa-di-nav-item a{flex-wrap:wrap}
.pa-di-nav-t{flex:1 1 100%}
.pa-di-nav-y{flex:1 1 100%; max-width:none; text-align:left; padding-left:15px}
/* The 5px above put the dot on the baseline of the old grid row. The
   navigator rows are centred flex now, so inside the list it goes back
   to zero — the dot is not touched anywhere else. */
.pa-di-nav-item .pa-di-dot{margin-top:0; align-self:center}
.pa-di-nav-status{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:-4px 0 10px; padding:4px 6px;
  font-family:sans-serif; font-size:10.5px; letter-spacing:normal;
  text-transform:none; color:#6b7a86; background:#fff8e6; border-radius:8px;
}
.pa-di-nav-status[hidden]{display:none}
.pa-di-nav-clear{
  appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0 2px;
  font-family:sans-serif; font-size:10.5px; font-weight:700;
  color:var(--di-navy); cursor:pointer; text-decoration:underline;
}
.pa-di-nav-clear:hover{color:var(--di-red)}
/* The Ask panel and the admin picker, same origin, same recolouring. */
/* ── sidebar: ask, navigator ──────────────────────────────────────── */
/* Ask card — the same clone as the rest of the sidebar: #la-ask-card,
   .la-ask-desc, .la-ask-open and .la-ai-badge, value for value. The badge
   is left-aligned inline-flex there, not centred, which is the one visible
   change from what was here before. The button label is uppercased in CSS
   because the author sidebar uppercases it in the markup instead. */
.pa-di-ask{background:#eaf2fa; border-color:#c9dcee}
.pa-di-card p.pa-di-ask-desc{font-family:sans-serif; font-size:11.5px; line-height:1.55; color:#5c6b78; margin:0 0 12px}
.pa-di-ask-open{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:sans-serif; font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:#fff; background:#1A4D2E; border:none;
  border-radius:var(--la-radius, 8px); padding:12px 14px; cursor:pointer;
  transition:background .15s, transform .1s;
}
.pa-di-ask-open:hover{background:#0d3d65}
.pa-di-ask-open:active{transform:scale(.98)}
.pa-di-ask-open:focus-visible{outline:2px solid var(--di-gold); outline-offset:2px}
.pa-di-card p.pa-di-ai-badge{
  display:inline-flex; align-items:center; gap:4px;
  margin:10px 0 0; font-family:sans-serif; line-height:1.4;
  font-size:9.5px; letter-spacing:normal; color:#aaa;
}
.pa-di-ask-overlay{
  position:fixed; inset:0; z-index:9999; background:rgba(10,46,77,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.pa-di-ask-overlay[hidden]{display:none}
.pa-di-ask-modal{
  position:relative; background:#fff; border-radius:14px; padding:26px 26px 22px;
  width:min(560px,100%); max-height:80vh; display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(10,46,77,.35);
}
.pa-di-ask-close{position:absolute; top:12px; right:12px; background:none; border:0; cursor:pointer; color:var(--di-dim)}
.pa-di-ask-modal-title{font-size:1.15rem; color:var(--di-navy); margin:0 0 14px; font-weight:700}
.pa-di-ask-log{flex:1; overflow-y:auto; min-height:80px; margin:0 0 14px}
.pa-di-ask-q{
  background:var(--di-navy); color:#fff; border-radius:10px 10px 3px 10px;
  padding:9px 13px; margin:0 0 10px auto; max-width:82%; width:fit-content; font-size:.95rem;
}
.pa-di-ask-a{
  background:#F2F5F8; border-radius:10px 10px 10px 3px; padding:9px 13px;
  margin:0 auto 10px 0; max-width:88%; width:fit-content; font-size:.95rem; line-height:1.6;
}
.pa-di-ask-row{display:flex; gap:8px}
.pa-di-ask-input{
  flex:1; font-family:Georgia,serif; font-size:1rem; padding:10px 12px;
  border:1px solid var(--di-rule); border-radius:8px;
}
.pa-di-ask-input:focus{outline:2px solid var(--di-gold); outline-offset:1px}
.pa-di-ask-send{
  background:var(--di-navy); color:#fff; border:0; border-radius:8px; padding:10px 18px;
  font-family:'Archivo',Arial,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.pa-di-ask-note{margin:10px 0 0; font-size:11px; color:var(--di-muted); line-height:1.5}
/* The admin meta box: same origin, wp-admin only. */

/* The sidebar column. The ported sidebar emits bare .pa-di-card blocks with no
   wrapper of its own, so the column belongs to the page, not to it. */
.pa-side-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (max-width: 900px) {
	.pa-side-col { margin-top: 2rem; }
}

/* --- related strip -------------------------------------------------------- */

/* A horizontal scroller rather than a wrapping grid: eight faces on one line
   reads as a row of people, and the same eight broken across two ragged lines
   reads as a list that ran out of room. */
.pa-ph-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 0 0 8px;
	margin: 0 0 1.8rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.pa-ph-strip-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 13px 7px 7px;
	background: var(--ph-cream);
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	color: var(--ph-ink);
	transition: border-color .15s ease, background .15s ease;
}
.pa-ph-strip-item:hover,
.pa-ph-strip-item:focus-visible {
	border-color: var(--ph-gold);
	background: #fff;
	text-decoration: none;
}

.pa-ph-strip-img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	display: block;
	flex-shrink: 0;
	background: #fff;
}
.pa-ph-strip-img--none { background: var(--ph-hair); }

.pa-ph-strip-txt { display: flex; flex-direction: column; line-height: 1.2; }

/* The relation is the quiet part. The NAME is what the eye is looking for and
   what the link is really about. */
.pa-ph-strip-rel {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ph-sage);
}
.pa-ph-strip-name { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.pa-ph-strip-dates { font-size: .72rem; color: var(--ph-sage); white-space: nowrap; }

@media (max-width: 600px) {
	.pa-ph-strip { margin-bottom: 1.4rem; }
	.pa-ph-strip-img { width: 34px; height: 34px; }
}

/* ==========================================================================
   Overrides for the ported diary sidebar — the panel colours and the portrait.
   Appended so the ported block above stays diffable against its source.
   ========================================================================== */

/* 1. The Ask panel was the diaries' pale blue on a green site. */
.pa-di-ask {
	background: #EEF4EC !important;
	border-color: #CBD9C6 !important;
}
.pa-di-card p.pa-di-ask-desc { color: #4A6B5A !important; }

/* The invitation line: a face, then the name, on one baseline. */
.pa-ask-head {
	display: flex !important;
	align-items: center;
	gap: 9px;
	line-height: 1.25;
}
.pa-ask-face {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	flex-shrink: 0;
	border: 2px solid var(--ph-gold);
	background: #fff;
	display: block;
}

/* 2. THE PORTRAIT IS A ROUNDEL.
   Round means square, so the 200x267 crop becomes 200x200 and takes the top
   of the frame — which is where a head is in every one of these images. The
   gold ring is what stops a photographic bust reading as a stray cut-out on
   cream. */
.pa-ph-portrait,
.pa-ph-portrait img {
	width: 200px;
}
.pa-ph-portrait img {
	height: 200px;
	border-radius: 50%;
	border: 3px solid var(--ph-gold);
	box-shadow: 0 2px 10px rgba(13, 40, 24, .13);
	background: var(--ph-cream);
	object-position: center top;
}
.pa-ph-portrait { flex-basis: 200px; }
.pa-ph-portrait figcaption { text-align: center; }

@media (max-width: 600px) {
	.pa-ph-portrait,
	.pa-ph-portrait img { width: 150px; }
	.pa-ph-portrait img { height: 150px; }
}

/* ==========================================================================
   v1.5.0 — the old site's own type, header panel and heading colour.
   Every value here was read out of philosophy-chain's stylesheets, not
   matched by eye.
   ========================================================================== */

/* VARELA ROUND, one weight only. Bold is synthesised, so the headings below
   lean on colour, caps and letterspacing rather than on weight alone. */
.pa-ph-main,
.pa-ph-main input,
.pa-ph-main button,
.pa-side-col,
.pa-side-col input,
.pa-side-col button {
	font-family: 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pa-ph-sec p { font-size: 1.04rem; line-height: 1.72; }

/* --- the header becomes a panel ------------------------------------------ */

/* linear-gradient(135deg, #2d5016, #3a6b1c) — philosophy-chain's own hero.
   The portrait drops from 200px to 120px: at 200 it was the loudest thing on
   the page, and the name should be. */
.pa-ph-head {
	background: linear-gradient(135deg, #2D5016 0%, #3A6B1C 100%);
	border-radius: 10px;
	padding: 32px 34px;
	gap: 24px;
	align-items: center;
	border-bottom: none;
	margin-bottom: 1.6rem;
}

.pa-ph-portrait,
.pa-ph-portrait img { width: 120px; }
.pa-ph-portrait { flex: 0 0 120px; }
.pa-ph-portrait img {
	height: 120px;
	border: 4px solid #fff;          /* white ring on green, as the old site */
	box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}
.pa-ph-portrait figcaption { color: rgba(255,255,255,.62); text-align: left; }

.pa-ph-h1 { color: var(--ph-gold); font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
.pa-ph-dates { color: rgba(255,255,255,.82); }
.pa-ph-datenote { color: rgba(255,255,255,.62); }
.pa-ph-lede {
	color: #fff;
	font-family: inherit;
	font-size: 1.08rem;
	line-height: 1.55;
}

/* --- the red section heading --------------------------------------------- */

/* #C52A2A uppercase 700, letterspacing .5px — philosopher-styles.php's
   .philosopher-panel-title, verbatim. */
.pa-ph-h2 {
	color: #C52A2A;
	font-family: inherit;
	font-size: 1.06rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: .8rem;
}
.pa-ph-work-t { font-family: inherit; font-size: 1.05rem; font-weight: 700; }

/* --- the jump pills ------------------------------------------------------- */

.pa-ph-jump h3 { margin: 0 0 10px; }
.pa-ph-pills { display: flex; flex-wrap: wrap; gap: 5px; }

/* Small, 8px radius, and they wrap rather than scroll: this is a contents
   list, and a contents list you have to scroll to read is not one. */
.pa-ph-pill {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 8px;
	background: var(--ph-cream);
	border: 1px solid transparent;
	font-size: .72rem;
	line-height: 1.3;
	color: var(--ph-ink);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.pa-ph-pill:hover,
.pa-ph-pill:focus-visible {
	background: rgba(139, 157, 131, .4);   /* the old sidebar's active wash */
	border-color: var(--ph-gold);
	color: #C52A2A;
	text-decoration: none;
}

/* An anchor jump must not land the heading under a sticky masthead. */
.pa-ph-sec { scroll-margin-top: 90px; }

@media (max-width: 900px) {
	.pa-ph-head { flex-direction: row; padding: 24px; }
}
@media (max-width: 600px) {
	.pa-ph-head { flex-direction: column; text-align: center; padding: 22px 18px; }
	.pa-ph-portrait,
	.pa-ph-portrait img { width: 100px; }
	.pa-ph-portrait img { height: 100px; }
	.pa-ph-portrait figcaption { text-align: center; }
}

/* --- v1.5.1 --------------------------------------------------------------- */

/* 1. Gold ring on the portrait, on the green panel. */
.pa-ph-portrait img { border-color: var(--ph-gold); }

/* 2. THE SIDEBAR STICKS, THE COLUMN DOES NOT.
   `position: sticky` on the column itself does nothing useful — a flex column
   as tall as its content has nowhere to travel. The column is released to its
   natural height and the INNER stack is what sticks, capped at the viewport so
   a long navigator scrolls inside itself instead of running off the bottom.
   position:sticky also fails silently inside any ancestor with overflow set,
   which is why nothing here declares one. */
.pa-side-col {
	display: block;
	align-self: start;
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding-right: 2px;
}

/* The gap the flex column used to supply. */
.pa-side-col > * { margin-bottom: 16px; }
.pa-side-col > *:last-child { margin-bottom: 0; }

/* Sticky is wrong on a phone: the column is stacked under the article, so
   pinning it would park a panel over the text being read. */
@media (max-width: 900px) {
	.pa-side-col {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* --- v1.6.0: the header block stays put ----------------------------------- */

/* The wrapper needs its own opaque background or the article scrolls visibly
   through the gap between the eyebrow and the panel. */
.pa-ph-sticky {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--ph-paper);
	padding-top: 10px;
}

/* The eyebrow's own bottom margin was sized for a page that scrolled past it.
   Pinned, it only has to separate itself from the panel below. */
.pa-ph-sticky .pa-eyebrow { margin-bottom: .9rem; }

/* A pinned panel is permanent furniture, so it gives back what it can: less
   padding, a shorter portrait, and the lede clamped to three lines. The lede
   is the one variable-height thing in here and a six-line one would take a
   third of the viewport for ever. */
.pa-ph-sticky .pa-ph-head {
	padding: 20px 24px;
	gap: 20px;
	margin-bottom: 1.4rem;
}
.pa-ph-sticky .pa-ph-portrait,
.pa-ph-sticky .pa-ph-portrait img { width: 96px; }
.pa-ph-sticky .pa-ph-portrait { flex: 0 0 96px; }
.pa-ph-sticky .pa-ph-portrait img { height: 96px; }
.pa-ph-sticky .pa-ph-h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.pa-ph-sticky .pa-ph-lede {
	font-size: 1rem;
	margin-top: .6rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A section heading must clear the pinned block, not hide behind it. */
.pa-ph-sec { scroll-margin-top: 210px; }

/* Below 900px the panel would take half the screen, and the sidebar is not
   sticky here either — same reasoning, same breakpoint. */
@media (max-width: 900px) {
	.pa-ph-sticky {
		position: static;
		padding-top: 0;
	}
	.pa-ph-sticky .pa-ph-head { padding: 24px; }
	.pa-ph-sticky .pa-ph-portrait,
	.pa-ph-sticky .pa-ph-portrait img { width: 120px; }
	.pa-ph-sticky .pa-ph-portrait { flex: 0 0 120px; }
	.pa-ph-sticky .pa-ph-portrait img { height: 120px; }
	.pa-ph-sticky .pa-ph-lede {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}
	.pa-ph-sec { scroll-margin-top: 24px; }
}

/* ==========================================================================
   v1.6.1 — ONE RADIUS, 8px.
   The page had five: 4 on the portrait frame, 6 on the identity grid, 10 on
   the header panel, 12 on the ported sidebar cards, 14 on the Ask modal, and
   999 on the related pills. Five radii is not a design decision, it is the
   residue of four different plugins. Circles are exempt: a round portrait is
   a shape, not a corner.
   ========================================================================== */

.pa-ph-main,
.pa-side-col {
	--ph-radius: 8px;
}

.pa-ph-strip-item,          /* was 999px — the Answered / Plato pills */
.pa-ph-head,                /* was 10px */
.pa-ph-id,                  /* was 6px  */
.pa-ph-pill,
.pa-di-card,                /* was 12px */
.pa-di-ask,
.pa-di-nav-q,
.pa-di-ask-open,
.pa-di-ask-input,
.pa-di-ask-send,
.pa-side-col input,
.pa-side-col button {
	border-radius: var(--ph-radius);
}

/* The modal is a panel like any other. */
.pa-di-ask-modal { border-radius: var(--ph-radius); }

/* The chat bubbles keep ONE square corner each — that notch is what makes a
   bubble read as speech rather than as a box — but the other three match. */
.pa-di-ask-log .pa-di-ask-q { border-radius: 8px 8px 2px 8px; }
.pa-di-ask-log .pa-di-ask-a { border-radius: 8px 8px 8px 2px; }

/* Exempt, deliberately: the portraits and the strip faces are circles. */
.pa-ph-portrait img,
.pa-ph-strip-img,
.pa-ask-face {
	border-radius: 50%;
}

/* ==========================================================================
   v1.7.0 — Quick Links as a dark green panel, squared off with the header.
   ========================================================================== */

/* TWO NUMBERS, BOTH DELIBERATE, BOTH ADJUSTABLE HERE.
   CSS cannot match the height of an element in one grid column to one in
   another - there is no cross-column measurement without subgrid or script.
   So the alignment is made explicit: the side column is pushed down by the
   height of the eyebrow block, and both panels are given the same height.
   If the header padding or the portrait size changes, THESE TWO CHANGE TOO. */
.pa-ph-main {
	--ph-eyebrow-h: 46px;   /* eyebrow text + its rule + margin */
	--ph-panel-h:  178px;   /* the sticky header panel at 96px portrait */
}

@media (min-width: 901px) {
	/* Drop the sidebar to the green panel's top edge, not the eyebrow's. */
	.pa-side-col { padding-top: var(--ph-eyebrow-h); }

	.pa-ph-sticky .pa-ph-head { min-height: var(--ph-panel-h); }

	.pa-ph-jump {
		height: var(--ph-panel-h);
		display: flex;
		flex-direction: column;
	}
}

.pa-ph-jump {
	background: linear-gradient(135deg, #2D5016 0%, #3A6B1C 100%);
	border: none;
	padding: 14px 14px 12px;
	text-align: center;
	box-sizing: border-box;
}

.pa-ph-jump h3 {
	color: var(--ph-gold);
	margin: 0 0 9px;
	text-align: center;
	font-size: .68rem;
	letter-spacing: .12em;
}

/* The pills scroll only if a philosopher somehow has more sections than the
   panel holds. At this size nineteen fit, so it should never engage - but a
   clipped list with no way to reach the rest would be worse than a scrollbar. */
.pa-ph-pills {
	justify-content: center;
	gap: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	align-content: flex-start;
	flex: 1 1 auto;
	min-height: 0;
}

/* Smaller, to buy the vertical room. Cream on green rather than the page's
   cream-on-white, so they read as part of the panel. */
.pa-ph-pill {
	padding: 3px 7px;
	font-size: .66rem;
	line-height: 1.25;
	background: rgba(255, 255, 255, .13);
	color: #F1EEE4;
	border-color: transparent;
}
.pa-ph-pill:hover,
.pa-ph-pill:focus-visible {
	background: var(--ph-gold);
	border-color: var(--ph-gold);
	color: #1A3009;
}

/* Stacked on a phone the two panels are one above the other, so there is
   nothing to align to and a fixed height would only clip the list. */
@media (max-width: 900px) {
	.pa-ph-jump { height: auto; }
	.pa-ph-pills { overflow: visible; }
}

/* ==========================================================================
   v1.7.1 — the GREEN IS THE HEADING STRIP, not the whole card.
   1.7.0 painted the entire panel green and then forced it to a fixed height,
   which is what produced the scrollbar. The card is an ordinary card again;
   only its heading is a green bar, and the height is natural.
   ========================================================================== */

.pa-ph-jump {
	background: #faf9f7;
	border: .5px solid #e0ddd5;
	height: auto;
	display: block;
	padding: 0 0 12px;      /* the strip runs to the card's own edges */
	overflow: hidden;       /* clips the strip to the 8px corners */
	text-align: center;
}

/* The heading strip. Full bleed inside the card, so it reads as a title bar
   rather than a green box floating on a white one. */
.pa-ph-jump h3 {
	display: block;
	margin: 0 0 11px;
	padding: 8px 10px;
	background: linear-gradient(135deg, #2D5016 0%, #3A6B1C 100%);
	color: var(--ph-gold);
	font-size: .64rem;
	letter-spacing: .12em;
	text-align: center;
}

/* NO SCROLLBAR. The list is short enough at this size to sit on the page
   whole, and a contents list you have to scroll to read is not one. */
.pa-ph-pills {
	overflow: visible;
	padding: 0 10px;
	gap: 3px;
	justify-content: center;
}

/* Significantly smaller, and back to cream on white now that the card is. */
.pa-ph-pill {
	padding: 2px 6px;
	font-size: .58rem;
	line-height: 1.3;
	background: var(--ph-cream);
	color: var(--ph-ink);
	border-color: transparent;
}
.pa-ph-pill:hover,
.pa-ph-pill:focus-visible {
	background: rgba(139, 157, 131, .4);
	border-color: var(--ph-gold);
	color: #C52A2A;
}

/* THE TOP EDGES: measured, not guessed.
   The main column starts with .pa-ph-sticky's 10px padding, then the eyebrow —
   ~15px of text, 9.6px padding-bottom, a 1px rule and 14.4px margin — which is
   50px before the green panel begins. The sidebar had 46 and so sat four
   pixels high. */
@media (min-width: 901px) {
	.pa-side-col { padding-top: 50px; }
	.pa-ph-jump  { height: auto; }
}

/* ==========================================================================
   v1.7.2 — white type on the green panels.
   Gold #D4AF37 on #2D5016 is 4.4:1, just under the 4.5:1 threshold, and it
   reads as tired rather than rich at heading sizes. White is 9.2:1 on the
   same green. Gold stays where it earns its place: on the near-black masthead
   (4.8:1) and as the portrait ring and the pill hover.
   ========================================================================== */

.pa-ph-h1        { color: #FFFFFF; }
.pa-ph-jump h3   { color: #FFFFFF; }
.pa-ph-dates     { color: rgba(255, 255, 255, .88); }
.pa-ph-datenote  { color: rgba(255, 255, 255, .70); }

/* ==========================================================================
   v1.7.3 — the sidebar stopped pinning, and the padding was why.
   `padding-top: 50px` was added to a box with `max-height: calc(100vh - 40px)`
   and no box-sizing, so the column resolved to 100vh + 10px — taller than the
   viewport. A sticky element taller than its viewport cannot pin: it scrolls
   until its bottom edge arrives, which is exactly what you saw.
   The offset moves to MARGIN, which positions without adding height.
   ========================================================================== */

.pa-side-col {
	box-sizing: border-box;
	max-height: calc(100vh - 48px);
}

@media (min-width: 901px) {
	.pa-side-col {
		padding-top: 0;
		margin-top: 50px;
	}
}

@media (max-width: 900px) {
	.pa-side-col { margin-top: 0; }
}

/* ==========================================================================
   v1.8.0 — the header collapses to a one-line bar on scroll.
   ONE TOKEN SETS BOTH BARS. The collapsed header and the Quick Links strip
   must be the same height and start at the same y, and the only way to
   guarantee that is for both to read the same numbers.
   ========================================================================== */

.pa-ph-main {
	--ph-bar-h:  34px;   /* the height of both one-line bars */
	--ph-bar-y:  24px;   /* their distance from the top of the viewport */
}

/* The Quick Links strip, pinned by the sidebar's own sticky at the same 24px. */
.pa-ph-jump h3 {
	min-height: var(--ph-bar-h);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 10px;
	margin-bottom: 11px;
}

@media (min-width: 901px) {

	/* Animate the panel, not the wrapper: transitioning a sticky element's own
	   box fights the browser's pinning and stutters. */
	.pa-ph-sticky .pa-ph-head {
		transition: padding .18s ease, min-height .18s ease;
	}
	.pa-ph-sticky .pa-ph-portrait,
	.pa-ph-sticky .pa-ph-h1 {
		transition: width .18s ease, height .18s ease, font-size .18s ease;
	}

	/* --- collapsed ------------------------------------------------------- */

	/* 24px, matching --ph-bar-y, so the bar's top edge lands exactly where the
	   Quick Links strip's does. The eyebrow is gone, so this padding is the
	   only thing above the bar. */
	.pa-ph-sticky.is-shrunk { padding-top: var(--ph-bar-y); }

	/* Everything but the name. */
	.pa-ph-sticky.is-shrunk .pa-eyebrow,
	.pa-ph-sticky.is-shrunk .pa-ph-portrait,
	.pa-ph-sticky.is-shrunk .pa-ph-dates,
	.pa-ph-sticky.is-shrunk .pa-ph-lede {
		display: none;
	}

	.pa-ph-sticky.is-shrunk .pa-ph-head {
		min-height: var(--ph-bar-h);
		height: var(--ph-bar-h);
		padding: 0 16px;
		gap: 0;
		align-items: center;
		margin-bottom: 1.2rem;
		box-sizing: border-box;
	}

	.pa-ph-sticky.is-shrunk .pa-ph-headtext {
		display: flex;
		align-items: center;
		width: 100%;
		min-width: 0;
	}

	/* One line, and an over-long name is cut rather than allowed to wrap and
	   double the bar's height — which is the whole point of collapsing it. */
	.pa-ph-sticky.is-shrunk .pa-ph-h1 {
		font-size: .95rem;
		line-height: 1.2;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* A Quick Link must land its heading below the collapsed bar, not the
	   full panel: by the time anyone clicks one, the header has collapsed. */
	.pa-ph-sec { scroll-margin-top: 84px; }
}

/* ==========================================================================
   v1.8.1 — 12px of white above both bars, admin bar included.
   ========================================================================== */

.pa-ph-main { --ph-bar-y: 12px; }

@media (min-width: 901px) {

	/* The header wrapper pins at 0 and pads 12px, so the green starts at 12.
	   The sidebar has no padding of its own — its first child is the Quick
	   Links strip, flush to the card edge — so its pin offset IS the gap.
	   Both therefore begin at the same 12px. */
	.pa-ph-sticky            { top: 0; padding-top: var(--ph-bar-y); }
	.pa-ph-sticky.is-shrunk  { padding-top: var(--ph-bar-y); }
	.pa-side-col             { top: var(--ph-bar-y); }

	/* THE ADMIN BAR IS position:fixed AND STICKY IS VIEWPORT-RELATIVE, so
	   anything pinned near the top slides underneath it. Only logged-in users
	   ever see this, which is exactly why it survives until someone building
	   the site notices. WordPress puts .admin-bar on the body; 32px is its
	   height at this breakpoint. */
	body.admin-bar .pa-ph-sticky { top: 32px; }
	body.admin-bar .pa-side-col  { top: calc(32px + var(--ph-bar-y)); }

	/* The column must also lose that height, or it becomes taller than the
	   space it has and stops being able to pin at all — the same fault as the
	   padding in 1.7.1. */
	body.admin-bar .pa-side-col { max-height: calc(100vh - 32px - 36px); }
}

/* --- v1.8.2 --------------------------------------------------------------- */

/* Square bottom corners on the collapsed bar, matching the Quick Links strip.
   That strip only looks this way because its card sets overflow:hidden, which
   clips the top corners and leaves the bottom square. This states it outright
   rather than relying on the same accident. Only when collapsed: at rest the
   header is a panel and wants all four. */
@media (min-width: 901px) {
	.pa-ph-sticky.is-shrunk .pa-ph-head {
		border-radius: var(--ph-radius) var(--ph-radius) 0 0;
	}
}