/* ==========================================================================
   About. Cream down to the waterline, then the floor.

   Values from reference/build-source/about.html, the render the signed off
   MattHart_About_FINAL.pdf was made from, scoped under .ab. Its inline styles
   are in about-gen.css, which loads after this file.
   ========================================================================== */

.ab { --rail-x: 109px; --rail-w: 3px; --hair: #DCD6C2; --soft: #2C2E30 }

.ab .n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
         text-transform: uppercase; color: var(--mut) }
.ab section { padding: 0 120px 0 230px; position: relative }
.ab h2 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.1 }
.ab h4 { margin: 0 }
.ab .hero { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; max-width: 820px }
.ab .q { font-size: 56px; font-weight: 900; letter-spacing: -2px; line-height: 1.05; max-width: 880px; margin-top: 22px }
.ab .lede { font-size: 19px; line-height: 1.55; max-width: 740px; margin-top: 22px }
.ab .lede.w { max-width: 880px }
.ab .lede b { font-weight: 700 }
.ab .pull { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; max-width: 900px;
            margin-top: 44px; display: inline-block; border-bottom: 4px solid var(--yellow); padding-bottom: 7px }
.ab .pullwrap { text-decoration: none; color: inherit; display: inline-block }
.ab .bookblock { margin-top: 80px }
.ab .book { display: inline-block; background: var(--yellow); color: var(--ink); text-decoration: none;
            font-size: 22px; font-weight: 800; letter-spacing: -.4px; padding: 19px 34px; border-radius: 2px }
.ab .bookwhy { font-size: 17px; line-height: 1.5; color: var(--cream); margin-top: 22px; max-width: 520px }
.ab .olink { font-family: var(--mono); font-size: .78em; letter-spacing: .06em; color: var(--mut);
             text-decoration: none; border-bottom: 1px solid rgba(94,96,98,.45); padding-bottom: 1px }
.ab .deep .olink { color: rgba(250,246,233,.62); border-bottom-color: rgba(250,246,233,.3) }
.ab .leaves { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--mut); margin-top: 18px }
.ab .deep .leaves { color: rgba(250,246,233,.55) }
.ab .half { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; max-width: 1250px; margin-top: 44px }
.ab .half > div { border-top: 3px solid var(--ink); padding-top: 20px }
.ab .half h4 { font-size: 27px; font-weight: 800; letter-spacing: -.8px; margin-bottom: 14px }
.ab .half p { font-size: 18px; line-height: 1.5; color: var(--soft) }
.ab .halfpix { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; max-width: 1250px; margin-top: 54px }
.ab .halfpix .pic { height: 250px; display: flex; align-items: flex-end }
.ab .halfpix .pic img, .ab .halfpix .pic svg { max-width: 100%; max-height: 250px; display: block; height: auto }
.ab .blink { color: inherit; text-decoration: none; border-bottom: 3px solid var(--yellow); padding-bottom: 5px;
             box-decoration-break: clone; -webkit-box-decoration-break: clone }
.ab .halfpix .cap { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--mut);
                    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair) }
.ab .tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; max-width: 1250px; margin-top: 40px }
.ab .tri > div { border-top: 1px solid var(--hair); padding-top: 18px }
.ab .tri b { font-size: 30px; font-weight: 900; letter-spacing: -.9px; display: block; margin-bottom: 10px }
.ab .tri span { font-size: 18px; line-height: 1.45; color: var(--soft) }
.ab .proof { margin-top: 150px; max-width: 1250px; border-top: 1px solid var(--hair);
             border-bottom: 1px solid var(--hair); padding: 26px 0 30px }
.ab .proof img { width: 100%; display: block; opacity: .88 }
.ab .port { position: absolute; right: 120px; top: 0; width: 430px }
.ab .as1 .port { top: 212px }   /* the render's 196, moved with the section */
.ab .port img { width: 100%; display: block; filter: grayscale(1) contrast(1.04); border-radius: 6px }

/* the floor. Body copy full cream: the PDF, and the updated render, have it so */
.ab .deep { background: var(--floor); color: var(--cream) }
.ab .deep h2 { color: var(--cream) }
.ab .deep .lede { opacity: 1; color: var(--cream) }
.ab .deep .n { color: rgba(250,246,233,.5) }
.ab .where { max-width: 1100px; margin-top: 40px }
.ab .where .r { display: grid; grid-template-columns: 330px 1fr; gap: 34px; padding: 16px 0;
                border-top: 1px solid rgba(250,246,233,.16); align-items: baseline }
.ab .where .r:last-child { border-bottom: 1px solid rgba(250,246,233,.16) }
.ab .where .r b { font-size: 21px; font-weight: 800; letter-spacing: -.5px; line-height: 1.4;
                  box-shadow: inset 0 -3px 0 var(--yellow); display: inline }
.ab .ab-door { color: inherit; text-decoration: none }
.ab .where .r span { font-size: 17px; line-height: 1.45; opacity: 1 }
.ab .where .r em { font-family: var(--mono); font-size: 14px; font-style: normal; letter-spacing: .06em;
                   opacity: .7; display: block; margin-top: 7px }

/* the waterline between 05 and 06, the full width of the window */
.ab .ab-wl { padding: 110px 0 0 0; position: relative }
.ab .ab-wl-line { display: block; width: 100%; height: 34px }

/* ── the rail ────────────────────────────────────────────────────────────────
   As the render draws it: tick 48 above each eyebrow, numeral 8 above, the
   line breaking from 16 above the eyebrow to 34 below. Each section draws the
   piece above its own break and the piece below it, so the rail never depends
   on what sits next to it; the waterline block carries it straight through. */
.ab .as1 { --p: 316px; padding-bottom: 30px }   /* the render's 300, plus where its topbar ended */
.ab .as2, .ab .as3, .ab .as4, .ab .as5 { --p: 118px }
.ab .as6 { --p: 120px }
.ab .as7 { --p: 130px; padding-bottom: 70px }
.ab .as { padding-top: var(--p) }
.ab .as::before, .ab .as::after, .ab .ab-wl::before {
  content: ""; position: absolute; left: var(--rail-x); width: var(--rail-w); background: var(--yellow); z-index: 1 }
.ab .as::after { top: 0; height: calc(var(--p) - 16px) }
.ab .as1::after { top: calc(var(--p) - 46px); height: 30px }
.ab .as::before { top: calc(var(--p) + 34px); bottom: 0 }
.ab .ab-wl::before { top: 0; bottom: 0 }
.ab .ab-rail { position: absolute; left: 0; top: calc(var(--p) - 48px); width: 200px; height: 0; z-index: 3 }
.ab .rp-tick { position: absolute; left: 80px; top: 0; width: 60px; height: 17px }
.ab .rp-tick path { stroke: var(--yellow) }
.ab .ab-num { position: absolute; left: 78px; top: 40px; width: 64px; text-align: center;
              font-family: var(--mono); font-size: 18px; letter-spacing: .12em; color: var(--ink); opacity: .75 }
.ab .deep .ab-num { color: var(--cream) }

/* ── narrower than the render ─────────────────────────────────────────────── */
/* The portrait sits beside the opening only while there is room for both: the
   question runs to 880 wide from 230, so it needs the full 1600. Narrower, it
   comes into the flow above the eyebrow's words, where nothing can run under it. */
@media (max-width: 1559px) {
  .ab .port, .ab .as1 .port { position: static; width: 320px; max-width: 100%; margin: 0 0 30px 0 }
}
@media (max-width: 1100px) {
  .ab .half, .ab .halfpix { gap: 40px }
  .ab .where .r { grid-template-columns: 260px 1fr; gap: 24px }
}

/* ── the phone: one column, the rail a thin line down the edge ─────────────── */
@media (max-width: 900px) {
  .ab { --rail-x: 26px }
  .ab section { padding-left: 58px; padding-right: 22px }
  .ab .as1 { --p: 80px }
  .ab .as2, .ab .as3, .ab .as4, .ab .as5, .ab .as6 { --p: 88px }
  .ab .as7 { --p: 88px; padding-bottom: 56px }
  .ab .ab-wl { padding-top: 64px }
  .ab .rp-tick { left: 4px; width: 44px; height: 13px }
  .ab .ab-num { left: 0; width: 52px; top: 42px; font-size: 12px; letter-spacing: .06em }
  .ab .port { width: 100%; max-width: 320px }
  .ab .hero { font-size: 30px; letter-spacing: -.9px }
  .ab .q { font-size: 34px; letter-spacing: -1.1px }
  .ab h2 { font-size: 27px; letter-spacing: -.8px }
  .ab h2 br, .ab .q br, .ab .pull br { display: none }
  .ab .lede { font-size: 17px }
  .ab .pull { font-size: 23px; letter-spacing: -.6px }
  .ab .proof { margin-top: 64px }
  .ab .half, .ab .halfpix, .ab .tri { grid-template-columns: 1fr; gap: 30px }
  .ab .half h4 { font-size: 22px }
  .ab .half p, .ab .tri span { font-size: 16px }
  .ab .halfpix .pic { height: auto }
  .ab .tri b { font-size: 24px }
  .ab .where .r { grid-template-columns: 1fr; gap: 6px }
  .ab .where .r b { font-size: 19px }
  .ab .where .r span { font-size: 16px }
  .ab .book { font-size: 19px; padding: 16px 28px }
}
/* A yellow underline is always a link (Matt, 19 Sept): the two pull lines
   that go nowhere lose it; the Monk, which is a link, keeps it. */
.ab .pull { border-bottom-color: transparent }
.ab .pullwrap .pull { border-bottom-color: var(--yellow) }
/* the Cone's two ends, above it, deep on the left, shallow on the right. The
   picture box stacks them over the Cone and keeps the Cone's foot on the
   board's line opposite. */
.ab .halfpix .pic:has(.cone-ends) { flex-direction: column; justify-content: flex-end; align-items: flex-start }
.ab .halfpix .pic:has(.cone-ends) svg { max-height: calc(250px - 30px) }
.ab .cone-ends { display: flex; justify-content: space-between; gap: 16px; width: 100%; max-width: 587px;
                 margin-bottom: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--mut) }
.ab .cone-ends span:last-child { text-align: right }