html {
  --color-accent: oklch(75% 0.18 290); 
  accent-color: var(--color-accent);
   color-scheme: light dark;
}

body {
  font: 100%/1.5 system-ui;
  max-width: 100ch;
  margin-inline: auto;
  padding: 1rem;
}

nav ul,
nav li {
  display: contents;
}

nav {
  display: flex;
  justify-content: space-between; 
  align-items: stretch;
  margin-bottom: 1rem;
  --border-color: oklch(50% 10% 200 / 40%);
  border-bottom: 1px solid var(--border-color);
}

nav a {
  flex: 1;
  text-align: center;         
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;      
  color: inherit;             
  padding: 0.5em;        
}

nav a.current {
  border-bottom: 0.4em solid oklch(85% 3% 200); 
  padding-bottom: 0.1em; 
}

img {
  display: block;           
  margin-inline: auto;    
  max-width: 100%;         
  height: auto;             
}

nav a:hover {
  border-bottom: 0.4em solid var(--color-accent);
  background-color: color-mix(in oklch, var(--color-accent), canvas 85%);
}

input,
textarea,
button {
  font: inherit;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em;
}

label {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

button {
  grid-column: 1 / -1;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 1em;
}


.projects article {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;            
}

.projects h2 {
  margin: 0; 
}

h1 {
  font-size: 400%; 
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;     
  text-wrap: balance;   
}

header {
  margin-block: 2rem 1rem;
}
header h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin: 0;
}
header .meta,
address.meta {
  font-style: normal;
  color: oklch(42% 0.02 200); 
  margin-top: .25rem;
}
header .meta a { color: inherit; text-decoration: none; }


section > h2 {
  margin: 2rem 0 .75rem;
  padding-bottom: .25rem;
  border-bottom: 2px solid oklch(from var(--color-accent) 80% 0.08 h); 
  font-weight: 700;
}


.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .25rem 1rem;
}


.right {
  color: oklch(42% 0.02 200);
  white-space: nowrap;
  text-align: right;
}


.meta {
  color: oklch(42% 0.02 200);
  margin-top: .25rem;
}

article ul {
  margin: .5rem 0 1.25rem;
  padding-left: 1.25rem;
}
article li { margin-bottom: .4rem; }
article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  background: oklch(96% 0 0);
  padding: 0 .25em;
  border-radius: .25em;
}

#skills + ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  list-style: none;
  padding: 0;
  margin: .5rem 0 1.5rem;
}
#skills + ul li {
  background: oklch(from var(--color-accent) 90% 0.06 h);
  color: oklch(35% 0.05 200);
  border: none;
  border-radius: 999px;
  padding: .25rem .75rem;
  font-weight: 500;
}
@media print {
  nav { display: none; }
  body { max-width: 7.5in; padding: 0; }
  section > h2 { border: 0; margin-top: 1.25rem; }
}

/* Mobile tweaks */
@media (max-width: 48rem) {
  .grid { grid-template-columns: 1fr; }
  .right { text-align: left; margin-top: .15rem; }
}
.resume-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.resume-header h1 {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.2em;
}

.resume-header .meta a {
  color: inherit;
  text-decoration: none;
}

.resume-header .meta {
  font-style: normal;
  font-size: 1rem;
}
.edu {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "school term"
    "major  gpa"
    "cw     cw";
  gap: .25rem 1rem;
  align-items: baseline;
}

.edu strong { font-weight: 600; }

.edu > strong { grid-area: school; }
.edu > .right { grid-area: term; text-align: right; color: oklch(42% 0.02 200); }

.edu .meta-left { grid-area: major; color: oklch(42% 0.02 200); }
.edu .meta-right { grid-area: gpa; text-align: right; color: oklch(42% 0.02 200); }

.edu .coursework { grid-area: cw; }

#skills + ul li:hover {
  background: var(--color-accent);
  color: white;
  transform: translateY(-2px); 
  box-shadow: 0 2px 6px oklch(70% 0.1 290 / 0.4); 
  cursor: default;
}

.color-scheme {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 80%;
  font-family: inherit;
}

#profile-stats {
  border: 1px solid oklch(80% 0.03 200);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-block: 1.25rem 2rem;
  background: canvas; 
}

#profile-stats h2 {
  margin: 0 0 .6rem;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  font-size: clamp(1.1rem, 2.2vw, 1.25rem);
  border-bottom: 2px solid oklch(from var(--color-accent) 80% 0.08 h);
  padding-bottom: .25rem;
}

#profile-stats dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem 2rem;
  align-items: end;
}

#profile-stats dt {
  grid-row: 1;
  margin: 0;
  color: oklch(42% 0.02 200); 
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  font-weight: 600;
}

#profile-stats dd {
  grid-row: 2;
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(1.4rem, 3.5vw, 2.25rem);
}

@media (max-width: 700px) {
  #profile-stats dl { grid-template-columns: repeat(2, 1fr); }
}


.container {
  display: flex;
  align-items: center;  
  gap: 1rem;             
  margin-bottom: 2rem;  
}

#projects-pie-plot { 
  max-width: 20em; 
  flex: 0 0 auto;       
}


.legend {
  flex: 1;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;                 /* 1 column (stacked) by default */
  gap: .5rem 1rem;                            /* row gap | column gap */
  align-content: start;
  padding: 0.75rem 1rem 1.25rem;
  margin: 1rem 0 2rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

/* at medium widths: 2 columns (≈ 3 rows for 6 items) */
@media (min-width: 640px) {
  .legend {
    grid-template-columns: repeat(2, minmax(9em, 1fr));
  }
}

/* optional: at large widths: 3 columns */
@media (min-width: 920px) {
  .legend {
    grid-template-columns: repeat(3, minmax(9em, 1fr));
  }
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;       
}

.legend-item .swatch {
  display: inline-block;
  width: 0.9em;
  aspect-ratio: 1 / 1;
  background: var(--color);
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
}

.searchBar {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.75rem 2.25rem 0.75rem 0.9rem; 
  border: 2px solid oklch(50% 0.08 260);
  border-radius: 10px;
  background: canvas;
  color: inherit;
  margin: 1rem 0 0.75rem;
}

.searchBar::placeholder {
  color: oklch(50% 0.03 200);
}

.searchBar:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent), canvas 85%);
}

.searchBar::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background: currentColor;
  mask: radial-gradient(circle 0.45rem at 50% 50%, transparent 48%, #000 49%);
  opacity: .35;
  cursor: pointer;
}
.searchBar:focus::-webkit-search-cancel-button { opacity: .55; }

&:has(path:hover) {
  path:not(:hover) {
    opacity: 0.5;
  }
}
path {
  transition: 300ms;
}
.selected {
  --color: oklch(60% 45% 0) !important;

  &:is(path) {
    fill: var(--color);
  }
}
path { cursor: pointer; }

#stats { margin: 18px 0 14px; }

#stats > h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
}

dl.stats.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 36px;         
  row-gap: 6px;             
  padding: 18px 22px;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  background: #fff;
  align-items: end;         
  text-align: center;       
}


dl.stats.tiles dt {
  grid-row: 1;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #6b7280;
  text-transform: uppercase;
}

dl.stats.tiles dd {
  margin: 0;
  font-size: 1.6rem;  
  line-height: 1.15;
  font-weight: 600;
  color: #0f172a;
}

.figure-caption {
  margin-top: 10px;
  padding: 10px 14px;
  font-size: .95rem;
  color: #111827;
  background: #f3f4f6;
  border-top: 1px solid #e6e8eb;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.gridlines line { stroke: #e5e7eb; stroke-opacity: .6; }
.gridlines path { display: none; }

dl.info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .75rem;
  margin: 0;
}
dl.info dt { margin: 0; color: #6b7280; }
dl.info dd { margin: 0; }

.tooltip {
  position: fixed;
  top: 1em;
  left: 1em;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  padding: .6rem .8rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 1000;
}


.gridlines { pointer-events: none; }
.gridlines line { stroke: #e5e7eb; stroke-opacity: .6; }
.gridlines path { display: none; }


dl.info.tooltip {
  position: fixed;
  top: 1em; left: 1em;
  padding: .6rem .8rem;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 1000;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}


dl.info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  margin: 0;
}
dl.info dt { margin: 0; color: #6b7280; font-weight: 600; }
dl.info dd { margin: 0; color: #0f172a; }

dl.info[hidden]:not(:hover, :focus-within) {
  opacity: 0;
  visibility: hidden;
}

circle {
  transition: 200ms;
  transform-origin: center;
  transform-box: fill-box;
}
circle:hover { transform: scale(1.5); }
@keyframes marching-ants {
  to {
    stroke-dashoffset: -8; /* 5 + 3 */
  }
}

.selection {
  fill-opacity: 0.1;
  stroke: black;
  stroke-opacity: 0.7;
  stroke-dasharray: 5 3;
  animation: marching-ants 2s linear infinite;
}

circle.selected {
  fill: #ff6b6b;
}

#lang-panel {
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 24px;
  background: #fff;
}

#lang-panel h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 2px solid oklch(from var(--color-accent) 80% 0.08 h);
  padding-bottom: .25rem;
}

dl.lang {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: .5rem 1rem;
  align-items: center;
  margin: 0;
}

@media (max-width: 700px) {
  dl.lang { grid-template-columns: 1fr; }
}

dl.lang dt {
  margin: 0;
  color: #0f172a;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}

dl.lang dt .swatch {
  width: .9em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--color, #94a3b8);
}

dl.lang dd {
  margin: 0;
}


.lang .bar {
  height: 10px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  position: relative;
}

.lang .bar .fill {
  height: 100%;
  width: 0%;
  background: var(--color, #64748b);
  border-radius: 999px;
  transition: width 260ms ease;
}

.lang .meta {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  margin-top: .3rem;
  color: #475569;
  font-size: .9rem;
}

.lang .meta .pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0f172a;
}

.lang .meta .count {
  font-variant-numeric: tabular-nums;
  opacity: .85;
}