/* Move & Thrive — demo redesign
   Warm editorial look: cream paper, warm charcoal ink, plum accent,
   hairline rules, photos mounted on white mats. No JavaScript. */

:root {
  --paper: #FAF7F1;
  --paper-alt: #F4EEE3;
  --mat: #FFFFFF;
  --ink: #2E2A26;
  --ink-soft: #4A443B;
  --plum: #674484;
  --plum-deep: #4A3162;
  --hairline: #DBD0BC;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Larger base type for an older target audience — everything sized in rem
   scales up from here. */
html {
  font-size: 112.5%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  background-color: var(--paper);
  color: var(--ink);
}

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

a {
  color: var(--plum);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--plum-deep);
}

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

::selection {
  background: var(--plum);
  color: var(--paper);
}

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
}

.skip-link:focus {
  top: 0.5rem;
  color: var(--paper);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 0.65rem;
}

.header-social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  justify-self: start;
}

.header-social a {
  display: inline-flex;
  color: var(--plum);
  text-decoration: none;
}

.header-social a:hover {
  color: var(--plum-deep);
}

.header-social svg {
  width: 20px;
  height: 20px;
}

.brand {
  justify-self: center;
}

.brand img {
  height: 46px;
  width: auto;
}

.site-header nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  justify-self: end;
}

/* Nav is chrome, not reading content — kept at its compact size (the global
   font bump is for body copy) so the three-part header still fits. */
.site-header nav a {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-header nav a:hover {
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Photo mats */
.frame {
  background: var(--mat);
  border: 1px solid var(--hairline);
  padding: 0.625rem;
  margin: 0;
}

/* Render structure first, then fade photos in once they load (only when JS
   is active) so the layout never flashes empty white boxes. Space is still
   reserved via each image's width/height, so nothing shifts. */
.js .frame {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.js .frame.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .frame {
    transition: none;
  }
}

/* Hero — fills the first screen (minus the sticky header) so that landing
   on the page, or clicking the logo, shows only this top section. */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 4.25rem);
  min-height: calc(100svh - 4.25rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--plum);
  margin-bottom: 1.5rem;
}

h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.hero-sub {
  margin-top: 1.5rem;
  max-width: 34ch;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 0.85rem 1.6rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.button:hover {
  background-color: var(--ink);
  color: var(--paper);
}

.text-link {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Sections — distinguished by toggling the cream tint on/off down the page
   (hero cream, about tint, quote cream, services tint, contact cream, footer
   tint) rather than hairline rules, so they read as separate blocks. */
.section {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

#about {
  background: var(--paper-alt);
}

#services {
  background: var(--paper-alt);
}

#contact {
  background: var(--paper);
}

.section-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--plum);
  margin-bottom: 1rem;
}

section[id] {
  scroll-margin-top: 5.5rem;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.85rem;
}

/* Editorial "voice" — italics are reserved for these intro statements
   (hero subtitle + about intro). One shared treatment. */
.hero-sub,
.lead p {
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* About */
.credentials {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 1rem;
}

.lead {
  margin-top: 1.75rem;
  max-width: none;
}

.lead p {
  margin-bottom: 0.75em;
}

.story-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: 2.5rem;
}

.story-text ul {
  list-style: none;
}

.story-text li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 0.7em;
}

.story-text li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--plum);
}

.story-photo {
  max-width: 400px;
}

@media (min-width: 881px) {
  /* Normal row: long bullets beside the tall portrait on the right */
  .story-row .story-photo {
    justify-self: end;
  }

  /* Reversed row: landscape photo on the left, short bullets get the
     wider text column so neither side leaves awkward blank space */
  .story-row-reverse {
    grid-template-columns: 5fr 7fr;
  }

  .story-row-reverse .story-photo {
    order: -1;
    justify-self: start;
    max-width: 460px;
  }
}

/* Pull quote */
.quote {
  background: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.quote-inner::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--plum);
  margin: 0 auto 2.25rem;
}

.quote-main {
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  line-height: 1.45;
  max-width: 30em;
  margin-inline: auto;
}

.quote-aside {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--plum);
  margin-top: 1.5rem;
}

/* Services */
.services-intro {
  color: var(--ink-soft);
  margin-top: 1rem;
  margin-bottom: 1.75rem;
}

.service-list {
  border-top: 1px solid var(--hairline);
}

.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 2.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.service h3 {
  margin-bottom: 0.5rem;
}

.service-body p {
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.service-body p:last-child {
  margin-bottom: 0;
}

/* Consistent right-hand meta: every service shows a schedule (and a price
   where there is one); upright, never italic. */
.service-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
  font-family: var(--sans);
  max-width: 180px;
}

.meta-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.meta-when {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

/* Substack inbox — a contained white "panel" so it reads as its own thing
   rather than blending into the section. */
.substack {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 1.5rem clamp(1.25rem, 3vw, 1.75rem);
  text-align: left;
  background: var(--mat);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(46, 42, 38, 0.06);
}

.substack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
}

.substack-head h3 {
  margin-bottom: 0;
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.substack-all {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}

.substack-all:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.inbox {
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.inbox-item {
  border-bottom: 1px solid var(--hairline);
}

.inbox-item a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.95rem;
  padding: 0.7rem 0.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 120ms ease;
}

/* Thumbnail sits to the LEFT of the title */
.inbox-thumb {
  display: block;
  width: 84px;
  flex-shrink: 0;
}

.inbox-thumb img {
  width: 84px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: 3px;
}

.inbox-item a:hover {
  background-color: #F4EEE3;
}

.inbox-main {
  min-width: 0;
}

.inbox-title {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.inbox-snippet {
  display: block;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inbox-status {
  padding: 0.85rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Adventures photo ribbon */
.marquee {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
  overflow: hidden;
}

.marquee-row {
  overflow: hidden;
}

.marquee-toggle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
  padding: 0.4rem 0.95rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--plum);
  background: var(--mat);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}

.marquee-toggle:hover {
  color: var(--plum-deep);
  border-color: var(--plum);
}

.marquee-toggle:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
}

.marquee-toggle svg {
  width: 0.95em;
  height: 0.95em;
}

/* Show the pause icon while playing, the play icon while paused. */
.marquee-toggle .marquee-icon-play {
  display: none;
}

.marquee.is-paused .marquee-toggle .marquee-icon-pause {
  display: none;
}

.marquee.is-paused .marquee-toggle .marquee-icon-play {
  display: inline;
}

.marquee-row:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 90s linear infinite;
}

.marquee.is-paused .marquee-track {
  animation-play-state: paused;
}

.marquee-track-reverse {
  animation-direction: reverse;
}

.marquee-item {
  flex: 0 0 auto;
  margin: 0 1rem 0 0;
}

.marquee-item img {
  height: 220px;
  width: auto;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-row {
    overflow-x: auto;
  }

  .marquee-track {
    animation: none;
  }

  /* No auto-motion to pause, so the toggle is redundant; and the duplicated
     second copy of each photo (kept only for the seamless CSS loop) is just
     noise in the manual scroller. */
  .marquee-toggle {
    display: none;
  }

  .marquee-item[aria-hidden="true"] {
    display: none;
  }
}

/* Contact */
.contact {
  text-align: center;
}

.contact h2 {
  margin-bottom: 1.75rem;
}

.contact-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2.75rem;
}

.contact-links li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.contact-links svg {
  width: 19px;
  height: 19px;
  color: var(--plum);
  flex-shrink: 0;
}

.contact-links a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
}

.contact-links a:hover {
  color: var(--plum);
}

/* Footer */
.site-footer {
  background: var(--paper-alt);
  padding-block: 2.5rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.footer-logo {
  width: 132px;
  height: auto;
  margin: 0 auto 1.25rem;
}

.footer-inner p {
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: var(--ink-soft);
}

.site-footer a:hover {
  color: var(--plum);
}

.version {
  margin-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #8A7F6B;
}

/* Responsive */
@media (max-width: 880px) {
  .hero-grid,
  .story-row {
    grid-template-columns: 1fr;
  }

  .hero-photo {
    max-width: 480px;
  }

  .story-photo {
    max-width: 420px;
  }

  .service {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Meta moves to the top of the row and reads left-to-right on mobile */
  .service-meta {
    order: -1;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .brand img {
    height: 38px;
  }

  .site-header nav a {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  .header-social svg {
    width: 18px;
    height: 18px;
  }

  .header-row {
    gap: 0.5rem;
  }

  .frame {
    padding: 0.45rem;
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .substack-head h3 {
    font-size: 1rem;
  }

  .marquee-item img {
    height: 150px;
  }

  .inbox-item a {
    padding: 0.75rem 0.35rem;
    gap: 0.6rem;
  }
}