/* pages.css - /principles, /guide and /about as one family (PAGES2, PAGES3). Loads after /assets/site.css.
   Surface-agnostic: every colour below comes from the --t-* layer, so either page reads on paper or dark, in all four
   turnings, from tokens alone. All text 16px or more. Motion runs only off body.reduced (the footer toggle). */

/* ---------------- surface layer ---------------- */
.pg{
  --pg-max:1120px;--pg-pad:clamp(20px,5vw,48px);--pg-measure:62ch;--pg-nav:96px;
  --pg-sec:clamp(56px,9vh,104px);
  /* paper (default) */
  --t-ink:var(--pink);--t-soft:var(--psoft);--t-faint:var(--pfaint);--t-line:var(--pline);
  --t-acc:color-mix(in srgb,var(--accent-d) 78%,var(--pink));   /* accent-d nudged to 4.5:1 on paper in every turning */
  --t-glow:var(--accent-d);
  --t-panel:#fffdf7;--t-panel-line:var(--pline);--t-shadow:0 30px 60px -42px rgba(38,36,31,.4);--t-blur:none;--t-ground:var(--paper);
  --t-lift:none;
  position:relative;color:var(--t-ink);
}
/* dark: the whole page on the photograph, or a dark band inside a paper page */
html[data-surface="dark"] .pg,.pg .pg-dark{
  --t-ink:var(--ink);--t-soft:var(--ink-soft);--t-faint:var(--ink-faint);--t-line:rgba(246,240,226,.2);
  --t-acc:var(--accent);--t-glow:var(--accent);
  --t-panel:linear-gradient(135deg,rgba(246,240,226,.11),rgba(246,240,226,.04));--t-panel-line:rgba(246,240,226,.2);
  --t-shadow:0 46px 100px -44px rgba(0,0,0,.78);--t-blur:blur(22px) saturate(118%);--t-ground:rgb(var(--scrim));
  --t-lift:0 2px 28px rgba(0,0,0,.55),0 1px 5px rgba(0,0,0,.4);
}
.pg .pg-dark{color:var(--t-ink);}
@media(max-width:640px){.pg{--pg-nav:164px;}}   /* the phone nav is a brand row plus a 2x2 grid of links */

.pg-in{max-width:var(--pg-max);margin:0 auto;padding:0 var(--pg-pad);}
.pg [id]{scroll-margin-top:var(--pg-nav);}

/* ---------------- shared voice ---------------- */
.pg-eyebrow,.pg-kicker{font-family:var(--mono);font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-acc);text-shadow:var(--t-lift);}
.pg-eyebrow{margin:0 0 18px;}
.pg-kicker{margin:0 0 22px;}
.pg-num{display:block;font-family:var(--mono);font-size:16px;letter-spacing:.12em;color:var(--t-acc);font-variant-numeric:tabular-nums;}
.pg a:focus-visible{outline:2px solid var(--t-glow);outline-offset:3px;border-radius:2px;}

/* the sunrise thread, drawn once per page as a horizon with the smallest crescent of sun (the nav's own idiom, larger) */
.pg-horizon{position:relative;height:40px;max-width:var(--pg-max);margin:0 auto;}
.pg-horizon::after{content:"";position:absolute;left:var(--pg-pad);right:var(--pg-pad);bottom:0;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--t-glow) 70%,transparent) 28%,var(--t-glow) 50%,color-mix(in srgb,var(--t-glow) 70%,transparent) 72%,transparent);}
.pg-horizon::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:140px;height:40px;pointer-events:none;
  background:radial-gradient(circle 15px at 50% 100%,var(--t-glow) 0 44%,color-mix(in srgb,var(--t-glow) 55%,transparent) 62%,transparent 74%),
             radial-gradient(70px 40px at 50% 100%,color-mix(in srgb,var(--t-glow) 38%,transparent),color-mix(in srgb,var(--t-glow) 10%,transparent) 50%,transparent 78%);}

/* ---------------- head: title left, the page's own index (principles) or lede (guide) right ---------------- */
.pg-head{padding:clamp(56px,10vh,120px) 0 clamp(40px,7vh,80px);}
.pg-head .pg-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end;}
.pg-title{font-family:var(--display);font-weight:800;font-size:clamp(46px,7.4vw,104px);line-height:.98;letter-spacing:-.02em;color:var(--t-ink);text-wrap:balance;text-shadow:var(--t-lift);}
.pg-lede{font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);line-height:1.5;color:var(--t-soft);max-width:34ch;text-shadow:var(--t-lift);}
.pg-head .pg-title + .pg-lede{margin-top:26px;}

/* the principles' contents, beside the title */
.pg-toc ol{list-style:none;margin:0;padding:0;}
.pg-toc li + li{border-top:1px solid var(--t-line);}
.pg-toc a{display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:baseline;gap:6px;box-sizing:border-box;min-height:44px;padding:10px 2px;
  font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--t-ink);text-decoration:none;transition:color .25s;}
.pg-toc a:hover{color:var(--t-acc);}
html[data-surface="dark"] .pg-toc{background:var(--t-panel);border:1px solid var(--t-panel-line);border-radius:var(--r-lg);padding:8px 22px;
  backdrop-filter:var(--t-blur);-webkit-backdrop-filter:var(--t-blur);box-shadow:var(--t-shadow);}
body.reduced .pg-toc a{transition:none;}

/* ---------------- panels ---------------- */
.pg-card{background:var(--t-panel);border:1px solid var(--t-panel-line);border-radius:var(--r-lg);box-shadow:var(--t-shadow);
  backdrop-filter:var(--t-blur);-webkit-backdrop-filter:var(--t-blur);}
.pg-sec{padding:var(--pg-sec) 0 0;}
.pg-sec + .pg-sec{padding-top:clamp(48px,8vh,88px);}

/* principles 01-03: the three that come from "What this is", as pillars */
.pg-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.pg-pillars .pg-card{padding:30px 30px 34px;}
.pg-pillars .pg-num{margin-bottom:20px;}
.pg-pillars h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.5vw,34px);line-height:1.05;letter-spacing:-.01em;color:var(--t-ink);}
.pg-pillars p{margin-top:16px;font-family:var(--serif);font-size:18px;line-height:1.66;color:var(--t-ink);}

/* principles 04-08: how we behave, as ruled rows (number, title, body) */
.pg-rows{list-style:none;margin:0;padding:6px clamp(20px,3vw,40px);}
.pg-rows li{display:grid;grid-template-columns:3.4em minmax(0,5fr) minmax(0,6fr);gap:10px 36px;align-items:baseline;padding:26px 0;}
.pg-rows li + li{border-top:1px solid var(--t-line);}
.pg-rows h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.1vw,28px);line-height:1.1;letter-spacing:-.01em;color:var(--t-ink);}
.pg-rows p{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--t-ink);max-width:44ch;}

/* the page turn: each page ends by handing you to the other */
.pg-end{padding-top:var(--pg-sec);padding-bottom:var(--pg-sec);}
.pg-turn{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 32px;padding:30px clamp(24px,3vw,40px);text-decoration:none;color:var(--t-ink);
  transition:border-color .3s,transform .3s var(--exhale);}
.pg-turn:hover{border-color:color-mix(in srgb,var(--t-glow) 60%,transparent);transform:translateY(-3px);}
.pg-turn .pg-eyebrow{display:block;margin-bottom:10px;}
.pg-turn .t{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.2vw,42px);line-height:1.04;letter-spacing:-.01em;}
.pg-turn .d{display:block;margin-top:10px;font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--t-soft);max-width:56ch;}
.pg-turn .go{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--t-glow) 55%,transparent);color:var(--t-acc);transition:background .3s;}
.pg-turn:hover .go{background:color-mix(in srgb,var(--t-glow) 16%,transparent);}
.pg-turn .go svg{width:20px;height:20px;}
body.reduced .pg-turn,body.reduced .pg-turn .go{transition:none;}
body.reduced .pg-turn:hover{transform:none;}

/* ---------------- principles on the photograph ---------------- */
/* the fixed #bg photo stays clear behind the head, then a scrim deepens under the text */
html[data-surface="dark"] .pg--photo{background:linear-gradient(to bottom,rgba(var(--scrim),0) 0,rgba(var(--scrim),.28) 520px,rgba(var(--scrim),.6) 1100px,rgba(var(--scrim),.66) 100%);}

/* ---------------- guide: the timeline band (dark, photographic, inside the paper page) ---------------- */
.pg-band{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,9vh,104px) 0 clamp(64px,10vh,112px);}
.pg-band-img{position:absolute;inset:0;z-index:-2;}
.pg-band-img img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;}
.pg-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(var(--scrim),.66),rgba(var(--scrim),.5) 38%,rgba(var(--scrim),.8));}
.pg-band-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 32px;margin-bottom:clamp(40px,7vh,64px);}
.pg-band h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-.01em;color:var(--t-ink);text-shadow:var(--t-lift);}
.pg-band .pg-cap{font-family:var(--display);font-weight:800;font-size:18px;color:var(--t-soft);text-shadow:var(--t-lift);}

/* eight stops on a horizon: a date change is only a data change (the grid flows any count; the last stop is always the day) */
.pg-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(40px,7vh,64px);}
.pg-tl li{position:relative;padding:36px 24px 0 0;}
.pg-tl li::before{content:"";position:absolute;top:6px;left:0;right:0;height:1.5px;background:color-mix(in srgb,var(--t-ink) 36%,transparent);}
.pg-tl li:nth-child(4n)::before,.pg-tl li:last-child::before{background:linear-gradient(90deg,color-mix(in srgb,var(--t-ink) 36%,transparent) 55%,transparent);}
.pg-tl li::after{content:"";position:absolute;top:0;left:0;width:13px;height:13px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--t-glow);background:var(--t-ground);}
.pg-tl .d{display:block;font-family:var(--display);font-weight:800;font-size:clamp(22px,2vw,28px);line-height:1.08;letter-spacing:-.01em;color:var(--t-ink);text-shadow:var(--t-lift);}
.pg-tl .l{display:block;margin-top:10px;font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-acc);text-shadow:var(--t-lift);}
.pg-tl .n{display:block;margin-top:10px;font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--t-soft);max-width:30ch;text-shadow:var(--t-lift);}
/* the day itself: the sun on the horizon */
.pg-tl li:last-child::after{top:-15px;left:-15px;width:44px;height:22px;border:0;border-radius:0;
  background:radial-gradient(circle 9px at 50% 100%,var(--t-glow) 0 62%,color-mix(in srgb,var(--t-glow) 55%,transparent) 76%,transparent 86%),
             radial-gradient(22px 22px at 50% 100%,color-mix(in srgb,var(--t-glow) 42%,transparent),transparent 80%);}
.pg-tl li:last-child .d{color:var(--t-glow);}
/* with pages.js: what has passed is filled; the next stop breathes */
.pg-tl li.is-past::after{background:var(--t-glow);}
.pg-tl li.is-past .d,.pg-tl li.is-past .n{opacity:.72;}
.pg-tl li.is-next::after{box-shadow:0 0 0 6px color-mix(in srgb,var(--t-glow) 24%,transparent);animation:pg-breathe 3.6s ease-in-out infinite;}
.pg-tl li.is-next:last-child::after{box-shadow:none;}
@keyframes pg-breathe{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--t-glow) 26%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--t-glow) 10%,transparent)}}
body.reduced .pg-tl li.is-next::after{animation:none;}

/* ---------------- guide: index beside the text ---------------- */
.pg-split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(40px,6vw,88px);padding-top:var(--pg-sec);}
.pg-index{position:sticky;top:var(--pg-nav);align-self:start;}
.pg-index .h{font-family:var(--mono);font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-acc);margin-bottom:14px;}
.pg-index ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--t-line);}
.pg-index a{position:relative;display:block;padding:7px 0 7px 18px;font-family:var(--serif);font-size:17px;line-height:1.35;color:var(--t-soft);text-decoration:none;transition:color .25s;}
.pg-index a:hover,.pg-index a.on{color:var(--t-ink);}
/* the current section: a vertical thread of light with the sun at its middle */
.pg-index a.on::before{content:"";position:absolute;left:-1px;top:2px;bottom:2px;width:2px;border-radius:2px;background:linear-gradient(to bottom,transparent,var(--t-glow),transparent);}
.pg-index a.on::after{content:"";position:absolute;left:-8px;top:50%;width:16px;height:16px;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle,var(--t-glow) 0 26%,color-mix(in srgb,var(--t-glow) 35%,transparent) 46%,transparent 72%);}
body.reduced .pg-index a{transition:none;}

/* ---------------- guide: the text ---------------- */
.pg-prose{min-width:0;}
.pg-prose > section + section{margin-top:clamp(64px,10vh,112px);}
.pg-prose h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.01em;color:var(--t-ink);}
.pg-prose p{font-family:var(--serif);font-size:clamp(18px,1.3vw,19px);line-height:1.72;color:var(--t-ink);max-width:var(--pg-measure);margin-top:18px;}
.pg-prose code{font-family:var(--mono);font-size:max(16px,.88em);white-space:nowrap;padding:.06em .4em;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--t-glow) 12%,transparent);border:1px solid color-mix(in srgb,var(--t-glow) 36%,transparent);}

/* "Your two pages": the paragraph beside a drawing of the two pages */
.pg-with-art{display:grid;grid-template-columns:minmax(0,var(--pg-measure)) 200px;gap:24px 48px;align-items:center;}
.pg-sheets{position:relative;height:190px;}
.pg-sheets .sheet{position:absolute;top:10px;width:118px;height:154px;box-sizing:border-box;padding:16px 14px;border-radius:var(--r-sm);
  background:var(--t-panel);border:1px solid var(--t-panel-line);box-shadow:var(--t-shadow);}
.pg-sheets .s1{left:0;transform:rotate(-5deg);}
.pg-sheets .s2{left:76px;transform:rotate(4deg);}
.pg-sheets i{display:block;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--t-glow) 30%,transparent);margin-bottom:10px;}
.pg-sheets b{display:block;height:5px;border-radius:3px;background:var(--t-line);margin-top:7px;}
.pg-sheets b.short{width:60%;}
.pg-sheets b.ttl{height:9px;width:72%;background:color-mix(in srgb,var(--t-ink) 22%,transparent);margin:2px 0 0;}
.pg-sheets span{position:absolute;left:14px;right:8px;bottom:12px;font-family:var(--mono);font-size:16px;line-height:1.2;color:var(--t-acc);}

/* "Writing in Notion": five small cards */
.pg-tiles{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.pg-tiles li{padding:22px 24px 24px;border-radius:var(--r-md);}
.pg-tiles li:last-child:nth-child(odd){grid-column:1/-1;}
.pg-tiles strong{display:block;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;color:var(--t-ink);}
.pg-tiles span{display:block;margin-top:8px;font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--t-soft);}

/* "The small fields": drawn like the top of a Notion page, so it looks like what you will see */
.pg-fields{margin:28px 0 0;padding:6px clamp(20px,3vw,30px);border-radius:var(--r-md);}
.pg-fields > div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:4px 20px;padding:15px 0;}
.pg-fields > div + div{border-top:1px solid var(--t-line);}
.pg-fields dt{font-family:var(--mono);font-size:16px;line-height:1.7;color:var(--t-acc);}
.pg-fields dd{margin:0;font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--t-ink);}

/* "Questions": question left, answer right */
.pg-qa{margin-top:28px;border-top:1px solid var(--t-line);}
.pg-qa > div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8px 40px;padding:22px 0;border-bottom:1px solid var(--t-line);}
.pg-qa h3{font-family:var(--display);font-weight:800;font-size:clamp(19px,1.6vw,21px);line-height:1.25;color:var(--t-ink);}
.pg-qa p{margin-top:0;font-size:18px;line-height:1.6;}

/* ---------------- tablet ---------------- */
@media(max-width:1100px){
  .pg-with-art{grid-template-columns:minmax(0,1fr);}
  .pg-sheets{height:180px;width:200px;}
}
@media(max-width:1000px){
  .pg-pillars{grid-template-columns:minmax(0,1fr);}
  .pg-tl{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg-tl li:nth-child(4n)::before{background:color-mix(in srgb,var(--t-ink) 36%,transparent);}
  .pg-tl li:nth-child(2n)::before,.pg-tl li:last-child::before{background:linear-gradient(90deg,color-mix(in srgb,var(--t-ink) 36%,transparent) 55%,transparent);}
  .pg-split{grid-template-columns:minmax(0,1fr);gap:48px;}
  .pg-index{position:static;}
  .pg-index ol{border-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--t-line);}
  .pg-index li{border-bottom:1px solid var(--t-line);}
  .pg-index a{display:flex;align-items:center;min-height:48px;box-sizing:border-box;padding:8px 2px;}
  .pg-index a.on::before,.pg-index a.on::after{display:none;}
}

/* ---------------- phone: one column, nothing cramped ---------------- */
@media(max-width:760px){
  .pg-head .pg-in{grid-template-columns:minmax(0,1fr);gap:32px;}
  .pg-rows{padding:4px 20px;}
  .pg-rows li{grid-template-columns:2.6em minmax(0,1fr);padding:22px 0;}
  .pg-rows li p{grid-column:2;}
  .pg-pillars .pg-card{padding:26px 22px 28px;}
  .pg-turn{grid-template-columns:minmax(0,1fr);padding:26px 22px;}
  .pg-turn .go{justify-self:start;}
  /* the timeline turns vertical: the horizon becomes a path down the left */
  .pg-tl{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .pg-tl li{padding:0 0 32px 36px;}
  .pg-tl li::before,.pg-tl li:nth-child(n)::before{top:14px;bottom:-14px;left:6px;right:auto;width:1.5px;height:auto;background:color-mix(in srgb,var(--t-ink) 36%,transparent);}
  .pg-tl li:last-child::before{display:none;}
  .pg-tl li::after{top:8px;}
  .pg-tl li:last-child::after{top:-7px;left:-15px;}
  .pg-tl .n{max-width:none;}
  .pg-tiles{grid-template-columns:minmax(0,1fr);}
  .pg-fields > div{grid-template-columns:minmax(0,1fr);}
  .pg-qa > div{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:480px){
  .pg-index ol{grid-template-columns:minmax(0,1fr);}
  html[data-surface="dark"] .pg-toc{padding:6px 16px;}
}

/* ---------------- print: the text, on paper ---------------- */
@media print{
  .nav,.foot,.pg-index,.pg-turn,.pg-horizon,.pg-band-img,#bg{display:none !important;}
  .pg-split{grid-template-columns:minmax(0,1fr);}
  .pg-band::before{display:none;}
  html[data-surface="dark"] .pg,.pg .pg-dark{--t-ink:#26241f;--t-soft:#5a544a;--t-acc:var(--accent-d);--t-panel:transparent;--t-lift:none;--t-blur:none;--t-shadow:none;}
  .pg--photo{background:none;}
  .pg-card,.pg-tl li,.pg-qa > div{break-inside:avoid;}
}

/* ================= PAGES3: the guide's byline, and /about joins the family ================= */

/* guide: who contributes, under the head, before the timeline */
.pg-byline{margin-bottom:clamp(40px,7vh,72px);}
.pg-byline p{display:flex;align-items:center;gap:18px;margin:0;padding:22px clamp(22px,3vw,32px);
  font-family:var(--serif);font-size:clamp(19px,1.6vw,21px);line-height:1.55;color:var(--t-ink);
  border-left:3px solid var(--t-glow);}
.pg-byline .sprig{flex:none;width:34px;height:34px;color:var(--t-acc);margin:0;}
.pg-byline a{color:var(--t-acc);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;white-space:nowrap;}
.pg-byline a:hover{text-decoration-thickness:3px;}

/* the four turnings' own accents, so a page can show all four at once. The colours are site.css :root tokens (one source). */
.pg [data-t]{--tc-now:var(--tc-d);}
html[data-surface="dark"] .pg [data-t],.pg .pg-dark [data-t]{--tc-now:var(--tc);}
.pg [data-t="december-solstice"]{--tc:var(--accent-december-solstice);--tc-d:var(--accent-d-december-solstice);}
.pg [data-t="march-equinox"]{--tc:var(--accent-march-equinox);--tc-d:var(--accent-d-march-equinox);}
.pg [data-t="june-solstice"]{--tc:var(--accent-june-solstice);--tc-d:var(--accent-d-june-solstice);}
.pg [data-t="september-equinox"]{--tc:var(--accent-september-equinox);--tc-d:var(--accent-d-september-equinox);}

/* about: chapters. The number, kicker and heading hold the left column while the text runs on the right */
.pg-chapter{padding-top:var(--pg-sec);}
.pg-chapter + .pg-chapter{padding-top:clamp(56px,9vh,96px);}
.pg-chapter .pg-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,6vw,96px);align-items:start;}
.pg-chapter-head{position:sticky;top:var(--pg-nav);}
.pg-chapter-head .pg-kicker{margin:10px 0 14px;}
.pg-chapter h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,40px);line-height:1.06;letter-spacing:-.01em;color:var(--t-ink);text-wrap:balance;text-shadow:var(--t-lift);}
.pg-chapter-body p{font-family:var(--serif);font-size:clamp(18px,1.3vw,19px);line-height:1.72;color:var(--t-ink);max-width:var(--pg-measure);}
.pg-chapter-body p + p{margin-top:18px;}
.pg-chapter-body .pg-pull{font-size:clamp(21px,1.9vw,25px);line-height:1.5;}

/* about 03: the orbit, drawn. Four marked points, one fixed tilt, a Sun that sees none of it */
.pg-orbit{display:block;width:100%;max-width:380px;margin-top:36px;overflow:visible;}
.pg-orbit .path{fill:none;stroke:var(--t-line);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round;}
.pg-orbit .sun{fill:var(--t-glow);}
.pg-orbit .halo{fill:var(--t-glow);opacity:.16;}
.pg-orbit .earth{fill:var(--t-ground);stroke:var(--t-ink);stroke-width:1.5;}
.pg-orbit .day{fill:color-mix(in srgb,var(--t-glow) 40%,var(--t-ground));}
.pg-orbit .axis{stroke:var(--t-ink);stroke-width:1.5;stroke-linecap:round;}
.pg-orbit .glyph{color:var(--tc-now);}
.pg-orbit .glyph *{vector-effect:non-scaling-stroke;}

/* about 04: the calendar band. Four stops on a horizon; the first is the sun coming up */
.pg-band-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(32px,5vw,72px);margin-bottom:clamp(44px,7vh,72px);}
.pg-band-copy p{font-family:var(--serif);font-size:clamp(18px,1.4vw,20px);line-height:1.66;color:var(--t-ink);max-width:48ch;text-shadow:var(--t-lift);}
.pg-band .pg-num{text-shadow:var(--t-lift);}
.pg-band .pg-kicker{margin:10px 0 14px;}
.pg-turnings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.pg-turnings li{position:relative;padding:62px 24px 0 0;}
.pg-turnings li::before{content:"";position:absolute;top:30px;left:0;right:0;height:1.5px;background:color-mix(in srgb,var(--t-ink) 36%,transparent);}
.pg-turnings li:last-child::before{background:linear-gradient(90deg,color-mix(in srgb,var(--t-ink) 36%,transparent) 40%,transparent);}
.pg-turnings .g{position:absolute;top:10px;left:-4px;width:40px;height:40px;color:var(--tc-now);border-radius:50%;
  background:radial-gradient(circle,var(--t-ground) 0 46%,transparent 47%);filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));}
.pg-turnings .g svg{width:100%;height:100%;display:block;}
.pg-turnings li:first-child .g{display:none;}
.pg-turnings li:first-child::after{content:"";position:absolute;top:-2px;left:-26px;width:64px;height:32px;
  background:radial-gradient(circle 12px at 50% 100%,var(--t-glow) 0 62%,color-mix(in srgb,var(--t-glow) 55%,transparent) 76%,transparent 86%),
             radial-gradient(32px 32px at 50% 100%,color-mix(in srgb,var(--t-glow) 40%,transparent),transparent 80%);}
.pg-turnings .d{display:block;font-family:var(--display);font-weight:800;font-size:clamp(22px,2vw,28px);line-height:1.08;letter-spacing:-.01em;color:var(--t-ink);text-shadow:var(--t-lift);}
.pg-turnings li:first-child .d{color:var(--t-glow);}
.pg-turnings .l{display:block;margin-top:10px;font-family:var(--mono);font-size:16px;letter-spacing:.06em;color:var(--t-soft);font-variant-numeric:tabular-nums;text-shadow:var(--t-lift);}
.pg-turnings .n{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.45;color:var(--tc-now);text-shadow:var(--t-lift);}
.pg-turnings .tag{display:inline-block;margin-top:14px;padding:5px 10px;border-radius:var(--r-sm);font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-ink);border:1px solid color-mix(in srgb,var(--t-glow) 60%,transparent);background:color-mix(in srgb,var(--t-glow) 16%,transparent);}
.pg-band .pg-fine{margin-top:clamp(40px,6vh,56px);font-family:var(--mono);font-size:16px;line-height:1.7;color:var(--t-soft);max-width:82ch;text-shadow:var(--t-lift);}

/* about 05: the editor's signature, with the one face on the site */
.pg-sig{display:flex;align-items:center;gap:20px;margin-top:36px;padding:18px 26px 18px 18px;width:max-content;max-width:100%;box-sizing:border-box;}
.pg-sig img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px var(--t-ground),0 0 0 4.5px color-mix(in srgb,var(--t-glow) 60%,transparent);}
.pg-sig strong{display:block;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1;color:var(--t-ink);}
.pg-sig span{display:block;margin-top:6px;font-family:var(--mono);font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-acc);}

/* two page turns side by side */
.pg-turns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}

@media(max-width:1000px){
  .pg-turnings{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px;}
  .pg-turnings li:nth-child(2)::before{background:linear-gradient(90deg,color-mix(in srgb,var(--t-ink) 36%,transparent) 40%,transparent);}
  .pg-turns{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:760px){
  .pg-byline p{align-items:flex-start;}
  .pg-byline .sprig{width:28px;height:28px;margin-top:2px;}
  .pg-byline a{white-space:normal;}
  .pg-chapter .pg-in{grid-template-columns:minmax(0,1fr);}
  .pg-chapter-head{position:static;}
  .pg-orbit{max-width:320px;margin:28px 0 8px;}
  .pg-band-copy{grid-template-columns:minmax(0,1fr);}
  .pg-turnings{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .pg-turnings li{padding:4px 0 36px 60px;min-height:40px;}
  .pg-turnings li::before,.pg-turnings li:nth-child(n)::before{top:44px;bottom:-4px;left:19px;right:auto;width:1.5px;height:auto;background:color-mix(in srgb,var(--t-ink) 36%,transparent);}
  .pg-turnings li:last-child::before{display:none;}
  .pg-turnings .g{top:0;left:0;}
  .pg-turnings li:first-child::after{top:2px;left:-12px;}
  .pg-sig{width:100%;}
}
@media print{
  .pg-chapter-head{position:static;}
  .pg-chapter,.pg-turnings li,.pg-sig{break-inside:avoid;}
}

/* the about page's calendar band sits between two chapters */
.pg--about .pg-band{margin-top:var(--pg-sec);}