/* ===== Metallic Chic Design Tokens ===== */
:root{
  /* Palette */
  --mc-gold:#D4AF37;       /* gold */
  --mc-rose:#B76E79;       /* rose-gold */
  --mc-silver:#C0C0C0;     /* silver */
  --mc-platinum:#E5E4E2;   /* platinum */
  --mc-gunmetal:#2A3439;   /* deep neutral */
  --mc-slate:#3A3F44;      /* dark slate */
  --mc-ink:#121417;        /* near-black */
  --mc-ivory:#F8F6F2;      /* soft paper */
  --mc-cloud:#F2F3F5;      /* ui bg */
  --mc-accent:var(--mc-gold);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Elevation & Radius */
  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.04);
  --shadow-2: 0 6px 18px rgba(0,0,0,.08);
  --radius-1: 10px;
  --radius-2: 16px;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem;

  /* Motion */
  --ease-1: cubic-bezier(.2,.8,.2,1);
  --fade-duration: 600ms;

  /* Text */
  --text-1:#14161a;
  --text-2:#2b3036;
  --text-inv:#0b0c0f;

  /* Links */
  --link: var(--mc-ink);
  --link-hover: var(--mc-accent);
}

@media (prefers-color-scheme: dark){
  :root{
    --text-1:#E9EAEC;
    --text-2:#C9CDD3;
    --link:#E9EAEC;
    --link-hover: var(--mc-accent);
    --mc-cloud:#171a1d;
    --mc-ivory:#101316;
    --mc-slate:#2a2f34;
    --mc-ink:#ffffff;
  }
}

/* ===== Base ===== */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-1);
  background:linear-gradient(180deg, var(--mc-ivory), var(--mc-cloud));
}

.container{max-width:1100px; margin-inline:auto; padding:0 var(--space-4)}

.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .site-header{background:rgba(20,22,26,.6); border-bottom-color: rgba(255,255,255,.08)}
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding: .8rem 0}
.brand{display:inline-flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--link)}
.brand:hover{color:var(--link-hover)}
.brand-mark{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background: radial-gradient(120% 120% at 10% 10%, var(--mc-platinum), var(--mc-silver) 50%, var(--mc-gunmetal) 100%);
  color:#111; font-weight:700;
  box-shadow: var(--shadow-1);
  font-size:.9rem;
}
.brand-text{font-weight:700; letter-spacing:.2px}

.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.site-nav a{display:inline-block; padding:.4rem .6rem; border-radius:8px; text-decoration:none; color:var(--link)}
.site-nav a[aria-current="true"], .site-nav a:hover{color:#111; background:linear-gradient(90deg,var(--mc-platinum),transparent 60%);}

.nav-toggle{display:none; background:none; border:1px solid rgba(0,0,0,.15); border-radius:8px; padding:.35rem .6rem}
.nav-toggle:focus-visible{outline:2px solid var(--mc-accent)}

@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:absolute; inset-inline:0; top:60px; background:var(--mc-ivory); border-bottom:1px solid rgba(0,0,0,.06); display:none}
  .site-nav.open{display:block}
  .site-nav ul{display:grid; gap:.2rem; padding: .6rem}
}

.skip-link{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:static; width:auto; height:auto; padding:.5rem; background:var(--mc-platinum); z-index:1000}

.site-main{padding: var(--space-6) 0 var(--space-7)}

.hero{display:grid; grid-template-columns:160px 1fr; gap:var(--space-5); align-items:center}
.hero-photo{border-radius:30%; box-shadow: var(--shadow-2); border:2px solid var(--mc-platinum);}
.hero-cta{display:flex; gap:.75rem; margin-top:var(--space-4)}
@media (max-width:720px){ .hero{grid-template-columns:1fr; text-align:center} .hero-cta{justify-content:center} }

.page-header .lede{max-width:65ch}

.cards{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); padding:0; margin:0}
.card{padding:var(--space-5); border-radius:var(--radius-2); background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6)); box-shadow: var(--shadow-1); border:1px solid rgba(0,0,0,.06)}

.text-link{color:var(--link); text-decoration:none; border-bottom:1px dashed currentColor}
.text-link:hover{color:var(--link-hover)}

.list{line-height:1.9}
.list li{margin:.25rem 0}

.timeline{list-style:none; padding:0; margin:0; border-left:2px solid var(--mc-platinum)}
.timeline li{padding:.6rem 0 .6rem 1rem; position:relative}
.timeline li::before{content:""; position:absolute; left:-7px; top:1.1rem; width:10px; height:10px; border-radius:50%; background: radial-gradient(80% 80% at 30% 30%, var(--mc-gold), var(--mc-rose)); border:1px solid rgba(0,0,0,.1)}

.vertical-timeline{}
.vt{list-style:none; padding:0; margin:0; border-left:2px solid var(--mc-platinum)}
.vt li{padding:1rem 0 1rem 1rem; position:relative}
.vt li .vt-marker{position:absolute; left:-8px; top:1.4rem; width:12px; height:12px; border-radius:50%; background: linear-gradient(135deg, var(--mc-silver), var(--mc-platinum))}
.vt-card{background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.5)); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-1); padding: .75rem .9rem; box-shadow: var(--shadow-1)}

.tags{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0}
.tags li{padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(0,0,0,.06); background:linear-gradient(180deg, #fff, #fafafa)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:999px; padding:.6rem 1rem; border:1px solid rgba(0,0,0,.12); text-decoration:none; font-weight:600; box-shadow: var(--shadow-1)}
.btn-ghost{background:transparent}
.btn-primary{background: linear-gradient(180deg, var(--mc-gold), #b89023); color:#111; border-color:#a67c1a}
.btn-chip{background:linear-gradient(180deg, var(--mc-platinum), var(--mc-silver)); border:1px solid rgba(0,0,0,.08)}

.site-footer{border-top:1px solid rgba(0,0,0,.06); padding: var(--space-6) 0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.02))}
.site-footer .small{opacity:.8; font-size:.9rem}

.field{display:grid; gap:.35rem; margin-bottom:1rem}
input, textarea{padding:.6rem .7rem; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:linear-gradient(180deg, #fff, #f9f9f9)}
input:focus-visible, textarea:focus-visible{outline:2px solid var(--mc-accent)}

.time{opacity:.7; margin-left:.4rem}

/* ===== Tabs ===== */
[role="tablist"]{display:flex; gap:.5rem; margin-bottom:1rem}
[role="tab"][aria-selected="true"]{outline:2px solid var(--mc-accent)}

/* ===== Subtle Section Fade-ins (reduced motion aware) ===== */
.reveal{opacity:0; transform: translateY(8px); transition: opacity var(--fade-duration) var(--ease-1), transform var(--fade-duration) var(--ease-1)}
.reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ===== Hover Shine (on buttons) ===== */
.shine{position:relative; overflow:hidden}
.shine::after{
  content:""; position:absolute; inset:0; transform: translateX(-120%);
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
}
.shine:hover::after{animation: shine-sweep .9s var(--ease-1) both}
@keyframes shine-sweep{
  from{transform: translateX(-120%)}
  to{transform: translateX(120%)}
}
@media (prefers-reduced-motion: reduce){
  .shine:hover::after{animation:none}
}

/* ===== Utilities ===== */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.grid.two-col{display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-6)}
@media (max-width:900px){ .grid.two-col{grid-template-columns:1fr} }

/* Dark mode tweaks */
@media (prefers-color-scheme: dark){
  .card, .vt-card{background:linear-gradient(180deg, rgba(24,26,30,.9), rgba(24,26,30,.7)); border-color: rgba(255,255,255,.06)}
  input, textarea{background:linear-gradient(180deg, #1e2126, #1a1d21); color:var(--text-1); border-color:#2a2f34}
  .site-nav{background:#1116}
}