/* Latlight landing page — layered on top of main.css (Forty) */
:root{
  --ll-bg:#242943; --ll-bg-2:#2c3252; --ll-surface:#323a5e; --ll-line:rgba(255,255,255,.12);
  --ll-text:#f2f3f8; --ll-muted:#b9bdd3; --ll-accent:#e3a857; --ll-accent-2:#9bf6ff;
  --ll-radius:14px; --ll-shadow:0 10px 30px rgba(0,0,0,.35);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100001;background:var(--ll-accent);color:#1b1e33;padding:.6rem 1rem;border-radius:8px;font-weight:600;text-decoration:none}
.skip-link:focus{top:1rem}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--ll-accent-2);outline-offset:3px}

/* ---------- Hero ---------- */
#banner.ll-hero{
  min-height:100vh;min-height:100svh;height:auto!important;max-height:none!important;
  background:#151827 url("../../images/latlight-banner.webp") center 40%/cover no-repeat!important;
  position:relative;display:flex;align-items:flex-end;justify-content:center;padding:0;
}
#banner.ll-hero:before{display:block!important;content:"";position:absolute;inset:0;opacity:1!important;
  background:linear-gradient(180deg,rgba(21,24,39,.55) 0%,rgba(21,24,39,0) 22%,rgba(21,24,39,0) 55%,rgba(36,41,67,.92) 92%,var(--ll-bg) 100%);pointer-events:none}
#banner.ll-hero:after{display:none!important}
#banner.ll-hero>.inner{position:relative;z-index:1;width:100%;max-width:56rem;padding:0 1.25rem 4.5rem!important;text-align:center;transform:none!important;opacity:1!important}
.ll-hero .ll-tagline{color:var(--ll-text);font-size:1.15rem;letter-spacing:.02em;margin:0 0 1.5rem;text-shadow:0 2px 12px rgba(0,0,0,.8);text-transform:none;line-height:1.5}
.ll-hero-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.ll-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:3.2rem;line-height:1;padding:0 1.7rem;border-radius:999px;font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s;box-shadow:none}
.ll-btn:hover{transform:translateY(-2px)}
.ll-btn-primary{background:var(--ll-accent);color:#1b1e33!important;box-shadow:0 6px 20px rgba(227,168,87,.35)}
.ll-btn-primary:hover{background:#efb96b;box-shadow:0 10px 26px rgba(227,168,87,.45)}
.ll-btn-ghost{background:rgba(21,24,39,.55);color:#fff!important;border-color:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ll-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ll-scroll-cue{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:1;color:rgba(255,255,255,.75);font-size:1.3rem;text-decoration:none;animation:ll-bob 2s ease-in-out infinite;border:0}
@keyframes ll-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- Generic sections ---------- */
.ll-section{background:var(--ll-bg);padding:5rem 1.5rem}
.ll-section.alt{background:var(--ll-bg-2)}
.ll-wrap{max-width:74rem;margin:0 auto}
.ll-head{text-align:center;max-width:42rem;margin:0 auto 3rem}
.ll-eyebrow{display:block;color:var(--ll-accent);font-size:.75rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;margin-bottom:.8rem}
.ll-head h2{color:#fff;margin:0 0 .8rem;font-size:1.9rem;letter-spacing:.08em}
.ll-head p{color:var(--ll-muted);margin:0;font-size:1.05rem;line-height:1.7;text-transform:none;letter-spacing:0}

/* ---------- Latest cards ---------- */
.ll-grid{display:grid;gap:1.5rem}
.ll-grid.latest{grid-template-columns:repeat(4,1fr)}
.ll-grid.cats{grid-template-columns:repeat(3,1fr)}
.ll-card{position:relative;display:flex;flex-direction:column;background:var(--ll-surface);border-radius:var(--ll-radius);overflow:hidden;box-shadow:var(--ll-shadow);border:1px solid var(--ll-line);color:var(--ll-text);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.ll-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.5);border-color:rgba(227,168,87,.6)}
.ll-card .ll-media{aspect-ratio:4/3;overflow:hidden;background:#1b1e33}
.ll-card .ll-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.ll-card:hover .ll-media img{transform:scale(1.06)}
.ll-card .ll-body{display:flex;flex-direction:column;gap:.55rem;padding:1.25rem 1.3rem 1.4rem;flex:1}
.ll-chip{align-self:flex-start;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.28rem .7rem;border-radius:999px;background:rgba(255,255,255,.1);color:#fff}
.ll-chip.recipes{background:rgba(232,140,60,.2);color:#ffc48a}
.ll-chip.cinema{background:rgba(190,110,220,.22);color:#e6b5f5}
.ll-chip.workshop{background:rgba(70,200,180,.2);color:#8ee9d8}
.ll-chip.facts{background:rgba(90,160,240,.22);color:#a9cfff}
.ll-card h3{margin:.15rem 0 0;font-size:1.05rem;line-height:1.4;letter-spacing:.02em;text-transform:none;color:#fff}
.ll-card .ll-sub{color:var(--ll-muted);font-size:.88rem;margin:0;letter-spacing:0;text-transform:none;line-height:1.55}
.ll-card .ll-more{margin-top:auto;padding-top:.6rem;color:var(--ll-accent);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ll-card .ll-more i{margin-left:.35rem;transition:transform .2s}
.ll-card:hover .ll-more i{transform:translateX(4px)}

/* ---------- Category cards ---------- */
.ll-cat{padding:1.9rem 1.7rem 1.8rem;gap:.7rem}
.ll-cat .ll-icon{width:3.4rem;height:3.4rem;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:rgba(227,168,87,.16);color:var(--ll-accent);margin-bottom:.4rem}
.ll-cat h3{font-size:1.2rem;letter-spacing:.04em}
.ll-cat p{color:var(--ll-muted);margin:0;line-height:1.65;font-size:.98rem;letter-spacing:0;text-transform:none}
.ll-cat .ll-more{margin-top:auto;padding-top:1rem}
.ll-cat.recipes .ll-icon{background:rgba(232,140,60,.18);color:#ffb976}
.ll-cat.cinema .ll-icon{background:rgba(190,110,220,.2);color:#e0a8f2}
.ll-cat.workshop .ll-icon{background:rgba(70,200,180,.18);color:#7fe3d0}
.ll-cat.planner .ll-icon{background:rgba(120,170,255,.18);color:#a6c6ff}
.ll-cat.facts .ll-icon{background:rgba(255,220,120,.18);color:#ffe08a}

/* Random pick card */
.ll-random{background:linear-gradient(135deg,#3a4370,#2a3050);align-items:flex-start;justify-content:center;cursor:default}
.ll-random:hover{transform:none}
.ll-random .ll-btn{margin-top:1rem;height:2.9rem}

/* ---------- About ---------- */
.ll-about{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.ll-about h2{color:#fff;margin:0 0 1rem;letter-spacing:.06em}
.ll-about p{color:var(--ll-muted);font-size:1.05rem;line-height:1.8;letter-spacing:0;text-transform:none;margin:0 0 1rem}
.ll-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.ll-stat{background:var(--ll-surface);border:1px solid var(--ll-line);border-radius:var(--ll-radius);padding:1.4rem 1rem;text-align:center}
.ll-stat b{display:block;font-size:2rem;color:var(--ll-accent);font-weight:600;line-height:1.1}
.ll-stat span{color:var(--ll-muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Contact ---------- */
.ll-contact{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.ll-form label{display:block;margin:0 0 .45rem;color:var(--ll-text);font-size:.78rem;letter-spacing:.14em}
.ll-form .ll-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.ll-form .ll-field{margin-bottom:1.2rem}
.ll-form .ll-row .ll-field{margin-bottom:0}
.ll-form input[type=text],.ll-form input[type=email],.ll-form textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--ll-line);border-radius:10px;color:#fff;padding:.85rem 1rem;height:auto;font-size:1rem;letter-spacing:0;box-shadow:none}
.ll-form textarea{min-height:9rem;resize:vertical}
.ll-form input:focus,.ll-form textarea:focus{border-color:var(--ll-accent);background:rgba(255,255,255,.09)}
.ll-hp{position:absolute!important;left:-9999px!important;height:0;width:0;overflow:hidden}
.ll-form-status{margin-top:1rem;min-height:1.5rem;font-size:.95rem}
.ll-form-status.ok{color:#8ee9a8}.ll-form-status.err{color:#ff9d9d}
.ll-form button.ll-btn{width:auto}
.ll-info{display:grid;gap:1.2rem}
.ll-info-item{display:flex;gap:1rem;align-items:flex-start;background:var(--ll-surface);border:1px solid var(--ll-line);border-radius:var(--ll-radius);padding:1.3rem}
.ll-info-item i{font-size:1.2rem;color:var(--ll-accent);margin-top:.25rem;width:1.6rem;text-align:center}
.ll-info-item h3{margin:0 0 .25rem;font-size:.85rem;letter-spacing:.16em;color:#fff}
.ll-info-item p,.ll-info-item a{margin:0;color:var(--ll-muted);letter-spacing:0;text-transform:none;font-size:1rem;border:0}
.ll-info-item a:hover{color:var(--ll-accent)}

/* ---------- Footer ---------- */
#footer.ll-footer{background:#1b1e33;padding:2.5rem 1.5rem;border-top:1px solid var(--ll-line)}
.ll-footer .ll-foot{max-width:74rem;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.ll-footer nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;flex-wrap:wrap}
.ll-footer nav a{color:var(--ll-muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;border:0}
.ll-footer nav a:hover{color:var(--ll-accent)}
.ll-footer small{color:var(--ll-muted);letter-spacing:.05em}

/* ---------- Random modal ---------- */
.ll-modal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(10,12,22,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.ll-modal.open{display:flex}
.ll-modal-box{position:relative;background:var(--ll-bg);border:1px solid var(--ll-line);border-radius:18px;max-width:640px;width:100%;padding:2.2rem;box-shadow:0 20px 60px rgba(0,0,0,.6);color:#fff}
.ll-modal-box h3{margin:0 0 1.4rem;padding-bottom:.8rem;border-bottom:1px solid var(--ll-line);letter-spacing:.1em}
.ll-modal-x{position:absolute;top:.8rem;right:1rem;background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:.2rem .6rem;height:auto;box-shadow:none}
.ll-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ll-pick{background:rgba(255,255,255,.06);border-radius:12px;padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.ll-pick small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem}
.ll-pick.r small{color:var(--ll-accent-2)}.ll-pick.m small{color:#ffadad}
.ll-pick h4{margin:0;font-size:1.1rem;line-height:1.4;text-transform:none;letter-spacing:0;color:#fff}
.ll-modal-foot{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.ll-grid.latest{grid-template-columns:repeat(2,1fr)}.ll-grid.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.ll-about,.ll-contact{grid-template-columns:1fr;gap:2rem}}
@media (max-width:640px){
  .ll-section{padding:3.5rem 1.1rem}
  .ll-head{margin-bottom:2rem}.ll-head h2{font-size:1.5rem}
  .ll-grid.latest,.ll-grid.cats{grid-template-columns:1fr}
  .ll-form .ll-row{grid-template-columns:1fr}
  .ll-pick-grid{grid-template-columns:1fr}
  #banner.ll-hero>.inner{padding-bottom:4.2rem!important}
  .ll-btn{width:100%;max-width:20rem}
  .ll-footer .ll-foot{flex-direction:column;text-align:center}
  .ll-footer nav ul{justify-content:center}
}

/* Heading / spacing normalisation */
.ll-section h2,.ll-section h3{padding:0}
.ll-about h2{line-height:1.35}
.ll-info-item h3{margin:0 0 .3rem;line-height:1.3}
.ll-info-item div{min-width:0}

/* Hero on narrow / portrait screens: show the artwork's centre (logo + icons) instead of cropping it */
@media (max-width:900px){
  #banner.ll-hero{min-height:0;background-size:max(760px,100%) auto!important;background-position:center top!important;background-color:#151827}
  #banner.ll-hero>.inner{padding-top:calc(max(760px,100vw)/2 + 1rem)!important;padding-bottom:3.6rem!important}
  #banner.ll-hero:before{background:linear-gradient(180deg,rgba(21,24,39,.5) 0,rgba(21,24,39,0) 14%,rgba(21,24,39,0) calc(max(760px,100vw)/2 - 4rem),var(--ll-bg) calc(max(760px,100vw)/2 + 2.5rem))}
  .ll-scroll-cue{display:none}
}
/* Hero on ultra-wide / short-height windows: the artwork is a 2:1 image, so once
   the viewport is wider than 2:1 "cover" has to crop it top-and-bottom to fill the
   width — chopping the title and squashing the buttons into the very bottom edge.
   Same fix as the narrow/mobile case above: stop cropping, size by width instead,
   and push the buttons down below the artwork with padding. */
@media (min-width:901px) and (min-aspect-ratio:2/1){
  #banner.ll-hero{min-height:0;background-size:100% auto!important;background-position:center top!important;background-color:#151827}
  #banner.ll-hero>.inner{padding-top:calc(100vw/2 + 2rem)!important;padding-bottom:3rem!important}
  #banner.ll-hero:before{background:linear-gradient(180deg,rgba(21,24,39,.5) 0,rgba(21,24,39,0) 14%,rgba(21,24,39,0) calc(100vw/2 - 4rem),var(--ll-bg) calc(100vw/2 + 2.5rem))}
  .ll-scroll-cue{display:none}
}
#banner.ll-hero{padding:0!important}
.ll-stat:last-child:nth-child(odd){grid-column:1/-1}

/* Seasonal seal on the hero (shown by assets/js/season.js only during the holiday's season) */
.ll-seal{position:absolute;right:4.5%;top:16%;z-index:3;width:170px;height:170px;display:block;border:0!important;text-decoration:none;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));transform:rotate(-8deg);transition:transform .3s}
.ll-seal[hidden]{display:none}
.ll-seal:hover,.ll-seal:focus-visible{transform:rotate(0) scale(1.06)}
.ll-seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:ll-seal-spin 30s linear infinite}
.ll-seal:hover .ll-seal-ring{animation-play-state:paused}
.ll-seal-pk{position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-62%)}
.ll-seal-pk svg{width:100%;height:100%;display:block;animation:ll-seal-flicker 3s infinite}
.ll-seal-days{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-weight:700;font-size:12px;line-height:1;letter-spacing:.14em;color:#f2762e;text-transform:uppercase}
@keyframes ll-seal-spin{to{transform:rotate(360deg)}}
@keyframes ll-seal-flicker{0%,100%{filter:drop-shadow(0 0 6px rgba(255,170,60,.8))}45%{filter:drop-shadow(0 0 2px rgba(255,170,60,.4))}50%{filter:drop-shadow(0 0 9px rgba(255,170,60,.95))}}
@media (max-width:736px){
  .ll-seal{width:112px;height:112px;right:10px;top:calc(max(760px,100vw)/2 - 150px)}
  .ll-seal-pk{width:48px;height:48px}
  .ll-seal-days{bottom:29px;font-size:9px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){.ll-seal-ring,.ll-seal-pk svg{animation:none}}