/* DEXLuth0r site draft v3. Palette is the closed v3 set; no gradients, glows or shadows. */
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/SpaceGrotesk-Medium.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/SpaceGrotesk-Bold.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/SpaceMono-Regular.woff2) format("woff2")}
:root{
  --orange:#FF5A1F; --ink:#0A0A0B; --paper:#F4F4F5; --steel:#7A7A80; --panel:#1D1D21;
  --pad:clamp(20px,5vw,72px);
  --sans:"Space Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%}
body{position:relative;font-family:var(--sans);font-weight:500;line-height:1.45;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--paper);color:var(--ink);padding:8px 12px;font-family:var(--mono);z-index:10}
.skip:focus{left:8px}


.top{position:relative;z-index:2;padding:calc(var(--pad)*.6) var(--pad) 0;max-width:calc(1296px + 2*var(--pad));width:100%;align-self:center}
.tile{display:inline-block;width:44px;height:44px}
.tile img{width:100%;height:100%}
.hero{position:relative;padding:clamp(48px,9vh,96px) var(--pad) clamp(40px,7vh,80px);overflow:hidden}
/* Watermark: the avatar 0 in Panel on ink, centered behind the hero, faint */
.wm{position:absolute;z-index:0;left:50%;top:50%;height:86%;aspect-ratio:364.58/510.4;transform:translate(-50%,-50%);opacity:.5;pointer-events:none}
.wm img{width:100%;height:100%}
.hero-inner{z-index:1}
main,.foot{position:relative;z-index:1}
.hero-inner{position:relative;max-width:1296px;margin:0 auto}
/* Wordmark: min 170px wide per bible; clear space = height of the 0 (~14.8% of width) kept by margins */
.mark{width:clamp(240px,62vw,820px);margin-bottom:clamp(28px,5vw,64px)}
.mark img{width:100%}
.tagline{font-size:clamp(22px,2.6vw,34px);line-height:1.22;letter-spacing:-.01em;max-width:22ch;color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(32px,4.5vw,48px);padding:16px 26px;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.02em;text-decoration:none;border-radius:999px;transition:background-color .2s,color .2s}
.btn .xlogo{display:block;flex:none;width:18px;height:18px;margin-right:-4px}
.btn .arrow{font-family:var(--mono);font-size:18px;line-height:1;transition:transform .2s}
.btn:hover,.btn:focus-visible{background:var(--orange);color:var(--ink)}
.btn:hover .arrow{transform:translate(2px,-2px)}

.rhythm{max-width:calc(1296px + 2*var(--pad));margin:0 auto;padding:0 var(--pad);width:100%}
.rhythm img{width:100%;max-width:660px}

.topics{padding:clamp(28px,4vw,56px) var(--pad) clamp(56px,8vw,96px)}
.topics ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1296px;margin:0 auto}
.card{position:relative;background:var(--panel);border-radius:14px;padding:28px 28px 30px;min-height:180px;display:flex;flex-direction:column}
.tick{display:block;width:8px;height:30px;border-radius:4px;background:var(--orange);transform:skewX(-26deg);transform-origin:bottom;margin:0 0 26px 6px;transition:background-color .25s}
@media (hover:hover) and (pointer:fine){.tick{background:var(--steel)}.card:hover .tick{background:var(--orange)}}

.card h2{font-weight:700;font-size:clamp(19px,1.6vw,22px);text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.card p{margin-top:10px;font-size:16px;color:var(--paper)}

.foot{margin-top:auto;border-top:1px solid var(--panel);padding:24px var(--pad) 32px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:calc(1296px + 2*var(--pad));width:100%;align-self:center}
.fine{font-family:var(--mono);font-size:14px;color:var(--steel);display:flex;align-items:center;gap:10px}
.fine img{width:10px;height:14px}

@media (max-width:860px){
  .topics ul{grid-template-columns:1fr}
  .card{min-height:0;padding:22px 22px 24px}
  .tick{margin-bottom:18px;height:24px;width:7px}
  .wm{height:78%;opacity:.42}
  .hero{padding-top:44px;padding-bottom:56px}
  .tile{width:36px;height:36px}
}

/* Motion: fade-up content, slow fade on the watermark */
@media (prefers-reduced-motion:no-preference){
  .mark,.tagline,.btn{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .tagline{animation-delay:.12s}.btn{animation-delay:.24s}
  .wm img{opacity:0;animation:fade 1.6s ease .1s forwards}

  .card{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .card:nth-child(1){animation-delay:.55s}.card:nth-child(2){animation-delay:.65s}.card:nth-child(3){animation-delay:.75s}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes sweep{to{clip-path:inset(0 0 0 0)}}