/* ==========================================================================
   Kelvin Mo - Site Styles (clean, unified, iOS-stable, future focused)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Design tokens
   -------------------------------------------------------------------------- */
:root{
  --bg:#030817;
  --fg:#f3f7ff;
  --muted:#8f9cbf;

  --card:#0c162b;
  --card-border:rgba(92,136,204,.18);

  --accent:#36d6ff;
  --accent-strong:#7a63ff;
  --accent-soft:rgba(54,214,255,.18);

  --link:#6fe9ff;
  --link-hover:#c7fbff;
  --link-underline:rgba(111,233,255,.4);

  --btn-on-accent:#041321;

  --glow-cyan:18,200,255;
  --glow-violet:206,79,255;

  color-scheme: dark light;
}

html[data-theme="light"], html.light{
  --bg:#f2f6ff;
  --fg:#061226;
  --muted:#53607a;

  --card:#ffffff;
  --card-border:rgba(10,32,64,.1);

  --accent:#007dff;
  --accent-strong:#4f5dff;
  --accent-soft:rgba(0,125,255,.16);

  --link:#0059ff;
  --link-hover:#003ac4;
  --link-underline:rgba(0,89,255,.28);

  --btn-on-accent:#f5f9ff;

  --glow-cyan:126,194,255;
  --glow-violet:168,156,255;
}

html[data-theme="dark"], html.dark{
  /* inherits :root */
}

/* --------------------------------------------------------------------------
   2) Base reset
   -------------------------------------------------------------------------- */
*{ box-sizing:border-box; }
html, body{ height:100%; min-height:100%; margin:0; padding:0; }
html{
  background-color: var(--bg);
  background-repeat:no-repeat;
}

/* --------------------------------------------------------------------------
   3) Global background - single owner (html)
   -------------------------------------------------------------------------- */
html:not([data-theme="light"]):not(.light),
html[data-theme="dark"],
html.dark{
  background-image:
    radial-gradient(120% 140% at 18% 25%, rgba(var(--glow-cyan),.52) 0%, rgba(var(--glow-cyan),.12) 48%, rgba(var(--glow-cyan),0) 70%),
    radial-gradient(150% 165% at 88% 18%, rgba(var(--glow-violet),.46) 0%, rgba(var(--glow-violet),.12) 50%, rgba(var(--glow-violet),0) 72%),
    radial-gradient(180% 220% at 50% 120%, rgba(12,26,48,.55) 0%, rgba(12,26,48,0) 75%),
    linear-gradient(205deg, #030915 0%, #04132b 45%, #091e38 78%, #1a1135 100%);
  background-size:120% 140%, 150% 165%, 180% 220%, 100% 100%;
  background-position:8% 3%, 92% 6%, 50% 110%, center;
  background-attachment:fixed;
}

html[data-theme="light"], html.light{
  background-image:
    radial-gradient(140% 160% at 18% 18%, rgba(var(--glow-cyan),.22) 0%, rgba(var(--glow-cyan),0) 70%),
    radial-gradient(160% 180% at 90% 12%, rgba(var(--glow-violet),.18) 0%, rgba(var(--glow-violet),0) 72%),
    linear-gradient(192deg, #edf3ff 0%, #f2f7ff 55%, #f7faff 100%);
  background-size:140% 160%, 160% 180%, 100% 100%;
  background-position:8% 4%, 94% 8%, center;
  background-attachment:fixed;
}

@supports (-webkit-touch-callout: none){
  html{
    background-attachment:scroll;
  }
}

body{
  background:transparent;
  color:var(--fg);
  overflow-x:hidden;
  position:relative;
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   4) Header / navigation
   -------------------------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.75rem;
  padding-block:1rem;
  padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  border-bottom:1px solid var(--card-border);
  background:
    linear-gradient(to bottom,
      rgba(var(--glow-violet), .18) 0%,
      rgba(var(--glow-cyan),   .12) 55%,
      transparent 100%),
    color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
}
@supports (-webkit-touch-callout: none){
  .site-header{ backdrop-filter:none; }
}

.brand{ flex:0 0 auto; color:var(--fg); text-decoration:none; font-weight:700; position:relative; z-index:1; }

.nav-scroller{
  position:relative; z-index:0;
  flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  --fade:16px;
  padding-inline:var(--fade);
  -webkit-mask-clip:content-box; mask-clip:content-box;
  -webkit-mask-image:linear-gradient(to right,
      transparent 0, black var(--fade),
      black calc(100% - var(--fade)), transparent 100%);
  mask-image:linear-gradient(to right,
      transparent 0, black var(--fade),
      black calc(100% - var(--fade)), transparent 100%);
  scrollbar-width:none;
}
.nav-scroller::-webkit-scrollbar{ display:none; }

.nav{ display:inline-flex; align-items:center; gap:.75rem; margin:0; padding:0; }
.nav > li{ list-style:none; }
.nav-link{
  color:var(--muted);
  text-decoration:none;
  padding:.25rem .5rem;
  border-radius:8px;
  flex:0 0 auto;
}
.nav-link:hover,
.nav-link.active{
  color:var(--fg);
  background:var(--card-border);
}

#themeToggle{
  border:1px solid var(--card-border);
  background:transparent;
  color:var(--fg);
  padding:.4rem .6rem;
  border-radius:8px;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
  z-index:1;
}

/* --------------------------------------------------------------------------
   5) Layout primitives
   -------------------------------------------------------------------------- */
.container{
  width:min(1100px,92%);
  margin:0 auto;
  padding:3rem 0 6rem;
  position:relative;
  z-index:0;
}

.section{
  margin-top:clamp(2.6rem, 4vw, 3.6rem);
  display:flex;
  flex-direction:column;
  gap:clamp(1.4rem, 2vw, 2.4rem);
}
.section:first-of-type{ margin-top:clamp(1.6rem, 3vw, 2.4rem); }

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}
.section-head h1,
.section-head h2{ margin:0; font-family:"IBM Plex Serif",serif; }

.page-intro{ margin-top:2rem; }
.page-lede{ max-width:58ch; line-height:1.8; color:var(--muted); }

.longform p{ margin:0 0 1.2rem 0; line-height:1.85; }

/* --------------------------------------------------------------------------
   6) Hero
   -------------------------------------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0, clamp(220px, 18vw, 260px)) minmax(0, 1fr);
  gap:clamp(2.2rem, 5vw, 4.6rem);
  align-items:start;
  margin-top:1.2rem;
  margin-bottom:clamp(2.4rem, 5vw, 4.2rem);
  position:relative;
  z-index:1;
}

.hero-photo{ position:relative; }
.hero-photo::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 45%,
    rgba(var(--glow-cyan),.32) 0%,
    rgba(var(--glow-violet),.18) 55%,
    rgba(var(--glow-violet),0) 90%);
  filter:blur(26px);
  opacity:.7;
  pointer-events:none;
}

.headshot{
  position:relative;
  width:clamp(200px, 18vw, 240px);
  height:clamp(200px, 18vw, 240px);
  border-radius:999px;
  object-fit:cover;
  border:2px solid var(--card-border);
  box-shadow:0 20px 45px rgba(0,0,0,.25);
  animation: hero-fade 1.1s ease forwards;
}

.hero-copy{
  animation: hero-slide 1.1s ease forwards;
  max-width:min(100%, 620px);
}
.hero-copy h1{
  font-size:clamp(2.1rem,3.5vw,2.9rem);
  margin:0;
  font-family:"IBM Plex Serif",serif;
}
.tagline{ margin-top:.5rem; color:color-mix(in srgb, var(--muted) 75%, var(--fg)); font-size:1.1rem; }
.lede{ margin-top:1.1rem; line-height:1.75; max-width:62ch; }

.hero-focus{
  margin:1.1rem 0 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  list-style:none;
}
.hero-focus li{
  border:1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  padding:.32rem .65rem;
  border-radius:999px;
  font-size:.78rem;
  color:color-mix(in srgb, var(--muted) 85%, var(--fg));
  background:color-mix(in srgb, var(--card) 84%, transparent);
  box-shadow:0 8px 20px rgba(6,16,40,.25);
}

.cta{ margin-top:1.4rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.btn{
  padding:.6rem .95rem;
  border-radius:10px;
  text-decoration:none;
  color:var(--btn-on-accent);
  background:var(--accent);
  font-weight:600;
  box-shadow:0 12px 28px rgba(3,60,90,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn.ghost{
  background:transparent;
  color:var(--fg);
  border:1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:0 10px 22px rgba(3,34,60,.25);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 16px 32px rgba(3,60,90,.35); }
.btn.ghost:hover{ box-shadow:0 16px 30px rgba(3,34,60,.28); }

@keyframes hero-fade{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes hero-slide{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* --------------------------------------------------------------------------
   7) Cards / grids / narrative blocks
   -------------------------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.5rem, 3vw, 2.5rem);
  align-items:stretch;
}
.about-pillars ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1rem;
}
.about-pillars li{
  background:color-mix(in srgb, var(--card) 90%, transparent);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:1.1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.about-pillars h3{ margin:0 0 .4rem 0; font-family:"IBM Plex Serif",serif; }

.pillars-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.2rem;
}
.pillar-card{
  background:color-mix(in srgb, var(--card) 90%, transparent);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:1.3rem 1.4rem;
  min-height:180px;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.pillar-card h2{ margin:0; font-size:1.2rem; font-family:"IBM Plex Serif",serif; }

.story-card{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(1.5rem, 3vw, 2.5rem);
  padding:clamp(1.6rem, 3vw, 2.2rem);
  border:1px solid var(--card-border);
  border-radius:22px;
  background:color-mix(in srgb, var(--card) 95%, transparent);
  box-shadow:0 18px 48px rgba(6,12,32,.25);
}
.story-copy p{ margin:0 0 1.1rem 0; }
.story-subtitle{
  color:color-mix(in srgb, var(--accent-strong) 55%, var(--muted));
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.85rem;
}
.story-highlights ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.75rem;
}
.story-label{ display:block; font-weight:600; font-size:.9rem; color:var(--fg); }
.story-detail{ display:block; color:var(--muted); font-size:.9rem; margin-top:.2rem; }

.story-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(1.6rem, 3vw, 2.6rem);
}
.story-side{
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:1.2rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.story-side h3{ margin-top:0; font-family:"IBM Plex Serif",serif; }
.story-side ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.story-side li{ border-bottom:1px solid var(--card-border); padding-bottom:.6rem; }
.story-side li:last-child{ border-bottom:none; padding-bottom:0; }

.focus-list{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  list-style:none;
  margin:0;
  padding:0;
}
.focus-list li{
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:.45rem .85rem;
  font-size:.9rem;
  background:color-mix(in srgb, var(--card) 92%, transparent);
}

.grid-sleek{
  display:grid;
  gap:clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.item-card{
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:1.1rem 1.2rem;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease;
  box-shadow:0 14px 38px rgba(4,8,24,.22);
}
.item-card:hover{
  transform:translateY(-1.5px);
  border-color:color-mix(in srgb, var(--accent-strong) 45%, var(--card-border));
}
.project-card{ display:flex; flex-direction:column; gap:.75rem; }
.project-badge{
  align-self:flex-start;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.3rem .6rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:600;
}
.badge-accent{
  color:var(--btn-on-accent);
  background:var(--accent);
}
.badge-cool{
  color:#031b29;
  background:var(--accent-soft);
  border-color:rgba(var(--glow-cyan),.35);
}
.badge-neutral{
  color:var(--muted);
  background:color-mix(in srgb, var(--card) 86%, transparent);
  border-color:var(--card-border);
}
.badge-warm{
  color:#281211;
  background:rgba(255,163,116,.25);
  border-color:rgba(255,163,116,.45);
}

.item-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.item-title{ margin:0; font-size:1.08rem; font-weight:600; }
.item-meta{ color:var(--muted); font-size:.92rem; }
.item-body{ margin:0; line-height:1.6; }
.item-outcome{ margin:0; color:var(--muted); font-style:italic; }
.item-actions{ margin-top:.3rem; display:flex; gap:.6rem; align-items:center; }
.item-link{ text-decoration:none; color:var(--accent); font-weight:600; }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.tag{
  padding:.24rem .5rem;
  border-radius:999px;
  border:1px solid var(--card-border);
  color:var(--muted);
  font-size:.78rem;
}

.pub-list{ margin-top:0; display:grid; gap:12px; }
.pub-item{
  border:1px solid var(--card-border);
  border-left:3px solid color-mix(in srgb, var(--accent-strong) 60%, var(--card-border));
  border-radius:12px;
  overflow:hidden;
  padding:1rem 1.1rem;
  background:color-mix(in srgb, var(--card) 94%, transparent);
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.pub-title{ margin:0; font-weight:600; font-size:1.05rem; }
.pub-meta{ color:var(--muted); font-size:.9rem; }
.pub-blurb{ margin:0; line-height:1.6; }
.pub-contrib{ margin:0; font-size:.9rem; color:var(--muted); }

.timeline{ position:relative; margin-top:1rem; }
.timeline::before{
  content:"";
  position:absolute; left:10px; top:0; bottom:0; width:2px;
  background:color-mix(in srgb, var(--fg) 10%, transparent);
}
.ti{ position:relative; padding-left:30px; margin-bottom:14px; }
.ti::before{
  content:"";
  position:absolute; left:4px; top:.35rem; width:12px; height:12px;
  border-radius:999px; background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.ti-head{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline; }
.ti-role{ font-weight:700; }
.ti-org{ color:var(--muted); }
.ti-dates{ margin-left:auto; color:var(--muted); font-size:.9rem; }
.ti-body{ margin-top:.35rem; }
.ti-body ul{ margin:.2rem 0 0 1rem; }

.contact-card{
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:1.5rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:520px;
  margin-inline:auto;
}
.contact-links{ display:flex; flex-wrap:wrap; gap:1rem; }
.contact-links a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

/* --------------------------------------------------------------------------
   8) Content specifics
   -------------------------------------------------------------------------- */
main h1, main h2, main h3{ font-family:"IBM Plex Serif",serif; }
main h1{ margin:0 0 1rem; font-size:clamp(1.6rem,3vw,2.2rem); }
main p, main li{ line-height:1.7; color:var(--fg); }

.home-highlight{
  margin-top:clamp(1.5rem, 3vw, 2.5rem);
}

.home-highlight-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(.9rem, 2vw, 1.4rem);
}

.home-grid{
  margin-top:clamp(2rem, 4vw, 3.2rem);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1rem, 2.2vw, 1.8rem);
}
.home-card{
  background:linear-gradient(160deg,
      color-mix(in srgb, var(--card) 96%, transparent) 0%,
      color-mix(in srgb, var(--card) 88%, transparent) 100%);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:1.3rem 1.35rem;
  box-shadow:0 14px 32px rgba(3,10,30,.28);
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.home-card h2{ margin:0; font-family:"IBM Plex Serif",serif; font-size:1.12rem; }
.home-card p{ margin:0; color:color-mix(in srgb, var(--muted) 72%, var(--fg)); line-height:1.6; }
.home-card .card-lede{ text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; color:color-mix(in srgb, var(--accent-strong) 55%, var(--muted)); }
.home-list{ margin:0; padding-left:1.1rem; display:grid; gap:.45rem; }
.home-list li{ color:var(--fg); line-height:1.55; }
.home-list li span{ display:block; color:var(--muted); font-size:.9rem; }
.home-card .card-link{ margin-top:auto; text-decoration:none; color:var(--accent); font-weight:600; }
.home-card .card-link:hover{ color:var(--link-hover); }
.directory-card{ min-height:0; }
.directory-card p{ flex:1; }
.directory-grid{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.bullets{ margin:.5rem 0 0 0; padding-left:1.2rem; }

/* --------------------------------------------------------------------------
   9) Footer
   -------------------------------------------------------------------------- */
.site-footer{
  width:min(1100px,92%);
  margin:2rem auto 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:1rem;
  background:transparent;
}
.site-footer a{ color:var(--link); text-decoration:none; }
.site-footer a:hover{ color:var(--link-hover); }

@supports (-webkit-touch-callout: none){ .site-footer{ backdrop-filter:none; } }

/* --------------------------------------------------------------------------
   10) Links & lists
   -------------------------------------------------------------------------- */
a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-color:var(--link-underline);
  text-underline-offset:3px;
}
a:hover,
a:focus{
  color:var(--link-hover);
  text-decoration-color:currentColor;
}
main li{ line-height:1.8; }
.site-footer a{ text-decoration-thickness:.08rem; }

/* --------------------------------------------------------------------------
   11) Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .home-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid-sleek{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .story-card{ grid-template-columns:1fr; }
  .story-grid{ grid-template-columns:1fr; }
  .story-side{ order:-1; }
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:left; }
  .hero-photo{ justify-self:flex-start; }
  .headshot{ width:150px; height:150px; }
  .about-grid{ grid-template-columns:1fr; }
  .pillars-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid-sleek{ grid-template-columns:1fr; }
  .home-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .pillars-grid{ grid-template-columns:1fr; }
  .contact-card{ width:100%; }
  .section{ margin-top:3rem; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}