/* Homepage composition. App demos keep the shared styles unchanged. */
.homepage .masthead{padding-top:100px;padding-bottom:46px}
.homepage.has-result .randy-intro{visibility:visible}
.homepage .portfolio{position:relative;isolation:isolate;padding-block:50px 60px}
.homepage .portfolio::before{content:"";position:absolute;inset:0 0 -20px;z-index:-1;background:url('assets/paper.png') center bottom/110% 135% no-repeat;pointer-events:none}
.homepage #apps-title{max-width:none;font-size:clamp(30px,4.1vw,58px)}
.homepage .app-list{align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.homepage .fight{--card-color:var(--lime)}
.homepage .overthink{--card-color:var(--cream)}
.homepage .app-entry{display:flex;flex-direction:column;padding:0;box-shadow:var(--shadow);min-width:0}
.homepage .app-preview{position:relative;aspect-ratio:4/3;background:#202622;border-radius:8px 8px 0 0;overflow:hidden;container-type:inline-size}
.homepage .app-info{display:flex;flex:1;flex-direction:column;padding:24px}
.homepage .app-name{font-size:clamp(22px,2.1vw,28px);line-height:1.2;text-wrap:balance}
.homepage .app-detail{display:flex;flex:1;flex-direction:column;padding:12px 0 0;font-size:14px;line-height:1.65}
.homepage .detail-copy{margin-bottom:24px}
.homepage .app-access{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:auto;margin-bottom:14px}
.homepage .app-access .availability{font:12px/1.5 var(--display);margin:0;color:var(--ink)}
.homepage .app-access .status{font:12px/1.5 var(--mono)}
.homepage .app-detail a{align-self:flex-start;margin-top:0;min-height:44px}
.homepage .app-entry.jar .app-detail a{background:var(--ink);color:var(--cream);border-radius:4px;padding:10px 18px;text-decoration:none}
.homepage .app-entry.jar .app-detail a:hover{text-decoration:underline}
.homepage .fight-preview,.homepage .overthink-preview,.homepage .jar-preview{position:absolute;inset:0;color:var(--cream)}
.homepage .fight-preview,.homepage .overthink-preview{bottom:44px}
.homepage .fight-preview img{width:100%;height:100%;object-fit:cover}
.homepage .fight-layered{display:none;position:absolute;inset:0;overflow:hidden}
.homepage [data-fighters-ready] .fight-layered{display:block}
.homepage [data-fighters-ready] .fight-fallback{visibility:hidden}
.homepage .fight-layered .fighter{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;transform-origin:50% 85%}
.homepage .fight-layered .fighter-sushi{left:50%}
.homepage .fight-layered .fighter img{position:absolute;max-width:none;width:200%;height:100%;object-fit:fill}
.homepage .fighter-sushi img{left:-100%}
.homepage .preview-controls{position:absolute;bottom:0;left:0;right:0;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:16px;background:#202622;color:var(--cream);font:clamp(10px,2.8cqw,13px)/1.4 var(--mono)}
.homepage .preview-controls p{margin:0}
.homepage .preview-replay{display:inline-flex;align-items:center;gap:6px;border:0;border-left:1px solid #64714a;min-height:44px;padding:8px 14px;background:transparent;color:var(--lime);font:inherit;cursor:pointer;white-space:nowrap}
.homepage .preview-replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.homepage .preview-replay:hover{background:#35402f}
.homepage .preview-replay:active{background:#455139}
.homepage .preview-replay:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.homepage .app-entry.jar{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr}
.homepage .app-entry.jar .app-preview{height:100%;border-radius:8px 0 0 8px}
.homepage .app-entry.jar .app-info{padding:clamp(28px,4vw,56px);justify-content:center}
.homepage .app-entry.jar .app-name{font-size:clamp(36px,4.8vw,64px);min-height:0}
.homepage .app-entry.jar .app-detail{flex:0;font-size:clamp(16px,1.5vw,19px);padding-top:18px}
.homepage .app-entry.jar .detail-copy{max-width:32ch;margin-bottom:28px}
.homepage .app-entry.jar .app-detail a{min-height:52px;padding:12px 24px;font-size:17px}
@media(prefers-reduced-motion:reduce){.homepage .preview-replay{display:none}}
.homepage .matchup{position:absolute;top:6%;left:8%;right:8%;display:flex;align-items:center;justify-content:space-between;font-size:clamp(13px,4.5cqw,18px);font-weight:700}
.homepage .versus{font:12px var(--mono);color:var(--lime)}
.homepage .preview-caption{position:absolute;bottom:6%;left:0;right:0;text-align:center;font:clamp(11px,3.5cqw,14px)/1.4 var(--mono);color:var(--cream)}
.homepage .thought-connections{position:absolute;width:100%;height:100%;inset:0;fill:var(--pink);stroke:var(--pink);stroke-width:2}
.homepage .thought-connections path{fill:none}
.homepage .thought-message{position:absolute;top:7%;left:50%;transform:translateX(-50%);text-align:center}
.homepage .thought-message span{display:block;font:clamp(11px,3.3cqw,13px)/1.4 var(--mono);margin-bottom:8px}
.homepage .thought-message strong{display:block;background:var(--cream);color:var(--ink);border-radius:12px 12px 2px 12px;padding:2px 22px;font-size:clamp(25px,9cqw,36px);line-height:1.3}
.homepage .thought-node{position:absolute;transform:translate(-50%,-50%);font-size:clamp(11px,3.8cqw,15px);line-height:1.4;white-space:nowrap;padding:10px 12px;background:var(--cream);color:var(--ink);border-radius:4px}
.homepage .thought-reasonable{top:55%;left:26%;transform:translate(-50%,-50%) rotate(-5deg)}
.homepage .thought-spiral{top:55%;left:74%;background:var(--pink);transform:translate(-50%,-50%) rotate(5deg)}
.homepage .thought-conclusion{top:83%;left:50%;background:var(--lime);font-weight:700}
.homepage .jar-preview-title{position:absolute;left:0;right:0;top:7%;text-align:center;font-size:clamp(14px,4.6cqw,18px);font-weight:700}
.homepage .jar-preview-canvas{position:absolute;inset:0;width:100%;height:100%}
.homepage .jar-preview-names{position:absolute;left:13%;right:13%;top:73%;display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:center;font-size:clamp(10px,3.2cqw,13px);line-height:1.2}
.homepage .jar-preview .preview-caption{bottom:4%;color:var(--lime)}
.homepage .committee{padding-block:60px}
.homepage .committee::before{display:none}
.homepage #ballot-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px 60px}
.homepage .committee-intro{padding-top:12px}
.homepage #committee-title,.homepage #result-title{font-size:clamp(28px,2.5vw,36px);max-width:19ch}
.homepage .committee-context{max-width:38ch}
.homepage .committee-context span{display:block;white-space:normal}
.homepage fieldset{margin:0}
.homepage .proposals{grid-template-columns:1fr;gap:0}
.homepage .proposal{grid-template-columns:38px minmax(0,1fr) 64px;align-items:center;align-content:center;gap:16px;min-height:88px;padding:18px 12px;background:transparent;border-radius:0;border-bottom:1px solid #d3d1c7;box-shadow:none}
.homepage .proposal:first-child{border-top:1px solid #d3d1c7}
.homepage .proposal:hover{transform:none;background:var(--cream)}
.homepage .proposal:has(input:checked){background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink)}
.homepage .proposal>.app-icon{width:38px;height:38px;grid-column:1;grid-row:1}
.homepage .proposal-copy{grid-column:2;grid-row:1;gap:5px}
.homepage .proposal-copy strong{font-size:18px}
.homepage .proposal-copy>span{font-size:12px}
.homepage .choice-meta{grid-column:3;grid-row:1;gap:5px;position:relative}
.homepage .choice-meta .status{font-size:11px}
.homepage .selected-label{position:absolute;top:calc(100% + 1px);font-size:10px}
.homepage .vote-actions,.homepage .single-vote{max-width:none;margin:24px 0 0;text-align:left}
.homepage .committee .primary-button{width:auto;min-height:48px;font-size:16px;padding:12px 24px;gap:18px}
.homepage .committee .primary-button svg{width:24px;height:24px}
.homepage .vote-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.homepage .vote-actions .helper{margin:0;flex:1;min-width:18ch}
.homepage .committee-footnote{text-align:left;margin-top:24px;max-width:none}
.homepage .decision-slip{margin-top:24px}
.homepage .chosen-idea h3{font-size:clamp(24px,3.1vw,42px)}
.homepage .committee .share-actions .primary-button{width:100%}
.homepage #ballot-view>noscript{grid-column:1/-1}
@media(max-width:1000px){
  .homepage #ballot-view{gap:24px 30px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .homepage .app-info{padding:20px 18px}
  .homepage .app-name{font-size:22px;min-height:2.4em}
}
@media(max-width:700px){
  .homepage .masthead{padding-top:76px;padding-bottom:37px}
  .homepage .portfolio{padding-block:42px}
  .homepage #apps-title{font-size:30px;max-width:18ch}
  .homepage .app-list{gap:18px;grid-template-columns:1fr}
  .homepage .app-entry.jar{display:flex;grid-column:auto}
  .homepage .app-entry.jar .app-preview{height:auto;border-radius:8px 8px 0 0}
  .homepage .app-entry.jar .app-info{padding:28px 24px}
  .homepage .app-entry.jar .app-name{font-size:40px}
  .homepage .app-entry{display:flex;padding:0}
  .homepage .app-info{padding:24px}
  .homepage .app-name{font-size:25px;min-height:0;max-width:20ch}
  .homepage .app-detail{padding:12px 0 0}
  .homepage .committee{padding-block:36px 42px}
  .homepage #ballot-view{grid-template-columns:1fr;gap:24px}
  .homepage .committee-intro{padding:0}
  .homepage #committee-title,.homepage #result-title{font-size:28px;max-width:22ch}
  .homepage .committee-context{max-width:42ch}
  .homepage .committee-footnote{margin-top:24px}
  .homepage .chosen-idea h3{font-size:23px}
}
@media(max-width:360px){
  .homepage .app-info{padding:20px 18px}
  .homepage .app-name{font-size:23px}
  .homepage .proposal{grid-template-columns:30px minmax(0,1fr) 58px;gap:10px;padding-inline:8px}
  .homepage .proposal>.app-icon{width:30px;height:30px}
  .homepage .proposal-copy strong{font-size:16px}
}

/* A quiet control for the featured app's continuous gas preview. */
.homepage .jar-preview-title{left:20px;right:auto;top:20px;text-align:left}
.homepage .jar-motion{position:absolute;right:12px;top:0;min-height:44px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:var(--lime);font:11px/1.4 var(--mono)}
.homepage .jar-motion:hover{text-decoration:underline;text-underline-offset:4px}
.homepage .jar-motion:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.homepage .jar-motion{display:none}}

/* A real invitation, separate from the just-for-fun committee ballot. */
.homepage .masthead nav{flex-wrap:wrap}
.homepage .newsletter{padding-block:12px 30px;scroll-margin-top:24px}
.newsletter-notice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;background:var(--lime);color:var(--ink);border-radius:8px;padding:48px;box-shadow:var(--shadow)}
.newsletter-copy h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08;max-width:15ch;text-wrap:balance}
.newsletter-copy>p{font-size:16px;line-height:1.65;max-width:34ch;margin-top:20px}
.newsletter-randy{display:flex;align-items:center;gap:16px;margin-top:24px}
.newsletter-randy img{width:88px;height:88px;object-fit:contain;flex:none}
.newsletter-randy p{font-size:16px;font-weight:700;line-height:1.4}
.newsletter-randy span{display:block;font:12px/1.5 var(--mono);margin-top:7px}
.newsletter-form{min-width:0}
.newsletter-form fieldset{display:flex;flex-direction:column;gap:12px;border:0;padding:0;min-width:0}
.newsletter-form label{font-size:14px;font-weight:700}
.newsletter-form input[type=email]{width:100%;min-width:0;min-height:56px;padding:14px 16px;font:16px/1.5 var(--display);background:var(--cream);color:var(--ink);border:1px solid var(--ink);border-radius:4px;caret-color:var(--ink)}
.newsletter-form input::placeholder{color:var(--muted);opacity:1}
.newsletter-form input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.homepage .newsletter-form .primary-button{background:var(--ink);color:var(--cream);font-size:17px;min-height:54px;padding:12px 20px;border-radius:4px;gap:18px}
.homepage .newsletter-form .primary-button svg{width:24px;height:24px}
.homepage .newsletter-form .primary-button:hover:not(:disabled){background:#30332e;transform:none}
.homepage .newsletter-form .primary-button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.newsletter-helper{font-size:13px;line-height:1.6;margin-top:14px;max-width:43ch}
#newsletter-availability{margin-top:8px}
@media(max-width:700px){.newsletter-notice{grid-template-columns:1fr;gap:28px;padding:28px 24px}.newsletter-copy h2{font-size:34px}.newsletter-copy>p{margin-top:16px}.newsletter-randy{margin-top:18px}.newsletter-randy img{width:72px;height:72px}.homepage .masthead nav{gap:12px 22px}}
@media(max-width:360px){.newsletter-notice{padding:24px 18px}.newsletter-copy h2{font-size:30px}}