/* Homepage stitch layer (2026-10-23). Loaded last on index.html.
   Brings the homepage navbar in line with the shared stitched bar in styles.css, makes the hero a
   full screen, lays a stitched cloth over Upcoming trips (home-curtain.js), and quiets the reviews. */

/* ---------- Navbar: the homepage's larger logo returns to the shared 56px circle ---------- */
.home-scrollcraft .brand { width: 56px; height: 56px; }
.home-scrollcraft .brand img { width: auto; height: 40px; }
.home-scrollcraft .nav { border-bottom: 0; }
.home-scrollcraft .nav-links a.active::after { background: var(--tz-stitch-active) repeat-x left center / 7px 7px; }

/* ---------- FAQ watermark: the tree stays a corner accent on phones ---------- */
@media (max-width: 760px) {
  .home-scrollcraft .home-faq { background-size: auto 13px, 210px 226px; background-position: center top, left -56px bottom -36px; }
}

/* ---------- Hero: a full screen under the slimmer nav ---------- */
.home-scrollcraft .hero-dimensional { min-height: calc(100svh - 70px); }
@media (max-width: 760px) { .home-scrollcraft .hero-dimensional { min-height: calc(100svh - 66px); } }

/* ---------- Upcoming trips under a stitched cloth (home-curtain.js) ---------- */
.home-curtain-pin { position: relative; }
.home-scrollcraft .home-upcoming.is-curtained { position: sticky; z-index: 1; }
.home-curtain { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
/* The line on the cloth. Stitched (canvas) by default; as a sewn label or typed in the
   heading font when data-curtain-words says so. Hidden without the cloth. */
.home-curtain-line { display: none; }
.home-upcoming.is-curtained:is([data-curtain-words="label"], [data-curtain-words="type"]) .home-curtain-line {
  display: block;
  position: absolute;
  z-index: 21;
  top: var(--curtain-line-mid, 50%);
  translate: 0 -50%;
  inset-inline: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: min(86%, 760px);
  pointer-events: none;
  text-align: center;
  text-wrap: balance;
}
.home-upcoming.is-curtained[data-curtain-words="type"] .home-curtain-line {
  font-family: var(--display, 'Amiri', serif);
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 4.2rem);
  line-height: 1.3;
  color: var(--ink);
  text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg);
}
.home-upcoming.is-curtained[data-curtain-words="label"] .home-curtain-line {
  --hem: url("/assets/images/tatreez/stitch-line-earth.svg");
  padding: 22px 30px 20px;
  font-family: var(--display, 'Amiri', serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.45;
  color: #3a2a1d;
  background:
    var(--hem) repeat-x left 6px top 6px / 7px 7px,
    var(--hem) repeat-x left 6px bottom 6px / 7px 7px,
    var(--hem) repeat-y left 6px top 6px / 7px 7px,
    var(--hem) repeat-y right 6px top 6px / 7px 7px,
    #f4ead2;
  transform: rotate(-1.6deg);
  box-shadow: 0 16px 30px -18px rgba(70, 45, 25, 0.55), 0 2px 4px rgba(70, 45, 25, 0.12);
}
@media (max-width: 760px) {
  .home-upcoming.is-curtained[data-curtain-words="label"] .home-curtain-line {
    max-width: calc(100% - 48px);
    white-space: normal;
    padding: 18px 22px 16px;
    font-size: 1.2rem;
  }
}

/* ---------- Reviews: quieter quotes, a few lines each (the full text is on reviews.html) ---------- */
.home-scrollcraft .home-reviews-head { margin-bottom: 40px; gap: 48px; }
.home-scrollcraft .review-score-compact > strong { font-size: 4.5rem; }
.home-scrollcraft .reviews-grid-home { gap: 40px; }
.home-scrollcraft .review-card { min-height: 0; padding-top: 28px; }
.home-scrollcraft .review-card blockquote,
.home-scrollcraft .review-card:first-child blockquote {
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.home-scrollcraft .review-card:first-child blockquote { font-size: 1.2rem; }
@media (max-width: 760px) {
  .home-scrollcraft .review-score-compact > strong { font-size: 3.25rem; }
  .home-scrollcraft .review-card blockquote,
  .home-scrollcraft .review-card:first-child blockquote { font-size: 1rem; -webkit-line-clamp: 6; }
}

/* ---------- From the field: the photo is a patch sewn onto the page, the 25+ card a label
   stitched over its edge. Both lean a little; they straighten under the pointer. ---------- */
.home-scrollcraft .home-proof-gallery .home-proof-photo {
  --patch-stitch: url("/assets/images/tatreez/stitch-line-earth.svg");
  position: relative;
  overflow: visible;
  padding: 12px;
  background: var(--surface);
  transform: rotate(-2.2deg);
  box-shadow: 0 16px 30px -18px rgba(70, 45, 25, 0.5), 0 2px 4px rgba(70, 45, 25, 0.08);
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home-scrollcraft .home-proof-gallery .home-proof-photo::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  background:
    var(--patch-stitch) repeat-x left top / 8px 8px,
    var(--patch-stitch) repeat-x left bottom / 8px 8px,
    var(--patch-stitch) repeat-y left top / 8px 8px,
    var(--patch-stitch) repeat-y right top / 8px 8px;
}
.home-scrollcraft .home-proof-gallery .home-proof-photo img { height: 100%; transform: none; }

.home-scrollcraft .home-proof-note {
  position: relative;
  z-index: 2;
  align-self: end;
  margin-inline-start: -56px;
  margin-bottom: -22px;
  padding: 26px 24px 22px;
  background: #f1ce79;
  transform: rotate(3deg);
  box-shadow: 0 18px 30px -16px rgba(70, 45, 25, 0.55), 0 2px 5px rgba(70, 45, 25, 0.12);
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), background 180ms;
}
/* A stitched hem inside the label, and two tacking stitches that hold it to the photo. */
.home-scrollcraft .home-proof-note::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  --hem: url("/assets/images/tatreez/stitch-line-earth.svg");
  background:
    var(--hem) repeat-x left top / 7px 7px,
    var(--hem) repeat-x left bottom / 7px 7px,
    var(--hem) repeat-y left top / 7px 7px,
    var(--hem) repeat-y right top / 7px 7px;
  opacity: 0.75;
}
.home-scrollcraft .home-proof-note::after {
  content: "";
  position: absolute;
  top: -7px;
  inset-inline-start: 18px;
  width: 30px;
  height: 14px;
  pointer-events: none;
  background:
    url("/assets/images/tatreez/stitch-line-earth.svg") no-repeat left center / 14px 14px,
    url("/assets/images/tatreez/stitch-line-earth.svg") no-repeat right center / 14px 14px;
}
.home-scrollcraft .home-proof-note:hover { background: #f7db97; transform: rotate(1deg) translateY(-3px); }
.home-scrollcraft .home-proof-gallery:hover .home-proof-photo { transform: rotate(-1deg); }
.home-scrollcraft .home-proof-note strong { color: #203e31; }
/* The label is gold cloth in both themes, so its ink stays dark. */
.home-scrollcraft .home-proof-note,
.home-scrollcraft .home-proof-note span { color: #203e31; }
.home-scrollcraft .home-proof-note-cta { color: #315840; border-bottom-color: #8ba084; }
.home-scrollcraft .home-proof-note-arrow { color: #315840; border-color: #a0af97; }

@media (max-width: 1100px) {
  .home-scrollcraft .home-proof-note { margin: -46px 0 0; margin-inline-start: 28px; }
}
@media (max-width: 760px) {
  .home-scrollcraft .home-proof-gallery { padding-inline: 4px; margin-bottom: 36px; }
  .home-scrollcraft .home-proof-gallery .home-proof-photo { padding: 9px; }
  .home-scrollcraft .home-proof-gallery { grid-template-columns: 1.25fr 0.75fr; }
  .home-scrollcraft .home-proof-note { margin: 0 0 -18px; margin-inline-start: -12px; padding: 18px 18px 16px; transform: rotate(3.5deg); }
  .home-scrollcraft .home-proof-note strong { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-scrollcraft .home-proof-gallery .home-proof-photo,
  .home-scrollcraft .home-proof-note { transition: none; }
}

/* ---------- Hero: the pause button is a linen button ringed with cross-stitches ---------- */
.home-scrollcraft .hero-motion-toggle {
  border: 0;
  background: url("/assets/images/tatreez/stitch-ring-earth.svg") center / 100% 100% no-repeat, #f4ead2;
  color: #5a3e2b;
  box-shadow: 0 6px 16px -8px rgba(10, 24, 16, 0.6);
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 180ms;
}
.home-scrollcraft .hero-motion-toggle:hover { background-color: #f1ce79; transform: rotate(-8deg); }
.home-scrollcraft .hero-motion-toggle:focus-visible { outline: 3px solid var(--brand-sun); outline-offset: 3px; }

/* ---------- Upcoming trips: each card is an embroidered travel patch ----------
   Linen with a stitched hem, the photo set in like a sewn panel, a round woven date badge,
   stitched peaks for difficulty. Patches lean a little; the one under the pointer straightens
   and its thread turns red. */
.home-scrollcraft .home-upcoming .trip-card {
  --hem: url("/assets/images/tatreez/stitch-line-earth.svg");
  border: 0;
  border-radius: 12px;
  background: var(--tz-aida) 0 0 / 6px 6px, var(--surface);
  box-shadow: 0 16px 30px -20px rgba(70, 45, 25, 0.55), 0 2px 4px rgba(70, 45, 25, 0.08);
  transform: rotate(var(--patch-tilt, -0.8deg));
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 420ms;
}
.home-scrollcraft .home-upcoming .trip-card:nth-child(3n + 2) { --patch-tilt: 0.9deg; }
.home-scrollcraft .home-upcoming .trip-card:nth-child(3n) { --patch-tilt: -0.4deg; }
.home-scrollcraft .home-upcoming .trip-card:hover {
  --hem: url("/assets/images/tatreez/stitch-line-red.svg");
  transform: rotate(0) translateY(-6px);
  box-shadow: 0 26px 40px -24px rgba(70, 45, 25, 0.6), 0 2px 4px rgba(70, 45, 25, 0.1);
}
/* The stitched hem replaces the coloured edge bar. */
.home-scrollcraft .home-upcoming .trip-card::before {
  inset: 6px;
  width: auto;
  z-index: 3;
  pointer-events: none;
  background:
    var(--hem) repeat-x left top / 8px 8px,
    var(--hem) repeat-x left bottom / 8px 8px,
    var(--hem) repeat-y left top / 8px 8px,
    var(--hem) repeat-y right top / 8px 8px;
}
.home-scrollcraft .home-upcoming .trip-image {
  margin: 16px 16px 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(70, 45, 25, 0.12);
}
/* The date is a round woven badge, tacked onto the photo. */
.home-scrollcraft .home-upcoming .trip-stamp,
.home-scrollcraft .home-upcoming .trips-grid:not(.list) > .trip-card:first-child .trip-stamp {
  top: 12px;
  inset-inline-start: 12px;
  width: 68px;
  height: 68px;
  padding: 0;
  align-content: center;
  gap: 0;
  border: 0;
  border-radius: 50%;
  background: url("/assets/images/tatreez/stitch-ring-earth.svg") center / 100% 100% no-repeat, #f1ce79;
  color: #203e31;
  box-shadow: 0 8px 16px -8px rgba(10, 24, 16, 0.6);
  transform: rotate(-8deg);
}
.home-scrollcraft .home-upcoming .trip-card:hover .trip-stamp { transform: rotate(4deg) scale(1.04); }
.home-scrollcraft .home-upcoming .trip-stamp b,
.home-scrollcraft .home-upcoming .trips-grid:not(.list) > .trip-card:first-child .trip-stamp b { font-size: 1.45rem; padding-top: 2px; line-height: 1; }
.home-scrollcraft .home-upcoming .trip-stamp i { font-size: 0.62rem; color: #5a3e2b; letter-spacing: 0; }
.home-scrollcraft .home-upcoming .trip-stamp small { display: none; }
/* Difficulty: tiny mountains sewn in cross-stitch. */
.home-scrollcraft .home-upcoming .trip-peaks { gap: 3px; height: 18px; }
.home-scrollcraft .home-upcoming .trip-peaks i { width: 14px; background: url("/assets/images/tatreez/stitch-line.svg") 0 0 / 4px 4px; }
.home-scrollcraft .home-upcoming .trip-peaks i:nth-child(1) { height: 10px; }
.home-scrollcraft .home-upcoming .trip-peaks i:nth-child(2) { height: 14px; }
.home-scrollcraft .home-upcoming .trip-peaks i:nth-child(3) { height: 18px; }
.home-scrollcraft .home-upcoming .trip-peaks[data-level="1"] i:nth-child(-n+1),
.home-scrollcraft .home-upcoming .trip-peaks[data-level="2"] i:nth-child(-n+2),
.home-scrollcraft .home-upcoming .trip-peaks[data-level="3"] i {
  background: url("/assets/images/tatreez/stitch-line-earth.svg") 0 0 / 4px 4px, color-mix(in srgb, currentColor 35%, transparent);
}
.home-scrollcraft .home-upcoming .trip-footer { margin-inline: 0; }
/* A patch has no ticket notches. In dark mode the hem uses the light thread. */
.home-scrollcraft .home-upcoming .trip-footer::before,
.home-scrollcraft .home-upcoming .trip-footer::after { display: none; }
[data-theme="dark"] .home-scrollcraft .home-upcoming .trip-card { --hem: url("/assets/images/tatreez/stitch-line.svg"); }
[data-theme="dark"] .home-scrollcraft .home-upcoming .trip-card:hover { --hem: url("/assets/images/tatreez/stitch-line-red.svg"); }
@media (max-width: 760px) {
  /* In the swipe rail the patches stand straight, so nothing is clipped at the rail's edges. */
  .home-scrollcraft .home-upcoming .trip-card { --patch-tilt: 0deg; }
  .home-scrollcraft .home-upcoming .trip-card:nth-child(n) { --patch-tilt: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .home-scrollcraft .home-upcoming .trip-card,
  .home-scrollcraft .hero-motion-toggle { transition: none; }
}

/* ---------- Dark mode on the homepage ---------- */
[data-theme="dark"] .home-scrollcraft .hero-dimensional { background-color: #172720; }