/* ================================
   0) TOKENS / RESET
================================ */
:root{
  --accent:#0071E3;
  --bg:#FAFAFA;
  --text:#111111;
  --subtle:#666666;
  --card:#FFFFFF;
  --hairline:rgba(0,0,0,.08);
  --radius:16px;
  --shadow-s:0 4px 12px rgba(0,0,0,.06);
  --shadow-l:0 14px 36px rgba(0,0,0,.07);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0B0B0C; --text:#EDEDED; --subtle:#A1A1A6; --card:#111214; --hairline:rgba(255,255,255,.08); }
}

html{ scroll-behavior:smooth }
*{ box-sizing:border-box }
body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Helvetica,Arial,sans-serif; }
.visually-hidden,.sr-only{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.container{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
.narrow{ max-width:820px; margin:0 auto; } /* shared narrow container */
.section{ padding:64px 0 }
.section h2,.section-title{ font-size:clamp(24px,3.2vw,34px); margin:0 0 10px }
.hairline{ height:1px; background:linear-gradient(90deg,var(--hairline),transparent); margin:16px 0 32px; border:0 }
.hairline--section{ margin:0; }

/* ================================
   1) HEADER / NAV
================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in srgb,#fff 70%,transparent);
  border-bottom:1px solid var(--hairline);
  margin:0; padding:0;
}
.nav{ display:flex; align-items:center; justify-content:space-between; min-height:56px; }
.brand{ font-weight:700; letter-spacing:.2px; color:inherit; text-decoration:none; }

/* Links: center-growing underline + color fade, no bg change */
.nav a{
  position:relative; color:inherit; text-decoration:none;
  padding:10px 12px; border-radius:12px; transition:color .25s ease;
}
.nav a::after{
  content:""; position:absolute; left:50%; bottom:6px; width:0%; height:2px;
  background:currentColor; transform:translateX(-50%); opacity:.9;
  transition:width .25s ease, color .25s ease;
}
.nav a:hover,.nav a:focus-visible{ color:var(--subtle) }
.nav a:hover::after,.nav a:focus-visible::after{ width:calc(100% - 24px) }

/* Desktop vs Mobile */
.nav-desktop{ display:none }
.nav-mobile{ display:block }
@media (min-width:768px){
  .nav-desktop{ display:flex; gap:4px }
  .nav-mobile{ display:none }
}

/* Mobile <details> menu */
.nav-mobile{ position:relative; margin-left:auto }
.nav-mobile>summary{
  list-style:none; display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; cursor:pointer; user-select:none;
}
.nav-mobile>summary::-webkit-details-marker{ display:none }
.icon{ display:block }
.nav-mobile[open] .icon-hamburger{ display:none }
.nav-mobile:not([open]) .icon-close{ display:none }

.nav-mobile .nav-links{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  display:flex; flex-direction:column; gap:2px; padding:8px; min-width:200px;
  background:color-mix(in srgb, var(--card) 85%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--shadow-l);
  transform-origin:top center; transform:scaleY(.9); opacity:0;
  transition:transform .22s ease, opacity .22s ease; will-change:transform,opacity;
}
.nav-mobile[open] .nav-links{ transform:scaleY(1); opacity:1 }
.nav-mobile .nav-links a{ padding:12px 14px; border-radius:10px }

/* === Brand logo spin on hover === */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 2.2em;
    transform-origin: center;
    margin: 0px;
    padding: 0px;
}

@keyframes flip360 {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(720deg); } /* two full spins */
}

@media (hover:hover) and (pointer:fine) {
  .brand:hover .brand-logo {
    animation: flip360 1s ease-out forwards;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-logo { animation: none !important; }
}


/* ================================
   2) TYPOGRAPHY / HERO / BUTTONS
================================ */
.hero{ padding:96px 0 64px }
.eyebrow{ letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--subtle) }
.display{ font-size:clamp(40px,8vw,72px); line-height:1.04; margin:.2em 0 .3em }
.subtitle,.about-lede,.resume-sub{ font-size:clamp(18px,2.2vw,22px); color:#444; max-width:70ch }
.cta-row{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap }

.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:12px 16px;
  border-radius:14px; border:1px solid var(--hairline); background:var(--card);
  box-shadow:var(--shadow-s); transition:.3s }
.btn.primary{ background:var(--accent); color:#fff; border-color:color-mix(in srgb,var(--accent) 70%, black 10%) }

/* ================================
   3) GRID / CARDS
================================ */
.grid{ display:grid; gap:20px; grid-template-columns:repeat(12,1fr) }
.card{
  grid-column:span 12; background:var(--card); border:1px solid var(--hairline);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-s);
  transition:transform .18s ease, box-shadow .18s ease
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-l) }
.cover{ aspect-ratio:16/9; background:#eee center/cover }
.content{ padding:18px 18px 16px }
.card-title{ margin:0 0 6px; font-size:20px }
.card-link{ text-decoration:none; color:inherit }
.card-summary{ margin:0; color:#444; line-height:1.5 }
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.tag{ font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.05) }
@media(min-width:700px){ .card{ grid-column:span 6 } }
@media(min-width:1024px){ .card{ grid-column:span 4 } }

/* ================================
   4) SHARED PATTERNS (deduped)
================================ */
/* Narrow article */
.prose{ max-width:72ch; margin:0 auto }
.prose p{ line-height:1.7; margin:0 0 1em }
.prose h2{ font-size:clamp(22px,2.6vw,28px); margin:1.6em 0 .5em; line-height:1.2 }

/* Figures */
.figure{ margin:1.25em 0 }
.figure img{
  width:100%; height:auto; display:block; background:#eee; object-fit:cover;
  border-radius:16px; border:1px solid var(--hairline); box-shadow:var(--shadow-s)
}
.figure figcaption{ color:var(--subtle); font-size:13px; margin-top:8px }

/* Pull quote */
.pull{
  margin:1.2em 0; padding:12px 16px; color:inherit;
  border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--card) 75%, transparent);
  border-radius:12px;
}

/* Timeline (single definition used everywhere) */
.timeline{ list-style:none; padding:0; margin:8px 0 0 }
.timeline li{ display:grid; grid-template-columns:24px 1fr; gap:12px; padding:12px 0 }
.timeline li + li{ border-top:1px dashed var(--hairline) }
.t-bullet{
  width:10px; height:10px; border-radius:999px; background:var(--accent); position:relative; top:8px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)
}
.t-body h3,.t-body h4{ margin:0 0 6px; font-size:18px }
.t-meta{ margin:0 0 8px; color:var(--subtle); font-size:13px }
.t-points{ margin:0; padding-left:1.1em; line-height:1.6 }
.t-points li + li{ margin-top:.2em }

/* Facts list (single definition) */
.facts-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.facts-list li{
  display:flex; justify-content:space-between; gap:16px; padding:10px 0;
  border-bottom:1px dashed var(--hairline)
}
.facts-list li:last-child{ border-bottom:0 }
.facts-list span{ color:var(--subtle) }

/* Link lists with chevrons */
.link-list,.link-grid{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px }
.link-grid{ grid-template-columns:1fr }
.chev{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; padding:8px 0 }
.chev::after{ content:"›"; font-size:20px; line-height:1; transform:translateX(0); transition:transform .18s ease }
.chev:hover::after,.chev:focus-visible::after{ transform:translateX(3px) }

/* ================================
   5) FOOTER / DIALOG / ACCESS
================================ */
footer .footer{ display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; padding:48px 0 64px }
.footer-nav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
dialog{
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:18px 18px 16px; background:var(--card); box-shadow:var(--shadow-l);
  width:min(680px, 92vw)
}
dialog::backdrop{ background:rgba(0,0,0,.35) }
.acc-panel fieldset{ border:1px solid var(--hairline); border-radius:12px; padding:12px 12px 10px; margin:0 0 12px }
.acc-panel legend{ padding:0 6px; color:var(--subtle); font-size:13px }
.acc-panel label{ display:inline-flex; align-items:center; gap:8px; margin-right:12px; margin-top:6px }
.dialog-title{ margin:0 0 8px }
.dialog-sub{ margin:0 0 16px; color:#555 }
.dialog-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px }

/* Focus + Motion */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ================================
   6) ABOUT PAGES
   (Apple-like + Prose-first share the same primitives above)
================================ */
/* Apple-like modules */
.about--apple .hero--flat{ padding:72px 0 40px }
.about--apple .about-title{ margin:0 0 12px }
.about--apple .about-lede{ max-width:70ch }
.feature-row{ padding:48px 0 }
.feature{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:center }
.feature-media{ grid-column:span 12 }
.feature-media img{
  width:100%; height:auto; display:block; background:#eee; object-fit:cover;
  border:1px solid var(--hairline); border-radius:18px; box-shadow:var(--shadow-s)
}
.feature-body{ grid-column:span 12 }
.feature-title{ font-size:clamp(24px,3.2vw,34px); margin:0 0 8px }
.feature-row--alt{ background:color-mix(in srgb, var(--card) 75%, transparent) }

@media (min-width:768px){
  .about--apple .hero--flat{ padding:96px 0 56px }
  .feature-media{ grid-column:span 6 }
  .feature-body{ grid-column:span 6 }
  .link-grid{ grid-template-columns:repeat(2,1fr) }
}

/* Prose-first essay */
.about--prose .about-header{ padding:72px 0 36px }
.about--prose .about-h1{ margin:0 0 8px }
.about--prose .lede{ max-width:72ch }
@media (min-width:1024px){
  .about--prose .about-header{ padding:96px 0 48px }
  .prose{ position:relative }
  .sidenote{
    position:absolute; right:-22ch; width:20ch; max-width:36%; margin:0; top:0
  }
  .sidenote details{
    background:color-mix(in srgb, var(--card) 85%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)
  }
}

/* Portrait + simple about grid (used by earlier about variants) */
.about .about-hero .grid{ grid-template-columns:repeat(12,1fr); align-items:center; gap:24px }
.about-photo-wrap{ position:relative; grid-column:span 12; display:flex; justify-content:center }
.about-intro{ grid-column:span 12 }
.about-photo{
  width:min(280px,60vw); aspect-ratio:1/1; object-fit:cover; background:#ddd;
  border-radius:24px; border:1px solid var(--hairline); box-shadow:var(--shadow-l)
}
.about-grid{ grid-template-columns:repeat(12,1fr) }
@media (min-width:768px){
  .about-photo-wrap{ grid-column:span 5; justify-content:flex-start }
  .about-intro{ grid-column:span 7 }
}

/* ================================
   7) RESUME PAGE
================================ */
.resume .resume-header{ padding:72px 0 32px }
.name{ font-size:clamp(32px,5vw,44px); line-height:1.05; margin:0 }
.subtitle{ color:var(--subtle) }
.resume-actions,.toolbar{ display:flex; gap:8px; flex-wrap:wrap }
.resume-header{
  display:flex; justify-content:space-between; gap:24px; align-items:flex-start;
  flex-wrap:wrap; margin:24px 0 16px
}
.resume-header .contact{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; text-align:right }
.resume-header .contact a{ color:inherit; text-decoration:none }
@media (max-width:700px){
  .resume-header{ flex-direction:column; align-items:flex-start }
  .resume-header .contact{ align-items:flex-start; text-align:left; margin-top:12px }
}

/* === RESUME: harden layout regardless of wrapper === */

/* 1) Center the page content on desktop */
.resume .container,
.resume-container,
.resume { 
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 24px; /* safe default */
}

/* 2) Header: name block left, contact block right (stacks on mobile) */
.resume-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;     /* allow wrap on small screens */
  margin: 24px 0 16px;
}
.resume-header .contact{
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 700px){
  .resume-header{ flex-direction: column; align-items: flex-start; }
  .resume-header .contact{ text-align: left; align-items: flex-start; margin-top: 12px; }
}

/* 3) Two-column body on desktop (single column on mobile) */
.two-col{
  display: grid;
  grid-template-columns: 1fr;  /* mobile */
  gap: 28px;
}
@media (min-width: 980px){
  .two-col{
    grid-template-columns: 0.65fr 0.35fr; /* main | sidebar */
  }
}

/* 4) Experience rows: title/ company left, dates right */
.exp-item{ margin: 0 0 22px; }
.exp-top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;            /* dates drop under on small widths */
}
.exp-role{ font-weight: 600; }
.exp-meta{ color: var(--subtle); }
.exp-item ul{ margin: 8px 0 0 18px; line-height: 1.6; }
.exp-item ul li + li{ margin-top: .2em; }

/* 5) Skills chips */
.skill-group{ margin: 0 0 16px; }
.chips{ display:flex; flex-wrap:wrap; gap: 8px; }
.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid var(--hairline);
}


/* Work/Education/Awards reuse shared .timeline/.facts-list */

/* Print */
@media print{
  :root{ --bg:#fff; --text:#000; --hairline:rgba(0,0,0,.2) }
  body{ background:#fff; color:#000 }
  .site-header,.btn{ display:none !important }
  .section{ padding:0 }
  .hairline,.hairline--section{ margin:8px 0 }
  a{ color:#000; text-decoration:underline }
}

/* ================================
   8) PORTFOLIO CATALOG
================================ */
.portfolio-head{ margin-bottom:12px }
.filters{
  position:sticky; top:56px; z-index:40; margin:12px 0 20px; padding:12px;
  background:color-mix(in srgb, var(--card) 85%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--shadow-s)
}
.filters-row{ display:grid; grid-template-columns:1fr; gap:10px; align-items:center }
.filters input[type="search"], .filters select{
  width:100%; padding:12px 14px; border:1px solid var(--hairline);
  border-radius:12px; background:var(--card)
}
.chipset{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0 }
.chipset input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none }
.chipset .chip{
  font-size:12px; padding:8px 12px; border-radius:999px;
  background:rgba(0,0,0,.05); border:1px solid var(--hairline); cursor:pointer; user-select:none
}
.chipset input:checked + .chip{
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color:color-mix(in srgb, var(--accent) 35%, var(--hairline))
}
.filters-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:14px; color:var(--subtle) }
.btn.btn-reset{ padding:8px 12px; border-radius:12px; background:var(--card); border:1px solid var(--hairline) }
.projects .card .cover{ background-color:#eee }
.projects .card .content{ padding:18px }
@media (min-width:768px){
  .filters-row{ grid-template-columns:1fr 160px auto; gap:12px }
}

/* ================================
   9) CONTACT (single-form version)
================================ */
.contact-head{ margin-bottom:16px }
.contact-form{
  background:var(--card); border:1px solid var(--hairline); border-radius:16px;
  padding:18px; box-shadow:var(--shadow-s); display:grid; gap:16px
}
.field{ margin:0 }
.field label{ display:block; margin:0 0 6px; font-size:14px; color:var(--subtle) }
.field input,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--hairline);
  border-radius:12px; background:var(--card); color:inherit
}
.field input:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.contact-actions{ display:flex; gap:8px; flex-wrap:wrap }

/* ================================
   EOF
================================ */