/* Inner pages share the homepage theme, with a quiet navigation above the content. */
.inner-page { --accent-soft: #686d4515; --ring-dark: #c6c9b8; --ink-mid: #464b3f; --surface: #fff; }
.inner-page #navbar-placeholder { position: relative; min-height: 84px; }
.inner-page .navbar { background: var(--bg); padding-block: 25px; }
.inner-page .navbar-brand img { filter: none; }
.inner-page .nav-link { color: var(--ink); }
.inner-page .nav-link:hover, .inner-page .nav-link[aria-current="page"] { background: #e4e6d7; color: var(--ink); }
.inner-page .mobile-menu-toggle span { background: var(--ink); }
.inner-page .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.inner-page .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.inner-page h1 { font-size: clamp(3rem, 5.8vw, 5.8rem); line-height: 1.02; letter-spacing: -.06em; }
.inner-page h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.inner-page h3 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); }
.inner-page main { min-height: 60vh; }
.inner-page p a:not(.button), .aside-note a { text-decoration: underline; text-underline-offset: 4px; }
.inner-page .page-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8%; align-items: center; padding-block: 75px 105px; }
.page-hero p { max-width: 540px; color: var(--muted); margin-top: 26px; font-size: 1.02rem; }
.page-hero :is(.button,.text-link) { margin-top: 28px; }
.page-photo { overflow: hidden; border-radius: 20px; position: relative; background: #d9dbcb; isolation: isolate; }
.page-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-photo[data-drift] img { height: 120%; position: absolute; inset: -10% 0 auto; transform: translate3d(0,var(--drift,0px),0); }
.hero-photo-pair { min-height: 430px; position: relative; }
.hero-photo-pair .page-photo { position: absolute; width: 65%; height: 330px; border: 10px solid #fff; box-shadow: 0 6px 20px #20221d0a; }
.pair-first { top: 0; left: 0; transform: rotate(-6deg); }
.pair-second { right: 0; top: 120px; transform: rotate(7deg); }
.photo-caption { font-size: .73rem; color: var(--muted); display: block; text-align: center; letter-spacing: .015em; }
.hero-photo-pair > .photo-caption { position: absolute; left: 8px; bottom: 8px; transform: rotate(-6deg); max-width: 130px; }
.compact-hero { padding-bottom: 65px !important; }
.hero-note { width: 310px; justify-self: center; rotate: 5deg; background: #fff; padding: 12px 12px 20px; border-radius: 24px; box-shadow: 0 6px 16px #20221d08; }
.note-photo { height: 200px; border-radius: 16px; }
.hero-note .photo-caption { margin-top: 14px; }
.page-end { text-align: center; padding-block: 100px; }
.page-end h2 { margin-bottom: 20px; }
.page-end p { color: var(--muted); max-width: 520px; margin: 0 auto 28px; }

/* Reveal is progressive enhancement: content stays visible if JavaScript fails. */
[data-reveal].will-reveal { opacity: 0; transform: translateY(26px) rotate(-1deg); }
[data-reveal].will-reveal.is-visible { opacity: 1; transform: none; transition: opacity .65s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay,0ms); }

/* The calendar keeps its functional grid and mobile agenda. */
.calendar-section { padding-bottom: 20px; }
.calendar-note { display: flex; align-items: center; gap: 12px; padding: 18px 4px; font-size: .8rem; color: var(--muted); }
.calendar-note p { flex: 1; }
.calendar-note > a { white-space: nowrap; color: var(--ink); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #7a8454; flex-shrink: 0; }
.calendar-surface { border: 1px solid var(--ring); border-radius: 26px; background: #fff; overflow: clip; }
.inner-page .toolbar { position: relative; background: #fff; padding: 26px; border-bottom: 1px solid var(--ring); gap: 20px; }
.inner-page .title { gap: 8px; }
.inner-page .title h2 { font-size: 1.45rem; letter-spacing: -.035em; margin-left: 16px; }
.inner-page .btn { min-width: 40px; min-height: 40px; border-radius: 99px; background: #f2f3ec; border-color: transparent; font-size: .85rem; }
.inner-page .btn:hover:not(:disabled) { background: var(--ink); color: #fff; transform: rotate(-3deg); }
.inner-page .controls { gap: 12px; }
.filter-label { font-size: .75rem; color: var(--muted); }
.inner-page .filterSelect { min-height: 42px; border-radius: 99px; padding-inline: 16px 30px; }
.inner-page .calendar-wrapper { padding: 20px; }
.inner-page .calendar-grid { box-shadow: none; border-radius: 16px; }
.inner-page .calendar-day { min-height: 136px; padding: 10px 7px; }
.inner-page .calendar-day.today { background: #eef0e3; box-shadow: inset 0 0 0 1px #a6af88; }
.inner-page .calendar-day.today .day-number { background: #687344; box-shadow: none; }
.inner-page .day-number { font-family: inherit; }
.inner-page .day-header-cell { background: #f5f5ef; font-weight: 500; }
.inner-page .event-pill { padding: 7px; border-radius: 10px; box-shadow: none; text-align: left; width: 100%; }
.inner-page .event-pill:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 5px 10px #20221d0c; }
.inner-page .event-pill-time, .inner-page .event-list-time, .inner-page .event-list-date, .inner-page #modal-time { font-family: inherit; }
.inner-page .event-pill-type { font-size: .55rem; letter-spacing: .035em; }
.inner-page .event-list-item { width: 100%; text-align: left; border-radius: 20px; margin-bottom: 16px; padding: 22px; }
.inner-page .event-list-title { font-weight: 500; font-size: 1.25rem; }
.inner-page .tag { font-size: .68rem; }
.calendar-status { padding: 16px 24px 0; color: var(--muted); font-size: .85rem; }
.calendar-status:empty { display: none; }
.calendar-footnote { text-align: center; margin-top: 24px; color: var(--muted); font-size: .8rem; }
.inner-page .modal { z-index: 220; }
.inner-page .modal-content { max-height: calc(100svh - 48px); overflow-y: auto; border-radius: 26px; padding: 36px; }
.inner-page .modal-content h2 { font-size: 2rem; font-weight: 500; letter-spacing: -.045em; }
.inner-page .modal-content .eyebrow { margin-bottom: 12px; }
.inner-page .modal-cta, .inner-page .add-to-cal-btn { border-radius: 99px; font-weight: 500; font-size: .8rem; padding: 12px 18px; }
.inner-page .modal-cta { background: var(--ink); }

/* Route filters and maps stay still; the photographs and cards carry the movement. */
.routes-section { padding-top: 30px; }
.section-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 32px; }
.section-toolbar .eyebrow { margin-bottom: 14px; }
#route-count { font-size: .85rem; color: var(--muted); }
.route-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; align-items: start; position: relative; z-index: 5; }
.route-filter { position: relative; }
.route-filter summary { padding: 11px 20px; border: 1px solid #cdd0bd; border-radius: 99px; display: flex; align-items: center; justify-content: space-between; gap: 30px; cursor: pointer; font-size: .85rem; list-style: none; }
.route-filter summary::-webkit-details-marker { display: none; }
.route-filter[open] summary { background: #e4e8d6; }
.route-filter[open] summary > span { transform: rotate(45deg); }
.filter-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 240px; background: #fff; padding: 14px; border: 1px solid var(--ring); border-radius: 18px; box-shadow: 0 10px 30px #20221d12; max-height: 320px; overflow-y: auto; }
.filter-menu label { display: flex; gap: 10px; align-items: center; font-size: .8rem; padding: 9px 6px; cursor: pointer; overflow-wrap: anywhere; }
.filter-menu input { accent-color: #667047; flex-shrink: 0; width: 16px; height: 16px; }
#resetRoutes { padding: 12px 15px; font-size: .8rem; }
.route-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; align-items: start; }
.route-card { background: #fff; border: 1px solid var(--ring); border-radius: 26px; padding: 12px; min-width: 0; }
.route-photo { height: 235px; border-radius: 16px; }
.route-card-copy { padding: 26px 18px 20px; }
.route-card .eyebrow { font-size: .65rem; margin-bottom: 14px; }
.route-card h3 { font-size: 1.8rem; margin-bottom: 20px; overflow-wrap: anywhere; }
.route-metrics { display: flex; gap: 26px; margin-bottom: 20px; }
.route-metrics dt { font-size: .68rem; color: var(--muted); }
.route-metrics dd { font-size: 1rem; font-weight: 500; }
.route-description { font-size: .9rem; color: #62665b; line-height: 1.7; white-space: pre-line; }
.route-credit { margin-top: 20px; font-size: .7rem; color: var(--muted); }
.route-map { border-radius: 16px; overflow: hidden; background: #f2f3eb; }
.route-map iframe { display: block; width: 100%; height: 360px; border: 0; }
.route-card .text-link { margin-top: 20px; }
.route-grid > .events-status { grid-column: 1/-1; }

/* A pinned story introduction, with chapters and photographs passing alongside. */
.story-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12%; padding-block: 50px 100px; align-items: start; }
.story-heading { position: sticky; top: calc(50svh - 150px); }
.story-heading p { color: var(--muted); margin-top: 24px; }
.story-chapters { display: grid; gap: 75px; }
.chapter-number { display: block; font-size: .7rem; color: #6c7550; letter-spacing: .05em; margin-bottom: 22px; }
.story-chapter h3 { margin-bottom: 22px; }
.story-chapter p { color: #62665b; font-size: .95rem; margin-bottom: 20px; }
.story-chapter .page-photo { height: 350px; margin-top: 30px; }
.story-chapter .text-link { margin-top: 15px; }
.values-section { background: #e8e8dc; padding-block: 100px; }
.values-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; padding: 10px; }
.value-card { padding: 36px 28px; background: #fff; border-radius: 22px; rotate: var(--tilt); }
.value-card:nth-child(2) { margin-top: 36px; }
.value-card p { color: var(--muted); margin-top: 22px; font-size: .9rem; }

/* Contact: a photo postcard, a calm form, and clear feedback. */
.contact-postcard { padding: 12px 12px 20px; border-radius: 24px; background: #fff; rotate: 4deg; max-width: 380px; justify-self: center; width: 100%; }
.contact-postcard .page-photo { height: 260px; border-radius: 16px; }
.contact-postcard .photo-caption { margin-top: 16px; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12%; align-items: start; padding-top: 10px; }
.contact-aside { padding-top: 20px; }
.contact-link { margin-top: 35px; padding-bottom: 20px; border-bottom: 1px solid var(--ring); }
.contact-link .eyebrow { font-size: .65rem; margin-bottom: 10px; }
.contact-link > a { display: flex; justify-content: space-between; gap: 15px; font-size: 1rem; overflow-wrap: anywhere; }
.contact-link > a:hover { color: #6c7550; }
.aside-note { margin-top: 30px; font-size: .85rem; color: var(--muted); }
.contact-form-card { border-radius: 26px; border: 1px solid var(--ring); padding: 40px; background: #fff; }
.contact-form-card h2 { font-size: 2rem; margin-bottom: 30px; }
.form-field { display: grid; gap: 9px; margin-bottom: 24px; }
.form-field label { font-size: .8rem; }
.form-field :is(input,textarea) { width: 100%; border: 1px solid #d8dacc; border-radius: 12px; background: #fafbf7; padding: 14px 16px; font-family: inherit; font-size: .85rem; color: var(--ink); }
.form-field textarea { resize: vertical; min-height: 160px; }
.form-field :is(input,textarea):focus { outline: 2px solid #a8b185; outline-offset: 2px; background: #fff; }
.form-note { font-size: .72rem; color: var(--muted); margin-top: 20px; }
.form-status { padding: 16px; margin-top: 20px; border: 1px solid #a6b58b; border-radius: 12px; font-size: .85rem; background: #eef3e6; }
.form-status[data-state="error"] { background: #fbefe6; border-color: #caa180; }
.contact-form-card button:disabled { opacity: .6; cursor: wait; }

/* FAQ: a pinned welcome and a column of accessible native accordions. */
.faq-note { padding: 34px; background: #e3e7d4; }
.faq-note .eyebrow { font-size: .65rem; margin-bottom: 14px; }
.faq-note strong { display: block; font-size: 1.8rem; letter-spacing: -.045em; font-weight: 500; line-height: 1.2; }
.faq-note p { margin-top: 15px; font-size: .85rem; }
.faq-note .text-link { font-size: .8rem; margin-top: 24px; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12%; align-items: start; padding-top: 50px; }
.faq-aside { position: sticky; top: calc(50svh - 140px); padding-bottom: 30px; }
.faq-aside p { color: var(--muted); margin-block: 24px; font-size: .95rem; max-width: 290px; }
.faq-list { background: transparent; }
.inner-page .faq-list details:first-child { border-top: 1px solid var(--ring); }
.inner-page .faq-list summary { font-size: 1.08rem; }
.inner-page .faq-list summary::after { background: #e4e7da; transition: rotate .25s; }
.inner-page .faq-list details[open] summary::after { rotate: 180deg; }
.inner-page .faq-list details p { font-size: .9rem; }

@media (max-width:1000px) {
  .inner-page .page-hero { gap: 5%; }
  .hero-photo-pair { min-height: 370px; }
  .hero-photo-pair .page-photo { height: 270px; }
  .pair-second { top: 100px; }
  .hero-note { width: 270px; }
  .story-section, .contact-layout, .faq-layout { gap: 7%; }
  .values-grid { gap: 18px; }
  .value-card { padding: 28px 22px; }
  .contact-form-card { padding: 28px; }
  .inner-page .toolbar { padding: 20px; flex-wrap: wrap; }
  .inner-page .calendar-day { padding: 8px 4px; }
}
@media (max-width:767px) {
  .inner-page #navbar-placeholder { min-height: 78px; }
  .inner-page .page-hero { grid-template-columns: 1fr; gap: 44px; padding-block: 45px 70px; }
  .inner-page h1 { font-size: clamp(2.9rem,10vw,4rem); }
  .page-hero p { font-size: .95rem; margin-top: 22px; }
  .hero-photo-pair { width: min(430px,100%); min-height: 340px; margin-inline: auto; }
  .hero-photo-pair .page-photo { height: 250px; }
  .pair-second { top: 90px; }
  .hero-photo-pair > .photo-caption { bottom: 0; }
  .compact-hero { padding-bottom: 50px !important; }
  .calendar-page .hero-note { display: none; }
  .hero-note { justify-self: end; margin-right: 15px; }
  .page-end { padding-block: 75px; }
  .calendar-note { flex-wrap: wrap; align-items: baseline; font-size: .75rem; }
  .calendar-note p { flex-basis: 80%; }
  .calendar-note > a { padding-left: 19px; }
  .calendar-surface { border-radius: 20px; }
  .inner-page .toolbar { padding: 18px 14px; gap: 16px; }
  .inner-page .title { width: 100%; }
  .inner-page .title h2 { font-size: 1.1rem; margin-left: 5px; }
  .inner-page .controls { justify-content: space-between; width: 100%; }
  .inner-page .calendar-wrapper { display: none; }
  .inner-page .mobile-list-view { padding: 18px 12px 2px; }
  .calendar-footnote { font-size: .75rem; }
  .inner-page .modal-content { padding: 30px 24px; }
  .section-toolbar { display: block; }
  #route-count { margin-top: 16px; }
  .route-grid { grid-template-columns: 1fr; gap: 26px; }
  .route-filters { gap: 8px; }
  .route-filter summary { padding: 10px 15px; gap: 16px; font-size: .78rem; }
  .filter-menu { width: 210px; }
  .route-filter:nth-child(3) .filter-menu { left: auto; right: 0; }
  .route-filter:nth-child(4) .filter-menu { left: 0; right: auto; }
  .route-photo { height: 220px; }
  .route-card-copy { padding: 24px 12px; }
  .route-card h3 { font-size: 1.6rem; }
  .story-section, .contact-layout, .faq-layout { grid-template-columns: 1fr; gap: 40px; padding-top: 15px; }
  .story-heading, .faq-aside { position: relative; top: auto; }
  .story-chapters { gap: 50px; }
  .story-chapter .page-photo { height: 300px; }
  .values-section { padding-block: 70px; }
  .values-grid { grid-template-columns: 1fr; gap: 30px; max-width: 420px; margin-inline: auto; padding-inline: 16px; }
  .value-card:nth-child(2) { margin-top: 0; }
  .contact-postcard { width: min(330px,90%); }
  .contact-postcard .page-photo { height: 220px; }
  .contact-form-card { padding: 28px 22px; }
  .contact-form-card h2 { font-size: 1.8rem; }
  .contact-link > a { font-size: .95rem; }
  .faq-layout { gap: 20px; }
  .faq-aside p { max-width: none; }
  .inner-page .faq-list summary { font-size: 1rem; }
}
@media (prefers-reduced-motion:reduce) {
  [data-reveal].will-reveal { opacity: 1; transform: none; }
  .page-photo[data-drift] img { transform: none; }
  .story-heading, .faq-aside { position: relative; top: auto; }
}
