@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  word-break: normal;
}

img, fieldset {
  border: 0;
}

abbr {
  text-decoration: none;
}

code {
  line-height: 1em;
}

pre {
  overflow: auto;
  word-wrap: normal;
  tab-size: 4;
}

sub, sup {
  line-height: 0.5em;
}

img {
  max-width: 100%;
  height: auto;
}

iframe, video, embed, object {
  display: block;
  max-width: 100%;
}

img, .left, .right, .center {
  display: block;
}

.center {
  float: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

button, input[type=submit] {
  cursor: pointer;
  overflow: visible;
}

body {
  font-family: "Newsreader", serif;
  font-size: 18px;
  line-height: 29px;
  color: #2e2118;
  background-color: #fffcf6;
  overflow-x: hidden;
}

h1 {
  font-family: "Baloo 2", sans-serif;
  font-size: 37px;
  line-height: 55px;
  margin-bottom: 29px;
}

h2 {
  font-family: "Baloo 2", sans-serif;
  font-size: 29px;
  line-height: 44px;
  margin-top: 47px;
  margin-bottom: 29px;
}

h3 {
  font-family: "Baloo 2", sans-serif;
  font-size: 23px;
  line-height: 36px;
  margin-top: 29px;
  margin-bottom: 18px;
}

h4 {
  font-family: "Baloo 2", sans-serif;
  font-size: 18px;
  line-height: 29px;
  margin-bottom: 11px;
}

h1 + h2, h2 + h3, h1:first-child, h2:first-child, h3:first-child, hr + h2 {
  margin-top: 0;
}

a {
  color: #4a2560;
  text-decoration: none;
}
p a, .page-content a {
  text-decoration: underline;
}
p a.button, .page-content a.button {
  text-decoration: none;
}

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
}

li:last-child {
  margin-bottom: 0;
}

blockquote {
  padding-left: 18px;
  border-left: 7px solid rgba(0, 0, 0, 0.1);
}
blockquote > :last-child {
  margin-bottom: 0;
}

sub, sup {
  color: #6a5646;
}

code, pre, kbd {
  font-size: 16px;
}

code {
  background-color: rgba(0, 0, 0, 0.08);
  padding: 4px;
  border-radius: 7px;
  margin: 0 1px;
}
strong code {
  font-weight: normal;
}

pre {
  color: #2e2118;
  background-color: #fff7ea;
  padding: 18px;
  border-radius: 0 11px 11px 0;
  border-left: 7px solid rgba(0, 0, 0, 0.1);
}

kbd {
  font-size: 14px;
  color: #4e4e4e;
  background-color: #f7f7f7;
  padding: 4px 7px;
  border: 1px solid #ccc;
  border-radius: 7px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fafafa inset, 0 0 0 1px #fff inset;
  margin: 0 1px;
}

svg {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
}

hr {
  border: 3px solid #2e2118;
  border-width: 0 0 1px 0;
  margin: 29px 0;
}

.drop-cap {
  font-family: "Baloo 2", sans-serif;
  font-size: 58px;
  line-height: 1em;
  color: #4a2560;
  margin-right: 7px;
  float: left;
}

.small {
  font-family: "Baloo 2", sans-serif;
  font-size: 14px;
  line-height: 23px;
  color: #6a5646;
}

.callout {
  color: #111111;
  background-color: rgba(255, 255, 255, 0.1411764706);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.4196078431);
}
.callout.alert {
  color: #FFFFFF;
  background-color: #fa3655;
}
.callout.note {
  color: #111111;
  background-color: #f2f5e7;
}
.callout > :last-child {
  margin-bottom: 0;
}

.highlight {
  background-color: #ffd40c;
  padding: 4px 0;
}

.impact {
  font-family: "Baloo 2", sans-serif;
  font-size: 23px;
  line-height: 36px;
  color: #2e2118;
}

.pop {
  box-shadow: 0 0 11px rgba(0, 0, 0, 0.4);
}

.caption {
  font-family: "Baloo 2", sans-serif;
  font-size: 14px;
  line-height: 23px;
  color: #6a5646;
  margin-top: -25px;
}
.caption code {
  font-size: 13px;
}
.center + .caption {
  text-align: center;
}
blockquote + .caption {
  padding-left: 25px;
}
h1 + .caption, h2 + .caption {
  margin-top: -26.5px;
}
h3 + .caption {
  margin-top: -16px;
  margin-bottom: 18px;
}

p, ul, ol, blockquote, pre, img, .callout, .caption {
  margin-bottom: 29px;
}

@media all and (min-width: 598px) {
  body:not(.has-sidebar) h1 {
    font-size: 47px;
    line-height: 69px;
  }
  body:not(.has-sidebar) h2 {
    font-size: 37px;
    line-height: 55px;
  }
  body:not(.has-sidebar) h3 {
    font-size: 29px;
    line-height: 44px;
  }
  body:not(.has-sidebar) h4 {
    font-size: 23px;
    line-height: 36px;
  }
  body:not(.has-sidebar) h1 + .caption, body:not(.has-sidebar) h2 + .caption {
    margin-top: -25px;
  }
  body:not(.has-sidebar) h3 + .caption {
    margin-top: -15px;
  }
  .impact {
    font-size: 29px;
    line-height: 44px;
  }
  .left:not(.bar) {
    float: left;
    clear: both;
    margin-right: 29px;
  }
  .right:not(.bar) {
    float: right;
    clear: both;
    margin-left: 29px;
  }
}
.page-container + .page-container {
  margin-top: 47px;
}

.page-content > :last-child {
  margin-bottom: 0;
}

.page-list {
  margin-bottom: 0;
}

.page-title {
  font-family: "Baloo 2", sans-serif;
}
.page-title a {
  color: #2e2118;
}
.page-title a:hover {
  color: #4a2560;
}
.page-title:has(+ .byline) {
  margin-bottom: 0;
}

.byline {
  font-family: "Baloo 2", sans-serif;
  font-size: 14px;
  line-height: 23px;
  margin-bottom: 29px;
}
.byline .page-author:after, .byline .page-date:after, .byline .page-edit:after {
  display: block;
  height: 0;
  content: "\a";
  white-space: pre;
}
.byline .avatar {
  width: 46px;
  height: 46px;
}

.author-description {
  border-top: 1px solid #e6d3b6;
  padding-top: 29px;
}
.author-description .avatar {
  float: left;
  width: 87px;
  height: 87px;
  margin-right: 18px;
}

.author-description-intro {
  font-weight: bold;
}

.page-container, .headline-area, .byline, .page-content, .page-list, .author-description {
  display: flow-root;
}

@media all and (min-width: 370px) {
  .byline .page-author:after, .byline .page-date:after {
    display: none;
  }
  .byline .page-author + .page-date-intro:before, .byline .page-author + .page-date:before, .byline .page-date + .page-date-intro:before {
    content: "• ";
  }
}
@media all and (min-width: 598px) {
  .headline-area {
    position: relative;
  }
}
.page-content + .modular-content {
  margin-top: 29px;
}
.modular-content > :last-child {
  margin-bottom: 0;
}

label {
  display: block;
  font-family: "Baloo 2", sans-serif;
}
label .required {
  font-weight: normal;
  color: #fa3655;
}

input, textarea, select {
  display: block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1em;
  font-weight: inherit;
  padding: 11px;
  border: 2px solid #2e2118;
}

input[type=checkbox], input[type=radio], input[type=image], input[type=submit], select {
  width: auto;
}

input[type=checkbox], input[type=radio] {
  display: inline-block;
}
input[type=checkbox] + label, input[type=radio] + label {
  display: inline;
  font-weight: normal;
  margin-left: 4px;
  user-select: none;
}

textarea {
  line-height: inherit;
  padding: 11px;
  border: 2px solid #2e2118;
}

select {
  border: 2px solid #2e2118;
}

button, input[type=submit], .button {
  display: inline-block;
  width: auto;
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  line-height: 1em;
  vertical-align: top;
  color: #111111;
  text-decoration: none;
  background-color: #ffd40c;
  padding: 11px 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom-width: 4px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-radius: 11px;
  cursor: pointer;
  user-select: none;
}
button:hover, button:active, input[type=submit]:hover, input[type=submit]:active, .button:hover, .button:active {
  text-decoration: none;
  background-color: #ffdb32;
  transition: background-color 0.3s ease;
}
button:active, input[type=submit]:active, .button:active {
  border-bottom-width: 2px;
  margin-top: 2px;
}

button.save, .button.save {
  color: #111111;
  background-color: #ffd40c;
}
button.save:hover, button.save:active, .button.save:hover, .button.save:active {
  background-color: #ffdb32;
}
button.delete, .button.delete {
  color: #FFFFFF;
  background-color: #fa3655;
}
button.delete:hover, button.delete:active, .button.delete:hover, .button.delete:active {
  background-color: #fb5b75;
}
button.action, .button.action {
  color: #111111;
  background-color: rgba(255, 252, 246, 0);
}
button.action:hover, button.action:active, .button.action:hover, .button.action:active {
  background-color: rgba(255, 255, 255, 0);
}
button.update, .button.update {
  color: #111111;
  background-color: rgba(255, 252, 246, 0);
}
button.update:hover, button.update:active, .button.update:hover, .button.update:active {
  background-color: rgba(255, 255, 255, 0);
}
button svg, .button svg {
  vertical-align: inherit;
}

#banner {
  padding-left: 29px;
  padding-right: 29px;
}
@media all and (min-width: 598px) {
  #banner {
    padding-left: 29px;
    padding-right: 29px;
  }
}

#header {
  color: #2e2118;
  background-color: #fffcf6;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e6d3b6;
}

#content {
  word-break: break-word;
  color: #2e2118;
  background-color: #fffcf6;
  padding-top: 47px;
  padding-bottom: 47px;
}

#footer {
  font-family: "Baloo 2", sans-serif;
  font-size: 14px;
  line-height: 23px;
  color: #6a5646;
  background-color: #fffcf6;
  padding-top: 47px;
  padding-bottom: 47px;
  border-top: 1px solid #e6d3b6;
}

.container {
  box-sizing: border-box;
  padding-left: 29px;
  padding-right: 29px;
}
@media all and (min-width: 598px) {
  .container {
    max-width: 540px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 598px) {
  .container {
    max-width: 100%;
    padding-left: 29px;
    padding-right: 29px;
    margin-left: 0;
    margin-right: 0;
  }
}
@media all and (min-width: 1178px) {
  .container {
    max-width: 1120px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

#site-title {
  font-family: "Baloo 2", sans-serif;
  font-size: 14px;
  line-height: 23px;
  color: #4a2560;
}
#site-title a {
  color: inherit;
}

.menu {
  font-family: "Baloo 2", sans-serif;
  font-size: 14px;
  line-height: 23px;
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.menu::-webkit-scrollbar {
  display: none;
}
.menu li {
  margin-right: 18px;
  margin-bottom: 0;
}
.menu li:last-child {
  margin-right: 0;
}
.menu a {
  display: block;
  color: #2e2118;
  padding-top: 7px;
  padding-bottom: 7px;
}
.menu:before {
  content: "↔";
  color: #6a5646;
  margin-right: 18px;
}
@media all and (min-width: 598px) {
  .focus .menu {
    justify-content: center;
  }
  .menu:before {
    display: none;
  }
}

.bar {
  color: #6a5646;
}
@media all and (min-width: 1178px) {
  .text .bar {
    width: 100%;
  }
  .text .bar code {
    font-size: 13px;
  }
  .readability .text .bar, .focus .text .bar {
    box-sizing: border-box;
    float: right;
    clear: right;
    font-size: 14px;
    line-height: 23px;
    margin-bottom: 18px;
  }
  .readability .text .bar {
    max-width: 533px;
    margin-right: -580px;
  }
  .focus .text .bar {
    max-width: 261px;
    margin-right: -290px;
  }
  .focus .text .bar.left {
    float: left;
    clear: left;
    margin-left: -290px;
  }
}

.bleed {
  display: flow-root;
  position: relative;
  width: 100vw;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: -29px;
}
.bleed:has(+ .bleed) {
  border-bottom: 0;
}
.text:first-child > .page-content:first-child > .bleed:first-child {
  border-top: 0;
  margin-top: -47px;
}
.page-content:last-child .bleed:last-child {
  border-bottom: 0;
  margin-bottom: -47px;
}
@media all and (min-width: 598px) {
  .bleed {
    margin-left: calc((540px - 100vw) / 2);
  }
}
@media all and (min-width: 598px) {
  .bleed {
    margin-left: -29px;
  }
}
@media all and (min-width: 1178px) {
  .bleed {
    margin-left: calc((1120px - 100vw) / 2);
  }
}
.focus .bleed {
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.bleed pre {
  background-color: rgba(0, 0, 0, 0.1);
}
.bleed.no-border {
  border-top: none;
}
.bleed.red {
  background-color: hsl(0, 100%, 90%);
}
.bleed.red blockquote, .bleed.red .page-content > .small, .bleed.red .caption, .bleed.red .bar {
  color: hsl(0, 100%, 25%);
}
.bleed.salmon {
  background-color: hsl(20, 100%, 90%);
}
.bleed.salmon blockquote, .bleed.salmon .page-content > .small, .bleed.salmon .caption, .bleed.salmon .bar {
  color: hsl(20, 100%, 25%);
}
.bleed.orange {
  background-color: hsl(40, 100%, 90%);
}
.bleed.orange blockquote, .bleed.orange .page-content > .small, .bleed.orange .caption, .bleed.orange .bar {
  color: hsl(40, 100%, 25%);
}
.bleed.yellow {
  background-color: hsl(60, 100%, 90%);
}
.bleed.yellow blockquote, .bleed.yellow .page-content > .small, .bleed.yellow .caption, .bleed.yellow .bar {
  color: hsl(60, 100%, 25%);
}
.bleed.chartreuse {
  background-color: hsl(80, 100%, 90%);
}
.bleed.chartreuse blockquote, .bleed.chartreuse .page-content > .small, .bleed.chartreuse .caption, .bleed.chartreuse .bar {
  color: hsl(80, 100%, 25%);
}
.bleed.lime {
  background-color: hsl(100, 100%, 90%);
}
.bleed.lime blockquote, .bleed.lime .page-content > .small, .bleed.lime .caption, .bleed.lime .bar {
  color: hsl(100, 100%, 25%);
}
.bleed.green {
  background-color: hsl(120, 100%, 90%);
}
.bleed.green blockquote, .bleed.green .page-content > .small, .bleed.green .caption, .bleed.green .bar {
  color: hsl(120, 100%, 25%);
}
.bleed.aquamarine {
  background-color: hsl(140, 100%, 90%);
}
.bleed.aquamarine blockquote, .bleed.aquamarine .page-content > .small, .bleed.aquamarine .caption, .bleed.aquamarine .bar {
  color: hsl(140, 100%, 25%);
}
.bleed.turquoise {
  background-color: hsl(160, 100%, 90%);
}
.bleed.turquoise blockquote, .bleed.turquoise .page-content > .small, .bleed.turquoise .caption, .bleed.turquoise .bar {
  color: hsl(160, 100%, 25%);
}
.bleed.cyan {
  background-color: hsl(180, 100%, 90%);
}
.bleed.cyan blockquote, .bleed.cyan .page-content > .small, .bleed.cyan .caption, .bleed.cyan .bar {
  color: hsl(180, 100%, 25%);
}
.bleed.blue {
  background-color: hsl(200, 100%, 90%);
}
.bleed.blue blockquote, .bleed.blue .page-content > .small, .bleed.blue .caption, .bleed.blue .bar {
  color: hsl(200, 100%, 25%);
}
.bleed.steel {
  background-color: hsl(220, 100%, 90%);
}
.bleed.steel blockquote, .bleed.steel .page-content > .small, .bleed.steel .caption, .bleed.steel .bar {
  color: hsl(220, 100%, 25%);
}
.bleed.lavender {
  background-color: hsl(240, 100%, 90%);
}
.bleed.lavender blockquote, .bleed.lavender .page-content > .small, .bleed.lavender .caption, .bleed.lavender .bar {
  color: hsl(240, 100%, 25%);
}
.bleed.purple {
  background-color: hsl(260, 100%, 90%);
}
.bleed.purple blockquote, .bleed.purple .page-content > .small, .bleed.purple .caption, .bleed.purple .bar {
  color: hsl(260, 100%, 25%);
}
.bleed.orchid {
  background-color: hsl(280, 100%, 90%);
}
.bleed.orchid blockquote, .bleed.orchid .page-content > .small, .bleed.orchid .caption, .bleed.orchid .bar {
  color: hsl(280, 100%, 25%);
}
.bleed.magenta {
  background-color: hsl(300, 100%, 90%);
}
.bleed.magenta blockquote, .bleed.magenta .page-content > .small, .bleed.magenta .caption, .bleed.magenta .bar {
  color: hsl(300, 100%, 25%);
}
.bleed.pink {
  background-color: hsl(320, 100%, 90%);
}
.bleed.pink blockquote, .bleed.pink .page-content > .small, .bleed.pink .caption, .bleed.pink .bar {
  color: hsl(320, 100%, 25%);
}
.bleed.rose {
  background-color: hsl(340, 100%, 90%);
}
.bleed.rose blockquote, .bleed.rose .page-content > .small, .bleed.rose .caption, .bleed.rose .bar {
  color: hsl(340, 100%, 25%);
}

@media all and (min-width: 598px) {
  .focus #header, .focus #nav, .focus #nav-2, .focus #footer {
    text-align: center;
  }
  .focus #header-image, .focus #logo {
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 598px) {
  .focus .text .headline-area, .focus .text .featured-image-wrap, .focus .text .page-content h1, .focus .text h2, .focus .text h3, .focus .text h1 + .caption, .focus .text h2 + .caption, .focus .text h3 + .caption, .focus .text .impact, .focus .text .extend + .caption, .focus .text .extend .caption {
    text-align: center;
  }
  .focus .text .byline .avatar {
    margin-left: auto;
    margin-right: auto;
  }
}

.readability .text .byline .avatar {
  float: right;
  margin-left: 18px;
  margin-bottom: 0;
}
.focus .text .byline .avatar {
  margin-bottom: 7px;
}
@media all and (min-width: 598px) {
  .readability .text .byline .avatar {
    float: left;
    margin-left: 0;
    margin-right: 18px;
  }
  .focus .text .byline .avatar {
    margin-bottom: 11px;
  }
}
.focus .text .breakout {
  margin-left: auto;
  margin-right: auto;
}
.text .breakout.left {
  float: none;
  margin-left: 0;
  margin-right: 0;
}
.text .pullout.left {
  float: none;
  margin-right: 0;
}
@media all and (min-width: 598px) {
  .readability .text, .focus .text {
    max-width: 540px;
  }
  .readability .text .extend, .focus .text .extend {
    display: flow-root;
    box-sizing: border-box;
    max-width: calc(100vw - 58px);
  }
  .readability .text .headline-area, .readability .text .page-content > h1, .readability .text .page-content > h2, .readability .text .page-content > h3, .readability .text .page-content > .impact, .readability .text .extend, .readability .text .extend + .caption {
    margin-right: calc(598px - 100vw);
  }
  .focus .text {
    margin-left: auto;
    margin-right: auto;
  }
  .focus .text .headline-area, .focus .text .page-content > h1, .focus .text .page-content > h2, .focus .text .page-content > h3, .focus .text .page-content > .impact, .focus .text .extend, .focus .text .extend + .caption {
    margin-left: calc(299px - 50vw);
    margin-right: calc(299px - 50vw);
  }
  .focus .text .extend.right {
    margin-left: 29px;
  }
  .focus .text .extend.left {
    margin-right: 29px;
  }
}
@media all and (min-width: 1178px) {
  .readability .text .pullout, .focus .text .pullout {
    float: right;
    box-sizing: border-box;
  }
  .readability .text .extend, .focus .text .extend {
    max-width: 1120px;
  }
  .readability .text .extend .pullout, .focus .text .extend .pullout {
    float: none;
    max-width: 100%;
  }
  .readability .text .headline-area, .readability .text .page-content > h1, .readability .text .page-content > h2, .readability .text .page-content > h3, .readability .text .page-content > .impact, .readability .text .extend, .readability .text .extend + .caption {
    margin-right: -580px;
  }
  .readability .text .breakout {
    max-width: calc(835.5px + (100vw - 1120px) / 2);
    margin-right: calc(-580px - (100vw - 1120px) / 2);
  }
  .readability .text .pullout {
    max-width: calc(100vw - (100vw - 1120px) / 2 - 587px);
    margin-right: calc(-580px - (100vw - 1120px) / 2);
  }
  .readability .text .extend .pullout {
    margin-left: 0;
    margin-right: 0;
  }
  .focus .text .headline-area, .focus .text .page-content > h1, .focus .text .page-content > h2, .focus .text .page-content > h3, .focus .text .page-content > .impact, .focus .text .extend, .focus .text .extend + .caption {
    margin-left: -290px;
    margin-right: -290px;
  }
  .focus .text .breakout {
    max-width: calc(545.5px + (100vw - 1120px) / 2);
    margin-left: 29px;
    margin-right: calc(270px - 50vw);
  }
  .focus .text .breakout.left {
    margin-left: calc(270px - 50vw);
    margin-right: 29px;
  }
  .focus .text .pullout {
    max-width: calc(100vw - (100vw - 1120px) / 2 - 859px);
    margin-right: calc(-290px - (100vw - 1120px) / 2);
  }
  .focus .text .pullout.left {
    float: left;
    margin-left: calc(-290px - (100vw - 1120px) / 2);
    margin-right: 0;
  }
  .focus .text .extend .pullout {
    margin-left: auto;
    margin-right: auto;
  }
  .text .breakout, .text .extend .breakout {
    float: right;
    box-sizing: border-box;
    max-width: calc(545.5px + (100vw - 1120px) / 2);
    margin-left: 29px;
    margin-right: calc((1120px - 100vw) / 2);
  }
  .text .breakout.left, .text .extend .breakout.left {
    float: left;
    margin-left: calc((1120px - 100vw) / 2);
    margin-right: 29px;
  }
  .has-sidebar .text .breakout, .has-sidebar .text .extend .breakout {
    float: none;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   Registered vars reach the page through the @if/@else bridge so
   Design Options stay live. Non-registered design constants are
   emitted as plain declarations (they are not user-editable).
   NOTE: the source design's six rainbow bands are named --band-N
   here, NOT --b1..--b6, because $b1-1178px are PageMotor BREAKPOINTS.
   ============================================================ */
:root {
  --bg1: #FFFCF6FF;
  --bg2: #FFF7EAFF;
  --c1: #2E2118FF;
  --c2: #6A5646FF;
  --ca: #4A2560FF;
  --border1: 1px solid #E6D3B6FF;
  --border2: 2px solid #2E2118FF;
  --border3: 3px solid #2E2118FF;
  --font1: "Newsreader", serif;
  --font2: "Baloo 2", sans-serif;
  --f1: 47px;
  --f2: 37px;
  --f3: 29px;
  --f4: 23px;
  --f5: 18px;
  --f6: 14px;
  --g1: 69px;
  --g2: 55px;
  --g3: 44px;
  --g4: 36px;
  --g5: 29px;
  --g6: 23px;
  --x1: 47px;
  --x2: 29px;
  --x3: 18px;
  --x4: 11px;
  --x5: 7px;
  --x6: 4px;
  --w-content: 540px;
  --w-total: 1120px;
  --gutter-full: 29px;
  --gutter-mobile: 29px;
  --phi: 1.6180339887;
  --bg-header: #FFFCF6FF;
  --c-header: #2E2118FF;
  --b-header: 1px solid #E6D3B6FF;
  --bg-footer: #FFFCF6FF;
  --c-footer: #6A5646FF;
  --bg-button: #FFD40CFF;
  --bg-button-action: #FFFCF600;
  --bg-button-save: #FFD40CFF;
  --bg-button-update: #FFFCF600;
  --p-button-x: 18px;
  --p-button-y: 11px;
  --bg-callout: #FFFFFF24;
  --bg-callout-note: #F2F5E7FF;
  --bg-callout-alert: #FA3655FF;
  --p-callout: 18px;
  --bg-highlight: #FFD40CFF;
  --c-impact: #2E2118FF;
  --c-caption: #6A5646FF;
  --c-drop-cap: #4A2560FF;
  --bg-pre: #FFF7EAFF;
  --c-pre: #2E2118FF;
  --p-input: 11px;
  --b-input: 2px solid #2E2118FF;
  --c-required: #FA3655FF;
  --band-1: #FA3655;
  --band-2: #FE952F;
  --band-3: #FFD40C;
  --band-4: #409C20;
  --band-5: #3D8FD8;
  --band-6: #7B4BA8;
  --oak: #A57642;
  --oak-ink: #8A6134;
  --oak-2: #E6D3B6;
  --plum: #6B3B84;
  --plum-2: #4A2560;
  --arch-radius: 52% 52% 10px 10px / 42% 42% 10px 10px;
  --shadow-hard: 4px 4px 0 var(--c1);
  --shadow-hard-pressed: 2px 2px 0 var(--c1);
  --shadow-form: 6px 6px 0 rgba(46, 33, 24, 0.32);
  --wood: linear-gradient(180deg, #97693A 0%, #8A6134 55%, #7A5530 100%);
  --wood-grain: repeating-linear-gradient(180deg, rgba(46, 33, 24, 0.07) 0 2px, transparent 2px 10px);
}

/* ============================================================
   2. RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
  padding: 0;
}

img,
iframe,
video {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

/* ============================================================
   3. BODY AND STRUCTURAL FOUNDATIONS
   ============================================================ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg1);
  color: var(--c1);
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  font-optical-sizing: auto;
}

::selection {
  background: var(--band-3);
  color: var(--c1);
}

.wrap {
  max-width: var(--w-total);
  margin: 0 auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}

@media all and (min-width: 598px) {
  .wrap {
    padding-left: var(--gutter-full);
    padding-right: var(--gutter-full);
  }
}
section {
  padding-top: var(--g1);
  padding-bottom: var(--g1);
}

.band {
  background: var(--bg2);
  border-top: var(--border1);
  border-bottom: var(--border1);
}

.head {
  max-width: 60ch;
  margin-bottom: var(--x1);
}

:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
  border-radius: var(--x6);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--x3);
  top: var(--x3);
  z-index: 99;
  background: var(--band-3);
  color: var(--c1);
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: 1em;
  padding: var(--x4) var(--x3);
  border-radius: var(--x4);
}

/* ============================================================
   4. COMMON CONTENT ELEMENTS
   ============================================================ */
h1,
h2,
h3,
h4 {
  font-family: var(--font2);
  font-weight: 600;
  letter-spacing: -0.015em;
}

body:not(.has-sidebar) h1 {
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  line-height: 1.08;
  text-wrap: balance;
}

body:not(.has-sidebar) h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.3rem);
  line-height: 1.08;
  text-wrap: balance;
}

h3 {
  font-size: var(--f4);
  line-height: var(--g4);
}

h4 {
  font-size: var(--f5);
  line-height: var(--g5);
}

a {
  color: var(--ca);
}

blockquote {
  font-size: var(--f5);
  line-height: var(--g5);
  border-left: var(--border2);
  padding-left: var(--x3);
}
blockquote p {
  margin-bottom: var(--x4);
}
blockquote p:last-child {
  margin-bottom: 0;
}

pre {
  background: var(--bg-pre);
  color: var(--c-pre);
  font-family: var(--font-code);
  font-size: var(--f5);
  line-height: var(--g5);
  padding: var(--x3);
  border-radius: var(--x4);
  overflow-x: auto;
}

hr {
  border: 0;
  border-top: var(--border1);
  margin: var(--x2) 0;
}

/* PageMotor formatting primitives */
.callout {
  background: var(--bg-callout);
  padding: var(--p-callout);
  border-left: 3px solid var(--ca);
  border-radius: var(--x4);
}
.callout.alert {
  background: var(--bg-callout-alert);
  color: var(--bg1);
}
.callout.note {
  background: var(--bg-callout-note);
  color: var(--bg1);
}

.impact {
  font-family: var(--font2);
  color: var(--c-impact);
  font-size: var(--f2);
  line-height: var(--g2);
}

.caption {
  font-family: var(--font2);
  color: var(--c-caption);
  font-size: var(--f6);
  line-height: var(--g6);
}

.small {
  font-size: var(--f6);
  line-height: var(--g6);
}

.highlight {
  background: var(--bg-highlight);
}

.drop-cap {
  font-family: var(--font2);
  color: var(--c-drop-cap);
  float: left;
  font-size: var(--f1);
  line-height: 1em;
  margin-right: var(--x5);
}

.pop {
  display: inline-block;
  background: var(--bg1);
  border: var(--border2);
  border-radius: var(--x4);
  box-shadow: var(--shadow-hard);
  padding: var(--x5) var(--x4);
}

/* ============================================================
   5. DYNAMIC CONTENT ELEMENTS (.page-content scope)
   Focus mode: content column centred, headlines break out evenly.
   ============================================================ */
.page-container {
  margin-left: auto;
  margin-right: auto;
}
.page-container .headline-area,
.page-container .page-content h1,
.page-container .page-content h2,
.page-container .page-content h3,
.page-container .page-content .impact {
  text-align: center;
}
@media all and (min-width: 598px) {
  .page-container .headline-area,
  .page-container .page-content > h1,
  .page-container .page-content > h2,
  .page-container .page-content > h3,
  .page-container .page-content > .impact {
    margin-left: calc((var(--w-content) + 2 * var(--gutter-full)) / 2 - 50vw);
    margin-right: calc((var(--w-content) + 2 * var(--gutter-full)) / 2 - 50vw);
  }
}
@media all and (min-width: 1178px) {
  .page-container .headline-area,
  .page-container .page-content > h1,
  .page-container .page-content > h2,
  .page-container .page-content > h3,
  .page-container .page-content > .impact {
    margin-left: calc((var(--w-content) - var(--w-total)) / 2);
    margin-right: calc((var(--w-content) - var(--w-total)) / 2);
  }
}

.headline-area {
  margin-bottom: var(--x2);
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  margin-top: var(--x1);
  margin-bottom: var(--x3);
}
.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote,
.page-content figure,
.page-content pre {
  margin-bottom: var(--x3);
}
.page-content ul,
.page-content ol {
  padding-left: var(--x2);
}
.page-content ul {
  list-style: disc;
}
.page-content ol {
  list-style: decimal;
}
.page-content li {
  margin-bottom: var(--x5);
}
.page-content > :last-child {
  margin-bottom: 0;
}

/* ============================================================
   6. FORMS
   ============================================================ */
label {
  display: block;
  font-family: var(--font2);
  font-weight: 500;
  font-size: var(--f5);
  line-height: var(--g5);
  margin-bottom: var(--x5);
  color: var(--c1);
}

.required {
  color: var(--c-required);
}

input,
select,
textarea {
  width: 100%;
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: 1em;
  padding: var(--x4) var(--x4);
  border: var(--b-input);
  border-radius: var(--x4);
  background: var(--bg2);
  color: var(--c1);
}

textarea {
  min-height: calc(var(--x1) * 2);
  line-height: var(--g5);
  resize: vertical;
}

button,
.button {
  display: inline-block;
  font-family: var(--font2);
  font-weight: 600;
  font-size: var(--f5);
  line-height: 1em;
  text-decoration: none;
  cursor: pointer;
  background: var(--bg-button);
  color: var(--c1);
  padding: var(--p-button-y) var(--p-button-x);
  border: var(--border2);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
button:hover,
.button:hover {
  color: var(--c1);
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-hard-pressed);
}
button.action,
.button.action {
  background: var(--bg-button-action);
  box-shadow: none;
}
button.action:hover,
.button.action:hover {
  background: var(--bg2);
  transform: none;
}
button.save,
.button.save {
  background: var(--bg-button-save);
  box-shadow: none;
  border-width: 0;
}
button.save:hover,
.button.save:hover {
  background: var(--band-2);
  transform: none;
}
button.update,
.button.update {
  background: var(--bg-button-update);
  color: var(--bg1);
  border: 0;
  border-bottom: 4px solid var(--band-3);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.2;
}
button.update:hover,
.button.update:hover {
  color: var(--band-3);
  border-bottom-color: var(--bg1);
  transform: none;
}

/* ============================================================
   7. SHARED COMPONENT STYLES
   ============================================================ */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-header);
  color: var(--c-header);
  backdrop-filter: blur(10px);
  border-bottom: var(--b-header);
}
.top > .wrap {
  display: flex;
  align-items: center;
  gap: var(--x2);
  padding-top: var(--x5);
  padding-bottom: var(--x5);
  position: relative;
}

.mark {
  display: flex;
  align-items: center;
  gap: var(--x4);
  text-decoration: none;
  color: inherit;
}
.mark img {
  width: calc(var(--x1) - var(--x5));
  height: calc(var(--x1) - var(--x5));
  border-radius: var(--x4);
  border: var(--border1);
  background: var(--bg1);
  padding: 2px;
}
.mark b {
  display: block;
  font-family: var(--font2);
  font-weight: 600;
  font-size: var(--f5);
  line-height: 1.1;
  color: var(--plum-2);
}
.mark i {
  display: block;
  font-style: normal;
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

.desk {
  margin-left: auto;
  display: flex;
  gap: var(--x2);
  align-items: center;
}
.desk a {
  text-decoration: none;
  color: var(--c1);
  font-family: var(--font2);
  font-weight: 500;
  font-size: var(--f5);
  line-height: var(--g5);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.desk a:hover {
  border-bottom-color: var(--band-3);
}

.head-tel {
  white-space: nowrap;
}

/* Mobile disclosure nav — zero JavaScript, native . */
.menu {
  display: none;
  margin-left: auto;
}
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--x4);
  font-family: var(--font2);
  font-weight: 600;
  font-size: var(--f5);
  line-height: 1em;
  color: var(--c1);
  background: var(--bg1);
  border: var(--border2);
  border-radius: 999px;
  padding: var(--x5) var(--x3);
  box-shadow: var(--shadow-hard-pressed);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.menu .label-open {
  display: none;
}
.menu[open] > summary .bars i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu[open] > summary .bars i:nth-child(2) {
  opacity: 0;
}
.menu[open] > summary .bars i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.menu[open] > summary .label-open {
  display: inline;
}
.menu[open] > summary .label-shut {
  display: none;
}

.bars {
  width: 22px;
  height: 16px;
  position: relative;
  flex: 0 0 auto;
}
.bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--x6);
  border-radius: 999px;
  transition: transform 0.22s cubic-bezier(0.3, 0.75, 0.2, 1), opacity 0.16s ease;
}
.bars i:nth-child(1) {
  top: 0;
  background: var(--band-1);
}
.bars i:nth-child(2) {
  top: 6px;
  background: var(--band-3);
}
.bars i:nth-child(3) {
  top: 12px;
  background: var(--band-5);
}

.drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg1);
  border-bottom: var(--border2);
  box-shadow: 0 8px 0 rgba(46, 33, 24, 0.1);
  padding-top: var(--x3);
  padding-bottom: var(--x2);
}

.drawer-inner {
  max-width: var(--w-total);
  margin: 0 auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
.drawer-inner li {
  border-bottom: var(--border1);
}
.drawer-inner li:last-child {
  border-bottom: 0;
}
.drawer-inner a {
  display: flex;
  align-items: center;
  gap: var(--x4);
  text-decoration: none;
  color: var(--c1);
  font-family: var(--font2);
  font-weight: 500;
  font-size: var(--f5);
  line-height: var(--g5);
  padding: var(--x3) var(--x6);
}
.drawer-inner a:hover {
  color: var(--plum-2);
}
.drawer-inner em {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid var(--c1);
}
.drawer-inner li:nth-child(1) em {
  background: var(--band-1);
}
.drawer-inner li:nth-child(2) em {
  background: var(--band-2);
}
.drawer-inner li:nth-child(3) em {
  background: var(--band-4);
}
.drawer-inner li:nth-child(4) em {
  background: var(--band-5);
}
.drawer-inner li:nth-child(5) em {
  background: var(--band-6);
}
.drawer-inner .drawer-tel {
  margin-top: var(--x2);
  display: block;
  text-align: center;
  border: var(--border2);
  box-shadow: var(--shadow-hard-pressed);
}

footer {
  background: var(--bg-footer);
  color: var(--c-footer);
  padding-top: var(--x1);
  padding-bottom: var(--x1);
  font-family: var(--font2);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x2);
  align-items: center;
}
footer nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--x3);
}
footer a {
  color: var(--c2);
  text-decoration: none;
}
footer a:hover {
  color: var(--plum-2);
}

.eyebrow {
  font-family: var(--font2);
  font-weight: 500;
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--oak-ink);
  margin-bottom: var(--x6);
}

/* ============================================================
   8. TEMPLATE SECTIONS — HOME
   ============================================================ */
.hero {
  padding-top: var(--x3);
  padding-bottom: var(--g1);
  text-align: center;
  overflow: hidden;
}
.hero h1 {
  max-width: 20ch;
  margin: 0 auto var(--x3);
}
.hero .lede {
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c2);
  max-width: 54ch;
  margin: 0 auto var(--x2);
  text-wrap: pretty;
}
.hero .lede b {
  color: var(--c1);
  font-weight: 600;
  font-family: var(--font2);
}

.arcwrap {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
}
.arcwrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.sun {
  transition: transform 1.5s cubic-bezier(0.3, 0.75, 0.2, 1);
}

.emblem {
  width: clamp(168px, 23vw, 246px);
  background: var(--bg1);
  border: var(--border1);
  border-radius: var(--x3);
  padding: var(--x4);
  position: relative;
  z-index: 2;
  margin: calc(clamp(168px, 23vw, 246px) * -0.52) auto 0;
}
.emblem img {
  width: 100%;
  border-radius: var(--x4);
}

.now {
  font-family: var(--font2);
  font-weight: 500;
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--plum-2);
  margin: var(--x3) 0 var(--x2);
  display: inline-flex;
  align-items: center;
  gap: var(--x4);
}

.pip {
  width: var(--x4);
  height: var(--x4);
  border-radius: 50%;
  background: var(--band-4);
  box-shadow: 0 0 0 0 rgba(64, 156, 32, 0.5);
  animation: beat 2.6s ease-out infinite;
}
.pip.shut {
  background: var(--c2);
  animation: none;
  box-shadow: none;
}

.ctas {
  display: flex;
  gap: var(--x4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--x2);
}

.six {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--x4);
  border-top: 1px dashed var(--oak-2);
  padding-top: var(--x2);
  max-width: 46ch;
}
.six .row {
  display: flex;
  gap: var(--x4);
}
.six .row i {
  width: var(--x3);
  height: var(--x3);
  border-radius: 50%;
  border: var(--border2);
  display: block;
}
.six .row i:nth-child(1) {
  background: var(--band-1);
}
.six .row i:nth-child(2) {
  background: var(--band-2);
}
.six .row i:nth-child(3) {
  background: var(--band-3);
}
.six .row i:nth-child(4) {
  background: var(--band-4);
}
.six .row i:nth-child(5) {
  background: var(--band-5);
}
.six .row i:nth-child(6) {
  background: transparent;
  border-style: dashed;
  border-color: var(--plum);
}
.six p {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
}

.hours {
  border-top: var(--border2);
  max-width: 760px;
}
.hours li {
  display: flex;
  gap: var(--x2);
  align-items: baseline;
  padding: var(--x3) var(--x4);
  border-bottom: var(--border1);
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
}
.hours li.live {
  background: var(--bg-highlight);
  font-weight: 600;
  border-bottom-color: var(--c1);
}
.hours li.live time {
  color: var(--c1);
}
.hours li.done {
  opacity: 0.42;
}
.hours time {
  flex: 0 0 82px;
  color: var(--c2);
  font-size: var(--f6);
  line-height: var(--g6);
  font-variant-numeric: tabular-nums;
}
.hours .flag {
  margin-left: auto;
  font-size: var(--f6);
  line-height: 1em;
  background: var(--plum);
  color: var(--bg1);
  padding: var(--x5) var(--x4);
  border-radius: 999px;
  font-weight: 500;
}

/* Home "Hour by hour" — rainbow stops on the list, plus a narrow column of extras. */
#day .daycols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
  gap: var(--g1);
  align-items: start;
}

#day .hours li::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: var(--x3);
  height: var(--x3);
  border-radius: 50%;
  border: var(--border2);
  background: var(--band-1);
}
#day .hours li:nth-child(2)::before {
  background: var(--band-2);
}
#day .hours li:nth-child(3)::before {
  background: var(--band-3);
}
#day .hours li:nth-child(4)::before {
  background: var(--band-4);
}
#day .hours li:nth-child(5)::before {
  background: var(--band-5);
}
#day .hours li:nth-child(6)::before {
  background: var(--band-6);
}
#day .hours li:nth-child(7)::before {
  background: transparent;
  border-style: dashed;
  border-color: var(--plum);
}

#day .extras {
  border-top: var(--border2);
  padding-top: var(--x3);
}
#day .extras .eyebrow {
  margin-bottom: var(--x3);
}
#day .extras ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--x3);
}
#day .extras li {
  display: flex;
  gap: var(--x4);
  align-items: center;
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
}
#day .extras svg {
  flex: 0 0 auto;
  width: var(--x2);
  height: var(--x2);
}
#day .extras li:nth-child(1) svg {
  color: var(--band-1);
}
#day .extras li:nth-child(2) svg {
  color: var(--band-2);
}
#day .extras li:nth-child(3) svg {
  color: var(--oak-ink);
}
#day .extras li:nth-child(4) svg {
  color: var(--band-4);
}
#day .extras li:nth-child(5) svg {
  color: var(--band-5);
}
#day .extras li:nth-child(6) svg {
  color: var(--band-6);
}

.aside {
  font-family: var(--font2);
  color: var(--c2);
  font-size: var(--f6);
  line-height: var(--g6);
  max-width: 52ch;
  margin-top: var(--x2);
}

.offers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--x3);
}

.card {
  background: var(--bg1);
  border: var(--border2);
  border-radius: var(--x3);
  padding: var(--x2);
}
.card:nth-child(1) {
  grid-column: span 4;
}
.card:nth-child(2) {
  grid-column: span 3;
}
.card:nth-child(3) {
  grid-column: span 3;
}
.card:nth-child(4) {
  grid-column: span 4;
}
.card:nth-child(5) {
  grid-column: span 7;
}
.card p {
  font-size: var(--f5);
  line-height: var(--g5);
}
.card p + p {
  margin-top: var(--x4);
}
.card:nth-child(1) .cap {
  background: var(--band-2);
}
.card:nth-child(2) .cap {
  background: var(--band-4);
}
.card:nth-child(3) .cap {
  background: var(--band-5);
}
.card:nth-child(4) .cap {
  background: var(--band-1);
}
.card:nth-child(5) .cap {
  background: var(--band-6);
}

.cap {
  display: inline-block;
  width: calc(var(--x1) - var(--x4));
  height: var(--x5);
  border-radius: 999px;
  margin-bottom: var(--x4);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x5);
  margin-top: var(--x4);
}
.chips li {
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  border: var(--border1);
  background: var(--bg2);
  border-radius: 999px;
  padding: var(--x6) var(--x4);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  gap: var(--g1);
  align-items: start;
}

.arch {
  border-radius: var(--arch-radius);
  overflow: hidden;
  border: var(--border2);
  background: var(--oak-2);
  aspect-ratio: 3/4;
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait frame — rounded rectangle inside a rainbow halo, on the hard offset shadow the
   buttons already use. Replaces .arch for photographs of Lisa. 3:4 to match the source,
   so the photo is never cropped. */
.portrait {
  /* The PHOTO owns the 3:4 ratio, not the frame — the frame is the photo plus a 7px
     ring, so its own box is deliberately a little taller than 3:4. Sizing the image
     from its own aspect-ratio is deterministic; aspect-ratio on the container was
     resolving ~29px tall and cropping the sides. */
  display: flex;
  border-radius: var(--x2);
  padding: var(--x5);
  background: conic-gradient(from 210deg, var(--band-1), var(--band-2), var(--band-3), var(--band-4), var(--band-5), var(--band-6), var(--band-1));
  box-shadow: var(--shadow-hard);
}
.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--x2) - var(--x5));
  border: var(--border2);
}

.creds {
  margin-top: var(--x2);
  display: grid;
  gap: var(--x4);
  border-top: var(--border1);
  padding-top: var(--x2);
}
.creds li {
  display: flex;
  gap: var(--x4);
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: 1.35;
}
.creds em {
  flex: 0 0 auto;
  width: var(--x4);
  height: var(--x4);
  border-radius: 50%;
  background: var(--plum);
  margin-top: var(--x4);
}

/* About Lisa — image left, everything else stacked in the right column. */
#lisa #day .daycols {
  grid-template-columns: 1fr;
  gap: var(--x1);
}
#lisa .split {
  row-gap: var(--x3);
}
#lisa .bio {
  display: grid;
  gap: var(--x3);
  align-content: start;
}
#lisa .bio .head {
  margin-bottom: 0;
}
#lisa .bio .button {
  justify-self: start;
}

/* Focus-mode escape hatch. `.focus .text` caps the editor column at 540px; this lets one
   block span the full wrap, reusing the theme's own heading-breakout formula. */
@media all and (min-width: 598px) {
  .page-content .wide {
    margin-left: calc((var(--w-content) + 2 * var(--gutter-full)) / 2 - 50vw);
    margin-right: calc((var(--w-content) + 2 * var(--gutter-full)) / 2 - 50vw);
  }
}
@media all and (min-width: 1178px) {
  .page-content .wide {
    margin-left: calc((var(--w-content) - var(--w-total)) / 2);
    margin-right: calc((var(--w-content) - var(--w-total)) / 2);
  }
}

/* The Day — timeline rail with rainbow stops, cards alongside. Scoped under .page-content
   so these outrank its generic list and centred-heading rules. */
.page-content .daygrid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  gap: var(--g1);
  align-items: start;
  margin-top: var(--x1);
}
.page-content .daygrid .card h3 {
  text-align: left;
  margin-top: 0;
}
.page-content .daygrid .card p {
  margin-bottom: 0;
}
.page-content .daygrid .card + .card {
  margin-top: var(--x3);
}
.page-content .daygrid .creds {
  padding-left: 0;
  list-style: none;
}
.page-content .daygrid .creds li {
  margin-bottom: 0;
}

/* Two equal columns inside a .wide breakout — credential pairs, side-by-side lists. */
.page-content .duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g1);
  align-items: start;
  margin-top: var(--x1);
}
.page-content .duo h3 {
  text-align: left;
  margin-top: 0;
}
.page-content .duo .creds {
  padding-left: 0;
  list-style: none;
  margin-top: var(--x4);
}
.page-content .duo .creds li {
  margin-bottom: 0;
}

/* Card mosaic reused inside page content (The Classroom). Undo the centred-heading
   default; .shot is the photo slot. .ph is a TEMPORARY placeholder — delete once every
   real photograph is in place. */
.page-content .offers {
  margin-top: var(--x1);
}
.page-content .offers .card h3 {
  text-align: left;
  margin-top: 0;
}
.page-content .offers .card p {
  margin-bottom: 0;
}
.page-content .offers .card p + p {
  margin-top: var(--x4);
}

.shot {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: var(--border1);
  border-radius: var(--x4);
  background: var(--oak-2);
  margin-bottom: var(--x3);
}

.offers .card:nth-child(5) .shot {
  aspect-ratio: 3/1;
}

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--x4);
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--oak-ink);
  border-style: dashed;
}

/* Curriculum — Pyramid Model diagram, tier blocks, and n-up card rows. */
/* .creds anywhere in page content: kill the generic list defaults so the plum dot is the
   only bullet. Component-scoped copies of this were previously duplicated per grid. */
/* Big centred call to action at the foot of a page. */
/* EP Membership prints "Don't have an account? Register" unconditionally — it never checks
   enable_registration. Lisa creates accounts by hand, and /register/ does not exist, so the
   link 404s. display:none also removes it from the accessibility tree. Revisit on plugin update. */
.auth-form .auth-links:last-child {
  display: none;
}

.page-content .cta-big {
  text-align: center;
  margin-top: var(--x1);
}
.page-content .cta-big .button {
  font-size: var(--f4);
  line-height: 1em;
  padding: var(--x3) var(--x1);
}

/* Headings inside the bio column sit beside the portrait, so they follow the column
   rather than the page-wide centred-heading treatment. */
.page-content .bio h2,
.page-content .bio h3 {
  text-align: left;
}
.page-content .bio h2:first-child {
  margin-top: 0;
}

.page-content .creds {
  padding-left: 0;
  list-style: none;
}
.page-content .creds li {
  margin-bottom: 0;
}

/* Age progression as aligned rows — a five-column card grid squeezed the text too hard. */
/* .trio.bright — tinted panels with a cap bar, continuing the rainbow across two sections.
   .alt shifts to the second half of the spectrum. Plain .trio (The Space field trips,
   which carry photographs) is left untouched. */
.page-content .trio.bright > div {
  border: var(--border1);
  border-radius: var(--x3);
  padding: var(--x2);
}
.page-content .trio.bright > div::before {
  content: "";
  display: block;
  width: calc(var(--x1) - var(--x4));
  height: var(--x5);
  border-radius: 999px;
  margin-bottom: var(--x4);
}
.page-content .trio.bright > div:nth-child(1) {
  background: rgba(250, 54, 85, 0.07);
}
.page-content .trio.bright > div:nth-child(1)::before {
  background: var(--band-1);
}
.page-content .trio.bright > div:nth-child(2) {
  background: rgba(254, 149, 47, 0.07);
}
.page-content .trio.bright > div:nth-child(2)::before {
  background: var(--band-2);
}
.page-content .trio.bright > div:nth-child(3) {
  background: rgba(255, 212, 12, 0.07);
}
.page-content .trio.bright > div:nth-child(3)::before {
  background: var(--band-3);
}
.page-content .trio.bright.alt > div:nth-child(1) {
  background: rgba(64, 156, 32, 0.07);
}
.page-content .trio.bright.alt > div:nth-child(1)::before {
  background: var(--band-4);
}
.page-content .trio.bright.alt > div:nth-child(2) {
  background: rgba(61, 143, 216, 0.07);
}
.page-content .trio.bright.alt > div:nth-child(2)::before {
  background: var(--band-5);
}
.page-content .trio.bright.alt > div:nth-child(3) {
  background: rgba(123, 75, 168, 0.07);
}
.page-content .trio.bright.alt > div:nth-child(3)::before {
  background: var(--band-6);
}

/* My Approach (page 4) reads long-form, so it gets a wider measure than the 540px default.
   --w-content must move with it: .wide computes its breakout margins from that variable,
   and leaving it at 540 would push full-width blocks past the wrap and cause overflow. */
.focus .page-container.page-4 {
  --w-content: 800px;
  max-width: 800px;
  /* The heading break-out is calibrated for the 540px measure; at 800px its negative
     margins exceed what the wrap can absorb and every heading overflows the viewport
     at mid-range widths. An 800px column is wide enough not to need the break-out. */
}
.focus .page-container.page-4 .headline-area,
.focus .page-container.page-4 .page-content > h1,
.focus .page-container.page-4 .page-content > h2,
.focus .page-container.page-4 .page-content > h3,
.focus .page-container.page-4 .page-content > .impact {
  margin-left: 0;
  margin-right: 0;
}

/* Two-up variant of the dotted list, for short items that waste a full column each. */
.page-content .creds.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--g1);
}

/* Testimonials — column-flow masonry. Colours are scattered rather than sequential so the
   wall reads as random; CSS cannot randomise, so the order is fixed and hand-shuffled. */
.page-content .masonry {
  column-count: 3;
  column-gap: var(--x2);
  margin-top: var(--x1);
}
.page-content .masonry blockquote {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--x2);
  border: var(--border1);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: var(--x3);
  padding: var(--x2);
  font-size: var(--f5);
  line-height: var(--g5);
}
.page-content .masonry .caption {
  margin-top: var(--x3);
  margin-bottom: 0;
}
.page-content .masonry blockquote:nth-child(1) {
  border-left-color: var(--band-1);
  background: rgba(250, 54, 85, 0.07);
}
.page-content .masonry blockquote:nth-child(2) {
  border-left-color: var(--band-4);
  background: rgba(64, 156, 32, 0.07);
}
.page-content .masonry blockquote:nth-child(3) {
  border-left-color: var(--band-2);
  background: rgba(254, 149, 47, 0.07);
}
.page-content .masonry blockquote:nth-child(4) {
  border-left-color: var(--band-6);
  background: rgba(123, 75, 168, 0.07);
}
.page-content .masonry blockquote:nth-child(5) {
  border-left-color: var(--band-3);
  background: rgba(255, 212, 12, 0.07);
}
.page-content .masonry blockquote:nth-child(6) {
  border-left-color: var(--band-5);
  background: rgba(61, 143, 216, 0.07);
}
.page-content .masonry blockquote:nth-child(7) {
  border-left-color: var(--band-2);
  background: rgba(254, 149, 47, 0.07);
}
.page-content .masonry blockquote:nth-child(8) {
  border-left-color: var(--band-1);
  background: rgba(250, 54, 85, 0.07);
}
.page-content .masonry blockquote:nth-child(9) {
  border-left-color: var(--band-6);
  background: rgba(123, 75, 168, 0.07);
}
.page-content .masonry blockquote:nth-child(10) {
  border-left-color: var(--band-4);
  background: rgba(64, 156, 32, 0.07);
}
.page-content .masonry blockquote:nth-child(11) {
  border-left-color: var(--band-5);
  background: rgba(61, 143, 216, 0.07);
}

.page-content .ages {
  margin-top: var(--x1);
  border-top: var(--border2);
  /* Each row carries a wash of its own band colour. Literal rgba rather than color-mix
     so scssphp cannot choke on it; the hex values are --band-2/4/5/1/6 in row order. */
}
.page-content .ages .age-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--g3);
  align-items: baseline;
  padding: var(--x3);
  border-bottom: var(--border1);
}
.page-content .ages .age-row:nth-child(1) {
  background: rgba(254, 149, 47, 0.07);
}
.page-content .ages .age-row:nth-child(2) {
  background: rgba(64, 156, 32, 0.07);
}
.page-content .ages .age-row:nth-child(3) {
  background: rgba(61, 143, 216, 0.07);
}
.page-content .ages .age-row:nth-child(4) {
  background: rgba(250, 54, 85, 0.06);
}
.page-content .ages .age-row:nth-child(5) {
  background: rgba(123, 75, 168, 0.06);
}
.page-content .ages dt {
  font-family: var(--font2);
  font-weight: 600;
  font-size: var(--f4);
  line-height: var(--g4);
  display: flex;
  align-items: center;
  gap: var(--x4);
}
.page-content .ages dd {
  margin: 0;
  font-size: var(--f5);
  line-height: var(--g5);
}
.page-content .ages .cap {
  margin-bottom: 0;
  width: var(--x3);
}
.page-content .ages .age-row:nth-child(1) .cap {
  background: var(--band-2);
}
.page-content .ages .age-row:nth-child(2) .cap {
  background: var(--band-4);
}
.page-content .ages .age-row:nth-child(3) .cap {
  background: var(--band-5);
}
.page-content .ages .age-row:nth-child(4) .cap {
  background: var(--band-1);
}
.page-content .ages .age-row:nth-child(5) .cap {
  background: var(--band-6);
}

.page-content .trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g1);
  align-items: start;
  margin-top: var(--x1);
}

.page-content .trio h3 {
  text-align: left;
  margin-top: 0;
}
.page-content .trio p {
  margin-bottom: 0;
}

.page-content .pyr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--g1);
  align-items: center;
  margin-top: var(--x1);
}
.page-content .pyr svg {
  width: 100%;
  height: auto;
  display: block;
}
.page-content .pyr .p-base {
  fill: var(--band-5);
}
.page-content .pyr .p-one {
  fill: var(--band-4);
}
.page-content .pyr .p-two {
  fill: var(--band-2);
}
.page-content .pyr .p-three {
  fill: var(--band-6);
}
.page-content .pyr .pyr-shapes {
  stroke: var(--c1);
  stroke-width: 2;
}
.page-content .pyr .lbl-light {
  fill: var(--bg1);
}
.page-content .pyr .lbl-dark {
  fill: var(--c1);
}

.page-content .legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--x3);
}
.page-content .legend li {
  display: flex;
  gap: var(--x3);
  align-items: flex-start;
  margin-bottom: 0;
}
.page-content .legend i {
  flex: 0 0 auto;
  width: var(--x2);
  height: var(--x2);
  border-radius: var(--x5);
  border: var(--border2);
  display: block;
  margin-top: 3px;
}
.page-content .legend b {
  display: block;
  font-family: var(--font2);
  font-weight: 600;
}
.page-content .legend span {
  color: var(--c2);
}
.page-content .legend .sw-base {
  background: var(--band-5);
}
.page-content .legend .sw-one {
  background: var(--band-4);
}
.page-content .legend .sw-two {
  background: var(--band-2);
}
.page-content .legend .sw-three {
  background: var(--band-6);
}

.page-content .tier {
  border-top: var(--border1);
  padding-top: var(--x2);
  margin-top: var(--x1);
}
.page-content .tier .chip-lg {
  display: inline-block;
  font-family: var(--font2);
  font-weight: 600;
  font-size: var(--f6);
  line-height: 1em;
  color: var(--bg1);
  padding: var(--x5) var(--x4);
  border-radius: 999px;
  margin-bottom: var(--x4);
}
.page-content .tier h3 {
  text-align: left;
  margin: 0 0 var(--x4);
}
.page-content .tier .eg {
  border-left: 4px solid var(--oak-2);
  padding: var(--x5) 0 var(--x5) var(--x3);
  margin-top: var(--x3);
}
.page-content .tier .eg b {
  display: block;
  font-family: var(--font2);
  font-weight: 600;
  margin-bottom: var(--x5);
}
.page-content .tier .eg p {
  margin-bottom: 0;
}
.page-content .tier.t-base .chip-lg {
  background: var(--band-5);
}
.page-content .tier.t-base .eg {
  border-color: var(--band-5);
}
.page-content .tier.t-one .chip-lg {
  background: var(--band-4);
}
.page-content .tier.t-one .eg {
  border-color: var(--band-4);
}
.page-content .tier.t-two .chip-lg {
  background: var(--band-2);
  color: var(--c1);
}
.page-content .tier.t-two .eg {
  border-color: var(--band-2);
}
.page-content .tier.t-three .chip-lg {
  background: var(--band-6);
}
.page-content .tier.t-three .eg {
  border-color: var(--band-6);
}

.page-content .timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--x2);
  border-left: var(--border1);
}
.page-content .timeline li {
  position: relative;
  margin-bottom: 0;
  padding-bottom: var(--x1);
}
.page-content .timeline li:last-child {
  padding-bottom: 0;
}
.page-content .timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--x2) - 10px);
  top: var(--x4);
  width: var(--x3);
  height: var(--x3);
  border-radius: 50%;
  border: var(--border2);
  background: var(--band-1);
}
.page-content .timeline li:nth-child(2)::before {
  background: var(--band-2);
}
.page-content .timeline li:nth-child(3)::before {
  background: var(--band-3);
}
.page-content .timeline li:nth-child(4)::before {
  background: var(--band-4);
}
.page-content .timeline li:nth-child(5)::before {
  background: var(--band-5);
}
.page-content .timeline li:nth-child(6)::before {
  background: var(--band-6);
}
.page-content .timeline li:nth-child(7)::before {
  background: transparent;
  border-style: dashed;
  border-color: var(--plum);
}
.page-content .timeline time {
  display: block;
  font-family: var(--font2);
  font-weight: 500;
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--oak-ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-content .timeline h3 {
  text-align: left;
  margin: 2px 0 var(--x5);
}
.page-content .timeline p {
  margin-bottom: 0;
}
.page-content .timeline p + p {
  margin-top: var(--x4);
}

.rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--g1);
  border-top: var(--border2);
}
.rules div {
  display: flex;
  justify-content: space-between;
  gap: var(--x3);
  padding: var(--x4) 0;
  border-bottom: var(--border1);
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
}
.rules span {
  color: var(--c2);
  text-align: right;
  flex: 0 0 auto;
}

.letters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--x2);
}
.letters figure {
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border: var(--border2);
  border-radius: var(--x3);
  padding: var(--x2);
}
.letters blockquote {
  margin-bottom: var(--x3);
  font-size: var(--f6);
  line-height: var(--g6);
}
.letters figcaption {
  margin-top: auto;
  border-top: var(--border1);
  padding-top: var(--x4);
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}
.letters figcaption b {
  display: block;
  color: var(--c1);
  font-weight: 600;
}

.visit {
  color: var(--bg1);
  border-top: var(--border3);
  border-bottom: var(--border3);
  background-color: var(--oak-ink);
  background-image: var(--wood-grain), var(--wood);
}
.visit h2,
.visit p,
.visit .eyebrow {
  color: var(--bg1);
}
.visit .split {
  align-items: start;
}
.visit .facts {
  margin-top: var(--x2);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-left: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--x4);
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
}
.visit .facts b {
  color: var(--bg1);
  font-weight: 600;
}
.visit form {
  background: var(--bg1);
  border: var(--border2);
  border-radius: var(--x3);
  padding: var(--x2);
  box-shadow: var(--shadow-form);
}
.visit form h3 {
  color: var(--c1);
  margin-bottom: 2px;
}
.visit form .note {
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  margin-bottom: var(--x3);
}

.f {
  margin-bottom: var(--x4);
}

.f2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--x4);
}

.ok {
  display: none;
  margin-top: var(--x4);
}
.ok.show {
  display: block;
}

/* ============================================================
   9. UTILITIES AND KEYFRAMES
   ============================================================ */
@keyframes beat {
  70% {
    box-shadow: 0 0 0 10px rgba(64, 156, 32, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(64, 156, 32, 0);
  }
}
/* ------------------ responsive ------------------ */
@media all and (max-width: 960px) {
  .desk,
  .head-tel {
    display: none;
  }
  .menu {
    display: block;
  }
  .split {
    grid-template-columns: 1fr;
    gap: var(--x1);
  }
  .page-content .duo {
    grid-template-columns: 1fr;
    gap: var(--x1);
  }
  .page-content .trio,
  .page-content .pyr {
    grid-template-columns: 1fr;
    gap: var(--x1);
  }
  .page-content .masonry {
    column-count: 2;
  }
  .page-content .creds.two-up {
    grid-template-columns: 1fr;
  }
  .page-content .ages .age-row {
    grid-template-columns: 1fr;
    gap: var(--x5);
  }
  .page-content .daygrid {
    grid-template-columns: 1fr;
    gap: var(--x1);
  }
  .letters {
    grid-template-columns: 1fr;
  }
  .rules {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .offers {
    grid-template-columns: 1fr;
  }
  .card:nth-child(n) {
    grid-column: auto;
  }
  .portrait {
    max-width: 380px;
  }
  .arch {
    max-width: 380px;
    aspect-ratio: 4/5;
  }
}
@media all and (max-width: 640px) {
  .page-content .masonry {
    column-count: 1;
  }
  .emblem {
    width: 120px;
    margin-top: -48px;
  }
  .clockmark {
    display: none;
  }
  .hero h1 {
    max-width: none;
  }
}
@media all and (max-width: 560px) {
  .f2 {
    grid-template-columns: 1fr;
  }
  .hours li {
    gap: var(--x3);
    padding-left: var(--x6);
    padding-right: var(--x6);
  }
  .hours time {
    flex-basis: 70px;
  }
  .mark i {
    display: none;
  }
  .visit form {
    box-shadow: 4px 4px 0 rgba(46, 33, 24, 0.32);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sun,
  .pip,
  .bars i,
  button,
  .button,
  .menu > summary {
    animation: none;
    transition: none;
  }
}
/*---:[ Custom CSS ]:---*/
/* ============================================================
   FAQ — core [faq] shortcode output (.faq > .qa > h3 + .answer)
   The shortcode emits its own classes, which the Attention theme
   does not style. Bridge them onto the theme tokens here, and use
   the six rainbow bands as row markers so the page carries Lisa's
   brand theme rather than reading as a flat list.
   ============================================================ */
.page-content .faq {
  margin: var(--x1) 0;
  border-top: var(--border2);
}

.page-content .faq .qa {
  padding: var(--x2) 0 var(--x2) var(--x2);
  border-bottom: var(--border1);
  border-left: 4px solid transparent;
}

.page-content .faq .qa h3 {
  text-align: left;
  margin: 0 0 var(--x4);
  font-size: var(--f4);
  line-height: var(--g4);
}

.page-content .faq .qa .answer {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
}

.page-content .faq .qa:nth-child(6n+1) {
  border-left-color: var(--band-1);
}

.page-content .faq .qa:nth-child(6n+2) {
  border-left-color: var(--band-2);
}

.page-content .faq .qa:nth-child(6n+3) {
  border-left-color: var(--band-3);
}

.page-content .faq .qa:nth-child(6n+4) {
  border-left-color: var(--band-4);
}

.page-content .faq .qa:nth-child(6n+5) {
  border-left-color: var(--band-5);
}

.page-content .faq .qa:nth-child(6n+6) {
  border-left-color: var(--band-6);
}

@media all and (max-width: 598px) {
  .page-content .faq .qa {
    padding-left: var(--x3);
  }
  .page-content .faq .qa h3 {
    font-size: var(--f5);
    line-height: var(--g5);
  }
}
/* ============================================================
   WIDER MEASURE (800px) on the reference-style pages

   Same pattern the theme already uses for My Approach (page 4):
   --w-content must move with max-width, because .wide computes its
   break-out margins from that variable and leaving it at 540 pushes
   full-width blocks past the wrap and causes horizontal overflow.
   The heading break-out is calibrated for the 540px measure, so it
   is neutralised here too: an 800px column does not need it.

     page-5   About Lisa             (bottom section; see .impact below)
     page-6   Testimonials
     page-7   Get in Touch
     page-8   Paperwork
     page-9   The Space              (photos still break wider via .wide)
     page-10  Parents
     page-12  Questions and Answers
     page-13  Why Family Child Care
     page-27  Resources
     .fa      Family Area      (members-html, no page-N class)
     .hb      Parent Handbook  (members-html, no page-N class)

   The two members-only documents are standalone HTML, so they never
   get a page-N class and could not join the list by id. They each
   already declared max-width:800px in their own inline style, but
   .fa and .hb are one class deep and lost to the theme rule
   .focus .text { max-width: 540px }, which is two. Declaring it here
   wins on specificity AND carries --w-content across, which the
   inline rules never did: without that the .wide and .docs blocks
   compute their break-out from 540 and overflow.
   ============================================================ */
.focus .page-container.page-5,
.focus .page-container.page-6,
.focus .page-container.page-7,
.focus .page-container.page-8,
.focus .page-container.page-9,
.focus .page-container.page-10,
.focus .page-container.page-12,
.focus .page-container.page-13,
.focus .page-container.page-27,
.focus .page-container.fa,
.focus .page-container.hb {
  --w-content: 800px;
  max-width: 800px;
}
.focus .page-container.page-5 .headline-area,
.focus .page-container.page-5 .page-content > h1,
.focus .page-container.page-5 .page-content > h2,
.focus .page-container.page-5 .page-content > h3,
.focus .page-container.page-5 .page-content > .impact,
.focus .page-container.page-6 .headline-area,
.focus .page-container.page-6 .page-content > h1,
.focus .page-container.page-6 .page-content > h2,
.focus .page-container.page-6 .page-content > h3,
.focus .page-container.page-6 .page-content > .impact,
.focus .page-container.page-7 .headline-area,
.focus .page-container.page-7 .page-content > h1,
.focus .page-container.page-7 .page-content > h2,
.focus .page-container.page-7 .page-content > h3,
.focus .page-container.page-7 .page-content > .impact,
.focus .page-container.page-8 .headline-area,
.focus .page-container.page-8 .page-content > h1,
.focus .page-container.page-8 .page-content > h2,
.focus .page-container.page-8 .page-content > h3,
.focus .page-container.page-8 .page-content > .impact,
.focus .page-container.page-9 .headline-area,
.focus .page-container.page-9 .page-content > h1,
.focus .page-container.page-9 .page-content > h2,
.focus .page-container.page-9 .page-content > h3,
.focus .page-container.page-9 .page-content > .impact,
.focus .page-container.page-10 .headline-area,
.focus .page-container.page-10 .page-content > h1,
.focus .page-container.page-10 .page-content > h2,
.focus .page-container.page-10 .page-content > h3,
.focus .page-container.page-10 .page-content > .impact,
.focus .page-container.page-12 .headline-area,
.focus .page-container.page-12 .page-content > h1,
.focus .page-container.page-12 .page-content > h2,
.focus .page-container.page-12 .page-content > h3,
.focus .page-container.page-12 .page-content > .impact,
.focus .page-container.page-13 .headline-area,
.focus .page-container.page-13 .page-content > h1,
.focus .page-container.page-13 .page-content > h2,
.focus .page-container.page-13 .page-content > h3,
.focus .page-container.page-13 .page-content > .impact,
.focus .page-container.page-27 .headline-area,
.focus .page-container.page-27 .page-content > h1,
.focus .page-container.page-27 .page-content > h2,
.focus .page-container.page-27 .page-content > h3,
.focus .page-container.page-27 .page-content > .impact,
.focus .page-container.fa .headline-area,
.focus .page-container.fa .page-content > h1,
.focus .page-container.fa .page-content > h2,
.focus .page-container.fa .page-content > h3,
.focus .page-container.fa .page-content > .impact,
.focus .page-container.hb .headline-area,
.focus .page-container.hb .page-content > h1,
.focus .page-container.hb .page-content > h2,
.focus .page-container.hb .page-content > h3,
.focus .page-container.hb .page-content > .impact {
  margin-left: 0;
  margin-right: 0;
}

/* About Lisa: only the section BELOW the portrait was asked to widen.
   The container is 800 so the closing prose and blockquote get the wider
   measure, but the opening pull-quote stays on the original 540 measure
   so the top of the page is unchanged. */
.focus .page-container.page-5 .page-content > .impact {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   GET IN TOUCH (page 7) — two-column hero

   The intro reads on the left, the form sits on the right in a
   panel that is deliberately a different surface from the page:
   the alternate cream ground, a heavy border, and the six rainbow
   bands across its top edge so it reads as Lisa's, not as a
   generic form well.
   ============================================================ */
.page-content .getintouch {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--x1);
  align-items: start;
}

.page-content .getintouch .gt-intro > .impact {
  margin-top: 0;
}

.page-content .getintouch .gt-form {
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  border: var(--border2);
  border-radius: var(--x3);
  padding: var(--x1) var(--x2) var(--x2);
}

/* The rainbow edge. Hard stops, six equal sixths. */
.page-content .getintouch .gt-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to right, var(--band-1) 0 16.666%, var(--band-2) 16.666% 33.333%, var(--band-3) 33.333% 50%, var(--band-4) 50% 66.666%, var(--band-5) 66.666% 83.333%, var(--band-6) 83.333% 100%);
}

.page-content .getintouch .gt-form > h2 {
  margin-top: 0;
  text-align: left;
}

/* The theme centres headings and captions, which is right for a page and
   wrong for a form: a label column that starts left wants its heading to
   start in the same place. */
.page-content .getintouch .gt-form > .caption {
  margin-top: 0;
  margin-bottom: var(--x2);
  text-align: left;
}

/* EP Email emits .ep-contact-form > .form-field; bring it onto the
   theme's own field rhythm so it does not read as a bolted-on widget. */
.page-content .ep-contact-form .form-field {
  margin-bottom: var(--x3);
}

.page-content .ep-contact-form label {
  display: block;
  font-family: var(--font2);
  font-size: var(--f6);
  font-weight: 600;
  line-height: var(--g6);
  margin-bottom: var(--x5);
}

.page-content .ep-contact-form .required {
  color: #FA3655;
  margin-left: 2px;
}

.page-content .ep-contact-form input,
.page-content .ep-contact-form select,
.page-content .ep-contact-form textarea {
  width: 100%;
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background: var(--bg1);
  border: var(--border2);
  border-radius: 0;
  padding: var(--x5) var(--x4);
}

.page-content .ep-contact-form textarea {
  resize: vertical;
}

.page-content .ep-contact-form .ep-contact-submit {
  font-family: var(--font2);
  font-size: var(--f5);
  font-weight: 600;
  line-height: var(--g5);
  background: #FFD40C;
  color: #111111;
  border: var(--border2);
  border-radius: 0;
  padding: var(--x4) var(--x2);
  cursor: pointer;
}

.page-content .ep-contact-form .ep-contact-submit:hover {
  background: var(--bg1);
}

.page-content .ep-contact-response:not(:empty) {
  margin-top: var(--x3);
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
}

@media all and (max-width: 960px) {
  .page-content .getintouch {
    grid-template-columns: 1fr;
    gap: var(--x2);
  }
}
/* ============================================================
   FIX: the hour-by-hour section never stacked on mobile.

   The theme intends #day .daycols to collapse to one column on
   small screens, but that rule was authored inside the #lisa { }
   block, so it compiled as "#lisa #day .daycols" and only ever
   matched the About Lisa page. On the home page the grid stayed
   at 5fr/2fr at every width, squeezing the extras column to about
   70px at 375 and pushing its icon list past the viewport edge.
   ============================================================ */
@media all and (max-width: 960px) {
  #day .daycols {
    grid-template-columns: 1fr;
    gap: var(--x1);
  }
}
/* ============================================================
   FIX: chrome images inherited the content-image bottom margin.

   The global rule that spaces images inside article copy (29px
   below) also lands on logos used as UI furniture, where nothing
   follows them and the space is just a hole:

   .mark   the header brand. Its flex box measured 40+29=69px
           against a 43px text block, so align-items:center put
           the visible logo 14px high.
   .emblem the logo card in the hero arch. Padding is a symmetric
           11px, but the margin made the gap 12px top, 41px bottom.

   Both want the image to be the whole of their content, so the
   margin is zeroed rather than the padding being re-tuned.
   ============================================================ */
.mark img,
.emblem img {
  margin-bottom: 0;
}

/* ============================================================
   FIX: the dot bullets in .creds lists sat low against their text.

   The bullet is pushed down with a hard-coded margin-top of 11px
   (--x4), which was a guess rather than a measurement. The list
   text is 18px on a 1.35 line-height, so the first line box is
   24.3px and its centre is at 12.15px, while the bullet centre
   landed at 11 + 11/2 = 16.5px. Every bullet on the site sat 4.5px
   low.

   Deriving it from the line-height keeps it centred if the type
   scale ever moves: (line-box - bullet) / 2 = (24.3 - 11) / 2.
   The margin is kept rather than switching the row to
   align-items:center, because several of these items wrap to two
   lines and the bullet belongs against the FIRST line, not the
   middle of the whole item.
   ============================================================ */
.creds em {
  margin-top: calc((1.35em - var(--x4)) / 2);
}

/* ============================================================
   Home testimonial cards get the same rainbow the Testimonials
   wall already uses: a band-coloured quote rule plus a 7% tint
   of the same colour, which is the treatment on .masonry.

   The colours are deliberately the SAME THREE, in the same order,
   that these three testimonials carry on the Testimonials page
   (band-1, band-4, band-2), so a visitor who reads both sees each
   family in a consistent colour rather than a reshuffle.

   The card keeps its 2px dark border, which is what separates the
   home cards from the flat masonry cards on the full wall.
   ============================================================ */
.letters figure blockquote {
  border-left-width: 4px;
}

.letters figure:nth-child(1) {
  background: rgba(250, 54, 85, 0.07);
}

.letters figure:nth-child(1) blockquote {
  border-left-color: var(--band-1);
}

.letters figure:nth-child(2) {
  background: rgba(64, 156, 32, 0.07);
}

.letters figure:nth-child(2) blockquote {
  border-left-color: var(--band-4);
}

.letters figure:nth-child(3) {
  background: rgba(254, 149, 47, 0.07);
}

.letters figure:nth-child(3) blockquote {
  border-left-color: var(--band-2);
}

/* ============================================================
   Note callouts: light green ground, dark text, dark green edge.

   The background moved to the design variable bg-callout-note
   (#F2F5E7, which is 7% of band-4 over the cream body — the same
   light green as the testimonial cards). Two things could not be
   expressed as design variables and are set here:

   - the theme hardcodes .callout.note colour to var(--bg1), cream,
     which is unreadable on a light ground;
   - border-left on .callout comes from --ca (the link purple) and
     is shared with the base and alert callouts, so the dark green
     accent has to be scoped to .note.
   ============================================================ */
.callout.note {
  color: var(--c1);
  border-left: 4px solid #2C7016;
}

.callout.note strong,
.callout.note b {
  color: var(--c1);
}

.callout.note a {
  color: var(--ca);
}

/* ============================================================
   FOOTER (2026-09-30): three columns under the rainbow bands.

   Replaces the single centred row of ten links, which sat on the
   page's own cream with no edge and never showed the phone number.
   Two theme boxes feed one grid on footer > .wrap:
     Footer: Brand and Call   .fx-brand  arc, name, blurb
                              .fx-call   phone, hours, openings
     Footer: Links and Legal  .fx-links  two short lists
                              .fx-base   copyright, licence line
   The bands are the same hard-stopped six as .gt-form and the
   Parents card. The arc is the hero's, with the sun set at 4:00.
   The openings pip is grey unless [lfd-openings] rendered a link,
   which it only does while a space is open.
   Hours are written out here too: if opening time moves, this is
   one more place to change.
   ============================================================ */
footer {
  position: relative;
  background: var(--bg2);
  border-top: var(--border2);
  padding-top: calc(var(--x1) + var(--x3));
  padding-bottom: 0;
  text-align: left;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to right, var(--band-1) 0 16.666%, var(--band-2) 16.666% 33.333%, var(--band-3) 33.333% 50%, var(--band-4) 50% 66.666%, var(--band-5) 66.666% 83.333%, var(--band-6) 83.333% 100%);
}

footer > .wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.35fr;
  gap: var(--x1);
  align-items: start;
  text-align: left;
}

footer .fx-arc {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 var(--x3);
}

footer .fx-word {
  display: block;
  font-family: var(--font2);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--plum-2);
  text-decoration: none;
}

footer .fx-blurb {
  margin: var(--x3) 0 0;
  max-width: 34ch;
  font-family: var(--font1);
  font-size: 16px;
  line-height: 26px;
  color: var(--c2);
}

footer .fx-h {
  margin: 0 0 var(--x4);
  font-family: var(--font2);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c2);
}

footer .fx-tel {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 4px solid var(--band-3);
  font-family: var(--font2);
  font-weight: 600;
  font-size: var(--f3);
  line-height: 1.15;
  color: var(--c1);
  text-decoration: none;
}

footer .fx-tel:hover {
  color: var(--plum-2);
}

footer .fx-facts {
  margin: var(--x3) 0 0;
  font-family: var(--font2);
  font-size: 16px;
  line-height: 25px;
  color: var(--c2);
}

footer .fx-open {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: var(--x4) 0 0;
  font-family: var(--font2);
  font-size: 15px;
  line-height: 22px;
  color: var(--c2);
}

footer .fx-open .pip {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--oak-2);
  transform: translateY(-1px);
}

footer .fx-open:has(a) .pip {
  background: var(--band-4);
  box-shadow: 0 0 0 3px rgba(64, 156, 32, 0.18);
}

footer .fx-open a {
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The home page already says this in the wood Visit block, directly
   above the footer, so the footer copy stands down there. */
body.template-home footer .fx-open {
  display: none;
}

footer nav.fx-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--x2);
  margin: 0;
}

footer .fx-links ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .fx-links li {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}

footer .fx-links li::before {
  content: none;
}

footer .fx-links a {
  font-family: var(--font2);
  font-size: 16px;
  line-height: 26px;
  color: var(--c1);
}

footer .fx-links a:hover {
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer .fx-base {
  grid-column-start: 1;
  grid-column-end: -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--x3);
  padding: var(--x3) 0;
  border-top: 1px solid var(--oak-2);
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

footer .fx-base span {
  white-space: nowrap;
}

@media all and (max-width: 960px) {
  footer > .wrap {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--x2);
  }
  footer nav.fx-links {
    grid-column-start: 1;
    grid-column-end: -1;
    padding-top: var(--x2);
    border-top: 1px solid var(--oak-2);
  }
}
@media all and (max-width: 597px) {
  footer {
    padding-top: var(--x1);
  }
  footer > .wrap {
    grid-template-columns: 1fr;
    row-gap: var(--x2);
  }
  footer .fx-call {
    padding-top: var(--x2);
    border-top: 1px solid var(--oak-2);
  }
  footer .fx-links li {
    margin-bottom: 10px;
  }
  footer .fx-links a {
    line-height: 22px;
  }
  footer .fx-base {
    justify-content: flex-start;
  }
}
/* ============================================================
   FIX: captions overlapped whatever sat above them.

   The base .caption carries margin-top:-25px, which exists to tuck
   a caption up under a HEADING. It is applied unconditionally, so a
   caption following anything else is pulled 25px into it. On My
   Approach the credit line sat on top of the three cards above it.

   Zeroing the base is safe because the theme already has the
   adjacent-sibling rules that do the real work (h1/h2 +.caption at
   -26.5px, h3 at -16px, and the wider-screen variants). Those are
   more specific, so they still win. This rule matches the base
   selector's specificity exactly and simply lands later.

   No caption on the site follows a blockquote, so nothing loses a
   tuck it actually wanted.
   ============================================================ */
.caption {
  margin-top: 0;
}

/* .wide blocks are divs and carry no bottom margin of their own, so a
   caption after one needs its own air rather than merely not overlapping. */
.page-content .wide + .caption {
  margin-top: var(--x2);
}

/* ============================================================
   FIX: .creds list rows shattered their own sentences.

   .creds li is display:flex, and what sits inside it is not two
   things but five: the  dot, the  term, a text node,
   an , and the trailing full stop. Flex makes a separate
   column of EACH of them. On Paperwork the link landed in a 38px
   column of its own while the sentence it belongs to sat in
   another, so "questions page" wrapped to about one character a
   line.

   The shrinking is only possible because #content sets
   word-break:break-word site-wide, which is right for long URLs
   and fatal here: it drops every flex item's min-content width to
   a single character, so min-width:auto stops protecting them.
   The  measured 41px on a 317px row and broke as
   "Busi ness Polic y".

   No min-width on the  fixes this, because the sentence
   is genuinely split across separate items. The row has to stop
   being a flex container. As a block, everything after the dot
   flows as normal inline text: bold term, run-in description,
   link inline in the sentence it belongs to.

   The dot keeps the alignment measured in the fix above, moved
   from margin-top to top now that it is positioned. That earlier
   .creds em margin-top rule is superseded here and left in place
   only as the derivation of the value.

   Affects Paperwork, Get in Touch and Why Family Child Care, at
   every width, worst below 640px.
   ============================================================ */
.creds li {
  display: block;
  position: relative;
  padding-left: calc(var(--x4) * 2);
}

.creds li > em {
  position: absolute;
  left: 0;
  top: calc((1.35em - var(--x4)) / 2);
  margin-top: 0;
}

.creds li > strong {
  margin-right: 0.3em;
}

/* ============================================================
   FIX: a stray arrow floated above the mobile Menu button.

   The Attention theme owns a component called .menu: a single
   horizontal strip of links that scrolls sideways on small
   screens. It marks that strip with a scroll affordance,
   a left-right arrow set on .menu:before, hidden again at 598px
   because the strip no longer needs to scroll there.

   This site's mobile nav is not that component. It is a details
   element that opens a full-width drawer, and it happens to carry
   the same class name. So the theme's affordance rendered against
   a control that does not scroll, and the arrow sat above the
   Menu button on every page below 598px.

   A class-name collision, not a theme bug. Nothing else on the
   site uses .menu, so the pseudo-element is simply switched off
   here rather than renaming the nav, which would mean editing the
   header box on every template. The other properties the theme
   puts on .menu are harmless: the drawer is absolutely positioned
   and full-width, so it escapes the 99px box, and scrollWidth
   equals clientWidth, so overflow-x never clips anything.
   ============================================================ */
header .menu::before {
  content: none;
}

/* ============================================================
   FIX: the lede was bigger than the headline it sat under.

   .impact is the sub-headline under each page title. The theme
   sizes it responsively, 23px rising to 29px at 598px, but a
   later rule of equal specificity sets font-size to var(--f2),
   a fixed 37px with no mobile step. Being later, it won at every
   width and the responsive pair never applied.

   The h1 does scale, 53.6px down to 32px. So on a phone the page
   read 32px title against a 37px lede: the sub-headline was the
   largest thing on the screen. On desktop the ratio is a correct
   1.45 to 1.

   Restoring the theme's own base value below the 598px breakpoint
   puts the ratio back to 1.39 to 1, close to the desktop
   relationship, and lifts roughly one more paragraph above the
   fold. Line-height is carried across from the same rule.
   ============================================================ */
@media all and (max-width: 597px) {
  .impact {
    font-size: 23px;
    line-height: 34px;
  }
}
/* ============================================================
   FIX: the mobile drawer's coloured dots never rendered, and the
   page names sat on the line below them.

   Each drawer row is an em followed by an a. The em is meant to
   be a rainbow dot: it carries width 11px, height 11px,
   border-radius 50% and one of the six band colours, in order,
   red through purple. But nothing gave it a block formatting
   context, so it stayed display:inline, where width and height
   simply do not apply to a non-replaced element. The browser laid
   it out as an empty inline box measuring 4px wide by 27px tall:
   the thin dark sliver visible above each link.

   The link then made things worse. It is display:flex, so it
   generates a block-level box and starts on its own line, putting
   every page name underneath its marker instead of beside it.

   The same em-plus-content pattern works in .creds lists only
   because .creds li is a flex container, which blockifies its
   children. The drawer li is a plain list-item, so it is not.

   Making the row a flex line fixes both halves at once: the dot
   becomes a real 11px circle, the label sits beside it, and the
   row collapses from 89px to 66px. The drawer as a whole drops
   from 689px to 574px, which brings the Call button back above
   the fold on a 812px screen.
   ============================================================ */
header .drawer ul li {
  display: flex;
  align-items: center;
  gap: var(--x4);
}

header .drawer ul li > em {
  display: block;
  flex: 0 0 auto;
}

header .drawer ul li > a {
  flex: 1 1 auto;
}

/* ============================================================
   Resources: outbound links.

   The Resources page and the three in-page blocks all point off
   site. Two small conventions so that is never a surprise:

   - a light arrow after any http link inside a .creds list, so a
     reader can see before clicking that it leaves the site. The
     glyph is written literally rather than as a unicode escape,
     matching how the theme writes its own :before content.
   - .res-source, the small grey publisher label that sits between
     the link and the description, so "NH Department of Health and
     Human Services" reads as provenance and not as sentence.

   Links are NOT forced to target=_blank. On a phone that hijacks
   the back button, which is the control people actually use.
   ============================================================ */
.page-content .creds a[href^=http]::after {
  content: "↗";
  font-family: var(--font2);
  font-size: 0.8em;
  margin-left: 0.2em;
  color: var(--c2);
  text-decoration: none;
}

.page-content .res-source {
  font-family: var(--font2);
  font-size: var(--f6);
  color: var(--c2);
}

.page-content .creds.resources li {
  margin-bottom: var(--x4);
}

/* ============================================================
   FIX: drawer dots ran out of colours past the fifth link.

   The theme colours the drawer markers by enumerating rows,
   .drawer-inner li:nth-child(1) em through :nth-child(5) em, using
   bands 1, 2, 4, 5 and 6. Band 3, the yellow, is skipped on
   purpose: an 11px yellow dot on cream is invisible.

   Enumerating meant the palette was pinned to exactly five links.
   Adding Why Family Child Care and Resources took the drawer to
   seven, and rows six and seven fell off the end with no
   background at all, rendering as hollow outlines against five
   filled circles.

   Cycling every five rows instead of naming five rows fixes it at
   any length. Rows one to five keep the exact colours they had, so
   nothing visibly changes for them; row six starts the sequence
   again. The extra type selector in the prefix is what carries
   this past the theme's own rules.
   ============================================================ */
header .drawer-inner li:nth-child(5n+1) em {
  background: var(--band-1);
}

header .drawer-inner li:nth-child(5n+2) em {
  background: var(--band-2);
}

header .drawer-inner li:nth-child(5n+3) em {
  background: var(--band-4);
}

header .drawer-inner li:nth-child(5n+4) em {
  background: var(--band-5);
}

header .drawer-inner li:nth-child(5n+5) em {
  background: var(--band-6);
}

/* ============================================================
   Hero availability line.

   The six-dot indicator used to carry both facts in one sentence:
   how many children are here, and whether a space is open. The
   second half is the only part a prospective parent is scanning
   for, so it now sits on its own line and is a link straight to
   the visit form.

   TO TURN THE LINK OFF WHEN THERE IS NO SPACE: in the Six Children
   Indicator box, change the a.six-open element to a p.six-open and
   write whatever the true line is. The arrow is attached to the
   anchor only, so a paragraph loses it automatically and no rule
   needs editing. That is the whole switch.

   Colour is --plum, the logo purple, rather than the theme's
   default link colour, which appears nowhere else in this palette.
   ============================================================ */
.six .six-open,
.six p.six-open {
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
  font-weight: 600;
  color: var(--plum);
  text-align: center;
  padding: 2px 0;
}

.six a.six-open {
  text-decoration: none;
}

.six a.six-open::after {
  content: "→";
  font-family: var(--font2);
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 120ms ease;
}

.six a.six-open:hover,
.six a.six-open:focus-visible {
  text-decoration: underline;
}

.six a.six-open:hover::after {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .six a.six-open::after {
    transition: none;
  }
  .six a.six-open:hover::after {
    transform: none;
  }
}
/* ============================================================
   Availability, from one number.

   The dots and the availability line used to disagree by design:
   the sixth dot was hard-coded open by .six .row i:nth-child(6),
   and the sentence was typed prose. Changing from one open space
   to three meant editing two unrelated things, and forgetting one
   of them was the obvious failure.

   Both now hang off a single attribute on the wrapper:

       

   Set it to the number of open spaces, 0 to 6. The LAST n dots
   become open circles, counted from the right, and at 0 the link
   disappears on its own. Only the sentence itself still needs
   typing, which is unavoidable: "One space" and "Three spaces"
   are not something CSS can decline.

   The theme's hard-coded sixth dot is neutralised, but only where
   the attribute is present, so a .six without data-open keeps its
   old behaviour rather than silently changing.
   ============================================================ */
.six[data-open] .row i:nth-child(6) {
  background: var(--band-6);
  border: var(--border2);
}

.six[data-open="1"] .row i:nth-last-child(-n+1),
.six[data-open="2"] .row i:nth-last-child(-n+2),
.six[data-open="3"] .row i:nth-last-child(-n+3),
.six[data-open="4"] .row i:nth-last-child(-n+4),
.six[data-open="5"] .row i:nth-last-child(-n+5),
.six[data-open="6"] .row i:nth-last-child(-n+6) {
  background: transparent;
  border-style: dashed;
  border-color: var(--plum);
}

.six[data-open="0"] a.six-open {
  display: none;
}

/* ============================================================
   FIX: the hour-by-hour list was mostly chrome on a phone.

   Each row is a flex line: a dot, then the time, then the entry.
   At 375px the dot, the time and the two gaps take 123px before
   the text starts, leaving the entry 172px of a 375px screen. The
   longest entry, "Structured activity or outside, on the rail
   trail or swing set", wrapped to five lines. That row also gains
   the "now" flag when it is the current one, and the flag pushed
   into the same 172px, so the highlighted row grew to 182px
   against 66 to 95 for its neighbours. The emphasis read as a
   fault rather than a highlight.

   Below the theme's 598px breakpoint the row becomes a two-line
   grid instead: dot and time on the first line with the flag
   pushed to the right, and the entry running the full width
   underneath. The entry gets 266px instead of 172px, the current
   row falls to 127px and sits in line with the rest, and the list
   as a whole grows only about 50px.

   The flag is a span.flag, so the entry is selected as
   span:not(.flag) rather than by position.
   ============================================================ */
@media all and (max-width: 597px) {
  #day .hours li {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "dot time flag" ". text text";
    column-gap: var(--x4);
    row-gap: 4px;
    padding: var(--x3) var(--x4);
    align-items: center;
  }
  #day .hours li::before {
    grid-area: dot;
    align-self: center;
  }
  #day .hours li > time {
    grid-area: time;
  }
  #day .hours li > span:not(.flag) {
    grid-area: text;
    align-self: start;
  }
  #day .hours li > .flag {
    grid-area: flag;
    justify-self: end;
  }
}
/* ============================================================
   PARENTS (page 10) — the door, and a look through it.

   The page was one enormous password field floating in prose. At
   the 800px measure this page carries, a field for a short shared
   code stretched the full column and read as a search bar, and the
   Sign in button collided with the caption below it. Nothing on the
   page said "this is the door".

   The card is deliberately the SAME component as the Get in Touch
   form panel above: alternate cream ground, heavy border, and the
   six rainbow bands hard-stopped across the top edge. Two places
   on the site ask a visitor to type something, and they should
   look like the same thing rather than two designers' guesses.

   420px, centred inside the 800px measure. A password field wants
   to look like it takes a word, not a sentence.

   The "call me if you lost it" line moved OUT of the page prose and
   INTO the card, under the button, where someone who is stuck is
   actually looking. That is why two paragraphs came off the page.

   .lfd-peek is the three-card row underneath: handbook, paperwork,
   calendar. It gives a parent a reason to go hunting for the code,
   and it stops the page ending halfway down a very tall screen. It
   is page content, not plugin output, so Lisa can edit the wording.
   ============================================================ */
.page-content .lfd-door {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  margin: var(--x1) auto;
  background: var(--bg2);
  border: var(--border2);
  border-radius: var(--x3);
  padding: var(--x1) var(--x2) var(--x2);
}

.page-content .lfd-door::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to right, var(--band-1) 0 16.666%, var(--band-2) 16.666% 33.333%, var(--band-3) 33.333% 50%, var(--band-4) 50% 66.666%, var(--band-5) 66.666% 83.333%, var(--band-6) 83.333% 100%);
}

.page-content .lfd-door > h2 {
  margin-top: 0;
  text-align: left;
}

.page-content .lfd-form label {
  display: block;
  font-family: var(--font2);
  font-size: var(--f6);
  font-weight: 600;
  line-height: var(--g6);
  margin-bottom: var(--x5);
}

.page-content .lfd-form input {
  width: 100%;
}

.page-content .lfd-form button {
  width: 100%;
  margin-top: var(--x3);
  cursor: pointer;
}

.page-content .lfd-help {
  margin: var(--x3) 0 0;
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  text-align: center;
}

.page-content .lfd-notice {
  margin: 0 0 var(--x3);
  font-family: var(--font2);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

.page-content .lfd-wrong {
  color: #FA3655;
  font-weight: 600;
}

.page-content .lfd-peek {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g1);
  margin-top: var(--x1);
}

.page-content .lfd-peek > div {
  background: var(--bg2);
  border: var(--border2);
  border-radius: var(--x3);
  padding: var(--x2);
}

.page-content .lfd-peek b {
  display: block;
  font-family: var(--font2);
  font-size: var(--f4);
  line-height: var(--g4);
  margin-bottom: var(--x5);
}

.page-content .lfd-peek span {
  font-family: var(--font2);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
}

@media all and (max-width: 960px) {
  .page-content .lfd-peek {
    grid-template-columns: 1fr;
    gap: var(--x1);
  }
}
/* ============================================================
   FIX: the rainbow lost its opening and closing times on a phone.

   The hero arch carries two labels, 7:30 am under the left foot
   and 4:00 pm under the right. They are the only thing that tells
   a visitor the arc MEANS the working day rather than being
   decoration, and on a phone they were gone: the Attention theme
   hides .clockmark below 640px. That is a sensible default for a
   decorative arc and the wrong one here, because it takes the
   single most useful fact on the page, the hours, off the screen
   most visitors actually arrive on.

   Re-shown below 640px at a larger figure, which is counter-
   intuitive until you remember the unit. These labels live inside
   an SVG with viewBox="0 0 1000 352", so font-size is in USER
   UNITS, not CSS pixels: the whole box is scaled to the available
   width. At 375px the arc renders about a third of full size, so
   the authored 21 units drew near 7px, which is why simply
   un-hiding them was not enough. 34 units lands around 11px on a
   375px screen and scales up with the viewport.

   Safe on both axes. The labels sit at x=40 and x=960 inside a
   1000-unit box with text-anchor:middle, so a wider glyph run has
   40 units of margin either side; and the baseline is at y=343 in
   a 352-unit box, so the descender on the p of "pm" reaches about
   350 and clears the bottom edge the SVG viewport clips at.
   ============================================================ */
@media all and (max-width: 640px) {
  .clockmark {
    display: block;
    font-size: 34px;
  }
}
/* ============================================================
   TESTIMONIALS (page 6) — snapshots in the wall, and the popup.

   Four photos of children sit among the quotes as print-style
   tiles: white border, soft shadow, a slight tilt that alternates.
   They are  elements written in the page content between
   [lfd-testimonials] and its closing tag; the plugin places them
   BETWEEN the quotes by the after="" list. The wall flows down its
   columns, so those positions pick the column and height each
   photo lands at. 2,5,8,10 cascades them diagonally across all
   three columns at 1280px and keeps the column bottoms within
   about 90px of each other; on a phone they come out evenly spaced.

   Because the figures are siblings of the quotes, the theme's
   blockquote:nth-child colours would shift by one after every
   photo. The rules below re-key the same eleven colours to
   :nth-of-type, which counts quotes only. Same order, same tints,
   and the page-6 prefix is what lets them outrank the theme.

   The form moved into a dialog opened by any link to #add, so the
   page carries two buttons and one form, and /testimonials/#add
   opens it on arrival. The card is the same component as Get in
   Touch and the Parents door: cream ground, heavy border, six
   rainbow bands across the top. The dialog is built by the
   plugin's script because the content sanitizer strips ;
   html.lfd-tf-open is that script's flag for locking page scroll.
   The dialog itself scrolls, not the card, so a tall form on a
   short phone screen still reaches its button.
   ============================================================ */
.page-6 .page-content .masonry blockquote:nth-of-type(1) {
  border-left-color: var(--band-1);
  background: rgba(250, 54, 85, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(2) {
  border-left-color: var(--band-4);
  background: rgba(64, 156, 32, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(3) {
  border-left-color: var(--band-2);
  background: rgba(254, 149, 47, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(4) {
  border-left-color: var(--band-6);
  background: rgba(123, 75, 168, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(5) {
  border-left-color: var(--band-3);
  background: rgba(255, 212, 12, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(6) {
  border-left-color: var(--band-5);
  background: rgba(61, 143, 216, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(7) {
  border-left-color: var(--band-2);
  background: rgba(254, 149, 47, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(8) {
  border-left-color: var(--band-1);
  background: rgba(250, 54, 85, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(9) {
  border-left-color: var(--band-6);
  background: rgba(123, 75, 168, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(10) {
  border-left-color: var(--band-4);
  background: rgba(64, 156, 32, 0.07);
}

.page-6 .page-content .masonry blockquote:nth-of-type(11) {
  border-left-color: var(--band-5);
  background: rgba(61, 143, 216, 0.07);
}

.page-content .masonry > figure {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--x2);
  padding: 10px 10px 0;
  box-sizing: border-box;
  background: #FFFFFF;
  border: var(--border1);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(46, 33, 24, 0.14);
  transform: rotate(-1.5deg);
}

.page-content .masonry > figure:nth-of-type(even) {
  transform: rotate(1.25deg);
}

.page-content .masonry > figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 2px;
}

.page-content .masonry > figure figcaption {
  padding: var(--x4) 0 var(--x3);
  font-family: var(--font2);
  font-size: var(--f6);
  font-weight: 600;
  line-height: var(--g6);
  color: var(--c2);
  text-align: center;
}

.page-content .lfd-tf-cta {
  margin: var(--x2) 0 var(--x1);
  text-align: center;
}

/* The prose above and below the wall reads on a 580px measure. On
   the page's 800px the pull-quote and both paragraphs each left one
   word alone on the last line ("years.", "adults."). 580 was measured
   against this copy at 520 to 680: it is the width where the
   pull-quote, the intro and the Add yours paragraph all break into
   two full lines. The wall keeps its .wide breakout untouched.

   The availability callout is one line at 800 but wraps below about
   660, and unbalanced it strands "the house." on its own; balance
   splits it after "2026,". text-wrap is progressive: a browser
   without it still gets the narrower measure. */
.focus .page-container.page-6 .page-content > .impact,
.focus .page-container.page-6 .page-content > p,
.focus .page-container.page-6 .page-content > h2 {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.focus .page-container.page-6 .page-content > p {
  text-wrap: pretty;
}

.focus .page-container.page-6 .page-content > .impact,
.focus .page-container.page-6 .page-content > .callout {
  text-wrap: balance;
}

html.lfd-tf-open {
  overflow: hidden;
}

/* margin:auto is the browser's own centring for a modal dialog; the
   theme's * { margin: 0 } reset strips it and pins the card top-left. */
.lfd-tf-dialog {
  margin: auto;
  width: 640px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lfd-tf-dialog::backdrop {
  background: rgba(46, 33, 24, 0.6);
}

.lfd-tf-dialog.inline {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  margin: var(--x1) 0;
}

.lfd-tf-card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--bg2);
  border: var(--border2);
  border-radius: var(--x3);
  padding: var(--x1) var(--x2) var(--x2);
}

.lfd-tf-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to right, var(--band-1) 0 16.666%, var(--band-2) 16.666% 33.333%, var(--band-3) 33.333% 50%, var(--band-4) 50% 66.666%, var(--band-5) 66.666% 83.333%, var(--band-6) 83.333% 100%);
}

/* Outranks the theme's .page-container .page-content h2 centring,
   same as the Get in Touch card: a form's heading starts where its
   labels do. */
.page-container .page-content .lfd-tf-card > h2 {
  margin: 0 48px var(--x4) 0;
  text-align: left;
}

.lfd-tf-card > p {
  margin: 0 0 var(--x2);
  text-align: left;
}

.lfd-tf-card .lfd-tf-close {
  position: absolute;
  top: var(--x3);
  right: var(--x3);
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  background: var(--bg1);
  box-shadow: none;
}

.lfd-tf-card .lfd-tf-close:hover {
  transform: none;
  box-shadow: none;
  background: var(--bg1);
}

.lfd-tf-card input,
.lfd-tf-card textarea {
  background: var(--bg1);
}
/*pm-css m:0*/