/* ============================================================
   zapatera.xyz — design system
   Warm paper, pine ink. One accent, hairline rules, mono for
   anything that is data. Motion is quiet and staged.

   Every colour on the site comes from the tokens in section 1.
   Change --accent and the whole site re-skins itself.
   ============================================================ */

/* 1 · TOKENS — light is the base definition */
:root{
  --accent:#166b52;
  --accent-soft:rgba(22,107,82,.09);
  --accent-glow:rgba(22,107,82,.05);

  --paper:#f7f5f1;
  --surface:#fffefb;
  --ink:#171a18;
  --ink-2:#4c524e;
  --ink-3:#6b716b;
  --rule:#e2dfd7;
  --rule-strong:#cdc9be;

  --font-sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:680px;
  --speed:200ms;
  --slow:560ms;
  --ease:cubic-bezier(.2,0,0,1);
  --spring:cubic-bezier(.34,1.4,.4,1);

  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#5fc9a1;
    --accent-soft:rgba(95,201,161,.12);
    --accent-glow:rgba(95,201,161,.07);
    --paper:#101210;
    --surface:#171a18;
    --ink:#e9e7e0;
    --ink-2:#a8ada6;
    --ink-3:#828880;
    --rule:#282b27;
    --rule-strong:#3a3e39;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --accent:#5fc9a1;
  --accent-soft:rgba(95,201,161,.12);
  --accent-glow:rgba(95,201,161,.07);
  --paper:#101210;
  --surface:#171a18;
  --ink:#e9e7e0;
  --ink-2:#a8ada6;
  --ink-3:#828880;
  --rule:#282b27;
  --rule-strong:#3a3e39;
  color-scheme:dark;
}

/* 2 · BASE */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* a breath of accent behind the top of the page — never a gradient hero */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(920px 420px at 50% -10%,var(--accent-glow),transparent 72%);
}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{
  left:8px;top:8px;z-index:99;background:var(--surface);
  border:1px solid var(--rule-strong);padding:8px 14px;
  font-family:var(--font-mono);font-size:.8rem;
}
.shell{max-width:var(--measure);margin:0 auto;padding:0 24px}

/* 3 · HEADER */
header.top{
  position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--rule);transition:border-color var(--speed) var(--ease);
}
header.top.stuck{border-bottom-color:var(--rule-strong)}
.top-in{max-width:var(--measure);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px}
.brand{font-family:var(--font-mono);font-size:.8rem;font-weight:500;text-decoration:none;white-space:nowrap}
.brand .dot{color:var(--accent)}

.top nav{display:flex;gap:0;margin-left:6px}
.top nav a{
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);text-decoration:none;
  padding:5px 7px;position:relative;transition:color var(--speed) var(--ease);white-space:nowrap;
}
.top nav a::after{
  content:"";position:absolute;left:7px;right:7px;bottom:2px;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--speed) var(--ease);
}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--ink)}
.top nav a:hover::after,.top nav a[aria-current="page"]::after{transform:scaleX(1)}

.social{display:flex;align-items:center;gap:2px;margin-left:auto}
.social a{
  display:flex;padding:6px;color:var(--ink-3);text-decoration:none;border-radius:3px;
  transition:color var(--speed) var(--ease),transform var(--speed) var(--spring),background var(--speed) var(--ease);
}
.social a:hover{color:var(--accent);transform:translateY(-2px);background:var(--accent-soft)}
.social svg{width:16px;height:16px}

.ctrls{display:flex;align-items:center;gap:6px;padding-left:10px;margin-left:4px;border-left:1px solid var(--rule)}
.lang{display:flex;font-family:var(--font-mono);font-size:.7rem}
.lang button{
  background:none;border:none;padding:4px;color:var(--ink-3);cursor:pointer;font:inherit;
  transition:color var(--speed) var(--ease);
}
.lang button[aria-pressed="true"]{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.icon-btn{
  background:none;border:none;padding:5px;color:var(--ink-3);cursor:pointer;display:flex;
  transition:color var(--speed) var(--ease);
}
.icon-btn:hover{color:var(--ink)}
.icon-btn:hover svg{transform:rotate(-14deg) scale(1.1)}
.icon-btn svg{width:15px;height:15px;transition:transform var(--speed) var(--spring)}

/* 4 · HERO */
.hero{padding:70px 0 34px}
.eyebrow{
  font-family:var(--font-mono);font-size:.73rem;color:var(--ink-3);
  margin:0 0 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.eyebrow .sep{color:var(--rule-strong)}
h1{
  font-family:var(--font-mono);font-weight:400;
  font-size:clamp(1.85rem,5.1vw,2.6rem);line-height:1.18;letter-spacing:-.035em;
  margin:0 0 26px;text-wrap:balance;
}
h1 b{font-weight:500;color:var(--accent)}
h1.caret::after{
  content:"";display:inline-block;width:.5em;height:.92em;margin-left:.14em;
  background:var(--accent);vertical-align:-.12em;animation:caret 1.15s steps(1) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.bio{font-size:1rem;line-height:1.8;color:var(--ink-2);margin:0 0 16px;max-width:64ch}
.bio:last-child{margin-bottom:0}
.bio strong{color:var(--ink);font-weight:600}
.bio a{
  color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--speed) var(--ease),color var(--speed) var(--ease);
  padding-bottom:1px;
}
.bio a:hover{
  color:var(--accent);background-size:100% 100%;
  background-image:linear-gradient(var(--accent-soft),var(--accent-soft));
}

/* 5 · SECTIONS — the mono label is the heading; there is no second title */
section{padding:44px 0}
.sec-label{
  font-family:var(--font-mono);font-size:.73rem;font-weight:500;color:var(--ink-3);
  letter-spacing:.09em;margin:0 0 22px;padding-bottom:12px;
  border-bottom:1px solid var(--rule-strong);
}
.sec-label::before{content:"// ";color:var(--accent)}

/* 6 · WORK — ledger rows */
.row{
  display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--rule);position:relative;
}
.row::before{
  content:"";position:absolute;left:-24px;top:-1px;width:2px;height:calc(100% + 1px);
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform 340ms var(--ease);
}
.row:hover::before{transform:scaleY(1)}
.row-title{
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin:0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  transition:transform var(--speed) var(--ease);
}
.row:hover .row-title{transform:translateX(3px)}
.row-title a{
  text-decoration:none;border-bottom:1.5px solid transparent;
  transition:border-color var(--speed) var(--ease),color var(--speed) var(--ease);
}
.row-title a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.status{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 7px;border:1px solid var(--rule-strong);border-radius:2px;
  color:var(--ink-3);font-weight:500;
}
.status.live{color:var(--accent);border-color:var(--accent)}
.status.live::before{
  content:"\25CF";margin-right:5px;font-size:.7em;vertical-align:1px;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.status.building{color:var(--accent);border-color:var(--rule-strong);border-style:dashed}
.row-meta{
  font-family:var(--font-mono);font-size:.71rem;color:var(--ink-3);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.row-body{
  grid-column:1/-1;font-size:.92rem;line-height:1.72;color:var(--ink-2);
  margin:8px 0 0;max-width:63ch;
}
.row-links{grid-column:1/-1;display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
.row-links a{
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;transition:color var(--speed) var(--ease);
}
.row-links a::before{
  content:"\2192";color:var(--accent);display:inline-block;
  transition:transform var(--speed) var(--spring);
}
.row-links a:hover{color:var(--ink)}
.row-links a:hover::before{transform:translateX(4px)}

/* 7 · TRACK RECORD */
.tr{display:grid;grid-template-columns:118px 1fr;gap:0 20px;border-bottom:1px solid var(--rule);padding:18px 0}
.tr:last-of-type{border-bottom:none}
.tr-date{
  font-family:var(--font-mono);font-size:.73rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-top:3px;
}
.tr-org{font-size:.98rem;font-weight:600;letter-spacing:-.01em;margin:0}
.tr-city{color:var(--ink-3);font-weight:400}
.tr-role{font-size:.88rem;color:var(--ink-2);margin:1px 0 0}
.tr-note{font-size:.86rem;color:var(--ink-3);margin:7px 0 0;line-height:1.65;max-width:58ch}

/* employers and institutions link out, quietly */
.tr-org a,.edu-where a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  transition:color var(--speed) var(--ease),border-color var(--speed) var(--ease);
}
.tr-org a:hover,.edu-where a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* 8 · EDUCATION */
.edu-row{display:grid;grid-template-columns:118px 1fr;gap:0 20px;padding:12px 0;border-bottom:1px solid var(--rule)}
.edu-row:last-of-type{border-bottom:none}
.edu-when{
  font-family:var(--font-mono);font-size:.73rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;padding-top:2px;
}
.edu-what{font-size:.92rem;margin:0}
.edu-where{font-size:.85rem;color:var(--ink-2)}
.edu-hon{font-family:var(--font-mono);font-size:.7rem;color:var(--accent);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.chip{
  font-family:var(--font-mono);font-size:.67rem;color:var(--ink-2);padding:4px 9px;
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  transition:border-color var(--speed) var(--ease),color var(--speed) var(--ease);
}
.chip:hover{border-color:var(--rule-strong);color:var(--ink)}

/* 9 · CONTACT */
.contact{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule-strong);border-left:1px solid var(--rule);
}
.contact a{
  display:flex;align-items:center;gap:11px;padding:17px 18px;text-decoration:none;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:.9rem;transition:background var(--speed) var(--ease);
}
.contact a:hover{background:var(--accent-soft)}
.contact svg{
  width:17px;height:17px;flex-shrink:0;color:var(--ink-3);
  transition:color var(--speed) var(--ease),transform var(--speed) var(--spring);
}
.contact a:hover svg{color:var(--accent);transform:translateY(-2px)}
.contact .sub{
  display:block;font-family:var(--font-mono);font-size:.65rem;color:var(--ink-3);
  letter-spacing:.05em;text-transform:uppercase;
}

/* 10 · NOW PAGE */
.now-head{padding:64px 0 8px}
.now-updated{font-family:var(--font-mono);font-size:.73rem;color:var(--ink-3);margin:0}
.now-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.now-list li{
  padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:.94rem;line-height:1.7;color:var(--ink-2);
}
.now-list li:last-child{border-bottom:none}
.now-list strong{color:var(--ink);font-weight:600}
.now-list a{
  color:var(--ink);text-decoration:none;font-weight:500;
  border-bottom:1.5px solid var(--accent);
  transition:background var(--speed) var(--ease);
}
.now-list a:hover{background:var(--accent-soft)}
.now-note{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.73rem;color:var(--ink-3);
}
.now-note a{color:var(--ink-2);transition:color var(--speed) var(--ease)}
.now-note a:hover{color:var(--accent)}

/* 11 · FOOTER */
footer{border-top:1px solid var(--rule);margin-top:34px;padding:26px 0 46px}
.foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.71rem;color:var(--ink-3);
}
.foot a{color:var(--ink-3);text-decoration:none;transition:color var(--speed) var(--ease)}
.foot a:hover{color:var(--accent)}
.foot-note{margin:18px 0 0;font-size:.71rem;color:var(--ink-3);line-height:1.7;max-width:56ch}

/* 12 · TERMINAL — a terminal window stays dark in either theme, on purpose */
.term-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:flex-end;justify-content:center;padding:2rem;
  background:rgba(10,12,10,.55);
}
.term-overlay.open{display:flex}
.term{
  width:100%;max-width:640px;max-height:60vh;background:#0e120f;
  border:1px solid #2b322d;border-radius:8px;font-family:var(--font-mono);
  font-size:.82rem;color:#cfd6d1;overflow:hidden;display:flex;flex-direction:column;
}
.term-head{
  display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  background:#151a16;border-bottom:1px solid #2b322d;
}
.term-dot{width:10px;height:10px;border-radius:50%;background:#e0564f}
.term-dot:nth-child(2){background:#dfa236}
.term-dot:nth-child(3){background:#5aa95f}
.term-title{margin-left:.5rem;font-size:.7rem;color:#8b948d}
.term-body{padding:1rem;overflow-y:auto;flex:1}
.term-line{margin-bottom:.25rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.term-line .pr{color:#5fc9a1}
.term-line .out{color:#98a29b}
.term-input-line{display:flex;align-items:center;gap:.5rem}
.term-in{
  background:none;border:none;color:#cfd6d1;font-family:inherit;font-size:inherit;
  flex:1;outline:none;caret-color:#5fc9a1;
}
.toast{
  position:fixed;bottom:2rem;right:2rem;background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:4px;padding:.7rem 1.1rem;
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);z-index:90;
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease);
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast kbd{
  background:var(--rule);padding:.15rem .4rem;border-radius:3px;
  font-family:inherit;font-size:.7rem;color:var(--ink);font-weight:500;
}

/* 13 · MOTION — one staged entrance on load, one quiet reveal on scroll */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.enter > *{animation:rise var(--slow) var(--ease) backwards}
.enter > *:nth-child(1){animation-delay:60ms}
.enter > *:nth-child(2){animation-delay:140ms}
.enter > *:nth-child(3){animation-delay:230ms}
.enter > *:nth-child(4){animation-delay:300ms}
.enter > *:nth-child(5){animation-delay:360ms}
.enter > *:nth-child(6){animation-delay:420ms}

.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(12px);transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:40ms}
.stagger.in > *:nth-child(2){transition-delay:100ms}
.stagger.in > *:nth-child(3){transition-delay:160ms}
.stagger.in > *:nth-child(4){transition-delay:220ms}
.stagger.in > *:nth-child(5){transition-delay:280ms}
.stagger.in > *:nth-child(6){transition-delay:340ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.stagger > *,.enter > *{opacity:1!important;transform:none!important}
}

/* 14 · RESPONSIVE
   The nav drops to its own scrollable row rather than vanishing, so every
   section and the now page stay reachable on a phone. */
@media (max-width:780px){
  .top-in{flex-wrap:wrap;padding:10px 20px 0;row-gap:0}
  .top nav{
    order:3;width:100%;margin:6px -20px 0;padding:0 20px 2px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{padding:7px 9px 9px 0;margin-right:4px}
  .top nav a::after{left:0;right:13px;bottom:5px}
  .social{margin-left:auto}
}
@media (max-width:640px){
  .shell{padding:0 20px}
  .hero{padding:44px 0 30px}
  .bio{line-height:1.7}
  .now-head{padding:40px 0 8px}
  .row{grid-template-columns:1fr}
  .row-meta{text-align:left}
  .tr,.edu-row{grid-template-columns:1fr;gap:2px}
  .tr-date,.edu-when{font-weight:500}
  .contact{grid-template-columns:1fr}
  .term{max-height:52vh}
  .term-overlay{padding:1rem}
  .toast{display:none}
}