/* Reference lock: x0 home-hero.css and forms-accordion/blog-home.css.
   Supplied artwork is unchanged; only its transparent outer margin is cropped. */
.home-hero { position:relative; width:100%; aspect-ratio:3778/1788; margin-top:12px; isolation:isolate; }
.home-art { position:absolute; inset:0; overflow:hidden; pointer-events:none; isolation:isolate; }
.home-art img { position:absolute; top:-14.0939597315%; left:-5.955531% ; width:113.710958%; height:auto; max-width:none; }
/* First П begins at source x=1760; artwork crop begins at x=225. */
.home-copy { position:absolute; top:22%; left:40.6299629434%; right:1.5%; }
.home-copy h1 { max-width:430px; margin:0 0 28px; font:700 28.8px/.784 Arial,Helvetica,sans-serif; letter-spacing:-.035em; text-wrap:balance; -webkit-text-stroke:.025em currentColor; }
.home-copy p { max-width:none; margin:0; font-size:15.5px; line-height:1.32; color:var(--ink); text-wrap:pretty; }
.home-copy .keep-together { white-space:nowrap; }
.home-copy p + p { margin-top:12px; }
.home-faq { margin:var(--section-space-before) 0 var(--section-space-before); }
.home-faq-list { border-top:1px solid var(--ink); }
.home-question { border-bottom:1px solid var(--ink); }
.home-question summary { display:grid; grid-template-columns:24px minmax(0,1fr) 26px; align-items:center; gap:16px; min-height:58px; padding:14px 0; list-style:none; cursor:pointer; font:700 21px/1.15 Arial,Helvetica,sans-serif; letter-spacing:-.03em; }
.home-question summary::-webkit-details-marker { display:none; }
.home-question-number { color:var(--body); font:400 11px/1.4 var(--label-font); letter-spacing:0; }
.home-question-mark { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--ink); border-radius:50%; font:400 20px/1 Arial,sans-serif; }
.home-question-mark::before { content:'+'; }
.home-question[open] .home-question-mark::before { content:'−'; }
.home-question[open] .home-question-mark { background:var(--accent); }
.home-answer { max-width:790px; padding:0 40px 20px; color:var(--body); font-size:15px; line-height:1.5; }
.home-answer p + p { margin-top:10px; }
.home-directions { margin:var(--section-space-before) 0 0; container-type:inline-size; }
.home-directions-track { --open-panel-size:calc(50cqw - 24px); display:flex; gap:12px; width:100%; height:var(--open-panel-size); overflow:hidden; }
.home-direction { position:relative; flex:0 0 calc(12.5cqw - 6px); min-width:0; height:100%; overflow:hidden; border:1px solid var(--ink); border-radius:var(--radius); background:var(--ink); isolation:isolate; transition:flex-basis .62s cubic-bezier(.2,.72,.13,1); }
.home-direction.is-open { flex-basis:var(--open-panel-size); }
/* Entrance uses transform/opacity without moving the five-panel layout. */
.home-direction { transform-origin:50% 0; }
.directions-enter-pending .home-direction { opacity:0; }
.direction-activate { position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; text-align:left; cursor:pointer; }
.direction-activate img { width:100%; height:100%; object-fit:cover; object-position:center; }
.direction-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.16) 62%,rgba(0,0,0,.02)); pointer-events:none; }
.direction-vertical { position:absolute; bottom:22px; left:50%; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl; color:white; font:700 15px/1.1 Arial,Helvetica,sans-serif; text-transform:uppercase; white-space:nowrap; transition:opacity .2s; }
.direction-caption { position:absolute; right:24px; bottom:24px; left:24px; --caption-gap:9px; display:flex; flex-direction:column; align-items:flex-start; gap:var(--caption-gap); color:white; opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none; transition:opacity .3s,transform .45s,visibility .3s; }
.direction-number { font:400 40px/.95 var(--label-font); letter-spacing:-.15em; }
.direction-caption h3 { max-width:100%; font:700 clamp(18px,3.2cqw,30px)/1 Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:-.035em; }
.direction-caption p { margin-top:calc(var(--caption-gap) * -47 / 75); margin-bottom:calc(var(--caption-gap) / 3); max-width:340px; color:white; font-size:14px; line-height:1.3; }
.direction-link { display:flex; align-items:center; justify-content:space-between; width:50%; gap:20px; white-space:nowrap; min-height:44px; margin-top:5px; padding:11px 16px; border:1px solid white; border-radius:999px; color:white; font:400 10px/1.4 var(--label-font); text-decoration:none; pointer-events:auto; }
.direction-link .chevron { flex:none; width:16px; height:16px; }
@media(max-width:925px) {
 .direction-link { padding-inline:10px; gap:8px; }
 .direction-link .chevron { width:14px; height:14px; }
}
.home-direction.is-open .direction-caption { visibility:visible; opacity:1; transform:none; transition-delay:.12s; }
.home-direction.is-open .direction-vertical { opacity:0; }
.direction-activate:focus-visible { outline:3px solid var(--accent); outline-offset:-6px; }
.direction-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:1080px) {
 .home-hero { display:flex; flex-direction:column; aspect-ratio:auto; }
 .home-art { position:relative; inset:auto; flex:none; width:100%; aspect-ratio:3778/1788; }
 .home-copy { position:relative; top:auto; left:auto; right:auto; width:100%; margin:16px 0 6px; }
 .home-copy h1 { max-width:none; font-size:26.4px; margin-bottom:12px; }
 .home-copy p { max-width:680px; font-size:15px; }
}
@media(min-width:681px) and (max-width:925px) {
 .direction-caption { left:18px; right:18px; bottom:18px; --caption-gap:7px; }
 .direction-number { font-size:32px; }
 .direction-caption p { font-size:12px; }
}
@media(max-width:680px) {
 .home-hero { margin-top:8px; }
 .home-copy h1 { font-size:26.4px; }
 .home-copy p { font-size:14px; line-height:1.4; }
 .home-question summary { grid-template-columns:20px minmax(0,1fr) 26px; gap:10px; font-size:18px; min-height:60px; padding:13px 0; }
 .home-answer { padding-left:30px; padding-right:0; font-size:14px; }
 .home-directions-track { height:auto; gap:10px; padding-bottom:8px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--ink) transparent; }
 .home-direction,.home-direction.is-open { flex:0 0 min(76vw,355px); height:auto; aspect-ratio:1; scroll-snap-align:start; }
 .direction-vertical { display:none; }
 .direction-caption,.home-direction.is-open .direction-caption { left:19px; right:17px; bottom:20px; --caption-gap:7px; visibility:visible; opacity:1; transform:none; }
 .direction-number { font-size:30px; }
 .direction-caption h3 { font-size:clamp(21px,5.8vw,28px); }
 .direction-caption p { font-size:12px; }
 .direction-link { width:calc(50% - 1px); margin-top:3px; min-height:44px; }
}
@media(hover:hover) {
 .home-question summary:hover .home-question-mark { background:var(--accent); }
 .home-question[open] summary:hover .home-question-mark { background:var(--ink); color:var(--accent); }
 .direction-link:hover { background:var(--accent); color:var(--ink); border-color:var(--accent); }
}
@media(prefers-reduced-motion:reduce) {
 .home-direction,.direction-vertical,.direction-caption { transition:none; }
 .directions-enter-pending .home-direction { opacity:1; }
}

/* Comments: the five circular previews follow the existing 936px field. */
.home-comments { margin:var(--section-space-before) 0 48px; container-type:inline-size; }
.comments-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,3.5cqw,32px); width:100%; }
.comment-preview { position:relative; display:block; width:100%; aspect-ratio:1; overflow:hidden; padding:0; border:1px solid var(--ink); border-radius:50%; background:var(--ink); isolation:isolate; touch-action:manipulation; }
.comment-preview img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:transform .3s; }
.comment-preview::after { content:''; position:absolute; inset:0; background:#0002; pointer-events:none; }
.comment-preview-play { position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:#fff; pointer-events:none; }
.comment-preview-play svg { width:clamp(18px,3.5cqw,32px); height:auto; fill:currentColor; filter:drop-shadow(0 1px 4px #0008); }
.comment-preview[aria-expanded="true"] { opacity:.45; }
.comment-preview:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.comment-player { position:fixed; inset:0; width:var(--comment-size,624px); max-width:calc(100vw - 32px); max-height:none; margin:auto; padding:0; overflow:visible; border:0; background:transparent; color:#fff; overscroll-behavior:contain; }
.comment-player::backdrop { background:#17181999; backdrop-filter:blur(3px); }
.comment-player-view { position:relative; width:100%; aspect-ratio:1; overflow:hidden; border:1px solid #fff8; border-radius:50%; background:#171819; box-shadow:0 20px 64px #0003; }
.comment-player video { display:block; width:100%; height:100%; object-fit:cover; }
.comment-video-toggle { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; border:0; border-radius:50%; background:#0003; color:#fff; }
.comment-video-toggle svg { width:48px; height:48px; fill:currentColor; }
 .comment-player-view.is-playing .comment-video-toggle { background:transparent; }
.comment-player-view.is-playing .comment-video-toggle svg { visibility:hidden; }
.comment-video-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-8px; }
.comment-progress-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.comment-progress-ring circle { fill:none; stroke-width:.6; }
.comment-progress-track { stroke:#ffffff35; }
.comment-progress-value { stroke:var(--accent); stroke-linecap:round; stroke-dasharray:307.876080052; stroke-dashoffset:307.876080052; }
.comment-progress-accessible { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.comment-player-close { position:absolute; top:0; right:0; display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); }
.comment-player-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
.comment-player-title { margin:15px 0 0; font:400 11px/1.4 var(--label-font); text-align:center; text-wrap:balance; }
.comment-player-status { position:absolute; top:62%; left:15%; right:15%; margin:0; color:#fff; font:400 11px/1.4 var(--label-font); text-align:center; text-wrap:balance; pointer-events:none; }
.comment-player-status:empty { display:none; }
@media(max-width:680px) {
 .home-comments { margin-bottom:36px; }
}
@media(hover:hover) {
 .comment-preview:hover img { transform:scale(1.04); }
 .comment-player-close:hover { background:var(--accent); }
}
@media(prefers-reduced-motion:reduce) {
 .comment-preview img { transition:none; }
}

/* The image is made of moving texture tiles; the static image stays hidden until assembly ends. */
.home-art-particles { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.home-art.is-assembling img { opacity:0; }
@media(prefers-reduced-motion:reduce) {
 .home-art-particles { display:none; }
 .home-art.is-assembling img { opacity:1; }
}

/* Native text keeps its original wrapping; a temporary glyph layer folds in. */
.home-title-hidden .home-copy > h1 { opacity:0!important; }
.home-description-hidden .home-copy > p { opacity:0; visibility:hidden; }
.home-lower-hidden > section:not(.home-hero),.home-entry-footer-hidden { opacity:0; visibility:hidden; }
.home-title-fold { position:absolute; display:block; z-index:2; pointer-events:none; user-select:none; }
.home-fold-segment { position:absolute; display:block; perspective:700px; white-space:pre; }
.home-fold-piece { position:relative; display:inline-block; font:inherit; white-space:pre; transform-origin:50% 0%; backface-visibility:hidden; }
.home-fold-piece::after { -webkit-text-stroke:0; content:attr(data-fold-text); position:absolute; inset:0; pointer-events:none; color:transparent; -webkit-text-fill-color:transparent; background-image:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.22) 42%,rgba(255,255,255,.26)); -webkit-background-clip:text; background-clip:text; opacity:var(--heading-crease,0); }
@media(prefers-reduced-motion:reduce) {
 .home-title-hidden .home-copy > h1,.home-description-hidden .home-copy > p,.home-lower-hidden > section:not(.home-hero),.home-entry-footer-hidden { opacity:1!important; visibility:visible!important; }
 .home-title-fold { display:none; }
}