:root{
  --panel:#08313d;   /* teal field behind the turtle */
  --turtle:#dcecf1;
  --bg:#0a0e10;
  --accent:#43b9d6;
  --ink:#e2e9ec;
  --muted:#79868c;
  --line:#1d262a;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:grid;
  grid-template-columns:42% 58%;
}

/* ---------- left: the turtle field ---------- */
.panel{
  background:var(--panel);
  display:grid;
  place-items:center;
  padding:30px;
  position:relative;
  overflow:hidden;
}
.panel svg{
  width:min(62%,330px);
  height:auto;
  display:block;
  color:var(--turtle);
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(-11px) rotate(-2.2deg)}
  50%{transform:translateY(11px) rotate(2.2deg)}
}
@media(prefers-reduced-motion:reduce){ .panel svg{animation:none} }

.mark{
  position:absolute;
  bottom:22px;
  left:26px;
  color:rgba(255,255,255,.28);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:700;
}

/* ---------- right: the content ---------- */
.content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(30px,5vw,76px);
}
.head,.body{min-width:0}

h1{
  margin:0 0 6px;
  font-size:clamp(34px,4.6vw,62px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.98;
}
.role{
  margin:0 0 26px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--accent);
}

.body p{margin:0 0 15px;font-size:16.5px;max-width:54ch}
.body .ps{font-size:13.5px;color:var(--muted)}

.links{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;align-items:flex-start}
.links a{
  padding:10px 17px;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:border-color .15s,color .15s;
}
.links a:hover,.links a:focus{border-color:var(--accent);color:var(--accent);outline:none}

.footer{
  margin-top:30px;
  padding-top:15px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12.5px;
}

a{color:var(--accent)}

/* ---------- phones: the panel colour carries the name too, so the
     turtle and the heading read as one block instead of a band you
     scroll past before anything happens ---------- */
@media(max-width:820px){
  body{display:block}
  .panel{min-height:0;padding:34px 24px 14px}
  .panel svg{width:132px;animation-duration:7s}
  .mark{display:none}
  .content{display:block;padding:0}
  .head{background:var(--panel);padding:0 24px 30px;margin:0}
  h1{font-size:38px;line-height:1}
  .role{margin:10px 0 0;font-size:11.5px;letter-spacing:.13em;line-height:1.5}
  .role .sep{display:none}
  .role .loc{display:block}
  .body{padding:30px 24px 38px}
  .body p{font-size:16px}
  .footer{flex-direction:column;gap:4px}
}