/* msayla theme: the site chrome and the reading templates, built from the EssayPage, Editorial, Ledger and ImageFrame
   cards. Every color, size and space reads a token from tokens.css. Square corners; Fibonacci spacing. */

/* Browser surfaces carry the system too */
::selection { background: var(--marigold-field); color: var(--on-marigold); }
html { scroll-padding-top: var(--space-21); text-underline-offset: 0.2em; }
body { caret-color: var(--indigo); font-variant-numeric: proportional-nums; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { text-decoration-thickness: 1px; text-decoration-color: var(--indigo); transition: color var(--dur-quick) var(--ease-out), text-decoration-thickness var(--dur-quick) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }

.ms-mark { display: inline-block; width: 22px; height: 22px; color: var(--indigo); flex: none; }
.ms-mark svg { display: block; width: 100%; height: 100%; }

/* Skip link (WordPress prints it for <main>) */
.skip-link.screen-reader-text:focus { background: var(--surface); color: var(--ink); padding: var(--space-13) var(--space-21); z-index: 100; }

/* Header: nameplate left, nav right; a hairline below */
.ms-site-header { border-bottom: 1px solid var(--line); }
.ms-head { max-width: var(--page-max); margin: 0 auto; padding: var(--space-21); display: flex; align-items: center; justify-content: space-between; gap: var(--space-21); flex-wrap: wrap; }
.ms .ms-head-home { text-decoration: none; color: var(--ink); font: 700 18px/1 var(--font-text); }
.ms-head-home:hover { color: var(--ink); }
.ms-nav ul, .ms-foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-21); flex-wrap: wrap; }
.ms-nav a, .ms-foot-nav a { font: 600 15px/1.3 var(--font-text); color: var(--ink); text-decoration: none; padding: var(--space-5) 0; border-bottom: 2px solid transparent; transition: border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.ms-nav a:hover, .ms-foot-nav a:hover { color: var(--indigo); border-bottom-color: var(--indigo); }
.ms-nav a[aria-current="page"] { border-bottom-color: var(--marigold); }
.ms-lang { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-21) var(--space-13); display: flex; justify-content: flex-end; gap: var(--space-13); font: 600 13px/1 var(--font-text); }
.ms-lang a { color: var(--ink-muted); text-decoration: none; }
.ms-lang a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--marigold); text-decoration-thickness: 2px; }

/* Main column rhythm */
.ms-main { padding-top: var(--space-55); padding-bottom: var(--space-89); }

/* EssayPage */
.ms-essay-head { margin-bottom: var(--space-34); }
.ms-essay-title { font: 800 64px/0.98 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space-21); }
.ms-essay-meta { gap: var(--space-21) !important; align-items: center; padding: var(--space-13) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ms-essay-meta .wp-block-post-date { font: 400 13px/1.4 var(--font-figures); font-variation-settings: "wdth" 87; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.ms-essay-kind, .ms-essay-kind a { font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); }
.ms-curated { margin: var(--space-13) 0 0; font: 400 15px/1.5 var(--font-text); color: var(--ink-muted); border-top: 2px solid var(--marigold); padding-top: var(--space-8); max-width: 34em; }
.ms-essay-body { font: 400 18px/1.62 var(--font-text); }
.ms-essay-body > * + * { margin-block-start: 1.05em; }
.ms-essay-body p { margin: 0 0 1.05em; }
.ms-essay-body h2 { font: 700 29px/1.12 var(--font-display); margin-top: var(--space-55); }
.ms-essay-body h3 { font: 700 23px/1.2 var(--font-display); margin-top: var(--space-34); }
.ms-essay-body img, .ms-essay-body figure { margin-block: var(--space-34); }
.ms-essay-body figure img { margin: 0; display: block; }
.ms-essay-body figcaption, .ms-essay-body .wp-caption-text { font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); margin-top: var(--space-13); }
.ms-essay-body .wp-caption { max-width: 100%; }
.ms-essay-body blockquote { margin: var(--space-34) 0; padding: 0; border: 0; font: italic 500 23px/1.35 var(--font-display); }
.ms-essay-body blockquote p { margin: 0 0 var(--space-8); }
.ms-essay-body iframe, .ms-essay-body video, .ms-essay-body embed, .ms-essay-body object { display: block; max-width: 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.ms-essay-body ul, .ms-essay-body ol { padding-left: 1.2em; }
.ms-essay-body li + li { margin-top: var(--space-8); }
.ms-essay-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-55) 0; }
.ms-essay-body .alignleft { float: left; margin: var(--space-5) var(--space-21) var(--space-13) 0; max-width: 50%; }
.ms-essay-body .alignright { float: right; margin: var(--space-5) 0 var(--space-13) var(--space-21); max-width: 50%; }
.ms-essay-body .aligncenter { display: block; margin-inline: auto; }
.ms-essay-body::after { content: ""; display: block; clear: both; }

/* ImageFrame: the featured image of an image post leads, square corners, natural color */
.ms-essay-photo { margin: 0 auto var(--space-34) !important; }
.ms-essay-photo img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: var(--surface-raised); }

/* Post formats: say what they are */
.ms-format-quote .ms-essay-body { font: italic 500 29px/1.3 var(--font-display); }
.ms-format-quote .ms-essay-body blockquote { font-size: inherit; }
.ms-format-link .ms-essay-body a { font-weight: 600; }
.ms-format-image .ms-essay-body { font-size: 18px; }

/* Divi fallback output */
.ms-divi-button a { display: inline-flex; padding: 13px 21px; border: 1.5px solid var(--indigo); color: var(--ink); text-decoration: none; font: 600 15px/1 var(--font-text); }
.ms-divi-button a:hover { background: var(--indigo); color: var(--surface); }

/* End of an essay: tags, the mark, one link */
.ms-essay-foot { margin-top: var(--space-55); }
.ms-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); font: 400 14px/1.4 var(--font-text); }
.ms-tags a { display: inline-block; padding: var(--space-3) var(--space-8); border: 1px solid var(--line-strong); color: var(--ink-muted); text-decoration: none; }
.ms-tags a:hover { color: var(--ink); border-color: var(--ink); }
.ms-tags .wp-block-post-terms__separator { display: none; }
.ms-end { display: flex; gap: var(--space-21); align-items: center; margin: var(--space-34) 0 0; font: 700 23px/1.2 var(--font-display); }
.ms-end a { color: var(--indigo); }

/* Related writing: a ledger of three */
.ms-related { margin-top: var(--space-89); border-top: 1.5px solid var(--ink); padding-top: var(--space-21); }
.ms-related h2 { font: 700 29px/1.12 var(--font-display); margin: 0 0 var(--space-13); }

/* Older and newer */
.ms-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-34); margin-top: var(--space-55); padding-top: var(--space-21); border-top: 1px solid var(--line); }
.ms-prevnext .ms-next { text-align: right; }
.ms-prevnext > div { font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); }
.ms-prevnext a { display: block; margin-top: var(--space-5); font: 700 18px/1.25 var(--font-display); color: var(--ink); text-decoration: none; }
.ms-prevnext a:hover { color: var(--indigo); text-decoration: underline; }

/* Archives: Ledger rows */
.ms-archive-head { margin-bottom: var(--space-34); }
.ms-archive-title, .ms-lead { font: 800 64px/0.98 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space-13); }
.ms-lead { font-size: 76px; line-height: 0.96; max-width: 12em; }
.ms-archive-sum { font: 400 16px/1.55 var(--font-text); color: var(--ink-muted); margin: 0; }
.ms-archive-sum .ms-fig { font-size: 14px; }
.ms-archive-desc { max-width: var(--measure); }
.ms-index-heading { font: 700 29px/1.12 var(--font-display); margin: var(--space-55) 0 var(--space-13); }
.ms-index-rows, .ms-related-rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.ms-index-rows > li, .ms-related-rows > li { border-bottom: 1px solid var(--line); }
.ms-index-row, .ms-related-row { display: grid; grid-template-columns: 144px minmax(0, 1fr) 174px; gap: var(--space-13); align-items: baseline; padding: var(--space-13) 0; }
.ms-index-date, .ms-related-date { font: 400 13px/1.4 var(--font-figures); font-variation-settings: "wdth" 87; font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.ms-index-title, .ms-related-title { font: 700 18px/1.35 var(--font-display) !important; margin: 0 !important; }
.ms-index-title a, .ms-related-title a { color: var(--ink); text-decoration: none; }
.ms-index-title a:hover, .ms-related-title a:hover { color: var(--indigo); text-decoration: underline; }
.ms-index-kind, .ms-index-kind a, .ms-related-kind { font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); text-decoration: none; text-align: right; }
.ms-index-empty { color: var(--ink-muted); }
.ms-pages { margin-top: var(--space-34); font: 600 15px/1 var(--font-text); }
.ms-pages a, .ms-pages span { color: var(--ink); text-decoration: none; padding: var(--space-8); }
.ms-pages .current { border-bottom: 2px solid var(--marigold); }
.ms-pages .page-numbers { font-family: var(--font-figures); font-size: 13px; }

/* Search form */
.ms-search .wp-block-search__label { font: 600 14px/1.3 var(--font-text); }
.ms-search .wp-block-search__input, .ms-form input, .ms-form textarea, .ms-form select { font: 400 16px/1.4 var(--font-text); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: var(--space-13); }
.ms-search .wp-block-search__input:focus, .ms-form :is(input, textarea, select):focus { border-color: var(--indigo); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 28%, transparent); }
.ms-search .wp-block-search__button, .ms-form button { font: 600 15px/1 var(--font-text); padding: 13px 21px; border: 1.5px solid var(--indigo); background: var(--indigo); color: var(--surface); border-radius: 0; cursor: pointer; transition: background var(--dur-quick) var(--ease-out); }
.ms-search .wp-block-search__button:hover, .ms-form button:hover { background: var(--ink); border-color: var(--ink); }

/* Forms: the collaboration invitation and the newsletter */
.ms-form { display: grid; gap: var(--space-21); margin-top: var(--space-34); }
.ms-form label { display: grid; gap: var(--space-5); font: 600 14px/1.3 var(--font-text); }
.ms-form .ms-hint { font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); }
.ms-form textarea { min-height: 8em; resize: vertical; }
.ms-form .ms-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* The stage answers on /work-with-me/: the home form's four boxes, on paper */
.ms-form .ms-stages { border: 0; margin: 0; padding: 0; min-width: 0; }
.ms-form .ms-stages legend { font: 600 14px/1.3 var(--font-text); margin-bottom: var(--space-5); padding: 0; }
.ms-stage-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ms-form label.ms-stage { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-13); min-height: 44px; cursor: pointer; border-right: 1px solid var(--line); background: var(--surface-raised); }
.ms-form label.ms-stage:last-child { border-right: 0; }
.ms-form label.ms-stage small { font: 400 12.5px/1.35 var(--font-text); color: var(--ink-muted); }
.ms-form label.ms-stage input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.ms-form label.ms-stage:has(input:checked) { background: var(--surface); box-shadow: inset 0 -3px 0 var(--marigold); }
.ms-form label.ms-stage:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (max-width: 760px) {
  .ms-stage-row { grid-template-columns: 1fr 1fr; }
  .ms-form label.ms-stage:nth-child(2) { border-right: 0; }
  .ms-form label.ms-stage:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.ms-form-status { padding: var(--space-13) var(--space-21); background: var(--surface-raised); font: 400 16px/1.55 var(--font-text); }
.ms-form-status.is-error { border-left: 0; outline: 1.5px solid var(--spark); }
.ms-news { max-width: var(--page-max); margin: 0 auto; padding: var(--space-55) var(--space-21) var(--space-34); display: grid; grid-template-columns: 61.8fr 38.2fr; gap: var(--space-34); align-items: end; }
.ms-news h2 { font: 700 29px/1.12 var(--font-display); margin: 0 0 var(--space-8); }
.ms-news p { margin: 0; color: var(--ink-muted); font-size: 16px; }
.ms-news form { display: flex; gap: var(--space-8); flex-wrap: wrap; margin: 0; }
.ms-news input[type="email"] { flex: 1 1 13em; min-width: 0; }

/* Footer */
.ms-site-footer { border-top: 1px solid var(--line); margin-top: var(--space-34); }
.ms-foot-line { max-width: var(--page-max); margin: 0 auto; padding: var(--space-21) var(--space-21) var(--space-55); display: flex; align-items: center; justify-content: space-between; gap: var(--space-21); flex-wrap: wrap; border-top: 1px solid var(--line); }
.ms-foot-sign { display: flex; align-items: center; gap: var(--space-13); margin: 0; font: 700 18px/1 var(--font-text); }
.ms-foot-contact { margin: 0; font-size: 16px; }

/* Phones: stack, 16px gutters, smaller display sizes */
@media (max-width: 760px) {
  .ms-head, .ms-foot-line, .ms-news { padding-left: 16px; padding-right: 16px; }
  .ms-main { padding-top: var(--space-34); padding-bottom: var(--space-55); }
  .ms-essay-title, .ms-archive-title { font-size: 44px; }
  .ms-lead { font-size: 47px; }
  .ms-index-row, .ms-related-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .ms-index-kind, .ms-related-kind { text-align: left; }
  .ms-prevnext { grid-template-columns: 1fr; }
  .ms-prevnext .ms-next { text-align: left; }
  .ms-news { grid-template-columns: 1fr; }
  .ms-essay-body .alignleft, .ms-essay-body .alignright { float: none; margin: var(--space-21) 0; max-width: 100%; }
  .ms-format-quote .ms-essay-body { font-size: 23px; }
}

/* One entrance per page: the title rises, from a visible resting state; still under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .ms-essay-title, .ms-archive-title, .ms-lead { animation: ms-rise var(--dur-reveal) var(--ease-out) both; }
}

/* Visually hidden, still read aloud */
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.ms-news-row { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.ms-news-row input[type="email"] { flex: 1 1 13em; min-width: 0; }
.ms-news .ms-form { margin-top: 0; }

/* Consent: a paper panel at the bottom edge, only where the visitor must be asked */
.ms-consent { position: fixed; left: var(--space-21); right: var(--space-21); bottom: var(--space-21); max-width: 610px; margin: 0 auto; z-index: 50; background: var(--surface); box-shadow: var(--shadow-lift); border: 1px solid var(--line); padding: var(--space-21); font: 400 16px/1.5 var(--font-text); }
.ms-consent[hidden] { display: none; }
.ms-consent p { margin: 0; }
.ms-consent-actions { margin-top: var(--space-13) !important; display: flex; gap: var(--space-8); }
.ms-consent button { font: 600 15px/1 var(--font-text); padding: 13px 21px; border: 1.5px solid var(--indigo); background: var(--indigo); color: var(--surface); border-radius: 0; cursor: pointer; }
.ms-consent button.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.ms-foot-legal { flex: 1 0 100%; margin: 0; font: 400 13px/1.4 var(--font-text); }
.ms-foot-legal a { color: var(--ink-muted); text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.ms-foot-legal a:hover { color: var(--ink); }
.p-privacy .ms-linkbutton { font-size: 16px; color: var(--indigo); }
.ms-linkbutton { background: none; border: 0; padding: 0; font: 400 14px/1.4 var(--font-text); color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; cursor: pointer; }
.ms-linkbutton:hover { color: var(--ink); }

/* Divi output a rendered page may still carry (staging stores shortcodes, which msayla-core flattens; a page saved as
   Divi's rendered HTML keeps its classes): the portfolio grids repeat the Work index and render as empty boxes. */
.ms-essay-body .et_pb_filterable_portfolio, .ms-essay-body .et_pb_fullwidth_portfolio, .ms-essay-body .et_pb_portfolio_filters { display: none; }
.ms-essay-body [class*="et_pb_"] { max-width: 100%; }

/* =====================================================================================================================
   The home page (Bold) and the writing page. One block per part, each named for its pattern or part (msayla/<name>):
   patterns/*.php compose them, inc/story.php renders the repeated ones. Tokens only. Golden split, Fibonacci spacing.
   ===================================================================================================================== */

/* ===== shared layout for the story pages ===== */
/* The same 21px gutter as the header, newsletter and footer (.ms-head, .ms-news, .ms-foot-line): one left edge. */
.ms-wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--space-21); box-sizing: border-box; }
.ms-sec { padding-top: var(--space-55); padding-bottom: var(--space-89); }
.ms-sh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-21); flex-wrap: wrap; margin: 0 0 var(--space-21); }
.ms-sh h2 { margin: 0; font: 700 47px/1.02 var(--font-display); letter-spacing: -.015em; }
.ms-sh p { margin: 0; color: var(--ink-muted); font: 400 16px/1.55 var(--font-text); max-width: 46ch; }
.ms-home, .ms-writing { padding: 0; }
.ms-home [data-ms-icon], .ms-writing [data-ms-icon] { display: inline-block; }
.ms-home [data-ms-icon] svg { display: block; width: 100%; height: 100%; }

/* ===== msayla/mark: the knockout performing the lead line ===== */
.mk { display: block; overflow: visible; }
.mk .sq, .mk .peg { fill: currentColor; }
.mk .sq { transform-box: view-box; transform-origin: 4px 96px; }
.mk .hole-g, .mk .peg-g { transform-box: view-box; transform-origin: 0 0; }
/* Motion allowed and script running: the mark waits hidden for its entrance (no flash of the final state). The head
   script adds .ms-motion only when motion is allowed, and .ms-motion-off after 3 s whatever happens. */
.ms-motion:not(.ms-motion-off) .p-hero-bold .mk[data-motion]:not(.is-playing) { visibility: hidden; }
.p-hero-bold .mk[data-motion] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ===== msayla/hero-bold (pine) ===== */
.p-hero-bold { background: var(--surface); color: var(--ink); }
.p-hero-bold .ms-site-header { border-bottom: 3px double var(--line-strong); }
.p-hero-bold .hero { display: grid; grid-template-columns: 1fr auto; gap: var(--space-55); align-items: start; padding-top: var(--space-89); padding-bottom: var(--space-89); }
.p-hero-bold h1 { grid-column: 1 / -1; grid-row: 1; margin: 0; font: 800 clamp(47px, 6.6vw, 97px)/.94 var(--font-display); letter-spacing: -.022em; color: var(--ink); }
.p-hero-bold h1 span { display: block; text-wrap: balance; }
.p-hero-bold .mk { grid-column: 2; grid-row: 1; width: 178px; color: var(--marigold); justify-self: end; align-self: start; margin-top: -8px; }
.p-hero-bold .lede-row { grid-column: 1 / -1; display: grid; grid-template-columns: 61.8fr 38.2fr; gap: var(--space-55); align-items: start; }
.p-hero-bold .lede { margin: 0; font: 400 21px/1.5 var(--font-text); max-width: 38ch; text-wrap: pretty; }
.p-hero-bold .bridge { margin: var(--space-21) 0 0; font: 700 21px/1.3 var(--font-display); color: var(--marigold); }

/* ===== msayla/roles ===== */
.roles { margin: 0; padding: var(--space-13) 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-8) 0; font: 500 15px/1.5 var(--font-text); border-top: 1.5px solid var(--ink); }
.roles li { padding-right: var(--space-13); margin-right: var(--space-13); border-right: 1px solid var(--line-strong); }
.roles li:nth-last-child(2) { border-right: 0; }
.roles li.chief { flex-basis: 100%; margin: var(--space-8) 0 0; padding: var(--space-8) 0 0; border-right: 0; border-top: 1px solid var(--line-strong); color: var(--marigold); font: 700 19px/1.3 var(--font-display); }

/* ===== msayla/now-strip and msayla/now-item ===== */
.p-now { padding-top: var(--space-55); padding-bottom: var(--space-55); }
.p-now h2 { margin: 0 0 var(--space-13); font: 700 29px/1.15 var(--font-display); }
.p-now ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.p-now-item { padding: var(--space-13) var(--space-13) var(--space-21) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.p-now-item + .p-now-item { padding-left: var(--space-13); border-left: 1px solid var(--line); }
/* A fixed height, not an aspect ratio: the first column is wider (no left padding), and the names must line up. */
.p-now-item .media { height: 144px; margin: 0 0 var(--space-13); background: var(--surface-raised); overflow: hidden; }
.p-now-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-now-item .still { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.p-now-item .still .mk { width: 34%; color: var(--indigo); }
.p-now-item b { display: block; font: 700 19px/1.2 var(--font-display); margin: 0 0 var(--space-5); }
.p-now-item b a { color: var(--ink); text-decoration-color: var(--indigo); }
.p-now-item b a:hover { color: var(--indigo); }
.p-now-item .role { display: block; font: 500 14px/1.4 var(--font-text); }
.p-now-item .where { display: block; font: 400 13.5px/1.45 var(--font-text); color: var(--ink-muted); margin-top: var(--space-3); }
.p-now-item .ms-fig { display: block; margin-top: var(--space-5); font-size: 12.5px; color: var(--ink-muted); }

/* ===== msayla/pov and msayla/truth ===== */
.p-pov { padding-top: var(--space-55); padding-bottom: var(--space-89); }
.p-pov h2 { margin: 0 0 var(--space-21); font: 800 clamp(40px, 5vw, 76px)/1 var(--font-display); letter-spacing: -.02em; }
.p-pov .def { margin: 0 0 var(--space-34); font: 400 23px/1.45 var(--font-text); max-width: 40ch; }
.p-pov .tool { display: grid; grid-template-columns: 61.8fr 38.2fr; gap: var(--space-55); padding: var(--space-21) 0 var(--space-34); border-top: 1.5px solid var(--ink); }
.p-pov .tool b { display: block; font: 700 29px/1.15 var(--font-display); margin: 0 0 var(--space-8); }
.p-pov .tool p { margin: 0; font: 400 17px/1.6 var(--font-text); max-width: 58ch; }
.p-pov .mission { margin: 0; padding: var(--space-21); background: var(--surface-raised); border: 0; }
.p-pov .mission p { margin: 0 0 var(--space-8); font: 400 16px/1.55 var(--font-text); }
.p-pov .mission q { display: block; font: 500 italic 23px/1.3 var(--font-display); margin: var(--space-8) 0; quotes: "\201C" "\201D"; }
.p-pov .mission p:last-child { margin: 0; color: var(--ink-muted); }
.beliefs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-34); border-top: 1.5px solid var(--ink); }
.p-truth { padding: var(--space-21) 0 var(--space-34); border-bottom: 1px solid var(--line); }
.p-truth [data-ms-icon] { width: 24px; height: 24px; color: var(--pine); display: block; margin: 0 0 var(--space-13); }
.p-truth b { display: block; font: 700 23px/1.2 var(--font-display); letter-spacing: -.01em; margin: 0 0 var(--space-8); text-wrap: balance; }
.p-truth p { margin: 0; font: 400 15.5px/1.55 var(--font-text); color: var(--ink-muted); }

/* ===== msayla/chapters and msayla/chapter-row (the spine) ===== */
.spine { --c1: 120px; --c3: 230px; --c4: 34px; }
.spine .bh, .p-chapter-row > summary { display: grid; grid-template-columns: var(--c1) minmax(0, 1fr) var(--c3) var(--c4); column-gap: var(--space-21); align-items: baseline; }
.spine .bh { font: 600 13px/1 var(--font-text); color: var(--ink-muted); padding: 0 0 var(--space-13); border-bottom: 1.5px solid var(--ink); }
.spine ol.book { list-style: none; margin: 0; padding: 0; }
.p-chapter-row { position: relative; border-bottom: 1px solid var(--line); }
.p-chapter-row > summary { list-style: none; cursor: pointer; padding: var(--space-21) 0; min-height: 44px; }
.p-chapter-row > summary::-webkit-details-marker { display: none; }
.p-chapter-row > summary:hover .t { color: var(--indigo); }
.p-chapter-row .yrs { font: 400 14px/1.2 var(--font-figures); font-variation-settings: "wdth" 87; font-variant-numeric: tabular-nums; }
.p-chapter-row .ttl { display: flex; gap: var(--space-13); align-items: baseline; }
.p-chapter-row .ttl [data-ms-icon] { width: 20px; height: 20px; color: var(--pine); position: relative; top: 4px; flex: none; }
.p-chapter-row .t { display: block; font: 700 25px/1.2 var(--font-display); letter-spacing: -.01em; transition: color var(--dur-quick) var(--ease-out); }
.p-chapter-row .sub { display: block; font: 400 16px/1.45 var(--font-text); color: var(--ink-muted); margin-top: var(--space-3); }
.p-chapter-row .part { font: 500 15px/1.4 var(--font-text); }
.p-chapter-row .tog { justify-self: end; position: relative; width: 13px; height: 13px; align-self: center; }
.p-chapter-row .tog::before, .p-chapter-row .tog::after { content: ""; position: absolute; background: var(--ink); left: 0; top: 6px; width: 13px; height: 1.5px; transition: transform var(--dur-settle) var(--ease-out); }
.p-chapter-row .tog::after { transform: rotate(90deg); }
.p-chapter-row[open] > summary .tog::after { transform: rotate(0deg); }
.p-chapter-row .inside { display: grid; grid-template-columns: var(--c1) minmax(0, 1fr); column-gap: var(--space-21); padding: 0 0 var(--space-55); }
.p-chapter-row .inside > div { grid-column: 2; min-width: 0; }
.p-chapter-row .story { margin: 0 0 var(--space-21); font: 400 18px/1.6 var(--font-text); max-width: 64ch; }
.p-chapter-row h3 { margin: var(--space-34) 0 var(--space-13); font: 600 13px/1.4 var(--font-text); color: var(--ink-muted); letter-spacing: .02em; }
.p-chapter-row .learned { margin: 0; padding: var(--space-13) var(--space-21); border-left: 3px solid var(--marigold); background: var(--surface-raised); font: 500 italic 19px/1.4 var(--font-display); max-width: 60ch; }
.p-chapter-row .cite { margin: var(--space-13) 0 0; font: 400 14px/1.5 var(--font-text); color: var(--ink-muted); }

/* ===== msayla/project-row (inside a chapter) ===== */
.p-chapter-row .projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.p-project-row { display: grid; grid-template-columns: 55px minmax(0, 1fr) 233px; column-gap: var(--space-21); padding: var(--space-13) 0; border-bottom: 1px solid var(--line); align-items: start; }
.p-project-row:not(.has-fig) > div { grid-column: 2 / 4; }
.p-project-row .y { font: 400 13px/1.9 var(--font-figures); font-variation-settings: "wdth" 87; color: var(--ink-muted); }
.p-project-row b { font: 700 20px/1.25 var(--font-display); }
.p-project-row b a { color: var(--ink); }
.p-project-row b a:hover { color: var(--indigo); }
.p-project-row .pt { font: 500 14px/1.4 var(--font-text); color: var(--ink-muted); margin-left: var(--space-8); }
.p-project-row p { margin: var(--space-5) 0 0; font: 400 16px/1.55 var(--font-text); max-width: 56ch; }
.p-project-row figure { margin: 0; }
.p-project-row figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow-paper); background: var(--surface-raised); }
.p-project-row figure.tall img { aspect-ratio: 4 / 5; }
.p-project-row figcaption { margin-top: var(--space-5); font: 400 12.5px/1.45 var(--font-text); color: var(--ink-muted); }
.p-project-row figcaption b { font: 600 12.5px/1.45 var(--font-text); color: var(--ink); }

/* ===== msayla/writing-card and msayla/series-card ===== */
.p-writing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.p-writing-card { display: grid; grid-template-columns: 55px minmax(0, 1fr); column-gap: var(--space-13); font: 400 16px/1.45 var(--font-text); }
.p-writing-card .ms-fig { font-size: 12.5px; color: var(--ink-muted); line-height: 1.9; }
.p-writing-card .k { font-size: 13px; color: var(--ink-muted); }
.p-writing-card.series a { font-weight: 600; }
.p-writing-card.cur a { color: var(--ink-muted); }

/* ===== msayla/experiments and msayla/experiment ===== */
.p-experiments { padding-top: var(--space-34); padding-bottom: var(--space-55); }
.p-experiments h2 { margin: 0 0 var(--space-8); font: 700 29px/1.15 var(--font-display); }
.p-experiments .intro { margin: 0 0 var(--space-21); font: 400 17px/1.6 var(--font-text); max-width: 60ch; }
.p-experiments ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-13); }
.p-experiment { padding: var(--space-13) 0 var(--space-21); }
.p-experiment b { display: block; font: 700 21px/1.2 var(--font-display); letter-spacing: -.01em; }
.p-experiment .what, .p-experiment .learning { display: block; margin-top: var(--space-8); font: 400 16px/1.55 var(--font-text); }
.p-experiment .learning { font: 500 italic 17px/1.45 var(--font-display); color: var(--ink-muted); }
.p-experiment .k { font: 600 12.5px/1 var(--font-text); font-style: normal; letter-spacing: .04em; color: var(--ink); margin-right: var(--space-3); }
.p-experiments ul { column-gap: var(--space-34); row-gap: var(--space-21); }

/* ===== msayla/then-now and msayla/wipe ===== */
.p-then-now .then-grid { display: grid; grid-template-columns: 61.8fr 38.2fr; gap: var(--space-55); align-items: start; }
.p-then-now h2 { margin: 0 0 var(--space-34); font: 700 47px/1.02 var(--font-display); letter-spacing: -.015em; }
.p-then-now h3 { margin: 0 0 var(--space-13); font: 700 29px/1.15 var(--font-display); }
.p-then-now h3 a { color: var(--ink); }
.p-then-now .prose p { margin: 0 0 var(--space-13); font: 400 18px/1.6 var(--font-text); max-width: 46ch; }
.p-wipe { margin: 0; }
.p-wipe .v { position: relative; overflow: hidden; background: var(--night-ink); --x: 50%; touch-action: pan-y; aspect-ratio: 3 / 4; }
.p-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.p-wipe .before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.p-wipe .line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--seed-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--night-ink) 22%, transparent); pointer-events: none; }
.p-wipe .knob { position: absolute; top: 50%; left: var(--x); width: 55px; height: 55px; margin: -27.5px 0 0 -27.5px; border-radius: 50%; background: var(--seed-paper); box-shadow: var(--shadow-lift); pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 9px; }
.p-wipe .knob::before, .p-wipe .knob::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent var(--night-ink) transparent transparent; }
.p-wipe .knob::after { border-width: 6px 0 6px 8px; border-color: transparent transparent transparent var(--night-ink); }
.p-wipe .tag { position: absolute; top: var(--space-13); padding: var(--space-5) var(--space-8); font: 500 12px/1 var(--font-figures); font-variation-settings: "wdth" 87; background: color-mix(in srgb, var(--night-ink) 74%, transparent); color: var(--cotton); pointer-events: none; }
.p-wipe .tag.b { left: var(--space-13); }
.p-wipe .tag.a { right: var(--space-13); }
.p-wipe input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; -webkit-appearance: none; appearance: none; }
.p-wipe .v:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.p-wipe figcaption { padding: var(--space-13) 0 0; font: 400 14px/1.5 var(--font-text); color: var(--ink-muted); }
.p-wipe figcaption b { color: var(--ink); font-weight: 600; }
/* On a project page: the wipe under the title, inside the 680px text column, left-aligned with the title */
.p-then-now-project { margin-bottom: var(--space-34) !important; }
.p-then-now-project .p-wipe { max-width: 560px; }

/* ===== msayla/selected-writing ===== */
.p-selected .ms-sh p a { font: 600 15px/1.4 var(--font-text); }
.p-selected .series-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-34); border-top: 1.5px solid var(--ink); }
.p-selected .series-list > div { padding: var(--space-21) 0 var(--space-34); border-bottom: 1px solid var(--line); }
.p-selected h3 { margin: 0 0 var(--space-8); font: 600 13px/1.4 var(--font-text); color: var(--ink-muted); }
.p-selected .t { display: block; font: 700 23px/1.2 var(--font-display); text-decoration: none; color: var(--ink); }
.p-selected a.t:hover { color: var(--indigo); text-decoration: underline; }
.p-selected p { margin: var(--space-8) 0 0; font: 400 15px/1.55 var(--font-text); color: var(--ink-muted); }
.p-selected q { quotes: "\201C" "\201D"; }
.p-selected .ms-fig { font-size: 12px; color: var(--ink-muted); }
/* Get in touch mark: the knockout, plays once in view */
.p-build-graphic { display: block; width: 144px; margin-top: var(--space-55); }
.p-build-graphic .mk { width: 100%; height: auto; }
.p-build-graphic .sq { fill: var(--seed-paper); }
.p-build-graphic .peg { fill: var(--marigold-field); }
/* The band: seed paper on indigo. Indigo never touches pine: the newsletter's seed paper sits between it and the close. */

/* ===== the home close: the footer part as the pine and marigold band ===== */
.home .ms-site-footer { border-top: 0; margin-top: 0; }
.home .ms-foot-line { background: var(--night-pine); color: var(--cotton); box-shadow: 0 0 0 100vmax var(--night-pine); clip-path: inset(0 -100vmax); border-top: 0; padding-top: var(--space-55); padding-bottom: var(--space-55); }
.home .ms-foot-sign { color: var(--marigold-light); font: 700 23px/1.2 var(--font-display); }
.home .ms-foot-sign .ms-mark { color: var(--marigold-light); }
.home .ms-foot-line a { color: var(--cotton); text-decoration-color: var(--marigold-light); }
.home .ms-foot-line a:hover { color: var(--marigold-light); }
.home .ms-foot-line :focus-visible { outline-color: var(--marigold-light); }

/* ===== the writing page: msayla/writing-head, msayla/series-row, msayla/chapter-archive ===== */
.p-writing-head { padding-top: var(--space-89); padding-bottom: var(--space-34); }
.p-writing-head h1 { margin: 0 0 var(--space-21); font: 800 clamp(47px, 6vw, 76px)/1 var(--font-display); letter-spacing: -.02em; }
.p-writing-head .lede { margin: 0; font: 400 21px/1.5 var(--font-text); max-width: 52ch; }
.p-writing-head .cadence { margin: var(--space-21) 0 0; padding-left: var(--space-13); border-left: 3px solid var(--marigold); font: 500 italic 19px/1.45 var(--font-display); max-width: 52ch; }
.series-full { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.p-series-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--space-21); padding: var(--space-21) 0; border-bottom: 1px solid var(--line); scroll-margin-top: var(--space-21); }
.p-series-row .yrs { font: 400 13px/2 var(--font-figures); font-variation-settings: "wdth" 87; color: var(--ink-muted); }
.p-series-row h3 { margin: 0 0 var(--space-5); font: 700 25px/1.2 var(--font-display); }
.p-series-row .why { margin: 0 0 var(--space-8); font: 400 16px/1.55 var(--font-text); color: var(--ink-muted); max-width: 60ch; }
.p-series-row summary, .p-chapter-archive summary { cursor: pointer; font: 600 15px/1.4 var(--font-text); color: var(--indigo); padding: var(--space-8) 0; min-height: 44px; box-sizing: border-box; }
.years-rail { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-21); margin: 0 0 var(--space-34); padding: 0; list-style: none; font: 400 15px var(--font-figures); }
.years-rail a { text-decoration: none; padding: var(--space-8) 0; display: inline-block; }
.p-chapter-archive { display: grid; grid-template-columns: 233px minmax(0, 1fr); gap: var(--space-55); padding: var(--space-34) 0; border-top: 1.5px solid var(--ink); }
.p-chapter-archive figure { margin: 0; }
.p-chapter-archive canvas { display: block; width: 233px; height: 233px; }
.p-chapter-archive .yrs-h { margin: 0 0 var(--space-5); font: 400 21px/1.2 var(--font-figures); font-variation-settings: "wdth" 87; }
.p-chapter-archive h3 { margin: 0 0 var(--space-13); font: 700 34px/1.1 var(--font-display); }
.p-chapter-archive .story { margin: 0 0 var(--space-13); font: 400 16px/1.55 var(--font-text); color: var(--ink-muted); max-width: 58ch; }
.p-chapter-archive details { scroll-margin-top: var(--space-21); }

@media (prefers-reduced-motion: reduce) { .p-chapter-row .tog::before, .p-chapter-row .tog::after, .p-chapter-row .t { transition: none; } }

/* ===== story pages: tablets ===== */
@media (max-width: 960px) {
  .p-hero-bold .hero, .p-hero-bold .lede-row, .p-then-now .then-grid, .p-pov .tool, .p-build .grid { grid-template-columns: 1fr; gap: var(--space-34); }
  .p-hero-bold h1 { grid-row: 2; }
  .p-hero-bold .mk { grid-column: 1; grid-row: 1; width: 120px; justify-self: start; margin-top: 0; }
  .p-now ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-now-item + .p-now-item { border-left: 0; }
  .p-now-item:nth-child(even) { padding-left: var(--space-13); border-left: 1px solid var(--line); }
  .p-now-item:nth-child(odd) { padding-left: 0; }
  .beliefs, .p-selected .series-list, .p-experiments ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spine { --c1: 89px; --c3: 160px; }
  .p-then-now .p-wipe { max-width: 520px; }
  .p-build-graphic { width: 89px; margin-top: var(--space-34); }
}
/* ===== story pages: phones ===== */
@media (max-width: 760px) {
  .ms-wrap { padding-inline: 16px; }
  .ms-sh h2, .p-then-now h2, .p-build h2 { font-size: 34px; }
  .p-hero-bold .hero { padding-top: var(--space-34); padding-bottom: var(--space-55); }
  .p-hero-bold h1 { font-size: 47px; }
  .p-hero-bold .lede { font-size: 19px; }
  .p-now ul { grid-template-columns: 1fr; }
  .p-now-item, .p-now-item:nth-child(even), .p-now-item:nth-child(odd) { padding-left: 0; border-left: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--space-13); align-content: start; }
  .p-now-item .media { grid-row: 1 / span 4; margin: 0; height: auto; aspect-ratio: 4 / 3; }
  .p-now-item .ms-fig { margin-top: var(--space-3); }
  .p-pov h2 { font-size: 38px; }
  .p-pov .def { font-size: 20px; }
  .beliefs, .p-selected .series-list, .p-experiments ul { grid-template-columns: 1fr; }
  .spine { --c1: 0px; --c4: 13px; }
  .spine .bh { display: none; }
  .p-chapter-row > summary { grid-template-columns: minmax(0, 1fr) var(--c4); column-gap: var(--space-13); row-gap: var(--space-5); }
  .p-chapter-row > summary .yrs { grid-column: 1; grid-row: 1; }
  .p-chapter-row > summary .ttl { grid-column: 1; grid-row: 2; }
  .p-chapter-row > summary .part { grid-column: 1; grid-row: 3; color: var(--ink-muted); font-size: 14px; }
  .p-chapter-row > summary .tog { grid-column: 2; grid-row: 2; }
  .p-chapter-row .ttl [data-ms-icon] { display: none; }
  .p-chapter-row .t { font-size: 22px; }
  .p-chapter-row .inside { grid-template-columns: minmax(0, 1fr); }
  .p-chapter-row .inside > div { grid-column: 1; }
  .p-project-row, .p-project-row.has-fig { grid-template-columns: 46px minmax(0, 1fr); }
  .p-project-row figure { grid-column: 2; margin-top: var(--space-8); }
  .p-project-row:not(.has-fig) > div { grid-column: 2; }
  .p-project-row .pt { display: block; margin: var(--space-3) 0 0; }
  .p-chapter-archive, .p-series-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-13); }
  .p-chapter-archive canvas { width: 144px; height: 144px; }
  .p-writing-card { grid-template-columns: 46px minmax(0, 1fr); }
  .p-wipe .knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .home .ms-foot-line { padding-top: var(--space-34); padding-bottom: var(--space-34); }
}

/* =====================================================================================================================
   Round 4: every page as designed as the home. One block per part (inc/pages.php, inc/templates.php). Tokens only;
   golden split for two-part layouts; Fibonacci spacing; square corners; motion quick then still (0ms under reduced
   motion through the --dur tokens).
   ===================================================================================================================== */
.ms-designed { padding: 0 0 var(--space-34); }

/* ===== msayla/crumbs ===== */
.ms-crumbs { padding-top: var(--space-21); font: 500 14px/1.4 var(--font-text); }
.ms-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.ms-crumbs li { display: inline-flex; align-items: center; color: var(--ink-muted); min-width: 0; }
.ms-crumbs li + li::before { content: ""; flex: none; width: 5px; height: 5px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: rotate(45deg); margin: 0 var(--space-13) 0 var(--space-8); }
.ms-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-muted); text-decoration: none; }
.ms-crumbs a:hover { color: var(--indigo); text-decoration: underline; }
.ms-crumbs [aria-current] { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.ms-essay-head .ms-crumbs { padding-top: 0; margin: calc(-1 * var(--space-21)) 0 var(--space-13); }

/* ===== msayla/contact: Get in touch, one component for the home band and the page ===== */
.p-contact { padding-top: var(--space-89); padding-bottom: var(--space-89); }
.p-contact .grid { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: var(--space-89); align-items: start; }
.p-contact h2 { margin: 0 0 var(--space-13); font: 700 47px/1.02 var(--font-display); letter-spacing: -.015em; }
.p-contact h1 { margin: 0 0 var(--space-21); font: 800 clamp(47px, 6vw, 76px)/.96 var(--font-display); letter-spacing: -.02em; }
.p-contact p.body { margin: 0; max-width: 40ch; font: 400 18px/1.6 var(--font-text); }
.p-contact .mail { margin: var(--space-34) 0 0; }
.p-contact .mail .k { display: block; margin: 0 0 var(--space-5); font: 600 13px/1.4 var(--font-text); }
.p-contact .mail a { font: 700 29px/1.2 var(--font-display); overflow-wrap: anywhere; }
.p-contact .p-build-graphic { margin-top: var(--space-55); }
.p-contact form { margin: 0; }
.p-contact .f { margin: 0 0 var(--space-21); }
.p-contact label, .p-contact legend { display: block; margin-bottom: var(--space-5); padding: 0; font: 600 14px/1.3 var(--font-text); }
.p-contact .hint { display: block; margin: 0 0 var(--space-8); font: 400 13px/1.45 var(--font-text); }
.p-contact input[type=text], .p-contact input[type=email], .p-contact textarea { width: 100%; box-sizing: border-box; padding: 10px 13px; border-radius: var(--radius-sm); font: 400 16px/1.45 var(--font-text); }
.p-contact textarea { min-height: 120px; resize: vertical; }
.p-contact fieldset { margin: 0 0 var(--space-21); padding: 0; border: 0; min-width: 0; }
.p-contact .reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-sm); overflow: hidden; }
.p-contact .reasons label { position: relative; display: grid; gap: var(--space-3); align-content: start; margin: 0; padding: var(--space-13); min-height: 44px; cursor: pointer; font: 600 14px/1.25 var(--font-text); transition: background var(--dur-quick) var(--ease-out); }
.p-contact .reasons small { font: 400 12.5px/1.35 var(--font-text); }
/* However many reasons the copy lists, the last row fills the width (no empty cells showing the grid's seams). */
.p-contact .reasons label:last-child:nth-child(3n+1) { grid-column: span 3; }
.p-contact .reasons label:last-child:nth-child(3n+2) { grid-column: span 2; }
.p-contact .reasons input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.p-contact .two-f { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-13); }
.p-contact .ms-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.p-contact .ms-btn { font: 600 15px/1 var(--font-text); padding: 15px 34px; border: 1.5px solid; border-radius: 0; cursor: pointer; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.p-contact .ms-form-status { margin: 0 0 var(--space-21); padding: var(--space-13) var(--space-21); font: 400 16px/1.55 var(--font-text); }
/* The band: seed paper on indigo. Indigo never touches pine: the newsletter's seed paper sits between it and the close. */
.p-contact.band { background: var(--indigo-field); color: var(--seed-paper); }
.p-contact.band a, .p-contact.band h2 { color: var(--seed-paper); }
.p-contact.band a { text-decoration-color: var(--marigold-field); }
.p-contact.band input[type=text], .p-contact.band input[type=email], .p-contact.band textarea { color: var(--night-ink); background: var(--seed-paper); border: 1.5px solid var(--seed-paper); }
.p-contact.band :is(input, textarea, a, button):focus-visible { outline: 3px solid var(--marigold-field); outline-offset: 2px; }
.p-contact.band .reasons { border: 1.5px solid var(--seed-paper); gap: 1px; background: color-mix(in srgb, var(--seed-paper) 40%, transparent); }
.p-contact.band .reasons label { background: var(--indigo-field); }
.p-contact.band .reasons label:hover { background: color-mix(in srgb, var(--seed-paper) 12%, var(--indigo-field)); }
.p-contact.band .reasons label:has(input:checked) { background: var(--seed-paper); color: var(--night-ink); box-shadow: inset 0 -3px 0 var(--marigold-field); }
.p-contact.band .reasons label:has(input:focus-visible) { outline: 3px solid var(--marigold-field); outline-offset: -3px; }
.p-contact.band .ms-btn { background: var(--marigold-field); border-color: var(--marigold-field); color: var(--on-marigold); }
.p-contact.band .ms-btn:hover { background: var(--seed-paper); border-color: var(--seed-paper); color: var(--night-ink); }
.p-contact.band .ms-form-status { background: var(--seed-paper); color: var(--night-ink); }
/* The page: the same form on seed paper. */
.p-contact.page { padding-top: var(--space-55); }
.p-contact.page .mail a { color: var(--indigo); }
.p-contact.page .p-build-graphic .sq { fill: var(--indigo); }
.p-contact.page .hint { color: var(--ink-muted); }
.p-contact.page input[type=text], .p-contact.page input[type=email], .p-contact.page textarea { color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); }
.p-contact.page :is(input, textarea):focus { border-color: var(--indigo); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 28%, transparent); }
.p-contact.page .reasons { border: 1.5px solid var(--line-strong); gap: 1px; background: var(--line); }
.p-contact.page .reasons label { background: var(--surface-raised); }
.p-contact.page .reasons label:hover { background: var(--surface); }
.p-contact.page .reasons small { color: var(--ink-muted); }
.p-contact.page .reasons label:has(input:checked) { background: var(--surface); box-shadow: inset 0 -3px 0 var(--marigold); }
.p-contact.page .reasons label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.p-contact.page .ms-btn { background: var(--indigo); border-color: var(--indigo); color: var(--seed-paper); }
.p-contact.page .ms-btn:hover { background: var(--ink); border-color: var(--ink); }
.p-contact.page .ms-form-status { background: var(--surface-raised); }
.p-contact.page .ms-form-status.is-error { outline: 1.5px solid var(--spark); }

/* ===== msayla/foot-line: the closing mark and the toggle ===== */
.ms-foot-sign .mk { width: 26px; height: 26px; flex: none; color: var(--indigo); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home .ms-foot-sign .mk { color: var(--marigold-light); }
.ms-lang-toggle { margin: 0; }
.ms-lang-toggle a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-13); border: 1px solid var(--line-strong); font: 600 13px/1 var(--font-text); color: var(--ink); text-decoration: none; }

/* ===== single posts: the chapter and series under the title, the series nav, the way back ===== */
.p-post-chapter { margin: var(--space-13) 0 0; font: 500 15px/1.5 var(--font-text); color: var(--ink-muted); }
.p-post-chapter a { color: var(--ink); }
.p-post-chapter .ms-fig { font-size: 12.5px; color: var(--ink-muted); }
.p-post-chapter .sep { display: inline-block; width: 5px; height: 5px; margin: 0 var(--space-13); border-radius: var(--radius-circle); background: var(--marigold); vertical-align: middle; }
.p-series-nav { margin-top: var(--space-55); padding: var(--space-21); background: var(--surface-raised); }
.p-series-nav .where { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-13); margin: 0 0 var(--space-13); font: 700 19px/1.3 var(--font-display); }
.p-series-nav .where a { color: var(--ink); }
.p-series-nav .where .ms-fig { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.p-series-nav .cells { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-21); }
.p-series-nav .cells > a:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.p-series-nav .dir { display: block; font: 600 13px/1.4 var(--font-text); color: var(--ink-muted); }
.p-series-nav .t { display: block; font: 700 18px/1.25 var(--font-display); margin-top: var(--space-3); }
.p-series-nav a:hover .t { color: var(--indigo); }
.p-series-nav .cells > a { display: block; padding: var(--space-13); background: var(--surface); color: var(--ink); text-decoration: none; transition: box-shadow var(--dur-settle) var(--ease-out), transform var(--dur-settle) var(--ease-out); }
.p-series-nav .cells > .next { text-align: right; }
.p-back-line { margin: var(--space-21) 0 0; }
.p-back { font: 600 15px/1.4 var(--font-text); }
/* The reading column: photographs, galleries and embeds sit in the system */
.ms-essay-body .gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-8); margin: var(--space-34) 0 !important; }
.ms-essay-body .gallery br { display: none; }
.ms-essay-body .gallery .gallery-item { width: auto !important; margin: 0 !important; float: none !important; }
.ms-essay-body .gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 0 !important; margin: 0; }
.ms-essay-body .gallery .gallery-caption { font: 400 13px/1.4 var(--font-text); color: var(--ink-muted); margin-top: var(--space-5); }
.ms-essay-body .wp-block-gallery { gap: var(--space-8); }
/* Photographs in old posts are often small (Tumblr reblogs at 400 to 600 px, the 2007 Kenya photos at 300 to 400 px):
   each sits centered in the measure at its own size, never stretched past it, flat on the paper (no shadow). Floats
   the author set (alignleft, alignright) keep their place. */
.ms-essay-body > img, .ms-essay-body p > img:only-child, .ms-essay-body p > a:only-child > img, .ms-essay-body .wp-caption:not(.alignleft):not(.alignright), .ms-essay-body figure:not(.alignleft):not(.alignright):not(.wp-block-embed):not(.gallery-item) { display: block; margin-inline: auto; width: auto; max-width: 100%; height: auto; box-shadow: none; }
.ms-essay-body p:has(> img:only-child), .ms-essay-body p:has(> a:only-child > img) { text-align: center; }
.ms-essay-body figure:not(.alignleft):not(.alignright) > img, .ms-essay-body .wp-caption > img { margin-inline: auto; }
.ms-essay-body .wp-caption-text, .ms-essay-body figure figcaption { text-align: center; }
.ms-essay-body a { overflow-wrap: anywhere; }

/* ===== round 4 (shared parts): tablets ===== */
@media (max-width: 960px) {
  .p-contact .grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-34); }
  .p-contact .p-build-graphic { width: 89px; margin-top: var(--space-34); }
}
/* ===== round 4 (shared parts): phones ===== */
@media (max-width: 760px) {
  /* On a phone the h1 already names the page: the trail stops at its parent and keeps to one line where it can. */
  .ms-crumbs li:last-child { display: none; }
  .ms-crumbs a { min-height: 32px; }
  .p-contact h2 { font-size: 34px; }
  .p-contact .reasons { grid-template-columns: 1fr 1fr; }
  .p-contact .reasons label:last-child:nth-child(n) { grid-column: auto; }
  .p-contact .reasons label:last-child:nth-child(odd) { grid-column: span 2; }
  .p-contact .two-f { grid-template-columns: minmax(0, 1fr); }
  .p-contact .mail a { font-size: 23px; }
  .p-series-nav .cells { grid-template-columns: minmax(0, 1fr); }
  .p-series-nav .cells > .next { text-align: left; }
  .p-series-nav .none { display: none; }
}

/* ===== Round 4B. Photos: last column of a home ledger row (right, every row); left edge of the reading column on the designed pages. ===== */
.p-contact legend .opt { margin-left: var(--space-8); font-weight: 400; }
.p-project-row.has-pair { grid-template-columns: 55px minmax(0, 1fr) 400px; }
.p-project-row.has-pair > .figs.pair { grid-column: 3; display: flex; gap: var(--space-13); align-items: flex-start; }
.p-project-row .figs.pair figure { flex: var(--ar, 1) 1 0; min-width: 0; }
.p-project-row .figs.pair figure img, .p-project-row .figs.pair figure.tall img { aspect-ratio: var(--ar); height: auto; contain-intrinsic-size: none; }
/* A chapter's own picture or loop */
.p-chapter-media { margin: 0 0 var(--space-34); max-width: 380px; }
.p-chapter-media img, .p-chapter-media video { display: block; width: 100%; height: auto; background: var(--surface-raised); box-shadow: var(--shadow-paper); }
.p-chapter-media.tall { max-width: 290px; }
.p-chapter-media video { aspect-ratio: 16 / 9; object-fit: cover; }
.p-chapter-media.loop-fig { max-width: 742px; }
.p-chapter-media figcaption { margin-top: var(--space-5); font: 400 12.5px/1.45 var(--font-text); color: var(--ink-muted); }
.p-chapter-media figcaption b { font-weight: 600; color: var(--ink); }

/* Accents: experiment rules in turn (pine land, indigo systems, marigold business, spark people) */
.p-experiment { border-top: 1.5px solid var(--ink); }
.p-selected h3 { color: var(--pine); }
/* The 404: the signature seed field, sown and not yet grown (21 seeds) */
.ms-404 canvas.seeds { display: block; width: 144px; height: 144px; margin: 0 0 var(--space-21); }

@media (max-width: 760px) {
  .p-chapter-media, .p-chapter-media.tall { max-width: none; }
  .p-project-row.has-pair { grid-template-columns: 46px minmax(0, 1fr); }
  .p-project-row.has-pair > div, .p-project-row.has-pair > .figs.pair { grid-column: 2; }
  .p-project-row.has-pair > .figs.pair { margin-top: var(--space-8); }
  .p-project-row .figs.pair figure { margin-top: 0; }
}
.p-post-chapter .p-post-label { font: 600 13px/1.5 var(--font-text); color: var(--marigold-ink); }