/* Fonts: Inter and Source Serif 4 (SIL Open Font License), hosted locally */
@font-face{font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap; src:url("source-serif-4-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap; src:url("source-serif-4-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:700; font-display:swap; src:url("source-serif-4-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4"; font-style:italic; font-weight:400; font-display:swap; src:url("source-serif-4-latin-400-italic.woff2") format("woff2")}

  :root{
    --bg:#faf8f3; --surface:#ffffff; --ink:#1f2a24; --muted:#5b665f;
    --line:#e3e0d6; --green:#2f5741; --green-soft:#e6eee7; --accent:#b5683c;
    --serif:"Source Serif 4", Georgia, serif;
    --sans:"Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:72px}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.65}
  a{color:var(--green); text-underline-offset:3px}
  a:hover{color:var(--accent)}
  img{max-width:100%}
  .wrap{max-width:1040px; margin:0 auto; padding:0 24px}

  header{position:sticky; top:0; z-index:10; background:rgba(250,248,243,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
  .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
  .brand{font-family:var(--serif); font-weight:700; font-size:1.25rem; color:var(--ink); text-decoration:none; white-space:nowrap}
  nav ul{list-style:none; display:flex; gap:20px; margin:0; padding:0}
  nav a{color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:500}
  nav a:hover{color:var(--green)}
  .menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font:inherit; color:var(--ink)}

  .hero{display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:center; padding:64px 0 48px}
  .photo{width:260px; height:325px; border-radius:14px; object-fit:cover; object-position:center 20%; display:block; background:var(--green-soft)}
  .eyebrow{font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 10px}
  h1{font-family:var(--serif); font-size:2.7rem; line-height:1.15; margin:0 0 6px}
  .role{color:var(--muted); margin:0 0 20px; font-size:1.05rem}
  .lead{font-size:1.08rem; margin:0 0 20px}
  .tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none}
  .tags li{background:var(--green-soft); color:var(--green); border-radius:999px; padding:4px 12px; font-size:.85rem; font-weight:500}
  .links{display:flex; flex-wrap:wrap; gap:10px}
  .btn{display:inline-block; padding:9px 16px; border-radius:8px; border:1px solid var(--green); color:var(--green); text-decoration:none; font-weight:600; font-size:.9rem}
  .btn.primary{background:var(--green); color:#fff}
  .btn:hover{background:var(--accent); border-color:var(--accent); color:#fff}

  section{padding:56px 0; border-top:1px solid var(--line)}
  h2{font-family:var(--serif); font-size:1.85rem; margin:0 0 8px}
  .sub{color:var(--muted); margin:0 0 32px; max-width:720px}
  h3{font-family:var(--serif); font-size:1.2rem; margin:0 0 8px; line-height:1.3}
  .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px}
  .card p{margin:0 0 10px}
  .card .meta{font-size:.86rem; color:var(--muted); margin:0}
  .card .num{font-family:var(--serif); color:var(--accent); font-weight:700; font-size:.95rem; display:block; margin-bottom:6px}

  .skills{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .skills ul{margin:0; padding-left:18px}
  .skills li{margin-bottom:4px}

  .pubs{list-style:none; padding:0; margin:0}
  .pubs li{padding:14px 0; border-bottom:1px dashed var(--line)}
  .pubs .status{display:inline-block; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-right:6px}
  .pubs .talk{color:var(--muted); font-size:.92rem}
  h3.group{font-family:var(--sans); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:30px 0 4px}

  .timeline{list-style:none; padding:0; margin:0}
  .timeline li{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:14px 0; border-bottom:1px solid var(--line)}
  .timeline .when{color:var(--muted); font-size:.92rem; font-variant-numeric:tabular-nums}
  .timeline strong{display:block}
  .timeline .note{color:var(--muted); font-size:.92rem; display:block}

  .outreach{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center}
  .gallery{display:grid; grid-template-columns:1fr; gap:12px; max-width:380px; justify-self:center}
  .gallery img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; display:block}
  blockquote{margin:0 0 16px; padding-left:16px; border-left:3px solid var(--accent); font-family:var(--serif); font-size:1.15rem}

  .contact{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start}
  .contact ul{list-style:none; padding:0; margin:0}
  .contact li{padding:8px 0; border-bottom:1px solid var(--line)}
  .contact span{display:inline-block; width:130px; color:var(--muted); font-size:.9rem}

  footer{padding:32px 0 48px; color:var(--muted); font-size:.85rem; border-top:1px solid var(--line)}


  /* Icons: Font Awesome Free (CC BY 4.0, https://fontawesome.com) */
  .ic{width:1em; height:1em; fill:currentColor; vertical-align:-.125em}
  .social{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; padding:0; list-style:none}
  .social a{display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:1.15rem; text-decoration:none; transition:background .15s,color .15s}
  .social a:hover{background:var(--green); color:#fff}
  .mv{display:grid; grid-template-columns:1.4fr 1fr; gap:20px}
  .mv .card h3{display:flex; align-items:center; gap:10px}
  .mv .card h3 .ic{color:var(--accent)}
    .pub{display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:start; padding:18px 0; border-bottom:1px dashed var(--line)}
  .thumb{width:96px; height:96px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
  .thumb .ic{font-size:2rem}
  .t1{background:linear-gradient(150deg,#4f7d60,#2f5741)} .t2{background:linear-gradient(150deg,#c98656,#a3582f)}
  .t3{background:linear-gradient(150deg,#56707f,#344955)} .t4{background:linear-gradient(150deg,#8ea86a,#5e7a43)}
  .pub p{margin:0}
  .pub .status{display:inline-block; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-right:6px}
  .plinks{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
  .plinks a{font-size:.8rem; font-weight:600; text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:3px 9px; background:var(--surface)}
  .plinks a:hover{border-color:var(--accent)}
  .contact li .ic{color:var(--green); margin-right:10px; width:1.05em}
  @media (max-width:880px){ .mv{grid-template-columns:1fr} .pub{grid-template-columns:72px 1fr; gap:14px} .thumb{width:72px; height:72px} .thumb .ic{font-size:1.5rem} }


  /* Stronger section separation: alternating full-width bands and accented headings */
  section{padding:72px 0; border-top:none}
  main > section:nth-of-type(odd){background:#f0ece2; box-shadow:0 0 0 100vmax #f0ece2; clip-path:inset(0 -100vmax)}
  main > section:nth-of-type(odd) .card{border-color:#e0dacb}
  h2{font-size:2.15rem; margin-bottom:12px}
  h2::after{content:""; display:block; width:56px; height:4px; border-radius:2px; background:var(--accent); margin-top:12px}
  .hero{padding-bottom:64px}

  @media (max-width:880px){
    nav ul{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px}
    nav ul.open{display:flex}
    nav li a{display:block; padding:10px 0}
    .menu-btn{display:block}
    .hero{grid-template-columns:1fr; gap:28px; padding-top:40px}
    .photo{width:180px; height:225px}
    h1{font-size:2.1rem}
    .grid,.skills,.contact,.outreach{grid-template-columns:1fr}
    .timeline li{grid-template-columns:1fr; gap:2px}
  }

  /* ---------- Multi-page additions ---------- */
  header nav a.cv{color:#fff; background:var(--green); padding:6px 14px; border-radius:999px}
  header nav a.cv:hover{background:var(--accent); color:#fff}
  header nav a[aria-current="page"]{color:var(--green); box-shadow:inset 0 -2px 0 var(--accent)}
  header nav a{text-transform:uppercase; letter-spacing:.08em; font-size:.78rem}

  /* Home hero */
  .home-hero{display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:center; padding:72px 0 64px}
  .hello{font-size:1.05rem; color:var(--muted); margin:0 0 10px}
  .hello strong{color:var(--ink)}
  .big{font-family:var(--serif); font-size:2.75rem; line-height:1.12; margin:0 0 22px; font-weight:700; letter-spacing:-.01em}
  .big a{color:var(--green); text-decoration:none; background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 3px no-repeat; transition:color .15s, background-size .2s}
  .big a:hover{color:var(--accent); background-size:100% 100%; color:#fff}
  .big .hl{color:var(--green); background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 3px no-repeat; transition:color .15s, background-size .2s; border-radius:2px; cursor:default}
  .big .hl:hover{background-size:100% 100%; color:#fff}
  .status{display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 16px 7px 12px; font-size:.88rem; font-weight:600; color:var(--ink); margin:0 0 20px}
  .dot{width:10px; height:10px; border-radius:50%; background:#3f9a62; box-shadow:0 0 0 0 rgba(63,154,98,.6); animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,154,98,.55)}70%{box-shadow:0 0 0 10px rgba(63,154,98,0)}100%{box-shadow:0 0 0 0 rgba(63,154,98,0)}}
  @media (prefers-reduced-motion: reduce){.dot{animation:none}}
  .facts{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px}
  .facts li{display:flex; gap:12px; align-items:flex-start}
  .facts .ic{color:var(--accent); margin-top:5px; flex:none}
  .portrait-wrap{position:relative}
  .portrait-wrap img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:22px; display:block}
  .portrait-wrap::before{content:""; position:absolute; inset:18px -18px -18px 18px; border:2px solid var(--accent); border-radius:22px; z-index:-1}

  /* Section headings in the austin-dsouza style */
  .lower{font-family:var(--serif); font-size:2.3rem; margin:0 0 6px; text-transform:lowercase}
  .lower::after{content:none}
  .kicker{font-family:var(--serif); font-style:italic; color:var(--muted); margin:0 0 30px; font-size:1.08rem}

  /* Tiles */
  .tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
  .tile{display:block; text-decoration:none; color:var(--ink)}
  .tile .img{border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--green-soft); position:relative}
  .tile .img img,.tile .img svg{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease}
  .tile:hover .img img,.tile:hover .img svg{transform:scale(1.05)}
  .tile .cap{display:flex; align-items:baseline; justify-content:space-between; margin-top:14px}
  .tile .cap span{font-family:var(--serif); font-size:1.45rem; font-weight:700}
  .tile .cap .ic{color:var(--accent); transition:transform .2s}
  .tile:hover .cap .ic{transform:translateX(5px)}
  .tile p{margin:4px 0 0; color:var(--muted); font-size:.93rem}

  /* Subpage hero */
  .page-hero{padding:64px 0 8px}
  .page-hero .lower{font-size:3rem}
  .crumb{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:600; margin:0 0 10px}
  .crumb a{color:inherit; text-decoration:none}
  .page-body{padding:24px 0 72px}
  .page-body section{padding:0; background:none!important; box-shadow:none!important; clip-path:none!important}
  .next{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px 0 64px; border-top:1px solid var(--line)}
  .next a{font-family:var(--serif); font-size:1.3rem; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:10px; color:var(--green); text-transform:none; letter-spacing:0}
  .next a:hover{color:var(--accent)}
  .next small{display:block; font-family:var(--sans); font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600}

  /* Footer / let's connect */
  .connect{background:var(--green); color:#eef3ef; padding:64px 0 36px; margin-top:0}
  .connect h2{color:#fff; text-transform:lowercase; font-size:2.3rem}
  .connect h2::after{background:#e3a57c}
  .connect p{max-width:620px; color:#d6e2d9}
  .connect .row{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:22px 0 40px}
  .connect .mailbtn{display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--green); padding:11px 20px; border-radius:999px; font-weight:600; text-decoration:none}
  .connect .mailbtn:hover{background:#e3a57c; color:#fff}
  .connect .social a{background:rgba(255,255,255,.12); color:#fff}
  .connect .social a:hover{background:#fff; color:var(--green)}
  .connect .social{margin:0}
  .connect .legal{border-top:1px solid rgba(255,255,255,.18); padding-top:20px; font-size:.82rem; line-height:1.7; color:#b9cbbd}

  @media (max-width:880px){
    .home-hero{grid-template-columns:1fr; gap:36px; padding-top:40px}
    .home-hero .portrait-wrap{max-width:300px; order:-1}
    .big{font-size:2.2rem}
    .tiles{grid-template-columns:1fr 1fr; gap:18px}
    .page-hero .lower{font-size:2.3rem}
  }
  .quals{margin-top:56px}
  .quals h3, .offclock h3{font-size:1.4rem}
  .offclock{display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:center; margin-top:64px; padding:40px; background:var(--green-soft); border-radius:22px}
  .offclock img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 35%; border-radius:16px; display:block}
  .offclock p:last-child{margin:0}
  .about-grid{display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start}
  .about-grid .portrait-wrap{position:sticky; top:96px}
  @media (max-width:880px){ .offclock{grid-template-columns:1fr; gap:24px; padding:24px} .offclock img{max-width:300px} .about-grid{grid-template-columns:1fr; gap:36px} .about-grid .portrait-wrap{position:relative; max-width:260px} }
  @media (max-width:540px){ .tiles{grid-template-columns:1fr} }
  .connect .legal a{color:#e6efe8}
  .legal-text{max-width:760px}
  .legal-text article{padding:8px 0 40px}
  .legal-text article + article{border-top:1px solid var(--line); padding-top:40px}
  .legal-text h2{font-size:1.8rem}
  .legal-text h3{font-size:1.15rem; margin:28px 0 8px}
  .legal-text ul{padding-left:20px}
  .flip{transform:scaleX(-1)}
  .next ul{display:none}