/* SMP Development — component layer on top of Tailwind.
   Fonts: Playfair Display (display) / Outfit (sans). Tokens live in tailwind.config in index.html. */

/* page routing */
.page{display:none}.page.on{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drift{from{transform:scale(1.06)}to{transform:scale(1)}}

/* type */
.eyebrow{font:500 12px/1 Outfit,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#6E7577}
.hero-h1{margin:22px 0 0;font:400 clamp(44px,6.5vw,96px)/1 "Playfair Display",serif;max-width:14ch;text-wrap:balance}
.hero-h1 em,.h2 em,.h3 em,.lede em,.quote em,h1 em{font-style:italic;font-weight:400;color:#FBAD18}
.h2{margin:18px 0 0;font:400 clamp(34px,3.8vw,56px)/1.08 "Playfair Display",serif;text-wrap:balance}
.h3{margin:12px 0 0;font:400 clamp(28px,3vw,42px)/1.05 "Playfair Display",serif}
.lede{margin:24px auto 0;max-width:22ch;font:400 clamp(30px,3.6vw,52px)/1.18 "Playfair Display",serif;text-wrap:balance}
.body-copy{font:400 17px/1.75 Outfit,sans-serif;color:#4a5154;text-wrap:pretty}
.wrap{max-width:1280px;margin:0 auto;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
.intro{padding-top:clamp(96px,14vw,180px);padding-bottom:clamp(96px,14vw,180px);text-align:center}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:clamp(72px,9vw,120px) 0 40px}

/* header */
#hdr.solid{background:#FAF8F4;color:#1d2124;padding-top:12px;padding-bottom:12px;border-bottom:1px solid #E5E6E9}
#hdr.solid .mk-w{display:none}#hdr.solid .mk-d{display:block}
.nav-l{padding:6px 0;border-bottom:1px solid transparent;transition:color .2s}.nav-l:hover{color:#FBAD18}.nav-l.cur{border-color:#FBAD18}

/* buttons */
.btn-sun{display:inline-flex;align-items:center;font:500 12px/1 Outfit,sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:18px 32px;background:#FBAD18;color:#000;border:1px solid #FBAD18;cursor:pointer;transition:background .15s,border-color .15s}
.btn-sun:hover{background:#E0960A;border-color:#E0960A;color:#000}
.btn-ghost{display:inline-flex;align-items:center;font:500 12px/1 Outfit,sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:18px 32px;border:1px solid rgba(255,255,255,.7);color:#fff;transition:background .15s}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-outline{padding:11px 20px;border:1px solid currentColor;transition:all .2s}.btn-outline:hover{background:#FBAD18;border-color:#FBAD18;color:#000}
.link{display:inline-flex;align-items:center;gap:12px;margin-top:36px;font:500 12px/1 Outfit,sans-serif;letter-spacing:.24em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid #FBAD18;cursor:pointer}
.link:after{content:"→";transition:transform .2s}.link:hover:after{transform:translateX(4px)}

/* hero */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero-short{height:72vh;min-height:520px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:drift 14s ease-out forwards}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 50%,rgba(0,0,0,.62) 100%)}
.hero-in{position:relative;z-index:1;width:100%;padding:0 clamp(20px,4vw,56px) clamp(48px,8vh,96px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.scroll-cue{font:500 11px Outfit,sans-serif;letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.scroll-cue i{display:block;width:1px;height:48px;background:#FBAD18}

/* tiles */
.tile{position:relative;overflow:hidden;color:#fff;display:block}
.tile-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile-bg{transform:scale(1.04)}
.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.68) 100%)}
.tile-cap{position:absolute;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);z-index:1}
.tile-cap p{margin:10px 0 0;font:400 15px/1.5 Outfit,sans-serif;max-width:36ch;opacity:.92}

/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr);min-height:80vh}
.split-ph{background-size:cover;background-position:center;min-height:440px}
.split-tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,7vw,120px)}
@media(min-width:861px){.split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.split-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.split-rev .split-ph{order:2}}

/* bands, quotes, testimonials */
.band{position:relative;padding:clamp(120px,16vw,220px) 0;color:#fff;text-align:center;background-size:cover;background-position:center;background-attachment:fixed}
.band:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.46)}
.quote{margin:0 auto;max-width:22ch;font:400 clamp(32px,4.2vw,62px)/1.14 "Playfair Display",serif;text-wrap:balance}
.cite{display:block;margin-top:28px;font:500 12px Outfit,sans-serif;font-style:normal;letter-spacing:.26em;text-transform:uppercase;color:#FBAD18}
.testimonial{margin:0;padding:28px;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px)}
.testimonial p{margin:0;font:italic 400 20px/1.5 "Playfair Display",serif}
.testimonial figcaption{margin-top:18px;font:500 11px Outfit,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#FBAD18}

/* stats + facts */
.stat{padding:44px 24px;text-align:center;border-right:1px solid #DAD7D0}.stat:last-child{border-right:0}
.stat b{display:block;font:400 clamp(40px,4.4vw,64px)/1 "Playfair Display",serif}.stat span{display:block;margin-top:12px}
@media(max-width:767px){.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid #DAD7D0}}
.fact{padding:26px 20px 26px 0}.fact b{display:block;margin-top:10px;font:400 20px/1.3 "Playfair Display",serif}

/* journal */
.jgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);padding-bottom:clamp(80px,10vw,140px)}
@media(min-width:861px){.jgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{cursor:pointer}.post-im{aspect-ratio:4/3;background-size:cover;background-position:center;transition:opacity .3s}.post:hover .post-im{opacity:.88}
.post h3{margin:12px 0 0;font:400 25px/1.2 "Playfair Display",serif}.post p{margin:10px 0 0;font:400 15px/1.6 Outfit,sans-serif;color:#4a5154}

/* seasons tabs */
.season{background:none;border:0;border-bottom:1px solid transparent;padding:6px 0;font:500 12px Outfit,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#6E7577;cursor:pointer}
.season.on{color:#1d2124;border-color:#FBAD18}

/* form */
.fld{display:flex;flex-direction:column;gap:10px}
.fld label{font:500 11px Outfit,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#6E7577}
.fld input,.fld textarea{font:400 17px Outfit,sans-serif;color:#1d2124;background:transparent;border:0;border-bottom:1px solid #B9B6AE;padding:8px 0 10px;border-radius:0;outline:none}
.fld input:focus,.fld textarea:focus{border-bottom:2px solid #FBAD18;padding-bottom:9px}
.chip{font:500 12px Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;background:transparent;border:1px solid #B9B6AE;color:#1d2124;cursor:pointer}
.chip.on{background:#1d2124;border-color:#1d2124;color:#fff}

/* footer */
.fcol{display:flex;flex-direction:column;gap:10px;font:400 15px/1.5 Outfit,sans-serif}
.fcol h4{margin:0 0 8px;font:500 11px Outfit,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#FBAD18}
.fcol a:hover{color:#FBAD18}