/* Kaiv website. Brand: Graphite #262626, Paper #F4F4F0, Volt #D6EC83 (only on the dot,
   the email underline, the cursors and the "Copied" message), Geist + Geist Mono.
   Small secondary text is #B7B7B2 (APCA Lc 60 on Graphite). */

@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Fallbacks sized to Geist's metrics so the swap doesn't move anything. */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:108.1%;ascent-override:93%;descent-override:27.3%;line-gap-override:0%}
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New"),local("Liberation Mono"),local("Menlo");size-adjust:100%;ascent-override:100.5%;descent-override:29.5%;line-gap-override:0%}

:root{
  --graphite:#262626;--paper:#F4F4F0;--volt:#D6EC83;--quiet:#B7B7B2;--line:#3A3A3A;--panel:#1F1F1E;
  --sans:"Geist","Geist Fallback",system-ui,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace;
  --pad:44px;
}
*{box-sizing:border-box}
html{background:var(--graphite);color:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--paper);color:var(--graphite)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 max(var(--pad),env(safe-area-inset-left)) 0 max(var(--pad),env(safe-area-inset-right))}

/* Top bar: one device line. The middle column is fixed so typing never moves anything. */
.top{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:baseline;padding:28px 0 0;font:400 13px/1.6 var(--mono);color:var(--quiet);letter-spacing:.01em}
.status{min-width:0;white-space:nowrap;overflow:hidden}
#clock{font-variant-numeric:tabular-nums}

/* Screen 1 */
.s1{min-height:calc(100svh - 49px);display:grid;grid-template-rows:1fr auto;padding-bottom:40px}
.hero{align-self:center;padding:28px 0}
.kaiv-logo{--kaiv-ink:var(--paper);--kaiv-dot:var(--volt);display:block;width:min(600px,80%);height:auto;margin:0 0 36px -4px;overflow:visible}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end}
h1{font-size:clamp(38px,4.6vw,64px);line-height:1.03;font-weight:600;letter-spacing:-.04em;margin:0 0 20px;max-width:13ch}
.lead{color:var(--quiet);font-size:21px;line-height:1.5;max-width:46ch;margin:0}

/* The run log: an old terminal printing results. */
.term{position:relative;margin:0;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px 16px;font:400 14.5px/1.75 var(--mono);color:#E9E9E4;overflow:hidden;text-shadow:0 0 6px rgba(244,244,240,.18)}
.term::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.term .bar{display:flex;justify-content:space-between;color:var(--quiet);font-size:12px;margin-bottom:8px;text-shadow:none}
/* Wrapped lines hang under the result column (date 14ch + verb 9ch). While a line is
   being typed, its printed text keeps its space (hidden) and the typing sits on top. */
.term .line{position:relative;white-space:pre-wrap;min-height:1.75em;padding-left:23ch;text-indent:-23ch}
.term .line.typing .full{visibility:hidden}
.term .typed{position:absolute;inset:0 0 auto 0;padding-left:23ch;text-indent:-23ch;white-space:pre-wrap}
.term .d{color:var(--quiet)}
.term .ok{color:var(--paper)}
.cur{display:inline-block;width:.6em;height:1.05em;background:var(--volt);vertical-align:-.15em;margin-left:2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* The email is the call to action; selecting it copies the address. */
.cta{display:flex;align-items:baseline;gap:8px 22px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
.email{-webkit-user-select:text;user-select:text;font:600 clamp(28px,3.4vw,44px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--paper);background:none;border:0;border-bottom:3px solid var(--volt);border-radius:0;padding:4px 0;min-height:44px;cursor:copy}
.email:focus-visible{outline:2px solid var(--volt);outline-offset:6px}
.promise{color:var(--quiet);font-size:16px}
#copied{color:var(--volt);font:500 15px var(--mono)}
#copied:not(:empty)+#hint{display:none}

/* Screen 2 */
.s2{padding:104px 0 0}
h2{font-size:30px;font-weight:600;letter-spacing:-.03em;margin:0 0 28px}
.row{display:grid;grid-template-columns:1.05fr 1.5fr .7fr;gap:36px;padding:28px 0;border-top:1px solid var(--line);align-items:baseline}
.row:last-child{border-bottom:1px solid var(--line)}
.row h3{margin:0;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.row.first h3{font-size:34px;line-height:1.1;letter-spacing:-.035em}
.row p{margin:0;color:var(--quiet);font-size:17px;max-width:65ch}
.num{text-align:right;font:400 13px/1.5 var(--mono);color:var(--quiet)}
.num b{display:block;font:500 26px/1.3 var(--mono);color:var(--paper);letter-spacing:-.02em}
.about{padding:72px 0 0;max-width:640px}
.about p{margin:0 0 12px;font-size:21px;line-height:1.5;letter-spacing:-.01em}
.about p+p{color:var(--quiet)}
.foot{display:flex;justify-content:flex-end;padding:64px 0 max(36px,env(safe-area-inset-bottom));font:400 13px var(--mono);color:var(--quiet)}

@media (max-width:900px){
  /* The status gets its own line (two lines reserved) under name and clock. */
  .top{grid-template-columns:1fr auto;gap:4px 16px}
  .status{grid-column:1/-1;grid-row:2;white-space:normal;min-height:3.2em}
  .split{grid-template-columns:1fr;gap:28px}
  .row{grid-template-columns:1fr;gap:10px}
  .num{text-align:left}
}
@media (max-width:640px){
  :root{--pad:20px}
  .top{padding-top:18px}
  .s1{min-height:auto}
  .hero{padding:32px 0 28px}
  .kaiv-logo{margin-bottom:28px}
  .lead{font-size:18px}
  .term{font-size:12.5px;padding:12px 14px 14px}
  .s2{padding-top:72px}
  .row.first h3{font-size:28px}
  .about p{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .cur{animation:none}
}