/* WHATNXT — "question-led editorial": tomato field, plum ink, blush answers, enormous serif questions. */
@font-face{font-family:"Gloock";src:url(/s/fonts/gloock-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Rethink Sans";src:url(/s/fonts/rethink-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rethink Sans";src:url(/s/fonts/rethink-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --tom:#ef4430;--tom-d:#c9301f;--plum:#2d0f24;--plum-2:#4a1a3c;--blush:#ffe3d8;--blush-2:#ffc9b6;--sky:#a9d8f5;
  --serif:"Gloock",Georgia,serif;--sans:"Rethink Sans",system-ui,sans-serif;
  --snap:cubic-bezier(.5,1.6,.4,1);--glide:cubic-bezier(.2,.8,.2,1);
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tom);color:var(--plum);font:400 1.08rem/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--plum);color:var(--blush);padding:.6rem 1rem}
.skip:focus{left:0}
.wrap{overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.98;margin:0 0 .4em;letter-spacing:-.015em}
h2{font-size:clamp(2.1rem,5.2vw,4.4rem)}
h3{font-size:1.6rem;line-height:1.1}
p{margin:0 0 1em;max-width:62ch}
.qm{color:var(--blush);display:inline-block;transform-origin:50% 85%;animation:tilt 4s var(--glide) infinite}
@keyframes tilt{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-14deg)}86%{transform:rotate(9deg)}}

/* header */
.hd{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.8rem clamp(1rem,3vw,2.4rem);background:var(--tom);border-bottom:2px solid var(--plum)}
.logo{font:400 1.7rem/1 var(--serif);text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--blush)}
.talk{justify-self:end;font-weight:700;text-decoration:none;border-bottom:2px solid}
.ask{position:relative}
.ask-btn{font:400 1.35rem/1 var(--serif);background:var(--plum);color:var(--blush);border:0;border-radius:99px;padding:.65rem 1.3rem;cursor:pointer;transition:transform .35s var(--snap)}
.ask-btn span{display:inline-block;transition:transform .45s var(--snap)}
.ask-btn:hover{transform:rotate(-2deg) scale(1.04)}
.ask-btn[aria-expanded=true] span{transform:rotate(180deg)}
.qs{position:absolute;top:calc(100% + .8rem);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 1.4rem));background:var(--blush);border:2px solid var(--plum);border-radius:26px;padding:.6rem;box-shadow:12px 12px 0 var(--plum);animation:drop .35s var(--snap)}
@keyframes drop{from{opacity:0;transform:translate(-50%,-10px) scale(.97)}}
.qs ul{list-style:none;margin:0;padding:0}
.qs a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem .9rem;border-radius:16px;text-decoration:none;transition:background .2s,padding .3s var(--glide)}
.qs a:hover,.qs a:focus-visible{background:var(--blush-2);padding-left:1.3rem}
.qs a[aria-current]{background:var(--plum);color:var(--blush)}
.qs .q{font:400 1.3rem/1.15 var(--serif)}
.qs .a{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.7;white-space:nowrap}
@media (max-width:620px){.hd{grid-template-columns:auto 1fr;gap:.6rem}.talk{display:none}.ask{justify-self:end}.ask-btn{font-size:1.1rem;padding:.55rem 1rem}.qs{left:auto;right:0;transform:none}.qs .a{display:none}@keyframes drop{from{opacity:0}}}

/* question hero */
.qhero{padding:clamp(3rem,9vw,8rem) clamp(1rem,4vw,3rem) clamp(2.5rem,6vw,5rem);position:relative;overflow:clip}
.qhero .who{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;margin-bottom:1.2rem}
.qhero h1{font-size:clamp(3.4rem,12.5vw,11.5rem);max-width:13ch;line-height:.9}
.qhero .ans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem;margin-top:2.4rem;align-items:start}
.qhero .ans p{font-size:1.25rem}
.qhero .ans .short{font:400 clamp(1.6rem,3vw,2.4rem)/1.1 var(--serif);color:var(--blush)}
.ghost-q{position:absolute;right:-4vw;top:-6vw;font:400 clamp(18rem,48vw,46rem)/1 var(--serif);color:var(--tom-d);z-index:-1;pointer-events:none;user-select:none}
.qhero{isolation:isolate}

/* answer sheet (blush surface) */
.sheet{background:var(--blush);border-radius:48px 48px 0 0;padding:clamp(2.5rem,7vw,6rem) clamp(1rem,4vw,3rem);position:relative;margin-top:-1px}
.sheet+.sheet{border-radius:0}
.plumsec{background:var(--plum);color:var(--blush);padding:clamp(2.5rem,7vw,6rem) clamp(1rem,4vw,3rem)}
.plumsec a{color:var(--blush-2)}
.tomsec{background:var(--tom);padding:clamp(2.5rem,7vw,6rem) clamp(1rem,4vw,3rem)}
.w{max-width:1180px;margin:0 auto}

/* Q&A exchange */
.qa{display:grid;gap:clamp(2rem,4vw,3.4rem)}
.pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1rem,3vw,3rem);align-items:start;border-top:2px solid var(--plum);padding-top:1.4rem}
.plumsec .pair{border-color:rgba(255,227,216,.35)}
.pair .q{font:400 clamp(1.7rem,3.2vw,2.6rem)/1.05 var(--serif)}
.pair .q::after{content:"";display:block;width:2.4rem;height:6px;background:var(--tom);margin-top:1rem;transform:scaleX(.3);transform-origin:left;transition:transform .6s var(--snap)}
.pair:hover .q::after,.pair.seen .q::after{transform:scaleX(1)}
.pair .a p:last-child{margin-bottom:0}

/* oversized disclosure questions */
.bigq details{border-bottom:2px solid var(--plum)}
.bigq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.2rem 0;font:400 clamp(1.6rem,3.6vw,2.8rem)/1.05 var(--serif)}
.bigq summary::-webkit-details-marker{display:none}
.bigq summary::after{content:"?";width:2.6rem;height:2.6rem;border-radius:50%;background:var(--plum);color:var(--blush);display:grid;place-items:center;font-size:1.5rem;transition:transform .45s var(--snap)}
.bigq details[open] summary::after{content:"!";transform:rotate(360deg);background:var(--tom)}
.bigq .ans{padding:0 0 1.6rem;max-width:70ch}
.plumsec .bigq details{border-color:rgba(255,227,216,.35)}
.plumsec .bigq summary::after{background:var(--blush);color:var(--plum)}

/* torn photo */
.snap{margin:0;position:relative;width:100%;max-width:100%}
.snap img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:28px;filter:contrast(1.05) saturate(.9);transform:rotate(-1.6deg);transition:transform .6s var(--snap)}
.snap:hover img{transform:rotate(0)}
.snap .bubble{position:absolute;right:-.6rem;bottom:-1.2rem;background:var(--plum);color:var(--blush);font:400 1.3rem/1.1 var(--serif);padding:.8rem 1.1rem;border-radius:22px 22px 4px 22px;max-width:16rem}
.snap figcaption{font-size:.8rem;margin-top:1.8rem;opacity:.75}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}

/* doors: choose-your-answer links */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.door{display:block;text-decoration:none;padding:1.4rem 1.4rem 1.6rem;border:2px solid var(--plum);border-radius:24px 24px 24px 4px;background:var(--blush);transition:transform .35s var(--snap),box-shadow .35s}
.door:nth-child(even){border-radius:24px 24px 4px 24px;background:var(--blush-2)}
.door:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:8px 8px 0 var(--plum)}
.door .dq{font:400 1.7rem/1.05 var(--serif);display:block;margin-bottom:.6rem}
.door .da{font-size:.95rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.4rem;border-radius:99px;font:700 1rem/1 var(--sans);text-decoration:none;background:var(--plum);color:var(--blush);border:2px solid var(--plum);cursor:pointer;transition:transform .3s var(--snap)}
.btn:hover{transform:rotate(-2deg) scale(1.04)}
.btn--l{background:transparent;color:var(--plum)}
.plumsec .btn{background:var(--blush);color:var(--plum);border-color:var(--blush)}
.plumsec .btn--l{background:transparent;color:var(--blush)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.lst{list-style:none;padding:0;margin:0}
.lst li{padding:.7rem 0 .7rem 2rem;border-bottom:1px solid rgba(45,15,36,.25);position:relative}
.lst li::before{content:"?";position:absolute;left:0;top:.55rem;font:400 1.3rem/1 var(--serif);color:var(--tom)}
.lst.done li::before{content:"!"}
.plumsec .lst li{border-color:rgba(255,227,216,.25)}

/* path-finder tool */
.finder{background:var(--blush);color:var(--plum);border:2px solid var(--plum);border-radius:36px;padding:clamp(1.3rem,3vw,2.4rem);box-shadow:14px 14px 0 var(--plum);position:relative;overflow:hidden}
.finder .step{animation:slidein .45s var(--glide)}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}}
.finder .fq{font:400 clamp(1.8rem,3.4vw,2.6rem)/1.05 var(--serif);margin-bottom:1rem}
.finder .opts{display:grid;gap:.6rem}
.finder .opts button{text-align:left;font:400 1.05rem/1.35 var(--sans);padding:.9rem 1.1rem;border-radius:18px;border:2px solid var(--plum);background:transparent;color:var(--plum);cursor:pointer;transition:background .2s,transform .3s var(--snap)}
.finder .opts button:hover{background:var(--blush-2);transform:translateX(6px)}
.finder .progress{display:flex;gap:.4rem;margin-bottom:1.2rem}
.finder .progress i{flex:1;height:6px;border-radius:3px;background:rgba(45,15,36,.2)}
.finder .progress i.on{background:var(--tom)}
.finder .result h3{font-size:2.2rem}
.finder .restart{background:none;border:0;font:700 .95rem var(--sans);text-decoration:underline;cursor:pointer;color:var(--plum);padding:0;margin-left:1rem}

/* unknowns sorter */
.sorter{background:var(--blush);color:var(--plum);border-radius:36px;padding:clamp(1.3rem,3vw,2.4rem)}
.sorter-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;margin-bottom:1rem}
.sorter-add input{font:inherit;padding:.85rem 1.1rem;border-radius:99px;border:2px solid var(--plum);background:#fff3ec;color:var(--plum);min-width:0;width:100%}
.buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.bucket{border:2px dashed var(--plum);border-radius:24px;padding:1rem;min-height:9rem}
.bucket h3{font-size:1.4rem;margin-bottom:.2rem}
.bucket small{display:block;margin-bottom:.7rem}
.bucket ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.chip{background:var(--plum);color:var(--blush);border-radius:14px;padding:.5rem .7rem;font-size:.95rem;animation:popin .35s var(--snap)}
@keyframes popin{from{transform:scale(.6);opacity:0}}
.chip .acts{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.chip button{font:700 .7rem/1 var(--sans);background:var(--blush);color:var(--plum);border:0;border-radius:99px;padding:.3rem .55rem;cursor:pointer}

/* reading filter */
.qfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.qfilter button{font:400 1.15rem/1 var(--serif);padding:.7rem 1rem;border-radius:99px;border:2px solid var(--plum);background:transparent;color:var(--plum);cursor:pointer;transition:transform .3s var(--snap)}
.qfilter button[aria-pressed=true]{background:var(--plum);color:var(--blush);transform:rotate(-2deg)}
.reads{display:grid;gap:0;border-top:2px solid var(--plum)}
.read{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:1.4rem;align-items:baseline;padding:1.2rem 0;border-bottom:2px solid var(--plum)}
.read h3{font-size:1.6rem;margin:0}
.read p{margin:0}
.read a{font-weight:700;white-space:nowrap}

/* forms */
.form{display:grid;gap:1rem;background:var(--blush);color:var(--plum);border-radius:36px;padding:clamp(1.3rem,3vw,2.4rem)}
.form .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.fl label{display:block;font:400 1.15rem/1.1 var(--serif);margin-bottom:.4rem}
.fl input,.fl select,.fl textarea{width:100%;font:inherit;padding:.8rem 1rem;border-radius:16px;border:2px solid var(--plum);background:#fff3ec;color:var(--plum)}
.fl textarea{min-height:8.5rem;resize:vertical}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;box-shadow:6px 6px 0 var(--tom)}
.fl [aria-invalid=true]{border-color:var(--tom-d);background:#ffe0d6}
.err{color:var(--tom-d);font-weight:700;font-size:.9rem;margin:.3rem 0 0}
.yes{display:flex;gap:.7rem;align-items:flex-start}
.yes input[type=checkbox]{width:1.25rem;height:1.25rem;min-width:1.25rem;margin:.2rem 0 0;accent-color:var(--plum)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{border-radius:18px;padding:1rem 1.2rem;font-weight:700;background:var(--blush-2);max-width:none}
.status.ok{background:var(--sky)}
.status.bad{background:var(--tom);color:var(--blush)}
.mapq{border:2px dashed currentColor;border-radius:28px;padding:1.4rem}

.prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:2.4rem}
.prose ul{padding-left:1.2rem}

/* footer */
.ft{background:var(--plum);color:var(--blush);padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,3rem) 2rem}
.ft-q{font:400 clamp(2.8rem,9vw,8rem)/.95 var(--serif);margin-bottom:2.4rem}
.ft-q span{color:var(--tom)}
.ft-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.7fr);gap:2rem}
.ft .big{font:400 clamp(1.3rem,2.4vw,1.9rem)/1.2 var(--serif)}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.ul-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;cursor:pointer}
.ft-s{font-size:.8rem;opacity:.7;margin-top:2rem}

/* cookie */
.ck{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:80;width:min(620px,calc(100% - 1.4rem));background:var(--blush);border:2px solid var(--plum);border-radius:30px;padding:1.3rem 1.5rem;box-shadow:10px 10px 0 var(--plum);animation:up .45s var(--snap)}
@keyframes up{from{transform:translate(-50%,30px);opacity:0}}
.ck-q{font:400 1.8rem/1 var(--serif)}
.ck-q span{color:var(--tom)}
.ck p{font-size:.95rem}
.ck-b{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.6rem}
.b{font:700 .98rem/1 var(--sans);padding:.9rem;border-radius:99px;border:2px solid var(--plum);background:var(--plum);color:var(--blush);cursor:pointer}
.b+.b{background:transparent;color:var(--plum)}

.pop{opacity:0;transform:translateY(24px) rotate(1deg);transition:opacity .7s var(--glide),transform .7s var(--snap)}
.pop.seen{opacity:1;transform:none}

@media (max-width:820px){
  .qhero .ans,.pair,.split,.form .two,.ft-row,.read{grid-template-columns:minmax(0,1fr)}
  .buckets{grid-template-columns:minmax(0,1fr)}
  .read{gap:.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pop{opacity:1;transform:none}
}

/* ===== v2: conversation composition ===== */
.qhero h1{font-size:clamp(2.6rem,6.6vw,5.8rem);max-width:none;display:inline-block;background:var(--plum);color:var(--blush);padding:.28em .45em .32em;border-radius:48px 48px 48px 8px;line-height:.98;box-shadow:10px 10px 0 var(--tom-d)}
.qhero h1 .qm{color:var(--tom)}
.qhero .ghost-q{display:none}
.qhero .who{display:inline-block;background:var(--blush);border-radius:99px;padding:.45rem .9rem}
.chat-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,3rem) clamp(3rem,6vw,5rem);max-width:1280px;margin:0 auto}
.collage{margin:0;position:relative}
.collage img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50% 50% 50% 12px;border:3px solid var(--plum)}
.collage figcaption{font-size:.78rem;margin-top:.7rem}
.convo{display:grid;gap:.9rem}
.bub{max-width:34rem;padding:1rem 1.25rem;border-radius:26px;font-size:1.08rem;line-height:1.45;opacity:0;transform:translateY(14px) scale(.98);animation:say .55s var(--snap) forwards}
.bub.you{background:var(--blush);justify-self:start;border-bottom-left-radius:6px}
.bub.us{background:var(--plum);color:var(--blush);justify-self:end;border-bottom-right-radius:6px}
.bub small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:.2rem}
.convo .bub:nth-child(2){animation-delay:.35s}.convo .bub:nth-child(3){animation-delay:.7s}.convo .bub:nth-child(4){animation-delay:1.05s}
@keyframes say{to{opacity:1;transform:none}}
.chat-hero h1{font-size:clamp(2.6rem,6vw,5.2rem);margin:.6rem 0 .4rem;line-height:.95}
.thread{display:grid;gap:2.6rem;max-width:1080px;margin:0 auto}
.turn{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(1rem,3vw,2.4rem);align-items:start}
.turn:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.turn:nth-child(even) .ask-b{order:2;justify-self:end}
.ask-b{font:400 clamp(1.5rem,2.8vw,2.2rem)/1.05 var(--serif);background:var(--tom);color:var(--blush);padding:1.1rem 1.3rem;border-radius:30px 30px 30px 6px;align-self:start}
.turn:nth-child(even) .ask-b{border-radius:30px 30px 6px 30px;background:var(--plum)}
.reply{background:#fff3ec;border:2px solid var(--plum);border-radius:30px;padding:1.4rem 1.6rem}
.reply h3{font-size:1.5rem}
.reply ul{margin:.4rem 0 1rem;padding-left:1.1rem}
.reply .meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1rem}
.reply .meta span{font-size:.78rem;font-weight:700;background:var(--blush-2);border-radius:99px;padding:.3rem .65rem}
.reply a.go{font-weight:700}
.log{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:3px solid var(--blush);margin-left:.5rem}
.log li{position:relative;padding:0 0 1.8rem 2rem}
.log li::before{content:"";position:absolute;left:-11px;top:.35rem;width:19px;height:19px;border-radius:50%;background:var(--tom);border:3px solid var(--plum)}
.log .when{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blush-2)}
.log h3{margin:.3rem 0 .4rem;font-size:1.45rem}
.hold{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 2rem}
.snips{display:grid;gap:1rem}
.snipq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;background:var(--blush);border-radius:22px;padding:1rem 1.3rem;border:2px solid var(--plum)}
.snipq p{margin:0}
.snipq strong{font:400 1.25rem/1.1 var(--serif);display:block;margin-bottom:.2rem}
.snipq a{font-weight:700;white-space:nowrap}
@media (max-width:820px){
  .chat-hero,.turn,.turn:nth-child(even),.hold{grid-template-columns:minmax(0,1fr)}
  .turn:nth-child(even) .ask-b{order:0;justify-self:start}
  .snipq{grid-template-columns:minmax(0,1fr)}
  .collage{max-width:420px}
}
@media (prefers-reduced-motion:reduce){.bub{opacity:1;transform:none}}
.tomsec .log .when{color:var(--plum)}.tomsec .log{border-color:var(--plum)}