@font-face{font-family:HeeboLocal;src:url('assets/fonts/Heebo-VariableFont_wght.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
[hidden]{display:none!important}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:HeeboLocal,Heebo,Arial,sans-serif;color:#fff;background:#8c461d}button,a{font:inherit}a{color:inherit}.language{position:fixed;z-index:20;top:15px;right:20px;display:flex;gap:7px;align-items:center;background:rgba(58,29,13,.34);padding:8px 12px;border-radius:18px;font-family:HeeboLocal,Heebo,Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;direction:ltr;backdrop-filter:blur(8px)}.language button{border:0;background:none;color:#f4e8d9;cursor:pointer;padding:2px;opacity:.62;transition:opacity .25s}.language button:hover,.language button[aria-pressed=true]{font-weight:500;opacity:1;text-decoration:none}.language>span{opacity:.35}.hero{height:100svh;min-height:520px;position:relative;display:grid;place-items:center;overflow:hidden;background:#65402b}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,14,9,.51),rgba(47,23,11,.38))}.hero-content{position:relative;text-align:center;padding:24px;max-width:640px}.hero h1{font-size:clamp(38px,4.3vw,58px);line-height:1.08;margin:0 0 14px;font-weight:700}.hero p{font-size:clamp(13px,1.15vw,17px);font-weight:600;margin:0 0 17px}.hero-content h1:lang(he),.hero-content p:lang(he){font-family:HeeboLocal,Heebo,Arial,sans-serif}.hero-content h1:lang(he){font-weight:500;letter-spacing:.012em}.hero-content p:lang(he){font-weight:500;letter-spacing:.018em}.ltr{font-family:HeeboLocal,Heebo,Arial,sans-serif}.social{display:flex;justify-content:center;align-items:center;gap:20px;direction:ltr}.social a{display:grid;place-items:center;width:24px;height:24px;text-decoration:none;color:#fff;opacity:.96}.social svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.social .apple rect,.social .spotify circle{fill:currentColor;stroke:none}.social .apple path{stroke:#3c281e;stroke-width:1.5}.social .apple ellipse{fill:#3c281e;stroke:none}.social .spotify path{stroke:#3c281e;stroke-width:1.35}.social .fill{fill:currentColor;stroke:none}.down{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(39,20,12,.44);text-decoration:none;margin:21px auto 0}.down svg{width:19px;height:29px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}main{min-height:100vh;background-color:#914819;background-image:linear-gradient(180deg,rgba(118,48,17,.87),rgba(137,61,22,.84) 45%,rgba(112,45,17,.9)),repeating-linear-gradient(27deg,transparent 0 11px,rgba(255,218,174,.035) 12px 13px,transparent 15px 23px),url('assets/page-background.jpg');background-size:cover,auto,cover;background-position:center,center,center 22%;background-attachment:fixed,fixed,fixed}.wrap{width:min(100% - 30px,576px);margin:auto;padding:34px 0 50px}hr{border:0;border-top:1px solid rgba(255,235,215,.28);margin:29px -100vw}.quick-links,.accordion,.links{display:grid;gap:13px}.outline{width:100%;min-height:47px;border:1px solid rgba(255,245,234,.79);border-radius:13px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:15px;font-weight:700;position:relative;text-align:center;padding:10px 42px;cursor:pointer}.outline .edge{position:absolute;inset-inline-start:14px;font-size:17px;font-weight:400}.outline .chevron{position:absolute;inset-inline-end:14px;font-size:13px;font-weight:400}.panel{background:#fff0e3;color:#513f35;border-radius:12px;padding:15px;margin-top:-4px;font-size:14px;line-height:1.36}.panel img{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:8px;margin-bottom:16px}.panel h2{font-size:16px;margin:17px 0 10px}.panel p{margin:0 0 14px}.panel p:last-child{margin-bottom:0}.media-block video{display:block;width:100%;border-radius:5px;aspect-ratio:16/9;object-fit:cover;background:#3e2c21}.media-copy{text-align:start;font-size:14px;line-height:1.5}.media-copy h2{font-size:16px;margin:17px 0 8px}.media-copy p{margin:0}.links{margin-top:13px}.closing{text-align:center;font-size:15px;font-weight:700}.closing img{width:100%;aspect-ratio:1.9;object-fit:cover;border-radius:5px;margin:15px 0}.closing p{line-height:1.5}.closing a{text-decoration:underline;text-underline-offset:3px}.ltr .panel,.ltr .media-copy{text-align:left}@media(max-width:640px){.language{right:12px;top:12px}.hero{min-height:550px}.hero h1{font-size:41px}.hero p{font-size:14px}.wrap{width:min(100% - 28px,576px);padding-top:28px}.panel{font-size:14px}.outline{font-size:15px}hr{margin:25px -100vw}main{background-attachment:scroll,scroll,scroll;background-position:center,center,54% top}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-video{display:none}}
main{overflow:hidden}hr{width:calc(100vw - 30px);max-width:1050px;margin:29px 0;position:relative;left:50%;transform:translateX(-50%)}
.quick-links{margin-bottom:13px}

/* Branded link cards */
.brand-link{min-height:47px;border:1px solid rgba(255,245,234,.79);border-radius:13px;color:#fff;display:flex;align-items:center;justify-content:center;gap:11px;text-decoration:none;font-size:15px;font-weight:700;padding:10px 18px;transition:background .2s,color .2s,border-color .2s}
.brand-icon{display:block;flex:0 0 22px;width:22px;height:22px;overflow:visible}
.instagram-icon circle{fill:none;stroke:#fff;stroke-width:1.65}.instagram-icon .brand-fill{fill:#fff;stroke:none}
.whatsapp-icon .brand-fill{fill:#25d366;stroke:none}.whatsapp-icon path:last-child{fill:#fff;stroke:none}
.spotify-icon .brand-fill{fill:#1ed760;stroke:none}.spotify-icon path{fill:none;stroke:#101010;stroke-width:1.45;stroke-linecap:round}
.messenger-icon path:last-child{fill:#fff;stroke:none}
.brand-list{display:grid;gap:10px;padding:12px}.brand-list .brand-link{justify-content:flex-start;color:#513f35;border-color:rgba(81,63,53,.18);font-weight:600}.brand-list .brand-link:hover{background:#fff8f2}
.accordion-item.is-open{overflow:hidden;border-radius:13px;background:#fff0e3}.accordion-item.is-open>.outline{display:flex;color:#513f35;background:#fff0e3;border:0;border-bottom:1px solid rgba(81,63,53,.16);border-radius:0}.accordion-item.is-open>.outline .chevron{transform:rotate(180deg)}.accordion-item.is-open>.panel{margin-top:0;border-radius:0;padding:17px}.links-item.is-open>.panel{padding:12px}
.closing video{display:block;width:100%;aspect-ratio:1.9;object-fit:cover;border-radius:5px;margin:15px 0;background:#3e2c21}.closing>.brand-link{margin-top:24px}
.down svg{animation:scroll-cue 3.2s ease-in-out infinite}@keyframes scroll-cue{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
@media(prefers-reduced-motion:reduce){.down svg{animation:none}}

/* Subtle Hopp typography and motion refinements */
body{letter-spacing:.012em;font-weight:400}html[lang=he] body{letter-spacing:.016em}html[lang=en] body,html[lang=nl] body{letter-spacing:.014em}.hero h1{font-weight:600;letter-spacing:.015em}.hero p{font-weight:500;letter-spacing:.014em}.hero-content h1:lang(he){font-weight:500;letter-spacing:.02em}.hero-content p:lang(he){font-weight:500;letter-spacing:.022em}.outline,.brand-link,.closing{font-weight:600}.panel h2,.media-copy h2,.closing h2{font-weight:600}
.social .instagram-brand{display:block;width:24px;height:24px;object-fit:contain}.brand-icon.instagram-icon{object-fit:contain;border-radius:5px}
.panel{overflow:hidden;transition:max-height .18s cubic-bezier(.2,.72,.35,1)}
.down{animation:scroll-circle 3.4s ease-in-out infinite}.down svg{animation:scroll-arrow 3.4s ease-in-out infinite}@keyframes scroll-circle{0%,100%{transform:translateY(-1px)}50%{transform:translateY(4px)}}@keyframes scroll-arrow{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.down,.down svg{animation:none}}

/* Lightweight draggable gallery and image preview */
.photo-strip{display:flex;gap:10px;width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;direction:ltr;margin:15px 0 4px;touch-action:pan-x}.photo-strip::-webkit-scrollbar{display:none}.photo-strip:active{cursor:grabbing}.photo-thumb{flex:0 0 38%;aspect-ratio:1;border:0;border-radius:8px;overflow:hidden;padding:0;background:transparent;cursor:pointer;scroll-snap-align:start}.photo-thumb img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:5vh 5vw;background:rgba(25,15,10,.68);opacity:0;transition:opacity .18s ease;cursor:zoom-out}.lightbox.is-visible{opacity:1}.lightbox img{display:block;max-width:min(88vw,900px);max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 16px 50px rgba(0,0,0,.28);transform:scale(.975);transition:transform .18s ease;cursor:default}.lightbox.is-visible img{transform:scale(1)}.closing-body{margin-bottom:0}@media(max-width:640px){.photo-thumb{flex-basis:40%}.lightbox{padding:4vh 18px}.lightbox img{max-width:calc(100vw - 36px);max-height:84vh}}

/* Final interaction polish */
.accordion-item{transition:background-color .18s cubic-bezier(.2,.72,.35,1)}.accordion-item>.outline{transition:background-color .18s cubic-bezier(.2,.72,.35,1),color .18s cubic-bezier(.2,.72,.35,1),border-color .18s cubic-bezier(.2,.72,.35,1),border-radius .18s cubic-bezier(.2,.72,.35,1)}.accordion-item.is-open.is-closing{background:transparent}.accordion-item.is-open.is-closing>.outline{color:#fff;background:transparent;border:1px solid rgba(255,245,234,.79);border-radius:13px}
.closing>.brand-link{text-decoration:none}.closing>.brand-link span{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .18s ease}@media(hover:hover){.closing>.brand-link:hover span{background-size:100% 1px}}

/* Reference-matched card scale, warm foreground and continuous card motion */
:root{--light-foreground:#fff3e8;--card-motion:.28s cubic-bezier(.22,.7,.28,1)}
body{color:var(--light-foreground)}
.outline,.brand-link{min-height:54px;border-radius:14px;color:var(--light-foreground);padding-block:12px}
.outline{padding-inline:46px}
.accordion-item{overflow:hidden;border-radius:14px;transition:background-color var(--card-motion),border-radius var(--card-motion)}
.accordion-item>.outline{transition:background-color var(--card-motion),color var(--card-motion),border-color var(--card-motion),border-radius var(--card-motion)}
.panel{transition:max-height var(--card-motion)}
.accordion-item.is-open.is-closing{background:transparent}
.accordion-item.is-open.is-closing>.outline{color:var(--light-foreground);background:transparent;border-color:rgba(255,245,234,.79);border-radius:14px}
.card-close{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;margin:22px auto 2px;padding:0;background:var(--light-foreground);color:#15110e;cursor:pointer;font-size:25px;font-weight:300;line-height:1;opacity:0;transform:scale(.9);transition:opacity .18s ease,transform .18s ease}
.accordion-item.is-open:not(.is-closing) .card-close{opacity:1;transform:scale(1)}
.card-close span{display:block;transform:translateY(-1px)}
.panel[hidden] .card-close{display:none}
.social a{width:30px;height:30px;color:var(--light-foreground)}
.social svg,.social .instagram-brand{width:30px;height:30px}
.social .apple rect,.social .spotify circle{fill:var(--light-foreground)}
html[dir=rtl] hr{direction:ltr}

/* Master refinement: transparent-to-cream cards and unified interactive details */
hr{left:auto;margin-left:50%;margin-right:0;transform:translateX(-50%)}
.down{background:rgba(39,20,12,.27)}
.outline .chevron{font-size:14px;opacity:1;transform:scaleX(1.16);transform-origin:center;transition:opacity .2s ease,transform .2s ease}
.accordion-item.is-open>.outline .chevron{opacity:0;transform:scaleX(1.16)}
.accordion-item.is-open.is-closing>.outline .chevron{opacity:1;transform:scaleX(1.16)}
.quick-links>.brand-link span,.closing>.brand-link span,.links-item .brand-link span{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .18s ease}
@media(hover:hover){.quick-links>.brand-link:hover span,.closing>.brand-link:hover span,.links-item .brand-link:hover span{background-size:100% 1px}}
.whatsapp-icon .brand-fill{fill:var(--light-foreground)}
.official-whatsapp{color:var(--light-foreground)}
.whatsapp-icon path.brand-fill:last-child{fill:var(--light-foreground)}

/* Final-frame close fix: collapse the rendered panel box before hiding it */
.panel{opacity:1;transition:max-height var(--card-motion),padding-block var(--card-motion),opacity .17s ease}
.accordion-item.is-open.is-closing>.panel{padding-top:0;padding-bottom:0;opacity:0}
.social .official-whatsapp{width:27px;height:27px}
.brand-link .whatsapp-icon .brand-fill,.brand-link .whatsapp-icon path.brand-fill:last-child{fill:#25d366}

/* Direction-neutral dividers and reference-matched vector icon row */
hr{position:relative;width:100%;max-width:none;height:1px;margin:29px 0;border:0;overflow:visible;left:auto;transform:none;background:none}
hr::before{content:"";position:absolute;top:0;left:50%;width:calc(100vw - 30px);max-width:1050px;border-top:1px solid rgba(255,235,215,.28);transform:translateX(-50%);pointer-events:none}
html[dir=rtl] hr{direction:inherit}
.language{font-family:Manrope,HeeboLocal,Heebo,Arial,sans-serif;font-weight:500;letter-spacing:.055em}
.social{gap:20px}
.social a{width:24px;height:24px}
.social svg,.social .instagram-brand,.social .official-whatsapp{width:24px;height:24px;shape-rendering:geometricPrecision}
.social svg *{vector-effect:non-scaling-stroke}

/* Subtle closed-state emphasis for the relocated Links card. */
.links-item:not(.is-open)>.outline{background:rgba(214,112,47,.4)}

.links-item .brand-link{text-decoration:none}

.links-item.is-open .brand-list>.brand-link{color:#fff;background-color:transparent;background-image:linear-gradient(rgba(255,240,227,.56),rgba(255,240,227,.56)),linear-gradient(180deg,rgba(118,48,17,.87),rgba(137,61,22,.84) 45%,rgba(112,45,17,.9)),repeating-linear-gradient(27deg,transparent 0 11px,rgba(255,218,174,.035) 12px 13px,transparent 15px 23px),url('assets/page-background.jpg');background-size:auto,cover,auto,cover;background-position:center,center,center,center 22%;background-attachment:scroll,fixed,fixed,fixed}
@media(max-width:640px){.links-item.is-open .brand-list>.brand-link{background-attachment:scroll,scroll,scroll,scroll;background-position:center,center,center,54% top}}
.links-item.is-open .brand-list>.brand-link span{text-shadow:0 0 5px rgba(255,255,255,.24)}

.closing>p>a{transition:text-shadow .18s ease}
@media(hover:hover){.closing>p>a:hover{text-shadow:0 0 6px currentColor}}

.closing>h2{margin-bottom:7px}
.closing>.closing-body{margin-top:0}

.hero-brand-mark{display:block;width:clamp(38px,4vw,46px);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 11px}
.closing img.bottom-brand-mark{display:block;width:36px;height:auto;aspect-ratio:1;object-fit:contain;border-radius:0;margin:0;opacity:1}
@media(max-width:640px){.hero-brand-mark{width:38px;margin-bottom:10px}.closing img.bottom-brand-mark{width:32px}.brand-signature{height:107px}}

/* Preserve the final space, centering the symbol between the CTA and page edge. */
main>.wrap{padding-bottom:0}
.brand-signature{height:114px;display:flex;align-items:center;justify-content:center}
@media(max-width:640px){.brand-signature{height:107px}}

/* Move the mark without shifting the centered hero composition. */
.hero-brand-mark{transform:translateY(-4.4px)}
.social svg.spotify{transform:scale(1.08)}
@media(max-width:640px){.hero-brand-mark{transform:translateY(-4px)}}

/* Tighten only the space below the brand group; preserve icon geometry. */
.hero h1{margin-bottom:10px}
.social svg.official-whatsapp{transform:scale(.92)}

/* Give the inline content 30% more presence without overflowing small screens. */
@media(min-width:641px){
  .wrap{width:min(100% - 30px,749px)}
  .quick-links,.accordion,.links{gap:17px}
  .outline,.brand-link{min-height:70px;padding-block:16px}
  .accordion-item.is-open>.panel{padding:22px}
  .links-item.is-open>.panel{padding:16px}
}
@media(max-width:640px){
  .outline,.brand-link{min-height:70px;padding-block:16px}
}

/* Keep the garden footage natural while giving its colors a gentle lift. */
.media-image .content-video{filter:saturate(1.08)}

/* Keep the hero copy inside the phone viewport while preserving desktop scale. */
.hero-content{width:min(100%,640px)}
@media(max-width:640px){.hero-content>p{max-width:330px;margin:0 auto 17px;line-height:1.4}}

/* Interactive audio archive: a quiet, tactile tape drawer between film and links. */
.audio-archive{margin:34px 0 26px;padding:clamp(18px,4vw,30px);border:1px solid rgba(255,241,226,.42);border-radius:18px;background:rgba(71,31,15,.24);box-shadow:inset 0 1px rgba(255,255,255,.06);text-align:left;direction:ltr;overflow:hidden}
.archive-heading{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:end;margin-bottom:20px}
.archive-kicker{grid-column:1/-1;font-family:Manrope,Arial,sans-serif;font-size:9px;letter-spacing:.22em;opacity:.58}
.archive-heading h2{margin:0!important;font-size:clamp(23px,3vw,31px);font-weight:500;letter-spacing:.01em;text-transform:none}
.archive-heading p{grid-column:1/-1;justify-self:center;max-width:430px;margin:6px 0 0!important;font-size:12px;line-height:1.45;font-weight:400;opacity:.76;text-align:center}
.archive-deck{position:relative;padding:16px;border-radius:14px;background:#ead3bc;color:#4c2d20;box-shadow:0 13px 30px rgba(47,20,9,.16),inset 0 0 0 1px rgba(77,43,29,.13)}
.archive-tape{position:relative;height:118px;border:1px solid rgba(71,41,28,.22);border-radius:11px;background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 45%),#cf9b70;overflow:hidden}
.archive-tape::before,.archive-tape::after{content:"";position:absolute;top:14px;width:6px;height:6px;border-radius:50%;background:#7f4b31;box-shadow:0 84px #7f4b31}
.archive-tape::before{left:14px}.archive-tape::after{right:14px}
.archive-reel{position:absolute;top:25px;width:68px;height:68px;border:8px double rgba(70,40,27,.72);border-radius:50%;background:repeating-conic-gradient(rgba(70,40,27,.8) 0 7deg,transparent 7deg 30deg);box-shadow:inset 0 0 0 10px rgba(240,221,198,.8);transform-origin:center;animation:archive-reel-turn 4.8s linear infinite;animation-play-state:paused}
.archive-reel::after{content:"";position:absolute;inset:19px;border-radius:50%;background:#75432d}
.archive-reel-left{left:11%}.archive-reel-right{right:11%;animation-duration:5.15s}
.archive-tape-window{position:absolute;left:50%;top:31px;transform:translateX(-50%);display:flex;flex-direction:column;justify-content:center;width:38%;height:56px;border-radius:4px;background:#f1e2ce;text-align:center;letter-spacing:.13em}
.archive-tape-window b{font:600 9px/1.2 Manrope,Arial,sans-serif}.archive-tape-window small{margin-top:6px;font:500 6px/1.2 Manrope,Arial,sans-serif;opacity:.62}
.archive-now{display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;margin-top:13px;text-align:left}
.archive-toggle{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(76,45,32,.38);border-radius:50%;padding:0;background:transparent;color:#4c2d20;cursor:pointer}
.archive-play-icon{display:block;width:16px;height:16px;fill:currentColor;transform:translateX(1px)}
.archive-pause-shape{display:none}.is-playing .archive-play-icon{transform:none}.is-playing .archive-play-shape{display:none}.is-playing .archive-pause-shape{display:block}
.archive-now-label{display:block;font:500 8px/1.2 Manrope,Arial,sans-serif;letter-spacing:.15em;opacity:.55}
.archive-now-title{display:block;margin-top:3px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archive-time{font:500 10px/1 Manrope,Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.archive-progress-shell{--progress:0%;position:relative;height:34px;margin-top:7px;cursor:pointer;touch-action:none}
.archive-progress-shell::before,.archive-progress-shell::after{content:"";position:absolute;left:0;bottom:2px;height:2px;border-radius:2px;pointer-events:none}
.archive-progress-shell::before{right:0;background:rgba(117,67,45,.2)}
.archive-progress-shell::after{width:var(--progress);background:#75432d}
.archive-wave{display:flex;align-items:center;height:27px;gap:3px;margin:0;opacity:.38;overflow:hidden;pointer-events:none}
.archive-wave i{display:block;flex:1;height:calc(4px + (var(--bar) % 7) * 2px);border-radius:3px;background:#75432d;transform:scaleY(.55);transform-origin:center;transition:transform .25s ease}
.is-playing .archive-wave i{animation:archive-signal .72s ease-in-out infinite alternate;animation-delay:calc(var(--bar) * -43ms)}
@keyframes archive-signal{to{transform:scaleY(1.5)}}
.is-playing .archive-reel{animation-play-state:running}
@keyframes archive-reel-turn{to{transform:rotate(360deg)}}
.archive-progress{position:absolute;z-index:2;left:0;top:-10px;width:100%;height:54px;margin:0;opacity:.001;cursor:pointer;touch-action:none;-webkit-appearance:none;appearance:none}
.archive-progress::-webkit-slider-runnable-track{height:54px;background:transparent}.archive-progress::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:54px;border:0;background:transparent}.archive-progress::-moz-range-track{height:54px;border:0;background:transparent}.archive-progress::-moz-range-thumb{width:38px;height:54px;border:0;background:transparent}
.archive-progress:focus-visible{opacity:.18;outline:2px solid #75432d;outline-offset:3px;border-radius:5px}
.archive-tracks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.archive-track{display:grid;grid-template-columns:29px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:53px;border:1px solid rgba(255,241,226,.3);border-radius:9px;padding:8px 10px;background:rgba(255,240,227,.06);color:#fff3e8;text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.archive-track:hover,.archive-track[aria-pressed=true]{background:rgba(236,180,126,.2);border-color:rgba(255,241,226,.7)}
.archive-track[aria-pressed=true]{transform:translateY(-1px)}
.archive-index{font:500 9px/1 Manrope,Arial,sans-serif;letter-spacing:.1em;opacity:.52}
.archive-track-title{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archive-duration{font:500 9px/1 Manrope,Arial,sans-serif;opacity:.48;font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .audio-archive{margin:27px 0 23px;padding:14px;border-radius:15px}
  .archive-heading{grid-template-columns:1fr;gap:6px;margin-bottom:15px}
  .archive-heading p{max-width:290px;text-align:center;font-size:11px}
  .archive-deck{padding:11px}
  .archive-tape{height:102px}
  .archive-reel{top:23px;width:57px;height:57px;border-width:7px;box-shadow:inset 0 0 0 8px rgba(240,221,198,.8)}
  .archive-reel::after{inset:16px}.archive-reel-left{left:8%}.archive-reel-right{right:8%}
  .archive-tape-window{top:28px;width:42%;height:49px}
  .archive-now{grid-template-columns:40px minmax(0,1fr) auto;gap:9px}.archive-toggle{width:40px;height:40px}
  .archive-tracks{grid-template-columns:1fr;gap:7px}.archive-track{min-height:52px}
}
@media(prefers-reduced-motion:reduce){.is-playing .archive-wave i,.archive-reel{animation:none}}

/* A tactile vertical unroll; card narrowing is phone-only below. */
.panel{transform-origin:top center;will-change:max-height,clip-path,transform;transition:max-height var(--card-motion),padding-block var(--card-motion),opacity .17s ease,clip-path var(--card-motion),transform var(--card-motion)}

/* Mobile background stays fixed while content scrolls over the centered portrait crop. */
@media(max-width:640px){
  main{position:relative;background:none}
  main::before{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;background-color:#914819;background-image:linear-gradient(180deg,rgba(118,48,17,.87),rgba(137,61,22,.84) 45%,rgba(112,45,17,.9)),repeating-linear-gradient(27deg,transparent 0 11px,rgba(255,218,174,.035) 12px 13px,transparent 15px 23px),url('assets/page-background.jpg');background-size:cover,auto,cover;background-position:center,center,43% 40%;background-repeat:no-repeat,repeat,no-repeat}
  main>.wrap{position:relative;z-index:1}
}

/* Keep the original card width; slim only the closed state vertically. */
.quick-links>.brand-link,.closing>.brand-link,.accordion-item:not(.is-open)>.outline{min-height:49px;padding-top:8px;padding-bottom:8px}

/* Hebrew archive heading and copy follow natural RTL reading order. */
html[dir=rtl] .archive-heading h2{grid-column:1/-1;width:100%;text-align:right;direction:rtl}
html[dir=rtl] .archive-heading p{direction:rtl;unicode-bidi:plaintext}

/* Phone cards: compact when closed, then widen before the panel unrolls. */
@media(max-width:640px){
  .quick-links{width:70%;margin-inline:auto}
  .accordion-item{width:70%;margin-inline:auto;transition:width .2s cubic-bezier(.22,.7,.28,1),background-color var(--card-motion),border-radius var(--card-motion)}
  .accordion-item.is-open{width:100%}
  .closing>.brand-link{width:70%;margin-left:auto;margin-right:auto}
  .quick-links>.brand-link,.closing>.brand-link,.accordion-item:not(.is-open)>.outline{min-height:70px;padding-top:16px;padding-bottom:16px}
  .accordion-item.is-open:not(.is-closing)>.panel{transition-delay:.2s,.2s,.2s,.2s,.2s}
}

/* Keep the opening film and its content above the fixed mobile page background. */
.hero{z-index:2}

/* Swipeable enlarged gallery, preserving the existing lightbox treatment. */
.lightbox img{touch-action:none;user-select:none;cursor:grab;will-change:transform,opacity}
.lightbox img.is-dragging{cursor:grabbing;transition:none}
.lightbox.is-visible img.slide-out-left{opacity:0;transform:translateX(-42px) scale(.985)}
.lightbox.is-visible img.slide-out-right{opacity:0;transform:translateX(42px) scale(.985)}
.lightbox.is-visible img.slide-in-left{opacity:0;transform:translateX(-42px) scale(.985)}
.lightbox.is-visible img.slide-in-right{opacity:0;transform:translateX(42px) scale(.985)}

/* Keep the Who I Am portrait at the existing size while showing Ido's full face. */
.panel img.who-am-i-photo{object-position:center 31%}

/* Paired closing photographs between the sound archive and final content. */
.closing-image-pair{display:flex;justify-content:center;align-items:stretch;gap:14px;margin:28px auto;width:100%}
.closing .closing-image-pair img{display:block;width:min(42%,320px);aspect-ratio:3/4;object-fit:cover;object-position:center;border:1px solid rgba(255,240,222,.78);border-radius:7px;padding:5px;background:rgba(255,240,222,.1);box-shadow:0 8px 24px rgba(40,18,8,.18);margin:0}
@media(max-width:640px){.closing-image-pair{gap:9px}.closing .closing-image-pair img{width:46%;padding:4px}}