/* WordJolly Premium Homepage v1.0.0
 * Self-contained page styles, activated only when [wordjolly_home] is on the static front page.
 */
:root {
  --wjhp-ink: #fefbff;
  --wjhp-muted: #d5cbd0;
  --wjhp-night: #161115;
  --wjhp-panel: #23181e;
  --wjhp-orange: #ff8233;
  --wjhp-line: rgba(255,255,255,.13);
}
html { scroll-behavior: smooth; }
body.wjhp-body {
  padding: 0; margin: 0;
  background: radial-gradient(circle at 18% 2%, #9b4129 0, #5c202b 33%, #170c13 75%, #0e0a0f 100%);
  color: var(--wjhp-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wjhp-body *, .wjhp-body *::before, .wjhp-body *::after { box-sizing: border-box; }
.wjhp-body a { color: inherit; text-decoration: none; }
.wjhp-body a:focus-visible, .wjhp-body button:focus-visible, .wjhp-body input:focus-visible {
  outline: 3px solid #ffbc78; outline-offset: 4px;
}
.wjhp-body h1,.wjhp-body h2,.wjhp-body h3,.wjhp-body p { margin-top: 0; }
.wjhp-body button, .wjhp-body input { font: inherit; }
.wjhp-body svg { width: 24px; height: 24px; display: inline-block; }
.wjhp-skip { position: absolute; top: -200px; left: 16px; background:#fff; color:#131318!important; z-index:1000; padding:12px 20px; border-radius:12px; }
.wjhp-skip:focus { top: 12px; }
.wjhp-shell {
  max-width: 1320px;
  width: calc(100% - 56px);
  margin: 44px auto 70px;
  padding: 0 0 12px;
  border-radius: 40px;
  background: #100e12;
  box-shadow: 0 34px 90px rgba(0,0,0,.28);
  overflow: clip;
}
.wjhp-hero {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 660px;
  border-radius: 40px;
  overflow: visible;
  isolation: isolate;
  background: linear-gradient(100deg,#f87222,#8e2350);
}
.wjhp-hero-photo {
  position: absolute; z-index: -3; inset:0;
  height:100%; width:100%;
  object-fit:cover; object-position: center;
  border-radius: 40px 40px 25px 25px;
}
.wjhp-hero-vignette {
  position:absolute; z-index:-2; inset:0;
  border-radius:40px 40px 25px 25px;
  background: linear-gradient(90deg,rgba(105,22,23,.28) 0%,rgba(131,35,37,.13) 47%,rgba(16,2,12,.06) 100%),
              linear-gradient(0deg,rgba(33,10,20,.35),transparent 43%);
  pointer-events:none;
}
/* Floating dark header */
.wjhp-header {
  display:flex;
  align-items:center;
  gap:25px;
  position:relative;
  margin:26px 30px 0;
  padding: 11px 16px 11px 23px;
  border-radius: 100px;
  background:rgba(17,15,20,.96);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 15px 40px rgba(24,4,14,.18);
  min-height:72px;
  z-index:8;
}
.wjhp-brand {
  display:inline-flex;align-items:center;gap:10px;
  flex-shrink:0;
  color:#fff!important;font-size:26px;font-weight:850;
  letter-spacing:-1px;line-height:1;
}
.wjhp-brand > span:last-child > span,
.wjhp-footer-brand span { color:#ff943a; }
.wjhp-brand-icon {
  height:38px;width:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:linear-gradient(145deg,#ff9b35,#fa4c44);
  box-shadow:0 5px 14px rgba(255,98,40,.26);
}
.wjhp-brand-icon svg {width:22px;height:22px;stroke-width:1.7;}
.wjhp-nav-links {display:flex;align-items:center;justify-content:center;flex:1;gap:clamp(9px,1.4vw,23px);}
.wjhp-nav-links a {
  display:inline-flex;align-items:center;
  white-space:nowrap;color:#eee7ea;
  font-size:12px; font-weight:700;
  transition:color .2s ease;
}
.wjhp-nav-links a:hover,.wjhp-nav-links .wjhp-active {color:#ff9e56!important;}
.wjhp-header-actions {display:flex;gap:9px;align-items:center; flex-shrink:0;}
.wjhp-icon-button {
  height:38px;width:38px;border:0;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.09);color:#ffab5f;
  transition:background .2s ease, transform .2s ease;
}
.wjhp-icon-button:hover {background:rgba(255,255,255,.18);transform:translateY(-2px);}
.wjhp-icon-button svg {width:20px;height:20px;}
.wjhp-nav-cta {
  display:inline-flex;align-items:center;gap:12px;
  padding:5px 6px 5px 18px;
  background:linear-gradient(105deg,#ff9b39,#f1602b);
  border-radius:30px;
  font-size:13px; font-weight:750;color:white!important;
  transition:transform .2s ease,box-shadow .2s ease;
}
.wjhp-nav-cta:hover,.wjhp-primary-button:hover {transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.2);}
.wjhp-nav-cta span {width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.22);}
.wjhp-nav-cta svg {width:17px;height:17px;}
.wjhp-menu-toggle {display:none;}
.wjhp-search-panel {
  position:absolute;right:0;top:calc(100% + 12px);
  width:min(410px,calc(100vw - 72px)); padding:18px;
  background:#21171e;
  color:white; border:1px solid #6d4c54;border-radius:19px;
  box-shadow:0 15px 48px rgba(0,0,0,.4);
}
.wjhp-search-panel[hidden] {display:none;}
.wjhp-search-panel label {display:block;margin-bottom:8px;font-size:13px;font-weight:650;}
.wjhp-search-fields {display:flex;background:white;border-radius:12px;overflow:hidden;}
.wjhp-search-fields input {
  min-width:0; flex:1; background:white; border:none; color:#1f1720;
  padding:12px 15px; outline:none;font-size:15px;
}
.wjhp-search-fields button {width:52px;border:0;color:white;background:#f46d32;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.wjhp-search-fields svg {width:20px;height:20px;}
/* Hero text */
.wjhp-hero-content {
  position:relative; z-index:2;
  width:min(720px,62%);
  flex:1; display:flex;align-items:flex-start;justify-content:center;flex-direction:column;
  padding:85px 0 120px clamp(45px,5vw,76px);
}
.wjhp-eyebrow, .wjhp-section-label {
  font-size:12px;letter-spacing:2.4px;font-weight:850;color:#ffae57;
  text-transform:uppercase;
}
.wjhp-eyebrow {color:white;display:inline-flex;gap:12px;align-items:center;margin-bottom:22px;}
.wjhp-eyebrow-mark {width:32px;height:2px;background:#ffdfae;display:inline-block;}
.wjhp-hero h1 {
  color:white!important;
  font-size:clamp(56px,5.6vw,84px)!important;
  line-height:.99!important;letter-spacing:-3.6px!important;font-weight:850!important;
  text-shadow:0 2px 9px rgba(58,13,25,.12);
  margin:0 0 23px!important;
}
.wjhp-hero h1 em {font-style:normal;color:#fff9e9;}
.wjhp-hero-content p {
  font-size:clamp(16px,1.5vw,19px)!important;
  max-width:470px;line-height:1.55;color:#fff5f0!important;
  margin:0 0 28px!important;
  text-shadow:0 1px 5px rgba(92,11,23,.22);
}
.wjhp-primary-button {
  display:inline-flex;align-items:center;gap:16px;
  padding:6px 7px 6px 21px;
  border-radius:50px;
  background:#fff6ee;color:#201821!important;
  font-weight:800;font-size:15px;
  box-shadow:0 9px 24px rgba(34,2,15,.14);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wjhp-primary-button span {display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;background:#f47b27;color:white;border-radius:50%;}
.wjhp-primary-button svg {width:20px;height:20px;}
.wjhp-hero-aside {
  position:absolute;right:clamp(16px,2vw,35px);top:48%;z-index:2;
  max-width:160px;text-align:left;color:#fff6ea!important;font-size:15px!important;font-weight:750;
  transform:rotate(-5deg);line-height:1.3!important;
  text-shadow:0 2px 12px rgba(0,0,0,.2);
}
.wjhp-hero-aside span {display:block;color:#ffb352;font-size:26px;margin-top:5px;}
/* Inner floating topic strip */
.wjhp-feature-strip {
  position:relative; z-index:3; margin:-44px 24px 20px;
  border-radius:38px;background:#251b21;
  border:1px solid var(--wjhp-line); box-shadow:0 18px 30px rgba(0,0,0,.22);
  min-height:122px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:24px 12px;gap:0;
}
.wjhp-feature {
  display:flex;align-items:center;justify-content:center;gap:15px;
  padding:10px 15px;transition:transform .2s ease,background .2s ease;border-radius:15px;
}
.wjhp-feature:not(:last-child) {border-right:1px solid rgba(255,255,255,.14);border-radius:0;}
.wjhp-feature:hover {background:rgba(255,255,255,.045);transform:translateY(-2px);}
.wjhp-feature-icon {display:inline-flex;color:#ffac4a; flex-shrink:0;}
.wjhp-feature-icon svg {width:33px;height:33px;}
.wjhp-feature-copy {min-width:0;display:flex;flex-direction:column;gap:3px;}
.wjhp-feature-copy strong {font-size:15px;color:#fff;line-height:1.2;}
.wjhp-feature-copy small {color:#c8bfc5;font-size:11px;line-height:1.45;}
/* Sections */
.wjhp-explore,.wjhp-latest {
  margin:20px 24px 0;
  padding:clamp(30px,4vw,56px);
  border-radius:37px;
  background:linear-gradient(145deg,#25191f,#1a1419 64%);
  border:1px solid rgba(255,255,255,.065);
}
.wjhp-section-intro {display:flex;gap:35px;align-items:end;justify-content:space-between;margin-bottom:34px;}
.wjhp-section-intro>div {min-width:0;flex:1.2;}
.wjhp-section-label {display:block;margin-bottom:10px;}
.wjhp-section-intro h2 {font-size:clamp(31px,4vw,52px)!important;color:#fff!important;line-height:1.03!important;font-weight:830!important;letter-spacing:-1.8px;margin:0!important;}
.wjhp-section-intro>p {flex:1;max-width:420px;color:#d4c9cf!important;font-size:15px;line-height:1.55;border-left:1px solid rgba(255,255,255,.28);padding-left:25px;margin:0!important;}
.wjhp-card-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;}
.wjhp-category-card {
  display:flex;flex-direction:column;align-items:flex-start;
  position:relative; min-height:313px; border-radius:26px; padding:25px;
  overflow:hidden; isolation:isolate;
  color:#fff!important;
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
.wjhp-category-card::after {content:"";position:absolute;z-index:-1;width:155px;height:155px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-65px;top:-55px;transform:rotate(30deg);}
.wjhp-category-card:hover {transform:translateY(-7px);filter:brightness(1.1);box-shadow:0 20px 32px rgba(0,0,0,.2);}
.wjhp-names {background:linear-gradient(145deg,#ff782c,#b51f49);}
.wjhp-puns {background:linear-gradient(145deg,#cd3e57,#861b56);}
.wjhp-nicknames {background:linear-gradient(145deg,#824291,#402669);}
.wjhp-words {background:linear-gradient(145deg,#be771e,#773f25);}
.wjhp-category-mark {width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);margin-bottom:22px;}
.wjhp-category-mark svg {width:29px;height:29px;}
.wjhp-category-card h3 {font-size:clamp(20px,2vw,27px)!important;letter-spacing:-.7px;line-height:1.1!important;color:#fff!important;margin:0 0 14px!important;font-weight:800;}
.wjhp-category-card p {font-size:13px!important;line-height:1.55!important;color:#fff4f0!important;margin:0 0 20px!important;}
.wjhp-round-arrow {display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#fff0e4;color:#b33b25;border-radius:50%;margin-top:auto;transition:transform .2s ease;}
.wjhp-round-arrow svg {width:19px;height:19px;}
.wjhp-category-card:hover .wjhp-round-arrow {transform:translateX(5px);}
/* Latest posts */
.wjhp-latest {background:linear-gradient(145deg,#24191e,#191216);}
.wjhp-latest-heading {align-items:center;}
.wjhp-post-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.wjhp-post {min-width:0;background:#2b2025;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);transition:transform .2s ease;}
.wjhp-post:hover {transform:translateY(-5px);}
.wjhp-post-link {display:block;height:100%;color:#fff!important;}
.wjhp-post-image {height:205px;overflow:hidden;position:relative;background:linear-gradient(120deg,#673344,#db7040);}
.wjhp-post-photo {width:100%!important;height:100%!important;object-fit:cover!important;display:block;transition:transform .35s ease;}
.wjhp-post:hover .wjhp-post-photo {transform:scale(1.05);}
.wjhp-post-placeholder {display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#ffe2c3;}
.wjhp-post-placeholder svg {width:80px;height:80px;opacity:.55;}
.wjhp-post:nth-child(2) .wjhp-post-image {background:linear-gradient(145deg,#d4536b,#784a87);}
.wjhp-post:nth-child(3) .wjhp-post-image {background:linear-gradient(145deg,#96601f,#35294b);}
.wjhp-post-copy {padding:22px;}
.wjhp-post-category {display:inline-block;color:#ffa451;font-weight:750;font-size:12px;margin-bottom:8px;}
.wjhp-post-copy h3 {color:#fff!important;font-size:20px!important;line-height:1.22!important;letter-spacing:-.4px;margin:0 0 10px!important;}
.wjhp-post-copy p {font-size:13px;color:#d5c9cf!important;margin-bottom:12px!important;line-height:1.5;}
.wjhp-post-meta {font-size:12px;color:#bbaeb5;}
.wjhp-coming-soon {display:flex;align-items:center;gap:25px;background:rgba(255,255,255,.045);border:1px solid var(--wjhp-line);border-radius:23px;padding:32px;}
.wjhp-coming-icon {flex-shrink:0;width:74px;height:74px;border-radius:22px;background:linear-gradient(135deg,#f87f32,#bd3854);display:flex;align-items:center;justify-content:center;}
.wjhp-coming-icon svg {width:35px;height:35px;}
.wjhp-coming-soon>div {flex:1;}
.wjhp-coming-soon h3 {font-size:24px!important;letter-spacing:-.5px;color:white!important;margin:0 0 7px!important;}
.wjhp-coming-soon p {color:#d4c5cc!important;margin:0!important;max-width:550px;}
.wjhp-coming-link,.wjhp-bottom-button {display:inline-flex;gap:12px;align-items:center;justify-content:center;padding:13px 18px;background:#fff3ea;color:#211720!important;border-radius:40px;white-space:nowrap;font-weight:800;font-size:13px;transition:transform .2s ease;}
.wjhp-coming-link:hover,.wjhp-bottom-button:hover {transform:translateY(-3px);}
.wjhp-coming-link svg,.wjhp-bottom-button svg {width:18px;height:18px;color:#f16f2f;}
/* Closing CTA */
.wjhp-bottom-cta {
  display:flex;align-items:center;gap:22px;
  margin:20px 24px 0;padding:32px 42px;
  border-radius:30px;background:linear-gradient(100deg,#f97821,#bc2352 72%,#f5752c);
}
.wjhp-bottom-icon {display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15);width:62px;height:62px;border-radius:17px;flex-shrink:0;}
.wjhp-bottom-icon svg {width:30px;height:30px;}
.wjhp-bottom-cta>div:nth-child(2) {flex:1;}
.wjhp-bottom-cta h2 {font-size:clamp(22px,2.5vw,29px)!important;color:#fff!important;letter-spacing:-.7px;margin:0 0 5px!important;line-height:1.2!important;}
.wjhp-bottom-cta p {color:#ffedeb!important;margin:0!important;font-size:14px;}
.wjhp-footer {display:flex;align-items:center;gap:26px;padding:34px 42px 18px;color:#b6aab1;font-size:12px;flex-wrap:wrap;}
.wjhp-footer-brand {font-weight:850;font-size:18px!important;color:#fff!important;letter-spacing:-.4px;}
.wjhp-footer-links {display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;}
.wjhp-footer-links a:hover {color:#ff9d5f!important;}
/* Responsive */
@media(max-width:1180px) {
  .wjhp-nav-links {gap:11px;}
  .wjhp-nav-links a {font-size:11px;}
  .wjhp-brand {font-size:23px;}
  .wjhp-header {gap:14px;}
  .wjhp-nav-cta {font-size:12px;}
  .wjhp-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .wjhp-category-card {min-height:255px;}
  .wjhp-hero-content {width:65%;}
}
@media(max-width:1000px) {
  .wjhp-menu-toggle {display:inline-flex;}
  .wjhp-nav-links {
    display:none; position:absolute; top:calc(100% + 12px);
    left:0; right:0; flex-direction:column;align-items:stretch;
    background:#20171d;border:1px solid #503744;
    border-radius:22px;padding:12px;gap:0;
    box-shadow:0 20px 35px rgba(0,0,0,.25);
  }
  .wjhp-header.wjhp-menu-open .wjhp-nav-links {display:flex;}
  .wjhp-nav-links a {font-size:15px;padding:11px 14px;border-radius:10px;}
  .wjhp-nav-links a:hover {background:rgba(255,255,255,.06);}
  .wjhp-nav-cta {display:none;}
  .wjhp-hero-aside {display:none;}
  .wjhp-feature-strip {grid-template-columns:repeat(2,minmax(0,1fr));}
  .wjhp-feature:nth-child(2) {border-right:0;}
  .wjhp-feature:nth-child(-n+2) {border-bottom:1px solid rgba(255,255,255,.13);}
  .wjhp-hero-content {width:70%;}
}
@media(max-width:740px) {
  .wjhp-shell {width:calc(100% - 20px);margin:14px auto 30px;border-radius:26px;}
  .wjhp-hero {min-height:700px;border-radius:26px;overflow:hidden;}
  .wjhp-hero-photo {height:56%;object-position:72% 15%;border-radius:26px 26px 0 0;}
  .wjhp-hero-vignette {
    background:linear-gradient(0deg,#802445 1%,rgba(103,28,51,.97) 23%,rgba(115,37,47,.25) 72%,rgba(115,37,47,.05));
    border-radius:26px;
  }
  .wjhp-header {margin:14px 13px 0;border-radius:30px;padding:8px 8px 8px 12px;min-height:61px;}
  .wjhp-brand {font-size:21px;}
  .wjhp-brand-icon {width:32px;height:32px;border-radius:10px;}
  .wjhp-header-actions {margin-left:auto;gap:5px;}
  .wjhp-icon-button {width:36px;height:36px;}
  .wjhp-hero-content {width:100%;padding:370px 24px 62px;justify-content:flex-end;display:block;}
  .wjhp-eyebrow {font-size:9px;letter-spacing:1.4px;margin-bottom:12px;}
  .wjhp-hero h1 {font-size:clamp(43px,10vw,59px)!important;letter-spacing:-2px!important;line-height:1.0!important;margin-bottom:14px!important;}
  .wjhp-hero-content p {font-size:14px!important;margin-bottom:17px!important;max-width:460px;}
  .wjhp-primary-button {font-size:13px;}
  .wjhp-feature-strip {margin:-20px 13px 15px;padding:10px 6px;border-radius:24px;}
  .wjhp-feature {padding:15px 8px;gap:9px;justify-content:flex-start;}
  .wjhp-feature-icon svg {width:26px;height:26px;}
  .wjhp-feature-copy strong {font-size:12px;}
  .wjhp-feature-copy small {font-size:10px;}
  .wjhp-explore,.wjhp-latest {margin:13px 13px 0;padding:27px 18px;border-radius:25px;}
  .wjhp-section-intro {flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:25px;}
  .wjhp-section-intro h2 {font-size:37px!important;letter-spacing:-1.3px;}
  .wjhp-section-intro>p {border:0;padding:0;font-size:13px;}
  .wjhp-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .wjhp-category-card {padding:17px;min-height:250px;border-radius:18px;}
  .wjhp-category-mark {width:39px;height:39px;border-radius:11px;margin-bottom:15px;}
  .wjhp-category-mark svg {width:24px;height:24px;}
  .wjhp-category-card h3 {font-size:19px!important;}
  .wjhp-category-card p {font-size:12px!important;}
  .wjhp-post-grid {grid-template-columns:1fr;}
  .wjhp-post-image {height:200px;}
  .wjhp-coming-soon {padding:22px;flex-wrap:wrap;gap:13px;}
  .wjhp-coming-icon {width:52px;height:52px;border-radius:14px;}
  .wjhp-coming-link {width:100%;}
  .wjhp-bottom-cta {margin:13px 13px 0;flex-wrap:wrap;padding:23px;border-radius:22px;gap:13px;}
  .wjhp-bottom-icon {height:47px;width:47px;border-radius:14px;}
  .wjhp-bottom-cta>div:nth-child(2) {flex-basis:70%;}
  .wjhp-bottom-button {width:100%;}
  .wjhp-footer {padding:28px 21px 20px;gap:12px;font-size:11px;}
  .wjhp-footer-links {margin-left:0;flex-basis:100%;}
}
@media(max-width:420px) {
  .wjhp-hero {min-height:705px;}
  .wjhp-hero-content {padding:355px 20px 50px;}
  .wjhp-card-grid {grid-template-columns:1fr;}
  .wjhp-category-card {min-height:210px;}
  .wjhp-feature {gap:7px;}
  .wjhp-feature-copy strong {font-size:11px;}
  .wjhp-feature-copy small {font-size:9px;}
}
@media (prefers-reduced-motion: reduce) {
 html {scroll-behavior:auto;}
 .wjhp-body *, .wjhp-body *::before, .wjhp-body *::after {transition:none!important;}
}
