/* ---------------------------------------------------
   Come to Art Club
   Tokens — carried over from vclarketherapy.com's design
   system (sibling brand, same palette/type) so the two
   sites read as part of one family.
--------------------------------------------------- */
:root {
  --paper: #fdefe7;
  --paper-deep: #f5decf;
  --ink: #24404b;
  --ink-soft: #4a6d7e;
  --moss: #146b7a;
  --moss-deep: #0f4a54;
  --moss-tint: #dceef0;
  --clay: #794c10;
  --clay-deep: #5c3a0c;
  --peach: #fab085;
  --peach-deep: #f99b65;
  --sand-line: #ead9ce;
  --cream-card: #fff8f2;
  --marigold: #edb65f;
  --olive: #8a9463;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1120px;
  --radius: 22px;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --moss: color(display-p3 0.1500 0.4183 0.4859);
      --moss-deep: color(display-p3 0.1031 0.2893 0.3346);
      --clay: color(display-p3 0.4651 0.2973 0.0525);
      --marigold: color(display-p3 0.9175 0.7144 0.3601);
    }
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Reserves the scrollbar's width permanently, so locking scroll for an
     open modal (body.modal-open) doesn't cause a layout jump when the
     scrollbar disappears. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

.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;
}

/* ---------------------------------------------------
   Header — Contact / logo / Join Mailing List, per
   Victoria's sketch
--------------------------------------------------- */
.site-header {
  position: relative;
  background: var(--peach);
  overflow: visible;
}

.header-nav {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 24px;
}

.header-nav-group--left {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Become a Member / Shop only show once there's real room either side of
   the centred logo; below that they stay tucked in the hamburger drawer.
   No breakpoint here — a guessed pixel value kept colliding with the logo
   at some widths and not others, since it depends on actual rendered text
   width, not viewport size alone. script.js measures the real geometry
   (see headerNavFit) and toggles this inline; the default here just
   covers the instant before that JS runs. */
.header-link--wide {
  display: none;
}

.header-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  font-family: inherit;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.header-link:hover {
  background: var(--cream-card);
}

.header-link--cta {
  background: var(--ink);
  color: var(--paper);
  flex-shrink: 0;
}

.header-link--cta:hover {
  background: var(--moss-deep);
}

.link-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Hamburger — opens the nav drawer with every secondary link, so the
   header itself only has to make room for the logo (centred) and the
   Book a Class CTA (primary action) at any width. */
.header-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 4px 0 0 4px;
  border-radius: 999px;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-hamburger:hover {
  background: var(--cream-card);
}

/* While the menu's open, this same icon sits raised over the panel's
   rounded corner — the round hover highlight crowds that corner and
   looks odd floating there, so it's just a colour change instead. */
body.nav-menu-open [data-open-modal="nav-menu"]:hover {
  background: none;
  color: var(--moss-deep);
}

.header-hamburger svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Home icon — only shown (via script.js, based on location.pathname)
   when not already on the homepage, so there's a one-click way back
   without opening the whole menu just to find "Home" in it. */
.header-home-link {
  display: none;
}

.header-logo-link {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: block;
  width: 140px;
  margin-top: 10px;
  filter: drop-shadow(0 6px 10px rgba(36, 64, 75, 0.25));
}

.header-logo-link svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------
   Hero
--------------------------------------------------- */
.hero {
  padding: 90px 24px 56px;
  text-align: center;
}

.hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--clay-deep);
  margin: 0 0 6px;
}

.hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 16px;
}

.hero-lede {
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------------------------------------------------
   Timetable block — the Eventbrite/SociableKit calendar,
   embedded directly on the homepage
--------------------------------------------------- */
.timetable-block {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 56px;
  text-align: center;
}

.timetable-block-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.3rem);
  margin: 0 0 10px;
}

.timetable-block-copy {
  color: var(--ink-soft);
  margin: 0 0 24px;
}

/* ---------------------------------------------------
   Tile grid — membership and shop
--------------------------------------------------- */
.tile-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

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

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 220px;
  padding: 32px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(36, 64, 75, 0.35);
}

.tile--peach { background: var(--peach); border-color: var(--peach-deep); }
.tile--moss { background: var(--moss-tint); border-color: var(--moss); }
.tile--marigold { background: #fbe6c4; border-color: var(--marigold); }
.tile--paper { background: var(--paper-deep); border-color: var(--sand-line); }

.tile-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.tile-icon svg {
  width: 22px;
  height: 22px;
}

.tile-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  margin: 0 0 6px;
}

.tile-copy {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

.tile--peach .tile-copy,
.tile--marigold .tile-copy { color: var(--clay-deep); }

.tile-cue {
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------------------------------------------------
   About / testimonials band
--------------------------------------------------- */
.about-band {
  background: var(--paper-deep);
  border-top: 1px solid var(--sand-line);
  padding: 48px 24px;
}

.about-band-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 22px;
}

.about-note {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 28px 0 0;
}

/* ---------------------------------------------------
   Generic content page (contact, timetable, etc.)
--------------------------------------------------- */
.page {
  flex: 1;
  padding: 88px 24px 56px;
}

.page-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.page-prose {
  text-align: left;
}

.page-back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--moss-deep);
}

.eyebrow-standalone {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--clay-deep);
  margin: 0 0 6px;
}

.page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 0 0 20px;
}

.page-prose p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
  border-radius: 999px;
  padding: 14px 22px;
}

.contact-list a:hover {
  background: var(--paper-deep);
}

.eventbrite-embed {
  margin: 24px 0 0;
  text-align: left;
}

/* .events-list's own display:grid (author CSS) otherwise beats the
   browser's default [hidden]{display:none} (user-agent CSS) regardless
   of the hidden attribute being set — this explicit override is what
   actually makes toggling .hidden in script.js hide the skeleton/list. */
.events-list[hidden] {
  display: none;
}

.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.event-card:has(.event-name:hover),
.event-card:has(.event-cue:hover) {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(36, 64, 75, 0.35);
}

.event-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--paper-deep);
}

.event-location-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255, 248, 242, 0.92);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 4px 10px -4px rgba(36, 64, 75, 0.4);
}

a.event-location-tag:hover {
  background: var(--paper);
}

.event-location-tag--online {
  background: rgba(20, 107, 122, 0.9);
  color: var(--paper);
}

.event-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card-image--placeholder,
.event-card-image--broken {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.55), transparent 55%),
    linear-gradient(135deg, var(--peach), var(--marigold));
}

/* Broken image (404, blocked, etc.) — hide the <img> itself and let the
   gradient fallback above show through the .event-card-media background
   isn't enough on its own since the (invisible) <img> still occupies the
   box; swapping in the placeholder gradient directly is more reliable
   than trying to hide a broken <img> and reveal something behind it. */
img.event-card-image--broken {
  object-fit: initial;
}

.event-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
  flex: 1;
}

.event-when {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay);
}

.event-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.2rem * 1.25 * 2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}

.event-name:hover {
  color: var(--moss-deep);
}

.event-summary {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 2px;
}

.event-cue.btn {
  align-self: flex-end;
  margin-top: auto;
  padding: 10px 20px;
  font-size: 0.85rem;
}

/* Featured — the very next class gets a full-width hero treatment:
   a 16:9 image on top, content stacked below. */
.event-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
}

.event-card--featured .event-card-media {
  flex: 0 0 50%;
  aspect-ratio: auto;
}

.event-card--featured .event-card-body {
  padding: 20px 28px;
}

.event-card--featured .event-name {
  font-size: 1.55rem;
  -webkit-line-clamp: 3;
  min-height: 0;
}

@media (max-width: 640px) {
  .events-list {
    grid-template-columns: 1fr;
  }

  .event-card--featured {
    grid-column: auto;
    flex-direction: column;
  }

  .event-card--featured .event-card-media {
    flex: none;
    aspect-ratio: 16 / 10;
  }
}

/* Loading state — mirrors the real card layout exactly (featured card +
   3 regular ones) so there's no layout jump when real events swap in,
   with a shimmer instead of static grey boxes. Shown by default in the
   markup (script.js hides it once a response — success, empty, or
   error — comes back), so it's there immediately on page load rather
   than after a layout-detecting JS check. */
.events-skeleton .event-card {
  pointer-events: none;
}

.skeleton-block,
.skeleton-line,
.skeleton-pill {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    100deg,
    var(--paper-deep) 30%,
    var(--cream-card) 50%,
    var(--paper-deep) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-block {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.skeleton-line {
  height: 0.9rem;
  margin: 6px 0;
}

.skeleton-line--when {
  width: 45%;
  height: 0.7rem;
}

.skeleton-line--title {
  width: 85%;
  height: 1.2rem;
}

.skeleton-line--title-2 {
  width: 55%;
  height: 1.2rem;
}

.skeleton-line--summary {
  width: 95%;
}

.skeleton-pill {
  width: 96px;
  height: 36px;
  border-radius: 999px;
  align-self: flex-end;
  margin-top: auto;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-block,
  .skeleton-line,
  .skeleton-pill {
    animation: none;
    background: var(--paper-deep);
  }
}

.mailing-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.mailing-form input,
.mailing-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--sand-line);
  background: var(--cream-card);
  resize: vertical;
}

.mailing-form button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s ease;
}

.mailing-form button:hover,
.btn:hover { background: var(--moss-deep); }

.mailing-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.mailing-form-status {
  margin-top: 14px;
  font-weight: 700;
  color: var(--moss-deep);
}

.mailing-form-status--error {
  color: var(--clay-deep);
}

.events-more {
  text-align: center;
  margin: 22px 0 0;
}

.note-callout {
  background: var(--paper-deep);
  border: 1px dashed var(--sand-line);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------
   Maps — Leaflet + Stadia Maps, same provider/style as
   vclarketherapy.com so the two sibling sites match.
--------------------------------------------------- */
.map-embed {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 340px;
  margin: 20px 0 8px;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-marker-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
  border-radius: 8px;
  padding: 3px 8px;
  box-shadow: 0 2px 6px rgba(36, 64, 75, 0.15);
}

.map-marker-label::before {
  border-top-color: var(--sand-line) !important;
}

.map-marker-label--venue {
  font-size: 0.92rem;
  padding: 5px 11px;
  border-color: var(--moss);
  border-width: 1.5px;
}

@media (max-width: 560px) {
  .map-embed {
    height: 260px;
  }
}

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */
.site-footer {
  padding: 32px 24px 48px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.footer-contact-label {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 12px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 8px;
}

.footer-social a,
.footer-social button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cream-card);
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.footer-social a:hover,
.footer-social button:hover {
  background: var(--paper-deep);
}

.footer-social svg { width: 16px; height: 16px; }

.footer-fine {
  font-size: 0.78rem;
  margin: 0 0 16px;
}

.footer-link {
  color: var(--moss-deep);
  text-decoration: underline;
}


/* ---------------------------------------------------
   Mailing list modal
--------------------------------------------------- */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 64, 75, 0.55);
}

.modal-panel {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 36px 32px 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 30px 60px -20px rgba(36, 64, 75, 0.5);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--cream-card);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--paper-deep);
}

.modal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  margin: 0 0 10px;
}

.modal-copy {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

body.modal-open {
  overflow: hidden;
}

/* The nav panel opens close enough under the header to cover the
   hamburger that opened it — this keeps that one single icon visible on
   top of the panel rather than hidden behind it. Targets only the actual
   toggle button, not .header-hamburger generally (the home icon shares
   that class for styling, and sits right where the panel's "Menu" cell
   begins — raising it too made it render stacked on that text). Scoped
   to nav-menu only, not the other two modals (full dark backdrop these
   shouldn't poke through). Same element throughout — no position/size
   change, just stacking order — so it doesn't jump or resize. */
body.nav-menu-open [data-open-modal="nav-menu"] {
  position: relative;
  z-index: 101;
}

/* Nav drawer / mega-menu — a simple dropdown just under the header's
   hamburger icon (which only ever toggles it open/closed). Its own box
   is capped to the same max-width and centred the same way as
   .header-nav, with matching side padding, so its left edge lines up
   with the hamburger regardless of viewport width.

   Menu/Info/Contact and their content below are ONE unified CSS grid
   (.nav-mega-table, 3 columns × 2 rows: header row, content row) rather
   than two separate grids that merely shared a column template — real
   siblings in the same rows means "Menu" automatically aligns with
   "Info"/"Contact" (grid's row-stretch makes them the same height, so
   one border-bottom per cell reads as continuous) with no manual
   measuring. The featured column's white background
   (.nav-mega-bg-primary) is its own grid item spanning both rows behind
   "Menu" and its content, so the header row honours the same colour
   coding as the column beneath it instead of being a uniform strip. */
.nav-drawer {
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6px 24px 24px;
}

.nav-drawer .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(36, 64, 75, 0.15);
}

.nav-drawer-panel {
  max-width: min(720px, 100%);
  padding: 24px 28px 30px;
  border-radius: 20px;
}

.nav-mega-table {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 28px;
}

.nav-mega-bg-primary {
  grid-column: 1;
  /* Header + content rows only — the footer row (the tagline) has its
     own distinct background instead, so it doesn't need this one. */
  grid-row: 1 / 3;
  background: #fff;
  margin: -24px 0 0 -28px;
  padding-top: 24px;
  border-radius: 20px 0 0 0;
  border-right: 1px solid var(--sand-line);
}

/* One continuous rule under the whole header row (Menu/Info/Contact),
   edge to edge — rather than three separate per-cell borders, which
   don't actually connect across the column gaps and read as three
   disconnected fragments instead of one row. */
.nav-mega-header-rule {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  border-bottom: 1px solid var(--sand-line);
}

.nav-mega-head-menu { grid-column: 1; grid-row: 1; }
.nav-mega-head-info { grid-column: 2; grid-row: 1; }
.nav-mega-head-contact { grid-column: 3; grid-row: 1; }
.nav-mega-body-menu { grid-column: 1; grid-row: 2; }
.nav-mega-body-info { grid-column: 2; grid-row: 2; }
.nav-mega-body-contact { grid-column: 3; grid-row: 2; }

.nav-mega-head-menu,
.nav-mega-body-menu {
  padding-left: 28px;
  padding-right: 22px;
}

.nav-mega-head-menu {
  padding-bottom: 8px;
}

/* Full-width footer row for the tagline — its own background (rather
   than transparent) so the text doesn't run across both the white
   featured column and the plain panel background behind Info/Contact,
   which would read as broken/misaligned rather than one clean bar. */
.nav-mega-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  /* No top margin — the white column's background (which only spans
     rows 1-2) would show a gap of exposed panel background beneath it
     otherwise. margin-top on the content above (each column already has
     its own natural spacing) does the visual separating instead. */
  margin: 0 -28px -30px;
  padding: 20px 28px 16px;
  background: var(--paper-deep);
  border-radius: 0 0 20px 20px;
  text-align: center;
}

@media (max-width: 720px) {
  .nav-mega-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .nav-mega-bg-primary,
  .nav-mega-header-rule {
    display: none;
  }

  .nav-mega-body-menu {
    padding-left: 0;
    padding-right: 0;
  }

  /* The header's hamburger (raised above the panel while it's open —
     see body.nav-menu-open) sits at its fixed header position, which
     overlaps "Menu" text once this cell's own left padding drops to 0
     like the others. Left clear of it instead. */
  .nav-mega-head-menu {
    padding-left: 56px;
    padding-right: 0;
  }

  /* In the grid, header/content pairing comes from row placement, not
     source order (Menu/Info/Contact's three headers all come before any
     of the three content blocks in the markup, so a header can share its
     grid row with the right content regardless of where it sits in the
     DOM). Flex only has DOM order to go on, so without this, mobile
     stacked all three headers first and all three content blocks after
     — order pairs each header directly above its own content instead. */
  /* .nav-mega-header-rule (the shared border used at desktop widths) is
     hidden here, so each section gets its own short border instead. */
  .nav-mega-head-menu .nav-mega-col-title,
  .nav-mega-head-info .nav-mega-col-title,
  .nav-mega-head-contact .nav-mega-col-title {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sand-line);
  }

  .nav-mega-head-menu { order: 1; }
  .nav-mega-body-menu { order: 2; margin-bottom: 16px; }
  .nav-mega-head-info { order: 3; }
  .nav-mega-body-info { order: 4; margin-bottom: 16px; }
  .nav-mega-head-contact { order: 5; }
  .nav-mega-body-contact { order: 6; }

  .nav-mega-footer {
    order: 7;
    margin: 0 -28px -30px;
    border-radius: 0 0 20px 20px;
  }
}

.nav-mega-col {
  display: flex;
  flex-direction: column;
  padding-top: 18px;
  padding-bottom: 20px;
}

/* Info + Offerings stack in one column (two labelled groups) rather
   than each getting a whole column to themselves — three short lists
   side by side left too much dead space underneath. */
.nav-mega-col-group + .nav-mega-col-group {
  margin-top: 20px;
}

.nav-mega-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--clay-deep);
  margin: 0 0 8px;
}

/* "Other Offerings" is a secondary header nested inside the Info/
   Offerings column, not part of the aligned top row — it keeps its own
   border, unlike Menu/Info/Contact (which share .nav-mega-header-rule
   instead). */
.nav-mega-col-group .nav-mega-col-title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sand-line);
}

.nav-mega-col-title svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-mega-col a,
.nav-mega-col button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav-mega-col a:hover,
.nav-mega-col button:hover {
  background: var(--cream-card);
}

.nav-mega-body-menu {
  display: flex;
  flex-direction: column;
}

.nav-mega-primary-links {
  display: flex;
  flex-direction: column;
}

.nav-mega-primary-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

.nav-mega-primary-link {
  display: flex !important;
  flex-direction: column;
  gap: 1px;
  padding: 9px 10px !important;
  /* Same flush-left trick as the other columns' links (their negative
     margin matches their own padding) — this was plain 0 before, which
     left the text sitting 10px further right than "Menu" above it. */
  margin: 0 -10px !important;
}

.nav-mega-primary-link:hover {
  background: var(--cream-card) !important;
}

.nav-mega-primary-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
}

.nav-mega-primary-copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--clay-deep);
}

/* ---------------------------------------------------
   Locations list (overview page)
--------------------------------------------------- */
.location-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-list-item a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 18px 22px;
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease, transform 0.15s ease;
}

.location-list-item a:hover {
  background: var(--paper-deep);
  transform: translateY(-2px);
}

.location-list-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  flex: 0 0 auto;
}

.location-list-venue {
  color: var(--ink-soft);
  font-size: 0.9rem;
  flex: 1 1 200px;
}

/* ---------------------------------------------------
   Testimonials list
--------------------------------------------------- */
.testimonial-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--cream-card);
  border-radius: 16px;
  padding: 18px 22px;
}

/* ---------------------------------------------------
   Pricing note (corporate / bespoke pages)
--------------------------------------------------- */
.price-note {
  display: inline-block;
  font-weight: 700;
  color: var(--clay-deep);
  background: var(--paper-deep);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.9rem;
}

/* ---------------------------------------------------
   Shop — Stripe Checkout via netlify/functions/
   create-checkout-session.js, so no card form or
   Stripe.js lives on this page at all.
--------------------------------------------------- */
.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0;
}

/* Rows, not columns — photo on the left, description in the middle,
   price/Buy aligned together on the right. A grid of cards side by side
   left uneven whitespace whenever one product had more copy (a bullet
   list) than the other; a row's height just follows its own content. */
.shop-product {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
}

.shop-product-image {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
}

.shop-product-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-product-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0;
}

.shop-product-copy {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

.shop-product-list {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 4px 0 0;
  padding-left: 18px;
}

.shop-product-list li {
  margin: 2px 0;
}

.shop-product-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.shop-product-buy .btn {
  border: none;
  font-family: inherit;
}

.shop-buy-status {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clay-deep);
  margin: 0;
  text-align: right;
  max-width: 160px;
}

@media (max-width: 640px) {
  .shop-product {
    grid-template-columns: 1fr;
  }

  .shop-product-buy {
    align-items: flex-start;
  }

  .shop-buy-status {
    text-align: left;
    max-width: none;
  }
}

.shop-banner {
  font-weight: 700;
  color: var(--moss-deep);
  background: var(--moss-tint);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 20px;
}

.shop-banner--cancelled {
  color: var(--clay-deep);
  background: var(--paper-deep);
}

/* ---------------------------------------------------
   Video embed facade (About page) — a clickable
   thumbnail that swaps in the real YouTube iframe only
   on click, so nothing loads from YouTube up front.
--------------------------------------------------- */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  margin: 20px 0 0;
}

.video-embed-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  background: none;
}

.video-embed-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(253, 239, 231, 0.92);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}

.video-embed-icon svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.video-embed-play:hover .video-embed-icon {
  background: var(--paper);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Theatre mode — clicking the thumbnail opens this full-screen lightbox
   with a large player, rather than swapping in a small inline iframe. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 24, 0.92);
}

.video-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
}

.video-lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 50px 90px -20px rgba(0, 0, 0, 0.65);
}

.video-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--paper);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------------
   Art Journaling — editorial layout
--------------------------------------------------- */
.journal-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.journal-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}







.journal-quote {
  margin: 96px auto;
  max-width: 760px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.2;
  color: var(--moss-deep);
}

.journal-quote::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 0 auto 28px;
  border-radius: 2px;
  background: var(--peach-deep);
}

.journal-step {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 96px;
}

.journal-step--flip {
  grid-template-columns: 1fr 0.85fr;
}

.journal-step .journal-photo {
  aspect-ratio: 4 / 5;
}

.journal-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--clay-deep);
  margin: 0 0 4px;
}

.journal-step h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 16px;
}

.journal-step p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.journal-kit {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journal-kit li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--moss-tint);
  color: var(--moss-deep);
  font-size: 0.9rem;
  font-weight: 600;
}

.journal-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.journal-cta .journal-photo {
  border-radius: 0;
  height: 100%;
  min-height: 320px;
}

.journal-cta-body {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.journal-cta-body h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin: 0;
}

.journal-cta-body p {
  margin: 0;
  line-height: 1.6;
  color: var(--ink-soft);
}

.journal-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .journal-hero,
  .journal-step,
  .journal-step--flip,
  .journal-cta {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .journal-step .journal-photo { aspect-ratio: 4 / 3; }
  .journal-quote { margin: 64px auto; }
  .journal-step { margin-bottom: 64px; }
  .journal-cta { gap: 0; }
  .journal-cta .journal-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .journal-cta-body { padding: 32px 24px; }
}

.journal-intro {
  max-width: 680px;
  margin: 0 auto 96px;
}

.journal-intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.journal-intro p:first-child::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--clay-deep);
}

.journal-why,
.journal-faq {
  margin-bottom: 96px;
}

.journal-why h2,
.journal-faq h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-align: center;
  margin: 0 0 32px;
}

.journal-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.journal-why-grid > div {
  padding: 28px 24px;
  background: var(--cream-card);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
}

.journal-why-grid h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--moss-deep);
  margin: 0 0 8px;
}

.journal-why-grid p,
.journal-faq p {
  margin: 0;
  line-height: 1.65;
  color: var(--ink-soft);
}

.journal-faq {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.journal-faq details {
  border-top: 1px solid var(--sand-line);
  padding: 18px 0;
}

.journal-faq details:last-child {
  border-bottom: 1px solid var(--sand-line);
}

.journal-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}

.journal-faq details p {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .journal-intro,
  .journal-why,
  .journal-faq { margin-bottom: 64px; }
  .journal-why-grid { grid-template-columns: 1fr; }
}

/* --- motifs: torn paper, tape, scribbles, pen marks (decorative) --- */
.journal-hero { position: relative; }








.journal-quote::before {
  width: 120px; height: 16px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 16%22 fill=%22none%22 stroke=%22%23f99b65%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 8C13 0 20 0 30 8S47 16 57 8 73 0 83 8 100 16 117 8%22/%3E%3C/svg%3E") no-repeat center / contain;
}

.journal-step-num {
  display: inline-block;
  padding: 10px 22px;
  margin-bottom: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 66%22 fill=%22none%22 stroke=%22%23f99b65%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M60 6C100 2 118 22 114 40 108 62 50 64 18 52 -2 42 8 14 52 8 70 5 96 8 104 14%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.journal-photo-wrap {
  position: relative;
  transform: rotate(-1.2deg);
}

.journal-step--flip .journal-photo-wrap {
  order: 2;
  transform: rotate(1.2deg);
}

.journal-photo-wrap .journal-photo {
  aspect-ratio: 4 / 5;
}

.journal-photo-wrap::after {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 110px; height: 30px;
  margin-left: -55px;
  background: rgba(249, 155, 101, 0.78);
  clip-path: polygon(0 0,3% 20%,0 40%,3% 60%,0 80%,2% 100%,100% 100%,97% 80%,100% 60%,97% 40%,100% 20%,98% 0);
  transform: rotate(-4deg);
}

.journal-step--flip .journal-photo-wrap::after {
  background: rgba(237, 182, 95, 0.8);
  transform: rotate(3deg);
}

.journal-step:not(.journal-step--flip) + .journal-step:not(.journal-step--flip) .journal-photo-wrap::after {
  background: rgba(20, 107, 122, 0.45);
}

.journal-why {
  background: var(--paper-deep);
  clip-path: polygon(0.0% 10px, 2.17% 9px, 4.35% 10px, 6.52% 7px, 8.7% 4px, 10.87% 11px, 13.04% 6px, 15.22% 10px, 17.39% 5px, 19.57% 0px, 21.74% 7px, 23.91% 5px, 26.09% 2px, 28.26% 9px, 30.43% 1px, 32.61% 7px, 34.78% 0px, 36.96% 3px, 39.13% 12px, 41.3% 4px, 43.48% 2px, 45.65% 11px, 47.83% 3px, 50.0% 6px, 52.17% 6px, 54.35% 7px, 56.52% 1px, 58.7% 2px, 60.87% 7px, 63.04% 6px, 65.22% 8px, 67.39% 4px, 69.57% 2px, 71.74% 6px, 73.91% 8px, 76.09% 4px, 78.26% 11px, 80.43% 6px, 82.61% 5px, 84.78% 10px, 86.96% 6px, 89.13% 3px, 91.3% 2px, 93.48% 1px, 95.65% 2px, 97.83% 2px, 100.0% 3px, 100.0% calc(100% - 10px), 97.83% calc(100% - 3px), 95.65% calc(100% - 0px), 93.48% calc(100% - 7px), 91.3% calc(100% - 9px), 89.13% calc(100% - 2px), 86.96% calc(100% - 4px), 84.78% calc(100% - 4px), 82.61% calc(100% - 0px), 80.43% calc(100% - 2px), 78.26% calc(100% - 6px), 76.09% calc(100% - 8px), 73.91% calc(100% - 5px), 71.74% calc(100% - 9px), 69.57% calc(100% - 9px), 67.39% calc(100% - 5px), 65.22% calc(100% - 2px), 63.04% calc(100% - 11px), 60.87% calc(100% - 8px), 58.7% calc(100% - 9px), 56.52% calc(100% - 10px), 54.35% calc(100% - 10px), 52.17% calc(100% - 11px), 50.0% calc(100% - 0px), 47.83% calc(100% - 7px), 45.65% calc(100% - 12px), 43.48% calc(100% - 10px), 41.3% calc(100% - 12px), 39.13% calc(100% - 8px), 36.96% calc(100% - 6px), 34.78% calc(100% - 6px), 32.61% calc(100% - 6px), 30.43% calc(100% - 6px), 28.26% calc(100% - 1px), 26.09% calc(100% - 7px), 23.91% calc(100% - 10px), 21.74% calc(100% - 6px), 19.57% calc(100% - 0px), 17.39% calc(100% - 3px), 15.22% calc(100% - 1px), 13.04% calc(100% - 3px), 10.87% calc(100% - 7px), 8.7% calc(100% - 2px), 6.52% calc(100% - 1px), 4.35% calc(100% - 5px), 2.17% calc(100% - 9px), 0.0% calc(100% - 0px));
  padding: 72px 32px;
  margin-left: -32px;
  margin-right: -32px;
}

@media (max-width: 760px) {
  .journal-step--flip .journal-photo-wrap { order: 0; }
  .journal-photo-wrap .journal-photo { aspect-ratio: 4 / 3; }
  .journal-why { margin-left: -24px; margin-right: -24px; padding: 56px 24px; }
}

/* --- Art Journaling hero: full-bleed band under the nav --- */
.journal-hero-band {
  position: relative;
  background: var(--moss);
  color: var(--paper);
  /* top padding leaves room for the header logo, which hangs below the nav */
  padding: 104px clamp(24px, 5vw, 72px) 64px;
  clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - 14px), 98.33% calc(100% - 14px), 96.67% calc(100% - 14px), 95.0% calc(100% - 16px), 93.33% calc(100% - 6px), 91.67% calc(100% - 5px), 90.0% calc(100% - 16px), 88.33% calc(100% - 15px), 86.67% calc(100% - 5px), 85.0% calc(100% - 3px), 83.33% calc(100% - 14px), 81.67% calc(100% - 9px), 80.0% calc(100% - 4px), 78.33% calc(100% - 2px), 76.67% calc(100% - 1px), 75.0% calc(100% - 12px), 73.33% calc(100% - 14px), 71.67% calc(100% - 5px), 70.0% calc(100% - 0px), 68.33% calc(100% - 16px), 66.67% calc(100% - 2px), 65.0% calc(100% - 1px), 63.33% calc(100% - 1px), 61.67% calc(100% - 6px), 60.0% calc(100% - 7px), 58.33% calc(100% - 0px), 56.67% calc(100% - 14px), 55.0% calc(100% - 10px), 53.33% calc(100% - 14px), 51.67% calc(100% - 6px), 50.0% calc(100% - 16px), 48.33% calc(100% - 7px), 46.67% calc(100% - 9px), 45.0% calc(100% - 15px), 43.33% calc(100% - 0px), 41.67% calc(100% - 2px), 40.0% calc(100% - 14px), 38.33% calc(100% - 8px), 36.67% calc(100% - 13px), 35.0% calc(100% - 2px), 33.33% calc(100% - 8px), 31.67% calc(100% - 10px), 30.0% calc(100% - 7px), 28.33% calc(100% - 16px), 26.67% calc(100% - 9px), 25.0% calc(100% - 0px), 23.33% calc(100% - 2px), 21.67% calc(100% - 3px), 20.0% calc(100% - 12px), 18.33% calc(100% - 3px), 16.67% calc(100% - 9px), 15.0% calc(100% - 12px), 13.33% calc(100% - 2px), 11.67% calc(100% - 0px), 10.0% calc(100% - 0px), 8.33% calc(100% - 6px), 6.67% calc(100% - 6px), 5.0% calc(100% - 1px), 3.33% calc(100% - 15px), 1.67% calc(100% - 12px), 0.0% calc(100% - 12px));
}

.journal-hero {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  grid-template-areas:
    "what  what"
    "art   lede"
    "journ journ";
  column-gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

.journal-hero .page-title {
  display: contents;
}

.jh-what {
  grid-area: what;
  justify-self: start;
  margin-left: 6%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  color: var(--peach);
  transform: rotate(-4deg);
}

.jh-art {
  grid-area: art;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6rem, 22vw, 19rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.jh-journaling {
  grid-area: journ;
  justify-self: end;
  position: relative;
  margin-top: -0.3em;
  padding-bottom: 0.1em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.8rem, 16vw, 14.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--marigold);
}

.jh-journaling::after {
  content: "";
  position: absolute;
  left: 3%; right: 7%; bottom: -0.04em;
  height: 0.2em;
  transform: rotate(-1deg);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 30%22 preserveAspectRatio=%22none%22 fill=%22none%22 stroke=%22%23fab085%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath vector-effect=%22non-scaling-stroke%22 stroke-width=%227%22 d=%22M6 19C58 9 112 23 186 13S318 5 394 13%22/%3E%3Cpath vector-effect=%22non-scaling-stroke%22 stroke-width=%224%22 d=%22M30 25C96 15 172 27 252 19S346 15 372 23%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.jh-q {
  display: inline-block;
  color: var(--peach);
  transform: rotate(8deg);
}

.journal-eyebrow {
  position: absolute;
  top: 0; right: 4%;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--moss-tint);
}

.journal-lede {
  grid-area: lede;
  align-self: start;
  margin: 0.6em 0 0;
  max-width: 440px;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--paper);
}

.journal-hero::before,
.journal-hero::after,
.journal-scrap {
  content: "";
  position: absolute;
  pointer-events: none;
}

.journal-hero::before {
  width: 130px; height: 65px;
  top: -40px; left: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 60%22 fill=%22none%22 stroke=%22%23fab085%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 40C20 4 48 4 42 30S10 56 32 46 70 8 86 28 98 54 116 34%22/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-12deg);
}

.journal-hero::after {
  width: 60px; height: 60px;
  top: 52%; right: 1%;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 60%22 fill=%22none%22 stroke=%22%23edb65f%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M30 5V55M5 30H55M12 12L48 48M48 12L12 48%22/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(10deg);
}

.journal-scrap--a {
  width: 120px; height: 84px;
  left: 11%; right: auto; top: auto; bottom: -3%;
  background: var(--marigold);
  clip-path: polygon(0.0% 1.5%, 11.1% 2.0%, 22.2% 0.7%, 33.3% 2.4%, 44.4% 1.2%, 55.6% 1.1%, 66.7% 0.1%, 77.8% 1.4%, 88.9% 3.2%, 100.0% 0.5%, 97.5% 11.1%, 100.0% 22.2%, 98.4% 33.3%, 98.3% 44.4%, 97.6% 55.6%, 99.3% 66.7%, 98.2% 77.8%, 96.6% 88.9%, 100.0% 97.3%, 88.9% 98.5%, 77.8% 98.7%, 66.7% 98.6%, 55.6% 96.5%, 44.4% 100.0%, 33.3% 97.0%, 22.2% 96.6%, 11.1% 97.9%, 0.0% 96.5%, 0.1% 88.9%, 0.7% 77.8%, 3.5% 66.7%, 2.1% 55.6%, 2.0% 44.4%, 0.1% 33.3%, 0.5% 22.2%, 1.5% 11.1%);
  transform: rotate(5deg);
}

.journal-scrap--b {
  width: 100px; height: 100px;
  left: 2%; bottom: 4%;
  background-color: var(--moss-tint);
  background-image: repeating-linear-gradient(transparent 0 13px, rgba(20, 107, 122, 0.3) 13px 14px);
  clip-path: polygon(0.0% 0.0%, 11.1% 2.1%, 22.2% 2.9%, 33.3% 1.4%, 44.4% 0.3%, 55.6% 0.7%, 66.7% 2.2%, 77.8% 0.1%, 88.9% 1.3%, 100.0% 2.2%, 99.6% 11.1%, 97.9% 22.2%, 97.1% 33.3%, 99.5% 44.4%, 98.6% 55.6%, 97.8% 66.7%, 98.9% 77.8%, 99.2% 88.9%, 100.0% 97.9%, 88.9% 97.5%, 77.8% 99.4%, 66.7% 97.8%, 55.6% 98.1%, 44.4% 97.6%, 33.3% 98.6%, 22.2% 98.3%, 11.1% 99.7%, 0.0% 99.8%, 0.4% 88.9%, 1.8% 77.8%, 0.9% 66.7%, 2.6% 55.6%, 1.4% 44.4%, 1.5% 33.3%, 3.2% 22.2%, 1.7% 11.1%);
  transform: rotate(7deg);
}

.journal-scrap--b::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 26px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 20%22 fill=%22none%22 stroke=%22%23794c10%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 14L20 6M26 14L42 6M48 14L64 6M70 14L76 11%22/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 760px) {
  .journal-hero-band { padding: 104px 24px 56px; }
  .journal-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "what" "art" "journ" "lede";
    row-gap: 8px;
  }
  .jh-art { font-size: clamp(6rem, 34vw, 10rem); }
  .jh-journaling { font-size: clamp(3.4rem, 17vw, 6rem); margin-top: -0.1em; }
  .journal-lede { margin-top: 16px; }
  .journal-eyebrow,
  .journal-scrap,
  .journal-hero::before,
  .journal-hero::after { display: none; }
}

/* tighten the gap between the hero band and the content below it */
.journal-hero-band + .page {
  padding-top: 32px;
}

.journal-hero-band + .page .journal-quote {
  margin-top: 56px;
}



/* torn-paper photos: the photo itself is ripped, with a thin uneven
   strip of white paper showing along the tear */
.journal-photo-wrap {
  filter: drop-shadow(0 10px 14px rgba(36, 64, 75, 0.28));
}

.journal-photo-wrap::before,
.journal-torn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7f1ea;
  clip-path: polygon(0.0% 5px, 2.94% 13px, 5.88% 13px, 8.82% 3px, 11.76% 10px, 14.71% 11px, 17.65% 9px, 20.59% 13px, 23.53% 14px, 26.47% 3px, 29.41% 14px, 32.35% 4px, 35.29% 11px, 38.24% 5px, 41.18% 13px, 44.12% 8px, 47.06% 7px, 50.0% 12px, 52.94% 12px, 55.88% 9px, 58.82% 8px, 61.76% 9px, 64.71% 14px, 67.65% 4px, 70.59% 4px, 73.53% 12px, 76.47% 6px, 79.41% 9px, 82.35% 7px, 85.29% 4px, 88.24% 15px, 91.18% 4px, 94.12% 6px, 97.06% 10px, 100.0% 4px, calc(100% - 5px) 2.94%, calc(100% - 1px) 5.88%, calc(100% - 6px) 8.82%, calc(100% - 10px) 11.76%, calc(100% - 12px) 14.71%, calc(100% - 10px) 17.65%, calc(100% - 7px) 20.59%, calc(100% - 8px) 23.53%, calc(100% - 10px) 26.47%, calc(100% - 11px) 29.41%, calc(100% - 3px) 32.35%, calc(100% - 8px) 35.29%, calc(100% - 6px) 38.24%, calc(100% - 2px) 41.18%, calc(100% - 6px) 44.12%, calc(100% - 11px) 47.06%, calc(100% - 5px) 50.0%, calc(100% - 5px) 52.94%, calc(100% - 13px) 55.88%, calc(100% - 11px) 58.82%, calc(100% - 12px) 61.76%, calc(100% - 7px) 64.71%, calc(100% - 11px) 67.65%, calc(100% - 13px) 70.59%, calc(100% - 9px) 73.53%, calc(100% - 11px) 76.47%, calc(100% - 10px) 79.41%, calc(100% - 9px) 82.35%, calc(100% - 14px) 85.29%, calc(100% - 8px) 88.24%, calc(100% - 12px) 91.18%, calc(100% - 8px) 94.12%, calc(100% - 6px) 97.06%, 100.0% calc(100% - 12px), 97.06% calc(100% - 1px), 94.12% calc(100% - 5px), 91.18% calc(100% - 11px), 88.24% calc(100% - 12px), 85.29% calc(100% - 4px), 82.35% calc(100% - 8px), 79.41% calc(100% - 13px), 76.47% calc(100% - 13px), 73.53% calc(100% - 11px), 70.59% calc(100% - 6px), 67.65% calc(100% - 13px), 64.71% calc(100% - 6px), 61.76% calc(100% - 15px), 58.82% calc(100% - 10px), 55.88% calc(100% - 8px), 52.94% calc(100% - 5px), 50.0% calc(100% - 5px), 47.06% calc(100% - 2px), 44.12% calc(100% - 11px), 41.18% calc(100% - 14px), 38.24% calc(100% - 9px), 35.29% calc(100% - 5px), 32.35% calc(100% - 6px), 29.41% calc(100% - 6px), 26.47% calc(100% - 8px), 23.53% calc(100% - 7px), 20.59% calc(100% - 2px), 17.65% calc(100% - 6px), 14.71% calc(100% - 9px), 11.76% calc(100% - 11px), 8.82% calc(100% - 2px), 5.88% calc(100% - 4px), 2.94% calc(100% - 14px), 0.0% calc(100% - 12px), 3px 97.06%, 10px 94.12%, 10px 91.18%, 10px 88.24%, 10px 85.29%, 7px 82.35%, 10px 79.41%, 7px 76.47%, 4px 73.53%, 7px 70.59%, 3px 67.65%, 2px 64.71%, 2px 61.76%, 14px 58.82%, 9px 55.88%, 2px 52.94%, 6px 50.0%, 10px 47.06%, 7px 44.12%, 14px 41.18%, 9px 38.24%, 3px 35.29%, 2px 32.35%, 9px 29.41%, 7px 26.47%, 7px 23.53%, 5px 20.59%, 9px 17.65%, 7px 14.71%, 8px 11.76%, 11px 8.82%, 8px 5.88%, 13px 2.94%);
}

.journal-photo-wrap .journal-photo,
.journal-torn img {
  position: relative;
  border-radius: 0;
  clip-path: polygon(0.0% 10px, 2.94% 16px, 5.88% 15px, 8.82% 9px, 11.76% 12px, 14.71% 16px, 17.65% 14px, 20.59% 17px, 23.53% 16px, 26.47% 8px, 29.41% 16px, 32.35% 7px, 35.29% 14px, 38.24% 11px, 41.18% 15px, 44.12% 10px, 47.06% 10px, 50.0% 14px, 52.94% 15px, 55.88% 15px, 58.82% 14px, 61.76% 13px, 64.71% 17px, 67.65% 9px, 70.59% 10px, 73.53% 17px, 76.47% 9px, 79.41% 15px, 82.35% 13px, 85.29% 7px, 88.24% 17px, 91.18% 8px, 94.12% 9px, 97.06% 16px, 100.0% 7px, calc(100% - 11px) 2.94%, calc(100% - 7px) 5.88%, calc(100% - 11px) 8.82%, calc(100% - 14px) 11.76%, calc(100% - 16px) 14.71%, calc(100% - 13px) 17.65%, calc(100% - 13px) 20.59%, calc(100% - 13px) 23.53%, calc(100% - 16px) 26.47%, calc(100% - 14px) 29.41%, calc(100% - 9px) 32.35%, calc(100% - 12px) 35.29%, calc(100% - 8px) 38.24%, calc(100% - 7px) 41.18%, calc(100% - 9px) 44.12%, calc(100% - 14px) 47.06%, calc(100% - 10px) 50.0%, calc(100% - 11px) 52.94%, calc(100% - 17px) 55.88%, calc(100% - 13px) 58.82%, calc(100% - 17px) 61.76%, calc(100% - 11px) 64.71%, calc(100% - 13px) 67.65%, calc(100% - 15px) 70.59%, calc(100% - 13px) 73.53%, calc(100% - 16px) 76.47%, calc(100% - 12px) 79.41%, calc(100% - 15px) 82.35%, calc(100% - 16px) 85.29%, calc(100% - 13px) 88.24%, calc(100% - 16px) 91.18%, calc(100% - 10px) 94.12%, calc(100% - 12px) 97.06%, 100.0% calc(100% - 17px), 97.06% calc(100% - 7px), 94.12% calc(100% - 11px), 91.18% calc(100% - 16px), 88.24% calc(100% - 17px), 85.29% calc(100% - 9px), 82.35% calc(100% - 12px), 79.41% calc(100% - 15px), 76.47% calc(100% - 16px), 73.53% calc(100% - 16px), 70.59% calc(100% - 8px), 67.65% calc(100% - 17px), 64.71% calc(100% - 10px), 61.76% calc(100% - 17px), 58.82% calc(100% - 16px), 55.88% calc(100% - 11px), 52.94% calc(100% - 11px), 50.0% calc(100% - 8px), 47.06% calc(100% - 8px), 44.12% calc(100% - 14px), 41.18% calc(100% - 17px), 38.24% calc(100% - 14px), 35.29% calc(100% - 8px), 32.35% calc(100% - 12px), 29.41% calc(100% - 8px), 26.47% calc(100% - 13px), 23.53% calc(100% - 9px), 20.59% calc(100% - 7px), 17.65% calc(100% - 11px), 14.71% calc(100% - 13px), 11.76% calc(100% - 13px), 8.82% calc(100% - 8px), 5.88% calc(100% - 7px), 2.94% calc(100% - 16px), 0.0% calc(100% - 16px), 7px 97.06%, 13px 94.12%, 16px 91.18%, 12px 88.24%, 15px 85.29%, 11px 82.35%, 15px 79.41%, 10px 76.47%, 7px 73.53%, 11px 70.59%, 7px 67.65%, 8px 64.71%, 8px 61.76%, 16px 58.82%, 15px 55.88%, 7px 52.94%, 10px 50.0%, 13px 47.06%, 11px 44.12%, 16px 41.18%, 11px 38.24%, 9px 35.29%, 7px 32.35%, 12px 29.41%, 12px 26.47%, 12px 23.53%, 9px 20.59%, 13px 17.65%, 13px 14.71%, 14px 11.76%, 15px 8.82%, 13px 5.88%, 17px 2.94%);
}

.journal-step--flip .journal-photo-wrap::before { clip-path: polygon(0.0% 7px, 2.94% 10px, 5.88% 8px, 8.82% 5px, 11.76% 5px, 14.71% 4px, 17.65% 6px, 20.59% 5px, 23.53% 7px, 26.47% 12px, 29.41% 7px, 32.35% 9px, 35.29% 14px, 38.24% 5px, 41.18% 11px, 44.12% 12px, 47.06% 8px, 50.0% 8px, 52.94% 12px, 55.88% 10px, 58.82% 6px, 61.76% 8px, 64.71% 5px, 67.65% 8px, 70.59% 8px, 73.53% 1px, 76.47% 6px, 79.41% 13px, 82.35% 9px, 85.29% 10px, 88.24% 10px, 91.18% 5px, 94.12% 11px, 97.06% 6px, 100.0% 5px, calc(100% - 6px) 2.94%, calc(100% - 11px) 5.88%, calc(100% - 11px) 8.82%, calc(100% - 7px) 11.76%, calc(100% - 6px) 14.71%, calc(100% - 12px) 17.65%, calc(100% - 4px) 20.59%, calc(100% - 8px) 23.53%, calc(100% - 7px) 26.47%, calc(100% - 3px) 29.41%, calc(100% - 12px) 32.35%, calc(100% - 13px) 35.29%, calc(100% - 12px) 38.24%, calc(100% - 7px) 41.18%, calc(100% - 10px) 44.12%, calc(100% - 5px) 47.06%, calc(100% - 10px) 50.0%, calc(100% - 5px) 52.94%, calc(100% - 13px) 55.88%, calc(100% - 4px) 58.82%, calc(100% - 8px) 61.76%, calc(100% - 5px) 64.71%, calc(100% - 4px) 67.65%, calc(100% - 13px) 70.59%, calc(100% - 12px) 73.53%, calc(100% - 10px) 76.47%, calc(100% - 11px) 79.41%, calc(100% - 9px) 82.35%, calc(100% - 9px) 85.29%, calc(100% - 9px) 88.24%, calc(100% - 7px) 91.18%, calc(100% - 6px) 94.12%, calc(100% - 5px) 97.06%, 100.0% calc(100% - 12px), 97.06% calc(100% - 6px), 94.12% calc(100% - 13px), 91.18% calc(100% - 8px), 88.24% calc(100% - 9px), 85.29% calc(100% - 12px), 82.35% calc(100% - 12px), 79.41% calc(100% - 10px), 76.47% calc(100% - 11px), 73.53% calc(100% - 6px), 70.59% calc(100% - 7px), 67.65% calc(100% - 3px), 64.71% calc(100% - 7px), 61.76% calc(100% - 13px), 58.82% calc(100% - 7px), 55.88% calc(100% - 9px), 52.94% calc(100% - 12px), 50.0% calc(100% - 6px), 47.06% calc(100% - 10px), 44.12% calc(100% - 10px), 41.18% calc(100% - 7px), 38.24% calc(100% - 9px), 35.29% calc(100% - 7px), 32.35% calc(100% - 4px), 29.41% calc(100% - 5px), 26.47% calc(100% - 6px), 23.53% calc(100% - 7px), 20.59% calc(100% - 6px), 17.65% calc(100% - 4px), 14.71% calc(100% - 11px), 11.76% calc(100% - 7px), 8.82% calc(100% - 11px), 5.88% calc(100% - 7px), 2.94% calc(100% - 8px), 0.0% calc(100% - 7px), 12px 97.06%, 11px 94.12%, 2px 91.18%, 6px 88.24%, 14px 85.29%, 1px 82.35%, 8px 79.41%, 7px 76.47%, 5px 73.53%, 2px 70.59%, 5px 67.65%, 11px 64.71%, 8px 61.76%, 4px 58.82%, 11px 55.88%, 8px 52.94%, 5px 50.0%, 5px 47.06%, 11px 44.12%, 10px 41.18%, 11px 38.24%, 7px 35.29%, 7px 32.35%, 3px 29.41%, 14px 26.47%, 2px 23.53%, 6px 20.59%, 5px 17.65%, 2px 14.71%, 2px 11.76%, 15px 8.82%, 2px 5.88%, 10px 2.94%); }
.journal-step--flip .journal-photo-wrap .journal-photo { clip-path: polygon(0.0% 10px, 2.94% 12px, 5.88% 13px, 8.82% 9px, 11.76% 10px, 14.71% 7px, 17.65% 8px, 20.59% 9px, 23.53% 10px, 26.47% 15px, 29.41% 10px, 32.35% 13px, 35.29% 17px, 38.24% 7px, 41.18% 14px, 44.12% 14px, 47.06% 14px, 50.0% 13px, 52.94% 14px, 55.88% 16px, 58.82% 10px, 61.76% 13px, 64.71% 8px, 67.65% 14px, 70.59% 10px, 73.53% 7px, 76.47% 11px, 79.41% 15px, 82.35% 13px, 85.29% 14px, 88.24% 13px, 91.18% 8px, 94.12% 17px, 97.06% 11px, 100.0% 8px, calc(100% - 8px) 2.94%, calc(100% - 13px) 5.88%, calc(100% - 16px) 8.82%, calc(100% - 13px) 11.76%, calc(100% - 8px) 14.71%, calc(100% - 17px) 17.65%, calc(100% - 7px) 20.59%, calc(100% - 12px) 23.53%, calc(100% - 10px) 26.47%, calc(100% - 8px) 29.41%, calc(100% - 14px) 32.35%, calc(100% - 17px) 35.29%, calc(100% - 15px) 38.24%, calc(100% - 10px) 41.18%, calc(100% - 16px) 44.12%, calc(100% - 9px) 47.06%, calc(100% - 16px) 50.0%, calc(100% - 8px) 52.94%, calc(100% - 15px) 55.88%, calc(100% - 7px) 58.82%, calc(100% - 14px) 61.76%, calc(100% - 10px) 64.71%, calc(100% - 9px) 67.65%, calc(100% - 16px) 70.59%, calc(100% - 14px) 73.53%, calc(100% - 16px) 76.47%, calc(100% - 14px) 79.41%, calc(100% - 11px) 82.35%, calc(100% - 15px) 85.29%, calc(100% - 12px) 88.24%, calc(100% - 13px) 91.18%, calc(100% - 9px) 94.12%, calc(100% - 9px) 97.06%, 100.0% calc(100% - 16px), 97.06% calc(100% - 8px), 94.12% calc(100% - 15px), 91.18% calc(100% - 12px), 88.24% calc(100% - 12px), 85.29% calc(100% - 17px), 82.35% calc(100% - 14px), 79.41% calc(100% - 15px), 76.47% calc(100% - 16px), 73.53% calc(100% - 10px), 70.59% calc(100% - 11px), 67.65% calc(100% - 9px), 64.71% calc(100% - 12px), 61.76% calc(100% - 15px), 58.82% calc(100% - 11px), 55.88% calc(100% - 15px), 52.94% calc(100% - 17px), 50.0% calc(100% - 8px), 47.06% calc(100% - 15px), 44.12% calc(100% - 15px), 41.18% calc(100% - 10px), 38.24% calc(100% - 12px), 35.29% calc(100% - 10px), 32.35% calc(100% - 7px), 29.41% calc(100% - 11px), 26.47% calc(100% - 12px), 23.53% calc(100% - 10px), 20.59% calc(100% - 11px), 17.65% calc(100% - 7px), 14.71% calc(100% - 13px), 11.76% calc(100% - 11px), 8.82% calc(100% - 13px), 5.88% calc(100% - 11px), 2.94% calc(100% - 13px), 0.0% calc(100% - 9px), 17px 97.06%, 13px 94.12%, 8px 91.18%, 9px 88.24%, 17px 85.29%, 7px 82.35%, 10px 79.41%, 9px 76.47%, 11px 73.53%, 8px 70.59%, 7px 67.65%, 13px 64.71%, 12px 61.76%, 9px 58.82%, 16px 55.88%, 13px 52.94%, 10px 50.0%, 9px 47.06%, 13px 44.12%, 16px 41.18%, 14px 38.24%, 13px 35.29%, 13px 32.35%, 8px 29.41%, 16px 26.47%, 8px 23.53%, 11px 20.59%, 8px 17.65%, 7px 14.71%, 8px 11.76%, 17px 8.82%, 8px 5.88%, 15px 2.94%); }

.journal-torn {
  position: absolute;
  width: clamp(160px, 17vw, 240px);
  left: 32%;
  top: 6%;
  transform: rotate(6deg);
  filter: drop-shadow(0 10px 14px rgba(15, 74, 84, 0.4));
  pointer-events: none;
}

.journal-torn::before { clip-path: polygon(0.0% 5px, 4.55% 3px, 9.09% 12px, 13.64% 1px, 18.18% 6px, 22.73% 5px, 27.27% 1px, 31.82% 2px, 36.36% 4px, 40.91% 7px, 45.45% 4px, 50.0% 5px, 54.55% 5px, 59.09% 7px, 63.64% 8px, 68.18% 7px, 72.73% 10px, 77.27% 6px, 81.82% 8px, 86.36% 4px, 90.91% 3px, 95.45% 8px, 100.0% 8px, calc(100% - 6px) 4.55%, calc(100% - 7px) 9.09%, calc(100% - 8px) 13.64%, calc(100% - 9px) 18.18%, calc(100% - 6px) 22.73%, calc(100% - 8px) 27.27%, calc(100% - 10px) 31.82%, calc(100% - 10px) 36.36%, calc(100% - 1px) 40.91%, calc(100% - 9px) 45.45%, calc(100% - 5px) 50.0%, calc(100% - 10px) 54.55%, calc(100% - 7px) 59.09%, calc(100% - 7px) 63.64%, calc(100% - 9px) 68.18%, calc(100% - 3px) 72.73%, calc(100% - 8px) 77.27%, calc(100% - 2px) 81.82%, calc(100% - 3px) 86.36%, calc(100% - 5px) 90.91%, calc(100% - 9px) 95.45%, 100.0% calc(100% - 4px), 95.45% calc(100% - 3px), 90.91% calc(100% - 4px), 86.36% calc(100% - 8px), 81.82% calc(100% - 8px), 77.27% calc(100% - 2px), 72.73% calc(100% - 2px), 68.18% calc(100% - 3px), 63.64% calc(100% - 9px), 59.09% calc(100% - 1px), 54.55% calc(100% - 4px), 50.0% calc(100% - 7px), 45.45% calc(100% - 10px), 40.91% calc(100% - 4px), 36.36% calc(100% - 8px), 31.82% calc(100% - 8px), 27.27% calc(100% - 3px), 22.73% calc(100% - 2px), 18.18% calc(100% - 11px), 13.64% calc(100% - 12px), 9.09% calc(100% - 9px), 4.55% calc(100% - 2px), 0.0% calc(100% - 3px), 6px 95.45%, 8px 90.91%, 6px 86.36%, 8px 81.82%, 10px 77.27%, 7px 72.73%, 7px 68.18%, 8px 63.64%, 2px 59.09%, 6px 54.55%, 9px 50.0%, 4px 45.45%, 2px 40.91%, 10px 36.36%, 10px 31.82%, 6px 27.27%, 3px 22.73%, 8px 18.18%, 1px 13.64%, 8px 9.09%, 3px 4.55%); }
.journal-torn img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(0.0% 9px, 4.55% 6px, 9.09% 14px, 13.64% 6px, 18.18% 8px, 22.73% 9px, 27.27% 6px, 31.82% 6px, 36.36% 8px, 40.91% 11px, 45.45% 9px, 50.0% 7px, 54.55% 11px, 59.09% 13px, 63.64% 11px, 68.18% 10px, 72.73% 12px, 77.27% 10px, 81.82% 11px, 86.36% 9px, 90.91% 9px, 95.45% 11px, 100.0% 11px, calc(100% - 9px) 4.55%, calc(100% - 10px) 9.09%, calc(100% - 14px) 13.64%, calc(100% - 12px) 18.18%, calc(100% - 9px) 22.73%, calc(100% - 13px) 27.27%, calc(100% - 12px) 31.82%, calc(100% - 13px) 36.36%, calc(100% - 7px) 40.91%, calc(100% - 13px) 45.45%, calc(100% - 11px) 50.0%, calc(100% - 13px) 54.55%, calc(100% - 11px) 59.09%, calc(100% - 13px) 63.64%, calc(100% - 12px) 68.18%, calc(100% - 7px) 72.73%, calc(100% - 13px) 77.27%, calc(100% - 6px) 81.82%, calc(100% - 9px) 86.36%, calc(100% - 8px) 90.91%, calc(100% - 14px) 95.45%, 100.0% calc(100% - 8px), 95.45% calc(100% - 6px), 90.91% calc(100% - 10px), 86.36% calc(100% - 14px), 81.82% calc(100% - 13px), 77.27% calc(100% - 8px), 72.73% calc(100% - 7px), 68.18% calc(100% - 7px), 63.64% calc(100% - 12px), 59.09% calc(100% - 6px), 54.55% calc(100% - 7px), 50.0% calc(100% - 13px), 45.45% calc(100% - 14px), 40.91% calc(100% - 10px), 36.36% calc(100% - 12px), 31.82% calc(100% - 14px), 27.27% calc(100% - 9px), 22.73% calc(100% - 8px), 18.18% calc(100% - 14px), 13.64% calc(100% - 14px), 9.09% calc(100% - 11px), 4.55% calc(100% - 7px), 0.0% calc(100% - 9px), 10px 95.45%, 10px 90.91%, 8px 86.36%, 11px 81.82%, 12px 77.27%, 13px 72.73%, 11px 68.18%, 13px 63.64%, 7px 59.09%, 10px 54.55%, 13px 50.0%, 8px 45.45%, 7px 40.91%, 13px 36.36%, 12px 31.82%, 12px 27.27%, 6px 22.73%, 10px 18.18%, 7px 13.64%, 10px 9.09%, 7px 4.55%);
}

.journal-torn::after {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  width: 90px; height: 26px;
  margin-left: -45px;
  background: rgba(249, 155, 101, 0.8);
  clip-path: polygon(0 0,3% 20%,0 40%,3% 60%,0 80%,2% 100%,100% 100%,97% 80%,100% 60%,97% 40%,100% 20%,98% 0);
  transform: rotate(-5deg);
  z-index: 2;
}

@media (max-width: 760px) {
  .journal-torn { display: none; }
}

/* ---------------------------------------------------
   Homepage promo for the Art Journaling page
--------------------------------------------------- */
.journal-promo {
  padding: 0 24px 72px;
}

.journal-promo-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: center;
  padding: 44px 56px;
  background: var(--moss);
  color: var(--paper);
  border-radius: var(--radius);
}

.journal-promo .journal-photo-wrap {
  width: 100%;
}

.journal-promo-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--peach);
  margin: 0 0 4px;
}

.journal-promo-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: var(--marigold);
  margin: 0 0 14px;
}

.journal-promo-copy {
  margin: 0 0 22px;
  line-height: 1.6;
  max-width: 460px;
}

.journal-promo .btn {
  background: var(--peach);
  color: var(--ink);
}

@media (max-width: 760px) {
  .journal-promo { padding-bottom: 48px; }
  .journal-promo-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 24px;
  }
}