/* katoyapalmer.com inline sign-up for the weekly letter (2026-10-12), plus home-page phone fixes. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}

.kp-signup{position:relative;display:flex;flex-wrap:wrap;gap:10px;max-width:520px;margin:26px 0 0}
.kp-signup input[type=email]{flex:1 1 230px;min-width:0;min-height:52px;padding:0 20px;border-radius:40px;border:1.5px solid color-mix(in srgb,var(--ink,#161210) 22%,transparent);
  background:var(--card,#FCF8EF);color:var(--ink,#161210);font:500 16px/1 "Jost",system-ui,sans-serif}
.kp-signup input[type=email]::placeholder{color:var(--ink-soft,#6E665F)}
.kp-signup input[type=email]:focus-visible{outline:2px solid var(--gold,#C6A24C);outline-offset:2px}
.kp-signup button{flex:0 0 auto;min-height:52px;padding:0 24px;border:0;border-radius:40px;cursor:pointer;background:var(--ink,#161210);color:var(--paper,#F3EBDB);
  font:700 15px/1 "Jost",system-ui,sans-serif;letter-spacing:.02em;transition:background .15s}
.kp-signup button:hover{background:#A81F1A}
.kp-signup button[disabled]{opacity:.6;cursor:wait}
.kp-signup .kp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.kp-signup-msg{flex-basis:100%;margin:2px 4px 0;font:500 14.5px/1.45 "Jost",system-ui,sans-serif;color:var(--ink-soft,#6E665F);min-height:0}
.kp-signup-msg:empty{display:none}
.kp-signup.done input,.kp-signup.done button{display:none}
.kp-signup.done .kp-signup-msg{font-size:17px;color:var(--ink,#161210)}
/* on the dark letter band */
.kp-signup.on-dark input[type=email]{background:rgba(251,246,234,.08);border-color:rgba(234,215,159,.45);color:#FBF6EA}
.kp-signup.on-dark input[type=email]::placeholder{color:#cfc5b2}
.kp-signup.on-dark button{background:var(--champ,#EAD79F);color:#161210}
.kp-signup.on-dark button:hover{background:#fff3cc}
.kp-signup.on-dark .kp-signup-msg,.kp-signup.on-dark.done .kp-signup-msg{color:#FBF6EA}
.kp-past{margin-top:14px}
.kp-past a{text-decoration:underline;text-underline-offset:4px}

/* hero: the secondary links under the sign-up */
.hero .next{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px}

/* Phones: lead with the headline and the sign-up; the portrait follows, smaller. */
@media (max-width:820px){
  .hero .hero-grid>.portrait{order:2;max-width:280px;margin:8px auto 0}
  .kp-signup button{flex:1 1 100%}
}
@media (max-width:820px){.kp-signup input[type=email]{flex-basis:100%}}