@font-face {
  font-family: 'Prata';
  src: url('../fonts/Prata-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {

  --cream: #F7F3EC;
  /* Y2 #F7C925 in radiant sun gold's place: her "YS1: Whole brand" (Build 112, 2026-10-08)
     and "YR1" (Build 123, 2026-10-12). Every rule that bound gold binds Y2: it never carries text. */
  --gold: #F7C925;
  --espresso: #241F1A;
  --shell: #F2B3A4;

  --ink-70: rgba(36, 31, 26, 0.70);

  --ink-55: rgba(36, 31, 26, 0.55);
  --ink-14: rgba(36, 31, 26, 0.14);
  --ink-08: rgba(36, 31, 26, 0.08);
  --gold-40: rgba(247, 201, 37, 0.40);
  --shell-22: rgba(242, 179, 164, 0.22);
  --shell-34: rgba(242, 179, 164, 0.34);

  --shell-42: rgba(242, 179, 164, 0.42);
  --shell-58: rgba(242, 179, 164, 0.58);

  --display: 'Prata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --measure: 1140px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(3.75rem, 8vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--espresso); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--espresso); color: var(--cream);
  padding: 0.75rem 1.25rem; z-index: 200;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section + .section { border-top: 1px solid var(--ink-08); }

.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 1.25rem;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--espresso);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 1.6rem + 5.4vw, 5.25rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.7vw, 3.25rem); line-height: 1.14; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); line-height: 1.24; }

p { margin: 0 0 1.25rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.7;
  color: var(--espresso);
}

.prose p { margin-bottom: 1.5rem; }

.swipe {
  background-image: linear-gradient(var(--shell-34), var(--shell-34));
  background-repeat: no-repeat;
  background-size: 100% 0.30em;
  background-position: 0 88%;
  padding-inline: 0.06em;
}

.signature {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.35;
  color: var(--espresso);
  max-width: 30ch;
}

.rule-gold {
  width: 62px; height: 3px;
  background: var(--gold);
  border: 0; margin: 0 0 1.5rem;
}
.rule-gold.centered { margin-inline: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 1.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--espresso);
  border-color: var(--gold);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}

.btn-secondary {
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--espresso);
  color: var(--cream);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

.link-quiet {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--espresso);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.35rem;
  display: inline-block;
}
.link-quiet:hover { border-bottom-color: var(--espresso); }

.promo {
  background: var(--shell-42);
  border-bottom: 1px solid var(--ink-08);
  text-align: center;
  padding: 0.75rem var(--gutter);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.promo[hidden] { display: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);

  border-bottom: 2px solid var(--gold);
  box-shadow: 0 10px 24px rgba(36, 31, 26, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; }
.brand-name {
  font-family: var(--display);
  font-size: 1.1875rem;
  letter-spacing: 0.055em;
  line-height: 1;
  color: var(--espresso);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--espresso);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--gold); }
.nav a[aria-current='page'] { border-bottom-color: var(--gold); }
.nav .btn { padding: 0.7rem 1.25rem; font-size: 0.6875rem; }

@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; min-height: 0; row-gap: 0.875rem; }
  .nav { width: 100%; flex-wrap: wrap; row-gap: 0.875rem; }
  .nav .btn { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .nav { gap: 1.125rem; }
  .nav a { font-size: 0.6875rem; letter-spacing: 0.14em; }
}

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { max-width: 34ch; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.photo-slot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--shell-42);
  border: 1px solid var(--ink-14);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.photo-slot.wide { aspect-ratio: 3 / 2; }
.photo-slot.square { aspect-ratio: 1 / 1; }

.photo-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  object-position: center 22%;
}

.photo-slot.crop-face img   { object-position: center 14%; }
.photo-slot.crop-centre img { object-position: center 50%; }

.photo-label {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem;
  max-width: 30ch;
}
.photo-label .photo-label-kicker {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.75rem;
}
.photo-label .photo-label-file {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--espresso);
  background: var(--cream);
  border: 1px solid var(--gold-40);
  border-radius: 2px;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.65rem;
  word-break: break-all;
}
.photo-label .photo-label-note {
  display: block;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--espresso);
}

.photo-slot.filled { background: var(--cream); }
.photo-slot.filled .photo-label { display: none; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.75rem;
}

.card {
  background: var(--cream);
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 0.875rem; }
.card p { font-size: 0.9375rem; color: var(--espresso); margin-bottom: 1.5rem; }

.card .prose p { font-size: inherit; }

.card .btn, .card .link-quiet { margin-top: auto; align-self: flex-start; }

.door-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.75rem;
}
@media (max-width: 720px) { .door-grid { grid-template-columns: 1fr; } }

.door-voice {
  font-family: var(--display);
  font-size: clamp(1.3125rem, 1.15rem + 0.75vw, 1.625rem);
  line-height: 1.24;
  margin-bottom: 0.875rem;
}

.card-logo {
  height: 132px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 1.375rem;
}

.panel {
  background: var(--shell-42);
  border: 1px solid var(--ink-14);
  border-radius: 2px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.panel-narrow { max-width: 760px; margin-inline: auto; text-align: center; }
.panel-narrow p { margin-inline: auto; }

.email-slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}
.email-slot input {
  flex: 1 1 280px;
  max-width: 360px;
  font-family: var(--body);
  font-size: 0.9375rem;
  color: var(--espresso);
  background: var(--cream);
  border: 1.5px solid var(--ink-14);
  border-radius: 2px;
  padding: 1rem 1.125rem;
}
.email-slot input::placeholder { color: var(--ink-55); }
.email-slot input:disabled { cursor: not-allowed; }
.email-slot .btn:disabled { opacity: 0.55; cursor: not-allowed; }

.slot-note {
  display: block;
  margin-top: 1.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-55);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split.photo-left > .photo-slot { order: -1; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }

  .split.photo-left > .photo-slot { order: 1; }
}

.proof {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.proof li {
  padding-left: 1.5rem;
  border-left: 3px solid var(--gold);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--espresso);
  max-width: 60ch;
}
.proof li strong { color: var(--espresso); font-weight: 600; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.75rem;
}
.contact-card {
  background: var(--cream);
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
}

.contact-card h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.85vw, 1.6875rem);
  line-height: 1.24;
  letter-spacing: -0.005em;
}

.contact-card p { font-size: 0.9375rem; color: var(--espresso); }
.contact-email {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.3;
  word-break: break-word;
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--espresso);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.2rem;
}

.closer { text-align: center; }
.closer h2 { max-width: 18ch; margin-inline: auto; }
.closer .btn-row { justify-content: center; }

.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--ink-14);
  padding-block: clamp(2.75rem, 5vw, 4rem) 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; } }

.footer-mark { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.footer-mark img { width: 44px; height: 44px; }
.footer-mark span { font-family: var(--display); font-size: 1.1875rem; letter-spacing: 0.055em; }

.footer-line {
  font-family: var(--display);
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  line-height: 1.35;
  max-width: 26ch;
  margin: 0;
}

.footer-nav {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.footer-nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-nav a:hover { border-bottom: 2px solid var(--gold); }

.social {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.social a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--gold-40);
  padding-bottom: 0.25rem;
}
.social a:hover { border-bottom-color: var(--gold); }

.footer-legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-55);
}
.footer-legal p { margin: 0; }

.center { text-align: center; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.awaiting {
  border: 1px dashed var(--gold);
  border-radius: 2px;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--espresso);
  background: var(--cream);
}
.awaiting strong {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.door-grid .card-logo { align-self: center; }

.card-logo.parent-mark {
  height: 76px;
  margin-top: 28px;
  margin-bottom: calc(1.375rem + 28px);
}

h1.h1-long { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 3.75rem); }

.btn-row.centred { justify-content: center; }

.method-cards .card h3 { text-align: center; }

.door-grid .card {
  text-align: center;
  align-items: center;
}
.door-grid .card-logo { height: 168px; }
.door-grid .door-voice {
  font-size: clamp(1.4375rem, 1.2rem + 0.85vw, 1.8125rem);
  margin-bottom: 1rem;
  color: var(--espresso);
}
.door-grid .card p:not(.door-voice):not(.door-name) {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--espresso);
  max-width: 34ch;
  margin-inline: auto;
}
.door-grid .card .btn {
  align-self: center;
  font-size: 0.75rem;
  padding: 0.85rem 1.6rem;
}

.door-grid .card-logo.parent-mark {
  height: 97px;
  margin-top: 12px;
  margin-bottom: 0.5rem;
}

.reviews {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink-08);
}
.reviews .section-label { text-align: center; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
  align-items: start;
}
.review {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 3px solid var(--gold);
}
.review blockquote {
  margin: 0 0 1.125rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--espresso);
}
.review figcaption {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.social-icon {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--espresso);
}

.split.narrow-photo { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .split.narrow-photo { grid-template-columns: 1fr; }
}
.split.narrow-photo h2 { margin-bottom: 1.5rem; }

.reviews .section-label { text-align: left; }

.door-grid .card p.door-name {
  font-family: var(--display);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  color: var(--espresso);
  margin: 0 0 .9rem;
}
.door-grid .card p.door-name::before { display: none; }
.page-stack .card .card-pic {
  height: auto;
  width: min(220px, 58%);
  aspect-ratio: 3 / 4;
  margin: 4px auto 18px;
  object-fit: contain;
}

.social a { border-bottom: none; padding-bottom: 0; }
.social a span {
  border-bottom: 2px solid var(--gold-40);
  padding-bottom: 0.25rem;
}
.social a:hover span { border-bottom-color: var(--gold); }

.review {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--shell-42);
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
}

.stars {
  display: flex;
  gap: 0.1875rem;
  margin-bottom: 1rem;
}
.stars .star {
  width: 18px;
  height: 18px;
  fill: var(--gold);
  flex: none;
}

.verified {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  background: var(--gold-40);
  color: var(--espresso);
  border-radius: 2px;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
}
.review figcaption { line-height: 1.9; }

.reviews-link {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: 0;
  font-size: 0.9375rem;
}

.panel-narrow .btn-row { justify-content: center; }

.head-spaced { margin-bottom: 1.5rem; }

.head-centered { text-align: center; }

.elsewhere-lines { display: block; margin-top: 0.375rem; }
.elsewhere-lines > span { display: block; }

:root {

  --section-y: clamp(3rem, 6.5vw, 5rem);
}

main > .section:not(.hero) > .wrap { max-width: 960px; }

.wrap > .reviews:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

h1 {
  font-size: clamp(3rem, 1.6rem + 5.9vw, 5.75rem);
  line-height: 1.015;
  letter-spacing: -0.022em;
}
h2 {
  font-size: clamp(2.25rem, 1.45rem + 3.3vw, 4rem);
  line-height: 1.07;
  letter-spacing: -0.016em;
}
h3 { font-size: clamp(1.375rem, 1.15rem + 0.85vw, 1.6875rem); }

h1.h1-long { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem); }

.section-label { letter-spacing: 0.34em; margin-bottom: 1.5rem; }

.swipe { font-style: italic; }

.sparkle-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr min(var(--measure), 100%) 1fr;
}

.sparkle-field > .sky { position: relative; overflow: hidden; }

.sparkle-field > .keep-clear { }

.sparkle {
  position: absolute;
  display: block;

  width: var(--s, 24px);
  height: var(--s, 24px);
  opacity: 0;
  animation: sparkle-twinkle var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.sparkle > svg { width: 100%; height: 100%; display: block; fill: var(--gold); }

@media (max-width: 1300px) {
  .sparkle-field .sparkle { display: none; }
}
.sparkle.pink > svg { fill: var(--shell); }

.sparkle.dot > svg { display: none; }

.sparkle.dot {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              var(--gold) 0%, var(--gold) 22%, rgba(247, 201, 37, 0) 70%);
  transform-origin: center;
}
.sparkle.dot.pink {
  background: radial-gradient(circle at 50% 50%,
              var(--shell) 0%, var(--shell) 22%, rgba(242, 179, 164, 0) 70%);
}
.sparkle-band { height: clamp(110px, 12vw, 190px); }

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.30; transform: scale(0.82); }
  48%      { opacity: 0.95; transform: scale(1.05); }
  58%      { opacity: 0.95; transform: scale(1.05); }
}

.section > .wrap { position: relative; z-index: 1; }
.section { position: relative; }

.water {
  position: relative;
  height: clamp(96px, 10vw, 152px);
  width: 100%;
  overflow: hidden;

  background: transparent;
  pointer-events: none;
}
.water svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.water .drift { animation: water-drift linear infinite; }
.water .d1 { animation-duration: 31s; opacity: 0.85; }
.water .d2 { animation-duration: 22s; opacity: 0.55; animation-direction: reverse; }
.water .d3 { animation-duration: 43s; opacity: 0.80; }
.water .d4 { animation-duration: 27s; opacity: 0.45; animation-direction: reverse; }

@keyframes water-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-120px); }
}

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
}
.reveal {
  transition: opacity var(--reveal-time, 0.85s) cubic-bezier(0.22, 0.61, 0.36, 1),
              transform var(--reveal-time, 0.85s) cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--order, 0) * var(--reveal-step, 110ms));
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .reveal { --reveal-time: 0.36s; --reveal-step: 60ms; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .sparkle { animation: none; opacity: 0.45; }
  .water .drift { animation: none; }
}

.mantra {
  position: relative;
  min-height: clamp(30rem, 62vh, 40rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-y);

  background:
    radial-gradient(ellipse 54% 44% at 50% 40%, rgba(247, 201, 37, 0.18), transparent 72%),
    radial-gradient(ellipse 50% 40% at 10% 66%, rgba(242, 179, 164, 0.36), transparent 74%),
    var(--cream);
}

.mantra::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(60px, 8vw, 120px);
  background: linear-gradient(to bottom, var(--cream), transparent);
  pointer-events: none;
  z-index: 0;
}
.mantra .wrap { position: relative; z-index: 1; }
.mantra h2 {
  font-size: clamp(2.5rem, 1.35rem + 5.2vw, 5rem);
  line-height: 1.04;
  max-width: 17ch;
  margin-inline: auto;
}
.mantra .rule-gold.centered { margin-bottom: 2.25rem; }
.mantra .btn-row { justify-content: center; margin-top: 2.75rem; }

.ticker {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-block: 1px solid var(--ink-08);
  padding-block: 1.15rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-run 46s linear infinite;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 2.75rem;
  padding-inline: 1.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--espresso);
  white-space: nowrap;
}

.ticker__item::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

.split { gap: clamp(2.5rem, 6vw, 6rem); }

.hero-grid {
  gap: clamp(2.25rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.photo-slot.filled { border-color: var(--ink-08); }

.panel-narrow h2 {
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.12;
  max-width: 18ch;
  margin-inline: auto;
}

.ticker[hidden] { display: none; }

.mantra .signature {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.375rem);
  line-height: 1.36;
  max-width: 31ch;
}
.mantra .section-label {
  margin-bottom: 1.75rem;

  max-width: none;
  margin-inline: auto;
}

.hero-row {
  margin-top: clamp(2rem, 4vw, 3.25rem);

  align-items: start;
}
.hero-row .btn-row { margin-top: 1.75rem; }

.split h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.875rem); }

.sparkle-band {
  position: relative;
  height: clamp(72px, 7.5vw, 112px);
  margin-bottom: clamp(-56px, -5vw, -36px);
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.hero {
  background:
    radial-gradient(ellipse 54% 42% at 86% 34%, rgba(247, 201, 37, 0.22), transparent 72%),
    radial-gradient(ellipse 52% 40% at 2% 66%,  rgba(242, 179, 164, 0.38), transparent 74%),
    var(--cream);
}

main > .section:not(.hero):not(.mantra) {
  background:
    radial-gradient(ellipse 48% 40% at 6% 36%,  rgba(247, 201, 37, 0.16), transparent 72%),
    radial-gradient(ellipse 48% 38% at 94% 64%, rgba(242, 179, 164, 0.26), transparent 74%),
    var(--cream);
}

main > .section:nth-of-type(even):not(.hero):not(.mantra) {
  background:
    radial-gradient(ellipse 48% 40% at 6% 36%,  rgba(247, 201, 37, 0.16), transparent 72%),
    radial-gradient(ellipse 48% 38% at 94% 64%, rgba(242, 179, 164, 0.22), transparent 74%),
    linear-gradient(to bottom,
      rgba(242, 179, 164, 0)    0%,
      rgba(242, 179, 164, 0.25) 9%,
      rgba(242, 179, 164, 0.25) 91%,
      rgba(242, 179, 164, 0)    100%),
    var(--cream);
}

main > .section:nth-of-type(even) + .section,
main > .section:nth-of-type(odd) + .section { border-top: 0; }

.heading-centred > .section-label,
.heading-centred > h2 { text-align: center; }
.heading-centred > .section-label { max-width: none; margin-inline: auto; }
.heading-centred > h2 { max-width: 22ch; margin-inline: auto; }
.heading-centred > .card-grid,
.heading-centred > .door-grid { margin-top: 3rem; }

.section-label {
  color: var(--espresso);
  font-weight: 700;
}

.proof {

  display: block;
  columns: 2;
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 820px) { .proof { columns: 1; } }

.proof li {
  break-inside: avoid;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  position: relative;
  max-width: none;
  padding: 1.5rem 0 0;
  border-left: 0;
  border-top: 1px solid var(--gold-40);

  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--espresso);
}

.proof li::before {
  content: '';
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  background: var(--gold);
  border-radius: 50%;
}

.proof li strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--espresso);
  margin-bottom: 0.7rem;
}

.btn { border-radius: 0; }

.btn-primary {
  background: var(--shell);
  color: var(--espresso);
  border-color: var(--shell);
  border-width: 2px;
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--cream);
  color: var(--espresso);
  border-color: var(--shell);
}

.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--espresso);
  color: var(--cream);
}

.welcome {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--espresso);
  max-width: none;
  margin: 0;

  padding: 0.34em 0.4em 0.3em 0;
}
.welcome .n { position: relative; z-index: 1; }
.welcome .sheen {
  position: absolute;
  inset: -70% -40%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(247, 243, 236, 0)   38%,
    rgba(247, 243, 236, 0.92) 50%,
    rgba(247, 243, 236, 0)   62%);
  transform: translateX(-150%);
  opacity: 0;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 68%, transparent 100%);
}
.js-reveal .reveal.is-in .welcome .sheen {
  animation: welcome-sheen 4.4s cubic-bezier(0.37, 0.03, 0.28, 1) 0.55s 1 both;
}
@keyframes welcome-sheen {
  0%   { transform: translateX(-150%); opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(150%); opacity: 0; }
}

.welcome + .rule-gold { margin-top: 1rem; }

main > .section.plain-ground:not(.hero):not(.mantra) {
  background:
    radial-gradient(ellipse 48% 40% at 6% 36%,  rgba(247, 201, 37, 0.16), transparent 72%),
    radial-gradient(ellipse 48% 38% at 94% 64%, rgba(242, 179, 164, 0.26), transparent 74%),
    var(--cream);
}

.cover-figure {
  margin: 0;
  max-width: 420px;
  margin-inline: auto;
}
.cover-figure img {
  width: 100%;
  height: auto;
}

.edition-price {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--espresso);
  margin: 0 0 1rem;
}

.card p.edition-price { font-size: 1.75rem; margin-bottom: 1rem; }

.card p.awaiting {
  font-size: 0.8125rem;
  margin-top: auto;
  margin-bottom: 0;
}

.collective-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: left;
}
.collective-note .section-label { margin-bottom: 0.75rem; }
.collective-note p:last-child { margin-bottom: 0; }

.bonus-feature {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--shell-42);
  border: 1px solid var(--ink-14);
  border-top: 4px solid var(--gold);
  border-radius: 2px;
  padding: clamp(1.75rem, 3.2vw, 2.875rem);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: center;
  text-align: left;
}
.bonus-feature h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin: 0; }
.bonus-feature p  { margin: 0; font-size: 1.0625rem; }
@media (max-width: 760px) { .bonus-feature { grid-template-columns: 1fr; gap: 1rem; } }

.bonus-pop {
  position: fixed; z-index: 60; right: 24px; bottom: 24px;
  width: min(400px, calc(100vw - 32px));
  background: linear-gradient(var(--shell-42), var(--shell-42)), var(--cream);
  border: 1px solid var(--ink-14);
  border-top: 4px solid var(--gold);
  border-radius: 2px;
  padding: 1.5rem 1.5rem 1.375rem;
  box-shadow: 0 14px 40px rgba(36, 31, 26, 0.14);
  transform: translateY(130%); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.bonus-pop.is-up { transform: none; opacity: 1; }
.bonus-pop h3 { font-size: 1.375rem; margin: 0 2rem 0.625rem 0; }
.bonus-pop p  { font-size: 0.9375rem; margin: 0; }
.bonus-pop-close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 2.5rem; height: 2.5rem;
  border: 0; background: transparent; color: var(--espresso);
  font: 400 1.5rem/1 var(--body); cursor: pointer;
}
@media (max-width: 560px) { .bonus-pop { left: 16px; right: 16px; bottom: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .bonus-pop { transition: none; } }

.wholesale { max-width: 720px; }
.wholesale .rule-gold { margin-bottom: 1.25rem; }

.wholesale { text-align: center; }
.wholesale .section-label,
.wholesale .rule-gold,
.wholesale .prose p { margin-inline: auto; }
.wholesale .btn-row { justify-content: center; }

@media (max-width: 900px) {
  .cover-figure { max-width: 340px; margin-top: 2.5rem; }
}

.journal-intro { max-width: 760px; margin-inline: auto; }
.journal-intro > .section-label,
.journal-intro > h2 { text-align: center; }
.journal-intro > .section-label { margin-inline: auto; }
.journal-intro > h2 { max-width: 20ch; margin-inline: auto; }

.card-feature {
  margin-top: 2.75rem;
  border-top-width: 4px;
  padding: clamp(1.75rem, 3.2vw, 2.875rem);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: start;
  text-align: left;
}
.card-feature h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: 0.5rem; }
.card-feature p.edition-price { font-size: clamp(2rem, 1.4rem + 1.9vw, 2.875rem); margin-bottom: 0; }
.card-feature-body { display: flex; flex-direction: column; align-items: flex-start; }
.card-feature-body p { font-size: 1.0625rem; margin-bottom: 1.75rem; }
.card-feature .btn { margin-top: 0; }

.feature-flag {
  display: inline-block;
  background: var(--shell-58);
  color: var(--espresso);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  margin: 0 0 1rem;
}
.card-feature p.feature-flag { font-size: 0.625rem; margin-bottom: 1rem; }

.editions-sub { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; text-align: center; }
.card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }

@media (max-width: 760px) {
  .card-feature { grid-template-columns: 1fr; }
  .card-grid-two { grid-template-columns: 1fr; }
}

.wholesale-awaiting { max-width: 62ch; margin-top: 0.5rem; }

:root { --paper: #FFFDF9; }

.prints-stage { container-type: inline-size; }

.prints-heading {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem; margin-bottom: 1.5rem; text-align: center;
}

.prints-heading .section-label { margin: 0; font-size: 14px; text-wrap: balance; }
.prints-globe { display: block; flex: none; width: 96px; height: 96px; }
.prints-globe .globe-face  { fill: var(--paper); }
.prints-globe .globe-lines { fill: none; stroke: var(--shell); stroke-width: 1.8; stroke-linecap: round; }
.prints-globe .globe-edge  { fill: none; stroke: var(--ink-55); stroke-width: 1.6; }
.prints-globe .globe-heart { fill: var(--gold); }

main > .section:has(> .prints-band:first-child) { padding-top: 0; }

.prints-board { position: relative; margin-inline: auto; max-width: 356px; }
.prints-moments { aspect-ratio: 356 / 446.4; margin-bottom: 3rem; }
.prints-shop    { aspect-ratio: 356 / 168; margin-top: 2.5rem; }

.print {
  --cr: var(--nr); --ci: var(--ni);
  position: absolute; margin: 0;
  left: var(--nx); top: var(--ny); width: 35.056%;
  z-index: calc(var(--ci) + 1);
  transform: rotate(calc(var(--cr) * 1deg));
  transform-origin: 50% 50%;
}
.print-inner {
  position: relative;
  background: var(--paper);
  padding: 6.5% 6.5% 21%;
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.10), 0 10px 22px rgba(36, 31, 26, 0.13);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.print picture { display: block; }
.print img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; background: var(--shell-22);
}

.prints-pin { display: block; flex: none; width: 12px; height: 16px; fill: var(--gold); }

.prints-shop .print picture { overflow: hidden; display: block; }

@container (min-width: 560px) {
  .prints-heading .section-label { font-size: 18px; max-width: 26em; text-align: center; }
  .prints-board { max-width: 900px; }
  .prints-moments { aspect-ratio: 900 / 444; }
  .prints-shop    { aspect-ratio: 900 / 276; }
  .print { --cr: var(--r); --ci: var(--i); left: var(--x); top: var(--y); width: 20%; }
  .prints-shop .print { width: 23%; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .print:hover { z-index: 20; }
  .print:hover .print-inner {
    transform: translateY(-6px) rotate(calc(var(--cr) * -1deg)) scale(1.07);
    box-shadow: 0 2px 4px rgba(36, 31, 26, 0.10), 0 18px 34px rgba(36, 31, 26, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .print-inner { transition: none; }
}

:root { --blush: #F9D9D3; --seaglass: #C5DAD2; }

.shop-proof {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; margin: 1.5rem auto 0;
}
.shop-tag {
  display: flex; flex-direction: column; align-items: center;
  background: var(--blush);
  border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.08), 0 8px 18px rgba(36, 31, 26, 0.10);
  padding: 10px 26px;
}
.shop-tag-words {
  font-family: var(--display); font-size: 16px; line-height: 1.3;
  letter-spacing: 0.01em; color: var(--espresso);
  margin: 6px 0 0; white-space: nowrap;
}
.shop-btn {
  background: var(--seaglass);
  border-color: var(--seaglass);
  color: var(--espresso);
  gap: 0.75rem; margin-top: 20px; font-size: 0.875rem; padding: 1.2rem 2.4rem;
  position: relative; overflow: hidden;
}
.shop-arrow { flex: none; transition: transform 0.25s ease; }
.shop-btn:hover .shop-arrow, .shop-btn:focus-visible .shop-arrow { transform: translateX(4px); }

.shop-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(247, 243, 236, 0.85), transparent);
  transform: skewX(-18deg);
  animation: shop-shimmer 3.2s ease-in-out 1s infinite;
  pointer-events: none;
}
@keyframes shop-shimmer { 0% { left: -40%; } 45%, 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .shop-btn::after { display: none; } }
@media (max-width: 600px) {
  .shop-btn { font-size: 0.6875rem; letter-spacing: 0.12em; padding: 1.05rem 1.3rem; white-space: nowrap; }
  .shop-arrow { width: 14px; }
}

.prints-heading { position: relative; }
.prints-globe { position: relative; z-index: 2; }
.prints-heading .section-label { position: relative; z-index: 3; }
.orbit { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; overflow: visible; }
.orbit-back { z-index: 1; }
.orbit-front { z-index: 3; }
.orbit-ph { top: -48px; }
.orbit-lap { top: -80px; display: none; }
@container (min-width: 560px) { .orbit-ph { display: none; } .orbit-lap { display: block; } }
.orbit-ring { fill: none; stroke: #F7C925; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .006 .016; opacity: .7; }
.orbit-body { fill: var(--cream); stroke: rgba(36, 31, 26, .62); stroke-width: 1.1; stroke-linejoin: round; }
.orbit-tail, .orbit-wing { fill: var(--shell); stroke: rgba(36, 31, 26, .62); stroke-width: 1.1; stroke-linejoin: round; }
.orbit-win { fill: rgba(36, 31, 26, .55); }
.orbit-cockpit { fill: rgba(36, 31, 26, .30); }
.orbit-heart { fill: var(--gold); }
.orbit-lap .orbit-plane { offset-path: path('M102.0 122 A118 22 -6 1 0 338.0 122 A118 22 -6 1 0 102.0 122'); }
.orbit-ph .orbit-plane { offset-path: path('M77.7 90 A87.3 16.3 -6 1 0 252.3 90 A87.3 16.3 -6 1 0 77.7 90'); }
.orbit-plane { offset-rotate: 0deg; offset-anchor: 0 0; offset-distance: 8%; }
.orbit-ph .orbit-turn { scale: .78; }
.orbit-back .orbit-plane { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .orbit .orbit-plane { animation: orbit-fly 11s linear infinite; }
  .orbit-front .orbit-plane { animation: orbit-fly 11s linear infinite, orbit-front 11s linear infinite; }
  .orbit-back .orbit-plane { animation: orbit-fly 11s linear infinite, orbit-back 11s linear infinite; }
  .orbit .orbit-turn { animation: orbit-turn 11s linear infinite; }
}
@keyframes orbit-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes orbit-front { 0%, 49.9% { opacity: 1; } 50%, 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes orbit-back { 0%, 49.9% { opacity: 0; } 50%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes orbit-turn { 0%, 45% { transform: scaleX(1); } 50%, 95% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-feature, .card-feature ~ .card-grid-two > .card {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
  }
  .card-feature:hover, .card-feature ~ .card-grid-two > .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(36, 31, 26, .06), 0 18px 34px rgba(36, 31, 26, .12);
  }
}

.review { position: relative; }
.review-quote {
  display: block; position: absolute; top: .05em; right: .18em;
  font-family: var(--display); font-size: 6rem; line-height: 1;
  color: rgba(247, 243, 236, .95); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .review.reveal.is-in .review-quote {
    animation: review-quote 1s ease both;
    animation-delay: calc(var(--order, 0) * var(--reveal-step, 110ms) + .5s);
  }
}
@keyframes review-quote { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }

.flourish {
  display: block;
  height: 9px;
  margin-top: 14px;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
}
.flourish::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 9px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent) center / 100% 1px no-repeat;
}
.flourish::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 9px;
  height: 9px;
  margin-left: -79.5px;
  margin-right: 70.5px;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.3 9.55 2.15 11.7 12 12 -9.85.3 -11.7 2.15 -12 12 -.3 -9.85 -2.15 -11.7 -12 -12 9.85 -.3 11.7 -2.15 12 -12z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.3 9.55 2.15 11.7 12 12 -9.85.3 -11.7 2.15 -12 12 -.3 -9.85 -2.15 -11.7 -12 -12 9.85 -.3 11.7 -2.15 12 -12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .js-gild .flourish::before { transform: scaleX(0); }
  .js-gild .flourish::after { opacity: 0; transform: scale(0); }
  .js-gild .flourish.is-lit::before { animation: flourish-line .9s cubic-bezier(.22, 1, .36, 1) .2s both; }
  .js-gild .flourish.is-lit::after { animation: flourish-star 1.1s ease .7s both; }
}
@keyframes flourish-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flourish-star {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.menu-btn { display: none; }
.menu-panel[hidden] { display: none; }

@media (max-width: 860px) {
  .js-menu .site-header .nav { display: none; }
  .js-menu .header-inner { flex-wrap: nowrap; min-height: 0; padding-block: 12px; }
  .js-menu .menu-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    background: var(--cream);
    border: 1.5px solid var(--espresso);
    border-radius: 2px;
    cursor: pointer;
  }
  .menu-btn i { display: block; width: 20px; height: 1.5px; background: var(--espresso); }

  .menu-btn[aria-expanded='true'] i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-btn[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded='true'] i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .menu-panel {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 34px 24px;
    background: var(--cream);
    border-top: 2px solid var(--gold);
    overflow-y: auto;
  }
  .menu-panel .menu-link {
    align-self: flex-start;
    font-family: var(--display);
    font-size: 28px;
    color: var(--espresso);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
  }
  .menu-panel .menu-link[aria-current='page'] { border-bottom-color: var(--gold); }
  .menu-panel .btn { align-self: flex-start; margin-top: 10px; }

  .menu-open { overflow: hidden; }
}
@media (min-width: 861px) {
  .menu-panel { display: none; }
}

:root { --hdr: 86px; }
@media (max-width: 860px) { :root { --hdr: 176px; } }

.door-grid.page-stack {
  display: block;
  max-width: 640px;
  margin: 2.75rem auto 0;
  --top: calc(var(--hdr) + 28px);
  --peek: 22px;
  --dwell: 120px;
}
.page-stack .card {
  position: sticky;
  top: calc(var(--top) + var(--i) * var(--peek));
  box-shadow: 0 -10px 28px rgba(36, 31, 26, .07), 0 2px 0 rgba(36, 31, 26, .04);
}
.page-stack .card + .card { margin-top: var(--dwell); }
@media (max-width: 720px) {
  .door-grid.page-stack { --top: calc(var(--hdr) + 14px); --peek: 14px; --dwell: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-stack .card { position: static; }
  .page-stack .card + .card { margin-top: 24px; }
}

@font-face {
  font-family: 'Ms Madi';
  src: url('../fonts/MsMadi-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.hand-word {
  font-family: 'Ms Madi', 'Prata', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.9em;
  line-height: .8;
  display: inline-block;
  white-space: nowrap;
  padding: 0 .06em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso);
}
.hand-word-journal { font-size: 1.78em; }

.amz-badge{display:flex;justify-content:center;margin:1.4rem 0 0}
.amz-badge a{display:block;line-height:0;outline:none}
.amz-badge a:focus-visible{outline:2px solid var(--espresso);outline-offset:6px}
.amz-badge img{display:block;width:200px;height:auto}

.btn-primary {
  text-transform: none;
  letter-spacing: .03em;
  font-size: .9375rem;
  font-weight: 600;
  padding: .95rem 2.25rem;
  border-radius: 999px;
  background: linear-gradient(var(--cream), var(--cream)) left center / 0% 100% no-repeat, var(--shell);
  border: 2px solid var(--shell);
  color: var(--espresso);
  box-shadow: inset 0 0 0 4px var(--cream),
              inset 0 0 0 5px var(--gold);
  transition: background-size .5s cubic-bezier(.6, 0, .2, 1),
              box-shadow .3s ease .25s;
}
.nav .btn-primary { font-size: .8125rem; padding: .62rem 1.35rem; }
.door-grid .card .btn-primary { font-size: .875rem; padding: .8rem 1.8rem; }

.btn-primary:hover, .btn-primary:focus-visible {
  background: linear-gradient(var(--cream), var(--cream)) left center / 100% 100% no-repeat, var(--shell);
  border-color: var(--shell);
  color: var(--espresso);
  box-shadow: inset 0 0 0 4px var(--shell),
              inset 0 0 0 5px var(--gold);
}

.btn-primary.btn-arrow::after {
  content: "";
  flex: none;
  width: 14px;
  height: 10px;
  margin-left: .15rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.2 12.3 5 8.5 8.8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.2 12.3 5 8.5 8.8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary.btn-arrow::after { transition: transform .25s ease; }
  .btn-primary.btn-arrow:hover::after,
  .btn-primary.btn-arrow:focus-visible::after { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-primary:hover, .btn-primary:focus-visible { transition: none; }
}

@media (min-width:768px){ body:not(.page-home) main > .section:has(+ .water + .closer){padding-bottom:calc(var(--section-y) - 72px)} main > section.closer{margin-bottom:32px} }
@media (max-width:767px){ body:not(.page-home) main > .section:has(+ .water + .closer){padding-bottom:calc(var(--section-y) - 40px)} main > section.closer{margin-bottom:13px} }

.page-home .hero .hero-grid > :first-child{text-align:center}
.page-home .hero .lede{margin-inline:auto}
.page-home .hero .btn-row.centred{justify-content:center}
.page-home .hero .amz-badge{justify-content:center}
@media (min-width:901px){.page-home .hero .hero-grid{grid-template-columns:minmax(0,540px) 382px;justify-content:center;column-gap:64px}}
@media (max-width:900px){.page-home .hero .hero-grid{row-gap:32px}}
@media (min-width:768px){
 .page-home main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 14px)}
 .page-home main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 14px);padding-bottom:calc(var(--section-y) + 12px)}
 .page-home main > section.section:nth-of-type(3){padding-top:calc(var(--section-y) + 12px);padding-bottom:calc(var(--section-y) - 14px)}
 .page-home main > section.section:nth-of-type(4){padding-top:calc(var(--section-y) - 14px)}
 .page-home main > section.section:nth-of-type(5):not(.closer){padding-top:calc(var(--section-y) - 28px)}
}
@media (max-width:767px){
 .page-home main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 10px)}
 .page-home main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 10px);padding-bottom:calc(var(--section-y) + 8px)}
 .page-home main > section.section:nth-of-type(3){padding-top:calc(var(--section-y) + 8px);padding-bottom:calc(var(--section-y) - 10px)}
 .page-home main > section.section:nth-of-type(4){padding-top:calc(var(--section-y) - 10px)}
 .page-home main > section.section:nth-of-type(5):not(.closer){padding-top:calc(var(--section-y) - 20px)}
}

@media (min-width:768px){
 .page-journal main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 14px)}
 .page-journal main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 14px);padding-bottom:calc(var(--section-y) - 12px)}
 .page-journal main > section.section:nth-of-type(3){padding-top:calc(var(--section-y) - 12px)}
 .page-journal main > section.section:nth-of-type(4){padding-bottom:calc(var(--section-y) - 14px)}
 .page-journal main > section.section:nth-of-type(5){padding-top:calc(var(--section-y) - 14px)}
}
@media (max-width:767px){
 .page-journal main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 10px)}
 .page-journal main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 10px);padding-bottom:calc(var(--section-y) - 12px)}
 .page-journal main > section.section:nth-of-type(3){padding-top:calc(var(--section-y) - 12px)}
 .page-journal main > section.section:nth-of-type(4){padding-bottom:calc(var(--section-y) - 8px)}
 .page-journal main > section.section:nth-of-type(5){padding-top:calc(var(--section-y) - 8px)}
}

@media (min-width:768px){
 .page-about main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 12px)}
 .page-about main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 12px);padding-bottom:calc(var(--section-y) - 52.9px)}
 .page-about main > section.section:nth-of-type(4){padding-top:calc(var(--section-y) - 28.9px)}
}
@media (max-width:767px){
 .page-about main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 12px)}
 .page-about main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 12px);padding-bottom:calc(var(--section-y) - 33.8px)}
 .page-about main > section.section:nth-of-type(4){padding-top:calc(var(--section-y) - 33.8px)}
}

@media (min-width:768px){
 .page-speaking main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 14px)}
 .page-speaking main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 14px);padding-bottom:calc(var(--section-y) - 12px)}
 .page-speaking main > section.section:nth-of-type(3){padding-top:calc(var(--section-y) - 12px);padding-bottom:calc(var(--section-y) - 14px)}
 .page-speaking main > section.section:nth-of-type(4){padding-top:calc(var(--section-y) - 14px);padding-bottom:calc(var(--section-y) - 14px)}
 .page-speaking main > section.section:nth-of-type(5){padding-top:calc(var(--section-y) - 14px)}
}
@media (max-width:767px){
 .page-speaking main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 10px)}
 .page-speaking main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 10px)}
 .page-speaking main > section.section:nth-of-type(3){padding-bottom:calc(var(--section-y) - 10px)}
 .page-speaking main > section.section:nth-of-type(4){padding-top:calc(var(--section-y) - 10px);padding-bottom:calc(var(--section-y) - 8px)}
 .page-speaking main > section.section:nth-of-type(5){padding-top:calc(var(--section-y) - 8px)}
}

.journal-intro:has(.fp-grid) { max-width: 1120px; }
.filled-page { margin: 0; }
.filled-page img { display: block; width: 100%; height: auto; }
.fp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.fp-grid .filled-page { order: -1; }
.fp-grid .prose { max-width: none; margin: 0; }
@media (max-width: 860px) {
  .fp-grid { grid-template-columns: 1fr; gap: 32px; }
  .fp-grid .filled-page { order: 0; max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 860px) { .fp-grid .filled-page { margin-bottom: 24px; } }
.filled-page.fp-wait { opacity: 0; transform: translateX(-56px); }
.filled-page.fp-in { opacity: 1; transform: none; transition: opacity 900ms ease-out, transform 900ms cubic-bezier(.22, .61, .36, 1); }

.card-feature-body .amz-badge { justify-content: flex-start; }

@media (min-width: 761px) { .card-feature > div:first-child { text-align: center; justify-self: center; align-self: center; } .card-grid-two > .card { text-align: center; justify-content: center; } }

.dl-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(36, 31, 26, .30); opacity: 0; transition: opacity .4s ease; }
.dl-scrim.is-up { opacity: 1; }
.dl-scrim[hidden], .dl-pop[hidden], .dl-tab[hidden] { display: none; }
.dl-pop { position: fixed; z-index: 81; left: 50%; top: 50%; width: min(780px, calc(100vw - 48px)); display: grid; grid-template-columns: .9fr 1.1fr; background: var(--cream); border: 1px solid var(--ink-14); border-top: 4px solid var(--gold); border-radius: 0; box-shadow: 0 18px 50px rgba(36, 31, 26, .2); transform: translate(-50%, -46%); opacity: 0; transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; text-align: left; }
.dl-pop.is-up { transform: translate(-50%, -50%); opacity: 1; }
.dl-pop:focus { outline: none; }
.dl-pic { background: var(--shell-22); position: relative; min-height: 100%; padding: 0; }
.dl-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.dl-body { padding: 2.4rem 2.2rem 2rem; position: relative; background: var(--paper); }
.dl-pop h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.12; margin: 0 2rem .7rem 0; }
.dl-line { font-size: 1rem; margin: 0 0 1.2rem; line-height: 1.6; }
.dl-pop label { display: block; font: 600 .6875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; margin: .8rem 0 .4rem; }
.dl-pop input { width: 100%; box-sizing: border-box; font: 400 1rem var(--body); color: var(--espresso); background: var(--paper); border: 1.5px solid rgba(36, 31, 26, .62); padding: .85rem .95rem; border-radius: 0; }
.dl-pop input:focus-visible { border-color: var(--espresso); outline: 2px solid var(--espresso); outline-offset: 2px; }
.dl-err { display: block; font-size: .875rem; margin: .35rem 0 0; color: var(--espresso); }
.dl-err:empty { display: none; }
.dl-pop .btn { width: 100%; margin-top: 1.1rem; }
.dl-fine { font-size: .75rem; line-height: 1.5; color: rgba(36, 31, 26, .78); margin: .75rem 0 0; }
.dl-fine.dl-pv { margin-top: .35rem; }
.dl-fine a { color: rgba(36, 31, 26, .78); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.dl-x { position: absolute; top: .4rem; right: .4rem; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; font: 400 1.6rem/1 var(--body); color: var(--espresso); cursor: pointer; }
.dl-thanks[hidden], .dl-form[hidden] { display: none; }
.dl-thanks h2:focus { outline: none; }
.dl-tab { position: fixed; z-index: 70; right: 0; top: 50%; writing-mode: vertical-rl; background: var(--shell); color: var(--espresso); border: 2px solid var(--shell); border-right: 0; font: 600 .6875rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: 1rem .65rem; display: flex; align-items: center; gap: .6rem; box-shadow: 0 8px 24px rgba(36, 31, 26, .12); border-radius: 0; cursor: pointer; transform: translate(110%, -50%) rotate(180deg); transition: transform .4s ease, background-color .18s ease; }
.dl-tab.is-in { transform: translate(0, -50%) rotate(180deg); }
.dl-tab:hover, .dl-tab:focus-visible { background: var(--cream); }
.dl-tab .arr { font: 400 1.1rem/1 var(--body); rotate: 90deg; }
.dl-thumb { display: none; float: right; width: 54px; aspect-ratio: 8.5 / 11; margin: 0 2.4rem .4rem .8rem; border: 1px solid var(--ink-14); background-image: url('../../images/sunrise-n1b-670w.png'); background-size: cover; background-position: center 45%; background-repeat: no-repeat; }
@media (max-width: 560px) {
  .dl-pop { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 56vh; overflow: auto; grid-template-columns: 1fr; transform: translateY(100%); border-left: 0; border-right: 0; border-bottom: 0; }
  .dl-pop.is-up { transform: none; }
  .dl-pic { display: none; }
  .dl-body { padding: 1.5rem 1.25rem 1.25rem; }
  .dl-pop h2 { font-size: 1.75rem; }
  .dl-thumb { display: block; }
  .dl-line { margin-bottom: .6rem; }
  .dl-pop .btn { margin-top: .85rem; }
}
@media (max-width: 899px) { .dl-tab { font-size: .5625rem; letter-spacing: .14em; padding: .85rem .2rem; gap: .45rem; box-shadow: 0 6px 16px rgba(36, 31, 26, .12); } .dl-tab .arr { font-size: .6875rem; } }
@media (prefers-reduced-motion: reduce) { .dl-pop, .dl-scrim, .dl-tab { transition: none; } }

.cf-grid { display: block; text-align: left; }
.cf-grid .sp-strip { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.cf-grid .sp-strip p { margin: .3rem 0 0; }
.cf-grid .sp-strip .btn { margin-top: 0; flex: 0 0 auto; }
@media (max-width: 760px) { .cf-grid .sp-strip { display: block; } .cf-grid .sp-strip .btn { margin-top: 1.1rem; } }
.contact-card.form { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding: 0; overflow: hidden; max-width: none; text-align: left; }
.contact-card.form .form-inner { padding: clamp(1.5rem, 2.6vw, 2.125rem); max-width: none; order: 1; background: linear-gradient(180deg, #F5D2C6 0%, #F8E2D7 45%, #F6E3CC 100%); }
.contact-card.form .fc-pic { display: block; order: 2; background: url('../../images/sunrise-n1b-670w.png') center 40% / cover no-repeat; min-height: 100%; }
@media (max-width: 760px) { .contact-card.form { grid-template-columns: 1fr; } .contact-card.form .fc-pic { order: 0; min-height: 150px; } }
.cf label { display: block; font: 400 1.0625rem/1.2 var(--display); letter-spacing: 0; text-transform: none; margin: 1.15rem 0 .45rem; color: var(--espresso); }
.cf input, .cf select, .cf textarea { width: 100%; font: 400 1rem/1.5 var(--body); color: var(--espresso); background-color: var(--paper); border: 1.5px solid rgba(36, 31, 26, .62); padding: .8rem .95rem; border-radius: 0; box-sizing: border-box; }
.cf select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--espresso) 50%), linear-gradient(135deg, var(--espresso) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.cf textarea { min-height: 9.5rem; resize: vertical; }
.cf :focus-visible { outline: 2px solid var(--espresso); outline-offset: 2px; }
.cf .btn { margin-top: 1.3rem; }
.cf .cf-alt { margin: 1rem 0 0; font-size: .9375rem; }
.cf .cf-alt a { color: var(--espresso); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.cf-err { display: block; font-size: .875rem; margin: .35rem 0 0; color: var(--espresso); }
.cf-err:empty { display: none; }
.cf .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .cf .pair { grid-template-columns: 1fr; } }
.cf ::placeholder { color: rgba(36, 31, 26, .62); opacity: 1; }
.cf .opt { font: 400 .875rem/1 var(--body); color: rgba(36, 31, 26, .78); }
.cf-thanks { padding: 1.5rem 0 .5rem; }
.cf-thanks:focus { outline: none; }
.cf-thanks .ty-h { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin: 0 0 .6rem; }
.cf-thanks p { margin: 0; max-width: 46ch; }
.cf-thanks[hidden] { display: none; }

.bk { max-width: 1040px; margin: 2.75rem auto 0; text-align: left; }
.bk-label { text-align: center; margin: 0 0 1.5rem; }
.bk-steps { list-style: none; margin: 0 auto 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; max-width: 900px; }
.bk-step { text-align: center; }
.bk-num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 1.5px solid var(--gold); border-radius: 50%; font: 600 1rem/1 var(--body); color: var(--espresso); margin-bottom: .8rem; }
.bk-step h3 { font: 400 1.3rem/1.25 var(--display); margin: 0 0 .45rem; color: var(--espresso); }
.bk-step p { font-size: .9375rem; line-height: 1.55; margin: 0; color: var(--espresso); }
.bk-card { margin: 0; }
.bk-head { font: 400 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.25 var(--display); margin: 0; color: var(--espresso); }
.bk-headwrap { position: relative; padding-right: 84px; margin-bottom: .4rem; min-height: 118px; }
.bk-arrow2 { position: absolute; right: 0; top: .2rem; width: 76px; height: 96px; overflow: visible; }
.bk-arrow2 path { fill: none; stroke: var(--paper); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bk-arrow2.f-start .ln, .bk-arrow2.f-start .hd { stroke-dashoffset: 1; }
.bk-arrow2.anim .ln { stroke-dashoffset: 1; animation: bkdraw .9s cubic-bezier(.45, 0, .2, 1) .2s forwards; }
.bk-arrow2.anim .hd { stroke-dashoffset: 1; animation: bkdraw .3s ease-out 1.05s forwards; }
@keyframes bkdraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-arrow2.anim .ln, .bk-arrow2.anim .hd { animation: none; stroke-dashoffset: 0; } }
.bk-tick { display: flex !important; gap: .55rem; align-items: center; font: 400 .9375rem/1.3 var(--body) !important; margin: .6rem 0 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.bk-tick input { width: 20px !important; height: 20px; flex: none; margin: 0; padding: 0; accent-color: #241F1A; }
.bk-ty p { margin: 1rem 0 0; max-width: 36ch; }
.bk-ty:focus { outline: none; }
.bk-ty[hidden], .bk-headwrap[hidden], .cf[hidden] { display: none; }
.hand-word-hello { font-size: 1.85em; line-height: .6; display: inline; padding: 0; }
@media (max-width: 900px) { .bk-steps { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) {
  .bk-steps { grid-template-columns: 1fr; gap: 1.1rem; }
  .bk-step { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem; text-align: left; }
  .bk-num { grid-row: span 2; margin: 0; }
  .bk-step h3 { margin: .35rem 0 .3rem; }
  .bk-label { text-align: left; }
  .bk-headwrap { padding-right: 64px; min-height: 96px; }
  .bk-arrow2 { width: 60px; height: 76px; }
}

.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; margin: 0; }
.legal-links a { color: var(--espresso); text-decoration: underline; text-decoration-color: rgba(36, 31, 26, .35); display: inline-block; padding: 4px 0; line-height: 1.35; }
.legal-links a:hover { text-decoration-color: var(--gold); }

.legal-page .prose { max-width: 46rem; }
.legal-page h1 { margin-bottom: .6rem; }
.legal-page .legal-date { font-size: .9375rem; color: rgba(36, 31, 26, .78); margin: 0 0 2rem; }
.legal-page h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin: 2.2rem 0 .7rem; }
.legal-page p { margin: 0 0 1rem; }

body.fb { margin: 0; background: var(--cream); color: var(--espresso); font-family: var(--body); }
.fb-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.fb-pic { position: relative; overflow: hidden; background: var(--shell-22); border-right: 1px solid var(--ink-14); }
.fb-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem); border-top: 4px solid var(--gold); background: var(--paper); }
.fb-mark { display: flex; align-items: center; gap: .6rem; margin: 0 0 2.2rem; font-family: var(--display); font-size: 1.15rem; }
.fb-mark img { width: 36px; height: 36px; }
.fb-main h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); line-height: 1.08; margin: 0 0 .8rem; }
.fb-main h1:focus { outline: none; }
.fb-line { font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.6rem; max-width: 30rem; }
.fb-main label { display: block; font: 600 .6875rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; margin: .9rem 0 .4rem; }
.fb-main input { width: 100%; max-width: 26rem; box-sizing: border-box; font: 400 1rem var(--body); color: var(--espresso); background: var(--paper); border: 1.5px solid rgba(36, 31, 26, .62); padding: .85rem .95rem; border-radius: 0; }
.fb-main input:focus-visible { border-color: var(--espresso); outline: 2px solid var(--espresso); outline-offset: 2px; }
.fb-main .btn { width: 100%; max-width: 26rem; margin-top: 1.2rem; }
.fb-main .dl-fine { max-width: 26rem; }
.fb-thanks[hidden], .fb-form[hidden] { display: none; }
.fb-foot { margin-top: 2.4rem; font-size: .75rem; }
@media (max-width: 760px) {
  .fb-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-top: 4px solid var(--gold); }
  .fb-pic { height: 27vh; border-right: 0; border-bottom: 1px solid var(--ink-14); }
  .fb-main { justify-content: flex-start; padding: 1.6rem 20px 2rem; border-top: 0; }
  .fb-mark { margin-bottom: 1.3rem; font-size: 1rem; }
  .fb-main h1 { font-size: 2.3rem; }
  .fb-line { margin-bottom: 1.1rem; }
}
.wrap:has(> .bk) { min-width: 0; }
.cf .cf-alt a { overflow-wrap: anywhere; }
@media (min-width: 900px) { .footer-legal { flex-wrap: nowrap; } .footer-legal > p:first-child, .footer-legal > .legal-links { flex: none; white-space: nowrap; } }

@media (min-width:768px){
 :where(.page-coaching) main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 38px)}
 :where(.page-coaching) main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 38px)}
}
@media (max-width:767px){
 :where(.page-coaching) main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 30px)}
 :where(.page-coaching) main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 30px)}
}

@media (min-width:768px){
 .page-contact main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 14px)}
 .page-contact main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 14px);padding-bottom:calc(var(--section-y) - 14px)}
 .page-contact main > section.section:nth-of-type(3){padding-top:calc(var(--section-y) - 14px)}
}
@media (max-width:767px){
 .page-contact main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 10px)}
 .page-contact main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 10px);padding-bottom:calc(var(--section-y) - 10px)}
 .page-contact main > section.section:nth-of-type(3){padding-top:calc(var(--section-y) - 10px)}
}

@media (min-width:768px){
 .page-not-found main > section.hero{padding-bottom:calc(var(--section-y) - 64px)}
}
@media (max-width:767px){
 .page-not-found main > section.hero{padding-bottom:calc(var(--section-y) - 40px)}
}

@media (min-width:901px){
 .page-about main > section.section:nth-of-type(2) > .wrap.split{max-width:1140px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:80px}
}

.nowrap{white-space:nowrap}

.page-speaking main > section.hero .lede{font-size:clamp(1.375rem,1rem + 1.2vw,1.75rem);line-height:1.45;max-width:none;}.page-speaking main > section.hero .hero-row{margin-top:0} @media (max-width:900px){.page-speaking main > section.hero .hero-row h1{margin-bottom:32px}}@media (min-width:901px){.page-speaking main > section.hero .hero-row{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);align-items:center} .page-speaking main > section.hero .hero-row h1{font-size:clamp(2.75rem,1.6rem + 2.6vw,4rem)}}.page-speaking main > section.hero .hero-row .btn-row{justify-content:center}

.page-speaking main > section.section:nth-of-type(2) .prose p{text-align:center;margin-inline:auto}.page-speaking main > section.section:nth-of-type(2) > .section-head{text-align:center}
.page-speaking main > section.section:nth-of-type(2) > .section-head h2{margin:0 auto 2.5rem;max-width:none;font-size:clamp(1.75rem,1.25rem + 2vw,2.875rem)}
.page-speaking main > section.section:nth-of-type(2) > .section-head{margin-bottom:0}@media (min-width:901px){.page-speaking main > section.section:nth-of-type(2) > .wrap.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
@media (max-width:900px){.page-speaking main > section.section:nth-of-type(2) > .section-head h2{margin-bottom:1.5rem}}
@media (min-width:901px){.page-speaking main > section.section:nth-of-type(2) > .section-head h2{max-width:700px}}
@media (min-width:901px){.page-speaking main > section.section:nth-of-type(2) > .wrap.split{max-width:1140px;grid-template-columns:381px 480px;justify-content:center;column-gap:72px}}
.page-speaking main > section.section:nth-of-type(2) .prose p{font-size:17.5px}
@media (min-width:901px){.page-speaking main > section.section:nth-of-type(2) .prose p{font-size:19px}}
.page-speaking main > section.section:nth-of-type(2) figure.photo-slot{padding:14px;background:var(--cream);border:1px solid var(--gold);box-sizing:border-box}
.page-speaking main > section.section:nth-of-type(2) figure.photo-slot img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}

main > .section:not(.hero) > .wrap { max-width: 1140px; }

@media (min-width: 861px) {
  .page-journal .fp-grid { grid-template-columns: 470px minmax(0, 1fr); }
  .page-journal .fp-grid .prose p { font-size: 19px; }
}
@media (min-width: 768px) {
  .page-journal main > section.section:nth-of-type(3) { padding-top: calc(var(--section-y) - 12px + 21.5px); }
}

.page-coaching main > section.section:nth-of-type(2) { display: none; }
.page-coaching main > section.hero .section-label { text-align: center; margin-inline: auto; display: block; }
.page-coaching main > section.hero .rule-gold { margin-inline: auto; }
.page-coaching main > section.hero h1 { text-align: center; margin-inline: auto; max-width: 18ch; }
.page-coaching .mm-line { font-family: 'Ms Madi', 'Prata', serif; font-weight: 400; color: var(--espresso); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.1rem); line-height: 1.05; margin: .35rem auto 0; text-align: center; letter-spacing: 0; text-transform: none; }
.page-coaching main > section.hero .split { margin-top: 1.25rem; align-items: center; }
.page-coaching main > section.hero .split .btn-row { margin-top: 1.5rem; }
.page-coaching main > section.hero .split .prose p { font-size: 19px; }
@media (min-width: 901px) { .page-coaching main > section.hero .split .prose p { font-size: 23px; } }
@media (max-width: 900px) { .page-coaching main > section.hero .split .prose p { font-size: 17.5px; } }
.page-coaching main > section.hero { padding-bottom: 0; }
.page-coaching main > section.hero + .sparkle-band { display: none; }
.page-coaching main > .water { margin-top: -31px; }

@media (max-width: 374px) { .page-coaching main > section.hero .split { padding-inline: 0; } .page-coaching main > section.hero .split .btn-row { justify-content: center; } }

@media (min-width:768px){ .page-home main > .section:has(+ .water + .closer){padding-bottom:calc(var(--section-y) - 72px)} }
@media (max-width:767px){ .page-home main > .section:has(+ .water + .closer){padding-bottom:calc(var(--section-y) - 40px)} }

/* Build 107 part three, her three Amazon review boxes on her journal page (Journal 4) and her homepage.
   File of record, written 2026-10-09. Place after site.css and after every earlier file of record.
   Her rulings: "SC1: Yes, those sections"; layout typed "todays look. but is there any design skill or ability to make them
   more like animated or 3d type of boxes or add some sort of creative difference to make them stand out more on the page ?";
   "RH1: Journal page and homepage"; "A1: Float and lift".
   Block 1 is her Build 112 picks for her reviews, "RV2" and "AL1" (Brand Kit, Y2 note), drawn under A1 when she chose it.
   If the Y2 website build places RV2 and AL1 first, block 1 is already live and can be left out.
   The box top edge stays var(--gold); it becomes Y2 #F7C925 when the Y2 website build changes --gold.
   Nothing here is scroll-triggered. The hover moves a box once and it then stays still; reduced motion turns it off.
   Measured on 2026-10-09: every gap between sections on Journal and Home is unchanged at 1503x766, 1440x900, 390 and 320. */

/* .page-journal: block 1, RV2 and AL1 */
.page-journal .reviews .stars .star{fill:#FFFDF9}
.page-journal .reviews .verified{display:block;width:fit-content;margin:.45rem 0 0;background:#FFFDF9}
/* .page-journal: block 2, A1 hover movement kept apart from her reveal */
.page-journal .reviews .review{transition:opacity var(--reveal-time,.85s) cubic-bezier(.22,.61,.36,1),transform var(--reveal-time,.85s) cubic-bezier(.22,.61,.36,1),translate .4s cubic-bezier(.22,1,.36,1),rotate .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
 transition-delay:calc(var(--order,0) * var(--reveal-step,110ms)),calc(var(--order,0) * var(--reveal-step,110ms)),0s,0s,0s}
@media (prefers-reduced-motion: reduce){ .page-journal .reviews .review{transition:none} }
/* .page-journal: block 3, A1 float and lift */
.page-journal .reviews .review{box-shadow:0 1px 2px rgba(36,31,26,.06),0 12px 28px rgba(36,31,26,.10);border-top-width:4px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
 .page-journal .reviews .review:hover{translate:0 -8px;box-shadow:0 2px 4px rgba(36,31,26,.08),0 24px 44px rgba(36,31,26,.16);border-top-width:6px}
}

/* .page-home: block 1, RV2 and AL1 */
.page-home .reviews .stars .star{fill:#FFFDF9}
.page-home .reviews .verified{display:block;width:fit-content;margin:.45rem 0 0;background:#FFFDF9}
/* .page-home: block 2, A1 hover movement kept apart from her reveal */
.page-home .reviews .review{transition:opacity var(--reveal-time,.85s) cubic-bezier(.22,.61,.36,1),transform var(--reveal-time,.85s) cubic-bezier(.22,.61,.36,1),translate .4s cubic-bezier(.22,1,.36,1),rotate .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
 transition-delay:calc(var(--order,0) * var(--reveal-step,110ms)),calc(var(--order,0) * var(--reveal-step,110ms)),0s,0s,0s}
@media (prefers-reduced-motion: reduce){ .page-home .reviews .review{transition:none} }
/* .page-home: block 3, A1 float and lift */
.page-home .reviews .review{box-shadow:0 1px 2px rgba(36,31,26,.06),0 12px 28px rgba(36,31,26,.10);border-top-width:4px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
 .page-home .reviews .review:hover{translate:0 -8px;box-shadow:0 2px 4px rgba(36,31,26,.08),0 24px 44px rgba(36,31,26,.16);border-top-width:6px}
}

/* Build 107 part three, her About page: About 1 to About 2 closer (G1) and The Mantra wider (M1). File of record, 2026-10-09.
   Place after site.css and after every earlier file of record (it overrides Build 89 part two's "AB2A" rules for About 1 and 2).
   Her rulings: "G1: 128 (phone 80)"; "T0: Keep today" (About 1 unchanged); "M1: 960 wide, 38 px".
   Before / after, measured 2026-10-09 on a copy of her live site:
   About 1 to 2: 160 / 128 at 1503x766 and 1440x900; 96 / 80 at 390, 375 and 320.
   The Mantra words: max-width 31ch (820 px, 6 lines) / 960 px (5 lines) at 900 px wide and up; phones unchanged.
   The Mantra least height: clamp(30rem, 62vh, 40rem) / that minus 52 px at 900 px wide and up, so "AB3A" and "AB4A" hold
   (163.1 / 187.1 at 1503x766; 159.7 / 183.8 at 1440x900; without it the laptop gaps read 185.7 / 209.8). */
@media (min-width:768px){ .page-about main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 28px)} .page-about main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 28px)} }@media (max-width:767px){ .page-about main > section.section:nth-of-type(1){padding-bottom:calc(var(--section-y) - 20px)} .page-about main > section.section:nth-of-type(2){padding-top:calc(var(--section-y) - 20px)} }
@media (min-width:900px){ .page-about main > section.section:nth-of-type(3) .signature{max-width:960px} .page-about main > section.section:nth-of-type(3){min-height:calc(clamp(30rem, 62vh, 40rem) - 52px)} }

/* Build 107 part three, her closing section on every page (Home, Journal, About, Speaking, Coaching, Contact). File of record, 2026-10-09.
   Her rulings: "F1: Smaller, 72 px", "FS2: Every page", confirmed "FC1: Yes, every page".
   Before / after at 900 px wide and up: closing headline 80 px / 72 px; least height clamp(30rem, 62vh, 40rem) / that minus 16.6 px,
   so "H8A" and "H7B" hold on all six pages (238.3 / 112 at 1503x766, 264.5 / 144.5 at 1440x900, Speaking 238.3 / 112 and 232 / 112).
   Phones unchanged. Scoped to body so it reaches every page; it carries no page hook on purpose. */
@media (min-width:900px){ body main > section.closer h2{font-size:72px} body main > section.closer{min-height:calc(clamp(30rem, 62vh, 40rem) - 16.6px)} }

/* Build 107 part three, her closing section to her footer on every page ("H7B" made closer). File of record, 2026-10-09.
   Place after approved-closer-F1-every-page.css; it carries F1's 16.6 px least height trim inside its own rule at 900 px and up.
   Her rulings: "K3: 72 laptop, 40 yours" and "KS2: Every page".
   Before / after, last words or button of the closing section to the top of the footer, measured 2026-10-09 with every pick in place:
   Home, Journal, About, Coaching, Contact: 144.5 / 72 at 1440x900; 112 / 39.5 at 1503x766; 126 / 78 at 390; 96 / 48 at 375; 86.5 / 38.5 at 320.
   Speaking (ends with her booking form): 112 / 39.5 at 1440x900 and 1503x766; 61 / 13 at 390 and 320. She chose every page with Speaking included.
   Mechanism: the closing section's bottom margin goes to 0 (from 32 px, 13 px on phones), then its bottom padding and its least height
   come off by the same amount, so its words stay put and "H8A" above it holds on every page. The Not found page has no closing section. */
@media (min-width:900px){ body main > section.closer{margin-bottom:0px;padding-bottom:calc(var(--section-y) - 40.5px);min-height:calc(clamp(30rem, 62vh, 40rem) - 57.1px)} }@media (min-width:768px) and (max-width:899px){ body main > section.closer{margin-bottom:0px;padding-bottom:calc(var(--section-y) - 40.5px);min-height:calc(clamp(30rem, 62vh, 40rem) - 40.5px)} }@media (max-width:767px){ body main > section.closer{margin-bottom:0px;padding-bottom:calc(var(--section-y) - 35px);min-height:calc(clamp(30rem, 62vh, 40rem) - 35px)} }

/* ==========================================================================
   BUILD 110, HER OUTLINE BUTTONS, HER ONE BULK BUTTON, HER LABELS AND HER
   SIDE TAB ON SMALL PHONES. CODE OF RECORD, 2026-10-09.
   Chosen by Lindsey on question cards in the Build 110 design sitting:
   "CB" typed (one button), "YR1", "BW2", "BG2: Arrow in a cream circle",
   "GP1: 42 px is fine", "OB1: Pink pill inside out", "LB1: Match the others",
   "MC2: THE JOURNAL, capitals", "ST1: Keep capitals", "AS2: Open the form again",
   "NP1: Yes, both off" (TB1 and its follow-ups were replaced by NP1).
   Layer AFTER everything in assets/css/site.css (after the Build 88 pill rules
   and the .dl-tab rules). Colours are her tokens only; --gold becomes Y2 when
   the Y2 build places her new yellow (her "YS1"), with no change here.
   The HTML and script changes that go with this file are listed in
   Projects/Website/Button-Design-Decisions-Record-2026-10-09-Build-110.md.
   ========================================================================== */

/* 1. Her one bulk button: the seaglass .shop-btn on /journal, now reading
      "Send a Bulk Inquiry" ("BW2"), big, with its arrow in a cream circle
      ("BG2"). No shimmer of any kind (today's shop-shimmer loop is retired). */
.shop-proof { margin-top: .5rem; }                      /* was 1.5rem: tag closer to the photos ("YR1") */
.shop-tag { padding: 7px 20px; }                        /* was 10px 26px: tag a little smaller */
.shop-tag .prints-pin { width: 10px; height: 13px; }    /* was 12 x 16 */
.shop-tag-words { font-size: 14px; margin-top: 4px; }   /* was 16px, 6px */
.shop-btn::after { display: none; animation: none; }    /* retires the looping shop-shimmer */
.shop-btn {
  text-transform: none; letter-spacing: .03em; font-weight: 600; white-space: nowrap;
  border-radius: 999px; font-size: 1.125rem; color: var(--espresso);
  padding: .55rem .55rem .55rem 2.4rem; gap: 1.1rem; margin-top: 22px;
  background: linear-gradient(var(--cream), var(--cream)) left center / 0% 100% no-repeat, var(--seaglass);
  border: 2px solid var(--seaglass);
  box-shadow: inset 0 0 0 5px var(--cream), inset 0 0 0 6px var(--gold);
  transition: background-size .5s cubic-bezier(.6, 0, .2, 1), box-shadow .3s ease .25s;
}
.shop-btn:hover, .shop-btn:focus-visible {
  background-size: 100% 100%, auto;
  box-shadow: inset 0 0 0 5px var(--seaglass), inset 0 0 0 6px var(--gold);
}
.shop-btn .shop-arrow {
  box-sizing: content-box; width: 18px; height: 12px; padding: 19px 16px; border-radius: 999px;
  background: var(--cream); box-shadow: 0 0 0 1px var(--gold);
  transition: transform .25s ease, background-color .3s ease;
}
.shop-btn:hover .shop-arrow, .shop-btn:focus-visible .shop-arrow { background: var(--seaglass); transform: translateX(3px); }
@media (max-width: 600px) {
  .shop-btn { font-size: 1.0625rem; padding: .5rem .5rem .5rem 1.8rem; gap: .9rem; }
  .shop-btn .shop-arrow { width: 16px; padding: 17px 14px; }
}
@media (max-width: 359px) {
  .shop-btn { font-size: 1rem; padding: .45rem .45rem .45rem 1.35rem; gap: .65rem; }
  .shop-btn .shop-arrow { width: 14px; padding: 15px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-btn, .shop-btn .shop-arrow { transition: none; }
  .shop-btn:hover .shop-arrow, .shop-btn:focus-visible .shop-arrow { transform: none; }
}

/* 2. Her three outline buttons (.btn-secondary: "Read My Story" on Home,
      "Explore Speaking and Workshops" on About, "Get in Touch" on the not
      found page): her pink pill turned inside out ("OB1"). */
.btn-secondary {
  text-transform: none; letter-spacing: .03em; font-size: .9375rem; font-weight: 600;
  padding: .95rem 2.25rem; border-radius: 999px; white-space: nowrap; color: var(--espresso);
  background: linear-gradient(var(--shell), var(--shell)) left center / 0% 100% no-repeat, var(--cream);
  border: 2px solid var(--shell);
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 5px var(--gold);
  transition: background-size .5s cubic-bezier(.6, 0, .2, 1), box-shadow .3s ease .25s;
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: linear-gradient(var(--shell), var(--shell)) left center / 100% 100% no-repeat, var(--cream);
  color: var(--espresso); border-color: var(--shell);
  box-shadow: inset 0 0 0 4px var(--shell), inset 0 0 0 5px var(--gold);
}
@media (max-width: 400px) { .btn-secondary { font-size: .875rem; padding: .9rem 1.4rem; } }
@media (max-width: 359px) { .btn-secondary { font-size: .8125rem; letter-spacing: .02em; padding: .85rem 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .btn-secondary, .btn-secondary:hover, .btn-secondary:focus-visible { transition: none; } }

/* 3. Her side tab: no CSS change. Her "NP1" takes the free download pop-up and
      its side tab off the journal page entirely (an HTML change, listed in the
      decisions record), and the only spots where the tab touched anything were
      on that page. Its words keep their capitals ("ST1"). */

/* Her menu bar "THE JOURNAL" keeps its capitals ("MC2"): no rule needed. */

/* Build 111, 2026-10-09. Her "Find me here too" section on her Contact page, look G3 (two tiers) with IC2 (her homepage door pictures for the Collective and the course). Her picks: "G3: Two tiers", "IC2: Homepage door pictures". Scoped to body.page-contact. Replaces the ul.proof.elsewhere list in the third section of contact.html with record/approved-find-me-here-too-G3-IC2-section.html. Y2 #F7C925 as --sun. Not live: a build places it. */
body.page-contact .fm { --sun:var(--gold); --pinkchip: rgba(242,179,164,.38); }
body.page-contact .fm-centred { text-align:center; }
body.page-contact .fm-centred .section-label, body.page-contact .fm-centred h2 { margin-left:auto; margin-right:auto; }
body.page-contact .fm-ico { width:22px; height:22px; flex:0 0 22px; color: var(--espresso); }
body.page-contact .fm-lens { width:30px; height:30px; display:block; }
body.page-contact .fm-door { display:block; background-size: cover; background-position: 50% 62%; }
body.page-contact .fm-for { display:block; font-family: var(--body); font-size:.875rem; line-height:1.5; color: rgba(36,31,26,.78); }
@media (prefers-reduced-motion: reduce) { body.page-contact .fm * { transition:none !important; transform:none !important; } }
body.page-contact .fm-chips { list-style:none; margin: clamp(2.5rem,5vw,3.25rem) auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap: 1.5rem 2rem; }
body.page-contact .fm-chipcell { display:flex; flex-direction:column; align-items:center; }
body.page-contact .fm-chip { display:inline-flex; align-items:center; gap:.6rem; padding:.65rem 1.3rem .65rem 1rem; border-radius:999px; background: var(--pinkchip); border:1px solid rgba(242,179,164,.9); color: var(--espresso); text-decoration:none; font-family: var(--body); font-weight:600; font-size:.9375rem; transition: background-color .3s ease, transform .3s ease; }
body.page-contact .fm-chip:hover, body.page-contact .fm-chip:focus-visible { background: rgba(242,179,164,.62); transform: translateY(-2px); }
body.page-contact .fm-chipcell .fm-for { margin-top:.55rem; }
body.page-contact .fm-tierline { display:flex; justify-content:center; margin: 2.25rem 0; }
body.page-contact .fm-tierline span { width: 120px; height: 2px; background: var(--sun); position:relative; }
body.page-contact .fm-tierline span::after { content:''; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; background: var(--sun); transform: translate(-50%,-50%); box-shadow: 0 0 0 5px var(--cream); }
body.page-contact .fm-offers { list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content:center; gap: 1.5rem; }
body.page-contact .fm-offer { display:flex; align-items:center; gap:1.25rem; padding: 1.1rem 1.75rem 1.1rem 1.1rem; border-radius: 28px; background: var(--cream); border:1.5px solid rgba(242,179,164,.95); box-shadow: 0 16px 32px -22px rgba(36,31,26,.45); text-decoration:none; color: var(--espresso); text-align:left; height:100%; transition: transform .3s ease, background-color .3s ease; }
body.page-contact .fm-offer:hover, body.page-contact .fm-offer:focus-visible { transform: translateY(-3px); background: rgba(242,179,164,.22); }
body.page-contact .fm-medal { flex:0 0 84px; width:84px; height:84px; border-radius:50%; background:linear-gradient(rgba(242,179,164,.25),rgba(242,179,164,.25)),var(--cream); box-shadow: 0 0 0 4px var(--cream), 0 0 0 5.5px var(--sun); display:grid; place-items:center; overflow:hidden; }
body.page-contact .fm-medal .fm-lens { width:44px; height:44px; }
body.page-contact .fm-medal .fm-door { width:100%; height:100%; }
body.page-contact .fm-otxt { display:flex; flex-direction:column; min-width:0; }
body.page-contact .fm-oname { font-family: var(--display); font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height:1.3; }
body.page-contact .fm-offers .fm-for { margin-top:.3rem; }
@media (max-width: 760px) { body.page-contact .fm-offers { grid-template-columns: 1fr; } body.page-contact .fm-medal { flex-basis:68px; width:68px; height:68px; } body.page-contact .fm-offer { padding-right:1.1rem; } }
@media (max-width: 600px) { body.page-contact .fm-chips { gap:1.4rem; } }

/* Build 111, 2026-10-09. Her footer on EVERY page (the footer is the same on every page, so this file is site-wide by design, not page-scoped).
   1. The email band "FL1", "EL1", "JN1" as Build 73 part three drew it (values carried from its make-footer.py), still subject to her ruling 15: sizing and space settled with her by the placing build.
   2. After signup: her "AF4" (blend card). Her line "YL1" word for word: "You're on the list, [first name]. I'm so glad you're here!" The card's container takes the form's measured height (min-height set from the form at the moment of swap) so nothing below moves: 266.8 px laptop, 457.7 px phone, before and after, measured.
   3. Ground: her "FB1" whole footer and FG2, the sunrise sky of her form cards (Exception 5's colours). Backup if she dislikes it on her live site: FG3, kept in footer-ground-FG3-backup.css. A new website-only Brand Kit exception is owed to the control lane.
   4. Her "LC1": the legal line from ink-55 to ink-70 (3.64 to 5.73 to 1 on cream; 3.34 to 5.07 to 1 at FG2's deepest).
   Buttons are drawn with today's pill button; Build 110 settles buttons. Y2 #F7C925 as --sun. Not live. */

/* 1. Band */
/* Build 73 part three's footer band CSS (make-footer.py), as drawn; legal line rules left out because her live footer has its own. */
.fi-head{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;margin:0 0 .5rem}
.fi-label{font-family:var(--body);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin:0 0 .75rem}
.fi-lead{font-weight:600}
.fi-line{font-family:var(--body);font-size:1rem;line-height:1.6;margin:0;max-width:30ch}
.fi-warm{font-family:var(--display);font-size:clamp(1.125rem,1rem + .55vw,1.4375rem);line-height:1.35;max-width:24ch}
.fi-form{margin:0}
.fi-boxes{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fi-field{display:flex;flex-direction:column;gap:.35rem}
.fi-field span{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.fi-field input{font:inherit;font-size:1rem;color:var(--espresso);background:var(--cream);border:1.5px solid rgba(36,31,26,.62);border-radius:0;height:48px;padding:0 .875rem}
.fi-field input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fi-btn{margin-top:1rem;width:100%}
.fi-small{font-size:.75rem;line-height:1.5;color:rgba(36,31,26,.78);margin:.75rem 0 0;max-width:46ch}
.fi-priv{margin-top:.35rem}
.fi-priv a{color:var(--espresso);text-decoration:underline;text-decoration-color:rgba(36,31,26,.35);display:inline-block;padding:4px 0}
.fi-priv a:hover{text-decoration-color:var(--gold)}
.fi-fl1{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-bottom:clamp(2rem,4vw,2.75rem);margin-bottom:clamp(2rem,4vw,2.75rem);border-bottom:1px solid var(--ink-08)}
@media (max-width:820px){.fi-fl1{grid-template-columns:1fr}}
.fi-fl2{margin-top:1.75rem;max-width:30rem}
.fi-fl2 .fi-words{margin-bottom:1rem}
@media (max-width:420px){.fi-boxes{grid-template-columns:1fr}}
/* 2. After signup, AF4 */
.fi-done{display:flex;align-items:center;font-family:var(--body);color:var(--espresso);--sun:var(--gold)}
.fi-done p{margin:0}
/* AF4: a blend of AF1 and AF3, shaped like the two larger cards in her new Find me here too (G3). */
.fi-a4{justify-content:center}
.fi-a4-card{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 2rem 1.25rem 1.25rem;border-radius:28px;background:var(--cream);border:1.5px solid rgba(242,179,164,.95);box-shadow:0 16px 32px -22px rgba(36,31,26,.45);max-width:100%}
.fi-a4-medal{flex:0 0 84px;width:84px;height:84px;border-radius:50%;background:linear-gradient(rgba(242,179,164,.25),rgba(242,179,164,.25)),var(--cream);box-shadow:0 0 0 4px var(--cream),0 0 0 5.5px var(--sun);display:grid;place-items:center}
.fi-a4-medal img{width:44px;height:44px}
.fi-a4-txt{display:flex;flex-direction:column;text-align:left}
.fi-a4-one{font-family:var(--display);font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem);line-height:1.25}
.fi-a4-two{font-size:1rem;line-height:1.55;margin-top:.2rem}
@media (max-width:420px){.fi-a4-card{flex-direction:column;text-align:center;padding:1.5rem 1.25rem}.fi-a4-txt{text-align:center}.fi-a4-medal{flex-basis:72px;width:72px;height:72px}}
/* 3. Ground, FG2 */
.site-footer{background:linear-gradient(to bottom, #F5D2C6 0%, #F8E2D7 55%, #F6E3CC 100%);}
/* 4. Legal line, LC1 */
.footer-legal{color:var(--ink-70)}

/* Build 108 part three, 2026-10-11, her small fix by eye on her staged footer, under
   her ruling 15 of Build 73 part three ("the sizing and space width will need to be
   adjusted FYI when actualyl designing it and adding to my website"). Her picks
   "BS1: Settle it now by eye", "SF2 and SF3", typed "join my email list needs to be
   like 16 px", confirmed "LS1: Yes, that's it". It changes Build 111's drawn band
   sizes: the label from .75rem to 1rem, the line from 1rem to 1.0625rem, the space
   above the band (the footer's top padding) from clamp(2.75rem, 5vw, 4rem) and the
   space below it from clamp(2rem, 4vw, 2.75rem), each by about a third. */
.fi-label{font-size:1rem}
.fi-line{font-size:1.0625rem}
.site-footer{padding-top:clamp(1.85rem,3.35vw,2.65rem)}
.fi-fl1{padding-bottom:clamp(1.35rem,2.7vw,1.85rem);margin-bottom:clamp(1.35rem,2.7vw,1.85rem)}

/* Build 111, 2026-10-09. The line a visitor sees when one of her five forms does not send (her "W4: Light").
   Its own style, never inside a box label (a line placed inside a label takes on the label's capitals and letter spacing).
   Placed directly under each form's submit button, with role="alert" (or aria-live="assertive") so a screen reader announces it,
   and focus moved to it. Typed values stay in the boxes. Not live. */
.send-fail{display:block;margin:.75rem 0 0;font-family:var(--body);font-size:.9375rem;font-weight:500;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--espresso)}
.send-fail a{color:var(--espresso);text-decoration:underline;text-underline-offset:.22em}
.send-fail:focus{outline:2px solid var(--gold);outline-offset:3px}

/* Build 108 part three, 2026-10-11, her small fix by eye on her staged journal page,
   "NY1: Yes, fix it here", from her words "i want the blue style like that but
   keeping the arrow design and blue color, just no yellow". It changes Build 110's
   "BG2" look: the gold thread inside the cream ring and the gold ring around the
   arrow circle come out, so the seaglass pill is built like her pink pill with no
   yellow (2px seaglass edge, 4px cream ring, seaglass heart). */
.shop-btn { box-shadow: inset 0 0 0 4px var(--cream); }
.shop-btn:hover, .shop-btn:focus-visible { box-shadow: inset 0 0 0 4px var(--seaglass); }
.shop-btn .shop-arrow { box-shadow: none; }

/* Build 108 part three, 2026-10-10, mechanical only: the failed send line and the
   band's after signup slot obey the hidden attribute, which .send-fail's own
   display:block would otherwise override. */
.send-fail[hidden]{display:none}

/* Build 123, 2026-10-12. Her small fix by eye on her staged review boxes, "QF1: Fix it here, by eye",
   from her words "the quotation marks white needs to match the stars and the verified purchase white color",
   confirmed "QW1: Yes, that's it". It changes the cream of her "P5: Reviews with a quote mark" (Build 60)
   to paper white #FFFDF9, the white of block 1, on the review boxes her "RR1" names. */
.page-journal .reviews .review-quote, .page-home .reviews .review-quote{color:#FFFDF9}