/* =========================================================================
   Timothy Myers — portfolio / resume / explainer
   Hand-written, no frameworks, no external requests. Design identity shared
   with the pitch: ink navy + private-green; serif display, sans body, mono labels.
   ========================================================================= */

:root {
  --paper:#F4F6F8; --surface:#FFFFFF; --surface-2:#EEF2F5;
  --ink:#14202B; --slate:#55636E; --line:#DCE2E7;
  --accent:#147A5C; --accent-strong:#0E5A44; --accent-soft:#E6F1EC;
  --danger:#B23A48;
  --shadow:0 1px 2px rgba(20,32,43,.04), 0 8px 24px rgba(20,32,43,.06);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --wrap:70rem; --read:44rem; --nav-h:4rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1620; --surface:#16212C; --surface-2:#1B2836;
    --ink:#E9F0F4; --slate:#9AAAB6; --line:#26343F;
    --accent:#4FB894; --accent-strong:#79D2B3; --accent-soft:#12332A;
    --danger:#E0808C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1620; --surface:#16212C; --surface-2:#1B2836;
  --ink:#E9F0F4; --slate:#9AAAB6; --line:#26343F;
  --accent:#4FB894; --accent-strong:#79D2B3; --accent-soft:#12332A;
  --danger:#E0808C;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-strong); text-underline-offset:3px;}
img{max-width:100%;}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.2rem,5vw,2rem);}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; text-wrap:balance;}
h2{font-size:clamp(1.6rem,4vw,2.1rem); margin:0 0 .4rem;}
h3{font-size:1.15rem; margin:0 0 .4rem;}
.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-strong); margin:0 0 .9rem; display:flex; align-items:center; gap:.55rem;
}
.kicker::before{content:""; width:1.4rem; height:2px; background:var(--accent); border-radius:2px;}
.lead{font-size:1.12rem; color:var(--slate); max-width:var(--read);}

/* editable placeholder for content the owner fills in */
.ph{
  color:var(--accent-strong); border-bottom:1px dashed var(--accent);
  font-style:normal; cursor:help; overflow-wrap:break-word;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--wrap); margin:0 auto; height:100%; padding:0 clamp(1.2rem,5vw,2rem);
  display:flex; align-items:center; gap:1rem;}
.brand{font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--ink); text-decoration:none; margin-right:auto;}
.brand span{color:var(--accent-strong);}
.nav-links{display:flex; gap:.3rem; align-items:center;}
.nav-links a{
  font-size:.9rem; color:var(--slate); text-decoration:none; padding:.4rem .7rem; border-radius:8px;
}
.nav-links a:hover{color:var(--ink); background:var(--surface-2);}
.nav-links a.active{color:var(--accent-strong); background:var(--accent-soft);}

.btn{
  font-family:var(--sans); font-size:.9rem; font-weight:600; cursor:pointer;
  text-decoration:none; padding:.5rem .95rem; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; gap:.45rem;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{border-color:var(--accent); background:var(--accent-soft);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent-strong); border-color:var(--accent-strong); color:#fff;}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); color:#fff;}

.icon-btn{
  width:2.2rem; height:2.2rem; padding:0; justify-content:center; flex:none;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; cursor:pointer; color:var(--ink);
}
.icon-btn:hover{border-color:var(--accent); background:var(--accent-soft);}
.icon-btn svg{width:1.1rem; height:1.1rem;}
.theme-toggle .moon{display:none;}
:root[data-theme="dark"] .theme-toggle .moon,
:root:not([data-theme="light"]) .theme-toggle .moon{display:block;}
:root[data-theme="dark"] .theme-toggle .sun,
:root:not([data-theme="light"]) .theme-toggle .sun{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none;}
}

.menu-btn{display:none;}

/* ---------- section rhythm + reveal ---------- */
section{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line); scroll-margin-top:var(--nav-h);}
section:first-of-type{border-top:0;}
/* Reveal-on-scroll is gated behind the `.js` class the script adds, so if
   JavaScript never runs the content is simply visible (never hidden). */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none;}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2.5rem,6vw,4.5rem);}
.hero .name{font-size:clamp(2.6rem,8vw,4rem); line-height:1.02; margin:0;}
.hero .role{font-family:var(--mono); font-size:clamp(.9rem,2.4vw,1.05rem); letter-spacing:.04em;
  color:var(--accent-strong); margin:.6rem 0 1.3rem;}
.hero .pitch{font-size:1.2rem; color:var(--ink); max-width:40rem; margin:0 0 1.7rem;}
.hero .pitch b{color:var(--accent-strong);}
.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2.4rem;}

.cred{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
.cred div{background:var(--surface); padding:1rem 1.1rem;}
.cred .n{font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--accent-strong); line-height:1.1;}
.cred .l{font-size:.8rem; color:var(--slate); margin-top:.3rem;}
@media (max-width:640px){.cred{grid-template-columns:repeat(2,1fr);}}

/* ---------- generic cards / grids ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;}
@media (max-width:760px){.two,.three{grid-template-columns:1fr;}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.4rem; box-shadow:var(--shadow);}
.card p{color:var(--slate); margin:.3rem 0 0;}
.card .tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strong);}

.callout{background:var(--accent-soft); border:1px solid var(--accent); border-radius:14px; padding:1.3rem 1.4rem; margin-top:1.2rem;}
.callout .kicker{color:var(--accent-strong);}
.callout p{margin:0; color:var(--ink);}

/* ---------- on-device flow diagram (shared with pitch) ---------- */
.flow{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.5rem; box-shadow:var(--shadow); margin:1.4rem 0;}
.flow-row{display:flex; align-items:stretch; gap:.75rem; flex-wrap:wrap;}
.node{flex:1 1 8rem; min-width:8rem; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:.85rem .9rem; text-align:center;}
.node .ic{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate);}
.node .t{font-weight:600; font-size:.92rem; margin-top:.25rem;}
.node.local{border-color:var(--accent); background:var(--accent-soft);}
.node.local .t{color:var(--accent-strong);}
.arrow{align-self:center; color:var(--slate); font-weight:700; flex:none;}
.boundary{margin-top:1rem; font-family:var(--mono); font-size:.76rem; color:var(--accent-strong);}
.cloud-x{margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--line); font-size:.85rem; color:var(--slate);}
.cloud-x s{color:var(--danger); text-decoration-thickness:2px;}

/* ---------- project ---------- */
.project{margin-top:1.6rem;}
.project .head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem; margin-bottom:.5rem;}
.stack{display:flex; flex-wrap:wrap; gap:.45rem; margin:1.1rem 0;}
.chip{font-family:var(--mono); font-size:.74rem; color:var(--slate); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:.28rem .7rem;}
.project-links{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem;}

ul.ticks{list-style:none; padding:0; margin:1rem 0;}
ul.ticks li{padding-left:1.5rem; position:relative; margin-bottom:.6rem; color:var(--slate);}
ul.ticks li::before{content:""; position:absolute; left:0; top:.6em; width:.5rem; height:.5rem;
  border:2px solid var(--accent); border-radius:2px; transform:rotate(45deg);}
ul.ticks b{color:var(--ink);}

/* ---------- experience timeline ---------- */
.timeline{margin-top:1.4rem; border-left:2px solid var(--line); padding-left:1.4rem; display:flex; flex-direction:column; gap:1.8rem;}
.job{position:relative;}
.job::before{content:""; position:absolute; left:calc(-1.4rem - 6px); top:.45rem; width:10px; height:10px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--paper);}
.job .when{font-family:var(--mono); font-size:.78rem; color:var(--slate); letter-spacing:.03em;}
.job h3{margin:.15rem 0 .1rem;}
.job .org{color:var(--accent-strong); font-weight:600;}
.job ul.ticks{margin:.6rem 0 0;}

/* ---------- skills ---------- */
.skill-col h3{font-size:1rem;}
.skill-col ul{list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.45rem;}
.skill-col li{font-size:.86rem; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.32rem .65rem;}

/* ---------- contact ---------- */
.contact-card{background:var(--ink); color:#DCE7EE; border-radius:16px; padding:clamp(1.6rem,4vw,2.4rem); box-shadow:var(--shadow);}
:root[data-theme="dark"] .contact-card,
:root:not([data-theme="light"]) .contact-card{background:#0A1219;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact-card{background:#080F15;}}
.contact-card h2{color:#fff;}
.contact-card .lead{color:#9FB2BD;}
.contact-list{display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; margin-top:1.3rem; font-family:var(--mono); font-size:.92rem;}
.contact-list a, .contact-list span{color:#fff; text-decoration:none; display:inline-flex; gap:.5rem; align-items:center;}
.contact-list a:hover{color:var(--accent-strong); text-decoration:underline;}
.contact-list .k{color:#6E8593;}

/* ---------- footer ---------- */
.foot{padding:2.4rem 0 3rem; color:var(--slate); font-family:var(--mono); font-size:.74rem; line-height:1.7; border-top:1px solid var(--line);}

/* ---------- print (resume prints cleanly; all content shown) ---------- */
@media print {
  .nav, .hero-cta, .project-links, .theme-toggle, .menu-btn { display:none !important; }
  .js .reveal { opacity:1 !important; transform:none !important; }
  section { border-top:none; padding:1.2rem 0; }
  .card, .flow, .callout, .contact-card, .job, .cred { break-inside:avoid; box-shadow:none; }
  /* Force the contact card light for print (beats the dark-theme selectors). */
  .contact-card { background:var(--surface-2) !important; color:var(--ink) !important; border:1px solid var(--line); }
  .contact-card h2, .contact-list a, .contact-list span { color:var(--ink) !important; }
  .contact-list .k { color:var(--slate) !important; }
  a { color:inherit; }
}

/* ---------- mobile nav ---------- */
@media (max-width:760px){
  .menu-btn{display:inline-flex;}
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:.5rem clamp(1.2rem,5vw,2rem) 1rem;
    transform:translateY(-120%); transition:transform .25s ease; box-shadow:var(--shadow);
  }
  .nav-links.open{transform:none;}
  .nav-links a{padding:.75rem .7rem; font-size:1rem; border-radius:8px;}
  .nav .btn-primary{display:none;}
}