/* Quesly opening: a portrait, a question, a world of replies. */
.edition .hero-experience .hero-stage { background: #fff; height: 100svh; }
.edition .hero-experience .hero-media { width: 118%; will-change: transform; }
.edition .hero-experience .hero-intro { padding-top: clamp(170px,25svh,280px); }
.edition .hero-experience .hero-copy { max-width: 820px; top: 0; }
.edition .hero-experience .hero-title { font-size: clamp(64px,6.3vw,104px); line-height: 1.01; letter-spacing: -.065em; }
.hero-experience .hero-line { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-experience .hero-line > span, .hero-experience .hero-line em { display: block; }
.edition .hero-experience .hero-title em { margin: 0; }
.edition .hero-experience .hero-sub { max-width: 440px; margin-top: 32px; font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.edition .hero-experience .hero-join { min-height: 58px; padding-inline: 28px; font-size: 16px; margin-top: 30px; }
.hero-answer-scene { position: absolute; inset: 0; z-index: 5; background: transparent; pointer-events: none; }
.edition .hero-experience .hero-dock-copy { width: min(1100px,calc(100% - 2 * var(--gutter))); left: 50%; z-index: 1; }
.hero-experience .question-heading { padding: 0; min-height: 0; }
.hero-experience .question-heading > span { font-size: 11px; margin-bottom: 18px; letter-spacing: .13em; }
.edition .hero-experience .hero-dock-copy .h2 { max-width: 1000px; font-size: clamp(36px,4.1vw,64px); line-height: 1.08; letter-spacing: -.055em; font-weight: 500; text-wrap: balance; }
.hero-experience .hero-answer-scroller { z-index: 1; pointer-events: auto; }
.hero-experience .hero-answer-track { gap: 22px; padding-inline: max(24px,calc((100vw - 1100px) / 2)); padding-bottom: 2px; }
.edition .hero-experience .hero-answer-track .hero-side { overflow: visible; border-radius: 0; background: transparent; visibility: inherit; }
.hero-experience .hero-answer-track .hero-side-photo { height: var(--photo-height,320px); border-radius: 16px; object-fit: cover; }
.hero-experience .hero-answer-track .hero-side::after { display: none; }
.edition .hero-experience .hero-answer-track .hero-side-answer { position: relative; inset: auto; padding: 18px 2px 0; color: var(--deep); }
.edition .hero-experience .hero-answer-track .hero-side-answer p { color: var(--deep); font-size: 17px; line-height: 1.38; font-weight: 400; }
.hero-gallery-footer { position: absolute; top: calc(var(--answers-top,330px) + var(--answer-height,396px) + 8px); left: 50%; translate: -50% 0; width: min(1100px,calc(100% - 2 * var(--gutter))); display: flex; justify-content: space-between; align-items: center; pointer-events: auto; opacity: 0; visibility: hidden; }
.hero-experience .hero-rail-controls { position: static; translate: none; opacity: 1; visibility: inherit; }
.hero-gallery-progress { width: 120px; height: 2px; background: rgba(5,48,31,.12); position: relative; overflow: hidden; }
.hero-gallery-progress span { position: absolute; inset-block: 0; left: calc(var(--gallery-progress,0) * 80px); width: 40px; background: var(--forest); }
.hero-experience .hero-rail-controls button { width: 46px; height: 46px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .hero-experience .hero-answer-track .hero-side:hover .hero-side-photo { transform: translateY(-5px); }
}
@media (max-width:1100px) and (min-width:601px) {
 .edition .hero-experience .hero-title { font-size: clamp(56px,6.5vw,76px); }
 .edition .hero-experience .hero-copy { max-width: 620px; }
 .hero-experience .hero-prompt { display: none; }
}
@media (max-width:600px) {
 .edition .hero-experience .hero-stage { height: 100svh; }
 .edition .hero-experience .hero-media { width: 100%; }
 .edition .hero-experience .hero-intro { align-items: flex-end; padding: 110px 0 max(34px,env(safe-area-inset-bottom)); }
 .edition .hero-experience .hero-copy { max-width: 100%; }
 .edition .hero-experience .hero-title { font-size: clamp(36px,10.6vw,54px); line-height: 1.02; }
 .edition .hero-experience .hero-sub { max-width: 340px; font-size: 15px; margin-top: 22px; }
 .edition .hero-experience .hero-join { min-height: 52px; font-size: 14px; margin-top: 24px; padding-inline: 24px; }
 .hero-experience .hero-prompt { display: none; }
 .edition .hero-experience .hero-dock-copy { width: calc(100% - 40px); }
 .hero-experience .question-heading > span { font-size: 10px; margin-bottom: 14px; }
 .edition .hero-experience .hero-dock-copy .h2 { font-size: clamp(30px,8.6vw,38px); text-wrap: pretty; }
 .hero-experience .hero-answer-track { gap: 16px; padding-inline: 20px; }
 .edition .hero-experience .hero-answer-track .hero-side-answer { padding: 16px 0 0; }
 .edition .hero-experience .hero-answer-track .hero-side-answer p { font-size: 16px; }
 .hero-gallery-footer { width: calc(100% - 40px); }
}
/* The same reading order remains available without motion or JavaScript. */
.hero-experience:not(.is-animated) .hero-answer-scene { position: relative; inset: auto; clip-path: none; padding: 48px 0; }
.hero-experience:not(.is-animated) .hero-dock-copy { width: auto; margin: 0 24px 32px; }
.hero-experience:not(.is-animated) .hero-answer-scroller { padding-bottom: 0; }
.hero-experience:not(.is-animated) .hero-gallery-footer { display: none; }
@media (prefers-reduced-motion:reduce) { .hero-experience .hero-media { will-change: auto; } }

.edition .hero-experience .hero-stage { --photo-height: 320px; --answer-height: 396px; --answer-width: 260px; }
.edition .hero-experience:not(.is-animated) .hero-stage { height: auto; min-height: 100svh; }
.edition .hero-experience:not(.is-animated) .hero-dock-copy { position: relative; left: auto; right: auto; translate: none; width: auto; }

/* The original portrait lands here before the native gallery takes over. */
.edition .hero-experience .hero-dock-copy { text-align: center; }
.edition .hero-experience .hero-dock-copy .h2 { max-width: none; font-size: clamp(34px,3.7vw,56px); }
.hero-question-card .question-portrait { object-position: 52% 40%; transform: scale(1.04); transform-origin: 52% 42%; }
.edition .hero-experience .hero-answer-track .hero-question-card { overflow: hidden; border-radius: 16px; }
.hero-experience .hero-answer-track .hero-question-card .hero-side-photo { border-radius: 16px 16px 0 0; }
.edition .hero-experience .hero-question-card .hero-side-answer { height: calc(100% - var(--photo-height)); padding: 13px 15px 16px; background: var(--lime); }
.hero-question-card .hero-side-answer > span { display: block; font: 500 9px/1.2 var(--ui); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 8px; }
.edition .hero-experience .hero-question-card .hero-side-answer p { font-size: 16px; font-weight: 500; line-height: 1.25; }
@media (hover:hover) { .hero-experience .hero-answer-track .hero-question-card:hover .hero-side-photo { transform: scale(1.04); } }
.hero-side[data-answer-index="1"] .hero-side-photo { object-position: 35% center; }
.hero-side[data-answer-index="2"] .hero-side-photo { object-position: 54% center; }
@media (max-width:600px) { .edition .hero-experience .hero-dock-copy .h2 { font-size: 32px; } }

.hero-experience:not(.is-animated) .hero-question-card { order: -1; }
@media (max-width:600px) { .hero-question-card .question-portrait { object-position: 52% 42%; } }

/* Replies keep the same rhythm, with Quesly reactions as their colour. */
.hero-experience .gallery-answer-reactions { display: flex; align-items: center; gap: 3px; height: 30px; margin-top: 10px; }
.hero-experience .gallery-answer-reactions img { display: block; width: 40px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(5,48,31,.1)); }
.hero-experience .gallery-answer-reactions img:first-child { rotate: -4deg; }
.hero-experience .gallery-answer-reactions img:last-child { rotate: 3deg; }
.edition .hero-experience .hero-answer-track .hero-side:not(.hero-question-card) .hero-side-answer p { font: 400 16px/1.4 var(--ui); }
.edition .hero-experience .hero-question-card .hero-side-answer { height: auto; min-height: calc(100% - var(--photo-height)); padding: 14px 16px 17px; }
.question-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.question-brand > svg { display: block; width: 36px; height: 27px; flex: 0 0 36px; }
.question-brand > div { display: flex; flex-direction: column; gap: 3px; }
.question-brand b { font: 500 13px/1 var(--ui); letter-spacing: -.02em; }
@media (max-width:600px) { .hero-experience .gallery-answer-reactions { margin-top: 9px; } }

.hero-experience .hero-gallery-footer { min-height: 46px; }
/* Spatial answers: native horizontal exploration, one clear central question. */
.edition .hero-experience .hero-answer-scroller { top:var(--universe-top); height:var(--universe-height); bottom:auto; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.edition .hero-experience .hero-answer-track { display:block; position:relative; width:var(--universe-width); height:var(--universe-height); padding:0; }
.edition .hero-experience .hero-answer-track .hero-side { position:absolute; display:grid; grid-template-columns:86px 1fr; gap:0; background:#fff; border:1px solid rgba(5,48,31,.11); border-radius:19px; overflow:hidden; box-shadow:0 6px 22px rgba(5,48,31,.045); }
.edition .hero-experience .hero-answer-track .hero-side-photo { display:block; width:100%; height:100%; border-radius:0; object-fit:cover; transform:none; transition:none; }
.edition .hero-experience .hero-answer-track .hero-side-answer { position:relative; inset:auto; display:flex; flex-direction:column; justify-content:center; padding:12px 14px; background:#fff; }
.edition .hero-experience .hero-answer-track .hero-side:not(.hero-question-card) .hero-side-answer p { font:400 14px/1.35 var(--ui); margin:0; }
.hero-experience .gallery-answer-reactions { height:24px; margin-top:9px; }
.hero-experience .gallery-answer-reactions img { width:33px; height:24px; }
.edition .hero-experience .hero-answer-track .hero-question-card { display:block; width:var(--answer-width); height:var(--question-height); border:0; border-radius:16px; box-shadow:none; }
.edition .hero-experience .hero-answer-track .hero-question-card .hero-side-photo { height:var(--photo-height); object-position:52% 40%; transform:scale(1.04); transform-origin:52% 42%; }
.edition .hero-experience .hero-question-card .hero-side-answer { height:calc(var(--question-height) - var(--photo-height)); min-height:0; justify-content:flex-start; padding:14px 16px; background:var(--lime); }
.hero-experience .hero-gallery-footer { top:auto; bottom:12px; min-height:30px; }
@media (hover:hover) {
 .hero-experience .hero-answer-track .hero-side:hover .hero-side-photo { transform:none; }
 .edition .hero-experience .hero-side:not(.hero-question-card):hover { box-shadow:0 9px 26px rgba(5,48,31,.11); }
}
@media (max-width:600px) {
 .edition .hero-experience .hero-answer-track .hero-side { grid-template-columns:72px 1fr; border-radius:16px; }
 .edition .hero-experience .hero-answer-track .hero-side-answer { padding:10px 12px; }
 .edition .hero-experience .hero-question-card .hero-side-answer { padding:12px; }
 .edition .hero-experience .hero-question-card .hero-side-answer p { font-size:15px; }
 .question-brand { gap:6px; margin-bottom:9px; }
 .question-brand > svg { width:28px; height:22px; flex-basis:28px; }
 .question-brand b { font-size:12px; }
}
/* No motion: the same content stays in a straightforward reading layout. */
.edition .hero-experience:not(.is-animated) .hero-answer-scroller { position:relative; top:auto; height:auto; overflow:visible; opacity:1; visibility:visible; }
.edition .hero-experience:not(.is-animated) .hero-answer-track { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); width:min(1100px,100%); height:auto; margin:auto; padding:0 20px; gap:20px; }
.edition .hero-experience:not(.is-animated) .hero-answer-track .hero-side { position:relative; left:auto!important; top:auto!important; width:auto!important; height:112px!important; }
.edition .hero-experience:not(.is-animated) .hero-answer-track .hero-question-card { order:-1; height:auto!important; grid-column:1 / -1; width:220px!important; justify-self:center; }
.edition .hero-experience:not(.is-animated) .hero-question-card .hero-side-photo { height:220px; }
.edition .hero-experience:not(.is-animated) .hero-question-card .hero-side-answer { height:auto; min-height:110px; }
@media (min-width:1601px) {
 .edition .hero-experience .hero-answer-track .hero-side { grid-template-columns:98px 1fr; }
 .edition .hero-experience .hero-answer-track .hero-side:not(.hero-question-card) .hero-side-answer p { font-size:16px; }
 .edition .hero-experience .hero-question-card .hero-side-answer p { font-size:18px; }
}
/* The person answers; Quesly asks. Keep the two roles visually separate. */
.edition .hero-experience .hero-media { width:100%; }
.edition .hero-experience .hero-portrait { object-position:50% 50%; transform-origin:50% 50%; }
.edition .hero-experience .hero-answer-track .hero-question-card { background:var(--lime); display:flex; align-items:center; }
.edition .hero-experience .hero-question-card .hero-side-answer { height:auto; min-height:0; padding:24px; background:transparent; }
.edition .hero-experience .hero-question-card .hero-side-answer p { font-size:22px; line-height:1.22; }
.edition .hero-experience .hero-answer-track .hero-person-card { display:block; width:var(--person-width); height:auto; border:0; border-radius:16px; }
.edition .hero-experience .hero-answer-track .hero-person-card .hero-side-photo { height:var(--person-photo-height); object-position:50% 50%; transform:scale(1.015); transform-origin:50% 50%; }
.edition .hero-experience .hero-person-card .hero-side-answer { min-height:100px; padding:14px; }
.edition .hero-experience .hero-person-card .hero-side-answer p { font-size:14px; }
@media (max-width:600px) {
 .edition .hero-experience .hero-question-card .hero-side-answer { padding:18px; }
 .edition .hero-experience .hero-question-card .hero-side-answer p { font-size:18px; }
 .edition .hero-experience .hero-person-card .hero-side-answer { min-height:106px; padding:12px; }
 .edition .hero-experience .hero-person-card .hero-side-answer p { font-size:13px; }
}
.edition .hero-experience:not(.is-animated) .hero-answer-track .hero-person-card { height:auto!important; }
.edition .hero-experience:not(.is-animated) .hero-person-card .hero-side-photo { height:220px; }
@media (min-width:601px) {
 .edition .hero-experience .hero-title { font-size:clamp(52px,4.8vw,90px); }
}
.js .edition .hero-experience .hero-portrait { transform:scale(1.015); transform-origin:50% 50%; }
@media (prefers-reduced-motion:reduce) {
 .js .edition .hero-experience .hero-portrait { transform:none; }
}
/* All answers share one component, including the original Hero portrait. */
.edition .hero-experience .hero-answer-track .hero-person-card { display:grid; grid-template-columns:86px 1fr; border:1px solid rgba(5,48,31,.11); border-radius:19px; }
.edition .hero-experience .hero-answer-track .hero-person-card .hero-side-photo { height:100%; transform:none; border-radius:0; object-position:50% 50%; }
.edition .hero-experience .hero-person-card .hero-side-answer { min-height:0; padding:12px 14px; }
.edition .hero-experience .hero-person-card .hero-side-answer p { font:400 14px/1.35 var(--ui); }
.edition .hero-experience .hero-answer-track .hero-question-card { z-index:2; }
.edition .hero-experience .hero-answer-track .hero-side { z-index:1; }
.answer-radar { position:absolute; left:50%; top:var(--ring-y); width:0; height:0; z-index:0; pointer-events:none; opacity:0; visibility:hidden; }
.answer-radar i { position:absolute; width:360px; height:360px; left:-180px; top:-180px; border:1px solid rgba(8,86,61,.07); border-radius:50%; animation:quesly-signal 3.6s linear 1 forwards; animation-play-state:paused; }
.answer-radar i:nth-child(2) { animation-delay:-1.2s; }
.answer-radar i:nth-child(3) { animation-delay:-2.4s; }
.hero-experience.is-signal-active .answer-radar i { animation-play-state:running; }
@keyframes quesly-signal { 0% { transform:scale(.65); opacity:0; } 15% { opacity:1; } 85% { opacity:.55; } 100% { transform:scale(4.5); opacity:0; } }
@media (min-width:1601px) {
 .edition .hero-experience .hero-answer-track .hero-person-card { grid-template-columns:98px 1fr; }
 .edition .hero-experience .hero-person-card .hero-side-answer p { font-size:16px; }
}
@media (max-width:600px) {
 .edition .hero-experience .hero-answer-track .hero-person-card { grid-template-columns:72px 1fr; border-radius:16px; }
 .edition .hero-experience .hero-person-card .hero-side-answer { padding:10px 12px; }
 .edition .hero-experience .hero-person-card .hero-side-answer p { font-size:14px; }
 .edition .hero-experience .hero-question-card .hero-side-answer { padding:16px 20px; }
}
@media (prefers-reduced-motion:reduce) { .answer-radar { display:none; } }
.edition .hero-experience:not(.is-animated) .answer-radar { display:none; }
.edition .hero-experience:not(.is-animated) .hero-answer-track .hero-person-card { height:112px!important; }
.edition .hero-experience:not(.is-animated) .hero-person-card .hero-side-photo { height:100%; }
/* Keep the complete, symmetric constellation inside short viewports. */
.edition .hero-experience.is-animated .hero-answer-track .hero-side:not(.hero-question-card) { grid-template-columns:var(--thumb-width) 1fr; }
.edition .hero-experience.is-animated .hero-side:not(.hero-question-card) .hero-side-answer { padding:calc(12px * var(--universe-scale)) calc(14px * var(--universe-scale)); }
.edition .hero-experience.is-animated .hero-answer-track .hero-side:not(.hero-question-card) .hero-side-answer p { font-size:calc(14px * var(--universe-scale)); }
.hero-experience.is-animated .gallery-answer-reactions { height:calc(24px * var(--universe-scale)); margin-top:calc(9px * var(--universe-scale)); }
.hero-experience.is-animated .gallery-answer-reactions img { width:calc(33px * var(--universe-scale)); height:calc(24px * var(--universe-scale)); }
.edition .hero-experience.is-animated .hero-question-card .hero-side-answer { padding:calc(20px * var(--universe-scale)); }
.edition .hero-experience.is-animated .hero-question-card .hero-side-answer p { font-size:calc(22px * var(--universe-scale)); }
.hero-experience.is-animated .question-brand { gap:calc(8px * var(--universe-scale)); margin-bottom:calc(10px * var(--universe-scale)); }
.hero-experience.is-animated .question-brand > svg { width:calc(32px * var(--universe-scale)); height:calc(24px * var(--universe-scale)); flex-basis:calc(32px * var(--universe-scale)); }
.hero-experience.is-animated .question-brand b { font-size:calc(13px * var(--universe-scale)); }
@media (min-width:1601px) {
 .edition .hero-experience.is-animated .hero-answer-track .hero-side:not(.hero-question-card) .hero-side-answer p { font-size:calc(16px * var(--universe-scale)); }
}
@media (max-width:600px) {
 .edition .hero-experience.is-animated .hero-question-card .hero-side-answer p { font-size:calc(18px * var(--universe-scale)); }
}

/* Brand attribution should remain readable in the spatial overview. */
.edition .hero-experience .hero-answer-track .hero-side { grid-template-rows:minmax(0,1fr); }
.hero-experience .hero-side-photo, .hero-experience .hero-side-answer { min-width:0; min-height:0; }
.hero-experience.is-animated .question-brand b { font-size:max(12px,calc(13px * var(--universe-scale))); }
.hero-experience .hero-answer-scroller:focus-visible { outline:2px solid var(--forest); outline-offset:-4px; }
@media(max-width:600px) {
 .hero-experience.is-animated { margin-bottom:calc(-1 * var(--hero-tail-space,0px)); }
 .hero-experience.is-animated + .aer-how { position:relative; z-index:1; }
}
@media(min-width:601px) {
 .edition .hero-experience.is-animated .hero-answer-track .hero-side:not(.hero-question-card) .hero-side-answer p { font-size:max(13px,calc(14px * var(--universe-scale))); }
}
@media(min-width:1601px) {
 .edition .hero-experience.is-animated .hero-answer-track .hero-side:not(.hero-question-card) .hero-side-answer p { font-size:max(14px,calc(16px * var(--universe-scale))); }
}