/* =====================================================================
   York Lodge website UI kit — component styles.
   Relies on tokens from ../../colors_and_type.css
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--linen);color:var(--fg1);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.yl-scroll{height:100vh;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ---- shared type helpers ---- */
.yl-eyebrow{font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.yl-eyebrow-light{color:var(--camel)}
.yl-h2{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.1;letter-spacing:.01em;color:var(--ink);margin:.5rem 0 0}
.yl-h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15;color:var(--ink);margin:.45rem 0 0}
.yl-body{font-family:var(--font-body);font-weight:400;font-size:1rem;line-height:1.75;color:var(--fg2)}
.yl-section-head{max-width:760px;margin:0 auto;text-align:center}
.yl-section-head-dark .yl-h2{color:var(--on-dark-1)}

/* ---- buttons ---- */
.yl-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 28px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;transition:all .25s ease;text-decoration:none;line-height:1}
.yl-btn svg{width:16px;height:16px;stroke-width:1.6}
.yl-btn-primary{background:var(--camel);color:#fff}
.yl-btn-primary:hover{background:var(--accent-hover)}
.yl-btn-primary:active{background:#7E5733}
.yl-btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(244,238,230,.5);color:var(--on-dark-1)}
.yl-btn-ghost:hover{background:rgba(255,255,255,.14)}
.yl-btn-ghost svg{transition:transform .25s ease}
.yl-btn-ghost:hover svg{transform:translateX(4px)}
.yl-btn-text{background:none;border:none;color:var(--walnut);padding:14px 0}
.yl-btn-text:hover{color:var(--accent)}

/* ---- nav ---- */
.yl-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s ease,box-shadow .4s ease,padding .4s ease;padding:10px 0}
.yl-nav-inner{max-width:1280px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;justify-content:space-between}
.yl-nav.is-scrolled{background:rgba(32,38,22,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(244,238,230,.08)}
.yl-brand{font-family:var(--font-caps);font-size:1.3rem;letter-spacing:.16em;color:var(--on-dark-1);cursor:pointer}
.yl-links{display:flex;align-items:center;gap:30px}
.yl-links a{font-family:var(--font-body);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-2);text-decoration:none;cursor:pointer;position:relative;padding-bottom:3px;transition:color .25s}
.yl-links a:hover{color:var(--on-dark-1)}
.yl-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--camel);transition:width .3s ease}
.yl-links a:hover::after{width:100%}
.yl-nav-cta{padding:11px 20px}
.yl-burger{display:none;background:none;border:none;color:var(--on-dark-1);cursor:pointer}
.yl-burger svg{width:26px;height:26px}
.yl-mobile{display:none}

/* ---- hero ---- */
.yl-hero{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center}
.yl-hero-media{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);animation:yl-kenburns 22s ease-out forwards}
@keyframes yl-kenburns{to{transform:scale(1)}}
.yl-hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,9,.78) 0%,rgba(20,16,9,.30) 45%,rgba(20,16,9,.45) 100%)}
.yl-hero-content{position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:0 40px}
.yl-hero-eyebrow{color:var(--taupe);margin-bottom:18px}
.yl-hero-title{font-family:var(--font-display);font-weight:300;font-size:clamp(3.5rem,9vw,7.5rem);line-height:.98;letter-spacing:.01em;color:#F7F2EA;margin:0}
.yl-hero-sub{font-family:var(--font-body);font-weight:300;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.6;color:var(--on-dark-1);max-width:540px;margin:22px 0 34px;opacity:.92}
.yl-hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.yl-scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:6px;color:var(--on-dark-2);cursor:pointer;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.yl-scrollcue svg{width:18px;height:18px;animation:yl-bob 2.4s ease-in-out infinite}
@keyframes yl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---- facts strip ---- */
.yl-facts{background:var(--parchment);border-bottom:1px solid var(--border)}
.yl-facts-inner{max-width:1280px;margin:0 auto;display:flex;align-items:stretch;flex-wrap:wrap}
.yl-fact{flex:1 1 0;min-width:90px;padding:22px 16px;display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--border)}
.yl-fact-top{color:var(--walnut)}
.yl-fact-top svg{width:20px;height:20px;stroke-width:1.5}
.yl-fact-label{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.yl-fact-val{font-family:var(--font-display);font-size:1.55rem;color:var(--ink);line-height:1}
.yl-fact-price{flex:1.4 1 0;justify-content:center;background:var(--bone)}
.yl-fact-price-val{font-family:var(--font-display);font-size:clamp(1.3rem,1.8vw,1.75rem);color:var(--ink);line-height:1.1}
.yl-fact-cta{flex:1.6 1 0;justify-content:center;align-items:flex-start;border-right:none}

/* ---- intro ---- */
.yl-intro{padding:var(--s-10) 40px}
.yl-intro-inner{max-width:880px;margin:0 auto;text-align:center}
.yl-intro-body{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.yl-intro-body p{font-family:var(--font-body);font-weight:300;font-size:1.15rem;line-height:1.8;color:var(--fg2);margin:0}

/* ---- editorial splits ---- */
.yl-rooms{display:flex;flex-direction:column;gap:0}
.yl-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:560px}
.yl-split.is-reverse .yl-split-media{order:2}
.yl-split-media{overflow:hidden}
.yl-split-img{width:100%;height:100%;min-height:440px;background-size:cover;background-position:center;transition:transform 1.2s ease}
.yl-split:hover .yl-split-img{transform:scale(1.04)}
.yl-split-text{display:flex;flex-direction:column;justify-content:center;padding:var(--s-9) clamp(40px,6vw,90px);background:var(--linen)}
.yl-split.is-reverse .yl-split-text{background:var(--bone)}
.yl-split-text .yl-body{margin:18px 0 24px}

/* ---- tags ---- */
.yl-tags{display:flex;gap:10px;flex-wrap:wrap}
.yl-tag{font-family:var(--font-body);font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 15px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--walnut)}

/* ---- gallery ---- */
.yl-gallery{padding:var(--s-10) 40px}
.yl-gallery .yl-section-head{margin-bottom:48px}
.yl-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.yl-grid-item{position:relative;margin:0;overflow:hidden;border-radius:var(--r-sm);cursor:pointer;aspect-ratio:4/3}
.yl-grid-item.is-wide{grid-column:span 2;aspect-ratio:auto}
.yl-grid-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s ease}
.yl-grid-item:hover .yl-grid-img{transform:scale(1.05)}
.yl-grid-item figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;color:#F4EEE6;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  background:linear-gradient(to top,rgba(20,16,9,.72),rgba(20,16,9,0));opacity:0;transition:opacity .3s ease}
.yl-grid-item figcaption svg{width:16px;height:16px}
.yl-grid-item:hover figcaption{opacity:1}

/* ---- lightbox ---- */
.yl-lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,16,9,.93);display:flex;align-items:center;justify-content:center;padding:40px;animation:yl-fade .25s ease}
@keyframes yl-fade{from{opacity:0}to{opacity:1}}
.yl-lb-figure{margin:0;max-width:88vw;max-height:86vh;display:flex;flex-direction:column;gap:14px;align-items:center}
.yl-lb-figure img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-sm)}
.yl-lb-figure figcaption{color:var(--on-dark-2);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.yl-lb-close{position:absolute;top:24px;right:28px;background:none;border:none;color:var(--on-dark-1);cursor:pointer}
.yl-lb-close svg{width:30px;height:30px}
.yl-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(244,238,230,.1);border:1px solid rgba(244,238,230,.25);
  color:#F4EEE6;width:52px;height:52px;border-radius:var(--r-pill);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s}
.yl-lb-nav:hover{background:rgba(244,238,230,.22)}
.yl-lb-nav svg{width:24px;height:24px}
.yl-lb-prev{left:28px}.yl-lb-next{right:28px}

/* ---- key features (dark) ---- */
.yl-features{background:var(--forest);padding:var(--s-10) 40px}
.yl-features-inner{max-width:1080px;margin:0 auto}
.yl-features .yl-section-head{margin-bottom:48px}
.yl-feature-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 48px}
.yl-feature-list li{display:flex;align-items:flex-start;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--border-on-dark);
  color:var(--on-dark-1);font-size:1.02rem;line-height:1.5}
.yl-feature-list svg{width:18px;height:18px;color:var(--camel);stroke-width:2;flex:none;margin-top:4px}

/* ---- floor plan + video ---- */
.yl-fpv{padding:var(--s-10) 40px;background:var(--bg)}
.yl-fpv-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.yl-fp-frame{margin:26px 0;background:var(--parchment);border:1px solid var(--border);border-radius:var(--r-md);padding:28px;box-shadow:var(--shadow-sm)}
.yl-fp-svg{width:100%;height:auto}
.yl-fp-outer{fill:none;stroke:var(--walnut);stroke-width:2.5}
.yl-fp-wall{stroke:var(--border-strong);stroke-width:2}
.yl-fp-label{fill:var(--fg3);font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.1em;text-anchor:middle}
.yl-video-poster{margin-top:26px;position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background-size:cover;background-position:center}
.yl-video-scrim{position:absolute;inset:0;background:rgba(20,16,9,.32)}
.yl-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:var(--r-pill);
  border:1px solid rgba(244,238,230,.6);background:rgba(20,16,9,.35);backdrop-filter:blur(4px);color:#F4EEE6;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.yl-play:hover{background:var(--camel);border-color:var(--camel);transform:translate(-50%,-50%) scale(1.06)}
.yl-play svg{width:28px;height:28px;margin-left:3px;fill:currentColor}
.yl-video-meta{position:absolute;left:16px;bottom:14px;color:#F4EEE6;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;z-index:2}

/* ---- location ---- */
.yl-location{padding:var(--s-10) 40px;background:var(--bone)}
.yl-location-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.yl-location-text .yl-body{margin-top:18px}
.yl-transport{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.yl-transport-row{display:flex;gap:14px;align-items:center;background:var(--parchment);border:1px solid var(--border);border-radius:var(--r-sm);padding:16px 18px}
.yl-transport-icon{width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--walnut);display:flex;align-items:center;justify-content:center;flex:none}
.yl-transport-icon svg{width:19px;height:19px;stroke-width:1.6}
.yl-transport-place{font-family:var(--font-body);font-weight:600;font-size:.86rem;color:var(--ink)}
.yl-transport-detail{font-size:.76rem;color:var(--fg3);margin-top:2px}

/* ---- contact ---- */
.yl-contact{position:relative;padding:var(--s-10) 40px;background:var(--espresso);text-align:center}
.yl-contact-inner{max-width:720px;margin:0 auto}
.yl-contact-title{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,4.5vw,3.6rem);color:#F7F2EA;margin:.5rem 0 0;line-height:1.05}
.yl-contact-sub{font-family:var(--font-body);font-weight:300;font-size:1.1rem;line-height:1.7;color:var(--on-dark-2);margin:20px auto 32px;max-width:540px}
.yl-contact-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---- footer ---- */
.yl-footer{background:var(--espresso);border-top:1px solid var(--border-on-dark);padding:56px 40px 40px}
.yl-footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:40px;align-items:start}
.yl-brand-footer{font-size:1.15rem}
.yl-footer-loc{color:var(--on-dark-3);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-top:8px}
.yl-footer-agent-name{font-family:var(--font-display);font-size:1.3rem;color:var(--on-dark-1)}
.yl-footer-agent-line{color:var(--on-dark-3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:4px 0 12px}
.yl-footer-agent a{display:block;color:var(--on-dark-2);text-decoration:none;font-size:.85rem;margin-top:4px}
.yl-footer-agent a:hover{color:var(--camel)}
.yl-footer-legal p{color:var(--on-dark-3);font-size:.72rem;line-height:1.6;margin:0 0 10px}

/* ---- modal / form ---- */
.yl-modal{position:fixed;inset:0;z-index:200;background:rgba(20,16,9,.7);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;animation:yl-fade .2s ease}
.yl-modal-card{position:relative;background:var(--parchment);border-radius:var(--r-lg);max-width:520px;width:100%;padding:44px 44px 40px;box-shadow:var(--shadow-lg);max-height:92vh;overflow-y:auto}
.yl-modal-close{position:absolute;top:18px;right:18px;background:none;border:none;color:var(--fg3);cursor:pointer}
.yl-modal-close svg{width:22px;height:22px}
.yl-modal-sub{font-family:var(--font-body);font-size:.92rem;line-height:1.6;color:var(--fg2);margin:12px 0 24px}
.yl-form{display:flex;flex-direction:column;gap:16px}
.yl-field-row{display:flex;gap:14px}
.yl-field{display:flex;flex-direction:column;gap:6px;flex:1}
.yl-field>span{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--fg2)}
.yl-field>span em{font-style:normal;color:var(--fg3);font-weight:400}
.yl-field input,.yl-field select,.yl-field textarea{font-family:var(--font-body);font-size:.92rem;color:var(--ink);
  background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.yl-field input:focus,.yl-field select:focus,.yl-field textarea:focus{border-color:var(--camel);box-shadow:0 0 0 3px var(--focus-ring)}
.yl-form-submit{margin-top:6px;justify-content:center}
.yl-sent{text-align:center;padding:10px 0}
.yl-sent-mark{display:inline-flex;width:60px;height:60px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--walnut);align-items:center;justify-content:center;margin-bottom:8px}
.yl-sent-mark svg{width:28px;height:28px;stroke-width:2}

/* ---- responsive ---- */
@media(max-width:900px){
  .yl-links{display:none}
  .yl-burger{display:block}
  .yl-mobile{display:flex;flex-direction:column;gap:18px;padding:24px 40px 30px;background:rgba(32,38,22,.97);backdrop-filter:blur(10px)}
  .yl-mobile a{color:var(--on-dark-1);text-decoration:none;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
  .yl-split{grid-template-columns:1fr}
  .yl-split.is-reverse .yl-split-media{order:0}
  .yl-fpv-grid,.yl-location-inner{grid-template-columns:1fr;gap:40px}
  .yl-feature-list,.yl-transport{grid-template-columns:1fr}
  .yl-grid{grid-template-columns:1fr 1fr}
  .yl-grid-item.is-wide{grid-column:span 2}
  .yl-fact-cta{flex-basis:100%;border-top:1px solid var(--border)}
  .yl-split-text{padding:48px 32px}
}
@media(max-width:560px){
  .yl-nav-inner{padding:14px 22px}
  .yl-hero-content,.yl-intro,.yl-gallery,.yl-features,.yl-fpv,.yl-location,.yl-contact{padding-left:22px;padding-right:22px}
  .yl-grid{grid-template-columns:1fr}
  .yl-grid-item.is-wide{grid-column:span 1}
  .yl-field-row{flex-direction:column}
  .yl-split-img{min-height:280px}
  .yl-intro{padding-top:56px;padding-bottom:56px}
  .yl-intro-body p{font-size:1rem}
}