@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
:root{
--color-navy:#001F3F;
--color-moss:#7A917A;
--color-white:#FFFFFF;
--navy-50:oklch(from var(--color-navy) 97% calc(c * 0.3) h);
--navy-100:oklch(from var(--color-navy) 93% calc(c * 0.5) h);
--navy-200:oklch(from var(--color-navy) 85% calc(c * 0.65) h);
--navy-300:oklch(from var(--color-navy) 74% calc(c * 0.8) h);
--navy-400:oklch(from var(--color-navy) 60% calc(c * 0.9) h);
--navy-500:oklch(from var(--color-navy) 47% c h);
--navy-600:oklch(from var(--color-navy) 37% calc(c * 1.05) h);
--navy-700:oklch(from var(--color-navy) 27% calc(c * 1.05) h);
--navy-800:oklch(from var(--color-navy) 19% calc(c * 1.02) h);
--navy-900:var(--color-navy);
--navy-950:oklch(from var(--color-navy) 10% calc(c * 0.9) h);
--moss-50:oklch(from var(--color-moss) 96% calc(c * 0.4) h);
--moss-100:oklch(from var(--color-moss) 91% calc(c * 0.55) h);
--moss-200:oklch(from var(--color-moss) 83% calc(c * 0.7) h);
--moss-300:oklch(from var(--color-moss) 74% calc(c * 0.85) h);
--moss-400:oklch(from var(--color-moss) 66% calc(c * 0.95) h);
--moss-500:var(--color-moss);
--moss-600:oklch(from var(--color-moss) 50% calc(c * 1.15) h);
--moss-700:oklch(from var(--color-moss) 40% calc(c * 1.2) h);
--moss-800:oklch(from var(--color-moss) 30% calc(c * 1.1) h);
--moss-900:oklch(from var(--color-moss) 22% calc(c * 1) h);
--neutral-0:var(--color-white);
--neutral-50:oklch(from var(--color-navy) 98% calc(c * 0.05) h);
--neutral-100:oklch(from var(--color-navy) 95% calc(c * 0.07) h);
--neutral-200:oklch(from var(--color-navy) 90% calc(c * 0.09) h);
--neutral-300:oklch(from var(--color-navy) 81% calc(c * 0.11) h);
--neutral-400:oklch(from var(--color-navy) 66% calc(c * 0.13) h);
--neutral-500:oklch(from var(--color-navy) 52% calc(c * 0.16) h);
--neutral-600:oklch(from var(--color-navy) 40% calc(c * 0.2) h);
--neutral-700:oklch(from var(--color-navy) 31% calc(c * 0.24) h);
--neutral-800:oklch(from var(--color-navy) 21% calc(c * 0.28) h);
--neutral-900:oklch(from var(--color-navy) 14% calc(c * 0.35) h);
--neutral-950:oklch(from var(--color-navy) 8% calc(c * 0.5) h);
--error-500:oklch(53% 0.19 25);
--error-600:oklch(45% 0.19 25);
--error-100:oklch(94% 0.045 25);
--warning-500:oklch(75% 0.15 80);
--warning-600:oklch(62% 0.15 70);
--warning-100:oklch(95% 0.045 85);
--info-500:oklch(55% 0.11 235);
--info-600:oklch(46% 0.11 235);
--info-100:oklch(94% 0.03 235);
--success-500:var(--moss-600);
--success-600:var(--moss-700);
--success-100:var(--moss-50);
--bg-page:var(--neutral-50);
--bg-surface:var(--color-white);
--bg-elevated:var(--color-white);
--bg-inverse:var(--navy-900);
--bg-sunken:var(--neutral-100);
--surface-card:var(--color-white);
--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--neutral-400);
--text-heading:var(--navy-900);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-inverse:var(--color-white);
--text-on-accent:var(--color-white);
--primary:var(--navy-900);
--primary-hover:var(--navy-800);
--primary-active:var(--navy-700);
--primary-subtle:var(--navy-50);
--accent:var(--moss-500);
--accent-hover:var(--moss-600);
--accent-active:var(--moss-700);
--accent-subtle:var(--moss-50);
--link:var(--navy-700);
--link-hover:var(--moss-700);
--focus-ring:var(--moss-400);
--disabled-bg:var(--neutral-100);
--disabled-text:var(--neutral-400);
}
:root{
--font-display:'Lora',Georgia,'Times New Roman',serif;
--font-body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-mono:'Roboto Mono','SFMono-Regular',Consolas,monospace;
--text-xs:0.75rem;
--text-sm:0.875rem;
--text-base:1rem;
--text-md:1.125rem;
--text-lg:1.25rem;
--text-xl:1.5rem;
--text-2xl:1.875rem;
--text-3xl:2.25rem;
--text-4xl:3rem;
--text-5xl:3.75rem;
--text-6xl:4.5rem;
--leading-tight:1.15;
--leading-snug:1.3;
--leading-normal:1.5;
--leading-relaxed:1.65;
--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--tracking-tight:-0.02em;
--tracking-normal:0em;
--tracking-wide:0.04em;
--tracking-wider:0.08em;
}
:root{
--space-0:0;
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--space-12:3rem;
--space-16:4rem;
--space-20:5rem;
--space-24:6rem;
--space-32:8rem;
--container-max:1200px;
--page-margin:clamp(1.5rem,5vw,6rem);
}
:root{
--radius-xs:3px;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:16px;
--radius-xl:24px;
--radius-full:999px;
--shadow-sm:0 1px 2px oklch(from var(--navy-900) l c h / 0.06),0 1px 1px oklch(from var(--navy-900) l c h / 0.04);
--shadow-md:0 4px 10px oklch(from var(--navy-900) l c h / 0.08),0 2px 4px oklch(from var(--navy-900) l c h / 0.05);
--shadow-lg:0 12px 24px oklch(from var(--navy-900) l c h / 0.12),0 4px 8px oklch(from var(--navy-900) l c h / 0.06);
--shadow-xl:0 24px 48px oklch(from var(--navy-900) l c h / 0.16),0 8px 16px oklch(from var(--navy-900) l c h / 0.08);
--shadow-focus:0 0 0 3px oklch(from var(--moss-400) l c h / 0.45);
--ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
--ease-in:cubic-bezier(0.4,0,1,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:360ms; /* @kind other */
--border-width:1px;
}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:1;border-radius:var(--radius-sm);border:var(--border-width) solid transparent;cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);white-space:nowrap}
.ds-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.ds-btn:active{transform:scale(0.98)}
.ds-btn--sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
.ds-btn--md{padding:0.625rem var(--space-5)}
.ds-btn--lg{padding:0.875rem var(--space-6);font-size:var(--text-base)}
.ds-btn--primary{background:var(--primary);color:var(--text-inverse)}
.ds-btn--primary:hover{background:var(--primary-hover)}
.ds-btn--primary:active{background:var(--primary-active)}
.ds-btn--accent{background:var(--accent);color:var(--text-inverse)}
.ds-btn--accent:hover{background:var(--accent-hover)}
.ds-btn--secondary{background:var(--bg-surface);color:var(--text-heading);border-color:var(--border-default)}
.ds-btn--secondary:hover{background:var(--neutral-50);border-color:var(--border-strong)}
.ds-btn--ghost{background:transparent;color:var(--text-heading)}
.ds-btn--ghost:hover{background:var(--neutral-100)}
.ds-btn--danger{background:var(--error-500);color:var(--text-inverse)}
.ds-btn--danger:hover{background:var(--error-600)}
.ds-btn:disabled{cursor:not-allowed;background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--disabled-bg)}
.ds-btn__icon{width:1em;height:1em;flex:none}
.ds-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-sm);border:var(--border-width) solid transparent;background:transparent;color:var(--text-body);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.ds-icon-btn:hover{background:var(--neutral-100);color:var(--text-heading)}
.ds-icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.ds-icon-btn--sm{width:1.75rem;height:1.75rem}
.ds-icon-btn img{width:1.1rem;height:1.1rem}
.ds-icon-btn--sm img{width:0.95rem;height:0.95rem}
.ds-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-body)}
.ds-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-heading)}
.ds-input-wrap{position:relative;display:flex;align-items:center}
.ds-input{width:100%;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-heading);background:var(--bg-surface);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);padding:0.625rem var(--space-3);transition:border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.ds-input::placeholder{color:var(--text-muted)}
.ds-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}
.ds-input--with-icon{padding-left:2.25rem}
.ds-input-wrap img{position:absolute;left:var(--space-3);width:1rem;height:1rem;opacity:0.55;pointer-events:none}
.ds-input--error{border-color:var(--error-500)}
.ds-help{font-size:var(--text-xs);color:var(--text-muted)}
.ds-help--error{color:var(--error-600)}
.ds-select-wrap{position:relative;display:flex}
.ds-select{appearance:none;width:100%;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-heading);background:var(--bg-surface);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);padding:0.625rem 2.25rem 0.625rem var(--space-3);cursor:pointer;transition:border-color var(--duration-base) var(--ease-standard)}
.ds-select:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}
.ds-select-wrap img{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);width:1rem;height:1rem;opacity:0.6;pointer-events:none}
.ds-checkbox,.ds-radio{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-heading);cursor:pointer;user-select:none}
.ds-checkbox input,.ds-radio input{position:absolute;opacity:0;width:1px;height:1px}
.ds-checkbox__box{width:1.125rem;height:1.125rem;border-radius:var(--radius-xs);border:var(--border-width) solid var(--border-strong);background:var(--bg-surface);display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard);flex:none}
.ds-checkbox__box img{width:0.75rem;height:0.75rem;filter:brightness(0) invert(1);opacity:0}
.ds-checkbox input:checked + .ds-checkbox__box{background:var(--primary);border-color:var(--primary)}
.ds-checkbox input:checked + .ds-checkbox__box img{opacity:1}
.ds-checkbox input:focus-visible + .ds-checkbox__box{box-shadow:var(--shadow-focus)}
.ds-radio__dot{width:1.125rem;height:1.125rem;border-radius:var(--radius-full);border:var(--border-width) solid var(--border-strong);background:var(--bg-surface);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:border-color var(--duration-base) var(--ease-standard)}
.ds-radio__dot::after{content:"";width:0.5rem;height:0.5rem;border-radius:var(--radius-full);background:var(--primary);transform:scale(0);transition:transform var(--duration-fast) var(--ease-standard)}
.ds-radio input:checked + .ds-radio__dot{border-color:var(--primary)}
.ds-radio input:checked + .ds-radio__dot::after{transform:scale(1)}
.ds-radio input:focus-visible + .ds-radio__dot{box-shadow:var(--shadow-focus)}
.ds-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-heading)}
.ds-switch input{position:absolute;opacity:0;width:1px;height:1px}
.ds-switch__track{width:2.5rem;height:1.5rem;border-radius:var(--radius-full);background:var(--neutral-300);position:relative;transition:background var(--duration-base) var(--ease-standard);flex:none}
.ds-switch__thumb{position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;border-radius:var(--radius-full);background:var(--bg-surface);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-standard)}
.ds-switch input:checked ~ .ds-switch__track{background:var(--accent)}
.ds-switch input:checked ~ .ds-switch__track .ds-switch__thumb{transform:translateX(1rem)}
.ds-switch input:focus-visible ~ .ds-switch__track{box-shadow:var(--shadow-focus)}
.ds-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.ds-card--elevated{border-color:transparent;box-shadow:var(--shadow-md)}
.ds-card__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-heading);margin:0}
.ds-card__body{font-size:var(--text-sm);color:var(--text-body);line-height:var(--leading-relaxed);margin:0}
.ds-card__footer{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.ds-badge{display:inline-flex;align-items:center;gap:0.3em;font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:0.25rem 0.6rem;border-radius:var(--radius-full);background:var(--neutral-100);color:var(--neutral-700)}
.ds-badge--accent{background:var(--accent-subtle);color:var(--moss-800)}
.ds-badge--primary{background:var(--primary-subtle);color:var(--navy-800)}
.ds-badge--success{background:var(--success-100);color:var(--moss-800)}
.ds-badge--warning{background:var(--warning-100);color:var(--warning-600)}
.ds-badge--error{background:var(--error-100);color:var(--error-600)}
.ds-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-heading);background:var(--bg-sunken);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-sm);padding:0.3rem 0.5rem 0.3rem var(--space-3)}
.ds-tag button{display:inline-flex;border:none;background:transparent;cursor:pointer;padding:0.15rem;border-radius:var(--radius-full);opacity:0.6}
.ds-tag button:hover{opacity:1;background:var(--neutral-200)}
.ds-tag button img{width:0.7rem;height:0.7rem}
.ds-tabs__list{display:flex;gap:var(--space-6);border-bottom:var(--border-width) solid var(--border-subtle)}
.ds-tabs__tab{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);background:none;border:none;cursor:pointer;padding:var(--space-3) var(--space-1);position:relative;transition:color var(--duration-base) var(--ease-standard)}
.ds-tabs__tab:hover{color:var(--text-heading)}
.ds-tabs__tab--active{color:var(--text-heading)}
.ds-tabs__tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:var(--radius-full)}
.ds-tabs__panel{padding:var(--space-5) 0;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-body)}
.ds-dialog-overlay{position:fixed;inset:0;background:oklch(from var(--navy-950) l c h / 0.5);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(2px)}
.ds-dialog{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-6);width:min(420px,90vw);display:flex;flex-direction:column;gap:var(--space-4)}
.ds-dialog__title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-heading);margin:0}
.ds-dialog__body{font-size:var(--text-sm);color:var(--text-body);line-height:var(--leading-relaxed);margin:0}
.ds-dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-2)}
.ds-toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--bg-surface);border:var(--border-width) solid var(--border-subtle);border-left:3px solid var(--neutral-400);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:var(--space-4);max-width:360px}
.ds-toast--success{border-left-color:var(--success-500)}
.ds-toast--error{border-left-color:var(--error-500)}
.ds-toast--warning{border-left-color:var(--warning-500)}
.ds-toast--info{border-left-color:var(--info-500)}
.ds-toast img{width:1.1rem;height:1.1rem;flex:none;margin-top:0.1rem}
.ds-toast__title{font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--text-sm);color:var(--text-heading);margin:0}
.ds-toast__body{font-family:var(--font-body);font-size:var(--text-xs);color:var(--text-muted);margin:0.15rem 0 0}
.ds-tooltip-wrap{position:relative;display:inline-block}
.ds-tooltip{position:absolute;bottom:125%;left:50%;transform:translateX(-50%);margin-bottom:0.4rem;display:inline-block;font-family:var(--font-body);font-size:var(--text-xs);color:var(--text-inverse);background:var(--navy-900);padding:0.4rem 0.7rem;border-radius:var(--radius-xs);box-shadow:var(--shadow-md);white-space:nowrap;z-index:10}
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";
@import "components/components.css";

/* Base page rules */
body{margin:0}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
:root{--section-pad-y:54px}
@media (max-width:640px){:root{--section-pad-y:36px}}
section[id]{scroll-margin-top:80px}

/* Responsive resume layout: stack sidebar above content on narrow screens */
@media (max-width: 720px) {
  .resume-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile header: hamburger menu below 768px */
.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--text-heading);align-items:center;}
@media (max-width: 768px) {
  .mobile-menu-btn{display:flex;}
  .header-group{
    display:none !important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:22px clamp(1.5rem,5vw,6rem);
    border-bottom:1px solid var(--border-subtle);
    box-shadow:0 10px 20px rgba(0,0,0,0.08);
  }
  .header-group.open{display:flex !important;}
  .header-group nav{flex-direction:column;gap:18px;width:100%;font-size:17px;}
}

/* Hero heading scales down on small screens instead of overflowing */
@media (max-width: 480px) {
  h1[style*="font-size: 4rem"]{font-size:2.5rem !important;}
}