/* =========================================================
   josephadams.dev — clean editorial
   ========================================================= */

:root{
  --paper:      #FCFBF9;
  --paper-alt:  #F4F1EC;
  --ink:        #16181C;
  --ink-soft:   #3D424B;
  --muted:      #6B717B;
  --rule:       #E3DED5;
  --accent:     #A63A26;
  --accent-ink: #8C3020;
  --accent-wash:#F6E9E4;

  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #121316;
    --paper-alt:  #191B1F;
    --ink:        #F0EDE7;
    --ink-soft:   #C6C3BD;
    --muted:      #8D9199;
    --rule:       #2A2D33;
    --accent:     #E4795F;
    --accent-ink: #F0937C;
    --accent-wash:#241A17;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.75rem 1rem; border-radius:0 0 8px 0;
}
.skip:focus{left:0}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }

/* ---------------- header ---------------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.head-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:68px }

.wordmark{ text-decoration:none; display:flex; align-items:baseline; gap:.6rem; min-width:0 }
.wordmark-name{ font-family:var(--serif); font-size:1.0625rem; font-weight:600; letter-spacing:-0.01em; white-space:nowrap }
.wordmark-role{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
@media (max-width:560px){ .wordmark-role{display:none} }

.nav{ display:flex; align-items:center; gap:.35rem }
.nav a{
  text-decoration:none; font-size:.9375rem; color:var(--ink-soft);
  padding:.45rem .7rem; border-radius:8px; transition:color .15s, background .15s;
}
.nav a:hover{ color:var(--ink); background:var(--paper-alt) }
.nav-cta{
  border:1px solid var(--rule); color:var(--ink)!important; margin-left:.35rem;
}
.nav-cta:hover{ border-color:var(--accent); color:var(--accent)!important; background:transparent!important }
@media (max-width:700px){ .nav a:not(.nav-cta){display:none} }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--sans); font-size:.9375rem; font-weight:500; line-height:1;
  padding:.85rem 1.3rem; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s, border-color .15s, color .15s;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--ink); color:var(--paper) }
.btn-primary:hover{ background:var(--accent) }
.btn-ghost{ border-color:var(--rule); color:var(--ink) }
.btn-ghost:hover{ border-color:var(--ink) }
.btn-sm{ padding:.6rem 1rem; font-size:.875rem }

/* ---------------- hero ---------------- */
.hero{ padding-top:clamp(3.5rem,9vw,7rem); padding-bottom:clamp(2rem,5vw,3.5rem) }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,4.5rem); align-items:center;
}
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:2.25rem } }

.eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.4rem;
  display:inline-flex; align-items:flex-start; gap:.6rem;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
  flex:none; margin-top:.42em;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)}
  70% {box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.hero h1{
  font-size:clamp(2.35rem, 1.4rem + 4.2vw, 4.15rem);
  margin-bottom:1.5rem; max-width:16ch;
}
.lede{ font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); color:var(--ink-soft); max-width:52ch; margin:0 0 2.25rem }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem }

.hero-portrait{ position:relative; justify-self:center; width:min(300px,72vw) }
.hero-portrait img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%;
  border:1px solid var(--rule);
}
.hero-portrait::after{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid var(--rule); pointer-events:none;
}

/* stats */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin:clamp(3rem,7vw,5rem) 0 0; padding:0;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
}
@media (max-width:640px){ .stats{ grid-template-columns:repeat(2,1fr) } }
.stat{ background:var(--paper); padding:1.4rem 1.25rem }
.stat dt{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem;
}
.stat dd{ margin:0; font-family:var(--serif); font-size:clamp(1.75rem,1.4rem + 1.2vw,2.35rem); line-height:1 }
.stat .unit{ color:var(--accent) }

/* ---------------- sections ---------------- */
.section{ padding-block:clamp(4rem,9vw,7.5rem) }
.section-alt{ background:var(--paper-alt); border-block:1px solid var(--rule) }

.section-kicker{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1rem;
}
.section-head{ max-width:60ch; margin-bottom:clamp(2.5rem,5vw,3.75rem) }
.section-head h2, .about-copy h2, .contact-inner h2{
  font-size:clamp(1.85rem,1.35rem + 2.1vw,2.9rem); margin-bottom:1rem;
}
.section-sub{ color:var(--muted); font-size:1.0625rem; margin:0; max-width:56ch }

/* ---------------- feature ---------------- */
.feature{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper); padding:clamp(1.75rem,4vw,3rem);
  margin-bottom:clamp(1.5rem,3vw,2rem);
}
@media (max-width:820px){ .feature{ grid-template-columns:1fr } }

.feature-logo{ height:44px; width:auto; margin-bottom:1.25rem }
/* Logos that are a single dark ink on transparent need flipping in dark mode.
   Full-colour logos (Tally Arbiter, midi-relay) must be left alone. */
@media (prefers-color-scheme: dark){ .logo-mono{ filter:invert(1) } }
.feature-tag{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .85rem;
}
.feature-desc{ font-size:1.0625rem; color:var(--ink-soft); margin:0 0 1.25rem; max-width:54ch }
.feature-links{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1.4rem }

.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0 }
.pills li{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em;
  color:var(--muted); border:1px solid var(--rule); border-radius:999px; padding:.3rem .6rem;
}
.stars{
  font-family:var(--mono); font-size:.8125rem; color:var(--accent);
  background:var(--accent-wash); border-radius:999px; padding:.35rem .7rem; white-space:nowrap;
}

/* tally demo art */
.feature-art{ display:flex; justify-content:center }
.tally-demo{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem;
  width:100%; max-width:340px;
  background:#0E1014; border-radius:12px; padding:1.1rem; border:1px solid #23262C;
}
.tally{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.75rem; color:#C9CDD4;
  background:#171A1F; border:1px solid #262A31; border-radius:8px; padding:.65rem .7rem;
}
.tally b{ width:9px; height:9px; border-radius:50%; background:#3A3F47; flex:none }
.tally i{ margin-left:auto; font-style:normal; font-size:.625rem; letter-spacing:.06em; color:#71767F }
.tally-pgm b{ background:#E5484D; box-shadow:0 0 10px #E5484D }
.tally-pgm i{ color:#E5484D }
.tally-pvw b{ background:#30A46C; box-shadow:0 0 10px #30A46C }
.tally-pvw i{ color:#30A46C }

/* ---------------- cards ---------------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem }
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--paper);
  padding:1.6rem; transition:border-color .18s, transform .18s;
}
.card:hover{ border-color:color-mix(in srgb, var(--ink) 35%, var(--rule)); transform:translateY(-2px) }
.card-logo{ width:42px; height:42px; object-fit:contain; margin-bottom:1.1rem }
.card h3{ font-size:1.25rem; margin-bottom:.6rem }
.card h3 a{ text-decoration:none }
.card h3 a::after{ content:""; position:absolute; inset:0 }
.card{ position:relative }
.card h3 a:hover{ color:var(--accent) }
.card p{ color:var(--muted); font-size:.9375rem; margin:0 0 1.4rem }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }

.work-more{ margin:clamp(2rem,4vw,3rem) 0 0; color:var(--muted); font-size:.9375rem }
.work-more a{ color:var(--accent); text-underline-offset:3px }

/* ---------------- services ---------------- */
.services{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden;
}
@media (max-width:900px){ .services{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .services{ grid-template-columns:1fr } }
.service{ background:var(--paper-alt); padding:clamp(1.6rem,3vw,2.25rem) }
.service-num{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; color:var(--accent);
  display:block; margin-bottom:1rem;
}
.service h3{ font-size:1.3125rem; margin-bottom:.75rem }
.service p{ color:var(--muted); font-size:.9375rem; margin:0 }

/* ---------------- about ---------------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr); gap:clamp(2rem,6vw,4.5rem) }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr } }
.about-copy p{ color:var(--ink-soft); max-width:58ch }
.about-sign{ font-family:var(--serif); color:var(--muted)!important; margin-top:1.75rem }
.about-side h3{
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--rule);
}
.tech-list{ list-style:none; margin:0; padding:0 }
.tech-list li{ padding:.55rem 0; border-bottom:1px solid var(--rule); font-size:.9375rem; color:var(--ink-soft) }

/* ---------------- contact ---------------- */
.contact{ background:var(--paper-alt); border-top:1px solid var(--rule) }
.contact-inner{ max-width:62ch }
.contact-sub{ color:var(--muted); font-size:1.0625rem; margin:0 0 2rem; max-width:52ch }
.contact-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:clamp(2.5rem,5vw,3.5rem) }
.contact-meta{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 2rem }
.contact-meta li{ display:flex; flex-direction:column; gap:.25rem; padding:.9rem 0; border-top:1px solid var(--rule) }
.contact-meta span{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }
.contact-meta a{ text-decoration:none; font-size:.9375rem }
.contact-meta a:hover{ color:var(--accent) }


/* ---------------- footer ---------------- */
.site-foot{ border-top:1px solid var(--rule); padding-block:2rem }
.foot-inner{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; align-items:center }
.foot-inner p{ margin:0; font-size:.875rem; color:var(--muted) }
.foot-note{ font-family:var(--mono); font-size:.75rem!important }
.contact-meta p{ margin:0; font-size:.9375rem }

/* Marker for work that isn't public source */
.tag-private{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em; color:var(--muted);
  border:1px dashed var(--rule); border-radius:999px; padding:.3rem .6rem; white-space:nowrap;
}

/* Client-work engagement list */
.engagements{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden;
}
.engagements li{ background:var(--paper); padding:1.6rem }
.engagements h3{ font-size:1.125rem; margin-bottom:.6rem }
.engagements p{ color:var(--muted); font-size:.9375rem; margin:0 }

/* Stats sit inside the open-source section now */
.stats-inline{ margin-top:clamp(2.5rem,5vw,3.5rem) }

/* Second feature block (Bitfocus Companion) */
.feature-alt{ margin-top:0 }
.feature h3{ font-size:1.5rem; margin:0 0 .85rem }
.feature-logo-sq{ height:38px; width:38px; object-fit:contain; margin-bottom:1rem }

.figures{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
          border-radius:12px; overflow:hidden; width:100%; max-width:340px }
.figure{ background:var(--paper); padding:1.5rem 1.4rem; text-align:center }
.figure b{ display:block; font-family:var(--serif); font-weight:500; font-size:2.4rem; line-height:1 }
.figure span{ display:block; margin-top:.5rem; font-family:var(--mono); font-size:.6875rem;
              letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }