/* ============================================================================
   HOME REDESIGN — "Editorial Elevated"
   Homepage-only styles (class prefix .rdx-). Reuses professional.css color
   tokens (--cream/--white/--charcoal/--forest/...) so light AND dark mode
   inherit automatically from the site's existing theme toggle (html.dark).
   ========================================================================== */

.rdx{
  --sky:#A7C7E7; --lavender:#C9C2DE;
  --e-out:cubic-bezier(.16,1,.3,1); --e-soft:cubic-bezier(.4,0,.2,1);
  --line:var(--border-light); --line-2:var(--border-medium);
  --ink:var(--charcoal); --ink-soft:var(--charcoal-light); --paper:var(--white);
  position:relative;
}
html.dark .rdx, [data-theme="dark"] .rdx{ --sky:#5E7E9E; --lavender:#8F86AE; }

.rdx *{box-sizing:border-box}

/* aurora + grain are now provided site-wide by site-redesign.css / baseof.html */

/* floating pollen canvas (hero only) */
.rdx-particles{position:absolute; inset:0; z-index:1; pointer-events:none}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.rdx-hero{position:relative; min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8rem 1.5rem 4rem; overflow:hidden}
.rdx-mesh{position:absolute; inset:-18%; z-index:0; pointer-events:none; will-change:transform; transition:transform .25s var(--e-soft)}
.rdx-blob{position:absolute; border-radius:50%; filter:blur(62px); opacity:.5; will-change:transform}
.rdx-b1{width:46vw; height:46vw; left:5%; top:6%;  background:radial-gradient(circle at 30% 30%, var(--forest-pale), transparent 70%); opacity:.6; animation:rdx-d1 19s var(--e-soft) infinite}
.rdx-b2{width:42vw; height:42vw; right:3%; top:14%; background:radial-gradient(circle at 60% 40%, color-mix(in srgb,var(--sky) 75%, transparent), transparent 70%); animation:rdx-d2 23s var(--e-soft) infinite}
.rdx-b3{width:40vw; height:40vw; left:22%; bottom:0; background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--lavender) 70%, transparent), transparent 70%); opacity:.42; animation:rdx-d3 27s var(--e-soft) infinite}
.rdx-b4{width:30vw; height:30vw; right:16%; bottom:6%; background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--ochre) 48%, transparent), transparent 72%); opacity:.3; animation:rdx-d1 21s var(--e-soft) infinite reverse}
@keyframes rdx-d1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(5%,-6%) scale(1.08)}66%{transform:translate(-4%,4%) scale(.95)}}
@keyframes rdx-d2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,5%) scale(1.1)}}
@keyframes rdx-d3{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(4%,-4%) scale(1.06)}80%{transform:translate(-5%,-2%) scale(.96)}}

.rdx-hero-inner{position:relative; z-index:2; max-width:940px}
.rdx-badge{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .95rem; margin-bottom:2rem;
  border:1px solid var(--line); border-radius:100px; background:color-mix(in srgb,var(--paper) 68%, transparent);
  backdrop-filter:blur(8px); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.rdx-badge::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--forest); animation:rdx-pulse 2.2s var(--e-soft) infinite}
@keyframes rdx-pulse{0%,100%{transform:scale(1);opacity:1; box-shadow:0 0 0 0 color-mix(in srgb,var(--forest) 55%, transparent)}50%{transform:scale(1.25);opacity:.7; box-shadow:0 0 0 7px transparent}}

.rdx-title{font-family:var(--font-display); font-weight:400; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(3rem,8.5vw,6rem); margin:0 0 1.6rem; position:relative; color:var(--ink)}
.rdx-title::before{content:''; position:absolute; left:50%; top:50%; width:150%; height:200%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, color-mix(in srgb,var(--forest-pale) 90%, var(--sky)) 0%, transparent 60%);
  filter:blur(70px); z-index:-1; opacity:.9; pointer-events:none}
html.dark .rdx-title::before{opacity:.45}
.rdx-line{display:block; overflow:hidden; padding:.04em 0}
.rdx-line > span{display:inline-block; transform:translateY(115%); opacity:0; filter:blur(8px);
  animation:rdx-rise 1s var(--e-out) forwards; animation-delay:calc(.15s + var(--i,0)*.12s)}
@keyframes rdx-rise{to{transform:translateY(0); opacity:1; filter:blur(0)}}
.rdx-ital{font-style:italic; color:var(--forest); position:relative}
/* hand-drawn underline that draws itself in */
.rdx-underline{position:absolute; left:-2%; bottom:-.12em; width:104%; height:.34em; overflow:visible; pointer-events:none}
.rdx-underline path{fill:none; stroke:var(--forest); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:560; stroke-dashoffset:560; animation:rdx-draw 1.1s var(--e-out) 1.1s forwards; opacity:.55}
@keyframes rdx-draw{to{stroke-dashoffset:0}}

.rdx-sub{max-width:560px; margin:0 auto 2.4rem; font-size:1.18rem; color:var(--ink-soft); opacity:0; animation:rdx-fade 1s var(--e-out) .7s forwards}
@keyframes rdx-fade{to{opacity:1}}
.rdx-cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; opacity:0; animation:rdx-fade 1s var(--e-out) .9s forwards}
.rdx-btn{position:relative; display:inline-flex; align-items:center; gap:.55rem; padding:.95rem 1.85rem; border-radius:100px;
  font-family:var(--font-body); font-size:.95rem; font-weight:500; cursor:pointer; border:1.5px solid transparent; text-decoration:none;
  transition:transform .35s var(--e-out), background .3s, color .3s, border-color .3s; will-change:transform}
.rdx-btn .rdx-mag{display:inline-flex; align-items:center; gap:.55rem; transition:transform .35s var(--e-out)}
.rdx-btn-primary{background:var(--charcoal); color:var(--cream)}
.rdx-btn-primary:hover{background:var(--forest)}
.rdx-btn-primary svg{transition:transform .35s var(--e-out)}
.rdx-btn-primary:hover svg{transform:translateX(5px)}
.rdx-btn-ghost{border-color:var(--line-2); color:var(--ink)}
.rdx-btn-ghost:hover{border-color:var(--forest); color:var(--forest)}

.rdx-cue{position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2; color:var(--muted);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:rdx-fade 1s 1.4s forwards}
.rdx-cue i{width:1px; height:34px; background:linear-gradient(var(--muted),transparent); animation:rdx-cue 1.8s var(--e-soft) infinite}
@keyframes rdx-cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ─── Marquee ──────────────────────────────────────────────────────────── */
.rdx-marquee{position:relative; z-index:2; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 45%, transparent); overflow:hidden; padding:1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rdx-track{display:flex; width:max-content; animation:rdx-scroll 40s linear infinite}
.rdx-marquee:hover .rdx-track{animation-play-state:paused}
.rdx-track .rdx-set{display:flex; gap:2.5rem; padding-right:2.5rem}
.rdx-track a{font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:var(--muted); display:inline-flex; align-items:center; gap:2.5rem; transition:color .25s}
.rdx-track a:hover{color:var(--forest)}
.rdx-track a::after{content:'✦'; font-style:normal; font-size:.65rem; color:var(--forest)}
@keyframes rdx-scroll{to{transform:translateX(-50%)}}

/* ─── Sections ─────────────────────────────────────────────────────────── */
.rdx-wrap{max-width:var(--max-width,1180px); margin:0 auto; padding:0 1.5rem; position:relative; z-index:2}
.rdx-block{padding:6rem 0}
.rdx-eyebrow{display:flex; align-items:center; gap:.8rem; font-family:var(--font-body); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:1.4rem}
.rdx-eyebrow::before{content:''; width:26px; height:1.5px; background:var(--forest)}
.rdx-h2{font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; font-size:clamp(1.9rem,4vw,2.8rem); margin:0; color:var(--ink)}

/* feature trio with 3D tilt */
.rdx-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; perspective:1000px}
@media(max-width:820px){.rdx-trio{grid-template-columns:1fr}}
.rdx-feat{position:relative; padding:2rem; border:1px solid var(--line); border-radius:20px; background:var(--paper); overflow:hidden;
  text-decoration:none; color:inherit; transform-style:preserve-3d;
  transition:transform .3s var(--e-out), border-color .4s, box-shadow .4s}
.rdx-feat::after{content:''; position:absolute; inset:0; background:radial-gradient(120% 120% at var(--mx,100%) var(--my,0%), color-mix(in srgb,var(--forest) 9%, transparent), transparent 55%); opacity:0; transition:opacity .4s}
.rdx-feat:hover{border-color:var(--forest); box-shadow:0 28px 55px -30px rgba(45,90,61,.45)}
.rdx-feat:hover::after{opacity:1}
.rdx-feat .rdx-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.2rem; transition:transform .45s var(--e-out)}
.rdx-feat:hover .rdx-ic{transform:rotate(-6deg) scale(1.08)}
.rdx-ic.g{background:var(--forest-pale); color:var(--forest)} .rdx-ic.t{background:color-mix(in srgb,var(--teal) 22%, var(--paper)); color:var(--teal)} .rdx-ic.o{background:color-mix(in srgb,var(--ochre) 24%, var(--paper)); color:var(--ochre)}
.rdx-feat h3{font-family:var(--font-display); font-size:1.5rem; margin:0 0 .35rem; color:var(--ink)}
.rdx-feat p{margin:0 0 1.2rem; color:var(--muted); font-size:.94rem}
.rdx-count{display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; color:var(--forest); font-weight:500; transition:gap .3s}
.rdx-feat:hover .rdx-count{gap:.8rem}
.rdx-count b{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.15rem}

/* recent posts — hover-expand rows */
.rdx-posts{margin-top:2.5rem; border-top:1px solid var(--line)}
.rdx-post{position:relative; display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:1.5rem;
  padding:1.5rem .4rem; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; overflow:hidden;
  transition:padding .4s var(--e-out), background .4s}
.rdx-post::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--forest); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--e-out)}
.rdx-post:hover{padding-left:1.3rem; background:color-mix(in srgb,var(--paper) 55%, transparent)}
.rdx-post:hover::before{transform:scaleY(1)}
.rdx-post .rdx-date{font-family:var(--font-body); font-size:.82rem; color:var(--muted); white-space:nowrap}
.rdx-post .rdx-main{min-width:0}
.rdx-post .rdx-pt{font-family:var(--font-display); font-size:1.34rem; line-height:1.2; transition:color .3s; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
.rdx-post:hover .rdx-pt{color:var(--forest)}
.rdx-post .rdx-pm{font-size:.82rem; color:var(--muted); margin-top:.2rem}
.rdx-reveal{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--e-out)}
.rdx-reveal > div{overflow:hidden}
.rdx-excerpt{opacity:0; transition:opacity .4s; color:var(--ink-soft); font-size:.95rem; max-width:62ch; padding-top:.5rem}
.rdx-post:hover .rdx-reveal{grid-template-rows:1fr}
.rdx-post:hover .rdx-excerpt{opacity:1}
.rdx-thumb{width:54px; height:54px; border-radius:10px; flex:none; transition:transform .4s var(--e-out); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.rdx-post:hover .rdx-thumb{transform:scale(1.12) rotate(2deg)}
.rdx-arrow{color:var(--line-2); transition:transform .4s var(--e-out), color .3s}
.rdx-post:hover .rdx-arrow{color:var(--forest); transform:translateX(6px)}
.rdx-right{display:flex; align-items:center; gap:1.1rem}
.rdx-allposts{display:inline-flex; align-items:center; gap:.5rem; margin-top:2.2rem; font-weight:500; color:var(--forest); text-decoration:none; transition:gap .3s}
.rdx-allposts:hover{gap:.85rem}
@media(max-width:680px){
  .rdx-post{grid-template-columns:1fr auto; gap:.7rem}
  .rdx-post .rdx-date{grid-column:1; font-size:.74rem; color:var(--forest)}
  .rdx-thumb{display:none}
  .rdx-post .rdx-pt{white-space:normal}
}

/* reveal on scroll */
.rdx-rise{opacity:0; transform:translateY(28px); transition:opacity .8s var(--e-out), transform .8s var(--e-out)}
.rdx-rise.in{opacity:1; transform:none}
.rdx-rise[data-d="1"]{transition-delay:.08s}.rdx-rise[data-d="2"]{transition-delay:.16s}.rdx-rise[data-d="3"]{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  .rdx *{animation-duration:.001s !important; animation-iteration-count:1 !important}
  .rdx-line>span{transform:none; opacity:1; filter:none}
  .rdx-underline path{stroke-dashoffset:0}
  .rdx-rise{opacity:1; transform:none}
}