:root{
    --cream:#F5F4EC; --card:#FFFFFF;
    --charcoal:#55514A; --stone:#6B655D; --espresso:#4A463F;
    --orange:#F2782A; --green:#50C880; --yellow:#F2D024;
    --line:rgba(85,81,74,0.16);
    --serif:'Fraunces',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif; --round:'Fredoka',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--charcoal);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");}
  .wrap{max-width:920px;margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-0.01em;color:var(--charcoal)}
  .btn{font-family:var(--sans);font-weight:600;font-size:18px;border:none;cursor:pointer;border-radius:14px;padding:12px 24px;transition:transform .1s ease, box-shadow .1s ease;display:inline-block}
  .btn-primary{background:var(--orange);color:var(--espresso);box-shadow:0 4px 0 #C25C1B}
  .btn-primary:hover{transform:translateY(1px);box-shadow:0 3px 0 #C25C1B}
  .btn-primary:active{transform:translateY(4px);box-shadow:0 0 0 #C25C1B}
  .kicker{font-family:var(--round);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);margin-bottom:14px;display:inline-flex;align-items:center;gap:9px}
  .kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange)}

  nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(245,244,236,.82);border-bottom:1px solid transparent;transition:border-color .3s}
  nav.scrolled{border-color:var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px;max-width:1120px;margin:0 auto;padding:0 28px}
  .brand{display:flex;align-items:center;gap:10px}
  .brand img{width:36px;height:auto}
  .brand span{font-family:var(--round);font-weight:600;font-size:27px;color:var(--orange);line-height:1}
  .nav-right{display:flex;align-items:center;gap:22px}
  .nav-link{font-size:15px;color:var(--stone);font-weight:500}
  .nav-link:hover{color:var(--charcoal)}

  header{padding:66px 0 40px}
  header .lead{color:var(--stone);font-size:19px;max-width:32em;margin-top:18px}
  h1{font-size:clamp(34px,4.6vw,52px)}

  .bio{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px;margin:22px 0}
  .photo{width:200px;height:220px;border-radius:18px;object-fit:cover;display:flex;align-items:center;justify-content:center;font-family:var(--round);font-weight:600;font-size:52px;color:var(--espresso)}
  .bio h2{font-size:27px}
  .bio .role{font-family:var(--round);font-size:14px;color:var(--stone);margin:4px 0 14px}
  .bio p{font-size:16px;color:var(--charcoal)}
  .bio p + p{margin-top:12px}
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .tags span{font-size:12.5px;font-weight:600;color:var(--espresso);background:rgba(80,200,128,.2);padding:5px 12px;border-radius:999px}

  section.cta{text-align:center;padding:56px 0 84px}
  section.cta h2{font-size:clamp(26px,3vw,34px)}
  section.cta p{color:var(--stone);margin:12px 0 22px}

  footer{border-top:1px solid var(--line);padding:38px 0}
  .foot-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1120px;margin:0 auto;padding:0 28px}
  .foot-links{display:flex;gap:22px;font-size:14px;color:var(--stone)}
  .foot-links a:hover{color:var(--charcoal)}

  @media(max-width:720px){
    .bio{grid-template-columns:1fr;gap:20px}
    .photo{width:140px;height:150px;font-size:40px}
    .nav-link{display:none}
  }