/*
Theme Name: JLA Universe
Theme URI: https://justlaughalready.com/
Author: KINGDING
Description: The JLA comedy universe, built from the existing JLA concept artwork. Published, approved comedy only.
Version: 1.2.0
Requires at least: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: jla-universe
*/
:root{--ink:#1c2021;--yellow:#ffe43e;--coral:#ff6e72;--paper:#fffdf7;--muted:#5d6162;--line:#d7d8d3;--display:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 Arial,Helvetica,sans-serif}a{color:inherit}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}img,svg{max-width:100%}svg.jla-art{width:100%;display:block}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.02}h1,h2{font-family:var(--display);font-weight:900;letter-spacing:-.025em}h1{font-size:clamp(58px,7.5vw,112px);margin-bottom:28px}h2{font-size:clamp(36px,4.4vw,64px);margin-bottom:28px}h3{font-size:24px}h1 em,h2 em{font-style:normal;color:var(--coral)}p{margin-bottom:22px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #316de9;outline-offset:5px}button,input,select{min-height:46px}[hidden]{display:none!important}.skip{position:fixed;top:0;left:16px;background:#fff;color:#111;padding:12px;z-index:999;transform:translateY(-130%)}.skip:focus{transform:none}.header{min-height:92px;background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;padding:18px max(5vw,24px);gap:24px;position:relative;z-index:10}.logo{text-decoration:none;color:var(--yellow);font:900 48px/.85 var(--display);display:flex;align-items:center;gap:14px;flex-shrink:0}.logo span{color:#fff;font:700 10px/1.2 Arial;letter-spacing:.05em;max-width:70px}.header nav{display:flex;align-items:center;gap:32px}.header nav a{font-size:13px;font-weight:800;text-transform:uppercase;text-decoration:none;letter-spacing:.04em}.header nav a:hover,.header nav a[aria-current]{color:var(--yellow)}.saved-link{border-left:1px solid #686b6b;padding-left:28px}.saved-link span{border-radius:100%;background:var(--yellow);color:var(--ink);padding:4px 7px;margin-left:3px}.menu-toggle{display:none;border:0;background:transparent;color:white;font-weight:bold}.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--yellow);overflow:hidden;min-height:710px}.hero-copy{padding:64px 20px 64px max(5vw,24px);position:relative;z-index:1}.hero h1{font-size:clamp(74px,8.5vw,130px);line-height:.92;transform:rotate(-3deg);transform-origin:left center;letter-spacing:-.035em;margin:28px 0 40px}.hero h1 em{color:#e73c42}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;margin-bottom:20px}.lead{font-size:clamp(23px,2.2vw,30px);line-height:1.3;font-weight:700}.hero-copy>p:not(.eyebrow){max-width:460px}.hero-visual{position:relative;align-self:end;min-width:0;padding-top:100px}.hero-visual .jla-art{width:120%;max-width:none;margin-left:-16%;filter:drop-shadow(0 15px 16px #65590022)}.speech{position:absolute;right:10%;top:8%;padding:22px 18px;background:white;border:3px solid var(--ink);border-radius:50%;font:900 23px/1.1 var(--display);transform:rotate(8deg)}.art-tag{position:absolute;bottom:22px;right:24px;background:var(--ink);color:var(--yellow);padding:12px 18px;font-size:11px;font-weight:800;transform:rotate(-4deg);letter-spacing:.06em}.actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:2px solid transparent;border-radius:100px;padding:15px 26px;text-decoration:none;font-size:14px;font-weight:800;line-height:1.3;min-height:52px;transition:transform .15s,box-shadow .15s}.button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #1c202125}.button.coral{background:var(--coral);color:var(--ink)}.button.yellow{background:var(--yellow);color:var(--ink)}.button.ink{background:var(--ink);color:#fff}.button.outline{border-color:var(--ink);background:transparent;color:var(--ink)}.button.small{padding:12px 18px;font-size:12px;min-height:44px}.text-link{font-weight:800;font-size:14px;text-underline-offset:5px}.section{padding:80px max(5vw,24px)}.dark{background:var(--ink);color:var(--paper)}.dark h2 em{color:var(--coral)}.yellow-text{color:var(--yellow)}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.large{font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.4}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid #666;margin-top:48px;padding-top:36px}.values b{font-size:13px;color:var(--yellow)}.values p{font-size:14px;margin:10px 0 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.section-heading h2{margin:0}.cast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.cast-card{background:var(--card,#fff);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);scroll-margin-top:40px}.cast-card .jla-art{aspect-ratio:188/212;background:var(--card)}.cast-card>div{padding:26px;position:relative;background:#ffffffed}.cast-card h2,.cast-card h3{font:900 clamp(25px,2.6vw,36px)/1.05 var(--display);margin:0 0 8px}.cast-card p{font-size:15px;margin-bottom:18px}.home-cast .cast-card>div{padding-right:64px}.home-cast .cast-card p{margin-bottom:0}.cast-tagline{font-weight:bold}.round-arrow{position:absolute;right:20px;top:30px;background:var(--ink);color:var(--yellow);border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.coral-panel{background:var(--coral);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.underline{text-decoration:underline;text-decoration-thickness:7px;text-underline-offset:10px}.page-intro{padding:70px max(5vw,24px) 50px}.page-intro h1{max-width:1050px}.page-intro.compact{padding-bottom:35px}.top-zero{padding-top:16px}.yellow-panel{background:var(--yellow)}.browser-toolbar{display:flex;align-items:end;gap:16px;flex-wrap:wrap}.search-label{flex:1;min-width:200px}.search-label input{margin-top:8px}.search-label,.filter-grid label{font-weight:700;font-size:13px}input,select{width:100%;border:1px solid #bfc2bd;border-radius:8px;background:#fff;color:var(--ink);padding:13px 14px;max-width:100%}.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:26px}.filter-grid select{display:block;margin-top:8px}.result-count{font-size:14px;color:var(--muted);margin:22px 0}.joke-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.joke-card{padding:26px;border:1px solid var(--line);border-radius:16px;background:white}.joke-card h2{font:800 23px/1.2 Arial;margin:14px 0}.joke-card .eyebrow{color:var(--muted);margin:0}.joke-card button{margin:6px 8px 0 0}.joke-card .punchline{padding:18px;background:var(--yellow);border-radius:10px;font-weight:700}.empty-state{background:#f1f1e9;border-radius:20px;padding:50px 24px;text-align:center;max-width:850px;margin:25px auto}.empty-state h2{font-size:clamp(32px,4vw,48px);margin-bottom:16px}.empty-state p{max-width:540px;margin:0 auto 24px}.empty-mark{font-size:64px;color:#9c2b3a;line-height:1;display:block;margin-bottom:20px}.aside-note{font-size:13px;color:var(--muted);margin:26px 0 0;max-width:800px}.create-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;background:#f1f1e9}.mix-panel{background:white;border-radius:20px;padding:32px}.mix-panel h2{font-size:38px}.mix-panel .filter-grid{grid-template-columns:1fr 1fr}.mix-preview{border-radius:20px;overflow:hidden;background:var(--yellow)}.mix-preview .jla-art{max-height:360px}.mix-preview>div{padding:30px;background:var(--ink);color:white}.mix-preview h2{font-size:36px}.mix-preview .eyebrow{color:var(--yellow)}.mix-preview #mix-summary{margin:0}.mix-preview .joke-card{color:var(--ink);margin-top:20px}.text-button{border:0;background:none;font-size:13px;font-weight:bold;text-decoration:underline;padding:10px}.story .jla-art{border-radius:20px;background:var(--yellow)}.story h2{font-size:42px}.legal{max-width:950px;padding-top:0}.legal h2{font:800 26px/1.2 Arial;margin:38px 0 16px}.legal p{line-height:1.8}.footer{background:var(--ink);color:white;display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;padding:55px max(5vw,24px)}.footer p{font-size:14px;color:#d0d3cf;margin:0}.footer nav{display:flex;flex-wrap:wrap;gap:12px 22px;align-content:start}.footer nav a{font-size:13px;text-underline-offset:4px}.copyright{grid-column:1/-1;border-top:1px solid #626666;padding-top:24px;font-size:11px!important;letter-spacing:.06em}.dialog-close{position:absolute;right:16px;top:10px;background:transparent;border:0;font-size:32px;padding:0 10px}.jla-site dialog{border:0;border-radius:20px;padding:55px 24px 24px;max-width:min(640px,92vw);max-height:85vh}.jla-site dialog::backdrop{background:#111b}.jla-site dialog .joke-card{border:0;padding:10px}.error-note{padding:12px;background:#fff3b2;color:var(--ink);border-radius:8px}
@media(min-width:1600px){.header,.section,.footer,.page-intro{padding-left:max(6vw,calc((100vw - 1440px)/2));padding-right:max(6vw,calc((100vw - 1440px)/2))}.hero-copy{padding-left:max(6vw,calc((100vw - 1440px)/2))}.hero-visual{max-width:760px}.hero{min-height:780px}}
@media(max-width:1000px){.header nav{gap:18px}.logo span{display:none}.saved-link{padding-left:15px}.hero{min-height:600px}.hero-copy{padding-top:45px}.hero h1{font-size:clamp(64px,9vw,100px)}.hero-visual{padding-top:130px}.speech{font-size:18px;right:5%;top:16%}.split{gap:35px}.section{padding-top:60px;padding-bottom:60px}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.create-layout{gap:24px}.mix-panel{padding:24px}.cast-grid{gap:18px}.cast-card>div{padding:20px}.cast-card .button{padding:12px;font-size:11px}}
@media(max-width:700px){body{font-size:16px}.header{min-height:74px;padding:18px 22px;flex-wrap:wrap;gap:15px}.logo{font-size:40px}.logo span{display:block}.menu-toggle{display:block}.header nav{display:none;flex-basis:100%;align-items:stretch;flex-direction:column;gap:0}.header nav.open{display:flex}.header nav a{padding:14px 0;border-top:1px solid #4d5151}.header nav .saved-link{border-left:0}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:36px 24px 10px}.hero h1{font-size:clamp(76px,17vw,110px);margin:24px 0 34px}.hero-copy .lead{font-size:25px}.hero-visual{padding-top:30px;width:100%;max-width:500px;justify-self:center}.hero-visual .jla-art{width:100%;margin:0}.speech{top:20px;right:25px;font-size:17px;padding:16px}.art-tag{font-size:10px;bottom:10px}.actions{gap:18px;margin-top:24px}.button{font-size:13px;padding:14px 23px}.section,.page-intro{padding:45px 24px}.page-intro.compact{padding-bottom:30px}.page-intro h1{font-size:clamp(48px,12vw,78px)}.split,.coral-panel,.create-layout{grid-template-columns:1fr;gap:28px}.section h2{font-size:42px}.values{grid-template-columns:1fr;gap:22px;margin-top:25px;padding-top:25px}.values>div+div{border-top:1px solid #555;padding-top:22px}.section-heading{display:block}.section-heading .text-link{display:inline-block;margin-top:20px}.cast-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.home-cast{grid-template-columns:1fr}.home-cast .cast-card{display:grid;grid-template-columns:45% 55%;align-items:center}.home-cast .cast-card>div{height:100%;display:flex;flex-direction:column;justify-content:center;padding:20px}.home-cast .cast-card h3{font-size:25px}.home-cast .round-arrow{display:none}.cast-card h2{font-size:24px!important}.cast-card p{font-size:13px}.cast-card>div{padding:16px}.cast-card .button{font-size:10px;min-height:44px;gap:4px}.cast-card .jla-art{width:100%}.top-zero{padding-top:10px}.browser-toolbar{gap:12px}.search-label{flex-basis:100%}.browser-toolbar .button{flex:1;font-size:12px;padding:13px}.filter-grid{gap:15px}.joke-grid{grid-template-columns:1fr}.empty-state{padding:35px 20px}.empty-state h2{font-size:32px}.mix-panel{padding:22px}.mix-panel h2{font-size:32px}.mix-preview h2{font-size:32px}.footer{grid-template-columns:1fr;padding:40px 24px;gap:25px}.footer nav{gap:20px}.legal h2{font-size:25px}.story .jla-art{max-height:400px}}
@media(max-width:360px){.cast-grid,.mix-panel .filter-grid,.filter-grid{grid-template-columns:1fr}.hero h1{font-size:70px}.header .logo span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

img.jla-art{display:block;width:100%;height:auto;object-fit:contain}.hero-visual img.jla-art{width:112%;margin-left:-10%;filter:drop-shadow(0 16px 14px #665a0024)}.mix-preview img.jla-art{padding:25px 8px 0}.story img.jla-art{padding:24px}@media(max-width:700px){.hero-visual img.jla-art{width:100%;margin:0}.hero-visual{padding-top:45px}.hero-visual .speech{top:12px;right:14px;font-size:15px}.story img.jla-art{padding:18px}}
.simple-topic{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.simple-topic summary{font-size:14px;font-weight:700;cursor:pointer;min-height:44px}.simple-topic label{display:block;font-size:14px;max-width:320px}.simple-topic select{margin-top:8px}.mix-panel>#make-me-laugh{font-size:19px;min-height:64px;width:100%;margin:10px 0}.mix-panel #mix-result .joke-card{margin-top:24px} @media(max-width:700px){.mix-panel>#make-me-laugh{font-size:18px}}

.character-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0}.character-choices label{font-size:14px;font-weight:700}.character-choices select{margin-top:8px}.community-card time{display:block;margin:0 0 20px}.community-card>.text-link{display:block;margin:18px 0}.community-social{border-top:1px solid var(--line);padding-top:16px;margin-top:24px}.community-votes{display:flex;gap:8px}.community-votes [aria-pressed=true]{background:var(--yellow);border-color:var(--ink)}.community-social summary{cursor:pointer;min-height:44px;font-weight:bold}.comment-form{display:grid;gap:12px}.comment-form label{font-size:13px;font-weight:bold}.comment-form input,.comment-form textarea{display:block;margin-top:6px}.community-comment{border-bottom:1px solid var(--line);padding:14px 0}.community-comment strong,.community-comment span{display:block}.community-comment span{white-space:pre-wrap;overflow-wrap:anywhere}#recent-list{align-items:start}#recent-more{margin-top:25px}@media(max-width:480px){.character-choices{grid-template-columns:1fr}.community-card{padding:20px}.header nav{gap:0}}