:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101010;color:#f7f5ed;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}.top{height:78px;padding:0 max(5%,calc((100vw - 1250px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #303030;background:#101010}.wordmark{font-size:26px;font-weight:1000;letter-spacing:-1.2px;text-decoration:none}.foot,.dot{color:#ffeb00}.foot{font-size:18px}.top nav{display:flex;gap:30px}.top nav a{text-decoration:none;color:#d6d6d0;font-size:13px;font-weight:700}.top nav a:hover{color:#ffeb00}.hero{min-height:610px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:35px;padding:70px max(5%,calc((100vw - 1250px)/2));background:radial-gradient(circle at 85% 40%,#29270b,transparent 43%),#161616}.eyebrow{color:#ffeb00;font-weight:850;font-size:12px;letter-spacing:.18em}.hero h1{font-size:clamp(48px,6.2vw,94px);line-height:.98;letter-spacing:-.065em;margin:25px 0}.hero h1 em{color:#ffeb00;font-style:normal}.hero-copy{max-width:510px;font-size:20px;line-height:1.6;color:#dadad3}.btn{display:inline-flex;gap:25px;align-items:center;justify-content:center;text-decoration:none;padding:16px 23px;font-size:13px;font-weight:950;letter-spacing:.035em;border:2px solid transparent;border-radius:5px}.yellow{background:#ffeb00;color:#111}.yellow:hover{background:#fff65e}.outline{border-color:#aaa;background:transparent;color:white}.hero-note{font-size:11px;letter-spacing:.14em;color:#a4a4a0;margin-top:26px}.hero-art img{width:100%;max-height:350px;object-fit:contain;border-radius:15px}.hero-art small{display:block;color:#969690;text-align:center;margin-top:10px;font-size:10px}.section{max-width:1250px;margin:auto;padding:90px 5%}.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px}.section h2{font-size:clamp(35px,4.5vw,64px);line-height:1.05;letter-spacing:-.055em;margin:12px 0 35px}.section-tag{border:1px solid #666;padding:10px 12px;font-size:11px;font-weight:800;letter-spacing:.1em}.events{display:grid;gap:18px}.event{display:grid;grid-template-columns:38% 1fr;overflow:hidden;border:1px solid #363636;border-radius:12px;background:#1d1d1d}.event-photo{height:100%;min-height:290px;background:#272727;display:flex;align-items:center;justify-content:center;color:#a9a9a2;text-align:center}.event-photo img{width:100%;height:100%;max-height:460px;object-fit:cover}.event-content{padding:36px}.event-content h3{font-size:clamp(24px,3vw,40px);letter-spacing:-.04em;margin:12px 0}.event-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}.event-meta strong{display:block;font-size:11px;letter-spacing:.12em;color:#ffeb00;margin-bottom:6px}.event-meta span{line-height:1.5}.event-desc{color:#c7c7bf;line-height:1.7;white-space:pre-wrap}.event-links{display:flex;gap:12px;flex-wrap:wrap}.event-links a{border-bottom:2px solid #ffeb00;padding:7px 0;font-size:13px;font-weight:800;text-decoration:none}.empty{border:1px dashed #626262;border-radius:12px;padding:60px 35px;text-align:center;background:#191919}.empty h3{font-size:30px;margin:0 0 12px}.empty p{color:#bfbfb8}.motto{color:#ffeb00;text-align:center;font-size:clamp(18px,2.5vw,27px);font-weight:850;margin:55px auto 0}.split{border-top:1px solid #333;display:grid;grid-template-columns:1fr 1fr;gap:70px}.about-text{padding-top:35px;color:#d4d4cc;font-size:18px;line-height:1.85}.club{border-top:1px solid #333;display:grid;grid-template-columns:2fr 1fr;gap:40px}.club p:not(.eyebrow){max-width:600px;color:#ccc;line-height:1.8}.club-art{font-size:100px;line-height:.83;font-weight:1000;letter-spacing:-.1em;text-align:center;color:#ffeb00}.status{display:inline-block;margin-top:15px;padding:13px 16px;background:#292929;border:1px solid #444;border-radius:6px;color:#ddd;font-size:13px}.preview{padding-top:10px}.preview details{border-top:1px solid #444;padding-top:24px}.preview summary{cursor:pointer;font-weight:800;color:#ffeb00}.notice{color:#ddd;background:#292513;border-left:3px solid #ffeb00;padding:15px;line-height:1.6}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:13px;font-weight:700;margin:15px 0}input,textarea{display:block;width:100%;margin-top:8px;padding:13px;background:#242424;color:#fff;border:1px solid #555;border-radius:5px}input[type=file]{padding:10px}.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}footer{padding:35px 5%;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #333;color:#aaa;font-size:11px;font-weight:800;letter-spacing:.1em}@media(max-width:760px){.top{height:auto;padding:18px 6%;gap:15px;flex-wrap:wrap}.top nav{gap:16px;flex-wrap:wrap}.top nav a{font-size:12px}.hero{padding:55px 6%;grid-template-columns:1fr}.hero-art img{max-height:230px}.section{padding:60px 6%}.section-title{align-items:start;flex-direction:column}.section-tag{margin-bottom:15px}.event{grid-template-columns:1fr}.event-photo{min-height:210px;max-height:300px}.event-content{padding:24px}.event-meta{grid-template-columns:1fr}.split,.club,.fields{grid-template-columns:1fr}.club-art{display:none}footer{flex-direction:column}}

/* WOOH3 forum emoji picker */
.wooh3-emoji-wrapper {
  position: relative;
  margin: 10px 0 18px;
}

.wooh3-emoji-toggle {
  background: #242424;
  color: #ffeb00;
  border: 1px solid #777;
  border-radius: 6px;
  padding: 10px 15px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.wooh3-emoji-toggle:hover,
.wooh3-emoji-toggle:focus-visible {
  border-color: #ffeb00;
}

.wooh3-emoji-panel {
  box-sizing: border-box;
  width: min(100%, 440px);
  margin-top: 10px;
  padding: 14px;
  background: #181818;
  color: #f7f5ed;
  border: 1px solid #666;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.wooh3-emoji-panel[hidden],
.wooh3-emoji-more[hidden] {
  display: none !important;
}

.wooh3-emoji-search {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  background: #101010;
  color: white;
  border: 1px solid #777;
  border-radius: 6px;
  font: inherit;
}

.wooh3-emoji-categories {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 5px 0 10px;
  margin-bottom: 8px;
}

.wooh3-emoji-category {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 40px;
  padding: 5px;
  background: #292929;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 21px;
  cursor: pointer;
}

.wooh3-emoji-category[aria-pressed="true"] {
  border-color: #ffeb00;
  background: #454000;
}

.wooh3-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.wooh3-emoji-choice {
  min-width: 0;
  min-height: 43px;
  padding: 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 25px;
  cursor: pointer;
}

.wooh3-emoji-choice:hover,
.wooh3-emoji-choice:focus-visible {
  background: #383838;
  border-color: #ffeb00;
}

.wooh3-emoji-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: #292929;
  color: #ffeb00;
  border: 1px solid #666;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.wooh3-emoji-status {
  margin: 10px 0 0;
  color: #aaa;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 480px) {
  .wooh3-emoji-panel {
    padding: 9px;
  }

  .wooh3-emoji-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .wooh3-emoji-choice {
    font-size: 23px;
    min-height: 42px;
  }
}


/* WOOH3 MEMBER PROFILE IMAGES */

.profile-image-settings {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #555;
}

.profile-image-settings h2 {
  color: #ffeb00;
  margin: 35px 0 12px;
}

.profile-image-settings p {
  color: #ccc;
  line-height: 1.6;
}

.profile-image-settings form {
  margin: 20px 0;
}

.profile-image-settings label {
  display: block;
  margin: 18px 0 10px;
  font-weight: 700;
}

.profile-image-settings input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px;
  background: #181818;
  color: #fff;
  border: 1px solid #666;
  border-radius: 6px;
}

#avatar-crop-canvas {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 22px 0 12px;
  border: 2px solid #ffeb00;
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
  box-sizing: border-box;
}

#avatar-crop-canvas[hidden] {
  display: none;
}

#avatar-crop-canvas:active {
  cursor: grabbing;
}

#avatar-zoom {
  display: block;
  width: 100%;
  max-width: 320px;
  accent-color: #ffeb00;
}

#avatar-crop-status {
  font-size: 13px;
  color: #aaa;
  margin: 12px 0;
}

.profile-current-avatar {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #ffeb00;
  margin: 18px 0;
}

.profile-current-photo {
  display: block;
  max-width: min(100%, 640px);
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  margin: 18px 0;
}

.profile-image-settings .btn {
  margin-top: 12px;
}

.profile-image-remove {
  margin-top: 10px;
  margin-bottom: 35px;
}

.profile-image-remove button {
  background: transparent;
  color: #ff7777;
  border: 1px solid #ff7777;
}

@media (max-width: 480px) {
  .profile-image-settings {
    margin-top: 30px;
    padding-top: 20px;
  }

  #avatar-crop-canvas {
    max-width: 100%;
  }
}


/* WOOH3 FORUM AUTHOR PROFILE LAYOUT */

.forum-author-layout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.forum-author-avatar {
  display: block;
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #777;
  box-sizing: border-box;
}

.forum-author-details {
  flex: 1;
  min-width: 0;
}

.forum-author-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.forum-author-kennel {
  margin-top: 6px;
  color: #ccc;
  font-size: 13px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.forum-author-profile-link {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
}

.forum-author-profile-link a {
  color: #ffeb00;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.forum-author-profile-link a:hover {
  color: #fff;
}

.forum-author-timestamp {
  color: #aaa;
  font-size: 12px;
  font-weight: 400;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .forum-author-layout {
    gap: 10px;
  }

  .forum-author-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }
}