/* ask.html: "Ask Evan". A stage line, then one glass frame holding the conversation: the visitor's questions on the right,
   Evan's answers as printouts of his own transcript lines (each with its time and a link), the input at the bottom. */
.ak-head h1{max-width:12ch}
.ak-head .lede{margin-top:28px}
.ak-sec{padding-top:clamp(39px,5vw,64px)}
.ak-chat{max-width:880px; padding:clamp(18px,3.4vw,44px)}
.ak-sample{margin:0 0 26px; padding:10px 14px; border:1.5px dashed var(--dash); border-radius:4px; font-size:14px; color:var(--ink)}
.ak-sample b{font-weight:600}
.ak-log{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px}
.ak-msg{min-width:0}
.ak-who{font-size:28px; margin:0 0 6px}
.ak-ans{padding:22px 24px 28px}
.ak-ans > p{font-size:17px; color:var(--paper-ink)}
.ak-try{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-top:14px; font-size:15px; color:var(--paper-ink-muted)!important}
.ak-q{font:inherit; font-size:15px; padding:0; border:0; background:none; color:var(--pen-paper,#1F45D3); text-decoration:underline; text-underline-offset:3px; cursor:pointer; text-align:left}
.ak-you{align-self:flex-end; max-width:85%}
.ak-q-text{padding:12px 16px; border-radius:14px; border:2px solid var(--paper-ink); background:var(--paper); color:var(--paper-ink); box-shadow:4px 4px 0 var(--hard); font-size:17px; overflow-wrap:anywhere}
.ak-lead{margin-bottom:6px}
.ak-quote{margin:0; padding:16px 0 0; border-top:1px solid var(--paper-rule)}
.ak-lead + .ak-quote{border-top:0}
.ak-quote + .ak-quote{margin-top:16px}
.ak-quote figcaption{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 14px; font-size:14px; color:var(--paper-ink-muted)}
.ak-quote figcaption b{font-weight:500; color:var(--paper-ink)}
.ak-quote blockquote{margin:10px 0 0; padding-left:16px; border-left:2px solid var(--paper-ink); font-size:18px; line-height:1.5; font-weight:300; color:var(--paper-ink); overflow-wrap:anywhere}
.ak-quote blockquote b{font-weight:500}
.ak-link{margin-top:10px; font-size:14px}
.ak-link a{color:var(--paper-ink); text-underline-offset:3px}
.ak-form{display:flex; gap:10px; margin-top:30px}
.ak-form input{flex:1 1 0; min-width:0; font:inherit; font-size:17px; padding:14px 16px; border-radius:12px; border:1.5px solid rgba(10,15,20,.22); background:#fff; color:#0A0F14}
.ak-form input:focus{outline:2px solid #0A0F14; outline-offset:1px}
.ak-form button{font:inherit; font-weight:500; font-size:17px; padding:14px 24px; border-radius:12px; border:2px solid #0A0F14; background:#fff; color:#0A0F14; box-shadow:4px 4px 0 #0A0F14; cursor:pointer; transition:transform .16s steps(2,end), box-shadow .16s steps(2,end)}
.ak-form button:hover{transform:translate(-2px,-3px); box-shadow:7px 8px 0 #0A0F14}
.ak-form button:active{transform:translate(3px,3px); box-shadow:1px 1px 0 #0A0F14}
.ak-fine{margin-top:14px; font-size:14px; color:var(--ink-muted)}
@media (max-width:520px){ .ak-ans{padding:18px 16px 24px} .ak-you{max-width:95%} .ak-quote blockquote{font-size:17px} }