/* A faint local veil improves white text without flattening the landscape. */
.hero-copy,.experience-title{position:relative;z-index:0;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.hero-copy::before,.experience-title::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-20px;bottom:-20px;left:-30px;right:-45px;
  background:radial-gradient(ellipse closest-side at 45% 50%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.12) 58%,rgba(0,0,0,0) 100%);
}
.hero-copy{flex:0 1 960px;max-width:960px}
.experience-title{align-self:flex-start;max-width:100%}
.section-heading,.home-footer{position:relative;z-index:0;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.section-heading::before,.home-footer::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-6px;bottom:-6px;left:-18px;right:-18px;
  background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.06) 65%,rgba(0,0,0,0));
  border-radius:12px;
}
.experience-top .back-button,.experience-top .text-button,.experience-top>.eyebrow{
  background:rgba(0,0,0,.10);border-radius:10px;text-shadow:0 2px 6px rgba(0,0,0,.3);
}
.experience-top .back-button,.experience-top .text-button{padding:9px 12px}
.experience-top>.eyebrow{padding:9px 12px}
.card-bottom{text-shadow:0 2px 6px rgba(0,0,0,.35)}

/* One cream selector on cards, transport, sliders and every dialog.
   Explicit values and :focus also cover the old LG engine. */
button:focus,a:focus,input:focus,
body.keyboard-navigation button:focus,body.keyboard-navigation a:focus,body.keyboard-navigation input:focus,
.tv-app body.keyboard-navigation button:focus,.tv-app body.keyboard-navigation a:focus,.tv-app body.keyboard-navigation input:focus{
  outline:3px solid #efe5cc!important;outline-offset:5px!important;
  border-color:#efe5cc!important;box-shadow:0 0 0 7px rgba(0,0,0,.36)!important;
}
.moment-card:hover{border-color:#efe5cc}
.moment-card.is-featured{border-color:rgba(239,229,204,.75)}
body .timer-options button.selected{border-color:#efe5cc!important}
input[type=range]::-webkit-slider-thumb{background:#efe5cc!important}
input[type=range]::-moz-range-thumb{background:#efe5cc!important}

.tv-app .hero-copy{flex:0 1 1020px;max-width:1020px}
.tv-app .intro{gap:0}
@media(max-width:700px){.hero-copy{max-width:100%}.hero-copy::before,.experience-title::before{left:-12px;right:-12px}}

/* A brief, non-interactive guide floats over the each entry into the landscape. */
#landscape-guide{position:fixed;z-index:30;left:50%;bottom:7%;transform:translateX(-50%);width:790px;max-width:calc(100vw - 64px);padding:23px 32px 20px;border:1px solid rgba(239,229,204,.17);border-radius:22px;background:linear-gradient(135deg,rgba(9,16,18,.78),rgba(9,13,16,.60));color:#efe5cc;box-shadow:0 18px 70px rgba(0,0,0,.18);pointer-events:none;opacity:0}
#landscape-guide.show{animation:landscape-guide-arrival 8s ease both}
.landscape-guide-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.landscape-guide-heading .eyebrow{font-size:10px;letter-spacing:2.5px;color:#c6bba5}
.landscape-guide-heading p{font-family:var(--serif);font-size:25px;font-weight:400;margin:0;color:#f0e8d6}
.landscape-guide-controls{display:flex;align-items:center}
.landscape-guide-item{display:flex;align-items:center;flex:1;min-width:0}
.landscape-guide-item+.landscape-guide-item{border-left:1px solid rgba(239,229,204,.14);padding-left:28px;margin-left:28px}
.landscape-guide-item strong{display:block;font-size:18px;font-weight:400;line-height:1.35;margin-bottom:7px;color:#f1eadc}
.landscape-guide-item div>span{display:block;font-size:14px;line-height:1.55;color:#c8c0b2}
.guide-wheel{width:60px;height:60px;min-width:60px;margin-right:19px;fill:none;stroke:#d5c7aa;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.guide-wheel-core{stroke:rgba(213,199,170,.4)}
.guide-wheel-indicator{transform-origin:32px 32px;animation:guide-wheel-turn 2.2s ease-in-out 1 .3s}
.guide-arrows{display:flex;width:76px;min-width:76px;margin-right:19px}
.guide-arrows>span{display:flex!important;align-items:center;justify-content:center;width:35px;height:38px;border:1px solid rgba(213,199,170,.38);border-radius:12px;font-size:23px!important;color:#d5c7aa!important}
.guide-arrows>span+span{margin-left:6px}
.landscape-guide-footer{font-size:11px;line-height:1.5;margin:21px 0 0;color:#aaa395}
.landscape-guide-footer>span{float:right;color:#c8c0b2}
body[data-mode=intimate] #landscape-guide{background:linear-gradient(135deg,rgba(19,10,16,.80),rgba(13,9,13,.64))}
.screen-black #landscape-guide{visibility:hidden}
.tv-app #landscape-guide{width:1050px;max-width:calc(100vw - 160px);padding:28px 38px 25px;bottom:8%}
.tv-app .landscape-guide-heading{margin-bottom:24px}
.tv-app .landscape-guide-heading .eyebrow{font-size:16px;letter-spacing:3px}
.tv-app .landscape-guide-heading p{font-size:34px}
.tv-app .landscape-guide-item strong{font-size:27px;margin-bottom:8px}
.tv-app .landscape-guide-item div>span{font-size:22px}
.tv-app .guide-wheel{width:76px;height:76px;min-width:76px;margin-right:26px}
.tv-app .guide-arrows{width:96px;min-width:96px;margin-right:26px}
.tv-app .guide-arrows>span{width:45px;height:50px;border-radius:15px;font-size:30px!important}
.tv-app .landscape-guide-footer{font-size:18px;margin-top:27px}
@keyframes landscape-guide-arrival{0%{opacity:0;transform:translate(-50%,10px)}8%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}
@keyframes guide-wheel-turn{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-24deg)}70%{transform:rotate(24deg)}}
@media(prefers-reduced-motion:reduce){#landscape-guide.show{animation:none;opacity:1}.guide-wheel-indicator{animation:none}}
@media(max-width:700px){#landscape-guide{padding:19px 22px;bottom:6%}.landscape-guide-heading p{font-size:22px}.landscape-guide-controls{display:block}.landscape-guide-item+.landscape-guide-item{border-left:0;border-top:1px solid rgba(239,229,204,.14);padding:16px 0 0;margin:16px 0 0}.landscape-guide-footer>span{display:block;float:none;margin-top:6px}}

/* Six generous cards in two rows, with the same geometry on old LG engines. */
.brand-group{display:flex;align-items:center;min-width:0}
.brand-tagline{font-family:var(--serif);font-size:16px;font-style:italic;line-height:1.35;color:#d4d4c5;margin-left:22px;max-width:240px}
.moment-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.intro{min-height:300px;padding-top:24px;padding-bottom:24px}
.moment-card{aspect-ratio:2.4}
.card-title{font-size:32px}
.card-copy{font-size:14px;line-height:1.4}
.card-category{font-size:9px;letter-spacing:1.1px}
.tv-app .brand-tagline{font-size:22px;max-width:none;white-space:nowrap;margin-left:24px}
.tv-app .quiet-label{display:none}
.tv-app .intro{min-height:285px;padding:22px 0}
.tv-app .intro h1{font-size:70px;min-height:150px;margin:0 0 16px;line-height:1.06}
.tv-app .intro-copy{font-size:25px;margin:0;min-height:35px}
.tv-app .section-heading{padding-bottom:20px}
.tv-app .moment-grid{display:flex;flex-wrap:wrap;gap:0}
.tv-app .moment-card,.no-flex-gap .moment-card{flex:0 0 calc((100% - 40px)/3);width:calc((100% - 40px)/3);height:205px;margin:0 20px 20px 0;aspect-ratio:auto}
.tv-app .moment-card:nth-child(3n),.no-flex-gap .moment-card:nth-child(3n){margin-right:0}
.tv-app .moment-card+.moment-card,.no-flex-gap .moment-card+.moment-card{margin-left:0}
.tv-app .card-top{top:18px;left:22px;right:22px}
.tv-app .card-bottom{bottom:20px;left:22px;right:22px}
.tv-app .card-title{font-size:35px;min-height:0;margin-bottom:7px}
.tv-app .card-copy{font-size:22px;min-height:0;line-height:1.3}
.tv-app .card-category{font-size:14px;letter-spacing:1px}
.tv-app .home-footer{padding-top:2px}
@media(max-width:1100px){.brand-tagline{font-size:15px;max-width:210px}.tv-app .brand-tagline{font-size:18px;max-width:220px;white-space:normal}.tv-app .intro h1{font-size:60px;min-height:128px}.tv-app .card-title{font-size:29px}.tv-app .card-copy{font-size:19px}.tv-app .card-category{font-size:11px}.tv-app .moment-card{height:200px}}
@media(max-width:700px){.brand-tagline{font-size:12px;max-width:150px;margin-left:12px}.brand .brand-wordmark{width:125px}.intro{min-height:340px}.moment-grid{grid-template-columns:1fr}.moment-card{aspect-ratio:1.8}.tv-app .brand-tagline{font-size:14px;max-width:155px;margin-left:12px}.tv-app .moment-card{flex:0 0 100%;width:100%;margin-right:0;height:220px}.tv-app .header-line{display:none}}

/* Playback actions retain their room in the session toolbar. */
.tv-app .session-tools{flex-wrap:wrap;justify-content:flex-end;gap:20px}
.tv-app .session-tools .text-button{font-size:23px}
.no-flex-gap .session-tools>*+*{margin-left:20px}
@media(max-width:1100px){.home-footer>span{display:none}.tv-app .session-tools .text-button{font-size:18px}.tv-app .session-tools{gap:14px}.no-flex-gap .session-tools>*+*{margin-left:14px}}
@media(max-width:700px){.home-footer{flex-wrap:wrap;gap:16px}.tv-app .session-tools{justify-content:flex-start}}

/* Align the small brand phrase with the lower part of the wordmark. */
.brand-tagline{transform:translateY(12px)}
@media(max-width:700px){.brand-tagline{transform:translateY(8px)}}

/* Live catalogue duration sits after the tagline without taking remote focus. */
.brand-copy{display:flex;align-items:center;min-width:0;margin-left:22px;transform:translateY(12px)}
.brand-copy .brand-tagline,.tv-app .brand-copy .brand-tagline{margin-left:0;transform:none}
.library-duration{flex-shrink:0;margin-left:20px;padding:7px 12px;border-left:1px solid rgba(239,229,204,.22);font-size:13px;line-height:1.35;white-space:nowrap;color:#ded8c7;font-variant-numeric:tabular-nums}
.tv-app .brand-copy{margin-left:24px}
.tv-app .library-duration{font-size:20px}
.header-right{flex-shrink:0}
@media(max-width:1100px){.library-duration,.tv-app .library-duration{font-size:16px;margin-left:14px;padding-left:14px}}
@media(max-width:700px){.brand-group{flex:1}.brand-copy,.tv-app .brand-copy{flex-direction:column;align-items:flex-start;margin-left:12px;transform:translateY(5px)}.brand-copy .brand-tagline,.tv-app .brand-copy .brand-tagline{max-width:155px;white-space:normal}.library-duration,.tv-app .library-duration{margin:5px 0 0;padding:0;border:0;font-size:12px}.topbar{min-height:95px;height:auto}.header-right{gap:12px}.brand .brand-wordmark{width:110px}}

/* Brief feedback stays quiet and never reveals the playback buttons. */
#brightness-hud{background:rgba(12,16,15,.72);border:1px solid rgba(239,229,204,.16);color:#efe5cc;box-shadow:0 8px 28px rgba(0,0,0,.14);gap:0}
#brightness-hud>svg{margin-right:22px}
.brightness-hud-arrows{display:flex;flex-direction:column;margin-left:16px}
#brightness-hud .brightness-hud-arrows svg{width:16px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tv-app #brightness-hud .brightness-hud-arrows svg{width:22px;height:17px}
#brightness-hud{flex-wrap:wrap;max-width:430px}
#black-screen-choice{flex:0 0 100%;margin-top:16px;padding-top:12px;border-top:1px solid rgba(239,229,204,.25)}
#black-screen-choice-label{display:block;padding:8px 12px;border:2px solid transparent;border-radius:8px}
#black-screen-choice-help{display:block;font-size:15px;margin-top:8px}
.choosing-black #black-screen-choice-label{border-color:#fff2d6;background:rgba(239,229,204,.14)}
.tv-app #black-screen-choice-help{font-size:20px}

/* Explicit spacing also works on LG engines without flex gap. */
#about{gap:0}
#about>svg,.no-flex-gap #about>svg{margin:0 0 0 16px}
#about-dialog .panel-header{justify-content:flex-start;align-items:flex-end;margin-bottom:16px}
#about-dialog .panel-header .eyebrow{margin-bottom:5px}
#about-dialog .panel-header .icon-button{margin-left:auto;align-self:flex-start}
#about-dialog .control-help-title{font-size:11px;font-weight:400;letter-spacing:1px;margin:24px 0 0}
#about-dialog .keyboard-guide{margin:16px 0}
#about-dialog .control-help-note{font-size:11px;line-height:1.6;margin:0}
.tv-app #about-dialog .control-help-title{font-size:20px}
.tv-app #about-dialog .control-help-note{font-size:20px}
.tv-app #about-dialog .keyboard-guide{display:flex;flex-wrap:wrap;gap:0}
.tv-app #about-dialog .keyboard-guide>span{width:50%;margin-bottom:16px;padding-right:16px}
#track-hud{position:fixed;left:50%;top:48%;z-index:25;width:78px;height:78px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(10,13,13,.32);border:1px solid rgba(239,229,204,.12);color:rgba(239,229,204,.78);opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .22s,transform .22s;pointer-events:none}
#track-hud svg{width:32px;height:32px}
#track-hud.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.screen-black #track-hud{visibility:hidden}
@media(prefers-reduced-motion:reduce){#track-hud{transition:opacity .15s;transform:translate(-50%,-50%)}}

/* The wordmark is visible before the app bundle initialises. */
body.is-starting{overflow:hidden}
body.is-starting .chrome{visibility:hidden}
#startup-splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#112724;opacity:1;transition:opacity .3s ease;pointer-events:all}
#startup-splash[hidden]{display:none}
#startup-splash.is-leaving{opacity:0;pointer-events:none}
#startup-logo{position:absolute;left:50%;top:50%;display:block;width:680px;max-width:78vw;height:auto;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:reduce){#startup-splash{transition:none}}

/* Same size and vertical centre as the phrase beside the logo. */
#clock{font-size:16px;line-height:1.35;letter-spacing:.3px;transform:translateY(12px)}
.tv-app #clock{font-size:22px;line-height:1.35;min-width:4.5em}
@media(max-width:1100px){#clock{font-size:15px}.tv-app #clock{font-size:18px}}
@media(max-width:700px){#clock{font-size:12px;transform:translateY(-5px)}.tv-app #clock{font-size:14px}}

/* Circular home: two calm rows, with labels outside the photographs.
   Fixed image geometry and flex wrapping also work on Chromium 38. */
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
:root{--ambience-font-original:'Iowan Old Style',Baskerville,'Palatino Linotype',Georgia,serif;--ambience-font:'Cormorant Garamond',var(--ambience-font-original)}
.tv-app .header-right #settings{transform:translateY(12px)}
#home .intro{min-height:190px;padding:24px 0 20px}
#home .hero-copy{flex:1;max-width:none}
#home .intro h1{font-size:52px;line-height:1.12;min-height:0;margin:0 0 14px;letter-spacing:-1px}
#home .intro h1 br{display:none}
#home .intro h1 em{margin-left:.22em}
#home .intro-copy{font-size:19px;line-height:1.4;min-height:0;margin:0}
#home .section-heading .eyebrow{display:none}
#home .section-heading{padding-bottom:22px}
#home .section-heading h2{margin:0;font-size:30px}
#home .moment-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
#home .moment-card,
.tv-app #home .moment-card,
.no-flex-gap #home .moment-card{
  flex:0 0 20%;width:20%;height:282px;aspect-ratio:auto;
  margin:0 0 12px;padding:0;border:0;border-radius:0;overflow:visible;
  background:transparent;isolation:auto;transform:none;
  box-shadow:none;transition:none;text-align:center;
}
#home .moment-card>img{
  position:absolute;left:50%;top:10px;right:auto;bottom:auto;
  width:208px;height:208px;margin-left:-104px;border-radius:50%;
  z-index:0;object-fit:cover;object-position:center;filter:none;
  transform:none;transition:none;
  box-shadow:0 14px 35px rgba(0,0,0,.16);
}
#home .moment-card .card-wash{
  top:10px;bottom:auto;left:50%;right:auto;width:208px;height:208px;
  margin-left:-104px;border-radius:50%;z-index:1;
  background:linear-gradient(0deg,rgba(6,16,17,.12),transparent 60%);
}
#home #random-ambience .random-art{
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(8,23,25,.24),rgba(8,23,25,.52));
}
#home .random-art svg{width:68px;height:68px;color:#efe5cc;stroke-width:1.35;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
#home .moment-card::after{
  content:'';position:absolute;pointer-events:none;z-index:2;
  box-sizing:border-box;top:10px;left:50%;width:208px;height:208px;margin-left:-104px;
  border:1px solid rgba(239,229,204,.23);border-radius:50%;
  transition:border-color .12s ease;
}
#home .card-top,#home .card-copy,#home .card-arrow{display:none}
#home .card-bottom,
.tv-app #home .card-bottom{
  position:absolute;top:236px;bottom:auto;left:4px;right:4px;
  display:block;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.4);
}
#home .card-title,
.tv-app #home .card-title{
  display:block;min-height:0;margin:0;font-family:var(--ambience-font);font-style:italic;font-weight:400;font-size:34px;line-height:1.2;
  letter-spacing:0;color:#e3e6db;white-space:nowrap;
}
#home .preview-badge,
.tv-app #home .preview-badge{
  position:absolute;top:275px;left:0;right:0;padding:0;
  border:0;border-radius:0;background:transparent;
  font-size:11px;line-height:1.3;letter-spacing:1.8px;color:#b2bdb3;
}
/* Keep this list free of :focus-visible: Chromium 38 discards an entire
   selector list when one pseudo-class is unsupported, restoring the square. */
body #home .moment-card:focus,
body.keyboard-navigation #home .moment-card:focus,
.tv-app body.keyboard-navigation #home .moment-card:focus{
  outline:none!important;border:0!important;box-shadow:none!important;
  transform:none;
}
#home .moment-card.is-featured::after,
#home .moment-card:hover::after{border-color:rgba(239,229,204,.65)}
#home .moment-card:focus::after{
  border:6px solid #fff2d6;
  box-shadow:inset 0 0 0 2px rgba(12,30,28,.8),0 0 0 2px rgba(255,242,214,.2);
}
#home .moment-card.is-featured>img,
#home .moment-card:hover>img,
#home .moment-card:focus>img{filter:none;transform:none}
#home .moment-card:focus .card-title{color:#fff6e2}
#home .card-bottom::after{content:'';display:block;width:34px;height:3px;margin:9px auto 0;border-radius:2px;background:#fff2d6;opacity:0}
#home .moment-card:focus .card-bottom::after{opacity:1}
.tv-app .grain{display:none}
.tv-app #home .intro{height:194px;min-height:194px;padding:24px 0 20px}
.tv-app #home .intro h1{font-size:60px;min-height:0;margin:0 0 14px;line-height:1.12}
.tv-app #home .intro-copy{font-size:24px;min-height:0;max-width:none}
.tv-app #home .section-heading h2{font-size:30px}
.tv-app #home .section-heading>p{font-size:24px}
.tv-app #home .moment-card{height:294px;margin-bottom:10px}
.tv-app #home .home-footer{padding-top:8px}
.tv-app #home .home-footer>span{font-size:14px;letter-spacing:1px;color:#b9c5bb}
body:not(.experience-mode) .shade{
  background:linear-gradient(90deg,rgba(6,18,19,.61),rgba(6,18,19,.36)),linear-gradient(0deg,rgba(10,26,26,.97),rgba(10,26,26,.58) 55%,rgba(10,26,26,.06));
}
@media(max-width:1400px){
  #home .random-art svg{width:56px;height:56px}
  #home .moment-card,.tv-app #home .moment-card,.no-flex-gap #home .moment-card{height:244px}
  #home .moment-card>img,#home .moment-card .card-wash{width:168px;height:168px;margin-left:-84px}
  #home .moment-card::after{width:168px;height:168px;margin-left:-84px}
  #home .card-bottom,.tv-app #home .card-bottom{top:198px}
  #home .card-title,.tv-app #home .card-title{font-size:26px}
  #home .preview-badge,.tv-app #home .preview-badge{top:231px;font-size:9px}
  #home .intro h1,.tv-app #home .intro h1{font-size:46px}
  #home .intro-copy,.tv-app #home .intro-copy{font-size:20px}
}
@media(max-width:1000px){
  #home .moment-card,.tv-app #home .moment-card,.no-flex-gap #home .moment-card{flex-basis:33.333%;width:33.333%;height:244px}
  #home .intro,.tv-app #home .intro{height:auto;min-height:185px}
  #home .intro h1,.tv-app #home .intro h1{font-size:40px}
}
@media(max-width:600px){
  #home .random-art svg{width:48px;height:48px}
  #home .moment-card,.tv-app #home .moment-card,.no-flex-gap #home .moment-card{flex-basis:50%;width:50%;height:222px}
  #home .moment-card>img,#home .moment-card .card-wash{width:136px;height:136px;margin-left:-68px}
  #home .moment-card::after{width:136px;height:136px;margin-left:-68px}
  #home .card-bottom,.tv-app #home .card-bottom{top:169px}
  #home .card-title,.tv-app #home .card-title{font-size:23px;white-space:normal}
  #home .preview-badge,.tv-app #home .preview-badge{top:201px;font-size:8px}
  #home .intro h1,.tv-app #home .intro h1{font-size:34px}
  #home .intro h1 br{display:block}
  #home .intro h1 em{margin-left:0}
  #home .intro-copy,.tv-app #home .intro-copy{font-size:16px}
  #home .section-heading h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){#home .moment-card>img,#home .moment-card::after{transition:none}}

/* One compositor animation moves the scenery; JS never transforms both photos
   on every frame. The opaque outgoing photo remains until the incoming is ready. */
.scene{transform:translateZ(0) scale(1.035);-webkit-transform:translateZ(0) scale(1.035);backface-visibility:hidden;will-change:opacity;transition:opacity 3.2s linear}
.scenery.is-moving{animation:scenery-drift 48s ease-in-out infinite alternate;will-change:transform}
@keyframes scenery-drift{from{transform:translate3d(-.35%,0,0) scale(1.025)}to{transform:translate3d(.35%,-.35%,0) scale(1.07)}}
@media(prefers-reduced-motion:reduce){.scenery.is-moving{animation:none}}