/* Public-site application of the Art style guide. Load after page styles. */
.reading-metrics {margin:-8px 0 20px;line-height:1.6;color:#fff;font-weight:600}
.feed-meta .feed-read-time {color:var(--site-text)}
.feed-meta .feed-pin-label {color:var(--site-muted);font-size:inherit;letter-spacing:.03em}
body {font-family:var(--site-font);background:var(--site-bg);color:var(--site-text)}
body main, .theory-area main:has(.paper-text), .art-area main:has(.story-reading) {
  width:calc(100% - 2 * var(--site-gutter));max-width:var(--site-width);
  margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;
}
body:not(.landing-page) main {padding-top:28px}
body.landing-page main {padding-top:22px}
body:not(.art-area) .masthead-inner {
  width:calc(100% - 2 * var(--site-gutter));max-width:var(--site-width);margin:0 auto;
}
main h1 {font-size:var(--site-page-title);letter-spacing:0;margin:12px 0 20px;overflow-wrap:anywhere}
main h2 {font-size:var(--site-heading);letter-spacing:0}
main h3 {font-size:clamp(18px,1.6vw,20px);letter-spacing:0}
main > p, main .intro, main .warning, main .contact-page > p,
.download-release > p, .companion-download > p {font-size:var(--site-body);line-height:1.6}
main > p, .download-release > p, .companion-download > p {max-width:740px}
main .eyebrow, main .meta, main .crumb {font-size:var(--site-small)}
main .crumb {margin-bottom:22px;overflow-wrap:anywhere}
main .crumb a {display:inline-block;min-height:24px}
.art-context {gap:14px;align-items:flex-start}
.art-context .eyebrow,.art-context>a {font-size:var(--site-small)}
.art-context>a {white-space:nowrap;flex-shrink:0}
.theory-area .warning {margin:18px 0 24px;padding-left:16px;max-width:740px;font-size:var(--site-body);line-height:1.6}
.landing-page .feed-heading {gap:10px;margin-bottom:8px}
.landing-page .feed-heading h2 {font-size:var(--site-feed-heading)}
.landing-page .feed-sort {font-size:var(--site-small);gap:8px}
.landing-page .feed-sort select {min-height:36px;padding:6px 30px 6px 10px;font-size:var(--site-select);line-height:1.4}
.landing-page .feed-sort::after {right:13px;width:6px;height:6px}
.landing-page .feed-result-count {font-size:var(--site-small);margin-bottom:8px}
/* Feed entries and published prose keep their established reading sizes. */
.paper-text h2 {font-size:var(--site-heading)}
.paper-text h3 {font-size:20px}
.paper-text h4,.paper-text h5 {font-size:18px}
.paper-text,.editable-body {line-height:1.85}
.row {gap:20px;padding:20px 0}
.row .title {min-width:0;overflow-wrap:anywhere}
.row .title strong {font-size:20px;line-height:1.4}
.row small,.row .number {font-size:var(--site-small)}
.row .number {max-width:110px;flex-shrink:0}
.parts {margin-top:24px}
.note {font-size:var(--site-body);padding:18px 20px}
.panel-title,.relation-group-title {font-size:15px}
.aside {font-size:var(--site-body)}
main details {padding:16px 0;margin-top:20px}
main summary {font-size:var(--site-body);line-height:1.6;min-height:36px}
.series-download {font-size:var(--site-body);padding:9px 14px;border-color:var(--site-control-rule);border-radius:var(--site-radius)}
.download-part {padding:18px 0}
.download-part-heading {gap:20px;align-items:flex-start}
.download-part-heading h3 {font-size:clamp(18px,1.6vw,20px);line-height:1.4;margin:0}
.download-part-heading>a {font-size:var(--site-small);min-height:36px;display:inline-flex;align-items:center}
.download-part h4 {font-size:var(--site-body);font-weight:500;line-height:1.5}
.download-part details {margin:0;padding:10px 0 0}
.contact-page {max-width:var(--site-width)}
.contact-page form {max-width:700px}
.contact-page label {font-size:var(--site-body);margin:18px 0 7px}
.contact-page input,.contact-page textarea,.contact-page button {font-size:16px;min-height:44px;border-radius:var(--site-radius)}
.contact-page .meta {font-size:var(--site-small);max-width:700px}
body > footer {width:calc(100% - 2 * var(--site-gutter));max-width:var(--site-width);padding:22px 0;font-size:var(--site-small)}

/* Shared desktop mastheads: centred while expanded, room for the logo on collapse. */
body:not(.art-area) {--site-nav-dock:clamp(0,calc((var(--masthead-progress) - .5) * 3.333333),1)}
body:not(.art-area) .masthead-logo {
  width:calc(672px - 532px * var(--masthead-progress));height:calc(162px - 118px * var(--masthead-progress));
  top:calc(36.5px - 24.5px * var(--masthead-progress));
}
body:not(.art-area) .masthead-choices {
  width:calc(100% - 28px - 175px * var(--site-nav-dock));right:calc(14px * (1 - var(--site-nav-dock)));gap:0;
}
body:not(.art-area) .masthead .masthead-choices a {
  font-size:calc(22px - 9px * var(--masthead-progress));padding:6px 10px;
  justify-content:center;min-height:44px;white-space:nowrap;text-align:center;
}
.home-area.landing-page .masthead {
  height:calc(340px - 272px * var(--masthead-progress) - 40px * (1 - var(--masthead-progress)) * (1 - var(--masthead-progress)));
}
.home-area.landing-page .masthead-space {height:300px}
.theory-area.landing-page .masthead {height:calc(460px - 392px * var(--masthead-progress))}
.theory-area.landing-page .masthead-space {height:460px}
.theory-area.landing-page .theory-landing-art {height:calc(360px * (1 - var(--masthead-progress)))}

@media(max-width:700px) {
  body.landing-page main {padding-top:18px}
  body:not(.landing-page) main {padding-top:22px}
  .theory-area .warning {margin:16px 0 20px}
  .landing-page .feed-heading h2 {font-size:18px}
  .landing-page .feed-sort select {min-height:40px;font-size:13px}
  .row {gap:14px;padding:18px 0;align-items:flex-start}
  .row .title strong {font-size:18px}
  .row .number {max-width:70px;min-width:25px}
  .note {padding:14px 16px}
  .download-part-heading {display:block}
  body:not(.art-area) {--site-mobile-progress:min(1,calc(2 * var(--masthead-progress)))}
  body:not(.art-area) .masthead .masthead-choices {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;right:0;gap:0;
    bottom:calc(20px - 8px * var(--masthead-progress));
  }
  body:not(.art-area) .masthead .masthead-choices a {
    font-size:calc(17px - 5px * var(--masthead-progress));padding:4px 0;border-left:0;
  }
  body:not(.art-area) .masthead .masthead-choices a:nth-child(even) {border-left:1px solid var(--site-rule)}
  body:not(.art-area) .masthead .masthead-choices a:nth-child(n+3) {border-top:1px solid var(--site-rule)}
  body:not(.art-area) .masthead .masthead-choices a:last-child:nth-child(odd) {grid-column:1/-1}
  body:not(.art-area) .masthead-choices .landing-flourish {display:none}
  body:not(.art-area) .masthead-logo {
    width:calc(75vw - (75vw - 100px) * var(--site-mobile-progress));height:calc(145px - 101px * var(--site-mobile-progress));
    left:calc(50% - 50% * var(--site-mobile-progress));transform:translateX(calc(-50% + 50% * var(--site-mobile-progress)));
    top:25px;
  }
  .home-area .masthead {height:calc(312px - 200px * var(--masthead-progress))}
  .home-area .masthead-space {height:112px}
  .home-area.landing-page .masthead {height:calc(312px - 200px * var(--masthead-progress))}
  .home-area.landing-page .masthead-space {height:312px}
  .home-area .masthead-logo img {opacity:calc(1 - var(--site-mobile-progress))}
  .theory-area .masthead,.theory-area.landing-page .masthead {height:calc(360px - 204px * var(--masthead-progress))}
  .theory-area .masthead-space {height:156px}
  .theory-area.landing-page .masthead-space {height:360px}
  .theory-area.landing-page .theory-landing-art {height:calc(200px * (1 - var(--masthead-progress)))}
  .theory-area.landing-page:not(.masthead-compact) .masthead-logo {display:none}
  body:not(.art-area).masthead-compact .masthead .masthead-choices {
    height:88px;grid-template-rows:repeat(2,44px);bottom:12px;
  }
  body.theory-area.masthead-compact .masthead .masthead-choices {height:132px;grid-template-rows:repeat(3,44px)}
  body:not(.art-area).masthead-compact .masthead-choices::before {content:"";min-height:44px;pointer-events:none}
  body:not(.art-area).masthead-compact .masthead .masthead-choices a:nth-child(n) {grid-column:auto;border-left:0;border-top:1px solid var(--site-rule)}
  body:not(.art-area).masthead-compact .masthead .masthead-choices a:nth-child(odd) {border-left:1px solid var(--site-rule)}
  body:not(.art-area).masthead-compact .masthead .masthead-choices a:first-child {border-top:0}
  body:not(.art-area).masthead-compact .masthead-logo {
    display:flex;align-items:center;justify-content:center;top:auto;bottom:56px;left:0;width:50%;height:44px;max-width:none;
    transform:none;z-index:1;opacity:1;font-size:calc(17px - 5px * var(--masthead-progress));text-decoration:none;text-align:center;
  }
  body.theory-area.masthead-compact .masthead-logo {bottom:100px}
  body:not(.art-area).masthead-compact .masthead-logo img {display:none}
  body:not(.art-area).masthead-compact .masthead-home-label {display:block}
  body:not(.art-area).masthead-compact .masthead-logo:hover {text-decoration:underline}
  .home-area [id] {scroll-margin-top:132px}
  .theory-area [id],.theory-area .paper-text [id] {scroll-margin-top:176px}
}

/* Main landing exception: its three choices can carry a little more emphasis. */
.home-area.landing-page .masthead .masthead-choices a {
  font-size:calc(26px - 13px * var(--masthead-progress));
}
.home-area.landing-page .masthead-choices .landing-flourish {
  flex-basis:calc(min(102px,12vw) * (1 - var(--masthead-progress)));
  width:calc(min(102px,12vw) * (1 - var(--masthead-progress)));
  height:34px;
}
@media(max-width:700px) {
  .home-area.landing-page .masthead .masthead-choices a {
    font-size:calc(19px - 7px * var(--masthead-progress));
  }
}

/* Preserve authored line breaks after a plain-text entry receives inline media. */
.web-text-line{white-space:pre-wrap;min-height:1em;margin:0!important}
.editable-body:has(>.web-text-line){white-space:normal}




/* Give Art text more space beside its relational navigation. */
@media(min-width:901px) {
  .art-area main .split {grid-template-columns:minmax(0,1fr) 180px;gap:32px}
  .art-area main .split .verse, .art-area main .split .verse p {max-width:none}
  .art-area main .split > .aside {min-width:0;overflow-wrap:anywhere}
}

/* Pinned feed links contract into a black strip below the main navigation. */
.feed-pin-slot {position:relative;overflow-anchor:none}
.feed-pinned-list {--pin-progress:0;background:var(--site-bg);width:100%;z-index:9}
.feed-pinned-list.pins-docked {position:fixed;top:var(--pin-top);left:var(--pin-left);width:var(--pin-width);border-bottom:1px solid var(--site-rule);max-height:35vh;overflow-y:auto}
.feed-pinned-list .feed-entry {padding-top:calc(24px - 13px * var(--pin-progress));padding-bottom:calc(24px - 13px * var(--pin-progress));min-height:44px}
.feed-pinned-list .feed-entry h3 {font-size:calc(22px - 5px * var(--pin-progress));margin-top:calc(9px * (1 - var(--pin-progress)));margin-bottom:calc(5px * (1 - var(--pin-progress)))}
.feed-pinned-list .feed-meta,.feed-pinned-list .feed-entry p {opacity:calc(1 - var(--pin-progress));max-height:calc(120px * (1 - var(--pin-progress)));overflow:hidden}
.feed-pinned-list .feed-thumbnail {opacity:calc(1 - var(--pin-progress));width:calc(154px * (1 - var(--pin-progress)));flex-basis:calc(154px * (1 - var(--pin-progress)));height:calc(100px * (1 - var(--pin-progress)));border-width:0}
.feed-pinned-list.pins-compact .feed-meta,.feed-pinned-list.pins-compact .feed-entry p,.feed-pinned-list.pins-compact .feed-thumbnail {display:none}
.feed-pinned-list.pins-compact .feed-entry {padding-right:28px}
.feed-pinned-list.pins-compact .feed-entry::after {content:'↗';position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--site-muted)}
.feed-pinned-list.pins-compact .feed-arrow {display:none}
.feed-pinned-list a:focus-visible {outline-offset:-2px}
@media(max-width:700px){
 .feed-pinned-list .feed-entry h3 {font-size:calc(20px - 4px * var(--pin-progress))}
 .feed-pinned-list .feed-thumbnail {width:calc(96px * (1 - var(--pin-progress)));flex-basis:calc(96px * (1 - var(--pin-progress)));height:calc(76px * (1 - var(--pin-progress)))}
}
/* Collection containers show their hierarchy above the descriptive title. */
.hierarchy-row .hierarchy-level {display:block;color:var(--site-text);font-size:20px;font-weight:400;line-height:1.4;margin-bottom:8px}
.hierarchy-row .title small {display:block;margin-top:6px}
@media(max-width:700px){.hierarchy-row .hierarchy-level {font-size:18px;margin-bottom:6px}}

/* Keep the pinned indicator quiet in the compact title strip. */
.feed-pinned-list.pins-compact .feed-entry h3::after {content:"";display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:-1px;background-color:var(--site-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6l-1%207%204%204v2H6v-2l4-4-1-7Z%22%2F%3E%3Cpath%20d%3D%22M12%2016v6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6l-1%207%204%204v2H6v-2l4-4-1-7Z%22%2F%3E%3Cpath%20d%3D%22M12%2016v6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;transform:rotate(30deg)}

/* Audio title, controls and caption share consistent vertical spacing. */
main .player {display:flex;flex-direction:column;gap:16px;padding:24px;margin:28px 0;white-space:normal}
main .player > p {margin:0;max-width:none;text-align:start;overflow-wrap:anywhere}
main .player > audio {margin:0;min-width:0;width:100%;flex-shrink:0}
@media(max-width:700px){main .player {gap:14px;padding:18px}}

.tunversong-abbreviation {display:block;font-size:.85em;margin-top:4px;color:var(--site-muted);white-space:nowrap}

.aside .related-destination {display:block;border-top:1px solid var(--site-rule);padding:16px 0;margin:0;text-decoration:none;overflow-wrap:anywhere}
.related-destination > span {display:block}
.related-destination .meta {margin-bottom:5px}
.related-destination:hover > span:last-child {text-decoration:underline}

/* Draw feed arrows consistently: iOS must not substitute coloured emoji. */
.feed-arrow,
.feed-pinned-list.pins-compact .feed-entry::after {
 width:16px;height:16px;font-size:0;line-height:0;
 background-color:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 16L16 4M5 4h11v11' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 16L16 4M5 4h11v11' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.feed-pinned-list.pins-compact .feed-entry::after {content:'';}

/* Explicit Home destination in the collapsed phone Theory navigation. */
.masthead .masthead-choices a.theory-phone-home {display:none}
@media(max-width:700px){
 body.theory-area.masthead-compact .masthead-logo {display:none}
 body.theory-area.masthead-compact .masthead-choices::before {display:none;content:none}
 body.theory-area.masthead-compact .masthead .masthead-choices a.theory-phone-home {
  display:flex;order:-1;grid-column:auto;border:0;
 }
}