/* Home page (index.html and the comic pages, which are copies of it): the games
   area under the comic -- quiz + sign-up, Ask Gerald, trivia with Cindy, crossword /
   word search / group row -- and the rail sponsor box. Loaded from inside <main>
   so the other generators, which lift index.html's head, never pick it up.
   Filled by assets/home.js. */
.comic{grid-template-areas:"rail stage" "share stage" "prev prev" "games games" "join join" !important}
.games{grid-area:games;display:grid;gap:30px;margin-top:6px}
.games__row .dq-split{margin-top:0}
.games__row .sub{margin-top:0}
.games__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.4vw,38px);padding-top:24px;border-top:1px solid var(--line)}
.gcard{display:flex;flex-direction:column}.gcard .comic__label{font-size:clamp(22px,1.8vw,26px)}
.gcard__how{margin:6px 0 0}.gcard__btn{margin-top:auto;align-self:flex-start;width:230px;max-width:100%;justify-content:center;text-align:center}.gcard > div{margin:12px 0 14px}
.gquiz{background:#1E1E1E;color:#F3ECDC;padding:22px;display:flex;flex-direction:column;gap:8px}
.gquiz__k{margin:0;font:800 12px system-ui;text-transform:uppercase;letter-spacing:.1em;color:#e8a29d}
.gquiz__t{margin:0;font-family:var(--display);font-weight:900;font-size:30px;line-height:1;text-transform:uppercase}
.gquiz__b{margin:0;font-size:15px;opacity:.85}
.gquiz__btn{margin-top:auto;align-self:stretch;text-align:center;background:#F3ECDC;color:#1E1E1E;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:20px;padding:11px;text-decoration:none}
.pxw__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;background:#1E1E1E;border:2px solid #1E1E1E;width:100%;max-width:380px}
.pxw__grid i{aspect-ratio:1;background:#fff}.pxw__grid i.b{background:#1E1E1E}
.pws__grid{display:grid;grid-template-columns:repeat(10,1fr);width:100%;max-width:380px;border:2px solid #1E1E1E;background:#fff}
.pws__grid i{aspect-ratio:1;display:grid;place-items:center;font:700 clamp(15px,1.5vw,20px) system-ui;font-style:normal}
.pws__grid i:nth-child(n+31):nth-child(-n+38){background:#f2c9c5}
.ptv__q{background:#1E1E1E;color:#F3ECDC;padding:12px 14px;display:grid;gap:6px}
.ptv__k{font:800 11px system-ui;text-transform:uppercase;letter-spacing:.08em;color:#e8a29d}
.ptv__q b{font-size:15px}.ptv__a{border:1px solid #6b655c;padding:5px 9px;font-size:14px}
.pag__letter{background:#F7F4EC;border:1px solid var(--line);padding:12px 14px;font-size:14px;line-height:1.5}
.pag__letter p{margin:0 0 6px}.pag__dear{font-weight:700}.pag__ans{margin:0}
.ballot{margin-top:26px;background:#F7F4EC;border:1px solid var(--line);padding:18px 16px 14px;position:relative;
 -webkit-mask:radial-gradient(circle 5px at 8px 0,transparent 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 5px at 8px 0,transparent 98%,#000) 0 0/16px 100% repeat-x}
.ballot__no{margin:0;font:800 12px system-ui;text-transform:uppercase;letter-spacing:.08em;color:#C4322B}
.ballot__q{margin:6px 0 10px;font-family:var(--display);font-weight:900;font-size:24px;line-height:1.05;text-transform:uppercase}
.ballot label{display:flex;gap:10px;align-items:center;padding:6px 0;font-size:15px;border-top:1px dashed var(--line)}
.ballot label i{width:16px;height:16px;border:2px solid #1E1E1E;flex:none}
.ballot .gtwp__btn{margin-top:10px}.ballot__fine{margin:8px 0 0;font-size:12.5px;opacity:.7}
@media (max-width:900px){
 .main{grid-template-areas:"rail" "stage" "nav" "more" "share" "gear" "prev" "games" "join" "faq" !important}
 .games__pair{grid-template-columns:1fr}
}
.pag__row{display:flex;gap:14px;align-items:flex-end}.pag__ger{width:clamp(130px,12vw,180px);flex:none}.pag__ger img:first-child{width:100%;height:auto;display:block;position:relative;z-index:1}.pag__row .pag__letter{flex:1}
.games__solo{padding-top:24px;border-top:1px solid var(--line)}
.games__solo .pag__ger{width:clamp(180px,16vw,240px)}
.games__solo .pag__row{gap:24px;align-items:center}
.games__solo .pag__letter{font-size:16px;padding:18px 20px;max-width:560px}
.games__solo .gcard__btn{margin-top:16px}
.ptv--rail{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.ptv--rail .comic__label{font-size:clamp(21px,1.65vw,22px)}
.ptv--rail .gcard__btn{margin-top:4px}
.pjoin .join{display:flex !important;flex-direction:column;align-items:flex-start;gap:12px;height:100%;margin:0;padding:0;border:0}
.pjoin .join__art{width:100%;max-width:380px;height:auto;aspect-ratio:auto}
.pjoin .join .btn{margin-top:auto;width:230px;max-width:100%}
.comic{grid-template-areas:"rail stage" "share stage" "prev prev" "games games" "join join" !important}

.games3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,38px);padding-top:24px;border-top:1px solid var(--line)}
.games3 .pxw__grid,.games3 .pws__grid{max-width:300px}
.games3 .ptv__q{max-width:340px}

@media (max-width:900px){
 .main{grid-template-areas:"rail" "stage" "nav" "more" "share" "gear" "prev" "games" "join" "faq" !important}
 .games3{grid-template-columns:1fr}
}
.games3 .gcard__head{margin:0}.games3 .gcard__how{margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.games3 .gcard > div{margin:10px 0 14px}
.games3 .gcard__head{height:auto !important;min-height:0 !important;line-height:1;display:block}.games3 .gcard__how{margin-top:8px}.games3 .ptv__q{width:100%;max-width:300px;aspect-ratio:1;align-content:start;box-sizing:border-box}
.games3 .gcard__head .comic__label,.games__solo .gcard__head .comic__label{margin-bottom:0 !important}
.games3 .gcard__how,.games__solo .gcard__how{margin-top:4px !important;line-height:22.4px}.games3 .comic__label,.games__solo .comic__label{font-size:21px !important}
.games__solo .gcard__head{height:auto !important;min-height:0 !important;line-height:1;display:block;margin:0}
.games__pair--tw{align-items:start}.dq-card--trivia{align-self:start}
.gcard .gcard__head{height:auto !important;min-height:0 !important;line-height:1;display:block;margin:0}
.gcard .comic__label{margin-bottom:0 !important;font-size:21px !important}
.gcard .gcard__how{margin-top:4px !important;line-height:22.4px}
.pws__grid--wide{grid-template-columns:repeat(12,1fr) !important;max-width:none !important;width:100%}
.pws__grid--wide i{background:none !important}
.pws__grid--wide i.hit{background:#f2c9c5 !important}
.games__pair--tw .pws > div{margin:12px 0 14px}
.agc{display:block;text-decoration:none;color:#1E1E1E;background:#F7F4EC;border:1px solid #d9d0bd;box-shadow:0 1px 0 #d9d0bd,3px 4px 0 rgba(30,30,30,.08);padding:18px 22px 22px;transform:rotate(-.4deg)}
.agc:hover .agc__btn{background:var(--hover);border-color:var(--hover)}
.agc__mast{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double #1E1E1E;padding-bottom:8px;margin-bottom:14px}
.agc__name{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(28px,2.6vw,36px);letter-spacing:-.01em;font-style:italic}
.agc__no{font:700 11px system-ui;text-transform:uppercase;letter-spacing:.12em;color:#6b6257}
.agc__body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start}
.agc__head{display:block;width:150px;height:150px;border-radius:50%;overflow:hidden;background:#ece3cf;border:2px solid #1E1E1E}
.agc__head img{width:100%;height:auto;display:block;margin-top:4px}
.agc__byline{margin:10px 0 0;font:700 13px system-ui;text-transform:uppercase;letter-spacing:.06em}
.agc__byline span{font-weight:500;text-transform:none;letter-spacing:0;color:#6b6257;font-size:13px}
.agc__hl{margin:0 0 10px;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.15}
.agc__txt{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.6;max-width:62ch;
 -webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.agc__sign{margin:4px 0 14px;font-family:Georgia,serif;font-style:italic;color:#6b6257}
@media (max-width:640px){.agc__body{grid-template-columns:1fr}.agc__by{display:flex;gap:12px;align-items:center}.agc__head{width:84px;height:84px}.agc__byline{margin:0}}
.agopt + .agopt{margin-top:34px}
.agopt__lbl{margin:0 0 10px;font:800 12px system-ui;text-transform:uppercase;letter-spacing:.1em;color:#C4322B}
.agrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(22px,2.4vw,38px);align-items:start}
.agrow .agc__body{grid-template-columns:110px minmax(0,1fr);gap:18px}
.agrow .agc__head{width:110px;height:110px}
.agside{padding-top:4px}
.agside__h{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:21px;text-transform:uppercase;letter-spacing:.015em;border-bottom:3px double #1E1E1E;padding-bottom:8px}
.agpast{list-style:none;margin:0;padding:0}
.agpast li{border-bottom:1px solid var(--line)}
.agpast a{display:block;padding:10px 0;color:inherit;text-decoration:none;font-family:Georgia,serif;font-size:16px;line-height:1.35}
.agpast a:hover{color:var(--hover-text)}
.agpast__n{display:block;font:700 11px system-ui;text-transform:uppercase;letter-spacing:.1em;color:#6b6257;margin-bottom:2px}
.agside__all{display:inline-block;margin-top:12px;font-weight:700;color:var(--blue,#2B5BB5)}
.agask__big{margin:0 0 8px;font-family:Georgia,serif;font-weight:700;font-size:24px;line-height:1.15}
.agask__p{margin:0 0 14px;font-size:15px;line-height:1.5}
.agask__fine{margin:8px 0 0;font-size:12.5px;opacity:.7}
@media (max-width:900px){.agrow{grid-template-columns:1fr}}
.agask2{margin-top:16px;padding-top:14px;border-top:3px double #1E1E1E}.agask2__q{margin:0;font-family:Georgia,serif;font-weight:700;font-size:18px}.agask2__q a{color:var(--red,#C4322B);text-decoration:none;white-space:nowrap}.agask2__q a:hover{text-decoration:underline}.agask2__fine{margin:4px 0 0;font-size:12.5px;opacity:.7}
.agrow .agside{padding-top:0;margin-top:-4px}.agrow .agside__h{line-height:1;margin-top:0}
.sub__opt{background:var(--on-dark)}
.agask2__q a{text-decoration:underline !important;text-underline-offset:3px;text-decoration-thickness:2px}
.agside__all,.agask2__q a{display:inline-flex;align-items:center;gap:2px}.aglink__ic{width:1em;height:1em;stroke:currentColor;stroke-width:2.4;fill:none;flex:none}.agask2__q a{text-decoration:none !important}
.dq-card--wide{width:100%;padding:26px 30px;align-self:stretch}
.dq-card--wide .dq-qt{font-size:clamp(26px,2.4vw,32px)}
.dq-card--wide .dq-cq{font-size:20px}
.dq-card--wide .dq-cans{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
.dq-card--wide .dq-cans a{min-height:64px}
.games__grids .pws__grid i{background:none}
.games__grids .pws__grid i.hit{background:#f2c9c5 !important}
.games__grids .pws__grid i:not(.hit){background:none !important}
.games__grids .pxw__grid,.games__grids .pws__grid{max-width:340px !important;width:100%}
@media (max-width:700px){.dq-card--wide .dq-cans{grid-template-columns:1fr 1fr}}
.games__three{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.games__three .pxw__grid,.games__three .pws__grid{max-width:none !important;width:100%}
.pjoin3 .join{display:flex !important;flex-direction:column;align-items:flex-start;gap:0;height:100%;margin:0;padding:0;border:0;background:none;text-decoration:none;color:inherit}
.pjoin3 .join__art{order:3;width:100%;aspect-ratio:1;object-fit:cover;height:auto;margin:10px 0 14px;border:2px solid #1E1E1E}
.pjoin3 .join__text{display:contents}
.pjoin3 .join__count{order:2;margin:4px 0 0;font-size:16px;line-height:22.4px}
.pjoin3 .join__title{order:1;margin:0;font-family:var(--display);font-weight:800;font-size:21px !important;line-height:1;text-transform:uppercase;letter-spacing:.015em}
.pjoin3 .join__body{display:none}
.pjoin3 .join .btn{order:4;margin-top:auto;width:230px;max-width:100%}
@media (max-width:900px){.games__three{grid-template-columns:1fr !important}}
.pjoin3 .join__body{display:block !important;order:4;margin:0 0 14px;font-size:15px;line-height:1.45}.pjoin3 .join__art{aspect-ratio:16/10 !important;margin:10px 0 10px !important}.pjoin3 .join .btn{order:5}
.main{grid-template-areas:"comic more" "comic gear" "comic faq" "gw gw" !important}
.gwide{grid-area:gw;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:clamp(22px,2.4vw,38px);padding-top:26px;border-top:1px solid var(--line);align-items:stretch}
.gwide .pxw__grid,.gwide .pws__grid{max-width:none !important;width:100%}
.pjoin4 .join{display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;height:100%;margin:0;padding:22px;border:1px solid #d9d0bd;background:var(--on-dark);box-shadow:0 1px 0 rgba(30,30,30,.12),0 8px 20px -14px rgba(0,0,0,.33);color:inherit;text-decoration:none;align-items:stretch}
.pjoin4 .join__art{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border:0;margin:0;min-height:260px}
.pjoin4 .join__text{display:flex;flex-direction:column;gap:8px}
.pjoin4 .join__count{margin:0;font:700 11px system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.pjoin4 .join__title{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(30px,2.8vw,40px);line-height:.98;text-transform:uppercase}
.pjoin4 .join__body{display:block !important;margin:0;font-size:16px;line-height:1.5}
.pjoin4 .join .btn{grid-column:2;align-self:end;justify-self:start;width:230px;max-width:100%;margin-top:-8px}
@media (max-width:1140px){.main{grid-template-areas:"comic" "more" "gear" "faq" "gw" !important}}
@media (max-width:900px){
 .main{grid-template-areas:"rail" "stage" "nav" "more" "share" "gear" "prev" "games" "gw" "join" "faq" !important}
 .gwide{grid-template-columns:1fr}.pjoin4 .join{grid-template-columns:1fr}.pjoin4 .join .btn{grid-column:1}
}
.dq-card--wide{position:relative;overflow:visible}.dq-host{position:absolute;right:18px;top:-34px;width:min(42%,400px);height:auto;pointer-events:none}.dq-card--wide .dq-kick,.dq-card--wide .dq-qt,.dq-card--wide .dq-qb,.dq-card--wide .dq-cq{max-width:54%}.dq-card--wide .dq-cq{margin-bottom:28px}.dq-card--wide .dq-cans{position:relative;z-index:1}@media (max-width:700px){.dq-host{position:static;width:80%;align-self:center;margin:-10px 0 -6px}.dq-card--wide .dq-kick,.dq-card--wide .dq-qt,.dq-card--wide .dq-qb,.dq-card--wide .dq-cq{max-width:none}}
.dq-host{top:auto !important;bottom:0;right:10px !important;width:min(40%,380px) !important}.dq-card--wide{overflow:hidden !important}.dq-card--wide .dq-cans{max-width:62%}.dq-card--wide .dq-cnote{max-width:60%}
.dq-card--wide{min-height:340px}.dq-host{width:auto !important;height:calc(100% - 10px);max-width:40%;object-fit:contain;object-position:bottom right}.dq-card--wide .dq-cans{grid-template-columns:1fr 1fr !important}
.gtwp__img{height:144px !important}@media (max-width:900px){.gtwp__img{height:168px !important}}
.agc__head{background:none !important;border:0 !important;border-radius:50%}.agc__head img{margin-top:0 !important;width:100%;height:100%;object-fit:contain}
.agrow .agc__body{grid-template-columns:150px minmax(0,1fr) !important}.agrow .agc__head{width:150px !important;height:150px !important}
.gwide{margin-top:-34px;padding-top:30px !important}.pjoin4 .join,.pjoin4 .join *{text-decoration:none !important}.pjoin4 .join:hover .join__title{color:var(--hover-text)}
.faq{align-self:stretch}
.railad{position:sticky;top:24px;margin-top:34px}
.railad__lbl{margin:0 0 6px;font:700 11px system-ui;letter-spacing:.12em;text-transform:uppercase;color:#8a8175}
.railad__box{display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;max-width:300px;aspect-ratio:1/2;padding:26px;background:repeating-linear-gradient(135deg,#efe7d6 0 14px,#ebe2cf 14px 28px);border:1px dashed #b9ae98;color:#1E1E1E;text-decoration:none}
.railad__name{font-family:var(--display);font-weight:900;font-size:42px;text-transform:uppercase;line-height:.9}
.railad__line{font-size:18px;font-weight:600;line-height:1.3}
.railad__sub{font-size:15px;color:#6b6257}
.railad__dom{font-weight:700;color:var(--blue)}
.railad__size{margin-top:auto;font:700 11px system-ui;letter-spacing:.1em;text-transform:uppercase;color:#8a8175}
.railad__box:hover .railad__dom{color:var(--hover-text)}
@media (max-width:1140px){.railad{display:none}}
.railad__box{aspect-ratio:6/5 !important;padding:20px !important;gap:6px !important}.railad__name{font-size:32px !important}.railad__line{font-size:16px !important}
/* one sponsor look: soft stripes, solid hairline border, small SPONSORED label */
.railad__box{background:repeating-linear-gradient(135deg,#f1eadb 0 12px,#ede5d3 12px 24px) !important;border:1px solid #d9d0bd !important}
.railad__lbl,.spon__lbl{font:700 10.5px system-ui !important;letter-spacing:.14em !important;text-transform:uppercase;color:#8a8175 !important}
.spon--rail{display:block;padding:12px 14px !important;background:repeating-linear-gradient(135deg,#f4eee0 0 12px,#f1eadb 12px 24px);border:1px solid #e0d8c6}
.spon--rail .spon__lbl{display:block;margin-bottom:4px}
.railad__box{aspect-ratio:1 !important;max-width:none !important;padding:24px !important;gap:8px !important}.railad__name{font-size:38px !important}.railad__line{font-size:17px !important}
.railad{position:static !important}
@media (max-width:900px){
 .main{grid-template-columns:minmax(0,1fr) !important}
 /* Ask Gerald clipping: headshot beside the byline, letter full width */
 .agrow .agc__body{grid-template-columns:1fr !important;gap:14px !important}
 .agrow .agc__by{display:flex;gap:14px;align-items:center}
 .agrow .agc__head{width:96px !important;height:96px !important;flex:none}
 .agrow .agc__byline{margin:0}
 .agc{transform:none;padding:16px 16px 18px}
 .agc__hl{font-size:22px}
 .agc__txt{font-size:15.5px}
 .agc .agc__btn{width:100%}
 /* trivia: host on top, a proper size, then the question and answers */
 .dq-card--wide{min-height:0 !important;padding:0 18px 20px !important}
 .dq-host{position:static !important;width:auto !important;height:auto !important;max-width:none !important;width:min(100%,230px) !important;align-self:center;margin:0 auto -4px}
 .dq-card--wide .dq-kick,.dq-card--wide .dq-qt,.dq-card--wide .dq-qb,.dq-card--wide .dq-cq{max-width:none !important}
 .dq-card--wide .dq-cq{margin-bottom:6px}
 .dq-card--wide .dq-cans,.dq-card--wide .dq-cnote{max-width:none !important}
 .dq-card--wide .dq-cans{grid-template-columns:1fr 1fr !important}
 .dq-card--wide .dq-cans a{min-height:56px}
 /* group card: picture on top */
 .pjoin4 .join{grid-template-columns:1fr !important;padding:16px !important;gap:14px}
 .pjoin4 .join__art{min-height:0 !important;aspect-ratio:4/3;height:auto}
 .pjoin4 .join .btn{grid-column:1 !important;width:100% !important;margin-top:4px}
 .gcard__btn{width:100% !important}
}
/* the form: a wide two-column dialog on desktop, full screen on phones */
.ag__dlg{position:fixed;inset:0;margin:auto;height:fit-content;width:min(680px,calc(100vw - 40px));max-height:calc(100vh - 40px);
  padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:auto}
.ag__dlg::backdrop{background:rgba(20,18,15,.6)}
.ag__dlgbar{display:flex;align-items:center;justify-content:space-between;background:var(--black);color:var(--on-dark);padding:16px 22px}
.ag__dlg h2{font:800 28px/1 var(--display);text-transform:uppercase;margin:0}
.ag__x{background:none;border:0;font-size:32px;line-height:1;cursor:pointer;color:var(--on-dark);padding:0 4px}
.ag__form{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:20px 24px 22px}
.ag__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ag__row > div{display:flex;flex-direction:column;gap:7px}
.ag__form textarea{min-height:110px;resize:vertical}
.ag__fl,.ag__fr{display:flex;flex-direction:column;gap:8px}
.ag__fl textarea{flex:1;min-height:150px;resize:vertical}
.ag__form label{font-weight:700;font-size:14px}
.ag__form textarea,.ag__form input[type=text],.ag__form input[type=email],.ag__form select{font:inherit;font-size:16px;padding:12px 14px;border:2px solid var(--ink);background:#fff;width:100%;box-sizing:border-box}
.ag__small{margin:0;font-size:13px;color:var(--ink-2)}
.ag__form .ag__chk{display:flex;gap:8px;align-items:flex-start;font-weight:500}
.ag__chk input{margin-top:3px}
.ag__form .btn{width:100%;justify-content:center;margin-top:4px}
.ag__thanks{padding:22px 24px 26px}
.ag__thanks p{margin:0 0 16px;line-height:1.55}
.ag__help{margin-top:6px;padding:12px 14px;border-left:4px solid var(--blue);background:rgba(42,93,176,.06);font-size:14px;line-height:1.5}
.ag__help p{margin:0}
@media (max-width:420px){.ag__row{grid-template-columns:1fr}}
@media (max-width:560px){
  .ag__a{margin-left:0}
  .ag__dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}
}
.ag__chk a{color:var(--blue)}

.ag__chk--news{font-weight:500}

@media (min-width:701px) and (max-height:720px){.ag__form{padding-top:16px;padding-bottom:16px}.ag__dlgbar{padding-top:12px;padding-bottom:12px}}

/* No scrolling the page behind the open form (the gutter is already reserved, so nothing shifts) */
html.ag-lock{overflow:hidden}

/* The country picker: our own arrow, set in from the edge like the text */
.ag__form select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") right 14px center/16px 16px no-repeat}
/* Shorter laptop screens: tighten so the whole form fits without scrolling */
@media (min-width:421px) and (max-height:780px){
  .ag__form{gap:5px;padding-top:14px;padding-bottom:16px}
  .ag__form textarea,.ag__form input[type=text],.ag__form input[type=email],.ag__form select{padding-top:9px;padding-bottom:9px}
  .ag__help{padding:8px 12px;font-size:13px;margin-top:2px}
  .ag__small{font-size:12.5px}
  .ag__dlgbar{padding-top:11px;padding-bottom:11px}
}

.ag__acct{display:grid;gap:7px;padding:10px 12px;border:2px solid var(--ink);background:#fff;font-size:14px;line-height:1.45}
.ag__acct a{color:var(--blue);font-weight:700}
.ag__acct p{margin:0}
.ag__acct label{font-weight:700;font-size:14px}
.ag__acct input{font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--ink);background:#fff;width:100%;box-sizing:border-box}
#ag-code{display:grid;gap:8px;margin:0 0 16px}
#ag-code[hidden]{display:none}
#ag-code input{font:inherit;font-size:22px;letter-spacing:.3em;text-align:center;padding:10px 12px;border:2px solid var(--ink);background:#fff;max-width:220px}
#ag-code .btn{justify-self:start}
#ag-acct-em{display:grid;gap:6px}#ag-acct-em[hidden]{display:none}
#ag-acct-em label{font-weight:600}
.ag__acct input{padding:8px 12px}
#ag-acct-em{position:relative}
#ag-acct-em label{padding-right:30px}
.ag__emx{position:absolute;top:-4px;right:-4px;background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--ink);padding:2px 6px}
.ag__emx:hover{color:var(--hover-text)}
/* Country picker: our own list, kept on screen */
.ag__cc{position:relative}
#ag-country{padding-right:44px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") right 14px center/16px 16px no-repeat}
.ag__cclist{position:fixed;z-index:10;margin:0;padding:4px 0;list-style:none;overflow-y:auto;overscroll-behavior:contain;background:#fff;border:2px solid var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.ag__cclist[hidden]{display:none}
.ag__cclist [role=option]{padding:8px 14px;cursor:pointer;font-size:16px}
.ag__cclist [role=option]:hover,.ag__cclist .is-hi{background:var(--blue);color:#fff}
.ag__cclist [aria-selected=true]{font-weight:700}
.ag__ccsep{border-top:1px solid var(--line-2);margin:4px 14px}
.ag__ccnone{padding:10px 14px;color:var(--ink-2);font-size:14px}
/* Breathing room between sections; label, field and hint stay tight together */
.ag__form > .ag__row,.ag__form > .ag__acct,.ag__form > .ag__chk{margin-top:12px}
.ag__form > .btn[type=submit]{margin-top:12px}
.ag__form > .ag__help{margin-top:12px}
@media (min-width:421px) and (max-height:780px){
  .ag__dlg{max-height:calc(100vh - 16px)}
  .ag__form{padding-top:10px;padding-bottom:12px}
  .ag__form > .ag__row,.ag__form > .ag__acct,.ag__form > .ag__chk,.ag__form > .btn[type=submit],.ag__form > .ag__help{margin-top:10px}
}
/* Gerald files every letter */
.ag__q{position:relative;padding-top:22px}
.ag__case{position:absolute;top:-10px;left:14px;background:var(--ink);color:var(--on-dark);font:800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:4px 8px}
/* Form title bar in our red, so it stands off the black site header */
.ag__dlgbar{background:var(--red)}
/* Gerald answers on his legal pad: apart from the white letter and the cream page */
.ag__a{background:#FDF7C3}
.dq-bub{position:relative;background:var(--on-dark);color:#1E1E1E;padding:18px 22px;width:60%;max-width:60%;box-sizing:border-box;border-radius:4px;margin:4px 0 18px}
.dq-bub::after{content:"";position:absolute;right:-16px;top:50%;margin-top:-12px;border:12px solid transparent;border-left:16px solid var(--on-dark);border-right:0}
.dq-card--wide .dq-bub .dq-qt,.dq-card--wide .dq-bub .dq-qb,.dq-card--wide .dq-bub .dq-cq{max-width:none !important;color:#1E1E1E}
.dq-card--wide .dq-bub .dq-qb{opacity:.8;margin:6px 0 10px}
.dq-card--wide .dq-bub .dq-cq{margin:0 !important}
@media (max-width:900px){.dq-bub{max-width:none}.dq-bub::after{right:auto;left:50%;top:-16px;margin:0 0 0 -12px;border:12px solid transparent;border-bottom:16px solid var(--on-dark);border-top:0}}
.dq-bub::after{display:none !important}
@media (max-width:900px){
 .dq-card--wide{position:relative !important;overflow:visible !important;padding:20px 16px 18px !important;margin-top:30px}
 .dq-host{position:absolute !important;right:4px !important;top:-34px !important;bottom:auto !important;height:auto !important;width:150px !important;max-width:42% !important;margin:0 !important;z-index:2}
 .dq-card--wide .dq-kick{max-width:52% !important}
 .dq-bub{width:100% !important;max-width:none !important;margin:88px 0 14px !important;padding:16px 16px !important;position:relative;z-index:3}
 .dq-card--wide .dq-qt{font-size:24px !important}
 .dq-card--wide .dq-cans a{min-height:52px}
}
/* tablets and narrow windows: keep the desktop side-by-side layout; stack only on phones */
@media (min-width:601px) and (max-width:900px){
 .dq-card--wide{position:relative !important;overflow:hidden !important;padding:24px 22px !important;margin-top:0 !important;min-height:360px !important}
 .dq-host{position:absolute !important;top:auto !important;bottom:0 !important;right:6px !important;width:auto !important;height:calc(100% - 20px) !important;max-width:40% !important;margin:0 !important;object-fit:contain;object-position:bottom right}
 .dq-card--wide .dq-kick{max-width:none !important}
 .dq-bub{width:60% !important;max-width:60% !important;margin:4px 0 16px !important}
 .dq-card--wide .dq-cans,.dq-card--wide .dq-cnote{max-width:60% !important}
 .dq-card--wide .dq-cans{grid-template-columns:1fr !important}
 .dq-card--wide .dq-cans a{min-height:44px}
}
/* phones and narrow windows: speech box, then her, then the answers */
@media (max-width:900px){
 .dq-card--wide{position:relative !important;overflow:hidden !important;padding:20px 16px 18px !important;margin-top:0 !important;min-height:0 !important}
 .dq-card--wide .dq-kick{max-width:none !important}
 .dq-bub{width:100% !important;max-width:none !important;margin:6px 0 0 !important}
 .dq-host{position:static !important;display:block;width:min(70%,260px) !important;height:auto !important;max-width:none !important;margin:8px auto -2px !important;object-fit:contain}
 .dq-card--wide .dq-cans,.dq-card--wide .dq-cnote{max-width:none !important}
 .dq-card--wide .dq-cans{grid-template-columns:1fr 1fr !important}
 .dq-card--wide .dq-cans a{min-height:52px}
}
.dq-hostrow{display:contents}
@media (max-width:900px){
 .dq-hostrow{display:grid;grid-template-columns:42% minmax(0,1fr);gap:12px;align-items:end;margin-top:12px}
 .dq-hostrow .dq-host{width:100% !important;margin:0 0 -18px !important;align-self:end}
 .dq-hostrow .dq-cans{grid-template-columns:1fr !important;gap:8px !important}
 .dq-hostrow .dq-cans a{min-height:0 !important;padding:10px 12px}
}
@media (max-width:900px){
 .dq-card--wide{overflow:visible !important;padding-bottom:0 !important;margin-bottom:34px !important}
 .dq-hostrow{align-items:end !important}
 .dq-hostrow .dq-host{margin:0 !important;display:block}
 .dq-hostrow .dq-cans{padding-bottom:16px}
 .dq-card--wide .dq-cnote{position:absolute;left:0;right:0;top:100%;margin:8px 0 0 !important;color:var(--ink-2,#6b6257) !important;opacity:1 !important}
}
.dq-hostpic{display:contents}
@media (max-width:900px){
 .dq-hostpic{display:block;align-self:end;line-height:0}
 .dq-hostrow{grid-template-columns:52% minmax(0,1fr) !important}
}
.dq-card--wide .dq-bub .dq-qt{font-size:clamp(18px,1.5vw,21px) !important}
.dq-card--wide .dq-bub .dq-qb{font-size:15px}
.dq-card--wide .dq-bub .dq-cq{font-family:var(--display);font-weight:900;font-size:clamp(30px,2.8vw,40px) !important;line-height:1.02;text-transform:uppercase;margin-top:12px !important}
@media (max-width:900px){.dq-card--wide .dq-bub .dq-qt{font-size:18px !important}.dq-card--wide .dq-bub .dq-cq{font-size:28px !important}}
@media (min-width:901px){.dq-card--wide .dq-cans{max-width:none !important;width:57% !important}.dq-card--wide .dq-bub{width:57% !important;max-width:57% !important}}
.dq-bub{position:relative}.dq-bubtag{position:absolute;left:16px;top:0;transform:translateY(-55%)}.dq-card--wide .dq-bub{margin-top:14px !important}
@media (max-width:900px){.dq-hostrow{align-items:end !important}.dq-hostrow .dq-cans{align-self:start !important;padding-top:6px}.dq-card--wide{margin-bottom:56px !important}.dq-card--wide .dq-cnote{margin-top:10px !important}}
@media (max-width:900px){.dq-hostrow .dq-cans{gap:6px !important;padding-top:0 !important}.dq-hostrow .dq-cans a{padding:8px 10px !important;font-size:14px;line-height:1.25}.dq-hostrow{grid-template-columns:55% minmax(0,1fr) !important}.dq-card--wide{margin-bottom:76px !important}}
@media (max-width:900px){.dq-hostrow .dq-cans{margin-top:42px !important;align-self:end !important;padding-bottom:14px !important}}
@media (max-width:900px){.dq-hostrow .dq-cans{margin-top:0 !important;gap:5px !important;padding-bottom:14px !important}.dq-hostrow .dq-cans a{padding:6px 9px !important;font-size:13.5px !important;line-height:1.2 !important}}
@media (max-width:900px){.dq-hostrow .dq-cans{align-self:center !important;padding-bottom:0 !important;margin:0 !important}}
@media (max-width:900px){.dq-hostrow .dq-cans{gap:6px !important}.dq-hostrow .dq-cans a{font-size:15px !important;line-height:1.25 !important;padding:10px 11px !important;min-height:42px !important;display:flex;align-items:center}}
@media (max-width:900px){
 .gwide{grid-template-columns:1fr 1fr !important;gap:16px 14px !important}
 .gwide .pjoin4{grid-column:1 / -1}
 .gwide .gcard .comic__label{font-size:21px !important;white-space:normal;line-height:1}
 .gwide .gcard__how{font-size:13.5px !important;line-height:1.3 !important;white-space:normal !important}
 .gwide .gcard > div{margin:8px 0 10px !important}
 .gwide .pws__grid i{font-size:9px !important}
 .gwide .gcard__btn{width:100% !important;font-size:15px;padding-left:6px;padding-right:6px}
}
@media (max-width:900px){}
@media (max-width:900px){
 .pjoin4 .join{display:grid !important;grid-template-columns:38% minmax(0,1fr) !important;grid-template-areas:"art text" "art btn" !important;grid-template-rows:auto 1fr !important;gap:10px 18px !important;padding:16px !important;align-items:start}
 .pjoin4 .join__art{grid-area:art !important;width:100% !important;height:100% !important;min-height:0 !important;aspect-ratio:auto !important;object-fit:cover}
 .pjoin4 .join__text{grid-area:text !important}
 .pjoin4 .join .btn{grid-area:btn !important;grid-column:auto !important;align-self:end;justify-self:start;width:230px !important;max-width:100% !important;margin:6px 0 0 !important}
 .pjoin4 .join__title{font-size:26px !important}
}
@media (max-width:520px){
 .pjoin4 .join{grid-template-columns:1fr !important;grid-template-areas:"art" "text" "btn" !important;grid-template-rows:auto !important}
 .pjoin4 .join__art{height:auto !important;aspect-ratio:16/10 !important}
 .pjoin4 .join .btn{width:100% !important}
}
@media (max-width:900px){.agrow{row-gap:32px !important}.agrow .agside{margin-top:0 !important}}
@media (max-width:900px){
 .spon--rail{display:none !important}
 .more .spon{display:block;margin-top:22px;padding:12px 14px !important;border:1px solid #e0d8c6 !important;background:repeating-linear-gradient(135deg,#f4eee0 0 12px,#f1eadb 12px 24px)}
 .more .spon .spon__lbl{display:block;margin-bottom:4px}
}
.gtwp__ger{align-items:center !important}
/* Crossword and word search: the whole card is the link, not just its button. */
.gwide .pxw,.gwide .pws{position:relative;cursor:pointer}
.gwide .pxw .gcard__btn::after,.gwide .pws .gcard__btn::after{content:"";position:absolute;inset:0}
.gwide .pxw:hover .gcard__btn,.gwide .pws:hover .gcard__btn{background:var(--hover);border-color:var(--hover)}
.pjoin4 .join{cursor:pointer}
.pjoin4 .join:hover .btn{background:var(--hover);border-color:var(--hover)}
/* Trivia card mid-game / played: the one link gets the big type to match the message. */
.dq-card--trivia .dq-cans a.dq-go{font-family:var(--display) !important;font-weight:900 !important;font-size:clamp(34px,3.4vw,48px) !important;line-height:1 !important;text-transform:uppercase;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;min-height:84px !important;background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important;border-radius:6px}
.dq-card--trivia.is-go{cursor:pointer}
.dq-card--trivia.is-go:hover a.dq-go{background:var(--hover) !important;border-color:var(--hover) !important;color:#fff !important}
/* Your progress on the day's puzzles: letters you filled in, words you found. */
.pxw__grid i{display:grid;place-items:center;font:700 clamp(9px,1.05vw,14px)/1 var(--body);text-transform:uppercase;color:var(--ink)}
.pxw.is-done .pxw__grid i:not(.b){background:#cfe6c8}
.pws.is-done .pws__grid i.hit{background:#cfe6c8 !important}
/* Trivia card, desktop: shorter. Smaller question, answer boxes only as tall as their text, no forced card height (Cindy shrinks with it). */
@media (min-width:901px){.dq-card--trivia.dq-card--wide{min-height:0 !important}.dq-card--trivia .dq-bub .dq-cq{font-size:clamp(24px,2vw,30px) !important}.dq-card--trivia .dq-cans a:not(.dq-go){min-height:0 !important;padding:13px 16px !important;display:flex;align-items:center}}
/* Trivia card: no "Seven questions. Be fast." intro; the question is the whole bubble. */
.dq-card--trivia .dq-bub .dq-qt,.dq-card--trivia .dq-bub .dq-qb{display:none !important}.dq-card--trivia .dq-bub .dq-cq{margin-top:0 !important}
@media (min-width:901px){.dq-card--trivia .dq-host{right:30px !important}}