/* =====================================================================
   ABOUT PAGE — the v2.4 build. Scoped entirely under .ph-about so it
   cannot leak into the homepage, the Guides index, or single posts.

   Reuses the established theme language rather than inventing one:
     - single 720px measure (as .ph-essay .measure in single.css)
     - Playfair display / EB Garamond body / Plex Mono meta (style.css tokens)
     - vellum pull quote, 1px ink top-rule + 48px plum tick (components.css
       .is-style-ph-pull-quote — matched here so the About quotes and the
       essay quotes are visibly the same component)
     - hairline dividers meeting a plum dot (single.css hr.wp-block-separator)
     - framed figures, max 400px, mono captions (single.css figcaption)
   Tokens are NOT re-declared: style.css loads first and owns them.
   ===================================================================== */

.ph-about{ color:var(--ink); }
.ph-about .measure,
.ph-about .measure-h{ max-width:720px; margin-left:auto; margin-right:auto; padding:0 24px; }

/* ---------- Hero ---------- */
.ph-about .about-hero{ padding:72px 0 0; }
.ph-about .about-hero .eyebrow{ margin-bottom:18px; }
.ph-about .about-hero h1{
	font-family:var(--display); font-weight:500;
	font-size:clamp(40px,5.2vw,62px); line-height:1.08;
	margin:0 0 22px; color:var(--ink);
}
.ph-about .about-hero .deck{
	font-family:var(--display); font-style:italic; font-weight:400;
	font-size:clamp(21px,2.2vw,25px); line-height:1.45; color:#3A372F;
	margin:0 0 44px;
}

/* ---------- Body rhythm ---------- */
.ph-about .about-body{ padding-bottom:16px; }
.ph-about .about-body p.measure{ font-size:19px; line-height:1.72; margin:0 auto 1.15em; }
.ph-about h2.measure-h{
	font-family:var(--display); font-weight:500;
	font-size:clamp(28px,3.2vw,36px); line-height:1.2;
	margin:0 auto 26px; color:var(--ink);
}

/* Section divider — two hairlines meeting at a plum dot. */
.ph-about hr.rule{
	border:0; height:1px; background:var(--plum);
	width:5px; max-width:5px; margin:62px auto 54px;
	position:relative; overflow:visible;
}
.ph-about hr.rule::before,
.ph-about hr.rule::after{
	content:""; position:absolute; top:0; height:1px;
	width:min(300px,28vw); background:var(--hairline);
}
.ph-about hr.rule::before{ right:100%; margin-right:14px; }
.ph-about hr.rule::after{ left:100%; margin-left:14px; }

/* ---------- Pull quote — vellum panel, ink top-rule, plum tick ---------- */
.ph-about blockquote.pullquote{
	background:var(--vellum);
	border-top:1px solid var(--ink);
	border-left:none;
	padding:40px 44px;
	margin:44px auto;
	position:relative;
	/* border-box + 768px puts the panel's outer edge exactly on the text
	   column's outer edge (720 measure + 2x24 gutter), so quote and prose
	   share one left edge instead of the panel bleeding 20px wider. */
	box-sizing:border-box;
	max-width:768px;
	width:100%;
}
.ph-about blockquote.pullquote::before{
	content:""; position:absolute; top:-1px; left:0;
	width:48px; height:3px; background:var(--plum);
}
.ph-about blockquote.pullquote p{
	font-family:var(--display); font-style:italic; font-weight:400;
	font-size:clamp(22px,2.4vw,26px); line-height:1.45;
	margin:0; color:var(--ink);
}
.ph-about blockquote.pullquote cite{
	font-family:var(--mono); font-size:12px; font-style:normal;
	letter-spacing:.14em; text-transform:uppercase; color:var(--stone);
	display:block; margin-top:16px;
}

/* ---------- Figures — framed, mono caption ---------- */
/* The figure is a measure-width block (so it occupies the same column as the
   prose), but its image and caption are LEFT-ALIGNED inside that column —
   not centred. `auto` here only establishes the column, exactly as it does
   for p.measure; the left-alignment is the zero margin on the img itself. */
.ph-about figure.figure{
	max-width:720px; margin:44px auto; padding:0 24px; box-sizing:content-box;
}
.ph-about figure.figure img{
	display:block; width:100%; max-width:400px; height:auto; margin:0;
	border:1px solid var(--hairline);
	background:#fff; padding:8px;
	box-sizing:border-box;
	box-shadow:0 2px 14px rgba(26,26,26,.05);
}
.ph-about figure.figure figcaption{
	font-family:var(--mono); font-size:11px; letter-spacing:.08em;
	line-height:1.5; color:var(--stone); text-align:left;
	max-width:400px; margin:12px 0 0;
}
/* Wide variant: the two-page ad spread and the warehouse office are
   landscape and unreadable inside the 400px frame. */
.ph-about figure.figure-wide img,
.ph-about figure.figure-wide figcaption{ max-width:640px; }
/* Hero figure: portrait walk photo, sits tighter under the deck. */
.ph-about figure.figure-hero{ margin:0 auto 10px; }
.ph-about figure.figure-hero img,
.ph-about figure.figure-hero figcaption{ max-width:460px; }

/* ---------- "What you will find here" — 4-item linked list ---------- */
.ph-about ul.find-here{ list-style:none; margin:0 auto 8px; padding:0 24px; max-width:720px; }
.ph-about ul.find-here li{ border-top:1px solid var(--hairline); }
.ph-about ul.find-here li:last-child{ border-bottom:1px solid var(--hairline); }
.ph-about ul.find-here a{
	display:block; padding:24px 0; text-decoration:none; color:var(--ink);
	transition:color .2s ease;
}
.ph-about ul.find-here a:hover{ color:var(--plum); }
.ph-about ul.find-here .li-head{
	display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px;
}
.ph-about ul.find-here .li-head strong{
	font-family:var(--display); font-weight:500; font-size:23px; line-height:1.2;
}
.ph-about ul.find-here .soon{
	font-family:var(--mono); font-size:10px; letter-spacing:.16em;
	text-transform:uppercase; color:var(--plum);
	border:1px solid var(--hairline); padding:3px 8px; white-space:nowrap;
}
.ph-about ul.find-here .li-body{
	display:block; font-size:18px; line-height:1.6; color:#3A372F;
}

/* ---------- Button row ---------- */
.ph-about .btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin:38px auto 8px; }
.ph-about .btn{
	display:inline-block; font-family:var(--mono); font-size:12px;
	letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
	padding:16px 26px; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ph-about .btn-primary{ background:var(--plum); color:var(--paper); border:1px solid var(--plum); }
.ph-about .btn-primary:hover{ background:var(--plum-deep); border-color:var(--plum-deep); }
.ph-about .btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.ph-about .btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* The band supplies its own full-bleed plum section; give it air. */
/* Colour and controls come from the default .subscribe rules in style.css;
   About only sets its own rhythm against the preceding section. */
.ph-about .subscribe{ margin-top:78px; padding:88px 0; }
.ph-about #subscribe{ scroll-margin-top:100px; }

/* ---------- Mobile ---------- */
@media (max-width:640px){
	.ph-about .about-hero{ padding-top:46px; }
	.ph-about blockquote.pullquote{ padding:30px 26px; }
	.ph-about figure.figure img,
	.ph-about figure.figure figcaption,
	.ph-about figure.figure-wide img,
	.ph-about figure.figure-wide figcaption,
	.ph-about figure.figure-hero img,
	.ph-about figure.figure-hero figcaption{ max-width:100%; }
	.ph-about hr.rule{ margin:46px auto 40px; }
	.ph-about hr.rule::before,
	.ph-about hr.rule::after{ width:22vw; }
	.ph-about .btn{ width:100%; text-align:center; }
	.ph-about ul.find-here .li-head strong{ font-size:21px; }
}