/* ===========================================================
   Theme: light default, dark override
   =========================================================== */
:root{
  /* Softer light palette */
  --bg:#eef2f7;
  --panel:#f9fbfe;
  --card:#ffffff;
  --text:#1b2432;
  --muted:#647089;
  --accent:#2563eb;          /* blue */
  --accent-2:#10b981;        /* green */
  --border:#d9e0ea;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --soft:#f3f6fb;
}

:root[data-theme="dark"]{
  --bg:#0b0c0f;
  --panel:#12141a;
  --card:#161922;
  --text:#e6e8ee;
  --muted:#b6bac8;
  --accent:#7dd3fc;
  --accent-2:#a7f3d0;
  --border:#233;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --soft:#0e1016;
}

/* ===========================================================
   Section layering (progressively darker backgrounds)
   =========================================================== */
:root{
  --layer-0: var(--bg);
  --layer-1: color-mix(in srgb, var(--bg) 94%, #000 6%);
  --layer-2: color-mix(in srgb, var(--bg) 90%, #000 10%);
  --layer-3: color-mix(in srgb, var(--bg) 86%, #000 14%);
  --layer-4: color-mix(in srgb, var(--bg) 82%, #000 18%);
  --layer-5: color-mix(in srgb, var(--bg) 78%, #000 22%);
}

:root[data-theme="dark"]{
  --layer-0: var(--bg);
  --layer-1: color-mix(in srgb, var(--bg) 92%, #000 8%);
  --layer-2: color-mix(in srgb, var(--bg) 86%, #000 14%);
  --layer-3: color-mix(in srgb, var(--bg) 82%, #000 18%);
  --layer-4: color-mix(in srgb, var(--bg) 78%, #000 22%);
  --layer-5: color-mix(in srgb, var(--bg) 74%, #000 26%);
}

/* Apply the layered backgrounds by vertical order */
main > .section{ background: var(--layer-0); }
main > .section:nth-of-type(2){ background: var(--layer-1); }
main > .section:nth-of-type(3){ background: var(--layer-2); }
main > .section:nth-of-type(4){ background: var(--layer-3); }
main > .section:nth-of-type(5){ background: var(--layer-4); }
main > .section:nth-of-type(6){ background: var(--layer-5); }

/* ===========================================================
   Base
   =========================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), var(--soft));
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
h1,h2,h3{line-height:1.2;margin:0 0 12px}
h1{font-size:clamp(28px,4vw,42px)}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:clamp(18px,2.2vw,22px)}
p{margin:0 0 16px}
.lead{font-size:1.1rem;color:var(--muted)}
.subtle{color:var(--muted);margin-top:-4px}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.bullets{padding-left:18px}
.bullets li{margin:6px 0}
.links{padding-left:18px}
.links li{margin:6px 0}

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{color:var(--text);text-decoration:none;font-weight:700}
.logo{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;
  box-shadow:var(--shadow)
}
.primary-nav{display:flex;gap:18px}
.primary-nav a{color:var(--text);text-decoration:none;opacity:.85}
.primary-nav a:hover{opacity:1}
.right-controls{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none}
.theme-toggle{
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  padding:6px 10px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow)
}

/* ===========================================================
   Hero
   =========================================================== */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.hero-grid{align-items:center}
.hero-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)
}

/* Avatar card */
.headshot{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.avatar{
  width:160px;height:160px;border-radius:50%;object-fit:cover;
  border:6px solid var(--panel); box-shadow:var(--shadow);
}
.bio-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border-radius:999px;padding:6px 12px;font-size:.9rem;
}
.bio-chip .dot{width:8px;height:8px;border-radius:999px;background:#fff;display:inline-block}

/* Stats list */
.stats{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.stats li{
  display:flex;gap:10px;align-items:center;
  background:color-mix(in srgb, var(--panel) 70%, transparent);
  border:1px dashed var(--border);border-radius:12px;padding:10px 12px
}
.stats strong{font-size:1.05rem}

/* ===========================================================
   Gallery Cards (with image previews)
   =========================================================== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:14px}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px)}
.card-link{display:block;color:inherit;text-decoration:none}
.thumb{
  width:100%;height:180px;object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.02) brightness(.99);
  transition:transform .35s ease;
}
.card:hover .thumb{transform:scale(1.03)}
.card-body{padding:16px}
.tags{list-style:none;display:flex;gap:8px;padding:0;margin:10px 0 0 0;flex-wrap:wrap}
.tags li{font-size:.8rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:999px;padding:4px 8px}
.card-actions{display:flex;justify-content:flex-end;padding:0 16px 16px}

/* ===========================================================
   Panels
   =========================================================== */
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
  display:inline-block;border:1px solid var(--border);padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--text);
  transition:transform .2s ease, box-shadow .2s ease;box-shadow:var(--shadow)
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;font-weight:700}
.btn.small{padding:8px 12px;font-size:.9rem}

/* ===========================================================
   Form
   =========================================================== */
.form{max-width:640px;margin-top:8px}
.form-row{display:flex;flex-direction:column;margin:10px 0}
input,textarea{
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:12px;padding:10px 12px;outline:0
}
input:focus,textarea:focus{border-color:var(--accent)}
.hidden{display:none}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{
  border-top:1px solid var(--border);
  padding:28px 0;
  background:color-mix(in srgb, var(--panel) 82%, transparent)
}

/* ===========================================================
   Utilities & accessibility
   =========================================================== */
.actions{display:flex;gap:10px;flex-wrap:wrap}
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:10px;top:10px;width:auto;height:auto;background:#fff;color:#000;padding:6px 10px;border-radius:8px
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.reveal-in{opacity:1;transform:none}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.reveal-in {
  opacity: 1;
  transform: none;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 820px){
  .grid-2{grid-template-columns:1fr}
  .primary-nav{
    position:fixed;inset:64px 0 auto 0;background:var(--panel);
    display:none;flex-direction:column;gap:12px;padding:16px;border-bottom:1px solid var(--border)
  }
  .primary-nav.open{display:flex}
  .nav-toggle{
    display:inline-block;background:transparent;color:var(--text);
    border:1px solid var(--border);padding:6px 10px;border-radius:10px
  }
}

/* ===========================================================
  Quick Links (icons)
   =========================================================== */
.quick-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:flex-start;
}

.link-btn.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-size:1.35rem;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  position:relative;
}

.link-btn.primary:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* Optional stagger */
@media(min-width:680px){
  .stagger .link-btn:nth-child(odd){ transform:translateY(4px); }
  .stagger .link-btn:nth-child(even){ transform:translateY(-4px); }
  .stagger .link-btn:hover{ transform:translateY(-6px) scale(1.05); }
}

@media(prefers-reduced-motion: reduce){
  .stagger .link-btn:nth-child(odd),
  .stagger .link-btn:nth-child(even),
  .link-btn.primary:hover{ transform:none !important; }
}

/* Hover tooltip using aria-label text */
.link-btn.primary::after{
  content:attr(aria-label);
  position:absolute;
  bottom:-32px; left:50%;
  transform:translateX(-50%);
  background:var(--panel);
  color:var(--text);
  font-size:.75rem;
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:.2s ease;
  box-shadow:var(--shadow);
}
.link-btn.primary:hover::after{ opacity:1; }

/* ===========================================================
   Split About Section — robust diagonal + image card
   =========================================================== */
.about-split{
  position: relative;
  overflow: hidden;
}

/* Diagonal band covers whole section height */
.about-split::after{
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

.about-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Left text */
.about-text{ position: relative; }

/* Right column: fixed-ratio image card (never collapses) */
.about-image{ position: relative; }
.about-photo{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: #dfe6ef url("/assets/about-photo.jpg") center / cover no-repeat;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* Mobile */
@media (max-width: 820px){
  .about-grid{ grid-template-columns: 1fr; }
}

.about-photo{
  width: 100%;
  aspect-ratio: 4 / 3;  
  border-radius: 16px;
  background: #dfe6ef url("/assets/DSC01182.jpeg") center / cover no-repeat;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.about-caption{
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;   
}

.about-caption2{
   margin-top: 10px;
   font-size: .75rem;
   color: var(--muted);
   font-style: italic;
   text-align: center;
}