/* ============================================================
   akmiles-code.github.io — shared stylesheet
   One file, every page. Change a color here, it changes everywhere.
   ============================================================ */

:root{
  /* brand */
  --teal:#0D9488; --teal-d:#0F766E; --teal-dd:#0E3A38; --sea:#14B8A6;
  --mint:#CCFBF1; --mint-2:#ECFDF9; --mint-line:#9FE7DA;
  /* surface + text */
  --bg:#F7FAF9; --card:#ffffff; --slate:#1E293B; --mut:#5A6B7D; --line:#E2E8F0;
  /* on the dark hero */
  --on-dark:#F1FAF8; --on-dark-mut:#CBE5E1; --on-dark-accent:#8FEFDD;
  --radius:16px; --radius-lg:24px;
  --shadow:0 8px 22px rgba(13,148,136,.12);
  --maxw:1000px;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1817; --card:#12211F; --slate:#E6F1EE; --mut:#9DB3AE; --line:#22403C;
    --mint:#123A35; --mint-2:#102D2A; --mint-line:#1E5B53;
    --teal-d:#5EEAD4; --teal:#2DD4BF;
    --shadow:0 8px 22px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1817; --card:#12211F; --slate:#E6F1EE; --mut:#9DB3AE; --line:#22403C;
  --mint:#123A35; --mint-2:#102D2A; --mint-line:#1E5B53;
  --teal-d:#5EEAD4; --teal:#2DD4BF;
  --shadow:0 8px 22px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%; height:auto}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--slate); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px 72px}

/* keyboard users must be able to see where they are */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--teal); outline-offset:3px; border-radius:6px;
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--teal-dd); color:#fff;
  padding:10px 16px; border-radius:0 0 10px 0; z-index:99; font-weight:600;
}
.skip:focus{left:0}

/* ---------- site nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:10px 20px; margin:0 -20px 0;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .brand{
  font-family:var(--serif); font-weight:700; font-size:15.5px;
  color:var(--slate); text-decoration:none; margin-right:auto; padding:6px 4px;
}
.nav a.nl{
  font-size:13.5px; font-weight:600; color:var(--mut); text-decoration:none;
  padding:7px 11px; border-radius:999px;
}
.nav a.nl:hover{color:var(--teal-d); background:var(--mint-2)}
.nav a.nl[aria-current="page"]{color:var(--teal-d); background:var(--mint)}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(160deg,#0E3A38 0%,#0F766E 100%);
  color:var(--on-dark); border-radius:var(--radius-lg);
  padding:36px 26px 30px; margin:18px 0 8px; overflow:hidden;
}
.hero-photo{float:right; width:38%; max-width:212px; min-width:124px; margin:2px 0 14px 26px}
.hero-photo img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 22%;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.30); box-shadow:0 6px 18px rgba(0,0,0,.30); display:block;
}
.eyebrow{font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--on-dark-accent); font-weight:700; margin-bottom:14px}
.name{font-family:var(--serif); font-size:30px; font-weight:700; line-height:1.15; color:#fff}
.role{margin-top:8px; font-size:16px; color:var(--on-dark-mut)}
.role b{color:#fff; font-weight:600}
.bio{margin-top:16px; font-size:14.5px; color:var(--on-dark)}
.bio b{color:var(--on-dark-accent); font-weight:600}
.tags{margin-top:18px; display:flex; flex-wrap:wrap; gap:7px}
.tag{font-size:11.5px; font-weight:600; color:#DFF6F1; border:1px solid rgba(143,239,221,.45); padding:4px 10px; border-radius:999px}
@media(min-width:560px){ .name{font-size:34px} }

/* page header for interior pages */
.phead{padding:34px 4px 6px; max-width:70ch}
.phead h1{font-family:var(--serif); font-size:30px; line-height:1.15; font-weight:700}
.phead p{margin-top:12px; color:var(--mut); font-size:15.5px}

/* ---------- section labels ---------- */
.section-label{
  font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--teal-d); margin:30px 4px 12px;
}
.section-label .n{color:var(--mut); font-weight:600; letter-spacing:.5px; text-transform:none}

/* ---------- link cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:12px; align-items:stretch}
a.card{
  display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--teal)}
a.card:active{transform:translateY(0)}
.featured{background:var(--mint-2); border-color:var(--mint-line); grid-column:1 / -1}
.featured:hover{border-color:var(--teal)}
.featured .ic{background:var(--card)}
.featured .csub{color:var(--teal-d); font-style:italic}
.featured .chev{color:var(--teal-d)}
.ic{flex:0 0 46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--mint)}
.ic svg{width:24px; height:24px; stroke:var(--teal-d)}
.ctext{flex:1; min-width:0}
.ctitle{font-size:16.5px; font-weight:700; line-height:1.25}
.csub{font-size:13px; color:var(--mut); margin-top:3px}
.chev{flex:0 0 auto; color:var(--mut); font-size:18px}
@media (prefers-reduced-motion: reduce){
  a.card{transition:none} a.card:hover{transform:none} html{scroll-behavior:auto}
}

/* ---------- panels (references, consulting) ---------- */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px; margin-bottom:14px;
}
.panel h2{font-family:var(--serif); font-size:21px; line-height:1.25}
.panel h3{font-size:15px; font-weight:700; margin-top:18px}
.panel p{margin-top:10px; font-size:14.5px; color:var(--slate)}
.panel p.meta{color:var(--mut); font-size:13px; margin-top:6px}
.panel ul{margin:10px 0 0 20px; font-size:14.5px}
.panel li{margin-bottom:7px}
.panel li::marker{color:var(--teal)}
.pill{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  background:var(--mint); color:var(--teal-d); padding:4px 9px; border-radius:999px; margin-bottom:10px;
}
.pill.upcoming{background:#FEF3C7; color:#92400E}
:root[data-theme="dark"] .pill.upcoming, :root:not([data-theme="light"]) .pill.upcoming{}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--teal-d); color:#fff; font-weight:600; font-size:14px;
  padding:11px 18px; border-radius:10px; border:1px solid transparent;
}
:root[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn{color:#06201D}
.btn:hover{background:var(--teal)}
.btn.ghost{background:transparent; color:var(--teal-d); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--teal); background:var(--mint-2)}

/* two-column service list */
.svc{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; margin-top:14px}
.svc.two{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.svc .box{border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--bg)}
.svc .box h3{margin-top:0; font-size:14.5px; color:var(--teal-d)}
.svc .box p{font-size:13.5px; color:var(--mut); margin-top:7px}

/* ---------- CV ---------- */
.cv{max-width:800px; margin:0 auto}
.cv .entry{padding:14px 0; border-bottom:1px solid var(--line)}
.cv .entry:last-child{border-bottom:0}
.cv .eh{display:flex; justify-content:space-between; gap:16px; align-items:baseline; flex-wrap:wrap}
.cv .et{font-weight:700; font-size:15.5px}
.cv .ed{font-size:12.5px; color:var(--mut); font-variant-numeric:tabular-nums; white-space:nowrap}
.cv .eo{font-size:14px; color:var(--mut); margin-top:2px}
.cv ul{margin:9px 0 0 19px; font-size:14px; color:var(--slate)}
.cv li{margin-bottom:6px}
.cv li::marker{color:var(--teal)}
.cv .cite{font-size:14px; line-height:1.6; margin-bottom:14px}
.cv .cite b{font-weight:700}
.cv .cite .au{color:var(--mut)}
.cv .cite a{color:var(--teal-d); text-decoration:none; word-break:break-word}
.cv .cite a:hover{text-decoration:underline}

/* skills: label column + value column, collapses to stacked on narrow screens */
.skills{display:grid; grid-template-columns:210px 1fr; gap:9px 22px; margin:12px 0 26px}
.skills .sk{
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--teal-d);
  padding-top:2px; line-height:1.45;
}
.skills .sv{font-size:14px; color:var(--slate); line-height:1.55}
.skills + h3{margin-top:6px}
@media(max-width:620px){
  .skills{grid-template-columns:1fr; gap:2px 0}
  .skills .sk{margin-top:12px}
}
@media print{ .skills{grid-template-columns:180px 1fr; gap:5px 16px} }

/* ---------- callout ---------- */
.note{
  border-left:3px solid var(--teal); background:var(--mint-2);
  padding:14px 16px; border-radius:0 12px 12px 0; font-size:14px; margin-top:16px;
}
.note b{color:var(--teal-d)}

/* ---------- footer ---------- */
footer{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
  text-align:center; color:var(--mut); font-size:13px; line-height:1.8;
}
footer a{color:var(--teal-d); text-decoration:none; font-weight:600}
footer a:hover{text-decoration:underline}

/* ---------- print (CV especially) ---------- */
@media print{
  :root{--bg:#fff; --card:#fff; --slate:#000; --mut:#444; --line:#ccc}
  .nav,.skip,.btnrow,footer .noprint{display:none !important}
  body{background:#fff; font-size:11pt}
  .wrap{max-width:none; padding:0}
  .hero{background:none !important; color:#000; padding:0; border-radius:0}
  .hero .name,.hero .role,.hero .bio{color:#000}
  .cv .entry{break-inside:avoid}
  a{color:#000; text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8.5pt; color:#555}
}