/* Invitations share the framing gesture used when entering a project. */
:root{--cta-accent:var(--accent);--cta-ease:cubic-bezier(.2,.75,.2,1)}
.cta-label{position:relative;display:inline-block}
.primary-button{padding:4px 0;min-height:52px;gap:17px;background:none;color:var(--ink);border-radius:0;font-family:var(--serif);font-size:var(--type-lead);line-height:1.2;letter-spacing:-.025em;transition:color .35s}
.primary-button span.cta-label{font:inherit;line-height:inherit}
.primary-button:hover{background:none;transform:none}
.primary-button:focus-visible,.opening-enter:focus-visible,.opening-skip:focus-visible{outline:1px solid var(--cta-accent);outline-offset:8px}
.project-note{margin-top:18px}

/* A place label: a quiet leader joins the project title to the landscape. */
.landmark-caption{padding:10px 8px 10px 0;min-height:48px;background:none;box-shadow:none;backdrop-filter:none;color:var(--ink);gap:12px;letter-spacing:-.015em;text-shadow:0 1px 3px #eeeae2,0 0 12px #eeeae2;isolation:isolate;transition:color .3s}
.landmark-caption:before{content:'';position:absolute;inset:-12px -17px;z-index:-1;background:radial-gradient(ellipse,#e5e4e1d9 0%,#e5e4e187 42%,#e5e4e100 72%);pointer-events:none}
.landmark-leader{position:relative;width:32px;height:30px;flex:0 0 32px}
.landmark-leader:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.45;transform:scaleX(.72);transform-origin:right;transition:transform .7s var(--cta-ease),opacity .45s}
.landmark-hit:is(:hover,:focus-visible,:active) .landmark-leader:before{transform:scaleX(1);opacity:.8}
@media(prefers-reduced-motion:reduce){.landmark-leader:before{transition:none}.landmark-hit:is(:hover,:focus-visible,:active) .landmark-leader:before{transform:scaleX(.72)}}
.landmark-hit:is(:hover,:focus-visible) .landmark-caption{transform:none;background:none;color:var(--ink)}
.landmark-hit:focus-visible{outline:none}
.landmark-hit:focus-visible .landmark-caption{outline:1px solid var(--cta-accent);outline-offset:5px}

/* Enter and skip are two independent gestures; travel itself is a quiet status. */
#opening-controls,#journey[data-opening-phase='entrance'] #opening-controls{left:6.3vw;right:4vw;padding:0;background:none;border-radius:0;gap:24px;pointer-events:none}
#opening-controls button{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 0;gap:17px;min-height:48px;background:none;color:var(--ink);white-space:nowrap}
#opening-controls .opening-enter{font-family:var(--serif);font-size:var(--type-lead);letter-spacing:-.025em}
#opening-controls .opening-enter .cta-label{font:inherit}
#opening-controls .opening-skip{font-size:var(--type-label);gap:14px;margin-left:auto}
.opening-travel-status{margin:0;display:flex;align-items:center;gap:14px;font-size:var(--type-label);line-height:1.4;color:var(--on-dark);text-shadow:0 1px 6px #28252bdd;max-width:260px;min-height:48px}
.trail-mark{width:26px;flex:0 0 26px;display:flex;gap:5px;align-items:center}
.trail-mark i{display:block;width:3px;height:3px;background:currentColor;animation:trail-step 2s ease-in-out infinite;opacity:.28}
.trail-mark i:nth-child(2){animation-delay:.25s}.trail-mark i:nth-child(3){animation-delay:.5s}
#journey[data-opening-phase='portrait'] .opening-travel-status{color:var(--ink);text-shadow:0 1px 12px #e5dfcd}
#journey[data-opening-phase='entrance'] .opening-skip{color:var(--on-dark);text-shadow:0 1px 6px #28252bdd}
@keyframes trail-step{0%,65%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@media(max-width:760px){
 .primary-button{font-size:var(--type-lead);gap:17px;padding:3px 0;min-height:48px}
 .landmark-caption{padding:8px 4px 8px 0;font-size:var(--type-label);gap:10px;min-height:46px}
 #opening-controls,#journey[data-opening-phase='entrance'] #opening-controls{left:26px;right:26px;gap:18px}
 #opening-controls .opening-enter{font-size:var(--type-lead);gap:16px}
 #opening-controls .opening-skip{gap:9px;font-size:var(--type-label)}
 .opening-travel-status{font-size:var(--type-label);gap:10px;max-width:180px}
 .trail-mark{width:21px;flex-basis:21px;gap:4px}
}
@media(max-width:360px){#opening-controls,#journey[data-opening-phase='entrance'] #opening-controls{left:20px;right:20px;gap:12px}#opening-controls .opening-enter{font-size:var(--type-body);gap:10px}.opening-travel-status{max-width:148px}.primary-button{font-size:var(--type-lead)}}
@media(prefers-reduced-motion:reduce){.trail-mark i{opacity:.65}}
#opening-controls .opening-skip>span{margin:0}

/* The route sits in the landscape; a feathered edge keeps the type legible. */
.journey-bottom{left:6.3vw;right:4vw;bottom:max(26px,env(safe-area-inset-bottom));isolation:isolate}
.journey-bottom:before{content:'';position:absolute;inset:-70px -8vw -60px;z-index:-1;background:linear-gradient(180deg,transparent 0%,#1c1d2510 25%,#1c1d2575 75%,#1c1d2590 100%);pointer-events:none}
.route-nav{height:70px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;color:var(--on-dark);text-shadow:0 1px 7px #17182099}
.journey-hint{margin-bottom:3px;color:var(--on-dark);font-size:var(--type-label);text-shadow:0 1px 7px #171820bb}
.route-stops{width:clamp(320px,34vw,460px)}
.route-stops>button{min-width:64px;padding:0 0 12px;color:var(--on-dark);font-size:var(--type-label);transition:color .25s}
.route-stops>button[aria-current]{color:var(--on-dark)}
.route-stops>button:is(:hover,:focus-visible){color:var(--on-dark)}
.route-stops>button:after{content:'';position:absolute;bottom:17px;left:50%;width:3px;height:3px;background:#d8d1c3;transform:translate(-50%,50%);opacity:.55;transition:opacity .3s,transform .3s}
.route-stops>button:is(:hover,:focus-visible):after{opacity:1;transform:translate(-50%,50%) scale(1.5)}
.route-stops>button[aria-current]:after{opacity:0}
.route-line{left:32px;right:32px;bottom:17px;background:#eae2d03b}
.route-line>div{background:var(--accent)}
#route-marker{width:6px;height:6px;top:-2.5px;background:var(--accent);box-shadow:0 0 9px #eac47a38}
.direction{min-width:102px;min-height:48px;padding:4px 0;gap:12px;font-size:var(--type-label)}
.direction:hover:not(:disabled)>span:last-child{translate:0 0}
.direction:disabled{opacity:.3}
.route-nav button:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
@media(max-width:760px){
 .journey-bottom{left:22px;right:22px;bottom:max(18px,env(safe-area-inset-bottom))}
 .journey-bottom:before{inset:-60px -30px -50px}
 .route-nav{height:64px;padding:0}
 .journey-hint{font-size:var(--type-label);margin-bottom:1px}
 .route-stops{width:calc(100% - 110px)}
 .route-stops>button{min-width:44px;font-size:var(--type-label);padding:0 0 12px}
 .route-line{left:22px;right:22px;bottom:17px}
 .direction{min-width:44px;width:44px;min-height:48px;justify-content:center;padding:0;gap:0}
 .direction:last-child{justify-content:center}
}


/* Folded perspective marks for the journey controls. */
.cta-frame{--cta-size:40px;position:relative;display:grid;place-items:center;width:var(--cta-size);height:var(--cta-size);flex:0 0 var(--cta-size);color:inherit}
.cta-portal svg{width:95%;height:95%;display:block;overflow:visible;shape-rendering:geometricPrecision}
.cta-portal-back svg{transform:scaleX(-1)}
.cta-portal path{stroke:currentColor;stroke-width:1.1;stroke-linejoin:miter;vector-effect:non-scaling-stroke;transition:transform .7s var(--cta-ease),opacity .45s,fill-opacity .45s}
.cta-portal .portal-rear{opacity:.45;transform-origin:24px 22px}
.cta-portal .portal-fold{fill:currentColor;fill-opacity:.03;transform-origin:24px 22px;transform:perspective(120px) rotateY(0deg)}
.fold-action:is(:hover,:focus-visible,:active):not(:disabled) .portal-fold{transform:perspective(120px) rotateY(-36deg);fill-opacity:.08}
.fold-action:is(:hover,:focus-visible,:active):not(:disabled) .portal-rear{opacity:.75;transform:scaleX(1.1)}
.direction .cta-frame,#opening-controls .opening-skip .cta-frame{--cta-size:30px}
@media(max-width:760px){
 .primary-button .cta-frame{--cta-size:36px}
 .direction .cta-frame,#opening-controls .opening-skip .cta-frame{--cta-size:28px}
}
@media(prefers-reduced-motion:reduce){
 .cta-portal path{transition:none!important}
 .fold-action:is(:hover,:focus-visible,:active):not(:disabled) .portal-fold,.fold-action:is(:hover,:focus-visible,:active):not(:disabled) .portal-rear{transform:none}
}

/* Enter moves downward; opening a case lets the typography lead. */
.scroll-track{position:relative;display:block;width:18px;height:40px;flex:0 0 18px;color:inherit}
.scroll-track:before,.scroll-track:after{content:'';position:absolute;left:50%;width:1px;background:currentColor}
.scroll-track:before{top:6px;height:28px;opacity:.22}
.scroll-track:after{top:6px;height:9px;opacity:.8;transition:transform .75s var(--cta-ease),opacity .35s}
.opening-enter:is(:hover,:focus-visible,:active):not(:disabled) .scroll-track:after{transform:translateY(19px);opacity:1}
#view-project .cta-label:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--cta-ease)}
#view-project:is(:hover,:focus-visible,:active) .cta-label:after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
 .scroll-track:after,#view-project .cta-label:after{transition:none}
 .opening-enter:is(:hover,:focus-visible,:active):not(:disabled) .scroll-track:after{transform:none}
}