/* The section pages (about, work, services, press, blog, speaking, contact, First Principles and the book).
   Everything else they show is the homepage's own chapters, styled by home2.css and moved by home2.js; this
   file holds only what the homepage does not have. Black page, near-white only for long reading, red for
   words that carry the signal, no grey lines, no eyebrow labels (her rules) */

/* a page's name on its cover runs shorter than her name, so it sits a little larger and holds one line */
.cover--page .cover__name { font-size: clamp(44px, 7vw, 124px); }
.cover--page .cover__name span span { white-space: nowrap; }
.cover--page .cover__actions { margin-top: 44px; }
@media (max-width: 900px) { .cover--page .cover__name { font-size: clamp(36px, 11vw, 64px); } .cover--page .cover__name span span { white-space: normal; } }

/* the ways in (services, contact): a title, one line, one button each */
.ways, .sources, .photos { padding: 16vh var(--gutter) 6vh; }
.ways__head { display: grid; gap: 22px; justify-items: center; text-align: center; margin-bottom: 9vh; }
.ways__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(28px, 3vw, 56px); }
.way, .source { display: grid; gap: 14px; align-content: start; }
.way .title, .source .title { margin-bottom: 0; }
.way p, .source p { color: var(--stone); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; }
.way .actions { margin-top: 10px; }

/* five sources of value: an energy circuit (her ask, 11 Oct: "make it much more animated", the section looked
   standard). As the chapter arrives a red wire charges left to right with a spark riding it; as the spark reaches
   each source its node flares, the title flashes and its line lights. pages.js arms it (.sources--armed) and
   lights it (.is-live, then .is-lit on each source); without the script, or with reduced motion, all is lit. On
   narrow screens the circuit runs down the left edge */
.sources__grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 3vw, 56px); padding-top: 52px; }
.sources__wire { position: absolute; top: 18px; left: 6px; right: 6px; height: 2px; background: linear-gradient(90deg, var(--red), var(--red-hi) 60%, #ff6b85); box-shadow: 0 0 14px rgb(204 31 63 / 0.55); transform-origin: left center; }
.sources__spark { position: absolute; top: 19px; left: 6px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #ff8aa0 40%, rgb(204 31 63 / 0) 70%); box-shadow: 0 0 30px 10px rgb(204 31 63 / 0.5); opacity: 0; pointer-events: none; }
.source { position: relative; display: grid; gap: 14px; align-content: start; }
.source__node { position: absolute; top: -40px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--red-hi); box-shadow: 0 0 0 5px rgb(204 31 63 / 0.16), 0 0 20px 4px rgb(204 31 63 / 0.45); }
.sources--armed .sources__wire { transform: scaleX(0); transition: transform 2.9s cubic-bezier(0.45, 0, 0.25, 1); }
.sources--armed.is-live .sources__wire { transform: scaleX(1); }
.sources--armed.is-live .sources__spark { animation: spark-run 2.9s cubic-bezier(0.45, 0, 0.25, 1) forwards; }
@keyframes spark-run { 0% { left: 6px; opacity: 1; } 94% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
.sources--armed .source__node { background: var(--ink); box-shadow: inset 0 0 0 2px rgb(204 31 63 / 0.45); transition: background 0.4s, box-shadow 0.6s, transform 0.6s var(--ease); }
.sources--armed .source.is-lit .source__node { background: var(--red-hi); box-shadow: 0 0 0 6px rgb(204 31 63 / 0.18), 0 0 28px 8px rgb(204 31 63 / 0.55); transform: scale(1.3); }
.sources--armed .source .title { transition: color 0.6s, text-shadow 0.6s; }
.sources--armed .source.is-lit .title { animation: source-flash 1.5s ease forwards; }
@keyframes source-flash { 0% { color: var(--bone); } 22% { color: #fff; text-shadow: 0 0 18px rgb(255 107 133 / 0.9), 0 0 2px #fff; } 100% { color: var(--bone); text-shadow: none; } }
.sources--armed .source p { opacity: 0.18; transform: translateY(12px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.sources--armed .source.is-lit p { opacity: 1; transform: none; }
.source:hover .source__node { transform: scale(1.45); }
@media (max-width: 1100px) {
  .sources__grid { grid-template-columns: 1fr; padding-top: 0; padding-left: 40px; gap: 44px; max-width: 620px; margin-inline: auto; }
  .sources__wire { top: 6px; bottom: 6px; left: 6px; right: auto; width: 2px; height: auto; transform-origin: center top; }
  .sources--armed .sources__wire { transform: scaleY(0); }
  .sources--armed.is-live .sources__wire { transform: scaleY(1); }
  .sources__spark { top: 6px; left: 7px; }
  @keyframes spark-run { 0% { top: 6px; opacity: 1; } 94% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
  .source__node { top: 6px; left: -40px; }
}

/* the book's thesis, in the quotation italic */
.thesis { padding: 20vh var(--gutter) 14vh; display: grid; justify-items: center; text-align: center; }
.thesis p { font-family: var(--italic); font-style: italic; font-size: clamp(26px, 3.1vw, 50px); line-height: 1.3; max-width: 32ch; color: var(--bone); text-wrap: pretty; }
.thesis footer { margin-top: 30px; font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track); font-size: 13px; color: var(--ash); }

/* bios: long reading, so on near-white */
.bios { padding: 16vh var(--gutter) 12vh; }
.bios > .display { margin-bottom: 8vh; }
.bios__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 120px); margin-bottom: 10vh; }
.bio { display: grid; gap: 16px; align-content: start; }
.bio p { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; }
.bios__long { margin-bottom: 0; }
@media (max-width: 900px) { .bios__grid { grid-template-columns: 1fr; } }

/* photos: tap to see full screen (the homepage's zoom dialog) */
.photos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.photos__item { display: block; padding: 0; border: 0; background: var(--ink-2); cursor: zoom-in; aspect-ratio: 4 / 5; overflow: hidden; }
.photos__item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.2s var(--ease); }
.photos__item:hover img { transform: scale(1.04); }
.photos__item:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 4px; }
@media (max-width: 760px) { .photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the blog: editions and posts in one flowing feed, with a filter */
.feed { padding: 16vh var(--gutter) 10vh; }
.feed__head { display: grid; gap: 22px; justify-items: center; text-align: center; margin-bottom: 8vh; }
.feed__filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.feed__filter .is-on { background: var(--red); box-shadow: none; }
/* editions first, a row of their own; then the posts in rows of three, read left to right in her order */
.feed__editions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(24px, 2.6vw, 44px); margin-bottom: clamp(48px, 7vh, 96px); }
.feed__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 56px) clamp(24px, 2.6vw, 44px); align-items: start; }
@media (max-width: 1000px) { .feed__posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feed__posts { grid-template-columns: 1fr; } }
.feed__editions[hidden], .feed__posts[hidden] { display: none; }
.feed__cell[hidden] { display: none; }
.feed .edition { display: grid; }
/* the full column, never the homepage strip's min-content width (on phones that rule shrank each post to a sliver
   and stacked its numbers one per line; her report, 15 Oct) */
.feed .post { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.feed .post figcaption { flex-wrap: wrap; }
.feed .post .phone { width: 100%; height: auto; aspect-ratio: 9 / 15; }
.feed .post .phone img { position: absolute; top: 30px; left: 0; width: 100%; height: auto; padding-top: 0; transform: none; }
.feed__more { justify-content: center; margin-top: 4vh; }

/* a long page name (the book's) steps down a size so each line holds whole */
.cover--long .cover__name { font-size: clamp(34px, 4.5vw, 78px); letter-spacing: 0.1em; }
@media (max-width: 900px) { .cover--long .cover__name { font-size: clamp(28px, 8vw, 46px); } }

/* /firstprinciples lists every edition: the newest is the large card over two rows, the rest fill in beside it */
.fp--newsletter .fp__editions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp--newsletter .edition--lead { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) { .fp--newsletter .fp__editions { grid-template-columns: 1fr; } .fp--newsletter .edition--lead { grid-column: auto; grid-row: auto; } }
.fp--book { padding-top: 6vh; }

/* /about: the black card stands alone, her photo on the left and the words on the right (her call, 12 Oct) */
.lab { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: 16vh var(--gutter) 12vh; }
.lab__copy { display: grid; gap: 18px; align-content: start; }
.lab__copy .about__lead { font-size: clamp(30px, 3.6vw, 60px); }
.lab__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8); }
.lab__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1.4s var(--ease); }
.lab__photo:hover img { transform: scale(1.03); }
/* the photo on the left, the words on the right: the header above runs the other way, so the page alternates */
.lab__photo { order: -1; }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr; } }
/* her past alone: one column at reading width */
.ledger--past .ledger__then-now { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-bottom: 0; }
/* First Principles in brief */
.fp--brief .fp__brief { max-width: 60ch; margin-top: 24px; color: var(--stone); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; }
/* Messaging Studio: her paragraph over the brands, on the white panel */
.ledger--ms .studio__about { max-width: 62ch; margin: 0 auto 6vh; padding-inline: var(--gutter); box-sizing: content-box; text-align: center; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; color: #222; }

/* /contact: three doors, the three worlds' cards (figure steps forward and leans to the cursor via home2.js) */
.doors .doors__grid { max-width: 1240px; margin-inline: auto; }
.doors .world figure { aspect-ratio: 3 / 4; }
.doors .world { gap: 12px; }
.doors .world p { color: var(--stone); font-size: 16px; line-height: 1.5; }
.doors .world .actions { margin-top: 6px; }
@media (max-width: 760px) { .doors .doors__grid { grid-template-columns: 1fr; } }

/* /contact: the email box with First Principles #1 beside it */
.subband--edition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.subband--edition .subband__lead { display: grid; gap: 34px; }
.subband--edition .edition__img { aspect-ratio: 3 / 2; }

/* /contact, last: the /messages form, inline (the page's own .msg is a whole page tall) */
.msg--inline { min-height: 0; padding: 12vh var(--gutter); margin-inline: auto; gap: 5vh; }
.msg--inline .display { font-size: clamp(30px, 3.4vw, 54px); }

/* Next: one way on at the end of a page, a wide photo and the next page's name; the photo eases forward on hover */
.next { padding: 6vh var(--gutter) 0; }
.next__link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px); text-decoration: none; color: var(--bone); }
.next__photo { aspect-ratio: 16 / 10; overflow: hidden; margin: 0; }
.next__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 1.4s var(--ease); filter: grayscale(0.35) brightness(0.8); }
.next__link:hover .next__photo img, .next__link:focus-visible .next__photo img { transform: scale(1.04); filter: none; }
.next__copy { display: grid; gap: 14px; justify-items: start; }
.next__name { font-size: clamp(30px, 3.6vw, 60px); }
.next__line { color: var(--stone); font-size: clamp(17px, 1.3vw, 20px); }
.next__go { display: inline-flex; font-size: 34px; transition: transform 0.6s var(--ease); }
.next__go .tri { width: 0.5em; height: 0.58em; }
.next__link:hover .next__go { transform: translateX(12px); }
@media (max-width: 900px) { .next__link { grid-template-columns: 1fr; } }

/* the newsletter band after a reading page's header: its name and line on the left, the subscribe box on the right */
.subband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(28px, 5vw, 96px); align-items: center; padding: 10vh var(--gutter); }
.subband .cover__sub { margin-top: 0; }
.subband .fp__tagline { margin-top: 14px; color: var(--stone); font-size: clamp(17px, 1.3vw, 20px); }
@media (max-width: 900px) { .subband, .subband--edition { grid-template-columns: 1fr; } }

/* /testimonials: every testimonial whole, the homepage's cards (.voice) in columns */
.tlist { padding: 12vh var(--gutter) 4vh; }
.tlist .display { margin-bottom: 5vh; }
.tlist__grid { columns: 3 300px; column-gap: clamp(18px, 2vw, 32px); }
.tlist .voice { break-inside: avoid; margin: 0 0 clamp(18px, 2vw, 32px); }
.tlist .voice blockquote { font-size: clamp(17px, 1.15vw, 20px); }
.tlist .voice blockquote p { margin: 0 0 0.8em; }
.tlist .voice blockquote p:last-child { margin-bottom: 0; }
.tcard__role { display: block; margin-top: 6px; color: var(--stone); font-family: var(--body, inherit); text-transform: none; letter-spacing: 0; font-size: 14px; }