/* Pyips public site. Dark, single column, hairline sheet.
   Display + body: Archivo. Utility: IBM Plex Mono. */

:root{
  color-scheme:dark;
  --bg:#0b0c0e;
  --lift:#111216;
  --line:#23262b;
  --line-dim:#191c20;
  --text:#f4f5f7;
  --muted:#9aa0a9;
  --faint:#797f87;
  --accent:#f0a63a;
  --sans:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1}
p{margin:0}
a{color:inherit}

.shell{
  width:min(1160px,100%);margin-inline:auto;padding-inline:40px;
  border-inline:1px solid var(--line);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--text);color:var(--bg);padding:10px 16px;
  font-family:var(--mono);font-size:.8rem;text-decoration:none;
}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(240,166,58,.14);
}

/* ---------- top bar ---------- */

.bar{border-bottom:1px solid var(--line)}
.bar-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.wordmark{
  font-family:var(--sans);font-weight:700;font-size:1.15rem;
  letter-spacing:-.04em;text-decoration:none;
}
.wordmark-dot{color:var(--accent)}
.bar-nav{display:flex;align-items:center;gap:28px}
.bar-nav a{
  font-size:.9rem;color:var(--muted);text-decoration:none;
  transition:color .15s ease;
}
.bar-nav a:hover{color:var(--text)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 20px;border-radius:7px;
  border:1px solid var(--line);background:transparent;color:var(--text);
  font-family:var(--sans);font-size:.9375rem;font-weight:500;
  text-decoration:none;white-space:nowrap;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.btn:hover{border-color:#3a3f47;background:var(--lift)}
.btn-primary{background:var(--text);border-color:var(--text);color:#0b0c0e;font-weight:600}
.btn-primary:hover{background:#fff;border-color:#fff;color:#0b0c0e}
.bar-nav .btn-sm{height:34px;padding:0 14px;font-size:.85rem;color:#0b0c0e}
.bar-nav .btn-sm:hover{color:#0b0c0e}

/* ---------- hero ---------- */

.hero{border-bottom:1px solid var(--line)}
.hero .shell{padding-block:88px 84px}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.75rem;color:var(--muted);
  letter-spacing:.02em;
}
.hero h1{
  margin-top:26px;
  font-size:clamp(2.9rem,7.6vw,5.5rem);
  letter-spacing:-.045em;line-height:.96;
}
.lede{
  margin-top:26px;max-width:56ch;
  font-size:1.1875rem;line-height:1.55;color:var(--muted);
}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

@media(prefers-reduced-motion:no-preference){
  .kicker,.hero h1,.lede,.cta{animation:up .55s cubic-bezier(.2,.7,.3,1) both}
  .hero h1{animation-delay:.05s}
  .lede{animation-delay:.1s}
  .cta{animation-delay:.15s}
}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- spec strip ---------- */

.spec{border-bottom:1px solid var(--line);background:var(--lift)}
.spec .shell{padding-inline:0}
.spec-row{display:grid;grid-template-columns:repeat(4,1fr)}
.spec-cell{
  display:flex;flex-direction:column;gap:7px;
  padding:20px 24px;border-left:1px solid var(--line-dim);
}
.spec-cell:first-child{border-left:0}
.spec-key{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);
}
.spec-val{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.875rem;color:var(--text);
}

/* ---------- content blocks ---------- */

.block{border-bottom:1px solid var(--line)}
.block-grid{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:0 40px;padding-block:76px 80px;
}
.label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);padding-top:.55em;
}
.block-body h2{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.04em}
.tagline{margin-top:14px;font-size:1.25rem;color:var(--muted)}
.prose{margin-top:26px;max-width:62ch}
.prose p + p{margin-top:1.05em}
.prose p{color:var(--muted)}

.links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.links a:not(.btn){
  font-family:var(--mono);font-size:.85rem;color:var(--muted);
  text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:color .15s ease,border-color .15s ease;
}
.links a:not(.btn):hover{color:var(--text);border-bottom-color:var(--accent)}

.mail{
  display:inline-block;margin-top:24px;
  font-family:var(--mono);font-size:1.0625rem;color:var(--accent);
  text-decoration:none;border-bottom:1px solid rgba(240,166,58,.4);
  padding-bottom:4px;transition:border-color .15s ease;
}
.mail:hover{border-bottom-color:var(--accent)}

/* ---------- footer ---------- */

.site-footer .shell{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 40px;padding-block:26px 30px;border-bottom:1px solid var(--line);
}
.site-footer .wordmark{font-size:1rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:24px}
.footer-nav a{font-family:var(--mono);font-size:.8rem;color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--text)}
.footer-legal{font-family:var(--mono);font-size:.75rem;color:var(--faint)}

/* ---------- responsive ---------- */

@media(max-width:880px){
  .hero .shell{padding-block:64px 60px}
  .spec-row{grid-template-columns:repeat(2,1fr)}
  .spec-cell:nth-child(3){border-left:0}
  .spec-cell:nth-child(-n+2){border-bottom:1px solid var(--line-dim)}
  .block-grid{grid-template-columns:1fr;gap:20px;padding-block:56px 60px}
  .label{padding-top:0}
  .bar-nav{gap:20px}
}

@media(max-width:620px){
  .shell{padding-inline:20px;border-inline:0}
  .spec .shell{padding-inline:0}
  .bar-row{height:auto;padding-block:16px}
  .bar-nav a:not(.btn){display:none}
  .hero .shell{padding-block:52px 48px}
  .lede{font-size:1.0625rem}
  .cta .btn{width:100%}
  .spec-cell{padding:16px 20px}
  .links .btn{width:100%}
  .site-footer .shell{flex-direction:column;align-items:flex-start;gap:14px}
}