/* The Club — Marketing site UI kit styles. Builds on ../../colors_and_type.css tokens. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--tc-font-body);color:var(--tc-onyx);background:var(--tc-paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

.tc-container{max-width:1240px;margin:0 auto;padding-inline:var(--tc-gutter)}

/* ---- buttons ---- */
.btn{font-family:var(--tc-font-display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;border:1.5px solid transparent;display:inline-flex;align-items:center;gap:9px;
  transition:transform var(--tc-dur) var(--tc-ease),background var(--tc-dur) var(--tc-ease),color var(--tc-dur) var(--tc-ease),box-shadow var(--tc-dur) var(--tc-ease);white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--tc-onyx);color:var(--tc-limestone)}
.btn-primary:hover{background:var(--tc-graphite)}
.btn-light{background:var(--tc-limestone);color:var(--tc-onyx)}
.btn-light:hover{background:#fff}
.btn-outline{background:transparent;color:var(--tc-onyx);border-color:var(--tc-onyx)}
.btn-outline:hover{background:var(--tc-onyx);color:var(--tc-limestone)}
.btn-outline-light{background:transparent;color:var(--tc-limestone);border-color:rgba(237,237,237,.5)}
.btn-outline-light:hover{background:var(--tc-limestone);color:var(--tc-onyx);border-color:var(--tc-limestone)}
.btn-sm{padding:11px 20px;font-size:11px}

/* ---- eyebrow / heading helpers ---- */
.eyebrow{font-family:var(--tc-font-mono);font-weight:600;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--tc-slate)}
.rule-eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--tc-font-mono);font-weight:600;font-size:11px;letter-spacing:.32em;text-transform:uppercase}
.rule-eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}

.h-display{font-family:var(--tc-font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.0;margin:0}
.h2{font-family:var(--tc-font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.08;margin:0;font-size:clamp(28px,4vw,46px)}
.h3{font-family:var(--tc-font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.12;margin:0;font-size:21px}
.lead{font-size:18px;line-height:1.6;color:var(--tc-slate)}

/* ---- wordmark lockup (reusable) ---- */
.lockup{display:flex;align-items:center;gap:13px}
.lockup .mark{width:34px;height:34px;flex:none}
.lockup .mark svg{width:100%;height:100%;display:block}
.lockup .stack{display:flex;flex-direction:column;line-height:1;gap:2px}
.lockup .stack .the{font-family:var(--tc-font-mono);font-size:8px;letter-spacing:.4em;text-transform:uppercase;padding-left:.4em}
.lockup .stack .word{font-family:var(--tc-font-display);font-size:26px;line-height:.8}

/* ---- entrance animation (degrades to visible if the timeline never runs) ---- */
@keyframes tcRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{animation:tcRise var(--tc-dur-slow) var(--tc-ease) forwards}
@media (prefers-reduced-motion: reduce){.rise{animation:none}}

/* ============================================================
   AMENITY TILES — ambient motion + hover energy + scroll reveal
   ============================================================ */
.amenity-tile{position:relative;overflow:hidden;isolation:isolate}
.amenity-tile .tile-photo-wrap{position:absolute;inset:0;overflow:hidden;transform:scale(1);transition:transform .7s var(--tc-ease)}
.amenity-tile .tile-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.amenity-tile .tile-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.74) 100%);
  transition:opacity .6s var(--tc-ease)}
.amenity-tile .tile-body{position:relative;z-index:2;transition:transform .55s var(--tc-ease)}

/* slow continuous Ken Burns — each tile drifts on its own clock/direction */
@keyframes kb1{0%{transform:scale(1.08) translate(0,0)}100%{transform:scale(1.15) translate(-2%,-1.6%)}}
@keyframes kb2{0%{transform:scale(1.14) translate(1.6%,1.2%)}100%{transform:scale(1.08) translate(-1.4%,-1.2%)}}
@keyframes kb3{0%{transform:scale(1.09) translate(-1.6%,1.2%)}100%{transform:scale(1.15) translate(1.6%,-1.4%)}}
@keyframes kb4{0%{transform:scale(1.15) translate(1.4%,-1.2%)}100%{transform:scale(1.09) translate(-1.6%,1.4%)}}
.tile-photo.kb1{animation:kb1 19s var(--tc-ease-in-out) infinite alternate}
.tile-photo.kb2{animation:kb2 23s var(--tc-ease-in-out) infinite alternate}
.tile-photo.kb3{animation:kb3 21s var(--tc-ease-in-out) infinite alternate}
.tile-photo.kb4{animation:kb4 25s var(--tc-ease-in-out) infinite alternate}

/* hover: photo pushes in, label lifts, veil deepens slightly */
.amenity-tile:hover .tile-photo-wrap{transform:scale(1.045)}
.amenity-tile:hover .tile-body{transform:translateY(-7px)}
.amenity-tile:hover .tile-veil{opacity:.86}

/* the small trefoil watermark drifts up on hover */
.amenity-tile .tile-glyph{transition:transform .6s var(--tc-ease),opacity .6s var(--tc-ease)}
.amenity-tile:hover .tile-glyph{transform:translateY(-4px) rotate(-6deg);opacity:.9}

/* sub-item pills stagger up on hover */
.amenity-tile .tile-pill{transform:translateY(0);transition:transform .5s var(--tc-ease),border-color .5s var(--tc-ease),background .5s var(--tc-ease)}
.amenity-tile:hover .tile-pill{border-color:rgba(237,237,237,.85)}
.amenity-tile:hover .tile-pill:nth-child(1){transition-delay:0s}
.amenity-tile:hover .tile-pill:nth-child(2){transition-delay:.04s}
.amenity-tile:hover .tile-pill:nth-child(3){transition-delay:.08s}
.amenity-tile:hover .tile-pill:nth-child(4){transition-delay:.12s}

/* entrance: tiles are always visible; motion comes from Ken Burns + hover.
   (No opacity-gated reveal — a throttled iframe timeline can freeze it hidden.) */

@media (prefers-reduced-motion: reduce){
  .tile-photo.kb1,.tile-photo.kb2,.tile-photo.kb3,.tile-photo.kb4{animation:none}
  .amenity-tile:hover .tile-photo-wrap{transform:none}
  .amenity-tile:hover .tile-body{transform:none}
}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;transition:background var(--tc-dur) var(--tc-ease),box-shadow var(--tc-dur) var(--tc-ease),color var(--tc-dur) var(--tc-ease)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-family:var(--tc-font-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;transition:opacity var(--tc-dur)}
.nav-links a:hover{opacity:1}
.nav-burger{display:none;background:none;border:0;padding:8px}

@media(max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
}

/* ---- modal ---- */
.modal-scrim{position:fixed;inset:0;background:rgba(10,10,10,.62);backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;animation:tcFade .24s ease both}
@keyframes tcFade{from{opacity:0}to{opacity:1}}
.modal{background:var(--tc-paper);border-radius:16px;max-width:460px;width:100%;padding:40px;box-shadow:var(--tc-shadow-4);animation:tcRise .3s var(--tc-ease) both}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--tc-font-mono);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tc-slate)}
.field input,.field select{font-family:var(--tc-font-body);font-size:15px;padding:13px 14px;border:1px solid var(--tc-ash);border-radius:8px;background:#fff;color:var(--tc-onyx);transition:border-color var(--tc-dur),box-shadow var(--tc-dur)}
.field input:focus,.field select:focus{outline:none;border-color:var(--tc-onyx);box-shadow:0 0 0 3px rgba(0,0,0,.12)}