/* The fonts, served from this site (not Google, so visitors' IP addresses don't go to a third party): Fraunces and
   IBM Plex Mono, both SIL Open Font License, Latin subsets. */
/* Fraunces italic 250-700, latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 250 700;
  font-display: swap;
  src: url(/fonts/fraunces-italic-250-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces italic 250-700, latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 250 700;
  font-display: swap;
  src: url(/fonts/fraunces-italic-250-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces normal 250-700, latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 250 700;
  font-display: swap;
  src: url(/fonts/fraunces-normal-250-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal 250-700, latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 250 700;
  font-display: swap;
  src: url(/fonts/fraunces-normal-250-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono normal 400, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono normal 400, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono normal 500, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono normal 500, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* davidissa.com. Same tokens, type and motion as xenlogic.com (its pages.css), cut down to what this site uses.
   Near-black for immersive moments, light paper for reading, a solid black nav. Orange is for actions only;
   labels and numbers are muted grey; italics only in heroes and quotes. */
:root{
  --paper:#F5F5F3; --card:#FFFFFF; --ink:#0A0A0A; --ink-2:#2A2A2A; --mute:#6B6B6B; --accent:#D1350E; --pop:#FF4A1C; --hair:rgba(10,10,10,.16);
  --night:#0D0D0D; --night-ink:#F5F5F3; --night-mute:#9A9A9A;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,5vw,72px); --ease:cubic-bezier(.16,.84,.24,1);
  --ease-exit:cubic-bezier(.5,0,.75,.2); --t-instant:120ms; --t-quick:240ms; --t-base:480ms; --t-settle:900ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
html[data-tone="dark"]{background:var(--night)}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{left:16px;top:16px;z-index:10;background:var(--card);padding:8px 12px;font:500 12px var(--mono)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- The nav: solid black ---------- */
.top{position:sticky;top:0;z-index:5;background:#0A0A0A;color:#A9A9A6;padding:18px max(var(--pad),calc((100vw - 1240px) / 2 + var(--pad))) 12px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(245,245,243,.1);font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.top a{text-decoration:none}
.top > a{color:#F5F5F3}
.top > a:hover{color:var(--pop)}
/* My mark, beside my name */
.top .brand{display:inline-flex;align-items:center;gap:10px}
.top .mark{width:22px;height:auto;display:block}
.top nav{display:flex;gap:18px;align-items:center}
.top nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a[aria-current="page"]{color:#F5F5F3}
.top nav a:hover{border-bottom-color:var(--pop)}
.top nav a[aria-current="page"]{border-bottom-color:var(--pop)}
.top a:focus-visible{outline-color:var(--pop)}
/* The one action in the nav: XenLogic */
.top nav a.nav-talk,.top .menu-talk{color:#0A0A0A;background:var(--pop);padding:7px 11px;margin:-7px 0 -7px 6px;border-bottom:0;transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.top nav a.nav-talk:hover,.top .menu-talk:hover{background:#F5F5F3;color:#0A0A0A}
/* Small screens: the nav folds behind a Menu button (menu.js); XenLogic stays beside it */
.menu-btn{all:unset;box-sizing:border-box;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:#F5F5F3;padding:7px 11px;border:1px solid rgba(245,245,243,.45)}
.menu-btn:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
.menu-btn,.menu-talk{display:none}
@media (max-width: 760px){
  .top{row-gap:0}
  .top .menu-talk{display:inline-block;margin:0 0 0 auto;padding:8px 11px;text-decoration:none}
  .top .menu-btn{display:inline-block;margin-left:10px}
  .top > nav{display:none}
  .top.menu-open > nav{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;margin-top:12px;border-top:1px solid rgba(245,245,243,.12)}
  .top.menu-open > nav a{padding:13px 0;font-size:11.5px;border-bottom:1px solid rgba(245,245,243,.1)}
  .top > nav a.nav-talk{display:none}
}

/* ---------- Reading pages ---------- */
main{max-width:1240px;margin:0 auto;padding:0 var(--pad) 40px}
.hero{padding:clamp(56px,10vh,110px) 0 clamp(40px,7vh,72px);max-width:56rem}
.kicker{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1px;background:currentColor}
h1{font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(2.6rem,6vw,5.6rem);line-height:.95;letter-spacing:-.034em}
h1 em{font-style:italic;font-weight:260}
.lede{font-style:italic;font-weight:300;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.4;color:var(--ink-2);margin-top:24px;max-width:40ch}
section{border-top:1px solid var(--hair);padding:clamp(40px,7vh,72px) 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(24px,4vw,64px)}
section > h2{font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
section > h2 b{display:block;font:300 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-transform:none;margin-top:10px}
.belief{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.5;color:var(--ink-2);max-width:38ch}
.belief + .belief{margin-top:1em}
.belief a,.now a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
.belief a:hover,.now a:hover{color:var(--accent)}
.quote{font:italic 290 clamp(1.8rem,3.4vw,3rem)/1.05 var(--serif);letter-spacing:-.02em;max-width:22ch}
.cta{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:28px}
.btn{display:inline-block;text-decoration:none;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:15px 18px;border:1px solid var(--ink)}
.btn.primary{background:var(--pop);border-color:var(--pop);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:default}

/* The contact form (contact.js) */
.contact-form{max-width:40rem;margin-top:32px}
.contact-form .field{margin-bottom:22px}
.contact-form label{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;box-sizing:border-box;font:400 17px/1.45 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:8px 0;transition:border-color var(--t-quick) var(--ease)}
.contact-form textarea{resize:vertical;min-height:9em;border:1px solid var(--hair);padding:12px 14px}
.contact-form select{appearance:none;cursor:pointer;background:linear-gradient(45deg,transparent 50%,var(--mute) 50%) right 6px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--mute) 50%) right 0 center/6px 6px no-repeat;padding-right:24px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--ink)}
.contact-form :focus-visible{outline:2px solid var(--pop);outline-offset:3px}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .ts{min-height:65px;margin:4px 0 0}
.contact-form .cta{margin-top:20px}
.contact-form button{cursor:pointer}
.form-status{font:400 15px/1.45 var(--serif);color:var(--mute);margin:0}
.form-status.is-err,.form-status.is-sent{color:var(--ink)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* Now: what I'm doing at the moment, one line each */
.now{list-style:none;border-bottom:1px solid var(--hair)}
.now li{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:4px 20px;padding:16px 0;border-top:1px solid var(--hair)}
.now li > span{font:500 10.5px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.now li > p{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.45;color:var(--ink-2);max-width:46ch}
.now-when{margin-top:12px;font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
/* Work and writing: one line each */
.roles{list-style:none;border-bottom:1px solid var(--hair)}
.roles li{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);gap:4px 20px;padding:16px 0;border-top:1px solid var(--hair)}
.roles li > span{font:500 10.5px/2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.roles b{font-weight:400;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.3}
.roles i{font-style:normal;display:block;font:500 10.5px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:2px}
.roles p{font-size:16px;line-height:1.5;color:var(--ink-2);margin-top:6px;max-width:56ch}
.roles a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
.roles a:hover{color:var(--accent)}
.posts a{font-size:clamp(1.05rem,1.35vw,1.2rem)}
@media (max-width: 760px){ .roles li{grid-template-columns:1fr} }
/* Writing: one post, set for reading */
.post .hero{max-width:46rem}
.post .hero h1{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1}
.post .kicker a{text-decoration:none}
.post .kicker a:hover{color:var(--ink)}
.prose{max-width:40rem;padding-bottom:24px;font-size:clamp(1.06rem,1.25vw,1.18rem);line-height:1.65;color:var(--ink-2)}
.prose > * + *{margin-top:1.1em}
.prose h2,.prose h3,.prose h4{font-weight:400;color:var(--ink);line-height:1.2;letter-spacing:-.01em;margin-top:2em}
.prose h2{font-size:1.6em}.prose h3{font-size:1.3em}.prose h4{font-size:1.1em}
.prose h2 strong,.prose h3 strong,.prose h4 strong{font-weight:inherit}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent)}
.prose blockquote{border-left:2px solid var(--ink);padding-left:20px;font-style:italic;font-size:1.12em;line-height:1.5;color:var(--ink)}
.prose blockquote > * + *{margin-top:.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose figure{margin-top:2em;margin-bottom:2em}
.prose img{display:block;width:100%;height:auto}
.prose figcaption{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--mute)}
.prose .video{position:relative;aspect-ratio:16/9;background:var(--ink)}
.prose .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sign{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:40rem;margin:24px 0 64px;padding-top:24px;border-top:1px solid var(--hair)}
.sign img{width:150px;height:auto}
.sign a{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--accent)}
.sign a:hover{color:var(--accent)}


footer{max-width:1240px;margin:0 auto;padding:24px var(--pad) 40px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
footer nav{display:flex;flex-wrap:wrap;gap:12px 20px}
footer a{text-decoration:none;border-bottom:1px solid var(--accent);color:var(--ink)}
footer a:hover{color:var(--accent);border-bottom-color:var(--ink)}
@media (max-width: 760px){
  section{grid-template-columns:1fr}
  .now li{grid-template-columns:1fr}
}

/* ---------- Home: the hero, on near-black ---------- */
.hero-d{position:relative;overflow:hidden;background:var(--night);color:var(--night-ink);min-height:min(86svh,960px);display:grid;align-items:start}   /* top-aligned: answers of any length grow downward, nothing jumps */
.hero-d canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-in{position:relative;max-width:1240px;width:100%;margin:0 auto;padding:clamp(56px,14vh,150px) var(--pad) clamp(56px,10vh,110px);display:grid;align-items:center;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.hero-d h1 .who,.invite .who{display:block;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--night-mute);margin-bottom:22px}
.hero-d h1 .what,.invite .what{display:block;max-width:17ch}
/* After the headline has been read, it lifts into birds and settles into this invitation (ask.js) */
.invite p{font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(2.6rem,6vw,5.6rem);line-height:.95;letter-spacing:-.034em}
.invite[hidden]{display:none}
.hero-d h1 em{font-weight:260}
/* My monogram as a 5px halftone, beside the line and the conversation */
.stage-mark{display:block;grid-area:1/1;align-self:start;justify-self:center;width:clamp(130px,19vw,245px);height:auto;
  -webkit-mask:radial-gradient(circle at center,#000 58%,transparent 62%) 0 0/5px 5px;mask:radial-gradient(circle at center,#000 58%,transparent 62%) 0 0/5px 5px}
.hero-in > .hero-text{grid-area:1/2}
@media (max-width: 760px){
  .hero-in{grid-template-columns:1fr}
  .stage-mark{justify-self:start;width:120px}
  .hero-in > .hero-text{grid-area:2/1}
  .ask-chips button{font-size:13.5px}
}
/* The opening (hero.js): the mark and the line wait for their ink, then take over from it in place */
.intro .stage-mark,.intro .hero-d h1{opacity:0}
.intro .hero-d .on{opacity:1;transition:opacity var(--t-base) var(--ease)}

/* The conversation (ask.js): the answer takes the headline's place; the words lift into birds and settle again */
.say{display:grid}
.say > h1,.say > .invite,.say > .reply{grid-area:1/1}
.hero-d .gone{opacity:0}
.reply .asked{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--night-mute);margin-bottom:18px;max-width:60ch}
/* The question an answer ends on, on its own line below it (ask.js) */
.reply-q{font-style:italic;font-weight:300;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.3;letter-spacing:-.012em;max-width:34ch;margin-top:.9em}
.reply-q[hidden]{display:none}
.reply-text{font-weight:300;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.3;letter-spacing:-.012em;max-width:34ch}
.ask{margin-top:clamp(28px,5vh,48px);max-width:40rem;transition:opacity var(--t-base) var(--ease)}
.intro .ask{opacity:0}
/* The gate after the first, free question (ask.js): a name and email to keep going */
.ask-gate{max-width:40rem;transition:opacity var(--t-base) var(--ease)}
.ask-gate[hidden]{display:none}
.gate-fields{display:flex;align-items:center;gap:0 18px;border-bottom:1px solid rgba(245,245,243,.35)}
.gate-fields:focus-within{border-bottom-color:var(--night-ink)}
.gate-fields input{all:unset;flex:1;min-width:0;font:300 clamp(1.05rem,1.5vw,1.25rem)/1.3 var(--serif);color:var(--night-ink);padding:12px 0}
.gate-fields input::placeholder{color:var(--night-mute)}
.gate-fields input + input{border-left:1px solid rgba(245,245,243,.18);padding-left:18px}
.gate-fields button{all:unset;cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#0A0A0A;background:var(--pop);padding:12px 16px;margin:6px 0;transition:opacity var(--t-base) var(--ease),background var(--t-quick) var(--ease)}
.gate-fields button:hover{background:var(--night-ink)}
.gate-fields button:disabled{opacity:.4;pointer-events:none}
.gate-fields button:focus-visible,.gate-fields input:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
.gate-ts:empty,.gate-ts[hidden],.gate-step-code[hidden],.gate-who[hidden]{display:none}
.gate-sent{font:300 clamp(1rem,1.4vw,1.15rem)/1.4 var(--serif);color:var(--night-ink);margin-bottom:6px}
.gate-sent b{font-weight:400}
#g-code{letter-spacing:.3em;font-variant-numeric:tabular-nums}
#g-code::placeholder{letter-spacing:normal}
.gate-alt{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.gate-alt a{color:var(--night-mute);text-decoration:none;border-bottom:1px solid transparent}
.gate-alt a:hover{color:var(--night-ink);border-bottom-color:var(--night-ink)}
.gate-ts{margin-top:12px}
.gate-status{margin-top:10px;font:400 12px/1.5 var(--mono);color:var(--night-ink)}
.gate-status:empty{display:none}
@media (max-width: 760px){
  .gate-fields{flex-wrap:wrap;border-bottom:0}
  .gate-fields input{flex:1 1 100%;border-bottom:1px solid rgba(245,245,243,.35)}
  .gate-fields input + input{border-left:0;padding-left:0}
  .gate-fields button{margin-top:14px}
}
/* At rest, past the day's cap (ask.js): a few things I believe, turning slowly, then ways to reach me */
.ask-rest{margin:0;max-width:40rem}
.ask-rest[hidden]{display:none}
.rest-quote{font:italic 300 clamp(1.25rem,2vw,1.7rem)/1.35 var(--serif);color:var(--night-ink);max-width:34ch;transition:opacity var(--t-base) var(--ease)}
.rest-ctl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.rest-ctl button{all:unset;cursor:pointer;font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-mute);border-bottom:1px solid transparent}
.rest-ctl button:hover{color:var(--night-ink);border-bottom-color:var(--night-ink)}
.rest-ctl button:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
.rest-ctl button[hidden]{display:none}
.ask-next{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:opacity var(--t-base) var(--ease)}
.ask-next.gone{pointer-events:none}
.ask-next[hidden]{display:none}
.ask-next a{text-decoration:none;color:var(--night-ink);border-bottom:1px solid var(--pop);padding-bottom:2px;transition:opacity var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.ask-next a[hidden]{display:none}
.ask-next a.ask-again{color:var(--night-mute);border-bottom-color:transparent}
.ask-next a:hover{color:var(--pop)}
.ask-form{position:relative;display:flex;border-bottom:1px solid rgba(245,245,243,.35);transition:border-color var(--t-quick) var(--ease)}
.ask-form:focus-within{border-bottom-color:var(--night-ink)}
.ask-form input{all:unset;flex:1;min-width:0;font:italic 300 clamp(1.1rem,1.6vw,1.35rem)/1.3 var(--serif);color:var(--night-ink);caret-color:var(--pop);padding:12px 0}
.ask-form input::placeholder{color:var(--night-mute);transition:color var(--t-base) var(--ease)}
/* An invisible copy of the question, where it was typed, for the birds to lift off (ask.js) */
.ask-ghost{position:absolute;left:0;right:90px;top:50%;transform:translateY(-50%);font:italic 300 clamp(1.1rem,1.6vw,1.35rem)/1.3 var(--serif);white-space:nowrap;overflow:hidden;opacity:0;pointer-events:none}
/* With the invitation, a blinking caret in the empty box, as if it were already waiting for you */
.ask-form.waiting::before{content:"";position:absolute;left:0;top:50%;width:1.5px;height:1.25em;font:italic 300 clamp(1.1rem,1.6vw,1.35rem)/1.3 var(--serif);background:var(--pop);transform:translateY(-50%);animation:caret 1.1s steps(1) infinite;pointer-events:none}
.ask-form.waiting:focus-within::before,.ask-form.waiting:has(input:not(:placeholder-shown))::before{display:none}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .ask-form.waiting::before{animation:none} }
.ask-form button{all:unset;cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#0A0A0A;background:var(--pop);padding:12px 16px;margin:6px 0 6px 12px;align-self:center;transition:opacity var(--t-base) var(--ease),background var(--t-quick) var(--ease)}
.ask-form button:hover{background:var(--night-ink)}
.ask-form button:focus-visible,.ask-chips button:focus-visible,.ask-next a:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
.ask-form.busy button{opacity:.4;pointer-events:none}
.ask-form.busy input::placeholder{color:transparent}   /* the question is lifting off from here */
/* The suggestions sit under the invitation, above the box, and only while it is showing (ask.js) */
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,4vh,40px);max-width:40rem;animation:chipsIn var(--t-base) var(--ease) both;transition:opacity var(--t-base) var(--ease)}
.ask-chips[hidden]{display:none}
@keyframes chipsIn{from{opacity:0}}
.ask-chips button{all:unset;cursor:pointer;font:400 14px/1.3 var(--serif);color:var(--night-ink);padding:8px 12px;border:1px solid rgba(245,245,243,.25);transition:border-color var(--t-quick) var(--ease)}
.ask-chips button:hover{border-color:var(--night-ink)}
.thinking .ask-chips{opacity:.35;pointer-events:none}
.hero-d .ask-chips.gone{opacity:0;pointer-events:none}
.ask-note{margin-top:16px;font:400 10px/1.5 var(--mono);letter-spacing:.06em;color:var(--night-mute)}
.ask-note a{color:var(--night-ink);text-decoration:none;border-bottom:1px solid rgba(245,245,243,.35)}
.ask-note a:hover{border-bottom-color:var(--night-ink)}

/* Prototype only: the draft legend on the inner pages. Remove before launch. */
.proto{position:fixed;right:12px;bottom:12px;z-index:6;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:#0A0A0A;color:#A9A9A6;padding:10px 12px;font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(245,245,243,.2)}
.proto a{color:#F5F5F3;text-decoration:none;border-bottom:1px solid transparent}
.proto a[aria-current="true"]{border-bottom-color:#F5F5F3}
.proto a:hover{border-bottom-color:#A9A9A6}

/* ---------- Between pages: the murmuration (flock.js), as on xenlogic.com ---------- */
/* The header never leaves: it's the same on every page, so it stays put (its own layer in the browser's page
   transition, never hidden or faded) while the page under it turns to birds and settles again. */
@media (prefers-reduced-motion: no-preference){ @view-transition { navigation: auto; } }
::view-transition-old(root),::view-transition-new(root){animation:none}
.top{view-transition-name:site-header}
::view-transition-group(site-header),::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
::view-transition-old(site-header){display:none}
html.flock-in body>*:not(.flock-veil):not(.top){opacity:0}
html.flock-out body>*:not(.flock-veil):not(.top){opacity:0;transition:opacity var(--t-quick) var(--ease-exit)}
html.flock-show main>*{animation:flockIn var(--t-base) var(--ease) both}
html.flock-show main>*:nth-child(2){animation-delay:60ms}html.flock-show main>*:nth-child(3){animation-delay:120ms}html.flock-show main>*:nth-child(4){animation-delay:180ms}html.flock-show main>*:nth-child(n+5){animation-delay:240ms}
.flock-target{opacity:0 !important}
.flock-target-in{transition:opacity var(--t-base) var(--ease)}
@keyframes flockIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}