/* Start Here: the journey map. Five points on the watercolor open five short answers,
   each in a full-screen ivory panel. The map stays mounted behind the panel. */

/* ---- Intro and map ---- */
.jm-top { padding:14px 0 8px; }
.jm-top-wrap { width:min(1040px, 100%); margin:0 auto; padding-inline:16px; }
.jm-intro { text-align:center; }
.collection-home .jm-intro h1 { font-size:clamp(34px, 9.4vw, 40px); line-height:1.04; margin:8px 0 6px; }
.jm-intro h1 em { display:block; }
.collection-home .jm-sub { margin:0 0 2px; font-size:16px; line-height:1.5; color:#5a4b3e; }
.collection-home .jm-hint { margin:0; font-size:14px; line-height:1.5; color:#806038; }
.jm-stage { position:relative; z-index:0; }

.jm-map { position:relative; width:min(100%, 440px); margin:-8% auto 0; container-type:inline-size; }
.jm-art { display:block; width:100%; height:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.jm-disclaimer { position:relative; max-width:360px; margin:-10% auto 0; padding:18px 0 22px; text-align:center; }
.jm-disclaimer-mark { display:block; width:9px; height:9px; margin:18px auto 0; background:#c9a84c; transform:rotate(45deg); box-shadow:-22px 22px 0 -3.5px #d9c089, 22px -22px 0 -3.5px #d9c089; }
.collection-home .jm-disclaimer p { margin:0; font:italic 400 17px/1.45 'Cormorant Garamond',Georgia,serif; color:#6b5a48; }

/* Each point: a 44 x 44 target centered on the painted marker, positions relative to the image */
.jm-point { position:absolute; left:calc(var(--x) - 22px); top:calc(var(--y) - 22px); width:44px; height:44px; padding:0; margin:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.jm-point .jm-dot { position:absolute; left:9px; top:9px; }
.jm-map:not(.is-ready) .jm-point { visibility:hidden; opacity:0; }
.jm-map.is-ready .jm-point { transition:opacity 420ms ease; }

/* The dot: one component for gold and warm silver, with a +, a - or a check */
.jm-dot { --dot-a:#e8cf8c; --dot-b:#c9a84c; --dot-c:#a88326; --sign:#fffaf0; display:block; position:relative; width:26px; height:26px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 34% 28%, var(--dot-a) 0%, var(--dot-b) 58%, var(--dot-c) 100%); box-shadow:0 0 0 2px rgba(255,251,243,.92), 0 3px 9px rgba(98,69,40,.28); }
.jm-dot[data-tone="silver"] { --dot-a:#f4f0ea; --dot-b:#d3cbbf; --dot-c:#ada293; --sign:#5d5347; }
.jm-sign { position:absolute; inset:0; margin:auto; width:14px; height:14px; fill:none; stroke:var(--sign); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.jm-sign path { display:none; }
.jm-dot[data-sign="plus"] .jm-sign-h, .jm-dot[data-sign="plus"] .jm-sign-v, .jm-dot[data-sign="minus"] .jm-sign-h, .jm-dot[data-sign="check"] .jm-sign-check { display:inline; }

/* A brief glint, spaced out and offset from one point to the next: never two at once */
.jm-dot::after { content:''; position:absolute; inset:-2px; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 64%); transform:translateX(-120%); pointer-events:none; }
@media (prefers-reduced-motion: no-preference) {
  .jm-map.is-ready .jm-point[data-state="new"] .jm-dot::after { animation:jm-glint 8s linear infinite; animation-delay:calc(var(--i, 0) * 1.6s + 1.2s); }
}
@keyframes jm-glint { 0% { transform:translateX(-120%); } 9% { transform:translateX(120%); } 100% { transform:translateX(120%); } }

/* The label next to each point */
.jm-label { position:absolute; display:block; white-space:nowrap; padding:5px 10px; border-radius:999px; background:rgba(251,249,245,.93); border:1px solid rgba(201,168,76,.5); box-shadow:0 2px 8px rgba(98,69,40,.1); font:600 12.5px/1.25 'Manrope',sans-serif; letter-spacing:.01em; color:#32271f; }
.jm-point[data-state="seen"] .jm-label { border-color:rgba(173,162,147,.6); }
.jm-point[data-side="right"] .jm-label { left:40px; top:50%; transform:translateY(-50%); }
.jm-point[data-side="left"] .jm-label { right:40px; top:calc(50% + var(--ly, 0px)); transform:translateY(-50%); }
.jm-point[data-side="above"] .jm-label { bottom:42px; left:var(--lx, 4px); }
.jm-point[data-side="below"] .jm-label { top:42px; left:var(--lx, 4px); }
/* Near the left edge, --lx (set on the point) starts the label at the left of the image */

.jm-point:focus { outline:none; }
.jm-point:focus-visible .jm-dot { box-shadow:0 0 0 2px #fffaf0, 0 0 0 4px #32271f; }
.jm-point:focus-visible .jm-label { border-color:#32271f; }
@media (hover:hover) {
  .jm-point .jm-label { transition:border-color 240ms ease, box-shadow 240ms ease; }
  .jm-point:hover .jm-label { border-color:#a88326; box-shadow:0 4px 12px rgba(98,69,40,.16); }
}

/* ---- The five answers ----
   Without JavaScript they read as a list under the map. With it, each becomes a dialog. */
.jm-answers { width:min(680px, calc(100% - 40px)); margin:0 auto; }
.jm-panel { padding:28px 0 8px; border-top:1px solid #d9cfc1; }
.jm-bar { display:flex; align-items:center; gap:4px; min-height:44px; }
.collection-home .jm-name { margin:0; font:700 11px/1.3 'Manrope',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#806038; }
.jm-icon { display:block; width:36px; height:36px; margin:22px 0 12px; fill:none; stroke:#806038; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.collection-home .jm-title { font-size:32px; line-height:1.08; letter-spacing:-.02em; margin:0 0 16px; }
.collection-home .jm-text p { margin:0 0 14px; font-size:17px; line-height:1.6; color:#5a4b3e; }
.jm-app { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:4px; font:600 16px/1.2 'Manrope',sans-serif; color:#32271f; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
.jm-app:hover { text-decoration-color:#806038; }

/* Read more: the deeper text opens in place, inside the panel */
.jm-more { align-self:stretch; margin-top:2px; }
.jm-more > summary { display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; font:600 16px/1.2 'Manrope',sans-serif; color:#32271f; -webkit-tap-highlight-color:transparent; }
.jm-more > summary::-webkit-details-marker { display:none; }
.jm-more > summary > span:first-child { text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
.jm-more-sign, .jm-guide-sign { position:relative; flex:none; width:26px; height:26px; border-radius:50%; background:#eee7dc; }
.jm-more-sign::before, .jm-more-sign::after, .jm-guide-sign::before, .jm-guide-sign::after { content:''; position:absolute; left:50%; top:50%; width:11px; height:1.6px; background:#806038; transform:translate(-50%,-50%); transition:transform 280ms ease; }
.jm-more-sign::after, .jm-guide-sign::after { transform:translate(-50%,-50%) rotate(90deg); }
.jm-more[open] .jm-more-sign::after, .jm-guide-item[open] .jm-guide-sign::after { transform:translate(-50%,-50%) rotate(0deg); }
.jm-more-body { padding-top:10px; margin-top:8px; border-top:1px solid #e4dcd0; }
.collection-home .jm-more-body p { margin:0 0 14px; font-size:17px; line-height:1.65; color:#5a4b3e; }
.jm-more-body a, .jm-guide-body a { color:#32271f; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#c9ad7f; }

.jm-answers.is-ready { width:auto; margin:0; }
/* A real pop-up: the page stays visible around it and faintly through it (80 % opaque, blurred) */
.jm-answers.is-ready .jm-panel { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:calc(env(safe-area-inset-top) + 18px) max(14px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 18px) max(14px, env(safe-area-inset-left)); border:0; background:rgba(38,28,18,.3); cursor:pointer; }
.jm-answers.is-ready .jm-panel[hidden] { display:none; }
.jm-answers.is-ready .jm-sheet { position:relative; display:flex; flex-direction:column; align-items:flex-start; width:min(100%, 560px); max-height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:14px 22px 24px; border-radius:24px; background:rgba(251,249,245,.8); -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15); border:1px solid rgba(255,255,255,.65); box-shadow:0 30px 80px rgba(40,28,15,.28), 0 2px 8px rgba(40,28,15,.08); cursor:auto; outline:none; }
.jm-answers.is-ready .jm-bar { align-self:stretch; margin-right:-10px; }
.jm-answers.is-ready .jm-icon { margin-top:14px; }
@media (prefers-reduced-motion: no-preference) {
  .jm-answers.is-ready .jm-panel:not([hidden]) { animation:jm-fade 220ms ease-out both; }
  .jm-answers.is-ready .jm-panel:not([hidden]) .jm-sheet { animation:jm-rise 340ms cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes jm-fade { from { opacity:0; } to { opacity:1; } }
@keyframes jm-rise { from { transform:translateY(14px) scale(.985); } to { transform:none; } }

.jm-x { flex:none; display:grid; place-items:center; width:44px; height:44px; margin-left:auto; padding:0; border:0; background:none; color:#806038; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.jm-x svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.jm-x[hidden] { display:none; }
.jm-x:focus { outline:none; }
.jm-x:focus-visible { outline:2px solid #32271f!important; outline-offset:-4px; border-radius:50%; }

/* Scroll stays where it was: the page is simply held while a panel is open */
html.jm-lock, html.jm-lock body { overflow:hidden; }
body.jm-open a.appstore-sticky { opacity:0!important; visibility:hidden; pointer-events:none; transition:none; }

/* ---- Under the map: the Deep Guides, one after another, each opening in place ---- */
.jm-deep.collection-section { padding-block:40px 64px; }
.jm-deep-wrap { max-width:760px; }
.jm-deep-head { text-align:center; margin:0 auto 22px; }
.collection-home .jm-deep-head h2 { font-size:clamp(32px, 8vw, 44px); margin:0 0 6px; }
.collection-home .jm-deep-head p { margin:0; font-size:15px; }
.jm-guides { border-top:1px solid #d9cfc1; }
.jm-guide-item { border-bottom:1px solid #d9cfc1; }
.jm-guide-item > summary { display:grid; grid-template-columns:92px 1fr 26px; gap:14px; align-items:center; min-height:44px; padding:14px 0; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
.jm-guide-item > summary::-webkit-details-marker { display:none; }
.jm-thumb { display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 4px 12px rgba(98,69,40,.12); }
.jm-guide-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.jm-guide-title { font:500 21px/1.15 'Cormorant Garamond',Georgia,serif; color:#32271f; }
.jm-guide-desc { font-size:14px; line-height:1.5; color:#695a4c; }
.jm-guide-item > summary:hover .jm-guide-title { text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
.jm-guide-item > summary:focus-visible { outline:2px solid #32271f; outline-offset:4px; border-radius:6px; }
.jm-guide-body { padding:2px 0 20px; }
.collection-home .jm-guide-body p { margin:0 0 14px; max-width:64ch; font-size:16px; line-height:1.75; color:#5a4b3e; }
@media (min-width:768px) { .jm-guide-item > summary { grid-template-columns:132px 1fr 26px; gap:20px; } .jm-guide-title { font-size:24px; } }

/* ---- Larger screens: intro on the left, map on the right ---- */
@media (min-width:900px) {
  .jm-top { padding:28px 0 16px; }
  .jm-top-wrap { display:grid; grid-template-columns:1fr minmax(0, 440px); gap:64px; align-items:center; padding-inline:32px; }
  .jm-intro { text-align:left; }
  .collection-home .jm-intro h1 { font-size:clamp(48px, 5vw, 64px); }
  .jm-map { margin-top:0; }
  .jm-disclaimer { margin-top:-6%; }
  .jm-answers.is-ready .jm-sheet { padding:18px 34px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .jm-dot::after { display:none; }
  .jm-map.is-ready .jm-point, .jm-point .jm-label, .jm-more-sign::before, .jm-more-sign::after, .jm-guide-sign::before, .jm-guide-sign::after { transition:none; }
}